@node-projects/web-component-designer 0.0.72 → 0.0.73

package/dist/elements/item/DesignItem.d.ts

@@ -24,12 +24,14 @@ export declare class DesignItem implements IDesignItem {
     get id(): string;
     set id(value: string);
     get isRootItem(): boolean;
-    private _childArray;
+    _childArray: IDesignItem[];
     get hasChildren(): boolean;
     children(): IterableIterator<IDesignItem>;
     get childCount(): number;
     get firstChild(): IDesignItem;
     get parent(): IDesignItem;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): void;
     insertChild(designItem: IDesignItem, index?: number): void;
     removeChild(designItem: IDesignItem): void;
     remove(): void;
@@ -57,4 +59,6 @@ export declare class DesignItem implements IDesignItem {
     removeStyle(name: string): void;
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
+    _insertChildInternal(designItem: IDesignItem, index?: number): void;
+    _removeChildInternal(designItem: IDesignItem): void;
 }

package/dist/elements/item/DesignItem.js

@@ -2,9 +2,10 @@ import { CssStyleChangeAction } from '../services/undoService/transactionItems/C
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
+import { DeleteAction } from '../..';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -69,44 +70,41 @@ export class DesignItem {
     get parent() {
         return this.getOrCreateDesignItem(this.element.parentNode);
     }
-    insertChild(designItem, index) {
-        //todo... via undoredo system....
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        if (designItem.parent) {
-            designItem.parent.removeChild(designItem);
+    indexOf(designItem) {
+        return this._childArray.indexOf(designItem);
+    }
+    insertAdjacentElement(designItem, where) {
+        if (where == 'afterbegin') {
+            this._insertChildInternal(designItem, 0);
         }
-        this.removeChild(designItem);
-        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
-            this._childArray.push(designItem);
-            this.element.appendChild(designItem.node);
+        else if (where == 'beforeend') {
+            this._insertChildInternal(designItem);
         }
-        else {
-            let el = this._childArray[index];
-            this.node.insertBefore(designItem.node, el.element);
-            this._childArray.splice(index, 0, designItem);
+        else if (where == 'beforebegin') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
+        }
+        else if (where == 'afterend') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
         }
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+    }
+    insertChild(designItem, index) {
+        const action = new InsertChildAction(designItem, this, index);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     removeChild(designItem) {
-        //todo... via undoredo system....
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        const index = this._childArray.indexOf(designItem);
-        if (index > -1) {
-            this._childArray.splice(index, 1);
-            designItem.element.remove();
-        }
+        const action = new DeleteAction([designItem]);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     remove() {
-        this.parent.removeChild(this);
+        this.parent._removeChildInternal(this);
     }
     clearChildren() {
-        this._childArray = [];
-        DomHelper.removeAllChildnodes(this.element);
+        for (let i = this._childArray.length - 1; i >= 0; i--) {
+            let di = this._childArray[i];
+            di.remove();
+        }
     }
-    //abstract text content to own property. so only chnage via designer api will use it.
+    //abstract text content to own property. so only change via designer api will use it.
     get hasContent() {
         return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
     }
@@ -259,4 +257,33 @@ export class DesignItem {
         const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
+    // Internal implementations wich don't use undo/redo
+    _insertChildInternal(designItem, index) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        if (designItem.parent) {
+            designItem.parent._removeChildInternal(designItem);
+        }
+        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
+            this._childArray.push(designItem);
+            this.element.appendChild(designItem.node);
+        }
+        else {
+            let el = this._childArray[index];
+            this.node.insertBefore(designItem.node, el.element);
+            this._childArray.splice(index, 0, designItem);
+        }
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+    }
+    _removeChildInternal(designItem) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem]);
+        const index = this._childArray.indexOf(designItem);
+        if (index > -1) {
+            this._childArray.splice(index, 1);
+            designItem.element.remove();
+        }
+    }
 }

package/dist/elements/item/IDesignItem.d.ts

@@ -21,6 +21,10 @@ export interface IDesignItem {
     readonly childCount: number;
     readonly firstChild: IDesignItem;
     readonly parent: IDesignItem;
+    _insertChildInternal(designItem: IDesignItem, index?: number): any;
+    _removeChildInternal(designItem: IDesignItem): any;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): any;
     insertChild(designItem: IDesignItem, index?: number): any;
     removeChild(designItem: IDesignItem): any;
     remove(): any;

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

