@tmagic/editor 1.7.13-beta.0 → 1.7.14-beta.0
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/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +17 -3
- package/dist/es/components/Tree.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/es/components/TreeNode.vue_vue_type_script_setup_true_lang.js +8 -3
- package/dist/es/editorProps.js +1 -0
- package/dist/es/hooks/use-stage.js +5 -0
- package/dist/es/initService.js +3 -0
- package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +10 -3
- package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js +18 -5
- package/dist/es/layouts/sidebar/layer/use-click.js +22 -3
- package/dist/es/layouts/sidebar/layer/use-drag.js +28 -6
- package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js +13 -2
- package/dist/es/services/editor.js +2 -1
- package/dist/es/services/props.js +12 -0
- package/dist/es/utils/dep/worker.js +1 -1
- package/dist/tmagic-editor.umd.cjs +141 -27
- package/package.json +7 -7
- package/src/Editor.vue +15 -0
- package/src/components/Tree.vue +1 -0
- package/src/components/TreeNode.vue +6 -1
- package/src/editorProps.ts +20 -0
- package/src/hooks/use-stage.ts +9 -0
- package/src/initService.ts +10 -0
- package/src/layouts/sidebar/Sidebar.vue +15 -0
- package/src/layouts/sidebar/layer/LayerPanel.vue +26 -2
- package/src/layouts/sidebar/layer/use-click.ts +36 -3
- package/src/layouts/sidebar/layer/use-drag.ts +62 -6
- package/src/layouts/workspace/viewer/Stage.vue +24 -2
- package/src/services/editor.ts +1 -0
- package/src/services/props.ts +16 -0
- package/src/type.ts +44 -0
- package/types/index.d.ts +73 -4
|
@@ -51,6 +51,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
51
51
|
disabledDragStart: { type: Boolean },
|
|
52
52
|
guidesOptions: {},
|
|
53
53
|
disabledMultiSelect: { type: Boolean },
|
|
54
|
+
alwaysMultiSelect: { type: Boolean },
|
|
54
55
|
disabledPageFragment: { type: Boolean },
|
|
55
56
|
disabledStageOverlay: { type: Boolean },
|
|
56
57
|
disabledShowSrc: { type: Boolean },
|
|
@@ -64,7 +65,9 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
64
65
|
isContainer: { type: Function },
|
|
65
66
|
customContentMenu: { type: Function },
|
|
66
67
|
layerNodeIsExpandable: { type: Function },
|
|
68
|
+
canDropIn: { type: Function },
|
|
67
69
|
beforeDblclick: { type: Function },
|
|
70
|
+
beforeLayerNodeDblclick: { type: Function },
|
|
68
71
|
extendFormState: { type: Function },
|
|
69
72
|
pageBarSortOptions: {},
|
|
70
73
|
pageFilterFunction: { type: Function }
|
|
@@ -74,7 +77,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
74
77
|
"props-panel-unmounted",
|
|
75
78
|
"update:modelValue",
|
|
76
79
|
"props-form-error",
|
|
77
|
-
"props-submit-error"
|
|
80
|
+
"props-submit-error",
|
|
81
|
+
"layer-node-dblclick"
|
|
78
82
|
],
|
|
79
83
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
80
84
|
const emit = __emit;
|
|
@@ -105,6 +109,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
105
109
|
canSelect: props.canSelect,
|
|
106
110
|
updateDragEl: props.updateDragEl,
|
|
107
111
|
isContainer: props.isContainer,
|
|
112
|
+
canDropIn: props.canDropIn ? (sourceIds, targetId) => props.canDropIn(sourceIds, targetId, sourceIds.length === 0 ? "stage-add" : "stage-drag") : void 0,
|
|
108
113
|
containerHighlightClassName: props.containerHighlightClassName,
|
|
109
114
|
containerHighlightDuration: props.containerHighlightDuration,
|
|
110
115
|
containerHighlightType: props.containerHighlightType,
|
|
@@ -112,6 +117,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
112
117
|
renderType: props.renderType,
|
|
113
118
|
guidesOptions: props.guidesOptions,
|
|
114
119
|
disabledMultiSelect: props.disabledMultiSelect,
|
|
120
|
+
alwaysMultiSelect: props.alwaysMultiSelect,
|
|
115
121
|
beforeDblclick: props.beforeDblclick
|
|
116
122
|
};
|
|
117
123
|
stageOverlay_default.set("stageOptions", stageOptions);
|
|
@@ -131,6 +137,9 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
131
137
|
const propsPanelFormErrorHandler = (e) => {
|
|
132
138
|
emit("props-form-error", e);
|
|
133
139
|
};
|
|
140
|
+
const layerNodeDblclickHandler = (event, data) => {
|
|
141
|
+
emit("layer-node-dblclick", event, data);
|
|
142
|
+
};
|
|
134
143
|
__expose(services);
|
|
135
144
|
return (_ctx, _cache) => {
|
|
136
145
|
return openBlock(), createBlock(Framework_default, {
|
|
@@ -148,7 +157,10 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
148
157
|
"custom-content-menu": __props.customContentMenu,
|
|
149
158
|
indent: __props.treeIndent,
|
|
150
159
|
"next-level-indent-increment": __props.treeNextLevelIndentIncrement,
|
|
151
|
-
"layer-node-is-expandable": __props.layerNodeIsExpandable
|
|
160
|
+
"layer-node-is-expandable": __props.layerNodeIsExpandable,
|
|
161
|
+
"can-drop-in": __props.canDropIn,
|
|
162
|
+
"before-layer-node-dblclick": __props.beforeLayerNodeDblclick,
|
|
163
|
+
onLayerNodeDblclick: layerNodeDblclickHandler
|
|
152
164
|
}, {
|
|
153
165
|
"layer-panel-header": withCtx(() => [renderSlot(_ctx.$slots, "layer-panel-header")]),
|
|
154
166
|
"layer-node-content": withCtx(({ data }) => [renderSlot(_ctx.$slots, "layer-node-content", { data })]),
|
|
@@ -172,7 +184,9 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
172
184
|
"custom-content-menu",
|
|
173
185
|
"indent",
|
|
174
186
|
"next-level-indent-increment",
|
|
175
|
-
"layer-node-is-expandable"
|
|
187
|
+
"layer-node-is-expandable",
|
|
188
|
+
"can-drop-in",
|
|
189
|
+
"before-layer-node-dblclick"
|
|
176
190
|
])])]),
|
|
177
191
|
workspace: withCtx(() => [renderSlot(_ctx.$slots, "workspace", { editorService: unref(editor_default) }, () => [createVNode(Workspace_default, {
|
|
178
192
|
"disabled-stage-overlay": __props.disabledStageOverlay,
|
|
@@ -23,7 +23,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
|
|
|
23
23
|
"node-dragend",
|
|
24
24
|
"node-contextmenu",
|
|
25
25
|
"node-mouseenter",
|
|
26
|
-
"node-click"
|
|
26
|
+
"node-click",
|
|
27
|
+
"node-dblclick"
|
|
27
28
|
],
|
|
28
29
|
setup(__props, { emit: __emit }) {
|
|
29
30
|
const emit = __emit;
|
|
@@ -37,7 +37,8 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
|
|
|
37
37
|
"node-dragend",
|
|
38
38
|
"node-contextmenu",
|
|
39
39
|
"node-mouseenter",
|
|
40
|
-
"node-click"
|
|
40
|
+
"node-click",
|
|
41
|
+
"node-dblclick"
|
|
41
42
|
],
|
|
42
43
|
setup(__props, { emit: __emit }) {
|
|
43
44
|
const treeEmit = inject("treeEmit");
|
|
@@ -73,6 +74,9 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
|
|
|
73
74
|
const nodeClickHandler = (event) => {
|
|
74
75
|
treeEmit?.("node-click", event, props.data);
|
|
75
76
|
};
|
|
77
|
+
const nodeDblclickHandler = (event) => {
|
|
78
|
+
treeEmit?.("node-dblclick", event, props.data);
|
|
79
|
+
};
|
|
76
80
|
return (_ctx, _cache) => {
|
|
77
81
|
const _component_TreeNode = resolveComponent("TreeNode", true);
|
|
78
82
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
@@ -100,8 +104,9 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
|
|
|
100
104
|
onClick: expandHandler
|
|
101
105
|
}, null, 8, ["style", "icon"]), createElementVNode("div", {
|
|
102
106
|
class: "tree-node-content",
|
|
103
|
-
onClick: nodeClickHandler
|
|
104
|
-
|
|
107
|
+
onClick: nodeClickHandler,
|
|
108
|
+
onDblclick: nodeDblclickHandler
|
|
109
|
+
}, [renderSlot(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [createTextVNode(toDisplayString(`${__props.data.name} (${__props.data.id})`), 1)])]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "tree-node-tool", { data: __props.data })])])], 32)], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item) => {
|
|
105
110
|
return openBlock(), createBlock(_component_TreeNode, {
|
|
106
111
|
key: item.id,
|
|
107
112
|
data: item,
|
package/dist/es/editorProps.js
CHANGED
|
@@ -4,6 +4,7 @@ import { getIdFromEl } from "@tmagic/utils";
|
|
|
4
4
|
var defaultEditorProps = {
|
|
5
5
|
renderType: RenderType.IFRAME,
|
|
6
6
|
disabledMultiSelect: false,
|
|
7
|
+
alwaysMultiSelect: false,
|
|
7
8
|
disabledPageFragment: false,
|
|
8
9
|
disabledStageOverlay: false,
|
|
9
10
|
containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
|
|
@@ -18,6 +18,7 @@ var useStage = (stageOptions) => {
|
|
|
18
18
|
zoom: stageOptions.zoom ?? zoom.value,
|
|
19
19
|
autoScrollIntoView: stageOptions.autoScrollIntoView,
|
|
20
20
|
isContainer: stageOptions.isContainer,
|
|
21
|
+
canDropIn: stageOptions.canDropIn,
|
|
21
22
|
containerHighlightClassName: stageOptions.containerHighlightClassName,
|
|
22
23
|
containerHighlightDuration: stageOptions.containerHighlightDuration,
|
|
23
24
|
containerHighlightType: stageOptions.containerHighlightType,
|
|
@@ -36,12 +37,16 @@ var useStage = (stageOptions) => {
|
|
|
36
37
|
updateDragEl: stageOptions.updateDragEl,
|
|
37
38
|
guidesOptions: stageOptions.guidesOptions,
|
|
38
39
|
disabledMultiSelect: stageOptions.disabledMultiSelect,
|
|
40
|
+
alwaysMultiSelect: stageOptions.alwaysMultiSelect,
|
|
39
41
|
disabledRule: stageOptions.disabledRule
|
|
40
42
|
});
|
|
41
43
|
watch(() => editor_default.get("disabledMultiSelect"), (disabledMultiSelect) => {
|
|
42
44
|
if (disabledMultiSelect) stage.disableMultiSelect();
|
|
43
45
|
else stage.enableMultiSelect();
|
|
44
46
|
});
|
|
47
|
+
watch(() => editor_default.get("alwaysMultiSelect"), (alwaysMultiSelect) => {
|
|
48
|
+
stage.setAlwaysMultiSelect(Boolean(alwaysMultiSelect));
|
|
49
|
+
});
|
|
45
50
|
const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
|
|
46
51
|
const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
|
|
47
52
|
stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
|
package/dist/es/initService.js
CHANGED
|
@@ -11,6 +11,9 @@ var initServiceState = (props, { editorService, historyService, componentListSer
|
|
|
11
11
|
watch(() => props.disabledMultiSelect, (disabledMultiSelect) => {
|
|
12
12
|
editorService.set("disabledMultiSelect", disabledMultiSelect || false);
|
|
13
13
|
}, { immediate: true });
|
|
14
|
+
watch(() => props.alwaysMultiSelect, (alwaysMultiSelect) => {
|
|
15
|
+
editorService.set("alwaysMultiSelect", alwaysMultiSelect || false);
|
|
16
|
+
}, { immediate: true });
|
|
14
17
|
watch(() => props.componentGroupList, (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList), { immediate: true });
|
|
15
18
|
watch(() => props.datasourceList, (datasourceList) => datasourceList && dataSourceService.set("datasourceTypeList", datasourceList), { immediate: true });
|
|
16
19
|
watch(() => props.propsConfigs, (configs) => configs && propsService.setPropsConfigs(configs), { immediate: true });
|
|
@@ -48,9 +48,13 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
48
48
|
indent: {},
|
|
49
49
|
nextLevelIndentIncrement: {},
|
|
50
50
|
customContentMenu: {},
|
|
51
|
-
layerNodeIsExpandable: {}
|
|
51
|
+
layerNodeIsExpandable: {},
|
|
52
|
+
canDropIn: {},
|
|
53
|
+
beforeLayerNodeDblclick: {}
|
|
52
54
|
},
|
|
53
|
-
|
|
55
|
+
emits: ["layer-node-dblclick"],
|
|
56
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
57
|
+
const emit = __emit;
|
|
54
58
|
const props = __props;
|
|
55
59
|
const { depService, uiService, propsService } = useServices();
|
|
56
60
|
const collecting = computed(() => depService.get("collecting"));
|
|
@@ -88,8 +92,11 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
88
92
|
customContentMenu: props.customContentMenu,
|
|
89
93
|
indent: props.indent,
|
|
90
94
|
nextLevelIndentIncrement: props.nextLevelIndentIncrement,
|
|
91
|
-
isExpandable: props.layerNodeIsExpandable
|
|
95
|
+
isExpandable: props.layerNodeIsExpandable,
|
|
96
|
+
canDropIn: props.canDropIn,
|
|
97
|
+
beforeNodeDblclick: props.beforeLayerNodeDblclick
|
|
92
98
|
},
|
|
99
|
+
listeners: { "node-dblclick": (event, nodeData) => emit("layer-node-dblclick", event, nodeData) },
|
|
93
100
|
component: LayerPanel_default,
|
|
94
101
|
slots: {}
|
|
95
102
|
},
|
|
@@ -19,9 +19,14 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
19
19
|
indent: {},
|
|
20
20
|
nextLevelIndentIncrement: {},
|
|
21
21
|
customContentMenu: { type: Function },
|
|
22
|
-
isExpandable: { type: Function }
|
|
22
|
+
isExpandable: { type: Function },
|
|
23
|
+
canDropIn: { type: Function },
|
|
24
|
+
beforeNodeDblclick: { type: Function }
|
|
23
25
|
},
|
|
24
|
-
|
|
26
|
+
emits: ["node-dblclick"],
|
|
27
|
+
setup(__props, { emit: __emit }) {
|
|
28
|
+
const props = __props;
|
|
29
|
+
const emit = __emit;
|
|
25
30
|
const services = useServices();
|
|
26
31
|
const { editorService } = services;
|
|
27
32
|
const treeRef = useTemplateRef("tree");
|
|
@@ -44,8 +49,15 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
44
49
|
status.expand = false;
|
|
45
50
|
}
|
|
46
51
|
};
|
|
47
|
-
const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
|
|
48
|
-
const { nodeClickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, useTemplateRef("menu"));
|
|
52
|
+
const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services, { canDropIn: (sourceIds, targetId) => props.canDropIn?.(sourceIds, targetId, "layer") });
|
|
53
|
+
const { nodeClickHandler, nodeDblclickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, useTemplateRef("menu"));
|
|
54
|
+
const dblclickHandler = async (event, data) => {
|
|
55
|
+
if (props.beforeNodeDblclick) {
|
|
56
|
+
if (await props.beforeNodeDblclick(event, data) === false) return;
|
|
57
|
+
}
|
|
58
|
+
nodeDblclickHandler(event, data);
|
|
59
|
+
emit("node-dblclick", event, data);
|
|
60
|
+
};
|
|
49
61
|
return (_ctx, _cache) => {
|
|
50
62
|
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
|
|
51
63
|
default: withCtx(() => [
|
|
@@ -66,7 +78,8 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
66
78
|
onNodeDragend: unref(handleDragEnd),
|
|
67
79
|
onNodeContextmenu: unref(nodeContentMenuHandler),
|
|
68
80
|
onNodeMouseenter: unref(mouseenterHandler),
|
|
69
|
-
onNodeClick: unref(nodeClickHandler)
|
|
81
|
+
onNodeClick: unref(nodeClickHandler),
|
|
82
|
+
onNodeDblclick: dblclickHandler
|
|
70
83
|
}, {
|
|
71
84
|
"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
|
|
72
85
|
"tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { UI_SELECT_MODE_EVENT_NAME } from "../../../utils/const.js";
|
|
2
2
|
import { updateStatus } from "../../../utils/tree.js";
|
|
3
|
-
import { isPage, isPageFragment } from "@tmagic/utils";
|
|
3
|
+
import { getElById, isPage, isPageFragment } from "@tmagic/utils";
|
|
4
4
|
import { computed, nextTick } from "vue";
|
|
5
5
|
import { throttle } from "lodash-es";
|
|
6
6
|
//#region packages/editor/src/layouts/sidebar/layer/use-click.ts
|
|
7
7
|
var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown, nodeStatusMap, menuRef) => {
|
|
8
|
-
const isMultiSelect = computed(() => isCtrlKeyDown.value
|
|
8
|
+
const isMultiSelect = computed(() => !editorService.get("disabledMultiSelect") && (isCtrlKeyDown.value || editorService.get("alwaysMultiSelect")));
|
|
9
9
|
const select = async (data) => {
|
|
10
10
|
if (!data.id) throw new Error("没有id");
|
|
11
11
|
if (isMultiSelect.value) multiSelect(data);
|
|
@@ -41,6 +41,15 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
|
|
|
41
41
|
editorService.get("stage")?.highlight(data.id);
|
|
42
42
|
stageOverlayService.get("stage")?.highlight(data.id);
|
|
43
43
|
};
|
|
44
|
+
const isNodeCanSelect = async (data) => {
|
|
45
|
+
const canSelect = stageOverlayService.get("stageOptions")?.canSelect;
|
|
46
|
+
if (!canSelect) return true;
|
|
47
|
+
const doc = editorService.get("stage")?.renderer?.contentWindow?.document;
|
|
48
|
+
if (!doc) return true;
|
|
49
|
+
const el = getElById()(doc, data.id);
|
|
50
|
+
if (!el) return true;
|
|
51
|
+
return Boolean(await canSelect(el));
|
|
52
|
+
};
|
|
44
53
|
const nodeClickHandler = (event, data) => {
|
|
45
54
|
if (!nodeStatusMap?.value) return;
|
|
46
55
|
if (uiService.get("uiSelectMode")) {
|
|
@@ -48,13 +57,23 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
|
|
|
48
57
|
return;
|
|
49
58
|
}
|
|
50
59
|
if (data.items && data.items.length > 0 && !isMultiSelect.value) updateStatus(nodeStatusMap.value, data.id, { expand: true });
|
|
51
|
-
nextTick(() => {
|
|
60
|
+
nextTick(async () => {
|
|
61
|
+
if (!await isNodeCanSelect(data)) return;
|
|
52
62
|
select(data);
|
|
53
63
|
});
|
|
54
64
|
};
|
|
65
|
+
const nodeDblclickHandler = (event, data) => {
|
|
66
|
+
if (!nodeStatusMap?.value) return;
|
|
67
|
+
if (uiService.get("uiSelectMode")) return;
|
|
68
|
+
if (data.items && data.items.length > 0) {
|
|
69
|
+
const status = nodeStatusMap.value.get(data.id);
|
|
70
|
+
updateStatus(nodeStatusMap.value, data.id, { expand: !status?.expand });
|
|
71
|
+
}
|
|
72
|
+
};
|
|
55
73
|
return {
|
|
56
74
|
menuRef,
|
|
57
75
|
nodeClickHandler,
|
|
76
|
+
nodeDblclickHandler,
|
|
58
77
|
nodeContentMenuHandler(event, data) {
|
|
59
78
|
event.preventDefault();
|
|
60
79
|
const nodes = editorService.get("nodes") || [];
|
|
@@ -28,7 +28,7 @@ var removeStatusClass = (el) => {
|
|
|
28
28
|
* dragover 属于目标节点
|
|
29
29
|
* 这些方法并不是同一个dom事件触发的
|
|
30
30
|
*/
|
|
31
|
-
var useDrag = ({ editorService }) => {
|
|
31
|
+
var useDrag = ({ editorService }, options = {}) => {
|
|
32
32
|
const handleDragStart = (event) => {
|
|
33
33
|
if (!event.dataTransfer || !event.target || !event.currentTarget) return;
|
|
34
34
|
const targetEl = getNodeEl(event.target);
|
|
@@ -60,19 +60,34 @@ var useDrag = ({ editorService }) => {
|
|
|
60
60
|
if (parentsId.includes(`${nodeId}`) && i >= targetIdIndex) return;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
|
|
63
|
+
let canDropInTarget = isContainer;
|
|
64
|
+
let redirectedTargetId;
|
|
65
|
+
if (canDropInTarget && options.canDropIn && nodeId && targetNodeId !== nodeId) {
|
|
66
|
+
const result = options.canDropIn([nodeId], targetNodeId);
|
|
67
|
+
if (result === false) canDropInTarget = false;
|
|
68
|
+
else if (typeof result === "string" || typeof result === "number") redirectedTargetId = result;
|
|
69
|
+
}
|
|
70
|
+
let canDropAsSibling = true;
|
|
71
|
+
const directParentId = parentsId?.[parentsId.length - 1];
|
|
72
|
+
if (options.canDropIn && nodeId && directParentId && directParentId !== nodeId) {
|
|
73
|
+
const siblingResult = options.canDropIn([nodeId], directParentId);
|
|
74
|
+
if (siblingResult === false || typeof siblingResult === "string" || typeof siblingResult === "number") canDropAsSibling = false;
|
|
75
|
+
}
|
|
76
|
+
dragState.dropType = "";
|
|
77
|
+
if (distance < targetHeight / 3 && canDropAsSibling) {
|
|
64
78
|
dragState.dropType = "before";
|
|
65
79
|
addClassName(labelEl, globalThis.document, "drag-before");
|
|
66
|
-
} else if (distance > targetHeight * 2 / 3) {
|
|
80
|
+
} else if (distance > targetHeight * 2 / 3 && canDropAsSibling) {
|
|
67
81
|
dragState.dropType = "after";
|
|
68
82
|
addClassName(labelEl, globalThis.document, "drag-after");
|
|
69
|
-
} else if (
|
|
83
|
+
} else if (canDropInTarget) {
|
|
70
84
|
dragState.dropType = "inner";
|
|
71
85
|
addClassName(labelEl, globalThis.document, "drag-inner");
|
|
72
86
|
}
|
|
73
87
|
if (!dragState.dropType) return;
|
|
74
88
|
dragState.dragOverNodeId = targetNodeId;
|
|
75
89
|
dragState.container = event.currentTarget;
|
|
90
|
+
dragState.redirectedTargetId = dragState.dropType === "inner" ? redirectedTargetId : void 0;
|
|
76
91
|
event.preventDefault();
|
|
77
92
|
};
|
|
78
93
|
const handleDragLeave = (event) => {
|
|
@@ -94,10 +109,16 @@ var useDrag = ({ editorService }) => {
|
|
|
94
109
|
let targetParent = targetInfo.parent;
|
|
95
110
|
if (!targetParent || !targetNode) return;
|
|
96
111
|
let targetIndex = -1;
|
|
97
|
-
if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
|
|
112
|
+
if (Array.isArray(targetNode.items) && dragState.dropType === "inner") if (dragState.redirectedTargetId !== void 0) {
|
|
113
|
+
const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
|
|
114
|
+
if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
|
|
115
|
+
targetParent = redirectedNode;
|
|
116
|
+
targetIndex = redirectedNode.items.length;
|
|
117
|
+
} else {
|
|
98
118
|
targetIndex = targetNode.items.length;
|
|
99
119
|
targetParent = targetNode;
|
|
100
|
-
}
|
|
120
|
+
}
|
|
121
|
+
else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
|
|
101
122
|
if (dragState.dropType === "after") targetIndex += 1;
|
|
102
123
|
const selectedNodes = editorService.get("nodes");
|
|
103
124
|
if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) editorService.dragTo(selectedNodes, targetParent, targetIndex);
|
|
@@ -106,6 +127,7 @@ var useDrag = ({ editorService }) => {
|
|
|
106
127
|
dragState.dragOverNodeId = "";
|
|
107
128
|
dragState.dropType = "";
|
|
108
129
|
dragState.container = null;
|
|
130
|
+
dragState.redirectedTargetId = void 0;
|
|
109
131
|
};
|
|
110
132
|
return {
|
|
111
133
|
handleDragStart,
|
|
@@ -184,9 +184,20 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
184
184
|
const doc = stage?.renderer?.contentWindow?.document;
|
|
185
185
|
const parentEl = doc?.querySelector(`.${props.stageOptions?.containerHighlightClassName}`);
|
|
186
186
|
let parent = page.value;
|
|
187
|
+
let resolvedParentEl = parentEl;
|
|
187
188
|
const parentId = getIdFromEl()(parentEl);
|
|
188
189
|
if (parentId) parent = editorService.getNodeById(parentId, false);
|
|
189
190
|
if (parent && stageContainerEl.value && stage) {
|
|
191
|
+
if (props.stageOptions.canDropIn) {
|
|
192
|
+
const result = props.stageOptions.canDropIn([], parent.id);
|
|
193
|
+
if (result === false) return;
|
|
194
|
+
if (typeof result === "string" || typeof result === "number") {
|
|
195
|
+
const redirectedNode = editorService.getNodeById(result, false);
|
|
196
|
+
if (!redirectedNode) return;
|
|
197
|
+
parent = redirectedNode;
|
|
198
|
+
resolvedParentEl = stage.renderer?.getTargetElement(result) ?? null;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
190
201
|
const layout = await editorService.getLayout(parent);
|
|
191
202
|
const containerRect = stageContainerEl.value.getBoundingClientRect();
|
|
192
203
|
const { scrollTop, scrollLeft } = stage.mask;
|
|
@@ -202,8 +213,8 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
202
213
|
position = "absolute";
|
|
203
214
|
top = e.clientY - containerRect.top + scrollTop;
|
|
204
215
|
left = e.clientX - containerRect.left + scrollLeft;
|
|
205
|
-
if (
|
|
206
|
-
const { left: parentLeft, top: parentTop } = getOffset(
|
|
216
|
+
if (resolvedParentEl) {
|
|
217
|
+
const { left: parentLeft, top: parentTop } = getOffset(resolvedParentEl);
|
|
207
218
|
left = left - parentLeft * zoom.value;
|
|
208
219
|
top = top - parentTop * zoom.value;
|
|
209
220
|
}
|
|
@@ -25,7 +25,8 @@ var Editor = class extends BaseService_default {
|
|
|
25
25
|
modifiedNodeIds: /* @__PURE__ */ new Map(),
|
|
26
26
|
pageLength: 0,
|
|
27
27
|
pageFragmentLength: 0,
|
|
28
|
-
disabledMultiSelect: false
|
|
28
|
+
disabledMultiSelect: false,
|
|
29
|
+
alwaysMultiSelect: false
|
|
29
30
|
});
|
|
30
31
|
isHistoryStateChange = false;
|
|
31
32
|
selectionBeforeOp = null;
|
|
@@ -54,6 +54,9 @@ var Props = class extends BaseService_default {
|
|
|
54
54
|
});
|
|
55
55
|
this.emit("props-configs-change");
|
|
56
56
|
}
|
|
57
|
+
getPropsConfigs() {
|
|
58
|
+
return this.state.propsConfigMap;
|
|
59
|
+
}
|
|
57
60
|
async fillConfig(config, labelWidth) {
|
|
58
61
|
return fillConfig(config, {
|
|
59
62
|
labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
|
|
@@ -76,11 +79,17 @@ var Props = class extends BaseService_default {
|
|
|
76
79
|
if (type === "area") return await this.getPropsConfig("button", data);
|
|
77
80
|
return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
|
|
78
81
|
}
|
|
82
|
+
hasPropsConfig(type) {
|
|
83
|
+
return !!this.state.propsConfigMap[toLine(type)];
|
|
84
|
+
}
|
|
79
85
|
setPropsValues(values) {
|
|
80
86
|
Object.keys(values).forEach((type) => {
|
|
81
87
|
this.setPropsValue(toLine(type), values[type]);
|
|
82
88
|
});
|
|
83
89
|
}
|
|
90
|
+
getPropsValues() {
|
|
91
|
+
return this.state.propsValueMap;
|
|
92
|
+
}
|
|
84
93
|
/**
|
|
85
94
|
* 为指点类型组件设置组件初始值
|
|
86
95
|
* @param type 组件类型
|
|
@@ -117,6 +126,9 @@ var Props = class extends BaseService_default {
|
|
|
117
126
|
...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
|
|
118
127
|
};
|
|
119
128
|
}
|
|
129
|
+
hasPropsValue(type) {
|
|
130
|
+
return !!this.state.propsValueMap[toLine(type)];
|
|
131
|
+
}
|
|
120
132
|
createId(type) {
|
|
121
133
|
return `${type}_${guid()}`;
|
|
122
134
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region packages/editor/src/utils/dep/worker.ts?worker&inline
|
|
2
|
-
var jsContent = "(function() {\n //#region packages/schema/src/index.ts\n const NODE_CONDS_KEY = \"displayConds\";\n const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n let HookType = /* @__PURE__ */ function(HookType) {\n /** 代码块钩子标识 */\n HookType[\"CODE\"] = \"code\";\n return HookType;\n }({});\n //#endregion\n //#region packages/utils/src/const.ts\n const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n //#endregion\n //#region packages/utils/src/index.ts\n const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n //#endregion\n //#region packages/dep/src/types.ts\n /** 依赖收集的目标类型 */\n let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n DepTargetType[\"DEFAULT\"] = \"default\";\n /** 代码块 */\n DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n /** 数据源 */\n DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n /** 数据源方法 */\n DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n /** 数据源条件 */\n DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n return DepTargetType;\n }({});\n //#endregion\n //#region packages/dep/src/Target.ts\n /**\n * 需要收集依赖的目标\n * 例如:一个代码块可以为一个目标\n */\n var Target = class {\n /**\n * 如何识别目标\n */\n isTarget;\n /**\n * 目标id,不可重复\n * 例如目标是代码块,则为代码块id\n */\n id;\n /**\n * 目标名称,用于显示在依赖列表中\n */\n name;\n /**\n * 不同的目标可以进行分类,例如代码块,数据源可以为两个不同的type\n */\n type = DepTargetType.DEFAULT;\n /**\n * 依赖详情\n * 实例:{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n */\n deps = {};\n /**\n * 是否默认收集,默认为true,当值为false时需要传入type参数给collect方法才会被收集\n */\n isCollectByDefault;\n constructor(options) {\n this.isTarget = options.isTarget;\n this.id = options.id;\n this.name = options.name;\n this.isCollectByDefault = options.isCollectByDefault ?? true;\n if (options.type) this.type = options.type;\n if (options.initialDeps) this.deps = options.initialDeps;\n }\n /**\n * 更新依赖\n * @param option 节点配置\n * @param key 哪个key配置了这个目标的id\n */\n updateDep({ id, name, key, data }) {\n const dep = this.deps[id] || {\n name,\n keys: []\n };\n dep.name = name;\n dep.data = data;\n this.deps[id] = dep;\n if (!dep.keys.includes(key)) dep.keys.push(key);\n }\n /**\n * 删除依赖\n * @param node 哪个节点的依赖需要移除,如果为空,则移除所有依赖\n * @param key 节点下哪个key需要移除,如果为空,则移除改节点下的所有依赖key\n * @returns void\n */\n removeDep(id, key) {\n if (typeof id === \"undefined\") {\n Object.keys(this.deps).forEach((depKey) => {\n delete this.deps[depKey];\n });\n return;\n }\n const dep = this.deps[id];\n if (!dep) return;\n if (key) {\n const index = dep.keys.indexOf(key);\n dep.keys.splice(index, 1);\n if (dep.keys.length === 0) delete this.deps[id];\n } else delete this.deps[id];\n }\n /**\n * 判断指定节点下的指定key是否存在在依赖列表中\n * @param node 哪个节点\n * @param key 哪个key\n * @returns boolean\n */\n hasDep(id, key) {\n return this.deps[id]?.keys.includes(key) ?? false;\n }\n destroy() {\n this.deps = {};\n }\n };\n //#endregion\n //#region packages/dep/src/utils.ts\n const INTEGER_REGEXP = /^\\d+$/;\n const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n type: DepTargetType.CODE_BLOCK,\n id,\n initialDeps,\n name: codeBlock.name,\n isTarget: (_key, value) => {\n if (id === value) return true;\n if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n return false;\n }\n });\n /**\n * ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n * ['array', 'a'] 这种返回true\n * @param keys\n * @param fields\n * @returns boolean\n */\n const isIncludeArrayField = (keys, fields) => {\n let f = fields;\n return keys.some((key, index) => {\n const field = f.find(({ name }) => name === key);\n f = field?.fields || [];\n return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n });\n };\n /**\n * 判断模板(value)是不是使用数据源Id(dsId),如:`xxx${dsId.field}xxx${dsId.field}`\n * @param value any\n * @param dsId string | number\n * @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n * @returns boolean\n */\n const isDataSourceTemplate = (value, ds, hasArray = false) => {\n const templates = value.match(dataSourceTemplateRegExp) || [];\n if (templates.length <= 0) return false;\n for (const tpl of templates) {\n const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n const dsId = keys.shift();\n if (!dsId || dsId !== ds.id) continue;\n if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n }\n return false;\n };\n /**\n * 指定数据源的字符串模板,如:{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n * @param value any\n * @param dsId string | number\n * @returns boolean\n */\n const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n /**\n * 关联数据源字段,格式为 [前缀+数据源ID, 字段名]\n * 使用data-source-field-select value: 'value' 可以配置出来\n * @param value any[]\n * @param id string | number\n * @returns boolean\n */\n const isUseDataSourceField = (value, id) => {\n if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n const [prefixId] = value;\n const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n if (prefixIndex === -1) return false;\n return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n };\n const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n if (!value) return false;\n const valueType = typeof value;\n if (valueType !== \"string\" && valueType !== \"object\") return false;\n if (`${key}`.startsWith(\"displayConds\")) return false;\n if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n if (isUseDataSourceField(value, ds.id)) {\n const [, ...keys] = value;\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n if (!Array.isArray(value) || !ds) return false;\n const [dsId, ...keys] = value;\n if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n if (ds.fields?.some((field) => field.name === keys[0])) {\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n });\n const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_COND,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n });\n const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_METHOD,\n id: ds.id,\n initialDeps,\n isTarget: (_key, value) => {\n if (!Array.isArray(value)) return false;\n const [dsId, methodName] = value;\n if (!methodName || dsId !== ds.id) return false;\n if (ds.methods?.some((method) => method.name === methodName)) return true;\n if (ds.fields?.some((field) => field.name === methodName)) return false;\n return true;\n }\n });\n const traverseTarget = (targetsList, cb, type) => {\n if (type) {\n const targets = targetsList[type];\n if (targets) for (const target of Object.values(targets)) cb(target);\n return;\n }\n for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n };\n //#endregion\n //#region packages/dep/src/Watcher.ts\n const DATA_SOURCE_TARGET_TYPES = new Set([\n DepTargetType.DATA_SOURCE,\n DepTargetType.DATA_SOURCE_COND,\n DepTargetType.DATA_SOURCE_METHOD\n ]);\n var Watcher = class {\n targetsList = {};\n childrenProp = \"items\";\n idProp = \"id\";\n nameProp = \"name\";\n constructor(options) {\n if (options?.initialTargets) this.targetsList = options.initialTargets;\n if (options?.childrenProp) this.childrenProp = options.childrenProp;\n }\n getTargetsList() {\n return this.targetsList;\n }\n /**\n * 获取指定类型中的所有target\n * @param type 分类\n * @returns Target[]\n */\n getTargets(type = DepTargetType.DEFAULT) {\n return this.targetsList[type] || {};\n }\n /**\n * 添加新的目标\n * @param target Target\n */\n addTarget(target) {\n const targets = this.getTargets(target.type) || {};\n this.targetsList[target.type] = targets;\n targets[target.id] = target;\n }\n /**\n * 获取指定id的target\n * @param id target id\n * @returns Target\n */\n getTarget(id, type = DepTargetType.DEFAULT) {\n return this.getTargets(type)[id];\n }\n /**\n * 判断是否存在指定id的target\n * @param id target id\n * @returns boolean\n */\n hasTarget(id, type = DepTargetType.DEFAULT) {\n return Boolean(this.getTarget(id, type));\n }\n /**\n * 判断是否存在指定类型的target\n * @param type target type\n * @returns boolean\n */\n hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n return Object.keys(this.getTargets(type)).length > 0;\n }\n /**\n * 删除指定id的target\n * @param id target id\n */\n removeTarget(id, type = DepTargetType.DEFAULT) {\n const targets = this.getTargets(type);\n if (targets[id]) {\n targets[id].destroy();\n delete targets[id];\n }\n }\n /**\n * 删除指定分类的所有target\n * @param type 分类\n * @returns void\n */\n removeTargets(type = DepTargetType.DEFAULT) {\n const targets = this.targetsList[type];\n if (!targets) return;\n for (const target of Object.values(targets)) target.destroy();\n delete this.targetsList[type];\n }\n /**\n * 删除所有target\n */\n clearTargets() {\n for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n }\n /**\n * 收集依赖\n * @param nodes 需要收集的节点\n * @param deep 是否需要收集子节点\n * @param type 强制收集指定类型的依赖\n */\n collect(nodes, depExtendedData = {}, deep = false, type) {\n this.collectByCallback(nodes, type, ({ node, target }) => {\n this.removeTargetDep(target, node);\n this.collectItem(node, target, depExtendedData, deep);\n });\n }\n collectByCallback(nodes, type, cb) {\n traverseTarget(this.targetsList, (target) => {\n if (!type && !target.isCollectByDefault) return;\n for (const node of nodes) cb({\n node,\n target\n });\n }, type);\n }\n /**\n * 清除所有目标的依赖\n * @param nodes 需要清除依赖的节点\n */\n clear(nodes, type) {\n let { targetsList } = this;\n if (type) targetsList = { [type]: this.getTargets(type) };\n const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n traverseTarget(targetsList, (target) => {\n if (nodes) for (const node of nodes) {\n target.removeDep(node[this.idProp]);\n if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n clearedItemsNodeIds.add(node[this.idProp]);\n this.clear(node[this.childrenProp]);\n }\n }\n else target.removeDep();\n });\n }\n /**\n * 清除指定类型的依赖\n * @param type 类型\n * @param nodes 需要清除依赖的节点\n */\n clearByType(type, nodes) {\n this.clear(nodes, type);\n }\n collectItem(node, target, depExtendedData = {}, deep = false) {\n if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n const collectTarget = (config, prop = \"\") => {\n const doCollect = (key, value) => {\n const keyIsItems = key === this.childrenProp;\n const fullKey = prop ? `${prop}.${key}` : key;\n if (target.isTarget(fullKey, value)) target.updateDep({\n id: node[this.idProp],\n name: `${node[this.nameProp] || node[this.idProp]}`,\n data: depExtendedData,\n key: fullKey\n });\n else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n const item = value[i];\n if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n }\n else if (isObject(value)) collectTarget(value, fullKey);\n if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n };\n for (const [key, value] of Object.entries(config)) {\n if (typeof value === \"undefined\" || value === \"\") continue;\n doCollect(key, value);\n }\n };\n collectTarget(node);\n }\n removeTargetDep(target, node, key) {\n target.removeDep(node[this.idProp], key);\n if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n }\n };\n //#endregion\n //#region packages/editor/src/utils/logger.ts\n const error = (...args) => {\n console.error(\"magic editor: \", ...args);\n };\n //#endregion\n //#region packages/editor/src/utils/dep/worker.ts\n onmessage = (e) => {\n const watcher = new Watcher({ initialTargets: {} });\n const { dsl } = e.data;\n try {\n const mApp = eval(`(${dsl})`);\n if (!mApp) postMessage({});\n watcher.clearTargets();\n if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n if (mApp.dataSources) for (const ds of mApp.dataSources) {\n watcher.addTarget(createDataSourceTarget(ds, {}));\n watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n watcher.addTarget(createDataSourceCondTarget(ds, {}));\n }\n watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n watcher.collectItem(node, target, { pageId: node.id }, true);\n });\n const data = {\n [DepTargetType.DATA_SOURCE]: {},\n [DepTargetType.DATA_SOURCE_METHOD]: {},\n [DepTargetType.DATA_SOURCE_COND]: {},\n [DepTargetType.CODE_BLOCK]: {}\n };\n traverseTarget(watcher.getTargetsList(), (target) => {\n data[target.type][target.id] = target.deps;\n });\n postMessage(data);\n } catch (e) {\n error(e);\n postMessage({});\n }\n };\n //#endregion\n})();\n";
|
|
2
|
+
var jsContent = "(function() {\n //#region packages/schema/src/index.ts\n const NODE_CONDS_KEY = \"displayConds\";\n const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n let HookType = /* @__PURE__ */ function(HookType) {\n /** 代码块钩子标识 */\n HookType[\"CODE\"] = \"code\";\n return HookType;\n }({});\n //#endregion\n //#region packages/utils/src/const.ts\n const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n //#endregion\n //#region packages/utils/src/index.ts\n const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n //#endregion\n //#region packages/dep/src/types.ts\n /** 依赖收集的目标类型 */\n let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n DepTargetType[\"DEFAULT\"] = \"default\";\n /** 代码块 */\n DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n /** 数据源 */\n DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n /** 数据源方法 */\n DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n /** 数据源条件 */\n DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n return DepTargetType;\n }({});\n //#endregion\n //#region packages/dep/src/Target.ts\n /**\n * 需要收集依赖的目标\n * 例如:一个代码块可以为一个目标\n */\n var Target = class {\n /**\n * 如何识别目标\n */\n isTarget;\n /**\n * 目标id,不可重复\n * 例如目标是代码块,则为代码块id\n */\n id;\n /**\n * 目标名称,用于显示在依赖列表中\n */\n name;\n /**\n * 不同的目标可以进行分类,例如代码块,数据源可以为两个不同的type\n */\n type = DepTargetType.DEFAULT;\n /**\n * 依赖详情\n * 实例:{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n */\n deps = {};\n /**\n * 是否默认收集,默认为true,当值为false时需要传入type参数给collect方法才会被收集\n */\n isCollectByDefault;\n constructor(options) {\n this.isTarget = options.isTarget;\n this.id = options.id;\n this.name = options.name;\n this.isCollectByDefault = options.isCollectByDefault ?? true;\n if (options.type) this.type = options.type;\n if (options.initialDeps) this.deps = options.initialDeps;\n }\n /**\n * 更新依赖\n * @param option 节点配置\n * @param key 哪个key配置了这个目标的id\n */\n updateDep({ id, name, key, data }) {\n const dep = this.deps[id] || {\n name,\n keys: []\n };\n dep.name = name;\n dep.data = data;\n this.deps[id] = dep;\n if (!dep.keys.includes(key)) dep.keys.push(key);\n }\n /**\n * 删除依赖\n * @param node 哪个节点的依赖需要移除,如果为空,则移除所有依赖\n * @param key 节点下哪个key需要移除,如果为空,则移除改节点下的所有依赖key\n * @returns void\n */\n removeDep(id, key) {\n if (typeof id === \"undefined\") {\n Object.keys(this.deps).forEach((depKey) => {\n delete this.deps[depKey];\n });\n return;\n }\n const dep = this.deps[id];\n if (!dep) return;\n if (key) {\n const index = dep.keys.indexOf(key);\n dep.keys.splice(index, 1);\n if (dep.keys.length === 0) delete this.deps[id];\n } else delete this.deps[id];\n }\n /**\n * 判断指定节点下的指定key是否存在在依赖列表中\n * @param node 哪个节点\n * @param key 哪个key\n * @returns boolean\n */\n hasDep(id, key) {\n return this.deps[id]?.keys.includes(key) ?? false;\n }\n destroy() {\n this.deps = {};\n }\n };\n //#endregion\n //#region packages/dep/src/utils.ts\n const INTEGER_REGEXP = /^\\d+$/;\n const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n type: DepTargetType.CODE_BLOCK,\n id,\n initialDeps,\n name: codeBlock.name,\n isTarget: (_key, value) => {\n if (id === value) return true;\n if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n return false;\n }\n });\n /**\n * ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n * ['array', 'a'] 这种返回true\n * @param keys\n * @param fields\n * @returns boolean\n */\n const isIncludeArrayField = (keys, fields) => {\n let f = fields;\n return keys.some((key, index) => {\n const field = f.find(({ name }) => name === key);\n f = field?.fields || [];\n return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n });\n };\n /**\n * 判断模板(value)是不是使用数据源Id(dsId),如:`xxx${dsId.field}xxx${dsId.field}`\n * @param value any\n * @param dsId string | number\n * @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n * @returns boolean\n */\n const isDataSourceTemplate = (value, ds, hasArray = false) => {\n const templates = value.match(dataSourceTemplateRegExp) || [];\n if (templates.length <= 0) return false;\n for (const tpl of templates) {\n const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n const dsId = keys.shift();\n if (!dsId || dsId !== ds.id) continue;\n if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n }\n return false;\n };\n /**\n * 指定数据源的字符串模板,如:{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n * @param value any\n * @param dsId string | number\n * @returns boolean\n */\n const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n /**\n * 关联数据源字段,格式为 [前缀+数据源ID, 字段名]\n * 使用data-source-field-select value: 'value' 可以配置出来\n * @param value any[]\n * @param id string | number\n * @returns boolean\n */\n const isUseDataSourceField = (value, id) => {\n if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n const [prefixId] = value;\n const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n if (prefixIndex === -1) return false;\n return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n };\n const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n if (!value) return false;\n const valueType = typeof value;\n if (valueType !== \"string\" && valueType !== \"object\") return false;\n if (`${key}`.startsWith(\"displayConds\")) return false;\n if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n if (isUseDataSourceField(value, ds.id)) {\n const [, ...keys] = value;\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n if (!Array.isArray(value) || !ds) return false;\n const [dsId, ...keys] = value;\n if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n if (ds.fields?.some((field) => field.name === keys[0])) {\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n });\n const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_COND,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n });\n const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_METHOD,\n id: ds.id,\n initialDeps,\n isTarget: (_key, value) => {\n if (!Array.isArray(value)) return false;\n const [dsId, methodName] = value;\n if (!methodName || dsId !== ds.id) return false;\n if (ds.methods?.some((method) => method.name === methodName)) return true;\n if (ds.fields?.some((field) => field.name === methodName)) return false;\n return true;\n }\n });\n const traverseTarget = (targetsList, cb, type) => {\n if (type) {\n const targets = targetsList[type];\n if (targets) for (const target of Object.values(targets)) cb(target);\n return;\n }\n for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n };\n //#endregion\n //#region packages/dep/src/Watcher.ts\n const DATA_SOURCE_TARGET_TYPES = new Set([\n DepTargetType.DATA_SOURCE,\n DepTargetType.DATA_SOURCE_COND,\n DepTargetType.DATA_SOURCE_METHOD\n ]);\n var Watcher = class {\n targetsList = {};\n childrenProp = \"items\";\n idProp = \"id\";\n nameProp = \"name\";\n constructor(options) {\n if (options?.initialTargets) this.targetsList = options.initialTargets;\n if (options?.childrenProp) this.childrenProp = options.childrenProp;\n }\n getTargetsList() {\n return this.targetsList;\n }\n /**\n * 获取指定类型中的所有target\n * @param type 分类\n * @returns Target[]\n */\n getTargets(type = DepTargetType.DEFAULT) {\n return this.targetsList[type] || {};\n }\n /**\n * 添加新的目标\n * @param target Target\n */\n addTarget(target) {\n const targets = this.getTargets(target.type) || {};\n this.targetsList[target.type] = targets;\n targets[target.id] = target;\n }\n /**\n * 获取指定id的target\n * @param id target id\n * @returns Target\n */\n getTarget(id, type = DepTargetType.DEFAULT) {\n return this.getTargets(type)[id];\n }\n /**\n * 判断是否存在指定id的target\n * @param id target id\n * @returns boolean\n */\n hasTarget(id, type = DepTargetType.DEFAULT) {\n return Boolean(this.getTarget(id, type));\n }\n /**\n * 判断是否存在指定类型的target\n * @param type target type\n * @returns boolean\n */\n hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n return Object.keys(this.getTargets(type)).length > 0;\n }\n /**\n * 删除指定id的target\n * @param id target id\n */\n removeTarget(id, type = DepTargetType.DEFAULT) {\n const targets = this.getTargets(type);\n if (targets[id]) {\n targets[id].destroy();\n delete targets[id];\n }\n }\n /**\n * 删除指定分类的所有target\n * @param type 分类\n * @returns void\n */\n removeTargets(type = DepTargetType.DEFAULT) {\n const targets = this.targetsList[type];\n if (!targets) return;\n for (const target of Object.values(targets)) target.destroy();\n delete this.targetsList[type];\n }\n /**\n * 删除所有target\n */\n clearTargets() {\n for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n }\n /**\n * 收集依赖\n * @param nodes 需要收集的节点\n * @param deep 是否需要收集子节点\n * @param type 强制收集指定类型的依赖\n */\n collect(nodes, depExtendedData = {}, deep = false, type) {\n this.collectByCallback(nodes, type, ({ node, target }) => {\n this.removeTargetDep(target, node);\n this.collectItem(node, target, depExtendedData, deep);\n });\n }\n collectByCallback(nodes, type, cb) {\n traverseTarget(this.targetsList, (target) => {\n if (!type && !target.isCollectByDefault) return;\n for (const node of nodes) cb({\n node,\n target\n });\n }, type);\n }\n /**\n * 清除所有目标的依赖\n * @param nodes 需要清除依赖的节点\n */\n clear(nodes, type) {\n let { targetsList } = this;\n if (type) targetsList = { [type]: this.getTargets(type) };\n const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n traverseTarget(targetsList, (target) => {\n if (nodes) for (const node of nodes) {\n target.removeDep(node[this.idProp]);\n if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n clearedItemsNodeIds.add(node[this.idProp]);\n this.clear(node[this.childrenProp]);\n }\n }\n else target.removeDep();\n });\n }\n /**\n * 清除指定类型的依赖\n * @param type 类型\n * @param nodes 需要清除依赖的节点\n */\n clearByType(type, nodes) {\n this.clear(nodes, type);\n }\n collectItem(node, target, depExtendedData = {}, deep = false) {\n if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n const collectTarget = (config, prop = \"\") => {\n const doCollect = (key, value) => {\n const keyIsItems = key === this.childrenProp;\n const fullKey = prop ? `${prop}.${key}` : key;\n if (target.isTarget(fullKey, value)) target.updateDep({\n id: node[this.idProp],\n name: `${node[this.nameProp] || node[this.idProp]}`,\n data: depExtendedData,\n key: fullKey\n });\n else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n const item = value[i];\n if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n }\n else if (isObject(value)) collectTarget(value, fullKey);\n if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n };\n for (const [key, value] of Object.entries(config)) {\n if (typeof value === \"undefined\" || value === \"\") continue;\n doCollect(key, value);\n }\n };\n collectTarget(node);\n }\n removeTargetDep(target, node, key) {\n target.removeDep(node[this.idProp], key);\n if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n }\n };\n //#endregion\n //#region packages/editor/src/utils/logger.ts\n const error = (...args) => {\n if (process.env.NODE_ENV === \"development\") console.error(\"magic editor: \", ...args);\n };\n //#endregion\n //#region packages/editor/src/utils/dep/worker.ts\n onmessage = (e) => {\n const watcher = new Watcher({ initialTargets: {} });\n const { dsl } = e.data;\n try {\n const mApp = eval(`(${dsl})`);\n if (!mApp) postMessage({});\n watcher.clearTargets();\n if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n if (mApp.dataSources) for (const ds of mApp.dataSources) {\n watcher.addTarget(createDataSourceTarget(ds, {}));\n watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n watcher.addTarget(createDataSourceCondTarget(ds, {}));\n }\n watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n watcher.collectItem(node, target, { pageId: node.id }, true);\n });\n const data = {\n [DepTargetType.DATA_SOURCE]: {},\n [DepTargetType.DATA_SOURCE_METHOD]: {},\n [DepTargetType.DATA_SOURCE_COND]: {},\n [DepTargetType.CODE_BLOCK]: {}\n };\n traverseTarget(watcher.getTargetsList(), (target) => {\n data[target.type][target.id] = target.deps;\n });\n postMessage(data);\n } catch (e) {\n error(e);\n postMessage({});\n }\n };\n //#endregion\n})();\n";
|
|
3
3
|
var blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
|
|
4
4
|
function WorkerWrapper(options) {
|
|
5
5
|
let objURL;
|