@node-projects/web-component-designer 0.1.194 → 0.1.196

package/dist/elements/services/stylesheetService/SpecifityCalculator.js

@@ -1,123 +0,0 @@
-var ParseState;
-(function (ParseState) {
-    ParseState[ParseState["none"] = 0] = "none";
-    ParseState[ParseState["parseName"] = 1] = "parseName";
-    ParseState[ParseState["parseAttribute"] = 2] = "parseAttribute";
-    ParseState[ParseState["parseInFunc"] = 3] = "parseInFunc";
-    //parseInFuncSubSel = 4,
-})(ParseState || (ParseState = {}));
-//todo special cases: 
-//:not :is :has = inner selector specifity
-//:where = 0 specifity
-//:nth-child :nth-last-child = inner sel. ?
-export function calculateSpecificity(selector) {
-    return calculateSpecificityInternal(selector, 0);
-}
-function calculateSpecificityInternal(selector, startIndex) {
-    let s = { A: 0, B: 0, C: 0 };
-    let parseState = ParseState.none;
-    for (let n = startIndex; n < selector.length; n++) {
-        let c = selector[n];
-        if (parseState === ParseState.parseInFunc) {
-            if (c == ')') {
-                parseState = ParseState.none;
-            }
-        }
-        else if (parseState === ParseState.parseAttribute) {
-            if (c == ']') {
-                parseState = ParseState.none;
-            }
-        }
-        else {
-            switch (c) {
-                case '#':
-                    s.A++;
-                    parseState = ParseState.parseName;
-                    break;
-                case '.':
-                    s.B++;
-                    parseState = ParseState.parseName;
-                    break;
-                case '[':
-                    s.B++;
-                    parseState = ParseState.parseAttribute;
-                    break;
-                case '(':
-                    parseState = ParseState.parseInFunc;
-                    break;
-                case ')':
-                    parseState = ParseState.none;
-                    break;
-                case ':':
-                    if (selector[n + 1] !== ':') {
-                        s.B++;
-                        parseState = ParseState.parseName;
-                    }
-                    else {
-                        s.C++;
-                        parseState = ParseState.parseName;
-                        n++;
-                    }
-                    if (selector[n + 1] === ':') {
-                        s.C++;
-                        parseState = ParseState.parseName;
-                    }
-                    else {
-                        if (selector.substring(n + 1, 3) === 'is(') { //todo: selectors inside of here could be , seperated and only the most specific one counts (even if it is not the matching one)... 
-                            n += 3; //      functions also can be nested so we need al the prev selectors..
-                        }
-                        else if (selector.substring(n + 1, 4) === 'has(') { //same...
-                            n += 4;
-                        }
-                        else if (selector.substring(n + 1, 4) === 'not(') { //same...
-                            n += 4;
-                        }
-                        else if (selector.substring(n + 1, 10) === 'nth-child(') { //same...
-                            s.B++;
-                            n += 10;
-                        }
-                        else if (selector.substring(n + 1, 15) === 'nth-last-child(') { //same...
-                            s.B++;
-                            n += 15;
-                        }
-                        else if (selector.substring(n + 1, 5) === 'host(') { //same... can only contain a simnple selector
-                            s.B++;
-                            n += 5;
-                        }
-                        else if (selector.substring(n + 1, 13) === 'host-context(') { //same... can only contain a simple selector
-                            s.B++;
-                            n += 13;
-                        }
-                        else if (selector.substring(n + 1, 8) === 'slotted(') { //same... can only contain a simple selector
-                            s.B++;
-                            n += 8;
-                        }
-                        else if (selector.substring(n + 1, 6) === 'where(') { //where does not add specificity
-                            parseState = ParseState.parseInFunc;
-                            n += 6;
-                        }
-                        else {
-                            s.B++;
-                            parseState = ParseState.parseName;
-                            n++;
-                        }
-                    }
-                    break;
-                case '>':
-                case ' ':
-                case '~':
-                case '+':
-                    parseState = ParseState.none;
-                    break;
-                case '*':
-                    break;
-                default:
-                    if (parseState === ParseState.none) {
-                        s.C++;
-                        parseState = ParseState.parseName;
-                    }
-            }
-        }
-    }
-    return s;
-}

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

@@ -1,9 +0,0 @@
-import { AbstractExtension } from "./AbstractExtension.js";
-import { IPoint } from "../../../../interfaces/IPoint.js";
-export declare abstract class AbstractToolbarExtension extends AbstractExtension {
-    abstract template: HTMLTemplateElement;
-    protected _toolbarContainer: SVGForeignObjectElement;
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    protected updateToolbarPosition(position: IPoint): void;
-}

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

