@node-projects/web-component-designer 0.0.65 → 0.0.66

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -48,7 +48,7 @@ import { DefaultModelCommandService } from './modelCommandService/DefaultModelCo
 import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
 import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
 import { DemoProviderService } from './demoProviderService/DemoProviderService';
-import { CursorLinePointerExtensionProvider } from '../widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js';
+//import { CursorLinePointerExtensionProvider } from '../widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
@@ -117,7 +117,9 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
-    serviceContainer.designerPointerExtensions.push(new CursorLinePointerExtensionProvider());
+    serviceContainer.designerPointerExtensions.push(
+    //new CursorLinePointerExtensionProvider()
+    );
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

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

@@ -31,7 +31,7 @@ export class DefaultPlacementService {
             }
             else if (placementView.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
                 }

package/dist/elements/services/placementService/ISnaplinesProviderService.d.ts

@@ -1,11 +1,12 @@
 import { IService } from "../IService";
 import { IDesignItem } from "../../item/IDesignItem";
+import { IRect } from "../../../interfaces/IRect.js";
 export interface ISnaplinesProviderService extends IService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;
-        positionsH: [number, DOMRect][];
-        positionsMiddleH: [number, DOMRect][];
-        positionsV: [number, DOMRect][];
-        positionsMiddleV: [number, DOMRect][];
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
     };
 }

package/dist/elements/services/placementService/SnaplinesProviderService.d.ts

@@ -1,11 +1,12 @@
+import { IRect } from '../../../interfaces/IRect.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
 export declare class SnaplinesProviderService implements ISnaplinesProviderService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;
-        positionsH: [number, DOMRect][];
-        positionsMiddleH: [number, DOMRect][];
-        positionsV: [number, DOMRect][];
-        positionsMiddleV: [number, DOMRect][];
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
     };
 }

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

@@ -2,6 +2,7 @@ import { DomHelper } from '@node-projects/base-custom-webcomponent';
 export class SnaplinesProviderService {
     provideSnaplines(containerItem, ignoredItems) {
         {
+            const canvas = containerItem.instanceServiceContainer.designerCanvas;
             const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
             const outerRect = containerItem.element.getBoundingClientRect();
             const positionsH = [];
@@ -11,19 +12,20 @@ export class SnaplinesProviderService {
             let ignoreElements = ignoredItems.map(x => x.element);
             for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
                 if (!ignMap.has(n)) {
-                    let p = n.getBoundingClientRect();
-                    let pLeft = p.x - outerRect.x;
-                    let pMidH = p.x - outerRect.x + p.width / 2;
-                    let pRight = p.x - outerRect.x + p.width;
-                    positionsH.push([pLeft, p]);
-                    positionsMiddleH.push([pMidH, p]);
-                    positionsH.push([pRight, p]);
-                    let pTop = p.y - outerRect.y;
-                    let pMidV = p.y - outerRect.y + p.height / 2;
-                    let pBottom = p.y - outerRect.y + p.height;
-                    positionsV.push([pTop, p]);
-                    positionsMiddleV.push([pMidV, p]);
-                    positionsV.push([pBottom, p]);
+                    const p = n.getBoundingClientRect();
+                    const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;
+                    const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor;
+                    const pRight = (p.x - outerRect.x + p.width) / canvas.scaleFactor;
+                    const pTop = (p.y - outerRect.y) / canvas.scaleFactor;
+                    const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor;
+                    const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor;
+                    const transformedP = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor };
+                    positionsH.push([pLeft, transformedP]);
+                    positionsMiddleH.push([pMidH, transformedP]);
+                    positionsH.push([pRight, transformedP]);
+                    positionsV.push([pTop, transformedP]);
+                    positionsMiddleV.push([pMidV, transformedP]);
+                    positionsV.push([pBottom, transformedP]);
                 }
             }
             positionsH.sort((a, b) => a[0] - b[0]);

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

@@ -8,4 +8,6 @@ export interface IPlacementView {
     rootDesignItem: IDesignItem;
     overlayLayer: OverlayLayerView;
     snapLines: Snaplines;
+    readonly zoomFactor: number;
+    readonly scaleFactor: number;
 }

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

@@ -2,6 +2,7 @@ import type { IDesignItem } from "../../item/IDesignItem";
 import type { IPoint } from "../../../interfaces/IPoint";
 import type { ISize } from '../../../interfaces/ISize';
 import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
 export declare class Snaplines {
     snapOffset: number;
     private _overlayLayerView;
@@ -16,5 +17,5 @@ export declare class Snaplines {
     clearSnaplines(): void;
     calculateSnaplines(ignoredItems: IDesignItem[]): void;
     snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint;
-    drawSnaplines(position: IPoint, size: ISize, rectsH: DOMRect[], rectsV: DOMRect[]): void;
+    drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]): void;
 }

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

@@ -530,7 +530,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedElementCoordinates(element) {
         const targetRect = element.getBoundingClientRect();
-        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y, width: targetRect.width, height: targetRect.height };
+        return { x: (targetRect.x - this.containerBoundingRect.x) / this.scaleFactor, y: (targetRect.y - this.containerBoundingRect.y) / this.scaleFactor, width: targetRect.width / this.scaleFactor, height: targetRect.height / this.scaleFactor };
     }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);
