@node-projects/web-component-designer 0.0.60 → 0.0.64

package/ACKNOWLEDGMENTS

@@ -0,0 +1,5 @@
+# Acknowledgments
+
+- Thanks to @notwaldorf who created the original `wizzywid` project (MIT License).
+  https://github.com/PolymerLabs/wizzywid
+  This was a start for this whole project (even if mostly nothing of the original code is left)

package/dist/elements/controls/SimpleSplitView.d.ts

@@ -0,0 +1,11 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static properties: {
+        orientation: StringConstructor;
+    };
+    orientation: 'vertical' | 'horizontal';
+    constructor();
+    ready(): void;
+}

package/dist/elements/controls/SimpleSplitView.js

@@ -0,0 +1,66 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+      display: block;
+    }  
+    #split {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      display: grid;
+      align-items: center;
+    }
+    #splitter {
+      user-select: none;
+    }
+    :host(:not([orientation="vertical"])) > div > #splitter {
+      cursor: ew-resize;
+      width: 5px;
+    }
+    :host([orientation="vertical"]) > div > #splitter {
+      cursor: ns-resize;
+      height: 5px;
+    }`;
+    static template = html `
+    <div id="split" style="--split: 50;">
+      <slot name="top"></slot>  
+      <div id="splitter"></div>
+      <slot name="bottom"></slot>
+    </div>`;
+    static properties = {
+        orientation: String
+    };
+    orientation = 'vertical';
+    constructor() {
+        super();
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this.setAttribute('orientation', this.orientation);
+        const split = this._getDomElement("split");
+        const splitter = this._getDomElement("splitter");
+        let start = null;
+        splitter.addEventListener('pointerdown', (e) => {
+            splitter.setPointerCapture(e.pointerId);
+            start = true;
+        });
+        splitter.addEventListener('pointerup', (e) => {
+            splitter.releasePointerCapture(e.pointerId);
+            start = null;
+        });
+        splitter.addEventListener('pointermove', (e) => {
+            if (start !== null) {
+                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
+                if (this.orientation === 'horizontal')
+                    splitValue += e.movementX * 100 / split.clientWidth;
+                else
+                    splitValue += e.movementY * 100 / split.clientHeight;
+                if (!isNaN(splitValue))
+                    split.style.setProperty("--split", splitValue);
+            }
+        });
+    }
+}
+customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/SimpleSplitView2.d.ts

@@ -0,0 +1,11 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static properties: {
+        orientation: StringConstructor;
+    };
+    orientation: 'vertical' | 'horizontal';
+    constructor();
+    ready(): void;
+}

package/dist/elements/controls/SimpleSplitView2.js

@@ -0,0 +1,63 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+      display: block;
+    }  
+    #split {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      display: grid;
+      align-items: center;
+    }
+    :host(:not([orientation="vertical"])) > div > #splitter {
+      cursor: ew-resize;
+      width: 5px;
+    }
+    :host([orientation="vertical"]) > div > #splitter {
+      cursor: ns-resize;
+      height: 5px;
+    }`;
+    static template = html `
+    <div id="split" style="--split: 50;">
+      <slot name="top"></slot>  
+      <div id="splitter"></div>
+      <slot name="bottom"></slot>
+    </div>`;
+    static properties = {
+        orientation: String
+    };
+    orientation = 'vertical';
+    constructor() {
+        super();
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this.setAttribute('orientation', this.orientation);
+        const split = this._getDomElement("split");
+        const splitter = this._getDomElement("splitter");
+        let start = null;
+        splitter.addEventListener('pointerdown', (e) => {
+            splitter.setPointerCapture(e.pointerId);
+            start = true;
+        });
+        splitter.addEventListener('pointerup', (e) => {
+            splitter.releasePointerCapture(e.pointerId);
+            start = null;
+        });
+        splitter.addEventListener('pointermove', (e) => {
+            if (start !== null) {
+                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
+                if (this.orientation === 'horizontal')
+                    splitValue += e.movementX * 100 / split.clientWidth;
+                else
+                    splitValue += e.movementY * 100 / split.clientHeight;
+                if (!isNaN(splitValue))
+                    split.style.setProperty("--split", splitValue);
+            }
+        });
+    }
+}
+customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/aa.d.ts

@@ -0,0 +1,24 @@
+/**
+   * Split View is an image comparison component
+   *
+   * <split-view>
+   *   <picture slot="top">[...]</picture>
+   *   <picture slot="bottom">[...]</picture>
+   * </split-view>
+   *
+   * Options are;
+   *
+   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
+   * mode (string) A CSS mix-blend-mode to use for comparison
+   */
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static properties: {
+        start: NumberConstructor;
+    };
+    constructor();
+    start: number;
+    ready(): void;
+}

