feat(GraphComponent, HitBox): introduce interactive and non-boundary components (#130)

* feat: introduce interactive and non-boundary components.

Author: draedful

src/components/canvas/EventedComponent/EventedComponent.ts

@@ -4,15 +4,35 @@ type TEventedComponentListener = Component | ((e: Event) => void);
 
 const listeners = new WeakMap<Component, Map<string, Set<TEventedComponentListener>>>();
 
+export type TEventedComponentProps = TComponentProps & { interactive?: boolean };
+
 export class EventedComponent<
-  Props extends TComponentProps = TComponentProps,
+  Props extends TEventedComponentProps = TEventedComponentProps,
   State extends TComponentState = TComponentState,
   Context extends TComponentContext = TComponentContext,
 > extends Component<Props, State, Context> {
   public readonly evented: boolean = true;
 
   public cursor?: string;
 
+  constructor(props: Props, parent: Component) {
+    super(
+      {
+        ...props,
+        interactive: props.interactive ?? true,
+      },
+      parent
+    );
+  }
+
+  public isInteractive() {
+    return this.props.interactive;
+  }
+
+  public setInteractive(interactive: boolean) {
+    this.setProps({ interactive });
+  }
+
   private get events() {
     if (!listeners.has(this)) {
       listeners.set(this, new Map());
@@ -50,7 +70,10 @@ export class EventedComponent<
     }
   }
 
-  public _fireEvent(cmp: Component, event: Event) {
+  protected _fireEvent(cmp: Component, event: Event) {
+    if (cmp instanceof EventedComponent && !cmp.isInteractive?.()) {
+      return;
+    }
     const handlers = listeners.get(cmp)?.get?.(event.type);
 
     handlers?.forEach((cb) => {
@@ -65,7 +88,7 @@ export class EventedComponent<
   public dispatchEvent(event: Event): boolean {
     const bubbles = event.bubbles || false;
 
-    if (bubbles) {
+    if (bubbles || !this.isInteractive()) {
       return this._dipping(this, event);
     } else if (this._hasListener(this, event.type)) {
       this._fireEvent(this, event);
@@ -74,7 +97,7 @@ export class EventedComponent<
     return false;
   }
 
-  public _dipping(startParent: Component, event: Event) {
+  protected _dipping(startParent: Component, event: Event) {
     let stopPropagation = false;
     let parent: Component = startParent;
     event.stopPropagation = () => {
@@ -92,7 +115,7 @@ export class EventedComponent<
     return true;
   }
 
-  public _hasListener(comp: EventedComponent, type: string) {
+  protected _hasListener(comp: EventedComponent, type: string) {
     return listeners.get(comp)?.has?.(type);
   }
 }

src/components/canvas/GraphComponent/index.tsx

@@ -14,10 +14,16 @@ import { TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
 export type GraphComponentContext = TComponentContext &
   TGraphLayerContext & {
     graph: Graph;
+    affectsUsableRect?: boolean;
   };
 
+export type TGraphComponentProps = TComponentProps & {
+  interactive?: boolean;
+  affectsUsableRect?: boolean;
+};
+
 export class GraphComponent<
-  Props extends TComponentProps = TComponentProps,
+  Props extends TGraphComponentProps = TGraphComponentProps,
   State extends TComponentState = TComponentState,
   Context extends GraphComponentContext = GraphComponentContext,
 > extends EventedComponent<Props, State, Context> {
@@ -27,9 +33,18 @@ export class GraphComponent<
 
   protected ports: Map<TPortId, PortState> = new Map();
 
+  public get affectsUsableRect() {
+    return this.props.affectsUsableRect ?? this.context.affectsUsableRect ?? true;
+  }
+
   constructor(props: Props, parent: Component) {
     super(props, parent);
+
+    // Determine affectsUsableRect value: explicit prop > parent context > default (true)
     this.hitBox = new HitBox(this, this.context.graph.hitTest);
+    const affectsUsableRect = props.affectsUsableRect ?? this.context.affectsUsableRect ?? true;
+    this.setProps({ affectsUsableRect });
+    this.setContext({ affectsUsableRect });
   }
 
   public createPort(id: TPortId) {
@@ -45,6 +60,44 @@ export class GraphComponent<
     return this.ports.get(id)!;
   }
 
+  protected setAffectsUsableRect(affectsUsableRect: boolean) {
+    this.setProps({ affectsUsableRect });
+    this.setContext({ affectsUsableRect });
+  }
+
+  protected propsChanged(_nextProps: Props): void {
+    if (this.affectsUsableRect !== _nextProps.affectsUsableRect) {
+      this.hitBox.setAffectsUsableRect(_nextProps.affectsUsableRect);
+      this.setContext({ affectsUsableRect: _nextProps.affectsUsableRect });
+    }
+    super.propsChanged(_nextProps);
+  }
+
+  protected contextChanged(_nextContext: Context): void {
+    // If affectsUsableRect changed in context and there's no explicit prop override
+    if (
+      this.firstRender ||
+      (this.context.affectsUsableRect !== _nextContext.affectsUsableRect && this.props.affectsUsableRect === undefined)
+    ) {
+      this.hitBox.setAffectsUsableRect(_nextContext.affectsUsableRect);
+    }
+    super.contextChanged(_nextContext);
+  }
+
+  public onChange(cb: (v: this) => void) {
+    return this.addEventListener("graph-component-change", () => {
+      cb(this);
+    });
+  }
+
+  protected checkData() {
+    if (super.checkData()) {
+      this.dispatchEvent(new Event("graph-component-change"));
+      return true;
+    }
+    return false;
+  }
+
   protected onDrag({
     onDragStart,
     onDragUpdate,

src/components/canvas/anchors/index.ts

@@ -5,7 +5,7 @@ import { TBlockId } from "../../../store/block/Block";
 import { selectBlockAnchor } from "../../../store/block/selectors";
 import { debounce, isMetaKeyEvent } from "../../../utils/functions";
 import { TPoint } from "../../../utils/types/shapes";
-import { GraphComponent } from "../GraphComponent";
+import { GraphComponent, TGraphComponentProps } from "../GraphComponent";
 import { GraphLayer, TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
 
 export type TAnchor = {
@@ -15,12 +15,13 @@ export type TAnchor = {
   index?: number;
 };
 
-export type TAnchorProps = TAnchor & {
-  size: number;
-  lineWidth: number;
-  zIndex: number;
-  getPosition: (anchor: TAnchor) => TPoint;
-};
+export type TAnchorProps = TGraphComponentProps &
+  TAnchor & {
+    size: number;
+    lineWidth: number;
+    zIndex: number;
+    getPosition: (anchor: TAnchor) => TPoint;
+  };
 
 type TAnchorState = {
   size: number;

src/components/canvas/blocks/Block.ts

@@ -2,6 +2,7 @@ import { signal } from "@preact/signals-core";
 import cloneDeep from "lodash/cloneDeep";
 import isObject from "lodash/isObject";
 
+import { Component } from "../../../lib/Component";
 import { ECameraScaleLevel } from "../../../services/camera/CameraService";
 import { TGraphSettingsConfig } from "../../../store";
 import { EAnchorType } from "../../../store/anchor/Anchor";
@@ -14,9 +15,9 @@ import { TMeasureTextOptions } from "../../../utils/functions/text";
 import { TTExtRect, renderText } from "../../../utils/renderers/text";
 import { EVENTS } from "../../../utils/types/events";
 import { TPoint, TRect } from "../../../utils/types/shapes";
-import { GraphComponent } from "../GraphComponent";
+import { GraphComponent, TGraphComponentProps } from "../GraphComponent";
 import { Anchor, TAnchor } from "../anchors";
-import { GraphLayer, TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
+import { TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
 
 import { BlockController } from "./controllers/BlockController";
 
@@ -48,9 +49,9 @@ export type TBlock<T extends Record<string, unknown> = {}> = {
   meta?: T;
 };
 
-export type TBlockProps = {
+export type TBlockProps = TGraphComponentProps & {
   id: TBlockId;
-  font: string;
+  font?: string;
 };
 
 declare module "../../../graphEvents" {
@@ -123,7 +124,7 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
 
   public $viewState = signal<BlockViewState>({ zIndex: 0, order: 0 });
 
-  constructor(props: Props, parent: GraphLayer) {
+  constructor(props: Props, parent: Component) {
     super(props, parent);
 
     this.subscribe(props.id);

src/components/canvas/layers/graphLayer/GraphLayer.ts

@@ -226,7 +226,7 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
   private onRootPointerMove(event: MouseEvent) {
     if (this.targetComponent !== this.prevTargetComponent) {
-      if (this.targetComponent?.cursor) {
+      if (this.targetComponent?.isInteractive() && this.targetComponent?.cursor) {
         this.root.style.cursor = this.targetComponent?.cursor;
       } else {
         this.root.style.removeProperty("cursor");

src/lib/Component.ts

@@ -34,10 +34,11 @@ export class Component<
     // noop
   }
 
-  public setContext<K extends keyof Context>(context: Pick<Context, K>) {
+  public setContext<K extends keyof Context>(context: Partial<Pick<Context, K>>) {
     this.shouldRenderChildren = true;
     this.shouldUpdateChildren = true;
-    super.setContext(context);
+    super.setContext({ ...this.context, ...context });
+    this.contextChanged(this.context);
   }
 
   public setProps<K extends keyof Props>(props?: Pick<Props, K>) {
@@ -72,20 +73,28 @@ export class Component<
     // noop
   }
 
+  protected contextChanged(_nextContext: Context): void {
+    // noop
+  }
+
   protected checkData() {
     const data = this.__data;
+    let updated = false;
 
     if (data.nextProps !== undefined) {
       this.propsChanged(data.nextProps);
       assign(this.props, data.nextProps);
       data.nextProps = undefined;
+      updated = true;
     }
 
     if (data.nextState !== undefined) {
       this.stateChanged(data.nextState);
       assign(this.state, data.nextState);
       data.nextState = undefined;
+      updated = true;
     }
+    return updated;
   }
 
   protected willRender() {

src/lib/CoreComponent.ts

@@ -97,7 +97,19 @@ export class CoreComponent<
   }
 
   public setContext<K extends keyof Context>(context: Pick<Context, K>) {
-    Object.assign(this.context, context);
+    this.context = Object.assign({}, this.context, context);
+
+    // Propagate context changes to all children
+    const children = this.__comp.children;
+    const childrenKeys = this.__comp.childrenKeys;
+
+    for (let i = 0; i < childrenKeys.length; i += 1) {
+      const child = children[childrenKeys[i]];
+      if (child) {
+        child.setContext(context);
+      }
+    }
+
     this.performRender();
   }
 

src/react-components/Block.tsx

@@ -57,6 +57,17 @@ export const GraphBlock = <T extends TBlock>({
     }
   }, [state?.x, state?.y, state?.width, state?.height]);
 
+  useEffect(() => {
+    if (viewState && containerRef.current) {
+      containerRef.current.style.pointerEvents = viewState.isInteractive() ? "auto" : "none";
+      return viewState.onChange(() => {
+        if (containerRef.current) {
+          containerRef.current.style.pointerEvents = viewState.isInteractive() ? "auto" : "none";
+        }
+      });
+    }
+  }, [viewState]);
+
   useEffect(() => {
     if (viewState && containerRef.current) {
       return viewState.$viewState.subscribe(({ zIndex, order }) => {