Graphical Template Editor

[hristoiankov]

I am considering adding a graphical template editor into Cider. A user would be able to toggle between the html/css editor vs the graphical editor. There may be issues allowing a user to switch between both formats, but if implemented correctly, it will allow quick templating with the graphical editor, and fine tuning in the html/css editor.

Implementation Thoughts:

• moveable/resizable rectangles representing divs
  • Make the absolute and position using css top, left
  • Size using css width, height
• a layer editor that shows all divs in your template and allows you to move above/below others
• a required base layer/rectangle/div will be required to set the card dimensions
• when moving rectangles/divs snap to other rectangles and allow alignment against existing edges
• use libraries for editing css and html
• editable elements can be styled to final product, but on-hover, display a border and background for editing
• draggable, resizable, guide align, snap

Libraries:

• interact.js
  • documentation & demo: https://interactjs.io/
• Pagedraw
  • https://github.com/Pagedraw/pagedraw
  • demo: https://pagedraw.io/tutorials/basics
• Hotglue
  • https://hotglue.me/
• grapesjs
  • documentation: https://grapesjs.com/docs/#why-grapesjs
  • demo: https://grapesjs.com/demo.html
• react-dragline
  • documentation: https://github.com/zcued/react-dragline
  • demo: https://zcued.github.io/react-dragline/
• ngx-moveable
  • documentation: https://github.com/daybrush/moveable/tree/master
  • demo: https://daybrush.com/moveable/

Sample Div HTML:

<div class="div1"></div>

Sample Div CSS:

.div1 {
  left: 0;
  top: 0;
  width: 400;
  height: 100;
  background-color: red;
  color: white;
  font-family: Arial;
  font-size: 15px;
}

• The HTML element and CSS styling for it are always tied together by the class name.

Sample Card:

<div class="card">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

• The .card element cannot be moved and its 'top' and 'left' properties cannot be set.
• The .card element remains centered in the viewer.
• Divs can be moved up/down the layer listing and in/out of other divs.

Mockup: