@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.8
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/style.css +57 -56
- package/dist/tmagic-editor.js +549 -436
- package/dist/tmagic-editor.js.map +1 -1
- package/dist/tmagic-editor.umd.cjs +567 -454
- package/dist/tmagic-editor.umd.cjs.map +1 -1
- package/package.json +10 -10
- package/src/Editor.vue +8 -0
- package/src/components/ContentMenu.vue +2 -6
- package/src/components/SplitView.vue +22 -6
- package/src/components/Tree.vue +66 -0
- package/src/components/TreeNode.vue +142 -0
- package/src/layouts/Framework.vue +11 -21
- package/src/layouts/sidebar/Sidebar.vue +13 -0
- package/src/layouts/sidebar/data-source/DataSourceList.vue +28 -17
- package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +8 -2
- package/src/layouts/sidebar/layer/LayerPanel.vue +40 -31
- package/src/layouts/sidebar/layer/use-click.ts +105 -0
- package/src/layouts/sidebar/layer/use-drag.ts +1 -1
- package/src/layouts/sidebar/layer/use-filter.ts +1 -12
- package/src/layouts/sidebar/layer/use-keybinding.ts +6 -2
- package/src/layouts/sidebar/layer/use-node-status.ts +4 -2
- package/src/layouts/workspace/viewer/NodeListMenu.vue +11 -2
- package/src/services/dep.ts +1 -1
- package/src/theme/layer-panel.scss +2 -74
- package/src/theme/theme.scss +1 -0
- package/src/theme/tree.scss +72 -0
- package/src/type.ts +16 -1
- package/src/utils/dep.ts +7 -2
- package/src/utils/tree.ts +15 -0
- package/types/components/ContentMenu.vue.d.ts +4 -1
- package/types/components/SplitView.vue.d.ts +3 -1
- package/types/{layouts/sidebar/layer/LayerNode.vue.d.ts → components/Tree.vue.d.ts} +19 -17
- package/types/components/TreeNode.vue.d.ts +47 -0
- package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +2 -6
- package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +7 -1
- package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts +1 -1
- package/types/layouts/sidebar/layer/use-click.d.ts +106 -0
- package/types/layouts/sidebar/layer/use-filter.d.ts +0 -1
- package/types/layouts/sidebar/layer/use-keybinding.d.ts +2 -1
- package/types/type.d.ts +20 -1
- package/types/utils/tree.d.ts +3 -0
- package/src/layouts/sidebar/layer/LayerNode.vue +0 -208
package/dist/tmagic-editor.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode,
|
|
2
|
-
import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide,
|
|
1
|
+
import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, provide, Transition, toHandlers, mergeDefaults } from 'vue';
|
|
2
|
+
import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
|
|
3
3
|
import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, pick, keys } from 'lodash-es';
|
|
4
4
|
import * as monaco from 'monaco-editor';
|
|
5
5
|
import serialize from 'serialize-javascript';
|
|
@@ -7,7 +7,7 @@ import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagi
|
|
|
7
7
|
import { HookType, NodeType, ActionType } from '@tmagic/schema';
|
|
8
8
|
import { MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
|
|
9
9
|
import { MagicTable } from '@tmagic/table';
|
|
10
|
-
import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, addClassName, removeClassName,
|
|
10
|
+
import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
|
|
11
11
|
import Gesto from 'gesto';
|
|
12
12
|
import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
|
|
13
13
|
import { EventEmitter } from 'events';
|
|
@@ -20,10 +20,10 @@ const setConfig = (option) => {
|
|
|
20
20
|
};
|
|
21
21
|
const getConfig = (key) => $TMAGIC_EDITOR[key];
|
|
22
22
|
|
|
23
|
-
const _hoisted_1$
|
|
23
|
+
const _hoisted_1$x = {
|
|
24
24
|
class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
|
|
25
25
|
};
|
|
26
|
-
const _sfc_main$
|
|
26
|
+
const _sfc_main$T = /* @__PURE__ */ defineComponent({
|
|
27
27
|
...{
|
|
28
28
|
name: "MEditorCodeEditor"
|
|
29
29
|
},
|
|
@@ -180,7 +180,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
|
|
|
180
180
|
}
|
|
181
181
|
});
|
|
182
182
|
return (_ctx, _cache) => {
|
|
183
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
183
|
+
return openBlock(), createElementBlock("div", _hoisted_1$x, [
|
|
184
184
|
(openBlock(), createBlock(Teleport, {
|
|
185
185
|
to: "body",
|
|
186
186
|
disabled: !fullScreen.value
|
|
@@ -208,7 +208,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
|
|
|
208
208
|
}
|
|
209
209
|
});
|
|
210
210
|
|
|
211
|
-
const _sfc_main$
|
|
211
|
+
const _sfc_main$S = /* @__PURE__ */ defineComponent({
|
|
212
212
|
...{
|
|
213
213
|
name: "MEditorCode"
|
|
214
214
|
},
|
|
@@ -232,7 +232,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
232
232
|
emit("change", v);
|
|
233
233
|
};
|
|
234
234
|
return (_ctx, _cache) => {
|
|
235
|
-
return openBlock(), createBlock(_sfc_main$
|
|
235
|
+
return openBlock(), createBlock(_sfc_main$T, {
|
|
236
236
|
height: _ctx.config.height,
|
|
237
237
|
"init-values": _ctx.model[_ctx.name],
|
|
238
238
|
language: _ctx.config.language,
|
|
@@ -247,7 +247,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
247
247
|
}
|
|
248
248
|
});
|
|
249
249
|
|
|
250
|
-
const _sfc_main$
|
|
250
|
+
const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
251
251
|
...{
|
|
252
252
|
name: "MEditorCodeLink"
|
|
253
253
|
},
|
|
@@ -326,7 +326,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
|
|
|
326
326
|
}
|
|
327
327
|
});
|
|
328
328
|
|
|
329
|
-
const _sfc_main$
|
|
329
|
+
const _sfc_main$Q = /* @__PURE__ */ defineComponent({
|
|
330
330
|
...{
|
|
331
331
|
name: "MEditorCodeSelect"
|
|
332
332
|
},
|
|
@@ -398,11 +398,11 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
|
|
|
398
398
|
}
|
|
399
399
|
});
|
|
400
400
|
|
|
401
|
-
const _hoisted_1$
|
|
401
|
+
const _hoisted_1$w = { style: { "display": "flex", "margin-bottom": "10px" } };
|
|
402
402
|
const _hoisted_2$p = { style: { "flex": "1" } };
|
|
403
403
|
const _hoisted_3$b = { style: { "flex": "1" } };
|
|
404
404
|
const _hoisted_4$7 = { class: "dialog-footer" };
|
|
405
|
-
const _sfc_main$
|
|
405
|
+
const _sfc_main$P = /* @__PURE__ */ defineComponent({
|
|
406
406
|
...{
|
|
407
407
|
name: "MEditorCodeBlockEditor"
|
|
408
408
|
},
|
|
@@ -644,7 +644,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
|
|
|
644
644
|
])
|
|
645
645
|
]),
|
|
646
646
|
default: withCtx(() => [
|
|
647
|
-
createElementVNode("div", _hoisted_1$
|
|
647
|
+
createElementVNode("div", _hoisted_1$w, [
|
|
648
648
|
createElementVNode("div", _hoisted_2$p, [
|
|
649
649
|
createVNode(unref(TMagicTag), {
|
|
650
650
|
size: "small",
|
|
@@ -668,7 +668,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
|
|
|
668
668
|
})
|
|
669
669
|
])
|
|
670
670
|
]),
|
|
671
|
-
difVisible.value ? (openBlock(), createBlock(_sfc_main$
|
|
671
|
+
difVisible.value ? (openBlock(), createBlock(_sfc_main$T, {
|
|
672
672
|
key: 0,
|
|
673
673
|
ref_key: "magicVsEditor",
|
|
674
674
|
ref: magicVsEditor,
|
|
@@ -2955,7 +2955,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
|
|
|
2955
2955
|
return newNode;
|
|
2956
2956
|
};
|
|
2957
2957
|
|
|
2958
|
-
const _sfc_main$
|
|
2958
|
+
const _sfc_main$O = /* @__PURE__ */ defineComponent({
|
|
2959
2959
|
...{
|
|
2960
2960
|
name: "MEditorCodeParams"
|
|
2961
2961
|
},
|
|
@@ -3004,8 +3004,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3004
3004
|
}
|
|
3005
3005
|
});
|
|
3006
3006
|
|
|
3007
|
-
const _hoisted_1$
|
|
3008
|
-
const _sfc_main$
|
|
3007
|
+
const _hoisted_1$v = ["src"];
|
|
3008
|
+
const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
3009
3009
|
...{
|
|
3010
3010
|
name: "MEditorIcon"
|
|
3011
3011
|
},
|
|
@@ -3029,7 +3029,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
|
|
|
3029
3029
|
class: "magic-editor-icon"
|
|
3030
3030
|
}, {
|
|
3031
3031
|
default: withCtx(() => [
|
|
3032
|
-
createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$
|
|
3032
|
+
createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$v)
|
|
3033
3033
|
]),
|
|
3034
3034
|
_: 1
|
|
3035
3035
|
})) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
|
|
@@ -3106,9 +3106,9 @@ const useCodeBlockEdit = (codeBlockService) => {
|
|
|
3106
3106
|
};
|
|
3107
3107
|
};
|
|
3108
3108
|
|
|
3109
|
-
const _hoisted_1$
|
|
3109
|
+
const _hoisted_1$u = { class: "m-fields-code-select-col" };
|
|
3110
3110
|
const _hoisted_2$o = { class: "code-select-container" };
|
|
3111
|
-
const _sfc_main$
|
|
3111
|
+
const _sfc_main$M = /* @__PURE__ */ defineComponent({
|
|
3112
3112
|
...{
|
|
3113
3113
|
name: "MEditorCodeSelectCol"
|
|
3114
3114
|
},
|
|
@@ -3180,7 +3180,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
3180
3180
|
const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
|
|
3181
3181
|
return (_ctx, _cache) => {
|
|
3182
3182
|
const _component_m_form_container = resolveComponent("m-form-container");
|
|
3183
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
3183
|
+
return openBlock(), createElementBlock("div", _hoisted_1$u, [
|
|
3184
3184
|
createElementVNode("div", _hoisted_2$o, [
|
|
3185
3185
|
createVNode(_component_m_form_container, {
|
|
3186
3186
|
class: "select",
|
|
@@ -3189,14 +3189,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
3189
3189
|
size: _ctx.size,
|
|
3190
3190
|
onChange: onParamsChangeHandler
|
|
3191
3191
|
}, null, 8, ["model", "size"]),
|
|
3192
|
-
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$
|
|
3192
|
+
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
|
|
3193
3193
|
key: 0,
|
|
3194
3194
|
class: "icon",
|
|
3195
3195
|
icon: !_ctx.disabled ? unref(Edit) : unref(View),
|
|
3196
3196
|
onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
|
|
3197
3197
|
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
3198
3198
|
]),
|
|
3199
|
-
paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$
|
|
3199
|
+
paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
|
|
3200
3200
|
key: 0,
|
|
3201
3201
|
name: "params",
|
|
3202
3202
|
model: _ctx.model,
|
|
@@ -3204,7 +3204,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
3204
3204
|
"params-config": paramsConfig.value,
|
|
3205
3205
|
onChange: onParamsChangeHandler
|
|
3206
3206
|
}, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
|
|
3207
|
-
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$
|
|
3207
|
+
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
|
|
3208
3208
|
key: 1,
|
|
3209
3209
|
ref_key: "codeBlockEditor",
|
|
3210
3210
|
ref: codeBlockEditor,
|
|
@@ -3217,9 +3217,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
3217
3217
|
}
|
|
3218
3218
|
});
|
|
3219
3219
|
|
|
3220
|
-
const _hoisted_1$
|
|
3220
|
+
const _hoisted_1$t = { class: "m-editor-data-source-fields" };
|
|
3221
3221
|
const _hoisted_2$n = { class: "m-editor-data-source-fields-footer" };
|
|
3222
|
-
const _sfc_main$
|
|
3222
|
+
const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
3223
3223
|
...{
|
|
3224
3224
|
name: "MEditorDataSourceFields"
|
|
3225
3225
|
},
|
|
@@ -3450,7 +3450,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
3450
3450
|
}
|
|
3451
3451
|
};
|
|
3452
3452
|
return (_ctx, _cache) => {
|
|
3453
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
3453
|
+
return openBlock(), createElementBlock("div", _hoisted_1$t, [
|
|
3454
3454
|
createVNode(unref(MagicTable), {
|
|
3455
3455
|
data: _ctx.model[_ctx.name],
|
|
3456
3456
|
columns: fieldColumns
|
|
@@ -3507,7 +3507,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
3507
3507
|
}
|
|
3508
3508
|
});
|
|
3509
3509
|
|
|
3510
|
-
const _sfc_main$
|
|
3510
|
+
const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
3511
3511
|
__name: "DataSourceFieldSelect",
|
|
3512
3512
|
props: {
|
|
3513
3513
|
config: {},
|
|
@@ -3561,10 +3561,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
|
|
|
3561
3561
|
}
|
|
3562
3562
|
});
|
|
3563
3563
|
|
|
3564
|
-
const _hoisted_1$
|
|
3564
|
+
const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
|
|
3565
3565
|
const _hoisted_2$m = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
|
|
3566
3566
|
const _hoisted_3$a = { class: "el-input__inner" };
|
|
3567
|
-
const _sfc_main$
|
|
3567
|
+
const _sfc_main$J = /* @__PURE__ */ defineComponent({
|
|
3568
3568
|
...{
|
|
3569
3569
|
name: "MEditorDataSourceInput"
|
|
3570
3570
|
},
|
|
@@ -3753,10 +3753,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
3753
3753
|
}
|
|
3754
3754
|
), {
|
|
3755
3755
|
suffix: withCtx(() => [
|
|
3756
|
-
createVNode(_sfc_main$
|
|
3756
|
+
createVNode(_sfc_main$N, { icon: unref(Coin) }, null, 8, ["icon"])
|
|
3757
3757
|
]),
|
|
3758
3758
|
default: withCtx(({ item }) => [
|
|
3759
|
-
createElementVNode("div", _hoisted_1$
|
|
3759
|
+
createElementVNode("div", _hoisted_1$s, [
|
|
3760
3760
|
createElementVNode("div", null, toDisplayString(item.text), 1),
|
|
3761
3761
|
createElementVNode("span", _hoisted_2$m, toDisplayString(item.value), 1)
|
|
3762
3762
|
])
|
|
@@ -3788,7 +3788,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
3788
3788
|
}, 1032, ["size"])) : createCommentVNode("", true)
|
|
3789
3789
|
], 64);
|
|
3790
3790
|
}), 256)),
|
|
3791
|
-
createVNode(_sfc_main$
|
|
3791
|
+
createVNode(_sfc_main$N, {
|
|
3792
3792
|
class: "tmagic-data-source-input-icon",
|
|
3793
3793
|
icon: unref(Coin)
|
|
3794
3794
|
}, null, 8, ["icon"])
|
|
@@ -3871,9 +3871,9 @@ const useDataSourceMethod = () => {
|
|
|
3871
3871
|
};
|
|
3872
3872
|
};
|
|
3873
3873
|
|
|
3874
|
-
const _hoisted_1$
|
|
3874
|
+
const _hoisted_1$r = { class: "m-editor-data-source-methods" };
|
|
3875
3875
|
const _hoisted_2$l = { class: "m-editor-data-source-methods-footer" };
|
|
3876
|
-
const _sfc_main$
|
|
3876
|
+
const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
3877
3877
|
...{
|
|
3878
3878
|
name: "MEditorDataSourceMethods"
|
|
3879
3879
|
},
|
|
@@ -3942,7 +3942,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
|
3942
3942
|
emit("change", props.model[props.name]);
|
|
3943
3943
|
};
|
|
3944
3944
|
return (_ctx, _cache) => {
|
|
3945
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
3945
|
+
return openBlock(), createElementBlock("div", _hoisted_1$r, [
|
|
3946
3946
|
createVNode(unref(MagicTable), {
|
|
3947
3947
|
data: _ctx.model[_ctx.name],
|
|
3948
3948
|
columns: methodColumns
|
|
@@ -3961,7 +3961,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
|
3961
3961
|
_: 1
|
|
3962
3962
|
}, 8, ["disabled"])
|
|
3963
3963
|
]),
|
|
3964
|
-
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$
|
|
3964
|
+
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
|
|
3965
3965
|
key: 0,
|
|
3966
3966
|
ref_key: "codeBlockEditor",
|
|
3967
3967
|
ref: codeBlockEditor,
|
|
@@ -3976,9 +3976,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
|
3976
3976
|
}
|
|
3977
3977
|
});
|
|
3978
3978
|
|
|
3979
|
-
const _hoisted_1$
|
|
3979
|
+
const _hoisted_1$q = { class: "m-fields-data-source-method-select" };
|
|
3980
3980
|
const _hoisted_2$k = { class: "data-source-method-select-container" };
|
|
3981
|
-
const _sfc_main$
|
|
3981
|
+
const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
3982
3982
|
...{
|
|
3983
3983
|
name: "MEditorDataSourceMethodSelect"
|
|
3984
3984
|
},
|
|
@@ -4060,7 +4060,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
4060
4060
|
};
|
|
4061
4061
|
return (_ctx, _cache) => {
|
|
4062
4062
|
const _component_m_form_container = resolveComponent("m-form-container");
|
|
4063
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
4063
|
+
return openBlock(), createElementBlock("div", _hoisted_1$q, [
|
|
4064
4064
|
createElementVNode("div", _hoisted_2$k, [
|
|
4065
4065
|
createVNode(_component_m_form_container, {
|
|
4066
4066
|
class: "select",
|
|
@@ -4068,14 +4068,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
4068
4068
|
model: _ctx.model,
|
|
4069
4069
|
onChange: onChangeHandler
|
|
4070
4070
|
}, null, 8, ["config", "model"]),
|
|
4071
|
-
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$
|
|
4071
|
+
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
|
|
4072
4072
|
key: 0,
|
|
4073
4073
|
class: "icon",
|
|
4074
4074
|
icon: !_ctx.disabled ? unref(Edit) : unref(View),
|
|
4075
4075
|
onClick: editCodeHandler
|
|
4076
4076
|
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
4077
4077
|
]),
|
|
4078
|
-
paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$
|
|
4078
|
+
paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$O, {
|
|
4079
4079
|
key: 0,
|
|
4080
4080
|
name: "params",
|
|
4081
4081
|
model: _ctx.model,
|
|
@@ -4084,7 +4084,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
4084
4084
|
"params-config": paramsConfig.value,
|
|
4085
4085
|
onChange: onChangeHandler
|
|
4086
4086
|
}, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
|
|
4087
|
-
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$
|
|
4087
|
+
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
|
|
4088
4088
|
key: 1,
|
|
4089
4089
|
ref_key: "codeBlockEditor",
|
|
4090
4090
|
ref: codeBlockEditor,
|
|
@@ -4097,9 +4097,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
4097
4097
|
}
|
|
4098
4098
|
});
|
|
4099
4099
|
|
|
4100
|
-
const _hoisted_1$
|
|
4100
|
+
const _hoisted_1$p = { class: "m-editor-data-source-fields" };
|
|
4101
4101
|
const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
|
|
4102
|
-
const _sfc_main$
|
|
4102
|
+
const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
4103
4103
|
...{
|
|
4104
4104
|
name: "MEditorDataSourceMocks"
|
|
4105
4105
|
},
|
|
@@ -4185,7 +4185,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
4185
4185
|
const columns = [
|
|
4186
4186
|
{
|
|
4187
4187
|
type: "expand",
|
|
4188
|
-
component: _sfc_main$
|
|
4188
|
+
component: _sfc_main$T,
|
|
4189
4189
|
props: (row) => ({
|
|
4190
4190
|
initValues: row.data,
|
|
4191
4191
|
language: "json",
|
|
@@ -4294,7 +4294,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
4294
4294
|
});
|
|
4295
4295
|
};
|
|
4296
4296
|
return (_ctx, _cache) => {
|
|
4297
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
4297
|
+
return openBlock(), createElementBlock("div", _hoisted_1$p, [
|
|
4298
4298
|
createVNode(unref(MagicTable), {
|
|
4299
4299
|
data: _ctx.model[_ctx.name],
|
|
4300
4300
|
columns
|
|
@@ -4330,7 +4330,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
4330
4330
|
}
|
|
4331
4331
|
});
|
|
4332
4332
|
|
|
4333
|
-
const _sfc_main$
|
|
4333
|
+
const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
4334
4334
|
...{
|
|
4335
4335
|
name: "MEditorDataSourceSelect"
|
|
4336
4336
|
},
|
|
@@ -4385,12 +4385,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
4385
4385
|
}
|
|
4386
4386
|
});
|
|
4387
4387
|
|
|
4388
|
-
const _hoisted_1$
|
|
4388
|
+
const _hoisted_1$o = { class: "m-fields-event-select" };
|
|
4389
4389
|
const _hoisted_2$i = {
|
|
4390
4390
|
key: 1,
|
|
4391
4391
|
class: "fullWidth"
|
|
4392
4392
|
};
|
|
4393
|
-
const _sfc_main$
|
|
4393
|
+
const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
4394
4394
|
...{
|
|
4395
4395
|
name: "MEditorEventSelect"
|
|
4396
4396
|
},
|
|
@@ -4592,7 +4592,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
|
|
|
4592
4592
|
const _component_m_form_table = resolveComponent("m-form-table");
|
|
4593
4593
|
const _component_m_form_container = resolveComponent("m-form-container");
|
|
4594
4594
|
const _component_m_form_panel = resolveComponent("m-form-panel");
|
|
4595
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
4595
|
+
return openBlock(), createElementBlock("div", _hoisted_1$o, [
|
|
4596
4596
|
isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
|
|
4597
4597
|
key: 0,
|
|
4598
4598
|
ref: "eventForm",
|
|
@@ -4652,9 +4652,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
|
|
|
4652
4652
|
}
|
|
4653
4653
|
});
|
|
4654
4654
|
|
|
4655
|
-
const _hoisted_1$
|
|
4655
|
+
const _hoisted_1$n = { class: "m-fields-key-value" };
|
|
4656
4656
|
const _hoisted_2$h = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
|
|
4657
|
-
const _sfc_main$
|
|
4657
|
+
const _sfc_main$D = /* @__PURE__ */ defineComponent({
|
|
4658
4658
|
...{
|
|
4659
4659
|
name: "MEditorKeyValue"
|
|
4660
4660
|
},
|
|
@@ -4700,7 +4700,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
|
|
|
4700
4700
|
emit("change", getValue());
|
|
4701
4701
|
};
|
|
4702
4702
|
return (_ctx, _cache) => {
|
|
4703
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
4703
|
+
return openBlock(), createElementBlock("div", _hoisted_1$n, [
|
|
4704
4704
|
(openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
|
|
4705
4705
|
return openBlock(), createElementBlock("div", {
|
|
4706
4706
|
class: "m-fields-key-value-item",
|
|
@@ -4753,12 +4753,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
|
|
|
4753
4753
|
}
|
|
4754
4754
|
});
|
|
4755
4755
|
|
|
4756
|
-
const _hoisted_1$
|
|
4756
|
+
const _hoisted_1$m = {
|
|
4757
4757
|
key: 1,
|
|
4758
4758
|
class: "m-fields-ui-select",
|
|
4759
4759
|
style: { "display": "flex" }
|
|
4760
4760
|
};
|
|
4761
|
-
const _sfc_main$
|
|
4761
|
+
const _sfc_main$C = /* @__PURE__ */ defineComponent({
|
|
4762
4762
|
...{
|
|
4763
4763
|
name: "MEditorUISelect"
|
|
4764
4764
|
},
|
|
@@ -4847,7 +4847,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
|
|
|
4847
4847
|
]),
|
|
4848
4848
|
_: 1
|
|
4849
4849
|
}, 8, ["icon", "disabled", "size"])
|
|
4850
|
-
])) : (openBlock(), createElementBlock("div", _hoisted_1$
|
|
4850
|
+
])) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
|
|
4851
4851
|
val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
4852
4852
|
createVNode(unref(TMagicTooltip), {
|
|
4853
4853
|
content: "清除",
|
|
@@ -4944,7 +4944,7 @@ const useGetSo = (target, emit) => {
|
|
|
4944
4944
|
};
|
|
4945
4945
|
};
|
|
4946
4946
|
|
|
4947
|
-
const _sfc_main$
|
|
4947
|
+
const _sfc_main$B = /* @__PURE__ */ defineComponent({
|
|
4948
4948
|
...{
|
|
4949
4949
|
name: "MEditorResizer"
|
|
4950
4950
|
},
|
|
@@ -4965,7 +4965,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
|
|
|
4965
4965
|
}
|
|
4966
4966
|
});
|
|
4967
4967
|
|
|
4968
|
-
const _sfc_main$
|
|
4968
|
+
const _sfc_main$A = /* @__PURE__ */ defineComponent({
|
|
4969
4969
|
...{
|
|
4970
4970
|
name: "MEditorLayout"
|
|
4971
4971
|
},
|
|
@@ -4981,19 +4981,22 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
4981
4981
|
centerClass: {}
|
|
4982
4982
|
},
|
|
4983
4983
|
emits: ["update:left", "change", "update:right"],
|
|
4984
|
-
setup(__props, { emit }) {
|
|
4984
|
+
setup(__props, { expose: __expose, emit }) {
|
|
4985
4985
|
const props = __props;
|
|
4986
4986
|
const el = ref();
|
|
4987
4987
|
const hasLeft = computed(() => typeof props.left !== "undefined");
|
|
4988
4988
|
const hasRight = computed(() => typeof props.right !== "undefined");
|
|
4989
|
-
const getCenterWidth = (clientWidth2,
|
|
4989
|
+
const getCenterWidth = (clientWidth2, l = 0, r = 0) => {
|
|
4990
|
+
let right = r > 0 ? r : 0;
|
|
4991
|
+
let left = l > 0 ? l : 0;
|
|
4990
4992
|
let center2 = clientWidth2 - left - right;
|
|
4991
4993
|
if (center2 < props.minCenter) {
|
|
4992
4994
|
center2 = props.minCenter;
|
|
4993
|
-
if (
|
|
4994
|
-
right = clientWidth2 - left -
|
|
4995
|
+
if (right > center2 + props.minRight) {
|
|
4996
|
+
right = clientWidth2 - left - center2;
|
|
4995
4997
|
} else {
|
|
4996
|
-
|
|
4998
|
+
right = props.minRight;
|
|
4999
|
+
left = clientWidth2 - right - center2;
|
|
4997
5000
|
}
|
|
4998
5001
|
}
|
|
4999
5002
|
return {
|
|
@@ -5056,7 +5059,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
5056
5059
|
if (clientWidth - (props.left || 0) - right <= 0) {
|
|
5057
5060
|
right = props.right;
|
|
5058
5061
|
}
|
|
5059
|
-
const columnWidth = getCenterWidth(clientWidth, props.left
|
|
5062
|
+
const columnWidth = getCenterWidth(clientWidth, props.left, right);
|
|
5060
5063
|
center.value = columnWidth.center;
|
|
5061
5064
|
emit("change", {
|
|
5062
5065
|
left: columnWidth.left,
|
|
@@ -5064,11 +5067,22 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
5064
5067
|
right: columnWidth.right
|
|
5065
5068
|
});
|
|
5066
5069
|
};
|
|
5070
|
+
__expose({
|
|
5071
|
+
updateWidth() {
|
|
5072
|
+
const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
|
|
5073
|
+
emit("change", {
|
|
5074
|
+
left: columnWidth.left,
|
|
5075
|
+
center: center.value,
|
|
5076
|
+
right: columnWidth.right
|
|
5077
|
+
});
|
|
5078
|
+
}
|
|
5079
|
+
});
|
|
5067
5080
|
return (_ctx, _cache) => {
|
|
5068
5081
|
return openBlock(), createElementBlock("div", {
|
|
5069
5082
|
ref_key: "el",
|
|
5070
5083
|
ref: el,
|
|
5071
|
-
class: "m-editor-layout"
|
|
5084
|
+
class: "m-editor-layout",
|
|
5085
|
+
style: normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
|
|
5072
5086
|
}, [
|
|
5073
5087
|
hasLeft.value && _ctx.$slots.left ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
5074
5088
|
createElementVNode("div", {
|
|
@@ -5077,7 +5091,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
5077
5091
|
}, [
|
|
5078
5092
|
renderSlot(_ctx.$slots, "left")
|
|
5079
5093
|
], 6),
|
|
5080
|
-
createVNode(_sfc_main$
|
|
5094
|
+
createVNode(_sfc_main$B, { onChange: changeLeft })
|
|
5081
5095
|
], 64)) : createCommentVNode("", true),
|
|
5082
5096
|
createElementVNode("div", {
|
|
5083
5097
|
class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
|
|
@@ -5086,7 +5100,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
5086
5100
|
renderSlot(_ctx.$slots, "center")
|
|
5087
5101
|
], 6),
|
|
5088
5102
|
hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
5089
|
-
createVNode(_sfc_main$
|
|
5103
|
+
createVNode(_sfc_main$B, { onChange: changeRight }),
|
|
5090
5104
|
createElementVNode("div", {
|
|
5091
5105
|
class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
|
|
5092
5106
|
style: normalizeStyle(`width: ${_ctx.right}px`)
|
|
@@ -5094,15 +5108,15 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
|
5094
5108
|
renderSlot(_ctx.$slots, "right")
|
|
5095
5109
|
], 6)
|
|
5096
5110
|
], 64)) : createCommentVNode("", true)
|
|
5097
|
-
],
|
|
5111
|
+
], 4);
|
|
5098
5112
|
};
|
|
5099
5113
|
}
|
|
5100
5114
|
});
|
|
5101
5115
|
|
|
5102
|
-
const _hoisted_1$
|
|
5116
|
+
const _hoisted_1$l = { class: "m-editor-empty-panel" };
|
|
5103
5117
|
const _hoisted_2$g = { class: "m-editor-empty-content" };
|
|
5104
5118
|
const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
|
|
5105
|
-
const _sfc_main$
|
|
5119
|
+
const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
5106
5120
|
...{
|
|
5107
5121
|
name: "MEditorAddPageBox"
|
|
5108
5122
|
},
|
|
@@ -5122,14 +5136,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
|
5122
5136
|
});
|
|
5123
5137
|
};
|
|
5124
5138
|
return (_ctx, _cache) => {
|
|
5125
|
-
return openBlock(), createElementBlock("div", _hoisted_1$
|
|
5139
|
+
return openBlock(), createElementBlock("div", _hoisted_1$l, [
|
|
5126
5140
|
createElementVNode("div", _hoisted_2$g, [
|
|
5127
5141
|
createElementVNode("div", {
|
|
5128
5142
|
class: "m-editor-empty-button",
|
|
5129
5143
|
onClick: clickHandler
|
|
5130
5144
|
}, [
|
|
5131
5145
|
createElementVNode("div", null, [
|
|
5132
|
-
createVNode(_sfc_main$
|
|
5146
|
+
createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
|
|
5133
5147
|
]),
|
|
5134
5148
|
_hoisted_3$9
|
|
5135
5149
|
])
|
|
@@ -5143,7 +5157,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
|
|
|
5143
5157
|
const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
|
|
5144
5158
|
const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
|
|
5145
5159
|
const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
|
|
5146
|
-
const _sfc_main$
|
|
5160
|
+
const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
5147
5161
|
...{
|
|
5148
5162
|
name: "MEditorFramework"
|
|
5149
5163
|
},
|
|
@@ -5152,31 +5166,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
5152
5166
|
const codeOptions = inject("codeOptions", {});
|
|
5153
5167
|
const { editorService, uiService } = inject("services") || {};
|
|
5154
5168
|
const content = ref();
|
|
5169
|
+
const splitView = ref();
|
|
5155
5170
|
const root = computed(() => editorService?.get("root"));
|
|
5156
5171
|
const pageLength = computed(() => editorService?.get("pageLength") || 0);
|
|
5157
5172
|
const showSrc = computed(() => uiService?.get("showSrc"));
|
|
5158
|
-
const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
|
|
5159
|
-
const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
|
|
5173
|
+
const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
|
|
5174
|
+
const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
|
|
5160
5175
|
const columnWidth = ref({
|
|
5161
5176
|
left: leftColumnWidthCacheData,
|
|
5162
5177
|
center: 0,
|
|
5163
5178
|
right: RightColumnWidthCacheData
|
|
5164
5179
|
});
|
|
5165
5180
|
watch(
|
|
5166
|
-
pageLength,
|
|
5167
|
-
(
|
|
5168
|
-
|
|
5169
|
-
columnWidth.value.left = left;
|
|
5170
|
-
const container = content.value || document.body;
|
|
5171
|
-
if (length <= 0) {
|
|
5172
|
-
columnWidth.value.right = void 0;
|
|
5173
|
-
columnWidth.value.center = container.clientWidth - left;
|
|
5174
|
-
} else {
|
|
5175
|
-
const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
|
|
5176
|
-
columnWidth.value.right = right;
|
|
5177
|
-
columnWidth.value.center = container.clientWidth - left - right;
|
|
5178
|
-
}
|
|
5179
|
-
uiService?.set("columnWidth", columnWidth.value);
|
|
5181
|
+
[pageLength, splitView],
|
|
5182
|
+
() => {
|
|
5183
|
+
splitView.value?.updateWidth();
|
|
5180
5184
|
},
|
|
5181
5185
|
{
|
|
5182
5186
|
immediate: true
|
|
@@ -5214,20 +5218,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
5214
5218
|
return openBlock(), createElementBlock("div", {
|
|
5215
5219
|
class: "m-editor",
|
|
5216
5220
|
ref_key: "content",
|
|
5217
|
-
ref: content
|
|
5221
|
+
ref: content,
|
|
5222
|
+
style: { "min-width": "180px" }
|
|
5218
5223
|
}, [
|
|
5219
5224
|
renderSlot(_ctx.$slots, "header"),
|
|
5220
5225
|
renderSlot(_ctx.$slots, "nav"),
|
|
5221
5226
|
renderSlot(_ctx.$slots, "content-before"),
|
|
5222
5227
|
showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
|
|
5223
|
-
createVNode(_sfc_main$
|
|
5228
|
+
createVNode(_sfc_main$T, {
|
|
5224
5229
|
class: "m-editor-content",
|
|
5225
5230
|
"init-values": root.value,
|
|
5226
5231
|
options: unref(codeOptions),
|
|
5227
5232
|
onSave: saveCode
|
|
5228
5233
|
}, null, 8, ["init-values", "options"])
|
|
5229
|
-
]) : (openBlock(), createBlock(_sfc_main$
|
|
5234
|
+
]) : (openBlock(), createBlock(_sfc_main$A, {
|
|
5230
5235
|
key: 1,
|
|
5236
|
+
ref_key: "splitView",
|
|
5237
|
+
ref: splitView,
|
|
5231
5238
|
class: "m-editor-content",
|
|
5232
5239
|
"left-class": "m-editor-framework-left",
|
|
5233
5240
|
"center-class": "m-editor-framework-center",
|
|
@@ -5238,6 +5245,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
5238
5245
|
"onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
|
|
5239
5246
|
"min-left": 65,
|
|
5240
5247
|
"min-right": 20,
|
|
5248
|
+
"min-center": 100,
|
|
5241
5249
|
onChange: columnWidthChange
|
|
5242
5250
|
}, createSlots({
|
|
5243
5251
|
left: withCtx(() => [
|
|
@@ -5245,7 +5253,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
5245
5253
|
]),
|
|
5246
5254
|
center: withCtx(() => [
|
|
5247
5255
|
pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
|
|
5248
|
-
createVNode(_sfc_main$
|
|
5256
|
+
createVNode(_sfc_main$z)
|
|
5249
5257
|
])
|
|
5250
5258
|
]),
|
|
5251
5259
|
_: 2
|
|
@@ -5270,12 +5278,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
5270
5278
|
}
|
|
5271
5279
|
});
|
|
5272
5280
|
|
|
5273
|
-
const _hoisted_1$
|
|
5281
|
+
const _hoisted_1$k = {
|
|
5274
5282
|
key: 1,
|
|
5275
5283
|
class: "menu-item-text"
|
|
5276
5284
|
};
|
|
5277
5285
|
const _hoisted_2$f = { class: "el-dropdown-link menubar-menu-button" };
|
|
5278
|
-
const _sfc_main$
|
|
5286
|
+
const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
5279
5287
|
...{
|
|
5280
5288
|
name: "MEditorToolButton"
|
|
5281
5289
|
},
|
|
@@ -5354,7 +5362,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
|
5354
5362
|
_ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
|
|
5355
5363
|
key: 0,
|
|
5356
5364
|
direction: _ctx.data.direction || "vertical"
|
|
5357
|
-
}, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$
|
|
5365
|
+
}, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
5358
5366
|
_ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
|
|
5359
5367
|
key: 0,
|
|
5360
5368
|
effect: "dark",
|
|
@@ -5368,7 +5376,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
|
5368
5376
|
disabled: disabled.value
|
|
5369
5377
|
}, {
|
|
5370
5378
|
default: withCtx(() => [
|
|
5371
|
-
_ctx.data.icon ? (openBlock(), createBlock(_sfc_main$
|
|
5379
|
+
_ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
|
|
5372
5380
|
key: 0,
|
|
5373
5381
|
icon: _ctx.data.icon
|
|
5374
5382
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
@@ -5386,7 +5394,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
|
5386
5394
|
title: _ctx.data.text
|
|
5387
5395
|
}, {
|
|
5388
5396
|
default: withCtx(() => [
|
|
5389
|
-
_ctx.data.icon ? (openBlock(), createBlock(_sfc_main$
|
|
5397
|
+
_ctx.data.icon ? (openBlock(), createBlock(_sfc_main$N, {
|
|
5390
5398
|
key: 0,
|
|
5391
5399
|
icon: _ctx.data.icon
|
|
5392
5400
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
@@ -5436,7 +5444,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
|
5436
5444
|
}
|
|
5437
5445
|
});
|
|
5438
5446
|
|
|
5439
|
-
const _sfc_main$
|
|
5447
|
+
const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
5440
5448
|
...{
|
|
5441
5449
|
name: "MEditorNavMenu"
|
|
5442
5450
|
},
|
|
@@ -5598,7 +5606,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
|
|
|
5598
5606
|
style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
|
|
5599
5607
|
}, [
|
|
5600
5608
|
(openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
|
|
5601
|
-
return openBlock(), createBlock(_sfc_main$
|
|
5609
|
+
return openBlock(), createBlock(_sfc_main$x, {
|
|
5602
5610
|
data: item,
|
|
5603
5611
|
key: index
|
|
5604
5612
|
}, null, 8, ["data"]);
|
|
@@ -5610,8 +5618,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
|
|
|
5610
5618
|
}
|
|
5611
5619
|
});
|
|
5612
5620
|
|
|
5613
|
-
const _hoisted_1$
|
|
5614
|
-
const _sfc_main$
|
|
5621
|
+
const _hoisted_1$j = { class: "m-editor-props-panel" };
|
|
5622
|
+
const _sfc_main$v = /* @__PURE__ */ defineComponent({
|
|
5615
5623
|
...{
|
|
5616
5624
|
name: "MEditorPropsPanel"
|
|
5617
5625
|
},
|
|
@@ -5664,7 +5672,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
|
5664
5672
|
};
|
|
5665
5673
|
__expose({ configForm, submit });
|
|
5666
5674
|
return (_ctx, _cache) => {
|
|
5667
|
-
return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$
|
|
5675
|
+
return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$j, [
|
|
5668
5676
|
renderSlot(_ctx.$slots, "props-panel-header"),
|
|
5669
5677
|
createVNode(unref(MForm), {
|
|
5670
5678
|
ref_key: "configForm",
|
|
@@ -5684,7 +5692,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
|
5684
5692
|
}
|
|
5685
5693
|
});
|
|
5686
5694
|
|
|
5687
|
-
const _sfc_main$
|
|
5695
|
+
const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
5688
5696
|
...{
|
|
5689
5697
|
name: "MEditorSearchInput"
|
|
5690
5698
|
},
|
|
@@ -5723,7 +5731,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
|
|
|
5723
5731
|
}
|
|
5724
5732
|
});
|
|
5725
5733
|
|
|
5726
|
-
const _hoisted_1$
|
|
5734
|
+
const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
|
|
5727
5735
|
const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
|
|
5728
5736
|
fill: "#7C878E",
|
|
5729
5737
|
"fill-rule": "evenodd"
|
|
@@ -5737,19 +5745,19 @@ const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
|
|
|
5737
5745
|
const _hoisted_3$8 = [
|
|
5738
5746
|
_hoisted_2$e
|
|
5739
5747
|
];
|
|
5740
|
-
const _sfc_main$
|
|
5748
|
+
const _sfc_main$t = /* @__PURE__ */ defineComponent({
|
|
5741
5749
|
...{
|
|
5742
5750
|
name: "MEditorAppManageIcon"
|
|
5743
5751
|
},
|
|
5744
5752
|
__name: "AppManageIcon",
|
|
5745
5753
|
setup(__props) {
|
|
5746
5754
|
return (_ctx, _cache) => {
|
|
5747
|
-
return openBlock(), createElementBlock("svg", _hoisted_1$
|
|
5755
|
+
return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$8);
|
|
5748
5756
|
};
|
|
5749
5757
|
}
|
|
5750
5758
|
});
|
|
5751
5759
|
|
|
5752
|
-
const _hoisted_1$
|
|
5760
|
+
const _hoisted_1$h = {
|
|
5753
5761
|
viewBox: "0 0 32 32",
|
|
5754
5762
|
version: "1.1",
|
|
5755
5763
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -5759,25 +5767,25 @@ const _hoisted_2$d = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
|
|
|
5759
5767
|
const _hoisted_4$6 = [
|
|
5760
5768
|
_hoisted_2$d
|
|
5761
5769
|
];
|
|
5762
|
-
const _sfc_main$
|
|
5770
|
+
const _sfc_main$s = /* @__PURE__ */ defineComponent({
|
|
5763
5771
|
...{
|
|
5764
5772
|
name: "MEditorCodeIcon"
|
|
5765
5773
|
},
|
|
5766
5774
|
__name: "CodeIcon",
|
|
5767
5775
|
setup(__props) {
|
|
5768
5776
|
return (_ctx, _cache) => {
|
|
5769
|
-
return openBlock(), createElementBlock("svg", _hoisted_1$
|
|
5777
|
+
return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$6);
|
|
5770
5778
|
};
|
|
5771
5779
|
}
|
|
5772
5780
|
});
|
|
5773
5781
|
|
|
5774
|
-
const _hoisted_1$
|
|
5782
|
+
const _hoisted_1$g = ["id"];
|
|
5775
5783
|
const _hoisted_2$c = { class: "list-item" };
|
|
5776
5784
|
const _hoisted_3$7 = {
|
|
5777
5785
|
key: 2,
|
|
5778
5786
|
class: "right-tool"
|
|
5779
5787
|
};
|
|
5780
|
-
const _sfc_main$
|
|
5788
|
+
const _sfc_main$r = /* @__PURE__ */ defineComponent({
|
|
5781
5789
|
...{
|
|
5782
5790
|
name: "MEditorCodeBlockList"
|
|
5783
5791
|
},
|
|
@@ -5879,11 +5887,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
5879
5887
|
class: "list-container"
|
|
5880
5888
|
}, [
|
|
5881
5889
|
createElementVNode("div", _hoisted_2$c, [
|
|
5882
|
-
data.type === "code" ? (openBlock(), createBlock(_sfc_main$
|
|
5890
|
+
data.type === "code" ? (openBlock(), createBlock(_sfc_main$s, {
|
|
5883
5891
|
key: 0,
|
|
5884
5892
|
class: "codeIcon"
|
|
5885
5893
|
})) : createCommentVNode("", true),
|
|
5886
|
-
data.type === "node" ? (openBlock(), createBlock(_sfc_main$
|
|
5894
|
+
data.type === "node" ? (openBlock(), createBlock(_sfc_main$t, {
|
|
5887
5895
|
key: 1,
|
|
5888
5896
|
class: "compIcon"
|
|
5889
5897
|
})) : createCommentVNode("", true),
|
|
@@ -5897,7 +5905,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
5897
5905
|
placement: "bottom"
|
|
5898
5906
|
}, {
|
|
5899
5907
|
default: withCtx(() => [
|
|
5900
|
-
createVNode(_sfc_main$
|
|
5908
|
+
createVNode(_sfc_main$N, {
|
|
5901
5909
|
icon: editable.value ? unref(Edit) : unref(View),
|
|
5902
5910
|
class: "edit-icon",
|
|
5903
5911
|
onClick: withModifiers(($event) => editCode(data.id), ["stop"])
|
|
@@ -5912,7 +5920,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
5912
5920
|
placement: "bottom"
|
|
5913
5921
|
}, {
|
|
5914
5922
|
default: withCtx(() => [
|
|
5915
|
-
createVNode(_sfc_main$
|
|
5923
|
+
createVNode(_sfc_main$N, {
|
|
5916
5924
|
icon: unref(Close),
|
|
5917
5925
|
class: "edit-icon",
|
|
5918
5926
|
onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
|
|
@@ -5926,7 +5934,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
5926
5934
|
})
|
|
5927
5935
|
])) : createCommentVNode("", true)
|
|
5928
5936
|
])
|
|
5929
|
-
], 8, _hoisted_1$
|
|
5937
|
+
], 8, _hoisted_1$g)
|
|
5930
5938
|
]),
|
|
5931
5939
|
_: 3
|
|
5932
5940
|
}, 8, ["default-expanded-keys", "data"]);
|
|
@@ -5934,8 +5942,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
5934
5942
|
}
|
|
5935
5943
|
});
|
|
5936
5944
|
|
|
5937
|
-
const _hoisted_1$
|
|
5938
|
-
const _sfc_main$
|
|
5945
|
+
const _hoisted_1$f = { class: "search-wrapper" };
|
|
5946
|
+
const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
5939
5947
|
...{
|
|
5940
5948
|
name: "MEditorCodeBlockListPanel"
|
|
5941
5949
|
},
|
|
@@ -5955,8 +5963,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
|
5955
5963
|
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
|
|
5956
5964
|
default: withCtx(() => [
|
|
5957
5965
|
renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
|
|
5958
|
-
createElementVNode("div", _hoisted_1$
|
|
5959
|
-
createVNode(_sfc_main$
|
|
5966
|
+
createElementVNode("div", _hoisted_1$f, [
|
|
5967
|
+
createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
|
|
5960
5968
|
editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
5961
5969
|
key: 0,
|
|
5962
5970
|
class: "create-code-button",
|
|
@@ -5972,7 +5980,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
|
5972
5980
|
renderSlot(_ctx.$slots, "code-block-panel-search")
|
|
5973
5981
|
])
|
|
5974
5982
|
]),
|
|
5975
|
-
createVNode(_sfc_main$
|
|
5983
|
+
createVNode(_sfc_main$r, {
|
|
5976
5984
|
ref_key: "codeBlockList",
|
|
5977
5985
|
ref: codeBlockList,
|
|
5978
5986
|
"custom-error": _ctx.customError,
|
|
@@ -5987,7 +5995,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
|
5987
5995
|
]),
|
|
5988
5996
|
_: 3
|
|
5989
5997
|
}, 8, ["custom-error", "onEdit", "onRemove"]),
|
|
5990
|
-
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$
|
|
5998
|
+
unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
|
|
5991
5999
|
key: 0,
|
|
5992
6000
|
ref_key: "codeBlockEditor",
|
|
5993
6001
|
ref: codeBlockEditor,
|
|
@@ -6002,7 +6010,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
|
6002
6010
|
}
|
|
6003
6011
|
});
|
|
6004
6012
|
|
|
6005
|
-
const _sfc_main$
|
|
6013
|
+
const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
6006
6014
|
...{
|
|
6007
6015
|
name: "MEditorDataSourceConfigPanel"
|
|
6008
6016
|
},
|
|
@@ -6056,13 +6064,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
|
6056
6064
|
}
|
|
6057
6065
|
});
|
|
6058
6066
|
|
|
6059
|
-
const _hoisted_1$
|
|
6067
|
+
const _hoisted_1$e = ["id"];
|
|
6060
6068
|
const _hoisted_2$b = { class: "list-item" };
|
|
6061
6069
|
const _hoisted_3$6 = {
|
|
6062
6070
|
key: 2,
|
|
6063
6071
|
class: "right-tool"
|
|
6064
6072
|
};
|
|
6065
|
-
const _sfc_main$
|
|
6073
|
+
const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
6066
6074
|
...{
|
|
6067
6075
|
name: "MEditorDataSourceList"
|
|
6068
6076
|
},
|
|
@@ -6082,25 +6090,25 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6082
6090
|
id,
|
|
6083
6091
|
children: getKeyTreeConfig(dep, type)
|
|
6084
6092
|
});
|
|
6093
|
+
const mergeChildren = (children, deps, type) => {
|
|
6094
|
+
Object.entries(deps).forEach(([id, dep]) => {
|
|
6095
|
+
const nodeItem = children.find((item) => item.id === id);
|
|
6096
|
+
if (nodeItem) {
|
|
6097
|
+
nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
|
|
6098
|
+
} else {
|
|
6099
|
+
children.push(getNodeTreeConfig(id, dep, type));
|
|
6100
|
+
}
|
|
6101
|
+
});
|
|
6102
|
+
};
|
|
6085
6103
|
const list = computed(
|
|
6086
6104
|
() => dataSources.value.map((ds) => {
|
|
6087
6105
|
const dsDeps = dsDep.value[ds.id].deps;
|
|
6088
6106
|
const dsMethodDeps = dsMethodDep.value[ds.id].deps;
|
|
6089
6107
|
const dsCondDeps = dsCondDep.value[ds.id].deps;
|
|
6090
6108
|
const children = [];
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
if (nodeItem) {
|
|
6095
|
-
nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
|
|
6096
|
-
} else {
|
|
6097
|
-
children.push(getNodeTreeConfig(id, dep, type));
|
|
6098
|
-
}
|
|
6099
|
-
});
|
|
6100
|
-
};
|
|
6101
|
-
mergeChildren(dsDeps);
|
|
6102
|
-
mergeChildren(dsMethodDeps, "method");
|
|
6103
|
-
mergeChildren(dsCondDeps, "cond");
|
|
6109
|
+
mergeChildren(children, dsDeps);
|
|
6110
|
+
mergeChildren(children, dsMethodDeps, "method");
|
|
6111
|
+
mergeChildren(children, dsCondDeps, "cond");
|
|
6104
6112
|
return {
|
|
6105
6113
|
id: ds.id,
|
|
6106
6114
|
name: ds.title,
|
|
@@ -6158,12 +6166,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6158
6166
|
class: "list-container"
|
|
6159
6167
|
}, [
|
|
6160
6168
|
createElementVNode("div", _hoisted_2$b, [
|
|
6161
|
-
data.type === "code" ? (openBlock(), createBlock(_sfc_main$
|
|
6169
|
+
data.type === "code" ? (openBlock(), createBlock(_sfc_main$N, {
|
|
6162
6170
|
key: 0,
|
|
6163
6171
|
class: "codeIcon",
|
|
6164
6172
|
icon: unref(Coin)
|
|
6165
6173
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
6166
|
-
data.type === "node" ? (openBlock(), createBlock(_sfc_main$
|
|
6174
|
+
data.type === "node" ? (openBlock(), createBlock(_sfc_main$N, {
|
|
6167
6175
|
key: 1,
|
|
6168
6176
|
class: "compIcon",
|
|
6169
6177
|
icon: unref(Aim)
|
|
@@ -6178,7 +6186,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6178
6186
|
placement: "bottom"
|
|
6179
6187
|
}, {
|
|
6180
6188
|
default: withCtx(() => [
|
|
6181
|
-
createVNode(_sfc_main$
|
|
6189
|
+
createVNode(_sfc_main$N, {
|
|
6182
6190
|
icon: editable.value ? unref(Edit) : unref(View),
|
|
6183
6191
|
class: "edit-icon",
|
|
6184
6192
|
onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
|
|
@@ -6193,7 +6201,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6193
6201
|
placement: "bottom"
|
|
6194
6202
|
}, {
|
|
6195
6203
|
default: withCtx(() => [
|
|
6196
|
-
createVNode(_sfc_main$
|
|
6204
|
+
createVNode(_sfc_main$N, {
|
|
6197
6205
|
icon: unref(Close),
|
|
6198
6206
|
class: "edit-icon",
|
|
6199
6207
|
onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
|
|
@@ -6201,13 +6209,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6201
6209
|
]),
|
|
6202
6210
|
_: 2
|
|
6203
6211
|
}, 1024)) : createCommentVNode("", true),
|
|
6204
|
-
renderSlot(_ctx.$slots, "data-source-panel-tool", {
|
|
6205
|
-
id: data.id,
|
|
6206
|
-
data: data.codeBlockContent
|
|
6207
|
-
})
|
|
6212
|
+
renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
|
|
6208
6213
|
])) : createCommentVNode("", true)
|
|
6209
6214
|
])
|
|
6210
|
-
], 8, _hoisted_1$
|
|
6215
|
+
], 8, _hoisted_1$e)
|
|
6211
6216
|
]),
|
|
6212
6217
|
_: 3
|
|
6213
6218
|
}, 8, ["data"]);
|
|
@@ -6215,9 +6220,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6215
6220
|
}
|
|
6216
6221
|
});
|
|
6217
6222
|
|
|
6218
|
-
const _hoisted_1$
|
|
6223
|
+
const _hoisted_1$d = { class: "search-wrapper" };
|
|
6219
6224
|
const _hoisted_2$a = { class: "data-source-list-panel-add-menu" };
|
|
6220
|
-
const _sfc_main$
|
|
6225
|
+
const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
6221
6226
|
...{
|
|
6222
6227
|
name: "MEditorDataSourceListPanel"
|
|
6223
6228
|
},
|
|
@@ -6277,8 +6282,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
6277
6282
|
return (_ctx, _cache) => {
|
|
6278
6283
|
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
|
|
6279
6284
|
default: withCtx(() => [
|
|
6280
|
-
createElementVNode("div", _hoisted_1$
|
|
6281
|
-
createVNode(_sfc_main$
|
|
6285
|
+
createElementVNode("div", _hoisted_1$d, [
|
|
6286
|
+
createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
|
|
6282
6287
|
editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
|
|
6283
6288
|
key: 0,
|
|
6284
6289
|
placement: "right"
|
|
@@ -6297,7 +6302,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
6297
6302
|
default: withCtx(() => [
|
|
6298
6303
|
createElementVNode("div", _hoisted_2$a, [
|
|
6299
6304
|
(openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
|
|
6300
|
-
return openBlock(), createBlock(_sfc_main$
|
|
6305
|
+
return openBlock(), createBlock(_sfc_main$x, {
|
|
6301
6306
|
data: {
|
|
6302
6307
|
type: "button",
|
|
6303
6308
|
text: item.text,
|
|
@@ -6313,11 +6318,16 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
6313
6318
|
_: 1
|
|
6314
6319
|
})) : createCommentVNode("", true)
|
|
6315
6320
|
]),
|
|
6316
|
-
createVNode(_sfc_main$
|
|
6321
|
+
createVNode(_sfc_main$o, {
|
|
6317
6322
|
onEdit: editHandler,
|
|
6318
6323
|
onRemove: removeHandler
|
|
6324
|
+
}, {
|
|
6325
|
+
"data-source-panel-tool": withCtx(({ data }) => [
|
|
6326
|
+
renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
|
|
6327
|
+
]),
|
|
6328
|
+
_: 3
|
|
6319
6329
|
}),
|
|
6320
|
-
createVNode(_sfc_main$
|
|
6330
|
+
createVNode(_sfc_main$p, {
|
|
6321
6331
|
ref_key: "editDialog",
|
|
6322
6332
|
ref: editDialog,
|
|
6323
6333
|
disabled: !editable.value,
|
|
@@ -6326,13 +6336,187 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
6326
6336
|
onSubmit: submitDataSourceHandler
|
|
6327
6337
|
}, null, 8, ["disabled", "values", "title"])
|
|
6328
6338
|
]),
|
|
6329
|
-
_:
|
|
6339
|
+
_: 3
|
|
6340
|
+
});
|
|
6341
|
+
};
|
|
6342
|
+
}
|
|
6343
|
+
});
|
|
6344
|
+
|
|
6345
|
+
const updateStatus = (nodeStatusMap, id, status) => {
|
|
6346
|
+
const nodeStatus = nodeStatusMap.get(id);
|
|
6347
|
+
if (!nodeStatus)
|
|
6348
|
+
return;
|
|
6349
|
+
getKeys(status).forEach((key) => {
|
|
6350
|
+
if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
|
|
6351
|
+
nodeStatus[key] = Boolean(status[key]);
|
|
6352
|
+
}
|
|
6353
|
+
});
|
|
6354
|
+
};
|
|
6355
|
+
|
|
6356
|
+
const _hoisted_1$c = ["draggable", "data-node-id", "data-is-container"];
|
|
6357
|
+
const _hoisted_2$9 = { class: "tree-node-label" };
|
|
6358
|
+
const _hoisted_3$5 = { class: "tree-node-tool" };
|
|
6359
|
+
const _hoisted_4$5 = {
|
|
6360
|
+
key: 0,
|
|
6361
|
+
class: "m-editor-tree-node-children"
|
|
6362
|
+
};
|
|
6363
|
+
const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
6364
|
+
...{
|
|
6365
|
+
name: "MEditorTreeNode"
|
|
6366
|
+
},
|
|
6367
|
+
__name: "TreeNode",
|
|
6368
|
+
props: {
|
|
6369
|
+
data: {},
|
|
6370
|
+
nodeStatusMap: {},
|
|
6371
|
+
indent: { default: 0 }
|
|
6372
|
+
},
|
|
6373
|
+
emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
|
|
6374
|
+
setup(__props, { emit }) {
|
|
6375
|
+
const props = __props;
|
|
6376
|
+
const treeEmit = inject("treeEmit");
|
|
6377
|
+
const nodeStatus = computed(
|
|
6378
|
+
() => props.nodeStatusMap?.get(props.data.id) || {
|
|
6379
|
+
selected: false,
|
|
6380
|
+
expand: false,
|
|
6381
|
+
visible: false,
|
|
6382
|
+
draggable: false
|
|
6383
|
+
}
|
|
6384
|
+
);
|
|
6385
|
+
const expanded = computed(() => nodeStatus.value.expand);
|
|
6386
|
+
const selected = computed(() => nodeStatus.value.selected);
|
|
6387
|
+
const visible = computed(() => nodeStatus.value.visible);
|
|
6388
|
+
const draggable = computed(() => nodeStatus.value.draggable);
|
|
6389
|
+
const hasChilren = computed(() => props.data.items && props.data.items.length > 0);
|
|
6390
|
+
const handleDragStart = (event) => {
|
|
6391
|
+
treeEmit?.("node-dragstart", event, props.data);
|
|
6392
|
+
};
|
|
6393
|
+
const handleDragLeave = (event) => {
|
|
6394
|
+
treeEmit?.("node-dragleave", event, props.data);
|
|
6395
|
+
};
|
|
6396
|
+
const handleDragEnd = (event) => {
|
|
6397
|
+
treeEmit?.("node-dragend", event, props.data);
|
|
6398
|
+
};
|
|
6399
|
+
const nodeContentmenuHandler = (event) => {
|
|
6400
|
+
treeEmit?.("node-contextmenu", event, props.data);
|
|
6401
|
+
};
|
|
6402
|
+
const mouseenterHandler = (event) => {
|
|
6403
|
+
treeEmit?.("node-mouseenter", event, props.data);
|
|
6404
|
+
};
|
|
6405
|
+
const expandHandler = () => {
|
|
6406
|
+
updateStatus(props.nodeStatusMap, props.data.id, {
|
|
6407
|
+
expand: !expanded.value
|
|
6330
6408
|
});
|
|
6331
6409
|
};
|
|
6410
|
+
const nodeClickHandler = (event) => {
|
|
6411
|
+
treeEmit?.("node-click", event, props.data);
|
|
6412
|
+
};
|
|
6413
|
+
return (_ctx, _cache) => {
|
|
6414
|
+
const _component_TreeNode = resolveComponent("TreeNode", true);
|
|
6415
|
+
return withDirectives((openBlock(), createElementBlock("div", {
|
|
6416
|
+
class: "m-editor-tree-node",
|
|
6417
|
+
draggable: draggable.value,
|
|
6418
|
+
"data-node-id": _ctx.data.id,
|
|
6419
|
+
"data-is-container": Array.isArray(_ctx.data.items),
|
|
6420
|
+
onDragstart: handleDragStart,
|
|
6421
|
+
onDragleave: handleDragLeave,
|
|
6422
|
+
onDragend: handleDragEnd
|
|
6423
|
+
}, [
|
|
6424
|
+
createElementVNode("div", {
|
|
6425
|
+
class: normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
|
|
6426
|
+
style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
|
|
6427
|
+
onContextmenu: nodeContentmenuHandler,
|
|
6428
|
+
onMouseenter: mouseenterHandler
|
|
6429
|
+
}, [
|
|
6430
|
+
createVNode(_sfc_main$N, {
|
|
6431
|
+
class: "expand-icon",
|
|
6432
|
+
style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
|
|
6433
|
+
icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
|
|
6434
|
+
onClick: expandHandler
|
|
6435
|
+
}, null, 8, ["style", "icon"]),
|
|
6436
|
+
createElementVNode("div", {
|
|
6437
|
+
class: "tree-node-content",
|
|
6438
|
+
onClick: nodeClickHandler
|
|
6439
|
+
}, [
|
|
6440
|
+
renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
|
|
6441
|
+
createElementVNode("div", _hoisted_2$9, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
|
|
6442
|
+
createElementVNode("div", _hoisted_3$5, [
|
|
6443
|
+
renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
|
|
6444
|
+
])
|
|
6445
|
+
])
|
|
6446
|
+
])
|
|
6447
|
+
], 38),
|
|
6448
|
+
hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
|
|
6449
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
|
|
6450
|
+
return openBlock(), createBlock(_component_TreeNode, {
|
|
6451
|
+
key: item.id,
|
|
6452
|
+
data: item,
|
|
6453
|
+
"node-status-map": _ctx.nodeStatusMap,
|
|
6454
|
+
indent: _ctx.indent + 11
|
|
6455
|
+
}, {
|
|
6456
|
+
"tree-node-content": withCtx(({ data: nodeData }) => [
|
|
6457
|
+
renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
|
|
6458
|
+
]),
|
|
6459
|
+
"tree-node-tool": withCtx(({ data: nodeData }) => [
|
|
6460
|
+
renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
|
|
6461
|
+
]),
|
|
6462
|
+
_: 2
|
|
6463
|
+
}, 1032, ["data", "node-status-map", "indent"]);
|
|
6464
|
+
}), 128))
|
|
6465
|
+
])) : createCommentVNode("", true)
|
|
6466
|
+
], 40, _hoisted_1$c)), [
|
|
6467
|
+
[vShow, visible.value]
|
|
6468
|
+
]);
|
|
6469
|
+
};
|
|
6332
6470
|
}
|
|
6333
6471
|
});
|
|
6334
6472
|
|
|
6473
|
+
const _hoisted_1$b = { key: 1 };
|
|
6335
6474
|
const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
6475
|
+
...{
|
|
6476
|
+
name: "MEditorTree"
|
|
6477
|
+
},
|
|
6478
|
+
__name: "Tree",
|
|
6479
|
+
props: {
|
|
6480
|
+
data: {},
|
|
6481
|
+
nodeStatusMap: {},
|
|
6482
|
+
indent: { default: 0 },
|
|
6483
|
+
emptyText: { default: "暂无数据" }
|
|
6484
|
+
},
|
|
6485
|
+
emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
|
|
6486
|
+
setup(__props, { emit }) {
|
|
6487
|
+
provide("treeEmit", emit);
|
|
6488
|
+
const handleDragOver = (event) => {
|
|
6489
|
+
emit("node-dragover", event);
|
|
6490
|
+
};
|
|
6491
|
+
return (_ctx, _cache) => {
|
|
6492
|
+
return openBlock(), createElementBlock("div", {
|
|
6493
|
+
class: "m-editor-tree",
|
|
6494
|
+
onDragover: handleDragOver
|
|
6495
|
+
}, [
|
|
6496
|
+
_ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
|
|
6497
|
+
return openBlock(), createBlock(_sfc_main$m, {
|
|
6498
|
+
key: item.id,
|
|
6499
|
+
data: item,
|
|
6500
|
+
indent: _ctx.indent,
|
|
6501
|
+
"node-status-map": _ctx.nodeStatusMap
|
|
6502
|
+
}, {
|
|
6503
|
+
"tree-node-content": withCtx(({ data: nodeData }) => [
|
|
6504
|
+
renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
|
|
6505
|
+
]),
|
|
6506
|
+
"tree-node-tool": withCtx(({ data: nodeData }) => [
|
|
6507
|
+
renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
|
|
6508
|
+
]),
|
|
6509
|
+
_: 2
|
|
6510
|
+
}, 1032, ["data", "indent", "node-status-map"]);
|
|
6511
|
+
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$b, [
|
|
6512
|
+
createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
|
|
6513
|
+
]))
|
|
6514
|
+
], 32);
|
|
6515
|
+
};
|
|
6516
|
+
}
|
|
6517
|
+
});
|
|
6518
|
+
|
|
6519
|
+
const _sfc_main$k = /* @__PURE__ */ defineComponent({
|
|
6336
6520
|
...{
|
|
6337
6521
|
name: "MEditorContentMenu"
|
|
6338
6522
|
},
|
|
@@ -6398,11 +6582,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
6398
6582
|
const show = (e) => {
|
|
6399
6583
|
setTimeout(() => {
|
|
6400
6584
|
visible.value = true;
|
|
6401
|
-
if (!e) {
|
|
6402
|
-
return;
|
|
6403
|
-
}
|
|
6404
6585
|
nextTick(() => {
|
|
6405
|
-
setPosition(e);
|
|
6586
|
+
e && setPosition(e);
|
|
6406
6587
|
emit("show");
|
|
6407
6588
|
});
|
|
6408
6589
|
}, 300);
|
|
@@ -6465,7 +6646,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
6465
6646
|
renderSlot(_ctx.$slots, "title"),
|
|
6466
6647
|
createElementVNode("div", null, [
|
|
6467
6648
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
|
|
6468
|
-
return openBlock(), createBlock(_sfc_main$
|
|
6649
|
+
return openBlock(), createBlock(_sfc_main$x, {
|
|
6469
6650
|
"event-type": "mouseup",
|
|
6470
6651
|
ref_for: true,
|
|
6471
6652
|
ref_key: "buttons",
|
|
@@ -6500,7 +6681,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
6500
6681
|
}
|
|
6501
6682
|
});
|
|
6502
6683
|
|
|
6503
|
-
const _hoisted_1$
|
|
6684
|
+
const _hoisted_1$a = {
|
|
6504
6685
|
width: "1em",
|
|
6505
6686
|
height: "1em",
|
|
6506
6687
|
viewBox: "0 0 16 16",
|
|
@@ -6508,26 +6689,26 @@ const _hoisted_1$b = {
|
|
|
6508
6689
|
fill: "currentColor",
|
|
6509
6690
|
xmlns: "http://www.w3.org/2000/svg"
|
|
6510
6691
|
};
|
|
6511
|
-
const _hoisted_2$
|
|
6692
|
+
const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("path", {
|
|
6512
6693
|
"fill-rule": "evenodd",
|
|
6513
6694
|
d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
|
|
6514
6695
|
}, null, -1);
|
|
6515
|
-
const _hoisted_3$
|
|
6696
|
+
const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("path", {
|
|
6516
6697
|
"fill-rule": "evenodd",
|
|
6517
6698
|
d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
|
|
6518
6699
|
}, null, -1);
|
|
6519
|
-
const _hoisted_4$
|
|
6520
|
-
_hoisted_2$
|
|
6521
|
-
_hoisted_3$
|
|
6700
|
+
const _hoisted_4$4 = [
|
|
6701
|
+
_hoisted_2$8,
|
|
6702
|
+
_hoisted_3$4
|
|
6522
6703
|
];
|
|
6523
|
-
const _sfc_main$
|
|
6704
|
+
const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
6524
6705
|
...{
|
|
6525
6706
|
name: "MEditorFolderMinusIcon"
|
|
6526
6707
|
},
|
|
6527
6708
|
__name: "FolderMinusIcon",
|
|
6528
6709
|
setup(__props) {
|
|
6529
6710
|
return (_ctx, _cache) => {
|
|
6530
|
-
return openBlock(), createElementBlock("svg", _hoisted_1$
|
|
6711
|
+
return openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_4$4);
|
|
6531
6712
|
};
|
|
6532
6713
|
}
|
|
6533
6714
|
});
|
|
@@ -6607,7 +6788,7 @@ const useMoveToMenu = (services) => {
|
|
|
6607
6788
|
};
|
|
6608
6789
|
};
|
|
6609
6790
|
|
|
6610
|
-
const _sfc_main$
|
|
6791
|
+
const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
6611
6792
|
...{
|
|
6612
6793
|
name: "MEditorLayerMenu"
|
|
6613
6794
|
},
|
|
@@ -6670,7 +6851,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
|
6670
6851
|
{
|
|
6671
6852
|
type: "button",
|
|
6672
6853
|
text: "全部折叠",
|
|
6673
|
-
icon: _sfc_main$
|
|
6854
|
+
icon: _sfc_main$j,
|
|
6674
6855
|
display: () => isPage(node.value),
|
|
6675
6856
|
handler: () => {
|
|
6676
6857
|
emit("collapse-all");
|
|
@@ -6696,7 +6877,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
|
6696
6877
|
show
|
|
6697
6878
|
});
|
|
6698
6879
|
return (_ctx, _cache) => {
|
|
6699
|
-
return openBlock(), createBlock(_sfc_main$
|
|
6880
|
+
return openBlock(), createBlock(_sfc_main$k, {
|
|
6700
6881
|
"menu-data": menuData.value,
|
|
6701
6882
|
ref_key: "menu",
|
|
6702
6883
|
ref: menu,
|
|
@@ -6706,7 +6887,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
|
6706
6887
|
}
|
|
6707
6888
|
});
|
|
6708
6889
|
|
|
6709
|
-
const _sfc_main$
|
|
6890
|
+
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
6710
6891
|
__name: "LayerNodeTool",
|
|
6711
6892
|
props: {
|
|
6712
6893
|
data: {}
|
|
@@ -6725,12 +6906,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
|
6725
6906
|
};
|
|
6726
6907
|
return (_ctx, _cache) => {
|
|
6727
6908
|
return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
6728
|
-
_ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$
|
|
6909
|
+
_ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$N, {
|
|
6729
6910
|
key: 0,
|
|
6730
6911
|
icon: unref(Hide),
|
|
6731
6912
|
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
|
|
6732
6913
|
title: "点击显示"
|
|
6733
|
-
}, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$
|
|
6914
|
+
}, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$N, {
|
|
6734
6915
|
key: 1,
|
|
6735
6916
|
icon: unref(View),
|
|
6736
6917
|
onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
|
|
@@ -6742,6 +6923,75 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
|
6742
6923
|
}
|
|
6743
6924
|
});
|
|
6744
6925
|
|
|
6926
|
+
const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
|
|
6927
|
+
const select = async (data) => {
|
|
6928
|
+
if (!data.id) {
|
|
6929
|
+
throw new Error("没有id");
|
|
6930
|
+
}
|
|
6931
|
+
if (isCtrlKeyDown.value) {
|
|
6932
|
+
multiSelect(data);
|
|
6933
|
+
} else {
|
|
6934
|
+
await services?.editorService.select(data);
|
|
6935
|
+
services?.editorService.get("stage")?.select(data.id);
|
|
6936
|
+
}
|
|
6937
|
+
};
|
|
6938
|
+
const multiSelect = async (data) => {
|
|
6939
|
+
const nodes = services?.editorService.get("nodes") || [];
|
|
6940
|
+
const newNodes = [];
|
|
6941
|
+
let isCancel = false;
|
|
6942
|
+
nodes.forEach((node) => {
|
|
6943
|
+
if (node.id === data.id) {
|
|
6944
|
+
isCancel = true;
|
|
6945
|
+
return;
|
|
6946
|
+
}
|
|
6947
|
+
newNodes.push(node.id);
|
|
6948
|
+
});
|
|
6949
|
+
if (!isCancel || newNodes.length === 0) {
|
|
6950
|
+
newNodes.push(data.id);
|
|
6951
|
+
}
|
|
6952
|
+
await services?.editorService.multiSelect(newNodes);
|
|
6953
|
+
services?.editorService.get("stage")?.multiSelect(newNodes);
|
|
6954
|
+
};
|
|
6955
|
+
const throttleTime = 300;
|
|
6956
|
+
const highlightHandler = throttle((event, data) => {
|
|
6957
|
+
highlight(data);
|
|
6958
|
+
}, throttleTime);
|
|
6959
|
+
const highlight = (data) => {
|
|
6960
|
+
services?.editorService?.highlight(data);
|
|
6961
|
+
services?.editorService?.get("stage")?.highlight(data.id);
|
|
6962
|
+
};
|
|
6963
|
+
const nodeClickHandler = (event, data) => {
|
|
6964
|
+
if (!nodeStatusMap?.value)
|
|
6965
|
+
return;
|
|
6966
|
+
if (services?.uiService.get("uiSelectMode")) {
|
|
6967
|
+
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
|
|
6968
|
+
return;
|
|
6969
|
+
}
|
|
6970
|
+
if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
|
|
6971
|
+
updateStatus(nodeStatusMap.value, data.id, {
|
|
6972
|
+
expand: true
|
|
6973
|
+
});
|
|
6974
|
+
}
|
|
6975
|
+
nextTick(() => {
|
|
6976
|
+
select(data);
|
|
6977
|
+
});
|
|
6978
|
+
};
|
|
6979
|
+
const menu = ref();
|
|
6980
|
+
return {
|
|
6981
|
+
menu,
|
|
6982
|
+
nodeClickHandler,
|
|
6983
|
+
nodeContentmenuHandler(event, data) {
|
|
6984
|
+
event.preventDefault();
|
|
6985
|
+
const nodes = services?.editorService.get("nodes") || [];
|
|
6986
|
+
if (nodes.length < 2 || !nodes.includes(data)) {
|
|
6987
|
+
nodeClickHandler(event, data);
|
|
6988
|
+
}
|
|
6989
|
+
menu.value?.show(event);
|
|
6990
|
+
},
|
|
6991
|
+
highlightHandler
|
|
6992
|
+
};
|
|
6993
|
+
};
|
|
6994
|
+
|
|
6745
6995
|
const dragState = {
|
|
6746
6996
|
dragOverNodeId: "",
|
|
6747
6997
|
dropType: "",
|
|
@@ -6786,7 +7036,7 @@ const useDrag = (services) => {
|
|
|
6786
7036
|
if (!event.target)
|
|
6787
7037
|
return;
|
|
6788
7038
|
const targetEl = getNodeEl(event.target);
|
|
6789
|
-
if (!targetEl)
|
|
7039
|
+
if (!targetEl?.draggable)
|
|
6790
7040
|
return;
|
|
6791
7041
|
const labelEl = targetEl.children[0];
|
|
6792
7042
|
if (!labelEl)
|
|
@@ -6860,16 +7110,6 @@ const useDrag = (services) => {
|
|
|
6860
7110
|
};
|
|
6861
7111
|
};
|
|
6862
7112
|
|
|
6863
|
-
const updateStatus = (nodeStatusMap, id, status) => {
|
|
6864
|
-
const nodeStatus = nodeStatusMap.get(id);
|
|
6865
|
-
if (!nodeStatus)
|
|
6866
|
-
return;
|
|
6867
|
-
getKeys(status).forEach((key) => {
|
|
6868
|
-
if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
|
|
6869
|
-
nodeStatus[key] = Boolean(status[key]);
|
|
6870
|
-
}
|
|
6871
|
-
});
|
|
6872
|
-
};
|
|
6873
7113
|
const useFilter = (nodeStatusMap, page) => {
|
|
6874
7114
|
const filterIsMatch = (value, data) => {
|
|
6875
7115
|
if (!value) {
|
|
@@ -6914,179 +7154,6 @@ const useFilter = (nodeStatusMap, page) => {
|
|
|
6914
7154
|
};
|
|
6915
7155
|
};
|
|
6916
7156
|
|
|
6917
|
-
const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
|
|
6918
|
-
const _hoisted_2$8 = { class: "layer-node-label" };
|
|
6919
|
-
const _hoisted_3$4 = { class: "layer-node-tool" };
|
|
6920
|
-
const _hoisted_4$4 = {
|
|
6921
|
-
key: 0,
|
|
6922
|
-
class: "magic-editor-layer-node-children"
|
|
6923
|
-
};
|
|
6924
|
-
const throttleTime = 300;
|
|
6925
|
-
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
6926
|
-
...{
|
|
6927
|
-
name: "MEditorLayerNode"
|
|
6928
|
-
},
|
|
6929
|
-
__name: "LayerNode",
|
|
6930
|
-
props: {
|
|
6931
|
-
data: {},
|
|
6932
|
-
parent: {},
|
|
6933
|
-
indent: { default: 0 },
|
|
6934
|
-
filterText: { default: "" },
|
|
6935
|
-
isCtrlKeyDown: { type: Boolean, default: false }
|
|
6936
|
-
},
|
|
6937
|
-
emits: ["node-contextmenu"],
|
|
6938
|
-
setup(__props, { emit }) {
|
|
6939
|
-
const props = __props;
|
|
6940
|
-
const services = inject("services");
|
|
6941
|
-
const nodeStatusMap = inject("nodeStatusMap");
|
|
6942
|
-
const editorService = services?.editorService;
|
|
6943
|
-
const uiService = services?.uiService;
|
|
6944
|
-
const nodeStatus = computed(
|
|
6945
|
-
() => nodeStatusMap?.value?.get(props.data.id) || {
|
|
6946
|
-
selected: false,
|
|
6947
|
-
expand: false,
|
|
6948
|
-
visible: false
|
|
6949
|
-
}
|
|
6950
|
-
);
|
|
6951
|
-
const expanded = computed(() => nodeStatus.value.expand);
|
|
6952
|
-
const selected = computed(() => nodeStatus.value.selected);
|
|
6953
|
-
const visible = computed(() => nodeStatus.value.visible);
|
|
6954
|
-
const hasChilren = computed(() => props.data.items?.length > 0);
|
|
6955
|
-
const nodeEl = ref();
|
|
6956
|
-
const { handleDragStart, handleDragEnd, handleDragLeave } = useDrag(services);
|
|
6957
|
-
const expandHandler = () => {
|
|
6958
|
-
if (!nodeStatusMap?.value)
|
|
6959
|
-
return;
|
|
6960
|
-
updateStatus(nodeStatusMap.value, props.data.id, {
|
|
6961
|
-
expand: !expanded.value
|
|
6962
|
-
});
|
|
6963
|
-
};
|
|
6964
|
-
const nodeClickHandler = () => {
|
|
6965
|
-
if (!nodeStatusMap?.value)
|
|
6966
|
-
return;
|
|
6967
|
-
if (uiService?.get("uiSelectMode")) {
|
|
6968
|
-
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
|
|
6969
|
-
return;
|
|
6970
|
-
}
|
|
6971
|
-
if (hasChilren.value && !props.isCtrlKeyDown) {
|
|
6972
|
-
updateStatus(nodeStatusMap.value, props.data.id, {
|
|
6973
|
-
expand: true
|
|
6974
|
-
});
|
|
6975
|
-
}
|
|
6976
|
-
nextTick(() => {
|
|
6977
|
-
select(props.data);
|
|
6978
|
-
});
|
|
6979
|
-
};
|
|
6980
|
-
const contextmenuHandler = (event) => {
|
|
6981
|
-
event.preventDefault();
|
|
6982
|
-
const nodes = editorService?.get("nodes") || [];
|
|
6983
|
-
if (nodes.length < 2 || !nodes.includes(props.data)) {
|
|
6984
|
-
nodeClickHandler();
|
|
6985
|
-
}
|
|
6986
|
-
emit("node-contextmenu", event, props.data);
|
|
6987
|
-
};
|
|
6988
|
-
const nodeContentmenuHandler = (event, node) => {
|
|
6989
|
-
emit("node-contextmenu", event, node);
|
|
6990
|
-
};
|
|
6991
|
-
const select = async (data) => {
|
|
6992
|
-
if (!data.id) {
|
|
6993
|
-
throw new Error("没有id");
|
|
6994
|
-
}
|
|
6995
|
-
if (props.isCtrlKeyDown) {
|
|
6996
|
-
multiSelect(data);
|
|
6997
|
-
} else {
|
|
6998
|
-
await editorService?.select(data);
|
|
6999
|
-
editorService?.get("stage")?.select(data.id);
|
|
7000
|
-
}
|
|
7001
|
-
};
|
|
7002
|
-
const multiSelect = async (data) => {
|
|
7003
|
-
const nodes = editorService?.get("nodes") || [];
|
|
7004
|
-
const newNodes = [];
|
|
7005
|
-
let isCancel = false;
|
|
7006
|
-
nodes.forEach((node) => {
|
|
7007
|
-
if (node.id === data.id) {
|
|
7008
|
-
isCancel = true;
|
|
7009
|
-
return;
|
|
7010
|
-
}
|
|
7011
|
-
newNodes.push(node.id);
|
|
7012
|
-
});
|
|
7013
|
-
if (!isCancel || newNodes.length === 0) {
|
|
7014
|
-
newNodes.push(data.id);
|
|
7015
|
-
}
|
|
7016
|
-
await editorService?.multiSelect(newNodes);
|
|
7017
|
-
editorService?.get("stage")?.multiSelect(newNodes);
|
|
7018
|
-
};
|
|
7019
|
-
const highlightHandler = throttle(() => {
|
|
7020
|
-
highlight();
|
|
7021
|
-
}, throttleTime);
|
|
7022
|
-
const highlight = () => {
|
|
7023
|
-
editorService?.highlight(props.data);
|
|
7024
|
-
editorService?.get("stage")?.highlight(props.data.id);
|
|
7025
|
-
};
|
|
7026
|
-
return (_ctx, _cache) => {
|
|
7027
|
-
const _component_LayerNode = resolveComponent("LayerNode", true);
|
|
7028
|
-
return withDirectives((openBlock(), createElementBlock("div", {
|
|
7029
|
-
class: "magic-editor-layer-node",
|
|
7030
|
-
ref_key: "nodeEl",
|
|
7031
|
-
ref: nodeEl,
|
|
7032
|
-
draggable: !unref(isPage)(_ctx.data),
|
|
7033
|
-
"data-node-id": _ctx.data.id,
|
|
7034
|
-
"data-is-container": Array.isArray(_ctx.data.items),
|
|
7035
|
-
onDragstart: _cache[1] || (_cache[1] = //@ts-ignore
|
|
7036
|
-
(...args) => unref(handleDragStart) && unref(handleDragStart)(...args)),
|
|
7037
|
-
onDragleave: _cache[2] || (_cache[2] = //@ts-ignore
|
|
7038
|
-
(...args) => unref(handleDragLeave) && unref(handleDragLeave)(...args)),
|
|
7039
|
-
onDragend: _cache[3] || (_cache[3] = ($event) => unref(handleDragEnd)($event, _ctx.data))
|
|
7040
|
-
}, [
|
|
7041
|
-
createElementVNode("div", {
|
|
7042
|
-
class: normalizeClass(["layer-node", { selected: selected.value, expanded: expanded.value }]),
|
|
7043
|
-
style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
|
|
7044
|
-
onContextmenu: contextmenuHandler,
|
|
7045
|
-
onMouseenter: _cache[0] || (_cache[0] = ($event) => unref(highlightHandler)())
|
|
7046
|
-
}, [
|
|
7047
|
-
createVNode(_sfc_main$M, {
|
|
7048
|
-
class: "expand-icon",
|
|
7049
|
-
style: normalizeStyle(hasChilren.value ? "" : "color: transparent; cursor: default"),
|
|
7050
|
-
icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
|
|
7051
|
-
onClick: expandHandler
|
|
7052
|
-
}, null, 8, ["style", "icon"]),
|
|
7053
|
-
createElementVNode("div", {
|
|
7054
|
-
class: "layer-node-content",
|
|
7055
|
-
onClick: nodeClickHandler
|
|
7056
|
-
}, [
|
|
7057
|
-
renderSlot(_ctx.$slots, "layer-node-content", { data: _ctx.data }, () => [
|
|
7058
|
-
createElementVNode("div", _hoisted_2$8, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
|
|
7059
|
-
createElementVNode("div", _hoisted_3$4, [
|
|
7060
|
-
createVNode(_sfc_main$i, { data: _ctx.data }, null, 8, ["data"])
|
|
7061
|
-
])
|
|
7062
|
-
])
|
|
7063
|
-
])
|
|
7064
|
-
], 38),
|
|
7065
|
-
hasChilren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
|
|
7066
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item) => {
|
|
7067
|
-
return openBlock(), createBlock(_component_LayerNode, {
|
|
7068
|
-
data: item,
|
|
7069
|
-
parent: _ctx.data,
|
|
7070
|
-
key: item.id,
|
|
7071
|
-
indent: _ctx.indent + 11,
|
|
7072
|
-
"filter-text": _ctx.filterText,
|
|
7073
|
-
"is-ctrl-key-down": _ctx.isCtrlKeyDown,
|
|
7074
|
-
onNodeContextmenu: nodeContentmenuHandler
|
|
7075
|
-
}, {
|
|
7076
|
-
"layer-node-content": withCtx(({ data: nodeData }) => [
|
|
7077
|
-
renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
|
|
7078
|
-
]),
|
|
7079
|
-
_: 2
|
|
7080
|
-
}, 1032, ["data", "parent", "indent", "filter-text", "is-ctrl-key-down"]);
|
|
7081
|
-
}), 128))
|
|
7082
|
-
])) : createCommentVNode("", true)
|
|
7083
|
-
], 40, _hoisted_1$a)), [
|
|
7084
|
-
[vShow, visible.value]
|
|
7085
|
-
]);
|
|
7086
|
-
};
|
|
7087
|
-
}
|
|
7088
|
-
});
|
|
7089
|
-
|
|
7090
7157
|
var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
|
|
7091
7158
|
KeyBindingContainerKey2["STAGE"] = "stage";
|
|
7092
7159
|
KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
|
|
@@ -7238,7 +7305,7 @@ const useKeybinding = (services, contianer) => {
|
|
|
7238
7305
|
watchEffect(() => {
|
|
7239
7306
|
if (contianer.value) {
|
|
7240
7307
|
globalThis.addEventListener("blur", windowBlurHandler);
|
|
7241
|
-
keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
|
|
7308
|
+
keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
|
|
7242
7309
|
} else {
|
|
7243
7310
|
globalThis.removeEventListener("blur", windowBlurHandler);
|
|
7244
7311
|
keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
|
|
@@ -7254,14 +7321,16 @@ const createPageNodeStatus = (services, pageId) => {
|
|
|
7254
7321
|
map.set(pageId, {
|
|
7255
7322
|
visible: true,
|
|
7256
7323
|
expand: true,
|
|
7257
|
-
selected: true
|
|
7324
|
+
selected: true,
|
|
7325
|
+
draggable: false
|
|
7258
7326
|
});
|
|
7259
7327
|
services?.editorService.getNodeById(pageId)?.items.forEach(
|
|
7260
7328
|
(node) => traverseNode(node, (node2) => {
|
|
7261
7329
|
map.set(node2.id, {
|
|
7262
7330
|
visible: true,
|
|
7263
7331
|
expand: false,
|
|
7264
|
-
selected: false
|
|
7332
|
+
selected: false,
|
|
7333
|
+
draggable: true
|
|
7265
7334
|
});
|
|
7266
7335
|
})
|
|
7267
7336
|
);
|
|
@@ -7311,7 +7380,8 @@ const useNodeStatus = (services, page) => {
|
|
|
7311
7380
|
nodeStatusMap.value?.set(node2.id, {
|
|
7312
7381
|
visible: true,
|
|
7313
7382
|
expand: Array.isArray(node2.items),
|
|
7314
|
-
selected: true
|
|
7383
|
+
selected: true,
|
|
7384
|
+
draggable: true
|
|
7315
7385
|
});
|
|
7316
7386
|
});
|
|
7317
7387
|
});
|
|
@@ -7340,13 +7410,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
|
7340
7410
|
setup(__props) {
|
|
7341
7411
|
const services = inject("services");
|
|
7342
7412
|
const editorService = services?.editorService;
|
|
7343
|
-
const
|
|
7413
|
+
const tree = ref();
|
|
7344
7414
|
const page = computed(() => editorService?.get("page"));
|
|
7345
|
-
const root = computed(() => editorService?.get("root"));
|
|
7346
7415
|
const { nodeStatusMap } = useNodeStatus(services, page);
|
|
7347
|
-
const { isCtrlKeyDown } = useKeybinding(services,
|
|
7348
|
-
|
|
7349
|
-
const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
|
|
7416
|
+
const { isCtrlKeyDown } = useKeybinding(services, tree);
|
|
7417
|
+
const { filterTextChangeHandler } = useFilter(nodeStatusMap, page);
|
|
7350
7418
|
const collapseAllHandler = () => {
|
|
7351
7419
|
if (!page.value || !nodeStatusMap.value)
|
|
7352
7420
|
return;
|
|
@@ -7358,40 +7426,45 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
|
7358
7426
|
status.expand = false;
|
|
7359
7427
|
}
|
|
7360
7428
|
};
|
|
7361
|
-
const
|
|
7362
|
-
const
|
|
7363
|
-
|
|
7364
|
-
|
|
7365
|
-
|
|
7366
|
-
|
|
7429
|
+
const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
|
|
7430
|
+
const {
|
|
7431
|
+
menu,
|
|
7432
|
+
nodeClickHandler,
|
|
7433
|
+
nodeContentmenuHandler,
|
|
7434
|
+
highlightHandler: mouseenterHandler
|
|
7435
|
+
} = useClick(services, isCtrlKeyDown, nodeStatusMap);
|
|
7367
7436
|
return (_ctx, _cache) => {
|
|
7368
|
-
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "
|
|
7437
|
+
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
|
|
7369
7438
|
default: withCtx(() => [
|
|
7370
7439
|
renderSlot(_ctx.$slots, "layer-panel-header"),
|
|
7371
|
-
createVNode(_sfc_main$
|
|
7372
|
-
|
|
7373
|
-
|
|
7374
|
-
ref_key: "layerTreeContainer",
|
|
7375
|
-
ref: layerTreeContainer,
|
|
7440
|
+
createVNode(_sfc_main$u, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
|
|
7441
|
+
page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
|
|
7442
|
+
key: 0,
|
|
7376
7443
|
tabindex: "-1",
|
|
7377
|
-
|
|
7378
|
-
|
|
7379
|
-
|
|
7380
|
-
|
|
7381
|
-
|
|
7382
|
-
|
|
7383
|
-
|
|
7384
|
-
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
|
-
|
|
7388
|
-
|
|
7389
|
-
|
|
7390
|
-
|
|
7391
|
-
|
|
7392
|
-
|
|
7444
|
+
ref_key: "tree",
|
|
7445
|
+
ref: tree,
|
|
7446
|
+
data: [page.value],
|
|
7447
|
+
"node-status-map": unref(nodeStatusMap),
|
|
7448
|
+
onNodeDragover: unref(handleDragOver),
|
|
7449
|
+
onNodeDragstart: unref(handleDragStart),
|
|
7450
|
+
onNodeDragleave: unref(handleDragLeave),
|
|
7451
|
+
onNodeDragend: unref(handleDragEnd),
|
|
7452
|
+
onNodeContextmenu: unref(nodeContentmenuHandler),
|
|
7453
|
+
onNodeMouseenter: unref(mouseenterHandler),
|
|
7454
|
+
onNodeClick: unref(nodeClickHandler)
|
|
7455
|
+
}, {
|
|
7456
|
+
"tree-node-tool": withCtx(({ data: nodeData }) => [
|
|
7457
|
+
renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [
|
|
7458
|
+
createVNode(_sfc_main$h, { data: nodeData }, null, 8, ["data"])
|
|
7459
|
+
])
|
|
7460
|
+
]),
|
|
7461
|
+
"tree-node-content": withCtx(({ data: nodeData }) => [
|
|
7462
|
+
renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })
|
|
7463
|
+
]),
|
|
7464
|
+
_: 3
|
|
7465
|
+
}, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
|
|
7393
7466
|
(openBlock(), createBlock(Teleport, { to: "body" }, [
|
|
7394
|
-
createVNode(_sfc_main$
|
|
7467
|
+
createVNode(_sfc_main$i, {
|
|
7395
7468
|
ref_key: "menu",
|
|
7396
7469
|
ref: menu,
|
|
7397
7470
|
"layer-content-menu": _ctx.layerContentMenu,
|
|
@@ -7487,7 +7560,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7487
7560
|
"model-value": collapseValue.value
|
|
7488
7561
|
}, {
|
|
7489
7562
|
default: withCtx(() => [
|
|
7490
|
-
createVNode(_sfc_main$
|
|
7563
|
+
createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
|
|
7491
7564
|
(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
|
|
7492
7565
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
7493
7566
|
group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
|
|
@@ -7495,7 +7568,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7495
7568
|
name: `${index}`
|
|
7496
7569
|
}, {
|
|
7497
7570
|
title: withCtx(() => [
|
|
7498
|
-
createVNode(_sfc_main$
|
|
7571
|
+
createVNode(_sfc_main$N, { icon: unref(Grid) }, null, 8, ["icon"]),
|
|
7499
7572
|
createTextVNode(toDisplayString(group.title), 1)
|
|
7500
7573
|
]),
|
|
7501
7574
|
default: withCtx(() => [
|
|
@@ -7516,7 +7589,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7516
7589
|
content: item.desc
|
|
7517
7590
|
}, {
|
|
7518
7591
|
default: withCtx(() => [
|
|
7519
|
-
createVNode(_sfc_main$
|
|
7592
|
+
createVNode(_sfc_main$N, {
|
|
7520
7593
|
icon: item.icon
|
|
7521
7594
|
}, null, 8, ["icon"])
|
|
7522
7595
|
]),
|
|
@@ -7591,7 +7664,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
7591
7664
|
type: "component",
|
|
7592
7665
|
icon: EditPen,
|
|
7593
7666
|
text: "代码编辑",
|
|
7594
|
-
component: _sfc_main$
|
|
7667
|
+
component: _sfc_main$q,
|
|
7595
7668
|
slots: {}
|
|
7596
7669
|
},
|
|
7597
7670
|
"data-source": {
|
|
@@ -7599,7 +7672,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
7599
7672
|
type: "component",
|
|
7600
7673
|
icon: Coin,
|
|
7601
7674
|
text: "数据源",
|
|
7602
|
-
component: _sfc_main$
|
|
7675
|
+
component: _sfc_main$n,
|
|
7603
7676
|
slots: {}
|
|
7604
7677
|
}
|
|
7605
7678
|
};
|
|
@@ -7624,7 +7697,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
7624
7697
|
key: config.$key ?? index,
|
|
7625
7698
|
onClick: ($event) => activeTabName.value = config.text || `${index}`
|
|
7626
7699
|
}, [
|
|
7627
|
-
config.icon ? (openBlock(), createBlock(_sfc_main$
|
|
7700
|
+
config.icon ? (openBlock(), createBlock(_sfc_main$N, {
|
|
7628
7701
|
key: 0,
|
|
7629
7702
|
icon: config.icon
|
|
7630
7703
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
@@ -7695,6 +7768,29 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
7695
7768
|
}, null, 8, ["data"])) : createCommentVNode("", true)
|
|
7696
7769
|
]),
|
|
7697
7770
|
key: "5"
|
|
7771
|
+
} : void 0,
|
|
7772
|
+
config.$key === "layer" || config.slots?.layerNodeTool ? {
|
|
7773
|
+
name: "layer-node-tool",
|
|
7774
|
+
fn: withCtx(({ data: nodeData }) => [
|
|
7775
|
+
config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
|
|
7776
|
+
key: 0,
|
|
7777
|
+
data: nodeData
|
|
7778
|
+
}) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
|
|
7779
|
+
key: 1,
|
|
7780
|
+
data: nodeData
|
|
7781
|
+
}, null, 8, ["data"])) : createCommentVNode("", true)
|
|
7782
|
+
]),
|
|
7783
|
+
key: "6"
|
|
7784
|
+
} : void 0,
|
|
7785
|
+
config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
|
|
7786
|
+
name: "data-source-panel-tool",
|
|
7787
|
+
fn: withCtx(({ data }) => [
|
|
7788
|
+
config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
|
|
7789
|
+
key: 0,
|
|
7790
|
+
data
|
|
7791
|
+
}) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
|
|
7792
|
+
]),
|
|
7793
|
+
key: "7"
|
|
7698
7794
|
} : void 0
|
|
7699
7795
|
]), 1040)) : createCommentVNode("", true)
|
|
7700
7796
|
])), [
|
|
@@ -8322,7 +8418,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
8322
8418
|
content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
|
|
8323
8419
|
}, {
|
|
8324
8420
|
default: withCtx(() => [
|
|
8325
|
-
createVNode(_sfc_main$
|
|
8421
|
+
createVNode(_sfc_main$N, {
|
|
8326
8422
|
style: { "margin-left": "10px", "cursor": "pointer" },
|
|
8327
8423
|
icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
|
|
8328
8424
|
onClick: pinHandler
|
|
@@ -8338,7 +8434,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
8338
8434
|
onClick: closeHandler
|
|
8339
8435
|
}, {
|
|
8340
8436
|
default: withCtx(() => [
|
|
8341
|
-
createVNode(_sfc_main$
|
|
8437
|
+
createVNode(_sfc_main$N, { icon: unref(Close) }, null, 8, ["icon"])
|
|
8342
8438
|
]),
|
|
8343
8439
|
_: 1
|
|
8344
8440
|
})
|
|
@@ -8348,6 +8444,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
8348
8444
|
}
|
|
8349
8445
|
});
|
|
8350
8446
|
|
|
8447
|
+
const PINNED_STATUE_CACHE_KEY = "tmagic-pinned-node-list-pinned-status";
|
|
8351
8448
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
8352
8449
|
__name: "NodeListMenu",
|
|
8353
8450
|
props: {
|
|
@@ -8357,7 +8454,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
8357
8454
|
const props = __props;
|
|
8358
8455
|
const menu = ref();
|
|
8359
8456
|
const nodeList = ref([]);
|
|
8360
|
-
const pinned = ref(
|
|
8457
|
+
const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
|
|
8458
|
+
const firstShow = ref(true);
|
|
8361
8459
|
const services = inject("services");
|
|
8362
8460
|
const editorService = services?.editorService;
|
|
8363
8461
|
const componentListService = services?.componentListService;
|
|
@@ -8406,7 +8504,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
8406
8504
|
}
|
|
8407
8505
|
nodeList.value = nodes;
|
|
8408
8506
|
if (nodeList.value.length > 1) {
|
|
8409
|
-
menu.value?.show(pinned.value ? void 0 : event);
|
|
8507
|
+
menu.value?.show(pinned.value && !firstShow.value ? void 0 : event);
|
|
8508
|
+
firstShow.value = false;
|
|
8410
8509
|
}
|
|
8411
8510
|
}, 1500);
|
|
8412
8511
|
});
|
|
@@ -8464,8 +8563,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
8464
8563
|
const closeHandler = () => {
|
|
8465
8564
|
menu.value?.hide();
|
|
8466
8565
|
};
|
|
8566
|
+
watch(pinned, () => {
|
|
8567
|
+
globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
|
|
8568
|
+
});
|
|
8467
8569
|
return (_ctx, _cache) => {
|
|
8468
|
-
return openBlock(), createBlock(_sfc_main$
|
|
8570
|
+
return openBlock(), createBlock(_sfc_main$k, {
|
|
8469
8571
|
ref_key: "menu",
|
|
8470
8572
|
ref: menu,
|
|
8471
8573
|
class: "magic-editor-node-list-menu",
|
|
@@ -8651,7 +8753,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
8651
8753
|
};
|
|
8652
8754
|
__expose({ show });
|
|
8653
8755
|
return (_ctx, _cache) => {
|
|
8654
|
-
return openBlock(), createBlock(_sfc_main$
|
|
8756
|
+
return openBlock(), createBlock(_sfc_main$k, {
|
|
8655
8757
|
"menu-data": menuData.value,
|
|
8656
8758
|
ref_key: "menu",
|
|
8657
8759
|
ref: menu
|
|
@@ -8984,14 +9086,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
8984
9086
|
class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
|
|
8985
9087
|
onClick: addPage
|
|
8986
9088
|
}, [
|
|
8987
|
-
createVNode(_sfc_main$
|
|
9089
|
+
createVNode(_sfc_main$N, { icon: unref(Plus) }, null, 8, ["icon"])
|
|
8988
9090
|
])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
|
|
8989
9091
|
canScroll.value ? (openBlock(), createElementBlock("div", {
|
|
8990
9092
|
key: 2,
|
|
8991
9093
|
class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
|
|
8992
9094
|
onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
|
|
8993
9095
|
}, [
|
|
8994
|
-
createVNode(_sfc_main$
|
|
9096
|
+
createVNode(_sfc_main$N, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
|
|
8995
9097
|
])) : createCommentVNode("", true),
|
|
8996
9098
|
pageLength.value ? (openBlock(), createElementBlock("div", {
|
|
8997
9099
|
key: 3,
|
|
@@ -9007,7 +9109,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
9007
9109
|
class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
|
|
9008
9110
|
onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
|
|
9009
9111
|
}, [
|
|
9010
|
-
createVNode(_sfc_main$
|
|
9112
|
+
createVNode(_sfc_main$N, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
|
|
9011
9113
|
])) : createCommentVNode("", true)
|
|
9012
9114
|
], 512);
|
|
9013
9115
|
};
|
|
@@ -9079,7 +9181,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
9079
9181
|
default: withCtx(() => [
|
|
9080
9182
|
createElementVNode("div", null, [
|
|
9081
9183
|
renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
|
|
9082
|
-
createVNode(_sfc_main$
|
|
9184
|
+
createVNode(_sfc_main$x, {
|
|
9083
9185
|
data: {
|
|
9084
9186
|
type: "button",
|
|
9085
9187
|
text: "复制",
|
|
@@ -9087,7 +9189,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
9087
9189
|
handler: () => copy(item)
|
|
9088
9190
|
}
|
|
9089
9191
|
}, null, 8, ["data"]),
|
|
9090
|
-
createVNode(_sfc_main$
|
|
9192
|
+
createVNode(_sfc_main$x, {
|
|
9091
9193
|
data: {
|
|
9092
9194
|
type: "button",
|
|
9093
9195
|
text: "删除",
|
|
@@ -9577,7 +9679,7 @@ class Watcher extends EventEmitter {
|
|
|
9577
9679
|
const doCollect = (key, value) => {
|
|
9578
9680
|
const keyIsItems = key === "items";
|
|
9579
9681
|
const fullKey = prop ? `${prop}.${key}` : key;
|
|
9580
|
-
if (target.isTarget(
|
|
9682
|
+
if (target.isTarget(fullKey, value)) {
|
|
9581
9683
|
target.updateDep(node, fullKey);
|
|
9582
9684
|
this.emit("update-dep", node, fullKey);
|
|
9583
9685
|
} else if (!keyIsItems && Array.isArray(value)) {
|
|
@@ -9865,7 +9967,12 @@ const createDataSourceTarget = (id) => new Target({
|
|
|
9865
9967
|
const createDataSourceCondTarget = (id) => new Target({
|
|
9866
9968
|
type: DepTargetType.DATA_SOURCE_COND,
|
|
9867
9969
|
id,
|
|
9868
|
-
isTarget: (key, value) =>
|
|
9970
|
+
isTarget: (key, value) => {
|
|
9971
|
+
if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith("displayConds"))
|
|
9972
|
+
return false;
|
|
9973
|
+
const ds = dataSourceService.getDataSourceById(id);
|
|
9974
|
+
return Boolean(ds?.fields?.find((field) => field.name === value[1]));
|
|
9975
|
+
}
|
|
9869
9976
|
});
|
|
9870
9977
|
const createDataSourceMethodTarget = (id) => new Target({
|
|
9871
9978
|
type: DepTargetType.DATA_SOURCE_METHOD,
|
|
@@ -10264,13 +10371,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10264
10371
|
);
|
|
10265
10372
|
__expose(services);
|
|
10266
10373
|
return (_ctx, _cache) => {
|
|
10267
|
-
return openBlock(), createBlock(_sfc_main$
|
|
10374
|
+
return openBlock(), createBlock(_sfc_main$y, null, {
|
|
10268
10375
|
header: withCtx(() => [
|
|
10269
10376
|
renderSlot(_ctx.$slots, "header")
|
|
10270
10377
|
]),
|
|
10271
10378
|
nav: withCtx(() => [
|
|
10272
10379
|
renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
|
|
10273
|
-
createVNode(_sfc_main$
|
|
10380
|
+
createVNode(_sfc_main$w, { data: _ctx.menu }, null, 8, ["data"])
|
|
10274
10381
|
])
|
|
10275
10382
|
]),
|
|
10276
10383
|
"content-before": withCtx(() => [
|
|
@@ -10291,6 +10398,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10291
10398
|
"layer-node-content": withCtx(({ data }) => [
|
|
10292
10399
|
renderSlot(_ctx.$slots, "layer-node-content", { data })
|
|
10293
10400
|
]),
|
|
10401
|
+
"layer-node-tool": withCtx(({ data }) => [
|
|
10402
|
+
renderSlot(_ctx.$slots, "layer-node-tool", { data })
|
|
10403
|
+
]),
|
|
10294
10404
|
"component-list-panel-header": withCtx(() => [
|
|
10295
10405
|
renderSlot(_ctx.$slots, "component-list-panel-header")
|
|
10296
10406
|
]),
|
|
@@ -10306,6 +10416,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10306
10416
|
data
|
|
10307
10417
|
})
|
|
10308
10418
|
]),
|
|
10419
|
+
"data-source-panel-tool": withCtx(({ data }) => [
|
|
10420
|
+
renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
|
|
10421
|
+
]),
|
|
10309
10422
|
_: 3
|
|
10310
10423
|
}, 8, ["data", "layer-content-menu"])
|
|
10311
10424
|
])
|
|
@@ -10331,7 +10444,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10331
10444
|
]),
|
|
10332
10445
|
"props-panel": withCtx(() => [
|
|
10333
10446
|
renderSlot(_ctx.$slots, "props-panel", {}, () => [
|
|
10334
|
-
createVNode(_sfc_main$
|
|
10447
|
+
createVNode(_sfc_main$v, {
|
|
10335
10448
|
"extend-state": _ctx.extendFormState,
|
|
10336
10449
|
onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
|
|
10337
10450
|
}, {
|
|
@@ -10369,23 +10482,23 @@ const index = {
|
|
|
10369
10482
|
app.config.globalProperties.$TMAGIC_EDITOR = option;
|
|
10370
10483
|
setConfig(option);
|
|
10371
10484
|
app.component(_sfc_main.name, _sfc_main);
|
|
10372
|
-
app.component("m-fields-ui-select", _sfc_main$
|
|
10373
|
-
app.component("m-fields-code-link", _sfc_main$
|
|
10374
|
-
app.component("m-fields-vs-code", _sfc_main$
|
|
10375
|
-
app.component("magic-code-editor", _sfc_main$
|
|
10376
|
-
app.component("m-fields-code-select", _sfc_main$
|
|
10377
|
-
app.component("m-fields-code-select-col", _sfc_main$
|
|
10378
|
-
app.component("m-fields-event-select", _sfc_main$
|
|
10379
|
-
app.component("m-fields-data-source-fields", _sfc_main$
|
|
10380
|
-
app.component("m-fields-data-source-mocks", _sfc_main$
|
|
10381
|
-
app.component("m-fields-key-value", _sfc_main$
|
|
10382
|
-
app.component("m-fields-data-source-input", _sfc_main$
|
|
10383
|
-
app.component("m-fields-data-source-select", _sfc_main$
|
|
10384
|
-
app.component("m-fields-data-source-methods", _sfc_main$
|
|
10385
|
-
app.component("m-fields-data-source-method-select", _sfc_main$
|
|
10386
|
-
app.component("m-fields-data-source-field-select", _sfc_main$
|
|
10485
|
+
app.component("m-fields-ui-select", _sfc_main$C);
|
|
10486
|
+
app.component("m-fields-code-link", _sfc_main$R);
|
|
10487
|
+
app.component("m-fields-vs-code", _sfc_main$S);
|
|
10488
|
+
app.component("magic-code-editor", _sfc_main$T);
|
|
10489
|
+
app.component("m-fields-code-select", _sfc_main$Q);
|
|
10490
|
+
app.component("m-fields-code-select-col", _sfc_main$M);
|
|
10491
|
+
app.component("m-fields-event-select", _sfc_main$E);
|
|
10492
|
+
app.component("m-fields-data-source-fields", _sfc_main$L);
|
|
10493
|
+
app.component("m-fields-data-source-mocks", _sfc_main$G);
|
|
10494
|
+
app.component("m-fields-key-value", _sfc_main$D);
|
|
10495
|
+
app.component("m-fields-data-source-input", _sfc_main$J);
|
|
10496
|
+
app.component("m-fields-data-source-select", _sfc_main$F);
|
|
10497
|
+
app.component("m-fields-data-source-methods", _sfc_main$I);
|
|
10498
|
+
app.component("m-fields-data-source-method-select", _sfc_main$H);
|
|
10499
|
+
app.component("m-fields-data-source-field-select", _sfc_main$K);
|
|
10387
10500
|
}
|
|
10388
10501
|
};
|
|
10389
10502
|
|
|
10390
|
-
export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$
|
|
10503
|
+
export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DepTargetType, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$v as PropsPanel, _sfc_main$B as Resizer, _sfc_main$A as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
|
|
10391
10504
|
//# sourceMappingURL=tmagic-editor.js.map
|