Drag HTML Element #257

dennemark · 2022-11-10T11:29:50Z

dennemark
Nov 10, 2022

Just want to share a nice pattern to drag an HTML element. This works, because HTML is an abstractMesh under the hood and pointerDragBehaviour will be a child of it. So we will move around the button.

  const canvas = useCanvas() as HTMLCanvasElement
  const dragRef = useRef<PointerDragBehavior | null>(null)
<Html
      position={startPoint}
      name={'draw handle'}
      uid={`draw_handle_${id}_${groupId}`}
      // zIndexRange={[1, 1]}
      distanceFactor={2}
      babylonChildren={
        <pointerDragBehavior
          ref={dragRef}
          dragPlaneNormal={new Vector3(0, 1, 0)}
          validateDrag={validateDrag}
        />
      }
      center
    >
    <button
        onPointerMove={e => {
         // html elements are siblings of canvas and do not send events to canvas, when overlaying it
         // therefore, we just create same event on our canvas. setTimeout seems to be needed.
          setTimeout(() => canvas.dispatchEvent(e.nativeEvent), 1)
        }}
        onPointerDown={() => {
          dragRef.current?.startDrag()
        }}
        onPointerUp={() => {
          dragRef.current?.releaseDrag()
        }}
      >
        Drag me
      </button>
    </Html>

brianzinn · 2022-11-10T17:11:12Z

brianzinn
Nov 10, 2022
Maintainer

that would make a great storybook as well... I'm slowly converting over the docs to a gatsby website that's easier to document and make PGs - i'll be sure to revisit the examples of Html component! 😄

0 replies

dennemark · 2022-11-11T09:19:59Z

dennemark
Nov 11, 2022
Author

Bit more complicated, but this one would send the poitner up and down events properly through to the canvas element, so the canvas element also receives pointer up and down events and scene can observe it.

  const canvas = useCanvas() as HTMLCanvasElement
  const dragRef = useRef<PointerDragBehavior | null>(null)
<Html
      position={startPoint}
      name={'draw handle'}
      uid={`draw_handle_${id}_${groupId}`}
      // zIndexRange={[1, 1]}
      distanceFactor={2}
      babylonChildren={
        <pointerDragBehavior
          ref={dragRef}
          dragPlaneNormal={new Vector3(0, 1, 0)}
          validateDrag={validateDrag}
        />
      }
      center
    >
    <button
        onPointerMove={e => {
         // html elements are siblings of canvas and do not send events to canvas, when overlaying it
         // therefore, we just create same event on our canvas. setTimeout seems to be needed.
          setTimeout(() => canvas.dispatchEvent(e.nativeEvent), 1)
        }}
        onPointerDown={() => {
        dragRef.current?.startDrag()
          /** send event through to canvas element and also listen to pointer up on canvas instead */
          setTimeout(() => {
            canvas.dispatchEvent(e.nativeEvent)
            canvas.addEventListener(
              'pointerdown',
              ce => {
                ;(ce.currentTarget as HTMLCanvasElement).setPointerCapture(ce.pointerId)
              },
              { once: true }
            )
            canvas.addEventListener(
              'pointerup',
              ce => {
                ;(ce.currentTarget as HTMLCanvasElement).releasePointerCapture(ce.pointerId)
                dragRef.current?.releaseDrag()
              },
              { once: true }
            )
          }, 1)
       }}
      >
        Drag me
      </button>
    </Html>

2 replies

brianzinn Nov 12, 2022
Maintainer

did you try a pointerup outside of the canvas? I've fixed some babylon GUI bug related to that where ie: mouseout would be the other event.

dennemark Nov 12, 2022
Author

I think it should. The setPointerCapture will listen to all pointer events with the pointerId until it is released via releasePointerCapture. I used it first on the button element, since it would not listen to the pointer up, when i release it on the canvas. But with the capture it works. So I think it also works for the canvas element.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drag HTML Element #257

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Drag HTML Element #257

dennemark Nov 10, 2022

Replies: 2 comments · 2 replies

brianzinn Nov 10, 2022 Maintainer

dennemark Nov 11, 2022 Author

brianzinn Nov 12, 2022 Maintainer

dennemark Nov 12, 2022 Author

dennemark
Nov 10, 2022

Replies: 2 comments 2 replies

brianzinn
Nov 10, 2022
Maintainer

dennemark
Nov 11, 2022
Author

brianzinn Nov 12, 2022
Maintainer

dennemark Nov 12, 2022
Author