Skip to content

Commit

Permalink
don't fire viewport pointer up event if pointer down event wasn't alr…
Browse files Browse the repository at this point in the history 
…eady fired
  • Loading branch information
@jameslaneconkling
jameslaneconkling committed Oct 12, 2023
1 parent 0e17ee4 commit c1c78f0
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 73 deletions.
73 changes: 41 additions & 32 deletions src/renderers/webgl/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,20 +143,22 @@ export class Renderer {
nodeRenderersById: Record<string, NodeRenderer> = {}
edges: Graph.Edge[] = []
edgeRenderersById: Record<string, EdgeRenderer> = {}
#doubleClickTimeout?: number
#doubleClick = false
#renderedPosition = false
renderedNodes = false
#interpolateX?: (dt: number) => { value: number; done: boolean }
#interpolateY?: (dt: number) => { value: number; done: boolean }
#interpolateZoom?: (dt: number) => { value: number; done: boolean }
dragInertia = defaultOptions.dragInertia
animateViewport: number | false = defaultOptions.animateViewport
animateNodePosition: number | false = defaultOptions.animateNodePosition
animateNodeRadius: number | false = defaultOptions.animateNodeRadius
circle: CircleTexture
arrow: ArrowTexture

private doubleClick = false
private doubleClickTimeout?: number
private renderedPosition = false
private interpolateX?: (dt: number) => { value: number; done: boolean }
private interpolateY?: (dt: number) => { value: number; done: boolean }
private interpolateZoom?: (dt: number) => { value: number; done: boolean }
private pointerIsDown = false

onViewportPointerEnter?: (event: ViewportPointerEvent) => void
onViewportPointerDown?: (event: ViewportPointerEvent) => void
onViewportPointerMove?: (event: ViewportPointerEvent) => void
Expand Down Expand Up @@ -331,23 +333,23 @@ export class Renderer {
!this.decelerateInteraction.decelerating &&
!this.zoomInteraction.zooming &&
this.animateViewport &&
this.#renderedPosition
this.renderedPosition
) {
if (xChanged) {
this.#interpolateX = interpolate(this.x, x, this.animateViewport)
this.interpolateX = interpolate(this.x, x, this.animateViewport)
}
if (yChanged) {
this.#interpolateY = interpolate(this.y, y, this.animateViewport)
this.interpolateY = interpolate(this.y, y, this.animateViewport)
}
if (zoomChanged) {
this.#interpolateZoom = interpolate(this.zoom, zoom, this.animateViewport)
this.interpolateZoom = interpolate(this.zoom, zoom, this.animateViewport)
}
} else {
this.setPosition(x, y, zoom)
this.#renderedPosition = true
this.#interpolateX = undefined
this.#interpolateY = undefined
this.#interpolateZoom = undefined
this.renderedPosition = true
this.interpolateX = undefined
this.interpolateY = undefined
this.interpolateZoom = undefined
}

const shouldUpdateNodes = this.nodes !== nodes && !(this.nodes.length === 0 && nodes.length === 0)
Expand Down Expand Up @@ -443,7 +445,7 @@ export class Renderer {
}

delete() {
clearTimeout(this.#doubleClickTimeout)
clearTimeout(this.doubleClickTimeout)
this.app.destroy(true, true)
}

Expand All @@ -458,30 +460,30 @@ export class Renderer {
let _y: number | undefined
let _zoom: number | undefined

if (this.#interpolateX) {
const { value, done } = this.#interpolateX(dt)
if (this.interpolateX) {
const { value, done } = this.interpolateX(dt)
_x = value

if (done) {
this.#interpolateX = undefined
this.interpolateX = undefined
}
}

if (this.#interpolateY) {
const { value, done } = this.#interpolateY(dt)
if (this.interpolateY) {
const { value, done } = this.interpolateY(dt)
_y = value

if (done) {
this.#interpolateY = undefined
this.interpolateY = undefined
}
}

if (this.#interpolateZoom) {
const { value, done } = this.#interpolateZoom(dt)
if (this.interpolateZoom) {
const { value, done } = this.interpolateZoom(dt)
_zoom = value

if (done) {
this.#interpolateZoom = undefined
this.interpolateZoom = undefined
}
}

Expand Down Expand Up @@ -540,11 +542,13 @@ export class Renderer {
}

private pointerDown = (event: FederatedPointerEvent) => {
this.pointerIsDown = true

if (this.onViewportDoubleClick) {
if (this.#doubleClickTimeout === undefined) {
this.#doubleClickTimeout = setTimeout(this.clearDoubleClick, 500)
if (this.doubleClickTimeout === undefined) {
this.doubleClickTimeout = setTimeout(this.clearDoubleClick, 500)
} else {
this.#doubleClick = true
this.doubleClick = true
}
}

Expand Down Expand Up @@ -591,6 +595,11 @@ export class Renderer {
// TODO - don't fire pointer up if it's handled by a node/edge pointerUp handler
// but still complete drag/decelarate event
private pointerUp = (event: FederatedPointerEvent) => {
if (!this.pointerIsDown) {
return
}
this.pointerIsDown = false

const isDragging = this.dragInteraction.dragging
this.dragInteraction.up(event)
this.decelerateInteraction.up()
Expand Down Expand Up @@ -624,9 +633,9 @@ export class Renderer {
shiftKey: event.shiftKey
})

if (this.#doubleClick) {
this.#doubleClick = false
this.#doubleClickTimeout = undefined
if (this.doubleClick) {
this.doubleClick = false
this.doubleClickTimeout = undefined
this.onViewportDoubleClick?.({
type: 'viewportPointer',
x,
Expand Down Expand Up @@ -660,8 +669,8 @@ export class Renderer {
}

private clearDoubleClick = () => {
this.#doubleClickTimeout = undefined
this.#doubleClick = false
this.doubleClickTimeout = undefined
this.doubleClick = false
}
}

Expand Down
82 changes: 41 additions & 41 deletions tests/webgl/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,45 +110,45 @@ 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}`)
// },
onViewportClick: (event: Renderer.ViewportPointerEvent) => {
console.log('viewport click', `x: ${event.x}, y: ${event.y}`)
// if (options.x === 0 && options.y === 0 && options.zoom === 1) {
// options.x = 1000
// options.y = -1000
// options.zoom = 0.2
// } else {
// options.x = 0
// options.y = 0
// options.zoom = 1
// }
// renderer.update({ nodes, edges, options })

// if (options.width === 1400 && options.height === 1000) {
// options.width = 700
// options.height = 500
// } else {
// options.width = 1400
// options.height = 1000
// }
// renderer.update({ nodes, edges, options })

// force({ nodes, edges }).then((graph) => {
// nodes = graph.nodes

// const { x, y, zoom } = Graph.boundsToViewport(
// Graph.getSelectionBounds(nodes, 40),
// { width: options.width, height: options.height }
// )
// options.x = x
// options.y = y
// options.zoom = zoom

// renderer.update({ nodes, edges, options: options })
// })
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) {
// // options.x = 1000
// // options.y = -1000
// // options.zoom = 0.2
// // } else {
// // options.x = 0
// // options.y = 0
// // options.zoom = 1
// // }
// // renderer.update({ nodes, edges, options })

// // if (options.width === 1400 && options.height === 1000) {
// // options.width = 700
// // options.height = 500
// // } else {
// // options.width = 1400
// // options.height = 1000
// // }
// // renderer.update({ nodes, edges, options })

// // force({ nodes, edges }).then((graph) => {
// // nodes = graph.nodes

// // const { x, y, zoom } = Graph.boundsToViewport(
// // Graph.getSelectionBounds(nodes, 40),
// // { width: options.width, height: options.height }
// // )
// // options.x = x
// // options.y = y
// // options.zoom = zoom

// // renderer.update({ nodes, edges, options: options })
// // })
// },
// onViewportDoubleClick: (event: Renderer.ViewportPointerEvent) => {
// console.log('viewport double click', `x: ${event.x}, y: ${event.y}`)
// },
Expand Down Expand Up @@ -185,9 +185,9 @@ const options: Renderer.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] } })
Expand Down

0 comments on commit c1c78f0

Please sign in to comment.