@tmagic/editor 1.4.7 → 1.4.9
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 +1 -1
- package/dist/tmagic-editor.js +314 -452
- package/dist/tmagic-editor.umd.cjs +313 -450
- package/package.json +16 -12
- package/src/fields/DataSourceInput.vue +8 -0
- package/src/initService.ts +46 -41
- package/src/layouts/PropsPanel.vue +1 -0
- package/src/layouts/sidebar/layer/use-click.ts +8 -5
- package/src/layouts/sidebar/layer/use-drag.ts +7 -1
- package/src/services/editor.ts +61 -22
- package/src/services/props.ts +22 -7
- package/src/theme/props-panel.scss +1 -1
- package/src/type.ts +3 -0
- package/src/utils/editor.ts +20 -1
- package/types/layouts/sidebar/layer/use-click.d.ts +1 -1
- package/types/services/editor.d.ts +19 -2
- package/types/services/props.d.ts +5 -5
- package/types/type.d.ts +6 -0
- package/types/utils/editor.d.ts +1 -0
- package/tsconfig.build.json +0 -16
package/dist/tmagic-editor.js
CHANGED
|
@@ -8,7 +8,7 @@ import * as monaco from 'monaco-editor';
|
|
|
8
8
|
import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
|
|
9
9
|
import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
|
|
10
10
|
import { MagicTable } from '@tmagic/table';
|
|
11
|
-
import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName
|
|
11
|
+
import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName } from '@tmagic/utils';
|
|
12
12
|
import VanillaMoveable from 'moveable';
|
|
13
13
|
import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
|
|
14
14
|
export { DepTargetType } from '@tmagic/dep';
|
|
@@ -148,8 +148,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
|
|
|
148
148
|
};
|
|
149
149
|
const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
|
|
150
150
|
const init = async () => {
|
|
151
|
-
if (!codeEditor.value)
|
|
152
|
-
return;
|
|
151
|
+
if (!codeEditor.value) return;
|
|
153
152
|
const options = {
|
|
154
153
|
value: values.value,
|
|
155
154
|
language: props.language,
|
|
@@ -362,8 +361,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
362
361
|
}
|
|
363
362
|
);
|
|
364
363
|
const changeHandler = (v) => {
|
|
365
|
-
if (!props.name || !props.model)
|
|
366
|
-
return;
|
|
364
|
+
if (!props.name || !props.model) return;
|
|
367
365
|
try {
|
|
368
366
|
const parseDSL = getConfig("parseDSL");
|
|
369
367
|
props.model[props.name] = parseDSL(`(${v[props.name]})`);
|
|
@@ -506,11 +504,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
|
|
|
506
504
|
});
|
|
507
505
|
|
|
508
506
|
const compose = (middleware, isAsync) => {
|
|
509
|
-
if (!Array.isArray(middleware))
|
|
510
|
-
throw new TypeError("Middleware 必须是一个数组!");
|
|
507
|
+
if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
|
|
511
508
|
for (const fn of middleware) {
|
|
512
|
-
if (typeof fn !== "function")
|
|
513
|
-
throw new TypeError("Middleware 必须由函数组成!");
|
|
509
|
+
if (typeof fn !== "function") throw new TypeError("Middleware 必须由函数组成!");
|
|
514
510
|
}
|
|
515
511
|
return (args, next) => {
|
|
516
512
|
let index = -1;
|
|
@@ -525,8 +521,7 @@ const compose = (middleware, isAsync) => {
|
|
|
525
521
|
}
|
|
526
522
|
index = i;
|
|
527
523
|
let fn = middleware[i];
|
|
528
|
-
if (i === middleware.length && next)
|
|
529
|
-
fn = next;
|
|
524
|
+
if (i === middleware.length && next) fn = next;
|
|
530
525
|
if (!fn) {
|
|
531
526
|
if (isAsync) {
|
|
532
527
|
return Promise.resolve();
|
|
@@ -556,8 +551,7 @@ const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName,
|
|
|
556
551
|
let beforeArgs = args;
|
|
557
552
|
for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
|
|
558
553
|
beforeArgs = beforeMethod(...beforeArgs) || [];
|
|
559
|
-
if (isError(beforeArgs))
|
|
560
|
-
throw beforeArgs;
|
|
554
|
+
if (isError(beforeArgs)) throw beforeArgs;
|
|
561
555
|
if (!Array.isArray(beforeArgs)) {
|
|
562
556
|
beforeArgs = [beforeArgs];
|
|
563
557
|
}
|
|
@@ -565,8 +559,7 @@ const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName,
|
|
|
565
559
|
let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
|
|
566
560
|
for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
|
|
567
561
|
returnValue = afterMethod(returnValue, ...beforeArgs);
|
|
568
|
-
if (isError(returnValue))
|
|
569
|
-
throw returnValue;
|
|
562
|
+
if (isError(returnValue)) throw returnValue;
|
|
570
563
|
}
|
|
571
564
|
return returnValue;
|
|
572
565
|
} catch (error) {
|
|
@@ -578,8 +571,7 @@ const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterM
|
|
|
578
571
|
let beforeArgs = args;
|
|
579
572
|
for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
|
|
580
573
|
beforeArgs = await beforeMethod(...beforeArgs) || [];
|
|
581
|
-
if (isError(beforeArgs))
|
|
582
|
-
throw beforeArgs;
|
|
574
|
+
if (isError(beforeArgs)) throw beforeArgs;
|
|
583
575
|
if (!Array.isArray(beforeArgs)) {
|
|
584
576
|
beforeArgs = [beforeArgs];
|
|
585
577
|
}
|
|
@@ -587,8 +579,7 @@ const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterM
|
|
|
587
579
|
let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
|
|
588
580
|
for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
|
|
589
581
|
returnValue = await afterMethod(returnValue, ...beforeArgs);
|
|
590
|
-
if (isError(returnValue))
|
|
591
|
-
throw returnValue;
|
|
582
|
+
if (isError(returnValue)) throw returnValue;
|
|
592
583
|
}
|
|
593
584
|
return returnValue;
|
|
594
585
|
} catch (error) {
|
|
@@ -639,14 +630,12 @@ class BaseService extends EventEmitter {
|
|
|
639
630
|
*/
|
|
640
631
|
use(options) {
|
|
641
632
|
Object.entries(options).forEach(([methodName2, method]) => {
|
|
642
|
-
if (typeof method === "function")
|
|
643
|
-
this.middleware[methodName2].push(method);
|
|
633
|
+
if (typeof method === "function") this.middleware[methodName2].push(method);
|
|
644
634
|
});
|
|
645
635
|
}
|
|
646
636
|
usePlugin(options) {
|
|
647
637
|
Object.entries(options).forEach(([methodName2, method]) => {
|
|
648
|
-
if (typeof method === "function")
|
|
649
|
-
this.pluginOptionsList[methodName2].push(method);
|
|
638
|
+
if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
|
|
650
639
|
});
|
|
651
640
|
}
|
|
652
641
|
removeAllPlugins() {
|
|
@@ -701,7 +690,11 @@ class Props extends BaseService {
|
|
|
701
690
|
return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
|
|
702
691
|
}
|
|
703
692
|
async setPropsConfig(type, config) {
|
|
704
|
-
|
|
693
|
+
let c = config;
|
|
694
|
+
if (typeof config === "function") {
|
|
695
|
+
c = config({ editorService });
|
|
696
|
+
}
|
|
697
|
+
this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
|
|
705
698
|
}
|
|
706
699
|
/**
|
|
707
700
|
* 获取指点类型的组件属性表单配置
|
|
@@ -725,7 +718,11 @@ class Props extends BaseService {
|
|
|
725
718
|
* @param value 组件初始值
|
|
726
719
|
*/
|
|
727
720
|
async setPropsValue(type, value) {
|
|
728
|
-
|
|
721
|
+
let v = value;
|
|
722
|
+
if (typeof value === "function") {
|
|
723
|
+
v = value({ editorService });
|
|
724
|
+
}
|
|
725
|
+
this.state.propsValueMap[toLine(type)] = v;
|
|
729
726
|
}
|
|
730
727
|
/**
|
|
731
728
|
* 获取指定类型的组件初始值
|
|
@@ -809,8 +806,7 @@ class Props extends BaseService {
|
|
|
809
806
|
*/
|
|
810
807
|
replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
|
|
811
808
|
const relateIdMap = this.getRelateIdMap();
|
|
812
|
-
if (Object.keys(relateIdMap).length === 0)
|
|
813
|
-
return;
|
|
809
|
+
if (Object.keys(relateIdMap).length === 0) return;
|
|
814
810
|
const target = new Target({
|
|
815
811
|
...collectorOptions
|
|
816
812
|
});
|
|
@@ -821,13 +817,11 @@ class Props extends BaseService {
|
|
|
821
817
|
const newId = relateIdMap[config.id];
|
|
822
818
|
const path = getNodePath(newId, targetConfigs);
|
|
823
819
|
const targetConfig = path[path.length - 1];
|
|
824
|
-
if (!targetConfig)
|
|
825
|
-
return;
|
|
820
|
+
if (!targetConfig) return;
|
|
826
821
|
target.deps[config.id]?.keys?.forEach((fullKey) => {
|
|
827
822
|
const relateOriginId = getValueByKeyPath(fullKey, config);
|
|
828
823
|
const relateTargetId = relateIdMap[relateOriginId];
|
|
829
|
-
if (!relateTargetId)
|
|
830
|
-
return;
|
|
824
|
+
if (!relateTargetId) return;
|
|
831
825
|
setValueByKeyPath(fullKey, relateTargetId, targetConfig);
|
|
832
826
|
});
|
|
833
827
|
if (config.items && Array.isArray(config.items)) {
|
|
@@ -937,8 +931,7 @@ class History extends BaseService {
|
|
|
937
931
|
this.state.canUndo = false;
|
|
938
932
|
}
|
|
939
933
|
changePage(page) {
|
|
940
|
-
if (!page)
|
|
941
|
-
return;
|
|
934
|
+
if (!page) return;
|
|
942
935
|
this.state.pageId = page.id;
|
|
943
936
|
if (!this.state.pageSteps[this.state.pageId]) {
|
|
944
937
|
const undoRedo = new UndoRedo();
|
|
@@ -960,24 +953,21 @@ class History extends BaseService {
|
|
|
960
953
|
}
|
|
961
954
|
push(state) {
|
|
962
955
|
const undoRedo = this.getUndoRedo();
|
|
963
|
-
if (!undoRedo)
|
|
964
|
-
return null;
|
|
956
|
+
if (!undoRedo) return null;
|
|
965
957
|
undoRedo.pushElement(state);
|
|
966
958
|
this.emit("change", state);
|
|
967
959
|
return state;
|
|
968
960
|
}
|
|
969
961
|
undo() {
|
|
970
962
|
const undoRedo = this.getUndoRedo();
|
|
971
|
-
if (!undoRedo)
|
|
972
|
-
return null;
|
|
963
|
+
if (!undoRedo) return null;
|
|
973
964
|
const state = undoRedo.undo();
|
|
974
965
|
this.emit("change", state);
|
|
975
966
|
return state;
|
|
976
967
|
}
|
|
977
968
|
redo() {
|
|
978
969
|
const undoRedo = this.getUndoRedo();
|
|
979
|
-
if (!undoRedo)
|
|
980
|
-
return null;
|
|
970
|
+
if (!undoRedo) return null;
|
|
981
971
|
const state = undoRedo.redo();
|
|
982
972
|
this.emit("change", state);
|
|
983
973
|
return state;
|
|
@@ -988,8 +978,7 @@ class History extends BaseService {
|
|
|
988
978
|
this.removeAllPlugins();
|
|
989
979
|
}
|
|
990
980
|
getUndoRedo() {
|
|
991
|
-
if (!this.state.pageId)
|
|
992
|
-
return null;
|
|
981
|
+
if (!this.state.pageId) return null;
|
|
993
982
|
return this.state.pageSteps[this.state.pageId];
|
|
994
983
|
}
|
|
995
984
|
setCanUndoRedo() {
|
|
@@ -1050,8 +1039,7 @@ class WebStorage extends BaseService {
|
|
|
1050
1039
|
const { protocol = options.protocol, item } = this.getValueAndProtocol(
|
|
1051
1040
|
storage.getItem(`${options.namespace || namespace}:${key}`)
|
|
1052
1041
|
);
|
|
1053
|
-
if (item === null)
|
|
1054
|
-
return null;
|
|
1042
|
+
if (item === null) return null;
|
|
1055
1043
|
switch (protocol) {
|
|
1056
1044
|
case "object" /* OBJECT */:
|
|
1057
1045
|
return getConfig("parseDSL")(`(${item})`);
|
|
@@ -1192,24 +1180,19 @@ const COPY_STORAGE_KEY = "$MagicEditorCopyData";
|
|
|
1192
1180
|
const COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
|
|
1193
1181
|
const COPY_DS_STORAGE_KEY = "$MagicEditorCopyDataSource";
|
|
1194
1182
|
const getPageList = (root) => {
|
|
1195
|
-
if (!root)
|
|
1196
|
-
|
|
1197
|
-
if (!Array.isArray(root.items))
|
|
1198
|
-
return [];
|
|
1183
|
+
if (!root) return [];
|
|
1184
|
+
if (!Array.isArray(root.items)) return [];
|
|
1199
1185
|
return root.items.filter((item) => isPage(item));
|
|
1200
1186
|
};
|
|
1201
1187
|
const getPageFragmentList = (root) => {
|
|
1202
|
-
if (!root)
|
|
1203
|
-
|
|
1204
|
-
if (!Array.isArray(root.items))
|
|
1205
|
-
return [];
|
|
1188
|
+
if (!root) return [];
|
|
1189
|
+
if (!Array.isArray(root.items)) return [];
|
|
1206
1190
|
return root.items.filter((item) => isPageFragment(item));
|
|
1207
1191
|
};
|
|
1208
1192
|
const getPageNameList = (pages) => pages.map((page) => page.name || "index");
|
|
1209
1193
|
const generatePageName = (pageNameList, type) => {
|
|
1210
1194
|
let pageLength = pageNameList.length;
|
|
1211
|
-
if (!pageLength)
|
|
1212
|
-
return `${type}_index`;
|
|
1195
|
+
if (!pageLength) return `${type}_index`;
|
|
1213
1196
|
let pageName = `${type}_${pageLength}`;
|
|
1214
1197
|
while (pageNameList.includes(pageName)) {
|
|
1215
1198
|
pageLength += 1;
|
|
@@ -1231,8 +1214,7 @@ const getRelativeStyle = (style = {}) => ({
|
|
|
1231
1214
|
});
|
|
1232
1215
|
const getMiddleTop = (node, parentNode, stage) => {
|
|
1233
1216
|
let height = node.style?.height || 0;
|
|
1234
|
-
if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
|
|
1235
|
-
return node.style?.top;
|
|
1217
|
+
if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style) return node.style?.top;
|
|
1236
1218
|
if (!isNumber(height)) {
|
|
1237
1219
|
height = 0;
|
|
1238
1220
|
}
|
|
@@ -1268,11 +1250,9 @@ const setChildrenLayout = (node, layout) => {
|
|
|
1268
1250
|
return node;
|
|
1269
1251
|
};
|
|
1270
1252
|
const setLayout = (node, layout) => {
|
|
1271
|
-
if (isPop(node))
|
|
1272
|
-
return;
|
|
1253
|
+
if (isPop(node)) return;
|
|
1273
1254
|
const style = node.style || {};
|
|
1274
|
-
if (style.position === "fixed")
|
|
1275
|
-
return;
|
|
1255
|
+
if (style.position === "fixed") return;
|
|
1276
1256
|
if (layout !== Layout.RELATIVE) {
|
|
1277
1257
|
style.position = "absolute";
|
|
1278
1258
|
} else {
|
|
@@ -1326,8 +1306,7 @@ const Fixed2Other = async (node, root, getLayout) => {
|
|
|
1326
1306
|
return getRelativeStyle(style);
|
|
1327
1307
|
};
|
|
1328
1308
|
const getGuideLineFromCache = (key) => {
|
|
1329
|
-
if (!key)
|
|
1330
|
-
return [];
|
|
1309
|
+
if (!key) return [];
|
|
1331
1310
|
const guideLineCacheData = globalThis.localStorage.getItem(key);
|
|
1332
1311
|
if (guideLineCacheData) {
|
|
1333
1312
|
try {
|
|
@@ -1339,8 +1318,7 @@ const getGuideLineFromCache = (key) => {
|
|
|
1339
1318
|
return [];
|
|
1340
1319
|
};
|
|
1341
1320
|
const fixNodeLeft = (config, parent, doc) => {
|
|
1342
|
-
if (!doc || !config.style || !isNumber(config.style.left))
|
|
1343
|
-
return config.style?.left;
|
|
1321
|
+
if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
|
|
1344
1322
|
const el = doc.getElementById(`${config.id}`);
|
|
1345
1323
|
const parentEl = doc.getElementById(`${parent.id}`);
|
|
1346
1324
|
const left = Number(config.style?.left) || 0;
|
|
@@ -1369,17 +1347,32 @@ const serializeConfig = (config) => serialize(config, {
|
|
|
1369
1347
|
}).replace(/"(\w+)":\s/g, "$1: ");
|
|
1370
1348
|
const traverseNode = (node, cb, parents = []) => {
|
|
1371
1349
|
cb(node, parents);
|
|
1372
|
-
if (node.items
|
|
1350
|
+
if (Array.isArray(node.items) && node.items.length) {
|
|
1373
1351
|
parents.push(node);
|
|
1374
1352
|
node.items.forEach((item) => {
|
|
1375
1353
|
traverseNode(item, cb, [...parents]);
|
|
1376
1354
|
});
|
|
1377
1355
|
}
|
|
1378
1356
|
};
|
|
1357
|
+
const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
|
|
1358
|
+
sourceIndices.sort((a, b) => a - b);
|
|
1359
|
+
for (let i = sourceIndices.length - 1; i >= 0; i--) {
|
|
1360
|
+
const sourceIndex = sourceIndices[i];
|
|
1361
|
+
if (sourceIndex === targetIndex) {
|
|
1362
|
+
continue;
|
|
1363
|
+
}
|
|
1364
|
+
const [item] = parent.items.splice(sourceIndex, 1);
|
|
1365
|
+
parent.items.splice(sourceIndex < targetIndex ? targetIndex - 1 : targetIndex, 0, item);
|
|
1366
|
+
for (let j = i - 1; j >= 0; j--) {
|
|
1367
|
+
if (sourceIndices[j] >= targetIndex) {
|
|
1368
|
+
sourceIndices[j] += 1;
|
|
1369
|
+
}
|
|
1370
|
+
}
|
|
1371
|
+
}
|
|
1372
|
+
};
|
|
1379
1373
|
|
|
1380
1374
|
const beforePaste = (position, config, doc) => {
|
|
1381
|
-
if (!config[0]?.style)
|
|
1382
|
-
return config;
|
|
1375
|
+
if (!config[0]?.style) return config;
|
|
1383
1376
|
const curNode = editorService.get("node");
|
|
1384
1377
|
const { left: referenceLeft, top: referenceTop } = config[0].style;
|
|
1385
1378
|
const pasteConfigs = config.map((configItem) => {
|
|
@@ -1549,15 +1542,13 @@ class Editor extends BaseService {
|
|
|
1549
1542
|
parent: null,
|
|
1550
1543
|
page: null
|
|
1551
1544
|
};
|
|
1552
|
-
if (!root)
|
|
1553
|
-
return info;
|
|
1545
|
+
if (!root) return info;
|
|
1554
1546
|
if (id === root.id) {
|
|
1555
1547
|
info.node = root;
|
|
1556
1548
|
return info;
|
|
1557
1549
|
}
|
|
1558
1550
|
const path = getNodePath(id, root.items);
|
|
1559
|
-
if (!path.length)
|
|
1560
|
-
return info;
|
|
1551
|
+
if (!path.length) return info;
|
|
1561
1552
|
path.unshift(root);
|
|
1562
1553
|
info.node = path[path.length - 1];
|
|
1563
1554
|
info.parent = path[path.length - 2];
|
|
@@ -1593,8 +1584,7 @@ class Editor extends BaseService {
|
|
|
1593
1584
|
* 只有容器拥有布局
|
|
1594
1585
|
*/
|
|
1595
1586
|
async getLayout(parent, node) {
|
|
1596
|
-
if (node && typeof node !== "function" && isFixed(node))
|
|
1597
|
-
return Layout.FIXED;
|
|
1587
|
+
if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
|
|
1598
1588
|
if (parent.layout) {
|
|
1599
1589
|
return parent.layout;
|
|
1600
1590
|
}
|
|
@@ -1634,11 +1624,9 @@ class Editor extends BaseService {
|
|
|
1634
1624
|
}
|
|
1635
1625
|
async selectNextNode() {
|
|
1636
1626
|
const node = toRaw(this.get("node"));
|
|
1637
|
-
if (!node || isPage(node) || node.type === NodeType.ROOT)
|
|
1638
|
-
return node;
|
|
1627
|
+
if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
|
|
1639
1628
|
const parent = toRaw(this.getParentById(node.id));
|
|
1640
|
-
if (!parent)
|
|
1641
|
-
return node;
|
|
1629
|
+
if (!parent) return node;
|
|
1642
1630
|
const index = getNodeIndex(node.id, parent);
|
|
1643
1631
|
const nextNode = parent.items[index + 1] || parent.items[0];
|
|
1644
1632
|
await this.select(nextNode);
|
|
@@ -1648,10 +1636,8 @@ class Editor extends BaseService {
|
|
|
1648
1636
|
async selectNextPage() {
|
|
1649
1637
|
const root = toRaw(this.get("root"));
|
|
1650
1638
|
const page = toRaw(this.get("page"));
|
|
1651
|
-
if (!page)
|
|
1652
|
-
|
|
1653
|
-
if (!root)
|
|
1654
|
-
throw new Error("root不能为空");
|
|
1639
|
+
if (!page) throw new Error("page不能为空");
|
|
1640
|
+
if (!root) throw new Error("root不能为空");
|
|
1655
1641
|
const index = getNodeIndex(page.id, root);
|
|
1656
1642
|
const nextPage = root.items[index + 1] || root.items[0];
|
|
1657
1643
|
await this.select(nextPage);
|
|
@@ -1666,8 +1652,7 @@ class Editor extends BaseService {
|
|
|
1666
1652
|
highlight(config) {
|
|
1667
1653
|
const { node } = this.selectedConfigExceptionHandler(config);
|
|
1668
1654
|
const currentHighlightNode = this.get("highlightNode");
|
|
1669
|
-
if (currentHighlightNode === node)
|
|
1670
|
-
return;
|
|
1655
|
+
if (currentHighlightNode === node) return;
|
|
1671
1656
|
this.set("highlightNode", node);
|
|
1672
1657
|
}
|
|
1673
1658
|
/**
|
|
@@ -1680,16 +1665,14 @@ class Editor extends BaseService {
|
|
|
1680
1665
|
const idsUnique = uniq(ids);
|
|
1681
1666
|
idsUnique.forEach((id) => {
|
|
1682
1667
|
const { node } = this.getNodeInfo(id);
|
|
1683
|
-
if (!node)
|
|
1684
|
-
return;
|
|
1668
|
+
if (!node) return;
|
|
1685
1669
|
nodes.push(node);
|
|
1686
1670
|
});
|
|
1687
1671
|
this.set("nodes", nodes);
|
|
1688
1672
|
}
|
|
1689
1673
|
selectRoot() {
|
|
1690
1674
|
const root = this.get("root");
|
|
1691
|
-
if (!root)
|
|
1692
|
-
return;
|
|
1675
|
+
if (!root) return;
|
|
1693
1676
|
this.set("nodes", [root]);
|
|
1694
1677
|
this.set("parent", null);
|
|
1695
1678
|
this.set("page", null);
|
|
@@ -1698,12 +1681,10 @@ class Editor extends BaseService {
|
|
|
1698
1681
|
}
|
|
1699
1682
|
async doAdd(node, parent) {
|
|
1700
1683
|
const root = this.get("root");
|
|
1701
|
-
if (!root)
|
|
1702
|
-
throw new Error("root为空");
|
|
1684
|
+
if (!root) throw new Error("root为空");
|
|
1703
1685
|
const curNode = this.get("node");
|
|
1704
1686
|
const stage = this.get("stage");
|
|
1705
|
-
if (!curNode)
|
|
1706
|
-
throw new Error("当前选中节点为空");
|
|
1687
|
+
if (!curNode) throw new Error("当前选中节点为空");
|
|
1707
1688
|
if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
|
|
1708
1689
|
throw new Error("app下不能添加组件");
|
|
1709
1690
|
}
|
|
@@ -1740,8 +1721,7 @@ class Editor extends BaseService {
|
|
|
1740
1721
|
const addNodes = [];
|
|
1741
1722
|
if (!Array.isArray(addNode)) {
|
|
1742
1723
|
const { type, inputEvent, ...config } = addNode;
|
|
1743
|
-
if (!type)
|
|
1744
|
-
throw new Error("组件类型不能为空");
|
|
1724
|
+
if (!type) throw new Error("组件类型不能为空");
|
|
1745
1725
|
addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
|
|
1746
1726
|
} else {
|
|
1747
1727
|
addNodes.push(...addNode);
|
|
@@ -1753,8 +1733,7 @@ class Editor extends BaseService {
|
|
|
1753
1733
|
return this.doAdd(node, root);
|
|
1754
1734
|
}
|
|
1755
1735
|
const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
|
|
1756
|
-
if (!parentNode)
|
|
1757
|
-
throw new Error("未找到父元素");
|
|
1736
|
+
if (!parentNode) throw new Error("未找到父元素");
|
|
1758
1737
|
return this.doAdd(node, parentNode);
|
|
1759
1738
|
})
|
|
1760
1739
|
);
|
|
@@ -1780,14 +1759,11 @@ class Editor extends BaseService {
|
|
|
1780
1759
|
}
|
|
1781
1760
|
async doRemove(node) {
|
|
1782
1761
|
const root = this.get("root");
|
|
1783
|
-
if (!root)
|
|
1784
|
-
throw new Error("root不能为空");
|
|
1762
|
+
if (!root) throw new Error("root不能为空");
|
|
1785
1763
|
const { parent, node: curNode } = this.getNodeInfo(node.id, false);
|
|
1786
|
-
if (!parent || !curNode)
|
|
1787
|
-
throw new Error("找不要删除的节点");
|
|
1764
|
+
if (!parent || !curNode) throw new Error("找不要删除的节点");
|
|
1788
1765
|
const index = getNodeIndex(curNode.id, parent);
|
|
1789
|
-
if (typeof index !== "number" || index === -1)
|
|
1790
|
-
throw new Error("找不要删除的节点");
|
|
1766
|
+
if (typeof index !== "number" || index === -1) throw new Error("找不要删除的节点");
|
|
1791
1767
|
parent.items?.splice(index, 1);
|
|
1792
1768
|
const stage = this.get("stage");
|
|
1793
1769
|
stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
|
|
@@ -1831,13 +1807,10 @@ class Editor extends BaseService {
|
|
|
1831
1807
|
}
|
|
1832
1808
|
async doUpdate(config) {
|
|
1833
1809
|
const root = this.get("root");
|
|
1834
|
-
if (!root)
|
|
1835
|
-
|
|
1836
|
-
if (!config?.id)
|
|
1837
|
-
throw new Error("没有配置或者配置缺少id值");
|
|
1810
|
+
if (!root) throw new Error("root为空");
|
|
1811
|
+
if (!config?.id) throw new Error("没有配置或者配置缺少id值");
|
|
1838
1812
|
const info = this.getNodeInfo(config.id, false);
|
|
1839
|
-
if (!info.node)
|
|
1840
|
-
throw new Error(`获取不到id为${config.id}的节点`);
|
|
1813
|
+
if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
|
|
1841
1814
|
const node = cloneDeep(toRaw(info.node));
|
|
1842
1815
|
let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
|
|
1843
1816
|
newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
|
|
@@ -1851,19 +1824,16 @@ class Editor extends BaseService {
|
|
|
1851
1824
|
return srcValue;
|
|
1852
1825
|
}
|
|
1853
1826
|
});
|
|
1854
|
-
if (!newConfig.type)
|
|
1855
|
-
throw new Error("配置缺少type值");
|
|
1827
|
+
if (!newConfig.type) throw new Error("配置缺少type值");
|
|
1856
1828
|
if (newConfig.type === NodeType.ROOT) {
|
|
1857
1829
|
this.set("root", newConfig);
|
|
1858
1830
|
return newConfig;
|
|
1859
1831
|
}
|
|
1860
1832
|
const { parent } = info;
|
|
1861
|
-
if (!parent)
|
|
1862
|
-
throw new Error("获取不到父级节点");
|
|
1833
|
+
if (!parent) throw new Error("获取不到父级节点");
|
|
1863
1834
|
const parentNodeItems = parent.items;
|
|
1864
1835
|
const index = getNodeIndex(newConfig.id, parent);
|
|
1865
|
-
if (!parentNodeItems || typeof index === "undefined" || index === -1)
|
|
1866
|
-
throw new Error("更新的节点未找到");
|
|
1836
|
+
if (!parentNodeItems || typeof index === "undefined" || index === -1) throw new Error("更新的节点未找到");
|
|
1867
1837
|
const newLayout = await this.getLayout(newConfig);
|
|
1868
1838
|
const layout = await this.getLayout(node);
|
|
1869
1839
|
if (Array.isArray(newConfig.items) && newLayout !== layout) {
|
|
@@ -1907,17 +1877,13 @@ class Editor extends BaseService {
|
|
|
1907
1877
|
*/
|
|
1908
1878
|
async sort(id1, id2) {
|
|
1909
1879
|
const root = this.get("root");
|
|
1910
|
-
if (!root)
|
|
1911
|
-
throw new Error("root为空");
|
|
1880
|
+
if (!root) throw new Error("root为空");
|
|
1912
1881
|
const node = this.get("node");
|
|
1913
|
-
if (!node)
|
|
1914
|
-
throw new Error("当前节点为空");
|
|
1882
|
+
if (!node) throw new Error("当前节点为空");
|
|
1915
1883
|
const parent = cloneDeep(toRaw(this.get("parent")));
|
|
1916
|
-
if (!parent)
|
|
1917
|
-
throw new Error("父节点为空");
|
|
1884
|
+
if (!parent) throw new Error("父节点为空");
|
|
1918
1885
|
const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
|
|
1919
|
-
if (index2 < 0)
|
|
1920
|
-
return;
|
|
1886
|
+
if (index2 < 0) return;
|
|
1921
1887
|
const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
|
|
1922
1888
|
parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
|
|
1923
1889
|
await this.update(parent);
|
|
@@ -1956,8 +1922,7 @@ class Editor extends BaseService {
|
|
|
1956
1922
|
coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
|
|
1957
1923
|
Object.keys(customTarget.deps).forEach((nodeId) => {
|
|
1958
1924
|
const node = this.getNodeById(nodeId);
|
|
1959
|
-
if (!node)
|
|
1960
|
-
return;
|
|
1925
|
+
if (!node) return;
|
|
1961
1926
|
customTarget.deps[nodeId].keys.forEach((key) => {
|
|
1962
1927
|
const relateNodeId = get(node, key);
|
|
1963
1928
|
const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
|
|
@@ -1981,8 +1946,7 @@ class Editor extends BaseService {
|
|
|
1981
1946
|
*/
|
|
1982
1947
|
async paste(position = {}, collectorOptions) {
|
|
1983
1948
|
const config = storageService.getItem(COPY_STORAGE_KEY);
|
|
1984
|
-
if (!Array.isArray(config))
|
|
1985
|
-
return;
|
|
1949
|
+
if (!Array.isArray(config)) return;
|
|
1986
1950
|
const node = this.get("node");
|
|
1987
1951
|
let parent = null;
|
|
1988
1952
|
if (config.length === 1 && config[0].id === node?.id) {
|
|
@@ -2005,15 +1969,13 @@ class Editor extends BaseService {
|
|
|
2005
1969
|
}
|
|
2006
1970
|
async doAlignCenter(config) {
|
|
2007
1971
|
const parent = this.getParentById(config.id);
|
|
2008
|
-
if (!parent)
|
|
2009
|
-
throw new Error("找不到父节点");
|
|
1972
|
+
if (!parent) throw new Error("找不到父节点");
|
|
2010
1973
|
const node = cloneDeep(toRaw(config));
|
|
2011
1974
|
const layout = await this.getLayout(parent, node);
|
|
2012
1975
|
if (layout === Layout.RELATIVE) {
|
|
2013
1976
|
return config;
|
|
2014
1977
|
}
|
|
2015
|
-
if (!node.style)
|
|
2016
|
-
return config;
|
|
1978
|
+
if (!node.style) return config;
|
|
2017
1979
|
const stage = this.get("stage");
|
|
2018
1980
|
const doc = stage?.renderer.contentWindow?.document;
|
|
2019
1981
|
if (doc) {
|
|
@@ -2052,14 +2014,11 @@ class Editor extends BaseService {
|
|
|
2052
2014
|
*/
|
|
2053
2015
|
async moveLayer(offset) {
|
|
2054
2016
|
const root = this.get("root");
|
|
2055
|
-
if (!root)
|
|
2056
|
-
throw new Error("root为空");
|
|
2017
|
+
if (!root) throw new Error("root为空");
|
|
2057
2018
|
const parent = this.get("parent");
|
|
2058
|
-
if (!parent)
|
|
2059
|
-
throw new Error("父节点为空");
|
|
2019
|
+
if (!parent) throw new Error("父节点为空");
|
|
2060
2020
|
const node = this.get("node");
|
|
2061
|
-
if (!node)
|
|
2062
|
-
throw new Error("当前节点为空");
|
|
2021
|
+
if (!node) throw new Error("当前节点为空");
|
|
2063
2022
|
const brothers = parent.items || [];
|
|
2064
2023
|
const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
|
|
2065
2024
|
const layout = await this.getLayout(parent, node);
|
|
@@ -2121,28 +2080,35 @@ class Editor extends BaseService {
|
|
|
2121
2080
|
}
|
|
2122
2081
|
}
|
|
2123
2082
|
async dragTo(config, targetParent, targetIndex) {
|
|
2124
|
-
if (!targetParent || !Array.isArray(targetParent.items))
|
|
2125
|
-
|
|
2126
|
-
const
|
|
2127
|
-
|
|
2128
|
-
throw new Error("找不要删除的节点");
|
|
2129
|
-
const index = getNodeIndex(curNode.id, parent);
|
|
2130
|
-
if (typeof index !== "number" || index === -1)
|
|
2131
|
-
throw new Error("找不要删除的节点");
|
|
2132
|
-
if (parent.id === targetParent.id) {
|
|
2133
|
-
if (index === targetIndex)
|
|
2134
|
-
return;
|
|
2135
|
-
if (index < targetIndex) {
|
|
2136
|
-
targetIndex -= 1;
|
|
2137
|
-
}
|
|
2138
|
-
}
|
|
2139
|
-
const layout = await this.getLayout(parent);
|
|
2083
|
+
if (!targetParent || !Array.isArray(targetParent.items)) return;
|
|
2084
|
+
const configs = Array.isArray(config) ? config : [config];
|
|
2085
|
+
const sourceIndicesInTargetParent = [];
|
|
2086
|
+
const sourceOutTargetParent = [];
|
|
2140
2087
|
const newLayout = await this.getLayout(targetParent);
|
|
2141
|
-
|
|
2142
|
-
|
|
2088
|
+
for (const config2 of configs) {
|
|
2089
|
+
const { parent, node: curNode } = this.getNodeInfo(config2.id, false);
|
|
2090
|
+
if (!parent || !curNode) throw new Error("找不要删除的节点");
|
|
2091
|
+
const index = getNodeIndex(curNode.id, parent);
|
|
2092
|
+
if (parent.id === targetParent.id) {
|
|
2093
|
+
if (typeof index !== "number" || index === -1) {
|
|
2094
|
+
return;
|
|
2095
|
+
}
|
|
2096
|
+
sourceIndicesInTargetParent.push(index);
|
|
2097
|
+
} else {
|
|
2098
|
+
const layout = await this.getLayout(parent);
|
|
2099
|
+
if (newLayout !== layout) {
|
|
2100
|
+
setLayout(config2, newLayout);
|
|
2101
|
+
}
|
|
2102
|
+
parent.items?.splice(index, 1);
|
|
2103
|
+
sourceOutTargetParent.push(config2);
|
|
2104
|
+
this.addModifiedNodeId(parent.id);
|
|
2105
|
+
}
|
|
2143
2106
|
}
|
|
2144
|
-
|
|
2145
|
-
|
|
2107
|
+
moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
|
|
2108
|
+
sourceOutTargetParent.forEach((config2, index) => {
|
|
2109
|
+
targetParent.items?.splice(targetIndex + index, 0, config2);
|
|
2110
|
+
this.addModifiedNodeId(config2.id);
|
|
2111
|
+
});
|
|
2146
2112
|
const page = this.get("page");
|
|
2147
2113
|
const root = this.get("root");
|
|
2148
2114
|
const stage = this.get("stage");
|
|
@@ -2153,10 +2119,8 @@ class Editor extends BaseService {
|
|
|
2153
2119
|
root: cloneDeep(root)
|
|
2154
2120
|
});
|
|
2155
2121
|
}
|
|
2156
|
-
this.addModifiedNodeId(config.id);
|
|
2157
|
-
this.addModifiedNodeId(parent.id);
|
|
2158
2122
|
this.pushHistoryState();
|
|
2159
|
-
this.emit("drag-to", {
|
|
2123
|
+
this.emit("drag-to", { targetIndex, configs, targetParent });
|
|
2160
2124
|
}
|
|
2161
2125
|
/**
|
|
2162
2126
|
* 撤销当前操作
|
|
@@ -2178,11 +2142,9 @@ class Editor extends BaseService {
|
|
|
2178
2142
|
}
|
|
2179
2143
|
async move(left, top) {
|
|
2180
2144
|
const node = toRaw(this.get("node"));
|
|
2181
|
-
if (!node || isPage(node))
|
|
2182
|
-
return;
|
|
2145
|
+
if (!node || isPage(node)) return;
|
|
2183
2146
|
const { style, id, type } = node;
|
|
2184
|
-
if (!style || !["absolute", "fixed"].includes(style.position))
|
|
2185
|
-
return;
|
|
2147
|
+
if (!style || !["absolute", "fixed"].includes(style.position)) return;
|
|
2186
2148
|
const update = (style2) => this.update({
|
|
2187
2149
|
id,
|
|
2188
2150
|
type,
|
|
@@ -2241,6 +2203,15 @@ class Editor extends BaseService {
|
|
|
2241
2203
|
usePlugin(options) {
|
|
2242
2204
|
super.usePlugin(options);
|
|
2243
2205
|
}
|
|
2206
|
+
on(eventName, listener) {
|
|
2207
|
+
return super.on(eventName, listener);
|
|
2208
|
+
}
|
|
2209
|
+
once(eventName, listener) {
|
|
2210
|
+
return super.once(eventName, listener);
|
|
2211
|
+
}
|
|
2212
|
+
emit(eventName, ...args) {
|
|
2213
|
+
return super.emit(eventName, ...args);
|
|
2214
|
+
}
|
|
2244
2215
|
addModifiedNodeId(id) {
|
|
2245
2216
|
if (!this.isHistoryStateChange) {
|
|
2246
2217
|
this.get("modifiedNodeIds").set(id, id);
|
|
@@ -2259,14 +2230,12 @@ class Editor extends BaseService {
|
|
|
2259
2230
|
this.isHistoryStateChange = false;
|
|
2260
2231
|
}
|
|
2261
2232
|
async changeHistoryState(value) {
|
|
2262
|
-
if (!value)
|
|
2263
|
-
return;
|
|
2233
|
+
if (!value) return;
|
|
2264
2234
|
this.isHistoryStateChange = true;
|
|
2265
2235
|
await this.update(value.data);
|
|
2266
2236
|
this.set("modifiedNodeIds", value.modifiedNodeIds);
|
|
2267
2237
|
setTimeout(async () => {
|
|
2268
|
-
if (!value.nodeId)
|
|
2269
|
-
return;
|
|
2238
|
+
if (!value.nodeId) return;
|
|
2270
2239
|
await this.select(value.nodeId);
|
|
2271
2240
|
this.get("stage")?.select(value.nodeId);
|
|
2272
2241
|
}, 0);
|
|
@@ -2294,8 +2263,7 @@ class Editor extends BaseService {
|
|
|
2294
2263
|
throw new Error("没有ID,无法选中");
|
|
2295
2264
|
}
|
|
2296
2265
|
const { node, parent, page } = this.getNodeInfo(id);
|
|
2297
|
-
if (!node)
|
|
2298
|
-
throw new Error("获取不到组件信息");
|
|
2266
|
+
if (!node) throw new Error("获取不到组件信息");
|
|
2299
2267
|
if (node.id === this.state.root?.id) {
|
|
2300
2268
|
throw new Error("不能选根节点");
|
|
2301
2269
|
}
|
|
@@ -2540,8 +2508,7 @@ const getDisplayField = (dataSources, key) => {
|
|
|
2540
2508
|
const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
|
|
2541
2509
|
let index = 0;
|
|
2542
2510
|
for (const match of matches) {
|
|
2543
|
-
if (typeof match.index === "undefined")
|
|
2544
|
-
break;
|
|
2511
|
+
if (typeof match.index === "undefined") break;
|
|
2545
2512
|
displayState.push({
|
|
2546
2513
|
type: "text",
|
|
2547
2514
|
value: key.substring(index, match.index)
|
|
@@ -2722,8 +2689,7 @@ class DataSource extends BaseService {
|
|
|
2722
2689
|
coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
|
|
2723
2690
|
Object.keys(customTarget.deps).forEach((nodeId) => {
|
|
2724
2691
|
const node = editorService.getNodeById(nodeId);
|
|
2725
|
-
if (!node)
|
|
2726
|
-
return;
|
|
2692
|
+
if (!node) return;
|
|
2727
2693
|
customTarget.deps[nodeId].keys.forEach((key) => {
|
|
2728
2694
|
const [relateDsId] = get(node, key);
|
|
2729
2695
|
const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
|
|
@@ -3318,11 +3284,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
|
|
|
3318
3284
|
() => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
|
|
3319
3285
|
);
|
|
3320
3286
|
const getParamItemsConfig = (codeId) => {
|
|
3321
|
-
if (!codeDsl.value || !codeId)
|
|
3322
|
-
return [];
|
|
3287
|
+
if (!codeDsl.value || !codeId) return [];
|
|
3323
3288
|
const paramStatements = codeDsl.value[codeId]?.params;
|
|
3324
|
-
if (isEmpty(paramStatements))
|
|
3325
|
-
return [];
|
|
3289
|
+
if (isEmpty(paramStatements)) return [];
|
|
3326
3290
|
return paramStatements.map((paramState) => ({
|
|
3327
3291
|
labelWidth: "100px",
|
|
3328
3292
|
text: paramState.name,
|
|
@@ -3622,8 +3586,7 @@ const useCodeBlockEdit = (codeBlockService) => {
|
|
|
3622
3586
|
codeBlockService?.deleteCodeDslByIds([key]);
|
|
3623
3587
|
};
|
|
3624
3588
|
const submitCodeBlockHandler = async (values) => {
|
|
3625
|
-
if (!codeId.value)
|
|
3626
|
-
return;
|
|
3589
|
+
if (!codeId.value) return;
|
|
3627
3590
|
await codeBlockService?.setCodeDslById(codeId.value, values);
|
|
3628
3591
|
codeBlockEditor.value?.hide();
|
|
3629
3592
|
};
|
|
@@ -3679,8 +3642,7 @@ const useDataSourceMethod = () => {
|
|
|
3679
3642
|
codeBlockEditor.value?.show();
|
|
3680
3643
|
},
|
|
3681
3644
|
deleteCode: async (model, methodName) => {
|
|
3682
|
-
if (!model.methods)
|
|
3683
|
-
return;
|
|
3645
|
+
if (!model.methods) return;
|
|
3684
3646
|
const index = model.methods.findIndex((method) => method.name === methodName);
|
|
3685
3647
|
if (index === -1) {
|
|
3686
3648
|
return;
|
|
@@ -3688,8 +3650,7 @@ const useDataSourceMethod = () => {
|
|
|
3688
3650
|
model.methods.splice(index, 1);
|
|
3689
3651
|
},
|
|
3690
3652
|
submitCode: (values) => {
|
|
3691
|
-
if (!dataSource.value)
|
|
3692
|
-
return;
|
|
3653
|
+
if (!dataSource.value) return;
|
|
3693
3654
|
if (!dataSource.value.methods) {
|
|
3694
3655
|
dataSource.value.methods = [];
|
|
3695
3656
|
}
|
|
@@ -3773,14 +3734,12 @@ class Ui extends BaseService {
|
|
|
3773
3734
|
}
|
|
3774
3735
|
async zoom(zoom) {
|
|
3775
3736
|
this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
|
|
3776
|
-
if (this.get("zoom") < 0.1)
|
|
3777
|
-
this.set("zoom", 0.1);
|
|
3737
|
+
if (this.get("zoom") < 0.1) this.set("zoom", 0.1);
|
|
3778
3738
|
}
|
|
3779
3739
|
async calcZoom() {
|
|
3780
3740
|
const { stageRect, stageContainerRect } = state;
|
|
3781
3741
|
const { height, width } = stageContainerRect;
|
|
3782
|
-
if (!width || !height)
|
|
3783
|
-
return 1;
|
|
3742
|
+
if (!width || !height) return 1;
|
|
3784
3743
|
let stageWidth = convertToNumber(stageRect.width, width);
|
|
3785
3744
|
let stageHeight = convertToNumber(stageRect.height, height);
|
|
3786
3745
|
stageWidth = stageWidth + 30;
|
|
@@ -3835,8 +3794,7 @@ const useStage = (stageOptions) => {
|
|
|
3835
3794
|
disabledDragStart: stageOptions.disabledDragStart,
|
|
3836
3795
|
renderType: stageOptions.renderType,
|
|
3837
3796
|
canSelect: (el, event, stop) => {
|
|
3838
|
-
if (!stageOptions.canSelect)
|
|
3839
|
-
return true;
|
|
3797
|
+
if (!stageOptions.canSelect) return true;
|
|
3840
3798
|
const elCanSelect = stageOptions.canSelect?.(el);
|
|
3841
3799
|
if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
|
|
3842
3800
|
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
|
|
@@ -3867,8 +3825,7 @@ const useStage = (stageOptions) => {
|
|
|
3867
3825
|
editorService.set("stageLoading", false);
|
|
3868
3826
|
});
|
|
3869
3827
|
stage.on("select", (el) => {
|
|
3870
|
-
if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
|
|
3871
|
-
return;
|
|
3828
|
+
if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1) return;
|
|
3872
3829
|
editorService.select(el.id);
|
|
3873
3830
|
});
|
|
3874
3831
|
stage.on("highlight", (el) => {
|
|
@@ -3895,15 +3852,13 @@ const useStage = (stageOptions) => {
|
|
|
3895
3852
|
});
|
|
3896
3853
|
stage.on("select-parent", () => {
|
|
3897
3854
|
const parent = editorService.get("parent");
|
|
3898
|
-
if (!parent)
|
|
3899
|
-
throw new Error("父节点为空");
|
|
3855
|
+
if (!parent) throw new Error("父节点为空");
|
|
3900
3856
|
editorService.select(parent);
|
|
3901
3857
|
editorService.get("stage")?.select(parent.id);
|
|
3902
3858
|
});
|
|
3903
3859
|
stage.on("change-guides", (e) => {
|
|
3904
3860
|
uiService.set("showGuides", true);
|
|
3905
|
-
if (!root.value || !page.value)
|
|
3906
|
-
return;
|
|
3861
|
+
if (!root.value || !page.value) return;
|
|
3907
3862
|
const storageKey = getGuideLineKey(
|
|
3908
3863
|
e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
|
|
3909
3864
|
);
|
|
@@ -3946,8 +3901,7 @@ const useFloatBox = (slideKeys) => {
|
|
|
3946
3901
|
isDragging.value = false;
|
|
3947
3902
|
};
|
|
3948
3903
|
document.body.addEventListener("dragover", (e) => {
|
|
3949
|
-
if (!isDragging.value)
|
|
3950
|
-
return;
|
|
3904
|
+
if (!isDragging.value) return;
|
|
3951
3905
|
e.preventDefault();
|
|
3952
3906
|
});
|
|
3953
3907
|
watch(
|
|
@@ -4000,8 +3954,7 @@ const useEditorContentHeight = () => {
|
|
|
4000
3954
|
watch(
|
|
4001
3955
|
editorContentHeight,
|
|
4002
3956
|
() => {
|
|
4003
|
-
if (height.value > 0 && height.value === editorContentHeight.value)
|
|
4004
|
-
return;
|
|
3957
|
+
if (height.value > 0 && height.value === editorContentHeight.value) return;
|
|
4005
3958
|
height.value = editorContentHeight.value;
|
|
4006
3959
|
},
|
|
4007
3960
|
{
|
|
@@ -4194,12 +4147,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
|
|
|
4194
4147
|
height: "200px",
|
|
4195
4148
|
parse: true,
|
|
4196
4149
|
type: (mForm, { model }) => {
|
|
4197
|
-
if (model.type === "number")
|
|
4198
|
-
|
|
4199
|
-
if (model.type === "
|
|
4200
|
-
return "select";
|
|
4201
|
-
if (model.type === "string")
|
|
4202
|
-
return "text";
|
|
4150
|
+
if (model.type === "number") return "number";
|
|
4151
|
+
if (model.type === "boolean") return "select";
|
|
4152
|
+
if (model.type === "string") return "text";
|
|
4203
4153
|
return "vs-code";
|
|
4204
4154
|
},
|
|
4205
4155
|
options: [
|
|
@@ -4239,23 +4189,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
|
|
|
4239
4189
|
addFromJsonDialogVisible.value = true;
|
|
4240
4190
|
};
|
|
4241
4191
|
const getValueType = (value) => {
|
|
4242
|
-
if (Array.isArray(value))
|
|
4243
|
-
|
|
4244
|
-
if (value ===
|
|
4245
|
-
|
|
4246
|
-
if (typeof value === "
|
|
4247
|
-
|
|
4248
|
-
if (typeof value === "number")
|
|
4249
|
-
return "number";
|
|
4250
|
-
if (typeof value === "boolean")
|
|
4251
|
-
return "boolean";
|
|
4252
|
-
if (typeof value === "string")
|
|
4253
|
-
return "string";
|
|
4192
|
+
if (Array.isArray(value)) return "array";
|
|
4193
|
+
if (value === null) return "null";
|
|
4194
|
+
if (typeof value === "object") return "object";
|
|
4195
|
+
if (typeof value === "number") return "number";
|
|
4196
|
+
if (typeof value === "boolean") return "boolean";
|
|
4197
|
+
if (typeof value === "string") return "string";
|
|
4254
4198
|
return "any";
|
|
4255
4199
|
};
|
|
4256
4200
|
const getFieldsConfig = (value, fields = []) => {
|
|
4257
|
-
if (!value || typeof value !== "object")
|
|
4258
|
-
throw new Error("数据格式错误");
|
|
4201
|
+
if (!value || typeof value !== "object") throw new Error("数据格式错误");
|
|
4259
4202
|
const newFields = [];
|
|
4260
4203
|
Object.entries(value).forEach(([key, value2]) => {
|
|
4261
4204
|
const type = getValueType(value2);
|
|
@@ -4445,10 +4388,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
4445
4388
|
model: props.model
|
|
4446
4389
|
});
|
|
4447
4390
|
}
|
|
4448
|
-
if (type2 === "form")
|
|
4449
|
-
|
|
4450
|
-
if (type2 === "container")
|
|
4451
|
-
return "";
|
|
4391
|
+
if (type2 === "form") return "";
|
|
4392
|
+
if (type2 === "container") return "";
|
|
4452
4393
|
return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (props.config.items ? "" : "text");
|
|
4453
4394
|
});
|
|
4454
4395
|
const tagName = computed(() => {
|
|
@@ -4456,8 +4397,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
|
|
|
4456
4397
|
return MCascader;
|
|
4457
4398
|
}
|
|
4458
4399
|
const component = resolveComponent(`m-${props.config.items ? "form" : "fields"}-${type.value}`);
|
|
4459
|
-
if (typeof component !== "string")
|
|
4460
|
-
return component;
|
|
4400
|
+
if (typeof component !== "string") return component;
|
|
4461
4401
|
return "m-fields-text";
|
|
4462
4402
|
});
|
|
4463
4403
|
const onChangeHandler = (value) => {
|
|
@@ -4552,9 +4492,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
|
4552
4492
|
{ immediate: true }
|
|
4553
4493
|
);
|
|
4554
4494
|
const mouseupHandler = async () => {
|
|
4495
|
+
const selection = globalThis.document.getSelection();
|
|
4496
|
+
const anchorOffset = selection?.anchorOffset || 0;
|
|
4497
|
+
const focusOffset = selection?.focusOffset || 0;
|
|
4555
4498
|
isFocused.value = true;
|
|
4556
4499
|
await nextTick();
|
|
4557
4500
|
autocomplete.value?.focus();
|
|
4501
|
+
if (focusOffset && input.value) {
|
|
4502
|
+
input.value.setSelectionRange(anchorOffset, focusOffset);
|
|
4503
|
+
}
|
|
4558
4504
|
};
|
|
4559
4505
|
const blurHandler = () => {
|
|
4560
4506
|
isFocused.value = false;
|
|
@@ -5193,11 +5139,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
|
5193
5139
|
return Boolean(dataSource?.methods.find((method) => method.name === name));
|
|
5194
5140
|
});
|
|
5195
5141
|
const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
|
|
5196
|
-
if (!dataSourceId)
|
|
5197
|
-
return [];
|
|
5142
|
+
if (!dataSourceId) return [];
|
|
5198
5143
|
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
|
|
5199
|
-
if (!paramStatements)
|
|
5200
|
-
return [];
|
|
5144
|
+
if (!paramStatements) return [];
|
|
5201
5145
|
return paramStatements.map((paramState) => ({
|
|
5202
5146
|
text: paramState.name,
|
|
5203
5147
|
...paramState
|
|
@@ -5242,8 +5186,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
|
5242
5186
|
const editCodeHandler = () => {
|
|
5243
5187
|
const [id] = props.model[props.name];
|
|
5244
5188
|
const dataSource = dataSourceService?.getDataSourceById(id);
|
|
5245
|
-
if (!dataSource)
|
|
5246
|
-
return;
|
|
5189
|
+
if (!dataSource) return;
|
|
5247
5190
|
eventBus?.emit("edit-data-source", id);
|
|
5248
5191
|
};
|
|
5249
5192
|
return (_ctx, _cache) => {
|
|
@@ -5354,15 +5297,13 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
|
5354
5297
|
defaultValue: "{}",
|
|
5355
5298
|
height: "400px",
|
|
5356
5299
|
onChange: (formState, v) => {
|
|
5357
|
-
if (typeof v !== "string")
|
|
5358
|
-
return v;
|
|
5300
|
+
if (typeof v !== "string") return v;
|
|
5359
5301
|
return JSON.parse(v);
|
|
5360
5302
|
},
|
|
5361
5303
|
rules: [
|
|
5362
5304
|
{
|
|
5363
5305
|
validator: ({ value, callback }) => {
|
|
5364
|
-
if (typeof value !== "string")
|
|
5365
|
-
return callback();
|
|
5306
|
+
if (typeof value !== "string") return callback();
|
|
5366
5307
|
try {
|
|
5367
5308
|
JSON.parse(value);
|
|
5368
5309
|
callback();
|
|
@@ -5590,12 +5531,10 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
5590
5531
|
};
|
|
5591
5532
|
const editHandler = () => {
|
|
5592
5533
|
const value = props.model[props.name];
|
|
5593
|
-
if (!value)
|
|
5594
|
-
return;
|
|
5534
|
+
if (!value) return;
|
|
5595
5535
|
const id = typeof value === "string" ? value : value.dataSourceId;
|
|
5596
5536
|
const dataSource = dataSourceService?.getDataSourceById(id);
|
|
5597
|
-
if (!dataSource)
|
|
5598
|
-
return;
|
|
5537
|
+
if (!dataSource) return;
|
|
5599
5538
|
eventBus?.emit("edit-data-source", id);
|
|
5600
5539
|
};
|
|
5601
5540
|
return (_ctx, _cache) => {
|
|
@@ -5673,8 +5612,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
5673
5612
|
valueSeparator: ".",
|
|
5674
5613
|
options: (mForm, { formValue }) => {
|
|
5675
5614
|
let events = [];
|
|
5676
|
-
if (!eventsService || !dataSourceService)
|
|
5677
|
-
return events;
|
|
5615
|
+
if (!eventsService || !dataSourceService) return events;
|
|
5678
5616
|
if (props.config.src === "component") {
|
|
5679
5617
|
events = eventsService.getEvent(formValue.type);
|
|
5680
5618
|
if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
|
|
@@ -5781,8 +5719,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
5781
5719
|
display: (mForm, { model }) => model.actionType === ActionType.COMP,
|
|
5782
5720
|
options: (mForm, { model }) => {
|
|
5783
5721
|
const node = editorService?.getNodeById(model.to);
|
|
5784
|
-
if (!node?.type)
|
|
5785
|
-
return [];
|
|
5722
|
+
if (!node?.type) return [];
|
|
5786
5723
|
let methods = [];
|
|
5787
5724
|
methods = eventsService?.getMethod(node.type) || [];
|
|
5788
5725
|
if (node.type === "page-fragment-container" && node.pageFragmentId) {
|
|
@@ -5856,8 +5793,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
5856
5793
|
type: compActionConfig.value.type,
|
|
5857
5794
|
options: (mForm, { model }) => {
|
|
5858
5795
|
const node = editorService?.getNodeById(model.to);
|
|
5859
|
-
if (!node?.type)
|
|
5860
|
-
return [];
|
|
5796
|
+
if (!node?.type) return [];
|
|
5861
5797
|
return eventsService?.getMethod(node.type).map((option) => ({
|
|
5862
5798
|
text: option.label,
|
|
5863
5799
|
value: option.value
|
|
@@ -5886,8 +5822,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
5886
5822
|
]
|
|
5887
5823
|
}));
|
|
5888
5824
|
const isOldVersion = computed(() => {
|
|
5889
|
-
if (props.model[props.name].length === 0)
|
|
5890
|
-
return false;
|
|
5825
|
+
if (props.model[props.name].length === 0) return false;
|
|
5891
5826
|
return !has(props.model[props.name][0], "actions");
|
|
5892
5827
|
});
|
|
5893
5828
|
const addEvent = () => {
|
|
@@ -5902,8 +5837,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
|
5902
5837
|
onChangeHandler();
|
|
5903
5838
|
};
|
|
5904
5839
|
const removeEvent = (index) => {
|
|
5905
|
-
if (!props.name)
|
|
5906
|
-
return;
|
|
5840
|
+
if (!props.name) return;
|
|
5907
5841
|
props.model[props.name].splice(index, 1);
|
|
5908
5842
|
onChangeHandler();
|
|
5909
5843
|
};
|
|
@@ -6228,8 +6162,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
|
|
|
6228
6162
|
const val = computed(() => props.model[props.name]);
|
|
6229
6163
|
const uiSelectMode = ref(false);
|
|
6230
6164
|
const cancelHandler = () => {
|
|
6231
|
-
if (!services?.uiService)
|
|
6232
|
-
return;
|
|
6165
|
+
if (!services?.uiService) return;
|
|
6233
6166
|
services.uiService.set("uiSelectMode", false);
|
|
6234
6167
|
uiSelectMode.value = false;
|
|
6235
6168
|
globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
|
|
@@ -6249,8 +6182,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
|
|
|
6249
6182
|
return config?.name || "";
|
|
6250
6183
|
});
|
|
6251
6184
|
const startSelect = () => {
|
|
6252
|
-
if (!services?.uiService)
|
|
6253
|
-
return;
|
|
6185
|
+
if (!services?.uiService) return;
|
|
6254
6186
|
services.uiService.set("uiSelectMode", true);
|
|
6255
6187
|
uiSelectMode.value = true;
|
|
6256
6188
|
globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
|
|
@@ -6367,14 +6299,12 @@ const useGetSo = (target, emit) => {
|
|
|
6367
6299
|
let getso;
|
|
6368
6300
|
const isDraging = ref(false);
|
|
6369
6301
|
onMounted(() => {
|
|
6370
|
-
if (!target.value)
|
|
6371
|
-
return;
|
|
6302
|
+
if (!target.value) return;
|
|
6372
6303
|
getso = new Gesto(target.value, {
|
|
6373
6304
|
container: window,
|
|
6374
6305
|
pinchOutside: true
|
|
6375
6306
|
}).on("drag", (e) => {
|
|
6376
|
-
if (!target.value)
|
|
6377
|
-
return;
|
|
6307
|
+
if (!target.value) return;
|
|
6378
6308
|
emit("change", e);
|
|
6379
6309
|
}).on("dragStart", () => {
|
|
6380
6310
|
isDraging.value = true;
|
|
@@ -6490,13 +6420,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
|
6490
6420
|
});
|
|
6491
6421
|
} else {
|
|
6492
6422
|
watchEffect(() => {
|
|
6493
|
-
if (typeof props.width === "number")
|
|
6494
|
-
widthChange(props.width);
|
|
6423
|
+
if (typeof props.width === "number") widthChange(props.width);
|
|
6495
6424
|
});
|
|
6496
6425
|
}
|
|
6497
6426
|
const changeLeft = ({ deltaX }) => {
|
|
6498
|
-
if (typeof props.left === "undefined")
|
|
6499
|
-
return;
|
|
6427
|
+
if (typeof props.left === "undefined") return;
|
|
6500
6428
|
let left = Math.max(props.left + deltaX, props.minLeft) || 0;
|
|
6501
6429
|
emit("update:left", left);
|
|
6502
6430
|
if (clientWidth - left - (props.right || 0) <= 0) {
|
|
@@ -6511,8 +6439,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
|
6511
6439
|
});
|
|
6512
6440
|
};
|
|
6513
6441
|
const changeRight = ({ deltaX }) => {
|
|
6514
|
-
if (typeof props.right === "undefined")
|
|
6515
|
-
return;
|
|
6442
|
+
if (typeof props.right === "undefined") return;
|
|
6516
6443
|
let right = Math.max(props.right - deltaX, props.minRight) || 0;
|
|
6517
6444
|
emit("update:right", right);
|
|
6518
6445
|
if (clientWidth - (props.left || 0) - right <= 0) {
|
|
@@ -6597,28 +6524,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
6597
6524
|
const props = __props;
|
|
6598
6525
|
const services = inject("services");
|
|
6599
6526
|
const disabled = computed(() => {
|
|
6600
|
-
if (typeof props.data === "string")
|
|
6601
|
-
|
|
6602
|
-
if (props.data.type === "component")
|
|
6603
|
-
return false;
|
|
6527
|
+
if (typeof props.data === "string") return false;
|
|
6528
|
+
if (props.data.type === "component") return false;
|
|
6604
6529
|
if (typeof props.data.disabled === "function") {
|
|
6605
6530
|
return props.data.disabled(services);
|
|
6606
6531
|
}
|
|
6607
6532
|
return props.data.disabled;
|
|
6608
6533
|
});
|
|
6609
6534
|
const display = computed(() => {
|
|
6610
|
-
if (!props.data)
|
|
6611
|
-
|
|
6612
|
-
if (typeof props.data === "string")
|
|
6613
|
-
return true;
|
|
6535
|
+
if (!props.data) return false;
|
|
6536
|
+
if (typeof props.data === "string") return true;
|
|
6614
6537
|
if (typeof props.data.display === "function") {
|
|
6615
6538
|
return props.data.display(services);
|
|
6616
6539
|
}
|
|
6617
6540
|
return props.data.display ?? true;
|
|
6618
6541
|
});
|
|
6619
6542
|
const buttonHandler = (item, event) => {
|
|
6620
|
-
if (disabled.value)
|
|
6621
|
-
return;
|
|
6543
|
+
if (disabled.value) return;
|
|
6622
6544
|
if (typeof item.handler === "function" && services) {
|
|
6623
6545
|
item.handler?.(services, event);
|
|
6624
6546
|
}
|
|
@@ -6629,22 +6551,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
|
6629
6551
|
}
|
|
6630
6552
|
};
|
|
6631
6553
|
const clickHandler = (item, event) => {
|
|
6632
|
-
if (props.eventType !== "click")
|
|
6633
|
-
return;
|
|
6554
|
+
if (props.eventType !== "click") return;
|
|
6634
6555
|
if (item.type === "button") {
|
|
6635
6556
|
buttonHandler(item, event);
|
|
6636
6557
|
}
|
|
6637
6558
|
};
|
|
6638
6559
|
const mousedownHandler = (item, event) => {
|
|
6639
|
-
if (props.eventType !== "mousedown")
|
|
6640
|
-
return;
|
|
6560
|
+
if (props.eventType !== "mousedown") return;
|
|
6641
6561
|
if (item.type === "button") {
|
|
6642
6562
|
buttonHandler(item, event);
|
|
6643
6563
|
}
|
|
6644
6564
|
};
|
|
6645
6565
|
const mouseupHandler = (item, event) => {
|
|
6646
|
-
if (props.eventType !== "mouseup")
|
|
6647
|
-
return;
|
|
6566
|
+
if (props.eventType !== "mouseup") return;
|
|
6648
6567
|
if (item.type === "button") {
|
|
6649
6568
|
buttonHandler(item, event);
|
|
6650
6569
|
}
|
|
@@ -6761,11 +6680,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
|
6761
6680
|
const editorService = services?.editorService;
|
|
6762
6681
|
const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
|
|
6763
6682
|
const addPage = () => {
|
|
6764
|
-
if (!editorService)
|
|
6765
|
-
return;
|
|
6683
|
+
if (!editorService) return;
|
|
6766
6684
|
const root = toRaw(editorService.get("root"));
|
|
6767
|
-
if (!root)
|
|
6768
|
-
throw new Error("root 不能为空");
|
|
6685
|
+
if (!root) throw new Error("root 不能为空");
|
|
6769
6686
|
const pageConfig = {
|
|
6770
6687
|
type: props.type,
|
|
6771
6688
|
name: generatePageNameByApp(root, props.type),
|
|
@@ -6823,8 +6740,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
|
|
|
6823
6740
|
});
|
|
6824
6741
|
let translateLeft = 0;
|
|
6825
6742
|
const scroll = (type) => {
|
|
6826
|
-
if (!itemsContainer.value)
|
|
6827
|
-
return;
|
|
6743
|
+
if (!itemsContainer.value) return;
|
|
6828
6744
|
const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
|
|
6829
6745
|
if (type === "left") {
|
|
6830
6746
|
translateLeft += 100;
|
|
@@ -7129,11 +7045,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
|
|
|
7129
7045
|
const services = inject("services");
|
|
7130
7046
|
const clickHandler = (type) => {
|
|
7131
7047
|
const { editorService } = services || {};
|
|
7132
|
-
if (!editorService)
|
|
7133
|
-
return;
|
|
7048
|
+
if (!editorService) return;
|
|
7134
7049
|
const root = toRaw(editorService.get("root"));
|
|
7135
|
-
if (!root)
|
|
7136
|
-
throw new Error("root 不能为空");
|
|
7050
|
+
if (!root) throw new Error("root 不能为空");
|
|
7137
7051
|
editorService.add({
|
|
7138
7052
|
type,
|
|
7139
7053
|
name: generatePageNameByApp(root, type),
|
|
@@ -7605,6 +7519,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
|
7605
7519
|
}, 8, ["type"])) : createCommentVNode("", true),
|
|
7606
7520
|
showSrc.value ? (openBlock(), createBlock(_sfc_main$T, {
|
|
7607
7521
|
key: 1,
|
|
7522
|
+
class: "m-editor-props-panel-src-code",
|
|
7608
7523
|
height: `${unref(editorContentHeight)}px`,
|
|
7609
7524
|
"init-values": values.value,
|
|
7610
7525
|
options: unref(codeOptions),
|
|
@@ -7660,8 +7575,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
|
7660
7575
|
|
|
7661
7576
|
const updateStatus = (nodeStatusMap, id, status) => {
|
|
7662
7577
|
const nodeStatus = nodeStatusMap.get(id);
|
|
7663
|
-
if (!nodeStatus)
|
|
7664
|
-
return;
|
|
7578
|
+
if (!nodeStatus) return;
|
|
7665
7579
|
getKeys(status).forEach((key) => {
|
|
7666
7580
|
if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
|
|
7667
7581
|
nodeStatus[key] = Boolean(status[key]);
|
|
@@ -7857,12 +7771,10 @@ const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
|
|
|
7857
7771
|
return string.some((v) => filterNodeMethod(v, data));
|
|
7858
7772
|
};
|
|
7859
7773
|
const filter = (text) => {
|
|
7860
|
-
if (!nodeData.value.length)
|
|
7861
|
-
return;
|
|
7774
|
+
if (!nodeData.value.length) return;
|
|
7862
7775
|
nodeData.value.forEach((node) => {
|
|
7863
7776
|
traverseNode(node, (node2, parents) => {
|
|
7864
|
-
if (!nodeStatusMap.value)
|
|
7865
|
-
return;
|
|
7777
|
+
if (!nodeStatusMap.value) return;
|
|
7866
7778
|
const visible = filterIsMatch(text, node2);
|
|
7867
7779
|
if (visible && parents.length) {
|
|
7868
7780
|
parents.forEach((parent) => {
|
|
@@ -8152,8 +8064,7 @@ const useDataSourceEdit = (dataSourceService) => {
|
|
|
8152
8064
|
const dataSourceValues = ref({});
|
|
8153
8065
|
const editable = computed(() => dataSourceService?.get("editable") ?? true);
|
|
8154
8066
|
const editHandler = (id) => {
|
|
8155
|
-
if (!editDialog.value)
|
|
8156
|
-
return;
|
|
8067
|
+
if (!editDialog.value) return;
|
|
8157
8068
|
dataSourceValues.value = {
|
|
8158
8069
|
...dataSourceService?.getDataSourceById(id)
|
|
8159
8070
|
};
|
|
@@ -8421,8 +8332,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
|
8421
8332
|
].concat(dataSourceService?.get("datasourceTypeList") ?? [])
|
|
8422
8333
|
);
|
|
8423
8334
|
const addHandler = (type) => {
|
|
8424
|
-
if (!editDialog.value)
|
|
8425
|
-
return;
|
|
8335
|
+
if (!editDialog.value) return;
|
|
8426
8336
|
const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
|
|
8427
8337
|
dataSourceValues.value = mergeWith(
|
|
8428
8338
|
{ type, title: datasourceType?.text },
|
|
@@ -8539,20 +8449,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
|
8539
8449
|
}));
|
|
8540
8450
|
const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
|
|
8541
8451
|
const hide = () => {
|
|
8542
|
-
if (!visible.value)
|
|
8543
|
-
return;
|
|
8452
|
+
if (!visible.value) return;
|
|
8544
8453
|
visible.value = false;
|
|
8545
8454
|
subMenu.value?.hide();
|
|
8546
8455
|
emit("hide");
|
|
8547
8456
|
};
|
|
8548
8457
|
const clickHandler = () => {
|
|
8549
|
-
if (!props.autoHide)
|
|
8550
|
-
return;
|
|
8458
|
+
if (!props.autoHide) return;
|
|
8551
8459
|
hide();
|
|
8552
8460
|
};
|
|
8553
8461
|
const outsideClickHideHandler = (e) => {
|
|
8554
|
-
if (!props.autoHide)
|
|
8555
|
-
return;
|
|
8462
|
+
if (!props.autoHide) return;
|
|
8556
8463
|
const target = e.target;
|
|
8557
8464
|
if (!visible.value || !target) {
|
|
8558
8465
|
return;
|
|
@@ -8609,13 +8516,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
|
8609
8516
|
emit("mouseenter");
|
|
8610
8517
|
};
|
|
8611
8518
|
onMounted(() => {
|
|
8612
|
-
if (props.isSubMenu)
|
|
8613
|
-
return;
|
|
8519
|
+
if (props.isSubMenu) return;
|
|
8614
8520
|
globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
|
|
8615
8521
|
});
|
|
8616
8522
|
onBeforeUnmount(() => {
|
|
8617
|
-
if (props.isSubMenu)
|
|
8618
|
-
return;
|
|
8523
|
+
if (props.isSubMenu) return;
|
|
8619
8524
|
globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
|
|
8620
8525
|
});
|
|
8621
8526
|
__expose({
|
|
@@ -8736,8 +8641,7 @@ const usePasteMenu = (menu) => ({
|
|
|
8736
8641
|
display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
|
|
8737
8642
|
handler: (services) => {
|
|
8738
8643
|
const nodes = services?.editorService?.get("nodes");
|
|
8739
|
-
if (!nodes || nodes.length === 0)
|
|
8740
|
-
return;
|
|
8644
|
+
if (!nodes || nodes.length === 0) return;
|
|
8741
8645
|
if (menu?.value?.$el) {
|
|
8742
8646
|
const stage = services?.editorService?.get("stage");
|
|
8743
8647
|
const rect = menu.value.$el.getBoundingClientRect();
|
|
@@ -8751,12 +8655,10 @@ const usePasteMenu = (menu) => ({
|
|
|
8751
8655
|
}
|
|
8752
8656
|
});
|
|
8753
8657
|
const moveTo = (id, services) => {
|
|
8754
|
-
if (!services?.editorService)
|
|
8755
|
-
return;
|
|
8658
|
+
if (!services?.editorService) return;
|
|
8756
8659
|
const nodes = services.editorService.get("nodes") || [];
|
|
8757
8660
|
const parent = services.editorService.getNodeById(id);
|
|
8758
|
-
if (!parent)
|
|
8759
|
-
return;
|
|
8661
|
+
if (!parent) return;
|
|
8760
8662
|
services?.editorService.add(nodes, parent);
|
|
8761
8663
|
services?.editorService.remove(nodes);
|
|
8762
8664
|
};
|
|
@@ -8896,8 +8798,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8896
8798
|
const services = inject("services");
|
|
8897
8799
|
const editorService = services?.editorService;
|
|
8898
8800
|
const setNodeVisible = (visible) => {
|
|
8899
|
-
if (!editorService)
|
|
8900
|
-
return;
|
|
8801
|
+
if (!editorService) return;
|
|
8901
8802
|
editorService.update({
|
|
8902
8803
|
id: props.data.id,
|
|
8903
8804
|
visible
|
|
@@ -8955,17 +8856,19 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
|
|
|
8955
8856
|
services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
|
|
8956
8857
|
};
|
|
8957
8858
|
const throttleTime = 300;
|
|
8958
|
-
const highlightHandler = throttle(
|
|
8959
|
-
|
|
8960
|
-
|
|
8859
|
+
const highlightHandler = throttle(
|
|
8860
|
+
(event, data) => {
|
|
8861
|
+
highlight(data);
|
|
8862
|
+
},
|
|
8863
|
+
throttleTime
|
|
8864
|
+
);
|
|
8961
8865
|
const highlight = (data) => {
|
|
8962
8866
|
services?.editorService?.highlight(data);
|
|
8963
8867
|
services?.editorService?.get("stage")?.highlight(data.id);
|
|
8964
8868
|
services?.stageOverlayService?.get("stage")?.highlight(data.id);
|
|
8965
8869
|
};
|
|
8966
8870
|
const nodeClickHandler = (event, data) => {
|
|
8967
|
-
if (!nodeStatusMap?.value)
|
|
8968
|
-
return;
|
|
8871
|
+
if (!nodeStatusMap?.value) return;
|
|
8969
8872
|
if (services?.uiService.get("uiSelectMode")) {
|
|
8970
8873
|
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
|
|
8971
8874
|
return;
|
|
@@ -9009,8 +8912,7 @@ const getNodeEl = (el) => {
|
|
|
9009
8912
|
}
|
|
9010
8913
|
};
|
|
9011
8914
|
const removeStatusClass = (el) => {
|
|
9012
|
-
if (!el)
|
|
9013
|
-
return;
|
|
8915
|
+
if (!el) return;
|
|
9014
8916
|
["drag-before", "drag-after", "drag-inner"].forEach((className) => {
|
|
9015
8917
|
el.querySelectorAll(`.${className}`).forEach((el2) => {
|
|
9016
8918
|
removeClassName(el2, className);
|
|
@@ -9019,11 +8921,9 @@ const removeStatusClass = (el) => {
|
|
|
9019
8921
|
};
|
|
9020
8922
|
const useDrag = (services) => {
|
|
9021
8923
|
const handleDragStart = (event) => {
|
|
9022
|
-
if (!event.dataTransfer || !event.target || !event.currentTarget)
|
|
9023
|
-
return;
|
|
8924
|
+
if (!event.dataTransfer || !event.target || !event.currentTarget) return;
|
|
9024
8925
|
const targetEl = getNodeEl(event.target);
|
|
9025
|
-
if (!targetEl || targetEl !== event.currentTarget)
|
|
9026
|
-
return;
|
|
8926
|
+
if (!targetEl || targetEl !== event.currentTarget) return;
|
|
9027
8927
|
event.dataTransfer.effectAllowed = "move";
|
|
9028
8928
|
try {
|
|
9029
8929
|
event.dataTransfer.setData(
|
|
@@ -9036,14 +8936,11 @@ const useDrag = (services) => {
|
|
|
9036
8936
|
}
|
|
9037
8937
|
};
|
|
9038
8938
|
const handleDragOver = (event) => {
|
|
9039
|
-
if (!event.target)
|
|
9040
|
-
return;
|
|
8939
|
+
if (!event.target) return;
|
|
9041
8940
|
const targetEl = getNodeEl(event.target);
|
|
9042
|
-
if (!targetEl?.draggable)
|
|
9043
|
-
return;
|
|
8941
|
+
if (!targetEl?.draggable) return;
|
|
9044
8942
|
const labelEl = targetEl.children[0];
|
|
9045
|
-
if (!labelEl)
|
|
9046
|
-
return;
|
|
8943
|
+
if (!labelEl) return;
|
|
9047
8944
|
const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
|
|
9048
8945
|
const distance = event.clientY - targetTop;
|
|
9049
8946
|
const isContainer = targetEl.dataset.isContainer === "true";
|
|
@@ -9068,20 +8965,16 @@ const useDrag = (services) => {
|
|
|
9068
8965
|
event.preventDefault();
|
|
9069
8966
|
};
|
|
9070
8967
|
const handleDragLeave = (event) => {
|
|
9071
|
-
if (!event.target || !event.currentTarget)
|
|
9072
|
-
return;
|
|
8968
|
+
if (!event.target || !event.currentTarget) return;
|
|
9073
8969
|
const targetEl = getNodeEl(event.target);
|
|
9074
|
-
if (!targetEl || targetEl !== event.currentTarget)
|
|
9075
|
-
return;
|
|
8970
|
+
if (!targetEl || targetEl !== event.currentTarget) return;
|
|
9076
8971
|
const labelEl = targetEl.children[0];
|
|
9077
8972
|
removeClassName(labelEl, "drag-before", "drag-after", "drag-inner");
|
|
9078
8973
|
};
|
|
9079
8974
|
const handleDragEnd = (event, node) => {
|
|
9080
|
-
if (!event.target || !event.currentTarget)
|
|
9081
|
-
return;
|
|
8975
|
+
if (!event.target || !event.currentTarget) return;
|
|
9082
8976
|
const targetEl = getNodeEl(event.target);
|
|
9083
|
-
if (!targetEl || targetEl !== event.currentTarget)
|
|
9084
|
-
return;
|
|
8977
|
+
if (!targetEl || targetEl !== event.currentTarget) return;
|
|
9085
8978
|
removeStatusClass(dragState.container);
|
|
9086
8979
|
if (node && dragState.dragOverNodeId && dragState.dropType && services) {
|
|
9087
8980
|
if (dragState.dragOverNodeId === node.id) {
|
|
@@ -9090,8 +8983,7 @@ const useDrag = (services) => {
|
|
|
9090
8983
|
const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
|
|
9091
8984
|
const targetNode = targetInfo.node;
|
|
9092
8985
|
let targetParent = targetInfo.parent;
|
|
9093
|
-
if (!targetParent || !targetNode)
|
|
9094
|
-
return;
|
|
8986
|
+
if (!targetParent || !targetNode) return;
|
|
9095
8987
|
let targetIndex = -1;
|
|
9096
8988
|
if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
|
|
9097
8989
|
targetIndex = targetNode.items.length;
|
|
@@ -9102,7 +8994,12 @@ const useDrag = (services) => {
|
|
|
9102
8994
|
if (dragState.dropType === "after") {
|
|
9103
8995
|
targetIndex += 1;
|
|
9104
8996
|
}
|
|
9105
|
-
services
|
|
8997
|
+
const selectedNodes = services.editorService.get("nodes");
|
|
8998
|
+
if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
|
|
8999
|
+
services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
|
|
9000
|
+
} else {
|
|
9001
|
+
services.editorService.dragTo([node], targetParent, targetIndex);
|
|
9002
|
+
}
|
|
9106
9003
|
}
|
|
9107
9004
|
dragState.dragOverNodeId = "";
|
|
9108
9005
|
dragState.dropType = "";
|
|
@@ -9323,8 +9220,7 @@ const useNodeStatus = (services) => {
|
|
|
9323
9220
|
watch(
|
|
9324
9221
|
nodes,
|
|
9325
9222
|
(nodes2) => {
|
|
9326
|
-
if (!nodeStatusMap.value)
|
|
9327
|
-
return;
|
|
9223
|
+
if (!nodeStatusMap.value) return;
|
|
9328
9224
|
for (const [id, status] of nodeStatusMap.value.entries()) {
|
|
9329
9225
|
status.selected = nodes2.some((node) => node.id === id);
|
|
9330
9226
|
if (status.selected) {
|
|
@@ -9342,8 +9238,7 @@ const useNodeStatus = (services) => {
|
|
|
9342
9238
|
);
|
|
9343
9239
|
services?.editorService.on("add", (newNodes) => {
|
|
9344
9240
|
newNodes.forEach((node) => {
|
|
9345
|
-
if (isPage(node) || isPageFragment(node))
|
|
9346
|
-
return;
|
|
9241
|
+
if (isPage(node) || isPageFragment(node)) return;
|
|
9347
9242
|
traverseNode(node, (node2) => {
|
|
9348
9243
|
nodeStatusMap.value?.set(node2.id, {
|
|
9349
9244
|
visible: true,
|
|
@@ -9395,8 +9290,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
9395
9290
|
};
|
|
9396
9291
|
const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
|
|
9397
9292
|
const collapseAllHandler = () => {
|
|
9398
|
-
if (!page.value || !nodeStatusMap.value)
|
|
9399
|
-
return;
|
|
9293
|
+
if (!page.value || !nodeStatusMap.value) return;
|
|
9400
9294
|
const items = nodeStatusMap.value.entries();
|
|
9401
9295
|
for (const [id, status] of items) {
|
|
9402
9296
|
if (id === page.value.id) {
|
|
@@ -9530,8 +9424,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
9530
9424
|
}
|
|
9531
9425
|
return;
|
|
9532
9426
|
}
|
|
9533
|
-
if (timeout || !stage.value)
|
|
9534
|
-
return;
|
|
9427
|
+
if (timeout || !stage.value) return;
|
|
9535
9428
|
timeout = stage.value.delayedMarkContainer(e);
|
|
9536
9429
|
};
|
|
9537
9430
|
return (_ctx, _cache) => {
|
|
@@ -9695,8 +9588,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
|
9695
9588
|
const isActiveTabShow = showingBoxKeys.value.some(
|
|
9696
9589
|
(key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text
|
|
9697
9590
|
);
|
|
9698
|
-
if (!isActiveTabShow && activeTabName.value)
|
|
9699
|
-
return;
|
|
9591
|
+
if (!isActiveTabShow && activeTabName.value) return;
|
|
9700
9592
|
const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
|
|
9701
9593
|
if (!nextSlideBarItem) {
|
|
9702
9594
|
activeTabName.value = "";
|
|
@@ -9951,8 +9843,7 @@ class ScrollViewer extends EventEmitter {
|
|
|
9951
9843
|
}
|
|
9952
9844
|
wheelHandler = (event) => {
|
|
9953
9845
|
const { deltaX, deltaY, currentTarget } = event;
|
|
9954
|
-
if (currentTarget !== this.container)
|
|
9955
|
-
return;
|
|
9846
|
+
if (currentTarget !== this.container) return;
|
|
9956
9847
|
let top;
|
|
9957
9848
|
if (this.scrollHeight > this.height) {
|
|
9958
9849
|
top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
|
|
@@ -10045,8 +9936,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
10045
9936
|
}));
|
|
10046
9937
|
let gesto;
|
|
10047
9938
|
onMounted(() => {
|
|
10048
|
-
if (!thumb.value)
|
|
10049
|
-
return;
|
|
9939
|
+
if (!thumb.value) return;
|
|
10050
9940
|
const thumbEl = thumb.value;
|
|
10051
9941
|
gesto = new Gesto(thumbEl, {
|
|
10052
9942
|
container: window
|
|
@@ -10060,8 +9950,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
10060
9950
|
bar.value?.addEventListener("wheel", wheelHandler, false);
|
|
10061
9951
|
});
|
|
10062
9952
|
onBeforeUnmount(() => {
|
|
10063
|
-
if (gesto)
|
|
10064
|
-
gesto.off();
|
|
9953
|
+
if (gesto) gesto.off();
|
|
10065
9954
|
bar.value?.removeEventListener("wheel", wheelHandler, false);
|
|
10066
9955
|
});
|
|
10067
9956
|
const wheelHandler = (e) => {
|
|
@@ -10140,8 +10029,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
10140
10029
|
const scrollHeight = ref(0);
|
|
10141
10030
|
let scrollViewer;
|
|
10142
10031
|
onMounted(() => {
|
|
10143
|
-
if (!container.value || !el.value)
|
|
10144
|
-
return;
|
|
10032
|
+
if (!container.value || !el.value) return;
|
|
10145
10033
|
scrollViewer = new ScrollViewer({
|
|
10146
10034
|
container: container.value,
|
|
10147
10035
|
target: el.value,
|
|
@@ -10234,8 +10122,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
10234
10122
|
const unWatch = watch(
|
|
10235
10123
|
stage,
|
|
10236
10124
|
(stage2) => {
|
|
10237
|
-
if (!stage2)
|
|
10238
|
-
return;
|
|
10125
|
+
if (!stage2) return;
|
|
10239
10126
|
nextTick(() => unWatch());
|
|
10240
10127
|
stage2.on("select", (el, event) => {
|
|
10241
10128
|
const els = stage2.renderer.getElementsFromPoint(event) || [];
|
|
@@ -10251,8 +10138,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
10251
10138
|
watch(
|
|
10252
10139
|
nodes,
|
|
10253
10140
|
(nodes2) => {
|
|
10254
|
-
if (!nodeStatusMap.value)
|
|
10255
|
-
return;
|
|
10141
|
+
if (!nodeStatusMap.value) return;
|
|
10256
10142
|
for (const [id, status] of nodeStatusMap.value.entries()) {
|
|
10257
10143
|
status.selected = nodes2.some((node) => node.id === id);
|
|
10258
10144
|
}
|
|
@@ -10346,8 +10232,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
10346
10232
|
}
|
|
10347
10233
|
});
|
|
10348
10234
|
watch(stageOverlay, (stageOverlay2) => {
|
|
10349
|
-
if (!services)
|
|
10350
|
-
return;
|
|
10235
|
+
if (!services) return;
|
|
10351
10236
|
const subStage = services.stageOverlayService.createStage(stageOptions);
|
|
10352
10237
|
services?.stageOverlayService.set("stage", subStage);
|
|
10353
10238
|
if (stageOverlay2 && subStage) {
|
|
@@ -10462,8 +10347,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
10462
10347
|
icon: markRaw(_sfc_main$5),
|
|
10463
10348
|
display: () => canCenter.value,
|
|
10464
10349
|
handler: () => {
|
|
10465
|
-
if (!nodes.value)
|
|
10466
|
-
return;
|
|
10350
|
+
if (!nodes.value) return;
|
|
10467
10351
|
editorService?.alignCenter(nodes.value);
|
|
10468
10352
|
}
|
|
10469
10353
|
},
|
|
@@ -10473,8 +10357,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
10473
10357
|
type: "divider",
|
|
10474
10358
|
direction: "horizontal",
|
|
10475
10359
|
display: () => {
|
|
10476
|
-
if (!node.value)
|
|
10477
|
-
return false;
|
|
10360
|
+
if (!node.value) return false;
|
|
10478
10361
|
return !isPage(node.value) && !isPageFragment(node.value);
|
|
10479
10362
|
}
|
|
10480
10363
|
},
|
|
@@ -10540,8 +10423,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
10540
10423
|
watch(
|
|
10541
10424
|
parent,
|
|
10542
10425
|
async () => {
|
|
10543
|
-
if (!parent.value || !editorService)
|
|
10544
|
-
return canCenter.value = false;
|
|
10426
|
+
if (!parent.value || !editorService) return canCenter.value = false;
|
|
10545
10427
|
const layout = await editorService.getLayout(parent.value);
|
|
10546
10428
|
const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
|
|
10547
10429
|
const isTypeConform = nodes.value?.every(
|
|
@@ -10592,12 +10474,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
10592
10474
|
const zoom = computed(() => services?.uiService.get("zoom") || 1);
|
|
10593
10475
|
const node = computed(() => services?.editorService.get("node"));
|
|
10594
10476
|
watchEffect(() => {
|
|
10595
|
-
if (stage || !page.value)
|
|
10596
|
-
|
|
10597
|
-
if (!
|
|
10598
|
-
return;
|
|
10599
|
-
if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
|
|
10600
|
-
return;
|
|
10477
|
+
if (stage || !page.value) return;
|
|
10478
|
+
if (!stageContainer.value) return;
|
|
10479
|
+
if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
|
|
10601
10480
|
stage = useStage(stageOptions);
|
|
10602
10481
|
stage.on("select", () => {
|
|
10603
10482
|
stageWrap.value?.container?.focus();
|
|
@@ -10617,8 +10496,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
10617
10496
|
});
|
|
10618
10497
|
});
|
|
10619
10498
|
watch(zoom, (zoom2) => {
|
|
10620
|
-
if (!stage || !zoom2)
|
|
10621
|
-
return;
|
|
10499
|
+
if (!stage || !zoom2) return;
|
|
10622
10500
|
stage.setZoom(zoom2);
|
|
10623
10501
|
});
|
|
10624
10502
|
watch(page, (page2) => {
|
|
@@ -10663,20 +10541,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
10663
10541
|
menu.value?.show(e);
|
|
10664
10542
|
};
|
|
10665
10543
|
const dragoverHandler = (e) => {
|
|
10666
|
-
if (!e.dataTransfer)
|
|
10667
|
-
return;
|
|
10544
|
+
if (!e.dataTransfer) return;
|
|
10668
10545
|
e.preventDefault();
|
|
10669
10546
|
e.dataTransfer.dropEffect = "move";
|
|
10670
10547
|
};
|
|
10671
10548
|
const dropHandler = async (e) => {
|
|
10672
|
-
if (!e.dataTransfer)
|
|
10673
|
-
return;
|
|
10549
|
+
if (!e.dataTransfer) return;
|
|
10674
10550
|
const data = e.dataTransfer.getData("text/json");
|
|
10675
|
-
if (!data)
|
|
10676
|
-
return;
|
|
10551
|
+
if (!data) return;
|
|
10677
10552
|
const config = parseDSL(`(${data})`);
|
|
10678
|
-
if (!config || config.dragType !== DragType.COMPONENT_LIST)
|
|
10679
|
-
return;
|
|
10553
|
+
if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
|
|
10680
10554
|
e.preventDefault();
|
|
10681
10555
|
const doc = stage?.renderer.contentWindow?.document;
|
|
10682
10556
|
const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
|
|
@@ -10881,11 +10755,9 @@ class CodeBlock extends BaseService {
|
|
|
10881
10755
|
* @returns {CodeBlockContent | null}
|
|
10882
10756
|
*/
|
|
10883
10757
|
getCodeContentById(id) {
|
|
10884
|
-
if (!id)
|
|
10885
|
-
return null;
|
|
10758
|
+
if (!id) return null;
|
|
10886
10759
|
const totalCodeDsl = this.getCodeDsl();
|
|
10887
|
-
if (!totalCodeDsl)
|
|
10888
|
-
return null;
|
|
10760
|
+
if (!totalCodeDsl) return null;
|
|
10889
10761
|
return totalCodeDsl[id] ?? null;
|
|
10890
10762
|
}
|
|
10891
10763
|
/**
|
|
@@ -10910,8 +10782,7 @@ class CodeBlock extends BaseService {
|
|
|
10910
10782
|
if (!codeDsl) {
|
|
10911
10783
|
throw new Error("dsl中没有codeBlocks");
|
|
10912
10784
|
}
|
|
10913
|
-
if (codeDsl[id] && !force)
|
|
10914
|
-
return;
|
|
10785
|
+
if (codeDsl[id] && !force) return;
|
|
10915
10786
|
const codeConfigProcessed = cloneDeep(codeConfig);
|
|
10916
10787
|
if (codeConfigProcessed.content) {
|
|
10917
10788
|
const parseDSL = getConfig("parseDSL");
|
|
@@ -11004,8 +10875,7 @@ class CodeBlock extends BaseService {
|
|
|
11004
10875
|
*/
|
|
11005
10876
|
async deleteCodeDslByIds(codeIds) {
|
|
11006
10877
|
const currentDsl = await this.getCodeDsl();
|
|
11007
|
-
if (!currentDsl)
|
|
11008
|
-
return;
|
|
10878
|
+
if (!currentDsl) return;
|
|
11009
10879
|
codeIds.forEach((id) => {
|
|
11010
10880
|
delete currentDsl[id];
|
|
11011
10881
|
this.emit("remove", id);
|
|
@@ -11025,8 +10895,7 @@ class CodeBlock extends BaseService {
|
|
|
11025
10895
|
const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
|
|
11026
10896
|
const dsl = await this.getCodeDsl();
|
|
11027
10897
|
const existedIds = keys(dsl);
|
|
11028
|
-
if (!existedIds.includes(newId))
|
|
11029
|
-
return newId;
|
|
10898
|
+
if (!existedIds.includes(newId)) return newId;
|
|
11030
10899
|
return await this.getUniqueId();
|
|
11031
10900
|
}
|
|
11032
10901
|
/**
|
|
@@ -11046,8 +10915,7 @@ class CodeBlock extends BaseService {
|
|
|
11046
10915
|
coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
|
|
11047
10916
|
Object.keys(customTarget.deps).forEach((nodeId) => {
|
|
11048
10917
|
const node = editorService.getNodeById(nodeId);
|
|
11049
|
-
if (!node)
|
|
11050
|
-
return;
|
|
10918
|
+
if (!node) return;
|
|
11051
10919
|
customTarget.deps[nodeId].keys.forEach((key) => {
|
|
11052
10920
|
const relateCodeId = get(node, key);
|
|
11053
10921
|
const isExist = Object.keys(copyData).find((codeId) => codeId === relateCodeId);
|
|
@@ -11170,8 +11038,7 @@ class Dep extends BaseService {
|
|
|
11170
11038
|
removeTargets(type = DepTargetType.DEFAULT) {
|
|
11171
11039
|
this.watcher.removeTargets(type);
|
|
11172
11040
|
const targets = this.watcher.getTargets(type);
|
|
11173
|
-
if (!targets)
|
|
11174
|
-
return;
|
|
11041
|
+
if (!targets) return;
|
|
11175
11042
|
for (const target of Object.values(targets)) {
|
|
11176
11043
|
this.emit("remove-target", target.id);
|
|
11177
11044
|
}
|
|
@@ -11312,8 +11179,7 @@ class Keybinding extends BaseService {
|
|
|
11312
11179
|
commands = {
|
|
11313
11180
|
[KeyBindingCommand.DELETE_NODE]: () => {
|
|
11314
11181
|
const nodes = editorService.get("nodes");
|
|
11315
|
-
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
|
|
11316
|
-
return;
|
|
11182
|
+
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
|
|
11317
11183
|
editorService.remove(nodes);
|
|
11318
11184
|
},
|
|
11319
11185
|
[KeyBindingCommand.COPY_NODE]: () => {
|
|
@@ -11322,8 +11188,7 @@ class Keybinding extends BaseService {
|
|
|
11322
11188
|
},
|
|
11323
11189
|
[KeyBindingCommand.CUT_NODE]: () => {
|
|
11324
11190
|
const nodes = editorService.get("nodes");
|
|
11325
|
-
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0]))
|
|
11326
|
-
return;
|
|
11191
|
+
if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
|
|
11327
11192
|
editorService.copy(nodes);
|
|
11328
11193
|
editorService.remove(nodes);
|
|
11329
11194
|
},
|
|
@@ -11512,8 +11377,7 @@ class StageOverlay extends BaseService {
|
|
|
11512
11377
|
}
|
|
11513
11378
|
openOverlay(el) {
|
|
11514
11379
|
const stageOptions = this.get("stageOptions");
|
|
11515
|
-
if (!el || !stageOptions)
|
|
11516
|
-
return;
|
|
11380
|
+
if (!el || !stageOptions) return;
|
|
11517
11381
|
this.set("sourceEl", el);
|
|
11518
11382
|
this.createContentEl();
|
|
11519
11383
|
this.set("stageOverlayVisible", true);
|
|
@@ -11540,8 +11404,7 @@ class StageOverlay extends BaseService {
|
|
|
11540
11404
|
}
|
|
11541
11405
|
updateOverlay() {
|
|
11542
11406
|
const sourceEl = this.get("sourceEl");
|
|
11543
|
-
if (!sourceEl)
|
|
11544
|
-
return;
|
|
11407
|
+
if (!sourceEl) return;
|
|
11545
11408
|
const { scrollWidth, scrollHeight } = sourceEl;
|
|
11546
11409
|
this.set("wrapWidth", scrollWidth);
|
|
11547
11410
|
this.set("wrapHeight", scrollHeight);
|
|
@@ -11574,8 +11437,7 @@ class StageOverlay extends BaseService {
|
|
|
11574
11437
|
}
|
|
11575
11438
|
createContentEl() {
|
|
11576
11439
|
const sourceEl = this.get("sourceEl");
|
|
11577
|
-
if (!sourceEl)
|
|
11578
|
-
return;
|
|
11440
|
+
if (!sourceEl) return;
|
|
11579
11441
|
const contentEl = sourceEl.cloneNode(true);
|
|
11580
11442
|
this.set("contentEl", contentEl);
|
|
11581
11443
|
contentEl.style.position = "static";
|
|
@@ -11597,8 +11459,7 @@ class StageOverlay extends BaseService {
|
|
|
11597
11459
|
const wrapDiv = this.get("wrapDiv");
|
|
11598
11460
|
const subStage = this.get("stage");
|
|
11599
11461
|
const stageOptions = this.get("stageOptions");
|
|
11600
|
-
if (!contentEl)
|
|
11601
|
-
return;
|
|
11462
|
+
if (!contentEl) return;
|
|
11602
11463
|
wrapDiv.style.cssText = `
|
|
11603
11464
|
width: ${sourceEl?.scrollWidth}px;
|
|
11604
11465
|
height: ${sourceEl?.scrollHeight}px;
|
|
@@ -11818,37 +11679,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
|
|
|
11818
11679
|
getApp()?.dataSourceManager?.updateSchema(root.dataSources);
|
|
11819
11680
|
}
|
|
11820
11681
|
};
|
|
11821
|
-
const updateNodeWhenDataSourceChange = (nodes) => {
|
|
11822
|
-
const root = editorService.get("root");
|
|
11823
|
-
const stage = editorService.get("stage");
|
|
11824
|
-
if (!root || !stage)
|
|
11825
|
-
return;
|
|
11826
|
-
const app = getApp();
|
|
11827
|
-
if (!app)
|
|
11828
|
-
return;
|
|
11829
|
-
if (app.dsl) {
|
|
11830
|
-
app.dsl.dataSourceDeps = root.dataSourceDeps;
|
|
11831
|
-
app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
|
|
11832
|
-
app.dsl.dataSources = root.dataSources;
|
|
11833
|
-
}
|
|
11834
|
-
updateDataSourceSchema();
|
|
11835
|
-
nodes.forEach((node) => {
|
|
11836
|
-
const deps = Object.values(root.dataSourceDeps || {});
|
|
11837
|
-
deps.forEach((dep) => {
|
|
11838
|
-
if (dep[node.id]) {
|
|
11839
|
-
stage.update({
|
|
11840
|
-
config: cloneDeep(node),
|
|
11841
|
-
parentId: editorService.getParentById(node.id)?.id,
|
|
11842
|
-
root: cloneDeep(root)
|
|
11843
|
-
});
|
|
11844
|
-
}
|
|
11845
|
-
});
|
|
11846
|
-
});
|
|
11847
|
-
};
|
|
11848
11682
|
const targetAddHandler = (target) => {
|
|
11849
11683
|
const root = editorService.get("root");
|
|
11850
|
-
if (!root)
|
|
11851
|
-
return;
|
|
11684
|
+
if (!root) return;
|
|
11852
11685
|
if (target.type === DepTargetType.DATA_SOURCE) {
|
|
11853
11686
|
if (!root.dataSourceDeps) {
|
|
11854
11687
|
root.dataSourceDeps = {};
|
|
@@ -11871,8 +11704,41 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
|
|
|
11871
11704
|
delete root.dataSourceCondDeps[id];
|
|
11872
11705
|
}
|
|
11873
11706
|
};
|
|
11874
|
-
const collectedHandler = (nodes) => {
|
|
11875
|
-
|
|
11707
|
+
const collectedHandler = (nodes, deep) => {
|
|
11708
|
+
const root = editorService.get("root");
|
|
11709
|
+
const stage = editorService.get("stage");
|
|
11710
|
+
if (!root || !stage) return;
|
|
11711
|
+
const app = getApp();
|
|
11712
|
+
if (!app) return;
|
|
11713
|
+
if (app.dsl) {
|
|
11714
|
+
app.dsl.dataSourceDeps = root.dataSourceDeps;
|
|
11715
|
+
app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
|
|
11716
|
+
app.dsl.dataSources = root.dataSources;
|
|
11717
|
+
}
|
|
11718
|
+
updateDataSourceSchema();
|
|
11719
|
+
const allNodes = [];
|
|
11720
|
+
if (deep) {
|
|
11721
|
+
nodes.forEach((node) => {
|
|
11722
|
+
traverseNode(node, (node2) => {
|
|
11723
|
+
if (!allNodes.includes(node2)) {
|
|
11724
|
+
allNodes.push(node2);
|
|
11725
|
+
}
|
|
11726
|
+
});
|
|
11727
|
+
});
|
|
11728
|
+
} else {
|
|
11729
|
+
allNodes.push(...nodes);
|
|
11730
|
+
}
|
|
11731
|
+
const deps = Object.values(root.dataSourceDeps || {});
|
|
11732
|
+
deps.forEach((dep) => {
|
|
11733
|
+
Object.keys(dep).forEach((id) => {
|
|
11734
|
+
const node = allNodes.find((node2) => node2.id === id);
|
|
11735
|
+
node && stage.update({
|
|
11736
|
+
config: cloneDeep(node),
|
|
11737
|
+
parentId: editorService.getParentById(node.id)?.id,
|
|
11738
|
+
root: cloneDeep(root)
|
|
11739
|
+
});
|
|
11740
|
+
});
|
|
11741
|
+
});
|
|
11876
11742
|
};
|
|
11877
11743
|
depService.on("add-target", targetAddHandler);
|
|
11878
11744
|
depService.on("remove-target", targetRemoveHandler);
|
|
@@ -11883,8 +11749,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
|
|
|
11883
11749
|
depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
|
|
11884
11750
|
};
|
|
11885
11751
|
const rootChangeHandler = async (value, preValue) => {
|
|
11886
|
-
if (!value)
|
|
11887
|
-
return;
|
|
11752
|
+
if (!value) return;
|
|
11888
11753
|
value.codeBlocks = value.codeBlocks || {};
|
|
11889
11754
|
value.dataSources = value.dataSources || [];
|
|
11890
11755
|
codeBlockService.setCodeDsl(value.codeBlocks);
|
|
@@ -11974,9 +11839,6 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
|
|
|
11974
11839
|
(root?.items || []).forEach((page) => {
|
|
11975
11840
|
depService.collectIdle([page], { pageId: page.id }, true);
|
|
11976
11841
|
});
|
|
11977
|
-
const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
|
|
11978
|
-
const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
|
|
11979
|
-
updateNodeWhenDataSourceChange(nodes);
|
|
11980
11842
|
};
|
|
11981
11843
|
const removeDataSourceTarget = (id) => {
|
|
11982
11844
|
depService.removeTarget(id, DepTargetType.DATA_SOURCE);
|
|
@@ -12242,4 +12104,4 @@ const index = {
|
|
|
12242
12104
|
}
|
|
12243
12105
|
};
|
|
12244
12106
|
|
|
12245
|
-
export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y 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, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
|
|
12107
|
+
export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y 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, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
|