package/dist/elements/controls/aa.js

@@ -0,0 +1,98 @@
+/**
+   * Split View is an image comparison component
+   *
+   * <split-view>
+   *   <picture slot="top">[...]</picture>
+   *   <picture slot="bottom">[...]</picture>
+   * </split-view>
+   *
+   * Options are;
+   *
+   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
+   * mode (string) A CSS mix-blend-mode to use for comparison
+   */
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+      display: block;
+    }
+    :host([hidden]) { display: none }
+    .split {
+      position: relative;
+      height: 100%;
+      display: grid;
+      align-items: center;
+      --split: 100;
+    }
+    .top,
+    .bottom {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    .bottom {
+      background-color: red;
+    }
+    .top {
+      z-index: 2;
+      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
+      overflow: hidden;
+      border-right: 1px solid white;
+    }
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      z-index: 3;
+      background-color: transparent;
+      -webkit-appearance: none;
+    }
+    input[type="range"]:focus {
+      outline: var(--outline, -webkit-focus-ring-color auto 1px);
+    }`;
+    static template = html `
+    <div class="split" id="split" role="img" aria-label="Comparison of two images">
+      <div class="bottom" id="bottom" aria-label="First image to compare">
+        <slot name="bottom"></slot>
+      </div>
+      <div class="top" id="top" aria-label="Second image to compare">
+        <slot name="top"></slot>  
+      </div>
+      <label id="label" for="slider">Slide left and right to compare images</label>
+      <input type="range" role="slider" min="0" max="100" value="50" name="slider" id="slider" aria-labelledby="label" aria-valuemin="0" aria-valuemax="100">
+    </div>`;
+    static properties = {
+        start: Number
+    };
+    constructor() {
+        super();
+    }
+    start;
+    ready() {
+        this._parseAttributesToProperties();
+        const splitter = this._getDomElement("split");
+        const slider = this._getDomElement("slider");
+        const label = this._getDomElement("label");
+        const top = this._getDomElement("top");
+        const splitViewLabelText = this.getAttribute("split-view-label") || 'Comparison of two images';
+        const sliderLabelText = this.getAttribute("slider-label") || 'Press left and right to compare images';
+        const mode = this.getAttribute("mode") || "normal";
+        slider.addEventListener("input", (event) => {
+            const split = +event.target.value;
+            splitter.style.setProperty("--split", split);
+            slider.setAttribute('aria-valuenow', split);
+        });
+        splitter.style.setProperty("--split", this.start);
+        slider.setAttribute('aria-valuenow', this.start);
+        slider.value = this.start;
+        splitter.setAttribute('aria-label', splitViewLabelText);
+        label.innerText = sliderLabelText;
+        top.style.mixBlendMode = mode;
+    }
+}
+customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/documentContainer.d.ts

@@ -7,6 +7,7 @@ import { IDemoView } from './widgets/demoView/IDemoView';
 import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
 import { IUiCommand } from "../commandHandling/IUiCommand";
 import { IDisposable } from "../interfaces/IDisposable";
+import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
 export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
     designerView: DesignerView;
     codeView: ICodeView & HTMLElement;
@@ -16,8 +17,17 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _content;
     private _tabControl;
     private _selectionPosition;
+    private _splitDiv;
+    private _designerDiv;
+    private _codeDiv;
+    private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
+    refreshInSplitView(): Promise<void>;
+    designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
     dispose(): void;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;

package/dist/elements/documentContainer.js

@@ -1,6 +1,7 @@
-import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
+import { SimpleSplitView } from './controls/SimpleSplitView';
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -10,6 +11,12 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _content = '';
     _tabControl;
     _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
     static get style() {
         return css `
       div {
@@ -19,11 +26,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       }                            
       node-projects-designer-view {
         height: 100%;
-        /*overflow: auto;*/
-      }`;
+        overflow: hidden;
+      }
+      `;
     }
     constructor(serviceContainer, content) {
         super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
         this._serviceContainer = serviceContainer;
         if (content != null)
             this._content = content;
@@ -32,12 +41,33 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
         this.designerView.setAttribute('exportparts', 'canvas');
-        this.designerView.title = 'Designer';
-        this._tabControl.appendChild(this.designerView);
+        this.designerView.slot = 'top';
+        this._designerDiv = document.createElement("div");
+        this._tabControl.appendChild(this._designerDiv);
+        this._designerDiv.title = 'Designer';
+        this._designerDiv.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);
+        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
+        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
-        this.codeView.title = 'Code';
-        this._tabControl.appendChild(this.codeView);
+        this.codeView.slot = 'bottom';
+        this._codeDiv = document.createElement("div");
+        this._tabControl.appendChild(this._codeDiv);
+        this._codeDiv.title = 'Code';
+        this._codeDiv.appendChild(this.codeView);
+        this.codeView.onTextChanged.on(text => {
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
+            }
+        });
+        this._splitDiv = new SimpleSplitView();
+        this._splitDiv.style.height = '100%';
+        this._splitDiv.title = 'Split';
+        this._tabControl.appendChild(this._splitDiv);
         this.demoView = new serviceContainer.config.demoViewWidget();
         this.demoView.title = 'Preview';
         this._tabControl.appendChild(this.demoView);
