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

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export declare class ThicknessPropertyEditor extends BasePropertyEditor<ThicknessEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -0,0 +1,14 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export class ThicknessPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ThicknessEditor();
+        selector.property = property.name;
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

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

@@ -6,8 +6,9 @@ export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
     private grid;
-    name: 'alignment' | 'styles' | 'grid';
-    constructor(name: 'alignment' | 'styles' | 'grid');
+    private flex;
+    name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex';
+    constructor(name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];

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

@@ -86,59 +86,26 @@ export class CssPropertiesService {
         //@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",
+                name: "position",
                 type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                values: ["static", "relative", "absolute"],
                 service: this
             }, {
-                name: "align-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                name: "inset",
+                type: "thickness",
                 service: this
             }, {
-                name: "align-content",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                name: "margin",
+                type: "thickness",
                 service: this
             }, {
-                name: "flex",
-                type: "string",
-                default: "0 1 auto",
+                name: "padding",
+                type: "thickness",
                 service: this
             }
         ];
@@ -165,25 +132,59 @@ export class CssPropertiesService {
                 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: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
+                type: "img-list",
+                values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
                 service: this
             }, {
-                name: "align-content",
-                type: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
+                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
+        this.flex = [
+            {
+                name: "display",
                 type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                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: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                type: "img-list",
+                values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
                 service: this
             }
         ];
@@ -193,9 +194,17 @@ export class CssPropertiesService {
         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/widgets/designerView/IDesignerCanvas.d.ts

@@ -19,6 +19,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    zoomFactor: number;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -49,6 +49,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set additionalStyle(value: CSSStyleSheet);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
+    handleSelectAll(): void;
     handleCopyCommand(): void;
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
@@ -63,7 +64,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragLeave;
     private _onDragOver;
     private _onDrop;
-    private _onWheel;
     private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;

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

@@ -134,6 +134,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.paste:
                 this.handlePasteCommand();
                 break;
+            case CommandType.selectAll:
+                this.handleSelectAll();
+                break;
         }
     }
     canExecuteCommand(command) {
@@ -149,6 +152,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return true;
     }
     /* --- end IUiCommandHandler --- */
