Add "Landscape" Mode

[dynobo]

Add "Landscape" Mode

[dmastrorillo]

Hey, awesome project!

I was able to achieve this by updating some CSS styles and making some updates to the SVG in chrome.

The blocks also seem to behave well. There would just be some other smaller updates to the svgs I think as they are still only extending as far as the portrait version on the X axis

Would there be anything else that needs to be addressed here such as the PNG export ? Or would it mainly be visual updates?

I'm assuming there would probably be a checkbox for toggling landscape mode and probably a mode: "landscape" | "portrait" key/value pair in the JSON export.

Can you think of anything else and would you accept a PR for this?

[dynobo]

Hi @dmastrorillo , yes, PRs are very welcome, as I don't have much time left for this project!

I think export to png is unproblematic.

But getting json import/export to work properly is an important requirement. Being able to switch between portrait/layout dynamically (with block width/height and position being scaled accordingly) would be perfect.

Where in the UI exactly would you place such a portrait/landscape toggle checkbox?

[dmastrorillo]

Great @dynobo ,

I'll see how I go with it.

I'm thinking the checkbox could live inside the toggle layout helper as there are a few other checkboxes in there that govern the look and feel of the reMarkable Canvas. What do you think?

[dynobo]

I'm thinking the checkbox could live inside the toggle layout helper

Good idea, totally makes sense to me! You might want to rename the section to something more generic, like "Page Layout" or something.

Currently, the other "Layout Helper" settings are not part of the json-export. Do you think it could make sense, if you include all those settings to the json? (Saving only the "Landscape" setting would render the behavior of the toggles in this section inconsistent).

[dmastrorillo]

I was toying with the idea of using the Options class to also store layout options in the script.js

globalOptions = new Options({})
layoutOptions = new Options({gridlines: false, guidelines: false, orientation: "portrait"})

That way we can render the layout options dynamically like you do with the global options, and we can also export them in the JSON export.

I didn't know if that was overkill though :D

[dynobo]

Yes, that's a great idea! 👍

Let me know, in case you have further questions or need a second opinion or sth. :)

[maksun]

Hello,

+1 I'm very interested by having a Landscape mode ;)

Thank you,