https://html2canvas.hertzen.com/

• typescript build
• polymer build (atm)
• copy assets folder (dockspawn)

for example

border-left,
border-right to border... etc

https://www.protechtraining.com/blog/post/using-the-html5-attribute-contenteditable-to-create-a-wysiwyg-369

Like in WpfDesigner or SvgEdit

• Clone complete designer Surface and display in miniature
• respect Zoom factors

WICG/eyedropper-api#21

Some Components could modify their own DOM (or any other arround).
So maybe we need our own children collection.

Same as we have our own styles and attributes collections

At the Moment we parse the Bindings for each Property if the selection has changed.
This needs to be fixed

• Fix Drag Items arround and resizieing (also when zoomed, snaplines, ...) (4days)

• resize of element in all directions and mouse pointers for this (2 days)

• possibility to recreate elemnt on property change (not all look for property changes) (1 day)

• editors for invisible elements (script & style) (2 days)

• drag into other layer (3 days)

• basic treeview implementation (3 days)

• copy/cut/paste workin (2 days)

This is the most important feature now, will be ready in the end of the week

Components should be draged, not created on click (but that should also be possible)

Create a Handler that can read out properties of different Frameworks
(lit-elements, polymer-elements, ...) it should also be able to support enums and provide values for them

• Enter & Leave Flex Box
• Reoder Items

https://gist.github.com/Nemo64/dce219b81695b177000c

I noticed that your preview canvas doesn't include the sandbox attribute. This would introduce Cross-Site Scripting (XSS) vulnerabilities. A malicious web component would be able to make requests as the user.

If you use sandbox="allow-scripts" then you'll close that vulnerability, but it also means redesigning your previous solution to use postMessage for cross-domain communication.

https://excalidraw.com/

• Possibility to select elements in the backgroun (like in iobroker.vis with context menu)
• if background elment is selected, move it out of the background while selection active (look how this could be achived)

• drag/drop
• hide/lock as in wpf designer
• hide at runtime

lit
polymer
angular
react
svelte

https://github.com/ratishphilip/BezierConnector

https://github.com/SVG-Edit/svgedit

• Fix Click Overlay _lastTool handling, sometimes it is wrong. Needs to be reworked
• Switch Containers with all selected elements
• Switch of containers should be undoable
• Resizeing has Problems with offset in control, so we alwas resize to a different point
• Fixes when zoomed
• Fixes when Designer canvas is not full size
• Resize in all Directions
• Bindings View and Parseing (sample for polymer)
• Paste should paste with an offset
• Draw new item into current container
• Paste into current container
• SVG Path should be modifyable
• SVG Path Drawing
• Flexbox Placement Service
• Grid Placement Service
• Grid Editor

Nice to have

• Propertygrid work (special editor for grid, flexbox, like in dev tools)
• Propertygrid Id editor

look at https://kor-ui.com/sandbox/ for additional ideas

https://blog.bitsrc.io/9-web-component-ui-libraries-you-should-know-in-2019-9d4476c3f103

We need real support for CSS Grid in the Designer:

• Posssibility to Create Grids, define Columns, Rows, Areas, ...
• Positioning in Grid so Components could be moved in Grid
• Resizeing in Grid so Components could span more Grid Rows or Columns

Also basic Container Tasks need to be fixed:

• Paste into container
• Drag Elemnt directly into Container
• How to position inside of the Container? (There are multiple possibilities in CSS like absolute via top/left/bottom/right, via transform, via margin, additional in grid: via order, via areaNames, ...)

• Enum (Nullable)
• Boolean (Nullable??)
• String (Nullable)
• Color (Nullable) (also support gradients)

In a far futire...

• css - Animations

https://microsoft.github.io/monaco-editor/

also look at https://kor-ui.com/sandbox/ it uses it

Create a PointerTool, and move Resize, Rotate, ... into Extensions.

Mostly done, will be a huge refactoring!

we do not need much of the polymer features, canvas-view is already a plain component

