在dat.gui中禁用按钮的方法？ [英] Method for disabling a button in dat.gui?

问题描述

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

I am trying to figure out a way to easily disable/enable buttons within dat.gui.

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

I have dat.gui set up to control an animation. When the animation reaches its end, I want the "Play" button to become disabled. I have tried adding a "disabled" attribute to the DOM elements of the button, but I am still seeing the corresponding function fire when the button is clicked after this attribute is set.

我目前的方法如下：

1. 找到对应的 li 元素到dat.gui界面的按钮


2. 创建一个半透明和黑色的新DOM元素，并将其添加到 li 元素以使按钮的内容变灰。


3. 在绑定到此按钮的函数中，检查按钮内是否存在此禁用DOM元素，如果存在，不要执行剩下的功能。

1. Locate the li element that corresponds to the button in the dat.gui interface
2. Create a new DOM element that is semi-transparent and black, and add this inside the li element to gray out the contents of the button.
3. In the function bound to this button, check for the existence of this "disabled" DOM element within the button, and if it exists, refrain from executing the rest of the function.

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

This is a hack, and I would love to know if there was some method for disabling a button built right into dat.gui, or some better method that I am not aware of.

推荐答案

在dat.GUI中 FunctionController class负责按钮。如果您查看其源代码，那里没有条件逻辑。控制器将在按钮上收听点击事件，它将始终在点击时调用该功能。这意味着您不会从库中获得任何帮助 - 您需要检查处理程序是否禁用该按钮。这些内容：

In dat.GUI the FunctionController class is responsible for buttons. If you look at its source code, there is no conditional logic in there. The controller will listen to click events on the button and it will always call the function on click. This means that you won't get any help from the library here - you need to check in the handler whether the button is disabled. Something along these lines:

// 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中的禁用元素没有特殊样式，你必须添加你自己的风格。鉴于您在按钮的情况下看到的是属性标签而不是实际按钮，这不会是非常简单的 - 我认为您必须将禁用 controller.domElement.parentNode 上的属性，而不是 controller.domElement 。然后你应该可以使用选择器 [禁用]> .property-name 为您的样式。

Note that there is no special styling for disabled elements in dom.GUI, you would have to add you own styles for that. Given that what you see in case of a button is the property label rather than the actual button this isn't going to be quite trivial - I think you will have to place the disabled attribute on controller.domElement.parentNode rather than controller.domElement. Then you should be able to use the selector [disabled] > .property-name for your styles.

编辑：您实际上可以通过更通用的方式执行此操作扩展 FunctionController ：

Edit: You can actually do this in a more generic way by extending 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
});

这会将属性禁用添加到控制器将捕获单击事件，以便不触发按钮处理程序。禁用该按钮变得更简单：

This will add a property disabled to the controller that will catch click events so that the button handler isn't triggered. Disabling the button gets simpler then:

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

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

And the button handler can stay unchanged, it simply won't be triggered for disabled buttons.

这篇关于在dat.gui中禁用按钮的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！