[shared-ui] Add control over when to animate (#3944)

#3836

.changeset/soft-cherries-leave.md

@@ -0,0 +1,6 @@
+---
+"@breadboard-ai/visual-editor": patch
+"@breadboard-ai/shared-ui": patch
+---
+
+Add control over when to animate

packages/shared-ui/src/elements/editor/editor.ts

@@ -901,6 +901,7 @@ export class Editor extends LitElement {
         .showPortTooltips=${this.showPortTooltips}
         .showSubgraphsInline=${this.showSubgraphsInline}
         .selectionChangeId=${this.selectionState?.selectionChangeId}
+        .moveToSelection=${this.selectionState?.moveToSelection}
       ></bb-graph-renderer>
     </div>`;
 

packages/shared-ui/src/elements/editor/graph-renderer.ts

@@ -59,6 +59,7 @@ import {
   WorkspaceVisualState,
   WorkspaceVisualChangeId,
   GraphVisualState,
+  WorkspaceSelectionStateWithChangeId,
 } from "../../types/types.js";
 import { MAIN_BOARD_ID } from "../../constants/constants.js";
 
@@ -105,6 +106,10 @@ export class GraphRenderer extends LitElement {
   @property()
   selectionChangeId: WorkspaceSelectionChangeId | null = null;
 
+  @property()
+  moveToSelection: WorkspaceSelectionStateWithChangeId["moveToSelection"] =
+    false;
+
   @property()
   topGraphUrl: string | null = null;
 
@@ -692,10 +697,11 @@ export class GraphRenderer extends LitElement {
       });
     }
 
-    if (this.#selectionHasChanged) {
+    if (this.#selectionHasChanged && this.moveToSelection) {
       this.#selectionHasChanged = false;
 
-      let shouldAnimate = true;
+      let shouldAnimate =
+        this.moveToSelection && this.moveToSelection === "animated";
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
         shouldAnimate = false;
       }

packages/shared-ui/src/elements/editor/graph.ts

@@ -75,7 +75,7 @@ export class Graph extends PIXI.Container {
   #highlightPadding = 8;
   #subGraphOutlineMarker = new PIXI.Graphics();
   #subGraphOutline = new PIXI.Graphics();
-  #subGraphOutlinePadding = 20;
+  #subGraphOutlinePadding = 24;
   #latestPendingValidateRequest = new WeakMap<GraphEdge, symbol>();
   #edgeValues: TopGraphEdgeValues | null = null;
   #nodeInfo: TopGraphNodeInfo | null = null;

packages/shared-ui/src/types/types.ts

@@ -459,4 +459,5 @@ export type WorkspaceSelectionState = {
 export interface WorkspaceSelectionStateWithChangeId {
   selectionChangeId: WorkspaceSelectionChangeId;
   selectionState: WorkspaceSelectionState;
+  moveToSelection: "immediate" | "animated" | false;
 }

packages/visual-editor/src/index.ts

@@ -490,6 +490,7 @@ export class Main extends LitElement {
             this.#selectionState = {
               selectionChangeId: evt.selectionChangeId,
               selectionState: evt.selectionState,
+              moveToSelection: evt.moveToSelection,
             };
 
             this.requestUpdate();

packages/visual-editor/src/runtime/events.ts

@@ -108,7 +108,8 @@ export class RuntimeSelectionChangeEvent extends Event {
 
   constructor(
     public readonly selectionChangeId: WorkspaceSelectionChangeId,
-    public readonly selectionState: WorkspaceSelectionState
+    public readonly selectionState: WorkspaceSelectionState,
+    public readonly moveToSelection: "immediate" | "animated" | false
   ) {
     super(RuntimeSelectionChangeEvent.eventName, { ...eventInit });
   }

packages/visual-editor/src/runtime/select.ts

@@ -58,10 +58,14 @@ export class Select extends EventTarget {
     this.#selectionState.set(tab, createEmptyWorkspaceSelectionState());
   }
 
-  #emit(tab: TabId, selectionChangeId: WorkspaceSelectionChangeId) {
+  #emit(
+    tab: TabId,
+    selectionChangeId: WorkspaceSelectionChangeId,
+    moveToSelection: "immediate" | "animated" | false = false
+  ) {
     const state = this.#createWorkspaceSelectionStateIfNeeded(tab);
     this.dispatchEvent(
-      new RuntimeSelectionChangeEvent(selectionChangeId, state)
+      new RuntimeSelectionChangeEvent(selectionChangeId, state, moveToSelection)
     );
   }
 
@@ -124,7 +128,7 @@ export class Select extends EventTarget {
     nodeId: NodeIdentifier
   ) {
     this.#addToGraphsCollection(tab, graphId, "nodes", nodeId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   removeNode(
@@ -134,7 +138,7 @@ export class Select extends EventTarget {
     nodeId: NodeIdentifier
   ) {
     this.#removeFromGraphsCollection(tab, graphId, "nodes", nodeId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   addComment(
@@ -144,7 +148,7 @@ export class Select extends EventTarget {
     commentId: string
   ) {
     this.#addToGraphsCollection(tab, graphId, "comments", commentId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   removeComment(
@@ -154,7 +158,7 @@ export class Select extends EventTarget {
     commentId: string
   ) {
     this.#removeFromGraphsCollection(tab, graphId, "comments", commentId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   addEdge(
@@ -164,7 +168,7 @@ export class Select extends EventTarget {
     edgeId: string
   ) {
     this.#addToGraphsCollection(tab, graphId, "edges", edgeId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   removeEdge(
@@ -174,7 +178,7 @@ export class Select extends EventTarget {
     edgeId: string
   ) {
     this.#removeFromGraphsCollection(tab, graphId, "edges", edgeId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   addModule(
@@ -183,7 +187,7 @@ export class Select extends EventTarget {
     moduleId: ModuleIdentifier
   ) {
     this.#addToModulesCollection(tab, moduleId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   removeModule(
@@ -192,7 +196,7 @@ export class Select extends EventTarget {
     moduleId: ModuleIdentifier
   ) {
     this.#removeFromModulesCollection(tab, moduleId);
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   processSelections(
@@ -234,7 +238,7 @@ export class Select extends EventTarget {
       this.#addToModulesCollection(tab, id);
     }
 
-    this.#emit(tab, selectionChangeId);
+    this.#emit(tab, selectionChangeId, "animated");
   }
 
   selectNode(

packages/visual-editor/src/runtime/types.ts

@@ -111,6 +111,7 @@ export type WorkspaceSelectionState = {
 export interface WorkspaceSelectionStateWithChangeId {
   selectionChangeId: WorkspaceSelectionChangeId;
   selectionState: WorkspaceSelectionState;
+  moveToSelection: "immediate" | "animated" | false;
 }
 
 export type TabSelectionState = Map<TabId, WorkspaceSelectionState>;