@tmagic/editor 1.7.13 → 1.7.14-beta.1

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 (47) hide show
  1. package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +21 -3
  2. package/dist/es/components/ScrollViewer.vue_vue_type_script_setup_true_lang.js +1 -1
  3. package/dist/es/components/Tree.vue_vue_type_script_setup_true_lang.js +8 -4
  4. package/dist/es/components/TreeNode.vue_vue_type_script_setup_true_lang.js +19 -9
  5. package/dist/es/editorProps.js +1 -0
  6. package/dist/es/fields/StyleSetter/Index.vue_vue_type_script_setup_true_lang.js +2 -1
  7. package/dist/es/hooks/use-stage.js +5 -0
  8. package/dist/es/index.js +2 -2
  9. package/dist/es/initService.js +3 -0
  10. package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js +1 -1
  11. package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +12 -3
  12. package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js +21 -5
  13. package/dist/es/layouts/sidebar/layer/use-click.js +22 -3
  14. package/dist/es/layouts/sidebar/layer/use-drag.js +28 -6
  15. package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js +87 -12
  16. package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js +5 -2
  17. package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js +16 -4
  18. package/dist/es/services/editor.js +2 -1
  19. package/dist/es/services/props.js +14 -2
  20. package/dist/es/style.css +20 -0
  21. package/dist/es/utils/dep/worker.js +1 -1
  22. package/dist/es/utils/tree.js +3 -1
  23. package/dist/style.css +20 -0
  24. package/dist/tmagic-editor.umd.cjs +266 -52
  25. package/package.json +7 -7
  26. package/src/Editor.vue +17 -0
  27. package/src/components/ScrollViewer.vue +4 -1
  28. package/src/components/Tree.vue +5 -1
  29. package/src/components/TreeNode.vue +14 -9
  30. package/src/editorProps.ts +23 -0
  31. package/src/fields/StyleSetter/Index.vue +5 -1
  32. package/src/hooks/use-stage.ts +9 -0
  33. package/src/initService.ts +10 -0
  34. package/src/layouts/props-panel/PropsPanel.vue +1 -1
  35. package/src/layouts/sidebar/Sidebar.vue +19 -0
  36. package/src/layouts/sidebar/layer/LayerPanel.vue +37 -3
  37. package/src/layouts/sidebar/layer/use-click.ts +36 -3
  38. package/src/layouts/sidebar/layer/use-drag.ts +62 -6
  39. package/src/layouts/workspace/Breadcrumb.vue +87 -6
  40. package/src/layouts/workspace/Workspace.vue +3 -1
  41. package/src/layouts/workspace/viewer/Stage.vue +31 -3
  42. package/src/services/editor.ts +1 -0
  43. package/src/services/props.ts +18 -2
  44. package/src/theme/breadcrumb.scss +24 -0
  45. package/src/type.ts +58 -1
  46. package/src/utils/tree.ts +5 -1
  47. package/types/index.d.ts +97 -8
@@ -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 },
@@ -63,7 +64,10 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
63
64
  canSelect: { type: Function },
64
65
  isContainer: { type: Function },
65
66
  customContentMenu: { type: Function },
67
+ layerNodeIsExpandable: { type: Function },
68
+ canDropIn: { type: Function },
66
69
  beforeDblclick: { type: Function },
70
+ beforeLayerNodeDblclick: { type: Function },
67
71
  extendFormState: { type: Function },
68
72
  pageBarSortOptions: {},
69
73
  pageFilterFunction: { type: Function }
@@ -73,7 +77,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
73
77
  "props-panel-unmounted",
74
78
  "update:modelValue",
75
79
  "props-form-error",
76
- "props-submit-error"
80
+ "props-submit-error",
81
+ "layer-node-dblclick"
77
82
  ],
78
83
  setup(__props, { expose: __expose, emit: __emit }) {
79
84
  const emit = __emit;
@@ -104,6 +109,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
104
109
  canSelect: props.canSelect,
105
110
  updateDragEl: props.updateDragEl,
106
111
  isContainer: props.isContainer,
112
+ canDropIn: props.canDropIn ? (sourceIds, targetId) => props.canDropIn(sourceIds, targetId, sourceIds.length === 0 ? "stage-add" : "stage-drag") : void 0,
107
113
  containerHighlightClassName: props.containerHighlightClassName,
108
114
  containerHighlightDuration: props.containerHighlightDuration,
109
115
  containerHighlightType: props.containerHighlightType,
@@ -111,6 +117,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
111
117
  renderType: props.renderType,
112
118
  guidesOptions: props.guidesOptions,
113
119
  disabledMultiSelect: props.disabledMultiSelect,
120
+ alwaysMultiSelect: props.alwaysMultiSelect,
114
121
  beforeDblclick: props.beforeDblclick
115
122
  };
