Embeddable codeflowcanvas

June 29, 2024

From now on codeflowcanvas is embeddable in documents like this one. This is a simple example of a flow that increases a counter when it is executed.

This website is created using Astro, so this also proves that codeflowcanvas can be embedded in Astro mdx pages! I’ve also got it working using React and Angular, and I’ll write an article about that with links to my github in the near future.

update 5-7-2024 … the below is buggy…

(it doesn’t work in all scenario’s. For example, if you scrolled this page and refreshed, then the dragging/zooming of canvas and node’s used the wrong offsets)

The changes that were needed was using pageX/Y instead of clientX/Y in the pointer/wheel events. For the pointer events also window.scrollX and window.scrollY were added to the event coordinates before transforming these to world space coordinates.

the fix that make’s it work correctly:

• when calculating the transform for the camera don’t use the cached canvas element’s boundingBox lef/top , no extra offset was needed
• for mouse wheel events calculate mouse x/y using event.clientX/Y - rootElement.getBoundingClientRect().left/top
• for pointer events calculate mouse x/y using event.clientX/Y - rootElement.getBoundingClientRect().left/top
• remove the window.scrollX/Y from the calculation of the mouse x/y in the pointer events as an offset for the node position but subtract rootElement.getBoundingClientRect().left/top instead

I currently use tailwind inside the editor components and npm packages, so this forces that tailwind is used and some special tailwind config for retrieving the tailwind classes from the codeflowcanvas packages.

If you have any questions or feedback, feel free to reach out to me here: [email protected]