@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
|
@@ -63,6 +63,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
63
63
|
canSelect: { type: Function },
|
|
64
64
|
isContainer: { type: Function },
|
|
65
65
|
customContentMenu: { type: Function },
|
|
66
|
+
beforeDblclick: { type: Function },
|
|
66
67
|
extendFormState: { type: Function },
|
|
67
68
|
pageBarSortOptions: {},
|
|
68
69
|
pageFilterFunction: { type: Function }
|
|
@@ -109,7 +110,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
109
110
|
disabledDragStart: props.disabledDragStart,
|
|
110
111
|
renderType: props.renderType,
|
|
111
112
|
guidesOptions: props.guidesOptions,
|
|
112
|
-
disabledMultiSelect: props.disabledMultiSelect
|
|
113
|
+
disabledMultiSelect: props.disabledMultiSelect,
|
|
114
|
+
beforeDblclick: props.beforeDblclick
|
|
113
115
|
};
|
|
114
116
|
stageOverlay_default.set("stageOptions", stageOptions);
|
|
115
117
|
provide("services", services);
|
|
@@ -24,13 +24,23 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
24
24
|
labelWidth: "120px",
|
|
25
25
|
name: props.name
|
|
26
26
|
}];
|
|
27
|
-
const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) =>
|
|
28
|
-
type
|
|
29
|
-
name
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) => {
|
|
28
|
+
let { type } = config;
|
|
29
|
+
if (typeof type === "function") type = type(void 0, { model: props.model[props.name] });
|
|
30
|
+
if (type && ["data-source-field-select", "vs-code"].includes(type)) return {
|
|
31
|
+
...config,
|
|
32
|
+
name,
|
|
33
|
+
text,
|
|
34
|
+
extra
|
|
35
|
+
};
|
|
36
|
+
return {
|
|
37
|
+
type: "data-source-field-select",
|
|
38
|
+
name,
|
|
39
|
+
text,
|
|
40
|
+
extra,
|
|
41
|
+
fieldConfig: config
|
|
42
|
+
};
|
|
43
|
+
})));
|
|
34
44
|
/**
|
|
35
45
|
* 参数值修改更新
|
|
36
46
|
*/
|
package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -17,7 +17,8 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
17
17
|
checkStrictly: { type: Boolean },
|
|
18
18
|
size: {},
|
|
19
19
|
dataSourceFieldType: {},
|
|
20
|
-
notEditable: { type: [Boolean, Function] }
|
|
20
|
+
notEditable: { type: [Boolean, Function] },
|
|
21
|
+
dataSourceId: {}
|
|
21
22
|
}, {
|
|
22
23
|
"modelValue": { default: [] },
|
|
23
24
|
"modelModifiers": {}
|
|
@@ -31,7 +32,11 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
31
32
|
const { dataSourceService, uiService } = useServices();
|
|
32
33
|
const mForm = inject("mForm");
|
|
33
34
|
const eventBus = inject("eventBus");
|
|
34
|
-
const
|
|
35
|
+
const allDataSources = computed(() => dataSourceService.get("dataSources") || []);
|
|
36
|
+
const dataSources = computed(() => {
|
|
37
|
+
if (!props.dataSourceId) return allDataSources.value;
|
|
38
|
+
return allDataSources.value.filter((ds) => ds.id === props.dataSourceId);
|
|
39
|
+
});
|
|
35
40
|
const valueIsKey = computed(() => props.value === "key");
|
|
36
41
|
const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
|
|
37
42
|
const dataSourcesOptions = computed(() => dataSources.value.map((ds) => ({
|
|
@@ -41,7 +46,10 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
41
46
|
const selectDataSourceId = ref("");
|
|
42
47
|
const selectFieldsId = ref([]);
|
|
43
48
|
watch(modelValue, (value) => {
|
|
44
|
-
if (
|
|
49
|
+
if (props.dataSourceId) {
|
|
50
|
+
selectDataSourceId.value = valueIsKey.value ? props.dataSourceId : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
|
|
51
|
+
selectFieldsId.value = Array.isArray(value) ? value : [];
|
|
52
|
+
} else if (Array.isArray(value) && value.length) {
|
|
45
53
|
const [dsId, ...fields] = value;
|
|
46
54
|
selectDataSourceId.value = dsId;
|
|
47
55
|
selectFieldsId.value = fields;
|
|
@@ -51,7 +59,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
51
59
|
}
|
|
52
60
|
}, { immediate: true });
|
|
53
61
|
const fieldsOptions = computed(() => {
|
|
54
|
-
const ds =
|
|
62
|
+
const ds = allDataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
|
|
55
63
|
if (!ds) return [];
|
|
56
64
|
return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
|
|
57
65
|
});
|
|
@@ -67,8 +75,13 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
67
75
|
emit("change", modelValue.value);
|
|
68
76
|
};
|
|
69
77
|
const fieldChangeHandler = (v = []) => {
|
|
70
|
-
|
|
71
|
-
|
|
78
|
+
if (props.dataSourceId) {
|
|
79
|
+
modelValue.value = v;
|
|
80
|
+
emit("change", v);
|
|
81
|
+
} else {
|
|
82
|
+
modelValue.value = [selectDataSourceId.value, ...v];
|
|
83
|
+
emit("change", modelValue.value);
|
|
84
|
+
}
|
|
72
85
|
};
|
|
73
86
|
const onChangeHandler = (v = []) => {
|
|
74
87
|
modelValue.value = v;
|
|
@@ -79,7 +92,23 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
79
92
|
eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
|
|
80
93
|
};
|
|
81
94
|
return (_ctx, _cache) => {
|
|
82
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [__props.
|
|
95
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [__props.dataSourceId ? (openBlock(), createBlock(unref(TMagicCascader), {
|
|
96
|
+
key: 0,
|
|
97
|
+
"model-value": selectFieldsId.value,
|
|
98
|
+
clearable: "",
|
|
99
|
+
filterable: "",
|
|
100
|
+
size: __props.size,
|
|
101
|
+
disabled: __props.disabled,
|
|
102
|
+
options: fieldsOptions.value,
|
|
103
|
+
props: { checkStrictly: __props.checkStrictly },
|
|
104
|
+
onChange: fieldChangeHandler
|
|
105
|
+
}, null, 8, [
|
|
106
|
+
"model-value",
|
|
107
|
+
"size",
|
|
108
|
+
"disabled",
|
|
109
|
+
"options",
|
|
110
|
+
"props"
|
|
111
|
+
])) : __props.checkStrictly ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(TMagicSelect), {
|
|
83
112
|
"model-value": selectDataSourceId.value,
|
|
84
113
|
clearable: "",
|
|
85
114
|
filterable: "",
|
|
@@ -122,7 +151,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
122
151
|
"options",
|
|
123
152
|
"props"
|
|
124
153
|
])], 64)) : (openBlock(), createBlock(unref(TMagicCascader), {
|
|
125
|
-
key:
|
|
154
|
+
key: 2,
|
|
126
155
|
clearable: "",
|
|
127
156
|
filterable: "",
|
|
128
157
|
"model-value": modelValue.value,
|
|
@@ -138,7 +167,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
138
167
|
"options",
|
|
139
168
|
"props"
|
|
140
169
|
])), selectDataSourceId.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
|
|
141
|
-
key:
|
|
170
|
+
key: 3,
|
|
142
171
|
content: notEditable.value ? "查看" : "编辑"
|
|
143
172
|
}, {
|
|
144
173
|
default: withCtx(() => [createVNode(unref(TMagicButton), {
|
|
@@ -104,6 +104,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
104
104
|
value: __props.config.value,
|
|
105
105
|
checkStrictly: checkStrictly.value,
|
|
106
106
|
dataSourceFieldType: __props.config.dataSourceFieldType,
|
|
107
|
+
dataSourceId: __props.config.dataSourceId,
|
|
107
108
|
onChange: onChangeHandler
|
|
108
109
|
}, null, 8, [
|
|
109
110
|
"model-value",
|
|
@@ -111,7 +112,8 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
111
112
|
"size",
|
|
112
113
|
"value",
|
|
113
114
|
"checkStrictly",
|
|
114
|
-
"dataSourceFieldType"
|
|
115
|
+
"dataSourceFieldType",
|
|
116
|
+
"dataSourceId"
|
|
115
117
|
])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
|
|
116
118
|
key: 1,
|
|
117
119
|
config: __props.config.fieldConfig,
|
package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { SideItemKey } from "../type.js";
|
|
2
2
|
import { useServices } from "../hooks/use-services.js";
|
|
3
|
+
import { getFieldType } from "../utils/data-source/index.js";
|
|
3
4
|
import Icon_default from "../components/Icon.js";
|
|
4
5
|
import CodeParams_default from "../components/CodeParams.js";
|
|
5
6
|
import { MCascader, createValues, filterFunction } from "@tmagic/form";
|
|
6
7
|
import { TMagicButton, TMagicTooltip } from "@tmagic/design";
|
|
8
|
+
import { DATA_SOURCE_SET_DATA_METHOD_NAME } from "@tmagic/utils";
|
|
7
9
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, ref, unref, withCtx } from "vue";
|
|
8
10
|
import { Edit, View } from "@element-plus/icons-vue";
|
|
9
11
|
//#region packages/editor/src/fields/DataSourceMethodSelect.vue?vue&type=script&setup=true&name=true&lang.ts
|
|
@@ -44,6 +46,30 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
|
|
|
44
46
|
});
|
|
45
47
|
const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
|
|
46
48
|
if (!dataSourceId) return [];
|
|
49
|
+
if (methodName === DATA_SOURCE_SET_DATA_METHOD_NAME) return [{
|
|
50
|
+
name: "field",
|
|
51
|
+
text: "字段",
|
|
52
|
+
type: "data-source-field-select",
|
|
53
|
+
dataSourceId,
|
|
54
|
+
checkStrictly: true
|
|
55
|
+
}, {
|
|
56
|
+
name: "data",
|
|
57
|
+
text: "数据",
|
|
58
|
+
type: (_formState, { model }) => {
|
|
59
|
+
const fieldType = getFieldType(dataSourceService.getDataSourceById(`${dataSourceId}`), model.field);
|
|
60
|
+
let type = "vs-code";
|
|
61
|
+
if (fieldType === "number") type = "number";
|
|
62
|
+
else if (fieldType === "string") type = "text";
|
|
63
|
+
else if (fieldType === "boolean") type = "switch";
|
|
64
|
+
return type;
|
|
65
|
+
},
|
|
66
|
+
language: "javascript",
|
|
67
|
+
options: inject("codeOptions", {}),
|
|
68
|
+
autosize: {
|
|
69
|
+
minRows: 1,
|
|
70
|
+
maxRows: 10
|
|
71
|
+
}
|
|
72
|
+
}];
|
|
47
73
|
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
|
|
48
74
|
if (!paramStatements) return [];
|
|
49
75
|
return paramStatements.map((paramState) => ({
|
|
@@ -52,13 +78,20 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
|
|
|
52
78
|
}));
|
|
53
79
|
};
|
|
54
80
|
const paramsConfig = ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
|
|
55
|
-
const methodsOptions = computed(() => dataSources.value?.
|
|
81
|
+
const methodsOptions = computed(() => dataSources.value?.map((ds) => ({
|
|
56
82
|
label: ds.title || ds.id,
|
|
57
83
|
value: ds.id,
|
|
58
|
-
children: [
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
84
|
+
children: [
|
|
85
|
+
{
|
|
86
|
+
label: "设置数据",
|
|
87
|
+
value: DATA_SOURCE_SET_DATA_METHOD_NAME
|
|
88
|
+
},
|
|
89
|
+
...dataSourceService?.getFormMethod(ds.type) || [],
|
|
90
|
+
...(ds.methods || []).map((method) => ({
|
|
91
|
+
label: method.name,
|
|
92
|
+
value: method.name
|
|
93
|
+
}))
|
|
94
|
+
]
|
|
62
95
|
})) || []);
|
|
63
96
|
const cascaderConfig = computed(() => ({
|
|
64
97
|
type: "cascader",
|
|
@@ -55,8 +55,9 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
|
|
|
55
55
|
actions: [{
|
|
56
56
|
text: "编辑",
|
|
57
57
|
handler: (method, index) => {
|
|
58
|
-
let codeContent =
|
|
59
|
-
if (typeof
|
|
58
|
+
let codeContent = "({ params, dataSource, app }) => {\n // place your code here\n}";
|
|
59
|
+
if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
|
|
60
|
+
else codeContent = method.content;
|
|
60
61
|
codeConfig.value = {
|
|
61
62
|
...cloneDeep(method),
|
|
62
63
|
content: codeContent
|
|
@@ -4,6 +4,7 @@ import Font_default from "./pro/Font.js";
|
|
|
4
4
|
import Layout_default from "./pro/Layout.js";
|
|
5
5
|
import Position_default from "./pro/Position.js";
|
|
6
6
|
import Border_default from "./pro/Border.js";
|
|
7
|
+
import Transform_default from "./pro/Transform.js";
|
|
7
8
|
import { TMagicCollapse, TMagicCollapseItem } from "@tmagic/design";
|
|
8
9
|
import { Fragment, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, withCtx } from "vue";
|
|
9
10
|
import { Grid } from "@element-plus/icons-vue";
|
|
@@ -48,6 +49,10 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
48
49
|
{
|
|
49
50
|
title: "边框与圆角",
|
|
50
51
|
component: Border_default
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
title: "变形",
|
|
55
|
+
component: Transform_default
|
|
51
56
|
}
|
|
52
57
|
];
|
|
53
58
|
const collapseValue = shallowRef(Array(list.length).fill(1).map((x, i) => `${i}`));
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Transform_vue_vue_type_script_setup_true_lang_default from "./Transform.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue
|
|
3
|
+
var Transform_default = Transform_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { Transform_default as default };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { MContainer, defineFormItem } from "@tmagic/form";
|
|
2
|
+
import { createBlock, defineComponent, openBlock, unref } from "vue";
|
|
3
|
+
//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "Transform",
|
|
6
|
+
props: {
|
|
7
|
+
values: {},
|
|
8
|
+
disabled: { type: Boolean },
|
|
9
|
+
size: {}
|
|
10
|
+
},
|
|
11
|
+
emits: ["change"],
|
|
12
|
+
setup(__props, { emit: __emit }) {
|
|
13
|
+
const emit = __emit;
|
|
14
|
+
const config = defineFormItem({ items: [{
|
|
15
|
+
name: "transform",
|
|
16
|
+
items: [{
|
|
17
|
+
name: "rotate",
|
|
18
|
+
text: "旋转角度",
|
|
19
|
+
labelWidth: "68px",
|
|
20
|
+
type: "data-source-field-select",
|
|
21
|
+
checkStrictly: false,
|
|
22
|
+
dataSourceFieldType: ["string", "number"],
|
|
23
|
+
fieldConfig: { type: "text" }
|
|
24
|
+
}, {
|
|
25
|
+
name: "scale",
|
|
26
|
+
text: "缩放",
|
|
27
|
+
labelWidth: "68px",
|
|
28
|
+
type: "data-source-field-select",
|
|
29
|
+
checkStrictly: false,
|
|
30
|
+
dataSourceFieldType: ["string", "number"],
|
|
31
|
+
fieldConfig: { type: "text" }
|
|
32
|
+
}]
|
|
33
|
+
}] });
|
|
34
|
+
const change = (value, eventData) => {
|
|
35
|
+
emit("change", value, eventData);
|
|
36
|
+
};
|
|
37
|
+
return (_ctx, _cache) => {
|
|
38
|
+
return openBlock(), createBlock(unref(MContainer), {
|
|
39
|
+
config: unref(config),
|
|
40
|
+
model: __props.values,
|
|
41
|
+
size: __props.size,
|
|
42
|
+
disabled: __props.disabled,
|
|
43
|
+
onChange: change
|
|
44
|
+
}, null, 8, [
|
|
45
|
+
"config",
|
|
46
|
+
"model",
|
|
47
|
+
"size",
|
|
48
|
+
"disabled"
|
|
49
|
+
]);
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
//#endregion
|
|
54
|
+
export { Transform_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -22,8 +22,9 @@ var useCodeBlockEdit = (codeBlockService) => {
|
|
|
22
22
|
tMagicMessage.error("获取代码块内容失败");
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
|
-
let codeContent =
|
|
26
|
-
if (typeof
|
|
25
|
+
let codeContent = "";
|
|
26
|
+
if (codeBlock.content) if (typeof codeBlock.content !== "string") codeContent = codeBlock.content.toString();
|
|
27
|
+
else codeContent = codeBlock.content;
|
|
27
28
|
codeConfig.value = {
|
|
28
29
|
...cloneDeep(codeBlock),
|
|
29
30
|
content: codeContent
|
|
@@ -42,7 +42,10 @@ var useStage = (stageOptions) => {
|
|
|
42
42
|
if (disabledMultiSelect) stage.disableMultiSelect();
|
|
43
43
|
else stage.enableMultiSelect();
|
|
44
44
|
});
|
|
45
|
-
|
|
45
|
+
const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
|
|
46
|
+
const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
|
|
47
|
+
stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
|
|
48
|
+
ui_default.set("hasGuides", hGuidesCache.length > 0 || vGuidesCache.length > 0);
|
|
46
49
|
stage.on("page-el-update", () => {
|
|
47
50
|
editor_default.set("stageLoading", false);
|
|
48
51
|
});
|
|
@@ -96,6 +99,7 @@ var useStage = (stageOptions) => {
|
|
|
96
99
|
});
|
|
97
100
|
stage.on("change-guides", (e) => {
|
|
98
101
|
ui_default.set("showGuides", true);
|
|
102
|
+
ui_default.set("hasGuides", (stage.mask?.horizontalGuidelines.length ?? 0) > 0 || (stage.mask?.verticalGuidelines.length ?? 0) > 0);
|
|
99
103
|
if (!root.value || !page.value) return;
|
|
100
104
|
const storageKey = getGuideLineKey(e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
|
|
101
105
|
if (e.guides.length) globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
|
package/dist/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, KeyBindingCommand, Keys, LayerOffset, Layout, SideItemKey } from "./type.js";
|
|
1
|
+
import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, KeyBindingCommand, Keys, LayerOffset, Layout, SideItemKey, canUsePluginMethods } from "./type.js";
|
|
2
2
|
import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
|
|
3
3
|
import { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig } from "./utils/props.js";
|
|
4
4
|
import props_default from "./services/props.js";
|
|
@@ -6,7 +6,7 @@ import { UndoRedo } from "./utils/undo-redo.js";
|
|
|
6
6
|
import history_default from "./services/history.js";
|
|
7
7
|
import { getEditorConfig, setEditorConfig } from "./utils/config.js";
|
|
8
8
|
import storage_default from "./services/storage.js";
|
|
9
|
-
import { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, change2Fixed, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, serializeConfig, setChildrenLayout, setLayout } from "./utils/editor.js";
|
|
9
|
+
import { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition } from "./utils/editor.js";
|
|
10
10
|
import { beforePaste, getAddParent, getDefaultConfig, getPositionInContainer } from "./utils/operator.js";
|
|
11
11
|
import editor_default from "./services/editor.js";
|
|
12
12
|
import { DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, H_GUIDE_LINE_STORAGE_KEY, LEFT_COLUMN_WIDTH_STORAGE_KEY, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, RIGHT_COLUMN_WIDTH_STORAGE_KEY, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY } from "./utils/const.js";
|
|
@@ -76,4 +76,4 @@ export * from "@tmagic/table";
|
|
|
76
76
|
export * from "@tmagic/stage";
|
|
77
77
|
export * from "@tmagic/design";
|
|
78
78
|
export * from "@tmagic/utils";
|
|
79
|
-
export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, change2Fixed, codeBlock_default as codeBlockService, dataSource_default as dataSourceService, debug, plugin_default as default, dep_default as depService, designPlugin, displayTabConfig, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
|
|
79
|
+
export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
|
package/dist/es/initService.js
CHANGED
|
@@ -59,13 +59,13 @@ var initServiceState = (props, { editorService, historyService, componentListSer
|
|
|
59
59
|
});
|
|
60
60
|
};
|
|
61
61
|
var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
|
|
62
|
-
let
|
|
62
|
+
let getTMagicAppPromise = null;
|
|
63
63
|
const getTMagicApp = async () => {
|
|
64
64
|
const { renderer } = await getStage();
|
|
65
65
|
if (!renderer) return;
|
|
66
66
|
if (renderer.runtime) return renderer.runtime.getApp?.();
|
|
67
|
-
if (
|
|
68
|
-
|
|
67
|
+
if (getTMagicAppPromise) return getTMagicAppPromise;
|
|
68
|
+
getTMagicAppPromise = new Promise((resolve) => {
|
|
69
69
|
const timeout = globalThis.setTimeout(() => {
|
|
70
70
|
resolve(void 0);
|
|
71
71
|
}, 1e4);
|
|
@@ -74,7 +74,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
|
|
|
74
74
|
resolve(renderer.runtime?.getApp?.());
|
|
75
75
|
});
|
|
76
76
|
});
|
|
77
|
-
return
|
|
77
|
+
return getTMagicAppPromise;
|
|
78
78
|
};
|
|
79
79
|
const updateStageNodes = (nodes) => {
|
|
80
80
|
for (const node of nodes) updateStageNode(node);
|
|
@@ -18,6 +18,7 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
18
18
|
const columnWidth = computed(() => uiService.get("columnWidth"));
|
|
19
19
|
const keys = Object.values(ColumnLayout);
|
|
20
20
|
const showGuides = computed(() => uiService.get("showGuides"));
|
|
21
|
+
const hasGuides = computed(() => uiService.get("hasGuides"));
|
|
21
22
|
const showRule = computed(() => uiService.get("showRule"));
|
|
22
23
|
const zoom = computed(() => uiService.get("zoom"));
|
|
23
24
|
const ctrl = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "Command" : "Ctrl";
|
|
@@ -113,6 +114,7 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
113
114
|
});
|
|
114
115
|
break;
|
|
115
116
|
case "guides":
|
|
117
|
+
if (!hasGuides.value) break;
|
|
116
118
|
config.push({
|
|
117
119
|
type: "button",
|
|
118
120
|
className: "guides",
|
|
@@ -27,7 +27,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
27
27
|
const props = __props;
|
|
28
28
|
let stage = null;
|
|
29
29
|
let runtime = null;
|
|
30
|
-
const { editorService, uiService, keybindingService } = useServices();
|
|
30
|
+
const { editorService, uiService, keybindingService, stageOverlayService } = useServices();
|
|
31
31
|
const stageLoading = computed(() => editorService.get("stageLoading"));
|
|
32
32
|
const stageWrapRef = useTemplateRef("stageWrap");
|
|
33
33
|
const stageContainerEl = useTemplateRef("stageContainer");
|
|
@@ -40,6 +40,42 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
40
40
|
const page = computed(() => editorService.get("page"));
|
|
41
41
|
const zoom = computed(() => uiService.get("zoom"));
|
|
42
42
|
const node = computed(() => editorService.get("node"));
|
|
43
|
+
/**
|
|
44
|
+
* 判断元素是否被非页面级的滚动容器裁剪(未完整显示)
|
|
45
|
+
*
|
|
46
|
+
* 从元素向上遍历祖先节点,跳过页面/页面片容器,
|
|
47
|
+
* 检查是否存在设置了 overflow 的滚动容器将该元素裁剪,
|
|
48
|
+
* 只有元素未被完整显示时才需要打开 overlay 以展示完整内容
|
|
49
|
+
*/
|
|
50
|
+
const isClippedByScrollContainer = (el) => {
|
|
51
|
+
const win = el.ownerDocument.defaultView;
|
|
52
|
+
if (!win) return false;
|
|
53
|
+
const root = editorService.get("root");
|
|
54
|
+
const pageIds = new Set(root?.items?.map((item) => `${item.id}`) ?? []);
|
|
55
|
+
const elId = getIdFromEl()(el);
|
|
56
|
+
if (elId && pageIds.has(elId)) return false;
|
|
57
|
+
let parent = el.parentElement;
|
|
58
|
+
while (parent && parent !== el.ownerDocument.documentElement) {
|
|
59
|
+
const parentId = getIdFromEl()(parent);
|
|
60
|
+
if (parentId && pageIds.has(parentId)) return false;
|
|
61
|
+
const { overflowX, overflowY } = win.getComputedStyle(parent);
|
|
62
|
+
if ([
|
|
63
|
+
"auto",
|
|
64
|
+
"scroll",
|
|
65
|
+
"hidden"
|
|
66
|
+
].includes(overflowX) || [
|
|
67
|
+
"auto",
|
|
68
|
+
"scroll",
|
|
69
|
+
"hidden"
|
|
70
|
+
].includes(overflowY) || parent.scrollWidth > parent.clientWidth || parent.scrollHeight > parent.clientHeight) {
|
|
71
|
+
const elRect = el.getBoundingClientRect();
|
|
72
|
+
const containerRect = parent.getBoundingClientRect();
|
|
73
|
+
if (elRect.top < containerRect.top || elRect.left < containerRect.left || elRect.bottom > containerRect.bottom || elRect.right > containerRect.right) return true;
|
|
74
|
+
}
|
|
75
|
+
parent = parent.parentElement;
|
|
76
|
+
}
|
|
77
|
+
return false;
|
|
78
|
+
};
|
|
43
79
|
watchEffect(() => {
|
|
44
80
|
if (stage || !page.value) return;
|
|
45
81
|
if (!stageContainerEl.value) return;
|
|
@@ -48,6 +84,33 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
48
84
|
stage.on("select", () => {
|
|
49
85
|
stageWrapRef.value?.container?.focus();
|
|
50
86
|
});
|
|
87
|
+
stage.on("dblclick", async (event) => {
|
|
88
|
+
if (props.stageOptions.beforeDblclick) {
|
|
89
|
+
if (await props.stageOptions.beforeDblclick(event) === false) return;
|
|
90
|
+
}
|
|
91
|
+
const el = await stage?.actionManager?.getElementFromPoint(event) || null;
|
|
92
|
+
if (!el) return;
|
|
93
|
+
const id = getIdFromEl()(el);
|
|
94
|
+
if (id) {
|
|
95
|
+
const node = editorService.getNodeById(id);
|
|
96
|
+
if (node?.type === "page-fragment-container" && node.pageFragmentId) {
|
|
97
|
+
await editorService.select(node.pageFragmentId);
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
if (!props.disabledStageOverlay && isClippedByScrollContainer(el)) {
|
|
102
|
+
stageOverlayService.openOverlay(el);
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
const nextEl = await stage?.actionManager?.getNextElementFromPoint(event) || null;
|
|
106
|
+
if (nextEl) {
|
|
107
|
+
const nextId = getIdFromEl()(nextEl);
|
|
108
|
+
if (nextId) {
|
|
109
|
+
await editorService.select(nextId);
|
|
110
|
+
editorService.get("stage")?.select(nextId);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
51
114
|
editorService.set("stage", markRaw(stage));
|
|
52
115
|
stage.mount(stageContainerEl.value);
|
|
53
116
|
if (!node.value?.id) return;
|
package/dist/es/layouts/workspace/viewer/StageOverlay.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -23,11 +23,7 @@ var StageOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
|
|
|
23
23
|
const frameworkRect = computed(() => uiService.get("frameworkRect"));
|
|
24
24
|
const style = computed(() => ({ transform: `scale(${zoom.value})` }));
|
|
25
25
|
watch(stage, (stage) => {
|
|
26
|
-
if (stage)
|
|
27
|
-
const el = await stage.actionManager?.getElementFromPoint(event) || null;
|
|
28
|
-
stageOverlayService.openOverlay(el);
|
|
29
|
-
});
|
|
30
|
-
else stageOverlayService.closeOverlay();
|
|
26
|
+
if (!stage) stageOverlayService.closeOverlay();
|
|
31
27
|
});
|
|
32
28
|
watch(zoom, (zoom) => {
|
|
33
29
|
const stage = stageOverlayService.get("stage");
|