Issue #4489Opened July 30, 2022by contentfree0 reactions

BUG: Loading initial project data from a designer-mode project results in wrong canvas size

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v103

Reproducible demo link

https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js

Describe the bug

If you view the linked CodeSandbox and find the commented out line providing the projectData to the editor, you will see that the canvas gets resized away from the size specified by the device. In a debugger, it seems that updateDim is called multiple times at initialization: the first time with the correct device size and then again with empty width and height which then leads to the gjs-frame-wrapper's sizing getting removed.

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

contentfreeJuly 30, 20220 reactions

I can kinda force it to the correct canvas size by:

  1. Not providing projectData in the initial config,
  2. Loading the projectData via editor.loadProjectData(...) after initialization and
  3. Then running editor.Canvas.getModel().updateDevice(); though it animates from the full width back to device size.

It seems that loading the project data happens after the default device is rendered (maybe?) and somehow blows out the current frame, rerendering some default. (I don't know what the default is since I'm only providing a single device config, which appears to be ignored on the second render).

Also, leaving out any one of the three steps above results in the full-width canvas instead of the correct narrow canvas

artfAugust 3, 20220 reactions

Thanks @contentfree I'll try to fix that for the next release

contentfreeAugust 3, 20220 reactions

Thanks @artf. I'll keep my eye open for the next release (looks like your kanban board is empty now … so should be imminent?)

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.