Dat.gui control custom placement and dragging

In the use of vue3-cesium When developing some functions , Parameters need to be adjusted . although cesium Bring with you cesium.knockout Control is used to adjust parameters , But because the author is right cesium Not familiar enough , It's a little difficult to use , Plus previous studies Three.js Used in dat.gui plug-in unit , It's very convenient , It replaces .

dat.gui Adjust the parameters, which will not be repeated here , There are many online materials .

My current requirement is to drag and drop controls . The idea is simple ：

1. obtain dat.gui Of dom
2. Change its position when dragging

But in the process , There are still some problems that need attention , It is hereby recorded that .

1. obtain dat.gui Of dom

const datGUI = new dat.GUI()
  // datGUI Style adjustment 
  datGUI.domElement.style = 'position:absolute;top:10px;left:10px;'

The above code creates a dat.GUI object , And pass datGUI.domElement Get the corresponding dom, Here I modified its location attribute , Place it in the upper left corner from the default top right .

What needs to be noted here is , If the dat.GUI Object is added to a dom, By controlling this dom To indirectly control dat.GUI, The following methods should be adopted ：

const datGUI = new dat.GUI({
     autoPlace: false })
const guiContainer = document.getElementById('guiContainer')
guiContainer.appendChild(datGUI.domElement)

That is, it needs to be set autoPlace attribute , If you directly control , You don't need to , If it is set, the control will not be displayed .

2. Change its position when dragging

I believe everyone knows the process of dragging general objects , I won't go into details here , Just say dat.gui Control .

There is a conflict between the functions of drag control and drag bar for adjusting parameters of numeric type

Just imagine , When you want to drag the progress bar to adjust parameters , The whole control also moves , Is the experience very bad ？
therefore , Here, you need to separate the drag control from the event of dragging the progress bar .

Train of thought ： By preventing progress bar dragging events from bubbling . But this is obviously troublesome , Just imagine , Many people work together to complete a project , When summarizing, you have to modify the summary file . The actual effect has not been verified , Interested partners can try

So this idea was abandoned by me .

Train of thought two ： By judging whether the current trigger event object is the specified object
First , Will the whole dat.gui Control output , Observe its structure , Look for the difference .

console.log(datGUI.domElement)

The output is as follows

here ,ul Under the li Is the parameter we added , Expand discovery , Can identify each part , There are class names and tpye

At first, my idea was to limit the drag bar , But the result is not very good , Because the input box can also be dragged , I also want to limit the input box , But it feels too troublesome , Let me show you the conditions , Is it too much trouble .

 if (event.target.className !== 'slider-fg' && event.target.className !== 'slider' && event.target.getAttribute('Type') !== 'text') 

Later, it was directly restricted , Only in the left part of the control , That is, drag the parameter name part , To drag

  if (Event.target.className === 'property-name')

It's much clearer at once . Then drag the progress bar or input box , It is the normal control effect without the whole control running .

but , By this time , The effect is not very good , Because there is text on the control , The default event of the browser will be triggered when dragging , Make the dragging effect of the control abnormal . At this time, you need to onmousedown Add the following code to ：

 Event.preventDefault()

perhaps

return false

here , The effect is relatively nice 了

The drag function is as follows ：

 datGUI.domElement.onmousedown = function (Event) {
    
    Event = Event || window.Event
    //console.log(datGUI.domElement)
    // console.log(Event.target)
    // console.log(Event.currentTarget)
 
    //  Gets the slider offset 
    var left = Event.clientX - datGUI.domElement.offsetLeft
    var top = Event.clientY - datGUI.domElement.offsetTop
    if (Event.target.className === 'property-name') {
    
      document.onmousemove = function (event) {
    
        event = event || window.event
        datGUI.domElement.style.left = event.clientX - left + 'px'
        datGUI.domElement.style.top = event.clientY - top + 'px'
      }
    }
    document.onmouseup = function () {
    
      document.onmousemove = null
      document.onmouseup = null
    }
    Event.preventDefault()
    // return false
  }