Moveable + InfiniteViewer

[ronny-lark]

Hello there! I'm trying to make a feature with Moveable and InfiniteViewer to allow drawing squares on top of an image. The whole thing should be zoomable. Here's a sandbox

According to all the docs, the setup should be fairly simple. I couldn't find a single coherent example to use the two things together so I did the thing that made the most sense to me...

1. Click "draw"
2. click the blue image
3. The new red square should be draggable + resizable, and zoom in and out with the infinite viewer.

I can't figure out what's not working here. Ideally I would like to recreate the behaviour in the demo on your website, but the source code is very complicated and has way more than I need. Would love to have some insight on this.

[daybrush]

@ronny-lark

• croact-moveable 0.9.0
• @moveable/helper 0.1.3
• lit-moveable 0.30.0
• moveable 0.53.0
• preact-moveable 0.55.0
• react-moveable 0.56.0
• svelte-moveable 0.45.0
• vue-moveable 2.0.0-beta.87
• vue3-moveable 0.28.0
• ngx-moveable 0.50.0 try this code with moveableRef

const onDraw = () => {
    const viewport = ref.current?.getViewport();
    if (!viewport) return;
    const callback = (event: MouseEvent) => {
      const { offsetX, offsetY } = event;
      setAnnotations((prev) => [
        ...prev,
        { x: offsetX, y: offsetY, id: annotations.length.toString() },
      ]);
      viewport.removeEventListener("mousedown", callback);

requestAnimationFrame(() => {
    moveableRef.current!.updateSelectors();
});
    };
    viewport.addEventListener("mousedown", callback);
  };