@tmagic/editor 1.7.9 → 1.7.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +3 -1
- package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js +17 -7
- package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +38 -9
- package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +3 -1
- package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +38 -5
- package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +3 -2
- package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/es/fields/StyleSetter/Index.vue_vue_type_script_setup_true_lang.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Transform.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js +54 -0
- package/dist/es/hooks/use-code-block-edit.js +3 -2
- package/dist/es/hooks/use-stage.js +5 -1
- package/dist/es/index.js +3 -3
- package/dist/es/initService.js +4 -4
- package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js +2 -0
- package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js +64 -1
- package/dist/es/layouts/workspace/viewer/StageOverlay.vue_vue_type_script_setup_true_lang.js +1 -5
- package/dist/es/services/editor.js +191 -174
- package/dist/es/services/history.js +1 -9
- package/dist/es/services/props.js +2 -0
- package/dist/es/services/ui.js +1 -0
- package/dist/es/type.js +28 -1
- package/dist/es/utils/dep/worker.js +1 -1
- package/dist/es/utils/editor-history.js +100 -0
- package/dist/es/utils/editor.js +178 -4
- package/dist/es/utils/props.js +6 -2
- package/dist/es/utils/undo-redo.js +7 -4
- package/dist/tmagic-editor.umd.cjs +768 -246
- package/package.json +9 -9
- package/src/Editor.vue +1 -0
- package/src/components/CodeBlockEditor.vue +1 -1
- package/src/components/CodeParams.vue +23 -7
- package/src/editorProps.ts +2 -0
- package/src/fields/DataSourceFieldSelect/FieldSelect.vue +39 -6
- package/src/fields/DataSourceFieldSelect/Index.vue +1 -0
- package/src/fields/DataSourceMethodSelect.vue +54 -13
- package/src/fields/DataSourceMethods.vue +9 -5
- package/src/fields/DisplayConds.vue +1 -0
- package/src/fields/StyleSetter/Index.vue +5 -1
- package/src/fields/StyleSetter/pro/Transform.vue +54 -0
- package/src/fields/StyleSetter/pro/index.ts +1 -0
- package/src/hooks/use-code-block-edit.ts +8 -4
- package/src/hooks/use-stage.ts +11 -4
- package/src/initService.ts +6 -6
- package/src/layouts/NavMenu.vue +2 -0
- package/src/layouts/workspace/viewer/Stage.vue +89 -1
- package/src/layouts/workspace/viewer/StageOverlay.vue +1 -6
- package/src/services/editor.ts +231 -270
- package/src/services/history.ts +1 -9
- package/src/services/ui.ts +1 -0
- package/src/type.ts +67 -5
- package/src/utils/editor-history.ts +138 -0
- package/src/utils/editor.ts +249 -4
- package/src/utils/props.ts +5 -0
- package/src/utils/undo-redo.ts +7 -6
- package/types/index.d.ts +611 -491
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
enumerable: true
|
|
45
45
|
}) : target, mod));
|
|
46
46
|
//#endregion
|
|
47
|
-
_tmagic_form = __toESM(_tmagic_form);
|
|
48
|
-
_tmagic_table = __toESM(_tmagic_table);
|
|
49
|
-
_tmagic_stage = __toESM(_tmagic_stage);
|
|
50
|
-
_tmagic_design = __toESM(_tmagic_design);
|
|
51
|
-
serialize_javascript = __toESM(serialize_javascript);
|
|
52
|
-
gesto = __toESM(gesto);
|
|
53
|
-
sortablejs = __toESM(sortablejs);
|
|
54
|
-
moveable = __toESM(moveable);
|
|
55
|
-
keycon = __toESM(keycon);
|
|
47
|
+
_tmagic_form = __toESM(_tmagic_form, 1);
|
|
48
|
+
_tmagic_table = __toESM(_tmagic_table, 1);
|
|
49
|
+
_tmagic_stage = __toESM(_tmagic_stage, 1);
|
|
50
|
+
_tmagic_design = __toESM(_tmagic_design, 1);
|
|
51
|
+
serialize_javascript = __toESM(serialize_javascript, 1);
|
|
52
|
+
gesto = __toESM(gesto, 1);
|
|
53
|
+
sortablejs = __toESM(sortablejs, 1);
|
|
54
|
+
moveable = __toESM(moveable, 1);
|
|
55
|
+
keycon = __toESM(keycon, 1);
|
|
56
56
|
//#region packages/editor/src/type.ts
|
|
57
57
|
var ColumnLayout = /* @__PURE__ */ function(ColumnLayout) {
|
|
58
58
|
ColumnLayout["LEFT"] = "left";
|
|
@@ -141,6 +141,33 @@
|
|
|
141
141
|
DragType["LAYER_TREE"] = "layer-tree";
|
|
142
142
|
return DragType;
|
|
143
143
|
}({});
|
|
144
|
+
var canUsePluginMethods = {
|
|
145
|
+
async: [
|
|
146
|
+
"getLayout",
|
|
147
|
+
"highlight",
|
|
148
|
+
"select",
|
|
149
|
+
"multiSelect",
|
|
150
|
+
"doAdd",
|
|
151
|
+
"add",
|
|
152
|
+
"doRemove",
|
|
153
|
+
"remove",
|
|
154
|
+
"doUpdate",
|
|
155
|
+
"update",
|
|
156
|
+
"sort",
|
|
157
|
+
"copy",
|
|
158
|
+
"paste",
|
|
159
|
+
"doPaste",
|
|
160
|
+
"doAlignCenter",
|
|
161
|
+
"alignCenter",
|
|
162
|
+
"moveLayer",
|
|
163
|
+
"moveToContainer",
|
|
164
|
+
"dragTo",
|
|
165
|
+
"undo",
|
|
166
|
+
"redo",
|
|
167
|
+
"move"
|
|
168
|
+
],
|
|
169
|
+
sync: []
|
|
170
|
+
};
|
|
144
171
|
//#endregion
|
|
145
172
|
//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_freeGlobal.js
|
|
146
173
|
/** Detect free variable `global` from Node.js. */
|
|
@@ -2270,7 +2297,8 @@
|
|
|
2270
2297
|
* @param {Array} [entries] The key-value pairs to cache.
|
|
2271
2298
|
*/
|
|
2272
2299
|
function Stack(entries) {
|
|
2273
|
-
|
|
2300
|
+
var data = this.__data__ = new ListCache(entries);
|
|
2301
|
+
this.size = data.size;
|
|
2274
2302
|
}
|
|
2275
2303
|
Stack.prototype.clear = stackClear;
|
|
2276
2304
|
Stack.prototype["delete"] = stackDelete;
|
|
@@ -4259,8 +4287,9 @@
|
|
|
4259
4287
|
_tmagic_design.tMagicMessage.error("获取代码块内容失败");
|
|
4260
4288
|
return;
|
|
4261
4289
|
}
|
|
4262
|
-
let codeContent =
|
|
4263
|
-
if (typeof
|
|
4290
|
+
let codeContent = "";
|
|
4291
|
+
if (codeBlock.content) if (typeof codeBlock.content !== "string") codeContent = codeBlock.content.toString();
|
|
4292
|
+
else codeContent = codeBlock.content;
|
|
4264
4293
|
codeConfig.value = {
|
|
4265
4294
|
...cloneDeep(codeBlock),
|
|
4266
4295
|
content: codeContent
|
|
@@ -4574,8 +4603,12 @@
|
|
|
4574
4603
|
"borderLeftColor",
|
|
4575
4604
|
"borderWidth",
|
|
4576
4605
|
"borderStyle",
|
|
4577
|
-
"borderColor"
|
|
4578
|
-
|
|
4606
|
+
"borderColor",
|
|
4607
|
+
"opacity"
|
|
4608
|
+
] }, {
|
|
4609
|
+
name: "transform",
|
|
4610
|
+
defaultValue: () => ({})
|
|
4611
|
+
}]
|
|
4579
4612
|
}]
|
|
4580
4613
|
};
|
|
4581
4614
|
var eventTabConfig = {
|
|
@@ -4722,7 +4755,9 @@
|
|
|
4722
4755
|
propsConfigMap: {},
|
|
4723
4756
|
propsValueMap: {},
|
|
4724
4757
|
relateIdMap: {},
|
|
4758
|
+
/** 禁用数据源 */
|
|
4725
4759
|
disabledDataSource: false,
|
|
4760
|
+
/** 禁用代码块 */
|
|
4726
4761
|
disabledCodeBlock: false
|
|
4727
4762
|
});
|
|
4728
4763
|
constructor() {
|
|
@@ -4918,7 +4953,7 @@
|
|
|
4918
4953
|
elementList;
|
|
4919
4954
|
listCursor;
|
|
4920
4955
|
listMaxSize;
|
|
4921
|
-
constructor(listMaxSize =
|
|
4956
|
+
constructor(listMaxSize = 100) {
|
|
4922
4957
|
const minListMaxSize = 2;
|
|
4923
4958
|
this.elementList = [];
|
|
4924
4959
|
this.listCursor = 0;
|
|
@@ -4933,20 +4968,23 @@
|
|
|
4933
4968
|
}
|
|
4934
4969
|
}
|
|
4935
4970
|
canUndo() {
|
|
4936
|
-
return this.listCursor >
|
|
4971
|
+
return this.listCursor > 0;
|
|
4937
4972
|
}
|
|
4973
|
+
/** 返回被撤销的操作 */
|
|
4938
4974
|
undo() {
|
|
4939
4975
|
if (!this.canUndo()) return null;
|
|
4940
4976
|
this.listCursor -= 1;
|
|
4941
|
-
return this.
|
|
4977
|
+
return cloneDeep(this.elementList[this.listCursor]);
|
|
4942
4978
|
}
|
|
4943
4979
|
canRedo() {
|
|
4944
4980
|
return this.elementList.length > this.listCursor;
|
|
4945
4981
|
}
|
|
4982
|
+
/** 返回被重做的操作 */
|
|
4946
4983
|
redo() {
|
|
4947
4984
|
if (!this.canRedo()) return null;
|
|
4985
|
+
const element = cloneDeep(this.elementList[this.listCursor]);
|
|
4948
4986
|
this.listCursor += 1;
|
|
4949
|
-
return
|
|
4987
|
+
return element;
|
|
4950
4988
|
}
|
|
4951
4989
|
getCurrentElement() {
|
|
4952
4990
|
if (this.listCursor < 1) return null;
|
|
@@ -4978,15 +5016,7 @@
|
|
|
4978
5016
|
changePage(page) {
|
|
4979
5017
|
if (!page) return;
|
|
4980
5018
|
this.state.pageId = page.id;
|
|
4981
|
-
if (!this.state.pageSteps[this.state.pageId])
|
|
4982
|
-
const undoRedo = new UndoRedo();
|
|
4983
|
-
undoRedo.pushElement({
|
|
4984
|
-
data: page,
|
|
4985
|
-
modifiedNodeIds: /* @__PURE__ */ new Map(),
|
|
4986
|
-
nodeId: page.id
|
|
4987
|
-
});
|
|
4988
|
-
this.state.pageSteps[this.state.pageId] = undoRedo;
|
|
4989
|
-
}
|
|
5019
|
+
if (!this.state.pageSteps[this.state.pageId]) this.state.pageSteps[this.state.pageId] = new UndoRedo();
|
|
4990
5020
|
this.setCanUndoRedo();
|
|
4991
5021
|
this.emit("page-change", this.state.pageSteps[this.state.pageId]);
|
|
4992
5022
|
}
|
|
@@ -5417,6 +5447,273 @@
|
|
|
5417
5447
|
buildChangeRecords(value, basePath);
|
|
5418
5448
|
return changeRecords;
|
|
5419
5449
|
};
|
|
5450
|
+
/**
|
|
5451
|
+
* 根据节点配置或ID解析出选中节点信息,并进行合法性校验
|
|
5452
|
+
* @param config 节点配置或节点ID
|
|
5453
|
+
* @param getNodeInfoFn 获取节点信息的回调函数
|
|
5454
|
+
* @param rootId 根节点ID,用于排除根节点被选中
|
|
5455
|
+
* @returns 选中节点的完整信息(node、parent、page)
|
|
5456
|
+
*/
|
|
5457
|
+
var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
|
|
5458
|
+
const id = typeof config === "string" || typeof config === "number" ? config : config.id;
|
|
5459
|
+
if (!id) throw new Error("没有ID,无法选中");
|
|
5460
|
+
const { node, parent, page } = getNodeInfoFn(id);
|
|
5461
|
+
if (!node) throw new Error("获取不到组件信息");
|
|
5462
|
+
if (node.id === rootId) throw new Error("不能选根节点");
|
|
5463
|
+
return {
|
|
5464
|
+
node,
|
|
5465
|
+
parent,
|
|
5466
|
+
page
|
|
5467
|
+
};
|
|
5468
|
+
};
|
|
5469
|
+
/**
|
|
5470
|
+
* 处理节点在 fixed 定位与其他定位之间的切换
|
|
5471
|
+
* 当节点从非 fixed 变为 fixed 时,根据节点路径累加偏移量;反之则还原偏移量
|
|
5472
|
+
* @param dist 更新后的节点配置(目标状态)
|
|
5473
|
+
* @param src 更新前的节点配置(原始状态)
|
|
5474
|
+
* @param root 根节点配置,用于计算节点路径上的偏移量
|
|
5475
|
+
* @param getLayoutFn 获取父节点布局方式的回调函数
|
|
5476
|
+
* @returns 处理后的节点配置(深拷贝)
|
|
5477
|
+
*/
|
|
5478
|
+
var toggleFixedPosition = async (dist, src, root, getLayoutFn) => {
|
|
5479
|
+
const newConfig = cloneDeep(dist);
|
|
5480
|
+
if (!(0, _tmagic_utils.isPop)(src) && newConfig.style?.position) {
|
|
5481
|
+
if ((0, _tmagic_stage.isFixed)(newConfig.style) && !(0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = change2Fixed(newConfig, root);
|
|
5482
|
+
else if (!(0, _tmagic_stage.isFixed)(newConfig.style) && (0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
|
|
5483
|
+
}
|
|
5484
|
+
return newConfig;
|
|
5485
|
+
};
|
|
5486
|
+
/**
|
|
5487
|
+
* 根据键盘移动的偏移量计算节点的新样式
|
|
5488
|
+
* 仅对 absolute 或 fixed 定位的节点生效;优先修改 top/left,若未设置则修改 bottom/right
|
|
5489
|
+
* @param style 节点当前样式
|
|
5490
|
+
* @param left 水平方向偏移量(正值向右,负值向左)
|
|
5491
|
+
* @param top 垂直方向偏移量(正值向下,负值向上)
|
|
5492
|
+
* @returns 计算后的新样式对象,若节点不支持移动则返回 null
|
|
5493
|
+
*/
|
|
5494
|
+
var calcMoveStyle = (style, left, top) => {
|
|
5495
|
+
if (!style || !["absolute", "fixed"].includes(style.position)) return null;
|
|
5496
|
+
const newStyle = { ...style };
|
|
5497
|
+
if (top) {
|
|
5498
|
+
if ((0, _tmagic_utils.isNumber)(style.top)) {
|
|
5499
|
+
newStyle.top = Number(style.top) + Number(top);
|
|
5500
|
+
newStyle.bottom = "";
|
|
5501
|
+
} else if ((0, _tmagic_utils.isNumber)(style.bottom)) {
|
|
5502
|
+
newStyle.bottom = Number(style.bottom) - Number(top);
|
|
5503
|
+
newStyle.top = "";
|
|
5504
|
+
}
|
|
5505
|
+
}
|
|
5506
|
+
if (left) {
|
|
5507
|
+
if ((0, _tmagic_utils.isNumber)(style.left)) {
|
|
5508
|
+
newStyle.left = Number(style.left) + Number(left);
|
|
5509
|
+
newStyle.right = "";
|
|
5510
|
+
} else if ((0, _tmagic_utils.isNumber)(style.right)) {
|
|
5511
|
+
newStyle.right = Number(style.right) - Number(left);
|
|
5512
|
+
newStyle.left = "";
|
|
5513
|
+
}
|
|
5514
|
+
}
|
|
5515
|
+
return newStyle;
|
|
5516
|
+
};
|
|
5517
|
+
/**
|
|
5518
|
+
* 计算节点水平居中对齐后的样式
|
|
5519
|
+
* 流式布局(relative)下不做处理;优先通过 DOM 元素实际宽度计算,回退到配置中的 width 值
|
|
5520
|
+
* @param node 需要居中的节点配置
|
|
5521
|
+
* @param parent 父容器节点配置
|
|
5522
|
+
* @param layout 当前布局方式
|
|
5523
|
+
* @param doc 画布 document 对象,用于获取 DOM 元素实际宽度
|
|
5524
|
+
* @returns 计算后的新样式对象,若不支持居中则返回 null
|
|
5525
|
+
*/
|
|
5526
|
+
var calcAlignCenterStyle = (node, parent, layout, doc) => {
|
|
5527
|
+
if (layout === Layout.RELATIVE || !node.style) return null;
|
|
5528
|
+
const style = { ...node.style };
|
|
5529
|
+
if (doc) {
|
|
5530
|
+
const el = (0, _tmagic_utils.getElById)()(doc, node.id);
|
|
5531
|
+
const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
|
|
5532
|
+
if (parentEl && el) {
|
|
5533
|
+
style.left = (0, _tmagic_utils.calcValueByFontsize)(doc, (parentEl.clientWidth - el.clientWidth) / 2);
|
|
5534
|
+
style.right = "";
|
|
5535
|
+
}
|
|
5536
|
+
} else if (parent.style && (0, _tmagic_utils.isNumber)(parent.style?.width) && (0, _tmagic_utils.isNumber)(node.style?.width)) {
|
|
5537
|
+
style.left = (parent.style.width - node.style.width) / 2;
|
|
5538
|
+
style.right = "";
|
|
5539
|
+
}
|
|
5540
|
+
return style;
|
|
5541
|
+
};
|
|
5542
|
+
/**
|
|
5543
|
+
* 计算图层移动后的目标索引
|
|
5544
|
+
* 流式布局与绝对定位布局的移动方向相反:流式布局中"上移"对应索引减小,绝对定位中"上移"对应索引增大
|
|
5545
|
+
* @param currentIndex 节点当前在兄弟列表中的索引
|
|
5546
|
+
* @param offset 移动偏移量,支持数值或 LayerOffset.TOP / LayerOffset.BOTTOM
|
|
5547
|
+
* @param brothersLength 兄弟节点总数
|
|
5548
|
+
* @param isRelative 是否为流式布局
|
|
5549
|
+
* @returns 目标索引位置
|
|
5550
|
+
*/
|
|
5551
|
+
var calcLayerTargetIndex = (currentIndex, offset, brothersLength, isRelative) => {
|
|
5552
|
+
if (offset === LayerOffset.TOP) return isRelative ? 0 : brothersLength;
|
|
5553
|
+
if (offset === LayerOffset.BOTTOM) return isRelative ? brothersLength : 0;
|
|
5554
|
+
return currentIndex + (isRelative ? -offset : offset);
|
|
5555
|
+
};
|
|
5556
|
+
/**
|
|
5557
|
+
* 节点配置合并策略:用于 mergeWith 的自定义回调
|
|
5558
|
+
* - undefined 且 source 拥有该 key 时返回空字符串
|
|
5559
|
+
* - 原来是数组而新值是对象时,使用新值
|
|
5560
|
+
* - 新值是数组时,直接替换而非逐元素合并
|
|
5561
|
+
*/
|
|
5562
|
+
var editorNodeMergeCustomizer = (objValue, srcValue, key, _object, source) => {
|
|
5563
|
+
if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) return "";
|
|
5564
|
+
if (isObject(srcValue) && Array.isArray(objValue)) return srcValue;
|
|
5565
|
+
if (Array.isArray(srcValue)) return srcValue;
|
|
5566
|
+
};
|
|
5567
|
+
/**
|
|
5568
|
+
* 收集复制节点关联的依赖节点,将关联节点追加到 copyNodes 数组中
|
|
5569
|
+
* @param copyNodes 待复制的节点列表(会被就地修改)
|
|
5570
|
+
* @param collectorOptions 依赖收集器配置
|
|
5571
|
+
* @param getNodeById 根据 ID 获取节点的回调函数
|
|
5572
|
+
*/
|
|
5573
|
+
var collectRelatedNodes = (copyNodes, collectorOptions, getNodeById) => {
|
|
5574
|
+
const customTarget = new _tmagic_core.Target({ ...collectorOptions });
|
|
5575
|
+
const coperWatcher = new _tmagic_core.Watcher();
|
|
5576
|
+
coperWatcher.addTarget(customTarget);
|
|
5577
|
+
coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
|
|
5578
|
+
Object.keys(customTarget.deps).forEach((nodeId) => {
|
|
5579
|
+
const node = getNodeById(nodeId);
|
|
5580
|
+
if (!node) return;
|
|
5581
|
+
customTarget.deps[nodeId].keys.forEach((key) => {
|
|
5582
|
+
const relateNodeId = get(node, key);
|
|
5583
|
+
if (!copyNodes.find((n) => n.id === relateNodeId)) {
|
|
5584
|
+
const relateNode = getNodeById(relateNodeId);
|
|
5585
|
+
if (relateNode) copyNodes.push(relateNode);
|
|
5586
|
+
}
|
|
5587
|
+
});
|
|
5588
|
+
});
|
|
5589
|
+
};
|
|
5590
|
+
/**
|
|
5591
|
+
* 对拖拽的节点进行分类:同父容器内移动 vs 跨容器移动
|
|
5592
|
+
* @param configs 被拖拽的节点列表
|
|
5593
|
+
* @param targetParent 目标父容器
|
|
5594
|
+
* @param getNodeInfo 获取节点信息的回调
|
|
5595
|
+
* @returns 分类结果,包含同容器索引列表和跨容器节点列表
|
|
5596
|
+
*/
|
|
5597
|
+
var classifyDragSources = (configs, targetParent, getNodeInfo) => {
|
|
5598
|
+
const sameParentIndices = [];
|
|
5599
|
+
const crossParentConfigs = [];
|
|
5600
|
+
for (const config of configs) {
|
|
5601
|
+
const { parent, node: curNode } = getNodeInfo(config.id, false);
|
|
5602
|
+
if (!parent || !curNode) continue;
|
|
5603
|
+
if ((0, _tmagic_utils.getNodePath)(curNode.id, parent.items).some((node) => `${targetParent.id}` === `${node.id}`)) continue;
|
|
5604
|
+
const index = getNodeIndex(curNode.id, parent);
|
|
5605
|
+
if (`${parent.id}` === `${targetParent.id}`) {
|
|
5606
|
+
if (typeof index !== "number" || index === -1) return {
|
|
5607
|
+
sameParentIndices,
|
|
5608
|
+
crossParentConfigs,
|
|
5609
|
+
aborted: true
|
|
5610
|
+
};
|
|
5611
|
+
sameParentIndices.push(index);
|
|
5612
|
+
} else crossParentConfigs.push({
|
|
5613
|
+
config,
|
|
5614
|
+
parent
|
|
5615
|
+
});
|
|
5616
|
+
}
|
|
5617
|
+
return {
|
|
5618
|
+
sameParentIndices,
|
|
5619
|
+
crossParentConfigs,
|
|
5620
|
+
aborted: false
|
|
5621
|
+
};
|
|
5622
|
+
};
|
|
5623
|
+
//#endregion
|
|
5624
|
+
//#region packages/editor/src/utils/editor-history.ts
|
|
5625
|
+
/**
|
|
5626
|
+
* 应用 add 类型的历史操作
|
|
5627
|
+
* reverse=true(撤销):从父节点中移除已添加的节点
|
|
5628
|
+
* reverse=false(重做):重新添加节点到父节点中
|
|
5629
|
+
*/
|
|
5630
|
+
async function applyHistoryAddOp(step, reverse, ctx) {
|
|
5631
|
+
const { root, stage } = ctx;
|
|
5632
|
+
if (reverse) for (const node of step.nodes ?? []) {
|
|
5633
|
+
const parent = ctx.getNodeById(step.parentId, false);
|
|
5634
|
+
if (!parent?.items) continue;
|
|
5635
|
+
const idx = getNodeIndex(node.id, parent);
|
|
5636
|
+
if (typeof idx === "number" && idx !== -1) parent.items.splice(idx, 1);
|
|
5637
|
+
await stage?.remove({
|
|
5638
|
+
id: node.id,
|
|
5639
|
+
parentId: parent.id,
|
|
5640
|
+
root: cloneDeep(root)
|
|
5641
|
+
});
|
|
5642
|
+
}
|
|
5643
|
+
else {
|
|
5644
|
+
const parent = ctx.getNodeById(step.parentId, false);
|
|
5645
|
+
if (parent?.items) for (const node of step.nodes ?? []) {
|
|
5646
|
+
const idx = step.indexMap?.[node.id] ?? parent.items.length;
|
|
5647
|
+
parent.items.splice(idx, 0, cloneDeep(node));
|
|
5648
|
+
await stage?.add({
|
|
5649
|
+
config: cloneDeep(node),
|
|
5650
|
+
parent: cloneDeep(parent),
|
|
5651
|
+
parentId: parent.id,
|
|
5652
|
+
root: cloneDeep(root)
|
|
5653
|
+
});
|
|
5654
|
+
}
|
|
5655
|
+
}
|
|
5656
|
+
}
|
|
5657
|
+
/**
|
|
5658
|
+
* 应用 remove 类型的历史操作
|
|
5659
|
+
* reverse=true(撤销):将已删除的节点按原位置重新插入
|
|
5660
|
+
* reverse=false(重做):再次删除节点
|
|
5661
|
+
*/
|
|
5662
|
+
async function applyHistoryRemoveOp(step, reverse, ctx) {
|
|
5663
|
+
const { root, stage } = ctx;
|
|
5664
|
+
if (reverse) {
|
|
5665
|
+
const sorted = [...step.removedItems ?? []].sort((a, b) => a.index - b.index);
|
|
5666
|
+
for (const { node, parentId, index } of sorted) {
|
|
5667
|
+
const parent = ctx.getNodeById(parentId, false);
|
|
5668
|
+
if (!parent?.items) continue;
|
|
5669
|
+
parent.items.splice(index, 0, cloneDeep(node));
|
|
5670
|
+
await stage?.add({
|
|
5671
|
+
config: cloneDeep(node),
|
|
5672
|
+
parent: cloneDeep(parent),
|
|
5673
|
+
parentId,
|
|
5674
|
+
root: cloneDeep(root)
|
|
5675
|
+
});
|
|
5676
|
+
}
|
|
5677
|
+
} else for (const { node, parentId } of step.removedItems ?? []) {
|
|
5678
|
+
const parent = ctx.getNodeById(parentId, false);
|
|
5679
|
+
if (!parent?.items) continue;
|
|
5680
|
+
const idx = getNodeIndex(node.id, parent);
|
|
5681
|
+
if (typeof idx === "number" && idx !== -1) parent.items.splice(idx, 1);
|
|
5682
|
+
await stage?.remove({
|
|
5683
|
+
id: node.id,
|
|
5684
|
+
parentId,
|
|
5685
|
+
root: cloneDeep(root)
|
|
5686
|
+
});
|
|
5687
|
+
}
|
|
5688
|
+
}
|
|
5689
|
+
/**
|
|
5690
|
+
* 应用 update 类型的历史操作
|
|
5691
|
+
* reverse=true(撤销):将节点恢复为 oldNode
|
|
5692
|
+
* reverse=false(重做):将节点更新为 newNode
|
|
5693
|
+
*/
|
|
5694
|
+
async function applyHistoryUpdateOp(step, reverse, ctx) {
|
|
5695
|
+
const { root, stage } = ctx;
|
|
5696
|
+
const items = step.updatedItems ?? [];
|
|
5697
|
+
for (const { oldNode, newNode } of items) {
|
|
5698
|
+
const config = reverse ? oldNode : newNode;
|
|
5699
|
+
if (config.type === _tmagic_core.NodeType.ROOT) {
|
|
5700
|
+
ctx.setRoot(cloneDeep(config));
|
|
5701
|
+
continue;
|
|
5702
|
+
}
|
|
5703
|
+
const info = ctx.getNodeInfo(config.id, false);
|
|
5704
|
+
if (!info.parent) continue;
|
|
5705
|
+
const idx = getNodeIndex(config.id, info.parent);
|
|
5706
|
+
if (typeof idx !== "number" || idx === -1) continue;
|
|
5707
|
+
info.parent.items[idx] = cloneDeep(config);
|
|
5708
|
+
if ((0, _tmagic_utils.isPage)(config) || (0, _tmagic_utils.isPageFragment)(config)) ctx.setPage(config);
|
|
5709
|
+
}
|
|
5710
|
+
const curPage = ctx.getPage();
|
|
5711
|
+
if (stage && curPage) await stage.update({
|
|
5712
|
+
config: cloneDeep((0, vue.toRaw)(curPage)),
|
|
5713
|
+
parentId: root.id,
|
|
5714
|
+
root: cloneDeep((0, vue.toRaw)(root))
|
|
5715
|
+
});
|
|
5716
|
+
}
|
|
5420
5717
|
//#endregion
|
|
5421
5718
|
//#region packages/editor/src/utils/operator.ts
|
|
5422
5719
|
/**
|
|
@@ -5484,33 +5781,6 @@
|
|
|
5484
5781
|
};
|
|
5485
5782
|
//#endregion
|
|
5486
5783
|
//#region packages/editor/src/services/editor.ts
|
|
5487
|
-
var canUsePluginMethods$5 = {
|
|
5488
|
-
async: [
|
|
5489
|
-
"getLayout",
|
|
5490
|
-
"highlight",
|
|
5491
|
-
"select",
|
|
5492
|
-
"multiSelect",
|
|
5493
|
-
"doAdd",
|
|
5494
|
-
"add",
|
|
5495
|
-
"doRemove",
|
|
5496
|
-
"remove",
|
|
5497
|
-
"doUpdate",
|
|
5498
|
-
"update",
|
|
5499
|
-
"sort",
|
|
5500
|
-
"copy",
|
|
5501
|
-
"paste",
|
|
5502
|
-
"doPaste",
|
|
5503
|
-
"doAlignCenter",
|
|
5504
|
-
"alignCenter",
|
|
5505
|
-
"moveLayer",
|
|
5506
|
-
"moveToContainer",
|
|
5507
|
-
"dragTo",
|
|
5508
|
-
"undo",
|
|
5509
|
-
"redo",
|
|
5510
|
-
"move"
|
|
5511
|
-
],
|
|
5512
|
-
sync: []
|
|
5513
|
-
};
|
|
5514
5784
|
var Editor = class extends BaseService_default {
|
|
5515
5785
|
state = (0, vue.reactive)({
|
|
5516
5786
|
root: null,
|
|
@@ -5527,8 +5797,9 @@
|
|
|
5527
5797
|
disabledMultiSelect: false
|
|
5528
5798
|
});
|
|
5529
5799
|
isHistoryStateChange = false;
|
|
5800
|
+
selectionBeforeOp = null;
|
|
5530
5801
|
constructor() {
|
|
5531
|
-
super(canUsePluginMethods
|
|
5802
|
+
super(canUsePluginMethods.async.map((methodName) => ({
|
|
5532
5803
|
name: methodName,
|
|
5533
5804
|
isAsync: true
|
|
5534
5805
|
})), [
|
|
@@ -5722,6 +5993,7 @@
|
|
|
5722
5993
|
* @returns 添加后的节点
|
|
5723
5994
|
*/
|
|
5724
5995
|
async add(addNode, parent) {
|
|
5996
|
+
this.captureSelectionBeforeOp();
|
|
5725
5997
|
const stage = this.get("stage");
|
|
5726
5998
|
const addNodes = [];
|
|
5727
5999
|
if (!Array.isArray(addNode)) {
|
|
@@ -5746,7 +6018,20 @@
|
|
|
5746
6018
|
else if ((0, _tmagic_utils.isPageFragment)(newNodes[0])) this.state.pageFragmentLength += 1;
|
|
5747
6019
|
else stage?.select(newNodes[0].id);
|
|
5748
6020
|
}
|
|
5749
|
-
if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0])))
|
|
6021
|
+
if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) {
|
|
6022
|
+
const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
|
|
6023
|
+
this.pushOpHistory("add", {
|
|
6024
|
+
nodes: newNodes.map((n) => cloneDeep((0, vue.toRaw)(n))),
|
|
6025
|
+
parentId: (this.getParentById(newNodes[0].id, false) ?? this.get("root")).id,
|
|
6026
|
+
indexMap: Object.fromEntries(newNodes.map((n) => {
|
|
6027
|
+
const p = this.getParentById(n.id, false);
|
|
6028
|
+
return [n.id, p ? getNodeIndex(n.id, p) : -1];
|
|
6029
|
+
}))
|
|
6030
|
+
}, {
|
|
6031
|
+
name: pageForOp?.name || "",
|
|
6032
|
+
id: pageForOp.id
|
|
6033
|
+
});
|
|
6034
|
+
}
|
|
5750
6035
|
this.emit("add", newNodes);
|
|
5751
6036
|
return Array.isArray(addNode) ? newNodes : newNodes[0];
|
|
5752
6037
|
}
|
|
@@ -5795,9 +6080,27 @@
|
|
|
5795
6080
|
* @param {Object} node
|
|
5796
6081
|
*/
|
|
5797
6082
|
async remove(nodeOrNodeList) {
|
|
6083
|
+
this.captureSelectionBeforeOp();
|
|
5798
6084
|
const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
|
|
6085
|
+
const removedItems = [];
|
|
6086
|
+
let pageForOp = null;
|
|
6087
|
+
if (!((0, _tmagic_utils.isPage)(nodes[0]) || (0, _tmagic_utils.isPageFragment)(nodes[0]))) for (const n of nodes) {
|
|
6088
|
+
const { parent, node: curNode, page } = this.getNodeInfo(n.id, false);
|
|
6089
|
+
if (parent && curNode) {
|
|
6090
|
+
if (!pageForOp && page) pageForOp = {
|
|
6091
|
+
name: page.name || "",
|
|
6092
|
+
id: page.id
|
|
6093
|
+
};
|
|
6094
|
+
const idx = getNodeIndex(curNode.id, parent);
|
|
6095
|
+
removedItems.push({
|
|
6096
|
+
node: cloneDeep((0, vue.toRaw)(curNode)),
|
|
6097
|
+
parentId: parent.id,
|
|
6098
|
+
index: typeof idx === "number" ? idx : -1
|
|
6099
|
+
});
|
|
6100
|
+
}
|
|
6101
|
+
}
|
|
5799
6102
|
await Promise.all(nodes.map((node) => this.doRemove(node)));
|
|
5800
|
-
if (
|
|
6103
|
+
if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
|
|
5801
6104
|
this.emit("remove", nodes);
|
|
5802
6105
|
}
|
|
5803
6106
|
async doUpdate(config, { changeRecords = [] } = {}) {
|
|
@@ -5807,12 +6110,8 @@
|
|
|
5807
6110
|
const info = this.getNodeInfo(config.id, false);
|
|
5808
6111
|
if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
|
|
5809
6112
|
const node = (0, vue.toRaw)(info.node);
|
|
5810
|
-
let newConfig = await
|
|
5811
|
-
newConfig = mergeWith(cloneDeep(node), newConfig,
|
|
5812
|
-
if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) return "";
|
|
5813
|
-
if (isObject(srcValue) && Array.isArray(objValue)) return srcValue;
|
|
5814
|
-
if (Array.isArray(srcValue)) return srcValue;
|
|
5815
|
-
});
|
|
6113
|
+
let newConfig = await toggleFixedPosition((0, vue.toRaw)(config), node, root, this.getLayout);
|
|
6114
|
+
newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
|
|
5816
6115
|
if (!newConfig.type) throw new Error("配置缺少type值");
|
|
5817
6116
|
if (newConfig.type === _tmagic_core.NodeType.ROOT) {
|
|
5818
6117
|
this.set("root", newConfig);
|
|
@@ -5850,9 +6149,23 @@
|
|
|
5850
6149
|
* @returns 更新后的节点配置
|
|
5851
6150
|
*/
|
|
5852
6151
|
async update(config, data = {}) {
|
|
6152
|
+
this.captureSelectionBeforeOp();
|
|
5853
6153
|
const nodes = Array.isArray(config) ? config : [config];
|
|
5854
6154
|
const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
|
|
5855
|
-
if (updateData[0].oldNode?.type !== _tmagic_core.NodeType.ROOT)
|
|
6155
|
+
if (updateData[0].oldNode?.type !== _tmagic_core.NodeType.ROOT) {
|
|
6156
|
+
const curNodes = this.get("nodes");
|
|
6157
|
+
if (!this.isHistoryStateChange && curNodes.length) {
|
|
6158
|
+
const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
|
|
6159
|
+
this.pushOpHistory("update", { updatedItems: updateData.map((d) => ({
|
|
6160
|
+
oldNode: cloneDeep(d.oldNode),
|
|
6161
|
+
newNode: cloneDeep((0, vue.toRaw)(d.newNode))
|
|
6162
|
+
})) }, {
|
|
6163
|
+
name: pageForOp?.name || "",
|
|
6164
|
+
id: pageForOp.id
|
|
6165
|
+
});
|
|
6166
|
+
}
|
|
6167
|
+
this.isHistoryStateChange = false;
|
|
6168
|
+
}
|
|
5856
6169
|
this.emit("update", updateData);
|
|
5857
6170
|
return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
|
|
5858
6171
|
}
|
|
@@ -5863,6 +6176,7 @@
|
|
|
5863
6176
|
* @returns void
|
|
5864
6177
|
*/
|
|
5865
6178
|
async sort(id1, id2) {
|
|
6179
|
+
this.captureSelectionBeforeOp();
|
|
5866
6180
|
const root = this.get("root");
|
|
5867
6181
|
if (!root) throw new Error("root为空");
|
|
5868
6182
|
const node = this.get("node");
|
|
@@ -5880,8 +6194,6 @@
|
|
|
5880
6194
|
parentId: parent.id,
|
|
5881
6195
|
root: cloneDeep(root)
|
|
5882
6196
|
});
|
|
5883
|
-
this.addModifiedNodeId(parent.id);
|
|
5884
|
-
this.pushHistoryState();
|
|
5885
6197
|
}
|
|
5886
6198
|
/**
|
|
5887
6199
|
* 将组件节点配置存储到localStorage中
|
|
@@ -5898,23 +6210,7 @@
|
|
|
5898
6210
|
*/
|
|
5899
6211
|
copyWithRelated(config, collectorOptions) {
|
|
5900
6212
|
const copyNodes = Array.isArray(config) ? config : [config];
|
|
5901
|
-
if (collectorOptions && typeof collectorOptions.isTarget === "function")
|
|
5902
|
-
const customTarget = new _tmagic_core.Target({ ...collectorOptions });
|
|
5903
|
-
const coperWatcher = new _tmagic_core.Watcher();
|
|
5904
|
-
coperWatcher.addTarget(customTarget);
|
|
5905
|
-
coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
|
|
5906
|
-
Object.keys(customTarget.deps).forEach((nodeId) => {
|
|
5907
|
-
const node = this.getNodeById(nodeId);
|
|
5908
|
-
if (!node) return;
|
|
5909
|
-
customTarget.deps[nodeId].keys.forEach((key) => {
|
|
5910
|
-
const relateNodeId = get(node, key);
|
|
5911
|
-
if (!copyNodes.find((node) => node.id === relateNodeId)) {
|
|
5912
|
-
const relateNode = this.getNodeById(relateNodeId);
|
|
5913
|
-
if (relateNode) copyNodes.push(relateNode);
|
|
5914
|
-
}
|
|
5915
|
-
});
|
|
5916
|
-
});
|
|
5917
|
-
}
|
|
6213
|
+
if (collectorOptions && typeof collectorOptions.isTarget === "function") collectRelatedNodes(copyNodes, collectorOptions, (id) => this.getNodeById(id));
|
|
5918
6214
|
storage_default.setItem(COPY_STORAGE_KEY, copyNodes, { protocol: Protocol.OBJECT });
|
|
5919
6215
|
}
|
|
5920
6216
|
/**
|
|
@@ -5945,20 +6241,10 @@
|
|
|
5945
6241
|
if (!parent) throw new Error("找不到父节点");
|
|
5946
6242
|
const node = cloneDeep((0, vue.toRaw)(config));
|
|
5947
6243
|
const layout = await this.getLayout(parent, node);
|
|
5948
|
-
if (layout === Layout.RELATIVE) return config;
|
|
5949
|
-
if (!node.style) return config;
|
|
5950
6244
|
const doc = this.get("stage")?.renderer?.contentWindow?.document;
|
|
5951
|
-
|
|
5952
|
-
|
|
5953
|
-
|
|
5954
|
-
if (parentEl && el) {
|
|
5955
|
-
node.style.left = (0, _tmagic_utils.calcValueByFontsize)(doc, (parentEl.clientWidth - el.clientWidth) / 2);
|
|
5956
|
-
node.style.right = "";
|
|
5957
|
-
}
|
|
5958
|
-
} else if (parent.style && (0, _tmagic_utils.isNumber)(parent.style?.width) && (0, _tmagic_utils.isNumber)(node.style?.width)) {
|
|
5959
|
-
node.style.left = (parent.style.width - node.style.width) / 2;
|
|
5960
|
-
node.style.right = "";
|
|
5961
|
-
}
|
|
6245
|
+
const newStyle = calcAlignCenterStyle(node, parent, layout, doc);
|
|
6246
|
+
if (!newStyle) return config;
|
|
6247
|
+
node.style = newStyle;
|
|
5962
6248
|
return node;
|
|
5963
6249
|
}
|
|
5964
6250
|
/**
|
|
@@ -5980,6 +6266,7 @@
|
|
|
5980
6266
|
* @param offset 偏移量
|
|
5981
6267
|
*/
|
|
5982
6268
|
async moveLayer(offset) {
|
|
6269
|
+
this.captureSelectionBeforeOp();
|
|
5983
6270
|
const root = this.get("root");
|
|
5984
6271
|
if (!root) throw new Error("root为空");
|
|
5985
6272
|
const parent = this.get("parent");
|
|
@@ -5989,11 +6276,9 @@
|
|
|
5989
6276
|
const brothers = parent.items || [];
|
|
5990
6277
|
const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
|
|
5991
6278
|
const isRelative = await this.getLayout(parent, node) === Layout.RELATIVE;
|
|
5992
|
-
|
|
5993
|
-
if (offset === LayerOffset.TOP) offsetIndex = isRelative ? 0 : brothers.length;
|
|
5994
|
-
else if (offset === LayerOffset.BOTTOM) offsetIndex = isRelative ? brothers.length : 0;
|
|
5995
|
-
else offsetIndex = index + (isRelative ? -offset : offset);
|
|
6279
|
+
const offsetIndex = calcLayerTargetIndex(index, offset, brothers.length, isRelative);
|
|
5996
6280
|
if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) return;
|
|
6281
|
+
const oldParent = cloneDeep((0, vue.toRaw)(parent));
|
|
5997
6282
|
brothers.splice(index, 1);
|
|
5998
6283
|
brothers.splice(offsetIndex, 0, node);
|
|
5999
6284
|
const grandparent = this.getParentById(parent.id);
|
|
@@ -6003,7 +6288,14 @@
|
|
|
6003
6288
|
root: cloneDeep(root)
|
|
6004
6289
|
});
|
|
6005
6290
|
this.addModifiedNodeId(parent.id);
|
|
6006
|
-
this.
|
|
6291
|
+
const pageForOp = this.getNodeInfo(node.id, false).page;
|
|
6292
|
+
this.pushOpHistory("update", { updatedItems: [{
|
|
6293
|
+
oldNode: oldParent,
|
|
6294
|
+
newNode: cloneDeep((0, vue.toRaw)(parent))
|
|
6295
|
+
}] }, {
|
|
6296
|
+
name: pageForOp?.name || "",
|
|
6297
|
+
id: pageForOp.id
|
|
6298
|
+
});
|
|
6007
6299
|
this.emit("move-layer", offset);
|
|
6008
6300
|
}
|
|
6009
6301
|
/**
|
|
@@ -6012,11 +6304,14 @@
|
|
|
6012
6304
|
* @param targetId 容器ID
|
|
6013
6305
|
*/
|
|
6014
6306
|
async moveToContainer(config, targetId) {
|
|
6307
|
+
this.captureSelectionBeforeOp();
|
|
6015
6308
|
const root = this.get("root");
|
|
6016
|
-
const { node, parent } = this.getNodeInfo(config.id, false);
|
|
6309
|
+
const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
|
|
6017
6310
|
const target = this.getNodeById(targetId, false);
|
|
6018
6311
|
const stage = this.get("stage");
|
|
6019
6312
|
if (root && node && parent && stage) {
|
|
6313
|
+
const oldSourceParent = cloneDeep((0, vue.toRaw)(parent));
|
|
6314
|
+
const oldTarget = cloneDeep((0, vue.toRaw)(target));
|
|
6020
6315
|
const index = getNodeIndex(node.id, parent);
|
|
6021
6316
|
parent.items?.splice(index, 1);
|
|
6022
6317
|
await stage.remove({
|
|
@@ -6041,36 +6336,42 @@
|
|
|
6041
6336
|
stage.select(newConfig.id);
|
|
6042
6337
|
this.addModifiedNodeId(target.id);
|
|
6043
6338
|
this.addModifiedNodeId(parent.id);
|
|
6044
|
-
this.
|
|
6339
|
+
this.pushOpHistory("update", { updatedItems: [{
|
|
6340
|
+
oldNode: oldSourceParent,
|
|
6341
|
+
newNode: cloneDeep((0, vue.toRaw)(parent))
|
|
6342
|
+
}, {
|
|
6343
|
+
oldNode: oldTarget,
|
|
6344
|
+
newNode: cloneDeep((0, vue.toRaw)(target))
|
|
6345
|
+
}] }, {
|
|
6346
|
+
name: pageForOp?.name || "",
|
|
6347
|
+
id: pageForOp.id
|
|
6348
|
+
});
|
|
6045
6349
|
return newConfig;
|
|
6046
6350
|
}
|
|
6047
6351
|
}
|
|
6048
6352
|
async dragTo(config, targetParent, targetIndex) {
|
|
6353
|
+
this.captureSelectionBeforeOp();
|
|
6049
6354
|
if (!targetParent || !Array.isArray(targetParent.items)) return;
|
|
6050
6355
|
const configs = Array.isArray(config) ? config : [config];
|
|
6051
|
-
const
|
|
6052
|
-
const
|
|
6356
|
+
const beforeSnapshots = /* @__PURE__ */ new Map();
|
|
6357
|
+
for (const cfg of configs) {
|
|
6358
|
+
const { parent } = this.getNodeInfo(cfg.id, false);
|
|
6359
|
+
if (parent && !beforeSnapshots.has(`${parent.id}`)) beforeSnapshots.set(`${parent.id}`, cloneDeep((0, vue.toRaw)(parent)));
|
|
6360
|
+
}
|
|
6361
|
+
if (!beforeSnapshots.has(`${targetParent.id}`)) beforeSnapshots.set(`${targetParent.id}`, cloneDeep((0, vue.toRaw)(targetParent)));
|
|
6053
6362
|
const newLayout = await this.getLayout(targetParent);
|
|
6054
|
-
|
|
6055
|
-
|
|
6056
|
-
|
|
6057
|
-
|
|
6058
|
-
|
|
6059
|
-
|
|
6060
|
-
|
|
6061
|
-
if (typeof index !== "number" || index === -1) return;
|
|
6062
|
-
sourceIndicesInTargetParent.push(index);
|
|
6063
|
-
} else {
|
|
6064
|
-
if (newLayout !== await this.getLayout(parent)) setLayout(config, newLayout);
|
|
6065
|
-
parent.items?.splice(index, 1);
|
|
6066
|
-
sourceOutTargetParent.push(config);
|
|
6067
|
-
this.addModifiedNodeId(parent.id);
|
|
6068
|
-
}
|
|
6363
|
+
const { sameParentIndices, crossParentConfigs, aborted } = classifyDragSources(configs, targetParent, (id, raw) => this.getNodeInfo(id, raw));
|
|
6364
|
+
if (aborted) return;
|
|
6365
|
+
for (const { config: crossConfig, parent } of crossParentConfigs) {
|
|
6366
|
+
if (newLayout !== await this.getLayout(parent)) setLayout(crossConfig, newLayout);
|
|
6367
|
+
const index = getNodeIndex(crossConfig.id, parent);
|
|
6368
|
+
parent.items?.splice(index, 1);
|
|
6369
|
+
this.addModifiedNodeId(parent.id);
|
|
6069
6370
|
}
|
|
6070
|
-
moveItemsInContainer(
|
|
6071
|
-
|
|
6072
|
-
targetParent.items?.splice(targetIndex + index, 0,
|
|
6073
|
-
this.addModifiedNodeId(
|
|
6371
|
+
moveItemsInContainer(sameParentIndices, targetParent, targetIndex);
|
|
6372
|
+
crossParentConfigs.forEach(({ config: crossConfig }, index) => {
|
|
6373
|
+
targetParent.items?.splice(targetIndex + index, 0, crossConfig);
|
|
6374
|
+
this.addModifiedNodeId(crossConfig.id);
|
|
6074
6375
|
});
|
|
6075
6376
|
const page = this.get("page");
|
|
6076
6377
|
const root = this.get("root");
|
|
@@ -6080,7 +6381,19 @@
|
|
|
6080
6381
|
parentId: root.id,
|
|
6081
6382
|
root: cloneDeep(root)
|
|
6082
6383
|
});
|
|
6083
|
-
|
|
6384
|
+
const updatedItems = [];
|
|
6385
|
+
for (const oldNode of beforeSnapshots.values()) {
|
|
6386
|
+
const newNode = this.getNodeById(oldNode.id, false);
|
|
6387
|
+
if (newNode) updatedItems.push({
|
|
6388
|
+
oldNode,
|
|
6389
|
+
newNode: cloneDeep((0, vue.toRaw)(newNode))
|
|
6390
|
+
});
|
|
6391
|
+
}
|
|
6392
|
+
const pageForOp = this.getNodeInfo(configs[0].id, false).page;
|
|
6393
|
+
this.pushOpHistory("update", { updatedItems }, {
|
|
6394
|
+
name: pageForOp?.name || "",
|
|
6395
|
+
id: pageForOp.id
|
|
6396
|
+
});
|
|
6084
6397
|
this.emit("drag-to", {
|
|
6085
6398
|
targetIndex,
|
|
6086
6399
|
configs,
|
|
@@ -6089,56 +6402,32 @@
|
|
|
6089
6402
|
}
|
|
6090
6403
|
/**
|
|
6091
6404
|
* 撤销当前操作
|
|
6092
|
-
* @returns
|
|
6405
|
+
* @returns 被撤销的操作
|
|
6093
6406
|
*/
|
|
6094
6407
|
async undo() {
|
|
6095
6408
|
const value = history_default.undo();
|
|
6096
|
-
await this.
|
|
6409
|
+
if (value) await this.applyHistoryOp(value, true);
|
|
6097
6410
|
return value;
|
|
6098
6411
|
}
|
|
6099
6412
|
/**
|
|
6100
6413
|
* 恢复到下一步
|
|
6101
|
-
* @returns
|
|
6414
|
+
* @returns 被恢复的操作
|
|
6102
6415
|
*/
|
|
6103
6416
|
async redo() {
|
|
6104
6417
|
const value = history_default.redo();
|
|
6105
|
-
await this.
|
|
6418
|
+
if (value) await this.applyHistoryOp(value, false);
|
|
6106
6419
|
return value;
|
|
6107
6420
|
}
|
|
6108
6421
|
async move(left, top) {
|
|
6109
6422
|
const node = (0, vue.toRaw)(this.get("node"));
|
|
6110
6423
|
if (!node || (0, _tmagic_utils.isPage)(node)) return;
|
|
6111
|
-
const
|
|
6112
|
-
if (!
|
|
6113
|
-
|
|
6114
|
-
id,
|
|
6115
|
-
type,
|
|
6116
|
-
style
|
|
6424
|
+
const newStyle = calcMoveStyle(node.style || {}, left, top);
|
|
6425
|
+
if (!newStyle) return;
|
|
6426
|
+
await this.update({
|
|
6427
|
+
id: node.id,
|
|
6428
|
+
type: node.type,
|
|
6429
|
+
style: newStyle
|
|
6117
6430
|
});
|
|
6118
|
-
if (top) {
|
|
6119
|
-
if ((0, _tmagic_utils.isNumber)(style.top)) update({
|
|
6120
|
-
...style,
|
|
6121
|
-
top: Number(style.top) + Number(top),
|
|
6122
|
-
bottom: ""
|
|
6123
|
-
});
|
|
6124
|
-
else if ((0, _tmagic_utils.isNumber)(style.bottom)) update({
|
|
6125
|
-
...style,
|
|
6126
|
-
bottom: Number(style.bottom) - Number(top),
|
|
6127
|
-
top: ""
|
|
6128
|
-
});
|
|
6129
|
-
}
|
|
6130
|
-
if (left) {
|
|
6131
|
-
if ((0, _tmagic_utils.isNumber)(style.left)) update({
|
|
6132
|
-
...style,
|
|
6133
|
-
left: Number(style.left) + Number(left),
|
|
6134
|
-
right: ""
|
|
6135
|
-
});
|
|
6136
|
-
else if ((0, _tmagic_utils.isNumber)(style.right)) update({
|
|
6137
|
-
...style,
|
|
6138
|
-
right: Number(style.right) - Number(left),
|
|
6139
|
-
left: ""
|
|
6140
|
-
});
|
|
6141
|
-
}
|
|
6142
6431
|
}
|
|
6143
6432
|
resetState() {
|
|
6144
6433
|
this.set("root", null);
|
|
@@ -6174,50 +6463,74 @@
|
|
|
6174
6463
|
addModifiedNodeId(id) {
|
|
6175
6464
|
if (!this.isHistoryStateChange) this.get("modifiedNodeIds").set(id, id);
|
|
6176
6465
|
}
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6466
|
+
captureSelectionBeforeOp() {
|
|
6467
|
+
if (this.isHistoryStateChange || this.selectionBeforeOp) return;
|
|
6468
|
+
this.selectionBeforeOp = this.get("nodes").map((n) => n.id);
|
|
6469
|
+
}
|
|
6470
|
+
pushOpHistory(opType, extra, pageData) {
|
|
6471
|
+
if (this.isHistoryStateChange) {
|
|
6472
|
+
this.selectionBeforeOp = null;
|
|
6473
|
+
return;
|
|
6474
|
+
}
|
|
6475
|
+
const step = {
|
|
6476
|
+
data: pageData,
|
|
6477
|
+
opType,
|
|
6478
|
+
selectedBefore: this.selectionBeforeOp ?? [],
|
|
6479
|
+
selectedAfter: this.get("nodes").map((n) => n.id),
|
|
6480
|
+
modifiedNodeIds: new Map(this.get("modifiedNodeIds")),
|
|
6481
|
+
...extra
|
|
6482
|
+
};
|
|
6483
|
+
history_default.push(step);
|
|
6484
|
+
this.selectionBeforeOp = null;
|
|
6185
6485
|
this.isHistoryStateChange = false;
|
|
6186
6486
|
}
|
|
6187
|
-
|
|
6188
|
-
|
|
6487
|
+
/**
|
|
6488
|
+
* 应用历史操作(撤销 / 重做)
|
|
6489
|
+
* @param step 操作记录
|
|
6490
|
+
* @param reverse true = 撤销,false = 重做
|
|
6491
|
+
*/
|
|
6492
|
+
async applyHistoryOp(step, reverse) {
|
|
6189
6493
|
this.isHistoryStateChange = true;
|
|
6190
|
-
|
|
6191
|
-
this.
|
|
6192
|
-
|
|
6193
|
-
|
|
6194
|
-
|
|
6195
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
6198
|
-
|
|
6199
|
-
|
|
6200
|
-
|
|
6201
|
-
|
|
6202
|
-
|
|
6203
|
-
|
|
6204
|
-
|
|
6494
|
+
const root = this.get("root");
|
|
6495
|
+
const stage = this.get("stage");
|
|
6496
|
+
if (!root) return;
|
|
6497
|
+
const ctx = {
|
|
6498
|
+
root,
|
|
6499
|
+
stage,
|
|
6500
|
+
getNodeById: (id, raw) => this.getNodeById(id, raw),
|
|
6501
|
+
getNodeInfo: (id, raw) => this.getNodeInfo(id, raw),
|
|
6502
|
+
setRoot: (r) => this.set("root", r),
|
|
6503
|
+
setPage: (p) => this.set("page", p),
|
|
6504
|
+
getPage: () => this.get("page")
|
|
6505
|
+
};
|
|
6506
|
+
switch (step.opType) {
|
|
6507
|
+
case "add":
|
|
6508
|
+
await applyHistoryAddOp(step, reverse, ctx);
|
|
6509
|
+
break;
|
|
6510
|
+
case "remove":
|
|
6511
|
+
await applyHistoryRemoveOp(step, reverse, ctx);
|
|
6512
|
+
break;
|
|
6513
|
+
case "update":
|
|
6514
|
+
await applyHistoryUpdateOp(step, reverse, ctx);
|
|
6515
|
+
break;
|
|
6205
6516
|
}
|
|
6206
|
-
|
|
6517
|
+
this.set("modifiedNodeIds", step.modifiedNodeIds);
|
|
6518
|
+
const page = (0, vue.toRaw)(this.get("page"));
|
|
6519
|
+
if (page) {
|
|
6520
|
+
const selectIds = reverse ? step.selectedBefore : step.selectedAfter;
|
|
6521
|
+
setTimeout(() => {
|
|
6522
|
+
if (!selectIds.length) return;
|
|
6523
|
+
if (selectIds.length > 1) {
|
|
6524
|
+
this.multiSelect(selectIds);
|
|
6525
|
+
stage?.multiSelect(selectIds);
|
|
6526
|
+
} else this.select(selectIds[0]).then(() => stage?.select(selectIds[0])).catch(() => {});
|
|
6527
|
+
}, 0);
|
|
6528
|
+
this.emit("history-change", page);
|
|
6529
|
+
}
|
|
6530
|
+
this.isHistoryStateChange = false;
|
|
6207
6531
|
}
|
|
6208
6532
|
selectedConfigExceptionHandler(config) {
|
|
6209
|
-
|
|
6210
|
-
if (typeof config === "string" || typeof config === "number") id = config;
|
|
6211
|
-
else id = config.id;
|
|
6212
|
-
if (!id) throw new Error("没有ID,无法选中");
|
|
6213
|
-
const { node, parent, page } = this.getNodeInfo(id);
|
|
6214
|
-
if (!node) throw new Error("获取不到组件信息");
|
|
6215
|
-
if (node.id === this.state.root?.id) throw new Error("不能选根节点");
|
|
6216
|
-
return {
|
|
6217
|
-
node,
|
|
6218
|
-
parent,
|
|
6219
|
-
page
|
|
6220
|
-
};
|
|
6533
|
+
return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
|
|
6221
6534
|
}
|
|
6222
6535
|
};
|
|
6223
6536
|
var editor_default = new Editor();
|
|
@@ -6256,6 +6569,7 @@
|
|
|
6256
6569
|
right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
|
|
6257
6570
|
},
|
|
6258
6571
|
showGuides: true,
|
|
6572
|
+
hasGuides: false,
|
|
6259
6573
|
showRule: true,
|
|
6260
6574
|
propsPanelSize: "small",
|
|
6261
6575
|
showAddPageButton: true,
|
|
@@ -6275,13 +6589,13 @@
|
|
|
6275
6589
|
top: 0
|
|
6276
6590
|
}
|
|
6277
6591
|
});
|
|
6278
|
-
var canUsePluginMethods$
|
|
6592
|
+
var canUsePluginMethods$5 = {
|
|
6279
6593
|
async: ["zoom", "calcZoom"],
|
|
6280
6594
|
sync: []
|
|
6281
6595
|
};
|
|
6282
6596
|
var Ui = class extends BaseService_default {
|
|
6283
6597
|
constructor() {
|
|
6284
|
-
super(canUsePluginMethods$
|
|
6598
|
+
super(canUsePluginMethods$5.async.map((methodName) => ({
|
|
6285
6599
|
name: methodName,
|
|
6286
6600
|
isAsync: true
|
|
6287
6601
|
})));
|
|
@@ -6378,7 +6692,10 @@
|
|
|
6378
6692
|
if (disabledMultiSelect) stage.disableMultiSelect();
|
|
6379
6693
|
else stage.enableMultiSelect();
|
|
6380
6694
|
});
|
|
6381
|
-
|
|
6695
|
+
const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
|
|
6696
|
+
const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
|
|
6697
|
+
stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
|
|
6698
|
+
ui_default.set("hasGuides", hGuidesCache.length > 0 || vGuidesCache.length > 0);
|
|
6382
6699
|
stage.on("page-el-update", () => {
|
|
6383
6700
|
editor_default.set("stageLoading", false);
|
|
6384
6701
|
});
|
|
@@ -6432,6 +6749,7 @@
|
|
|
6432
6749
|
});
|
|
6433
6750
|
stage.on("change-guides", (e) => {
|
|
6434
6751
|
ui_default.set("showGuides", true);
|
|
6752
|
+
ui_default.set("hasGuides", (stage.mask?.horizontalGuidelines.length ?? 0) > 0 || (stage.mask?.verticalGuidelines.length ?? 0) > 0);
|
|
6435
6753
|
if (!root.value || !page.value) return;
|
|
6436
6754
|
const storageKey = getGuideLineKey(e.type === _tmagic_stage.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
|
|
6437
6755
|
if (e.guides.length) globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
|
|
@@ -8340,6 +8658,7 @@
|
|
|
8340
8658
|
const columnWidth = (0, vue.computed)(() => uiService.get("columnWidth"));
|
|
8341
8659
|
const keys = Object.values(ColumnLayout);
|
|
8342
8660
|
const showGuides = (0, vue.computed)(() => uiService.get("showGuides"));
|
|
8661
|
+
const hasGuides = (0, vue.computed)(() => uiService.get("hasGuides"));
|
|
8343
8662
|
const showRule = (0, vue.computed)(() => uiService.get("showRule"));
|
|
8344
8663
|
const zoom = (0, vue.computed)(() => uiService.get("zoom"));
|
|
8345
8664
|
const ctrl = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "Command" : "Ctrl";
|
|
@@ -8435,6 +8754,7 @@
|
|
|
8435
8754
|
});
|
|
8436
8755
|
break;
|
|
8437
8756
|
case "guides":
|
|
8757
|
+
if (!hasGuides.value) break;
|
|
8438
8758
|
config.push({
|
|
8439
8759
|
type: "button",
|
|
8440
8760
|
className: "guides",
|
|
@@ -11899,11 +12219,7 @@
|
|
|
11899
12219
|
const frameworkRect = (0, vue.computed)(() => uiService.get("frameworkRect"));
|
|
11900
12220
|
const style = (0, vue.computed)(() => ({ transform: `scale(${zoom.value})` }));
|
|
11901
12221
|
(0, vue.watch)(stage, (stage) => {
|
|
11902
|
-
if (stage)
|
|
11903
|
-
const el = await stage.actionManager?.getElementFromPoint(event) || null;
|
|
11904
|
-
stageOverlayService.openOverlay(el);
|
|
11905
|
-
});
|
|
11906
|
-
else stageOverlayService.closeOverlay();
|
|
12222
|
+
if (!stage) stageOverlayService.closeOverlay();
|
|
11907
12223
|
});
|
|
11908
12224
|
(0, vue.watch)(zoom, (zoom) => {
|
|
11909
12225
|
const stage = stageOverlayService.get("stage");
|
|
@@ -12148,7 +12464,7 @@
|
|
|
12148
12464
|
const props = __props;
|
|
12149
12465
|
let stage = null;
|
|
12150
12466
|
let runtime = null;
|
|
12151
|
-
const { editorService, uiService, keybindingService } = useServices();
|
|
12467
|
+
const { editorService, uiService, keybindingService, stageOverlayService } = useServices();
|
|
12152
12468
|
const stageLoading = (0, vue.computed)(() => editorService.get("stageLoading"));
|
|
12153
12469
|
const stageWrapRef = (0, vue.useTemplateRef)("stageWrap");
|
|
12154
12470
|
const stageContainerEl = (0, vue.useTemplateRef)("stageContainer");
|
|
@@ -12161,6 +12477,42 @@
|
|
|
12161
12477
|
const page = (0, vue.computed)(() => editorService.get("page"));
|
|
12162
12478
|
const zoom = (0, vue.computed)(() => uiService.get("zoom"));
|
|
12163
12479
|
const node = (0, vue.computed)(() => editorService.get("node"));
|
|
12480
|
+
/**
|
|
12481
|
+
* 判断元素是否被非页面级的滚动容器裁剪(未完整显示)
|
|
12482
|
+
*
|
|
12483
|
+
* 从元素向上遍历祖先节点,跳过页面/页面片容器,
|
|
12484
|
+
* 检查是否存在设置了 overflow 的滚动容器将该元素裁剪,
|
|
12485
|
+
* 只有元素未被完整显示时才需要打开 overlay 以展示完整内容
|
|
12486
|
+
*/
|
|
12487
|
+
const isClippedByScrollContainer = (el) => {
|
|
12488
|
+
const win = el.ownerDocument.defaultView;
|
|
12489
|
+
if (!win) return false;
|
|
12490
|
+
const root = editorService.get("root");
|
|
12491
|
+
const pageIds = new Set(root?.items?.map((item) => `${item.id}`) ?? []);
|
|
12492
|
+
const elId = (0, _tmagic_utils.getIdFromEl)()(el);
|
|
12493
|
+
if (elId && pageIds.has(elId)) return false;
|
|
12494
|
+
let parent = el.parentElement;
|
|
12495
|
+
while (parent && parent !== el.ownerDocument.documentElement) {
|
|
12496
|
+
const parentId = (0, _tmagic_utils.getIdFromEl)()(parent);
|
|
12497
|
+
if (parentId && pageIds.has(parentId)) return false;
|
|
12498
|
+
const { overflowX, overflowY } = win.getComputedStyle(parent);
|
|
12499
|
+
if ([
|
|
12500
|
+
"auto",
|
|
12501
|
+
"scroll",
|
|
12502
|
+
"hidden"
|
|
12503
|
+
].includes(overflowX) || [
|
|
12504
|
+
"auto",
|
|
12505
|
+
"scroll",
|
|
12506
|
+
"hidden"
|
|
12507
|
+
].includes(overflowY) || parent.scrollWidth > parent.clientWidth || parent.scrollHeight > parent.clientHeight) {
|
|
12508
|
+
const elRect = el.getBoundingClientRect();
|
|
12509
|
+
const containerRect = parent.getBoundingClientRect();
|
|
12510
|
+
if (elRect.top < containerRect.top || elRect.left < containerRect.left || elRect.bottom > containerRect.bottom || elRect.right > containerRect.right) return true;
|
|
12511
|
+
}
|
|
12512
|
+
parent = parent.parentElement;
|
|
12513
|
+
}
|
|
12514
|
+
return false;
|
|
12515
|
+
};
|
|
12164
12516
|
(0, vue.watchEffect)(() => {
|
|
12165
12517
|
if (stage || !page.value) return;
|
|
12166
12518
|
if (!stageContainerEl.value) return;
|
|
@@ -12169,6 +12521,33 @@
|
|
|
12169
12521
|
stage.on("select", () => {
|
|
12170
12522
|
stageWrapRef.value?.container?.focus();
|
|
12171
12523
|
});
|
|
12524
|
+
stage.on("dblclick", async (event) => {
|
|
12525
|
+
if (props.stageOptions.beforeDblclick) {
|
|
12526
|
+
if (await props.stageOptions.beforeDblclick(event) === false) return;
|
|
12527
|
+
}
|
|
12528
|
+
const el = await stage?.actionManager?.getElementFromPoint(event) || null;
|
|
12529
|
+
if (!el) return;
|
|
12530
|
+
const id = (0, _tmagic_utils.getIdFromEl)()(el);
|
|
12531
|
+
if (id) {
|
|
12532
|
+
const node = editorService.getNodeById(id);
|
|
12533
|
+
if (node?.type === "page-fragment-container" && node.pageFragmentId) {
|
|
12534
|
+
await editorService.select(node.pageFragmentId);
|
|
12535
|
+
return;
|
|
12536
|
+
}
|
|
12537
|
+
}
|
|
12538
|
+
if (!props.disabledStageOverlay && isClippedByScrollContainer(el)) {
|
|
12539
|
+
stageOverlayService.openOverlay(el);
|
|
12540
|
+
return;
|
|
12541
|
+
}
|
|
12542
|
+
const nextEl = await stage?.actionManager?.getNextElementFromPoint(event) || null;
|
|
12543
|
+
if (nextEl) {
|
|
12544
|
+
const nextId = (0, _tmagic_utils.getIdFromEl)()(nextEl);
|
|
12545
|
+
if (nextId) {
|
|
12546
|
+
await editorService.select(nextId);
|
|
12547
|
+
editorService.get("stage")?.select(nextId);
|
|
12548
|
+
}
|
|
12549
|
+
}
|
|
12550
|
+
});
|
|
12172
12551
|
editorService.set("stage", (0, vue.markRaw)(stage));
|
|
12173
12552
|
stage.mount(stageContainerEl.value);
|
|
12174
12553
|
if (!node.value?.id) return;
|
|
@@ -12406,7 +12785,7 @@
|
|
|
12406
12785
|
var Workspace_default = Workspace_vue_vue_type_script_setup_true_lang_default;
|
|
12407
12786
|
//#endregion
|
|
12408
12787
|
//#region packages/editor/src/services/codeBlock.ts
|
|
12409
|
-
var canUsePluginMethods$
|
|
12788
|
+
var canUsePluginMethods$4 = {
|
|
12410
12789
|
async: [
|
|
12411
12790
|
"setCodeDslById",
|
|
12412
12791
|
"setEditStatus",
|
|
@@ -12425,10 +12804,10 @@
|
|
|
12425
12804
|
paramsColConfig: void 0
|
|
12426
12805
|
});
|
|
12427
12806
|
constructor() {
|
|
12428
|
-
super([...canUsePluginMethods$
|
|
12807
|
+
super([...canUsePluginMethods$4.async.map((methodName) => ({
|
|
12429
12808
|
name: methodName,
|
|
12430
12809
|
isAsync: true
|
|
12431
|
-
})), ...canUsePluginMethods$
|
|
12810
|
+
})), ...canUsePluginMethods$4.sync.map((methodName) => ({
|
|
12432
12811
|
name: methodName,
|
|
12433
12812
|
isAsync: false
|
|
12434
12813
|
}))]);
|
|
@@ -12673,7 +13052,7 @@
|
|
|
12673
13052
|
var componentList_default = new ComponentList();
|
|
12674
13053
|
//#endregion
|
|
12675
13054
|
//#region packages/editor/src/services/dataSource.ts
|
|
12676
|
-
var canUsePluginMethods$
|
|
13055
|
+
var canUsePluginMethods$3 = {
|
|
12677
13056
|
async: [],
|
|
12678
13057
|
sync: [
|
|
12679
13058
|
"getFormConfig",
|
|
@@ -12701,7 +13080,7 @@
|
|
|
12701
13080
|
methods: {}
|
|
12702
13081
|
});
|
|
12703
13082
|
constructor() {
|
|
12704
|
-
super(canUsePluginMethods$
|
|
13083
|
+
super(canUsePluginMethods$3.sync.map((methodName) => ({
|
|
12705
13084
|
name: methodName,
|
|
12706
13085
|
isAsync: false
|
|
12707
13086
|
})));
|
|
@@ -12820,7 +13199,7 @@
|
|
|
12820
13199
|
var dataSource_default = new DataSource();
|
|
12821
13200
|
//#endregion
|
|
12822
13201
|
//#region packages/editor/src/utils/dep/worker.ts?worker&inline
|
|
12823
|
-
var jsContent = "(function() {\n //#region packages/schema/src/index.ts\n const NODE_CONDS_KEY = \"displayConds\";\n const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n let HookType = /* @__PURE__ */ function(HookType) {\n /** 代码块钩子标识 */\n HookType[\"CODE\"] = \"code\";\n return HookType;\n }({});\n //#endregion\n //#region packages/utils/src/index.ts\n const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n //#endregion\n //#region packages/dep/src/types.ts\n /** 依赖收集的目标类型 */\n let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n DepTargetType[\"DEFAULT\"] = \"default\";\n /** 代码块 */\n DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n /** 数据源 */\n DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n /** 数据源方法 */\n DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n /** 数据源条件 */\n DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n return DepTargetType;\n }({});\n //#endregion\n //#region packages/dep/src/Target.ts\n /**\n * 需要收集依赖的目标\n * 例如:一个代码块可以为一个目标\n */\n var Target = class {\n /**\n * 如何识别目标\n */\n isTarget;\n /**\n * 目标id,不可重复\n * 例如目标是代码块,则为代码块id\n */\n id;\n /**\n * 目标名称,用于显示在依赖列表中\n */\n name;\n /**\n * 不同的目标可以进行分类,例如代码块,数据源可以为两个不同的type\n */\n type = DepTargetType.DEFAULT;\n /**\n * 依赖详情\n * 实例:{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n */\n deps = {};\n /**\n * 是否默认收集,默认为true,当值为false时需要传入type参数给collect方法才会被收集\n */\n isCollectByDefault;\n constructor(options) {\n this.isTarget = options.isTarget;\n this.id = options.id;\n this.name = options.name;\n this.isCollectByDefault = options.isCollectByDefault ?? true;\n if (options.type) this.type = options.type;\n if (options.initialDeps) this.deps = options.initialDeps;\n }\n /**\n * 更新依赖\n * @param option 节点配置\n * @param key 哪个key配置了这个目标的id\n */\n updateDep({ id, name, key, data }) {\n const dep = this.deps[id] || {\n name,\n keys: []\n };\n dep.name = name;\n dep.data = data;\n this.deps[id] = dep;\n if (!dep.keys.includes(key)) dep.keys.push(key);\n }\n /**\n * 删除依赖\n * @param node 哪个节点的依赖需要移除,如果为空,则移除所有依赖\n * @param key 节点下哪个key需要移除,如果为空,则移除改节点下的所有依赖key\n * @returns void\n */\n removeDep(id, key) {\n if (typeof id === \"undefined\") {\n Object.keys(this.deps).forEach((depKey) => {\n delete this.deps[depKey];\n });\n return;\n }\n const dep = this.deps[id];\n if (!dep) return;\n if (key) {\n const index = dep.keys.indexOf(key);\n dep.keys.splice(index, 1);\n if (dep.keys.length === 0) delete this.deps[id];\n } else delete this.deps[id];\n }\n /**\n * 判断指定节点下的指定key是否存在在依赖列表中\n * @param node 哪个节点\n * @param key 哪个key\n * @returns boolean\n */\n hasDep(id, key) {\n return this.deps[id]?.keys.includes(key) ?? false;\n }\n destroy() {\n this.deps = {};\n }\n };\n //#endregion\n //#region packages/dep/src/utils.ts\n const INTEGER_REGEXP = /^\\d+$/;\n const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n type: DepTargetType.CODE_BLOCK,\n id,\n initialDeps,\n name: codeBlock.name,\n isTarget: (_key, value) => {\n if (id === value) return true;\n if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n return false;\n }\n });\n /**\n * ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n * ['array', 'a'] 这种返回true\n * @param keys\n * @param fields\n * @returns boolean\n */\n const isIncludeArrayField = (keys, fields) => {\n let f = fields;\n return keys.some((key, index) => {\n const field = f.find(({ name }) => name === key);\n f = field?.fields || [];\n return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n });\n };\n /**\n * 判断模板(value)是不是使用数据源Id(dsId),如:`xxx${dsId.field}xxx${dsId.field}`\n * @param value any\n * @param dsId string | number\n * @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n * @returns boolean\n */\n const isDataSourceTemplate = (value, ds, hasArray = false) => {\n const templates = value.match(dataSourceTemplateRegExp) || [];\n if (templates.length <= 0) return false;\n for (const tpl of templates) {\n const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n const dsId = keys.shift();\n if (!dsId || dsId !== ds.id) continue;\n if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n }\n return false;\n };\n /**\n * 指定数据源的字符串模板,如:{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n * @param value any\n * @param dsId string | number\n * @returns boolean\n */\n const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n /**\n * 关联数据源字段,格式为 [前缀+数据源ID, 字段名]\n * 使用data-source-field-select value: 'value' 可以配置出来\n * @param value any[]\n * @param id string | number\n * @returns boolean\n */\n const isUseDataSourceField = (value, id) => {\n if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n const [prefixId] = value;\n const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n if (prefixIndex === -1) return false;\n return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n };\n const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n if (!value) return false;\n const valueType = typeof value;\n if (valueType !== \"string\" && valueType !== \"object\") return false;\n if (`${key}`.startsWith(\"displayConds\")) return false;\n if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n if (isUseDataSourceField(value, ds.id)) {\n const [, ...keys] = value;\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n if (!Array.isArray(value) || !ds) return false;\n const [dsId, ...keys] = value;\n if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n if (ds.fields?.some((field) => field.name === keys[0])) {\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n });\n const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_COND,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n });\n const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_METHOD,\n id: ds.id,\n initialDeps,\n isTarget: (_key, value) => {\n if (!Array.isArray(value)) return false;\n const [dsId, methodName] = value;\n if (!methodName || dsId !== ds.id) return false;\n if (ds.methods?.some((method) => method.name === methodName)) return true;\n if (ds.fields?.some((field) => field.name === methodName)) return false;\n return true;\n }\n });\n const traverseTarget = (targetsList, cb, type) => {\n if (type) {\n const targets = targetsList[type];\n if (targets) for (const target of Object.values(targets)) cb(target);\n return;\n }\n for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n };\n //#endregion\n //#region packages/dep/src/Watcher.ts\n const DATA_SOURCE_TARGET_TYPES = new Set([\n DepTargetType.DATA_SOURCE,\n DepTargetType.DATA_SOURCE_COND,\n DepTargetType.DATA_SOURCE_METHOD\n ]);\n var Watcher = class {\n targetsList = {};\n childrenProp = \"items\";\n idProp = \"id\";\n nameProp = \"name\";\n constructor(options) {\n if (options?.initialTargets) this.targetsList = options.initialTargets;\n if (options?.childrenProp) this.childrenProp = options.childrenProp;\n }\n getTargetsList() {\n return this.targetsList;\n }\n /**\n * 获取指定类型中的所有target\n * @param type 分类\n * @returns Target[]\n */\n getTargets(type = DepTargetType.DEFAULT) {\n return this.targetsList[type] || {};\n }\n /**\n * 添加新的目标\n * @param target Target\n */\n addTarget(target) {\n const targets = this.getTargets(target.type) || {};\n this.targetsList[target.type] = targets;\n targets[target.id] = target;\n }\n /**\n * 获取指定id的target\n * @param id target id\n * @returns Target\n */\n getTarget(id, type = DepTargetType.DEFAULT) {\n return this.getTargets(type)[id];\n }\n /**\n * 判断是否存在指定id的target\n * @param id target id\n * @returns boolean\n */\n hasTarget(id, type = DepTargetType.DEFAULT) {\n return Boolean(this.getTarget(id, type));\n }\n /**\n * 判断是否存在指定类型的target\n * @param type target type\n * @returns boolean\n */\n hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n return Object.keys(this.getTargets(type)).length > 0;\n }\n /**\n * 删除指定id的target\n * @param id target id\n */\n removeTarget(id, type = DepTargetType.DEFAULT) {\n const targets = this.getTargets(type);\n if (targets[id]) {\n targets[id].destroy();\n delete targets[id];\n }\n }\n /**\n * 删除指定分类的所有target\n * @param type 分类\n * @returns void\n */\n removeTargets(type = DepTargetType.DEFAULT) {\n const targets = this.targetsList[type];\n if (!targets) return;\n for (const target of Object.values(targets)) target.destroy();\n delete this.targetsList[type];\n }\n /**\n * 删除所有target\n */\n clearTargets() {\n for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n }\n /**\n * 收集依赖\n * @param nodes 需要收集的节点\n * @param deep 是否需要收集子节点\n * @param type 强制收集指定类型的依赖\n */\n collect(nodes, depExtendedData = {}, deep = false, type) {\n this.collectByCallback(nodes, type, ({ node, target }) => {\n this.removeTargetDep(target, node);\n this.collectItem(node, target, depExtendedData, deep);\n });\n }\n collectByCallback(nodes, type, cb) {\n traverseTarget(this.targetsList, (target) => {\n if (!type && !target.isCollectByDefault) return;\n for (const node of nodes) cb({\n node,\n target\n });\n }, type);\n }\n /**\n * 清除所有目标的依赖\n * @param nodes 需要清除依赖的节点\n */\n clear(nodes, type) {\n let { targetsList } = this;\n if (type) targetsList = { [type]: this.getTargets(type) };\n const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n traverseTarget(targetsList, (target) => {\n if (nodes) for (const node of nodes) {\n target.removeDep(node[this.idProp]);\n if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n clearedItemsNodeIds.add(node[this.idProp]);\n this.clear(node[this.childrenProp]);\n }\n }\n else target.removeDep();\n });\n }\n /**\n * 清除指定类型的依赖\n * @param type 类型\n * @param nodes 需要清除依赖的节点\n */\n clearByType(type, nodes) {\n this.clear(nodes, type);\n }\n collectItem(node, target, depExtendedData = {}, deep = false) {\n if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n const collectTarget = (config, prop = \"\") => {\n const doCollect = (key, value) => {\n const keyIsItems = key === this.childrenProp;\n const fullKey = prop ? `${prop}.${key}` : key;\n if (target.isTarget(fullKey, value)) target.updateDep({\n id: node[this.idProp],\n name: `${node[this.nameProp] || node[this.idProp]}`,\n data: depExtendedData,\n key: fullKey\n });\n else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n const item = value[i];\n if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n }\n else if (isObject(value)) collectTarget(value, fullKey);\n if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n };\n for (const [key, value] of Object.entries(config)) {\n if (typeof value === \"undefined\" || value === \"\") continue;\n doCollect(key, value);\n }\n };\n collectTarget(node);\n }\n removeTargetDep(target, node, key) {\n target.removeDep(node[this.idProp], key);\n if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n }\n };\n //#endregion\n //#region packages/editor/src/utils/logger.ts\n const error = (...args) => {};\n //#endregion\n //#region packages/editor/src/utils/dep/worker.ts\n onmessage = (e) => {\n const watcher = new Watcher({ initialTargets: {} });\n const { dsl } = e.data;\n try {\n const mApp = eval(`(${dsl})`);\n if (!mApp) postMessage({});\n watcher.clearTargets();\n if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n if (mApp.dataSources) for (const ds of mApp.dataSources) {\n watcher.addTarget(createDataSourceTarget(ds, {}));\n watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n watcher.addTarget(createDataSourceCondTarget(ds, {}));\n }\n watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n watcher.collectItem(node, target, { pageId: node.id }, true);\n });\n const data = {\n [DepTargetType.DATA_SOURCE]: {},\n [DepTargetType.DATA_SOURCE_METHOD]: {},\n [DepTargetType.DATA_SOURCE_COND]: {},\n [DepTargetType.CODE_BLOCK]: {}\n };\n traverseTarget(watcher.getTargetsList(), (target) => {\n data[target.type][target.id] = target.deps;\n });\n postMessage(data);\n } catch (e) {\n postMessage({});\n }\n };\n //#endregion\n})();\n";
|
|
13202
|
+
var jsContent = "(function() {\n //#region packages/schema/src/index.ts\n const NODE_CONDS_KEY = \"displayConds\";\n const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n let HookType = /* @__PURE__ */ function(HookType) {\n /** 代码块钩子标识 */\n HookType[\"CODE\"] = \"code\";\n return HookType;\n }({});\n //#endregion\n //#region packages/utils/src/const.ts\n const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n //#endregion\n //#region packages/utils/src/index.ts\n const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n //#endregion\n //#region packages/dep/src/types.ts\n /** 依赖收集的目标类型 */\n let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n DepTargetType[\"DEFAULT\"] = \"default\";\n /** 代码块 */\n DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n /** 数据源 */\n DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n /** 数据源方法 */\n DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n /** 数据源条件 */\n DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n return DepTargetType;\n }({});\n //#endregion\n //#region packages/dep/src/Target.ts\n /**\n * 需要收集依赖的目标\n * 例如:一个代码块可以为一个目标\n */\n var Target = class {\n /**\n * 如何识别目标\n */\n isTarget;\n /**\n * 目标id,不可重复\n * 例如目标是代码块,则为代码块id\n */\n id;\n /**\n * 目标名称,用于显示在依赖列表中\n */\n name;\n /**\n * 不同的目标可以进行分类,例如代码块,数据源可以为两个不同的type\n */\n type = DepTargetType.DEFAULT;\n /**\n * 依赖详情\n * 实例:{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n */\n deps = {};\n /**\n * 是否默认收集,默认为true,当值为false时需要传入type参数给collect方法才会被收集\n */\n isCollectByDefault;\n constructor(options) {\n this.isTarget = options.isTarget;\n this.id = options.id;\n this.name = options.name;\n this.isCollectByDefault = options.isCollectByDefault ?? true;\n if (options.type) this.type = options.type;\n if (options.initialDeps) this.deps = options.initialDeps;\n }\n /**\n * 更新依赖\n * @param option 节点配置\n * @param key 哪个key配置了这个目标的id\n */\n updateDep({ id, name, key, data }) {\n const dep = this.deps[id] || {\n name,\n keys: []\n };\n dep.name = name;\n dep.data = data;\n this.deps[id] = dep;\n if (!dep.keys.includes(key)) dep.keys.push(key);\n }\n /**\n * 删除依赖\n * @param node 哪个节点的依赖需要移除,如果为空,则移除所有依赖\n * @param key 节点下哪个key需要移除,如果为空,则移除改节点下的所有依赖key\n * @returns void\n */\n removeDep(id, key) {\n if (typeof id === \"undefined\") {\n Object.keys(this.deps).forEach((depKey) => {\n delete this.deps[depKey];\n });\n return;\n }\n const dep = this.deps[id];\n if (!dep) return;\n if (key) {\n const index = dep.keys.indexOf(key);\n dep.keys.splice(index, 1);\n if (dep.keys.length === 0) delete this.deps[id];\n } else delete this.deps[id];\n }\n /**\n * 判断指定节点下的指定key是否存在在依赖列表中\n * @param node 哪个节点\n * @param key 哪个key\n * @returns boolean\n */\n hasDep(id, key) {\n return this.deps[id]?.keys.includes(key) ?? false;\n }\n destroy() {\n this.deps = {};\n }\n };\n //#endregion\n //#region packages/dep/src/utils.ts\n const INTEGER_REGEXP = /^\\d+$/;\n const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n type: DepTargetType.CODE_BLOCK,\n id,\n initialDeps,\n name: codeBlock.name,\n isTarget: (_key, value) => {\n if (id === value) return true;\n if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n return false;\n }\n });\n /**\n * ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n * ['array', 'a'] 这种返回true\n * @param keys\n * @param fields\n * @returns boolean\n */\n const isIncludeArrayField = (keys, fields) => {\n let f = fields;\n return keys.some((key, index) => {\n const field = f.find(({ name }) => name === key);\n f = field?.fields || [];\n return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n });\n };\n /**\n * 判断模板(value)是不是使用数据源Id(dsId),如:`xxx${dsId.field}xxx${dsId.field}`\n * @param value any\n * @param dsId string | number\n * @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n * @returns boolean\n */\n const isDataSourceTemplate = (value, ds, hasArray = false) => {\n const templates = value.match(dataSourceTemplateRegExp) || [];\n if (templates.length <= 0) return false;\n for (const tpl of templates) {\n const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n const dsId = keys.shift();\n if (!dsId || dsId !== ds.id) continue;\n if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n }\n return false;\n };\n /**\n * 指定数据源的字符串模板,如:{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n * @param value any\n * @param dsId string | number\n * @returns boolean\n */\n const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n /**\n * 关联数据源字段,格式为 [前缀+数据源ID, 字段名]\n * 使用data-source-field-select value: 'value' 可以配置出来\n * @param value any[]\n * @param id string | number\n * @returns boolean\n */\n const isUseDataSourceField = (value, id) => {\n if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n const [prefixId] = value;\n const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n if (prefixIndex === -1) return false;\n return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n };\n const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n if (!value) return false;\n const valueType = typeof value;\n if (valueType !== \"string\" && valueType !== \"object\") return false;\n if (`${key}`.startsWith(\"displayConds\")) return false;\n if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n if (isUseDataSourceField(value, ds.id)) {\n const [, ...keys] = value;\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n if (!Array.isArray(value) || !ds) return false;\n const [dsId, ...keys] = value;\n if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n if (ds.fields?.some((field) => field.name === keys[0])) {\n const includeArray = isIncludeArrayField(keys, ds.fields);\n return hasArray ? includeArray : !includeArray;\n }\n return false;\n };\n const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n });\n const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_COND,\n id: ds.id,\n initialDeps,\n isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n });\n const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n type: DepTargetType.DATA_SOURCE_METHOD,\n id: ds.id,\n initialDeps,\n isTarget: (_key, value) => {\n if (!Array.isArray(value)) return false;\n const [dsId, methodName] = value;\n if (!methodName || dsId !== ds.id) return false;\n if (ds.methods?.some((method) => method.name === methodName)) return true;\n if (ds.fields?.some((field) => field.name === methodName)) return false;\n return true;\n }\n });\n const traverseTarget = (targetsList, cb, type) => {\n if (type) {\n const targets = targetsList[type];\n if (targets) for (const target of Object.values(targets)) cb(target);\n return;\n }\n for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n };\n //#endregion\n //#region packages/dep/src/Watcher.ts\n const DATA_SOURCE_TARGET_TYPES = new Set([\n DepTargetType.DATA_SOURCE,\n DepTargetType.DATA_SOURCE_COND,\n DepTargetType.DATA_SOURCE_METHOD\n ]);\n var Watcher = class {\n targetsList = {};\n childrenProp = \"items\";\n idProp = \"id\";\n nameProp = \"name\";\n constructor(options) {\n if (options?.initialTargets) this.targetsList = options.initialTargets;\n if (options?.childrenProp) this.childrenProp = options.childrenProp;\n }\n getTargetsList() {\n return this.targetsList;\n }\n /**\n * 获取指定类型中的所有target\n * @param type 分类\n * @returns Target[]\n */\n getTargets(type = DepTargetType.DEFAULT) {\n return this.targetsList[type] || {};\n }\n /**\n * 添加新的目标\n * @param target Target\n */\n addTarget(target) {\n const targets = this.getTargets(target.type) || {};\n this.targetsList[target.type] = targets;\n targets[target.id] = target;\n }\n /**\n * 获取指定id的target\n * @param id target id\n * @returns Target\n */\n getTarget(id, type = DepTargetType.DEFAULT) {\n return this.getTargets(type)[id];\n }\n /**\n * 判断是否存在指定id的target\n * @param id target id\n * @returns boolean\n */\n hasTarget(id, type = DepTargetType.DEFAULT) {\n return Boolean(this.getTarget(id, type));\n }\n /**\n * 判断是否存在指定类型的target\n * @param type target type\n * @returns boolean\n */\n hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n return Object.keys(this.getTargets(type)).length > 0;\n }\n /**\n * 删除指定id的target\n * @param id target id\n */\n removeTarget(id, type = DepTargetType.DEFAULT) {\n const targets = this.getTargets(type);\n if (targets[id]) {\n targets[id].destroy();\n delete targets[id];\n }\n }\n /**\n * 删除指定分类的所有target\n * @param type 分类\n * @returns void\n */\n removeTargets(type = DepTargetType.DEFAULT) {\n const targets = this.targetsList[type];\n if (!targets) return;\n for (const target of Object.values(targets)) target.destroy();\n delete this.targetsList[type];\n }\n /**\n * 删除所有target\n */\n clearTargets() {\n for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n }\n /**\n * 收集依赖\n * @param nodes 需要收集的节点\n * @param deep 是否需要收集子节点\n * @param type 强制收集指定类型的依赖\n */\n collect(nodes, depExtendedData = {}, deep = false, type) {\n this.collectByCallback(nodes, type, ({ node, target }) => {\n this.removeTargetDep(target, node);\n this.collectItem(node, target, depExtendedData, deep);\n });\n }\n collectByCallback(nodes, type, cb) {\n traverseTarget(this.targetsList, (target) => {\n if (!type && !target.isCollectByDefault) return;\n for (const node of nodes) cb({\n node,\n target\n });\n }, type);\n }\n /**\n * 清除所有目标的依赖\n * @param nodes 需要清除依赖的节点\n */\n clear(nodes, type) {\n let { targetsList } = this;\n if (type) targetsList = { [type]: this.getTargets(type) };\n const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n traverseTarget(targetsList, (target) => {\n if (nodes) for (const node of nodes) {\n target.removeDep(node[this.idProp]);\n if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n clearedItemsNodeIds.add(node[this.idProp]);\n this.clear(node[this.childrenProp]);\n }\n }\n else target.removeDep();\n });\n }\n /**\n * 清除指定类型的依赖\n * @param type 类型\n * @param nodes 需要清除依赖的节点\n */\n clearByType(type, nodes) {\n this.clear(nodes, type);\n }\n collectItem(node, target, depExtendedData = {}, deep = false) {\n if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n const collectTarget = (config, prop = \"\") => {\n const doCollect = (key, value) => {\n const keyIsItems = key === this.childrenProp;\n const fullKey = prop ? `${prop}.${key}` : key;\n if (target.isTarget(fullKey, value)) target.updateDep({\n id: node[this.idProp],\n name: `${node[this.nameProp] || node[this.idProp]}`,\n data: depExtendedData,\n key: fullKey\n });\n else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n const item = value[i];\n if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n }\n else if (isObject(value)) collectTarget(value, fullKey);\n if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n };\n for (const [key, value] of Object.entries(config)) {\n if (typeof value === \"undefined\" || value === \"\") continue;\n doCollect(key, value);\n }\n };\n collectTarget(node);\n }\n removeTargetDep(target, node, key) {\n target.removeDep(node[this.idProp], key);\n if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n }\n };\n //#endregion\n //#region packages/editor/src/utils/logger.ts\n const error = (...args) => {\n console.error(\"magic editor: \", ...args);\n };\n //#endregion\n //#region packages/editor/src/utils/dep/worker.ts\n onmessage = (e) => {\n const watcher = new Watcher({ initialTargets: {} });\n const { dsl } = e.data;\n try {\n const mApp = eval(`(${dsl})`);\n if (!mApp) postMessage({});\n watcher.clearTargets();\n if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n if (mApp.dataSources) for (const ds of mApp.dataSources) {\n watcher.addTarget(createDataSourceTarget(ds, {}));\n watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n watcher.addTarget(createDataSourceCondTarget(ds, {}));\n }\n watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n watcher.collectItem(node, target, { pageId: node.id }, true);\n });\n const data = {\n [DepTargetType.DATA_SOURCE]: {},\n [DepTargetType.DATA_SOURCE_METHOD]: {},\n [DepTargetType.DATA_SOURCE_COND]: {},\n [DepTargetType.CODE_BLOCK]: {}\n };\n traverseTarget(watcher.getTargetsList(), (target) => {\n data[target.type][target.id] = target.deps;\n });\n postMessage(data);\n } catch (e) {\n error(e);\n postMessage({});\n }\n };\n //#endregion\n})();\n";
|
|
12824
13203
|
var blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
|
|
12825
13204
|
function WorkerWrapper(options) {
|
|
12826
13205
|
let objURL;
|
|
@@ -13002,7 +13381,7 @@
|
|
|
13002
13381
|
var dep_default = new Dep();
|
|
13003
13382
|
//#endregion
|
|
13004
13383
|
//#region packages/editor/src/services/events.ts
|
|
13005
|
-
var canUsePluginMethods$
|
|
13384
|
+
var canUsePluginMethods$2 = {
|
|
13006
13385
|
async: [],
|
|
13007
13386
|
sync: [
|
|
13008
13387
|
"setEvent",
|
|
@@ -13015,10 +13394,10 @@
|
|
|
13015
13394
|
var methodMap = (0, vue.reactive)({});
|
|
13016
13395
|
var Events = class extends BaseService_default {
|
|
13017
13396
|
constructor() {
|
|
13018
|
-
super([...canUsePluginMethods$
|
|
13397
|
+
super([...canUsePluginMethods$2.async.map((methodName) => ({
|
|
13019
13398
|
name: methodName,
|
|
13020
13399
|
isAsync: true
|
|
13021
|
-
})), ...canUsePluginMethods$
|
|
13400
|
+
})), ...canUsePluginMethods$2.sync.map((methodName) => ({
|
|
13022
13401
|
name: methodName,
|
|
13023
13402
|
isAsync: false
|
|
13024
13403
|
}))]);
|
|
@@ -13236,7 +13615,7 @@
|
|
|
13236
13615
|
var keybinding_default = new Keybinding();
|
|
13237
13616
|
//#endregion
|
|
13238
13617
|
//#region packages/editor/src/services/stageOverlay.ts
|
|
13239
|
-
var canUsePluginMethods = {
|
|
13618
|
+
var canUsePluginMethods$1 = {
|
|
13240
13619
|
async: [],
|
|
13241
13620
|
sync: [
|
|
13242
13621
|
"openOverlay",
|
|
@@ -13257,7 +13636,7 @@
|
|
|
13257
13636
|
stageOverlayVisible: false
|
|
13258
13637
|
});
|
|
13259
13638
|
constructor() {
|
|
13260
|
-
super(canUsePluginMethods.sync.map((methodName) => ({
|
|
13639
|
+
super(canUsePluginMethods$1.sync.map((methodName) => ({
|
|
13261
13640
|
name: methodName,
|
|
13262
13641
|
isAsync: false
|
|
13263
13642
|
})));
|
|
@@ -13477,13 +13856,13 @@
|
|
|
13477
13856
|
});
|
|
13478
13857
|
};
|
|
13479
13858
|
var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
|
|
13480
|
-
let
|
|
13859
|
+
let getTMagicAppPromise = null;
|
|
13481
13860
|
const getTMagicApp = async () => {
|
|
13482
13861
|
const { renderer } = await getStage();
|
|
13483
13862
|
if (!renderer) return;
|
|
13484
13863
|
if (renderer.runtime) return renderer.runtime.getApp?.();
|
|
13485
|
-
if (
|
|
13486
|
-
|
|
13864
|
+
if (getTMagicAppPromise) return getTMagicAppPromise;
|
|
13865
|
+
getTMagicAppPromise = new Promise((resolve) => {
|
|
13487
13866
|
const timeout = globalThis.setTimeout(() => {
|
|
13488
13867
|
resolve(void 0);
|
|
13489
13868
|
}, 1e4);
|
|
@@ -13492,7 +13871,7 @@
|
|
|
13492
13871
|
resolve(renderer.runtime?.getApp?.());
|
|
13493
13872
|
});
|
|
13494
13873
|
});
|
|
13495
|
-
return
|
|
13874
|
+
return getTMagicAppPromise;
|
|
13496
13875
|
};
|
|
13497
13876
|
const updateStageNodes = (nodes) => {
|
|
13498
13877
|
for (const node of nodes) updateStageNode(node);
|
|
@@ -13850,6 +14229,7 @@
|
|
|
13850
14229
|
canSelect: { type: Function },
|
|
13851
14230
|
isContainer: { type: Function },
|
|
13852
14231
|
customContentMenu: { type: Function },
|
|
14232
|
+
beforeDblclick: { type: Function },
|
|
13853
14233
|
extendFormState: { type: Function },
|
|
13854
14234
|
pageBarSortOptions: {},
|
|
13855
14235
|
pageFilterFunction: { type: Function }
|
|
@@ -13896,7 +14276,8 @@
|
|
|
13896
14276
|
disabledDragStart: props.disabledDragStart,
|
|
13897
14277
|
renderType: props.renderType,
|
|
13898
14278
|
guidesOptions: props.guidesOptions,
|
|
13899
|
-
disabledMultiSelect: props.disabledMultiSelect
|
|
14279
|
+
disabledMultiSelect: props.disabledMultiSelect,
|
|
14280
|
+
beforeDblclick: props.beforeDblclick
|
|
13900
14281
|
};
|
|
13901
14282
|
stageOverlay_default.set("stageOptions", stageOptions);
|
|
13902
14283
|
(0, vue.provide)("services", services);
|
|
@@ -14136,13 +14517,23 @@
|
|
|
14136
14517
|
labelWidth: "120px",
|
|
14137
14518
|
name: props.name
|
|
14138
14519
|
}];
|
|
14139
|
-
const codeParamsConfig = (0, vue.computed)(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) =>
|
|
14140
|
-
type
|
|
14141
|
-
name
|
|
14142
|
-
|
|
14143
|
-
|
|
14144
|
-
|
|
14145
|
-
|
|
14520
|
+
const codeParamsConfig = (0, vue.computed)(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) => {
|
|
14521
|
+
let { type } = config;
|
|
14522
|
+
if (typeof type === "function") type = type(void 0, { model: props.model[props.name] });
|
|
14523
|
+
if (type && ["data-source-field-select", "vs-code"].includes(type)) return {
|
|
14524
|
+
...config,
|
|
14525
|
+
name,
|
|
14526
|
+
text,
|
|
14527
|
+
extra
|
|
14528
|
+
};
|
|
14529
|
+
return {
|
|
14530
|
+
type: "data-source-field-select",
|
|
14531
|
+
name,
|
|
14532
|
+
text,
|
|
14533
|
+
extra,
|
|
14534
|
+
fieldConfig: config
|
|
14535
|
+
};
|
|
14536
|
+
})));
|
|
14146
14537
|
/**
|
|
14147
14538
|
* 参数值修改更新
|
|
14148
14539
|
*/
|
|
@@ -14998,8 +15389,9 @@
|
|
|
14998
15389
|
actions: [{
|
|
14999
15390
|
text: "编辑",
|
|
15000
15391
|
handler: (method, index) => {
|
|
15001
|
-
let codeContent =
|
|
15002
|
-
if (typeof
|
|
15392
|
+
let codeContent = "({ params, dataSource, app }) => {\n // place your code here\n}";
|
|
15393
|
+
if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
|
|
15394
|
+
else codeContent = method.content;
|
|
15003
15395
|
codeConfig.value = {
|
|
15004
15396
|
...cloneDeep(method),
|
|
15005
15397
|
content: codeContent
|
|
@@ -15488,6 +15880,30 @@
|
|
|
15488
15880
|
});
|
|
15489
15881
|
const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
|
|
15490
15882
|
if (!dataSourceId) return [];
|
|
15883
|
+
if (methodName === _tmagic_utils.DATA_SOURCE_SET_DATA_METHOD_NAME) return [{
|
|
15884
|
+
name: "field",
|
|
15885
|
+
text: "字段",
|
|
15886
|
+
type: "data-source-field-select",
|
|
15887
|
+
dataSourceId,
|
|
15888
|
+
checkStrictly: true
|
|
15889
|
+
}, {
|
|
15890
|
+
name: "data",
|
|
15891
|
+
text: "数据",
|
|
15892
|
+
type: (_formState, { model }) => {
|
|
15893
|
+
const fieldType = getFieldType(dataSourceService.getDataSourceById(`${dataSourceId}`), model.field);
|
|
15894
|
+
let type = "vs-code";
|
|
15895
|
+
if (fieldType === "number") type = "number";
|
|
15896
|
+
else if (fieldType === "string") type = "text";
|
|
15897
|
+
else if (fieldType === "boolean") type = "switch";
|
|
15898
|
+
return type;
|
|
15899
|
+
},
|
|
15900
|
+
language: "javascript",
|
|
15901
|
+
options: (0, vue.inject)("codeOptions", {}),
|
|
15902
|
+
autosize: {
|
|
15903
|
+
minRows: 1,
|
|
15904
|
+
maxRows: 10
|
|
15905
|
+
}
|
|
15906
|
+
}];
|
|
15491
15907
|
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
|
|
15492
15908
|
if (!paramStatements) return [];
|
|
15493
15909
|
return paramStatements.map((paramState) => ({
|
|
@@ -15496,13 +15912,20 @@
|
|
|
15496
15912
|
}));
|
|
15497
15913
|
};
|
|
15498
15914
|
const paramsConfig = (0, vue.ref)(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
|
|
15499
|
-
const methodsOptions = (0, vue.computed)(() => dataSources.value?.
|
|
15915
|
+
const methodsOptions = (0, vue.computed)(() => dataSources.value?.map((ds) => ({
|
|
15500
15916
|
label: ds.title || ds.id,
|
|
15501
15917
|
value: ds.id,
|
|
15502
|
-
children: [
|
|
15503
|
-
|
|
15504
|
-
|
|
15505
|
-
|
|
15918
|
+
children: [
|
|
15919
|
+
{
|
|
15920
|
+
label: "设置数据",
|
|
15921
|
+
value: _tmagic_utils.DATA_SOURCE_SET_DATA_METHOD_NAME
|
|
15922
|
+
},
|
|
15923
|
+
...dataSourceService?.getFormMethod(ds.type) || [],
|
|
15924
|
+
...(ds.methods || []).map((method) => ({
|
|
15925
|
+
label: method.name,
|
|
15926
|
+
value: method.name
|
|
15927
|
+
}))
|
|
15928
|
+
]
|
|
15506
15929
|
})) || []);
|
|
15507
15930
|
const cascaderConfig = (0, vue.computed)(() => ({
|
|
15508
15931
|
type: "cascader",
|
|
@@ -15598,7 +16021,8 @@
|
|
|
15598
16021
|
checkStrictly: { type: Boolean },
|
|
15599
16022
|
size: {},
|
|
15600
16023
|
dataSourceFieldType: {},
|
|
15601
|
-
notEditable: { type: [Boolean, Function] }
|
|
16024
|
+
notEditable: { type: [Boolean, Function] },
|
|
16025
|
+
dataSourceId: {}
|
|
15602
16026
|
}, {
|
|
15603
16027
|
"modelValue": { default: [] },
|
|
15604
16028
|
"modelModifiers": {}
|
|
@@ -15612,7 +16036,11 @@
|
|
|
15612
16036
|
const { dataSourceService, uiService } = useServices();
|
|
15613
16037
|
const mForm = (0, vue.inject)("mForm");
|
|
15614
16038
|
const eventBus = (0, vue.inject)("eventBus");
|
|
15615
|
-
const
|
|
16039
|
+
const allDataSources = (0, vue.computed)(() => dataSourceService.get("dataSources") || []);
|
|
16040
|
+
const dataSources = (0, vue.computed)(() => {
|
|
16041
|
+
if (!props.dataSourceId) return allDataSources.value;
|
|
16042
|
+
return allDataSources.value.filter((ds) => ds.id === props.dataSourceId);
|
|
16043
|
+
});
|
|
15616
16044
|
const valueIsKey = (0, vue.computed)(() => props.value === "key");
|
|
15617
16045
|
const notEditable = (0, vue.computed)(() => (0, _tmagic_form.filterFunction)(mForm, props.notEditable, props));
|
|
15618
16046
|
const dataSourcesOptions = (0, vue.computed)(() => dataSources.value.map((ds) => ({
|
|
@@ -15622,7 +16050,10 @@
|
|
|
15622
16050
|
const selectDataSourceId = (0, vue.ref)("");
|
|
15623
16051
|
const selectFieldsId = (0, vue.ref)([]);
|
|
15624
16052
|
(0, vue.watch)(modelValue, (value) => {
|
|
15625
|
-
if (
|
|
16053
|
+
if (props.dataSourceId) {
|
|
16054
|
+
selectDataSourceId.value = valueIsKey.value ? props.dataSourceId : `${_tmagic_utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
|
|
16055
|
+
selectFieldsId.value = Array.isArray(value) ? value : [];
|
|
16056
|
+
} else if (Array.isArray(value) && value.length) {
|
|
15626
16057
|
const [dsId, ...fields] = value;
|
|
15627
16058
|
selectDataSourceId.value = dsId;
|
|
15628
16059
|
selectFieldsId.value = fields;
|
|
@@ -15632,7 +16063,7 @@
|
|
|
15632
16063
|
}
|
|
15633
16064
|
}, { immediate: true });
|
|
15634
16065
|
const fieldsOptions = (0, vue.computed)(() => {
|
|
15635
|
-
const ds =
|
|
16066
|
+
const ds = allDataSources.value.find((ds) => ds.id === (0, _tmagic_utils.removeDataSourceFieldPrefix)(selectDataSourceId.value));
|
|
15636
16067
|
if (!ds) return [];
|
|
15637
16068
|
return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
|
|
15638
16069
|
});
|
|
@@ -15648,8 +16079,13 @@
|
|
|
15648
16079
|
emit("change", modelValue.value);
|
|
15649
16080
|
};
|
|
15650
16081
|
const fieldChangeHandler = (v = []) => {
|
|
15651
|
-
|
|
15652
|
-
|
|
16082
|
+
if (props.dataSourceId) {
|
|
16083
|
+
modelValue.value = v;
|
|
16084
|
+
emit("change", v);
|
|
16085
|
+
} else {
|
|
16086
|
+
modelValue.value = [selectDataSourceId.value, ...v];
|
|
16087
|
+
emit("change", modelValue.value);
|
|
16088
|
+
}
|
|
15653
16089
|
};
|
|
15654
16090
|
const onChangeHandler = (v = []) => {
|
|
15655
16091
|
modelValue.value = v;
|
|
@@ -15660,7 +16096,23 @@
|
|
|
15660
16096
|
eventBus?.emit("edit-data-source", (0, _tmagic_utils.removeDataSourceFieldPrefix)(id));
|
|
15661
16097
|
};
|
|
15662
16098
|
return (_ctx, _cache) => {
|
|
15663
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [__props.
|
|
16099
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [__props.dataSourceId ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
|
|
16100
|
+
key: 0,
|
|
16101
|
+
"model-value": selectFieldsId.value,
|
|
16102
|
+
clearable: "",
|
|
16103
|
+
filterable: "",
|
|
16104
|
+
size: __props.size,
|
|
16105
|
+
disabled: __props.disabled,
|
|
16106
|
+
options: fieldsOptions.value,
|
|
16107
|
+
props: { checkStrictly: __props.checkStrictly },
|
|
16108
|
+
onChange: fieldChangeHandler
|
|
16109
|
+
}, null, 8, [
|
|
16110
|
+
"model-value",
|
|
16111
|
+
"size",
|
|
16112
|
+
"disabled",
|
|
16113
|
+
"options",
|
|
16114
|
+
"props"
|
|
16115
|
+
])) : __props.checkStrictly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicSelect), {
|
|
15664
16116
|
"model-value": selectDataSourceId.value,
|
|
15665
16117
|
clearable: "",
|
|
15666
16118
|
filterable: "",
|
|
@@ -15703,7 +16155,7 @@
|
|
|
15703
16155
|
"options",
|
|
15704
16156
|
"props"
|
|
15705
16157
|
])], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
|
|
15706
|
-
key:
|
|
16158
|
+
key: 2,
|
|
15707
16159
|
clearable: "",
|
|
15708
16160
|
filterable: "",
|
|
15709
16161
|
"model-value": modelValue.value,
|
|
@@ -15719,7 +16171,7 @@
|
|
|
15719
16171
|
"options",
|
|
15720
16172
|
"props"
|
|
15721
16173
|
])), selectDataSourceId.value && hasDataSourceSidePanel.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
|
|
15722
|
-
key:
|
|
16174
|
+
key: 3,
|
|
15723
16175
|
content: notEditable.value ? "查看" : "编辑"
|
|
15724
16176
|
}, {
|
|
15725
16177
|
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
|
|
@@ -15837,6 +16289,7 @@
|
|
|
15837
16289
|
value: __props.config.value,
|
|
15838
16290
|
checkStrictly: checkStrictly.value,
|
|
15839
16291
|
dataSourceFieldType: __props.config.dataSourceFieldType,
|
|
16292
|
+
dataSourceId: __props.config.dataSourceId,
|
|
15840
16293
|
onChange: onChangeHandler
|
|
15841
16294
|
}, null, 8, [
|
|
15842
16295
|
"model-value",
|
|
@@ -15844,7 +16297,8 @@
|
|
|
15844
16297
|
"size",
|
|
15845
16298
|
"value",
|
|
15846
16299
|
"checkStrictly",
|
|
15847
|
-
"dataSourceFieldType"
|
|
16300
|
+
"dataSourceFieldType",
|
|
16301
|
+
"dataSourceId"
|
|
15848
16302
|
])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), {
|
|
15849
16303
|
key: 1,
|
|
15850
16304
|
config: __props.config.fieldConfig,
|
|
@@ -16512,6 +16966,7 @@
|
|
|
16512
16966
|
name: props.name,
|
|
16513
16967
|
titlePrefix: props.config.titlePrefix,
|
|
16514
16968
|
expandAll: true,
|
|
16969
|
+
enableToggleMode: false,
|
|
16515
16970
|
items: [{
|
|
16516
16971
|
type: "table",
|
|
16517
16972
|
name: "cond",
|
|
@@ -17854,6 +18309,60 @@
|
|
|
17854
18309
|
//#region packages/editor/src/fields/StyleSetter/pro/Border.vue
|
|
17855
18310
|
var Border_default = Border_vue_vue_type_script_setup_true_lang_default;
|
|
17856
18311
|
//#endregion
|
|
18312
|
+
//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue?vue&type=script&setup=true&lang.ts
|
|
18313
|
+
var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
18314
|
+
__name: "Transform",
|
|
18315
|
+
props: {
|
|
18316
|
+
values: {},
|
|
18317
|
+
disabled: { type: Boolean },
|
|
18318
|
+
size: {}
|
|
18319
|
+
},
|
|
18320
|
+
emits: ["change"],
|
|
18321
|
+
setup(__props, { emit: __emit }) {
|
|
18322
|
+
const emit = __emit;
|
|
18323
|
+
const config = (0, _tmagic_form.defineFormItem)({ items: [{
|
|
18324
|
+
name: "transform",
|
|
18325
|
+
items: [{
|
|
18326
|
+
name: "rotate",
|
|
18327
|
+
text: "旋转角度",
|
|
18328
|
+
labelWidth: "68px",
|
|
18329
|
+
type: "data-source-field-select",
|
|
18330
|
+
checkStrictly: false,
|
|
18331
|
+
dataSourceFieldType: ["string", "number"],
|
|
18332
|
+
fieldConfig: { type: "text" }
|
|
18333
|
+
}, {
|
|
18334
|
+
name: "scale",
|
|
18335
|
+
text: "缩放",
|
|
18336
|
+
labelWidth: "68px",
|
|
18337
|
+
type: "data-source-field-select",
|
|
18338
|
+
checkStrictly: false,
|
|
18339
|
+
dataSourceFieldType: ["string", "number"],
|
|
18340
|
+
fieldConfig: { type: "text" }
|
|
18341
|
+
}]
|
|
18342
|
+
}] });
|
|
18343
|
+
const change = (value, eventData) => {
|
|
18344
|
+
emit("change", value, eventData);
|
|
18345
|
+
};
|
|
18346
|
+
return (_ctx, _cache) => {
|
|
18347
|
+
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
|
|
18348
|
+
config: (0, vue.unref)(config),
|
|
18349
|
+
model: __props.values,
|
|
18350
|
+
size: __props.size,
|
|
18351
|
+
disabled: __props.disabled,
|
|
18352
|
+
onChange: change
|
|
18353
|
+
}, null, 8, [
|
|
18354
|
+
"config",
|
|
18355
|
+
"model",
|
|
18356
|
+
"size",
|
|
18357
|
+
"disabled"
|
|
18358
|
+
]);
|
|
18359
|
+
};
|
|
18360
|
+
}
|
|
18361
|
+
});
|
|
18362
|
+
//#endregion
|
|
18363
|
+
//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue
|
|
18364
|
+
var Transform_default = Transform_vue_vue_type_script_setup_true_lang_default;
|
|
18365
|
+
//#endregion
|
|
17857
18366
|
//#region packages/editor/src/fields/StyleSetter/Index.vue?vue&type=script&setup=true&lang.ts
|
|
17858
18367
|
var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
17859
18368
|
name: "MFieldsStyleSetter",
|
|
@@ -17895,6 +18404,10 @@
|
|
|
17895
18404
|
{
|
|
17896
18405
|
title: "边框与圆角",
|
|
17897
18406
|
component: Border_default
|
|
18407
|
+
},
|
|
18408
|
+
{
|
|
18409
|
+
title: "变形",
|
|
18410
|
+
component: Transform_default
|
|
17898
18411
|
}
|
|
17899
18412
|
];
|
|
17900
18413
|
const collapseValue = (0, vue.shallowRef)(Array(list.length).fill(1).map((x, i) => `${i}`));
|
|
@@ -18330,8 +18843,14 @@
|
|
|
18330
18843
|
exports.arrayOptions = arrayOptions;
|
|
18331
18844
|
exports.beforePaste = beforePaste;
|
|
18332
18845
|
exports.buildChangeRecords = buildChangeRecords;
|
|
18846
|
+
exports.calcAlignCenterStyle = calcAlignCenterStyle;
|
|
18847
|
+
exports.calcLayerTargetIndex = calcLayerTargetIndex;
|
|
18848
|
+
exports.calcMoveStyle = calcMoveStyle;
|
|
18849
|
+
exports.canUsePluginMethods = canUsePluginMethods;
|
|
18333
18850
|
exports.change2Fixed = change2Fixed;
|
|
18851
|
+
exports.classifyDragSources = classifyDragSources;
|
|
18334
18852
|
exports.codeBlockService = codeBlock_default;
|
|
18853
|
+
exports.collectRelatedNodes = collectRelatedNodes;
|
|
18335
18854
|
exports.dataSourceService = dataSource_default;
|
|
18336
18855
|
exports.debug = debug;
|
|
18337
18856
|
exports.default = plugin_default;
|
|
@@ -18343,6 +18862,7 @@
|
|
|
18343
18862
|
}
|
|
18344
18863
|
});
|
|
18345
18864
|
exports.displayTabConfig = displayTabConfig;
|
|
18865
|
+
exports.editorNodeMergeCustomizer = editorNodeMergeCustomizer;
|
|
18346
18866
|
exports.editorService = editor_default;
|
|
18347
18867
|
exports.eqOptions = eqOptions;
|
|
18348
18868
|
exports.error = error;
|
|
@@ -18383,6 +18903,7 @@
|
|
|
18383
18903
|
exports.moveItemsInContainer = moveItemsInContainer;
|
|
18384
18904
|
exports.numberOptions = numberOptions;
|
|
18385
18905
|
exports.propsService = props_default;
|
|
18906
|
+
exports.resolveSelectedNode = resolveSelectedNode;
|
|
18386
18907
|
exports.serializeConfig = serializeConfig;
|
|
18387
18908
|
exports.setChildrenLayout = setChildrenLayout;
|
|
18388
18909
|
exports.setEditorConfig = setEditorConfig;
|
|
@@ -18396,6 +18917,7 @@
|
|
|
18396
18917
|
return _tmagic_table.default;
|
|
18397
18918
|
}
|
|
18398
18919
|
});
|
|
18920
|
+
exports.toggleFixedPosition = toggleFixedPosition;
|
|
18399
18921
|
exports.uiService = ui_default;
|
|
18400
18922
|
exports.updateStatus = updateStatus;
|
|
18401
18923
|
exports.useCodeBlockEdit = useCodeBlockEdit;
|