@node-projects/web-component-designer 0.1.98 → 0.1.100

package/dist/elements/helper/Screenshot.js

@@ -24,7 +24,9 @@ export class Screenshot {
                     cursor: "never",
                     displaySurface: 'browser'
                 },
-                audio: false
+                audio: false,
+                selfBrowserSurface: "include",
+                preferCurrentTab: true
             };
             Screenshot._video.style.display = "none";
             elementHostForVideo.appendChild(Screenshot._video);

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -86,6 +86,7 @@ import { EventsService } from './eventsService/EventsService.js';
 import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
 import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
 import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
+import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -96,6 +97,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("propertyService", new LitElementPropertiesService());
     serviceContainer.register("propertyService", new NativeElementsPropertiesService());
     serviceContainer.register("propertyService", new SVGElementsPropertiesService());
+    serviceContainer.register("propertyService", new MathMLElementsPropertiesService());
     serviceContainer.register("propertyService", new Lit2PropertiesService());
     serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
     serviceContainer.register("propertyGroupsService", new PropertyGroupsService());

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

@@ -0,0 +1,2 @@
+declare function getProtoProperties(target: any): string[];
+declare function getAttributesIfCustomElement(target: any): any;

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

@@ -0,0 +1,71 @@
+"use strict";
+function getProtoProperties(target) {
+    // If this is a custom element, you need to go up the prototype
+    // chain until you get proper HTMLElement, since everything under it
+    // is generated prototypes and will have propeties that are dupes (like:
+    // every observedAttribute is also mirrored as a property)
+    const isCustomElement = target.tagName.indexOf('-') !== -1;
+    let proto = target.__proto__;
+    if (isCustomElement) {
+        while (proto.constructor !== window.HTMLElement.prototype.constructor) {
+            proto = proto.__proto__;
+        }
+    }
+    let protoProps = {};
+    // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
+    if (proto.constructor.name === 'HTMLAnchorElement') {
+        protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
+        protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
+        proto = proto.__proto__;
+    }
+    while (proto.constructor.name !== 'Element') {
+        Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
+        proto = proto.__proto__;
+    }
+    let propNames = Object.keys(protoProps).sort();
+    // Skip some very specific Polymer/element properties.
+    let blacklist = [
+        // Polymer specific
+        'isAttached',
+        'constructor', 'created', 'ready', 'attached', 'detached',
+        'attributeChanged', 'is', 'listeners', 'observers', 'properties',
+        // Native elements ones we don't care about
+        'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
+        'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
+        'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
+        'lowsrc', 'longDesc',
+        // Specific elements stuff
+        'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
+        'selectionDirection', 'selectionStart', 'selectionEnd'
+    ];
+    let i = 0;
+    while (i < propNames.length) {
+        let name = propNames[i];
+        // Skip everything that starts with a _ which is a Polymer private/protected
+        // and you probably don't care about it.
+        // Also anything in the blacklist. Or that starts with webkit.
+        if (name.charAt(0) === '_' ||
+            name === 'keyEventTarget' ||
+            blacklist.indexOf(name) !== -1 ||
+            name.indexOf('webkit') === 0 ||
+            name.indexOf('on') === 0) {
+            propNames.splice(i, 1);
+            continue;
+        }
+        // Skip everything that doesn't have a setter.
+        if (!protoProps[name].set) {
+            propNames.splice(i, 1);
+            continue;
+        }
+        i++;
+    }
+    return propNames || [];
+}
+function getAttributesIfCustomElement(target) {
+    if (target.tagName.indexOf('-') !== -1) {
+        return target.constructor.observedAttributes;
+    }
+    else {
+        return [];
+    }
+}

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

