mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 19:41:40 +08:00
release v1.0.0-rc.11 (#138)
* fix(editor): 页面标题不要换行 * docs: 教程与stageCore * fix(editor): runtime.updateRootConfig可以为空 * fix(editor): 编辑组件是获取parent需要获取到Proxy * fix(editor): 默认page属性值加上layout * fix(stage): magic注入时机应当在iframe onload之后 * chore: release v1.0.0-rc.11 * chore: 更新changlog Co-authored-by: roymondchen <roymondchen@tencent.com>
This commit is contained in:
jia000
GitHub
parent
e5f269cd88
commit
0fe6e0ed75
41
CHANGELOG.md
41
CHANGELOG.md
@ -1,43 +1,28 @@
|
||||
# [1.0.0-rc.10](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.10) (2022-06-15)
|
||||
# [1.0.0-rc.11](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.10...v1.0.0-rc.11) (2022-06-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **editor:** runtime.updateRootConfig可以为空 ([9ade1ab](https://github.com/Tencent/tmagic-editor/commit/9ade1ab64aee3d09231fd9693d60f74b3a25f8f3))
|
||||
* **editor:** 编辑组件是获取parent需要获取到Proxy ([6db8e07](https://github.com/Tencent/tmagic-editor/commit/6db8e07005ceacaef0a5520e9da97b784715d4c7))
|
||||
* **editor:** 页面标题不要换行 ([1bdafee](https://github.com/Tencent/tmagic-editor/commit/1bdafee2528312a8f9fa6b71310e43c4becb6688))
|
||||
* **editor:** 默认page属性值加上layout ([11c0190](https://github.com/Tencent/tmagic-editor/commit/11c01908d4f5ae69c997a3e094cc20d22818ec4d))
|
||||
* **stage:** magic注入时机应当在iframe onload之后 ([31a7748](https://github.com/Tencent/tmagic-editor/commit/31a7748ac835141549114f0646a5a913a5b114d0))
|
||||
|
||||
# [1.0.0-rc.10](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.9...v1.0.0-rc.10) (2022-06-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **editor:** page和container默认value加上items ([10577ae](https://github.com/Tencent/tmagic-editor/commit/10577aea68a63323bc1312faced84bcd5c616d1f))
|
||||
* **form:** 函数配置中添加config参数 ([7ad80e8](https://github.com/Tencent/tmagic-editor/commit/7ad80e848f81d3a96622540cce44f1fa10d9dc57))
|
||||
* **form:** 函数配置中添加config参数 ([eae9725](https://github.com/Tencent/tmagic-editor/commit/eae9725ccbbdbe8ffc9ded5af42993cff21bec77))
|
||||
* **stage:** 所有父节点中如果有translate，导致选中框定位出错 ([feff617](https://github.com/Tencent/tmagic-editor/commit/feff6177c97851dbe5457d4d59222c3f045ce864))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docs:** 添加搜索 ([4e812c3](https://github.com/Tencent/tmagic-editor/commit/4e812c396de05286a990cfe8831b7cb20531b2e3))
|
||||
* **playground:** 优化form/table playground ([c570370](https://github.com/Tencent/tmagic-editor/commit/c57037030d652ff160a108d632ff79b9bac97e2a))
|
||||
* **playground:** 添加form、table playground入口 ([f808253](https://github.com/Tencent/tmagic-editor/commit/f80825331e373047d467bb189cc4e5857dac6dfa))
|
||||
* **playground:** 添加不同设备切换 ([9f23cd6](https://github.com/Tencent/tmagic-editor/commit/9f23cd6361cce60c10178f39e133e13aa71a62ca))
|
||||
* 支持配置updateDragEl方法来调制选中框 ([154860c](https://github.com/Tencent/tmagic-editor/commit/154860c66c149b72537029b351401a0e90179e9c))
|
||||
|
||||
|
||||
|
||||
# [1.0.0-rc.9](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.9) (2022-06-15)
|
||||
# [1.0.0-rc.9](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.8...v1.0.0-rc.9) (2022-06-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **editor:** page和container默认value加上items ([10577ae](https://github.com/Tencent/tmagic-editor/commit/10577aea68a63323bc1312faced84bcd5c616d1f))
|
||||
* **stage:** 所有父节点中如果有translate，导致选中框定位出错 ([c6c4461](https://github.com/Tencent/tmagic-editor/commit/c6c44618f4eea197bbbe0f7d9ebcb07c2be03912))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docs:** 添加搜索 ([4e812c3](https://github.com/Tencent/tmagic-editor/commit/4e812c396de05286a990cfe8831b7cb20531b2e3))
|
||||
* **playground:** 优化form/table playground ([c570370](https://github.com/Tencent/tmagic-editor/commit/c57037030d652ff160a108d632ff79b9bac97e2a))
|
||||
* **playground:** 添加form、table playground入口 ([f808253](https://github.com/Tencent/tmagic-editor/commit/f80825331e373047d467bb189cc4e5857dac6dfa))
|
||||
* **playground:** 添加不同设备切换 ([9f23cd6](https://github.com/Tencent/tmagic-editor/commit/9f23cd6361cce60c10178f39e133e13aa71a62ca))
|
||||
* 支持配置updateDragEl方法来调制选中框 ([154860c](https://github.com/Tencent/tmagic-editor/commit/154860c66c149b72537029b351401a0e90179e9c))
|
||||
|
||||
|
||||
|
||||
# [1.0.0-rc.8](https://github.com/Tencent/tmagic-editor/compare/v1.0.0-rc.7...v1.0.0-rc.8) (2022-06-15)
|
||||
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ const sidebar = {
|
||||
],
|
||||
editorApi: [
|
||||
{
|
||||
text: '编辑器',
|
||||
text: '编辑器(@tmagic/editor)',
|
||||
children: [
|
||||
'/api/editor/editor',
|
||||
'/api/editor/services',
|
||||
@ -64,7 +64,7 @@ const sidebar = {
|
||||
],
|
||||
formApi: [
|
||||
{
|
||||
text: '表单',
|
||||
text: '表单(@tmagic/form)',
|
||||
children: [
|
||||
'/api/form/form',
|
||||
]
|
||||
@ -103,6 +103,26 @@ const sidebar = {
|
||||
'/api/form-config/relate',
|
||||
]
|
||||
},
|
||||
],
|
||||
stageApi: [
|
||||
{
|
||||
text: '画布(@tmagic/stage)',
|
||||
children: [
|
||||
'/api/stage/core',
|
||||
'/api/stage/mask',
|
||||
'/api/stage/render',
|
||||
'/api/stage/drag-resize',
|
||||
]
|
||||
},
|
||||
],
|
||||
tutorial: [
|
||||
{
|
||||
text: '教程',
|
||||
children: [
|
||||
'/tutorial/hello-world',
|
||||
'/tutorial/runtime',
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
@ -150,7 +170,14 @@ export default defineUserConfig({
|
||||
text: '表单配置',
|
||||
link: '/api/form-config/layout'
|
||||
},
|
||||
{
|
||||
text: '画布(Stage)',
|
||||
link: '/api/stage/core'
|
||||
},
|
||||
],
|
||||
}, {
|
||||
text: '教程',
|
||||
link: '/tutorial/hello-world',
|
||||
}, {
|
||||
text: '查看源码',
|
||||
link: 'https://github.com/Tencent/tmagic-editor'
|
||||
@ -168,6 +195,8 @@ export default defineUserConfig({
|
||||
'/api/editor': sidebar.editorApi,
|
||||
'/api/form': sidebar.formApi,
|
||||
'/api/form-config': sidebar.formConfig,
|
||||
'/api/stage': sidebar.stageApi,
|
||||
'/tutorial': sidebar.tutorial,
|
||||
},
|
||||
lastUpdated: false,
|
||||
contributors: false,
|
||||
|
||||
BIN
docs/src/.vuepress/public/tutorial/one/init.png
Normal file
BIN
docs/src/.vuepress/public/tutorial/one/init.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -2,7 +2,7 @@
|
||||
|
||||
## props
|
||||
|
||||
### data
|
||||
### modelValue
|
||||
|
||||
- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)[]
|
||||
|
||||
@ -185,7 +185,7 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
|
||||
|
||||
- **详情：**
|
||||
|
||||
中间工作区域中画布渲染的内容
|
||||
中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -201,7 +201,7 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
|
||||
|
||||
- **详情：**
|
||||
|
||||
中间工作区域中画布通过iframe渲染时的页面url
|
||||
runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
|
||||
|
||||
### propsConfigs
|
||||
|
||||
@ -281,6 +281,27 @@ import { ArrowLeft, Coin } from '@element-plus/icons';
|
||||
|
||||
画布的大小配置
|
||||
|
||||
### autoScrollIntoView
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中组件时，知否自动滚动改组件到可视区域
|
||||
|
||||
### updateDragEl
|
||||
|
||||
- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当选中框与组件不贴合时，可以通过此方法进行调整
|
||||
|
||||
|
||||
## slots
|
||||
|
||||
### nav
|
||||
|
||||
@ -43,7 +43,7 @@ editorService.set('node', node);
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{'root' | 'page' | 'parent' | 'node'} name`
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'stage' | 'highlightNode' | 'pageLength'} name`
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -61,6 +61,14 @@ editorService.set('node', node);
|
||||
|
||||
'node': 当前选中的节点
|
||||
|
||||
'stage': [StageCore](../../api/stage/core.md)实例
|
||||
|
||||
'highlightNode': 当前高亮的Dom
|
||||
|
||||
'modifiedNodeIds': 当前已修改未保存的组件id
|
||||
|
||||
'pageLength': 当前的页面数量
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
|
||||
286
docs/src/api/stage/core.md
Normal file
286
docs/src/api/stage/core.md
Normal file
@ -0,0 +1,286 @@
|
||||
# StageCore
|
||||
|
||||
## 配置
|
||||
|
||||
### canSelect
|
||||
|
||||
- **类型：** Function
|
||||
|
||||
- **默认值：** (el: HTMLElement) => !!el.id
|
||||
|
||||
- **详情：**
|
||||
|
||||
判断Dom节点是否能被选中
|
||||
|
||||
### moveableOptions
|
||||
|
||||
- **类型：** (el: HTMLElement) => boolean
|
||||
|
||||
- **默认值：** (el: HTMLElement) => !!el.id
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
|
||||
|
||||
### render
|
||||
|
||||
- **类型：** (renderer: StageCore) => Promise\<HTMLElement\> | HTMLElement
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
|
||||
|
||||
### autoScrollIntoView
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中组件时，知否自动滚动改组件到可视区域
|
||||
|
||||
|
||||
### updateDragEl
|
||||
|
||||
- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当选中框与组件不贴合时，可以通过此方法进行调整
|
||||
|
||||
|
||||
## 属性
|
||||
|
||||
### selectedDom
|
||||
|
||||
- **类型：** Element | undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前选中的Dom
|
||||
|
||||
### highlightedDom
|
||||
|
||||
- **类型：** Element | undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前高亮的Dom
|
||||
|
||||
### renderer
|
||||
|
||||
- **类型：** [StageRender](./render.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageRender实例
|
||||
|
||||
### mask
|
||||
|
||||
- **类型：** [StageMask](./mask.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageMask实例
|
||||
|
||||
|
||||
### dr
|
||||
|
||||
- **类型：** [StageDragResize](./drag-resize.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageDragResize实例
|
||||
|
||||
### config
|
||||
|
||||
- **类型：** Object
|
||||
|
||||
- **详情：**
|
||||
|
||||
初始化配置
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布根节点
|
||||
|
||||
## 方法
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将stage挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
### clearGuides
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
清空所有参考线
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
|
||||
### setElementFromPoint
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{MouseEvent} event`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
|
||||
### select
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Id | HTMLElement} idOrEl` 组件Dom节点的id属性，或者Dom节点
|
||||
- `{MouseEvent} MouseEvent`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
选中组件
|
||||
|
||||
### update
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data` 更新的数据
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
更新选中的节点
|
||||
|
||||
### highlight
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement | Id} idOrEl` 组件Dom节点的id属性，或者Dom节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
高亮选中组件
|
||||
|
||||
### sortNode
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{SortEventData} data`
|
||||
|
||||
```ts
|
||||
interface SortEventData {
|
||||
src: Id;
|
||||
dist: Id;
|
||||
root?: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### add
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data`
|
||||
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### remove
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data`
|
||||
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### setZoom
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number} zoom`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
182
docs/src/api/stage/drag-resize.md
Normal file
182
docs/src/api/stage/drag-resize.md
Normal file
@ -0,0 +1,182 @@
|
||||
# StageDragResize
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框容器
|
||||
|
||||
## 属性
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框容器
|
||||
|
||||
### target
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
目标节点
|
||||
|
||||
### dragEl
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
目标节点在蒙层中的占位节点
|
||||
|
||||
### moveable
|
||||
|
||||
- **类型：** [moveable](https://github.com/daybrush/moveable)
|
||||
|
||||
- **详情：**
|
||||
|
||||
moveable实例
|
||||
|
||||
### horizontalGuidelines
|
||||
|
||||
- **类型：** number[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平参考线
|
||||
|
||||
### verticalGuidelines
|
||||
|
||||
- **类型：** number[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
垂直参考线
|
||||
|
||||
### elementGuidelines
|
||||
|
||||
- **类型：** HTMLElement[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
对齐元素集合
|
||||
|
||||
### mode
|
||||
|
||||
- **类型：** Mode
|
||||
|
||||
```ts
|
||||
enum Mode {
|
||||
/** 绝对定位布局 */
|
||||
ABSOLUTE = 'absolute',
|
||||
/** 固定定位布局 */
|
||||
FIXED = 'fixed',
|
||||
/** 流式布局 */
|
||||
SORTABLE = 'sortable',
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
布局方式：流式布局、绝对定位、固定定位
|
||||
|
||||
## 方法
|
||||
|
||||
|
||||
### select
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement} el` 组件Dom节点
|
||||
- `{MouseEvent} MouseEvent`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
将选中框渲染并覆盖到选中的组件Dom节点上方
|
||||
|
||||
当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
|
||||
|
||||
### updateMoveable
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement} el` 组件Dom节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
初始化选中框并渲染出来
|
||||
|
||||
### setGuidelines
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{GuidesType} type` 参考线类型
|
||||
- `{number[]} guidelines` 参考线偏移值
|
||||
|
||||
```ts
|
||||
/** 参考线类型 */
|
||||
export enum GuidesType {
|
||||
/** 水平 */
|
||||
HORIZONTAL = 'horizontal',
|
||||
/** 垂直 */
|
||||
VERTICAL = 'vertical',
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
设置参考线
|
||||
|
||||
### clearGuides
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
情况参考线
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
173
docs/src/api/stage/mask.md
Normal file
173
docs/src/api/stage/mask.md
Normal file
@ -0,0 +1,173 @@
|
||||
# StageMask
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
## 属性
|
||||
|
||||
### content
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层的Dom节点
|
||||
|
||||
### wrapper
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层的容器Dom节点，用于实现滚动
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### page
|
||||
|
||||
- **类型：** HTMLElement | null
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前页面组件Dom节点
|
||||
|
||||
### pageScrollParent
|
||||
|
||||
- **类型：** HTMLElement | null
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面组件的滚动父节点
|
||||
|
||||
### scrollTop
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
垂直滚动位移
|
||||
|
||||
### scrollLeft
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平滚动位移
|
||||
|
||||
### width
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层宽度，不应该手动设置，会自动同步[page](#page)
|
||||
|
||||
### height
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层高度，不应该手动设置，会自动同步[page](#page)
|
||||
|
||||
### wrapperHeight
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层容器高度
|
||||
|
||||
### wrapperWidth
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层容器宽度
|
||||
|
||||
### maxScrollTop
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
最大垂直滚动位移
|
||||
|
||||
### maxScrollLeft
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
最大水平滚动位移
|
||||
|
||||
## 方法
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将蒙层挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
### scrollIntoView
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Element} el` 需要滚动的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
将指定节点滚动到可视区域
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
### setLayout
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Element} el`
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
根据节点设置模式，固定模式wrap与content宽高保持一直
|
||||
|
||||
110
docs/src/api/stage/render.md
Normal file
110
docs/src/api/stage/render.md
Normal file
@ -0,0 +1,110 @@
|
||||
# StageRender
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
## 属性
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### contentWindow
|
||||
|
||||
- **类型：** RuntimeWindow | null
|
||||
|
||||
```ts
|
||||
interface RuntimeWindow extends Window {
|
||||
magic: Magic;
|
||||
}
|
||||
|
||||
interface Magic {
|
||||
/** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
|
||||
onPageElUpdate: (el: HTMLElement) => void;
|
||||
|
||||
onRuntimeReady: (runtime: Runtime) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow
|
||||
|
||||
### runtime
|
||||
|
||||
- **类型：** Runtime | null
|
||||
|
||||
```ts
|
||||
interface Runtime {
|
||||
getApp?: () => Core;
|
||||
beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
|
||||
// 编辑器Dsl整个改变时调用
|
||||
updateRootConfig?: (config: MApp) => void;
|
||||
// 选择页面时调用
|
||||
updatePageId?: (id: Id) => void;
|
||||
// 选中组件时调用
|
||||
select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
|
||||
// 添加组件时调用
|
||||
add?: (data: UpdateData) => void;
|
||||
// 更新组件时调用
|
||||
update?: (data: UpdateData) => void;
|
||||
// 流式布局下拖动组件后调用
|
||||
sortNode?: (data: SortEventData) => void;
|
||||
// 删除组件时调用
|
||||
remove?: (data: RemoveData) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
用于编辑器与画布的交互
|
||||
|
||||
### iframe
|
||||
|
||||
- **类型：** HTMLIFrameElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **详情：**
|
||||
|
||||
## 方法
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将页面挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
287
docs/src/tutorial/hello-world.md
Normal file
287
docs/src/tutorial/hello-world.md
Normal file
@ -0,0 +1,287 @@
|
||||
# 1.Hello World
|
||||
|
||||
## 环境准备
|
||||
|
||||
使用[@vue/cli](https://cli.vuejs.org/zh/guide/installation.html)初始化项目
|
||||
|
||||
```
|
||||
npm install -g @vue/cli
|
||||
```
|
||||
|
||||
> 由于大部分新的webpack插件都已不支持webpack5以下，建议使用@vue/cli@5.0.0及以上版本
|
||||
> 如现有项目是webpack4的，需要注意安装node_module时使用对应的版本
|
||||
> 使用@vue/cli@4的，需要在vue.config.ts 中加入 transpileDependencies: [/@tmagic/]
|
||||
|
||||
::: tip
|
||||
虽然这里使用@vue/cli作为示例教程，但是更推荐使用[vite](https://github.com/vitejs/vite)
|
||||
:::
|
||||
|
||||
::: warning
|
||||
:warning: 如用node 16安装不成功，可以尝试用node 14
|
||||
:::
|
||||
|
||||
## 创建项目
|
||||
|
||||
[关于@vue/cli的详细教程可以查看官方文档](https://cli.vuejs.org/zh/guide/installation.html)
|
||||
|
||||
```
|
||||
vue create hello-world
|
||||
|
||||
cd hello-world
|
||||
```
|
||||
|
||||
得到项目目录如下
|
||||
|
||||
```
|
||||
.
|
||||
└─hello-world
|
||||
└─ public
|
||||
└─ test
|
||||
└─ src
|
||||
├─ APP.vue
|
||||
├─ main.vue
|
||||
└─ components
|
||||
└─ HelloWorld.vue
|
||||
└─ vue.config.js
|
||||
...
|
||||
```
|
||||
|
||||
> src/components在本次教程中暂时没有用到，可以删掉；
|
||||
|
||||
## 添加依赖
|
||||
|
||||
```
|
||||
npm install --save @tmagic/editor @tmagic/form element-plus
|
||||
```
|
||||
|
||||
## 注册组件
|
||||
|
||||
将以下代码覆盖到src/magic.ts中
|
||||
|
||||
```ts
|
||||
import 'element-plus/dist/index.css';
|
||||
import '@tmagic/editor/dist/style.css';
|
||||
import '@tmagic/form/dist/style.css';
|
||||
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
|
||||
import TMagicEditor from '@tmagic/editor';
|
||||
import TMagicForm from '@tmagic/form';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
createApp(App)
|
||||
.use(ElementPlus)
|
||||
.use(TMagicEditor)
|
||||
.use(TMagicForm)
|
||||
.mount('#app');
|
||||
|
||||
```
|
||||
|
||||
## 渲染编辑器
|
||||
|
||||
将以下代码覆盖到src/App.vue中
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<m-editor
|
||||
v-model="value"
|
||||
:render="render"
|
||||
:component-group-list="componentGroupList"
|
||||
></m-editor>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref();
|
||||
|
||||
const componentGroupList = ref([]);
|
||||
|
||||
const render = () => window.document.createElement('div');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.m-editor {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## 运行项目
|
||||
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问http://localhost:8081/，将看到
|
||||
|
||||
<img src="/tutorial/one/init.png" />
|
||||
|
||||
## 添加组件列表
|
||||
|
||||
api详情：[componentGroupList](../api/editor/editor.md#componentGroupList)
|
||||
|
||||
```ts
|
||||
const componentGroupList = ref([
|
||||
{
|
||||
title: '组件列表',
|
||||
items: [
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png',
|
||||
text: 'HelloWorld',
|
||||
type: 'hello-world',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
到这里，左侧会出现一个叫HelloWorld的爱心图标，点击它会发现没有反应，代开控制台会发现有error；这是因为还没有创建页面
|
||||
|
||||
点击中间的新增页面也会发现没有反应，这是因为没有编辑器初始值，只需要给value赋上初始值就可以了
|
||||
|
||||
## 设置编辑器初始值
|
||||
|
||||
api详情：[modelValue](../api/editor/editor.md#modelValue)
|
||||
|
||||
```ts
|
||||
const value = ref({
|
||||
type: 'app',
|
||||
items: [],
|
||||
});
|
||||
```
|
||||
|
||||
加上初始值后，点击新增页面就可以渲染出一个画布了，但是点击添加HelloWorld组件依然没有反应
|
||||
|
||||
这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../api/editor/editor.html#render)函数中处理
|
||||
|
||||
## 渲染
|
||||
|
||||
api详情：[render](../api/editor/editor.md#render)
|
||||
|
||||
```ts
|
||||
const render = () => {
|
||||
const root = window.document.createElement('div');
|
||||
const page = value.value.items[0];
|
||||
|
||||
if (!page) return root;
|
||||
|
||||
root.id = `${page.value.id}`;
|
||||
|
||||
createApp(
|
||||
{
|
||||
template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>',
|
||||
props: ['config'],
|
||||
},
|
||||
{
|
||||
config: page,
|
||||
},
|
||||
).mount(root);
|
||||
|
||||
return root;
|
||||
};
|
||||
```
|
||||
|
||||
这里用到了动态编译Vue模板，所以需要在vue.config.js中添加vue alias
|
||||
|
||||
```js
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
vue$: 'vue/dist/vue.esm-bundler.js',
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
> render函数中获取page是通过value.value.items[0]，这样只是表示第一个页面，如果页面有多个页面就会有问题
|
||||
> 可以通过[editorService.get('page')](../api/editor/services.md#get)获取到当前选中的页面
|
||||
|
||||
```ts
|
||||
import { editorService } from '@tmagic/editor';
|
||||
import type { MPage } from '@tmagic/schema';
|
||||
|
||||
const page = computed(() => editorService.get<MPage>('page'))
|
||||
```
|
||||
|
||||
到这已经能渲染出HelloWorld组件了，但是会发现无法选中，因为这时并不知道画布中的Dom已经发生变化，所以需要通知编辑器
|
||||
|
||||
需要调用
|
||||
|
||||
```ts
|
||||
renderer.iframe.contentWindow.magic?.onRuntimeReady({});
|
||||
renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
|
||||
```
|
||||
> render函数接收一个stageCore参数 [StageCore](../api/stage/core.md)
|
||||
|
||||
最终完整的render函数实现
|
||||
|
||||
```ts
|
||||
const render = async ({ renderer }: StageCore) => {
|
||||
const root = window.document.createElement('div');
|
||||
|
||||
if (!page.value) return root;
|
||||
|
||||
const { width = 375, height = 1700 } = page.value.style || {};
|
||||
|
||||
root.id = `${page.value.id}`;
|
||||
root.style.cssText = `
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
`;
|
||||
|
||||
createApp(
|
||||
{
|
||||
template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>',
|
||||
props: ['config'],
|
||||
},
|
||||
{
|
||||
config: page.value,
|
||||
},
|
||||
).mount(root);
|
||||
|
||||
renderer.on('onload', () => {
|
||||
const style = window.document.createElement('style');
|
||||
// 隐藏滚动条，重置默认样式
|
||||
style.innerHTML = `
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html,body {
|
||||
height: 100%; margin: 0;padding: 0;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
renderer.iframe.contentDocument.head.appendChild(style);
|
||||
|
||||
renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
|
||||
renderer.iframe.contentWindow.magic?.onRuntimeReady({});
|
||||
});
|
||||
|
||||
return root;
|
||||
};
|
||||
```
|
||||
|
||||
以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../api/editor/editor.md#runtimeurl)。
|
||||
|
||||
::: tip
|
||||
并不是render函数不好，但是从设计上将，render函数还是让渲染逻辑落到了编辑中，@tmagic/editor的设计是希望做到渲染也编辑器解耦
|
||||
:::
|
||||
|
||||
[源码](https://github.com/jia000/tmagic-tutorial)
|
||||
1
docs/src/tutorial/runtime.md
Normal file
1
docs/src/tutorial/runtime.md
Normal file
@ -0,0 +1 @@
|
||||
# 2.Runtime
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "tmagic",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@7.1.9",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/core",
|
||||
"sideEffects": [
|
||||
"dist/*"
|
||||
@ -33,7 +33,7 @@
|
||||
"vue"
|
||||
],
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"events": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/editor",
|
||||
"sideEffects": [
|
||||
"dist/*",
|
||||
@ -43,11 +43,11 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.18.0",
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"@tmagic/core": "1.0.0-rc.10",
|
||||
"@tmagic/form": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/stage": "1.0.0-rc.10",
|
||||
"@tmagic/utils": "1.0.0-rc.10",
|
||||
"@tmagic/core": "1.0.0-rc.11",
|
||||
"@tmagic/form": "1.0.0-rc.11",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/stage": "1.0.0-rc.11",
|
||||
"@tmagic/utils": "1.0.0-rc.11",
|
||||
"buffer": "^6.0.3",
|
||||
"color": "^3.1.3",
|
||||
"element-plus": "^2.2.0",
|
||||
@ -60,7 +60,7 @@
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/form": "1.0.0-rc.10",
|
||||
"@tmagic/form": "1.0.0-rc.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"monaco-editor": "^0.32.1",
|
||||
"vue": "^3.2.0"
|
||||
|
||||
@ -123,7 +123,7 @@ export default defineComponent({
|
||||
stage?.on('runtime-ready', (rt) => {
|
||||
runtime = rt;
|
||||
// toRaw返回的值是一个引用而非快照，需要cloneDeep
|
||||
root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
|
||||
root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
|
||||
page.value?.id && runtime?.updatePageId?.(page.value.id);
|
||||
setTimeout(() => {
|
||||
node.value && stage?.select(toRaw(node.value.id));
|
||||
@ -138,7 +138,7 @@ export default defineComponent({
|
||||
|
||||
watch(root, (root) => {
|
||||
if (runtime && root) {
|
||||
runtime.updateRootConfig(cloneDeep(toRaw(root)));
|
||||
runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -108,10 +108,14 @@ class Editor extends BaseService {
|
||||
/**
|
||||
* 根据id获取组件、组件的父组件以及组件所属的页面节点
|
||||
* @param {number | string} id 组件id
|
||||
* @param {boolean} raw 是否使用toRaw
|
||||
* @returns {EditorNodeInfo}
|
||||
*/
|
||||
public getNodeInfo(id: Id): EditorNodeInfo {
|
||||
const root = toRaw(this.get<MApp | null>('root'));
|
||||
public getNodeInfo(id: Id, raw = true): EditorNodeInfo {
|
||||
let root = this.get<MApp | null>('root');
|
||||
if (raw) {
|
||||
root = toRaw(root);
|
||||
}
|
||||
if (!root) return {};
|
||||
|
||||
if (id === root.id) {
|
||||
@ -141,21 +145,23 @@ class Editor extends BaseService {
|
||||
/**
|
||||
* 根据ID获取指点节点配置
|
||||
* @param id 组件ID
|
||||
* @param {boolean} raw 是否使用toRaw
|
||||
* @returns 组件节点配置
|
||||
*/
|
||||
public getNodeById(id: Id): MNode | undefined {
|
||||
const { node } = this.getNodeInfo(id);
|
||||
public getNodeById(id: Id, raw = true): MNode | undefined {
|
||||
const { node } = this.getNodeInfo(id, raw);
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID获取指点节点的父节点配置
|
||||
* @param id 组件ID
|
||||
* @param {boolean} raw 是否使用toRaw
|
||||
* @returns 指点组件的父节点配置
|
||||
*/
|
||||
public getParentById(id: Id): MContainer | undefined {
|
||||
public getParentById(id: Id, raw = true): MContainer | undefined {
|
||||
if (!this.get<MApp | null>('root')) return;
|
||||
const { parent } = this.getNodeInfo(id);
|
||||
const { parent } = this.getNodeInfo(id, raw);
|
||||
return parent;
|
||||
}
|
||||
|
||||
@ -279,7 +285,7 @@ class Editor extends BaseService {
|
||||
} else if (curNode.items) {
|
||||
parentNode = curNode;
|
||||
} else {
|
||||
parentNode = this.getParentById(curNode.id);
|
||||
parentNode = this.getParentById(curNode.id, false);
|
||||
}
|
||||
|
||||
if (!parentNode) throw new Error('未找到父元素');
|
||||
@ -332,7 +338,7 @@ class Editor extends BaseService {
|
||||
|
||||
if (!root) throw new Error('没有root');
|
||||
|
||||
const { parent, node: curNode } = this.getNodeInfo(node.id);
|
||||
const { parent, node: curNode } = this.getNodeInfo(node.id, false);
|
||||
|
||||
if (!parent || !curNode) throw new Error('找不要删除的节点');
|
||||
|
||||
@ -384,7 +390,7 @@ class Editor extends BaseService {
|
||||
public async update(config: MNode): Promise<MNode> {
|
||||
if (!config?.id) throw new Error('没有配置或者配置缺少id值');
|
||||
|
||||
const info = this.getNodeInfo(config.id);
|
||||
const info = this.getNodeInfo(config.id, false);
|
||||
|
||||
if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
|
||||
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
background-color: #f3f3f3;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
|
||||
@ -248,6 +248,7 @@ export const getDefaultPropsValue = (type: string, id: string) =>
|
||||
? {
|
||||
type,
|
||||
id,
|
||||
layout: 'absolute',
|
||||
style: {},
|
||||
name: type,
|
||||
items: [],
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/form",
|
||||
"sideEffects": [
|
||||
"dist/*",
|
||||
@ -33,7 +33,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"@tmagic/utils": "1.0.0-rc.10",
|
||||
"@tmagic/utils": "1.0.0-rc.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moment": "^2.29.2",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/schema",
|
||||
"sideEffects": false,
|
||||
"main": "dist/tmagic-schema.umd.js",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/stage",
|
||||
"sideEffects": [
|
||||
"dist/*"
|
||||
@ -27,9 +27,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@scena/guides": "^0.17.0",
|
||||
"@tmagic/core": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/utils": "1.0.0-rc.10",
|
||||
"@tmagic/core": "1.0.0-rc.11",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/utils": "1.0.0-rc.11",
|
||||
"events": "^3.3.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moveable": "^0.29.4",
|
||||
|
||||
@ -81,10 +81,6 @@ export default class StageRender extends EventEmitter {
|
||||
}
|
||||
|
||||
el.appendChild<HTMLIFrameElement>(this.iframe);
|
||||
|
||||
this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
|
||||
|
||||
this.contentWindow.magic = this.getMagicApi();
|
||||
} else {
|
||||
throw Error('mount 失败');
|
||||
}
|
||||
@ -113,7 +109,9 @@ export default class StageRender extends EventEmitter {
|
||||
}
|
||||
|
||||
private loadHandler = async () => {
|
||||
this.emit('onload');
|
||||
this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
|
||||
|
||||
this.contentWindow.magic = this.getMagicApi();
|
||||
|
||||
if (this.render) {
|
||||
const el = await this.render(this.core);
|
||||
@ -121,5 +119,7 @@ export default class StageRender extends EventEmitter {
|
||||
this.iframe?.contentDocument?.body?.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
this.emit('onload');
|
||||
};
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@ export interface Runtime {
|
||||
getApp?: () => Core;
|
||||
beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
|
||||
getSnapElements?: (el?: HTMLElement) => HTMLElement[];
|
||||
updateRootConfig: (config: MApp) => void;
|
||||
updateRootConfig?: (config: MApp) => void;
|
||||
updatePageId?: (id: Id) => void;
|
||||
select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
|
||||
add?: (data: UpdateData) => void;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/table",
|
||||
"sideEffects": [
|
||||
"dist/*"
|
||||
@ -30,13 +30,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form": "1.0.0-rc.10",
|
||||
"@tmagic/form": "1.0.0-rc.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/form": "1.0.0-rc.10",
|
||||
"@tmagic/form": "1.0.0-rc.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tmagic/ui-react",
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"main": "src/index.ts",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
@ -13,7 +13,7 @@
|
||||
"react:build": "tsc && vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"qrcode": "^1.5.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/ui-vue2",
|
||||
"main": "src/index.ts",
|
||||
"engines": {
|
||||
@ -10,7 +10,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@vue/composition-api": "1.0.5",
|
||||
"qrcode": "^1.5.0",
|
||||
"vue": "^2.6.14"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/ui",
|
||||
"main": "src/index.ts",
|
||||
"engines": {
|
||||
@ -11,7 +11,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"delegate": "^3.2.0",
|
||||
"qrcode": "^1.5.0",
|
||||
"tiny-emitter": "^2.1.0",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"name": "@tmagic/utils",
|
||||
"main": "dist/tmagic-utils.umd.js",
|
||||
"module": "dist/tmagic-utils.es.js",
|
||||
@ -22,7 +22,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"moment": "^2.29.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tmagic-playground",
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"clean:top": "rimraf dist",
|
||||
@ -12,11 +12,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"@tmagic/editor": "1.0.0-rc.10",
|
||||
"@tmagic/form": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/stage": "1.0.0-rc.10",
|
||||
"@tmagic/utils": "1.0.0-rc.10",
|
||||
"@tmagic/editor": "1.0.0-rc.11",
|
||||
"@tmagic/form": "1.0.0-rc.11",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/stage": "1.0.0-rc.11",
|
||||
"@tmagic/utils": "1.0.0-rc.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"monaco-editor": "^0.32.1",
|
||||
"serialize-javascript": "^6.0.0",
|
||||
|
||||
52
pnpm-lock.yaml
generated
52
pnpm-lock.yaml
generated
@ -105,7 +105,7 @@ importers:
|
||||
|
||||
packages/core:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@types/events': ^3.0.0
|
||||
'@types/node': ^15.12.4
|
||||
events: ^3.3.0
|
||||
@ -126,11 +126,11 @@ importers:
|
||||
specifiers:
|
||||
'@babel/core': ^7.18.0
|
||||
'@element-plus/icons': 0.0.11
|
||||
'@tmagic/core': 1.0.0-rc.10
|
||||
'@tmagic/form': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/stage': 1.0.0-rc.10
|
||||
'@tmagic/utils': 1.0.0-rc.10
|
||||
'@tmagic/core': 1.0.0-rc.11
|
||||
'@tmagic/form': 1.0.0-rc.11
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/stage': 1.0.0-rc.11
|
||||
'@tmagic/utils': 1.0.0-rc.11
|
||||
'@types/events': ^3.0.0
|
||||
'@types/lodash-es': ^4.17.4
|
||||
'@types/node': ^15.12.4
|
||||
@ -191,7 +191,7 @@ importers:
|
||||
specifiers:
|
||||
'@babel/core': ^7.18.0
|
||||
'@element-plus/icons': 0.0.11
|
||||
'@tmagic/utils': 1.0.0-rc.10
|
||||
'@tmagic/utils': 1.0.0-rc.11
|
||||
'@types/lodash-es': ^4.17.4
|
||||
'@types/node': ^15.12.4
|
||||
'@types/sortablejs': ^1.10.7
|
||||
@ -247,9 +247,9 @@ importers:
|
||||
packages/stage:
|
||||
specifiers:
|
||||
'@scena/guides': ^0.17.0
|
||||
'@tmagic/core': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/utils': 1.0.0-rc.10
|
||||
'@tmagic/core': 1.0.0-rc.11
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/utils': 1.0.0-rc.11
|
||||
'@types/events': ^3.0.0
|
||||
'@types/lodash-es': ^4.17.4
|
||||
'@types/node': ^15.12.4
|
||||
@ -281,7 +281,7 @@ importers:
|
||||
|
||||
packages/table:
|
||||
specifiers:
|
||||
'@tmagic/form': 1.0.0-rc.10
|
||||
'@tmagic/form': 1.0.0-rc.11
|
||||
'@types/color': ^3.0.1
|
||||
'@types/lodash-es': ^4.17.4
|
||||
'@types/node': ^15.12.4
|
||||
@ -317,7 +317,7 @@ importers:
|
||||
packages/ui:
|
||||
specifiers:
|
||||
'@testing-library/vue': ^6.4.2
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@types/qrcode': ^1.4.2
|
||||
'@vue/compiler-sfc': ^3.2.0
|
||||
'@vue/test-utils': ^2.0.0
|
||||
@ -339,7 +339,7 @@ importers:
|
||||
|
||||
packages/ui-react:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@types/react': ^17.0.37
|
||||
'@types/react-dom': ^17.0.11
|
||||
qrcode: ^1.5.0
|
||||
@ -358,7 +358,7 @@ importers:
|
||||
|
||||
packages/ui-vue2:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@vue/composition-api': 1.0.5
|
||||
qrcode: ^1.5.0
|
||||
vite: ^2.3.7
|
||||
@ -377,7 +377,7 @@ importers:
|
||||
|
||||
packages/utils:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@types/node': ^15.12.4
|
||||
moment: ^2.29.2
|
||||
typescript: ^4.3.4
|
||||
@ -395,11 +395,11 @@ importers:
|
||||
playground:
|
||||
specifiers:
|
||||
'@element-plus/icons': 0.0.11
|
||||
'@tmagic/editor': 1.0.0-rc.10
|
||||
'@tmagic/form': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/stage': 1.0.0-rc.10
|
||||
'@tmagic/utils': 1.0.0-rc.10
|
||||
'@tmagic/editor': 1.0.0-rc.11
|
||||
'@tmagic/form': 1.0.0-rc.11
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/stage': 1.0.0-rc.11
|
||||
'@tmagic/utils': 1.0.0-rc.11
|
||||
'@types/node': ^15.12.4
|
||||
'@types/serialize-javascript': ^5.0.1
|
||||
'@vitejs/plugin-legacy': ^1.8.2
|
||||
@ -441,8 +441,8 @@ importers:
|
||||
|
||||
runtime/react:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/stage': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/stage': 1.0.0-rc.11
|
||||
'@types/react': ^17.0.37
|
||||
'@types/react-dom': ^17.0.11
|
||||
'@vitejs/plugin-react-refresh': ^1.3.1
|
||||
@ -466,8 +466,8 @@ importers:
|
||||
|
||||
runtime/vue2:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/stage': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/stage': 1.0.0-rc.11
|
||||
'@types/events': ^3.0.0
|
||||
'@vue/composition-api': 1.0.5
|
||||
axios: ^0.27.2
|
||||
@ -497,8 +497,8 @@ importers:
|
||||
|
||||
runtime/vue3:
|
||||
specifiers:
|
||||
'@tmagic/schema': 1.0.0-rc.10
|
||||
'@tmagic/stage': 1.0.0-rc.10
|
||||
'@tmagic/schema': 1.0.0-rc.11
|
||||
'@tmagic/stage': 1.0.0-rc.11
|
||||
'@types/node': ^15.12.4
|
||||
'@vitejs/plugin-vue': ^1.2.3
|
||||
'@vue/compiler-sfc': ^3.2.0
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "runtime-react",
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev:react": "npm run build && npm run serve",
|
||||
@ -9,8 +9,8 @@
|
||||
"serve": "vite preview --port 8076"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/stage": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/stage": "1.0.0-rc.11",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "runtime-vue2",
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev:vue2": "npm run build && npm run serve",
|
||||
@ -9,8 +9,8 @@
|
||||
"serve": "vite preview --port 8077"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/stage": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/stage": "1.0.0-rc.11",
|
||||
"@vue/composition-api": "1.0.5",
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "runtime-vue3",
|
||||
"version": "1.0.0-rc.10",
|
||||
"version": "1.0.0-rc.11",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run build && npm run serve",
|
||||
@ -9,8 +9,8 @@
|
||||
"serve": "vite preview --port 8078"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "1.0.0-rc.10",
|
||||
"@tmagic/stage": "1.0.0-rc.10",
|
||||
"@tmagic/schema": "1.0.0-rc.11",
|
||||
"@tmagic/stage": "1.0.0-rc.11",
|
||||
"axios": "^0.25.0",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user