emilefokkema / infinite-canvas Goto Github PK

Hello :)

Any tips on how the issue below could be resolved?

Seems perhaps the typings have not been correctly exported, and there's no typing defined at bun add @types/ef-infinite-canvas either :/

Hope you can assist 🙏
Thanks for your work on this
🤜🤛

Hi. I'd like to add sticky notes that stick to the correct transformed location when zoomed and panned. Any ideas?

I'm using putImageData with the infinite canvas and the behavior is fine using most browser.
But on safari version 16.5 using Ventura 13.4, when a call to this function is made,
the console logs the following error and does not display the expected content.

Unhandled Promise Rejection: TypeError: Type error

The problem did not occur in other settings using safari.

I created this minimal project using svelte.
The component using the canvas is at src/routes/TestComponent.svelte.

On most platform, a pixelated heart is shown, using this function

const draw = () => {
    if (context && canvas) {
      context.clearRect(0, 0, canvas.width, canvas.height);

      const res = 21;
      console.log(content.length, res * res * 4);
      let imageData = new ImageData(res, res);
      imageData.data.set(content);

      // behaviour is different if this is used before
      // context.fillRect(0,0, 100,100)

      context.putImageData(
        imageData,
        Math.floor(canvas.width / 2),
        Math.floor(canvas.height / 2)
      );
    }
  };

Is there a problem with the way I use the library ?

I plan to create an example not using svelte, to make sure the problem is not from here.

Hello, first of all thank you for your effort.

Is there a way to read the current coordinate state ?
Like the current zoom/scale state, or the local coordinates after panning?

Thank you

Hello,
I get error:
"Uncaught error calculating inverse: zero determinant"
after running code with this line:
const canvas_src = new InfiniteCanvas(document.createElement("canvas"))

Is it possible to set document.createElement("canvas") as an argument InfiniteCanvas?

Hi, first, thank you for this awesome work.

Not really an issue, but a question: is there any way to toggle enable/disable the panning?
In some cases, I need the click to perform other actions.

What I have tried so far (didn't work):
infCanvas.addEventListener("mousedown", e => { e.preventDefault(); });

Would it be possible to add a LICENSE file to this project?

I am looking for a way to programatically move around the canvas, so I can implement moving with arrow keys, etc. Is there a way to do this?

Not an issue - just sharing feedback.
Thank you for sharing your work and implementing such a great project.
Really useful.

quadraticCurveTo is seemingly not working in this implementation.

Hi, before digging into your project, I have got a simple question :
Does it allow the use of images to create an infinite draw like the app Endless Paper (https://endlesspaper.app/)?
Thank you