Issue #1803Opened February 18, 2019by ageir0 reactions

[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)

artfFebruary 21, 20190 reactions

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)

ageirFebruary 21, 20190 reactions

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.

artfFebruary 21, 20190 reactions

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.

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.