@coral-viz/viz 0.2.4 → 0.2.5
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/README.md +24 -7
- package/dist/compatibility/CompatibilityEdge.d.ts +7 -0
- package/dist/compatibility/CompatibilityEdge.d.ts.map +1 -1
- package/dist/compatibility/CompatibilityEdge.js +9 -2
- package/dist/compatibility/CompatibilityEdge.js.map +1 -1
- package/dist/components/SymbolNode.d.ts.map +1 -1
- package/dist/components/SymbolNode.js +15 -2
- package/dist/components/SymbolNode.js.map +1 -1
- package/dist/editor/converter.d.ts.map +1 -1
- package/dist/editor/converter.js +2 -3
- package/dist/editor/converter.js.map +1 -1
- package/dist/file/deserialize.js +2 -2
- package/dist/file/deserialize.js.map +1 -1
- package/dist/file/migrate.d.ts.map +1 -1
- package/dist/file/migrate.js +15 -3
- package/dist/file/migrate.js.map +1 -1
- package/dist/file/serialize.d.ts.map +1 -1
- package/dist/file/serialize.js +38 -6
- package/dist/file/serialize.js.map +1 -1
- package/dist/layout/elk.d.ts.map +1 -1
- package/dist/layout/elk.js +5 -31
- package/dist/layout/elk.js.map +1 -1
- package/dist/layout/positionStability.d.ts +2 -1
- package/dist/layout/positionStability.d.ts.map +1 -1
- package/dist/layout/positionStability.js +22 -6
- package/dist/layout/positionStability.js.map +1 -1
- package/dist/layout/useLayoutHistory.d.ts +8 -0
- package/dist/layout/useLayoutHistory.d.ts.map +1 -1
- package/dist/layout/useLayoutHistory.js +14 -3
- package/dist/layout/useLayoutHistory.js.map +1 -1
- package/dist/properties/NodePropertiesPanel.d.ts +5 -1
- package/dist/properties/NodePropertiesPanel.d.ts.map +1 -1
- package/dist/properties/NodePropertiesPanel.js +95 -28
- package/dist/properties/NodePropertiesPanel.js.map +1 -1
- package/dist/settings/useSettings.d.ts.map +1 -1
- package/dist/settings/useSettings.js +9 -2
- package/dist/settings/useSettings.js.map +1 -1
- package/dist/text-editor/TextEditor.d.ts +1 -0
- package/dist/text-editor/TextEditor.d.ts.map +1 -1
- package/dist/text-editor/TextEditor.js +7 -3
- package/dist/text-editor/TextEditor.js.map +1 -1
- package/dist/types.d.ts +2 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +8 -8
package/dist/layout/elk.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elk.d.ts","sourceRoot":"","sources":["../../src/layout/elk.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"elk.d.ts","sourceRoot":"","sources":["../../src/layout/elk.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EACV,SAAS,EAAE,SAAS,EAAE,OAAO,EAAa,aAAa,EACvD,QAAQ,EAAE,UAAU,EACrB,MAAM,aAAa,CAAC;AAGrB,QAAA,MAAM,GAAG,EAAsC,OAAO,OAAO,EAAE,GAAG,CAAC;AA6BnE,wBAAsB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CASlE;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6DD,wBAAsB,eAAe,CACnC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,iBAAiB,GAClE,OAAO,CAAC,SAAS,EAAE,CAAC,CAItB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,QAAQ,CAAC;IACrB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC1C;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,eAAe,EAAE,GAAG,SAAS,GACtC,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAe7B;AAqBD,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,iBAAiB,GAClE,OAAO,CAAC,gBAAgB,CAAC,CAO3B;AAED,wBAAgB,MAAM,IAAI,OAAO,GAAG,CAEnC"}
|
package/dist/layout/elk.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { computeElkLayout, getElkLayoutEngine, } from '@coral-viz/render/layout';
|
|
1
|
+
import { computeElkLayout, getElkLayoutEngine, resolveSpatialLayout, } from '@coral-viz/render/layout';
|
|
2
2
|
import { symbolRegistry } from '@coral-viz/render';
|
|
3
3
|
import { applyAdaptiveSizing } from './nodeSizing.js';
|
|
4
4
|
const elk = getElkLayoutEngine();
|
|
@@ -14,32 +14,6 @@ function graphOptions(options) {
|
|
|
14
14
|
spacing: options.spacing,
|
|
15
15
|
edgeRouting: options.edgeRouting,
|
|
16
16
|
hierarchyHandling: options.hierarchyHandling,
|
|
17
|
-
elkOptions: options.algorithmOptions,
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
function graphNode(node) {
|
|
21
|
-
const layoutOptions = node.children?.length && !node.layoutOptions?.padding
|
|
22
|
-
? { ...node.layoutOptions, padding: {
|
|
23
|
-
top: DEFAULT_GROUP_PADDING, right: DEFAULT_GROUP_PADDING,
|
|
24
|
-
bottom: DEFAULT_GROUP_PADDING, left: DEFAULT_GROUP_PADDING,
|
|
25
|
-
} }
|
|
26
|
-
: node.layoutOptions;
|
|
27
|
-
return {
|
|
28
|
-
id: node.id,
|
|
29
|
-
width: node.dimensions?.width || DEFAULT_NODE_WIDTH,
|
|
30
|
-
height: node.dimensions?.height || DEFAULT_NODE_HEIGHT,
|
|
31
|
-
...(node.position ? { position: node.position } : {}),
|
|
32
|
-
...(node.pinned !== undefined ? { pinned: node.pinned } : {}),
|
|
33
|
-
...(node.ports !== undefined ? { ports: node.ports } : {}),
|
|
34
|
-
...(layoutOptions ? { layoutOptions } : {}),
|
|
35
|
-
...(node.children ? { children: node.children.map(graphNode) } : {}),
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
function graphEdge(edge) {
|
|
39
|
-
return {
|
|
40
|
-
id: edge.id, source: edge.source, target: edge.target,
|
|
41
|
-
...(edge.sourcePort !== undefined ? { sourcePort: edge.sourcePort } : {}),
|
|
42
|
-
...(edge.targetPort !== undefined ? { targetPort: edge.targetPort } : {}),
|
|
43
17
|
};
|
|
44
18
|
}
|
|
45
19
|
function applyGraphPositions(nodes, result) {
|
|
@@ -55,12 +29,12 @@ function applyGraphPositions(nodes, result) {
|
|
|
55
29
|
});
|
|
56
30
|
}
|
|
57
31
|
export async function layoutGraph(graph) {
|
|
58
|
-
const result = await
|
|
59
|
-
|
|
32
|
+
const result = await resolveSpatialLayout({
|
|
33
|
+
revision: `viz:${graph.id}`,
|
|
34
|
+
graph,
|
|
35
|
+
operation: 'load',
|
|
60
36
|
defaults: { algorithm: 'layered', direction: 'DOWN' },
|
|
61
37
|
options: graphOptions(graph.layoutOptions),
|
|
62
|
-
nodes: graph.nodes.map(graphNode),
|
|
63
|
-
edges: graph.edges.map(graphEdge),
|
|
64
38
|
});
|
|
65
39
|
return { ...graph, nodes: applyGraphPositions(graph.nodes, result) };
|
|
66
40
|
}
|
package/dist/layout/elk.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elk.js","sourceRoot":"","sources":["../../src/layout/elk.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAChB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"elk.js","sourceRoot":"","sources":["../../src/layout/elk.ts"],"names":[],"mappings":"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"}
|
|
@@ -39,6 +39,7 @@ interface LayoutNodeInfo {
|
|
|
39
39
|
label: string;
|
|
40
40
|
width: number;
|
|
41
41
|
height: number;
|
|
42
|
+
parentId?: string;
|
|
42
43
|
}
|
|
43
44
|
/**
|
|
44
45
|
* Edge info for incremental layout
|
|
@@ -68,6 +69,6 @@ export declare function incrementalLayout(nodes: LayoutNodeInfo[], edges: Layout
|
|
|
68
69
|
direction?: 'DOWN' | 'UP' | 'LEFT' | 'RIGHT';
|
|
69
70
|
algorithm?: string;
|
|
70
71
|
spacing?: number;
|
|
71
|
-
}): Promise<Map<string, Position>>;
|
|
72
|
+
}, signal?: AbortSignal): Promise<Map<string, Position>>;
|
|
72
73
|
export {};
|
|
73
74
|
//# sourceMappingURL=positionStability.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"positionStability.d.ts","sourceRoot":"","sources":["../../src/layout/positionStability.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAgB,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExG;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"positionStability.d.ts","sourceRoot":"","sources":["../../src/layout/positionStability.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAgB,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExG;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,GAAG,SAAS,CAwCtF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,aAAa,EACvB,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,GACtC,kBAAkB,CA6BpB;AAED;;GAEG;AACH,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,iBAAiB,CACrC,KAAK,EAAE,cAAc,EAAE,EACvB,KAAK,EAAE,cAAc,EAAE,EACvB,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,EACD,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAsGhC"}
|
|
@@ -36,7 +36,8 @@ export function diffGraphs(oldGraph, newGraph) {
|
|
|
36
36
|
// Node doesn't exist in old graph - it's new
|
|
37
37
|
added.push(node.id);
|
|
38
38
|
}
|
|
39
|
-
else if (oldNode.type !== node.type || oldNode.label !== node.label
|
|
39
|
+
else if (oldNode.type !== node.type || oldNode.label !== node.label
|
|
40
|
+
|| oldNode.parentId !== node.parentId) {
|
|
40
41
|
// Node exists but has changed type or label
|
|
41
42
|
modified.push(node.id);
|
|
42
43
|
}
|
|
@@ -70,9 +71,12 @@ export function resolvePositions(oldGraph, newGraph, currentPositions) {
|
|
|
70
71
|
const positions = new Map();
|
|
71
72
|
const needsLayout = [];
|
|
72
73
|
// Process unchanged and modified nodes - keep their positions
|
|
74
|
+
const oldById = new Map(oldGraph.nodes.map((node) => [node.id, node]));
|
|
75
|
+
const nextById = new Map(newGraph.nodes.map((node) => [node.id, node]));
|
|
73
76
|
for (const id of [...diff.unchanged, ...diff.modified]) {
|
|
74
77
|
const pos = currentPositions.get(id);
|
|
75
|
-
|
|
78
|
+
const reparented = oldById.get(id)?.parentId !== nextById.get(id)?.parentId;
|
|
79
|
+
if (pos && !reparented) {
|
|
76
80
|
positions.set(id, pos);
|
|
77
81
|
}
|
|
78
82
|
else {
|
|
@@ -105,7 +109,7 @@ export function resolvePositions(oldGraph, newGraph, currentPositions) {
|
|
|
105
109
|
* @param options - Optional layout options (direction, algorithm, etc.)
|
|
106
110
|
* @returns Map of node IDs to computed positions
|
|
107
111
|
*/
|
|
108
|
-
export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayout, options) {
|
|
112
|
+
export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayout, options, signal) {
|
|
109
113
|
// Handle empty case
|
|
110
114
|
if (nodes.length === 0) {
|
|
111
115
|
return new Map();
|
|
@@ -125,7 +129,12 @@ export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayo
|
|
|
125
129
|
// Strategy: Run ELK on only the nodes that need layout, plus any nodes
|
|
126
130
|
// they connect to. Then merge results with pinned positions.
|
|
127
131
|
// For simplicity, we'll run ELK on all nodes but restore pinned positions after
|
|
128
|
-
const
|
|
132
|
+
const byParent = new Map();
|
|
133
|
+
for (const node of nodes) {
|
|
134
|
+
if (node.parentId)
|
|
135
|
+
byParent.set(node.parentId, [...(byParent.get(node.parentId) ?? []), node]);
|
|
136
|
+
}
|
|
137
|
+
const toLayoutNode = (node) => {
|
|
129
138
|
const layoutNode = {
|
|
130
139
|
id: node.id,
|
|
131
140
|
width: node.width,
|
|
@@ -136,8 +145,13 @@ export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayo
|
|
|
136
145
|
if (pinnedPos) {
|
|
137
146
|
Object.assign(layoutNode, { position: pinnedPos });
|
|
138
147
|
}
|
|
148
|
+
const children = byParent.get(node.id);
|
|
149
|
+
if (children?.length)
|
|
150
|
+
layoutNode.children = children.map(toLayoutNode);
|
|
139
151
|
return layoutNode;
|
|
140
|
-
}
|
|
152
|
+
};
|
|
153
|
+
const knownIds = new Set(nodes.map((node) => node.id));
|
|
154
|
+
const layoutNodes = nodes.filter((node) => !node.parentId || !knownIds.has(node.parentId)).map(toLayoutNode);
|
|
141
155
|
try {
|
|
142
156
|
const layoutedGraph = await computeElkLayout({
|
|
143
157
|
id: 'root',
|
|
@@ -152,7 +166,7 @@ export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayo
|
|
|
152
166
|
},
|
|
153
167
|
nodes: layoutNodes,
|
|
154
168
|
edges,
|
|
155
|
-
});
|
|
169
|
+
}, { signal });
|
|
156
170
|
// Collect positions from layout result, but restore pinned positions
|
|
157
171
|
const result = new Map();
|
|
158
172
|
for (const elkNode of layoutedGraph.nodes) {
|
|
@@ -169,6 +183,8 @@ export async function incrementalLayout(nodes, edges, pinnedPositions, needsLayo
|
|
|
169
183
|
return result;
|
|
170
184
|
}
|
|
171
185
|
catch (error) {
|
|
186
|
+
if (error.name === 'AbortError' || signal?.aborted)
|
|
187
|
+
throw error;
|
|
172
188
|
console.error('Incremental layout failed:', error);
|
|
173
189
|
// Fallback: return pinned positions and place new nodes nearby
|
|
174
190
|
const result = new Map();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"positionStability.js","sourceRoot":"","sources":["../../src/layout/positionStability.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"positionStability.js","sourceRoot":"","sources":["../../src/layout/positionStability.ts"],"names":[],"mappings":"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"}
|
|
@@ -16,11 +16,14 @@ export interface PositionSnapshot {
|
|
|
16
16
|
source: string;
|
|
17
17
|
/** Optional waypoint state (CORAL-REQ-015) */
|
|
18
18
|
waypoints?: Map<string, EdgeWaypoint[]>;
|
|
19
|
+
/** Monotonic editor transaction sequence used to merge history owners. */
|
|
20
|
+
sequence?: number;
|
|
19
21
|
}
|
|
20
22
|
/** Result returned from undo/redo operations */
|
|
21
23
|
export interface UndoRedoResult {
|
|
22
24
|
positions: Map<string, XYPosition>;
|
|
23
25
|
waypoints?: Map<string, EdgeWaypoint[]>;
|
|
26
|
+
sequence?: number;
|
|
24
27
|
}
|
|
25
28
|
/** Options for the useLayoutHistory hook */
|
|
26
29
|
export interface UseLayoutHistoryOptions {
|
|
@@ -31,6 +34,8 @@ export interface UseLayoutHistoryOptions {
|
|
|
31
34
|
export interface UseLayoutHistoryResult {
|
|
32
35
|
/** Save current node positions (and optional waypoints) to history */
|
|
33
36
|
saveSnapshot: (nodes: Node[], source?: string, waypoints?: Map<string, EdgeWaypoint[]>) => void;
|
|
37
|
+
/** Save a snapshot with the optional cross-owner transaction sequence. */
|
|
38
|
+
saveSnapshotWithSequence?: (nodes: Node[], source?: string, waypoints?: Map<string, EdgeWaypoint[]>, sequence?: number) => void;
|
|
34
39
|
/** Undo to previous position state, returns positions + waypoints or null if can't undo */
|
|
35
40
|
undo: () => UndoRedoResult | null;
|
|
36
41
|
/** Redo to next position state, returns positions + waypoints or null if can't redo */
|
|
@@ -43,8 +48,11 @@ export interface UseLayoutHistoryResult {
|
|
|
43
48
|
undoCount: number;
|
|
44
49
|
/** Number of available redo steps */
|
|
45
50
|
redoCount: number;
|
|
51
|
+
undoSequence?: number;
|
|
52
|
+
redoSequence?: number;
|
|
46
53
|
/** Clear all history */
|
|
47
54
|
clearHistory: () => void;
|
|
55
|
+
discardRedo?: () => void;
|
|
48
56
|
}
|
|
49
57
|
/**
|
|
50
58
|
* Hook for managing layout history with undo/redo capability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayoutHistory.d.ts","sourceRoot":"","sources":["../../src/layout/useLayoutHistory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"useLayoutHistory.d.ts","sourceRoot":"","sources":["../../src/layout/useLayoutHistory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,gDAAgD;AAChD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,+CAA+C;AAC/C,MAAM,WAAW,sBAAsB;IACrC,sEAAsE;IACtE,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;IAChG,0EAA0E;IAC1E,wBAAwB,CAAC,EAAE,CACzB,KAAK,EAAE,IAAI,EAAE,EACb,MAAM,CAAC,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;IACV,2FAA2F;IAC3F,IAAI,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAClC,uFAAuF;IACvF,IAAI,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAClC,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAsFxB"}
|
|
@@ -21,6 +21,7 @@ export function useLayoutHistory(options = {}) {
|
|
|
21
21
|
const copyResult = (snapshot) => ({
|
|
22
22
|
positions: new Map([...snapshot.positions].map(([id, position]) => [id, { ...position }])),
|
|
23
23
|
waypoints: copyWaypoints(snapshot.waypoints),
|
|
24
|
+
sequence: snapshot.sequence,
|
|
24
25
|
});
|
|
25
26
|
const sameGeometry = (a, b) => {
|
|
26
27
|
if (a.positions.size !== b.positions.size)
|
|
@@ -45,10 +46,10 @@ export function useLayoutHistory(options = {}) {
|
|
|
45
46
|
}
|
|
46
47
|
return true;
|
|
47
48
|
};
|
|
48
|
-
const saveSnapshot = useCallback((nodes, source = 'manual', waypoints) => {
|
|
49
|
+
const saveSnapshot = useCallback((nodes, source = 'manual', waypoints, sequence) => {
|
|
49
50
|
const snapshot = {
|
|
50
51
|
positions: new Map(nodes.map((node) => [node.id, { ...node.position }])),
|
|
51
|
-
timestamp: Date.now(), source, waypoints: copyWaypoints(waypoints),
|
|
52
|
+
timestamp: Date.now(), source, waypoints: copyWaypoints(waypoints), sequence,
|
|
52
53
|
};
|
|
53
54
|
const current = state.current;
|
|
54
55
|
const prior = current.history[current.index];
|
|
@@ -79,13 +80,23 @@ export function useLayoutHistory(options = {}) {
|
|
|
79
80
|
state.current = { history: [], index: -1 };
|
|
80
81
|
changed();
|
|
81
82
|
}, [changed]);
|
|
83
|
+
const discardRedo = useCallback(() => {
|
|
84
|
+
const current = state.current;
|
|
85
|
+
if (current.index >= current.history.length - 1)
|
|
86
|
+
return;
|
|
87
|
+
state.current = { history: current.history.slice(0, current.index + 1), index: current.index };
|
|
88
|
+
changed();
|
|
89
|
+
}, [changed]);
|
|
82
90
|
const { history, index } = state.current;
|
|
83
91
|
return {
|
|
84
|
-
saveSnapshot,
|
|
92
|
+
saveSnapshot, saveSnapshotWithSequence: saveSnapshot,
|
|
93
|
+
undo, redo, clearHistory, discardRedo,
|
|
85
94
|
canUndo: index > 0,
|
|
86
95
|
canRedo: index >= 0 && index < history.length - 1,
|
|
87
96
|
undoCount: Math.max(0, index),
|
|
88
97
|
redoCount: Math.max(0, history.length - 1 - index),
|
|
98
|
+
undoSequence: index > 0 ? history[index]?.sequence : undefined,
|
|
99
|
+
redoSequence: index >= 0 && index < history.length - 1 ? history[index + 1]?.sequence : undefined,
|
|
89
100
|
};
|
|
90
101
|
}
|
|
91
102
|
//# sourceMappingURL=useLayoutHistory.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayoutHistory.js","sourceRoot":"","sources":["../../src/layout/useLayoutHistory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useLayoutHistory.js","sourceRoot":"","sources":["../../src/layout/useLayoutHistory.ts"],"names":[],"mappings":"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"}
|
|
@@ -30,6 +30,10 @@ export interface NodePropertiesPanelProps {
|
|
|
30
30
|
onAddProperty?: (nodeId: string, key: string, value: PropertyValue) => void;
|
|
31
31
|
/** Callback to remove a custom property */
|
|
32
32
|
onRemoveProperty?: (nodeId: string, key: string) => void;
|
|
33
|
+
/** Timing-independent transaction boundaries for draft fields. */
|
|
34
|
+
onEditSessionStart?: (field: string) => void;
|
|
35
|
+
onEditSessionEnd?: (field: string) => void;
|
|
36
|
+
onEditSessionCancel?: (field: string) => void;
|
|
33
37
|
/** Whether the panel is disabled (read-only mode) */
|
|
34
38
|
disabled?: boolean;
|
|
35
39
|
/** Panel width */
|
|
@@ -43,5 +47,5 @@ export interface NodePropertiesPanelProps {
|
|
|
43
47
|
/** Allow removing custom properties */
|
|
44
48
|
allowRemoveProperties?: boolean;
|
|
45
49
|
}
|
|
46
|
-
export declare function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddProperty, onRemoveProperty, disabled, width, showNodeId, showNodeType, allowAddProperties, allowRemoveProperties, }: NodePropertiesPanelProps): React.ReactElement;
|
|
50
|
+
export declare function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddProperty, onRemoveProperty, onEditSessionStart, onEditSessionEnd, onEditSessionCancel, disabled, width, showNodeId, showNodeType, allowAddProperties, allowRemoveProperties, }: NodePropertiesPanelProps): React.ReactElement;
|
|
47
51
|
//# sourceMappingURL=NodePropertiesPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodePropertiesPanel.d.ts","sourceRoot":"","sources":["../../src/properties/NodePropertiesPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"NodePropertiesPanel.d.ts","sourceRoot":"","sources":["../../src/properties/NodePropertiesPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAGL,KAAK,aAAa,EAEnB,MAAM,oBAAoB,CAAC;AAM5B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,sDAAsD;IACtD,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAE/B,yCAAyC;IACzC,gBAAgB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAEnD,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAE5E,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzD,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,sCAAsC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,uCAAuC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AA4ID,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,QAAgB,EAChB,KAAW,EACX,UAAiB,EACjB,YAAmB,EACnB,kBAAyB,EACzB,qBAA4B,GAC7B,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CA6W/C"}
|
|
@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
* Shows node info (ID, type), basic properties (label, description),
|
|
7
7
|
* and custom properties with type-appropriate input controls.
|
|
8
8
|
*/
|
|
9
|
-
import { useState, useCallback, useMemo } from 'react';
|
|
9
|
+
import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
|
|
10
10
|
import { extractPropertyFields, } from './propertyUtils.js';
|
|
11
11
|
// ============================================================================
|
|
12
12
|
// Styles
|
|
@@ -41,6 +41,38 @@ const formGroupStyles = {
|
|
|
41
41
|
};
|
|
42
42
|
function PropertyInput({ meta, onChange, disabled }) {
|
|
43
43
|
const { type, value, isEditable } = meta;
|
|
44
|
+
const [draft, setDraft] = useState(String(value ?? ''));
|
|
45
|
+
const skipBlur = useRef(false);
|
|
46
|
+
useEffect(() => setDraft(String(value ?? '')), [value]);
|
|
47
|
+
const commitDraft = () => {
|
|
48
|
+
if (skipBlur.current) {
|
|
49
|
+
skipBlur.current = false;
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (type === 'number') {
|
|
53
|
+
const parsed = Number(draft);
|
|
54
|
+
if (draft.trim() === '' || !Number.isFinite(parsed)) {
|
|
55
|
+
setDraft(String(value ?? ''));
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
if (parsed !== value)
|
|
59
|
+
onChange(parsed);
|
|
60
|
+
}
|
|
61
|
+
else if (draft !== String(value ?? ''))
|
|
62
|
+
onChange(draft);
|
|
63
|
+
};
|
|
64
|
+
const handleDraftKey = (event) => {
|
|
65
|
+
if (event.key === 'Enter') {
|
|
66
|
+
commitDraft();
|
|
67
|
+
skipBlur.current = true;
|
|
68
|
+
event.currentTarget.blur();
|
|
69
|
+
}
|
|
70
|
+
else if (event.key === 'Escape') {
|
|
71
|
+
skipBlur.current = true;
|
|
72
|
+
setDraft(String(value ?? ''));
|
|
73
|
+
event.currentTarget.blur();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
44
76
|
// Non-editable types show as read-only
|
|
45
77
|
if (!isEditable) {
|
|
46
78
|
return (_jsx("div", { style: {
|
|
@@ -54,49 +86,59 @@ function PropertyInput({ meta, onChange, disabled }) {
|
|
|
54
86
|
}
|
|
55
87
|
// Boolean: checkbox
|
|
56
88
|
if (type === 'boolean') {
|
|
57
|
-
return (_jsx("input", { type: "checkbox", checked: Boolean(value), onChange: (e) => onChange(e.target.checked), disabled: disabled }));
|
|
89
|
+
return (_jsx("input", { type: "checkbox", "aria-label": `Property ${meta.key}`, checked: Boolean(value), onChange: (e) => onChange(e.target.checked), disabled: disabled }));
|
|
58
90
|
}
|
|
59
91
|
// Number: number input
|
|
60
92
|
if (type === 'number') {
|
|
61
|
-
return (_jsx("input", { type: "number", value:
|
|
62
|
-
const parsed = parseFloat(e.target.value);
|
|
63
|
-
onChange(isNaN(parsed) ? 0 : parsed);
|
|
64
|
-
}, disabled: disabled, style: inputStyles }));
|
|
93
|
+
return (_jsx("input", { type: "number", "aria-label": `Property ${meta.key}`, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commitDraft, onKeyDown: handleDraftKey, disabled: disabled, style: inputStyles }));
|
|
65
94
|
}
|
|
66
95
|
// String (default): text input
|
|
67
|
-
return (_jsx("input", { type: "text",
|
|
96
|
+
return (_jsx("input", { type: "text", "aria-label": `Property ${meta.key}`, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commitDraft, onKeyDown: handleDraftKey, disabled: disabled, style: inputStyles }));
|
|
68
97
|
}
|
|
69
98
|
// ============================================================================
|
|
70
99
|
// NodePropertiesPanel Component
|
|
71
100
|
// ============================================================================
|
|
72
|
-
export function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddProperty, onRemoveProperty, disabled = false, width = 320, showNodeId = true, showNodeType = true, allowAddProperties = true, allowRemoveProperties = true, }) {
|
|
101
|
+
export function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddProperty, onRemoveProperty, onEditSessionStart, onEditSessionEnd, onEditSessionCancel, disabled = false, width = 320, showNodeId = true, showNodeType = true, allowAddProperties = true, allowRemoveProperties = true, }) {
|
|
73
102
|
const [newPropertyKey, setNewPropertyKey] = useState('');
|
|
74
103
|
const [newPropertyValue, setNewPropertyValue] = useState('');
|
|
75
104
|
const [newPropertyType, setNewPropertyType] = useState('string');
|
|
105
|
+
const [labelDraft, setLabelDraft] = useState(selectedNode?.data.label ?? '');
|
|
106
|
+
const [descriptionDraft, setDescriptionDraft] = useState(selectedNode?.data.description ?? '');
|
|
107
|
+
const cancelledBlur = useRef(null);
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
setLabelDraft(selectedNode?.data.label ?? '');
|
|
110
|
+
setDescriptionDraft(selectedNode?.data.description ?? '');
|
|
111
|
+
}, [selectedNode?.id, selectedNode?.data.label, selectedNode?.data.description]);
|
|
76
112
|
// Extract custom properties
|
|
77
113
|
const customProperties = useMemo(() => extractPropertyFields(selectedNode?.data?.properties), [selectedNode?.data?.properties]);
|
|
78
114
|
// Handle label change
|
|
79
115
|
const handleLabelChange = useCallback((e) => {
|
|
80
|
-
|
|
116
|
+
setLabelDraft(e.target.value);
|
|
117
|
+
}, []);
|
|
118
|
+
const commitLabel = useCallback(() => {
|
|
119
|
+
if (!selectedNode || cancelledBlur.current === 'label') {
|
|
120
|
+
cancelledBlur.current = null;
|
|
81
121
|
return;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}, [selectedNode, onPropertyChange]);
|
|
122
|
+
}
|
|
123
|
+
if (labelDraft !== selectedNode.data.label)
|
|
124
|
+
onPropertyChange({
|
|
125
|
+
nodeId: selectedNode.id, field: 'label', oldValue: selectedNode.data.label, newValue: labelDraft,
|
|
126
|
+
});
|
|
127
|
+
}, [labelDraft, onPropertyChange, selectedNode]);
|
|
89
128
|
// Handle description change
|
|
90
129
|
const handleDescriptionChange = useCallback((e) => {
|
|
91
|
-
|
|
130
|
+
setDescriptionDraft(e.target.value);
|
|
131
|
+
}, []);
|
|
132
|
+
const commitDescription = useCallback(() => {
|
|
133
|
+
if (!selectedNode || cancelledBlur.current === 'description') {
|
|
134
|
+
cancelledBlur.current = null;
|
|
92
135
|
return;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}, [selectedNode, onPropertyChange]);
|
|
136
|
+
}
|
|
137
|
+
if (descriptionDraft !== (selectedNode.data.description ?? ''))
|
|
138
|
+
onPropertyChange({
|
|
139
|
+
nodeId: selectedNode.id, field: 'description', oldValue: selectedNode.data.description, newValue: descriptionDraft,
|
|
140
|
+
});
|
|
141
|
+
}, [descriptionDraft, onPropertyChange, selectedNode]);
|
|
100
142
|
// Handle custom property change
|
|
101
143
|
const handlePropertyValueChange = useCallback((key, oldValue, newValue) => {
|
|
102
144
|
if (!selectedNode)
|
|
@@ -154,7 +196,27 @@ export function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddPrope
|
|
|
154
196
|
borderBottom: '1px solid #e0e0e0',
|
|
155
197
|
fontWeight: 600,
|
|
156
198
|
fontSize: '14px',
|
|
157
|
-
}, children: "Node Properties" }), _jsxs("div", { style: { padding: '12px', maxHeight: '500px', overflowY: 'auto' }, children: [_jsx("div", { style: sectionHeaderStyles, children: "Node Info" }), showNodeId && (_jsxs("div", { style: { ...formGroupStyles, display: 'flex', gap: '8px' }, children: [_jsx("span", { style: { ...labelStyles, width: '50px', marginBottom: 0 }, children: "ID:" }), _jsx("span", { style: { fontSize: '12px', color: '#666', fontFamily: 'monospace' }, children: selectedNode.id })] })), showNodeType && (_jsxs("div", { style: { ...formGroupStyles, display: 'flex', gap: '8px' }, children: [_jsx("span", { style: { ...labelStyles, width: '50px', marginBottom: 0 }, children: "Type:" }), _jsx("span", { style: { fontSize: '12px', color: '#666' }, children: selectedNode.data.nodeType })] })), _jsx("div", { style: sectionHeaderStyles, children: "Basic Properties" }), _jsxs("div", { style: formGroupStyles, children: [_jsx("label", { style: labelStyles, children: "Label" }), _jsx("input", { type: "text",
|
|
199
|
+
}, children: "Node Properties" }), _jsxs("div", { style: { padding: '12px', maxHeight: '500px', overflowY: 'auto' }, children: [_jsx("div", { style: sectionHeaderStyles, children: "Node Info" }), showNodeId && (_jsxs("div", { style: { ...formGroupStyles, display: 'flex', gap: '8px' }, children: [_jsx("span", { style: { ...labelStyles, width: '50px', marginBottom: 0 }, children: "ID:" }), _jsx("span", { style: { fontSize: '12px', color: '#666', fontFamily: 'monospace' }, children: selectedNode.id })] })), showNodeType && (_jsxs("div", { style: { ...formGroupStyles, display: 'flex', gap: '8px' }, children: [_jsx("span", { style: { ...labelStyles, width: '50px', marginBottom: 0 }, children: "Type:" }), _jsx("span", { style: { fontSize: '12px', color: '#666' }, children: selectedNode.data.nodeType })] })), _jsx("div", { style: sectionHeaderStyles, children: "Basic Properties" }), _jsxs("div", { style: formGroupStyles, children: [_jsx("label", { style: labelStyles, children: "Label" }), _jsx("input", { type: "text", "aria-label": "Node label", value: labelDraft, onChange: handleLabelChange, onFocus: () => onEditSessionStart?.('label'), onBlur: () => { commitLabel(); onEditSessionEnd?.('label'); }, onKeyDown: (event) => {
|
|
200
|
+
if (event.key === 'Enter') {
|
|
201
|
+
commitLabel();
|
|
202
|
+
cancelledBlur.current = 'label';
|
|
203
|
+
onEditSessionEnd?.('label');
|
|
204
|
+
event.currentTarget.blur();
|
|
205
|
+
}
|
|
206
|
+
else if (event.key === 'Escape') {
|
|
207
|
+
cancelledBlur.current = 'label';
|
|
208
|
+
setLabelDraft(selectedNode.data.label);
|
|
209
|
+
onEditSessionCancel?.('label');
|
|
210
|
+
event.currentTarget.blur();
|
|
211
|
+
}
|
|
212
|
+
}, disabled: disabled, style: inputStyles })] }), _jsxs("div", { style: formGroupStyles, children: [_jsx("label", { style: labelStyles, children: "Description" }), _jsx("textarea", { "aria-label": "Node description", value: descriptionDraft, onChange: handleDescriptionChange, onFocus: () => onEditSessionStart?.('description'), onBlur: () => { commitDescription(); onEditSessionEnd?.('description'); }, onKeyDown: (event) => {
|
|
213
|
+
if (event.key === 'Escape') {
|
|
214
|
+
cancelledBlur.current = 'description';
|
|
215
|
+
setDescriptionDraft(selectedNode.data.description ?? '');
|
|
216
|
+
onEditSessionCancel?.('description');
|
|
217
|
+
event.currentTarget.blur();
|
|
218
|
+
}
|
|
219
|
+
}, disabled: disabled, placeholder: "Optional description...", rows: 3, style: {
|
|
158
220
|
...inputStyles,
|
|
159
221
|
resize: 'vertical',
|
|
160
222
|
minHeight: '60px',
|
|
@@ -173,19 +235,24 @@ export function NodePropertiesPanel({ selectedNode, onPropertyChange, onAddPrope
|
|
|
173
235
|
fontWeight: 500,
|
|
174
236
|
minWidth: '80px',
|
|
175
237
|
color: '#555',
|
|
176
|
-
}, children: prop.key }), _jsx("div", { style: { flex: 1 }, children: _jsx(
|
|
238
|
+
}, children: prop.key }), _jsx("div", { style: { flex: 1 }, children: _jsx("div", { onFocusCapture: () => onEditSessionStart?.(`property:${prop.key}`), onBlurCapture: () => onEditSessionEnd?.(`property:${prop.key}`), onKeyDown: (event) => {
|
|
239
|
+
if (event.key === 'Enter')
|
|
240
|
+
onEditSessionEnd?.(`property:${prop.key}`);
|
|
241
|
+
else if (event.key === 'Escape')
|
|
242
|
+
onEditSessionCancel?.(`property:${prop.key}`);
|
|
243
|
+
}, children: _jsx(PropertyInput, { meta: prop, onChange: (newValue) => handlePropertyValueChange(prop.key, prop.value, newValue), disabled: disabled }) }) }), allowRemoveProperties && onRemoveProperty && (_jsx("button", { type: "button", onClick: () => onRemoveProperty(selectedNode.id, prop.key), disabled: disabled, style: {
|
|
177
244
|
padding: '4px 8px',
|
|
178
245
|
border: 'none',
|
|
179
246
|
background: 'transparent',
|
|
180
247
|
color: '#d32f2f',
|
|
181
248
|
cursor: disabled ? 'default' : 'pointer',
|
|
182
249
|
fontSize: '14px',
|
|
183
|
-
}, title: "Remove property", children: "\u00D7" }))] }, prop.key))) })), allowAddProperties && onAddProperty && (_jsxs("div", { style: {
|
|
250
|
+
}, title: "Remove property", "aria-label": `Remove property ${prop.key}`, children: "\u00D7" }))] }, prop.key))) })), allowAddProperties && onAddProperty && (_jsxs("div", { style: {
|
|
184
251
|
padding: '12px',
|
|
185
252
|
backgroundColor: '#f5f5f5',
|
|
186
253
|
borderRadius: '4px',
|
|
187
254
|
marginTop: '8px',
|
|
188
|
-
}, children: [_jsxs("div", { style: { display: 'flex', gap: '8px', marginBottom: '8px' }, children: [_jsx("input", { type: "text", placeholder: "Property name", value: newPropertyKey, onChange: (e) => setNewPropertyKey(e.target.value), disabled: disabled, style: { ...inputStyles, flex: 1 } }), _jsxs("select", { value: newPropertyType, onChange: (e) => setNewPropertyType(e.target.value), disabled: disabled, style: { ...inputStyles, width: '80px' }, children: [_jsx("option", { value: "string", children: "Text" }), _jsx("option", { value: "number", children: "Number" }), _jsx("option", { value: "boolean", children: "Boolean" })] })] }), newPropertyType !== 'boolean' && (_jsx("input", { type: newPropertyType === 'number' ? 'number' : 'text', placeholder: "Value", value: newPropertyValue, onChange: (e) => setNewPropertyValue(e.target.value), disabled: disabled, style: { ...inputStyles, marginBottom: '8px' } })), newPropertyType === 'boolean' && (_jsxs("select", { value: newPropertyValue, onChange: (e) => setNewPropertyValue(e.target.value), disabled: disabled, style: { ...inputStyles, marginBottom: '8px' }, children: [_jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] })), _jsx("button", { type: "button", onClick: handleAddProperty, disabled: disabled || !newPropertyKey.trim(), style: {
|
|
255
|
+
}, children: [_jsxs("div", { style: { display: 'flex', gap: '8px', marginBottom: '8px' }, children: [_jsx("input", { type: "text", "aria-label": "New property name", placeholder: "Property name", value: newPropertyKey, onChange: (e) => setNewPropertyKey(e.target.value), disabled: disabled, style: { ...inputStyles, flex: 1 } }), _jsxs("select", { "aria-label": "New property type", value: newPropertyType, onChange: (e) => setNewPropertyType(e.target.value), disabled: disabled, style: { ...inputStyles, width: '80px' }, children: [_jsx("option", { value: "string", children: "Text" }), _jsx("option", { value: "number", children: "Number" }), _jsx("option", { value: "boolean", children: "Boolean" })] })] }), newPropertyType !== 'boolean' && (_jsx("input", { "aria-label": "New property value", type: newPropertyType === 'number' ? 'number' : 'text', placeholder: "Value", value: newPropertyValue, onChange: (e) => setNewPropertyValue(e.target.value), disabled: disabled, style: { ...inputStyles, marginBottom: '8px' } })), newPropertyType === 'boolean' && (_jsxs("select", { "aria-label": "New property value", value: newPropertyValue, onChange: (e) => setNewPropertyValue(e.target.value), disabled: disabled, style: { ...inputStyles, marginBottom: '8px' }, children: [_jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] })), _jsx("button", { type: "button", onClick: handleAddProperty, disabled: disabled || !newPropertyKey.trim(), style: {
|
|
189
256
|
width: '100%',
|
|
190
257
|
padding: '8px',
|
|
191
258
|
border: 'none',
|