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

Question

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

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

我目前的方法如下:

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

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

Answer 1

在 dat.GUI 中，FunctionController 类负责按钮。如果你看its source code ，那里没有条件逻辑。 Controller 将监听按钮上的 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
});

这将向 Controller 添加属性 disabled 以捕获 click 事件，这样按钮处理程序就不会被触发。禁用按钮变得更简单:

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

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