在dat.gui中禁用按钮的方法？

Question

我正试图找到一种在dat.gui中轻松禁用/启用按钮的方法。

我已经设置了dat.gui来控制动画。当动画结束时，我希望“播放”按钮被禁用。我尝试将“禁用”属性添加到按钮的DOM元素中，但在设置该属性后单击该按钮时，仍会看到相应的函数触发。

我目前的方法如下：

1. 找到与dat.gui接口中的按钮对应的dat.gui元素
2. 创建一个半透明和黑色的新DOM元素，并将其添加到li元素中，使按钮的内容变得灰色。
3. 在绑定到此按钮的函数中，检查按钮中是否存在“禁用”DOM元素，如果存在，则不要执行函数的其余部分。

这是一个黑客，我很想知道是否有什么方法可以禁用dat.gui中内置的按钮，或者是一些我不知道的更好的方法。

Answer 1

在dat.GUI中，FunctionController类负责按钮。如果您查看它的源代码，其中没有条件逻辑。控制器将在按钮上侦听click事件，并总是在单击时调用该函数。这意味着您不会从这里的库获得任何帮助-您需要在处理程序中签入按钮是否已禁用。类似于这样的东西：

// Find the GUI controller listening to given property on given object
function getController(gui, object, property)
{
  for (var i = 0; i < gui.__controllers.length; i++)
  {
    var controller = gui.__controllers[i];
    if (controller.object == object && controller.property == property)
      return controller;
  }
  return null;
}

...

object.button = function()
{
  // Don't do anything if the button is disabled
  if (getController(gui, this, "button").domElement.hasAttribute("disabled"))
    return;

  alert("Button clicked");
};
gui.add(object, "button");

...

// Disable button
getController(gui, object, "button").domElement.setAttribute("disabled", "");

请注意，在dom.GUI中没有针对禁用元素的特殊样式，您必须为此添加自己的样式。考虑到按钮的情况是属性标签而不是实际按钮，这并不是很简单--我认为您必须将disabled属性放在controller.domElement.parentNode上而不是controller.domElement上。然后，您应该能够为您的样式使用选择器[disabled] > .property-name。

编辑：您实际上可以通过扩展FunctionController，以一种更通用的方式来实现这一点

function blockEvent(event)
{
  event.stopPropagation();
}

Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
  get: function()
  {
    return this.domElement.hasAttribute("disabled");
  },
  set: function(value)
  {
    if (value)
    {
      this.domElement.setAttribute("disabled", "disabled");
      this.domElement.addEventListener("click", blockEvent, true);
    }
    else
    {
      this.domElement.removeAttribute("disabled");
      this.domElement.removeEventListener("click", blockEvent, true);
    }
  },
  enumerable: true
});

这将向控制器添加一个属性disabled，以捕获click事件，从而不会触发按钮处理程序。因此，禁用按钮变得更简单：

getController(gui, object, "button").disabled = true;

并且按钮处理程序可以保持不变，它只是不会被触发为禁用按钮。

Answer 2

在这里，我能想到的最简单的方法是禁用dat的单个元素：

let gui = new dat.GUI();  
let uiElement = gui.add(myObject, 'myPropertyName');
 
uiElement.__li.style = "opacity: 0.5; filter: grayscale(100%) blur(1px); pointer-events: none;"; 

旧浏览器可能不支持pointer-events: none;，因此可以选择添加：

disableAll(uiElement.__li);

function disableAll(element){    
    for( var i = 0; i < element.childNodes.length; ++i){
        let elt = element.childNodes[i];
        disableAll(elt);
        elt.disabled = true;
    }
}

这看起来很“烦人”，但是在官方的dat GUI API中没有这样的功能，即使它在里面，它也很可能会做一些非常类似的事情。

最后，通过API，您可以完全删除一个元素：

uiElement.remove();