@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.
Files changed (31) hide show
  1. package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +17 -3
  2. package/dist/es/components/Tree.vue_vue_type_script_setup_true_lang.js +2 -1
  3. package/dist/es/components/TreeNode.vue_vue_type_script_setup_true_lang.js +8 -3
  4. package/dist/es/editorProps.js +1 -0
  5. package/dist/es/hooks/use-stage.js +5 -0
  6. package/dist/es/initService.js +3 -0
  7. package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +10 -3
  8. package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js +18 -5
  9. package/dist/es/layouts/sidebar/layer/use-click.js +22 -3
  10. package/dist/es/layouts/sidebar/layer/use-drag.js +28 -6
  11. package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js +13 -2
  12. package/dist/es/services/editor.js +2 -1
  13. package/dist/es/services/props.js +12 -0
  14. package/dist/es/utils/dep/worker.js +1 -1
  15. package/dist/tmagic-editor.umd.cjs +141 -27
  16. package/package.json +7 -7
  17. package/src/Editor.vue +15 -0
  18. package/src/components/Tree.vue +1 -0
  19. package/src/components/TreeNode.vue +6 -1
  20. package/src/editorProps.ts +20 -0
  21. package/src/hooks/use-stage.ts +9 -0
  22. package/src/initService.ts +10 -0
  23. package/src/layouts/sidebar/Sidebar.vue +15 -0
  24. package/src/layouts/sidebar/layer/LayerPanel.vue +26 -2
  25. package/src/layouts/sidebar/layer/use-click.ts +36 -3
  26. package/src/layouts/sidebar/layer/use-drag.ts +62 -6
  27. package/src/layouts/workspace/viewer/Stage.vue +24 -2
  28. package/src/services/editor.ts +1 -0
  29. package/src/services/props.ts +16 -0
  30. package/src/type.ts +44 -0
  31. 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
- }, [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 })])])])], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item) => {
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,
@@ -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]);
@@ -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
- setup(__props, { expose: __expose }) {
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
- setup(__props) {
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 && !editorService.get("disabledMultiSelect"));
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
- if (distance < targetHeight / 3) {
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 (isContainer) {
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
- } else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
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 (parentEl) {
206
- const { left: parentLeft, top: parentTop } = getOffset(parentEl);
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;