@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
|
@@ -1,172 +1,18 @@
|
|
|
1
1
|
import BaseService from "./BaseService.js";
|
|
2
|
+
import { getEditorConfig } from "../utils/config.js";
|
|
2
3
|
import { UndoRedo } from "../utils/undo-redo.js";
|
|
4
|
+
import { createStackStep, deserializeStacks, getOrCreateStack, markStackSaved, mergePageSteps, mergeStackSteps, serializeStacks, undoFloor } from "../utils/history.js";
|
|
5
|
+
import { idbGet, idbSet } from "../utils/indexed-db.js";
|
|
6
|
+
import editor_default from "./editor.js";
|
|
7
|
+
import { guid } from "@tmagic/utils";
|
|
3
8
|
import { reactive } from "vue";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
static mergeCodeBlockSteps(codeBlockId, list, cursor) {
|
|
12
|
-
const groups = [];
|
|
13
|
-
let current = null;
|
|
14
|
-
const currentIndex = cursor - 1;
|
|
15
|
-
list.forEach((step, index) => {
|
|
16
|
-
const opType = History.detectOpType(step.oldContent, step.newContent);
|
|
17
|
-
const applied = index < cursor;
|
|
18
|
-
const isCurrent = index === currentIndex;
|
|
19
|
-
if (opType === "update" && current?.opType === "update") {
|
|
20
|
-
current.steps.push({
|
|
21
|
-
step,
|
|
22
|
-
index,
|
|
23
|
-
applied,
|
|
24
|
-
isCurrent
|
|
25
|
-
});
|
|
26
|
-
current.applied = applied;
|
|
27
|
-
if (isCurrent) current.isCurrent = true;
|
|
28
|
-
} else {
|
|
29
|
-
current = {
|
|
30
|
-
kind: "code-block",
|
|
31
|
-
id: codeBlockId,
|
|
32
|
-
opType,
|
|
33
|
-
steps: [{
|
|
34
|
-
step,
|
|
35
|
-
index,
|
|
36
|
-
applied,
|
|
37
|
-
isCurrent
|
|
38
|
-
}],
|
|
39
|
-
applied,
|
|
40
|
-
isCurrent
|
|
41
|
-
};
|
|
42
|
-
groups.push(current);
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
return groups;
|
|
46
|
-
}
|
|
47
|
-
static mergeDataSourceSteps(dataSourceId, list, cursor) {
|
|
48
|
-
const groups = [];
|
|
49
|
-
let current = null;
|
|
50
|
-
const currentIndex = cursor - 1;
|
|
51
|
-
list.forEach((step, index) => {
|
|
52
|
-
const opType = History.detectOpType(step.oldSchema, step.newSchema);
|
|
53
|
-
const applied = index < cursor;
|
|
54
|
-
const isCurrent = index === currentIndex;
|
|
55
|
-
if (opType === "update" && current?.opType === "update") {
|
|
56
|
-
current.steps.push({
|
|
57
|
-
step,
|
|
58
|
-
index,
|
|
59
|
-
applied,
|
|
60
|
-
isCurrent
|
|
61
|
-
});
|
|
62
|
-
current.applied = applied;
|
|
63
|
-
if (isCurrent) current.isCurrent = true;
|
|
64
|
-
} else {
|
|
65
|
-
current = {
|
|
66
|
-
kind: "data-source",
|
|
67
|
-
id: dataSourceId,
|
|
68
|
-
opType,
|
|
69
|
-
steps: [{
|
|
70
|
-
step,
|
|
71
|
-
index,
|
|
72
|
-
applied,
|
|
73
|
-
isCurrent
|
|
74
|
-
}],
|
|
75
|
-
applied,
|
|
76
|
-
isCurrent
|
|
77
|
-
};
|
|
78
|
-
groups.push(current);
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
return groups;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* 根据 old/new 是否为 null 推断 opType(与 push 时的约定一致)。
|
|
85
|
-
*/
|
|
86
|
-
static detectOpType(oldVal, newVal) {
|
|
87
|
-
if (oldVal === null && newVal !== null) return "add";
|
|
88
|
-
if (oldVal !== null && newVal === null) return "remove";
|
|
89
|
-
return "update";
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* 把页面栈拆成若干 group:
|
|
93
|
-
* - 单节点的 'update' 按 targetId 与相邻同 targetId 的 update 合并到一个 group;
|
|
94
|
-
* - 'add' / 'remove' 始终独立成组(语义上是结构变更,不应被收纳进单节点修改组);
|
|
95
|
-
* - 多节点 'update'(如批量改属性)也独立成组(无明确单一目标,避免误合并)。
|
|
96
|
-
*/
|
|
97
|
-
static mergePageSteps(pageId, list, cursor) {
|
|
98
|
-
const groups = [];
|
|
99
|
-
let current = null;
|
|
100
|
-
const currentIndex = cursor - 1;
|
|
101
|
-
list.forEach((step, index) => {
|
|
102
|
-
const applied = index < cursor;
|
|
103
|
-
const isCurrent = index === currentIndex;
|
|
104
|
-
const targetId = History.detectPageTargetId(step);
|
|
105
|
-
const targetName = History.detectPageTargetName(step);
|
|
106
|
-
const entry = {
|
|
107
|
-
step,
|
|
108
|
-
index,
|
|
109
|
-
applied,
|
|
110
|
-
isCurrent
|
|
111
|
-
};
|
|
112
|
-
const mergeable = step.opType === "update" && targetId !== void 0;
|
|
113
|
-
if (mergeable && current?.opType === "update" && current.targetId === targetId) {
|
|
114
|
-
current.steps.push(entry);
|
|
115
|
-
current.applied = applied;
|
|
116
|
-
if (isCurrent) current.isCurrent = true;
|
|
117
|
-
if (targetName) current.targetName = targetName;
|
|
118
|
-
} else {
|
|
119
|
-
current = {
|
|
120
|
-
kind: "page",
|
|
121
|
-
pageId,
|
|
122
|
-
opType: step.opType,
|
|
123
|
-
targetId: mergeable ? targetId : void 0,
|
|
124
|
-
targetName,
|
|
125
|
-
steps: [entry],
|
|
126
|
-
applied,
|
|
127
|
-
isCurrent
|
|
128
|
-
};
|
|
129
|
-
groups.push(current);
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
return groups;
|
|
133
|
-
}
|
|
134
|
-
/**
|
|
135
|
-
* 解析 StepValue 中的"目标节点 id"用于合并:
|
|
136
|
-
* - 单节点 update:取唯一一项 updatedItems 的节点 id;
|
|
137
|
-
* - 其它情形(多节点 update / add / remove):返回 undefined,表示不参与合并。
|
|
138
|
-
*/
|
|
139
|
-
static detectPageTargetId(step) {
|
|
140
|
-
if (step.opType !== "update") return void 0;
|
|
141
|
-
const items = step.updatedItems;
|
|
142
|
-
if (items?.length !== 1) return void 0;
|
|
143
|
-
return items[0].newNode?.id ?? items[0].oldNode?.id;
|
|
144
|
-
}
|
|
145
|
-
/** 解析 StepValue 中的目标节点可读名(用于 UI 展示)。 */
|
|
146
|
-
static detectPageTargetName(step) {
|
|
147
|
-
if (step.opType === "update") {
|
|
148
|
-
const items = step.updatedItems;
|
|
149
|
-
if (items?.length === 1) {
|
|
150
|
-
const node = items[0].newNode || items[0].oldNode;
|
|
151
|
-
return node?.name || node?.type || (node?.id !== void 0 ? `${node.id}` : void 0);
|
|
152
|
-
}
|
|
153
|
-
return items?.length ? `${items.length} 个节点` : void 0;
|
|
154
|
-
}
|
|
155
|
-
if (step.opType === "add") {
|
|
156
|
-
if (step.nodes?.length === 1) {
|
|
157
|
-
const n = step.nodes[0];
|
|
158
|
-
return n.name || n.type || `${n.id}`;
|
|
159
|
-
}
|
|
160
|
-
return step.nodes?.length ? `${step.nodes.length} 个节点` : void 0;
|
|
161
|
-
}
|
|
162
|
-
if (step.opType === "remove") {
|
|
163
|
-
if (step.removedItems?.length === 1) {
|
|
164
|
-
const n = step.removedItems[0].node;
|
|
165
|
-
return n.name || n.type || `${n.id}`;
|
|
166
|
-
}
|
|
167
|
-
return step.removedItems?.length ? `${step.removedItems.length} 个节点` : void 0;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
9
|
+
//#region packages/editor/src/services/history.ts
|
|
10
|
+
/** 历史记录持久化快照的默认存储位置与结构版本。 */
|
|
11
|
+
var DEFAULT_DB_NAME = "tmagic-editor";
|
|
12
|
+
var DEFAULT_STORE_NAME = "history";
|
|
13
|
+
var DEFAULT_KEY = "default";
|
|
14
|
+
var PERSIST_VERSION = 2;
|
|
15
|
+
var History = class extends BaseService {
|
|
170
16
|
state = reactive({
|
|
171
17
|
pageSteps: {},
|
|
172
18
|
pageId: void 0,
|
|
@@ -206,6 +52,53 @@ var history_default = new class History extends BaseService {
|
|
|
206
52
|
this.state.dataSourceState = {};
|
|
207
53
|
}
|
|
208
54
|
/**
|
|
55
|
+
* 为指定页面 / 页面片种入一条「初始基线」记录(如加载 DSL 时的「初始 / 加载」基线)。
|
|
56
|
+
*
|
|
57
|
+
* 该记录是一条 `opType: 'initial'` 的 {@link StepValue},作为页面历史栈 **index 0 的固定底线**:
|
|
58
|
+
* - 它是一条真实入栈的 step(随栈一起持久化),但被钉为撤销/回滚的下限——cursor 永不低于它,
|
|
59
|
+
* 因此不会被 undo / goto / revert 触达(详见 {@link undo} / {@link setCanUndoRedo});
|
|
60
|
+
* - 历史面板把它过滤出分组列表(见 {@link getPageHistoryGroups}),改由底部「初始」行展示。
|
|
61
|
+
*
|
|
62
|
+
* 仅当目标页面栈为空时种入(保证 initial 一定位于 index 0);已存在 initial 底线时默认不重复种入,
|
|
63
|
+
* 传 `force=true` 且栈为空时按新基线种入。
|
|
64
|
+
*/
|
|
65
|
+
setPageMarker(pageId, options = {}) {
|
|
66
|
+
if (pageId === void 0 || pageId === null || `${pageId}` === "") return null;
|
|
67
|
+
const existing = this.getPageMarker(pageId);
|
|
68
|
+
if (existing) return existing;
|
|
69
|
+
const stack = getOrCreateStack(this.state.pageSteps, pageId);
|
|
70
|
+
if (stack.getLength() > 0) return null;
|
|
71
|
+
const marker = {
|
|
72
|
+
uuid: guid(),
|
|
73
|
+
opType: "initial",
|
|
74
|
+
diff: [],
|
|
75
|
+
data: {
|
|
76
|
+
name: options.name || "",
|
|
77
|
+
id: pageId
|
|
78
|
+
},
|
|
79
|
+
selectedBefore: [],
|
|
80
|
+
selectedAfter: [],
|
|
81
|
+
modifiedNodeIds: /* @__PURE__ */ new Map(),
|
|
82
|
+
historyDescription: options.description || "未修改的初始状态",
|
|
83
|
+
timestamp: Date.now(),
|
|
84
|
+
...options.source ? { source: options.source } : {}
|
|
85
|
+
};
|
|
86
|
+
stack.pushElement(marker);
|
|
87
|
+
if (`${pageId}` === `${this.state.pageId}`) this.setCanUndoRedo();
|
|
88
|
+
this.emit("page-marker-change", marker);
|
|
89
|
+
return marker;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* 读取指定页面(缺省当前活动页)的初始基线 step(页面栈 index 0 且 `opType: 'initial'`);
|
|
93
|
+
* 不存在时返回 undefined。
|
|
94
|
+
*/
|
|
95
|
+
getPageMarker(pageId) {
|
|
96
|
+
const targetPageId = pageId ?? this.state.pageId;
|
|
97
|
+
if (!targetPageId) return void 0;
|
|
98
|
+
const first = this.state.pageSteps[targetPageId]?.getElementList()[0];
|
|
99
|
+
return first?.opType === "initial" ? first : void 0;
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
209
102
|
* 把一条步骤推入指定页面的栈;不指定 pageId 时落到当前活动页。
|
|
210
103
|
*
|
|
211
104
|
* 跨页操作(例如 `moveToContainer` 把节点搬到其它页)必须显式传入 `pageId`,
|
|
@@ -214,11 +107,31 @@ var history_default = new class History extends BaseService {
|
|
|
214
107
|
push(state, pageId) {
|
|
215
108
|
const undoRedo = this.getUndoRedo(pageId);
|
|
216
109
|
if (!undoRedo) return null;
|
|
110
|
+
if (state.uuid === void 0) state.uuid = guid();
|
|
217
111
|
if (state.timestamp === void 0) state.timestamp = Date.now();
|
|
218
112
|
undoRedo.pushElement(state);
|
|
219
113
|
if (pageId === void 0 || `${pageId}` === `${this.state.pageId}`) this.emit("change", state);
|
|
220
114
|
return state;
|
|
221
115
|
}
|
|
116
|
+
/** 读取指定页面(缺省当前活动页)历史栈当前游标所在的 step(cursor - 1);无则返回 null。 */
|
|
117
|
+
getCurrentPageStep(pageId) {
|
|
118
|
+
const targetPageId = pageId ?? this.state.pageId;
|
|
119
|
+
if (!targetPageId) return null;
|
|
120
|
+
return this.state.pageSteps[targetPageId]?.getCurrentElement() ?? null;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* 用 `state` 替换指定页面栈当前游标所在的 step(并丢弃其后的重做尾部),游标不变。
|
|
124
|
+
* 用于「连续 set root 记录合并」等就地替换最新一条的场景;替换成功后按需刷新 / 通知。
|
|
125
|
+
*/
|
|
126
|
+
replaceCurrentPageStep(state, pageId) {
|
|
127
|
+
const undoRedo = this.getUndoRedo(pageId);
|
|
128
|
+
if (!undoRedo) return null;
|
|
129
|
+
if (state.uuid === void 0) state.uuid = guid();
|
|
130
|
+
if (state.timestamp === void 0) state.timestamp = Date.now();
|
|
131
|
+
if (!undoRedo.replaceCurrentElement(state)) return null;
|
|
132
|
+
this.emit("change", state);
|
|
133
|
+
return state;
|
|
134
|
+
}
|
|
222
135
|
/**
|
|
223
136
|
* 推入一条代码块变更记录(与页面/节点完全无关),按 `codeBlockId` 维度独立一份 UndoRedo 栈。
|
|
224
137
|
*
|
|
@@ -229,17 +142,15 @@ var history_default = new class History extends BaseService {
|
|
|
229
142
|
* - 不直接驱动 codeBlockService,调用方负责实际写回。
|
|
230
143
|
*/
|
|
231
144
|
pushCodeBlock(codeBlockId, payload) {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
newContent: payload.newContent ? cloneDeep(payload.newContent) : null,
|
|
237
|
-
changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
|
|
145
|
+
const step = createStackStep(codeBlockId, {
|
|
146
|
+
oldValue: payload.oldContent,
|
|
147
|
+
newValue: payload.newContent,
|
|
148
|
+
changeRecords: payload.changeRecords,
|
|
238
149
|
historyDescription: payload.historyDescription,
|
|
239
|
-
source: payload.source
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
this.
|
|
150
|
+
source: payload.source
|
|
151
|
+
});
|
|
152
|
+
if (!step) return null;
|
|
153
|
+
getOrCreateStack(this.state.codeBlockState, codeBlockId).pushElement(step);
|
|
243
154
|
this.emit("code-block-history-change", codeBlockId, step);
|
|
244
155
|
return step;
|
|
245
156
|
}
|
|
@@ -248,17 +159,15 @@ var history_default = new class History extends BaseService {
|
|
|
248
159
|
* 行为同 pushCodeBlock(新增 oldSchema=null;删除 newSchema=null)。
|
|
249
160
|
*/
|
|
250
161
|
pushDataSource(dataSourceId, payload) {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
newSchema: payload.newSchema ? cloneDeep(payload.newSchema) : null,
|
|
256
|
-
changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
|
|
162
|
+
const step = createStackStep(dataSourceId, {
|
|
163
|
+
oldValue: payload.oldSchema,
|
|
164
|
+
newValue: payload.newSchema,
|
|
165
|
+
changeRecords: payload.changeRecords,
|
|
257
166
|
historyDescription: payload.historyDescription,
|
|
258
|
-
source: payload.source
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
this.
|
|
167
|
+
source: payload.source
|
|
168
|
+
});
|
|
169
|
+
if (!step) return null;
|
|
170
|
+
getOrCreateStack(this.state.dataSourceState, dataSourceId).pushElement(step);
|
|
262
171
|
this.emit("data-source-history-change", dataSourceId, step);
|
|
263
172
|
return step;
|
|
264
173
|
}
|
|
@@ -313,6 +222,7 @@ var history_default = new class History extends BaseService {
|
|
|
313
222
|
undo() {
|
|
314
223
|
const undoRedo = this.getUndoRedo();
|
|
315
224
|
if (!undoRedo) return null;
|
|
225
|
+
if (undoRedo.getCursor() <= undoFloor(undoRedo)) return null;
|
|
316
226
|
const state = undoRedo.undo();
|
|
317
227
|
this.emit("change", state);
|
|
318
228
|
return state;
|
|
@@ -330,6 +240,126 @@ var history_default = new class History extends BaseService {
|
|
|
330
240
|
this.removeAllPlugins();
|
|
331
241
|
}
|
|
332
242
|
/**
|
|
243
|
+
* 清空指定页面(缺省当前活动页)的历史记录栈。
|
|
244
|
+
* 仅删除撤销/重做记录,不会改动当前 DSL;清空后该页将无法再撤销/重做之前的操作。
|
|
245
|
+
*/
|
|
246
|
+
clearPage(pageId) {
|
|
247
|
+
const targetPageId = pageId ?? this.state.pageId;
|
|
248
|
+
if (!targetPageId) return;
|
|
249
|
+
const marker = this.getPageMarker(targetPageId);
|
|
250
|
+
this.state.pageSteps[targetPageId] = new UndoRedo();
|
|
251
|
+
if (marker) this.setPageMarker(targetPageId, {
|
|
252
|
+
name: marker.data?.name,
|
|
253
|
+
description: marker.historyDescription,
|
|
254
|
+
source: marker.source
|
|
255
|
+
});
|
|
256
|
+
if (`${targetPageId}` === `${this.state.pageId}`) {
|
|
257
|
+
this.setCanUndoRedo();
|
|
258
|
+
this.emit("clear-page", null);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* 清空数据源历史记录栈:传入 `dataSourceId` 仅清空该数据源,缺省清空全部数据源。
|
|
263
|
+
* 仅删除撤销/重做记录,不会改动数据源本身。
|
|
264
|
+
*/
|
|
265
|
+
clearDataSource(dataSourceId) {
|
|
266
|
+
if (dataSourceId !== void 0) delete this.state.dataSourceState[dataSourceId];
|
|
267
|
+
else this.state.dataSourceState = {};
|
|
268
|
+
}
|
|
269
|
+
/**
|
|
270
|
+
* 清空代码块历史记录栈:传入 `codeBlockId` 仅清空该代码块,缺省清空全部代码块。
|
|
271
|
+
* 仅删除撤销/重做记录,不会改动代码块本身。
|
|
272
|
+
*/
|
|
273
|
+
clearCodeBlock(codeBlockId) {
|
|
274
|
+
if (codeBlockId !== void 0) delete this.state.codeBlockState[codeBlockId];
|
|
275
|
+
else this.state.codeBlockState = {};
|
|
276
|
+
}
|
|
277
|
+
/**
|
|
278
|
+
* 标记「整份 DSL 已保存」:把页面 / 代码块 / 数据源所有栈当前游标所在的记录都标为 `saved`。
|
|
279
|
+
* 适用于「整体落库」场景;若只保存了其中一类,请改用更细粒度的
|
|
280
|
+
* {@link markPageSaved} / {@link markCodeBlockSaved} / {@link markDataSourceSaved}。
|
|
281
|
+
*/
|
|
282
|
+
markSaved() {
|
|
283
|
+
Object.values(this.state.pageSteps).forEach(markStackSaved);
|
|
284
|
+
Object.values(this.state.codeBlockState).forEach(markStackSaved);
|
|
285
|
+
Object.values(this.state.dataSourceState).forEach(markStackSaved);
|
|
286
|
+
this.emit("mark-saved", { kind: "all" });
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* 标记指定页面(缺省为当前活动页)的历史栈当前记录为已保存。
|
|
290
|
+
* 仅影响该页面自己的栈,不波及代码块 / 数据源 / 其它页面。
|
|
291
|
+
*/
|
|
292
|
+
markPageSaved(pageId) {
|
|
293
|
+
const targetPageId = pageId ?? this.state.pageId;
|
|
294
|
+
if (!targetPageId) return;
|
|
295
|
+
markStackSaved(this.state.pageSteps[targetPageId]);
|
|
296
|
+
this.emit("mark-saved", {
|
|
297
|
+
kind: "page",
|
|
298
|
+
id: targetPageId
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
/** 标记指定代码块的历史栈当前记录为已保存,仅影响该代码块自己的栈。 */
|
|
302
|
+
markCodeBlockSaved(codeBlockId) {
|
|
303
|
+
if (!codeBlockId) return;
|
|
304
|
+
markStackSaved(this.state.codeBlockState[codeBlockId]);
|
|
305
|
+
this.emit("mark-saved", {
|
|
306
|
+
kind: "code-block",
|
|
307
|
+
id: codeBlockId
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
/** 标记指定数据源的历史栈当前记录为已保存,仅影响该数据源自己的栈。 */
|
|
311
|
+
markDataSourceSaved(dataSourceId) {
|
|
312
|
+
if (!dataSourceId) return;
|
|
313
|
+
markStackSaved(this.state.dataSourceState[dataSourceId]);
|
|
314
|
+
this.emit("mark-saved", {
|
|
315
|
+
kind: "data-source",
|
|
316
|
+
id: dataSourceId
|
|
317
|
+
});
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* 把当前内存中的全部历史栈(页面 / 代码块 / 数据源)序列化后写入本地 IndexedDB。
|
|
321
|
+
*
|
|
322
|
+
* - 每个 UndoRedo 栈连同其游标、容量一并保存,恢复后可继续 undo/redo;
|
|
323
|
+
* - `key` 用于区分不同活动页 / 项目(同一 store 下可保存多份快照),缺省为 `default`;
|
|
324
|
+
* - 返回写入成功的快照对象,便于调用方记录 savedAt 等信息;
|
|
325
|
+
* - 不支持 IndexedDB 的环境(如 SSR)会 reject。
|
|
326
|
+
*/
|
|
327
|
+
async saveToIndexedDB(options = {}) {
|
|
328
|
+
const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
|
|
329
|
+
const snapshot = {
|
|
330
|
+
version: PERSIST_VERSION,
|
|
331
|
+
pageId: this.state.pageId,
|
|
332
|
+
pageSteps: serializeStacks(this.state.pageSteps),
|
|
333
|
+
codeBlockState: serializeStacks(this.state.codeBlockState),
|
|
334
|
+
dataSourceState: serializeStacks(this.state.dataSourceState),
|
|
335
|
+
savedAt: Date.now()
|
|
336
|
+
};
|
|
337
|
+
await idbSet(this.resolveDbName(dbName, appId), storeName, key, snapshot);
|
|
338
|
+
this.emit("save-to-indexed-db", snapshot);
|
|
339
|
+
return snapshot;
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
342
|
+
* 从本地 IndexedDB 读取此前保存的历史快照并重建全部撤销/重做栈。
|
|
343
|
+
*
|
|
344
|
+
* - 读取到的每个栈都会经 {@link UndoRedo.fromSerialized} 还原(含游标),随后可直接 undo/redo;
|
|
345
|
+
* - 会整体覆盖当前内存中的历史状态,并把活动页恢复为快照中的 pageId;
|
|
346
|
+
* - 找不到对应记录时返回 null,且不改动当前状态;
|
|
347
|
+
* - 不支持 IndexedDB 的环境(如 SSR)会 reject。
|
|
348
|
+
*/
|
|
349
|
+
async restoreFromIndexedDB(options = {}) {
|
|
350
|
+
const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
|
|
351
|
+
const snapshot = await idbGet(this.resolveDbName(dbName, appId), storeName, key);
|
|
352
|
+
if (!snapshot) return null;
|
|
353
|
+
const parseDSL = getEditorConfig("parseDSL");
|
|
354
|
+
this.state.pageSteps = deserializeStacks(snapshot.pageSteps, parseDSL);
|
|
355
|
+
this.state.codeBlockState = deserializeStacks(snapshot.codeBlockState, parseDSL);
|
|
356
|
+
this.state.dataSourceState = deserializeStacks(snapshot.dataSourceState, parseDSL);
|
|
357
|
+
this.state.pageId = snapshot.pageId;
|
|
358
|
+
this.setCanUndoRedo();
|
|
359
|
+
this.emit("restore-from-indexed-db", snapshot);
|
|
360
|
+
return snapshot;
|
|
361
|
+
}
|
|
362
|
+
/**
|
|
333
363
|
* 取出当前活动页的历史步骤平铺列表(包含已应用 + 已撤销)。
|
|
334
364
|
* 列表按时间正序,最早一步在最前面。
|
|
335
365
|
* 通常 UI 应使用 `getPageHistoryGroups` 取已合并分组的版本;本方法仅为兼容/调试保留。
|
|
@@ -360,15 +390,11 @@ var history_default = new class History extends BaseService {
|
|
|
360
390
|
if (!undoRedo) return [];
|
|
361
391
|
const list = undoRedo.getElementList();
|
|
362
392
|
if (!list.length) return [];
|
|
363
|
-
|
|
364
|
-
return History.mergePageSteps(targetPageId, list, cursor);
|
|
393
|
+
return mergePageSteps(targetPageId, list, undoRedo.getCursor()).filter((group) => group.opType !== "initial");
|
|
365
394
|
}
|
|
366
395
|
/**
|
|
367
|
-
* 取出全部代码块的历史栈,按 codeBlockId
|
|
368
|
-
*
|
|
369
|
-
* - 这正是"代码块/数据源各自按 id 分栈"的天然表现,再叠加"连续修改同目标的相邻步骤合并展示"。
|
|
370
|
-
* - 合并后 group 暴露子步骤数组,UI 可展开查看每一步的 changeRecords。
|
|
371
|
-
* - applied 字段:组内最后一步是否处于已应用段。
|
|
396
|
+
* 取出全部代码块的历史栈,按 codeBlockId 分桶展示。
|
|
397
|
+
* 同一栈内每条操作记录独立成组,不做相邻 update 合并。
|
|
372
398
|
*/
|
|
373
399
|
getCodeBlockHistoryGroups() {
|
|
374
400
|
const groups = [];
|
|
@@ -377,7 +403,7 @@ var history_default = new class History extends BaseService {
|
|
|
377
403
|
const list = undoRedo.getElementList();
|
|
378
404
|
if (!list.length) return;
|
|
379
405
|
const cursor = undoRedo.getCursor();
|
|
380
|
-
groups.push(...
|
|
406
|
+
groups.push(...mergeStackSteps("code-block", id, list, cursor));
|
|
381
407
|
});
|
|
382
408
|
return groups;
|
|
383
409
|
}
|
|
@@ -427,7 +453,45 @@ var history_default = new class History extends BaseService {
|
|
|
427
453
|
}));
|
|
428
454
|
}
|
|
429
455
|
/**
|
|
430
|
-
*
|
|
456
|
+
* 按历史记录 uuid 在指定页面(默认当前活动页)的栈中查找其索引。
|
|
457
|
+
* 找不到时返回 -1。供「按 uuid 回滚」等需要把 uuid 映射回 index 的场景使用。
|
|
458
|
+
*/
|
|
459
|
+
getPageStepIndexByUuid(uuid, pageId) {
|
|
460
|
+
if (!uuid) return -1;
|
|
461
|
+
return this.getPageStepList(pageId).findIndex((entry) => entry.step.uuid === uuid);
|
|
462
|
+
}
|
|
463
|
+
/**
|
|
464
|
+
* 按历史记录 uuid 在全部代码块栈中查找其所属 codeBlockId 与索引。
|
|
465
|
+
* 找不到时返回 null。
|
|
466
|
+
*/
|
|
467
|
+
findCodeBlockStepLocationByUuid(uuid) {
|
|
468
|
+
if (!uuid) return null;
|
|
469
|
+
for (const id of Object.keys(this.state.codeBlockState)) {
|
|
470
|
+
const index = this.getCodeBlockStepList(id).findIndex((entry) => entry.step.uuid === uuid);
|
|
471
|
+
if (index >= 0) return {
|
|
472
|
+
id,
|
|
473
|
+
index
|
|
474
|
+
};
|
|
475
|
+
}
|
|
476
|
+
return null;
|
|
477
|
+
}
|
|
478
|
+
/**
|
|
479
|
+
* 按历史记录 uuid 在全部数据源栈中查找其所属 dataSourceId 与索引。
|
|
480
|
+
* 找不到时返回 null。
|
|
481
|
+
*/
|
|
482
|
+
findDataSourceStepLocationByUuid(uuid) {
|
|
483
|
+
if (!uuid) return null;
|
|
484
|
+
for (const id of Object.keys(this.state.dataSourceState)) {
|
|
485
|
+
const index = this.getDataSourceStepList(id).findIndex((entry) => entry.step.uuid === uuid);
|
|
486
|
+
if (index >= 0) return {
|
|
487
|
+
id,
|
|
488
|
+
index
|
|
489
|
+
};
|
|
490
|
+
}
|
|
491
|
+
return null;
|
|
492
|
+
}
|
|
493
|
+
/**
|
|
494
|
+
* 取出全部数据源的历史栈,按 dataSourceId 分桶展示。同上,每条操作独立成组。
|
|
431
495
|
*/
|
|
432
496
|
getDataSourceHistoryGroups() {
|
|
433
497
|
const groups = [];
|
|
@@ -436,7 +500,7 @@ var history_default = new class History extends BaseService {
|
|
|
436
500
|
const list = undoRedo.getElementList();
|
|
437
501
|
if (!list.length) return;
|
|
438
502
|
const cursor = undoRedo.getCursor();
|
|
439
|
-
groups.push(...
|
|
503
|
+
groups.push(...mergeStackSteps("data-source", id, list, cursor));
|
|
440
504
|
});
|
|
441
505
|
return groups;
|
|
442
506
|
}
|
|
@@ -452,25 +516,20 @@ var history_default = new class History extends BaseService {
|
|
|
452
516
|
if (!this.state.pageSteps[targetPageId]) this.state.pageSteps[targetPageId] = new UndoRedo();
|
|
453
517
|
return this.state.pageSteps[targetPageId];
|
|
454
518
|
}
|
|
455
|
-
setCanUndoRedo() {
|
|
456
|
-
const undoRedo = this.getUndoRedo();
|
|
457
|
-
this.state.canRedo = undoRedo?.canRedo() || false;
|
|
458
|
-
this.state.canUndo = undoRedo?.canUndo() || false;
|
|
459
|
-
}
|
|
460
519
|
/**
|
|
461
|
-
*
|
|
520
|
+
* 把基础 dbName 与当前 DSL(root app)的 id 拼成最终库名,实现不同应用历史隔离。
|
|
521
|
+
* 取不到 app id(如尚未加载 DSL)时退回基础 dbName。
|
|
462
522
|
*/
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
return
|
|
523
|
+
resolveDbName(dbName, appId) {
|
|
524
|
+
const resolvedAppId = appId ?? editor_default.get("root")?.id;
|
|
525
|
+
return resolvedAppId ? `${dbName}-${resolvedAppId}` : dbName;
|
|
466
526
|
}
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
if (!this.state.dataSourceState[dataSourceId]) this.state.dataSourceState[dataSourceId] = new UndoRedo();
|
|
472
|
-
return this.state.dataSourceState[dataSourceId];
|
|
527
|
+
setCanUndoRedo() {
|
|
528
|
+
const undoRedo = this.getUndoRedo();
|
|
529
|
+
this.state.canRedo = undoRedo?.canRedo() || false;
|
|
530
|
+
this.state.canUndo = undoRedo ? undoRedo.getCursor() > undoFloor(undoRedo) : false;
|
|
473
531
|
}
|
|
474
|
-
}
|
|
532
|
+
};
|
|
533
|
+
var history_default = new History();
|
|
475
534
|
//#endregion
|
|
476
535
|
export { history_default as default };
|
package/dist/es/services/ui.js
CHANGED
|
@@ -31,6 +31,7 @@ var state = shallowReactive({
|
|
|
31
31
|
showPageListButton: true,
|
|
32
32
|
hideSlideBar: false,
|
|
33
33
|
sideBarItems: [],
|
|
34
|
+
sideBarActiveTabName: "",
|
|
34
35
|
navMenuRect: {
|
|
35
36
|
left: 0,
|
|
36
37
|
top: 0,
|
|
@@ -63,7 +64,9 @@ var Ui = class extends BaseService {
|
|
|
63
64
|
}
|
|
64
65
|
if (name === "showGuides") mask?.showGuides(value);
|
|
65
66
|
if (name === "showRule") mask?.showRule(value);
|
|
67
|
+
const preValue = state[name];
|
|
66
68
|
state[name] = value;
|
|
69
|
+
if (preValue !== value) this.emit("state-change", name, value, preValue);
|
|
67
70
|
}
|
|
68
71
|
get(name) {
|
|
69
72
|
return state[name];
|