@node-projects/web-component-designer 0.0.32 → 0.0.36

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

@@ -2,200 +2,210 @@ import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssPropertiesService {
+    //@ts-ignore
+    styles = [
+        {
+            name: "color",
+            type: "color",
+            service: this
+        }, {
+            name: "background-color",
+            type: "color",
+            service: this
+        }, {
+            name: "box-sizing",
+            type: "list",
+            values: ["border-box", "content-box"],
+            service: this
+        }, {
+            name: "border",
+            type: "string",
+            default: "0px none rbg(0,0,0)",
+            service: this
+        }, {
+            name: "box-shadow",
+            type: "string",
+            default: "none",
+            service: this
+        }, {
+            name: "opacity",
+            type: "number",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            service: this
+        }, {
+            name: "padding",
+            type: "thickness",
+            service: this
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "left",
+            type: "css-length",
+            service: this
+        }, {
+            name: "top",
+            type: "css-length",
+            service: this
+        }, {
+            name: "right",
+            type: "css-length",
+            service: this
+        }, {
+            name: "bottom",
+            type: "css-length",
+            service: this
+        }, {
+            name: "width",
+            type: "css-length",
+            service: this
+        }, {
+            name: "height",
+            type: "css-length",
+            service: this
+        }, {
+            name: "font-size",
+            type: "css-length",
+            service: this
+        }, {
+            name: "font-weight",
+            type: "list",
+            values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
+            service: this
+        }
+    ];
+    //@ts-ignore
+    alignment = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
+        }, {
+            name: "inset",
+            type: "thickness",
+            service: this
+        }, {
+            name: "margin",
+            type: "thickness",
+            service: this
+        }, {
+            name: "padding",
+            type: "thickness",
+            service: this
+        }
+    ];
+    //@ts-ignore
+    grid = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "grid-template-columns",
+            type: "string",
+            service: this
+        }, {
+            name: "grid-template-rows",
+            type: "string",
+            service: this
+        }, {
+            name: "column-gap",
+            type: "css-length",
+            service: this
+        }, {
+            name: "row-gap",
+            type: "css-length",
+            service: this
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+            service: this
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
+            service: this
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch", "baseline"],
+            service: this
+        }, {
+            name: "justify-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch"],
+            service: this
+        }
+    ];
+    //@ts-ignore
+    flex = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this
+        }, {
+            name: "flex-direction",
+            type: "img-list",
+            values: ["row", "column"],
+            service: this
+        }, {
+            name: "flex-wrap",
+            type: "img-list",
+            values: ["nowrap", "wrap"],
+            service: this
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+            service: this
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
+            service: this
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
+            service: this
+        }
+    ];
+    name;
     constructor(name) {
-        //@ts-ignore
-        this.styles = [
-            {
-                name: "color",
-                type: "color",
-                service: this
-            }, {
-                name: "background-color",
-                type: "color",
-                service: this
-            }, {
-                name: "box-sizing",
-                type: "list",
-                values: ["border-box", "content-box"],
-                service: this
-            }, {
-                name: "border",
-                type: "string",
-                default: "0px none rbg(0,0,0)",
-                service: this
-            }, {
-                name: "box-shadow",
-                type: "string",
-                default: "none",
-                service: this
-            }, {
-                name: "opacity",
-                type: "number",
-                min: 0,
-                max: 1,
-                step: 0.1,
-                service: this
-            }, {
-                name: "padding",
-                type: "thickness",
-                service: this
-            }, {
-                name: "margin",
-                type: "thickness",
-                service: this
-            }, {
-                name: "position",
-                type: "list",
-                values: ["static", "relative", "absolute"],
-                service: this
-            }, {
-                name: "left",
-                type: "css-length",
-                service: this
-            }, {
-                name: "top",
-                type: "css-length",
-                service: this
-            }, {
-                name: "right",
-                type: "css-length",
-                service: this
-            }, {
-                name: "bottom",
-                type: "css-length",
-                service: this
-            }, {
-                name: "width",
-                type: "css-length",
-                service: this
-            }, {
-                name: "height",
-                type: "css-length",
-                service: this
-            }, {
-                name: "font-size",
-                type: "css-length",
-                service: this
-            }, {
-                name: "font-weight",
-                type: "list",
-                values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
-                service: this
-            }
-        ];
-        //@ts-ignore
-        this.alignment = [
-            {
-                name: "position",
-                type: "list",
-                values: ["static", "relative", "absolute"],
-                service: this
-            }, {
-                name: "display",
-                type: "list",
-                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-                service: this
-            }, {
-                name: "flex-direction",
-                type: "list",
-                values: ["row", "row-reverse", "column", "column-reverse"],
-                service: this
-            }, {
-                name: "flex-wrap",
-                type: "list",
-                values: ["nowrap", "wrap", "warp-reverse"],
-                service: this
-            }, {
-                name: "justify-self",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "justify-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "justify-content",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "align-self",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "align-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "align-content",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "flex",
-                type: "string",
-                default: "0 1 auto",
-                service: this
-            }
-        ];
-        //@ts-ignore
-        this.grid = [
-            {
-                name: "display",
-                type: "list",
-                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-                service: this
-            }, {
-                name: "grid-template-columns",
-                type: "string",
-                service: this
-            }, {
-                name: "grid-template-rows",
-                type: "string",
-                service: this
-            }, {
-                name: "column-gap",
-                type: "css-length",
-                service: this
-            }, {
-                name: "row-gap",
-                type: "css-length",
-                service: this
-            }, {
-                name: "justify-content",
-                type: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
-                service: this
-            }, {
-                name: "align-content",
-                type: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
-                service: this
-            }, {
-                name: "justify-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "align-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }
-        ];
         this.name = name;
     }
     isHandledElement(designItem) {
         return true;
     }
     getProperty(designItem, name) {
+        if (this.name == 'set-styles') {
+            return { name: name, type: 'string', service: this };
+        }
         return this[this.name][name];
     }
     getProperties(designItem) {
+        if (this.name == 'set-styles') {
+            if (!designItem)
+                return [];
+            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this }));
+        }
         return this[this.name];
     }
     setValue(designItems, property, value) {

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

@@ -1,9 +1,9 @@
 import { UnkownElementPropertiesService } from './UnkownElementPropertiesService';
 export class ListPropertiesService extends UnkownElementPropertiesService {
+    name = "list";
+    _propertys = new Map();
     constructor(propertyDefinitions) {
         super();
-        this.name = "list";
-        this._propertys = new Map();
         for (let e in propertyDefinitions) {
             let parr = [];
             this._propertys.set(e, parr);

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

@@ -1,10 +1,7 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 import { PropertiesHelper } from './PropertiesHelper';
 export class Lit2PropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "lit2";
-    }
+    name = "lit2";
     isHandledElement(designItem) {
         let prop = designItem.element.constructor.elementProperties;
         if (prop)

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

@@ -1,9 +1,6 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 export class LitElementPropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "lit";
-    }
+    name = "lit";
     isHandledElement(designItem) {
         let proto = designItem.element.constructor.__proto__;
         while (proto != null) {

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

@@ -1,80 +1,77 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
 export class NativeElementsPropertiesService extends CommonPropertiesService {
-    constructor() {
-        super(...arguments);
-        //@ts-ignore
-        this.inputProperties = [
-            {
-                name: "type",
-                type: "list",
-                values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
-                service: this,
-                defaultValue: "text"
-            }, {
-                name: "value",
-                type: "string",
-                service: this
-            }, {
-                name: "checked",
-                type: "boolean",
-                service: this
-            }, {
-                name: "min",
-                type: "number",
-                service: this
-            }, {
-                name: "max",
-                type: "number",
-                service: this
-            }
-        ];
-        this.buttonProperties = [
-            {
-                name: "type",
-                type: "list",
-                values: ["button", "submit", "reset"],
-                service: this,
-                defaultValue: "button"
-            }, {
-                name: "value",
-                type: "string",
-                service: this
-            }, {
-                name: "disabled",
-                type: "boolean",
-                service: this
-            }
-        ];
-        this.anchorProperties = [
-            {
-                name: "href",
-                type: "string",
-                service: this
-            }
-        ];
-        this.divProperties = [
-            {
-                name: "title",
-                type: "string",
-                service: this
-            }
-        ];
-        this.imgProperties = [
-            {
-                name: "src",
-                type: "string",
-                service: this
-            }
-        ];
-        this.iframeProperties = [
-            {
-                name: "src",
-                type: "string",
-                service: this
-            }
-        ];
-        this.name = "native";
-    }
+    //@ts-ignore
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text"
+        }, {
+            name: "value",
+            type: "string",
+            service: this
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this
+        }, {
+            name: "min",
+            type: "number",
+            service: this
+        }, {
+            name: "max",
+            type: "number",
+            service: this
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button"
+        }, {
+            name: "value",
+            type: "string",
+            service: this
+        }, {
+            name: "disabled",
+            type: "boolean",
+            service: this
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this
+        }
+    ];
+    name = "native";
     isHandledElement(designItem) {
         switch (designItem.element.localName) {
             case 'input':

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

@@ -1,9 +1,6 @@
 import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
 export class PolymerPropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "polymer";
-    }
+    name = "polymer";
     isHandledElement(designItem) {
         return designItem.element.constructor.polymerElementVersion != null;
     }

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

@@ -1,9 +1,7 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
 export class UnkownElementPropertiesService {
-    constructor() {
-        this.name = "unkown";
-    }
+    name = "unkown";
     isHandledElement(designItem) {
         return true;
     }

package/dist/elements/services/selectionService/SelectionService.js

@@ -1,10 +1,8 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../item/NodeType';
 export class SelectionService {
-    constructor() {
-        this.selectedElements = [];
-        this.onSelectionChanged = new TypedEvent();
-    }
+    primarySelection;
+    selectedElements = [];
     setSelectedElements(designItems) {
         let oldSelectedElements = this.selectedElements;
         if (!designItems) {
@@ -33,4 +31,5 @@ export class SelectionService {
     isSelected(designItem) {
         return this.selectedElements.indexOf(designItem) >= 0;
     }
+    onSelectionChanged = new TypedEvent();
 }

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

@@ -1,7 +1,9 @@
 export class ChangeGroup {
+    title;
+    affectedItems;
+    commitHandler;
+    abortHandler;
     constructor(title, affectedItems, commitHandler, abortHandler) {
-        this.undoStack = [];
-        this.redoStack = [];
         this.title = title;
         this.affectedItems = affectedItems;
         this.commitHandler = commitHandler;
@@ -41,6 +43,8 @@ export class ChangeGroup {
     mergeWith(other) {
         return false;
     }
+    undoStack = [];
+    redoStack = [];
     execute(item) {
         item.do();
         for (let existingItem of this.undoStack) {

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

@@ -3,11 +3,9 @@ import { ChangeGroup } from "./ChangeGroup.js";
  * Manages a stack of available undo/redo actions
  */
 export class UndoService {
-    constructor() {
-        this._undoStack = [];
-        this._redoStack = [];
-        this._transactionStack = [];
-    }
+    _undoStack = [];
+    _redoStack = [];
+    _transactionStack = [];
     openGroup(title, affectedItems) {
         let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);