Struggling with canvas

[dhunink]

Hi,

this is kind of a follow-up on this topic.
I’m still struggling with the latest unanswered question: how do I set a relative height for a column that contains a canvas?

In addition, I use some JavaScript that add’s div-elements to the canvas. Outside Pro that works perfectly, but as soon as I draw the canvas on a page that’s created with Pro, the div’s aren’t drawn onto the canvas, but below the html section. What’s going on here, what should I take into account when working with canvas that are being created and updated through JS, inside Pro?

[ruenel]

Hello @dhunink,

Thanks for writing in!

On your Column element, set the following:

height:  auto
min-height: 500px
max-height: calc(100vh - 8em)
overflow: hidden

Best Regards.

[dhunink]

Hi @ruenel,

that brings back the initial issue, we’re the canvas keeps resizing and the map is not displayed correctly.

[dhunink]

Hi @ruenel, any updates on this issue? I would really like to proceed with this exciting project, but can’t before figuring this canvas-issue out, so I would really appreciate an update!

[charlie]

For what you’re doing you probably need a script as canvases are meant to have a pixel value. If you set your canvas class as “resizing-canvas” this script might help if you put in Document JS. We can get a little more involved if you sign up for One. I’d still recommend just using a pixel value for your canvas container. You can use breakpoints to style differently on mobile. Let us know if you have any questions.

window.addEventListener("load", resizeCanvas);

window.addEventListener("resize", resizeCanvas);

const canvases = document.querySelectorAll('.resizing-canvas');

// Resize all canvases
function resizeCanvas() {
  
  for(var i = 0; i < canvases.length; ++i) {
    resizeIndividualCanvas(canvases[i]);
  }
}

// Resize single canvas
function resizeIndividualCanvas(el) {
  const parent = el.parentNode;
  
  const parentSize = parent.getBoundingClientRect();
  
  el.style.width = parentSize.width + "px";
  el.style.height = parentSize.height + "px";
}

[dhunink]

Hi @charlie,

thanks for taking the time to write that block of code. It totally makes sense, and it works!
That answers the first part of my question.
For the second part, i’ve adapted the page: removed the added JS, and gave the column a fixed height.
Now the second part is visible: whenever adding something to the map through JS, it is not drawn onto the map.

I guess there’s some sort of conflict here between Pro’s framework and the external JS ES-module. I’ve tested the external JS module stand-alone: works perfect. I’ve loaded the AMD-version of the external JS-module inside Pro: works perfect.
But as soon as I try to use the ES-version, pro is not handeling it well. Since I understand ES-modules are promoted over AMD-modules, I would like to really understand how Pro handles including ES-modules, so I can really build forward on that. Perhaps that’s even something for the Docs?

Please read the secure note as well.

[charlie]

We don’t really use any of those types of loaders internally. We build out to JS from what I know. I’m not entirely sure what you’re doing though, are you adding markers to our Map element? This page is running really hot on my computer I think you might have a general performance issue or this is related to your module loading issue. If I had to guess your code is running before the element is added when in ES-Module mode. I added a doc on what we use when an element is added to the page and what happens when an element is removed from the App. This is what we use for building out JS element functionality. Let me know if that helps. Have a great weekend.

Rivet API | Themeco Docs