From 502d1feeb1fe211411fff0171d38a166f9cb010c Mon Sep 17 00:00:00 2001 From: Paul Lewis <617438+paullewis@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:02:11 +0000 Subject: [PATCH] [shared-ui] Only show graph outline when there are multiple graphs (#4044) --- .changeset/old-cats-hide.md | 6 ++++++ packages/bbrt/src/components/board-visualizer.ts | 1 + packages/shared-ui/src/elements/editor/editor.ts | 7 +++---- .../shared-ui/src/elements/editor/graph-renderer.ts | 11 +++++------ packages/shared-ui/src/elements/editor/graph.ts | 13 ++++++++++++- packages/shared-ui/src/elements/editor/types.ts | 1 + .../src/elements/module-editor/module-editor.ts | 2 +- packages/website/src/js/board-embed.ts | 1 - 8 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 .changeset/old-cats-hide.md diff --git a/.changeset/old-cats-hide.md b/.changeset/old-cats-hide.md new file mode 100644 index 0000000000..3194ceac3a --- /dev/null +++ b/.changeset/old-cats-hide.md @@ -0,0 +1,6 @@ +--- +"@breadboard-ai/shared-ui": patch +"@google-labs/breadboard-website": patch +--- + +Only show graph outline when there are multiple graphs diff --git a/packages/bbrt/src/components/board-visualizer.ts b/packages/bbrt/src/components/board-visualizer.ts index 70a3fc6468..1f3b8a11af 100644 --- a/packages/bbrt/src/components/board-visualizer.ts +++ b/packages/bbrt/src/components/board-visualizer.ts @@ -72,6 +72,7 @@ export class BBRTBoardVisualizer extends LitElement { subGraphId: null, minimized: false, showNodePreviewValues: true, + showGraphOutline: false, collapseNodesByDefault: false, ports: ports, typeMetadata, diff --git a/packages/shared-ui/src/elements/editor/editor.ts b/packages/shared-ui/src/elements/editor/editor.ts index 1bf35e7bad..424e91c0fa 100644 --- a/packages/shared-ui/src/elements/editor/editor.ts +++ b/packages/shared-ui/src/elements/editor/editor.ts @@ -216,9 +216,6 @@ export class Editor extends LitElement implements DragConnectorReceiver { @property() showBoardReferenceMarkers = false; - @property() - showMainGraphBorder = true; - @state() showOverflowMenu = false; @@ -475,6 +472,8 @@ export class Editor extends LitElement implements DragConnectorReceiver { subGraphId ? subGraphId : MAIN_BOARD_ID ); + const hasSubGraphs = Object.keys(selectedGraph.graphs() ?? {}).length > 0; + return { url, title: subGraphId @@ -490,6 +489,7 @@ export class Editor extends LitElement implements DragConnectorReceiver { nodes: selectedGraph.nodes(), modules: selectedGraph.modules(), metadata: selectedGraph.metadata() || {}, + showGraphOutline: subGraphId ? true : hasSubGraphs, references, selectionState: graphSelectionState ?? null, }; @@ -1113,7 +1113,6 @@ export class Editor extends LitElement implements DragConnectorReceiver { .selectionChangeId=${this.selectionState?.selectionChangeId} .moveToSelection=${this.selectionState?.moveToSelection} .showBoardReferenceMarkers=${this.showBoardReferenceMarkers} - .showMainGraphBorder=${this.showMainGraphBorder} > `; diff --git a/packages/shared-ui/src/elements/editor/graph-renderer.ts b/packages/shared-ui/src/elements/editor/graph-renderer.ts index eb2db3e785..64bf7dc834 100644 --- a/packages/shared-ui/src/elements/editor/graph-renderer.ts +++ b/packages/shared-ui/src/elements/editor/graph-renderer.ts @@ -118,9 +118,6 @@ export class GraphRenderer extends LitElement { @property() showSubgraphsInline = false; - @property() - showMainGraphBorder = true; - @property() assetPrefix = ""; @@ -1092,12 +1089,13 @@ export class GraphRenderer extends LitElement { } } - #applyPositionDeltaToSelection(delta: PIXI.Point) { + #applyPositionDeltaToSelection(delta: PIXI.Point, settled = false) { for (const child of this.#container.children) { if (!(child instanceof Graph)) { continue; } - child.updateNodePositions(delta); + + child.updateNodePositions(delta, settled); } } @@ -2248,6 +2246,7 @@ export class GraphRenderer extends LitElement { } } + this.#applyPositionDeltaToSelection(delta, true); this.#emitGraphVisualInformation(); } ); @@ -2624,7 +2623,7 @@ export class GraphRenderer extends LitElement { graph.subGraphId = subGraphId; graph.graphTitle = opts.title ?? null; - graph.graphOutlineVisible = subGraphId !== null || this.showMainGraphBorder; + graph.graphOutlineVisible = opts.showGraphOutline ?? false; return true; } diff --git a/packages/shared-ui/src/elements/editor/graph.ts b/packages/shared-ui/src/elements/editor/graph.ts index 86fa1c5276..5810857605 100644 --- a/packages/shared-ui/src/elements/editor/graph.ts +++ b/packages/shared-ui/src/elements/editor/graph.ts @@ -1186,7 +1186,7 @@ export class Graph extends PIXI.Container { } } - updateNodePositions(delta: PIXI.Point) { + updateNodePositions(delta: PIXI.Point, settled = false) { const selectionState = this.#selectionState; if (!selectionState) { return; @@ -1206,6 +1206,9 @@ export class Graph extends PIXI.Container { child.x = layout.x + delta.x; child.y = layout.y + delta.y; + if (!settled) { + continue; + } this.setNodeLayoutPosition( node, "node", @@ -1229,6 +1232,9 @@ export class Graph extends PIXI.Container { child.x = layout.x + delta.x; child.y = layout.y + delta.y; + if (!settled) { + continue; + } this.setNodeLayoutPosition( comment, "comment", @@ -1655,6 +1661,10 @@ export class Graph extends PIXI.Container { this.#graphOutlineMarker.clear(); this.#graphOutlineConnector.clear(); + if (this.#graphOutlineTitleLabel) { + this.#graphOutlineTitleLabel.visible = false; + } + if (this.#graphOutlineConnectorIcon) { this.#graphOutlineConnectorIcon.visible = false; } @@ -1757,6 +1767,7 @@ export class Graph extends PIXI.Container { this.#graphOutlineTitleLabel.x = x + 14; this.#graphOutlineTitleLabel.y = y + 8; + this.#graphOutlineTitleLabel.visible = true; if (this.subGraphId) { if (this.#graphOutlineConnectorIcon) { diff --git a/packages/shared-ui/src/elements/editor/types.ts b/packages/shared-ui/src/elements/editor/types.ts index 4f3b0f6a72..52e41973cd 100644 --- a/packages/shared-ui/src/elements/editor/types.ts +++ b/packages/shared-ui/src/elements/editor/types.ts @@ -84,6 +84,7 @@ export interface GraphOpts { title: string; subGraphId: string | null; showNodePreviewValues: boolean; + showGraphOutline: boolean; collapseNodesByDefault: boolean; ports: Map | null; typeMetadata: Map | null; diff --git a/packages/shared-ui/src/elements/module-editor/module-editor.ts b/packages/shared-ui/src/elements/module-editor/module-editor.ts index 23cc64fff9..1b7fc944ae 100644 --- a/packages/shared-ui/src/elements/module-editor/module-editor.ts +++ b/packages/shared-ui/src/elements/module-editor/module-editor.ts @@ -648,6 +648,7 @@ export class ModuleEditor extends LitElement { minimized: false, showNodePreviewValues: false, collapseNodesByDefault: false, + showGraphOutline: false, ports: ports, typeMetadata, edges: selectedGraph.edges(), @@ -907,7 +908,6 @@ export class ModuleEditor extends LitElement { .highlightInvalidWires=${false} .showPortTooltips=${false} .showSubgraphsInline=${false} - .showMainGraphBorder=${false} .selectionChangeId=${null} > diff --git a/packages/website/src/js/board-embed.ts b/packages/website/src/js/board-embed.ts index 3deb676a4b..049243d998 100644 --- a/packages/website/src/js/board-embed.ts +++ b/packages/website/src/js/board-embed.ts @@ -151,7 +151,6 @@ export class BoardEmbed extends LitElement { .showReadOnlyLabel=${false} .readOnly=${true} .hideRibbonMenu=${true} - .showMainGraphBorder=${false} >
${this.url