diff --git a/src/renderers/webgl/index.ts b/src/renderers/webgl/index.ts index c5b062a7..41a7b335 100644 --- a/src/renderers/webgl/index.ts +++ b/src/renderers/webgl/index.ts @@ -143,13 +143,7 @@ export class Renderer { nodeRenderersById: Record = {} edges: Graph.Edge[] = [] edgeRenderersById: Record = {} - #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 @@ -157,6 +151,14 @@ export class Renderer { 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 @@ -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) @@ -443,7 +445,7 @@ export class Renderer { } delete() { - clearTimeout(this.#doubleClickTimeout) + clearTimeout(this.doubleClickTimeout) this.app.destroy(true, true) } @@ -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 } } @@ -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 } } @@ -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() @@ -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, @@ -660,8 +669,8 @@ export class Renderer { } private clearDoubleClick = () => { - this.#doubleClickTimeout = undefined - this.#doubleClick = false + this.doubleClickTimeout = undefined + this.doubleClick = false } } diff --git a/tests/webgl/index.ts b/tests/webgl/index.ts index 7034f7d7..8db0cb52 100644 --- a/tests/webgl/index.ts +++ b/tests/webgl/index.ts @@ -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}`) // }, @@ -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] } })