@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.
Files changed (76) hide show
  1. package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js +1 -1
  2. package/dist/es/components/ToolButton.vue_vue_type_script_setup_true_lang.js +6 -6
  3. package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +4 -1
  4. package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +8 -2
  5. package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +25 -8
  6. package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +6 -4
  7. package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +25 -12
  8. package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +27 -5
  9. package/dist/es/index.js +6 -3
  10. package/dist/es/initService.js +1 -1
  11. package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +1 -1
  12. package/dist/es/layouts/history-list/Bucket.vue_vue_type_script_setup_true_lang.js +19 -55
  13. package/dist/es/layouts/history-list/BucketTab.vue_vue_type_script_setup_true_lang.js +22 -39
  14. package/dist/es/layouts/history-list/GroupRow.vue_vue_type_script_setup_true_lang.js +149 -103
  15. package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js +32 -8
  16. package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js +335 -213
  17. package/dist/es/layouts/history-list/InitialRow.vue_vue_type_script_setup_true_lang.js +36 -7
  18. package/dist/es/layouts/history-list/PageTab.vue_vue_type_script_setup_true_lang.js +47 -60
  19. package/dist/es/layouts/history-list/composables.js +73 -32
  20. package/dist/es/layouts/page-bar/PageBar.vue_vue_type_script_setup_true_lang.js +4 -2
  21. package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +5 -1
  22. package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js +16 -3
  23. package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js +23 -1
  24. package/dist/es/services/codeBlock.js +96 -37
  25. package/dist/es/services/dataSource.js +70 -26
  26. package/dist/es/services/editor.js +266 -104
  27. package/dist/es/services/history.js +271 -212
  28. package/dist/es/services/ui.js +3 -0
  29. package/dist/es/style.css +53 -7
  30. package/dist/es/utils/data-source/index.js +2 -0
  31. package/dist/es/utils/editor.js +103 -49
  32. package/dist/es/utils/history.js +232 -0
  33. package/dist/es/utils/indexed-db.js +86 -0
  34. package/dist/es/utils/undo-redo.js +60 -1
  35. package/dist/style.css +53 -7
  36. package/dist/tmagic-editor.umd.cjs +2064 -1000
  37. package/package.json +7 -7
  38. package/src/components/CompareForm.vue +3 -1
  39. package/src/components/ToolButton.vue +2 -2
  40. package/src/fields/CodeSelectCol.vue +7 -1
  41. package/src/fields/DataSourceFieldSelect/FieldSelect.vue +16 -2
  42. package/src/fields/DataSourceFields.vue +37 -8
  43. package/src/fields/DataSourceMethodSelect.vue +9 -4
  44. package/src/fields/DataSourceMethods.vue +42 -21
  45. package/src/fields/StyleSetter/components/Border.vue +15 -6
  46. package/src/index.ts +1 -0
  47. package/src/initService.ts +1 -1
  48. package/src/layouts/Framework.vue +1 -1
  49. package/src/layouts/history-list/Bucket.vue +34 -71
  50. package/src/layouts/history-list/BucketTab.vue +46 -54
  51. package/src/layouts/history-list/GroupRow.vue +146 -111
  52. package/src/layouts/history-list/HistoryDiffDialog.vue +94 -68
  53. package/src/layouts/history-list/HistoryListPanel.vue +298 -115
  54. package/src/layouts/history-list/InitialRow.vue +28 -9
  55. package/src/layouts/history-list/PageTab.vue +57 -51
  56. package/src/layouts/history-list/composables.ts +157 -36
  57. package/src/layouts/page-bar/PageBar.vue +4 -2
  58. package/src/layouts/sidebar/Sidebar.vue +6 -1
  59. package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +30 -2
  60. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +26 -1
  61. package/src/services/codeBlock.ts +113 -37
  62. package/src/services/dataSource.ts +94 -40
  63. package/src/services/editor.ts +376 -136
  64. package/src/services/history.ts +306 -209
  65. package/src/services/ui.ts +7 -0
  66. package/src/theme/history-list-panel.scss +72 -5
  67. package/src/theme/page-bar.scss +0 -4
  68. package/src/theme/style-setter/border.scss +4 -1
  69. package/src/type.ts +183 -64
  70. package/src/utils/data-source/index.ts +2 -0
  71. package/src/utils/editor.ts +166 -60
  72. package/src/utils/history.ts +308 -0
  73. package/src/utils/index.ts +2 -0
  74. package/src/utils/indexed-db.ts +122 -0
  75. package/src/utils/undo-redo.ts +88 -0
  76. 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: #606266;
851
- background-color: rgba(96, 98, 102, 0.1);
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(96, 98, 102, 0.18);
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",
@@ -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 change2Fixed = (node, root) => {
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
- const path = getNodePath(node.id, root.items);
110
- const offset = {
111
- left: 0,
112
- top: 0
113
- };
114
- if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
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?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
122
- if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
123
- offset.top = 0;
124
- break;
125
- }
126
- offset.top = offset.top + Number(value.style?.top || 0);
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, root, getLayout) => {
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: cur?.style?.left || 0,
137
- top: cur?.style?.top || 0
161
+ left: 0,
162
+ top: 0,
163
+ right: 0,
164
+ bottom: 0
138
165
  };
139
- if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
140
- if (value.style?.right || !isNumber(value.style?.left || 0)) {
141
- offset.left = 0;
142
- break;
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
- return {
191
- ...config.style || {},
192
- top: getMiddleTop(config, parent, stage),
193
- left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
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, root, getLayoutFn) => {
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, root);
293
- else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
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 };