@tmagic/editor 1.8.0-beta.4 → 1.8.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/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/components/ToolButton.vue_vue_type_script_setup_true_lang.js +6 -6
- package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +8 -2
- package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +25 -8
- package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +6 -4
- package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +25 -12
- package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +27 -5
- package/dist/es/index.js +6 -3
- package/dist/es/initService.js +1 -1
- package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/layouts/history-list/Bucket.vue_vue_type_script_setup_true_lang.js +19 -55
- package/dist/es/layouts/history-list/BucketTab.vue_vue_type_script_setup_true_lang.js +22 -39
- package/dist/es/layouts/history-list/GroupRow.vue_vue_type_script_setup_true_lang.js +149 -103
- package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js +32 -8
- package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js +335 -213
- package/dist/es/layouts/history-list/InitialRow.vue_vue_type_script_setup_true_lang.js +36 -7
- package/dist/es/layouts/history-list/PageTab.vue_vue_type_script_setup_true_lang.js +47 -60
- package/dist/es/layouts/history-list/composables.js +73 -32
- package/dist/es/layouts/page-bar/PageBar.vue_vue_type_script_setup_true_lang.js +4 -2
- package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +5 -1
- package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js +16 -3
- package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js +23 -1
- package/dist/es/services/codeBlock.js +96 -37
- package/dist/es/services/dataSource.js +70 -26
- package/dist/es/services/editor.js +266 -104
- package/dist/es/services/history.js +271 -212
- package/dist/es/services/ui.js +3 -0
- package/dist/es/style.css +53 -7
- package/dist/es/utils/data-source/index.js +2 -0
- package/dist/es/utils/editor.js +103 -49
- package/dist/es/utils/history.js +232 -0
- package/dist/es/utils/indexed-db.js +86 -0
- package/dist/es/utils/undo-redo.js +60 -1
- package/dist/style.css +53 -7
- package/dist/tmagic-editor.umd.cjs +2064 -1000
- package/package.json +7 -7
- package/src/components/CompareForm.vue +3 -1
- package/src/components/ToolButton.vue +2 -2
- package/src/fields/CodeSelectCol.vue +7 -1
- package/src/fields/DataSourceFieldSelect/FieldSelect.vue +16 -2
- package/src/fields/DataSourceFields.vue +37 -8
- package/src/fields/DataSourceMethodSelect.vue +9 -4
- package/src/fields/DataSourceMethods.vue +42 -21
- package/src/fields/StyleSetter/components/Border.vue +15 -6
- package/src/index.ts +1 -0
- package/src/initService.ts +1 -1
- package/src/layouts/Framework.vue +1 -1
- package/src/layouts/history-list/Bucket.vue +34 -71
- package/src/layouts/history-list/BucketTab.vue +46 -54
- package/src/layouts/history-list/GroupRow.vue +146 -111
- package/src/layouts/history-list/HistoryDiffDialog.vue +94 -68
- package/src/layouts/history-list/HistoryListPanel.vue +298 -115
- package/src/layouts/history-list/InitialRow.vue +28 -9
- package/src/layouts/history-list/PageTab.vue +57 -51
- package/src/layouts/history-list/composables.ts +157 -36
- package/src/layouts/page-bar/PageBar.vue +4 -2
- package/src/layouts/sidebar/Sidebar.vue +6 -1
- package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +30 -2
- package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +26 -1
- package/src/services/codeBlock.ts +113 -37
- package/src/services/dataSource.ts +94 -40
- package/src/services/editor.ts +376 -136
- package/src/services/history.ts +306 -209
- package/src/services/ui.ts +7 -0
- package/src/theme/history-list-panel.scss +72 -5
- package/src/theme/page-bar.scss +0 -4
- package/src/theme/style-setter/border.scss +4 -1
- package/src/type.ts +183 -64
- package/src/utils/data-source/index.ts +2 -0
- package/src/utils/editor.ts +166 -60
- package/src/utils/history.ts +308 -0
- package/src/utils/index.ts +2 -0
- package/src/utils/indexed-db.ts +122 -0
- package/src/utils/undo-redo.ts +88 -0
- package/types/index.d.ts +813 -302
package/dist/es/style.css
CHANGED
|
@@ -617,6 +617,23 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
617
617
|
padding: 0;
|
|
618
618
|
list-style: none;
|
|
619
619
|
}
|
|
620
|
+
.m-editor-history-list-popover .m-editor-history-list-toolbar {
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
justify-content: flex-end;
|
|
624
|
+
padding: 0 4px 4px;
|
|
625
|
+
}
|
|
626
|
+
.m-editor-history-list-popover .m-editor-history-list-clear {
|
|
627
|
+
padding: 2px 8px;
|
|
628
|
+
border-radius: 4px;
|
|
629
|
+
font-size: 12px;
|
|
630
|
+
color: #f56c6c;
|
|
631
|
+
cursor: pointer;
|
|
632
|
+
user-select: none;
|
|
633
|
+
}
|
|
634
|
+
.m-editor-history-list-popover .m-editor-history-list-clear:hover {
|
|
635
|
+
background-color: rgba(245, 108, 108, 0.12);
|
|
636
|
+
}
|
|
620
637
|
.m-editor-history-list-popover .m-editor-history-list-item {
|
|
621
638
|
display: flex;
|
|
622
639
|
align-items: center;
|
|
@@ -750,12 +767,18 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
750
767
|
}
|
|
751
768
|
.m-editor-history-list-popover .m-editor-history-list-item-index {
|
|
752
769
|
flex: 0 0 auto;
|
|
770
|
+
min-width: 30px;
|
|
771
|
+
text-align: right;
|
|
753
772
|
color: #909399;
|
|
754
773
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
755
774
|
font-size: 11px;
|
|
756
775
|
font-weight: 400;
|
|
757
776
|
white-space: nowrap;
|
|
758
777
|
}
|
|
778
|
+
.m-editor-history-list-popover .m-editor-history-list-group.is-merged > .m-editor-history-list-group-head > .m-editor-history-list-item-index {
|
|
779
|
+
min-width: 0;
|
|
780
|
+
text-align: left;
|
|
781
|
+
}
|
|
759
782
|
.m-editor-history-list-popover .m-editor-history-list-item-time {
|
|
760
783
|
flex: 0 0 auto;
|
|
761
784
|
color: #a8abb2;
|
|
@@ -816,6 +839,18 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
816
839
|
white-space: nowrap;
|
|
817
840
|
font-weight: 400;
|
|
818
841
|
}
|
|
842
|
+
.m-editor-history-list-popover .m-editor-history-list-item-saved {
|
|
843
|
+
flex: 0 0 auto;
|
|
844
|
+
padding: 0 6px;
|
|
845
|
+
border-radius: 8px;
|
|
846
|
+
font-size: 10px;
|
|
847
|
+
line-height: 16px;
|
|
848
|
+
color: #fff;
|
|
849
|
+
background-color: #67c23a;
|
|
850
|
+
white-space: nowrap;
|
|
851
|
+
font-weight: 500;
|
|
852
|
+
letter-spacing: 0.2px;
|
|
853
|
+
}
|
|
819
854
|
.m-editor-history-list-popover .m-editor-history-list-item-merge {
|
|
820
855
|
flex: 0 0 auto;
|
|
821
856
|
padding: 0 8px;
|
|
@@ -827,6 +862,17 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
827
862
|
font-weight: 500;
|
|
828
863
|
letter-spacing: 0.2px;
|
|
829
864
|
}
|
|
865
|
+
.m-editor-history-list-popover .m-editor-history-list-item-actions {
|
|
866
|
+
display: none;
|
|
867
|
+
flex: 0 0 auto;
|
|
868
|
+
align-items: center;
|
|
869
|
+
gap: 6px;
|
|
870
|
+
}
|
|
871
|
+
.m-editor-history-list-popover .m-editor-history-list-group-head:hover > .m-editor-history-list-item-actions,
|
|
872
|
+
.m-editor-history-list-popover .m-editor-history-list-substeps > li:hover > .m-editor-history-list-item-actions,
|
|
873
|
+
.m-editor-history-list-popover .m-editor-history-list-initial:hover > .m-editor-history-list-item-actions {
|
|
874
|
+
display: flex;
|
|
875
|
+
}
|
|
830
876
|
.m-editor-history-list-popover .m-editor-history-list-item-diff {
|
|
831
877
|
flex: 0 0 auto;
|
|
832
878
|
padding: 0 6px;
|
|
@@ -847,13 +893,13 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
847
893
|
border-radius: 2px;
|
|
848
894
|
font-size: 10px;
|
|
849
895
|
line-height: 16px;
|
|
850
|
-
color: #
|
|
851
|
-
background-color: rgba(
|
|
896
|
+
color: #529b2e;
|
|
897
|
+
background-color: rgba(103, 194, 58, 0.12);
|
|
852
898
|
cursor: pointer;
|
|
853
899
|
user-select: none;
|
|
854
900
|
}
|
|
855
901
|
.m-editor-history-list-popover .m-editor-history-list-item-goto:hover {
|
|
856
|
-
background-color: rgba(
|
|
902
|
+
background-color: rgba(103, 194, 58, 0.24);
|
|
857
903
|
}
|
|
858
904
|
.m-editor-history-list-popover .m-editor-history-list-item-revert {
|
|
859
905
|
flex: 0 0 auto;
|
|
@@ -1396,9 +1442,6 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
1396
1442
|
transition: all 0.2s ease 0s;
|
|
1397
1443
|
padding: 5px 14px;
|
|
1398
1444
|
}
|
|
1399
|
-
.page-bar-popover .menu-item .tmagic-design-button {
|
|
1400
|
-
color: #313a40;
|
|
1401
|
-
}
|
|
1402
1445
|
.page-bar-popover .menu-item:hover {
|
|
1403
1446
|
background-color: #f3f5f9;
|
|
1404
1447
|
}
|
|
@@ -2050,9 +2093,12 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
2050
2093
|
.border-box-container .border-icon-container .border-icon + .border-icon {
|
|
2051
2094
|
margin-left: 8px;
|
|
2052
2095
|
}
|
|
2096
|
+
.border-box-container .border-icon-container .border-icon.configured {
|
|
2097
|
+
border-color: var(--el-color-success, var(--td-success-color, #2ba471));
|
|
2098
|
+
}
|
|
2053
2099
|
.border-box-container .border-icon-container .border-icon.active {
|
|
2054
2100
|
border-width: 1px;
|
|
2055
|
-
border-color: var(--el-color-primary);
|
|
2101
|
+
border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
|
|
2056
2102
|
}
|
|
2057
2103
|
.border-box-container .border-icon-container .border-icon.border-icon-top {
|
|
2058
2104
|
border-top-width: 2px;
|
|
@@ -7,6 +7,7 @@ var dataSourceFormConfig = {
|
|
|
7
7
|
items: [
|
|
8
8
|
{
|
|
9
9
|
title: "数据定义",
|
|
10
|
+
status: "fields",
|
|
10
11
|
items: [{
|
|
11
12
|
name: "fields",
|
|
12
13
|
type: "data-source-fields",
|
|
@@ -15,6 +16,7 @@ var dataSourceFormConfig = {
|
|
|
15
16
|
},
|
|
16
17
|
{
|
|
17
18
|
title: "方法定义",
|
|
19
|
+
status: "methods",
|
|
18
20
|
items: [{
|
|
19
21
|
name: "methods",
|
|
20
22
|
type: "data-source-methods",
|
package/dist/es/utils/editor.js
CHANGED
|
@@ -74,12 +74,26 @@ var getMiddleTop = (node, parentNode, stage) => {
|
|
|
74
74
|
}
|
|
75
75
|
return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
|
|
76
76
|
};
|
|
77
|
+
var removeConflictPosition = (style, primary, secondary) => {
|
|
78
|
+
const isInvalid = (value) => value === "" || value === 0 || value === void 0 || value === null;
|
|
79
|
+
if (!(primary in style) || !(secondary in style)) return;
|
|
80
|
+
const primaryValue = style[primary];
|
|
81
|
+
const secondaryValue = style[secondary];
|
|
82
|
+
const primaryInvalid = isInvalid(primaryValue);
|
|
83
|
+
const secondaryInvalid = isInvalid(secondaryValue);
|
|
84
|
+
if (primaryInvalid && !secondaryInvalid) delete style[primary];
|
|
85
|
+
else if (secondaryInvalid && !primaryInvalid) delete style[secondary];
|
|
86
|
+
else if (primaryInvalid && secondaryInvalid) if (secondaryValue === 0 && primaryValue !== 0) delete style[primary];
|
|
87
|
+
else delete style[secondary];
|
|
88
|
+
};
|
|
77
89
|
var getInitPositionStyle = (style = {}, layout) => {
|
|
78
90
|
if (layout === Layout.ABSOLUTE) {
|
|
79
91
|
const newStyle = {
|
|
80
92
|
...style,
|
|
81
93
|
position: "absolute"
|
|
82
94
|
};
|
|
95
|
+
removeConflictPosition(newStyle, "left", "right");
|
|
96
|
+
removeConflictPosition(newStyle, "top", "bottom");
|
|
83
97
|
if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") newStyle.left = 0;
|
|
84
98
|
return newStyle;
|
|
85
99
|
}
|
|
@@ -104,58 +118,63 @@ var setLayout = (node, layout) => {
|
|
|
104
118
|
}
|
|
105
119
|
return node;
|
|
106
120
|
};
|
|
107
|
-
var
|
|
121
|
+
var hasPositionValue = (style, key) => typeof style?.[key] !== "undefined" && style?.[key] !== "";
|
|
122
|
+
/**
|
|
123
|
+
* 沿节点路径累加(或抵消)某一方向上的定位偏移量
|
|
124
|
+
* 当路径上的祖先使用了反方向定位(例如计算 left 时祖先用了 right)或非数值定位时,
|
|
125
|
+
* 无法简单地通过求和换算坐标,此时返回 0 表示放弃补偿、保持原值
|
|
126
|
+
* @param path 从根到目标节点的路径(含节点自身)
|
|
127
|
+
* @param dir 需要累加的定位方向
|
|
128
|
+
* @param opposite 反方向定位属性
|
|
129
|
+
* @param sign change2Fixed 取 1(累加祖先偏移),Fixed2Other 取 -1(抵消祖先偏移)
|
|
130
|
+
* @param init 偏移量初始值
|
|
131
|
+
*/
|
|
132
|
+
var accumulatePositionOffset = (path, dir, opposite, sign, init = 0) => {
|
|
133
|
+
let offset = init;
|
|
134
|
+
for (const value of path) {
|
|
135
|
+
if (hasPositionValue(value.style, opposite) || !isNumber(value.style?.[dir] || 0)) return 0;
|
|
136
|
+
offset = offset + sign * Number(value.style?.[dir] || 0);
|
|
137
|
+
}
|
|
138
|
+
return offset;
|
|
139
|
+
};
|
|
140
|
+
var change2Fixed = (node, path) => {
|
|
108
141
|
const style = { ...node.style || {} };
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
left
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
if (value.style?.right || !isNumber(value.style?.left || 0)) {
|
|
116
|
-
offset.left = 0;
|
|
117
|
-
break;
|
|
118
|
-
}
|
|
119
|
-
offset.left = offset.left + Number(value.style?.left || 0);
|
|
142
|
+
if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) {
|
|
143
|
+
const left = accumulatePositionOffset(path, "left", "right", 1);
|
|
144
|
+
if (left) style.left = left;
|
|
145
|
+
} else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) {
|
|
146
|
+
const right = accumulatePositionOffset(path, "right", "left", 1);
|
|
147
|
+
if (right) style.right = right;
|
|
120
148
|
}
|
|
121
|
-
if (!node.style
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
149
|
+
if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) {
|
|
150
|
+
const top = accumulatePositionOffset(path, "top", "bottom", 1);
|
|
151
|
+
if (top) style.top = top;
|
|
152
|
+
} else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) {
|
|
153
|
+
const bottom = accumulatePositionOffset(path, "bottom", "top", 1);
|
|
154
|
+
if (bottom) style.bottom = bottom;
|
|
127
155
|
}
|
|
128
|
-
if (offset.left) style.left = offset.left;
|
|
129
|
-
if (offset.top) style.top = offset.top;
|
|
130
156
|
return style;
|
|
131
157
|
};
|
|
132
|
-
var Fixed2Other = async (node,
|
|
133
|
-
const path = getNodePath(node.id, root.items);
|
|
158
|
+
var Fixed2Other = async (node, path, getLayout) => {
|
|
134
159
|
const cur = path.pop();
|
|
135
160
|
const offset = {
|
|
136
|
-
left:
|
|
137
|
-
top:
|
|
161
|
+
left: 0,
|
|
162
|
+
top: 0,
|
|
163
|
+
right: 0,
|
|
164
|
+
bottom: 0
|
|
138
165
|
};
|
|
139
|
-
if (!node.style
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
offset.left = offset.left - Number(value.style?.left || 0);
|
|
145
|
-
}
|
|
146
|
-
if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
|
|
147
|
-
if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
|
|
148
|
-
offset.top = 0;
|
|
149
|
-
break;
|
|
150
|
-
}
|
|
151
|
-
offset.top = offset.top - Number(value.style?.top || 0);
|
|
152
|
-
}
|
|
166
|
+
if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) offset.left = accumulatePositionOffset(path, "left", "right", -1, Number(cur?.style?.left || 0));
|
|
167
|
+
else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) offset.right = accumulatePositionOffset(path, "right", "left", -1, Number(cur?.style?.right || 0));
|
|
168
|
+
if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) offset.top = accumulatePositionOffset(path, "top", "bottom", -1, Number(cur?.style?.top || 0));
|
|
169
|
+
else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) offset.bottom = accumulatePositionOffset(path, "bottom", "top", -1, Number(cur?.style?.bottom || 0));
|
|
153
170
|
const style = node.style || {};
|
|
154
171
|
const parent = path.pop();
|
|
155
172
|
if (!parent) return getRelativeStyle(style);
|
|
156
173
|
if (await getLayout(parent) !== Layout.RELATIVE) {
|
|
157
174
|
if (offset.left) style.left = offset.left;
|
|
158
175
|
if (offset.top) style.top = offset.top;
|
|
176
|
+
if (offset.right) style.right = offset.right;
|
|
177
|
+
if (offset.bottom) style.bottom = offset.bottom;
|
|
159
178
|
return {
|
|
160
179
|
...style,
|
|
161
180
|
position: "absolute"
|
|
@@ -187,11 +206,11 @@ var fixNodeLeft = (config, parent, doc) => {
|
|
|
187
206
|
};
|
|
188
207
|
var fixNodePosition = (config, parent, stage) => {
|
|
189
208
|
if (config.style?.position !== "absolute") return config.style;
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
209
|
+
const style = { ...config.style || {} };
|
|
210
|
+
const baseStyle = config.style || {};
|
|
211
|
+
if ("left" in baseStyle && !("right" in baseStyle)) style.left = fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document);
|
|
212
|
+
if ("top" in baseStyle && !("bottom" in baseStyle)) style.top = getMiddleTop(config, parent, stage);
|
|
213
|
+
return style;
|
|
195
214
|
};
|
|
196
215
|
var serializeConfig = (config) => serialize(config, {
|
|
197
216
|
space: 2,
|
|
@@ -268,13 +287,14 @@ var buildChangeRecords = (value, basePath) => {
|
|
|
268
287
|
var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
|
|
269
288
|
const id = typeof config === "string" || typeof config === "number" ? config : config.id;
|
|
270
289
|
if (!id) throw new Error("没有ID,无法选中");
|
|
271
|
-
const { node, parent, page } = getNodeInfoFn(id);
|
|
290
|
+
const { node, parent, page, path } = getNodeInfoFn(id);
|
|
272
291
|
if (!node) throw new Error("获取不到组件信息");
|
|
273
292
|
if (node.id === rootId) throw new Error("不能选根节点");
|
|
274
293
|
return {
|
|
275
294
|
node,
|
|
276
295
|
parent,
|
|
277
|
-
page
|
|
296
|
+
page,
|
|
297
|
+
path
|
|
278
298
|
};
|
|
279
299
|
};
|
|
280
300
|
/**
|
|
@@ -286,11 +306,11 @@ var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
|
|
|
286
306
|
* @param getLayoutFn 获取父节点布局方式的回调函数
|
|
287
307
|
* @returns 处理后的节点配置(深拷贝)
|
|
288
308
|
*/
|
|
289
|
-
var toggleFixedPosition = async (dist, src,
|
|
309
|
+
var toggleFixedPosition = async (dist, src, path, getLayoutFn) => {
|
|
290
310
|
const newConfig = cloneDeep$1(dist);
|
|
291
311
|
if (!isPop(src) && newConfig.style?.position) {
|
|
292
|
-
if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig,
|
|
293
|
-
else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig,
|
|
312
|
+
if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig, path);
|
|
313
|
+
else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, path, getLayoutFn);
|
|
294
314
|
}
|
|
295
315
|
return newConfig;
|
|
296
316
|
};
|
|
@@ -431,5 +451,39 @@ var classifyDragSources = (configs, targetParent, getNodeInfo) => {
|
|
|
431
451
|
aborted: false
|
|
432
452
|
};
|
|
433
453
|
};
|
|
454
|
+
/**
|
|
455
|
+
* 给「回滚」生成的新 step 用的简短描述生成器。
|
|
456
|
+
* 与 UI 层 `describePageStep` 同义,但避免 service 反向依赖 layouts/,故放在此工具函数中。
|
|
457
|
+
*/
|
|
458
|
+
var describeStepForRevert = (step) => {
|
|
459
|
+
const items = step.diff ?? [];
|
|
460
|
+
const withId = (node, label) => {
|
|
461
|
+
const id = node?.id;
|
|
462
|
+
if (id === void 0 || id === null || `${id}` === "") return label;
|
|
463
|
+
return label ? `${label}(id: ${id})` : `id: ${id}`;
|
|
464
|
+
};
|
|
465
|
+
switch (step.opType) {
|
|
466
|
+
case "add": {
|
|
467
|
+
const count = items.length;
|
|
468
|
+
const node = items[0]?.newSchema;
|
|
469
|
+
const label = node?.name || node?.type || "";
|
|
470
|
+
return `撤回新增 ${count} 个节点${count === 1 ? `(${withId(node, label)})` : ""}`;
|
|
471
|
+
}
|
|
472
|
+
case "remove": {
|
|
473
|
+
const count = items.length;
|
|
474
|
+
const node = items[0]?.oldSchema;
|
|
475
|
+
const label = node?.name || node?.type || "";
|
|
476
|
+
return `还原已删除的 ${count} 个节点${count === 1 ? `(${withId(node, label)})` : ""}`;
|
|
477
|
+
}
|
|
478
|
+
default:
|
|
479
|
+
if (items.length === 1) {
|
|
480
|
+
const { newSchema, oldSchema, changeRecords } = items[0];
|
|
481
|
+
const target = withId(newSchema || oldSchema, newSchema?.name || newSchema?.type || oldSchema?.name || oldSchema?.type || "");
|
|
482
|
+
const propPath = changeRecords?.[0]?.propPath;
|
|
483
|
+
return propPath ? `还原 ${target} · ${propPath}` : `还原 ${target}`;
|
|
484
|
+
}
|
|
485
|
+
return `还原 ${items.length} 个节点的修改`;
|
|
486
|
+
}
|
|
487
|
+
};
|
|
434
488
|
//#endregion
|
|
435
|
-
export { 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 };
|
|
489
|
+
export { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, describeStepForRevert, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition };
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
import { UndoRedo } from "./undo-redo.js";
|
|
2
|
+
import { guid } from "@tmagic/utils";
|
|
3
|
+
import { cloneDeep } from "lodash-es";
|
|
4
|
+
import serialize from "serialize-javascript";
|
|
5
|
+
//#region packages/editor/src/utils/history.ts
|
|
6
|
+
/**
|
|
7
|
+
* 「回滚」生成的新 step 简短描述。代码块 / 数据源共用。
|
|
8
|
+
* 二者逻辑一致,仅展示名取值字段不同(代码块取 `name`,数据源取 `title`),
|
|
9
|
+
* 因此通过 `getLabel` 注入取值方式。
|
|
10
|
+
*
|
|
11
|
+
* @param id 关联的代码块 / 数据源 id
|
|
12
|
+
* @param diff 单条变更 diff(缺省视为空)
|
|
13
|
+
* @param getLabel 从快照取展示名
|
|
14
|
+
*/
|
|
15
|
+
var describeRevertStep = (id, { oldSchema, newSchema, changeRecords } = {}, getLabel) => {
|
|
16
|
+
const labelOf = (schema) => getLabel(schema) || schema.id;
|
|
17
|
+
if (!oldSchema && newSchema) return `撤回新增 ${labelOf(newSchema) || id}`;
|
|
18
|
+
if (oldSchema && !newSchema) return `还原已删除的 ${labelOf(oldSchema) || id}`;
|
|
19
|
+
const label = newSchema && getLabel(newSchema) || oldSchema && getLabel(oldSchema) || `${id}`;
|
|
20
|
+
const propPath = changeRecords?.[0]?.propPath;
|
|
21
|
+
return propPath ? `还原 ${label} · ${propPath}` : `还原 ${label}`;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* 根据 old/new 是否为 null 推断 opType(与 push 时的约定一致)。
|
|
25
|
+
*/
|
|
26
|
+
var detectStackOpType = (oldVal, newVal) => {
|
|
27
|
+
if (oldVal === null && newVal !== null) return "add";
|
|
28
|
+
if (oldVal !== null && newVal === null) return "remove";
|
|
29
|
+
return "update";
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* 构造一条代码块 / 数据源「按 id 分栈」的历史记录:两者除 payload 字段命名外完全一致。
|
|
33
|
+
*
|
|
34
|
+
* - `add`:oldValue = null;`remove`:newValue = null;`update`:两者都有,可带 changeRecords 做局部更新。
|
|
35
|
+
* - 内容会做 cloneDeep 防止后续被外部引用篡改;opType 依据 old/new 是否为 null 推断。
|
|
36
|
+
* - 仅负责构造 step 并返回,入栈与事件 emit 由各公共方法(pushCodeBlock / pushDataSource)自行处理。
|
|
37
|
+
* - 不直接驱动业务 service,调用方负责实际写回。
|
|
38
|
+
*/
|
|
39
|
+
var createStackStep = (id, payload) => {
|
|
40
|
+
if (!id) return null;
|
|
41
|
+
const oldSchema = payload.oldValue ? cloneDeep(payload.oldValue) : null;
|
|
42
|
+
const newSchema = payload.newValue ? cloneDeep(payload.newValue) : null;
|
|
43
|
+
const changeRecords = payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0;
|
|
44
|
+
const opType = detectStackOpType(payload.oldValue, payload.newValue);
|
|
45
|
+
return {
|
|
46
|
+
uuid: guid(),
|
|
47
|
+
id,
|
|
48
|
+
opType,
|
|
49
|
+
diff: [{
|
|
50
|
+
...newSchema !== null ? { newSchema } : {},
|
|
51
|
+
...oldSchema !== null ? { oldSchema } : {},
|
|
52
|
+
...opType === "update" && changeRecords ? { changeRecords } : {}
|
|
53
|
+
}],
|
|
54
|
+
historyDescription: payload.historyDescription,
|
|
55
|
+
source: payload.source,
|
|
56
|
+
timestamp: Date.now()
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
var markStackSaved = (undoRedo) => {
|
|
60
|
+
if (!undoRedo) return;
|
|
61
|
+
undoRedo.updateElements((element) => {
|
|
62
|
+
element.saved = false;
|
|
63
|
+
});
|
|
64
|
+
undoRedo.updateCurrentElement((element) => {
|
|
65
|
+
element.saved = true;
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* 把单个「按 id 分栈」的历史栈(代码块 / 数据源)拆成若干 group:
|
|
70
|
+
* 每条操作记录独立成组,不做相邻 update 合并(与页面历史的合并策略不同)。
|
|
71
|
+
*
|
|
72
|
+
* 代码块与数据源除 `kind` 外结构完全一致,统一由本方法处理;`kind` 决定返回的具体分组类型。
|
|
73
|
+
*/
|
|
74
|
+
var mergeStackSteps = (kind, id, list, cursor) => {
|
|
75
|
+
const currentIndex = cursor - 1;
|
|
76
|
+
return list.map((step, index) => {
|
|
77
|
+
const applied = index < cursor;
|
|
78
|
+
const isCurrent = index === currentIndex;
|
|
79
|
+
return {
|
|
80
|
+
kind,
|
|
81
|
+
id,
|
|
82
|
+
opType: step.opType,
|
|
83
|
+
steps: [{
|
|
84
|
+
step,
|
|
85
|
+
index,
|
|
86
|
+
applied,
|
|
87
|
+
isCurrent
|
|
88
|
+
}],
|
|
89
|
+
applied,
|
|
90
|
+
isCurrent
|
|
91
|
+
};
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
/**
|
|
95
|
+
* 把页面栈拆成若干 group:
|
|
96
|
+
* - 单节点的 'update' 按 targetId 与相邻同 targetId 的 update 合并到一个 group;
|
|
97
|
+
* - 'add' / 'remove' 始终独立成组(语义上是结构变更,不应被收纳进单节点修改组);
|
|
98
|
+
* - 多节点 'update'(如批量改属性)也独立成组(无明确单一目标,避免误合并)。
|
|
99
|
+
*/
|
|
100
|
+
var mergePageSteps = (pageId, list, cursor) => {
|
|
101
|
+
const groups = [];
|
|
102
|
+
let current = null;
|
|
103
|
+
const currentIndex = cursor - 1;
|
|
104
|
+
list.forEach((step, index) => {
|
|
105
|
+
const applied = index < cursor;
|
|
106
|
+
const isCurrent = index === currentIndex;
|
|
107
|
+
const targetId = detectPageTargetId(step);
|
|
108
|
+
const targetName = detectPageTargetName(step);
|
|
109
|
+
const entry = {
|
|
110
|
+
step,
|
|
111
|
+
index,
|
|
112
|
+
applied,
|
|
113
|
+
isCurrent
|
|
114
|
+
};
|
|
115
|
+
const mergeable = step.opType === "update" && targetId !== void 0;
|
|
116
|
+
if (mergeable && current?.opType === "update" && current.targetId === targetId) {
|
|
117
|
+
current.steps.push(entry);
|
|
118
|
+
current.applied = applied;
|
|
119
|
+
if (isCurrent) current.isCurrent = true;
|
|
120
|
+
if (targetName) current.targetName = targetName;
|
|
121
|
+
} else {
|
|
122
|
+
current = {
|
|
123
|
+
kind: "page",
|
|
124
|
+
pageId,
|
|
125
|
+
opType: step.opType,
|
|
126
|
+
targetId: mergeable ? targetId : void 0,
|
|
127
|
+
targetName,
|
|
128
|
+
steps: [entry],
|
|
129
|
+
applied,
|
|
130
|
+
isCurrent
|
|
131
|
+
};
|
|
132
|
+
groups.push(current);
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
return groups;
|
|
136
|
+
};
|
|
137
|
+
/**
|
|
138
|
+
* 解析 StepValue 中的"目标节点 id"用于合并:
|
|
139
|
+
* - 单节点 update:取唯一一项 updatedItems 的节点 id;
|
|
140
|
+
* - 其它情形(多节点 update / add / remove):返回 undefined,表示不参与合并。
|
|
141
|
+
*/
|
|
142
|
+
var detectPageTargetId = (step) => {
|
|
143
|
+
if (step.opType !== "update") return void 0;
|
|
144
|
+
const items = step.diff;
|
|
145
|
+
if (items?.length !== 1) return void 0;
|
|
146
|
+
return items[0].newSchema?.id ?? items[0].oldSchema?.id;
|
|
147
|
+
};
|
|
148
|
+
/** 解析 StepValue 中的目标节点可读名(用于 UI 展示)。 */
|
|
149
|
+
var detectPageTargetName = (step) => {
|
|
150
|
+
const items = step.diff;
|
|
151
|
+
if (step.opType === "update") {
|
|
152
|
+
if (items?.length === 1) {
|
|
153
|
+
const node = items[0].newSchema || items[0].oldSchema;
|
|
154
|
+
return node?.name || node?.type || (node?.id !== void 0 ? `${node.id}` : void 0);
|
|
155
|
+
}
|
|
156
|
+
return items?.length ? `${items.length} 个节点` : void 0;
|
|
157
|
+
}
|
|
158
|
+
if (step.opType === "add") {
|
|
159
|
+
if (items?.length === 1) {
|
|
160
|
+
const n = items[0].newSchema;
|
|
161
|
+
return n?.name || n?.type || `${n?.id}`;
|
|
162
|
+
}
|
|
163
|
+
return items?.length ? `${items.length} 个节点` : void 0;
|
|
164
|
+
}
|
|
165
|
+
if (step.opType === "remove") {
|
|
166
|
+
if (items?.length === 1) {
|
|
167
|
+
const n = items[0].oldSchema;
|
|
168
|
+
return n?.name || n?.type || `${n?.id}`;
|
|
169
|
+
}
|
|
170
|
+
return items?.length ? `${items.length} 个节点` : void 0;
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
/**
|
|
174
|
+
* 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。
|
|
175
|
+
*
|
|
176
|
+
* 序列化(深克隆)的同一趟里,只把每条 step 中可能含函数的 `diff` 用 serialize-javascript 序列化成字符串,
|
|
177
|
+
* 其余字段(uuid / opType / timestamp / `modifiedNodeIds` Map 等)原样保留,交给 IndexedDB 结构化克隆。
|
|
178
|
+
* 这样既能写入函数,又避免序列化整份快照的开销;读取时再由 {@link parseStacksStepDiff} 还原 diff。
|
|
179
|
+
* 不含 `diff` 的元素(如通用栈)原样透传。
|
|
180
|
+
*/
|
|
181
|
+
var serializeStacks = (stacks) => {
|
|
182
|
+
const result = {};
|
|
183
|
+
Object.entries(stacks).forEach(([id, undoRedo]) => {
|
|
184
|
+
if (!undoRedo) return;
|
|
185
|
+
const serialized = undoRedo.serialize();
|
|
186
|
+
result[id] = {
|
|
187
|
+
...serialized,
|
|
188
|
+
elementList: serialized.elementList.map((step) => step.diff === void 0 ? step : Object.assign({}, step, { diff: serialize(step.diff) }))
|
|
189
|
+
};
|
|
190
|
+
});
|
|
191
|
+
return result;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* 把 `Record<Id, SerializedUndoRedo>` 整体还原为 `Record<Id, UndoRedo>`。
|
|
195
|
+
* 还原时把每个栈的游标定位到最近一条已保存(`saved === true`)记录之后。
|
|
196
|
+
*
|
|
197
|
+
* 与 {@link serializeStacks} 相反:当传入 `parse`(parseDSL)时,把每条 step 中以字符串形式存储的 `diff`
|
|
198
|
+
* 解析回真实对象(含函数);不含 `diff` 的元素(如通用栈)原样透传。
|
|
199
|
+
*/
|
|
200
|
+
var deserializeStacks = (stacks = {}, parse) => {
|
|
201
|
+
const result = {};
|
|
202
|
+
Object.entries(stacks).forEach(([id, serialized]) => {
|
|
203
|
+
if (!serialized) return;
|
|
204
|
+
const elementList = parse ? serialized.elementList.map((step) => {
|
|
205
|
+
const { diff } = step;
|
|
206
|
+
return typeof diff === "string" ? Object.assign({}, step, { diff: parse(`(${diff})`) }) : step;
|
|
207
|
+
}) : serialized.elementList;
|
|
208
|
+
result[id] = UndoRedo.fromSerialized({
|
|
209
|
+
...serialized,
|
|
210
|
+
elementList
|
|
211
|
+
}, { isSavedStep: (element) => element.saved === true });
|
|
212
|
+
});
|
|
213
|
+
return result;
|
|
214
|
+
};
|
|
215
|
+
/**
|
|
216
|
+
* 按 id 从「按 id 分栈」的记录表(代码块 / 数据源)中获取(或创建)对应的 UndoRedo 栈。
|
|
217
|
+
*/
|
|
218
|
+
var getOrCreateStack = (stacks, id) => {
|
|
219
|
+
if (!stacks[id]) stacks[id] = new UndoRedo();
|
|
220
|
+
return stacks[id];
|
|
221
|
+
};
|
|
222
|
+
/**
|
|
223
|
+
* 撤销下限:当页面栈 index 0 是 `opType: 'initial'` 的基线 step 时为 1(基线不可被撤销),否则为 0。
|
|
224
|
+
* 用于把 cursor 钉在基线之上,保证 undo / canUndo / goto 都不会越过初始基线。
|
|
225
|
+
*/
|
|
226
|
+
var undoFloor = (undoRedo) => {
|
|
227
|
+
return undoRedo.getElementList()[0]?.opType === "initial" ? 1 : 0;
|
|
228
|
+
};
|
|
229
|
+
/** 将单次 push 产生的 history uuid(或 null)转为 *AndGetHistoryId 返回用的 uuid 列表。 */
|
|
230
|
+
var getLastPushedHistoryIds = (historyId) => historyId ? [historyId] : [];
|
|
231
|
+
//#endregion
|
|
232
|
+
export { createStackStep, describeRevertStep, deserializeStacks, detectPageTargetId, detectPageTargetName, detectStackOpType, getLastPushedHistoryIds, getOrCreateStack, markStackSaved, mergePageSteps, mergeStackSteps, serializeStacks, undoFloor };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
//#region packages/editor/src/utils/indexed-db.ts
|
|
2
|
+
/**
|
|
3
|
+
* 一组极简的、基于原生 IndexedDB 的 Promise KV 工具,避免引入额外依赖。
|
|
4
|
+
* 仅用于浏览器环境;在不支持 IndexedDB 的环境(如 SSR / 部分测试环境)下会 reject。
|
|
5
|
+
*/
|
|
6
|
+
/** 是否处于支持 IndexedDB 的环境。 */
|
|
7
|
+
var isIndexedDBSupported = () => typeof indexedDB !== "undefined" && indexedDB !== null;
|
|
8
|
+
/**
|
|
9
|
+
* 打开(必要时升级)数据库,确保目标 objectStore 存在后返回连接。
|
|
10
|
+
*
|
|
11
|
+
* 由于 objectStore 只能在 `onupgradeneeded` 内创建,这里先以当前版本打开,
|
|
12
|
+
* 若发现 store 不存在则关闭连接、以更高版本重开来按需创建,兼容动态 storeName。
|
|
13
|
+
*/
|
|
14
|
+
var openIndexedDB = (dbName, storeName) => new Promise((resolve, reject) => {
|
|
15
|
+
if (!isIndexedDBSupported()) {
|
|
16
|
+
reject(/* @__PURE__ */ new Error("当前环境不支持 IndexedDB"));
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const request = indexedDB.open(dbName);
|
|
20
|
+
request.onupgradeneeded = () => {
|
|
21
|
+
const db = request.result;
|
|
22
|
+
if (!db.objectStoreNames.contains(storeName)) db.createObjectStore(storeName);
|
|
23
|
+
};
|
|
24
|
+
request.onerror = () => reject(request.error);
|
|
25
|
+
request.onsuccess = () => {
|
|
26
|
+
const db = request.result;
|
|
27
|
+
if (db.objectStoreNames.contains(storeName)) {
|
|
28
|
+
resolve(db);
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
const nextVersion = db.version + 1;
|
|
32
|
+
db.close();
|
|
33
|
+
const upgradeRequest = indexedDB.open(dbName, nextVersion);
|
|
34
|
+
upgradeRequest.onupgradeneeded = () => {
|
|
35
|
+
const upgradeDb = upgradeRequest.result;
|
|
36
|
+
if (!upgradeDb.objectStoreNames.contains(storeName)) upgradeDb.createObjectStore(storeName);
|
|
37
|
+
};
|
|
38
|
+
upgradeRequest.onerror = () => reject(upgradeRequest.error);
|
|
39
|
+
upgradeRequest.onsuccess = () => resolve(upgradeRequest.result);
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
/** 写入(覆盖)一条记录。value 通过结构化克隆存储,支持 Map / Set 等结构。 */
|
|
43
|
+
var idbSet = async (dbName, storeName, key, value) => {
|
|
44
|
+
const db = await openIndexedDB(dbName, storeName);
|
|
45
|
+
try {
|
|
46
|
+
await new Promise((resolve, reject) => {
|
|
47
|
+
const tx = db.transaction(storeName, "readwrite");
|
|
48
|
+
tx.objectStore(storeName).put(value, key);
|
|
49
|
+
tx.oncomplete = () => resolve();
|
|
50
|
+
tx.onabort = () => reject(tx.error);
|
|
51
|
+
tx.onerror = () => reject(tx.error);
|
|
52
|
+
});
|
|
53
|
+
} finally {
|
|
54
|
+
db.close();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
/** 读取一条记录,不存在时返回 undefined。 */
|
|
58
|
+
var idbGet = async (dbName, storeName, key) => {
|
|
59
|
+
const db = await openIndexedDB(dbName, storeName);
|
|
60
|
+
try {
|
|
61
|
+
return await new Promise((resolve, reject) => {
|
|
62
|
+
const request = db.transaction(storeName, "readonly").objectStore(storeName).get(key);
|
|
63
|
+
request.onsuccess = () => resolve(request.result);
|
|
64
|
+
request.onerror = () => reject(request.error);
|
|
65
|
+
});
|
|
66
|
+
} finally {
|
|
67
|
+
db.close();
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
/** 删除一条记录。 */
|
|
71
|
+
var idbDelete = async (dbName, storeName, key) => {
|
|
72
|
+
const db = await openIndexedDB(dbName, storeName);
|
|
73
|
+
try {
|
|
74
|
+
await new Promise((resolve, reject) => {
|
|
75
|
+
const tx = db.transaction(storeName, "readwrite");
|
|
76
|
+
tx.objectStore(storeName).delete(key);
|
|
77
|
+
tx.oncomplete = () => resolve();
|
|
78
|
+
tx.onabort = () => reject(tx.error);
|
|
79
|
+
tx.onerror = () => reject(tx.error);
|
|
80
|
+
});
|
|
81
|
+
} finally {
|
|
82
|
+
db.close();
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
//#endregion
|
|
86
|
+
export { idbDelete, idbGet, idbSet, isIndexedDBSupported, openIndexedDB };
|