fix: Delegate pointer-events from the BlockGroupLayer to the Camera on interact with groups (#57)

Author: draedful

src/components/canvas/GraphComponent/index.tsx

@@ -33,6 +33,7 @@ export class GraphComponent<
     onDragStart,
     onDragUpdate,
     onDrop,
+    isDraggable,
   }: {
     onDragStart?: (_event: MouseEvent) => void | boolean;
     onDragUpdate?: (
@@ -45,9 +46,13 @@ export class GraphComponent<
       _event: MouseEvent
     ) => void;
     onDrop?: (_event: MouseEvent) => void;
+    isDraggable?: (event: MouseEvent) => boolean;
   }) {
     let startDragCoords: [number, number];
     return this.addEventListener("mousedown", (event: MouseEvent) => {
+      if (!isDraggable?.(event)) {
+        return;
+      }
       event.stopPropagation();
       dragListener(this.context.ownerDocument)
         .on(EVENTS.DRAG_START, (event: MouseEvent) => {

src/components/canvas/groups/BlockGroups.ts

@@ -1,6 +1,7 @@
 import { Signal, computed } from "@preact/signals-core";
 
 import { Graph } from "../../../graph";
+import { CoreComponent } from "../../../lib";
 import { TComponentState } from "../../../lib/Component";
 import { Layer, LayerContext, LayerProps } from "../../../services/Layer";
 import { BlockState } from "../../../store/block/Block";
@@ -104,6 +105,14 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
     );
   }
 
+  public getParent(): CoreComponent | undefined {
+    /*
+     * Override parent to delegate click events to camera.
+     * This allows camera movement when mouse button is held down.
+     */
+    return this.props.graph.getGraphLayer().$.camera;
+  }
+
   public updateBlocks = (groupId: TGroupId, { diffX, diffY }: { diffX: number; diffY: number }) => {
     if ((this.props as BlockGroupsProps & { updateBlocksOnDrag?: boolean }).updateBlocksOnDrag) {
       const blocks = this.$groupsBlocksMap.value[groupId];

src/components/canvas/groups/Group.ts

@@ -101,28 +101,26 @@ export class Group<T extends TGroup = TGroup> extends GraphComponent<TGroupProps
     this.subscribeToGroup();
 
     this.addEventListener("click", (event: MouseEvent) => {
-      event.stopPropagation();
       this.groupState.setSelection(
         true,
         !isMetaKeyEvent(event) ? ESelectionStrategy.REPLACE : ESelectionStrategy.APPEND
       );
     });
 
     this.onDrag({
+      isDraggable: () => this.isDraggable(),
       onDragUpdate: ({ diffX, diffY }) => {
-        if (this.isDraggable()) {
-          const rect = {
-            x: this.state.rect.x - diffX,
-            y: this.state.rect.y - diffY,
-            width: this.state.rect.width,
-            height: this.state.rect.height,
-          };
-          this.setState({
-            rect,
-          });
-          this.updateHitBox(rect);
-          this.props.onDragUpdate(this.props.id, { diffX, diffY });
-        }
+        const rect = {
+          x: this.state.rect.x - diffX,
+          y: this.state.rect.y - diffY,
+          width: this.state.rect.width,
+          height: this.state.rect.height,
+        };
+        this.setState({
+          rect,
+        });
+        this.updateHitBox(rect);
+        this.props.onDragUpdate(this.props.id, { diffX, diffY });
       },
     });
   }

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

@@ -332,6 +332,7 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
   public updateChildren() {
     const cameraProps: TCameraProps = {
+      /* Blocks must be initialized before connections as connections need Block instances to access their geometry */
       children: [DrawOver.create(), Blocks.create(), DrawBelow.create(), BlockConnections.create()],
       root: this.root,
     };

src/graph.ts

@@ -121,6 +121,10 @@ export class Graph {
     this.setupGraph(config);
   }
 
+  public getGraphLayer() {
+    return this.graphLayer;
+  }
+
   public setColors(colors: RecursivePartial<TGraphColors>) {
     this.$graphColors.value = merge({}, initGraphColors, colors);
     this.emit("colors-changed", { colors: this.graphColors });