116
123
  stageOverlay_default.set("stageOptions", stageOptions);
@@ -130,6 +137,9 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
130
137
  const propsPanelFormErrorHandler = (e) => {
131
138
  emit("props-form-error", e);
132
139
  };
140
+ const layerNodeDblclickHandler = (event, data) => {
141
+ emit("layer-node-dblclick", event, data);
142
+ };
133
143
  __expose(services);
134
144
  return (_ctx, _cache) => {
135
145
  return openBlock(), createBlock(Framework_default, {
@@ -146,7 +156,11 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
146
156
  "layer-content-menu": __props.layerContentMenu,
147
157
  "custom-content-menu": __props.customContentMenu,
148
158
  indent: __props.treeIndent,
149
- "next-level-indent-increment": __props.treeNextLevelIndentIncrement
159
+ "next-level-indent-increment": __props.treeNextLevelIndentIncrement,
160
+ "layer-node-is-expandable": __props.layerNodeIsExpandable,
161
+ "can-drop-in": __props.canDropIn,
162
+ "before-layer-node-dblclick": __props.beforeLayerNodeDblclick,
163
+ onLayerNodeDblclick: layerNodeDblclickHandler
150
164
  }, {
151
165
  "layer-panel-header": withCtx(() => [renderSlot(_ctx.$slots, "layer-panel-header")]),
152
166
  "layer-node-content": withCtx(({ data }) => [renderSlot(_ctx.$slots, "layer-node-content", { data })]),
@@ -169,13 +183,17 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
169
183
  "layer-content-menu",
170
184
  "custom-content-menu",
171
185
  "indent",
172
- "next-level-indent-increment"
186
+ "next-level-indent-increment",
187
+ "layer-node-is-expandable",
188
+ "can-drop-in",
189
+ "before-layer-node-dblclick"
173
190
  ])])]),
174
191
  workspace: withCtx(() => [renderSlot(_ctx.$slots, "workspace", { editorService: unref(editor_default) }, () => [createVNode(Workspace_default, {
175
192
  "disabled-stage-overlay": __props.disabledStageOverlay,
176
193
  "stage-content-menu": __props.stageContentMenu,
177
194
  "custom-content-menu": __props.customContentMenu
178
195
  }, {
196
+ "stage-top": withCtx(() => [renderSlot(_ctx.$slots, "stage-top")]),
179
197
  stage: withCtx(() => [renderSlot(_ctx.$slots, "stage")]),
180
198
  "workspace-content": withCtx(() => [renderSlot(_ctx.$slots, "workspace-content", { editorService: unref(editor_default) })]),
181
199
  _: 3
@@ -71,7 +71,7 @@ var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
71
71
  createElementVNode("div", {
72
72
  ref: "target",
73
73
  style: normalizeStyle(style.value)
74
- }, [renderSlot(_ctx.$slots, "default")], 4),
74
+ }, [renderSlot(_ctx.$slots, "before"), renderSlot(_ctx.$slots, "default")], 4),
75
75
  renderSlot(_ctx.$slots, "content"),
76
76
  scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(ScrollBar_default, {
77
77
  key: 0,
@@ -13,7 +13,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
13
13
  nodeStatusMap: {},
14
14
  indent: { default: 0 },
15
15
  nextLevelIndentIncrement: {},
16
- emptyText: { default: "暂无数据" }
16
+ emptyText: { default: "暂无数据" },
17
+ isExpandable: {}
17
18
  },
18
19
  emits: [
19
20
  "node-dragover",
@@ -22,7 +23,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
22
23
  "node-dragend",
23
24
  "node-contextmenu",
24
25
  "node-mouseenter",
25
- "node-click"
26
+ "node-click",
27
+ "node-dblclick"
26
28
  ],
27
29
  setup(__props, { emit: __emit }) {
28
30
  const emit = __emit;
@@ -40,7 +42,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
40
42
  data: item,
41
43
  indent: __props.indent,
42
44
  "next-level-indent-increment": __props.nextLevelIndentIncrement,
43
- "node-status-map": __props.nodeStatusMap
45
+ "node-status-map": __props.nodeStatusMap,
46
+ "is-expandable": __props.isExpandable
44
47
  }, {
45
48
  "tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })]),
46
49
  "tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -50,7 +53,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
50
53
  "data",
51
54
  "indent",
52
55
  "next-level-indent-increment",
53
- "node-status-map"
56
+ "node-status-map",
57
+ "is-expandable"
54
58
  ]);
55
59
  }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", null, toDisplayString(__props.emptyText), 1)]))], 32);
56
60
  };
@@ -1,4 +1,4 @@
1
- import { updateStatus } from "../utils/tree.js";
1
+ import { defaultIsExpandable, updateStatus } from "../utils/tree.js";
2
2
  import Icon_default from "./Icon.js";
3
3
  import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, unref, vShow, withCtx, withDirectives } from "vue";
4
4
  import { ArrowDown, ArrowRight } from "@element-plus/icons-vue";
@@ -25,7 +25,11 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
25
25
  parentsId: { default: () => [] },
26
26
  nodeStatusMap: {},
27
27
  indent: { default: 0 },
28
- nextLevelIndentIncrement: { default: 11 }
28
+ nextLevelIndentIncrement: { default: 11 },
29
+ isExpandable: {
30
+ type: Function,
31
+ default: defaultIsExpandable
32
+ }
29
33
  },
