@node-projects/web-component-designer 0.0.135 → 0.0.137

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

@@ -3,8 +3,17 @@ import { NodeType } from '../../../item/NodeType';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType';
 export class CssPropertiesService {
-    //@ts-ignore
-    styles = [
+    listNeedsRefresh(designItem) {
+        return this.name == 'styles' ? true : false;
+    }
+    layout = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
         {
             name: "color",
             type: "color",
@@ -42,51 +51,16 @@ export class CssPropertiesService {
             service: this,
             propertyType: PropertyType.cssValue
         }, {
-            name: "padding",
-            type: "thickness",
+            name: "metrics",
+            type: "metrics",
             service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "margin",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
+            propertyType: PropertyType.complex
         }, {
             name: "position",
             type: "list",
             values: ["static", "relative", "absolute"],
             service: this,
             propertyType: PropertyType.cssValue
-        }, {
-            name: "left",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "top",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "right",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "bottom",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "width",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "height",
-            type: "css-length",
-            service: this,
-            propertyType: PropertyType.cssValue
         }, {
             name: "font-size",
             type: "css-length",
@@ -100,38 +74,6 @@ export class CssPropertiesService {
             propertyType: PropertyType.cssValue
         }
     ];
-    //@ts-ignore
-    alignment = [
-        {
-            name: "display",
-            type: "list",
-            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "position",
-            type: "list",
-            values: ["static", "relative", "absolute"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "inset",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "margin",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }, {
-            name: "padding",
-            type: "thickness",
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    //@ts-ignore
     grid = [
         {
             name: "display",
@@ -191,7 +133,6 @@ export class CssPropertiesService {
             propertyType: PropertyType.cssValue
         }
     ];
-    //@ts-ignore
     flex = [
         {
             name: "display",
@@ -245,13 +186,13 @@ export class CssPropertiesService {
         return true;
     }
     getProperty(designItem, name) {
-        if (this.name == 'set-styles') {
+        if (this.name == 'styles') {
             return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
         }
         return this[this.name][name];
     }
     getProperties(designItem) {
-        if (this.name == 'set-styles') {
+        if (this.name == 'styles') {
             if (!designItem)
                 return [];
             return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.d.ts

@@ -3,11 +3,14 @@ import { IDesignItem } from '../../../item/IDesignItem';
 import { CommonPropertiesService } from "./CommonPropertiesService";
 export declare class NativeElementsPropertiesService extends CommonPropertiesService {
     private inputProperties;
+    private textareaProperties;
+    private selectProperties;
     private buttonProperties;
     private anchorProperties;
     private divProperties;
     private imgProperties;
     private iframeProperties;
+    private formElementProperties;
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -1,7 +1,6 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
 import { PropertyType } from '../PropertyType';
 export class NativeElementsPropertiesService extends CommonPropertiesService {
-    //@ts-ignore
     inputProperties = [
         {
             name: "type",
@@ -15,6 +14,11 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }, {
             name: "checked",
             type: "boolean",
@@ -30,6 +34,52 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "number",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    selectProperties = [
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     buttonProperties = [
@@ -45,11 +95,6 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "disabled",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     anchorProperties = [
@@ -84,10 +129,32 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             propertyType: PropertyType.propertyAndAttribute
         }
     ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
     name = "native";
     isHandledElement(designItem) {
         switch (designItem.element.localName) {
             case 'input':
+            case 'textarea':
+            case 'select':
             case 'button':
             case 'a':
             case 'div':
@@ -107,9 +174,13 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             return null;
         switch (designItem.element.localName) {
             case 'input':
-                return this.inputProperties;
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
             case 'button':
-                return this.buttonProperties;
+                return [...this.buttonProperties, ...this.formElementProperties];
             case 'a':
                 return this.anchorProperties;
             case 'div':

package/dist/elements/services/propertiesService/services/SVGElementsPropertiesService.d.ts

@@ -0,0 +1,15 @@
+import { IProperty } from '../IProperty';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { CommonPropertiesService } from "./CommonPropertiesService";
+export declare class SVGElementsPropertiesService extends CommonPropertiesService {
+    private rectProperties;
+    private lineProperties;
+    private ellipseProperties;
+    private pathProperties;
+    private svgProperties;
+    private defaultProperties;
+    name: string;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[];
+}

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

@@ -0,0 +1,259 @@
+import { CommonPropertiesService } from "./CommonPropertiesService";
+import { PropertyType } from '../PropertyType';
+export class SVGElementsPropertiesService extends CommonPropertiesService {
+    rectProperties = [
+        {
+            name: "x",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "width",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "height",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "rx",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "ry",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill",
+            type: "list",
+            values: ["transparent", "black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "transparent",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    lineProperties = [
+        {
+            name: "x1",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y1",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "x2",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y2",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    ellipseProperties = [
+        {
+            name: "cx",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "cy",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "rx",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "ry",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill",
+            type: "list",
+            values: ["transparent", "black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "transparent",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    pathProperties = [
+        {
+            name: "d",
+            type: "string",
+            defaultValue: '',
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    svgProperties = [
+        {
+            name: "width",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "height",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "viewBox",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    defaultProperties = [
+        {
+            name: "stroke",
+            type: "list",
+            values: ["black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "currentcolor",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "stroke-width",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "stroke-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "visibility",
+            type: "list",
+            values: ["visible", "hidden"],
+            defaultValue: "visible",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "svg";
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'rect':
+            case 'line':
+            case 'ellipse':
+            case 'path':
+            case 'svg':
+                return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem)[name];
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'rect':
+                return [...this.rectProperties, ...this.defaultProperties];
+            case 'line':
+                return [...this.lineProperties, ...this.defaultProperties];
+            case 'ellipse':
+                return [...this.ellipseProperties, ...this.defaultProperties];
+            case 'path':
+                return [...this.pathProperties, ...this.defaultProperties];
+            case 'svg':
+                return this.svgProperties;
+        }
+        return null;
+    }
+}

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts

@@ -5,6 +5,7 @@ import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
 import { IBinding } from "../../../item/IBinding";
 export declare abstract class UnkownElementPropertiesService implements IPropertiesService {
+    listNeedsRefresh(designItem: IDesignItem): boolean;
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -3,6 +3,9 @@ import { PropertiesHelper } from './PropertiesHelper';
 import { BindingTarget } from "../../../item/BindingTarget";
 //@ts-ignore
 export class UnkownElementPropertiesService {
+    listNeedsRefresh(designItem) {
+        return true;
+    }
     isHandledElement(designItem) {
         return true;
     }
@@ -15,7 +18,9 @@ export class UnkownElementPropertiesService {
         return null;
     }
     setValue(designItems, property, value) {
-        const attributeName = PropertiesHelper.camelToDashCase(property.name);
+        let attributeName = property.attributeName;
+        if (!attributeName)
+            attributeName = PropertiesHelper.camelToDashCase(property.name);
         const cg = designItems[0].openGroup("properties changed");
         try {
             for (let d of designItems) {

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

@@ -233,28 +233,31 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         switch (command.type) {
             case CommandType.screenshot:
                 {
+                    if (!Screenshot.screenshotsEnabled) {
+                        alert("you need to select current tab in next browser dialog, or screenshots will not work correctly");
+                    }
                     if (!this.instanceServiceContainer.selectionService.primarySelection) {
                         this.zoomToFit();
                         this.disableBackgroud();
-                        await sleep(100);
                         const el = this.rootDesignItem.element;
                         const sel = this.instanceServiceContainer.selectionService.selectedElements;
                         this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        await sleep(100);
                         const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
                         await exportData(dataURItoBlob(screenshot), "screenshot.png");
                         this.instanceServiceContainer.selectionService.setSelectedElements(sel);
                         this.enableBackground();
                     }
                     else {
-                        if (!Screenshot.screenshotsEnabled) {
-                            alert("you need to select current tab in next browser dialog, or screenshots will not work correctly");
-                        }
+                        this.disableBackgroud();
                         const el = this.instanceServiceContainer.selectionService.primarySelection.element;
                         const sel = this.instanceServiceContainer.selectionService.selectedElements;
                         this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        await sleep(100);
                         const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
                         await exportData(dataURItoBlob(screenshot), "screenshot.png");
                         this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        this.enableBackground();
                     }
                 }
                 break;
@@ -482,6 +485,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
+        this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     addDesignItems(designItems) {
         if (designItems) {
@@ -622,6 +626,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this._dragOverExtensionItem = null;
                 }
                 let [newContainer] = this._getPossibleContainerForDrop(event);
+                if (!newContainer)
+                    newContainer = this.rootDesignItem;
                 let pos = this.getNormalizedElementCoordinates(newContainer.element);
                 this._fillCalculationrects();
                 const position = this.getNormalizedEventCoordinates(event);
@@ -780,6 +786,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 continue;
             if (e.getRootNode() !== this.shadowRoot)
                 continue;
+            if (e == this._outercanvas2)
+                break;
             retVal.push(e);
             if (e === this._canvas)
                 break;
@@ -791,6 +799,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let currentElement = null;
         for (let i = 0; i < elements.length; i++) {
             currentElement = elements[i];
+            if (currentElement == this._outercanvas2) {
+                currentElement = null;
+                break;
+            }
             if (currentElement == this.clickOverlay) {
                 currentElement = null;
                 continue;

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

@@ -20,8 +20,10 @@ export class TextTool {
                 di.setStyle('left', currentPoint.x + 'px');
                 di.setStyle('top', currentPoint.y + 'px');
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                //designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                //todo: we need to keep the tool active, cause the pointer tool eats the stylo events. Maybe we could also remove the eatEvents property
                 //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
+                //should we configure the editTextExtension anywhere??
                 designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
                 setTimeout(() => {
                     span.focus();

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

@@ -7,6 +7,7 @@ export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _designerTabControl;
     private _selectedItems;
     private _propertyGridPropertyLists;
+    private _propertyGridPropertyListsDict;
     private _itemsObserver;
     private _instanceServiceContainer;
     private _selectionChangedHandler;