@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/style.css +94 -45
- package/dist/tmagic-editor.es.js +1622 -2069
- package/dist/tmagic-editor.es.js.map +1 -1
- package/dist/tmagic-editor.umd.js +1621 -2071
- package/dist/tmagic-editor.umd.js.map +1 -1
- package/dist/types/src/Editor.vue.d.ts +50 -2
- package/dist/types/src/fields/Code.vue.d.ts +4 -4
- package/dist/types/src/fields/CodeLink.vue.d.ts +1 -3
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/layouts/CodeEditor.vue.d.ts +13 -4
- package/dist/types/src/layouts/Framework.vue.d.ts +15 -3
- package/dist/types/src/layouts/PropsPanel.vue.d.ts +4 -5
- package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts +2 -1
- package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts +2 -3
- package/dist/types/src/layouts/sidebar/TabPane.vue.d.ts +14 -0
- package/dist/types/src/layouts/workspace/Workspace.vue.d.ts +5 -31
- package/dist/types/src/services/BaseService.d.ts +5 -2
- package/dist/types/src/services/editor.d.ts +16 -6
- package/dist/types/src/services/history.d.ts +2 -18
- package/dist/types/src/services/props.d.ts +8 -2
- package/dist/types/src/services/ui.d.ts +2 -0
- package/dist/types/src/type.d.ts +25 -9
- package/dist/types/src/utils/editor.d.ts +5 -10
- package/dist/types/src/utils/polyfills.d.ts +0 -0
- package/dist/types/src/utils/props.d.ts +8 -1
- package/package.json +35 -12
- package/src/Editor.vue +44 -9
- package/src/components/ContentMenu.vue +140 -0
- package/src/components/ScrollViewer.vue +1 -1
- package/src/components/ToolButton.vue +72 -31
- package/src/fields/UISelect.vue +14 -6
- package/src/index.ts +2 -0
- package/src/layouts/AddPageBox.vue +3 -1
- package/src/layouts/CodeEditor.vue +20 -13
- package/src/layouts/Framework.vue +20 -7
- package/src/layouts/PropsPanel.vue +5 -4
- package/src/layouts/sidebar/ComponentListPanel.vue +25 -3
- package/src/layouts/sidebar/LayerMenu.vue +93 -95
- package/src/layouts/sidebar/LayerPanel.vue +80 -59
- package/src/layouts/sidebar/Sidebar.vue +13 -52
- package/src/layouts/sidebar/TabPane.vue +68 -0
- package/src/layouts/workspace/PageBar.vue +145 -17
- package/src/layouts/workspace/Stage.vue +65 -91
- package/src/layouts/workspace/ViewerMenu.vue +122 -68
- package/src/layouts/workspace/Workspace.vue +125 -42
- package/src/services/BaseService.ts +71 -23
- package/src/services/editor.ts +231 -69
- package/src/services/history.ts +7 -0
- package/src/services/props.ts +64 -9
- package/src/services/ui.ts +35 -5
- package/src/theme/common/var.scss +3 -2
- package/src/theme/component-list-panel.scss +2 -0
- package/src/theme/content-menu.scss +33 -26
- package/src/theme/layer-panel.scss +10 -0
- package/src/theme/nav-menu.scss +6 -2
- package/src/theme/page-bar.scss +42 -2
- package/src/theme/props-panel.scss +19 -17
- package/src/theme/workspace.scss +4 -0
- package/src/type.ts +27 -9
- package/src/utils/editor.ts +37 -56
- package/src/utils/polyfills.ts +8 -0
- package/src/utils/props.ts +50 -8
- package/LICENSE +0 -5432
- package/dist/types/src/components/ToolButton.vue.d.ts +0 -35
- package/dist/types/src/fields/UISelect.vue.d.ts +0 -32
- package/dist/types/src/layouts/sidebar/LayerMenu.vue.d.ts +0 -31
- package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts +0 -973
- package/dist/types/src/layouts/workspace/PageBar.vue.d.ts +0 -11
- package/dist/types/src/layouts/workspace/Stage.vue.d.ts +0 -192
- package/dist/types/src/layouts/workspace/ViewerMenu.vue.d.ts +0 -18
- package/tsconfig.json +0 -9
- package/vite.config.ts +0 -30
|
@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
|
|
|
3
3
|
import type { MApp, MNode } from '@tmagic/schema';
|
|
4
4
|
import type StageCore from '@tmagic/stage';
|
|
5
5
|
import type { MoveableOptions } from '@tmagic/stage';
|
|
6
|
-
import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
|
|
6
|
+
import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
|
|
7
7
|
declare const _default: DefineComponent<{
|
|
8
8
|
/** 页面初始值 */
|
|
9
9
|
modelValue: {
|
|
@@ -20,6 +20,14 @@ declare const _default: DefineComponent<{
|
|
|
20
20
|
sidebar: {
|
|
21
21
|
type: PropType<SideBarData>;
|
|
22
22
|
};
|
|
23
|
+
layerContentMenu: {
|
|
24
|
+
type: PropType<MenuItem[]>;
|
|
25
|
+
default: () => never[];
|
|
26
|
+
};
|
|
27
|
+
stageContentMenu: {
|
|
28
|
+
type: PropType<MenuItem[]>;
|
|
29
|
+
default: () => never[];
|
|
30
|
+
};
|
|
23
31
|
/** 顶部工具栏配置 */
|
|
24
32
|
menu: {
|
|
25
33
|
type: PropType<MenuBarData>;
|
|
@@ -34,6 +42,8 @@ declare const _default: DefineComponent<{
|
|
|
34
42
|
};
|
|
35
43
|
/** 中间工作区域中画布通过iframe渲染时的页面url */
|
|
36
44
|
runtimeUrl: StringConstructor;
|
|
45
|
+
/** 选中时是否自动滚动到可视区域 */
|
|
46
|
+
autoScrollIntoView: BooleanConstructor;
|
|
37
47
|
/** 组件的属性配置表单的dsl */
|
|
38
48
|
propsConfigs: {
|
|
39
49
|
type: PropType<Record<string, FormConfig>>;
|
|
@@ -52,6 +62,9 @@ declare const _default: DefineComponent<{
|
|
|
52
62
|
/** 画布中组件选中框的移动范围 */
|
|
53
63
|
moveableOptions: {
|
|
54
64
|
type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
|
|
65
|
+
default: () => (core?: StageCore | undefined) => {
|
|
66
|
+
container: HTMLElement | null | undefined;
|
|
67
|
+
};
|
|
55
68
|
};
|
|
56
69
|
/** 编辑器初始化时默认选中的组件ID */
|
|
57
70
|
defaultSelected: {
|
|
@@ -59,10 +72,18 @@ declare const _default: DefineComponent<{
|
|
|
59
72
|
};
|
|
60
73
|
canSelect: {
|
|
61
74
|
type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
|
|
75
|
+
default: (el: HTMLElement) => boolean;
|
|
62
76
|
};
|
|
63
77
|
stageRect: {
|
|
64
78
|
type: PropType<StageRect>;
|
|
65
79
|
};
|
|
80
|
+
codeOptions: {
|
|
81
|
+
type: ObjectConstructor;
|
|
82
|
+
default: () => {};
|
|
83
|
+
};
|
|
84
|
+
updateDragEl: {
|
|
85
|
+
type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
|
|
86
|
+
};
|
|
66
87
|
}, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
67
88
|
/** 页面初始值 */
|
|
68
89
|
modelValue: {
|
|
@@ -79,6 +100,14 @@ declare const _default: DefineComponent<{
|
|
|
79
100
|
sidebar: {
|
|
80
101
|
type: PropType<SideBarData>;
|
|
81
102
|
};
|
|
103
|
+
layerContentMenu: {
|
|
104
|
+
type: PropType<MenuItem[]>;
|
|
105
|
+
default: () => never[];
|
|
106
|
+
};
|
|
107
|
+
stageContentMenu: {
|
|
108
|
+
type: PropType<MenuItem[]>;
|
|
109
|
+
default: () => never[];
|
|
110
|
+
};
|
|
82
111
|
/** 顶部工具栏配置 */
|
|
83
112
|
menu: {
|
|
84
113
|
type: PropType<MenuBarData>;
|
|
@@ -93,6 +122,8 @@ declare const _default: DefineComponent<{
|
|
|
93
122
|
};
|
|
94
123
|
/** 中间工作区域中画布通过iframe渲染时的页面url */
|
|
95
124
|
runtimeUrl: StringConstructor;
|
|
125
|
+
/** 选中时是否自动滚动到可视区域 */
|
|
126
|
+
autoScrollIntoView: BooleanConstructor;
|
|
96
127
|
/** 组件的属性配置表单的dsl */
|
|
97
128
|
propsConfigs: {
|
|
98
129
|
type: PropType<Record<string, FormConfig>>;
|
|
@@ -111,6 +142,9 @@ declare const _default: DefineComponent<{
|
|
|
111
142
|
/** 画布中组件选中框的移动范围 */
|
|
112
143
|
moveableOptions: {
|
|
113
144
|
type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
|
|
145
|
+
default: () => (core?: StageCore | undefined) => {
|
|
146
|
+
container: HTMLElement | null | undefined;
|
|
147
|
+
};
|
|
114
148
|
};
|
|
115
149
|
/** 编辑器初始化时默认选中的组件ID */
|
|
116
150
|
defaultSelected: {
|
|
@@ -118,19 +152,33 @@ declare const _default: DefineComponent<{
|
|
|
118
152
|
};
|
|
119
153
|
canSelect: {
|
|
120
154
|
type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
|
|
155
|
+
default: (el: HTMLElement) => boolean;
|
|
121
156
|
};
|
|
122
157
|
stageRect: {
|
|
123
158
|
type: PropType<StageRect>;
|
|
124
159
|
};
|
|
160
|
+
codeOptions: {
|
|
161
|
+
type: ObjectConstructor;
|
|
162
|
+
default: () => {};
|
|
163
|
+
};
|
|
164
|
+
updateDragEl: {
|
|
165
|
+
type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
|
|
166
|
+
};
|
|
125
167
|
}>> & {
|
|
126
168
|
"onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
|
|
127
169
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
128
170
|
}, {
|
|
129
|
-
componentGroupList: ComponentGroup[];
|
|
130
171
|
menu: MenuBarData;
|
|
172
|
+
layerContentMenu: MenuItem[];
|
|
173
|
+
stageContentMenu: MenuItem[];
|
|
174
|
+
codeOptions: Record<string, any>;
|
|
131
175
|
modelValue: MApp;
|
|
176
|
+
componentGroupList: ComponentGroup[];
|
|
177
|
+
autoScrollIntoView: boolean;
|
|
132
178
|
propsConfigs: Record<string, FormConfig>;
|
|
133
179
|
propsValues: Record<string, MNode>;
|
|
134
180
|
eventMethodList: Record<string, any>;
|
|
181
|
+
moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);
|
|
182
|
+
canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
|
|
135
183
|
}>;
|
|
136
184
|
export default _default;
|
|
@@ -16,9 +16,9 @@ declare const _default: DefineComponent<Readonly<{
|
|
|
16
16
|
}>>> & {
|
|
17
17
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
18
18
|
}, {
|
|
19
|
-
name
|
|
20
|
-
config
|
|
21
|
-
model
|
|
22
|
-
prop
|
|
19
|
+
readonly name?: any;
|
|
20
|
+
readonly config?: any;
|
|
21
|
+
readonly model?: any;
|
|
22
|
+
readonly prop?: any;
|
|
23
23
|
}>;
|
|
24
24
|
export default _default;
|
|
@@ -13,6 +13,7 @@ export { default as uiService } from './services/ui';
|
|
|
13
13
|
export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
|
|
14
14
|
export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
|
|
15
15
|
export { default as PropsPanel } from './layouts/PropsPanel.vue';
|
|
16
|
+
export { default as ToolButton } from './components/ToolButton.vue';
|
|
16
17
|
declare const _default: {
|
|
17
18
|
install: (app: App, opt?: InstallOptions | undefined) => void;
|
|
18
19
|
};
|
|
@@ -8,13 +8,17 @@ declare const _default: DefineComponent<{
|
|
|
8
8
|
type: (StringConstructor | ObjectConstructor)[];
|
|
9
9
|
};
|
|
10
10
|
type: {
|
|
11
|
-
type: StringConstructor
|
|
11
|
+
type: StringConstructor;
|
|
12
12
|
default: () => string;
|
|
13
13
|
};
|
|
14
14
|
language: {
|
|
15
|
-
type: StringConstructor
|
|
15
|
+
type: StringConstructor;
|
|
16
16
|
default: () => string;
|
|
17
17
|
};
|
|
18
|
+
options: {
|
|
19
|
+
type: ObjectConstructor;
|
|
20
|
+
default: () => {};
|
|
21
|
+
};
|
|
18
22
|
}, {
|
|
19
23
|
values: Ref<string>;
|
|
20
24
|
loading: Ref<boolean>;
|
|
@@ -30,18 +34,23 @@ declare const _default: DefineComponent<{
|
|
|
30
34
|
type: (StringConstructor | ObjectConstructor)[];
|
|
31
35
|
};
|
|
32
36
|
type: {
|
|
33
|
-
type: StringConstructor
|
|
37
|
+
type: StringConstructor;
|
|
34
38
|
default: () => string;
|
|
35
39
|
};
|
|
36
40
|
language: {
|
|
37
|
-
type: StringConstructor
|
|
41
|
+
type: StringConstructor;
|
|
38
42
|
default: () => string;
|
|
39
43
|
};
|
|
44
|
+
options: {
|
|
45
|
+
type: ObjectConstructor;
|
|
46
|
+
default: () => {};
|
|
47
|
+
};
|
|
40
48
|
}>> & {
|
|
41
49
|
onInitd?: ((...args: any[]) => any) | undefined;
|
|
42
50
|
onSave?: ((...args: any[]) => any) | undefined;
|
|
43
51
|
}, {
|
|
44
52
|
type: string;
|
|
45
53
|
language: string;
|
|
54
|
+
options: Record<string, any>;
|
|
46
55
|
}>;
|
|
47
56
|
export default _default;
|
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
import type { DefineComponent, ComputedRef, ComponentOptionsMixin,
|
|
1
|
+
import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
|
|
2
2
|
import type { MApp } from '@tmagic/schema';
|
|
3
3
|
import { GetColumnWidth } from '../type';
|
|
4
|
-
declare const _default: DefineComponent<{
|
|
4
|
+
declare const _default: DefineComponent<{
|
|
5
|
+
codeOptions: {
|
|
6
|
+
type: ObjectConstructor;
|
|
7
|
+
default: () => {};
|
|
8
|
+
};
|
|
9
|
+
}, {
|
|
5
10
|
root: ComputedRef<MApp | undefined>;
|
|
6
11
|
pageLength: ComputedRef<number>;
|
|
7
12
|
showSrc: ComputedRef<boolean | undefined>;
|
|
8
13
|
columnWidth: ComputedRef<GetColumnWidth | undefined>;
|
|
9
14
|
saveCode(value: string): void;
|
|
10
|
-
},
|
|
15
|
+
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
16
|
+
codeOptions: {
|
|
17
|
+
type: ObjectConstructor;
|
|
18
|
+
default: () => {};
|
|
19
|
+
};
|
|
20
|
+
}>>, {
|
|
21
|
+
codeOptions: Record<string, any>;
|
|
22
|
+
}>;
|
|
11
23
|
export default _default;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
|
|
1
|
+
import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
|
|
2
|
+
import type { FormValue } from '@tmagic/form';
|
|
2
3
|
declare const _default: DefineComponent<{}, {
|
|
3
|
-
values: Ref<
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
[x: number]: any;
|
|
6
|
-
}>;
|
|
4
|
+
values: Ref<FormValue>;
|
|
7
5
|
configForm: Ref<any>;
|
|
8
6
|
curFormConfig: any;
|
|
7
|
+
propsPanelSize: ComputedRef<unknown>;
|
|
9
8
|
submit(): Promise<void>;
|
|
10
9
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "mounted"[], "mounted", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>> & {
|
|
11
10
|
onMounted?: ((...args: any[]) => any) | undefined;
|
|
@@ -7,6 +7,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
7
7
|
items: ComponentItem[];
|
|
8
8
|
title: string;
|
|
9
9
|
}[] | undefined>;
|
|
10
|
-
appendComponent({ text, type,
|
|
10
|
+
appendComponent({ text, type, data }: ComponentItem): void;
|
|
11
|
+
dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
|
|
11
12
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
|
|
12
13
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { DefineComponent, Ref,
|
|
2
|
-
import { SideBarData
|
|
1
|
+
import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
|
|
2
|
+
import { SideBarData } from '../../type';
|
|
3
3
|
declare const _default: DefineComponent<{
|
|
4
4
|
data: {
|
|
5
5
|
type: PropType<SideBarData>;
|
|
@@ -11,7 +11,6 @@ declare const _default: DefineComponent<{
|
|
|
11
11
|
};
|
|
12
12
|
}, {
|
|
13
13
|
activeTabName: Ref<string>;
|
|
14
|
-
items: ComputedRef<SideComponent[] | Record<string, any>[]>;
|
|
15
14
|
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
16
15
|
data: {
|
|
17
16
|
type: PropType<SideBarData>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
|
|
2
|
+
import { SideComponent, SideItem } from '../../type';
|
|
3
|
+
declare const _default: DefineComponent<{
|
|
4
|
+
data: {
|
|
5
|
+
type: PropType<SideItem>;
|
|
6
|
+
};
|
|
7
|
+
}, {
|
|
8
|
+
config: ComputedRef<SideComponent | undefined>;
|
|
9
|
+
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
10
|
+
data: {
|
|
11
|
+
type: PropType<SideItem>;
|
|
12
|
+
};
|
|
13
|
+
}>>, {}>;
|
|
14
|
+
export default _default;
|
|
@@ -1,33 +1,7 @@
|
|
|
1
|
-
import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes
|
|
2
|
-
import type {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
declare const _default: DefineComponent<{
|
|
6
|
-
runtimeUrl: StringConstructor;
|
|
7
|
-
render: {
|
|
8
|
-
type: PropType<() => HTMLDivElement>;
|
|
9
|
-
};
|
|
10
|
-
moveableOptions: {
|
|
11
|
-
type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
|
|
12
|
-
};
|
|
13
|
-
canSelect: {
|
|
14
|
-
type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
|
|
15
|
-
};
|
|
16
|
-
}, {
|
|
1
|
+
import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
|
|
2
|
+
import type { MPage } from '@tmagic/schema';
|
|
3
|
+
declare const _default: DefineComponent<{}, {
|
|
4
|
+
workspace: Ref<HTMLDivElement | undefined>;
|
|
17
5
|
page: ComputedRef<MPage | undefined>;
|
|
18
|
-
|
|
19
|
-
updateNodeHandler(node: MComponent | MContainer | MPage): void;
|
|
20
|
-
sortNodeHandler(ev: SortEventData): void;
|
|
21
|
-
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
22
|
-
runtimeUrl: StringConstructor;
|
|
23
|
-
render: {
|
|
24
|
-
type: PropType<() => HTMLDivElement>;
|
|
25
|
-
};
|
|
26
|
-
moveableOptions: {
|
|
27
|
-
type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
|
|
28
|
-
};
|
|
29
|
-
canSelect: {
|
|
30
|
-
type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
|
|
31
|
-
};
|
|
32
|
-
}>>, {}>;
|
|
6
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
|
|
33
7
|
export default _default;
|
|
@@ -27,7 +27,7 @@ import { EventEmitter } from 'events';
|
|
|
27
27
|
* editorService.afterAdd();
|
|
28
28
|
* }
|
|
29
29
|
*
|
|
30
|
-
* 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数,after
|
|
30
|
+
* 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数,after第一个参数则是原方法的return值;
|
|
31
31
|
* 如需终止后续方法调用可以return new Error();
|
|
32
32
|
*
|
|
33
33
|
* 方法2:
|
|
@@ -50,7 +50,10 @@ import { EventEmitter } from 'events';
|
|
|
50
50
|
export default class extends EventEmitter {
|
|
51
51
|
private pluginOptionsList;
|
|
52
52
|
private middleware;
|
|
53
|
-
|
|
53
|
+
private taskList;
|
|
54
|
+
private doingTask;
|
|
55
|
+
constructor(methods?: string[], serialMethods?: string[]);
|
|
54
56
|
use(options: Record<string, Function>): void;
|
|
55
57
|
usePlugin(options: Record<string, Function>): void;
|
|
58
|
+
private doTask;
|
|
56
59
|
}
|
|
@@ -9,7 +9,7 @@ declare class Editor extends BaseService {
|
|
|
9
9
|
constructor();
|
|
10
10
|
/**
|
|
11
11
|
* 设置当前指点节点配置
|
|
12
|
-
* @param name 'root' | 'page' | 'parent' | 'node'
|
|
12
|
+
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
|
|
13
13
|
* @param value MNode
|
|
14
14
|
* @returns MNode
|
|
15
15
|
*/
|
|
@@ -41,20 +41,28 @@ declare class Editor extends BaseService {
|
|
|
41
41
|
/**
|
|
42
42
|
* 只有容器拥有布局
|
|
43
43
|
*/
|
|
44
|
-
getLayout(
|
|
44
|
+
getLayout(parent: MNode, node?: MNode): Promise<Layout>;
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
47
|
-
* @param config
|
|
46
|
+
* 选中指定节点(将指定节点设置成当前选中状态)
|
|
47
|
+
* @param config 指定节点配置或者ID
|
|
48
48
|
* @returns 当前选中的节点配置
|
|
49
49
|
*/
|
|
50
|
-
select(config: MNode | Id): Promise<MNode
|
|
50
|
+
select(config: MNode | Id): Promise<MNode> | never;
|
|
51
|
+
selectNextNode(): Promise<MNode> | never;
|
|
52
|
+
selectNextPage(): Promise<MNode> | never;
|
|
53
|
+
/**
|
|
54
|
+
* 高亮指定节点
|
|
55
|
+
* @param config 指定节点配置或者ID
|
|
56
|
+
* @returns 当前高亮的节点配置
|
|
57
|
+
*/
|
|
58
|
+
highlight(config: MNode | Id): void;
|
|
51
59
|
/**
|
|
52
60
|
* 向指点容器添加组件节点
|
|
53
61
|
* @param addConfig 将要添加的组件节点配置
|
|
54
62
|
* @param parent 要添加到的容器组件节点配置,如果不设置,默认为当前选中的组件的父节点
|
|
55
63
|
* @returns 添加后的节点
|
|
56
64
|
*/
|
|
57
|
-
add(
|
|
65
|
+
add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode>;
|
|
58
66
|
/**
|
|
59
67
|
* 删除组件
|
|
60
68
|
* @param {Object} node
|
|
@@ -110,12 +118,14 @@ declare class Editor extends BaseService {
|
|
|
110
118
|
* @returns 下一步数据
|
|
111
119
|
*/
|
|
112
120
|
redo(): Promise<StepValue | null>;
|
|
121
|
+
move(left: number, top: number): Promise<void>;
|
|
113
122
|
destroy(): void;
|
|
114
123
|
resetModifiedNodeId(): void;
|
|
115
124
|
private addModifiedNodeId;
|
|
116
125
|
private pushHistoryState;
|
|
117
126
|
private changeHistoryState;
|
|
118
127
|
private toggleFixedPosition;
|
|
128
|
+
private selectedConfigExceptionHandler;
|
|
119
129
|
}
|
|
120
130
|
export declare type EditorService = Editor;
|
|
121
131
|
declare const _default: Editor;
|
|
@@ -15,28 +15,12 @@ export interface HistoryState {
|
|
|
15
15
|
declare class History extends BaseService {
|
|
16
16
|
state: {
|
|
17
17
|
pageId?: Id | undefined;
|
|
18
|
-
pageSteps:
|
|
19
|
-
[x: string]: {
|
|
20
|
-
pushElement: (element: StepValue) => void;
|
|
21
|
-
canUndo: () => boolean;
|
|
22
|
-
undo: () => StepValue | null;
|
|
23
|
-
canRedo: () => boolean;
|
|
24
|
-
redo: () => StepValue | null;
|
|
25
|
-
getCurrentElement: () => StepValue | null;
|
|
26
|
-
};
|
|
27
|
-
[x: number]: {
|
|
28
|
-
pushElement: (element: StepValue) => void;
|
|
29
|
-
canUndo: () => boolean;
|
|
30
|
-
undo: () => StepValue | null;
|
|
31
|
-
canRedo: () => boolean;
|
|
32
|
-
redo: () => StepValue | null;
|
|
33
|
-
getCurrentElement: () => StepValue | null;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
18
|
+
pageSteps: Record<Id, UndoRedo<StepValue>>;
|
|
36
19
|
canRedo: boolean;
|
|
37
20
|
canUndo: boolean;
|
|
38
21
|
};
|
|
39
22
|
constructor();
|
|
23
|
+
reset(): void;
|
|
40
24
|
changePage(page: MPage): void;
|
|
41
25
|
empty(): void;
|
|
42
26
|
push(state: StepValue): StepValue | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FormConfig } from '@tmagic/form';
|
|
2
|
-
import type {
|
|
2
|
+
import type { MNode, MPage } from '@tmagic/schema';
|
|
3
3
|
import BaseService from './BaseService';
|
|
4
4
|
declare class Props extends BaseService {
|
|
5
5
|
private state;
|
|
@@ -29,7 +29,13 @@ declare class Props extends BaseService {
|
|
|
29
29
|
* @param type 组件类型
|
|
30
30
|
* @returns 组件初始值
|
|
31
31
|
*/
|
|
32
|
-
getPropsValue(type: string): Promise<
|
|
32
|
+
getPropsValue(type: string, defaultValue?: Record<string, any>): Promise<any>;
|
|
33
|
+
createId(type: string | number): Promise<string>;
|
|
34
|
+
/**
|
|
35
|
+
* 将组件与组件的子元素配置中的id都设置成一个新的ID
|
|
36
|
+
* @param {Object} config 组件配置
|
|
37
|
+
*/
|
|
38
|
+
setNewItemId(config: MNode, parent?: MPage): Promise<void>;
|
|
33
39
|
}
|
|
34
40
|
export declare type PropsService = Props;
|
|
35
41
|
declare const _default: Props;
|
|
@@ -19,11 +19,13 @@ declare const state: {
|
|
|
19
19
|
};
|
|
20
20
|
showGuides: boolean;
|
|
21
21
|
showRule: boolean;
|
|
22
|
+
propsPanelSize: "small" | "default" | "large";
|
|
22
23
|
};
|
|
23
24
|
declare class Ui extends BaseService {
|
|
24
25
|
constructor();
|
|
25
26
|
set<T = any>(name: keyof UiState, value: T): void;
|
|
26
27
|
get<T>(name: keyof typeof state): T;
|
|
28
|
+
zoom(zoom: number): void;
|
|
27
29
|
private setColumnWidth;
|
|
28
30
|
private setStageRect;
|
|
29
31
|
private calcZoom;
|
package/dist/types/src/type.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { Component } from 'vue';
|
|
|
2
2
|
import type { FormConfig } from '@tmagic/form';
|
|
3
3
|
import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
|
|
4
4
|
import type StageCore from '@tmagic/stage';
|
|
5
|
+
import type { MoveableOptions } from '@tmagic/stage';
|
|
5
6
|
import type { ComponentListService } from './services/componentList';
|
|
6
7
|
import type { EditorService } from './services/editor';
|
|
7
8
|
import type { EventsService } from './services/events';
|
|
@@ -21,13 +22,23 @@ export interface Services {
|
|
|
21
22
|
componentListService: ComponentListService;
|
|
22
23
|
uiService: UiService;
|
|
23
24
|
}
|
|
25
|
+
export interface StageOptions {
|
|
26
|
+
runtimeUrl: string;
|
|
27
|
+
autoScrollIntoView: boolean;
|
|
28
|
+
render: () => HTMLDivElement;
|
|
29
|
+
moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
|
|
30
|
+
canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
|
|
31
|
+
updateDragEl: (el: HTMLDivElement) => void;
|
|
32
|
+
}
|
|
24
33
|
export interface StoreState {
|
|
25
34
|
root: MApp | null;
|
|
26
35
|
page: MPage | null;
|
|
27
36
|
parent: MContainer | null;
|
|
28
37
|
node: MNode | null;
|
|
38
|
+
highlightNode: MNode | null;
|
|
29
39
|
stage: StageCore | null;
|
|
30
40
|
modifiedNodeIds: Map<Id, Id>;
|
|
41
|
+
pageLength: number;
|
|
31
42
|
}
|
|
32
43
|
export interface PropsState {
|
|
33
44
|
propsConfigMap: Record<string, FormConfig>;
|
|
@@ -67,6 +78,8 @@ export interface UiState {
|
|
|
67
78
|
showGuides: boolean;
|
|
68
79
|
/** 是否显示标尺,true: 显示,false: 不显示,默认为true */
|
|
69
80
|
showRule: boolean;
|
|
81
|
+
/** 用于控制该属性配置表单内组件的尺寸 */
|
|
82
|
+
propsPanelSize: 'large' | 'default' | 'small';
|
|
70
83
|
}
|
|
71
84
|
export interface EditorNodeInfo {
|
|
72
85
|
node?: MNode;
|
|
@@ -91,6 +104,8 @@ export interface MenuButton {
|
|
|
91
104
|
* zoom: 放大缩小
|
|
92
105
|
*/
|
|
93
106
|
type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
|
|
107
|
+
/** 当type为divider时有效,分割线方向, 默认vertical */
|
|
108
|
+
direction?: 'horizontal' | 'vertical';
|
|
94
109
|
/** 展示的文案 */
|
|
95
110
|
text?: string;
|
|
96
111
|
/** 鼠标悬浮是显示的气泡中的文案 */
|
|
@@ -102,14 +117,9 @@ export interface MenuButton {
|
|
|
102
117
|
/** 是否显示,默认为true */
|
|
103
118
|
display?: boolean | ((data?: Services) => boolean);
|
|
104
119
|
/** type为button/dropdown时点击运行的方法 */
|
|
105
|
-
handler?: (data
|
|
106
|
-
/** type为dropdown
|
|
107
|
-
items?:
|
|
108
|
-
/** 展示的文案 */
|
|
109
|
-
text: string;
|
|
110
|
-
/** 点击运行的方法 */
|
|
111
|
-
handler(data: Services): any;
|
|
112
|
-
}[];
|
|
120
|
+
handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
|
|
121
|
+
/** type为dropdown时,下拉的菜单列表, 或者有子菜单时 */
|
|
122
|
+
items?: MenuButton[];
|
|
113
123
|
}
|
|
114
124
|
export interface MenuComponent {
|
|
115
125
|
type: 'component';
|
|
@@ -168,7 +178,9 @@ export interface ComponentItem {
|
|
|
168
178
|
type: string;
|
|
169
179
|
/** element-plus icon class */
|
|
170
180
|
icon?: string | Component;
|
|
171
|
-
|
|
181
|
+
data?: {
|
|
182
|
+
[key: string]: any;
|
|
183
|
+
};
|
|
172
184
|
}
|
|
173
185
|
export interface ComponentGroup {
|
|
174
186
|
/** 显示文案 */
|
|
@@ -176,6 +188,10 @@ export interface ComponentGroup {
|
|
|
176
188
|
/** 组内列表 */
|
|
177
189
|
items: ComponentItem[];
|
|
178
190
|
}
|
|
191
|
+
export interface UpdateData {
|
|
192
|
+
id: Id;
|
|
193
|
+
[key: string]: any;
|
|
194
|
+
}
|
|
179
195
|
export declare enum LayerOffset {
|
|
180
196
|
TOP = "top",
|
|
181
197
|
BOTTOM = "bottom"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
|
|
1
|
+
import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
|
|
2
|
+
import type StageCore from '@tmagic/stage';
|
|
2
3
|
import { Layout } from '../type';
|
|
3
4
|
export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
|
|
4
|
-
export declare const generateId: (type: string | number) => string;
|
|
5
5
|
/**
|
|
6
6
|
* 获取所有页面配置
|
|
7
7
|
* @param app DSL跟节点
|
|
@@ -26,19 +26,14 @@ export declare const generatePageName: (pageNameList: string[]) => string;
|
|
|
26
26
|
* @returns {string}
|
|
27
27
|
*/
|
|
28
28
|
export declare const generatePageNameByApp: (app: MApp) => string;
|
|
29
|
-
/**
|
|
30
|
-
* 将组件与组件的子元素配置中的id都设置成一个新的ID
|
|
31
|
-
* @param {Object} config 组件配置
|
|
32
|
-
*/
|
|
33
|
-
export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) => void;
|
|
34
29
|
/**
|
|
35
30
|
* @param {Object} node
|
|
36
31
|
* @returns {boolean}
|
|
37
32
|
*/
|
|
38
33
|
export declare const isFixed: (node: MNode) => boolean;
|
|
39
|
-
export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
|
|
34
|
+
export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
|
|
40
35
|
export declare const toRelative: (node: MNode) => MNode;
|
|
41
|
-
export declare const initPosition: (node: MNode, layout: Layout) => MNode;
|
|
36
|
+
export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
|
|
42
37
|
export declare const setLayout: (node: MNode, layout: Layout) => MNode;
|
|
43
38
|
export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
|
|
44
|
-
export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (
|
|
39
|
+
export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;
|
|
File without changes
|
|
@@ -41,9 +41,16 @@ export declare const DEFAULT_CONFIG: FormConfig;
|
|
|
41
41
|
* @param type 组件类型
|
|
42
42
|
* @returns Object
|
|
43
43
|
*/
|
|
44
|
-
export declare const getDefaultPropsValue: (type: string) => {
|
|
44
|
+
export declare const getDefaultPropsValue: (type: string, id: string) => {
|
|
45
45
|
type: string;
|
|
46
46
|
id: string;
|
|
47
47
|
style: {};
|
|
48
48
|
name: string;
|
|
49
|
+
items: never[];
|
|
50
|
+
} | {
|
|
51
|
+
type: string;
|
|
52
|
+
id: string;
|
|
53
|
+
style: {};
|
|
54
|
+
name: string;
|
|
55
|
+
items?: undefined;
|
|
49
56
|
};
|