element in src/app.html
- target: '#svelte',
- adapter: staticAdapter({
- pages: 'build',
- assets: 'build',
- }),
- paths: process.env.DEPLOY
- ? {
- base: '/dooringx',
- }
- : {},
- trailingSlash: 'ignore',
- },
-};
-
-export default config;
diff --git a/packages/dooringx-doc/tsconfig.json b/packages/dooringx-doc/tsconfig.json
deleted file mode 100644
index d826f6e..0000000
--- a/packages/dooringx-doc/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "compilerOptions": {
- "moduleResolution": "node",
- "module": "es2020",
- "lib": ["es2020"],
- "target": "es2019",
- /**
- svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
- to enforce using \`import type\` instead of \`import\` for Types.
- */
- "importsNotUsedAsValues": "error",
- "isolatedModules": true,
- "resolveJsonModule": true,
- /**
- To have warnings/errors of the Svelte compiler at the correct position,
- enable source maps by default.
- */
- "sourceMap": true,
- "esModuleInterop": true,
- "skipLibCheck": true,
- "forceConsistentCasingInFileNames": true,
- "baseUrl": ".",
- "allowJs": true,
- "checkJs": true,
- "paths": {
- "$lib/*": ["src/lib/*"]
- }
- },
- "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}
diff --git a/packages/dooringx-dumi-doc/.fatherrc.ts b/packages/dooringx-dumi-doc/.fatherrc.ts
new file mode 100644
index 0000000..8f32e70
--- /dev/null
+++ b/packages/dooringx-dumi-doc/.fatherrc.ts
@@ -0,0 +1,4 @@
+export default {
+ esm: 'rollup',
+ cjs: 'rollup',
+};
diff --git a/packages/dooringx-dumi-doc/.umirc.ts b/packages/dooringx-dumi-doc/.umirc.ts
new file mode 100644
index 0000000..0c84f41
--- /dev/null
+++ b/packages/dooringx-dumi-doc/.umirc.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from 'dumi';
+export default defineConfig({
+ title: 'Dooringx',
+ favicon: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
+ logo: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
+ outputPath: 'docs-dist',
+ mode: 'site',
+ locales: [
+ ['zh', '中文'],
+ ['en', 'English'],
+ ],
+ navs: {
+ // 多语言 key 值需与 locales 配置中的 key 一致
+ en: [
+ null, // null 值代表保留约定式生成的导航，只做增量配置
+ {
+ title: 'GitHub',
+ path: 'https://github.com/H5-Dooring/dooringx',
+ },
+ ],
+ zh: [
+ null, // null 值代表保留约定式生成的导航，只做增量配置
+ {
+ title: 'GitHub',
+ path: 'https://github.com/H5-Dooring/dooringx',
+ },
+ ],
+ },
+ base: process.env.NODE_ENV === 'production' ? '/dooringx' : '/',
+ publicPath: process.env.NODE_ENV === 'production' ? '/dooringx/' : '/',
+ // more config: https://d.umijs.org/config
+});
diff --git a/packages/dooringx-dumi-doc/README.md b/packages/dooringx-dumi-doc/README.md
new file mode 100644
index 0000000..c256d32
--- /dev/null
+++ b/packages/dooringx-dumi-doc/README.md
@@ -0,0 +1,27 @@
+# dooringx-dumi-doc
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ npm i
+```
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Build library via `father-build`,
+
+```bash
+$ npm run build
+```
diff --git a/packages/dooringx-dumi-doc/docs/API/index.en.md b/packages/dooringx-dumi-doc/docs/API/index.en.md
new file mode 100644
index 0000000..2ef7802
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/API/index.en.md
@@ -0,0 +1,9 @@
+---
+title: API
+toc: menu
+nav:
+ title: API
+ order: 5
+---
+
+In process
\ No newline at end of file
diff --git a/packages/dooringx-dumi-doc/docs/API/index.md b/packages/dooringx-dumi-doc/docs/API/index.md
new file mode 100644
index 0000000..2ef7802
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/API/index.md
@@ -0,0 +1,9 @@
+---
+title: API
+toc: menu
+nav:
+ title: API
+ order: 5
+---
+
+In process
\ No newline at end of file
diff --git a/packages/dooringx-doc/src/changelog/1.1.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
similarity index 98%
rename from packages/dooringx-doc/src/changelog/1.1.md
rename to packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
index c96a773..cc278bf 100644
--- a/packages/dooringx-doc/src/changelog/1.1.md
+++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
@@ -1,8 +1,11 @@
---
-title: CHANGELOG
-order: 1
+title: ChangeLog
+toc: menu
+nav:
+ title: ChangeLog
+ order: 6
---
-## changelog
+
## 0.10.2
diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md
new file mode 100644
index 0000000..f9f1b17
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md
@@ -0,0 +1,191 @@
+---
+title: 变更日志
+toc: menu
+nav:
+ title: 变更日志
+ order: 6
+---
+
+## 0.10.2
+
+修改timeline选中底色，增加item类名方便修改。
+
+## 0.10.1
+
+修改timeline类名，方便修改样式。
+
+## 0.10.0
+
+函数名提出name作为单独配置项传递，第一个参数作为id，最后个参数作为函数名，这样函数的显示名称可以支持转换。
+
+弹窗事件如果不传递弹窗名字，则不会出现弹窗。
+
+## 0.9.5
+
+preview组件scripts加载由并发变为线性。
+
+编辑模式下使用远程组件会储存当前画布状态。
+
+## 0.9.4
+
+修复preview组件不能解除loading的bug
+
+## 0.9.3
+
+增加双击置入画布。
+
+变更元素初始focus状态。
+
+存在元素宽高，则置入时定位于元素中心。
+
+## 0.9.2
+
+增加远程组件调用全流程，component中增加url属性，便于script加载。
+
+## 0.9.1
+
+增加config.i18n配置，不使用国际化则不需要导入intl的context。
+control组件第一个按钮变更为拖拽，功能合并至timeline
+
+## 0.9.0
+
+增加react-intl，修改部分样式。
+
+## 0.8.4
+
+增加preview的属性，可外界控制loading。
+## 0.8.3
+
+增加timeline拖动条与选中。
+修复antd menu属性报错。
+
+## 0.8.2
+
+增加左侧面板配置。
+
+修复timeline闪烁问题。
+
+## 0.8.1
+
+新增动画组件timeline。可以更好预览所有动画。
+
+## 0.8.0
+
+动画部分重构，可支持多动画同时配置。
+
+画布拖动最小值变更为0。
+
+
+## 0.7.7
+
+优化画布拖拽逻辑，更平滑移动。
+
+## 0.7.6
+
+右侧自定义rightGlobalCustom类型变更为函数传入config
+
+## 0.7.5
+
+修改滚轮方向。
+
+
+## 0.7.4
+
+修复框选移动bug。
+
+
+## 0.7.3
+
+修复弹窗位置与选中问题。
+
+
+## 0.7.2
+
+修复锁定组件影响，锁定中无法拖拽，缩放，旋转。
+
+## 0.7.1
+
+修复锁定组件无法选中解锁。
+
+
+## 0.7.0
+
+已支持组件旋转！
+
+修复拖拽参考线等优化逻辑。
+
+## 0.6.0
+
+已支持编辑模式使用Iframe！
+
+修复选中条件。
+
+
+## 0.5.1
+
+修复右侧选中不能取消选中问题。
+
+## 0.5.0
+
+修复control组件宽度不够问题。
+
+移除antd自定义icon，容器底部icon可配置。
+
+## 0.4.2
+
+修复animate错误初始值。
+
+修改markline样式。
+
+全局设置增加容器高度。
+## 0.4.1
+
+去除lib自动导入样式。
+
+## 0.4.0
+
+去除runtime导出，所有属性从config中获取。
+
+## 0.3.1
+
+1、由uuid更换为nanoid。
+
+2、control组件增加标尺控制。
+
+## 0.3.0
+
+1、增加标尺，ContainerWrapper需要传递config才可使用。
+
+2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
+
+3、innerContainerDragUp需要传递config。
+
+## 0.2.0
+
+commander的传递进行修改，可以获得config了，commander不再从index中导出 ，需要使用时从config中获取。增加左侧类名，方便自定义。
+
+## 0.1.10
+
+修改eslint依赖推荐
+
+
+## 0.1.9
+
+增加全局body设置
+
+## 0.1.8
+
+增加弹窗设置，移除modalContainer
+
+## 0.1.7
+
+修改预览特殊条件显示，删除console
+## 0.1.6
+
+调整初始缩放，画布初始比例，增加回正画布功能。
+## 0.1.5
+
+删除未作按钮，增加fixed配置
+## 0.1.4
+
+基础功能
diff --git a/packages/dooringx-dumi-doc/docs/FAQ/index.en.md b/packages/dooringx-dumi-doc/docs/FAQ/index.en.md
new file mode 100644
index 0000000..f038a37
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/FAQ/index.en.md
@@ -0,0 +1,6 @@
+---
+title: FAQ
+nav:
+ title: FAQ
+ order: 4
+---
diff --git a/packages/dooringx-doc/src/docs/4.4.md b/packages/dooringx-dumi-doc/docs/FAQ/index.md
similarity index 50%
rename from packages/dooringx-doc/src/docs/4.4.md
rename to packages/dooringx-dumi-doc/docs/FAQ/index.md
index 01d43a4..6e428ad 100644
--- a/packages/dooringx-doc/src/docs/4.4.md
+++ b/packages/dooringx-dumi-doc/docs/FAQ/index.md
@@ -1,9 +1,33 @@
---
-title: 表单验证提交思路
-sTitle: 常见问题
-order: 20
+title: FAQ
+toc: menu
+nav:
+ title: FAQ
+ order: 4
---
+
+## 图表在位移时不断刷新
+
+
+请使用fast-deep-equal比对所需要的数据，如果相同，则忽略更新即可。
+
+
+## 无法选中组件或预览适配有问题
+
+
+绝对定位组件必须有初始宽高，虽然在拖拽中会给组件加上宽高，但如果用户一开始就未拖动，则组件无宽高，不止影响选中判定，也会影响最后预览的计算。
+
+
+## 组件动态注册的函数会一直保留
+
+
+组件函数需要在组件卸载时调用卸载方法，否则一直存在。
+
+
+## 表单验证提交思路
+
+
表单验证提交有非常多的做法，因为数据全部是联通的，或者直接写个表单组件也可以。
在不使用表单组件时，简单的做法是为每个输入组件做个验证函数与提交函数。
@@ -18,4 +42,19 @@ order: 20
另外的做法是可以专门写个提交按钮，固定了参数，以及部分规则，比如规定在页面中的所有表单都会被收集提交。
-那么我们可以利用数据源，将所有表单输出内容自动提交给数据源，最后的提交按钮按数据源规定格式的key提取，发送给后端。
\ No newline at end of file
+那么我们可以利用数据源，将所有表单输出内容自动提交给数据源，最后的提交按钮按数据源规定格式的key提取，发送给后端。
+
+## 置顶置底问题
+
+
+有小伙伴反应置顶置底的操作有点不符合常理。置顶和置底其实不应该使用zindex去制作，这样和图层的换顺序相矛盾，而且使用zindex在置底时会有问题，因为元素zindex不能比画布还低，所以置顶置底符合常理的做法应该是去提升顺序。
+
+
+## 多语言去除
+
+
+config中的i18n设置为false，即可不用在外层套用IntlProvider。
+
+```js
+config.i18n = false;
+```
\ No newline at end of file
diff --git a/packages/dooringx-dumi-doc/docs/Guide/index.en.md b/packages/dooringx-dumi-doc/docs/Guide/index.en.md
new file mode 100644
index 0000000..85429ff
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/Guide/index.en.md
@@ -0,0 +1,7 @@
+---
+title: Guide
+toc: menu
+nav:
+ title: Guide
+ order: 1
+---
diff --git a/packages/dooringx-dumi-doc/docs/Guide/index.md b/packages/dooringx-dumi-doc/docs/Guide/index.md
new file mode 100644
index 0000000..2f1c14b
--- /dev/null
+++ b/packages/dooringx-dumi-doc/docs/Guide/index.md
@@ -0,0 +1,1081 @@
+---
+title: 指南
+toc: menu
+nav:
+ title: 指南
+ order: 1
+---
+
+
+## 介绍
+
+### dooringx-lib 是什么？
+
+dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化拖拽框架。
+
+dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。
+
+### dooringx-lib 如何工作？
+
+
+dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。
+
+其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
+
+
+### 快速上手
+
+
+#### 安装
+
+使用 npm 或者 yarn 安装
+
+```bash
+npm i dooringx-lib
+```
+
+dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
+
+一种是普通容器，一种是iframe容器，这2种容器在某些实现上略有不同。
+
+使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
+
+建议预览时使用iframe查看preview，如果有弹窗，在非iframe或pc中会显示异常。
+
+iframe容器由于使用postmessage通信，所以在操作上可能会有略微延迟。如果对样式隔离要求不高可以使用普通容器，预览的样式正常即可。
+
+普通容器使用参考demo:
+
+```js
+import {
+ RightConfig,
+ Container,
+ useStoreState,
+ innerContainerDragUp,
+ LeftConfig,
+ ContainerWrapper,
+ Control,
+} from 'dooringx-lib';
+import { useContext } from 'react';
+import { configContext } from '@/layouts';
+import { useCallback } from 'react';
+import { PREVIEWSTATE } from '@/constant';
+
+export const HeaderHeight = '40px';
+
+export default function IndexPage() {
+ const config = useContext(configContext);
+
+ const everyFn = () => {};
+
+ const subscribeFn = useCallback(() => {
+ localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
+ }, [config]);
+
+ const [state] = useStoreState(config, subscribeFn, everyFn);
+
+ return (
+
+
+ head
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+
+iframe容器使用参考demo：
+
+
+index.tsx
+```js
+import {
+ RightConfig,
+ useStoreState,
+ innerContainerDragUp,
+ LeftConfig,
+ IframeContainerWrapper,
+ Control,
+ useIframeHook,
+ IframeTarget,
+} from 'dooringx-lib';
+import { useContext } from 'react';
+import { configContext } from '@/layouts';
+import { useCallback } from 'react';
+import { PREVIEWSTATE } from '@/constant';
+
+export const HeaderHeight = '40px';
+
+export default function IndexPage() {
+ const config = useContext(configContext);
+
+ const subscribeFn = useCallback(() => {
+ localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
+ }, [config]);
+
+ const [state] = useStoreState(config, subscribeFn);
+ useIframeHook(`${location.origin}/container`, config);
+
+ return (
+
+
+ head
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+ );
+}
+```
+
+container 路由：
+
+```js
+import { configContext } from '@/layouts';
+import { useContext } from 'react';
+import { IframeContainer } from 'dooringx-lib';
+
+function ContainerPage() {
+ const config = useContext(configContext);
+ return (
+
+
+
+ );
+}
+
+export default ContainerPage;
+```
+
+
+
+预览时preview套iframe:
+
+```html
+
+
+
+```
+preview路由：
+
+```js
+import { PREVIEWSTATE } from '@/constant';
+import { Preview, UserConfig } from 'dooringx-lib';
+import plugin from '../../plugin';
+
+const config = new UserConfig(plugin);
+
+function PreviewPage() {
+ const data = localStorage.getItem(PREVIEWSTATE);
+ if (data) {
+ try {
+ const json = JSON.parse(data);
+ config.resetData([json]);
+ } catch {
+ console.log('err');
+ }
+ }
+ return (
+
+ );
+}
+
+export default PreviewPage;
+```
+
+有关 api 部分请参考 api
+
+
+## dooringx-lib基础
+
+### store
+
+store 类似于 redux 的概念，它内部实现了 redo、undo、发布订阅、置换数据、强制刷新等功能。
+
+store 可以在 config 中获取。
+
+在最开始时，需要通过 useStoreState 与 react 结合，此时可以在任意位置使用 store.forceUpdate 强刷，也可以使用 state 获取 store 中的数据。
+
+store 的最重要功能是保存着每次修改 json 队列。
+
+如果你需要更新数据，在深拷贝后使用 setData 方法进行更新。
+
+如果你需要更新时不记录在 redo 或 undo 上留下记录，那么请操作队列删除其中保存内容即可。
+
+对于改变数据后想即使看见视图更新，那么使用forceUpdate即可。
+
+
+### 事件
+
+dooringx-lib 的事件是在eventCenter上，它上面会集成functionCenter与一个事件链。
+
+在eventCenter中可以获取组件注册的时机。时机类似于组件生命周期一样，可以注册后在对应的时机进行调用。
+
+而functionCenter中的函数则会与时机结合，再由事件链对用户设定的队列进行统一处理。
+
+每个事件链在执行中会有上下文对象，这个对象会贯穿这个事件链。
+
+### 命令
+
+
+dooringx-lib 的命令是由commander进行管理。
+
+内部默认提供redo与undo的命令，您可以通过插件方式增加commander。
+
+commander内部集成了快捷键配置，使用键盘事件的key进行注册，如果ctrl、alt、meta键，可加对应的加号进行组合键注册，内部忽略大小写（注意！不是忽略注册的键名大小写，而是A和a的key处理时等价）。
+
+### 弹窗
+
+
+dooringx-lib内置弹窗系统，弹窗系统是通过storeChanger进行转换而成。
+
+所以在某些情景制作时，可能需要考虑是否在弹窗编辑下的情况。
+
+每个弹窗是只保存block中的数据，而事件等数据只会存在主数据内。
+
+在弹窗保存后，弹窗数据会被置换于主数据内存着，需要编辑时重新置换出来。
+
+可以使用storeChanger上的方法进行判断，或者直接获取数据源数据等，具体见API。
+
+
+### 数据源
+
+
+dooringx-lib 的数据源和前面说的store中存储的不是一个东西。
+
+它位于dataCenter中。设计数据源的初衷是为了让不懂代码的人更好理解。
+
+事件的运行完全可以脱离数据源运行，只要使用者知道如何去填写参数。
+
+所以在事件配置时，可以多个选项在数据源中去获得数据转变为参数。
+
+
+## dooringx-lib插件开发
+
+### 插件导入
+
+dooringx-lib的插件需要一个类型为`Partial
`的对象。
+
+对于多个插件，需要使用dooringx-lib导出的`userConfigMerge`来进行合并。
+
+userConfigMerge不是所有属性都会合并，部分属性会进行覆盖。
+
+```
+ * 部分无法合并属性如果b传了会以b为准
+ * initstore不合并
+ * leftallregistmap合并
+ * leftRenderListCategory合并
+ * rightRenderListCategory合并
+ * rightGlobalCustom 不合并
+ * initComponentCache合并
+ * initFunctionMap合并
+ * initDataCenterMap合并
+ * initCommandModule合并
+ * initFormComponents合并
+```
+
+config支持部分配置异步导入，比如左侧分类等，这个是实验性功能，所以不推荐这么做。
+
+
+### 左侧面板
+
+
+左侧面板传入leftRenderListCategory即可。
+
+```js
+leftRenderListCategory: [
+ {
+ type: 'basic',
+ icon: ,
+ displayName: '基础组件',
+ },
+ {
+ type: 'xxc',
+ icon: ,
+ custom: true,
+ customRender: 我是自定义渲染
,
+ },
+],
+```
+
+type是分类，左侧组件显示在哪个分类由该字段决定。
+
+icon则是左侧分类小图标。
+
+当custom为true时，可以使用customRender自定义渲染。
+
+### 左侧组件
+
+
+### 插件导入
+
+左侧组件要至于对象的LeftRegistMap中。
+
+左侧组件支持同步导入或者异步导入。
+
+```js
+const LeftRegistMap: LeftRegistComponentMapItem[] = [
+ {
+ type: 'basic',
+ component: 'button',
+ img: 'icon-anniu',
+ displayName: '按钮',
+ urlFn: () => import('./registComponents/button'),
+ },
+];
+```
+
+如果需要异步导入组件，则需要填写urlFn，需要一个返回promise的函数。也可以支持远程载入组件，只要webpack配上就行了。
+
+如果需要同步导入组件，则需要将组件放入配置项的initComponentCache中，这样在载入时便会注册进componentRegister里。
+
+```js
+initComponentCache: {
+ modalMask: { component: MmodalMask },
+},
+```
+
+### 组件编写
+
+组件需要导出一个由ComponentItemFactory生成的对象。
+
+```js
+const MButton = new ComponentItemFactory(
+ 'button',
+ '按钮',
+ {
+ style: [
+ createPannelOptions('input', {
+ receive: 'text',
+ label: '文字',
+ }),
+ ],
+ animate: [createPannelOptions('animateControl', {})],
+ actions: [createPannelOptions('actionButton', {})],
+ },
+ {
+ props: {
+ ...
+ text:'yehuozhili'// input配置项组件接收的初始值
+ },
+ },
+ (data, context, store, config) => {
+ return ;
+ },
+ true
+);
+
+export default MButton;
+
+```
+
+其中第一个参数为组件注册名，第二个参数用来展示使用。
+
+
+第三个参数用来配置右侧面板的配置项组件。其中键为右侧面板的分类，值为配置项组件数组。
+
+第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度高度（非由内容撑开），否则会在适配时全选时产生问题。
+
+这个初始值里有很多有用的属性，比如fixed代表使用固定定位，可以结合配置项更改该值，使得组件可以fixed定位。
+
+还有canDrag类似于锁定命令，锁定的元素不可拖拽。
+
+初始值里的rotate需要个对象，value代表旋转角度，canRotate 代表是否可以操作旋转。（0.7.0版本开始支持）
+
+第五个参数是个函数，你将获得配置项中的receive属性（暂且都默认该配置为receive）传来的配置，比如上例中receive的是text，则该函数中data里会收到该字段。
+
+context一般只有preview和edit，用来进行环境判断。
+
+config可以拿到所有数据，用来制作事件时使用。
+
+第六个参数resize 是为了判断是否能进行缩放，当为false时，无法进行缩放。
+
+第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true,就是需要拖拽的位置，为false时将使用组件自身top和left定位来放置。
+
+
+
+### 事件注册
+
+#### 时机注册
+
+前面说了事件有时机和函数，所以组件内可以使用hook注册时机：
+
+```js
+useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
+useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
+```
+
+useDynamicAddEventCenter第一个参数是render的四个参数组成的对象。第二个参数是注册的时机名，必须跟id相关，这是约定，否则多个组件可能会导致名称冲突，并且方便查找该时机。
+
+注册完时机后，你需要将时机放入对应的触发位置上，比如这个button的点击执行时机就放到onclick中：
+
+```js
+
+```
+
+其中第一个参数则为注册的时机名，第二个为render函数中最后个参数config
+
+
+#### 函数注册
+
+函数由组件抛出，可以加载到事件链上。比如，注册个改变文本函数，那么我可以在任意组件的时机中去调用该函数，从而触发该组件改变文本。
+
+函数注册需要放入useEffect中，在组件卸载时需要卸载函数！否则会导致函数越来越多。
+
+注意id要带上组件id，因为一个组件可以拖出n个组件生成n个函数。
+
+```js
+useEffect(() => {
+ const functionCenter = eventCenter.getFunctionCenter();
+ const unregist = functionCenter.register(
+ `${pr.data.id}+改变文本函数`,
+ async (ctx, next, config, args, _eventList, iname) => {
+ const userSelect = iname.data;
+ const ctxVal = changeUserValue(
+ userSelect['改变文本数据源'],
+ args,
+ '_changeval',
+ config,
+ ctx
+ );
+ const text = ctxVal[0];
+ setText(text);
+ next();
+ },
+ [
+ {
+ name: '改变文本数据源',
+ data: ['ctx', 'input', 'dataSource'],
+ options: {
+ receive: '_changeval',
+ multi: false,
+ },
+ },
+ ],
+ `${pr.data.id}+改变文本函数`
+ );
+ return () => {
+ unregist();
+ };
+}, []);
+```
+
+函数中参数与配置见后面函数开发。
+
+### 右侧面板
+
+
+右侧面板的配置和左侧面板一样：
+
+```js
+export interface RightMapRenderListPropsItemCategory {
+ type: string;
+ icon: ReactNode;
+ custom?: boolean;
+ customRender?: (type: string, current: IBlockType) => ReactNode;
+}
+```
+
+type会影响左侧组件在开发时第三个参数的键名。那个键名中即代表该右侧中展示的type。
+
+icon则是可以放文字或者图标用来进行面板切换的。
+
+如果custom为true，该面板下的显示可以通过customRender自定义。
+
+### 右侧组件
+
+
+#### 右侧组件导入
+
+导入时,只要将开发的组件配成一个对象放入initFormComponents即可。
+
+```js
+initFormComponents: Formmodules,
+```
+
+#### 右侧组件开发
+
+首先为了良好的开发体验，需要定义个formMap类型：
+
+```js
+export interface FormBaseType {
+ receive?: string;
+}
+export interface FormInputType extends FormBaseType {
+ label: string;
+}
+export interface FormActionButtonType {}
+export interface FormAnimateControlType {}
+export interface FormMap {
+ input: FormInputType;
+ actionButton: FormActionButtonType;
+ animateControl: FormAnimateControlType;
+}
+```
+formMap的键名就是initFormComponents键名，formMap的值对应组件需要收到的值。
+
+以input组件为例，FormInputType此时有2个属性，label,receive。
+
+那么在其开发该组件时，props会收到：
+
+```js
+interface MInputProps {
+ data: CreateOptionsRes;
+ current: IBlockType;
+ config: UserConfig;
+}
+```
+也就是其中data是formMap类型，而current是当前点击的组件，config就不用说了。
+
+还记得在左侧组件开发中的第三个参数吗？这样就都关联起来了：
+
+```js
+
+style: [
+ createPannelOptions('input', {
+ receive: 'text',
+ label: '文字',
+ }),
+ ],
+
+```
+createPannelOptions 这个函数的泛型里填入对应的组件，将会给收到的配置项良好的提示。
+
+在配置项组件里所要做的就是接收组件传来的配置项，然后去修改current的属性：
+
+
+```js
+function MInput(props: MInputProps) {
+ const option = useMemo(() => {
+ return props.data?.option || {};
+ }, [props.data]);
+ return (
+
+
+ {(option as any)?.label || '文字'}：
+
+
+ {
+ const receive = (option as any).receive;
+ const clonedata = deepCopy(store.getData());
+ const newblock = clonedata.block.map((v: IBlockType) => {
+ if (v.id === props.current.id) {
+ v.props[receive] = e.target.value;
+ }
+ return v;
+ });
+ store.setData({ ...clonedata, block: [...newblock] });
+ }}
+ >
+
+
+ );
+}
+```
+
+由于可以很轻松的拿到store，所以可以在任意地方进行修改数据。
+
+将组件的value关联current的属性，onChange去修改store，这样就完成了个双向绑定。
+
+注意：如果你的右侧组件需要用到block以外的属性，可能需要去判断是否处于弹窗模式。
+
+
+### 命令开发
+
+
+
+#### 命令的导入
+
+命令对象导入到插件的initCommandModule里即可
+
+```js
+initCommandModule: commandModules,
+```
+
+#### 命令的开发
+
+命令需要导出一个CommanderItemFactory生成的对象。
+
+```js
+import { CommanderItemFactory } from 'dooringx-lib';
+const undo = new CommanderItemFactory(
+ 'redo',
+ 'Control+Shift+z',
+ (store) => {
+ store.redo();
+ },
+ '重做'
+);
+
+export default undo;
+```
+
+第一个参数是注册名。
+第二个参数是快捷键名，快捷键映射是键盘事件key值：
+
+```js
+ Cancel: 3,
+ Help: 6,
+ Backspace: 8,
+ Tab: 9,
+ Clear: 12,
+ Enter: 13,
+ Shift: 16,
+ Control: 17,
+ Alt: 18,
+ Pause: 19,
+ CapsLock: 20,
+ Escape: 27,
+ Convert: 28,
+ NonConvert: 29,
+ Accept: 30,
+ ModeChange: 31,
+ ' ': 32,
+ PageUp: 33,
+ PageDown: 34,
+ End: 35,
+ Home: 36,
+ ArrowLeft: 37,
+ ArrowUp: 38,
+ ArrowRight: 39,
+ ArrowDown: 40,
+ Select: 41,
+ Print: 42,
+ Execute: 43,
+ PrintScreen: 44,
+ Insert: 45,
+ Delete: 46,
+ 0: 48,
+ ')': 48,
+ 1: 49,
+ '!': 49,
+ 2: 50,
+ '@': 50,
+ 3: 51,
+ '#': 51,
+ 4: 52,
+ $: 52,
+ 5: 53,
+ '%': 53,
+ 6: 54,
+ '^': 54,
+ 7: 55,
+ '&': 55,
+ 8: 56,
+ '*': 56,
+ 9: 57,
+ '(': 57,
+ a: 65,
+ A: 65,
+ b: 66,
+ B: 66,
+ c: 67,
+ C: 67,
+ d: 68,
+ D: 68,
+ e: 69,
+ E: 69,
+ f: 70,
+ F: 70,
+ g: 71,
+ G: 71,
+ h: 72,
+ H: 72,
+ i: 73,
+ I: 73,
+ j: 74,
+ J: 74,
+ k: 75,
+ K: 75,
+ l: 76,
+ L: 76,
+ m: 77,
+ M: 77,
+ n: 78,
+ N: 78,
+ o: 79,
+ O: 79,
+ p: 80,
+ P: 80,
+ q: 81,
+ Q: 81,
+ r: 82,
+ R: 82,
+ s: 83,
+ S: 83,
+ t: 84,
+ T: 84,
+ u: 85,
+ U: 85,
+ v: 86,
+ V: 86,
+ w: 87,
+ W: 87,
+ x: 88,
+ X: 88,
+ y: 89,
+ Y: 89,
+ z: 90,
+ Z: 90,
+ OS: 91,
+ ContextMenu: 93,
+ F1: 112,
+ F2: 113,
+ F3: 114,
+ F4: 115,
+ F5: 116,
+ F6: 117,
+ F7: 118,
+ F8: 119,
+ F9: 120,
+ F10: 121,
+ F11: 122,
+ F12: 123,
+ F13: 124,
+ F14: 125,
+ F15: 126,
+ F16: 127,
+ F17: 128,
+ F18: 129,
+ F19: 130,
+ F20: 131,
+ F21: 132,
+ F22: 133,
+ F23: 134,
+ F24: 135,
+ NumLock: 144,
+ ScrollLock: 145,
+ VolumeMute: 181,
+ VolumeDown: 182,
+ VolumeUp: 183,
+ ';': 186,
+ ':': 186,
+ '=': 187,
+ '+': 187,
+ ',': 188,
+ '<': 188,
+ '-': 189,
+ _: 189,
+ '.': 190,
+ '>': 190,
+ '/': 191,
+ '?': 191,
+ '`': 192,
+ '~': 192,
+ '[': 219,
+ '{': 219,
+ '\\': 220,
+ '|': 220,
+ ']': 221,
+ '}': 221,
+ "'": 222,
+ '"': 222,
+ Meta: 224,
+ AltGraph: 225,
+ Attn: 246,
+ CrSel: 247,
+ ExSel: 248,
+ EraseEof: 249,
+ Play: 250,
+ ZoomOut: 251,
+```
+
+26个英文字母是忽略大小写的，一个命令目前只能注册一个快捷键。不需要注册快捷键则填空字符串即可。
+
+metakey与Controlkey相同，写Control即可。
+
+目前第三个参数只能获得store，后续需要修改下。 0.2.0 版本第二个参数可以获得config，同时commander不从index中导出，需要使用时从config中获取。
+
+最后个参数是展示名。
+
+
+### 右键菜单
+
+右键菜单可以进行自定义：
+
+```js
+// 自定义右键
+const contextMenuState = config.getContextMenuState();
+const unmountContextMenu = contextMenuState.unmountContextMenu;
+const commander = config.getCommanderRegister();
+const ContextMenu = () => {
+ const handleclick = () => {
+ unmountContextMenu();
+ };
+ const forceUpdate = useState(0)[1];
+ contextMenuState.forceUpdate = () => {
+ forceUpdate((pre) => pre + 1);
+ };
+ return (
+
+
{
+ commander.exec('redo');
+ handleclick();
+ }}
+ >
+
+
+
-