@node-projects/web-component-designer 0.0.114 → 0.0.115

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

@@ -53,7 +53,7 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;

package/dist/elements/item/DesignItem.js

@@ -74,18 +74,20 @@ export class DesignItem {
         return this._childArray.indexOf(designItem);
     }
     insertAdjacentElement(designItem, where) {
+        let action;
         if (where == 'afterbegin') {
-            this._insertChildInternal(designItem, 0);
+            action = new InsertChildAction(designItem, this, 0);
         }
         else if (where == 'beforeend') {
-            this._insertChildInternal(designItem);
+            action = new InsertChildAction(designItem, this, this._childArray.length);
         }
         else if (where == 'beforebegin') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
         else if (where == 'afterend') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
+        this.instanceServiceContainer.undoService.execute(action);
     }
     insertChild(designItem, index) {
         const action = new InsertChildAction(designItem, this, index);
@@ -96,7 +98,8 @@ export class DesignItem {
         this.instanceServiceContainer.undoService.execute(action);
     }
     remove() {
-        this.parent._removeChildInternal(this);
+        const action = new DeleteAction([this]);
+        this.instanceServiceContainer.undoService.execute(action);
     }
     clearChildren() {
         for (let i = this._childArray.length - 1; i >= 0; i--) {
@@ -210,12 +213,8 @@ export class DesignItem {
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {
-            if (this.element.children && this.element.children.length === 0 && this.element.childNodes.length <= 1)
-                this.content = this.element.textContent; //was soll das bringen???
-            else {
-                for (const c of this.element.childNodes)
-                    this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
-            }
+            for (const c of this.element.childNodes)
+                this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
         }
     }
     constructor(node, serviceContainer, instanceServiceContainer) {
@@ -226,8 +225,8 @@ export class DesignItem {
         this.styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
-    openGroup(title, affectedItems) {
-        return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
+    openGroup(title) {
+        return this.instanceServiceContainer.undoService.openGroup(title);
     }
     getOrCreateDesignItem(node) {
         return DesignItem.GetOrCreateDesignItem(node, this.serviceContainer, this.instanceServiceContainer);

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

@@ -39,7 +39,7 @@ export interface IDesignItem {
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     setStyle(name: string, value?: string | null): any;
     removeStyle(name: string): any;
     setAttribute(name: string, value?: string | null): any;

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -259,7 +259,7 @@ export class CssPropertiesService {
         return this[this.name];
     }
     setValue(designItems, property, value) {
-        const cg = designItems[0].openGroup("properties changed", designItems);
+        const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             d.styles.set(property.name, value);
             d.element.style[property.name] = value;

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js

@@ -16,7 +16,7 @@ export class UnkownElementPropertiesService {
     }
     setValue(designItems, property, value) {
         const attributeName = PropertiesHelper.camelToDashCase(property.name);
-        const cg = designItems[0].openGroup("properties changed", designItems);
+        const cg = designItems[0].openGroup("properties changed");
         try {
             for (let d of designItems) {
                 if (property.type === 'object') {

package/dist/elements/services/undoService/ChangeGroup.d.ts

@@ -2,10 +2,10 @@ import { ITransactionItem } from './ITransactionItem';
 import { IDesignItem } from '../../item/IDesignItem';
 export declare class ChangeGroup implements ITransactionItem {
     title: string;
-    affectedItems: IDesignItem[];
+    get affectedItems(): IDesignItem[];
     private commitHandler;
     private abortHandler;
-    constructor(title: string, affectedItems: IDesignItem[], commitHandler: (transactionItem: ITransactionItem) => void, abortHandler: (transactionItem: ITransactionItem) => void);
+    constructor(title: string, commitHandler: (transactionItem: ITransactionItem) => void, abortHandler: (transactionItem: ITransactionItem) => void);
     do(): void;
     undo(): void;
     commit(): void;

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

@@ -1,11 +1,19 @@
 export class ChangeGroup {
     title;
-    affectedItems;
+    get affectedItems() {
+        let s = new Set();
+        for (let u of this.undoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        for (let u of this.redoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        return [...s.values()];
+    }
     commitHandler;
     abortHandler;
-    constructor(title, affectedItems, commitHandler, abortHandler) {
+    constructor(title, commitHandler, abortHandler) {
         this.title = title;
-        this.affectedItems = affectedItems;
         this.commitHandler = commitHandler;
         this.abortHandler = abortHandler;
     }

package/dist/elements/services/undoService/IUndoService.d.ts

@@ -1,9 +1,8 @@
 import { IService } from '../IService';
 import { ChangeGroup } from './ChangeGroup';
 import { ITransactionItem } from './ITransactionItem';
-import { IDesignItem } from '../../item/IDesignItem';
 export interface IUndoService extends IService {
-    openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     execute(item: ITransactionItem): void;
     canUndo(): boolean;
     canRedo(): boolean;

package/dist/elements/services/undoService/UndoService.d.ts

@@ -1,7 +1,6 @@
 import { ITransactionItem } from './ITransactionItem.js';
 import { ChangeGroup } from "./ChangeGroup.js";
 import { IUndoService } from './IUndoService.js';
-import { IDesignItem } from '../../item/IDesignItem';
 import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class UndoService implements IUndoService {
     private _undoStack;
@@ -9,7 +8,7 @@ export declare class UndoService implements IUndoService {
     private _transactionStack;
     private _designerCanvas;
     constructor(designerCanvas?: IDesignerCanvas);
-    openGroup(title: string, affectedItems: IDesignItem[]): ChangeGroup;
+    openGroup(title: string): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;
     execute(item: ITransactionItem): void;

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

@@ -10,8 +10,8 @@ export class UndoService {
     constructor(designerCanvas) {
         this._designerCanvas = designerCanvas;
     }
-    openGroup(title, affectedItems) {
-        let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
+    openGroup(title) {
+        let t = new ChangeGroup(title, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);
         return t;
     }

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

@@ -22,7 +22,7 @@ export class DeleteAction {
             this._parentIndexes.push(DomHelper.nodeIndex(this.deletedItems[n].element));
         }
         for (let n = 0; n < this.deletedItems.length; n++) {
-            this.deletedItems[n].remove();
+            this.deletedItems[n].parent._removeChildInternal(this.deletedItems[n]);
         }
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }

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

@@ -7,10 +7,10 @@ export class InsertAction {
     }
     title;
     get affectedItems() {
-        return [this.designItem];
+        return [this.designItem, this.newItem];
     }
     undo() {
-        this.newItem.element.remove();
+        this.newItem.parent._removeChildInternal(this.newItem);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {

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

@@ -1,21 +1,27 @@
 export class InsertChildAction {
     constructor(designItem, newParent, newIndex) {
-        this.title = "Move Item";
+        this.title = "Move or Insert Item";
         this.designItem = designItem;
         this.newParent = newParent;
         this.newIndex = newIndex;
     }
     title;
     get affectedItems() {
-        return [this.designItem, this.newParent, this.oldParent];
+        if (this.oldParent)
+            return [this.designItem, this.newParent, this.oldParent];
+        return [this.designItem, this.newParent];
     }
     undo() {
-        this.oldParent._insertChildInternal(this.designItem, this.newIndex);
+        if (this.oldParent)
+            this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
+        else
+            this.designItem.parent._removeChildInternal(this.designItem);
         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);
+        if (this.oldParent)
+            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] });
     }

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

@@ -138,7 +138,7 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Resize Elements");
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
                 if (this.resizeAllSelected) {

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

@@ -51,7 +51,7 @@ export class RotateExtension extends AbstractExtension {
                 this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerUp:
-                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Rotate Elements");
                 /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
                   designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
                   designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);

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

@@ -243,7 +243,7 @@ export class PointerTool {
                         let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
-                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements");
                             containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             cg.commit();
                         }

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -6,6 +6,7 @@ export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAp
     static readonly template: HTMLTemplateElement;
     private _type;
     private _id;
+    private _content;
     private _pg;
     private _selectionChangedHandler;
     private _instanceServiceContainer;

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -1,5 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
+import { DesignItem } from '../../item/DesignItem';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -43,11 +44,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
   <div>
     <span class="desc">Type:</span><span id="type"></span>
     <span class="desc">Id:</span><input type="text" id="id">
+    <span class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-property-grid id="pg"></node-projects-property-grid>
   `;
     _type;
     _id;
+    _content;
     _pg;
     _selectionChangedHandler;
     _instanceServiceContainer;
@@ -56,6 +59,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._restoreCachedInititalValues();
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
+        this._content = this._getDomElement('content');
         this._pg = this._getDomElement('pg');
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
@@ -66,6 +70,21 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 e.stopPropagation();
             }
         };
+        this._content.onkeydown = e => {
+            if (e.key == 'Enter') {
+                const grp = this._instanceServiceContainer.selectionService.primarySelection.openGroup('set content');
+                this._instanceServiceContainer.selectionService.primarySelection.clearChildren();
+                let t = document.createTextNode(this._content.value);
+                let di = DesignItem.GetOrCreateDesignItem(t, this._instanceServiceContainer.selectionService.primarySelection.serviceContainer, this._instanceServiceContainer);
+                this._instanceServiceContainer.selectionService.primarySelection.insertAdjacentElement(di, 'afterbegin');
+                grp.commit();
+            }
+            else if (e.key == 'Escape') {
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
         let pSel;
         this._id.onfocus = e => {
             pSel = this._instanceServiceContainer.selectionService.primarySelection;
@@ -85,6 +104,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
             this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+            this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
         });
     }
 }

package/package.json

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