dat.gui 控制显示_隐藏状态

dat.gui 控制显示/隐藏状态

作为一枚前端工程师，如果你用过 three.js，那么你一定被安利过了 dat.gui 这个工具。

如果你没用过 dat.gui，又感兴趣的话，建议你去官方仓库去了解下 https://github.com/dataarts/dat.gui。

这里还有个很有趣的网站：http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage，可以帮助你直观的感受下，dat.gui 的用法。

通过 dat.gui，我们可以很方便的自定义我们的属性控制器。

但是最近使用该工具 🔧 的时候，碰到一个问题。

我不想要一直显示该工具，而是想通过自定义的方式，去控制其显隐状态。

按理说，这个是很正常的需求，一般的工具在设计的时候，应该都会考虑到。

但是对于 dat.gui 却，不适合。

至于为什么，我这里这么说，接下来听我娓娓道明缘由，你就明白了。

首先，对于一个组件，我们想要控制其显示/隐藏状态，无非有几种方式：

1. 手动将该 dom 元素从 dom 树中移除或者加入。
2. 设置 display 样式。

第一种，一般不推荐，因为开销比较大，但是其实对于一般的小项目，没有多少性能的影响。

第二种，自然就是我们的首选了。

gui 也是这样操作的，它提供了 hide api，让我们可以调用这个 api，将该组件隐藏掉。

但是问题就出在，默认情况下，只要 new 了 GUI，他就会自动挂载到 body 上去。

当然，我们初始化配置的时候，可以传入 autoPlace 参数，并将其设置为 false，那么就不会自动挂载到 body 上去了。

看似很合情合理，但是，等等，我要是想一进来就隐藏呢？

就只有在进来的时候先不挂到 dom 树上去，第一次显示的时候，再挂载到 dom 树上去，这样做倒是可行。

但是还有没有更简单的方式呢？

我不禁陷入了思考🤔，在思考的同时翻了翻 dat.gui 的源码，你别说，还真有。

可以在初始化的时候，传入 hideable，并将其设置为 true 就好了。

这样设置了以后，直接按 h 键，就会切换显隐藏状态了。

那么，采用这个方式，再配合 hide api，不就能够实现，初始化的时候隐藏掉面板，后面有需要的时候，按 h 就能切换显隐了么。

理想很丰满，现实很骨感。

可以是可以，但是却有几点问题。

1. 所有的面板，共用这个 h 按键来控制。
2. 这个控制，还与面板实例的 show、hide api 不兼容。
3. 如果面板开始通过 hide 隐藏，有时得按几下，才能显示出来面板。

为何有上述问题，我们看看代码就知道了。

keydownHandler 是 GUI 对象上的静态方法。他执行 toggleHide 方法去显示或者隐藏面板。

这个方法，也是一个 GUI 对象上的静态方法。它居然是通过 hide 这个全局变量来控制所有具备隐藏功能的面板的显隐状态的。

你在外部获取不到 hide，自然就无法解决上述的第三个问题，就只能试着调一下这个 toggleHide 静态方法来解决这个尴尬的问题。

问题是，你在 js 中能这样操纵，在 typescript 中就无法这样操作了，因为编译的时候，就会提示你目标对象上不存在这个方法。

你还得自己想办法，去重载类型定义。

这样做，就会导致代码越写越麻烦。

这地方，我之所以没说，直接改源码，而是说重载，是因为，我们通过 npm 安装的第三方模块，我们自己改了源码不起作用，因为别人用你的源码去开发，就得不到同样的结果，就会导致使用者产生困惑了。

这就是给别人埋雷的行为。

但是有没有一种比较合理的方式，能够解决我们需求，同时又处理的很漂亮呢？

答案当然是肯定的，就是自己写事件去改变 gui.domElement.style.display 的状态。

类似于下面这种做法：

这样做了以后，我们就可以对每个面板，分别配置一个独有的控制显隐的按键了，上面的问题自然就迎刃而解了。

那有人可能会问了，就一个简单的实现原理，你啰里八嗦的说这么一大堆是为何般呐？

虽然原理很简单，但是这是经过自己一番实践的结论，足可以称之为经验之谈了。

我当时发现了 toggleHide 解决不了我的问题的时候，我甚至想过直接给官方提 issue 或者以 pull request 的方式，改一下代码。

但是后来一想，我这个需求毕竟是小众需求，我那么一改，谁知道又会影响到什么地方呢？

常有人开玩笑说，代码就如同屎山 💩 一样，改动一点，连锁反应很大，更别说是这种开源代码了。

当然这里并非贬义，而是说，开源代码，一般对功能方面，尽量会追求通用性，所以对某些功能性代码就会有个抉择和平衡了，不能覆盖到所有人的需求，也很正常。