好好的井底空间

ketcher-core中被调用的API汇总 【@\domain】 一、@\domain\constants @\domain\constants\ elements.ts 1. Elements object：化学元素属性 @\domain\constants\ elementColor.ts 1. ElementColor object：化学元素颜色属性 @\domain\constants\ generics.ts 1. Generics object：通用元素属性 二、@\domain\entities @\domain\entities\ atom.ts 1. Atom class：原子 2. StereoLabel enum：立体结构标签种类 @\domain\entities\ atomList.ts 1. AtomList class：原子列表 @\domain\entities\ bond.ts 1. Bond class：化学键 @\domain\entities\ fragment.ts 1. Fragment class：化学结构片段 2. StereoFlag enum：立体结构种类 @\domain\entities\ functionalGroup.ts 1. FunctionalGroup class：官能团 @\domain\entities\ pile.ts 1. Pile class：数据集合 @\domain\entities\ rgroup.ts 1. RGroup class：活性位点 @\domain\entities\ rxnArrow.ts 1. RxnArrowMode enum：化学反应式箭头种类 @\domain\entities\ sgroup.ts 1. SGroup class：聚合物 @\domain\entities\ sgroupForest.ts 1. checkOverlapping function：检查是否有重叠 @\domain\entities\ simpleObject.ts 1. SimpleObjectMode enum：简单几何图形种类 @\domain\entities\ struct.ts 1. S...

一、Ketcher简介 1. Ketcher是一个网页版的化学结构及化学反应的编辑器。 2. standalone模式下：无需服务端，仅在客户端浏览器中运行。 3. remote模式下：集成 Indigo 作为服务端，用于处理自动布局、AAM (原子到原子映射)、(去)芳香化等计算密集型操作。 二、packages简介 1. ketcher-core：提供项目的核心功能，包括域、共享服务、函数和接口声明等内容。 2. ketcher-standalone：仅包含以standalone模式启动Ketcher时所需的功能。 3. ketcher-react：仅包含定义组件所需的功能。集成 Miew ，用于在3D视图中查看或编辑数据。 4. ketcher-polymer-editor-react：高分子编辑器，目前正在开发中。 三、项目启动方式 1. 克隆 仓库源码 至本地。 2. 执行yarn命令，安装项目依赖。 3. 进入./packages，依次对四个package执行yarn build命令，将代码打包到dist文件夹中。 4. 进入./example，执行yarn start:standalone命令，即可在浏览器中查看Ketcher页面。 5. 如需调试packages中的代码，可在相应package内执行yarn start命令，修改代码后即可在浏览器中查看效果。

七 、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 ：...

一、常用依赖简介 1. Babel：JS转译器。转换ES6语法，转换JSX语法。 2. Rollup：JS模块打包器。 3. Jest：JS测试工具。 4. ESLint：JS语法规则审查工具。 5. Stylelint：CSS语法规则审查工具。 6. Prettier：代码格式化工具。 7. Lodash：JS实用工具库。 二、父项目中安装的依赖 1. color-alpha (1) RGBA色彩模型：红 (Red)、绿 (Green)、蓝 (Blue)和不透明度参数 (alpha通道)。 (2) alpha取值范围：0 (完全透明) - 1 (不透明)。 2. husky 与lint-staged：经配置后，在Git操作中自动审查代码。 (1) husky：配置git hooks的工具。例如：配置pre-commit hook，执行lint-staged。 (2) lint-staged：过滤git暂存区文件 (执行git add命令后的文件) 的工具。 (3) 根据lint-staged的配置项，对git暂存区文件执行代码格式化、审查修复、重新添加到git暂存区等操作。 (4) ESLint的规则审查是针对项目中匹配到的所有文件，对大型项目而言性能不佳。 3. npm-run-all：并行或顺序运行多个npm脚本的CLI工具。 三、ketcher-core package中安装的依赖 1. Ajv ：JSON Schema验证工具。 (1) JSON Schema ：用于【描述JSON数据结构】的声明文件，该文件本身亦使用JSON编写。示例可参考ketcher-core\src\domain\serializers\ket\schema.json文件。 (2) ajv.compile：用于生成验证函数。该验证函数接收待验证数据，返回一个布尔值；同时，该验证函数还拥有errors和schema两个属性。 (3) ajv.addFormat：添加自定义Format用于验证。参数一：待添加Format的名称 (应当与schema中的format字段相对应)；参数二：待添加的Format，例如：正则表达式、函数等。 2. assert： Node.js asse...