30
34
  emits: [
31
35
  "node-dragstart",
@@ -33,7 +37,8 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
33
37
  "node-dragend",
34
38
  "node-contextmenu",
35
39
  "node-mouseenter",
36
- "node-click"
40
+ "node-click",
41
+ "node-dblclick"
37
42
  ],
38
43
  setup(__props, { emit: __emit }) {
39
44
  const treeEmit = inject("treeEmit");
@@ -48,7 +53,6 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
48
53
  const selected = computed(() => nodeStatus.value.selected);
49
54
  const visible = computed(() => nodeStatus.value.visible);
50
55
  const draggable = computed(() => nodeStatus.value.draggable);
51
- const hasChildren = computed(() => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible));
52
56
  const handleDragStart = (event) => {
53
57
  treeEmit?.("node-dragstart", event, props.data);
54
58
  };
@@ -70,6 +74,9 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
70
74
  const nodeClickHandler = (event) => {
71
75
  treeEmit?.("node-click", event, props.data);
72
76
  };
77
+ const nodeDblclickHandler = (event) => {
78
+ treeEmit?.("node-dblclick", event, props.data);
79
+ };
73
80
  return (_ctx, _cache) => {
74
81
  const _component_TreeNode = resolveComponent("TreeNode", true);
75
82
  return withDirectives((openBlock(), createElementBlock("div", {
@@ -92,20 +99,22 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
92
99
  onMouseenter: mouseenterHandler
93
100
  }, [createVNode(Icon_default, {
94
101
  class: "expand-icon",
95
- style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
102
+ style: normalizeStyle(__props.isExpandable(__props.data, __props.nodeStatusMap) ? "" : "color: transparent; cursor: default"),
96
103
  icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
97
104
  onClick: expandHandler
98
105
  }, null, 8, ["style", "icon"]), createElementVNode("div", {
99
106
  class: "tree-node-content",
100
- onClick: nodeClickHandler
101
- }, [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), hasChildren.value && 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) => {
102
110
  return openBlock(), createBlock(_component_TreeNode, {
103
111
  key: item.id,
104
112
  data: item,
105
113
  parent: __props.data,
106
114
  parentsId: [...__props.parentsId, __props.data.id],
107
115
  "node-status-map": __props.nodeStatusMap,
108
- indent: __props.indent + __props.nextLevelIndentIncrement
116
+ indent: __props.indent + __props.nextLevelIndentIncrement,
117
+ "is-expandable": __props.isExpandable
109
118
  }, {
110
119
  "tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })]),
111
120
  "tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -116,7 +125,8 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
116
125
  "parent",
117
126
  "parentsId",
118
127
  "node-status-map",
119
- "indent"
128
+ "indent",
129
+ "is-expandable"
120
130
  ]);
121
131
  }), 128))])) : createCommentVNode("v-if", true)], 40, _hoisted_1)), [[vShow, visible.value]]);
122
132
  };
@@ -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,
@@ -58,7 +58,8 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
58
58
  const collapseValue = shallowRef(Array(list.length).fill(1).map((x, i) => `${i}`));
59
59
  const change = (v, eventData) => {
60
60
  eventData.changeRecords?.forEach((record) => {
61
- record.propPath = `${props.name}.${record.propPath}`;
61
+ if (props.prop) record.propPath = `${props.prop}.${record.propPath}`;
62
+ else if (props.name) record.propPath = `${props.name}.${record.propPath}`;
62
63
  });
63
64
  emit("change", v, eventData);
64
65
  };
@@ -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/index.js CHANGED
@@ -16,7 +16,7 @@ import { useServices } from "./hooks/use-services.js";
16
16
  import { useFloatBox } from "./hooks/use-float-box.js";
17
17
  import { useWindowRect } from "./hooks/use-window-rect.js";
18
18
  import { useEditorContentHeight } from "./hooks/use-editor-content-height.js";
