fix: fix propagating events

Author: draedful

src/components/canvas/EventedComponent/EventedComponent.ts

@@ -87,12 +87,13 @@ export class EventedComponent<
   }
 
   public dispatchEvent(event: Event): boolean {
-    const bubbles = event.bubbles || false;
-
-    if (bubbles || !this.isInteractive()) {
+    if (!this.isInteractive()) {
       return this._dipping(this, event);
     } else if (this._hasListener(this, event.type)) {
       this._fireEvent(this, event);
+      if (event.bubbles) {
+        return this._dipping(this, event);
+      }
       return false;
     }
     return false;

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

@@ -67,7 +67,7 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
     super({
       canvas: {
         zIndex: 2,
-        classNames: ["no-user-select"],
+        classNames: ["no-user-select", "no-pointer-events"],
         transformByCameraPosition: true,
       },
       // HTML element creation is now separated into framework-specific layers

src/stories/Playground/GraphPlayground.tsx

@@ -14,8 +14,19 @@ import { TBlock } from "../../components/canvas/blocks/Block";
 import { random } from "../../components/canvas/blocks/generate";
 import { ConnectionLayer } from "../../components/canvas/layers/connectionLayer/ConnectionLayer";
 import { Graph, GraphState, TGraphConfig } from "../../graph";
-import { GraphBlock, GraphCanvas, HookGraphParams, useGraph, useGraphEvent, useLayer } from "../../react-components";
+import { TComponentState } from "../../lib/Component";
+import {
+  GraphBlock,
+  GraphCanvas,
+  GraphLayer,
+  GraphPortal,
+  HookGraphParams,
+  useGraph,
+  useGraphEvent,
+  useLayer,
+} from "../../react-components";
 import { useFn } from "../../react-components/utils/hooks/useFn";
+import { Layer, LayerContext, LayerProps } from "../../services/Layer";
 import { ECanChangeBlockGeometry } from "../../store/settings";
 import { EAnchorType } from "../configurations/definitions";
 
@@ -331,7 +342,14 @@ export function GraphPLayground() {
               <Toolbox graph={graph} className="graph-tools-zoom button-group" />
               <GraphSettings className="graph-tools-settings" graph={graph} />
             </Flex>
-            <GraphCanvas graph={graph} renderBlock={renderBlockFn} />
+            <GraphCanvas graph={graph} renderBlock={renderBlockFn}>
+              <GraphPortal className="no-pointer-events" zIndex={1} transformByCameraPosition={true}>
+                <div>
+                  <h1>DevTools</h1>
+                </div>
+              </GraphPortal>
+              <GraphLayer layer={SomeLayer} />
+            </GraphCanvas>
           </Flex>
         </Flex>
         <Flex direction="column" grow={1} className="content" gap={6}>
@@ -351,4 +369,22 @@ export function GraphPLayground() {
   );
 }
 
+class SomeLayer extends Layer<LayerProps, LayerContext, TComponentState> {
+  constructor(props: LayerProps) {
+    super({
+      canvas: {
+        zIndex: 100,
+        transformByCameraPosition: true,
+      },
+      ...props,
+    });
+  }
+
+  protected render(): void {
+    super.render();
+    this.context.ctx.fillStyle = "red";
+    this.context.ctx.fillRect(0, 0, 100, 100);
+  }
+}
+
 export const Default: StoryFn = () => <GraphPLayground />;