@node-projects/web-component-designer 0.0.98 → 0.0.101

package/dist/elements/documentContainer.js

@@ -10,7 +10,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _additionalStyle;
     set additionalStyleString(style) {
         this._additionalStyle = style;
-        this.designerView.additionalStyle = cssFromString(style);
+        this.designerView.additionalStyles = [cssFromString(style)];
     }
     ;
     get additionalStyleString() {

package/dist/elements/helper/CssCombiner.js

@@ -135,7 +135,11 @@ export class CssCombiner {
             styles.delete('margin-right');
             styles.delete('margin-bottom');
             styles.delete('margin-left');
-            styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft);
+            if (e.style.marginTop == e.style.marginRight && e.style.marginTop == e.style.marginBottom && e.style.marginTop == e.style.marginLeft) {
+                styles.set('margin', e.style.marginTop);
+            }
+            else
+                styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft);
         }
     }
     static combinePadding(styles) {
@@ -155,7 +159,11 @@ export class CssCombiner {
             styles.delete('padding-right');
             styles.delete('padding-bottom');
             styles.delete('padding-left');
-            styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft);
+            if (e.style.paddingTop == e.style.paddingRight && e.style.paddingTop == e.style.paddingBottom && e.style.paddingTop == e.style.paddingLeft) {
+                styles.set('padding', e.style.paddingTop);
+            }
+            else
+                styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft);
         }
     }
     static combineInset(styles) {

package/dist/elements/helper/GridHelper.js

@@ -1,7 +1,8 @@
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
-    let itemRect = designItem.element.getBoundingClientRect();
+    let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
+    //let itemRect = designItem.element.getBoundingClientRect();
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
@@ -11,8 +12,8 @@ export function CalculateGridInformation(designItem) {
     let xGap = 0;
     let yGap = 0;
     let rw = 0;
-    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
-    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let xOffset = itemRect.x; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
+    let yOffset = itemRect.y; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
     let gridA = null;
     if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
         gridA = computedStyle.gridTemplateAreas.split('\"');

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -13,6 +13,8 @@ export class DefaultPlacementService {
             return false;
         if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
             return false;
+        if (!items.every(x => !x.element.contains(container.element)))
+            return false;
         return true;
     }
     canLeave(container, items) {

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

@@ -64,7 +64,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getDesignSurfaceDimensions(): ISize;
     get designerOffsetWidth(): number;
     get designerOffsetHeight(): number;
-    set additionalStyle(value: CSSStyleSheet);
+    set additionalStyles(value: CSSStyleSheet[]);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
     handleSelectAll(): void;

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

@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
 import { UndoService } from '../../services/undoService/UndoService';
 import { SelectionService } from '../../services/selectionService/SelectionService';
 import { DesignItem } from '../../item/DesignItem';
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
@@ -199,21 +199,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     get designerOffsetHeight() {
         return this._canvasContainer.offsetHeight;
     }
-    set additionalStyle(value) {
+    set additionalStyles(value) {
         if (value) {
-            for (let r of value.rules) {
-                if (r instanceof CSSStyleRule) {
-                    let parts = r.selectorText.split(',');
-                    let t = '';
-                    for (let p of parts) {
-                        if (r.selectorText)
-                            t += ',';
-                        t += '#canvas ' + p;
+            let style = '';
+            for (let s of value) {
+                for (let r of s.cssRules) {
+                    if (r instanceof CSSStyleRule) {
+                        let parts = r.selectorText.split(',');
+                        let t = '';
+                        for (let p of parts) {
+                            if (t)
+                                t += ',';
+                            t += '#node-projects-designer-canvas-canvas ' + p;
+                        }
+                        style += t + '{' + r.style.cssText + '}';
                     }
-                    r.selectorText = t;
                 }
             }
-            this.shadowRoot.adoptedStyleSheets = [this.constructor.style, value];
+            this.shadowRoot.adoptedStyleSheets = [this.constructor.style, cssFromString(style)];
         }
         else
             this.shadowRoot.adoptedStyleSheets = [this.constructor.style];

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

@@ -29,7 +29,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
-    set additionalStyle(value: CSSStyleSheet);
+    set additionalStyles(value: CSSStyleSheet[]);
     setDesignItems(designItems: IDesignItem[]): void;
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;

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

@@ -243,7 +243,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             scaleX = cvRect.width / dimensions.width;
         if (dimensions.height)
             scaleY = cvRect.height / dimensions.height;
-        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+        let fak = scaleX < scaleY ? scaleX : scaleY;
+        if (!isNaN(fak))
+            this._designerCanvas.zoomFactor = fak;
         this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
     }
     _onScrollbar(e) {
@@ -295,8 +297,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set designerHeight(value) {
         this._designerCanvas.designerHeight = value;
     }
-    set additionalStyle(value) {
-        this._designerCanvas.additionalStyle = value;
+    set additionalStyles(value) {
+        this._designerCanvas.additionalStyles = value;
     }
     setDesignItems(designItems) {
         this._designerCanvas.setDesignItems(designItems);

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

@@ -4,19 +4,17 @@ export class CanvasExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.margin !== '0px') {
-            const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-            const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
             const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
             const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
             const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
             const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-            this._drawRect(xOffset - left, yOffset - top, left + itemRect.width + right, top, 'svg-margin');
-            this._drawRect(xOffset - left, yOffset, left, itemRect.height, 'svg-margin');
-            this._drawRect(xOffset + itemRect.width, yOffset, right, itemRect.height, 'svg-margin');
-            this._drawRect(xOffset - left, yOffset + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
         }
     }
     refresh() {

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

@@ -10,6 +10,9 @@ export class ElementDragTitleExtension extends AbstractExtension {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
         this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        title.textContent = this.extendedItem.name;
+        this._text.appendChild(title);
         this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));

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

@@ -1,4 +1,5 @@
 import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
 export class GrayOutExtension extends AbstractExtension {
     _path;
     constructor(extensionManager, designerView, extendedItem) {
@@ -11,7 +12,7 @@ export class GrayOutExtension extends AbstractExtension {
         if (!this._path) {
             this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             this._path.setAttribute('class', 'svg-gray-out');
-            this.overlayLayerView.appendChild(this._path);
+            this.overlayLayerView.addOverlay(this._path, OverlayLayer.Background);
             this.overlays.push(this._path);
         }
         let itemRect = this.extendedItem.element.getBoundingClientRect();

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

@@ -7,6 +7,7 @@ export declare class PointerTool implements ITool {
     private _initialPoint;
     private _actionType?;
     private _actionStartedDesignItem?;
+    private _actionStartedDesignItems?;
     private _previousEventName;
     private _dragOverExtensionItem;
     private _dragExtensionItem;

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

@@ -9,6 +9,7 @@ export class PointerTool {
     _initialPoint;
     _actionType;
     _actionStartedDesignItem;
+    _actionStartedDesignItems;
     _previousEventName;
     _dragOverExtensionItem;
     _dragExtensionItem;
@@ -69,6 +70,7 @@ export class PointerTool {
             this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
             if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
+                this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                 designerCanvas.snapLines.clearSnaplines();
                 if (currentDesignItem !== designerCanvas.rootDesignItem) {
                     this._actionType = PointerActionType.Drag;
@@ -106,6 +108,7 @@ export class PointerTool {
     _resetTool() {
         this._actionType = null;
         this._actionStartedDesignItem = null;
+        this._actionStartedDesignItems = null;
         this._movedSinceStartedAction = false;
         this._initialPoint = null;
     }
@@ -154,6 +157,7 @@ export class PointerTool {
                         if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                     }
+                    this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                     if (designerCanvas.alignOnSnap)
                         designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     break;
@@ -177,7 +181,7 @@ export class PointerTool {
                             else {
                                 designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
                             }
-                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
+                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
                             let newContainerElementDesignItem = null;
                             let newContainerService = null;
                             if (canLeave) {
@@ -203,7 +207,7 @@ export class PointerTool {
                                         const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
                                         newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                                         if (newContainerService) {
-                                            if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
+                                            if (newContainerService.canEnter(newContainerElementDesignItem, this._actionStartedDesignItems)) {
                                                 break;
                                             }
                                             else {
@@ -237,17 +241,18 @@ export class PointerTool {
                                 const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem);
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
-                                currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
+                                currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
+                                for (let di of this._actionStartedDesignItems)
+                                    newContainerElementDesignItem._insertChildInternal(di); //todo -> maybe in enter container???
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
-                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
+                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
                             else {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
-                            designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems);
                         }
                     }
                     break;

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.98",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
-    "construct-style-sheets-polyfill": "^3.1.0"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.15",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.14",
-    "codemirror": "^5.65.3",
-    "esprima-next": "^5.8.1",
-    "html2canvas": "*",
-    "jest": "^27.5.1",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.101",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.9.1",
+    "construct-style-sheets-polyfill": "^3.1.0"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@papyrs/stylo": "^0.0.30",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.7.1",
+    "codemirror": "^6.0.1",
+    "esprima-next": "^5.8.3",
+    "html2canvas": "*",
+    "jest": "^28.1.2",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.2",
+    "monaco-editor": "^0.33.0",
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}