Using konva.js in a reactive response context

[punowo]

Hello.

Context:
I'm developing a feature for a web application that involves loading an image and allowing the user to draw forms over it. The challenge arises due to the variability of screen and window sizes, which affects the space where the image is loaded or currently rendered along with whatever is "dependent" on it.

Problem:
The frontend (built with Vue 3) manages data related to the offset of the available space, the original size of the image, and the scaling required to display the entire image while maintaining its aspect ratio. This results in two sets of data: one static (original image size and aspect ratio) and one dynamic (changes with every window "resize" event). The goal is to be able to replicate the entire layout and interaction on the backend side.

Current Approach:
Initially, I tried using fabric.js, but I encountered issues interacting with the canvas. Despite avoiding Vue reactivity features and using markRaw for fabric.js elements, it wasn't successful. As a result, I switched to konva.js. However, my current method involves redrawing everything on each resize event, which may not be the most efficient approach.

Request for Assistance:
I am looking for guidance or suggestions on how to handle this scenario more effectively, as I am relatively new to this aspect of frontend development. I am attaching a snippet of code to illustrate my current implementation and to provide a clearer picture of the situation.

const propagateDimensionsChange = () => {
  if (totalAvailableSpaceDiv.value) {
    totalAvailableSpaceDimensions.value.width =
      totalAvailableSpaceDiv.value.offsetWidth;
    totalAvailableSpaceDimensions.value.height =
      totalAvailableSpaceDiv.value.offsetHeight;
  }
  if (imgElement.value) {
    originalImageDimensions.value.width = imgElement.value.naturalWidth;
    originalImageDimensions.value.height = imgElement.value.naturalHeight;
  }
  if (totalAvailableSpaceDiv.value && imgElement.value) {
    uniformScale.value = Math.min(
      totalAvailableSpaceDimensions.value.width /
        originalImageDimensions.value.width,
      totalAvailableSpaceDimensions.value.height /
        originalImageDimensions.value.height
    );
  }
  propagateScalingChanges();
};

const propagateScalingChanges = () => {
  if (!imgElement.value) return;
  imgElement.value.style.height = `${scaledUniversalHeight.value}px`;
  imgElement.value.style.width = `${scaledUniversalWidth.value}px`;
  if (!konvaStage.value) return;
  konvaStage.value.height(scaledUniversalHeight.value);
  konvaStage.value.width(scaledUniversalWidth.value);

  for (const layer of konvaStage.value.children) {
    for (const element of layer.children) {
      element.scaleX(element.getAttr("initialScaleX") * uniformScale.value);
      element.scaleY(element.getAttr("initialScaleY") * uniformScale.value);

      element.x(element.getAttr("initialX") * uniformScale.value);
      element.y(element.getAttr("initialY") * uniformScale.value);
    }
  }

  konvaStage.value.draw();
}

[lavrton]

I still don't get what is the issue or question here. Can you be more specific?

[punowo]

I was redrawing everything on the canvas on resize and I was wondering if there's any better way to approach this. I don't think there's really a better way to do this after all this time.

[lavrton]

Doing a full redraw on any change is fine, that is how konva works.