CSE Machine : Fix Highlighting

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,18 @@ export class ArrayUnit extends Visible {
     if (!CseMachine.getPrintableMode()) this.indexRef.current?.hide();
   }
 
+  setArrowSourceHighlightedStyle(): void {
+    this.ref.current?.stroke(Config.HoverColor);
+  }
+
+  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,18 @@ export class ControlItemComponent extends Visible implements IHoverable {
     this.ref.current.zIndex(this.zIndex);
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.resetStyle();
+    this.tag?.stroke(Config.HoverColor);
+    this.secItem?.fill(Config.HoverColor);
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.resetStyle();
+    this.tag?.stroke(this.topItem ? defaultActiveColor() : defaultStrokeColor());
+    this.secItem?.fill(defaultTextColor());
+  }
+
   destroy() {
     this.ref.current.destroyChildren();
   }

src/features/cseMachine/components/Frame.tsx

@@ -59,6 +59,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<any>();
   /** the level in which this frame resides */
   readonly level: Level | undefined;
   /** environment associated with this frame */
@@ -260,13 +261,30 @@ export class Frame extends Visible implements IHoverable {
 
   onMouseLeave = () => {};
 
+  setArrowSourceHighlightedStyle(): void {
+    this.rectRef.current?.stroke(Config.HoverColor);
+    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,18 @@ export class StashItemComponent extends Visible implements IHoverable {
     this.ref.current.zIndex(this.zIndex);
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.resetStyle();
+    this.tag?.stroke(Config.HoverColor);
+    this.secItem?.fill(Config.HoverColor);
+  }
+
+  setArrowSourceNormalStyle(): void {
+    this.resetStyle();
+    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,14 @@ export class Text extends Visible implements IHoverable {
     currentTarget.getLayer()?.draw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    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

@@ -30,6 +30,21 @@ export abstract class Visible implements IVisible {
   reset(): void {
     this._isDrawn = false;
   }
+  setShapesStyle(color: string) {
+    const shapes = this.ref.current?.getChildren?.() ?? [];
+    shapes.forEach((shape: any) => {
+      if (shape.attrs.stroke) shape.stroke(color);
+      if (shape.attrs.fill) shape.fill(color);
+    });
+  }
   public ref: RefObject<any> = React.createRef();
+  protected tag = this.ref.current?.getChildren?.()[0];
+  protected secItem = this.ref.current?.getChildren?.()[1];
+  resetStyle(): void {
+    this.tag = this.ref.current?.getChildren?.()[0];
+    this.secItem = this.ref.current?.getChildren?.()[1];
+  }
+  setArrowSourceHighlightedStyle(): void {}
+  setArrowSourceNormalStyle(): void {}
   abstract draw(key?: number): React.ReactNode;
 }

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

@@ -189,6 +189,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
       this.arrowHeadRef.current.pointerWidth(Config.ArrowHoveredHeadSize);
       this.arrowHeadRef.current.pointerLength(Config.ArrowHoveredHeadSize);
     }
+    this.source.setArrowSourceHighlightedStyle?.();
   }
 
   public setNormalStyle() {
@@ -202,6 +203,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
       this.arrowHeadRef.current.pointerWidth(Config.ArrowHeadSize);
       this.arrowHeadRef.current.pointerLength(Config.ArrowHeadSize);
     }
+    this.source.setArrowSourceNormalStyle?.();
   }
 
   onClick = (e: KonvaEventObject<MouseEvent>) => {
@@ -220,6 +222,9 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
       this.select();
       // Update this arrow's visual state
       this.setHighlightedStyle();
+    } else {
+      // If the arrow was already selected, deselect it and revert to normal style
+      this.setNormalStyle();
     }
 
     // Force redraw entire layer to update all arrows

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

@@ -128,6 +128,15 @@ export class ContValue extends Value implements IHoverable {
     this.labelRef.current?.hide();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.setShapesStyle(Config.HoverColor);
+  }
+
+  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,15 @@ export class FnValue extends Value implements IHoverable {
     currentTarget.getLayer()?.batchDraw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.setShapesStyle(Config.HoverColor);
+  }
+
+  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,15 @@ export class GlobalFnValue extends Value implements IHoverable {
     currentTarget.getLayer()?.batchDraw();
   };
 
+  setArrowSourceHighlightedStyle(): void {
+    this.setShapesStyle(Config.HoverColor);
+  }
+
+  setArrowSourceNormalStyle(): void {
+    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
+    this.setShapesStyle(strokeColor);
+  }
+
   draw(): React.ReactNode {
     this._isDrawn = true;
     if (Layout.globalEnvNode.frame) {