Should wemaybe use an IFrame for our main designer Canvas? So most libs are not loaded into it?

We then need communication for selection, mouse events, ... and so on...

We need a Abstraction to for writing the component to an output.

So we can realize different writers: Polymer3 writer, React, Page,...

Maybe the writer should directly implement property changes? Maybe we need this, or bindings could get lost?

We should discuss if we write inline styles, or a stylesheet.

Think this should be configurable.

Wich service is responsible for this?

We should use cssOM:
https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/

it should also be possible to create styles wich apply to more than on element (diff selectors)

it should also be possible that the style is loaded and saved to a external file (wich service should be responsible for this?)

wix:
https://editor.wix.com/html/editor/web/renderer/edit/71ed53f0-c0fc-48ed-93c8-4c9dfba6fd4a?editorSessionId=8893C283-BE21-41F7-3CFC-C30BAC395A7D&metaSiteId=e1b461ce-d37f-467d-af34-98c3071dd16c

Adding new custom elements with the format(element-element.js) not working. The element was built with polymer/[email protected]
Also, the property editor for the native elements is not functional.

• Move Path Points Arround
• Bugfix for Move Path Points Arround (When pointer is moved to quickly the point will be lost)
• Change Path Point To Bezier, Quadric Bezire (look at WPF Designer), Arc Segment
• Close Path via Addon
• Change Stroke Color when clicked
• Change Fill Color When Clicked
• Change Stroke Brush Size

• Look that moveing of items worke like in this one: https://demos.telerik.com/kendo-ui/treeview/dragdrop
• Treeview should not be completely reloaded if not needed
• Buttons to Hide Elements in Treeview

positioning:

block: etc use absolute and move arround
flexbox: move items around. maybe a key (alt) to move await with position or margin
grid: move betweed grid areas, and with alt key in area

somthing like this https://grid.layoutit.com/ but embeded into the designer (no idea atm).
we also can look how it's done in wpf designer, maybe this helps also

look at https://angrytools.com/css-generator/transform/#:~:text=Generator%20%2D%20Matrix%20Transform-,CSS%20Transform%20property%20allows%20to%20scale%2C%20rotate,skew%20and%20move%20HTML%20elements.&text=in%20XY%20direction-,linear%20transformations%20also%20can%20be%20represented%20by%20Matrix%20function.,properties%20into%20single%20matrix%20function.
has a nice circle editor:

We should implement a Sidebar, wich is a UI for all the Design tools.

For this we also create a special Button wich shows a poppup, with different Tools to select on of it.

Check what will be in the NPM Component, and how the component could be used in own application.
How will the TreeView, the Designer be connected?
Will the SourceEditor be part of the Designer (atm. I think not)
How could we define the component panels?

As a user of the designer I want be able to transform the elements.
I'd like to be able to rotate & skew the elements. During rotation the current angle should be displayed. Maybe also resizing and movement via transform should be possible, but we need to decide how we differentiate it from the normal resize and move.

Also a transformed element should be resizable and movable after a transformation has been applied via the standard logic (which is not possible at the moment).
Also the resizing in all directions should work, at the moment only east south and south-east is working.

When an element is transformed, it would be nice if in the selection overlay the border of the element is drawn in it's transformend shape, and not only a rectangular completely around.

• #146
• Use elements transform origin for rotation instead of hard coded center.
• Resizing of rotated element
• Implement resizing in all directions
• Pointer move event is wrongly triggered on a rotated element after pointer down
• A rotated element changes width undesirably at the start of resizing
• #153
• #181
• Automatically adjust overlay when margin/padding is set on element.
• Make snaplines work even with transformed elements > it works
• #180
• #90
• #101
• #105
• Placement jumps after west and north resizing
• Show the transform origin correctly after a transformation
• #147
• #149
• South west resize circle must be in the foreground. Try to resize new div. > 0bd83f1
• #151
• #152
• #155
• #160
• #174
• #187
• #188
• #192

So we can check that treeview, properties and components work with multiple designers