@node-projects/web-component-designer 0.0.62 → 0.0.63

package/dist/elements/documentContainer.d.ts

@@ -21,10 +21,13 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _designerDiv;
     private _codeDiv;
     private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
-    refreshInSplitView(): void;
+    refreshInSplitView(): Promise<void>;
     designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
     dispose(): void;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;

package/dist/elements/documentContainer.js

@@ -14,6 +14,8 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _designerDiv;
     _codeDiv;
     refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
     static get style() {
         return css `
       div {
@@ -48,15 +50,19 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         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._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._tabControl.selectedIndex === 2) {
-                this._content = text;
-                this.refreshInSplitViewDebounced();
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
             }
         });
         this._splitDiv = document.createElement("div");
@@ -71,17 +77,38 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
-    refreshInSplitView() {
-        this.designerView.parseHTML(this._content);
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
     }
     designerSelectionChanged(e) {
-        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;
+        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() {

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/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,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",