guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #40 from H5-Dooring/doc-add

Browse Source 
Doc add
This commit is contained in:
yehuozhili
2022-09-05 17:28:21 +08:00
committed by GitHub
parent 929b3a39f5 f693a1eceb
commit 7194f81b2b
19 changed files with 1073 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -1,3 +1,7 @@
## 1.0.0
新增文档，增加createComponent函数
## 0.15.3
修改选框选中算法

10
README.md
View File

@@ -24,15 +24,8 @@ dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化
dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。
dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。
其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
## 文档 | Doc
当前版本变化较大，请等待文档完善。
[Read the Docs to Learn More](https://h5-dooring.github.io/dooringx/).
@@ -165,6 +158,3 @@ Contributions, issues and feature requests are welcome!.
MIT
## Todo
完善文档

10
packages/dooringx-dumi-doc/.umirc.ts
View File

@@ -2,13 +2,21 @@ 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',
logo: 'https://img-blog.csdnimg.cn/img_convert/520863a38a93d960862f92c805bc97cc.png#pic_center',
outputPath: 'docs-dist',
mode: 'site',
locales: [
['zh', '中文'],
['en', 'English'],
],
styles: [
`
.__dumi-default-navbar-logo{
padding-left: 200px !important;
text-indent: -10000px;
}
`,
],
navs: {
// 多语言 key 值需与 locales 配置中的 key 一致
en: [

9
packages/dooringx-dumi-doc/docs/API/index.en.md
View File

@@ -1,9 +0,0 @@
---
title: API
toc: menu
nav:
title: API
order: 5
---
In process

794
packages/dooringx-dumi-doc/docs/API/index.md
View File

@@ -1,9 +1,795 @@
---
title: API
toc: menu
nav:
title: API
order: 5
---
## useStoreState
In process
用于将json中的block转换为react中的state，可插入block变更订阅函数。
示例：
```js
const config = useContext(configContext);
const locale = useContext(LocaleContext);
const everyFn = () => {};
const subscribeFn = useCallback(() => {
//需要去预览前判断下弹窗。
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
}, [config]);
const [state] = useStoreState(config, subscribeFn, everyFn);
```
| 参数 | 类型 | 说明 |
| ---------------------------- | ---------------- | ---- |
| config | UserConfig | 总的配置项 |
| extraFn | Function = () => {} | 订阅store变更函数 |
| everyFn | Function = () => {} | 暂时无用，可穿插运行函数 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| [IStoreData] | 转变为state的block ，用于后续渲染 |
## useDynamicAddEventCenter
用于在组件中注册时机。
示例：
```js
useDynamicAddEventCenter(props, `${props.data.id}-click`, '点击执行时机');
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| props | ComponentRenderConfigProps | 传入组件的对象{data,context,store,config} |
| eventName | string | 添加的名称 |
| displayName | string | 展示的名称 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| void | 无 |
## Container
画布
示例：
```js
<Container state={state} config={config} context="edit"></Container>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| state | IStoreData | 传入useStoreState转换的state |
| context | 'edit' \| 'preview' | 根据预览或者编辑传 |
| config | UserConfig | 总配置项 |
| editContainerStyle | CSSProperties | 可以修改样式 |
| previewContainerStyle | CSSProperties | 可以修改样式 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## LeftConfig
左侧面板
示例：
```js
<LeftConfig footerConfig={footerConfig()} config={config}></LeftConfig>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| showName | Boolean? | 是否显示名称 |
| footerConfig | ReactNode? | 面板footer插槽 |
| mode | 'horizontal' | 'vertical' | 模式 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## Preview
预览组件，包含了preview模式的container，以及一些加载逻辑。
示例：
```js
<Preview
//loadingState={loading}
// completeFn={() => {
// setTimeout(() => {
// setLoading(false);
// }, 10000);
// }}
config={config}
></Preview>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| loadText | ReactNode? | 加载中插槽 |
| loadingState | boolean? | 手动维护加载状态 |
| completeFn | Function? | 页面装载完成调用 |
| previewContainerStyle | CSSProperties? | 样式修改 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## RightConfig
右侧面板
示例：
```js
<RightConfig state={state} config={config}></RightConfig>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| state | IStoreData | 传入useStoreState转换的state |
| config | UserConfig | 总配置项 |
| globalExtra | ReactNode? | 全局属性部分添加位置插槽 |
| modalExtra | ReactNode? | 弹窗属性添加插槽 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## ContainerWrapper
画布外层，主要包含了滚轮放大缩小，刻度等。
示例：
```js
<ContainerWrapper config={config}>
<>
<Control
config={config}
style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
></Control>
<Container state={state} config={config} context="edit"></Container>
</>
</ContainerWrapper>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| classNames | string? | 样式修改 |
| style | CSSProperties? | 样式修改 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## Control
全局、弹窗等画布控制器。
示例：
```js
<Control
config={config}
style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
></Control>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| style | CSSProperties? | 样式修改 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## LeftDataPannel
左侧数据源tab，用来装载在左侧面板上。
示例：
```js
leftRenderListCategory: [
...,
{
type: 'datax',
icon: <ContainerOutlined />,
custom: true,
displayName: '数据源',
customRender: (config) => <LeftDataPannel config={config}></LeftDataPannel>,
},
],
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| JSX.Element | 无 |
## innerContainerDragUp
放到外层容器属性里，主要包含多种up类型事件处理逻辑。
示例：
```js
<div {...innerContainerDragUp(config)}>
...
</div>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| mouseUp moseMove等 | 无 |
## unmountContextMenu
卸载右键dom，用于关闭右键菜单，也可以在contextMenuState.unmountContextMenu中取到
示例：
```js
const ContextMenu = () => {
const handleclick = () => {
unmountContextMenu();
};
return (
<div
style={{
left: contextMenuState.left,
top: contextMenuState.top,
position: 'fixed',
background: 'rgb(24, 23, 23)',
}}
>
<div
style={{ width: '100%' }}
onClick={() => {
commander.exec('redo');
handleclick();
}}
>
<Button>自定义</Button>
</div>
</div>
);
};
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| config | UserConfig | 总配置项 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| mouseUp moseMove等 | 无 |
## UserConfig
总设置项，包括可以获取store commander等，也需传递给组件。
| 方法 | 说明 |
| ----------------- | ---- |
| getFocusState | 获取当前选择的元素 |
| getScaleState | 获取当前缩放状态 |
| getDataCenter | 获取数据源类 |
| getEventCenter | 获取事件中心类 |
| getAnimateFactory | 获取自定义动画 |
| getConfig | 获取初始设置 |
| getStore | 获取store |
| getComponentRegister | 获取左侧组件注册类 |
| getContextMenuState | 获取右键菜单状态 |
| getFormRegister | 获取右侧组件注册类 |
| getCommanderRegister | 获取快捷键指令设置的类 |
| getCurrentData | 获取当前store数据 |
| resetConfig | 以默认设置重置配置项 |
| addLeftCategory | 异步增加左侧tab页 |
| addRightCategory | 异步增加右侧tab页 |
| addCoRegistMap | 异步增加左侧组件 |
| setConfig | 异步修改config 重置store |
| registCommander | 同步注册指令 |
| getComponentCache | 获取左侧组件缓存 |
| registComponent | 同步注册左侧组件 |
| scriptRegistComponentSingle | 同步注册左侧组件，并加入左侧面板 |
| scriptSingleLoad | 注册远程组件umd形式 |
### Store
存放json数据源并提供redo undo以及弹窗状态转换
| 方法 | 说明 |
| ----------------- | ---- |
| getData | 获取当前json |
| getStoreList | 获取操作列表json |
| isEdit | 判断是否在弹窗编辑 |
| isInModalMap | 判断有没有该弹窗 |
| newModalMap | 新增弹窗 |
| closeModal | 关闭弹窗 |
| removeModal | 删除弹窗 |
| resetToInitData | 重置json数据 |
| redo | 重做 |
| undo | 撤销 |
| setData | 设置值 |
| cleanLast | 清除前一个json |
| emit | 让监听函数执行 |
| subscribe | 监听 |
| forceUpdate | 强刷监听函数 |
| setIndex | 设置索引 |
### dataCenter
数据源，一般用来做第三方传递数据使用，也可以不用。
| 方法 | 说明 |
| ----------------- | ---- |
| getDataMap | 获取数据源总数据 |
| setToMap | 动态设置map数据，可触发getValue的获取。 |
| staticSetToMap | 静态设置map数据 |
| getValue | 异步获取数据， |
| get | 同步获取数据 |
### eventCenter
事件中心，组装与执行事件链使用。
| 方法 | 说明 |
| ----------------- | ---- |
| getFunctionCenter | 获取函数中心类 |
| getEventMap | 获取事件中心数据 |
| resetEventMap | 数据置空 |
| syncEventMap | 自动收集更新事件数据 |
| manualUpdateMap | 手动更新事件数据 |
| runEventQueue | 执行数据链 |
#### FunctionCenter
函数中心，组装函数使用。
| 方法 | 说明 |
| ----------------- | ---- |
| getFunctionMap | 获取函数map |
| getConfigMap | 获取函数设置map |
| getNameMap | 获取函数名称map |
| nameToKey | 通过name查id |
| register | 注册函数 |
| syncFunction | 自动收集更新函数 |
| getFunction | 获取函数，可异步获取 |
### commanderRegister
指CommanderWrapper类，用于指令快捷键注册。
| 方法 | 说明 |
| ----------------- | ---- |
| getList | 获取指令map |
| register | 注册指令 |
| unRegister | 卸载指令 |
| exec | 执行指令 |
## userConfigMerge
合并配置项,用于合并他人的配置项。
* 部分无法合并属性如果b传了会以b为准
* initstore不合并
* leftallregistmap合并
* leftRenderListCategory合并
* rightRenderListCategory合并
* rightGlobalCustom 不合并
* initComponentCache合并
* initFunctionMap合并
* initDataCenterMap合并
* initCommandModule合并
* initFormComponents合并
* containerIcon不合并
示例：
```js
const merge = userConfigMerge(a: Partial<InitConfig>, b?: Partial<InitConfig>):
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| InitConfig: initStoreData | IStoreData[] | store初始值 |
| InitConfig: leftAllRegistMap | leftAllRegistMap[] | 左边tab页组件渲染包括异步路径 { type: 'basic', component: 'button', img: 'http://xxxx/1.jpg' ,url:'' } |
| InitConfig: leftRenderListCategory | leftRenderListCategory[] | 左边tab页图标配置 |
| InitConfig: rightRenderListCategory | RightMapRenderListPropsItemCategory[] | 右边tab页图标配置 |
| InitConfig: initComponentCache | CacheComponentType | 组件加载缓存判定，用来设置不异步加载的组件 |
| InitConfig: initFunctionMap | FunctionCenterType | 内置函数配置 |
| InitConfig: initDataCenterMap | Record\<string, any\> | 内置数据中心配置数据 |
| InitConfig: initCommandModule | CommanderItemFactory[] | commander 指令集合 |
| InitConfig: rightGlobalCustom | ((config: UserConfig) => React.ReactNode) \| null \| undefined | 右侧全局自定义 |
| InitConfig: initFormComponents | Record\<string, React.FunctionComponent\<any\> \| React.ComponentClass\<any, any\>\>| 右侧配置项 |
| InitConfig: containerIcon | React.ReactNode | 容器拉伸图标 |
| 返回值 | 说明 |
| ---------------------------- | ---------------- |
| InitConfig | 无 |
## scaleFn
制作放大缩小的函数
示例：
```js
scaleFn.increase(0.1,config)
scaleFn.decrease(0.1,config)
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| number | number | 放大缩小比例 |
| config | UserConfig | 总配置项 |
## ComponentItemFactory
制作组件函数，如果想传递对象请使用createComponent。
示例：
```js
new ComponentItemFactory(
'button',
'按钮',
{
style: [
createPannelOptions<FormMap, 'input'>('input', {
receive: 'text',
label: '文字',
}),
],
fn: [
createPannelOptions<FormMap, 'switch'>('switch', {
receive: 'op1',
label: '改变文本函数',
}),
],
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
},
{
props: {
text: 'yehuozhili',
sizeData: [100, 30],
backgroundColor: 'rgba(0,132,255,1)',
lineHeight: 1,
borderRadius: 0,
op1: false,
borderData: {
borderWidth: 0,
borderColor: 'rgba(0,0,0,1)',
borderStyle: 'solid',
},
fontData: {
fontSize: 14,
textDecoration: 'none',
fontStyle: 'normal',
color: 'rgba(255,255,255,1)',
fontWeight: 'normal',
},
},
width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
rotate: {
canRotate: true,
value: 0,
},
canDrag: true, // false就不能拖
},
(data, context, store, config) => {
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
},
true
);
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| name | string | map上key名唯一 |
| display| string | 展示的名称 |
| props| Record\<string, CreateOptionsResAll[]\>| 配置项属性 |
| initData| Partial\<IBlockType\>| 初始值 |
| render|(data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element| 渲染函数 |
| resize| boolean = true | 是否拉伸 |
| needPosition| boolean = true| 是否用拖拽点位定初始位置 |
| init| () => void| 加载时函数 |
| destroy| () => void| 销毁时函数 |
| remoteConfig| Record\<string, any\>| 远程组件配置项 |
## createComponent
制作组件函数，对象形式new ComponentItemFactory,属性同上。
示例：
```js
createComponent({
name: 'testco',
display: '测试按钮',
props: {
style: [
createPannelOptions<FormMap, 'input'>('input', {
receive: 'text',
label: '文字',
}),
],
fn: [
createPannelOptions<FormMap, 'switch'>('switch', {
receive: 'op1',
label: '改变文本函数',
}),
],
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
},
initData: {
props: {
text: 'yehuozhili',
sizeData: [100, 30],
backgroundColor: 'rgba(0,132,255,1)',
lineHeight: 1,
borderRadius: 0,
op1: false,
borderData: {
borderWidth: 0,
borderColor: 'rgba(0,0,0,1)',
borderStyle: 'solid',
},
fontData: {
fontSize: 14,
textDecoration: 'none',
fontStyle: 'normal',
color: 'rgba(255,255,255,1)',
fontWeight: 'normal',
},
},
width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
rotate: {
canRotate: true,
value: 0,
},
canDrag: true, // false就不能拖
},
render: (data, context, store, config) => {
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
},
resize: true,
});
```
## createPannelOptions
用制作组件配置项函数
示例：
```js
createPannelOptions<FormMap, 'input'>('input', {
receive: 'text',
label: '文字',
})
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| type | string | 右侧配置组件对应的name |
| option| any | 发给该右侧配置组件的属性（自行根据右侧组件定义） |
## useRegistFunc
用于注册组件所抛出的函数，供事件链中给别的组件调用。
示例：
```js
useRegistFunc(op1, pr.context, fn);
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| dep | boolean | 配置的开关 （开启时抛出该函数，关闭时不抛出函数，一般做到右侧配置项中） |
| context | 'preview' \| 'edit' | 预览环境还是编辑环境 |
| registFn | Function | 所注册的函数 |
## CommanderItemFactory
用于制作快捷键
示例：
```js
const undo = new CommanderItemFactory(
'redo',
'Control+Shift+z',
(store) => {
store.redo();
},
'重做'
);
export default undo;
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| name | string | 命令执行的id |
| keyboard | string | 键位设置。如果ctrl、alt、meta键，可加对应的加号进行组合键注册，内部忽略大小写（注意！不是忽略注册的键名大小写，而是A和a的key处理时等价） |
| excute | (store: Store, config: UserConfig, options?: Record\<string, any\> \| undefined) => void | 所注册的函数 |
| display | string | 显示名称 |
| init | () => void | 加载时函数 |
| destroy | () => void | 销毁时函数 |
## dragEventResolve
用于菜单拖拽函数(通常不需要)
示例：
```js
<div
className={`${styles.coitem} yh-left-item-wrap`}
key={index}
{...dragEventResolve(v, props.config)}
>
...
</div>
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| item | LeftRegistComponentMapItem | 左侧对象 |
| config | UserConfig | 用户设置 |
## defaultStore
默认store对象
```js
export const defaultStore: IMainStoreData = {
container: {
width: 375,
height: 667,
},
block: [],
modalMap: {},
dataSource: {
defaultKey: 'defaultValue',
},
globalState: {
containerColor: 'rgba(255,255,255,1)',
title: 'Dooringx',
bodyColor: 'rgba(255,255,255,1)',
script: [],
customAnimate: [],
lineHeight: 1.575,
fontSize: 14,
},
modalConfig: {},
modalEditName: '',
origin: null,
};
```
## deepCopy
用于深拷贝
## specialCoList
需要特殊处理的组件，用于弹窗mask和timeline的禁止移动，一般不做处理
```js
export const specialCoList = ['modalMask'];
```
## specialFnList
需要特殊处理的函数，通过includes判断，函数不会像组件函数一样卸载。
```js
export const specialFnList = ['_inner'];
```
## locale
国际化设置，不用可以在config上设置i18n为false。
示例：
```js
import { IntlProvider } from 'react-intl';
import { locale } from 'dooringx-lib';
import { localeKey } from '../../../dooringx-lib/dist/locale';
export default function Layout({ children }: IRouteComponentProps) {
const [l, setLocale] = useState<localeKey>('zh-CN');
return (
<LocaleContext.Provider value={{ change: setLocale, current: l }}>
<IntlProvider messages={locale.localeMap[l]} locale={l} defaultLocale={l}>
<configContext.Provider value={config}>{children}</configContext.Provider>
</IntlProvider>
</LocaleContext.Provider>
);
}
```
### replaceLocale
用于替换文字函数
示例：
```js
replaceLocale(
'modal.popup.notfond',
`未找到该弹窗 ${sign.param}`,
props.config,
{ name: sign.param },
'未找到该弹窗 {name}'
)
```
| 参数 | 类型 | 说明 |
| ----------------- | ---------------- | ---- |
| id | LeftRegistComponentMapItem | 消息id |
| msg | string | 消息名称 |
| config | UserConfig | 用户设置 |
| param | object | 序列化字符串参数 |
| paramString | string | 序列化字符串，需要跟param参数结合使用 |
### localeMap
用于制作语言包
```js
import { en } from './en';
import { zhCN } from './zh-CN';
export const localeMap = {
'zh-CN': zhCN,
en,
};
```

126
packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
View File

@@ -5,52 +5,54 @@ nav:
title: Change log
order: 6
---
## 1.0.0
New document and createcomponent function
## 0.15.3
Modify check box selection algorithm
Modify the checkbox and select the algorithm
## 0.15.2
Fix inconsistencies in line element editing preview.
Fixed inconsistency in editing preview of elements in the line.
Add line height font size configuration item.
## 0.15.1
Useregistfunc is added to register functions.
Update some documents.
## 0.15.0
Discard storechanger and iframe containers.
Add function configuration to unload correctly.
Modify the pop-up logic to save the preview correctly.
Discard the storechanger and iframe containers.
Add function configuration to properly uninstall.
Modify logic such as pop-up window to save preview correctly.
## 0.14.1
Add data source left panel settings.
## 0.14.0
Fix the problem that the left and right configurations cannot get config.
Fixed the problem that the left and right configurations could not get config.
## 0.13.3
Fix the Title Failure and add the right panel configuration
Fixed Title Failure and added right panel configuration
## 0.13.2
Fixed possible invalidation of custom animation.
Fixed the problem that custom animation might fail.
## 0.13.1
Fixed editing problem of custom animation overloaded canvas.
Fixed the editing problem of custom animation reloading canvas.
## 0.13.0
Add custom animation, you can customize the animation freely.
## 0.12.4
Add a lifecycle.
Modify the timeline color and style to optimize the selected state.
Add lifecycle.
Modify the color and style of timeline and optimize the selected state.
## 0.12.3
Fix double click positioning problem
## 0.12.2
New double click positioning frame.
Fixed drag frame reset pointer behavior after pause.
Add double click positioning frame.
Fixed the behavior of dragging frame to reset pointer after pause.
## 0.12.0
The operation of adding frames to the animation can accurately view the animation status every 0.1 seconds!
Timeline adds some class names to facilitate style modification.
The operation of adding new frames in animation can accurately view the animation status every 0.1 seconds!
Timeline adds some class names for easy style modification.
## 0.11.11
Fixed animation causing rotation preview not to take effect.
Add container overflow configuration.
Adjust the style of the timeline section.
Example part style adjustment.
The style of timeline is adjusted.
Example section style adjustment.
## 0.11.10
New color pair
Add color style settings for markline
## 0.11.9
A new setting panel is added to control adsorption scaling and other behaviors.
Fixed pop-up button style issues.
Fix the problem that some prompts do not display.
Add setting panel control to control adsorption, scaling and other behaviors.
Fixed pop-up button style problem.
Fixed the problem that some prompts were not displayed.
## 0.11.8
Timeline adds auto focus function.
## 0.11.7
@@ -59,105 +61,105 @@ Cancel the multi selection adsorption function.
Cancel the adsorption of the first mouse click.
Modify the selected color of timeline.
## 0.11.5
Fix reference line adsorption and wrong displacement bug
Change the position of rotation justification
Fix the bug of reference line adsorption and wrong displacement
Change the position of rotation back to normal
## 0.11.4
Fix guide line bug
Optimized drag and drop algorithm
Fix reference line bug
Optimize drag and drop algorithm
## 0.11.3
Increase the function of rotary return.
Optimize mouse style.
Add the function of rotation return.
Optimize the mouse style.
## 0.11.2
Optimize drag speed
## 0.11.1
Compatible with legacy properties
Compatible with old properties
## 0.11.0
Modify the timeline style and add cansee attribute to make it easy to hide when editing.
Modify the timeline style and add the cansee attribute to make it easy to hide when editing.
## 0.10.4
Config adds a new custommap transfer, which is used to store temporary data that is not brought into JSON.
The remote component configuration is changed from URL to object to store more configurations.
Config adds a custommap transfer to store temporary data that is not brought into JSON.
The configuration of remote components is changed from URL to object to store more configurations.
## 0.10.3
Fix the color difference problem of the left tab.
Fixed the color difference of the left tab.
## 0.10.2
Modify the timeline, select the background color, and add the item class name to facilitate modification.
Modify the background color of timeline, and add the item class name to facilitate modification.
## 0.10.1
Modify the timeline class name to facilitate style modification.
## 0.10.0
The function name proposes name as a separate configuration item, the first parameter as ID and the last parameter as function name, so that the display name of the function can support conversion.
A pop-up event will not appear if the pop-up name is not passed.
The function name proposes that name is passed as a separate configuration item, the first parameter is ID, and the last parameter is function name. In this way, the display name of the function can support conversion.
If the pop-up event does not pass the pop-up name, no pop-up window will appear.
## 0.9.5
Scripts loading of preview component changes from concurrency to linearity.
The scripts loading of the preview component changes from concurrent to linear.
Using remote components in edit mode will save the current canvas state.
## 0.9.4
Fix the bug that the preview component cannot release loading
## 0.9.3
Add double click to place the canvas.
Change the initial focus state of the element.
If there is an element width and height, it is positioned at the center of the element when placed.
If the width and height of an element exist, it is positioned at the center of the element during placement.
## 0.9.2
Add remote component to call the whole process, and Add URL attribute in component to facilitate script loading.
Add the whole process of remote component calling, and Add URL attribute in component to facilitate script loading.
## 0.9.1
Add config I18N configuration. If internationalization is not used, there is no need to import the context of Intl.
Add config.i18n configuration. If internationalization is not used, there is no need to import Intl context.
The first button of the control component is changed to drag and drop, and the functions are merged into the timeline
## 0.9.0
Add react Intl and modify some styles.
## 0.8.4
Add the preview attribute to control loading from outside.
Add the content of preview to control loading from outside.
## 0.8.3
Add timeline drag bar and select.
Fix the error reported by the antd menu attribute.
Fixed an error in the antd menu attribute.
## 0.8.2
Add left panel configuration.
Fix timeline flicker.
Fixed the problem of timeline flicker.
## 0.8.1
Add animation component timeline. You can preview all animations better.
New animation component timeline. All animations can be previewed better.
## 0.8.0
The animation part is reconstructed, which can support the simultaneous configuration of multiple animations.
Partial reconstruction of animation can support simultaneous configuration of multiple animations.
The minimum value of canvas drag is changed to 0.
## 0.7.7
Optimize the drag logic of the canvas to move more smoothly.
## 0.7.6
The custom rightglobalcustom type on the right is changed to the function passed in config
The user-defined rightglobalcustom type on the right side is changed to function, and config is passed in
## 0.7.5
Change the roller direction.
## 0.7.4
Fix box move bug.
Fixed the box move bug.
## 0.7.3
Fix pop-up location and selection issues.
Fixed pop-up location and selection issues.
## 0.7.2
Fix the impact of locking components. You can't drag, zoom or rotate during locking.
Fixed the effect of locking components. Dragging, zooming and rotating cannot be performed during locking.
## 0.7.1
The repair lock component cannot be unlocked.
Fix that the lock component cannot be unlocked.
## 0.7.0
Component rotation is supported!
Fix optimization logic such as dragging reference lines.
Fixed optimization logic such as dragging reference lines.
## 0.6.0
The use of iframe in edit mode is supported!
Fix the selected condition.
Iframe is supported in editing mode!
Repair the selected condition.
## 0.5.1
Fix the problem on the right that cannot be unchecked.
Fixed the problem that the right selection cannot be unchecked.
## 0.5.0
Fix the problem that the width of the control component is not enough.
Fixed the problem that the width of the control component was not enough.
Remove the antd custom icon, and the icon at the bottom of the container can be configured.
## 0.4.2
Fix animation error initial value.
Fix incorrect initial value of animate.
Modify the markline style.
Global settings increase the height of the container.
The global setting increases the height of the container.
## 0.4.1
Remove the Lib auto import style.
## 0.4.0
Remove the runtime export and get all properties from config.
## 0.3.1
1. Replace UUID with nanoid.
2. Control component adds ruler control.
2. The control component adds ruler control.
## 0.3.0
1. Add a ruler. The containerwrapper needs to pass config before it can be used.
2. Modify container minimum drag 667. Fix the inconsistency between the distance between the canvas and the mouse when zooming down and dragging.
1. Add ruler. Containerwrapper needs to pass config before it can be used.
2. Modify the minimum drag of the container 667. Fixed the inconsistency between the distance between the canvas and the mouse when zooming down and dragging.
3. Innercontainerdragup needs to pass config.
## 0.2.0
Modify the transmission of the commander to obtain the config. The commander will no longer be exported from the index. When it needs to be used, it will be obtained from the config. Add the class name on the left to facilitate customization.
Modify the transfer of the commander to obtain the config. The commander is no longer exported from the index, but needs to be obtained from the config. Add the class name on the left to facilitate customization.
## 0.1.10
Modify eslint dependency recommendation
Modify eslint dependency (recommended)
## 0.1.9
Add global body settings
## 0.1.8
@@ -165,7 +167,7 @@ Add pop-up settings and remove modalcontainer
## 0.1.7
Modify the preview special condition display and delete the console
## 0.1.6
Adjust the initial zoom, the initial proportion of the canvas, and add the function of righting the canvas.
Adjust the initial scale, the initial scale of the canvas, and add the function of aligning the canvas.
## 0.1.5
Delete the button not made and add the fixed configuration
## 0.1.4

4
packages/dooringx-dumi-doc/docs/ChangeLog/index.md
View File

@@ -5,6 +5,10 @@ nav:
title: 变更日志
order: 6
---
## 1.0.0
新增文档，增加createComponent函数
## 0.15.3
修改选框选中算法

1
packages/dooringx-dumi-doc/docs/Guide/develop.md
View File

@@ -95,6 +95,7 @@ config可以拿到所有数据，用来制作事件时使用。
第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true,就是需要拖拽的位置，为false时将使用组件自身top和left定位来放置。
也可以使用对象形式传参,见`createComponent`函数
### 事件注册

12
packages/dooringx-dumi-doc/docs/Guide/index.md
View File

@@ -15,6 +15,8 @@ dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化
dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。
区别于别的搭建平台，其较为适合制作移动端，主要是绝对定位搭建而非静态定位搭建，绝对定位的拖拽较为方便运营人员理解。
### dooringx-lib 如何工作？
@@ -22,6 +24,14 @@ dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，
其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
### 数据流转是怎样的？
1、页面上渲染主要围绕store中json制作，你可以在任何地方通过`config.getStore().getData()`拿到store数据，修改后使用`config.setData()`设置数据。
2、右侧配置项的开发本质也是通过修改json完成。
3、事件流设计：每个组件可以抛出任意个函数，组件中可以设置时机，比如设置点击组件a按钮或b按钮为触发时机，触发后调用事件链。事件链可以设置由多个组件抛出的函数链接而成。
### 快速上手
@@ -269,3 +279,5 @@ export default IframePage;
```
此时拖拽组件进入画布后，点击按钮进入预览则可看见预览状态也被渲染出来了。

8
packages/dooringx-example/src/plugin/index.tsx
View File

@@ -29,6 +29,14 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
displayName: '输入框',
},
{
type: 'basic',
component: 'testco',
img: 'icon-anniu',
imgCustom: <PlayCircleOutlined />,
displayName: '测试按钮',
urlFn: () => import('./registComponents/testco'),
},
];
export const defaultConfig: Partial<InitConfig> = {

150
packages/dooringx-example/src/plugin/registComponents/testco.tsx Normal file
View File

@@ -0,0 +1,150 @@
/*
* @Author: yehuozhili
* @Date: 2021-07-07 14:35:38
* @LastEditors: yehuozhili
* @LastEditTime: 2022-04-27 22:24:23
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
*/
import { Button } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import {
changeUserValue,
createComponent,
createPannelOptions,
useDynamicAddEventCenter,
useRegistFunc,
} from 'dooringx-lib';
import { FormMap } from '../formTypes';
import { ComponentRenderConfigProps } from 'dooringx-lib/dist/core/components/componentItem';
function ButtonTemp(pr: ComponentRenderConfigProps) {
const props = pr.data.props;
const eventCenter = useMemo(() => {
return pr.config.getEventCenter();
}, [pr.config]);
useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
useEffect(() => {
// 模拟抛出事件
if (pr.context === 'preview') {
eventCenter.runEventQueue(`${pr.data.id}-init`, pr.config);
}
}, [eventCenter, pr.config, pr.context, pr.data.id]);
const [text, setText] = useState('');
const op1 = props.op1;
const fn = useMemo(() => {
const functionCenter = eventCenter.getFunctionCenter();
return functionCenter.register({
id: `${pr.data.id}+changeText`,
fn: async (ctx, next, config, args: any, _eventList, iname) => {
const userSelect = iname.data;
const ctxVal = changeUserValue(
userSelect['改变文本数据源'],
args,
'_changeval',
config,
ctx
);
const text = ctxVal[0];
setText(text);
next();
},
config: [
{
name: '改变文本数据源',
data: ['ctx', 'input', 'dataSource'],
options: {
receive: '_changeval',
multi: false,
},
},
],
name: `${pr.data.id}+改变文本函数`,
componentId: pr.data.id,
});
}, []);
useRegistFunc(op1, pr.context, fn);
return (
<Button
style={{
width: pr.data.width ? pr.data.width : props.sizeData[0],
height: pr.data.height ? pr.data.height : props.sizeData[1],
borderRadius: props.borderRadius + 'px',
border: `${props.borderData.borderWidth}px ${props.borderData.borderStyle} ${props.borderData.borderColor}`,
backgroundColor: props.backgroundColor,
color: props.fontData.color,
fontSize: props.fontData.fontSize,
fontWeight: props.fontData.fontWeight,
fontStyle: props.fontData.fontStyle,
textDecoration: props.fontData.textDecoration,
lineHeight: props.lineHeight,
}}
onClick={() => {
eventCenter.runEventQueue(`${pr.data.id}-click`, pr.config);
}}
>
{text ? text : props.text}
</Button>
);
}
const MButton = createComponent({
name: 'testco',
display: '测试按钮',
props: {
style: [
createPannelOptions<FormMap, 'input'>('input', {
receive: 'text',
label: '文字',
}),
],
fn: [
createPannelOptions<FormMap, 'switch'>('switch', {
receive: 'op1',
label: '改变文本函数',
}),
],
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
},
initData: {
props: {
text: 'yehuozhili',
sizeData: [100, 30],
backgroundColor: 'rgba(0,132,255,1)',
lineHeight: 1,
borderRadius: 0,
op1: false,
borderData: {
borderWidth: 0,
borderColor: 'rgba(0,0,0,1)',
borderStyle: 'solid',
},
fontData: {
fontSize: 14,
textDecoration: 'none',
fontStyle: 'normal',
color: 'rgba(255,255,255,1)',
fontWeight: 'normal',
},
},
width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
rotate: {
canRotate: true,
value: 0,
},
canDrag: true, // false就不能拖
},
render: (data, context, store, config) => {
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
},
resize: true,
});
export default MButton;

10
packages/dooringx-lib/README.md
View File

@@ -24,15 +24,8 @@ dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化
dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。
dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。
其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
## 文档 | Doc
当前版本变化较大，请等待文档完善。
[Read the Docs to Learn More](https://h5-dooring.github.io/dooringx/).
@@ -165,6 +158,3 @@ Contributions, issues and feature requests are welcome!.
MIT
## Todo
完善文档

2
packages/dooringx-lib/package.json
View File

@@ -1,5 +1,5 @@
{
"version": "0.15.3",
"version": "1.0.0",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js",

27
packages/dooringx-lib/src/core/components/abstract.ts
View File

@@ -21,3 +21,30 @@ export class ComponentItemFactory implements ComponentItem {
public remoteConfig: ComponentItem['remoteConfig'] = {}
) {}
}
export interface IPluginConfig {
name: ComponentItemFactory['name'];
display: ComponentItemFactory['display'];
props: ComponentItemFactory['props'];
initData: ComponentItemFactory['initData'];
render: ComponentItem['render'];
resize?: ComponentItem['resize'];
needPosition?: ComponentItem['needPosition'];
init?: ComponentItem['init'];
destroy?: ComponentItem['destroy'];
remoteConfig?: ComponentItem['remoteConfig'];
}
export function createComponent(config: IPluginConfig) {
return new ComponentItemFactory(
config.name,
config.display,
config.props,
config.initData,
config.render,
config.resize,
config.needPosition,
config.init,
config.destroy,
config.remoteConfig
);
}

14
packages/dooringx-lib/src/core/utils/index.ts
View File

@@ -7,20 +7,6 @@ import { specialCoList } from './special';
import deepCopys from 'deepcopy';
import { FunctionDataMap } from '../functionCenter/config';
import UserConfig from '../../config';
import { IPluginConfig } from './types';
import { ComponentItemFactory } from '../components/abstract';
// 创建插件
export const createPlugin = (config: IPluginConfig) => {
return new ComponentItemFactory(
config.key,
config.name,
{},
config.attr,
config.render,
config.attr.resize
);
};
export function deepCopy<T = any>(obj: T): T {
return deepCopys(obj);

7
packages/dooringx-lib/src/core/utils/types.ts
View File

@@ -1,7 +0,0 @@
export interface IPluginConfig {
key: string;
name: string;
attr: any;
render: (props: any) => JSX.Element;
resize?: boolean;
}

2
packages/dooringx-lib/src/index.tsx
View File

@@ -40,7 +40,7 @@ export { scaleFn } from './core/scale/index';
// 以下导出用于制作插件
// 用于制作组件的函数
export { ComponentItemFactory } from './core/components/abstract';
export { ComponentItemFactory, createComponent } from './core/components/abstract';
// 用于菜单拖拽的函数
export { dragEventResolve } from './core/crossDrag/index';
// 用于制作组件配置项的函数

2
packages/dooringx-plugin-template/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "dooringx-plugin-template",
"version": "0.15.3",
"version": "1.0.0",
"description": "> TODO: description",
"author": "yehuozhili <673632758@qq.com>",
"homepage": "https://github.com/H5-Dooring/dooringx#readme",

2
packages/dooringx-plugin-template/template/template.json
View File

@@ -40,7 +40,7 @@
"@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-url": "^6.1.0",
"@svgr/rollup": "^5.5.0",
"dooringx-lib": "^0.15.3",
"dooringx-lib": "^1.0.0",
"postcss": "^8.3.6",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.1",