@@ -46,6 +76,40 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
+    }
+    designerSelectionChanged(e) {
+        if (this._tabControl.selectedIndex === 2) {
+            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+            if (primarySelection) {
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                this.codeView.setSelection(this._selectionPosition);
+                this._selectionPosition = null;
+            }
+        }
+    }
+    designerContentChanged() {
+        if (!this._disableChangeNotificationEditor) {
+            this._disableChangeNotificationDesigner = true;
+            if (this._tabControl.selectedIndex === 2) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this.codeView.update(this._content);
+                if (primarySelection) {
+                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+            }
+            this._disableChangeNotificationDesigner = false;
+        }
+    }
     dispose() {
         this.codeView.dispose();
     }
@@ -69,7 +133,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.designerView.parseHTML(this._content);
             else if (this._tabControl.selectedIndex === 1)
                 this.codeView.update(this._content);
-            else if (this._tabControl.selectedIndex === 2)
+            else if (this._tabControl.selectedIndex === 2) {
+            }
+            else if (this._tabControl.selectedIndex === 3)
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
         }
     }
@@ -91,11 +157,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this._content = this.designerView.getHTML(designItemsAssignmentList);
                 this._selectionPosition = designItemsAssignmentList.get(primarySelection);
             }
-            else if (i.oldIndex === 1)
+            else if (i.oldIndex === 1) {
                 this._content = this.codeView.getText();
-            if (i.newIndex === 0)
+            }
+            else if (i.oldIndex === 2) {
+                this._designerDiv.appendChild(this.designerView);
+                this._codeDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 0 || i.newIndex === 2)
                 this.designerView.parseHTML(this._content);
-            else if (i.newIndex === 1) {
+            if (i.newIndex === 1 || i.newIndex === 2) {
                 this.codeView.update(this._content);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
@@ -105,8 +176,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                     this.codeView.focusEditor();
                 }
             }
-            else if (i.newIndex === 2)
+            if (i.newIndex === 2) {
+                this._splitDiv.appendChild(this.designerView);
+                this._splitDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 3) {
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+            }
         });
         if (this._content)
             this.content = this._content;

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -62,6 +62,8 @@ export class NodeHtmlParserService {
                     designItem.setStyle(s.name, s.value);
                 }
             }
+            if (element instanceof HTMLElement || element instanceof SVGElement)
+                element.style.pointerEvents = 'auto';
             designItem.hideAtDesignTime = hideAtDesignTime;
             designItem.hideAtRunTime = hideAtRunTime;
             designItem.lockAtDesignTime = lockAtDesignTime;

package/dist/elements/services/undoService/UndoService.js

