Skip to content

Commit

Permalink
[shared-ui] Teach GraphNodes to retain their output heights
Browse files Browse the repository at this point in the history
  • Loading branch information
@paullewis
paullewis committed Jan 23, 2025
1 parent 664db61 commit b76df00
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 18 deletions.
11 changes: 11 additions & 0 deletions packages/shared-ui/src/elements/editor/graph-comment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export class GraphComment extends PIXI.Container {
#hitAreaData: LinkData[] = [];
#hitAreas = new PIXI.Container();
#lastClickTime = 0;
#outputHeight = 0;

expansionState: ComponentExpansionState = "expanded";
readOnly = false;
Expand Down Expand Up @@ -321,6 +322,16 @@ export class GraphComment extends PIXI.Container {
this.addEventListener("pointerup", onPointerUp);
}

// Not currently used, but here for parity with the GraphNode
set outputHeight(outputHeight: number) {
this.#outputHeight = outputHeight;
this.#isDirty = true;
}

get outputHeight() {
return this.#outputHeight;
}

set selected(selected: boolean) {
if (this.#selected === selected) {
return;
Expand Down
35 changes: 21 additions & 14 deletions packages/shared-ui/src/elements/editor/graph-node.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,18 +202,6 @@ export class GraphNode extends PIXI.Container {
let resizing = false;
let resizeStart = 0;
let outputSizeStart = 0;
const setOutputHeight = (outputHeight: number) => {
if (outputHeight < MIN_OUTPUT_HEIGHT) {
outputHeight = MIN_OUTPUT_HEIGHT;
}

if (outputHeight === this.#outputHeight) {
return;
}

this.#outputHeight = outputHeight;
this.#isDirty = true;
};

this.#grabHandle.addEventListener("pointerdown", (evt) => {
resizing = true;
Expand All @@ -230,7 +218,8 @@ export class GraphNode extends PIXI.Container {
Math.round(
(evt.pageY - resizeStart) / this.worldTransform.a / GRID_SIZE
) * GRID_SIZE;
setOutputHeight(outputSizeStart + delta);
this.outputHeight = outputSizeStart + delta;
this.emit(GRAPH_OPERATIONS.GRAPH_NODE_RESIZED, false);
});

const stopResize = (evt: PIXI.FederatedPointerEvent) => {
Expand All @@ -242,8 +231,9 @@ export class GraphNode extends PIXI.Container {
Math.round(
(evt.pageY - resizeStart) / this.worldTransform.a / GRID_SIZE
) * GRID_SIZE;
setOutputHeight(outputSizeStart + delta);
this.outputHeight = outputSizeStart + delta;
resizing = false;
this.emit(GRAPH_OPERATIONS.GRAPH_NODE_RESIZED, true);
};
this.#grabHandle.addEventListener("pointerup", stopResize);
this.#grabHandle.addEventListener("pointerupoutside", stopResize);
Expand Down Expand Up @@ -518,6 +508,23 @@ export class GraphNode extends PIXI.Container {
this.#isDirty = true;
}

set outputHeight(outputHeight: number) {
if (outputHeight < MIN_OUTPUT_HEIGHT) {
outputHeight = MIN_OUTPUT_HEIGHT;
}

if (outputHeight === this.#outputHeight) {
return;
}

this.#outputHeight = outputHeight;
this.#isDirty = true;
}

get outputHeight() {
return this.#outputHeight;
}

get borderColor() {
return this.#borderColor;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/shared-ui/src/elements/editor/graph-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2203,6 +2203,10 @@ export class GraphRenderer extends LitElement {
this.#emitGraphVisualInformation();
});

graph.on(GRAPH_OPERATIONS.GRAPH_NODE_RESIZED, () => {
this.#emitGraphVisualInformation();
});

graph.on(
GRAPH_OPERATIONS.GRAPH_SELECTION_MOVE,
(
Expand Down
52 changes: 48 additions & 4 deletions packages/shared-ui/src/elements/editor/graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1066,6 +1066,7 @@ export class Graph extends PIXI.Container {
"comment",
this.toGlobal(child.position),
child.expansionState,
0,
false
);
}
Expand All @@ -1076,13 +1077,15 @@ export class Graph extends PIXI.Container {
type: "comment" | "node",
position: PIXI.PointData,
expansionState: ComponentExpansionState,
outputHeight: number,
justAdded = false
) {
this.#layout.set(node, {
...this.toLocal(position),
type,
expansionState,
justAdded,
outputHeight,
});
}

Expand Down Expand Up @@ -1146,6 +1149,7 @@ export class Graph extends PIXI.Container {
expansionState: this.collapseNodesByDefault
? "collapsed"
: "expanded",
outputHeight: 0,
});
}
}
Expand All @@ -1159,6 +1163,7 @@ export class Graph extends PIXI.Container {

graphNode.position.set(layout.x, layout.y);
graphNode.expansionState = layout.expansionState;
graphNode.outputHeight = layout.outputHeight ?? 0;
}

this.#drawEdges();
Expand Down Expand Up @@ -1224,6 +1229,7 @@ export class Graph extends PIXI.Container {
"node",
this.toGlobal(child.position),
layout.expansionState,
layout.outputHeight,
layout.justAdded
);
}
Expand All @@ -1250,6 +1256,7 @@ export class Graph extends PIXI.Container {
"comment",
this.toGlobal(child.position),
layout.expansionState,
layout.outputHeight,
layout.justAdded
);
}
Expand Down Expand Up @@ -1528,6 +1535,7 @@ export class Graph extends PIXI.Container {
y: child.y,
type,
expansionState: child.expansionState,
outputHeight: child instanceof GraphNode ? child.outputHeight : 0,
});
}

