improve hit test

meursyphus · Mar 22, 2024 · 6e67b0f · 6e67b0f
1 parent a99e168
commit 6e67b0f
Show file tree

Hide file tree

Showing 23 changed files with 576 additions and 408 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,7 @@
     "predocs",
     "prestory",
     "publint",
+    "renderobject",
     "rgba",
     "Shiki",
     "tailwindcss",

diff --git a/packages/docs/src/components/diagram/widget/InteractiveViewport.ts b/packages/docs/src/components/diagram/widget/InteractiveViewport.ts
@@ -40,7 +40,10 @@ class InteractiveViewportState extends State<InteractiveViewport> {
 
     if (typeof window === "undefined") return;
     this.view.addEventListener("wheel", this.handleWheel);
-    this.view.addEventListener("mousedown", this.handleDragStart);
+    this.view.parentElement!.addEventListener(
+      "mousedown",
+      this.handleDragStart,
+    );
     this.view.setAttribute("preserveAspectRatio", "none");
     document.addEventListener("mousemove", this.handleDragMove);
     document.addEventListener("mouseup", this.handleDragEnd);
@@ -56,15 +59,18 @@ class InteractiveViewportState extends State<InteractiveViewport> {
 
   dispose(): void {
     this.view.removeEventListener("wheel", this.handleWheel);
-    this.view.removeEventListener("mousedown", this.handleDragStart);
+    this.view.parentElement!.removeEventListener(
+      "mousedown",
+      this.handleDragStart,
+    );
     document.removeEventListener("mousemove", this.handleDragMove);
     document.removeEventListener("mouseup", this.handleDragEnd);
     this.resizeObserver.disconnect();
   }
 
   handleDragStart = (e: MouseEvent) => {
     this.dragPoint = new Offset({ x: e.x, y: e.y });
-    this.view.style.cursor = "grabbing"; // Change cursor shape to 'grabbing'
+    this.view.style.cursor = "grabbing";
   };
 
   handleDragMove = (e: MouseEvent) => {
@@ -146,11 +152,12 @@ class InteractiveViewportState extends State<InteractiveViewport> {
   }
 
   private notifyViewportChange() {
-    this.view.setAttribute(
-      "viewBox",
-      `${this.viedBox.x} ${this.viedBox.y} ${this.viedBox.width} ${this.viedBox.height}`,
-    );
     const scale = this.controller.getScale();
+    this.element.renderContext.setViewport({
+      translation: { x: -this.viedBox.x, y: -this.viedBox.y },
+      scale,
+    });
+
     this.controller.changeRootRect({
       left: -this.viedBox.x,
       top: -this.viedBox.y,

diff --git a/packages/flitter-svelte/src/lib/Widget.svelte b/packages/flitter-svelte/src/lib/Widget.svelte
@@ -50,6 +50,10 @@
 		runner.onMount({
 			resizeTarget: containerEl
 		});
+
+		return () => {
+			runner.dispose();
+		};
 	});
 </script>
 
@@ -66,6 +70,6 @@
 	}
 	.flitter {
 		width: 100%;
-		height: 100%
+		height: 100%;
 	}
 </style>
diff --git a/packages/flitter/src/component/Tooltip.ts b/packages/flitter/src/component/Tooltip.ts
@@ -84,19 +84,6 @@ class ToolTipState extends State<ToolTip> {
       clipped: false,
       children: [
         GestureDetector({
-          bubble: {
-            mousedown: true,
-            mouseenter: true,
-            mouseleave: true,
-            mousemove: true,
-            mouseover: true,
-            mouseup: true,
-            click: true,
-            drag: true,
-            dragend: true,
-            dragstart: true,
-            wheel: true,
-          },
           cursor: "default",
           child: this.widget.child,
           onMouseEnter: () => {

diff --git a/packages/flitter/src/component/base/BaseGestureDetector.ts b/packages/flitter/src/component/base/BaseGestureDetector.ts
@@ -1,6 +1,6 @@
 import type { RenderObjectElement } from "../../element";
 import SingleChildRenderObject from "../../renderobject/SingleChildRenderObject";
-import { TypedObject, assert, createUniqueId } from "../../utils";
+import { assert, createUniqueId } from "../../utils";
 import type { PaintContext } from "../../utils/type";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
@@ -71,7 +71,6 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
   onDragEnd: (e: MouseEvent) => void;
   onWheel: (e: WheelEvent) => void;
   cursor: Cursor;
-  bubble: Bubble;
   constructor({
     child,
     onClick,
@@ -86,7 +85,6 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
     onDragEnd,
     onDragMove,
     onDragStart,
-    bubble = {},
     onWheel,
   }: {
     child?: Widget;
@@ -103,6 +101,11 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
     onWheel?: (e: WheelEvent) => void;
     cursor?: Cursor;
     key?: any;
+
+    /**
+     * @deprecated
+     * This prop is no longer used. Please use e.stopPropagation() instead.
+     */
     bubble?: Partial<Bubble>;
   }) {
     super({ child, key });
@@ -118,20 +121,6 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
     this.onDragEnd = onDragEnd ?? emptyCallback;
     this.onWheel = onWheel ?? emptyCallback;
     this.cursor = cursor ?? "pointer";
-    this.bubble = {
-      mousedown: false,
-      mouseenter: false,
-      mouseleave: false,
-      mousemove: false,
-      mouseover: false,
-      mouseup: false,
-      click: false,
-      wheel: false,
-      dragstart: false,
-      dragend: false,
-      drag: false,
-      ...bubble,
-    };
   }
 
   override createRenderObject(): RenderGestureDetector {
@@ -148,7 +137,6 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
       onDragEnd: this.onDragEnd,
       onWheel: this.onWheel,
       cursor: this.cursor,
-      bubble: this.bubble,
     });
   }
 
@@ -161,21 +149,13 @@ class BaseGestureDetector extends SingleChildRenderObjectWidget {
     renderObject.onDragStart = this.onDragStart;
     renderObject.onDragMove = this.onDragMove;
     renderObject.onDragEnd = this.onDragEnd;
-    renderObject.bubble = this.bubble;
     renderObject.onWheel = this.onWheel;
   }
 }
 
-class RenderGestureDetector extends SingleChildRenderObject {
+export class RenderGestureDetector extends SingleChildRenderObject {
   isRenderGestureDetector = true;
-  private id = createUniqueId();
-  private _bubble: Bubble;
-  get bubble(): Bubble {
-    return this._bubble;
-  }
-  set bubble(prop: Bubble) {
-    this._bubble = prop;
-  }
+  id = createUniqueId();
   private _cursor: Cursor;
   get cursor(): Cursor {
     return this._cursor;
@@ -286,7 +266,6 @@ class RenderGestureDetector extends SingleChildRenderObject {
     onDragMove,
     onDragStart,
     cursor,
-    bubble,
     onWheel,
   }: {
     onClick: MouseEventCallback;
@@ -301,7 +280,6 @@ class RenderGestureDetector extends SingleChildRenderObject {
     onDragEnd: MouseEventCallback;
     onWheel: (e: WheelEvent) => void;
     cursor: Cursor;
-    bubble: Bubble;
   }) {
     super({ isPainter: true });
     this._onClick = onClick;
@@ -316,44 +294,12 @@ class RenderGestureDetector extends SingleChildRenderObject {
     this._onDragStart = onDragStart;
     this._onWheel = onWheel;
     this._cursor = cursor;
-    this._bubble = bubble;
-  }
-  private get listeners(): Record<
-    EventType,
-    MouseEventCallback | ((e: WheelEvent) => void)
-  > {
-    const listeners = {
-      click: this.onClick,
-      mousedown: this.onMouseDown,
-      mousemove: this.onMouseMove,
-      mouseup: this.onMouseUp,
-      mouseover: this.onMouseOver,
-      mouseenter: this.onMouseEnter,
-      mouseleave: this.onMouseLeave,
-      wheel: this.onWheel,
-      dragstart: this.onDragStart,
-      drag: this.onDragMove,
-      dragend: this.onDragEnd,
-    };
-
-    return TypedObject.keys(listeners).reduce(
-      (acc, key) => {
-        acc[key] = (e: any) => {
-          if (this.bubble[key]) {
-            this.dispatchParent(e);
-          }
-          listeners[key]?.(e);
-        };
-
-        return acc;
-      },
-      {} as Record<EventType, MouseEventCallback | ((e: WheelEvent) => void)>,
-    );
   }
 
   attach(ownerElement: RenderObjectElement): void {
     super.attach(ownerElement);
     this.addEventListeners();
+    this.renderOwner.hitTestDispatcher.addDetector(this);
   }
 
   dispose(context: PaintContext): void {
@@ -364,6 +310,7 @@ class RenderGestureDetector extends SingleChildRenderObject {
       globalDragBackend = null;
     }
     super.dispose(context);
+    this.renderOwner.hitTestDispatcher.removeDetector(this);
   }
 
   private removeEventListeners() {
@@ -374,26 +321,14 @@ class RenderGestureDetector extends SingleChildRenderObject {
     const isBrowser = typeof window !== "undefined";
     if (!isBrowser) return;
 
-    const {
-      svgEls: { rect },
-    } = this.resolveSvgEl();
-
     const dragBackend = getSingletonDragBackend();
     dragBackend.isSetup || dragBackend.setup();
     backendRefCount++;
 
-    const { drag, dragend, dragstart, ...restListeners } = this.listeners;
-
-    dragBackend.connectDragSource(this.id, rect, {
-      onDragStart: dragstart,
-      onDragMove: drag,
-      onDragEnd: dragend,
-    });
-
-    TypedObject.entries(restListeners).forEach(([type, listener]) => {
-      rect.addEventListener(type, (e: any) => {
-        listener(e);
-      });
+    dragBackend.connectDragSource(this, {
+      onDragStart: this.onDragStart,
+      onDragMove: this.onDragMove,
+      onDragEnd: this.onDragEnd,
     });
   }
 
@@ -411,22 +346,6 @@ class RenderGestureDetector extends SingleChildRenderObject {
       rect,
     };
   }
-
-  dispatch(e: Event) {
-    this.listeners[e.type]?.(e);
-  }
-
-  dispatchParent(e: Event) {
-    let parent = this.parent;
-
-    while (parent != null) {
-      if ((parent as RenderGestureDetector)?.isRenderGestureDetector) {
-        (parent as RenderGestureDetector).dispatch(e);
-        break;
-      }
-      parent = parent.parent;
-    }
-  }
 }
 
 type MouseEventCallback = (event: MouseEvent) => void;
@@ -475,9 +394,12 @@ class DragBackend {
     this.activeDragSourceId = null;
   };
 
+  setActiveDragSourceId(sourceId: string) {
+    this.activeDragSourceId = sourceId;
+  }
+
   public connectDragSource(
-    sourceId: string,
-    node: SVGElement,
+    detector: RenderGestureDetector,
     {
       onDragStart = emptyCallback,
       onDragMove = emptyCallback,
@@ -488,14 +410,13 @@ class DragBackend {
       onDragEnd?: (e: MouseEvent) => void;
     } = {},
   ) {
-    this.dragStartListener[sourceId] = e => {
-      this.activeDragSourceId = sourceId;
+    const sourceId = detector.id;
+    const onMouseDown = detector.onMouseDown;
+    detector.onMouseDown = (e: MouseEvent) => {
+      onMouseDown(e);
+      this.setActiveDragSourceId(sourceId);
       onDragStart(e);
     };
-    node.addEventListener(
-      "mousedown",
-      this.dragStartListener[sourceId].bind(this),
-    );
     this.dragMoveListener[sourceId] = e => {
       onDragMove(e);
     };

diff --git a/packages/flitter/src/element/Element.ts b/packages/flitter/src/element/Element.ts
@@ -1,7 +1,6 @@
 import type RenderObject from "../renderobject/RenderObject";
 import type { RenderContext } from "../runApp";
-import type { BuildOwner, Scheduler } from "../scheduler";
-import type { GlobalKey } from "../scheduler";
+import type { BuildOwner, Scheduler, GlobalKey } from "../scheduler";
 import Widget from "../widget/Widget";
 
 class Element {