@node-projects/web-component-designer 0.0.97 → 0.0.100

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/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

@@ -21,7 +21,6 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
-    ready(): Promise<void>;
     zoomReset(): void;
     zoomToFit(): void;
     private _onScrollbar;
@@ -30,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

@@ -3,6 +3,7 @@ import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
+import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
 const autoZomOffset = 10;
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     _sVert;
@@ -83,7 +84,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: calc(100% - 32px);
     }
 
-    #tool-bar{
+    #tool-bar {
       width: 24px;
       height: calc(100% - 32px);
       position: absolute;
@@ -131,7 +132,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       <node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
       <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
       </node-projects-plain-scrollbar>
-      <node-projects-designer-toolbar id="tool-bar" class="tool-bar"></node-projects-designer-toolbar>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -150,11 +150,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     constructor() {
         super();
         this._restoreCachedInititalValues();
+        this._sVert = this._getDomElement('s-vert');
+        this._sHor = this._getDomElement('s-hor');
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
+        this._toolbar = new DesignerToolbar();
+        this._toolbar.id = 'tool-bar';
+        this._sVert.insertAdjacentElement('afterend', this._toolbar);
         this._designerCanvas.onZoomFactorChanged.on(() => {
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
             const pos = this.designerCanvas.canvasOffset;
@@ -205,15 +210,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
         alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
         this._lowertoolbar = this._getDomElement('lowertoolbar');
-        this._sVert = this._getDomElement('s-vert');
-        this._sHor = this._getDomElement('s-hor');
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
-    async ready() {
-        this._toolbar = await this._getDomElement('tool-bar');
-        this._toolbar.initialize(this.serviceContainer, this);
-    }
     zoomReset() {
         this._designerCanvas.canvasOffset = { x: 0, y: 0 };
         this._designerCanvas.zoomFactor = 1;
@@ -244,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) {
@@ -296,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);
@@ -319,6 +320,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
                     this._lowertoolbar.appendChild(btn);
             }
         }
+        this._toolbar.initialize(this.serviceContainer, this);
     }
     getHTML(designItemsAssignmentList) {
         //this.instanceServiceContainer.selectionService.setSelectedElements(null);

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/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/index.d.ts

@@ -101,6 +101,16 @@ export type { IPlacementView } from "./elements/widgets/designerView/IPlacementV
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
+export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
+export type { IDesignViewToolbarButtonProvider } from "./elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
 export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/NamedTools.js";

package/dist/index.js

@@ -66,6 +66,15 @@ export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
+export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.97",
+  "version": "0.0.100",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -19,20 +19,20 @@
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.15",
+    "@papyrs/stylo": "^0.0.26",
     "@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",
+    "ace-builds": "^1.5.1",
+    "codemirror": "^5.65.4",
+    "esprima-next": "^5.8.2",
     "html2canvas": "*",
-    "jest": "^27.5.1",
+    "jest": "^28.1.0",
     "jquery": "^3.6.0",
     "jquery.fancytree": "^2.38.1",
     "monaco-editor": "^0.33.0",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3",
+    "ts-jest": "^28.0.3",
+    "typescript": "^4.7.2",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {