@archie/devtools 0.0.11 → 0.0.12-beta
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/client/client.js +38 -11
- package/dist/client/client.mjs +38 -11
- package/package.json +1 -1
package/dist/client/client.js
CHANGED
|
@@ -4109,7 +4109,8 @@ function summarizeEditorChangeEvent(event) {
|
|
|
4109
4109
|
if (event.kind === "move") {
|
|
4110
4110
|
const selectedHint = event.selectedNodeKey && event.selectedNodeKey !== event.nodeKey ? ` (selected ${event.selectedNodeKey})` : "";
|
|
4111
4111
|
const anchorHint = event.anchorNodeKey && event.anchorNodeKey !== event.nodeKey ? ` (anchor ${event.anchorNodeKey})` : "";
|
|
4112
|
-
|
|
4112
|
+
const commandHint = event.commandType ? ` ${event.commandType}` : "";
|
|
4113
|
+
return `move${commandHint} ${event.nodeKey}: parent ${event.payload.before.parentNodeId}[${event.payload.before.index}] \u2192 ${event.payload.after.parentNodeId}[${event.payload.after.index}]${event.payload.after.commitNodeId ? ` (commit ${event.payload.after.commitNodeId}` : ""}${event.payload.after.beforeNodeId ? ` before ${event.payload.after.beforeNodeId}` : ""}${event.payload.after.afterNodeId ? ` after ${event.payload.after.afterNodeId}` : ""}${event.payload.after.commitNodeId ? ")" : ""}${selectedHint}${anchorHint}`;
|
|
4113
4114
|
}
|
|
4114
4115
|
if (event.payload.after.mode === "grid-span") {
|
|
4115
4116
|
return `resize(grid-span) ${event.nodeKey}: col ${event.payload.before.colSpan ?? 1}\u2192${event.payload.after.colSpan ?? 1}, row ${event.payload.before.rowSpan ?? 1}\u2192${event.payload.after.rowSpan ?? 1}`;
|
|
@@ -4168,6 +4169,8 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4168
4169
|
}),
|
|
4169
4170
|
// Change tracking actions
|
|
4170
4171
|
recordMoveChange: ({
|
|
4172
|
+
operationId,
|
|
4173
|
+
commandType,
|
|
4171
4174
|
nodeKey,
|
|
4172
4175
|
nodeId,
|
|
4173
4176
|
inspectorRef,
|
|
@@ -4176,6 +4179,9 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4176
4179
|
selectedInspectorRef,
|
|
4177
4180
|
anchorNodeKey,
|
|
4178
4181
|
anchorNodeId,
|
|
4182
|
+
container,
|
|
4183
|
+
beforeSibling,
|
|
4184
|
+
afterSibling,
|
|
4179
4185
|
componentName,
|
|
4180
4186
|
before,
|
|
4181
4187
|
after
|
|
@@ -4183,6 +4189,8 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4183
4189
|
const now = Date.now();
|
|
4184
4190
|
const event = {
|
|
4185
4191
|
kind: "move",
|
|
4192
|
+
operationId: operationId ?? `${now}:${nodeId}`,
|
|
4193
|
+
commandType: commandType ?? "reorder",
|
|
4186
4194
|
nodeKey,
|
|
4187
4195
|
nodeId,
|
|
4188
4196
|
inspectorRef,
|
|
@@ -4191,6 +4199,9 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4191
4199
|
selectedInspectorRef,
|
|
4192
4200
|
anchorNodeKey,
|
|
4193
4201
|
anchorNodeId,
|
|
4202
|
+
container: container ?? null,
|
|
4203
|
+
beforeSibling: beforeSibling ?? null,
|
|
4204
|
+
afterSibling: afterSibling ?? null,
|
|
4194
4205
|
payload: { before, after },
|
|
4195
4206
|
at: now
|
|
4196
4207
|
};
|
|
@@ -4213,10 +4224,11 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4213
4224
|
};
|
|
4214
4225
|
});
|
|
4215
4226
|
},
|
|
4216
|
-
recordResizeChange: ({ nodeKey, nodeId, inspectorRef, componentName, before, after }) => {
|
|
4227
|
+
recordResizeChange: ({ operationId, nodeKey, nodeId, inspectorRef, componentName, before, after }) => {
|
|
4217
4228
|
const now = Date.now();
|
|
4218
4229
|
const event = {
|
|
4219
4230
|
kind: "resize",
|
|
4231
|
+
operationId: operationId ?? `${now}:${nodeId}`,
|
|
4220
4232
|
nodeKey,
|
|
4221
4233
|
nodeId,
|
|
4222
4234
|
inspectorRef,
|
|
@@ -7553,7 +7565,16 @@ function useDragLifecycle({
|
|
|
7553
7565
|
const inspRef = getInspectorRefFromElement(anchorEl);
|
|
7554
7566
|
const selectedNodeKey = getNodeKeyFromElement(selectedEl);
|
|
7555
7567
|
const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
|
|
7568
|
+
const containerIdentity = buildRuntimeIdentityLocal(
|
|
7569
|
+
command.to.parentNodeId ?? command.to.laneContainerId,
|
|
7570
|
+
resolveNodeElement
|
|
7571
|
+
);
|
|
7572
|
+
const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement);
|
|
7573
|
+
const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement);
|
|
7574
|
+
const operationId = `${command.at}:${anchorNodeId}`;
|
|
7556
7575
|
recordMoveChange({
|
|
7576
|
+
operationId,
|
|
7577
|
+
commandType: command.type,
|
|
7557
7578
|
nodeKey,
|
|
7558
7579
|
nodeId: anchorNodeId,
|
|
7559
7580
|
inspectorRef: inspRef,
|
|
@@ -7562,19 +7583,16 @@ function useDragLifecycle({
|
|
|
7562
7583
|
selectedInspectorRef,
|
|
7563
7584
|
anchorNodeKey: nodeKey,
|
|
7564
7585
|
anchorNodeId,
|
|
7586
|
+
container: containerIdentity,
|
|
7587
|
+
beforeSibling: beforeSiblingIdentity,
|
|
7588
|
+
afterSibling: afterSiblingIdentity,
|
|
7565
7589
|
componentName: getEditorMeta(anchorEl)?.componentName,
|
|
7566
7590
|
before: command.from,
|
|
7567
7591
|
after: command.to
|
|
7568
7592
|
});
|
|
7569
|
-
const containerIdentity = buildRuntimeIdentityLocal(
|
|
7570
|
-
command.to.laneContainerId ?? command.to.parentNodeId,
|
|
7571
|
-
resolveNodeElement
|
|
7572
|
-
);
|
|
7573
|
-
const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement);
|
|
7574
|
-
const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement);
|
|
7575
7593
|
dispatchRuntimeEvent({
|
|
7576
7594
|
type: "element-moved",
|
|
7577
|
-
operationId
|
|
7595
|
+
operationId,
|
|
7578
7596
|
commandType: command.type,
|
|
7579
7597
|
selected: {
|
|
7580
7598
|
nodeId: selectedNodeId,
|
|
@@ -7739,8 +7757,10 @@ function useResizeSession({
|
|
|
7739
7757
|
after: { width: afterW, height: afterH, colSpan: afterColSpan, rowSpan: afterRowSpan, styles: afterStyles },
|
|
7740
7758
|
at: Date.now()
|
|
7741
7759
|
};
|
|
7760
|
+
const operationId = `${resizeCmd.at}:${selectedNodeId}`;
|
|
7742
7761
|
refs.historyRef.current.execute(resizeCmd, applyCommand);
|
|
7743
7762
|
recordResizeChange({
|
|
7763
|
+
operationId,
|
|
7744
7764
|
nodeKey: selectedNodeKey,
|
|
7745
7765
|
nodeId: selectedNodeId,
|
|
7746
7766
|
inspectorRef,
|
|
@@ -7750,7 +7770,7 @@ function useResizeSession({
|
|
|
7750
7770
|
});
|
|
7751
7771
|
dispatchRuntimeEvent({
|
|
7752
7772
|
type: "element-resized",
|
|
7753
|
-
operationId
|
|
7773
|
+
operationId,
|
|
7754
7774
|
selected: {
|
|
7755
7775
|
nodeId: selectedNodeId,
|
|
7756
7776
|
nodeKey: selectedNodeKey,
|
|
@@ -8100,11 +8120,18 @@ function DesignModeOverlay() {
|
|
|
8100
8120
|
mode: enabled ? "arrange" : "off",
|
|
8101
8121
|
canUndo: orderedChanges.length > 0,
|
|
8102
8122
|
changes: orderedChanges.map((event, index) => ({
|
|
8103
|
-
id: `${event.kind}:${event.
|
|
8123
|
+
id: `${event.kind}:${event.operationId}:${index}`,
|
|
8104
8124
|
kind: event.kind,
|
|
8125
|
+
operationId: event.operationId,
|
|
8126
|
+
commandType: event.kind === "move" ? event.commandType : void 0,
|
|
8105
8127
|
nodeKey: event.nodeKey,
|
|
8106
8128
|
nodeId: event.nodeId,
|
|
8107
8129
|
inspectorRef: event.inspectorRef,
|
|
8130
|
+
selectedNodeKey: event.kind === "move" ? event.selectedNodeKey : void 0,
|
|
8131
|
+
selectedNodeId: event.kind === "move" ? event.selectedNodeId : void 0,
|
|
8132
|
+
selectedInspectorRef: event.kind === "move" ? event.selectedInspectorRef : void 0,
|
|
8133
|
+
anchorNodeKey: event.kind === "move" ? event.anchorNodeKey : void 0,
|
|
8134
|
+
anchorNodeId: event.kind === "move" ? event.anchorNodeId : void 0,
|
|
8108
8135
|
summary: summarizeEditorChangeEvent(event),
|
|
8109
8136
|
at: event.at
|
|
8110
8137
|
})),
|
package/dist/client/client.mjs
CHANGED
|
@@ -4075,7 +4075,8 @@ function summarizeEditorChangeEvent(event) {
|
|
|
4075
4075
|
if (event.kind === "move") {
|
|
4076
4076
|
const selectedHint = event.selectedNodeKey && event.selectedNodeKey !== event.nodeKey ? ` (selected ${event.selectedNodeKey})` : "";
|
|
4077
4077
|
const anchorHint = event.anchorNodeKey && event.anchorNodeKey !== event.nodeKey ? ` (anchor ${event.anchorNodeKey})` : "";
|
|
4078
|
-
|
|
4078
|
+
const commandHint = event.commandType ? ` ${event.commandType}` : "";
|
|
4079
|
+
return `move${commandHint} ${event.nodeKey}: parent ${event.payload.before.parentNodeId}[${event.payload.before.index}] \u2192 ${event.payload.after.parentNodeId}[${event.payload.after.index}]${event.payload.after.commitNodeId ? ` (commit ${event.payload.after.commitNodeId}` : ""}${event.payload.after.beforeNodeId ? ` before ${event.payload.after.beforeNodeId}` : ""}${event.payload.after.afterNodeId ? ` after ${event.payload.after.afterNodeId}` : ""}${event.payload.after.commitNodeId ? ")" : ""}${selectedHint}${anchorHint}`;
|
|
4079
4080
|
}
|
|
4080
4081
|
if (event.payload.after.mode === "grid-span") {
|
|
4081
4082
|
return `resize(grid-span) ${event.nodeKey}: col ${event.payload.before.colSpan ?? 1}\u2192${event.payload.after.colSpan ?? 1}, row ${event.payload.before.rowSpan ?? 1}\u2192${event.payload.after.rowSpan ?? 1}`;
|
|
@@ -4134,6 +4135,8 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4134
4135
|
}),
|
|
4135
4136
|
// Change tracking actions
|
|
4136
4137
|
recordMoveChange: ({
|
|
4138
|
+
operationId,
|
|
4139
|
+
commandType,
|
|
4137
4140
|
nodeKey,
|
|
4138
4141
|
nodeId,
|
|
4139
4142
|
inspectorRef,
|
|
@@ -4142,6 +4145,9 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4142
4145
|
selectedInspectorRef,
|
|
4143
4146
|
anchorNodeKey,
|
|
4144
4147
|
anchorNodeId,
|
|
4148
|
+
container,
|
|
4149
|
+
beforeSibling,
|
|
4150
|
+
afterSibling,
|
|
4145
4151
|
componentName,
|
|
4146
4152
|
before,
|
|
4147
4153
|
after
|
|
@@ -4149,6 +4155,8 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4149
4155
|
const now = Date.now();
|
|
4150
4156
|
const event = {
|
|
4151
4157
|
kind: "move",
|
|
4158
|
+
operationId: operationId ?? `${now}:${nodeId}`,
|
|
4159
|
+
commandType: commandType ?? "reorder",
|
|
4152
4160
|
nodeKey,
|
|
4153
4161
|
nodeId,
|
|
4154
4162
|
inspectorRef,
|
|
@@ -4157,6 +4165,9 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4157
4165
|
selectedInspectorRef,
|
|
4158
4166
|
anchorNodeKey,
|
|
4159
4167
|
anchorNodeId,
|
|
4168
|
+
container: container ?? null,
|
|
4169
|
+
beforeSibling: beforeSibling ?? null,
|
|
4170
|
+
afterSibling: afterSibling ?? null,
|
|
4160
4171
|
payload: { before, after },
|
|
4161
4172
|
at: now
|
|
4162
4173
|
};
|
|
@@ -4179,10 +4190,11 @@ var useDesignModeStore = create((set, get) => ({
|
|
|
4179
4190
|
};
|
|
4180
4191
|
});
|
|
4181
4192
|
},
|
|
4182
|
-
recordResizeChange: ({ nodeKey, nodeId, inspectorRef, componentName, before, after }) => {
|
|
4193
|
+
recordResizeChange: ({ operationId, nodeKey, nodeId, inspectorRef, componentName, before, after }) => {
|
|
4183
4194
|
const now = Date.now();
|
|
4184
4195
|
const event = {
|
|
4185
4196
|
kind: "resize",
|
|
4197
|
+
operationId: operationId ?? `${now}:${nodeId}`,
|
|
4186
4198
|
nodeKey,
|
|
4187
4199
|
nodeId,
|
|
4188
4200
|
inspectorRef,
|
|
@@ -7519,7 +7531,16 @@ function useDragLifecycle({
|
|
|
7519
7531
|
const inspRef = getInspectorRefFromElement(anchorEl);
|
|
7520
7532
|
const selectedNodeKey = getNodeKeyFromElement(selectedEl);
|
|
7521
7533
|
const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
|
|
7534
|
+
const containerIdentity = buildRuntimeIdentityLocal(
|
|
7535
|
+
command.to.parentNodeId ?? command.to.laneContainerId,
|
|
7536
|
+
resolveNodeElement
|
|
7537
|
+
);
|
|
7538
|
+
const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement);
|
|
7539
|
+
const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement);
|
|
7540
|
+
const operationId = `${command.at}:${anchorNodeId}`;
|
|
7522
7541
|
recordMoveChange({
|
|
7542
|
+
operationId,
|
|
7543
|
+
commandType: command.type,
|
|
7523
7544
|
nodeKey,
|
|
7524
7545
|
nodeId: anchorNodeId,
|
|
7525
7546
|
inspectorRef: inspRef,
|
|
@@ -7528,19 +7549,16 @@ function useDragLifecycle({
|
|
|
7528
7549
|
selectedInspectorRef,
|
|
7529
7550
|
anchorNodeKey: nodeKey,
|
|
7530
7551
|
anchorNodeId,
|
|
7552
|
+
container: containerIdentity,
|
|
7553
|
+
beforeSibling: beforeSiblingIdentity,
|
|
7554
|
+
afterSibling: afterSiblingIdentity,
|
|
7531
7555
|
componentName: getEditorMeta(anchorEl)?.componentName,
|
|
7532
7556
|
before: command.from,
|
|
7533
7557
|
after: command.to
|
|
7534
7558
|
});
|
|
7535
|
-
const containerIdentity = buildRuntimeIdentityLocal(
|
|
7536
|
-
command.to.laneContainerId ?? command.to.parentNodeId,
|
|
7537
|
-
resolveNodeElement
|
|
7538
|
-
);
|
|
7539
|
-
const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement);
|
|
7540
|
-
const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement);
|
|
7541
7559
|
dispatchRuntimeEvent({
|
|
7542
7560
|
type: "element-moved",
|
|
7543
|
-
operationId
|
|
7561
|
+
operationId,
|
|
7544
7562
|
commandType: command.type,
|
|
7545
7563
|
selected: {
|
|
7546
7564
|
nodeId: selectedNodeId,
|
|
@@ -7705,8 +7723,10 @@ function useResizeSession({
|
|
|
7705
7723
|
after: { width: afterW, height: afterH, colSpan: afterColSpan, rowSpan: afterRowSpan, styles: afterStyles },
|
|
7706
7724
|
at: Date.now()
|
|
7707
7725
|
};
|
|
7726
|
+
const operationId = `${resizeCmd.at}:${selectedNodeId}`;
|
|
7708
7727
|
refs.historyRef.current.execute(resizeCmd, applyCommand);
|
|
7709
7728
|
recordResizeChange({
|
|
7729
|
+
operationId,
|
|
7710
7730
|
nodeKey: selectedNodeKey,
|
|
7711
7731
|
nodeId: selectedNodeId,
|
|
7712
7732
|
inspectorRef,
|
|
@@ -7716,7 +7736,7 @@ function useResizeSession({
|
|
|
7716
7736
|
});
|
|
7717
7737
|
dispatchRuntimeEvent({
|
|
7718
7738
|
type: "element-resized",
|
|
7719
|
-
operationId
|
|
7739
|
+
operationId,
|
|
7720
7740
|
selected: {
|
|
7721
7741
|
nodeId: selectedNodeId,
|
|
7722
7742
|
nodeKey: selectedNodeKey,
|
|
@@ -8066,11 +8086,18 @@ function DesignModeOverlay() {
|
|
|
8066
8086
|
mode: enabled ? "arrange" : "off",
|
|
8067
8087
|
canUndo: orderedChanges.length > 0,
|
|
8068
8088
|
changes: orderedChanges.map((event, index) => ({
|
|
8069
|
-
id: `${event.kind}:${event.
|
|
8089
|
+
id: `${event.kind}:${event.operationId}:${index}`,
|
|
8070
8090
|
kind: event.kind,
|
|
8091
|
+
operationId: event.operationId,
|
|
8092
|
+
commandType: event.kind === "move" ? event.commandType : void 0,
|
|
8071
8093
|
nodeKey: event.nodeKey,
|
|
8072
8094
|
nodeId: event.nodeId,
|
|
8073
8095
|
inspectorRef: event.inspectorRef,
|
|
8096
|
+
selectedNodeKey: event.kind === "move" ? event.selectedNodeKey : void 0,
|
|
8097
|
+
selectedNodeId: event.kind === "move" ? event.selectedNodeId : void 0,
|
|
8098
|
+
selectedInspectorRef: event.kind === "move" ? event.selectedInspectorRef : void 0,
|
|
8099
|
+
anchorNodeKey: event.kind === "move" ? event.anchorNodeKey : void 0,
|
|
8100
|
+
anchorNodeId: event.kind === "move" ? event.anchorNodeId : void 0,
|
|
8074
8101
|
summary: summarizeEditorChangeEvent(event),
|
|
8075
8102
|
at: event.at
|
|
8076
8103
|
})),
|