Expand Down Expand Up @@ -1860,6 +1868,14 @@ export class Graph extends PIXI.Container {
id,
});

graphNode.on(GRAPH_OPERATIONS.GRAPH_NODE_RESIZED, (settled) => {
if (!settled) {
return;
}

this.emit(GRAPH_OPERATIONS.GRAPH_NODE_RESIZED);
});

// PIXI doesn't bubble events automatically, so we re-issue the event for
// requesting the menu to the graph renderer.
graphNode.on(
Expand Down Expand Up @@ -1919,6 +1935,7 @@ export class Graph extends PIXI.Container {

node.position.set(layout.x, layout.y);
node.expansionState = layout.expansionState;
node.outputHeight = layout.outputHeight ?? 0;

node.emit(
GRAPH_OPERATIONS.GRAPH_NODE_MOVED,
Expand Down Expand Up @@ -2017,8 +2034,12 @@ export class Graph extends PIXI.Container {
}

if (node.descriptor.metadata?.visual) {
const { x, y, collapsed } = node.descriptor.metadata
.visual as VisualMetadata;
const {
x,
y,
collapsed,
outputHeight: metadataOutputHeight,
} = node.descriptor.metadata.visual as VisualMetadata;

// We may receive visual values for the node, but we may also have
// marked the node as having just been added to the editor. So we go
Expand All @@ -2030,12 +2051,24 @@ export class Graph extends PIXI.Container {
justAdded = existingLayout.justAdded ?? false;
}

let outputHeight = 0;
if (metadataOutputHeight) {
outputHeight = metadataOutputHeight;
}

const expansionState = expansionStateFromMetadata(
collapsed,
this.collapseNodesByDefault
);
const pos = this.toGlobal({ x: x ?? 0, y: y ?? 0 });
this.setNodeLayoutPosition(id, "node", pos, expansionState, justAdded);
this.setNodeLayoutPosition(
id,
"node",
pos,
expansionState,
outputHeight,
justAdded
);

graphNode.expansionState = expansionState;
}
Expand Down Expand Up @@ -2199,7 +2232,12 @@ export class Graph extends PIXI.Container {
}

if (node.metadata?.visual) {
const { x, y, collapsed } = node.metadata.visual as VisualMetadata;
const {
x,
y,
collapsed,
outputHeight: metadataOutputHeight,
} = node.metadata.visual as VisualMetadata;

// We may receive visual values for the node, but we may also have
// marked the node as having just been added to the editor. So we go
Expand All @@ -2215,12 +2253,18 @@ export class Graph extends PIXI.Container {
this.collapseNodesByDefault
);

let outputHeight = 0;
if (metadataOutputHeight) {
outputHeight = metadataOutputHeight;
}

const pos = this.toGlobal({ x, y });
this.setNodeLayoutPosition(
id,
"comment",
pos,
expansionState,
outputHeight,
justAdded
);

Expand Down
3 changes: 3 additions & 0 deletions packages/shared-ui/src/elements/editor/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export enum GRAPH_OPERATIONS {
GRAPH_COMMENT_EDIT_REQUESTED = "graphcommenteditrequested",
GRAPH_COMMENT_TOGGLE_SELECTED = "graphcommenttoggleselected",
GRAPH_NODE_MOVED = "graphnodemoved",
GRAPH_NODE_RESIZED = "graphnoderesized",
GRAPH_INITIAL_DRAW = "graphinitialdraw",
GRAPH_DRAW = "graphdraw",
GRAPH_NODE_EDIT = "graphnodeedit",
Expand Down Expand Up @@ -70,13 +71,15 @@ export type LayoutInfo = {
y: number;
type: "comment" | "node";
expansionState: ComponentExpansionState;
outputHeight: number;
justAdded?: boolean;
};

export type VisualMetadata = {
x: number;
y: number;
collapsed: ComponentExpansionState | boolean;
outputHeight: number;
};

export interface GraphOpts {
Expand Down
1 change: 1 addition & 0 deletions packages/shared-ui/src/types/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,7 @@ export interface GraphEntityVisualState {
x: number;
y: number;
expansionState: "collapsed" | "expanded" | "advanced";
outputHeight: number;
}

export type GraphVisualState = {
Expand Down
2 changes: 2 additions & 0 deletions packages/visual-editor/src/runtime/edit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -985,6 +985,7 @@ export class Edit extends EventTarget {
x: entityVisualState.x,
y: entityVisualState.y,
collapsed: entityVisualState.expansionState,
outputHeight: entityVisualState.outputHeight ?? 0,
};
}
break;
Expand All @@ -1004,6 +1005,7 @@ export class Edit extends EventTarget {
x: entityVisualState.x,
y: entityVisualState.y,
collapsed: entityVisualState.expansionState,
outputHeight: entityVisualState.outputHeight ?? 0,
},
},
});
Expand Down
1 change: 1 addition & 0 deletions packages/visual-editor/src/runtime/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export interface GraphEntityVisualState {
x: number;
y: number;
expansionState: "collapsed" | "expanded" | "advanced";
outputHeight: number;
}

export type GraphVisualState = {
Expand Down

0 comments on commit b76df00

Please sign in to comment.