@@ -1,30 +0,0 @@
-import { OverlayLayer } from "../OverlayLayer.js";
-import { AbstractExtension } from "./AbstractExtension.js";
-export class AbstractToolbarExtension extends AbstractExtension {
-    _toolbarContainer;
-    extend(cache, event) {
-        const element = this.template.content.cloneNode(true);
-        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
-        });
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._toolbarContainer = foreignObject;
-        foreignObject.classList.add('svg-toolbar-container');
-        foreignObject.setAttribute('width', '1');
-        foreignObject.setAttribute('height', '1');
-        foreignObject.appendChild(element);
-        this.refresh(cache, event);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbarContainer.setAttribute('x', '' + (pos.x - 16));
-            this._toolbarContainer.setAttribute('y', '' + (pos.y - 36));
-        }
-    }
-    updateToolbarPosition(position) {
-        this._toolbarContainer.setAttribute('x', '' + position.x);
-        this._toolbarContainer.setAttribute('y', '' + position.y);
-    }
-}

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

@@ -1,20 +0,0 @@
-import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
-import { IExtensionManager } from "./IExtensionManger.js";
-import { IDesignerCanvas } from "../IDesignerCanvas.js";
-import { IDesignItem } from "../../../item/IDesignItem.js";
-export declare class BasicStackedToolbarExtension extends AbstractExtension {
-    protected static basicTemplate: string;
-    protected _toolbar: toolbarObject;
-    protected _size: {
-        width: number;
-        height: number;
-    };
-    protected _display: string;
-    protected _inline: string;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    updateDisplayValue(): Promise<void>;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    protected _addStyleButton(styleAndControlName: string): void;
-    dispose(): void;
-}

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

@@ -1,68 +0,0 @@
-import { assetsPath } from "../../../../Constants.js";
-import { AbstractExtension } from "./AbstractExtension.js";
-export class BasicStackedToolbarExtension extends AbstractExtension {
-    static basicTemplate = `
-      <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
-        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
-        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
-      </node-projects-image-button-list-selector>
-      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
-        <option>block</option>
-        <option>flex</option>
-        <option>grid</option>
-      </select>
-  `;
-    _toolbar;
-    _size = { width: 200, height: 30 };
-    _display;
-    _inline;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        const cs = getComputedStyle(this.extendedItem.element);
-        this._display = cs.display.replace('inline-', '').replace('inline', 'block');
-        this._inline = cs.display.startsWith('inline') ? 'inline' : 'block';
-        //@ts-ignore
-        this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.value = this._display;
-        displayTypeEl.onchange = async () => {
-            this._display = displayTypeEl.value;
-            await this.updateDisplayValue();
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
-        const inlineEl = this._toolbar.getById('inline');
-        inlineEl.value = this._inline;
-        inlineEl.addEventListener('value-changed', async () => {
-            this._inline = inlineEl.value;
-            if (this._inline && cs.position === 'absolute')
-                this.extendedItem.setStyle('position', 'static');
-            await this.updateDisplayValue();
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        });
-    }
-    async updateDisplayValue() {
-        let v = (this._inline == 'inline' ? 'inline ' : '') + this._display;
-        if (v === 'inline block')
-            v = 'inline';
-        await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    _addStyleButton(styleAndControlName) {
-        const cs = getComputedStyle(this.extendedItem.element);
-        const ctl = this._toolbar.getById(styleAndControlName);
-        ctl.addEventListener('value-changed', async () => {
-            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
-        });
-        ctl.value = cs[styleAndControlName];
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class BlockToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
-}

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

@@ -1,40 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { assetsPath } from "../../../../../Constants.js";
-export class BlockToolbarExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 100%; width: 100%;">
-      <node-projects-image-button-list-selector>
-        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
-        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
-      </node-projects-image-button-list-selector>
-      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option selected>block</option>
-        <option>flex</option>
-        <option>grid</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        this._toolbar = this.createToolbar(BlockToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,10 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class CanvasExtension extends AbstractExtension {
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,31 +0,0 @@
-import { AbstractExtension } from './AbstractExtension.js';
-export class CanvasExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        if (computedStyle.margin !== '0px') {
-            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', ''));
-            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');
-                }
-            }
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,10 +0,0 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class CanvasExtensionProvider 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/CanvasExtensionProvider.js

@@ -1,15 +0,0 @@
-import { CanvasExtension } from './CanvasExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-export class CanvasExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'block')
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new CanvasExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-margin { fill: #ff944722; }
-  `;
-}

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

@@ -1,13 +0,0 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ConditionExtensionProvider implements IDesignerExtensionProvider {
-    constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem) => boolean);
-    extensionProvider: IDesignerExtensionProvider;
-    condition: (designItem: IDesignItem) => boolean;
-    style: CSSStyleSheet;
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}

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

@@ -1,18 +0,0 @@
-export class ConditionExtensionProvider {
-    constructor(extensionProvider, condition) {
-        this.extensionProvider = extensionProvider;
-        this.condition = condition;
-        this.style = extensionProvider.style;
-    }
-    extensionProvider;
-    condition;
-    style;
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (!this.condition(designItem))
-            return false;
-        return this.extensionProvider.shouldExtend(extensionManager, designerView, designItem);
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return this.extensionProvider.getExtension(extensionManager, designerView, designItem);
-    }
-}

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

@@ -1,18 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export type handlesPointerEvent = {
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-};
-export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
-    private static template;
-    private _foreignObject;
-    private _path;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-    _formatSelection(type: string, value?: string): void;
-}

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

@@ -1,107 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { OverlayLayer } from "../OverlayLayer.js";
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
-import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
-import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
-export class EditTextExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 24px; display: flex; gap: 2px;">
-      <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
-      <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
-      <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
-      <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
-      <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
-      <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
-        <option>8px</option>
-        <option>9px</option>
-        <option>10px</option>
-        <option>11px</option>
-        <option>12px</option>
-        <option>14px</option>
-        <option>16px</option>
-        <option>18px</option>
-        <option>20px</option>
-        <option>24px</option>
-        <option>28px</option>
-        <option>32px</option>
-        <option>36px</option>
-      </select>
-      <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
-        
-      </select>
-    </div>
-  `;
-    _foreignObject;
-    _path;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
-        //maybe use a html edit framework
-        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
-        this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
-        this.extendedItem.element.setAttribute('contenteditable', '');
-        this.extendedItem.element.focus();
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const elements = EditTextExtension.template.content.cloneNode(true);
-        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
-        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
-            this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
-        });
-        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
-        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
-        //Button overlay
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._foreignObject = foreignObject;
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
-        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
-        foreignObject.setAttribute('width', '300');
-        foreignObject.setAttribute('height', '24');
-        foreignObject.appendChild(elements);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
-        //TODO - nice way to disable click overlay
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
-        //overlay to detect click outside
-        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this._path.setAttribute('class', 'svg-edit-text-clickoutside');
-        this._path.setAttribute('fill-rule', 'evenodd');
-        this._path.style.pointerEvents = 'auto';
-        this._path.onpointerdown = (e) => {
-            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
-        };
-        this._addOverlay(this._path, OverlayLayer.Background);
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
-    }
-    refresh() {
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
-    }
-    dispose() {
-        this._removeAllOverlays();
-        this.extendedItem.element.removeAttribute('contenteditable');
-        this.extendedItem.updateChildrenFromNodesChildren();
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
-    }
-    handlesPointerEvent(designerCanvas, event, currentElement) {
-        const p = event.composedPath();
-        const stylo = this._foreignObject.querySelector('stylo-editor');
-        return p.indexOf(stylo) >= 0;
-    }
-    _formatSelection(type, value) {
-        const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
-        const spans = wrapSelectionInSpans(selection);
-        for (const span of spans)
-            span.style[type] = value;
-        this.extendedItem.element.focus();
-    }
-}

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

