end viewport drag if node pointerup handler is defined

sayari-analytics · Oct 12, 2023 · ded6412 · ded6412
1 parent c1c78f0
commit ded6412
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/renderers/webgl/node.ts b/src/renderers/webgl/node.ts
@@ -28,6 +28,7 @@ export class NodeRenderer {
   private fillMounted = false
   private strokeMounted = false
   private labelMounted = false
+  private dragging = false
 
   constructor(renderer: Renderer, node: Graph.Node) {
     this.renderer = renderer
@@ -63,12 +64,7 @@ export class NodeRenderer {
     const yChanged = y !== this.y
     const radiusChanged = node.radius !== this.node?.radius
 
-    if (
-      (xChanged || yChanged || radiusChanged) &&
-      !this.renderer.dragInteraction.dragging &&
-      this.renderer.animateNodePosition &&
-      this.renderer.renderedNodes
-    ) {
+    if ((xChanged || yChanged || radiusChanged) && !this.dragging && this.renderer.animateNodePosition && this.renderer.renderedNodes) {
       if (xChanged && this.renderer.animateNodePosition) {
         this.interpolateX = interpolate(this.x, x, this.renderer.animateNodePosition)
       }
@@ -262,8 +258,8 @@ export class NodeRenderer {
 
     const local = this.renderer.root.toLocal(event.global)
 
-    if (!this.renderer.dragInteraction.dragging) {
-      this.renderer.dragInteraction.dragging = true
+    if (!this.dragging) {
+      this.dragging = true
       this.renderer.onNodeDragStart?.({
         type: 'nodeDrag',
         x: local.x,
@@ -299,7 +295,7 @@ export class NodeRenderer {
   }
 
   pointerUp = (event: FederatedPointerEvent) => {
-    const isDragging = this.renderer.dragInteraction.dragging
+    const isDragging = this.dragging
     const local = this.renderer.root.toLocal(event.global)
 
     if (this.renderer.onNodeDrag) {
@@ -311,8 +307,7 @@ export class NodeRenderer {
       this.nodeMoveXOffset = 0
       this.nodeMoveYOffset = 0
 
-      if (this.renderer.dragInteraction.dragging) {
-        this.renderer.dragInteraction.dragging = false
+      if (isDragging) {
         if (this.renderer.onNodeDragEnd) {
           event.stopPropagation()
           this.renderer.onNodeDragEnd({
@@ -334,6 +329,9 @@ export class NodeRenderer {
       }
     }
 
+    this.renderer.dragInteraction.up(event)
+    this.renderer.decelerateInteraction.up()
+
     if (this.renderer.onNodePointerUp) {
       event.stopPropagation()
       this.renderer.onNodePointerUp({
@@ -390,6 +388,8 @@ export class NodeRenderer {
         }
       }
     }
+
+    this.dragging = false
   }
 
   pointerLeave = (event: FederatedPointerEvent) => {

diff --git a/tests/webgl/index.ts b/tests/webgl/index.ts
@@ -110,9 +110,9 @@ const options: Renderer.Options = {
   // onViewportDragEnd: (event: Renderer.ViewportDragEvent | Renderer.ViewportDragDecelerateEvent) => {
   //   console.log('viewport drag end', `x: ${event.dx}, y: ${event.dy}`)
   // },
-  onViewportPointerUp: (event: Renderer.ViewportPointerEvent) => {
-    console.log('viewport pointer up', `x: ${event.x}, y: ${event.y}`)
-  },
+  // onViewportPointerUp: (event: Renderer.ViewportPointerEvent) => {
+  //   console.log('viewport pointer up', `x: ${event.x}, y: ${event.y}`)
+  // },
   // onViewportClick: (event: Renderer.ViewportPointerEvent) => {
   //   console.log('viewport click', `x: ${event.x}, y: ${event.y}`)
   //   // if (options.x === 0 && options.y === 0 && options.zoom === 1) {
@@ -175,19 +175,19 @@ const options: Renderer.Options = {
   // onNodeDragStart: (event: Renderer.NodeDragEvent) => {
   //   console.log('node drag start', `x: ${event.x}, y: ${event.y}`)
   // },
-  onNodeDrag: (event: Renderer.NodeDragEvent) => {
-    console.log('node drag', `x: ${event.x}, y: ${event.y}`)
-    nodes = nodes.map((node) =>
-      node.id === event.target.id ? { ...node, x: (node.x ?? 0) + event.dx, y: (node.y ?? 0) + event.dy } : node
-    )
-    renderer.update({ nodes, edges, options })
-  },
+  // onNodeDrag: (event: Renderer.NodeDragEvent) => {
+  //   console.log('node drag', `x: ${event.x}, y: ${event.y}`)
+  //   nodes = nodes.map((node) =>
+  //     node.id === event.target.id ? { ...node, x: (node.x ?? 0) + event.dx, y: (node.y ?? 0) + event.dy } : node
+  //   )
+  //   renderer.update({ nodes, edges, options })
+  // },
   // onNodeDragEnd: (event: Renderer.NodeDragEvent) => {
   //   console.log('node drag end', `x: ${event.x}, y: ${event.y}`)
   // },
-  onNodePointerUp: (event: Renderer.NodePointerEvent) => {
-    console.log('node pointer up', `x: ${event.x}, y: ${event.y}`)
-  },
+  // onNodePointerUp: (event: Renderer.NodePointerEvent) => {
+  //   console.log('node pointer up', `x: ${event.x}, y: ${event.y}`)
+  // },
   // onNodeClick: (event: Renderer.NodePointerEvent) => {
   //   console.log('node pointer click', `x: ${event.x}, y: ${event.y}`)
   //   // const graph = hierarchy(event.target.id, { nodes, edges, options: { separation: (a, b) => 1, nodeSize: [30, 100] } })