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

package/assets/images/chromeDevtools/flex-direction-row-icon.svg

@@ -1 +1,82 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><g clip-path="url(#clip0)"><rect x="2" y="2.816" width="4.607" height="2.738" rx=".5" stroke="#000"/><rect x="1.5" y="6.989" width="5.607" height="3.738" rx="1" fill="#000"/><path d="M9.461 1.5v7.63H8L10.002 12 12 9.13h-1.458V1.5h-1.08z" fill="#000"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="none"
+   viewBox="0 0 13 13"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="flex-direction-row-icon.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="987"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="63.076923"
+     inkscape:cx="6.5"
+     inkscape:cy="6.5"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg15" />
+  <g
+     clip-path="url(#clip0)"
+     id="g8"
+     transform="matrix(0,1,1,0,0,0)">
+    <rect
+       x="2"
+       y="2.816"
+       width="4.6069999"
+       height="2.7379999"
+       rx="0.5"
+       stroke="#000000"
+       id="rect2" />
+    <rect
+       x="1.5"
+       y="6.9889998"
+       width="5.6069999"
+       height="3.7379999"
+       rx="1"
+       fill="#000000"
+       id="rect4" />
+    <path
+       d="M 9.461,1.5 V 9.13 H 8 L 10.002,12 12,9.13 H 10.542 V 1.5 h -1.08 z"
+       fill="#000000"
+       id="path6" />
+  </g>
+  <defs
+     id="defs13">
+    <clipPath
+       id="clip0">
+      <path
+         fill="#fff"
+         d="M0 0h13v13H0z"
+         id="path10" />
+    </clipPath>
+  </defs>
+</svg>

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

@@ -21,6 +21,7 @@ export declare class DesignItem implements IDesignItem {
     get name(): string;
     get id(): string;
     set id(value: string);
+    get isRootItem(): boolean;
     private _childArray;
     get hasChildren(): boolean;
     children(): IterableIterator<IDesignItem>;

package/dist/elements/item/DesignItem.js

@@ -44,6 +44,9 @@ export class DesignItem {
     set id(value) {
         this.element.id = value;
     }
+    get isRootItem() {
+        return this.instanceServiceContainer.contentService.rootDesignItem === this;
+    }
     _childArray = [];
     get hasChildren() {
         return this._childArray.length > 0;

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

@@ -9,6 +9,7 @@ export interface IDesignItem {
     readonly nodeType: NodeType;
     readonly name: string;
     readonly id: string;
+    readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
     readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;

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

@@ -11,6 +11,6 @@ export class NumberPropertyEditor extends BasePropertyEditor {
         this.element = element;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.value = value === undefined ? null : value;
     }
 }

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

@@ -115,6 +115,11 @@ export class CssPropertiesService {
             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: "grid-template-columns",
             type: "string",
@@ -160,6 +165,11 @@ export class CssPropertiesService {
             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: "flex-direction",
             type: "img-list",

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

@@ -22,6 +22,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
 }

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

@@ -70,6 +70,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IPoint;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;

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

@@ -486,6 +486,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: offsetOfOuterY - offsetOfCanvasY
         };
     }
+    getNormalizedElementCoordinates(element) {
+        const targetRect = element.getBoundingClientRect();
+        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y };
+    }
+    getNormalizedOffsetInElement(event, element) {
+        const normEvt = this.getNormalizedEventCoordinates(event);
+        const normEl = this.getNormalizedElementCoordinates(element);
+        return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
+    }
     //todo remove, is in base custom webcomp domhelper
     static getHost(node) {
         while (node.parentElement)

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

@@ -40,11 +40,7 @@ export class PointerTool {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
-            const targetRect = currentElement.getBoundingClientRect();
-            this._initialOffset = {
-                x: event.x - targetRect.x,
-                y: event.y - targetRect.y
-            };
+            this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
             if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
                 designerCanvas.snapLines.clearSnaplines();

package/package.json

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