+    handleSelectAll() {
+        this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
+    }
     handleCopyCommand() {
         const copyText = DomConverter.ConvertToString(this.instanceServiceContainer.selectionService.selectedElements, null);
         navigator.clipboard.writeText(copyText);
@@ -224,7 +230,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
-            this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         }
     }
     zoomFactorChanged() {
@@ -300,23 +305,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             let grp = di.openGroup("Insert");
             di.setStyle('position', 'absolute');
             const targetRect = event.target.getBoundingClientRect();
-            di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
-            di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
+            di.setStyle('top', ((event.offsetY - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + targetRect.top) + 'px');
+            di.setStyle('left', ((event.offsetX - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + targetRect.left) + 'px');
             this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
             grp.commit();
             requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
         }
     }
-    _onWheel(event) {
-        if (event.ctrlKey) {
-            event.preventDefault();
-            this._zoomFactor += event.deltaY * -0.001; //deltamode = 0
-            if (this._zoomFactor < 0.1)
-                this._zoomFactor = 0.1;
-            this.zoomFactorChanged();
-            //TODO: we should zoom on the current cursor position, so it stays the center
-        }
-    }
     _onContextMenu(event) {
         event.preventDefault();
         const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
@@ -359,6 +354,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.executeCommand({ type: CommandType.redo });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
             this.executeCommand({ type: CommandType.redo });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
+            this.executeCommand({ type: CommandType.selectAll });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
+            this.executeCommand({ type: CommandType.copy });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
+            this.executeCommand({ type: CommandType.paste });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
+            this.executeCommand({ type: CommandType.cut });
         else {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (!primarySelection) {
@@ -411,7 +414,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: (event.y - this.containerBoundingRect.y) / this._zoomFactor,
             offsetInControlX: (startPoint ? startPoint.offsetInControlX : event.x - targetRect.x),
             offsetInControlY: (startPoint ? startPoint.offsetInControlY : event.y - targetRect.y),
-            zoom: this._zoomFactor
+            zoom: this._zoomFactor,
+            normalizedX: ((event.offsetX - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + targetRect.left),
+            normalizedY: ((event.offsetY - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + targetRect.top)
         };
     }
     //todo remove, is in base custom webcomp domhelper

package/dist/elements/widgets/designerView/designerView.d.ts

@@ -16,6 +16,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly template: HTMLTemplateElement;
     private _designerCanvas;
     constructor();
+    private _onWheel;
     get designerWidth(): string;
     set designerWidth(value: string);
     get designerHeight(): string;

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

@@ -2,6 +2,7 @@ import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@
 import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { EventNames } from '../../../enums/EventNames.js';
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     constructor() {
         super();
@@ -11,16 +12,37 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
         this._zoomInput = this._getDomElement('zoomInput');
-        this._zoomInput.onchange = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; };
+        this._zoomInput.onkeydown = (e) => {
+            if (e.key == 'Enter')
+                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this._zoomInput.onblur = () => {
+            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         this._zoomInput.onclick = this._zoomInput.select;
         let zoomIncrease = this._getDomElement('zoomIncrease');
-        zoomIncrease.onclick = () => { this._designerCanvas.zoomFactor += 0.1; };
+        zoomIncrease.onclick = () => {
+            this._designerCanvas.zoomFactor += 0.1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomDecrease = this._getDomElement('zoomDecrease');
-        zoomDecrease.onclick = () => { this._designerCanvas.zoomFactor -= 0.1; };
+        zoomDecrease.onclick = () => {
+            this._designerCanvas.zoomFactor -= 0.1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomReset = this._getDomElement('zoomReset');
-        zoomReset.onclick = () => { this._designerCanvas.zoomFactor = 1; };
+        zoomReset.onclick = () => {
+            this._designerCanvas.zoomFactor = 1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomFit = this._getDomElement('zoomFit');
-        zoomFit.onclick = () => { this._designerCanvas.zoomFactor = 7.7; };
+        zoomFit.onclick = () => {
+            this._designerCanvas.zoomFactor = 7.7;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         let alignSnap = this._getDomElement('alignSnap');
         alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; };
         alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : '';
@@ -40,6 +62,18 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
+    _onWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+            let zf = this._designerCanvas.zoomFactor;
+            zf += event.deltaY * -0.001; //deltamode = 0
+            if (zf < 0.02)
+                zf = 0.02;
+            this._designerCanvas.zoomFactor = zf;
+            this._zoomInput.value = Math.round(zf * 100) + '%';
+            //TODO: we should zoom on the current cursor position, so it stays the center
+        }
+    }
     get designerWidth() {
         return this._designerCanvas.designerWidth;
     }

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

@@ -16,8 +16,8 @@ export class RectangleSelectorTool {
                 if (!this._rect)
                     this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', this._initialPoint.x);
-                this._rect.setAttribute('y', this._initialPoint.y);
+                this._rect.setAttribute('x', this._initialPoint.normalizedX);
+                this._rect.setAttribute('y', this._initialPoint.normalizedY);
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
@@ -27,19 +27,19 @@ export class RectangleSelectorTool {
                     let w = currentPoint.x - this._initialPoint.x;
                     let h = currentPoint.y - this._initialPoint.y;
                     if (w >= 0) {
-                        this._rect.setAttribute('x', this._initialPoint.x);
+                        this._rect.setAttribute('x', this._initialPoint.normalizedX);
                         this._rect.setAttribute('width', w);
                     }
                     else {
-                        this._rect.setAttribute('x', currentPoint.x);
+                        this._rect.setAttribute('x', currentPoint.normalizedX);
                         this._rect.setAttribute('width', (-1 * w));
                     }
                     if (h >= 0) {
-                        this._rect.setAttribute('y', this._initialPoint.y);
+                        this._rect.setAttribute('y', this._initialPoint.normalizedY);
                         this._rect.setAttribute('height', h);
                     }
                     else {
-                        this._rect.setAttribute('y', currentPoint.y);
+                        this._rect.setAttribute('y', currentPoint.normalizedY);
                         this._rect.setAttribute('height', (-1 * h));
                     }
                 }

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

@@ -40,6 +40,12 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         this._designerTabControl.appendChild(attributeEditorAttributeList);
         this._propertyGridPropertyLists.push(attributeEditorAttributeList);
         attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "set-styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
         attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
         attributeEditorAttributeList.createElements(null);
         attributeEditorAttributeList.title = "styles";
@@ -57,6 +63,12 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         attributeEditorAttributeList.title = "grid";
         this._designerTabControl.appendChild(attributeEditorAttributeList);
         this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "flex";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
         this._designerTabControl.selectedIndex = 0;
     }
     get serviceContainer() {
@@ -72,6 +84,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
             this._propertyGridPropertyLists[0].setPropertiesService(propService);
             this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
             this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
         }
         for (const a of this._propertyGridPropertyLists) {
             a.designItemsChanged(items);
@@ -107,6 +120,7 @@ PropertyGrid.style = css `
     :host {
       display: block;
       height: 100%;
+      user-select: none;
     }
     iron-pages {
       overflow: hidden;

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

@@ -21,9 +21,9 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     .content-wrapper {
       padding: .5em;
       display: grid;
-      grid-template-columns: 11px auto 1fr;
+      grid-template-columns: 11px auto minmax(80px, 1fr);
       align-items: center;
-      grid-auto-rows: 24px;
+      grid-auto-rows: minmax(24px, auto);
       align-items: center;
     }
     label, input, select {

package/dist/interfaces/IDesignerMousePoint.d.ts

@@ -6,4 +6,6 @@ export interface IDesignerMousePoint {
     offsetInControlX: number;
     offsetInControlY: number;
     zoom?: number;
+    normalizedX?: number;
+    normalizedY?: number;
 }

package/package.json

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