@@ -1,15 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ElementDragTitleExtension extends AbstractExtension {
-    private _rect;
-    private _text;
-    private _width;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event?: Event): void;
-    _drawMoveOverlay(itemRect: DOMRect): void;
-    refresh(cache: Record<string | symbol, any>, event?: Event): void;
-    _pointerEvent(event: PointerEvent): void;
-    dispose(): void;
-}

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

@@ -1,68 +0,0 @@
-import { getTextWidth } from '../../../helper/TextHelper.js';
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
-import { NamedTools } from "../tools/NamedTools.js";
-import { AbstractExtension } from './AbstractExtension.js';
-const extensionWidth = 60;
-export class ElementDragTitleExtension extends AbstractExtension {
-    _rect;
-    _text;
-    _width;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
-        if (!isNaN(transformedCornerPoints[0].x)) {
-            const boundRect = this.extendedItem.element.getBoundingClientRect();
-            let w = getTextWidth(this.extendedItem.name, '10px monospace');
-            let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
-            let text = this.extendedItem.name;
-            if (this.extendedItem.id)
-                text = '#' + this.extendedItem.id;
-            this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
-            this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
-            this._text.style.overflow = 'visible';
-            this._rect2 = this._drawRect(transformedCornerPoints[0].x + 60, transformedCornerPoints[0].y - 16, 15, 15, 'svg-primary-selection-move', this._rect2);
-            this._path = this._drawPath('m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z', 'svg-primary-selection-move', this._path);
-            //<svg viewBox="0 0 24 24"><path d=""></path></svg>
-            this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
-            this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
-            this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
-            this.refresh(cache, event);
-        }
-    }
-    _drawMoveOverlay(itemRect) {
-    }
-    refresh(cache, event) {
-        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas, cache);
-        const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
-        if (!isNaN(transformedCornerPoints[0].x)) {
-            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, angle)) {
-                const h = (15 / this.designerCanvas.scaleFactor);
-                const w = (this._width / this.designerCanvas.scaleFactor);
-                this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
-                this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
-                this._rect.style.rotate = angle + 'deg';
-                this._rect.style.transformBox = 'fill-box';
-                this._rect.setAttribute('height', '' + h);
-                this._rect.setAttribute('width', '' + w);
-                this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
-                this._text.setAttribute('x', '' + transformedCornerPoints[0].x);
-                this._text.setAttribute('y', '' + transformedCornerPoints[0].y);
-                this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
-                this._text.setAttribute('height', '' + h);
-                this._text.setAttribute('width', '' + w);
-                this._text.children[0].children[0].style.rotate = angle + 'deg';
-            }
-        }
-    }
-    _pointerEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

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