@@ -70,7 +70,7 @@ export class NodeHtmlParserService {
             element.draggable = false; //even if it should be true, for better designer exp.
             for (let c of item.childNodes) {
                 let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem.insertChild(di);
+                designItem._insertChildInternal(di);
             }
         }
         else if (item.nodeType == 3) {

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -1,6 +1,4 @@
 import { CommandType } from "../../../commandHandling/CommandType.js";
-import { DesignItem } from "../../item/DesignItem.js";
-import { MoveElementInDomAction } from "../undoService/transactionItems/MoveElementInDomAction.js";
 export class DefaultModelCommandService {
     canExecuteCommand(designerCanvas, command) {
         if (command.type == CommandType.moveBackward ||
@@ -21,14 +19,20 @@ export class DefaultModelCommandService {
     }
     async executeCommand(designerCanvas, command) {
         let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
-        if (command.type == CommandType.moveBackward)
-            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
-        else if (command.type == CommandType.moveForward)
-            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.nextElementSibling), 'afterend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+        if (command.type == CommandType.moveBackward) {
+            let idx = sel.parent.indexOf(sel) - 1;
+            if (idx >= 0)
+                sel.parent.insertChild(sel, idx);
+        }
+        else if (command.type == CommandType.moveForward) {
+            let idx = sel.parent.indexOf(sel) + 1;
+            if (idx < sel.parent.childCount)
+                sel.parent.insertChild(sel, idx);
+        }
         else if (command.type == CommandType.moveToBack)
-            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'afterbegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
+            sel.parent.insertChild(sel, 0);
         else if (command.type == CommandType.moveToFront)
-            designerCanvas.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.parentElement), 'beforeend', DesignItem.GetDesignItem(sel.element.nextElementSibling), 'beforebegin'));
+            sel.parent.insertChild(sel);
         else if (command.type == CommandType.arrangeLeft) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
             const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');

package/dist/elements/services/undoService/transactionItems/DeleteAction.d.ts

@@ -1,14 +1,12 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { IExtensionManager } from '../../../widgets/designerView/extensions/IExtensionManger';
 export declare class DeleteAction implements ITransactionItem {
-    constructor(deletedItems: IDesignItem[], extensionManager: IExtensionManager);
+    constructor(deletedItems: IDesignItem[]);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
     deletedItems: IDesignItem[];
-    extensionManager: IExtensionManager;
     private _parentItems;
     private _parentIndexes;
     mergeWith(other: ITransactionItem): boolean;

package/dist/elements/services/undoService/transactionItems/DeleteAction.js

@@ -1,9 +1,8 @@
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class DeleteAction {
-    constructor(deletedItems, extensionManager) {
+    constructor(deletedItems) {
         this.title = "Delete Items";
         this.deletedItems = deletedItems;
-        this.extensionManager = extensionManager;
     }
     title;
     get affectedItems() {
@@ -11,7 +10,7 @@ export class DeleteAction {
     }
     undo() {
         for (let n = 0; n < this.deletedItems.length; n++) {
-            this._parentItems[n].insertChild(this.deletedItems[n], this._parentIndexes[n]);
+            this._parentItems[n]._insertChildInternal(this.deletedItems[n], this._parentIndexes[n]);
         }
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this.deletedItems });
     }
@@ -25,11 +24,9 @@ export class DeleteAction {
         for (let n = 0; n < this.deletedItems.length; n++) {
             this.deletedItems[n].remove();
         }
-        this.extensionManager.removeExtensions(this.deletedItems);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }
     deletedItems;
-    extensionManager;
     _parentItems;
     _parentIndexes;
     mergeWith(other) {

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -14,7 +14,7 @@ export class InsertAction {
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
-        this.designItem.insertChild(this.newItem, this.index);
+        this.designItem._insertChildInternal(this.newItem, this.index);
         const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
         if (prepService)
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));

package/dist/elements/services/undoService/transactionItems/InsertChildAction.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/InsertChildAction.js

@@ -0,0 +1,31 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newParent, this.oldParent];
+    }
+    undo() {
+        this.oldParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        this.oldParent = this.designItem.parent;
+        this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        this.newParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class MoveElementInDomAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newTarget: IDesignItem;
+    newPosition: InsertPosition;
+    oldTarget: IDesignItem;
+    oldPosition: InsertPosition;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.js

@@ -0,0 +1,32 @@
+export class MoveElementInDomAction {
+    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newTarget = newTarget;
+        this.newPosition = newPosition;
+        this.oldTarget = oldTarget;
+        this.oldPosition = oldPosition;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newTarget, this.oldTarget];
+    }
+    undo() {
+        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        //this.newTarget.insertChild(this.designItem, )
+        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newTarget;
+    newPosition;
+    oldTarget;
+    oldPosition;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

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

@@ -19,7 +19,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     `;
     static template = html `
       <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
-      <div id="container" style="width: 100%; height: 100%;"></div>
+      <div id="container" style="width: 100%; height: 100%; position: absolute;"></div>
   `;
     executeCommand(command) {
         switch (command.type) {
@@ -65,9 +65,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 value: this.code,
                 language: 'html',
                 minimap: {
-                    //@ts-ignore
                     size: 'fill'
-                }
+                },
+                fixedOverflowWidgets: true
             });
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {

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

@@ -290,7 +290,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     handleDeleteCommand() {
         let items = this.instanceServiceContainer.selectionService.selectedElements;
-        this.instanceServiceContainer.undoService.execute(new DeleteAction(items, this.extensionManager));
+        this.instanceServiceContainer.undoService.execute(new DeleteAction(items));
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     initialize(serviceContainer) {
@@ -362,7 +362,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     addDesignItems(designItems) {
         if (designItems) {
             for (let di of designItems) {
-                this.rootDesignItem.insertChild(di);
+                this.rootDesignItem._insertChildInternal(di);
             }
         }
         const intializationService = this.serviceContainer.intializationService;

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

@@ -281,7 +281,7 @@ export class PointerTool {
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem.insertChild(this._actionStartedDesignItem);
+                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);

package/dist/index.d.ts

@@ -80,7 +80,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/dist/index.js

@@ -49,7 +49,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",