[Feature request] Fixed size canvas
Question
We're using GrapesJS at work for building a kiosk-system into our CMS. Currently using the webpage template. We are displaying the content on displays/tvs which has a fixed resolution, for example 1920x1080 laying down, or 1080x1920 standing on the side And I've tried to find a way to limit the resolution in the canvas with no luck. We'd like to limit the size of the canvas to the resolution in both x and y to the resolution (and rotation) on the display we're editing for, so that you can see the actual content that will be displayed on the tv. This will (sometimes) add scrolling in the canvas in the webpage template ofcourse, but I don't see that as a problem as its more important to know that the design you're working on will look the same on the tv.
Any ideas on how to solve this?
I'm not familiar with the code yet so I have no idea how to best solve this. Any help appreciated.
Answers (3)
Have you tried the Device Manager API?
This will (sometimes) add scrolling in the canvas in the webpage template of course, but I don't see that as a problem as its more important to know that the design you're working on will look the same on the tv.
Probably from the next release will expose an API for zooming (from the Canvas module)
Yeah I did, works great if you are editing on a screen that is larger than the intended content. But if you're for example editing for a 4k screen on a full HD screen its a bit problematic. Zooming seems great! Would be great if you can zoom at a pixel level as well as percent.
The Device Manager API doesn't support max height, which makes it impossible to know where it will cut the content vertically. This is pretty important for editing fixed height displays. Would be great to have that option. Any idea how to solve this? Is there an easy fix? or is it a big change? The best would be to limit vertical height so you can't add new content below it. Or next best would be to have a divider/line/indicator so you can see where it will cut off for a set height.
Yeah I did, works great if you are editing on a screen that is larger than the intended content. But if your for example editing for a 4k screen on a full HD screen its a bit problematic. Zooming seems great! Would be great if you can zoom at a pixel level as well as percent.
The zoom will be a value from 0 to 100
The Device Manager API doesn't support max height, which makes it impossible to know where it will cut the content vertically. This is pretty important for editing fixed height displays. Would be great to have that option. Any idea how to solve this? Is there an easy fix? or is it a big change? The best would be to limit vertical height so you can't add new content below it. Or next best would be to have a divider/line/indicator so you can see where it will cut off for a set height.
Well, you can pass the height to the device, it's not clear to me what exactly MAX height would do here. If you exceed the limit, eg. by adding a component to the wrapper or changing the height style of a section, you will obviously see the canvas with the scrollbar
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1743
[FEATURE REQUEST] Add command to get actual template imported into editor
Hi Team, We are using grapesjs newsletter plugin in our project for importing and preview the template. We are facing some difficulty in re...
Issue #1744
[FEATURE REQUEST] Add Command to get actual template imported
Hi Team, We are using grapesjs newsletter plugin in our project for importing and preview the template. We are facing some difficulty in re...
Issue #1746
[FEATURE REQUEST] Don't Strip off html , head and body tags from imported html
Hi Team, We have noticed grapesjs has customised the actual template uploaded, by stripping off the html, head and body tags and adds new s...
Issue #1692
Predefined non-changeable content blocks
Is it possible to create predefined content blocks with data you put in from your backend and which the user cannot change and only place o...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.