19
- import { updateStatus } from "./utils/tree.js";
19
+ import { defaultIsExpandable, updateStatus } from "./utils/tree.js";
20
20
  import { useFilter } from "./hooks/use-filter.js";
21
21
  import { useGetSo } from "./hooks/use-getso.js";
22
22
  import { useNextFloatBoxPosition } from "./hooks/use-next-float-box-position.js";
@@ -76,4 +76,4 @@ export * from "@tmagic/table";
76
76
  export * from "@tmagic/stage";
77
77
  export * from "@tmagic/design";
78
78
  export * from "@tmagic/utils";
79
- export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
79
+ export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
@@ -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 });
@@ -46,7 +46,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
46
46
  return;
47
47
  }
48
48
  const type = node.value.type || (node.value.items ? "container" : "text");
49
- curFormConfig.value = await propsService.getPropsConfig(type);
49
+ curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
50
50
  values.value = node.value;
51
51
  };
52
52
  watchEffect(init);
@@ -47,9 +47,14 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
47
47
  layerContentMenu: {},
48
48
  indent: {},
49
49
  nextLevelIndentIncrement: {},
50
- customContentMenu: {}
50
+ customContentMenu: {},
51
+ layerNodeIsExpandable: {},
52
+ canDropIn: {},
53
+ beforeLayerNodeDblclick: {}
51
54
  },
52
- setup(__props, { expose: __expose }) {
55
+ emits: ["layer-node-dblclick"],
56
+ setup(__props, { expose: __expose, emit: __emit }) {
57
+ const emit = __emit;
53
58
  const props = __props;
54
59
  const { depService, uiService, propsService } = useServices();
55
60
  const collecting = computed(() => depService.get("collecting"));
@@ -86,8 +91,12 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
86
91
  layerContentMenu: props.layerContentMenu,
87
92
  customContentMenu: props.customContentMenu,
88
93
  indent: props.indent,
89
- nextLevelIndentIncrement: props.nextLevelIndentIncrement
94
+ nextLevelIndentIncrement: props.nextLevelIndentIncrement,
95
+ isExpandable: props.layerNodeIsExpandable,
96
+ canDropIn: props.canDropIn,
97
+ beforeNodeDblclick: props.beforeLayerNodeDblclick
90
98
  },
99
+ listeners: { "node-dblclick": (event, nodeData) => emit("layer-node-dblclick", event, nodeData) },
91
100
  component: LayerPanel_default,
92
101
  slots: {}
93
102
  },
@@ -18,9 +18,15 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
18
18
  layerContentMenu: {},
19
19
  indent: {},
20
20
  nextLevelIndentIncrement: {},
21
- customContentMenu: { type: Function }
21
+ customContentMenu: { type: Function },
22
+ isExpandable: { type: Function },
23
+ canDropIn: { type: Function },
24
+ beforeNodeDblclick: { type: Function }
22
25
  },
23
- setup(__props) {
26
+ emits: ["node-dblclick"],
27
+ setup(__props, { emit: __emit }) {
28
+ const props = __props;
29
+ const emit = __emit;
24
30
  const services = useServices();
25
31
  const { editorService } = services;
26
32
  const treeRef = useTemplateRef("tree");
@@ -43,8 +49,15 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
43
49
  status.expand = false;
44
50
  }
45
51
  };
46
- const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
47
- 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
+ };
48
61
  return (_ctx, _cache) => {
49
62
  return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
50
63
  default: withCtx(() => [
@@ -58,13 +71,15 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
58
71
  "node-status-map": unref(nodeStatusMap),
59
72
  indent: __props.indent,
60
73
  "next-level-indent-increment": __props.nextLevelIndentIncrement,
74
+ "is-expandable": __props.isExpandable,
61
75
  onNodeDragover: unref(handleDragOver),
62
76
  onNodeDragstart: unref(handleDragStart),
63
77
  onNodeDragleave: unref(handleDragLeave),
64
78
  onNodeDragend: unref(handleDragEnd),
65
79
  onNodeContextmenu: unref(nodeContentMenuHandler),
66
80
  onNodeMouseenter: unref(mouseenterHandler),
67
- onNodeClick: unref(nodeClickHandler)
81
+ onNodeClick: unref(nodeClickHandler),
82
+ onNodeDblclick: dblclickHandler
68
83
  }, {
69
84
  "tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
70
85
  "tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
@@ -75,6 +90,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
75
90
  "node-status-map",
76
91
  "indent",
77
92
  "next-level-indent-increment",
93
+ "is-expandable",
78
94
  "onNodeDragover",
79
95
  "onNodeDragstart",
80
96
  "onNodeDragleave",
@@ -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,