@tmagic/editor 1.3.0-beta.4 → 1.3.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +4 -4
- package/dist/tmagic-editor.js +301 -195
- package/dist/tmagic-editor.js.map +1 -1
- package/dist/tmagic-editor.umd.cjs +301 -193
- package/dist/tmagic-editor.umd.cjs.map +1 -1
- package/package.json +11 -10
- package/src/components/Icon.vue +5 -1
- package/src/fields/CodeSelectCol.vue +1 -2
- package/src/fields/DataSourceMethodSelect.vue +0 -3
- package/src/fields/EventSelect.vue +4 -5
- package/src/fields/KeyValue.vue +1 -0
- package/src/fields/UISelect.vue +3 -3
- package/src/hooks/use-stage.ts +7 -2
- package/src/layouts/CodeEditor.vue +1 -0
- package/src/layouts/sidebar/ComponentListPanel.vue +4 -3
- package/src/layouts/sidebar/layer/LayerNode.vue +7 -5
- package/src/layouts/sidebar/layer/LayerPanel.vue +4 -2
- package/src/layouts/sidebar/layer/use-keybinding.ts +11 -8
- package/src/layouts/sidebar/layer/use-node-status.ts +9 -5
- package/src/layouts/workspace/viewer/Stage.vue +2 -1
- package/src/services/dataSource.ts +2 -2
- package/src/theme/event.scss +1 -3
- package/src/theme/framework.scss +0 -2
- package/src/theme/layer-panel.scss +4 -0
- package/src/type.ts +19 -0
- package/src/utils/data-source/index.ts +117 -34
- package/src/utils/keybinding-config.ts +31 -26
- package/src/utils/props.ts +1 -0
- package/types/layouts/CodeEditor.vue.d.ts +4 -1
- package/types/layouts/sidebar/layer/LayerNode.vue.d.ts +1 -1
- package/types/layouts/sidebar/layer/use-keybinding.d.ts +3 -2
- package/types/type.d.ts +18 -0
- package/types/utils/data-source/index.d.ts +1 -0
- package/types/utils/keybinding-config.d.ts +4 -0
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
__name: "CodeEditor",
|
|
40
40
|
props: {
|
|
41
|
-
initValues: {},
|
|
41
|
+
initValues: { default: "" },
|
|
42
42
|
modifiedValues: {},
|
|
43
43
|
type: {},
|
|
44
44
|
language: { default: "javascript" },
|
|
@@ -786,47 +786,72 @@
|
|
|
786
786
|
...BaseFormConfig(),
|
|
787
787
|
...config,
|
|
788
788
|
{
|
|
789
|
-
type: "
|
|
790
|
-
title: "数据定义",
|
|
789
|
+
type: "tab",
|
|
791
790
|
items: [
|
|
792
791
|
{
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
items: [
|
|
792
|
+
title: "数据定义",
|
|
793
|
+
items: [
|
|
794
|
+
{
|
|
795
|
+
name: "fields",
|
|
796
|
+
type: "data-source-fields",
|
|
797
|
+
defaultValue: () => []
|
|
798
|
+
}
|
|
799
|
+
]
|
|
800
|
+
},
|
|
803
801
|
{
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
display: false,
|
|
814
|
-
items: [
|
|
802
|
+
title: "方法定义",
|
|
803
|
+
items: [
|
|
804
|
+
{
|
|
805
|
+
name: "methods",
|
|
806
|
+
type: "data-source-methods",
|
|
807
|
+
defaultValue: () => []
|
|
808
|
+
}
|
|
809
|
+
]
|
|
810
|
+
},
|
|
815
811
|
{
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
812
|
+
title: "事件配置",
|
|
813
|
+
display: false,
|
|
814
|
+
items: [
|
|
815
|
+
{
|
|
816
|
+
name: "events",
|
|
817
|
+
src: "datasource",
|
|
818
|
+
type: "event-select"
|
|
819
|
+
}
|
|
820
|
+
]
|
|
821
|
+
},
|
|
826
822
|
{
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
823
|
+
title: "mock数据",
|
|
824
|
+
items: [
|
|
825
|
+
{
|
|
826
|
+
name: "mocks",
|
|
827
|
+
type: "data-source-mocks",
|
|
828
|
+
defaultValue: () => []
|
|
829
|
+
}
|
|
830
|
+
]
|
|
831
|
+
},
|
|
832
|
+
{
|
|
833
|
+
title: "请求参数裁剪",
|
|
834
|
+
display: (formState, { model }) => model.type === "http",
|
|
835
|
+
items: [
|
|
836
|
+
{
|
|
837
|
+
name: "beforeRequest",
|
|
838
|
+
type: "vs-code",
|
|
839
|
+
parse: true,
|
|
840
|
+
height: "600px"
|
|
841
|
+
}
|
|
842
|
+
]
|
|
843
|
+
},
|
|
844
|
+
{
|
|
845
|
+
title: "响应数据裁剪",
|
|
846
|
+
display: (formState, { model }) => model.type === "http",
|
|
847
|
+
items: [
|
|
848
|
+
{
|
|
849
|
+
name: "afterResponse",
|
|
850
|
+
type: "vs-code",
|
|
851
|
+
parse: true,
|
|
852
|
+
height: "600px"
|
|
853
|
+
}
|
|
854
|
+
]
|
|
830
855
|
}
|
|
831
856
|
]
|
|
832
857
|
}
|
|
@@ -841,6 +866,62 @@
|
|
|
841
866
|
return fillConfig$1(configs[type] || []);
|
|
842
867
|
}
|
|
843
868
|
};
|
|
869
|
+
const getFormValue = (type, values) => {
|
|
870
|
+
if (type !== "http") {
|
|
871
|
+
return values;
|
|
872
|
+
}
|
|
873
|
+
return {
|
|
874
|
+
beforeRequest: `(options, context) => {
|
|
875
|
+
/**
|
|
876
|
+
* 用户可以直接编写函数,在原始接口调用之前,会运行该函数,将这个函数的返回值作为该数据源接口的入参
|
|
877
|
+
*
|
|
878
|
+
* options: HttpOptions
|
|
879
|
+
*
|
|
880
|
+
* interface HttpOptions {
|
|
881
|
+
* // 请求链接
|
|
882
|
+
* url: string;
|
|
883
|
+
* // query参数
|
|
884
|
+
* params?: Record<string, string>;
|
|
885
|
+
* // body数据
|
|
886
|
+
* data?: Record<string, any>;
|
|
887
|
+
* // 请求头
|
|
888
|
+
* headers?: Record<string, string>;
|
|
889
|
+
* // 请求方法 GET/POST
|
|
890
|
+
* method?: Method;
|
|
891
|
+
* }
|
|
892
|
+
*
|
|
893
|
+
* context:上下文对象
|
|
894
|
+
*
|
|
895
|
+
* interface Content {
|
|
896
|
+
* app: AppCore;
|
|
897
|
+
* dataSource: HttpDataSource;
|
|
898
|
+
* }
|
|
899
|
+
*
|
|
900
|
+
* return: HttpOptions
|
|
901
|
+
*/
|
|
902
|
+
|
|
903
|
+
// 此处的返回值会作为这个接口的入参
|
|
904
|
+
return options;
|
|
905
|
+
}`,
|
|
906
|
+
afterResponse: `(response, context) => {
|
|
907
|
+
/**
|
|
908
|
+
* 用户可以直接编写函数,在原始接口返回之后,会运行该函数,将这个函数的返回值作为该数据源接口的返回
|
|
909
|
+
|
|
910
|
+
* context:上下文对象
|
|
911
|
+
*
|
|
912
|
+
* interface Content {
|
|
913
|
+
* app: AppCore;
|
|
914
|
+
* dataSource: HttpDataSource;
|
|
915
|
+
* }
|
|
916
|
+
*
|
|
917
|
+
*/
|
|
918
|
+
|
|
919
|
+
// 此处的返回值会作为这个接口的返回值
|
|
920
|
+
return response;
|
|
921
|
+
}`,
|
|
922
|
+
...values
|
|
923
|
+
};
|
|
924
|
+
};
|
|
844
925
|
const getDisplayField = (dataSources, key) => {
|
|
845
926
|
const displayState = [];
|
|
846
927
|
const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
|
|
@@ -1026,7 +1107,7 @@
|
|
|
1026
1107
|
this.get("configs")[type] = config;
|
|
1027
1108
|
}
|
|
1028
1109
|
getFormValue(type = "base") {
|
|
1029
|
-
return this.get("values")[type];
|
|
1110
|
+
return getFormValue(type, this.get("values")[type]);
|
|
1030
1111
|
}
|
|
1031
1112
|
setFormValue(type, value) {
|
|
1032
1113
|
this.get("values")[type] = value;
|
|
@@ -1260,6 +1341,7 @@
|
|
|
1260
1341
|
{
|
|
1261
1342
|
name: "events",
|
|
1262
1343
|
src: "component",
|
|
1344
|
+
labelWidth: "100px",
|
|
1263
1345
|
type: "event-select"
|
|
1264
1346
|
}
|
|
1265
1347
|
]
|
|
@@ -1490,6 +1572,7 @@
|
|
|
1490
1572
|
DragType2["LAYER_TREE"] = "layer-tree";
|
|
1491
1573
|
return DragType2;
|
|
1492
1574
|
})(DragType || {});
|
|
1575
|
+
const UI_SELECT_MODE_EVENT_NAME = "ui-select";
|
|
1493
1576
|
|
|
1494
1577
|
const COPY_STORAGE_KEY = "$MagicEditorCopyData";
|
|
1495
1578
|
const getPageList = (app) => {
|
|
@@ -2940,6 +3023,7 @@
|
|
|
2940
3023
|
icon: {}
|
|
2941
3024
|
},
|
|
2942
3025
|
setup(__props) {
|
|
3026
|
+
const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
|
|
2943
3027
|
return (_ctx, _cache) => {
|
|
2944
3028
|
return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
|
|
2945
3029
|
key: 0,
|
|
@@ -2949,7 +3033,7 @@
|
|
|
2949
3033
|
vue.createVNode(vue.unref(iconsVue.Edit))
|
|
2950
3034
|
]),
|
|
2951
3035
|
_: 1
|
|
2952
|
-
})) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
|
|
3036
|
+
})) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
|
|
2953
3037
|
key: 1,
|
|
2954
3038
|
class: "magic-editor-icon"
|
|
2955
3039
|
}, {
|
|
@@ -3077,9 +3161,7 @@
|
|
|
3077
3161
|
);
|
|
3078
3162
|
const selectConfig = {
|
|
3079
3163
|
type: "select",
|
|
3080
|
-
text: "代码块",
|
|
3081
3164
|
name: props.name,
|
|
3082
|
-
labelWidth: "80px",
|
|
3083
3165
|
options: () => {
|
|
3084
3166
|
if (codeDsl.value) {
|
|
3085
3167
|
return lodashEs.map(codeDsl.value, (value, key) => ({
|
|
@@ -3113,8 +3195,9 @@
|
|
|
3113
3195
|
class: "select",
|
|
3114
3196
|
config: selectConfig,
|
|
3115
3197
|
model: _ctx.model,
|
|
3198
|
+
size: _ctx.size,
|
|
3116
3199
|
onChange: onParamsChangeHandler
|
|
3117
|
-
}, null, 8, ["model"]),
|
|
3200
|
+
}, null, 8, ["model", "size"]),
|
|
3118
3201
|
_ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
|
|
3119
3202
|
key: 0,
|
|
3120
3203
|
class: "icon",
|
|
@@ -3933,7 +4016,6 @@
|
|
|
3933
4016
|
if (!paramStatements)
|
|
3934
4017
|
return [];
|
|
3935
4018
|
return paramStatements.map((paramState) => ({
|
|
3936
|
-
labelWidth: "100px",
|
|
3937
4019
|
text: paramState.name,
|
|
3938
4020
|
...paramState
|
|
3939
4021
|
}));
|
|
@@ -3962,9 +4044,7 @@
|
|
|
3962
4044
|
);
|
|
3963
4045
|
const cascaderConfig = vue.computed(() => ({
|
|
3964
4046
|
type: "cascader",
|
|
3965
|
-
text: "数据源方法",
|
|
3966
4047
|
name: props.name,
|
|
3967
|
-
labelWidth: "80px",
|
|
3968
4048
|
options: methodsOptions.value,
|
|
3969
4049
|
onChange: (formState, dataSourceMethod) => {
|
|
3970
4050
|
setParamsConfig(dataSourceMethod, formState);
|
|
@@ -4370,7 +4450,6 @@
|
|
|
4370
4450
|
const defaultActionTypeConfig = {
|
|
4371
4451
|
name: "actionType",
|
|
4372
4452
|
text: "联动类型",
|
|
4373
|
-
labelWidth: "80px",
|
|
4374
4453
|
type: "select",
|
|
4375
4454
|
defaultValue: schema.ActionType.COMP,
|
|
4376
4455
|
options: () => [
|
|
@@ -4399,7 +4478,6 @@
|
|
|
4399
4478
|
const defaultTargetCompConfig = {
|
|
4400
4479
|
name: "to",
|
|
4401
4480
|
text: "联动组件",
|
|
4402
|
-
labelWidth: "80px",
|
|
4403
4481
|
type: "ui-select",
|
|
4404
4482
|
display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
|
|
4405
4483
|
};
|
|
@@ -4409,7 +4487,6 @@
|
|
|
4409
4487
|
const defaultCompActionConfig = {
|
|
4410
4488
|
name: "method",
|
|
4411
4489
|
text: "动作",
|
|
4412
|
-
labelWidth: "80px",
|
|
4413
4490
|
type: "select",
|
|
4414
4491
|
display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
|
|
4415
4492
|
options: (mForm, { model }) => {
|
|
@@ -4427,7 +4504,7 @@
|
|
|
4427
4504
|
const codeActionConfig = vue.computed(() => {
|
|
4428
4505
|
const defaultCodeActionConfig = {
|
|
4429
4506
|
type: "code-select-col",
|
|
4430
|
-
|
|
4507
|
+
text: "代码块",
|
|
4431
4508
|
name: "codeId",
|
|
4432
4509
|
disabled: () => !codeBlockService?.getEditStatus(),
|
|
4433
4510
|
display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
|
|
@@ -4437,8 +4514,8 @@
|
|
|
4437
4514
|
const dataSourceActionConfig = vue.computed(() => {
|
|
4438
4515
|
const defaultDataSourceActionConfig = {
|
|
4439
4516
|
type: "data-source-method-select",
|
|
4517
|
+
text: "数据源方法",
|
|
4440
4518
|
name: "dataSourceMethod",
|
|
4441
|
-
labelWidth: 0,
|
|
4442
4519
|
display: (mForm, { model }) => model.actionType === schema.ActionType.DATA_SOURCE
|
|
4443
4520
|
};
|
|
4444
4521
|
return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
|
|
@@ -4484,6 +4561,7 @@
|
|
|
4484
4561
|
name: "actions",
|
|
4485
4562
|
expandAll: true,
|
|
4486
4563
|
enableToggleMode: false,
|
|
4564
|
+
titlePrefix: "动作",
|
|
4487
4565
|
items: [
|
|
4488
4566
|
actionTypeConfig.value,
|
|
4489
4567
|
targetCompConfig.value,
|
|
@@ -4553,6 +4631,7 @@
|
|
|
4553
4631
|
size: _ctx.size,
|
|
4554
4632
|
config: actionsConfig.value,
|
|
4555
4633
|
model: cardItem,
|
|
4634
|
+
"label-width": _ctx.config.labelWidth || "100px",
|
|
4556
4635
|
onChange: onChangeHandler
|
|
4557
4636
|
}, {
|
|
4558
4637
|
header: vue.withCtx(() => [
|
|
@@ -4574,7 +4653,7 @@
|
|
|
4574
4653
|
}, null, 8, ["icon", "disabled", "size", "onClick"])
|
|
4575
4654
|
]),
|
|
4576
4655
|
_: 2
|
|
4577
|
-
}, 1032, ["disabled", "size", "config", "model"]);
|
|
4656
|
+
}, 1032, ["disabled", "size", "config", "model", "label-width"]);
|
|
4578
4657
|
}), 128))
|
|
4579
4658
|
]))
|
|
4580
4659
|
]);
|
|
@@ -4627,6 +4706,7 @@
|
|
|
4627
4706
|
};
|
|
4628
4707
|
const deleteHandler = (index) => {
|
|
4629
4708
|
records.value.splice(index, 1);
|
|
4709
|
+
emit("change", getValue());
|
|
4630
4710
|
};
|
|
4631
4711
|
return (_ctx, _cache) => {
|
|
4632
4712
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
|
|
@@ -4715,7 +4795,7 @@
|
|
|
4715
4795
|
return;
|
|
4716
4796
|
services.uiService.set("uiSelectMode", false);
|
|
4717
4797
|
uiSelectMode.value = false;
|
|
4718
|
-
globalThis.document.removeEventListener(
|
|
4798
|
+
globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
|
|
4719
4799
|
};
|
|
4720
4800
|
const clickHandler = ({ detail }) => {
|
|
4721
4801
|
if (detail.id) {
|
|
@@ -4736,7 +4816,7 @@
|
|
|
4736
4816
|
return;
|
|
4737
4817
|
services.uiService.set("uiSelectMode", true);
|
|
4738
4818
|
uiSelectMode.value = true;
|
|
4739
|
-
globalThis.document.addEventListener(
|
|
4819
|
+
globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
|
|
4740
4820
|
};
|
|
4741
4821
|
const deleteHandler = () => {
|
|
4742
4822
|
if (props.model) {
|
|
@@ -6894,7 +6974,7 @@
|
|
|
6894
6974
|
if (!nodeStatusMap?.value)
|
|
6895
6975
|
return;
|
|
6896
6976
|
if (uiService?.get("uiSelectMode")) {
|
|
6897
|
-
document.dispatchEvent(new CustomEvent(
|
|
6977
|
+
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
|
|
6898
6978
|
return;
|
|
6899
6979
|
}
|
|
6900
6980
|
if (hasChilren.value && !props.isCtrlKeyDown) {
|
|
@@ -6908,7 +6988,10 @@
|
|
|
6908
6988
|
};
|
|
6909
6989
|
const contextmenuHandler = (event) => {
|
|
6910
6990
|
event.preventDefault();
|
|
6911
|
-
|
|
6991
|
+
const nodes = editorService?.get("nodes") || [];
|
|
6992
|
+
if (nodes.length < 2 || !nodes.includes(props.data)) {
|
|
6993
|
+
nodeClickHandler();
|
|
6994
|
+
}
|
|
6912
6995
|
emit("node-contextmenu", event, props.data);
|
|
6913
6996
|
};
|
|
6914
6997
|
const nodeContentmenuHandler = (event, node) => {
|
|
@@ -7013,7 +7096,131 @@
|
|
|
7013
7096
|
}
|
|
7014
7097
|
});
|
|
7015
7098
|
|
|
7016
|
-
|
|
7099
|
+
var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
|
|
7100
|
+
KeyBindingContainerKey2["STAGE"] = "stage";
|
|
7101
|
+
KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
|
|
7102
|
+
return KeyBindingContainerKey2;
|
|
7103
|
+
})(KeyBindingContainerKey || {});
|
|
7104
|
+
const keybindingConfig = [
|
|
7105
|
+
{
|
|
7106
|
+
command: KeyBindingCommand.DELETE_NODE,
|
|
7107
|
+
keybinding: ["delete", "backspace"],
|
|
7108
|
+
when: [
|
|
7109
|
+
["stage" /* STAGE */, "keyup"],
|
|
7110
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7111
|
+
]
|
|
7112
|
+
},
|
|
7113
|
+
{
|
|
7114
|
+
command: KeyBindingCommand.COPY_NODE,
|
|
7115
|
+
keybinding: "ctrl+c",
|
|
7116
|
+
when: [
|
|
7117
|
+
["stage" /* STAGE */, "keydown"],
|
|
7118
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7119
|
+
]
|
|
7120
|
+
},
|
|
7121
|
+
{
|
|
7122
|
+
command: KeyBindingCommand.PASTE_NODE,
|
|
7123
|
+
keybinding: "ctrl+v",
|
|
7124
|
+
when: [
|
|
7125
|
+
["stage" /* STAGE */, "keydown"],
|
|
7126
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7127
|
+
]
|
|
7128
|
+
},
|
|
7129
|
+
{
|
|
7130
|
+
command: KeyBindingCommand.CUT_NODE,
|
|
7131
|
+
keybinding: "ctrl+x",
|
|
7132
|
+
when: [
|
|
7133
|
+
["stage" /* STAGE */, "keydown"],
|
|
7134
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7135
|
+
]
|
|
7136
|
+
},
|
|
7137
|
+
{
|
|
7138
|
+
command: KeyBindingCommand.UNDO,
|
|
7139
|
+
keybinding: "ctrl+z",
|
|
7140
|
+
when: [
|
|
7141
|
+
["stage" /* STAGE */, "keydown"],
|
|
7142
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7143
|
+
]
|
|
7144
|
+
},
|
|
7145
|
+
{
|
|
7146
|
+
command: KeyBindingCommand.REDO,
|
|
7147
|
+
keybinding: "ctrl+shift+z",
|
|
7148
|
+
when: [
|
|
7149
|
+
["stage" /* STAGE */, "keydown"],
|
|
7150
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7151
|
+
]
|
|
7152
|
+
},
|
|
7153
|
+
{
|
|
7154
|
+
command: KeyBindingCommand.MOVE_UP_1,
|
|
7155
|
+
keybinding: "up",
|
|
7156
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7157
|
+
},
|
|
7158
|
+
{
|
|
7159
|
+
command: KeyBindingCommand.MOVE_DOWN_1,
|
|
7160
|
+
keybinding: "down",
|
|
7161
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7162
|
+
},
|
|
7163
|
+
{
|
|
7164
|
+
command: KeyBindingCommand.MOVE_LEFT_1,
|
|
7165
|
+
keybinding: "left",
|
|
7166
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7167
|
+
},
|
|
7168
|
+
{
|
|
7169
|
+
command: KeyBindingCommand.MOVE_RIGHT_1,
|
|
7170
|
+
keybinding: "right",
|
|
7171
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7172
|
+
},
|
|
7173
|
+
{
|
|
7174
|
+
command: KeyBindingCommand.MOVE_UP_10,
|
|
7175
|
+
keybinding: "ctrl+up",
|
|
7176
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7177
|
+
},
|
|
7178
|
+
{
|
|
7179
|
+
command: KeyBindingCommand.MOVE_DOWN_10,
|
|
7180
|
+
keybinding: "ctrl+down",
|
|
7181
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7182
|
+
},
|
|
7183
|
+
{
|
|
7184
|
+
command: KeyBindingCommand.MOVE_LEFT_10,
|
|
7185
|
+
keybinding: "ctrl+left",
|
|
7186
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7187
|
+
},
|
|
7188
|
+
{
|
|
7189
|
+
command: KeyBindingCommand.MOVE_RIGHT_10,
|
|
7190
|
+
keybinding: "ctrl+right",
|
|
7191
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7192
|
+
},
|
|
7193
|
+
{
|
|
7194
|
+
command: KeyBindingCommand.SWITCH_NODE,
|
|
7195
|
+
keybinding: "tab",
|
|
7196
|
+
when: [
|
|
7197
|
+
["stage" /* STAGE */, "keydown"],
|
|
7198
|
+
["layer-panel" /* LAYER_PANEL */, "keydown"]
|
|
7199
|
+
]
|
|
7200
|
+
},
|
|
7201
|
+
{
|
|
7202
|
+
command: KeyBindingCommand.ZOOM_IN,
|
|
7203
|
+
keybinding: ["ctrl+=", "ctrl+numpadplus"],
|
|
7204
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7205
|
+
},
|
|
7206
|
+
{
|
|
7207
|
+
command: KeyBindingCommand.ZOOM_OUT,
|
|
7208
|
+
keybinding: ["ctrl+-", "ctrl+numpad-"],
|
|
7209
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7210
|
+
},
|
|
7211
|
+
{
|
|
7212
|
+
command: KeyBindingCommand.ZOOM_FIT,
|
|
7213
|
+
keybinding: "ctrl+0",
|
|
7214
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7215
|
+
},
|
|
7216
|
+
{
|
|
7217
|
+
command: KeyBindingCommand.ZOOM_RESET,
|
|
7218
|
+
keybinding: "ctrl+1",
|
|
7219
|
+
when: [["stage" /* STAGE */, "keydown"]]
|
|
7220
|
+
}
|
|
7221
|
+
];
|
|
7222
|
+
|
|
7223
|
+
const useKeybinding = (services, contianer) => {
|
|
7017
7224
|
const keybindingService = services?.keybindingService;
|
|
7018
7225
|
const isCtrlKeyDown = vue.ref(false);
|
|
7019
7226
|
const windowBlurHandler = () => {
|
|
@@ -7037,11 +7244,14 @@
|
|
|
7037
7244
|
when: [["global", "keyup"]]
|
|
7038
7245
|
}
|
|
7039
7246
|
]);
|
|
7040
|
-
vue.
|
|
7041
|
-
|
|
7042
|
-
|
|
7043
|
-
|
|
7044
|
-
|
|
7247
|
+
vue.watchEffect(() => {
|
|
7248
|
+
if (contianer.value) {
|
|
7249
|
+
globalThis.addEventListener("blur", windowBlurHandler);
|
|
7250
|
+
keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
|
|
7251
|
+
} else {
|
|
7252
|
+
globalThis.removeEventListener("blur", windowBlurHandler);
|
|
7253
|
+
keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
|
|
7254
|
+
}
|
|
7045
7255
|
});
|
|
7046
7256
|
return {
|
|
7047
7257
|
isCtrlKeyDown
|
|
@@ -7106,16 +7316,20 @@
|
|
|
7106
7316
|
);
|
|
7107
7317
|
services?.editorService.on("add", (newNodes) => {
|
|
7108
7318
|
newNodes.forEach((node) => {
|
|
7109
|
-
|
|
7110
|
-
|
|
7111
|
-
|
|
7112
|
-
|
|
7319
|
+
traverseNode(node, (node2) => {
|
|
7320
|
+
nodeStatusMap.value?.set(node2.id, {
|
|
7321
|
+
visible: true,
|
|
7322
|
+
expand: Array.isArray(node2.items),
|
|
7323
|
+
selected: true
|
|
7324
|
+
});
|
|
7113
7325
|
});
|
|
7114
7326
|
});
|
|
7115
7327
|
});
|
|
7116
7328
|
services?.editorService.on("remove", (nodes2) => {
|
|
7117
7329
|
nodes2.forEach((node) => {
|
|
7118
|
-
|
|
7330
|
+
traverseNode(node, (node2) => {
|
|
7331
|
+
nodeStatusMap.value?.delete(node2.id);
|
|
7332
|
+
});
|
|
7119
7333
|
});
|
|
7120
7334
|
});
|
|
7121
7335
|
return {
|
|
@@ -7135,10 +7349,11 @@
|
|
|
7135
7349
|
setup(__props) {
|
|
7136
7350
|
const services = vue.inject("services");
|
|
7137
7351
|
const editorService = services?.editorService;
|
|
7352
|
+
const layerTreeContainer = vue.ref();
|
|
7138
7353
|
const page = vue.computed(() => editorService?.get("page"));
|
|
7139
7354
|
const root = vue.computed(() => editorService?.get("root"));
|
|
7140
7355
|
const { nodeStatusMap } = useNodeStatus(services, page);
|
|
7141
|
-
const { isCtrlKeyDown } = useKeybinding(services);
|
|
7356
|
+
const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
|
|
7142
7357
|
vue.provide("nodeStatusMap", nodeStatusMap);
|
|
7143
7358
|
const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
|
|
7144
7359
|
const collapseAllHandler = () => {
|
|
@@ -7165,6 +7380,8 @@
|
|
|
7165
7380
|
vue.createVNode(_sfc_main$t, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
|
|
7166
7381
|
vue.createElementVNode("div", {
|
|
7167
7382
|
class: "magic-editor-layer-tree",
|
|
7383
|
+
ref_key: "layerTreeContainer",
|
|
7384
|
+
ref: layerTreeContainer,
|
|
7168
7385
|
tabindex: "-1",
|
|
7169
7386
|
onDragover: _cache[0] || (_cache[0] = //@ts-ignore
|
|
7170
7387
|
(...args) => vue.unref(handleDragOver) && vue.unref(handleDragOver)(...args))
|
|
@@ -7181,7 +7398,7 @@
|
|
|
7181
7398
|
]),
|
|
7182
7399
|
_: 3
|
|
7183
7400
|
}, 8, ["data", "filter-text", "is-ctrl-key-down"])) : vue.createCommentVNode("", true)
|
|
7184
|
-
],
|
|
7401
|
+
], 544),
|
|
7185
7402
|
(vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
|
|
7186
7403
|
vue.createVNode(_sfc_main$j, {
|
|
7187
7404
|
ref_key: "menu",
|
|
@@ -7302,10 +7519,18 @@
|
|
|
7302
7519
|
onDrag: dragHandler
|
|
7303
7520
|
}, [
|
|
7304
7521
|
vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
|
|
7305
|
-
vue.createVNode(
|
|
7306
|
-
|
|
7307
|
-
|
|
7308
|
-
|
|
7522
|
+
vue.createVNode(vue.unref(design.TMagicTooltip), {
|
|
7523
|
+
placement: "right",
|
|
7524
|
+
disabled: !Boolean(item.desc),
|
|
7525
|
+
content: item.desc
|
|
7526
|
+
}, {
|
|
7527
|
+
default: vue.withCtx(() => [
|
|
7528
|
+
vue.createVNode(_sfc_main$M, {
|
|
7529
|
+
icon: item.icon
|
|
7530
|
+
}, null, 8, ["icon"])
|
|
7531
|
+
]),
|
|
7532
|
+
_: 2
|
|
7533
|
+
}, 1032, ["disabled", "content"]),
|
|
7309
7534
|
vue.createElementVNode("span", {
|
|
7310
7535
|
title: item.text
|
|
7311
7536
|
}, vue.toDisplayString(item.text), 9, _hoisted_2$7)
|
|
@@ -7916,7 +8141,7 @@
|
|
|
7916
8141
|
canSelect: (el, event, stop) => {
|
|
7917
8142
|
const elCanSelect = stageOptions.canSelect(el);
|
|
7918
8143
|
if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
|
|
7919
|
-
document.dispatchEvent(new CustomEvent(
|
|
8144
|
+
document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
|
|
7920
8145
|
return stop();
|
|
7921
8146
|
}
|
|
7922
8147
|
return elCanSelect;
|
|
@@ -8521,7 +8746,7 @@
|
|
|
8521
8746
|
vue.onMounted(() => {
|
|
8522
8747
|
if (stageWrap.value?.container) {
|
|
8523
8748
|
resizeObserver.observe(stageWrap.value.container);
|
|
8524
|
-
services?.keybindingService.registeEl(
|
|
8749
|
+
services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
|
|
8525
8750
|
}
|
|
8526
8751
|
});
|
|
8527
8752
|
vue.onUnmounted(() => {
|
|
@@ -9593,125 +9818,6 @@
|
|
|
9593
9818
|
}
|
|
9594
9819
|
const keybindingService = new Keybinding();
|
|
9595
9820
|
|
|
9596
|
-
const keybindingConfig = [
|
|
9597
|
-
{
|
|
9598
|
-
command: KeyBindingCommand.DELETE_NODE,
|
|
9599
|
-
keybinding: ["delete", "backspace"],
|
|
9600
|
-
when: [
|
|
9601
|
-
["stage", "keyup"],
|
|
9602
|
-
["layer-panel", "keydown"]
|
|
9603
|
-
]
|
|
9604
|
-
},
|
|
9605
|
-
{
|
|
9606
|
-
command: KeyBindingCommand.COPY_NODE,
|
|
9607
|
-
keybinding: "ctrl+c",
|
|
9608
|
-
when: [
|
|
9609
|
-
["stage", "keydown"],
|
|
9610
|
-
["layer-panel", "keydown"]
|
|
9611
|
-
]
|
|
9612
|
-
},
|
|
9613
|
-
{
|
|
9614
|
-
command: KeyBindingCommand.PASTE_NODE,
|
|
9615
|
-
keybinding: "ctrl+v",
|
|
9616
|
-
when: [
|
|
9617
|
-
["stage", "keydown"],
|
|
9618
|
-
["layer-panel", "keydown"]
|
|
9619
|
-
]
|
|
9620
|
-
},
|
|
9621
|
-
{
|
|
9622
|
-
command: KeyBindingCommand.CUT_NODE,
|
|
9623
|
-
keybinding: "ctrl+x",
|
|
9624
|
-
when: [
|
|
9625
|
-
["stage", "keydown"],
|
|
9626
|
-
["layer-panel", "keydown"]
|
|
9627
|
-
]
|
|
9628
|
-
},
|
|
9629
|
-
{
|
|
9630
|
-
command: KeyBindingCommand.UNDO,
|
|
9631
|
-
keybinding: "ctrl+z",
|
|
9632
|
-
when: [
|
|
9633
|
-
["stage", "keydown"],
|
|
9634
|
-
["layer-panel", "keydown"]
|
|
9635
|
-
]
|
|
9636
|
-
},
|
|
9637
|
-
{
|
|
9638
|
-
command: KeyBindingCommand.REDO,
|
|
9639
|
-
keybinding: "ctrl+shift+z",
|
|
9640
|
-
when: [
|
|
9641
|
-
["stage", "keydown"],
|
|
9642
|
-
["layer-panel", "keydown"]
|
|
9643
|
-
]
|
|
9644
|
-
},
|
|
9645
|
-
{
|
|
9646
|
-
command: KeyBindingCommand.MOVE_UP_1,
|
|
9647
|
-
keybinding: "up",
|
|
9648
|
-
when: [["stage", "keydown"]]
|
|
9649
|
-
},
|
|
9650
|
-
{
|
|
9651
|
-
command: KeyBindingCommand.MOVE_DOWN_1,
|
|
9652
|
-
keybinding: "down",
|
|
9653
|
-
when: [["stage", "keydown"]]
|
|
9654
|
-
},
|
|
9655
|
-
{
|
|
9656
|
-
command: KeyBindingCommand.MOVE_LEFT_1,
|
|
9657
|
-
keybinding: "left",
|
|
9658
|
-
when: [["stage", "keydown"]]
|
|
9659
|
-
},
|
|
9660
|
-
{
|
|
9661
|
-
command: KeyBindingCommand.MOVE_RIGHT_1,
|
|
9662
|
-
keybinding: "right",
|
|
9663
|
-
when: [["stage", "keydown"]]
|
|
9664
|
-
},
|
|
9665
|
-
{
|
|
9666
|
-
command: KeyBindingCommand.MOVE_UP_10,
|
|
9667
|
-
keybinding: "ctrl+up",
|
|
9668
|
-
when: [["stage", "keydown"]]
|
|
9669
|
-
},
|
|
9670
|
-
{
|
|
9671
|
-
command: KeyBindingCommand.MOVE_DOWN_10,
|
|
9672
|
-
keybinding: "ctrl+down",
|
|
9673
|
-
when: [["stage", "keydown"]]
|
|
9674
|
-
},
|
|
9675
|
-
{
|
|
9676
|
-
command: KeyBindingCommand.MOVE_LEFT_10,
|
|
9677
|
-
keybinding: "ctrl+left",
|
|
9678
|
-
when: [["stage", "keydown"]]
|
|
9679
|
-
},
|
|
9680
|
-
{
|
|
9681
|
-
command: KeyBindingCommand.MOVE_RIGHT_10,
|
|
9682
|
-
keybinding: "ctrl+right",
|
|
9683
|
-
when: [["stage", "keydown"]]
|
|
9684
|
-
},
|
|
9685
|
-
{
|
|
9686
|
-
command: KeyBindingCommand.SWITCH_NODE,
|
|
9687
|
-
keybinding: "tab",
|
|
9688
|
-
when: [
|
|
9689
|
-
["stage", "keydown"],
|
|
9690
|
-
["layer-panel", "keydown"]
|
|
9691
|
-
]
|
|
9692
|
-
},
|
|
9693
|
-
{
|
|
9694
|
-
command: KeyBindingCommand.ZOOM_IN,
|
|
9695
|
-
keybinding: ["ctrl+=", "ctrl+numpadplus"],
|
|
9696
|
-
when: [["stage", "keydown"]]
|
|
9697
|
-
},
|
|
9698
|
-
{
|
|
9699
|
-
command: KeyBindingCommand.ZOOM_OUT,
|
|
9700
|
-
keybinding: ["ctrl+-", "ctrl+numpad-"],
|
|
9701
|
-
when: [["stage", "keydown"]]
|
|
9702
|
-
},
|
|
9703
|
-
{
|
|
9704
|
-
command: KeyBindingCommand.ZOOM_FIT,
|
|
9705
|
-
keybinding: "ctrl+0",
|
|
9706
|
-
when: [["stage", "keydown"]]
|
|
9707
|
-
},
|
|
9708
|
-
{
|
|
9709
|
-
command: KeyBindingCommand.ZOOM_RESET,
|
|
9710
|
-
keybinding: "ctrl+1",
|
|
9711
|
-
when: [["stage", "keydown"]]
|
|
9712
|
-
}
|
|
9713
|
-
];
|
|
9714
|
-
|
|
9715
9821
|
const defaultEditorProps = {
|
|
9716
9822
|
componentGroupList: () => [],
|
|
9717
9823
|
datasourceList: () => [],
|
|
@@ -10327,6 +10433,7 @@
|
|
|
10327
10433
|
exports.TMagicCodeEditor = _sfc_main$S;
|
|
10328
10434
|
exports.TMagicEditor = _sfc_main;
|
|
10329
10435
|
exports.ToolButton = _sfc_main$w;
|
|
10436
|
+
exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
|
|
10330
10437
|
exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
|
|
10331
10438
|
exports.advancedTabConfig = advancedTabConfig;
|
|
10332
10439
|
exports.beforePaste = beforePaste;
|
|
@@ -10351,6 +10458,7 @@
|
|
|
10351
10458
|
exports.getDefaultConfig = getDefaultConfig;
|
|
10352
10459
|
exports.getDisplayField = getDisplayField;
|
|
10353
10460
|
exports.getFormConfig = getFormConfig;
|
|
10461
|
+
exports.getFormValue = getFormValue;
|
|
10354
10462
|
exports.getGuideLineFromCache = getGuideLineFromCache;
|
|
10355
10463
|
exports.getInitPositionStyle = getInitPositionStyle;
|
|
10356
10464
|
exports.getNodeIndex = getNodeIndex;
|