CSE Machine : Fix Highlighting

src/features/cseMachine/CseMachineConfig.ts

@@ -66,13 +66,15 @@ export const Config = Object.freeze({
   PrintStrokeColor: '#777',
   PrintStrokeColorFaded: '#ccc',
   ArrowHighlightedColor: '#ffffff',
+  ArrowDeadHighlightedColor: '#787777',
 
   // Colors of different states
   ActiveColor: '#030fff',
   PrintActiveColor: '#3d5afe',
   DangerColor: '#ff1744',
   PrintDangerColor: '#f44336',
   HoverColor: '#25c225',
+  HoverDeadColor: '#127a12',
   PrintHoverColor: '#0dbf0d',
 
   // Colors for text hover background

src/features/cseMachine/CseMachineTypes.ts

@@ -40,6 +40,8 @@ export interface IVisible extends Drawable {
   height(): number;
 
   ref?: React.RefObject<any>;
+  setArrowSourceHighlightedStyle?(): void;
+  setArrowSourceNormalStyle?(): void;
 }
 
 /** unassigned is internally represented as a symbol */

src/features/cseMachine/components/ArrayUnit.tsx

@@ -60,6 +60,22 @@ export class ArrayUnit extends Visible {
     if (!CseMachine.getPrintableMode()) this.indexRef.current?.hide();
   }
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.parent.isLive()) {
+      this.ref.current?.stroke(Config.HoverColor);
+    } else {
+      this.ref.current?.stroke(Config.HoverDeadColor);
+    }
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.ref.current?.stroke(
+      this.parent.isReferenced() && this.parent.isEnclosingFrameLive()
+        ? defaultStrokeColor()
+        : fadedStrokeColor()
+    );
+  }
+
   draw(): React.ReactNode {
     if (this.isDrawn()) return null;
     this._isDrawn = true;

src/features/cseMachine/components/ControlItemComponent.tsx

@@ -92,6 +92,16 @@ export class ControlItemComponent extends Visible implements IHoverable {
     this.ref.current.zIndex(this.zIndex);
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.tag?.stroke(Config.HoverColor);
+    this.secItem?.fill(Config.HoverColor);
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.tag?.stroke(this.topItem ? defaultActiveColor() : defaultStrokeColor());
+    this.secItem?.fill(defaultTextColor());
+  }
+
   destroy() {
     this.ref.current.destroyChildren();
   }

src/features/cseMachine/components/Frame.tsx

@@ -1,3 +1,4 @@
+import { Rect as KonvaRect } from 'konva/lib/shapes/Rect';
 import React from 'react';
 import { Group, Rect } from 'react-konva';
 
@@ -59,6 +60,7 @@ export class Frame extends Visible implements IHoverable {
   readonly bindings: Binding[] = [];
   /** name of this frame to display */
   private _name!: Text; // removed readonly to allow reassignment for fixed layout
+  private readonly rectRef = React.createRef<KonvaRect | null>();
   /** the level in which this frame resides */
   readonly level: Level | undefined;
   /** environment associated with this frame */
@@ -260,13 +262,34 @@ export class Frame extends Visible implements IHoverable {
 
   onMouseLeave = () => {};
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.isLive) {
+      this.rectRef.current?.stroke(Config.HoverColor);
+    } else {
+      this.rectRef.current?.stroke(Config.HoverDeadColor);
+    }
+    this.name.setArrowSourceHighlightedStyle();
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.rectRef.current?.stroke(
+      CseMachine.getCurrentEnvId() === this.environment?.id
+        ? defaultActiveColor()
+        : this.isLive
+          ? defaultStrokeColor()
+          : fadedStrokeColor()
+    );
+    this.name.setArrowSourceNormalStyle();
+  }
+
   draw(): React.ReactNode {
     return (
       <Group ref={this.ref} key={Layout.key++}>
         {this.name.draw()}
 
         <Rect
           {...ShapeDefaultProps}
+          ref={this.rectRef}
           x={this.x()}
           y={this.y()}
           width={this.width()}

src/features/cseMachine/components/StashItemComponent.tsx

@@ -106,6 +106,16 @@ export class StashItemComponent extends Visible implements IHoverable {
     this.ref.current.zIndex(this.zIndex);
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.tag?.stroke(Config.HoverColor);
+    this.secItem?.fill(Config.HoverColor);
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.tag?.stroke(isStashItemInDanger(this.index) ? defaultDangerColor() : defaultStrokeColor());
+    this.secItem?.fill(defaultTextColor());
+  }
+
   destroy() {
     this.ref.current.destroyChildren();
   }

src/features/cseMachine/components/Text.tsx

@@ -95,6 +95,18 @@ export class Text extends Visible implements IHoverable {
     currentTarget.getLayer()?.draw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.options.faded) {
+      this.ref.current?.fill(Config.HoverDeadColor);
+    } else {
+      this.ref.current?.fill(Config.HoverColor);
+    }
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.ref.current?.fill(this.options.faded ? fadedTextColor() : defaultTextColor());
+  }
+
   draw(): React.ReactNode {
     const props = {
       fontFamily: this.options.fontFamily,

src/features/cseMachine/components/Visible.tsx

@@ -1,3 +1,4 @@
+import Konva from 'konva';
 import React from 'react';
 import { RefObject } from 'react';
 
@@ -30,6 +31,27 @@ export abstract class Visible implements IVisible {
   reset(): void {
     this._isDrawn = false;
   }
+  setShapesStyle(color: string): void {
+    const shapes = this.ref.current?.getChildren?.() ?? [];
+    shapes.forEach((shape: Konva.Node) => {
+      if (shape instanceof Konva.Shape) {
+        if (shape.attrs.stroke) {
+          shape.stroke(color);
+        }
+        if (shape.attrs.fill) {
+          shape.fill(color);
+        }
+      }
+    });
+  }
   public ref: RefObject<any> = React.createRef();
+  protected get tag() {
+    return this.ref.current?.getChildren?.()[0];
+  }
+  protected get secItem() {
+    return this.ref.current?.getChildren?.()[1];
+  }
+  setArrowSourceHighlightedStyle(): void {}
+  setArrowSourceNormalStyle(): void {}
   abstract draw(key?: number): React.ReactNode;
 }

src/features/cseMachine/components/arrows/ArrowSelection.ts

@@ -16,6 +16,7 @@ class ArrowSelectionManager {
   clearSelection(): GenericArrow<IVisible, IVisible> | null {
     const oldArrow = this.selectedArrow;
     this.selectedArrow = null;
+    oldArrow?.setNormalStyle();
     return oldArrow;
   }
 

src/features/cseMachine/components/arrows/GenericArrow.tsx

@@ -146,7 +146,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
    * Subclasses can override this to provide custom hover colors.
    */
   protected getHighlightedColor(): string {
-    return Config.ArrowHighlightedColor;
+    return this.isLive ? Config.ArrowHighlightedColor : Config.ArrowDeadHighlightedColor;
   }
 
   onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
@@ -189,8 +189,9 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
       this.arrowHeadRef.current.pointerWidth(Config.ArrowHoveredHeadSize);
       this.arrowHeadRef.current.pointerLength(Config.ArrowHoveredHeadSize);
     }
+    this.source.setArrowSourceHighlightedStyle?.();
+    this.target?.setArrowSourceHighlightedStyle?.();
   }
-
   public setNormalStyle() {
     const color = this.isLive ? defaultStrokeColor() : fadedStrokeColor();
     if (this.pathRef.current) {
@@ -202,19 +203,16 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
       this.arrowHeadRef.current.pointerWidth(Config.ArrowHeadSize);
       this.arrowHeadRef.current.pointerLength(Config.ArrowHeadSize);
     }
+    this.source.setArrowSourceNormalStyle?.();
+    this.target?.setArrowSourceNormalStyle?.();
   }
 
   onClick = (e: KonvaEventObject<MouseEvent>) => {
     e.cancelBubble = true;
 
     // Toggle selection - clear first, then select if it wasn't already selected
     const wasSelected = this.isSelected();
-    const oldArrow = arrowSelection.clearSelection();
-
-    // Update old arrow's visual state
-    if (oldArrow && oldArrow !== this) {
-      oldArrow.setNormalStyle();
-    }
+    arrowSelection.clearSelection();
 
     if (!wasSelected) {
       this.select();

src/features/cseMachine/components/values/ArrayValue.tsx

@@ -109,6 +109,14 @@ export class ArrayValue extends Value implements IHoverable {
     }
   }
 
+  setArrowSourceHighlightedStyle(): void {
+    this.units.forEach(unit => unit.setArrowSourceHighlightedStyle());
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.units.forEach(unit => unit.setArrowSourceNormalStyle());
+  }
+
   isEnclosingFrameLive(): boolean {
     const id = (this.data as any).id;
     return id ? Layout.liveObjectIDs.has(id) : false;

src/features/cseMachine/components/values/ContValue.tsx

@@ -128,6 +128,19 @@ export class ContValue extends Value implements IHoverable {
     this.labelRef.current?.hide();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.isLive()) {
+      this.setShapesStyle(Config.HoverColor);
+    } else {
+      this.setShapesStyle(Config.HoverDeadColor);
+    }
+  }
+
+  setArrowSourceNormalStyle(): void {
+    const strokeColor = this.isLive() ? defaultStrokeColor() : fadedStrokeColor();
+    this.setShapesStyle(strokeColor);
+  }
+
   draw(): React.ReactNode {
     if (this.enclosingFrame) {
       this._arrow = new ArrowFromFn(this).to(this.enclosingFrame) as ArrowFromFn;

src/features/cseMachine/components/values/FnValue.tsx

@@ -169,6 +169,19 @@ export class FnValue extends Value implements IHoverable {
     currentTarget.getLayer()?.batchDraw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.isLive()) {
+      this.setShapesStyle(Config.HoverColor);
+    } else {
+      this.setShapesStyle(Config.HoverDeadColor);
+    }
+  }
+
+  setArrowSourceNormalStyle(): void {
+    const strokeColor = this.isLive() ? defaultStrokeColor() : fadedStrokeColor();
+    this.setShapesStyle(strokeColor);
+  }
+
   isLive(): boolean {
     const id = (this.data as any).id;
     return id ? Layout.liveObjectIDs.has(id) : false;

src/features/cseMachine/components/values/GlobalFnValue.tsx

@@ -142,6 +142,19 @@ export class GlobalFnValue extends Value implements IHoverable {
     currentTarget.getLayer()?.batchDraw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    if (this.isReferenced()) {
+      this.setShapesStyle(Config.HoverColor);
+    } else {
+      this.setShapesStyle(Config.HoverDeadColor);
+    }
+  }
+
+  setArrowSourceNormalStyle(): void {
+    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
+    this.setShapesStyle(strokeColor);
+  }
+
   draw(): React.ReactNode {
     this._isDrawn = true;
     if (Layout.globalEnvNode.frame) {