@@ -582,9 +582,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
-        /*let clickOnScrollbar = event.clientX - this.containerBoundingRect.x > this.containerBoundingRect.width || event.clientY - this.containerBoundingRect.y > this.containerBoundingRect.height
-        if (clickOnScrollbar) https://kingsora.github.io/OverlayScrollbars/
-          return;*/
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);

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

@@ -7,6 +7,8 @@ import { DesignerCanvas } from "./designerCanvas.js";
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
 export declare class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler {
+    private _sVert;
+    private _sHor;
     get serviceContainer(): ServiceContainer;
     set serviceContainer(value: ServiceContainer);
     get instanceServiceContainer(): InstanceServiceContainer;
@@ -18,6 +20,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    private _onScrollbar;
     private _onWheel;
     get designerWidth(): string;
     set designerWidth(value: string);

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

@@ -5,6 +5,8 @@ import { DefaultHtmlParserService } from '../../services/htmlParserService/Defau
 import { EventNames } from '../../../enums/EventNames.js';
 const autoZomOffset = 10;
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
+    _sVert;
+    _sHor;
     get serviceContainer() {
         return this._designerCanvas.serviceContainer;
     }
@@ -114,8 +116,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }`;
     static template = html `
     <div id="outer">
-      <node-projects-plain-scrollbar value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
-      <node-projects-plain-scrollbar value="0.5" orientation="vertical" class="right-scroll"></node-projects-plain-scrollbar>
+      <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>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -163,6 +165,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         zoomReset.onclick = () => {
             this._designerCanvas.canvasOffset = { x: 0, y: 0 };
             this._designerCanvas.zoomFactor = 1;
+            this._sVert.value = 0.5;
+            this._sHor.value = 0.5;
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         let zoomFit = this._getDomElement('zoomFit');
@@ -195,6 +199,15 @@ 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', () => this._onScrollbar());
+        this._sHor.addEventListener('scrollbar-input', () => this._onScrollbar());
+    }
+    _onScrollbar() {
+        const x = this.designerCanvas.offsetWidth * (this._sHor.value - 0.5) * -1;
+        const y = this.designerCanvas.offsetHeight * (this._sVert.value - 0.5) * -1;
+        this.designerCanvas.canvasOffset = { x, y };
     }
     _onWheel(event) {
         if (event.ctrlKey) {

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

@@ -10,9 +10,9 @@ export class AltToEnterContainerExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        this._text = this._drawText("Press ALT to enter container", itemRect.x - this.designerCanvas.containerBoundingRect.x + 5, itemRect.y - this.designerCanvas.containerBoundingRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Background);
-        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x, itemRect.y - this.designerCanvas.containerBoundingRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -8,13 +8,13 @@ export class SelectionDefaultExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const itemRect = this.extendedItem.element.getBoundingClientRect();
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
         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._rect = this._drawRect((itemRect.x - this.designerCanvas.containerBoundingRect.x - left) / this.designerCanvas.scaleFactor, (itemRect.y - this.designerCanvas.containerBoundingRect.y - top) / this.designerCanvas.scaleFactor, (left + itemRect.width + right) / this.designerCanvas.scaleFactor, (top + itemRect.height + bottom) / this.designerCanvas.scaleFactor, 'svg-selection', this._rect);
+        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -6,6 +6,8 @@ export declare class DrawEllipsisTool implements ITool {
     private _path;
     private _startPoint;
     private _radius;
+    private _cx;
+    private _cy;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

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

@@ -8,6 +8,8 @@ export class DrawEllipsisTool {
     _path;
     _startPoint;
     _radius;
+    _cx;
+    _cy;
     constructor() {
     }
     activated(serviceContainer) {
@@ -34,16 +36,32 @@ export class DrawEllipsisTool {
             case EventNames.PointerMove:
                 if (this._path) {
                     this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) };
-                    this._path.setAttribute("cx", this._startPoint.x.toString());
-                    this._path.setAttribute("cy", this._startPoint.y.toString());
-                    if (event.shiftKey) {
-                        const radius = calculateNormLegth(this._startPoint, currentPoint);
-                        this._path.setAttribute("rx", radius.toString());
-                        this._path.setAttribute("ry", radius.toString());
+                    if (event.ctrlKey) {
+                        this._path.setAttribute("cx", this._startPoint.x.toString());
+                        this._path.setAttribute("cy", this._startPoint.y.toString());
+                        this._cx = this._startPoint.x;
+                        this._cy = this._startPoint.y;
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._path.setAttribute("rx", radius.toString());
+                            this._path.setAttribute("ry", radius.toString());
+                        }
+                        else {
+                            this._path.setAttribute("rx", this._radius.x.toString());
+                            this._path.setAttribute("ry", this._radius.y.toString());
+                        }
                     }
                     else {
-                        this._path.setAttribute("rx", this._radius.x.toString());
-                        this._path.setAttribute("ry", this._radius.y.toString());
+                        if (event.shiftKey) {
+                            const radius = calculateNormLegth(this._startPoint, currentPoint);
+                            this._radius = { x: radius, y: radius };
+                        }
+                        this._cx = currentPoint.x < this._startPoint.x ? this._startPoint.x - this._radius.x / 2 : this._startPoint.x + this._radius.x / 2;
+                        this._cy = currentPoint.y < this._startPoint.y ? this._startPoint.y - this._radius.y / 2 : this._startPoint.y + this._radius.y / 2;
+                        this._path.setAttribute("cx", this._cx.toString());
+                        this._path.setAttribute("cy", this._cy.toString());
+                        this._path.setAttribute("rx", (this._radius.x / 2).toString());
+                        this._path.setAttribute("ry", (this._radius.y / 2).toString());
                     }
                 }
                 break;
@@ -55,8 +73,8 @@ export class DrawEllipsisTool {
                 const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
                 const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
                 svg.appendChild(this._path);
-                this._path.setAttribute("cx", (this._startPoint.x - mvX).toString());
-                this._path.setAttribute("cy", (this._startPoint.y - mvY).toString());
+                this._path.setAttribute("cx", (this._cx - mvX).toString());
+                this._path.setAttribute("cy", (this._cy - mvY).toString());
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';

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

@@ -42,22 +42,41 @@ export class DrawRectTool {
                     this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
                     this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
                     this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                    if (event.shiftKey) {
-                        const normLength = calculateNormLegth(this._startPoint, currentPoint);
-                        this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
-                        this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
+                    if (event.ctrlKey) {
+                        if (event.shiftKey) {
+                            const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint);
+                            this._px = this._startPoint.x - normLength / 2;
+                            this._py = this._startPoint.y - normLength / 2;
+                            this._path.setAttribute("width", (normLength).toString());
+                            this._path.setAttribute("height", (normLength).toString());
+                        }
+                        else {
+                            const w = 2 * (this._maxX - this._minX);
+                            const h = 2 * (this._maxY - this._minY);
+                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2;
+                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2;
+                            this._path.setAttribute("width", (w).toString());
+                            this._path.setAttribute("height", (h).toString());
+                        }
                         this._path.setAttribute("x", this._px.toString());
                         this._path.setAttribute("y", this._py.toString());
-                        this._path.setAttribute("width", (normLength).toString());
-                        this._path.setAttribute("height", (normLength).toString());
                     }
                     else {
-                        this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                        this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                        this._path.setAttribute("x", this._minX.toString());
-                        this._path.setAttribute("y", this._minY.toString());
-                        this._path.setAttribute("width", (this._maxX - this._minX).toString());
-                        this._path.setAttribute("height", (this._maxY - this._minY).toString());
+                        if (event.shiftKey) {
+                            const normLength = calculateNormLegth(this._startPoint, currentPoint);
+                            this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
+                            this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
+                            this._path.setAttribute("width", (normLength).toString());
+                            this._path.setAttribute("height", (normLength).toString());
+                        }
+                        else {
+                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                            this._path.setAttribute("width", (this._maxX - this._minX).toString());
+                            this._path.setAttribute("height", (this._maxY - this._minY).toString());
+                        }
+                        this._path.setAttribute("x", this._px.toString());
+                        this._path.setAttribute("y", this._py.toString());
                     }
                 }
                 break;

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

@@ -23,7 +23,7 @@ export class PointerTool {
     dispose() {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
+        if (((event.ctrlKey || event.metaKey) && event.shiftKey) || event.buttons == 4) {
             const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
             if (panTool) {
                 panTool.pointerEventHandler(designerCanvas, event, currentElement);

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -73,11 +73,6 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             extensions: ['childcounter', 'dnd5', 'filter'],
             quicksearch: true,
             source: [],
-            activate: (event, data) => {
-                let node = data.node;
-                let designItem = node.data.ref;
-                designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-            },
             dnd5: {
                 dropMarkerParent: this.shadowRoot,
                 preventRecursion: true,

package/package.json

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

package/dist/elements/controls/SimpleSplitView2.d.ts

@@ -1,11 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static properties: {
-        orientation: StringConstructor;
-    };
-    orientation: 'vertical' | 'horizontal';
-    constructor();
-    ready(): void;
-}

package/dist/elements/controls/SimpleSplitView2.js

@@ -1,63 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    :host {
-      display: block;
-    }  
-    #split {
-      position: relative;
-      height: 100%;
-      width: 100%;
-      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
-      display: grid;
-      align-items: center;
-    }
-    :host(:not([orientation="vertical"])) > div > #splitter {
-      cursor: ew-resize;
-      width: 5px;
-    }
-    :host([orientation="vertical"]) > div > #splitter {
-      cursor: ns-resize;
-      height: 5px;
-    }`;
-    static template = html `
-    <div id="split" style="--split: 50;">
-      <slot name="top"></slot>  
-      <div id="splitter"></div>
-      <slot name="bottom"></slot>
-    </div>`;
-    static properties = {
-        orientation: String
-    };
-    orientation = 'vertical';
-    constructor() {
-        super();
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this.setAttribute('orientation', this.orientation);
-        const split = this._getDomElement("split");
-        const splitter = this._getDomElement("splitter");
-        let start = null;
-        splitter.addEventListener('pointerdown', (e) => {
-            splitter.setPointerCapture(e.pointerId);
-            start = true;
-        });
-        splitter.addEventListener('pointerup', (e) => {
-            splitter.releasePointerCapture(e.pointerId);
-            start = null;
-        });
-        splitter.addEventListener('pointermove', (e) => {
-            if (start !== null) {
-                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
-                if (this.orientation === 'horizontal')
-                    splitValue += e.movementX * 100 / split.clientWidth;
-                else
-                    splitValue += e.movementY * 100 / split.clientHeight;
-                if (!isNaN(splitValue))
-                    split.style.setProperty("--split", splitValue);
-            }
-        });
-    }
-}
-customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/aa.d.ts

@@ -1,24 +0,0 @@
-/**
-   * Split View is an image comparison component
-   *
-   * <split-view>
-   *   <picture slot="top">[...]</picture>
-   *   <picture slot="bottom">[...]</picture>
-   * </split-view>
-   *
-   * Options are;
-   *
-   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
-   * mode (string) A CSS mix-blend-mode to use for comparison
-   */
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static properties: {
-        start: NumberConstructor;
-    };
-    constructor();
-    start: number;
-    ready(): void;
-}

package/dist/elements/controls/aa.js

@@ -1,98 +0,0 @@
-/**
-   * Split View is an image comparison component
-   *
-   * <split-view>
-   *   <picture slot="top">[...]</picture>
-   *   <picture slot="bottom">[...]</picture>
-   * </split-view>
-   *
-   * Options are;
-   *
-   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
-   * mode (string) A CSS mix-blend-mode to use for comparison
-   */
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    :host {
-      display: block;
-    }
-    :host([hidden]) { display: none }
-    .split {
-      position: relative;
-      height: 100%;
-      display: grid;
-      align-items: center;
-      --split: 100;
-    }
-    .top,
-    .bottom {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-    .bottom {
-      background-color: red;
-    }
-    .top {
-      z-index: 2;
-      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
-      overflow: hidden;
-      border-right: 1px solid white;
-    }
-    input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      z-index: 3;
-      background-color: transparent;
-      -webkit-appearance: none;
-    }
-    input[type="range"]:focus {
-      outline: var(--outline, -webkit-focus-ring-color auto 1px);
-    }`;
-    static template = html `
-    <div class="split" id="split" role="img" aria-label="Comparison of two images">
-      <div class="bottom" id="bottom" aria-label="First image to compare">
-        <slot name="bottom"></slot>
-      </div>
-      <div class="top" id="top" aria-label="Second image to compare">
-        <slot name="top"></slot>  
-      </div>
-      <label id="label" for="slider">Slide left and right to compare images</label>
-      <input type="range" role="slider" min="0" max="100" value="50" name="slider" id="slider" aria-labelledby="label" aria-valuemin="0" aria-valuemax="100">
-    </div>`;
-    static properties = {
-        start: Number
-    };
-    constructor() {
-        super();
-    }
-    start;
-    ready() {
-        this._parseAttributesToProperties();
-        const splitter = this._getDomElement("split");
-        const slider = this._getDomElement("slider");
-        const label = this._getDomElement("label");
-        const top = this._getDomElement("top");
-        const splitViewLabelText = this.getAttribute("split-view-label") || 'Comparison of two images';
-        const sliderLabelText = this.getAttribute("slider-label") || 'Press left and right to compare images';
-        const mode = this.getAttribute("mode") || "normal";
-        slider.addEventListener("input", (event) => {
-            const split = +event.target.value;
-            splitter.style.setProperty("--split", split);
-            slider.setAttribute('aria-valuenow', split);
-        });
-        splitter.style.setProperty("--split", this.start);
-        slider.setAttribute('aria-valuenow', this.start);
-        slider.value = this.start;
-        splitter.setAttribute('aria-label', splitViewLabelText);
-        label.innerText = sliderLabelText;
-        top.style.mixBlendMode = mode;
-    }
-}
-customElements.define('node-projects-simple-split-view', SimpleSplitView);

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

@@ -1,7 +0,0 @@
-import { IDesignerCanvas } from "./IDesignerCanvas.js";
-import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
-export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
-    _space: number;
-    constructor(space: number);
-    provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,11 +0,0 @@
-export class ButtonSeperatorProvider {
-    _space;
-    constructor(space) {
-        this._space = space;
-    }
-    provideButtons(designerCanvas) {
-        const div = document.createElement('div');
-        div.style.marginLeft = this._space + 'px';
-        return [div];
-    }
-}

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

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProviderConfigButtons {
-    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,12 +0,0 @@
-import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
-export class GridExtensionProviderConfigButtons {
-    aaa(extensionManager, designerView) {
-        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
-        const btn = document.createElement('div');
-        btn.onclick = () => {
-            const val = extensionOptions[gridExtensionShowOverlayOptionName];
-            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
-        };
-        return [btn];
-    }
-}

package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.d.ts

@@ -1,10 +0,0 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.js

@@ -1,18 +0,0 @@
-import { GridExtension } from './GridExtension';
-import { css } from "@node-projects/base-custom-webcomponent";
-const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
-export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-  `;
-}

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

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProviderConfigButtons {
-    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,12 +0,0 @@
-import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
-export class GridExtensionProviderConfigButtons {
-    aaa(extensionManager, designerView) {
-        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
-        const btn = document.createElement('div');
-        btn.onclick = () => {
-            const val = extensionOptions[gridExtensionShowOverlayOptionName];
-            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
-        };
-        return [btn];
-    }
-}

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

@@ -1,10 +0,0 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

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

@@ -1,18 +0,0 @@
-import { GridExtension } from './GridExtension';
-import { css } from "@node-projects/base-custom-webcomponent";
-const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
-export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-  `;
-}

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

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,3 +0,0 @@
-export interface IExtensionConfiguration {
-    designerViewButtons?: HTMLElement[];
-}

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

@@ -1 +0,0 @@
-export {};