一、CSS-in-JS 1. 早期编码原则：关注点分离 (将HTML、CSS、JS分写为不同的文件，而非混入同一代码块)。 2. 后期三大框架：模块化思想，组件封装，违背了关注点分离原则。以React为例： (1) 通过JS操控HTML (JSX语言)。 (2) 通过JS操控CSS (DOM的style属性)。功能薄弱。 3. 由此诞生了大量的第三方库，用以加强React中JS操控CSS的能力。其共通的思想称为CSS-in-JS。 二、 Emotion 1. 一个CSS-in-JS方案库。实现功能的方式有两种： (1) 通过styled方法创建包含样式的React组件。 (2) 直接向React组件中传入css属性。 2. styled API (1) 使用格式：styled.el(styles)。 (2) el：HTML标签或React组件。 (3) styles：【模板字符串】、【样式对象】或【返回样式对象的函数】。 3. css Prop & css API (1) css Prop：评估、计算、转换传入的数据，再赋值给className。只接收【样式对象】，如需传入【模板字符串】，需要css API进行转换。 (2) css API：可传入【模板字符串】或【样式对象】，返回一个SerializedStyles类型的数据，该类型数据可用于css Prop、css API call及styled API call。 4. Global Style & Theming (1) 定义全局样式和主题样式。 (2) Global组件无需包裹任何内容，类似于直接在项目中引入样式文件。 三、 Material UI 1. 一个React UI组件库。 2. 【组件使用示例】见Components章节，【组件可用属性】见Component API章节。

一、简介 用于绘制矢量图形 (SVG) 的跨浏览器JavaScript库。 二、对象层级关系 1. 从库中引入Raphael方法。 2. 执行Raphael方法，返回一个Pager对象，表现为创建了一块SVG画布。 3. Paper对象含有circle、ellipse等多种方法，用于绘制各种图形。 4. 执行上述方法，返回一个Element对象，表现为画布上绘制了相应的图形。 5. Element对象含有attr、click等多种方法，用于设置图形CSS属性及DOM事件回调。 6. 执行Pager对象的set方法，返回一个Set对象，即多个Element对象的集合。 7. Set对象可调用Element对象的全部方法，表现为将该方法作用于该集合中的每一个Element对象上。 三、Ketcher中用到的Raphael API 1. Raphael.angle：获取两点间角度。 2. Raphael.el.foo：向Element对象添加自定义方法foo。 3. Raphael.st.foo：向Set对象添加自定义方法foo。 4. Raphael.vml：浏览器是否支持VML。(Vector Markup Language 矢量标记语言) 四、Ketcher中用到的Paper API 1. Paper.circle：绘制一个圆形。 2. Paper.ellipse：绘制一个椭圆。 3. Paper.rect：绘制一个矩形。 4. Paper.text：添加文字。 5. Paper.path：接收SVG path格式字符串，创建一个<path>元素。 6. Paper.clear：清除画布上的所有元素。 7. Paper.set：创建一个Set对象。 8. Paper.setStart：创建一个Set对象，此后创建的元素均会被加入该Set集合。 9. Paper.setFinish：停止将后续创建的元素加入此前创建的Set集合。 10. Paper.setSize：变更画布尺寸。 11. Paper.setViewBox：设置视图框。 五、Ketcher中用到的Element API 1. Eleme...

一、【函数组件】与【class组件】 1. 函数组件：接收一个props对象，返回一个React元素。 2. class组件：继承React.Component类，在constructor方法中传递props、初始化state，在render方法中返回React元素。 3. 函数组件是纯函数，无状态、无生命周期钩子，需借助Hook实现相应功能。 二、 Ketcher中用到的Hook 1. useState 2. useEffect (1) 用来在函数组件中执行【副作用操作】(与【纯运算返回值】无关的操作)。 (2) 常见【副作用操作】：修改外部变量、抛出异常、终端打印、读写文件、设置订阅、手动更新DOM、发送网络请求。 (3) 参数一：一个函数 (称其为effect)。默认在【第一次渲染完DOM后】和【每次更新完DOM后】执行effect，在【组件卸载时】执行effect返回的函数。 (4) 参数二：一个数组。指定effect的依赖项，修改默认行为，仅在【第一次渲染完DOM后】和【依赖项发生变化后】执行effect。 (5) 如果仅需在【第一次渲染完DOM后】执行effect，可将参数二设为空数组。 (6) 可在一个组件中多次调用，实现关注点分离。 3. useContext (1) 参数：一个context对象。 (2) 返回值：该context的当前值。 由距离最近的<Provider>的 value prop决定。 4. useCallback与useMemo (1) useCallback参数：函数、依赖项数组。返回值：该函数的缓存。 (2) useMemo参数：函数、依赖项数组。返回值：该函数计算结果的缓存。 (3) 依赖项为空数组时，返回值在组件的生命周期内永久缓存。 (4) useCallback使用场景：避免在父组件更新时，通过props传递给子组件的函数随之重新创建。 (5) useMemo使用场景：类似Vue中的computed，节省计算开销。 5. useRef 三、自定义Hook 1. 提取重复逻辑的一个函数，名称以use开头。 2. 自定义Hook内部可调用其它Hook，util不可以。