Ketcher源码学习-储备知识-dependencies(5)-更多依赖(下)

七、ketcher-react package中安装的依赖

1. 解决浏览器兼容性问题：

(1) element-closest-polyfill：实现Element.closest方法。

(2) intersection-observer：实现Intersection Observer功能。

(3) regenerator-runtime：使得经Babel转换的async函数可正常运行。

(4) url-search-params-polyfill：实现URLSearchParams功能。

(5) whatwg-fetch：实现Fetch功能。

2. React Hook：

(1) react-dropzone：用于创建文件的drag & drop zone。

(2) react-intersection-observer：用于监测元素进入/离开视图。threshold取值范围：0 (刚一进入视图即可触发) - 1 (元素完全在视图内才会触发)。

(3) use-resize-observer：用于监测元素尺寸变化。

3. React Component：

(1) react-colorful：一个颜色选择器组件。Ketcher中进一步包装为ColorPicker组件。

(2) react-contextmenu：一个用鼠标右键触发的快捷菜单组件。Ketcher中进一步包装为FGContextMenu组件，在集成trigger功能后再进一步包装为StructEditor组件。

4. clsx：构建元素的className，可接收任意数量的object、array或string类型的参数，返回计算得到的className string。

5. file-saver：用于客户端保存文件。

6. font-face-observer：用于控制字体的加载，判断该字体是否可用。

7. reselect：一个redux中间件，用于缓存state计算结果，优化性能。

8. subscription：创建Subscription实例对象，通过add方法向其中添加订阅事件，通过dispatch方法触发全部的订阅事件。

9. w3c-keyname：辅助处理键盘事件。

10. Draft.js：在React中构建富文本编辑器的框架。