@@ -0,0 +1,15 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class MathMLElementsPropertiesService extends CommonPropertiesService {
+    private commonMathProperties;
+    private mathProperties;
+    private mfracProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,72 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class MathMLElementsPropertiesService extends CommonPropertiesService {
+    commonMathProperties = [
+        {
+            name: "displaystyle",
+            type: "boolean",
+            service: this,
+            defaultValue: true,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    mathProperties = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline"],
+            service: this,
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    mfracProperties = [
+        {
+            name: "denomalign",
+            type: "list",
+            values: ["left", "center", "right"],
+            service: this,
+            defaultValue: "center",
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "linethickness",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "numalign",
+            type: "list",
+            values: ["left", "center", "right"],
+            service: this,
+            defaultValue: "center",
+            propertyType: PropertyType.propertyAndAttribute
+        },
+    ];
+    name = "mathml";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        return designItem.element instanceof MathMLElement;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'math':
+                return [...this.commonMathProperties, ...this.mathProperties];
+            case 'merror':
+                return [...this.commonMathProperties];
+            case 'mfrac':
+                return [...this.commonMathProperties, ...this.mfracProperties];
+            default:
+                return [...this.commonMathProperties];
+        }
+    }
+}

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

@@ -12,6 +12,8 @@ export class UnkownElementsPropertiesService extends AbstractPropertiesService {
         let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
         let props = [];
         for (let p of list) {
+            if (p.startsWith('on'))
+                continue;
             let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p);
             if (desc.get || desc.set) {
                 let v = designItem.element[p];

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

@@ -118,7 +118,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       font-weight: inherit;
       font-style: inherit;
       line-height: inherit;
-      --node-projects-web-component-designer-background: inherit;
     }
     * {
       touch-action: none;
@@ -363,24 +362,34 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     if (!this.instanceServiceContainer.selectionService.primarySelection) {
                         this.zoomToFit();
                         this.disableBackgroud();
-                        const el = this.rootDesignItem.element;
-                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
-                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-                        await sleep(100);
-                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
-                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
-                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        try {
+                            const el = this.rootDesignItem.element;
+                            const sel = this.instanceServiceContainer.selectionService.selectedElements;
+                            this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                            await sleep(100);
+                            const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
+                            await exportData(dataURItoBlob(screenshot), "screenshot.png");
+                            this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
                         this.enableBackground();
                     }
                     else {
                         this.disableBackgroud();
-                        const el = this.instanceServiceContainer.selectionService.primarySelection.element;
-                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
-                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-                        await sleep(100);
-                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
-                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
-                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        try {
+                            const el = this.instanceServiceContainer.selectionService.primarySelection.element;
+                            const sel = this.instanceServiceContainer.selectionService.selectedElements;
+                            this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                            await sleep(100);
+                            const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
+                            await exportData(dataURItoBlob(screenshot), "screenshot.png");
+                            this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
                         this.enableBackground();
                     }
                 }
@@ -430,10 +439,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     disableBackgroud() {
-        this._canvasContainer.style.backgroundImage = 'none';
+        this._canvasContainer.style.background = 'var(--node-projects-web-component-designer-screenshot-background, white)';
     }
     enableBackground() {
-        this._canvasContainer.style.backgroundImage = 'var(--node-projects-web-component-designer-background)';
+        this._canvasContainer.style.background = '';
     }
     zoomToFit() {
         const autoZomOffset = 10;
@@ -844,7 +853,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onDblClick(event) {
         event.preventDefault();
-        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
+        if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer))
+            this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
     }
     _searchShowOverlay() {
         let divElement = this._getDomElement('node-projects-designer-search-container');

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

@@ -14,12 +14,14 @@ export class CanvasExtension extends AbstractExtension {
             const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
             const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
             const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-            if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
-                this._removeAllOverlays();
-                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');
+            if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
+                if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
+                    this._removeAllOverlays();
+                    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');
+                }
             }
         }
     }

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

@@ -8,7 +8,7 @@ export class PanTool {
                 designerCanvas.captureActiveTool(this);
                 break;
             case EventNames.PointerMove:
-                if (event.buttons == 1) {
+                if (event.buttons == 1 || event.buttons == 4) {
                     designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
                 }
                 break;

package/dist/elements/widgets/designerView/tools/toolBar/popups/{PointerToolPopup copy.d.ts → DrawToolPopup copy.d.ts }

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
     static style: CSSStyleSheet;
     static template: HTMLTemplateElement;
     constructor();

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js

@@ -0,0 +1,102 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 220px;
+          min-height: 200px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+      }
+      .inputs{
+        float: left;
+        margin-top: 5px;
+        align-items: center;
+      }
+      .input {
+        display: flex;
+        align-items: center; 
+        margin-top: 5px;
+      }
+      .text {
+        margin-left: 5px;
+        font-size: 14px;
+      }
+      .strokecolor{ 
+        float: both;
+      }
+      .fillbrush{
+        float: both;
+      }
+      .strokethickness{
+        float: both;
+      }
+      
+      `;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
+            </div>
+            <div class="inputs">
+              <div class="input">
+                <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
+                <text class="text">Stroke Color</text>
+              </div>
+              <div class="input">
+                <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
+                <text class="text">Fill Brush</text>
+              </div>
+              <div class="input">
+                <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
+                <text class="text">Stroke Thickness</text>
+              </div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+        if (this.shadowRoot.querySelector("input.strokecolor")) {
+            let input = this._getDomElement("strokecolor");
+            input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
+        }
+        if (this.shadowRoot.querySelector("input.fillbrush")) {
+            let input = this._getDomElement("fillbrush");
+            input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
+        }
+        if (this.shadowRoot.querySelector("input.strokethickness")) {
+            let input = this._getDomElement("strokethickness");
+            input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
+        }
+    }
+}
+customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

package/dist/index.d.ts

@@ -115,6 +115,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";

package/dist/index.js

@@ -74,6 +74,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";

package/package.json

@@ -1,24 +1,24 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.1.98",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "jochen.kuehner@gmx.de",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.23.0"
-  },
-  "devDependencies": {
-    "mdn-data": "^2.4.2"
-  },
-  "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.1.100",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": ">=0.23.0"
+  },
+  "devDependencies": {
+    "mdn-data": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}

package/dist/elements/services/placementService/DefaultPlacementService copy.d.ts

@@ -1,19 +0,0 @@
-import type { IPoint } from '../../../interfaces/IPoint.js';
-import type { IPlacementService } from './IPlacementService.js';
-import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    isEnterableContainer(container: IDesignItem): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    private calculateTrack;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-}

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

@@ -1,151 +0,0 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
-import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
-import { straightenLine } from '../../helper/PathDataPolyfill.js';
-export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
-            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
-            return false;
-        return true;
-    }
-    isEnterableContainer(container) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        return true;
-    }
-    canEnter(container, items) {
-        if (!this.isEnterableContainer(container))
-            return false;
-        if (!items.every(x => !x.element.contains(container.element) && x !== container))
-            return false;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
-    }
-    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
-        let trackX = newPoint.x - startPoint.x;
-        let trackY = newPoint.y - startPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                let p = getDesignItemCurrentPos(item, 'position');
-                p.x = p.x % placementView.gridSize;
-                p.y = p.y % placementView.gridSize;
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
-            }
-            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 / 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);
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let trackX = newPoint.x;
-        let trackY = newPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    trackX = newPos.x;
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y;
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-    }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        //TODO: this should revert all undo actions while active
-        //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
-        if (event.shiftKey) {
-            track = straightenLine({ x: 0, y: 0 }, track, true);
-        }
-        let filteredItems = filterChildPlaceItems(items);
-        for (const designItem of filteredItems) {
-            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
-            let transformMatrixParentTransformsCompensated = null;
-            if (originalElementAndAllAncestorsMultipliedMatrix) {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
-            }
-            else {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
-            }
-            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
-            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
-        }
-    }
-    moveElements(designItems, position, absolute) {
-        //TODO: Check if we set left or right
-        //TODO: Use CSS units
-        for (let d of designItems) {
-            if (position.x)
-                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
-            if (position.y)
-                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
-        }
-        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
-    }
-    enterContainer(container, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
-            container.insertChild(i);
-            if (i.lastContainerSize) {
-                if (!i.hasStyle('width'))
-                    i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.hasStyle('height'))
-                    i.setStyle('height', i.lastContainerSize.height + 'px');
-            }
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
-            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
-            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
-            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
-            let track = { x: translation.x, y: translation.y };
-            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
-        }
-        for (const item of items) {
-            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
-        }
-    }
-}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -1,5 +0,0 @@
-import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
-export declare const enableStylesheetService = "enableStylesheetService";
-export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
-    constructor();
-}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -1,7 +0,0 @@
-import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
-export const enableStylesheetService = 'enableStylesheetService';
-export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
-    constructor() {
-        super(enableStylesheetService, "ss", "modify Stylesheet");
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js

@@ -1,49 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
-}
-customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts

@@ -1,6 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js

@@ -1,49 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
-}
-customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);