@@ -42,6 +42,7 @@ export class UndoService {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     clear() {
         this._undoStack = [];
@@ -63,6 +64,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     redo() {
         if (!this.canRedo())
@@ -79,6 +81,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     canUndo() {
         return this._undoStack.length > 0;

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,9 +1,11 @@
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IDisposable } from "../../../interfaces/IDisposable";
 import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface ICodeView extends IUiCommandHandler, IDisposable {
     update(code: string): any;
     getText(): any;
     setSelection(position: IStringPosition): any;
     focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
 }

package/dist/elements/widgets/codeView/code-view-ace.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implem
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _aceEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

package/dist/elements/widgets/codeView/code-view-ace.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 class CodeViewAceCompleter {
     getCompletions(editor, session, pos, prefix, callback) {
@@ -18,6 +18,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _aceEditor;
     _editor;
     static style = css `
@@ -111,6 +112,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         });
         let config = { attributes: true, childList: true, characterData: true };
         observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
+        this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
     }
     update(code) {
         this._aceEditor.setValue(code);

package/dist/elements/widgets/codeView/code-view-code-mirror.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _codeMirrorEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -1,9 +1,10 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _codeMirrorEditor;
     _editor;
     static style = css `
@@ -82,6 +83,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         //@ts-ignore
         this._codeMirrorEditor = CodeMirror(this._editor, config);
         this._codeMirrorEditor.setSize('100%', '100%');
+        this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
     }
     update(code) {
         this._codeMirrorEditor.setValue(code);

package/dist/elements/widgets/codeView/code-view-monaco.d.ts

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IActivateable } from '../../../interfaces/IActivateable';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
@@ -9,6 +9,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _monacoEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     dispose() {
@@ -7,6 +7,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _monacoEditor;
     _editor;
     static style = css `
@@ -69,6 +70,15 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 }
             });
             this._monacoEditor.layout();
+            let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                this.onTextChanged.emit(this._monacoEditor.getValue());
+            });
+            this._monacoEditor.onDidChangeModel(e => {
+                changeContentListener.dispose();
+                changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                    this.onTextChanged.emit(this._monacoEditor.getValue());
+                });
+            });
         });
     }
     focusEditor() {

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -8,6 +8,7 @@ import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -19,6 +20,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    readonly onContentChanged: TypedEvent<void>;
     zoomFactor: number;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -1,7 +1,7 @@
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { IDesignItem } from '../../item/IDesignItem';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
@@ -28,6 +28,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     get zoomFactor(): number;
     set zoomFactor(value: number);
+    onContentChanged: TypedEvent<void>;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
 import { UndoService } from '../../services/undoService/UndoService';
 import { SelectionService } from '../../services/selectionService/SelectionService';
 import { DesignItem } from '../../item/DesignItem';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
@@ -42,6 +42,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._zoomFactor = value;
         this.zoomFactorChanged();
     }
+    onContentChanged = new TypedEvent();
     // Private Variables
     _canvas;
     _canvasContainer;
@@ -330,6 +331,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     setDesignItems(designItems) {
         this.instanceServiceContainer.undoService.clear();
+        this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         this.rootDesignItem.clearChildren();
         this.addDesignItems(designItems);

package/dist/elements/widgets/designerView/designerView.d.ts

@@ -11,11 +11,12 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     set serviceContainer(value: ServiceContainer);
     get instanceServiceContainer(): InstanceServiceContainer;
     set instanceServiceContainer(value: InstanceServiceContainer);
+    private _designerCanvas;
+    get designerCanvas(): DesignerCanvas;
     private _zoomInput;
     private _lowertoolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _designerCanvas;
     constructor();
     private _onWheel;
     get designerWidth(): string;

package/dist/elements/widgets/designerView/designerView.js

@@ -16,6 +16,10 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
+    _designerCanvas;
+    get designerCanvas() {
+        return this._designerCanvas;
+    }
     _zoomInput;
     _lowertoolbar;
     static style = css `
@@ -99,7 +103,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
           </div>
         </div>`;
-    _designerCanvas;
     constructor() {
         super();
         const outer = this._getDomElement('outer');
@@ -196,13 +199,14 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         }
     }
     getHTML(designItemsAssignmentList) {
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
     }
     async parseHTML(html) {
         const parserService = this.serviceContainer.htmlParserService;
         if (!html) {
             this.instanceServiceContainer.undoService.clear();
+            this._designerCanvas.overlayLayer.removeAllOverlays();
             DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
             this._designerCanvas.rootDesignItem.clearChildren();
         }

package/dist/elements/widgets/designerView/overlayLayerView.d.ts

@@ -15,6 +15,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     removeAllNodesWithClass(className: string): void;
+    removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
     drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;

package/dist/elements/widgets/designerView/overlayLayerView.js

@@ -80,6 +80,12 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             e.parentNode.removeChild(e);
         }
     }
+    removeAllOverlays() {
+        const nodes = this._svg.querySelectorAll('svg > g > *');
+        for (const e of nodes) {
+            e.parentNode.removeChild(e);
+        }
+    }
     createPoint() {
         //@ts-ignore
         return this._svg.createSVGPoint();

package/package.json

@@ -1,39 +1,39 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.60",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.3.5",
-    "construct-style-sheets-polyfill": "^3.0.4"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.9",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.13",
-    "codemirror": "^5.64.0",
-    "esprima-next": "^5.7.0",
-    "html2canvas": "*",
-    "jest": "^27.4.3",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.0",
-    "monaco-editor": "^0.30.1",
-    "ts-jest": "^27.1.0",
-    "typescript": "^4.5.2",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.64",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.3.7",
+    "construct-style-sheets-polyfill": "^3.0.4"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.9",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.4.13",
+    "codemirror": "^5.64.0",
+    "esprima-next": "^5.7.0",
+    "html2canvas": "*",
+    "jest": "^27.4.3",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.0",
+    "monaco-editor": "^0.30.1",
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.2",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}