@node-projects/web-component-designer 0.1.91 → 0.1.93

package/dist/elements/helper/ElementHelper.js

@@ -31,6 +31,8 @@ export function isInlineAfter(element) {
 export function getElementDisplaytype(element) {
     if (element instanceof SVGElement)
         return ElementDisplayType.block;
+    if (element instanceof MathMLElement)
+        return ElementDisplayType.block;
     const display = window.getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
@@ -82,6 +84,9 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
         else if (element instanceof SVGGraphicsElement) {
             nextParent = element.ownerSVGElement;
         }
+        else if (element instanceof MathMLElement) {
+            nextParent = element.parentElement;
+        }
         let scrollLeft = 0;
         let scrollTop = 0;
         if (nextParent) {
@@ -90,7 +95,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
         }
         let currLeft = 0;
         let currTop = 0;
-        if (element instanceof SVGSVGElement) {
+        if (element instanceof SVGSVGElement || element instanceof MathMLElement) {
             //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';

package/dist/elements/helper/Helper.d.ts

@@ -6,3 +6,4 @@ export declare function dataURItoBlob(dataURI: any): Blob;
 export declare function pointInRect(point: IPoint, rect: IRect): boolean;
 export declare function removeTrailing(text: string, char: string): string;
 export declare function removeLeading(text: string, char: string): string;
+export declare function requestAnimationFramePromise(): Promise<unknown>;

package/dist/elements/helper/Helper.js

@@ -34,3 +34,6 @@ export function removeLeading(text, char) {
         return text.substring(1);
     return text;
 }
+export function requestAnimationFramePromise() {
+    return new Promise(resolve => requestAnimationFrame(resolve));
+}

package/dist/elements/helper/SelectionHelper.d.ts

@@ -0,0 +1,2 @@
+export declare function shadowrootGetSelection(shadowRoot: ShadowRoot): Selection;
+export declare function wrapSelectionInSpans(selection: Selection): HTMLSpanElement[];

package/dist/elements/helper/SelectionHelper.js

@@ -0,0 +1,51 @@
+export function shadowrootGetSelection(shadowRoot) {
+    let selection = document.getSelection();
+    if (selection.getComposedRanges)
+        selection = selection.getComposedRanges(shadowRoot);
+    else if (shadowRoot.getSelection)
+        selection = shadowRoot.getSelection();
+    return selection;
+}
+function wrapTextNodesInSpan(range, spans) {
+    function wrapNode(node) {
+        const span = document.createElement('span');
+        spans.push(span);
+        node.parentNode.insertBefore(span, node);
+        span.appendChild(node);
+    }
+    function processNode(node) {
+        switch (node.nodeType) {
+            case Node.TEXT_NODE:
+                wrapNode(node);
+                break;
+            case Node.DOCUMENT_FRAGMENT_NODE:
+            case Node.ELEMENT_NODE:
+                Array.from(node.childNodes).forEach(processNode);
+                break;
+        }
+    }
+    const fragment = range.extractContents();
+    processNode(fragment);
+    range.insertNode(fragment);
+}
+function staticRangeToRange(staticRange) {
+    const range = document.createRange();
+    range.setStart(staticRange.startContainer, staticRange.startOffset);
+    range.setEnd(staticRange.endContainer, staticRange.endOffset);
+    return range;
+}
+export function wrapSelectionInSpans(selection) {
+    const spans = [];
+    if (selection[0] instanceof StaticRange) {
+        wrapTextNodesInSpan(staticRangeToRange(selection[0]), spans);
+    }
+    else {
+        if (!selection.rangeCount)
+            return spans;
+        const range = selection.getRangeAt(0);
+        wrapTextNodesInSpan(range, spans);
+    }
+    if (selection.removeAllRanges)
+        selection.removeAllRanges();
+    return spans;
+}

package/dist/elements/helper/TransformHelper.js

@@ -196,6 +196,11 @@ export function getElementSize(element) {
         width = bbox.width;
         height = bbox.height;
     }
+    else if (element instanceof MathMLElement) {
+        let bbox = element.getBoundingClientRect();
+        width = bbox.width;
+        height = bbox.height;
+    }
     return { width, height };
 }
 export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas, cache) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -121,7 +121,7 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new TransformOriginExtensionProvider(),
+        new TransformOriginExtensionProvider(true),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
         new EllipsisExtensionProvider(),

package/dist/elements/services/dragDropService/DragDropService.js

@@ -40,9 +40,8 @@ export class DragDropService {
         const elementDefinition = JSON.parse(transferData);
         const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         const grp = di.openGroup("Insert of <" + di.name + ">");
-        di.setStyle('position', 'absolute');
         const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle()));
-        containerService.enterContainer(newContainer, [di]);
+        containerService.enterContainer(newContainer, [di], 'drop');
         const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
         const evCoord = designerCanvas.getNormalizedEventCoordinates(event);
         const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };

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

@@ -0,0 +1,19 @@
+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 AbsolutePlacementService 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[], mode: 'normal' | 'drop'): 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/AbsolutePlacementService.js

@@ -0,0 +1,153 @@
+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 AbsolutePlacementService {
+    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, mode) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            if (mode == 'drop')
+                i.setStyle('position', 'absolute');
+            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/services/placementService/DefaultPlacementService copy.d.ts

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,151 @@
+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/services/placementService/DefaultPlacementService.d.ts

@@ -13,7 +13,7 @@ export declare class DefaultPlacementService implements IPlacementService {
     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;
+    enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): 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.js

@@ -121,9 +121,11 @@ export class DefaultPlacementService {
         }
         designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
     }
-    enterContainer(container, items) {
+    enterContainer(container, items, mode) {
         let filterdItems = filterChildPlaceItems(items);
         for (let i of filterdItems) {
+            if (mode == 'drop')
+                i.setStyle('position', 'absolute');
             container.insertChild(i);
             if (i.lastContainerSize) {
                 if (!i.hasStyle('width'))

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

@@ -5,7 +5,7 @@ import { IPlacementService } from './IPlacementService.js';
 export declare class FlexBoxPlacementService implements IPlacementService {
     private _basePlacementService;
     constructor(basePlacementService: IPlacementService);
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     isEnterableContainer(container: IDesignItem): any;

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

@@ -4,7 +4,7 @@ export class FlexBoxPlacementService {
     constructor(basePlacementService) {
         this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
     }
-    enterContainer(container, items) {
+    enterContainer(container, items, mode) {
         for (let i of items) {
             container.insertChild(i);
             i.removeStyle("position");

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

@@ -5,7 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class GridPlacementService implements IPlacementService {
     private _basePlacementService;
     constructor(basePlacementService: IPlacementService);
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     isEnterableContainer(container: IDesignItem): any;

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

@@ -6,7 +6,7 @@ export class GridPlacementService {
     constructor(basePlacementService) {
         this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
     }
-    enterContainer(container, items) {
+    enterContainer(container, items, mode) {
         for (let i of items) {
             container.insertChild(i);
             i.removeStyle("position");

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

@@ -7,7 +7,7 @@ export interface IPlacementService extends IService {
     isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    enterContainer(container: IDesignItem, items: IDesignItem[]): any;
+    enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): any;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): any;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.d.ts

@@ -4,6 +4,7 @@ import { ValueType } from '../ValueType.js';
 export declare class FontPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
     static fontList: string[];
     constructor(property: IProperty);
-    parseFontList(): void;
+    static addFontsToSelect(select: HTMLSelectElement): void;
+    private static parseFontList;
     refreshValue(valueType: ValueType, value: any): void;
 }

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.js

@@ -5,8 +5,12 @@ export class FontPropertyEditor extends BasePropertyEditor {
         super(property);
         let element = document.createElement("select");
         this.element = element;
+        FontPropertyEditor.addFontsToSelect(element);
+        this.element.onchange = (e) => this._valueChanged(this.element.value);
+    }
+    static addFontsToSelect(select) {
         if (FontPropertyEditor.fontList) {
-            this.parseFontList();
+            FontPropertyEditor.parseFontList(select);
             //@ts-ignore
         }
         else if (window.queryLocalFonts) {
@@ -14,22 +18,21 @@ export class FontPropertyEditor extends BasePropertyEditor {
             window.queryLocalFonts().then(x => {
                 //@ts-ignore
                 FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))];
-                this.parseFontList();
+                FontPropertyEditor.parseFontList(select);
             });
         }
         else {
             FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
-            this.parseFontList();
+            FontPropertyEditor.parseFontList(select);
         }
     }
-    parseFontList() {
+    static parseFontList(select) {
         for (let v of FontPropertyEditor.fontList) {
             let option = document.createElement("option");
             option.value = v;
             option.text = v;
-            this.element.appendChild(option);
+            select.appendChild(option);
         }
-        this.element.onchange = (e) => this._valueChanged(this.element.value);
     }
     refreshValue(valueType, value) {
         this.element.value = value;

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

@@ -14,5 +14,5 @@ export declare class EditTextExtension extends AbstractExtension implements hand
     refresh(): void;
     dispose(): void;
     handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-    _formatSelection(type: string): void;
+    _formatSelection(type: string, value?: string): void;
 }

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

@@ -2,13 +2,34 @@ 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="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
-      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
-      <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
-      <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+      <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;
@@ -25,13 +46,15 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.focus();
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const elements = EditTextExtension.template.content.cloneNode(true);
-        elements.querySelectorAll('button').forEach(x => x.onpointerdown = () => this._formatSelection(x.dataset['command']));
+        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = () => this._formatSelection(x.dataset['command'], x.dataset['commandParameter']));
+        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', '96');
+        foreignObject.setAttribute('width', '300');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
         this._addOverlay(foreignObject, OverlayLayer.Foreground);
@@ -66,12 +89,15 @@ export class EditTextExtension extends AbstractExtension {
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
     handlesPointerEvent(designerCanvas, event, currentElement) {
-        let p = event.composedPath();
+        const p = event.composedPath();
         const stylo = this._foreignObject.querySelector('stylo-editor');
         return p.indexOf(stylo) >= 0;
     }
-    _formatSelection(type) {
-        document.execCommand(type, false, null);
+    _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.js

@@ -19,7 +19,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
             let text = this.extendedItem.name;
             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('<span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            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._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
@@ -47,8 +48,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
                 this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
                 this._text.setAttribute('height', '' + h);
                 this._text.setAttribute('width', '' + w);
-                this._text.style.transformBox = 'fill-box';
-                this._text.style.rotate = angle + 'deg';
+                this._text.children[0].children[0].style.rotate = angle + 'deg';
             }
         }
     }

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

@@ -282,7 +282,7 @@ export class PointerTool {
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
+                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems, 'normal');
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                                 designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag);
                                 designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDrag, event);

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

@@ -3,6 +3,10 @@ import { assetsPath } from "../../../../../../Constants.js";
 import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
 export class DrawToolPopup extends AbstractBaseToolPopup {
     static style = [super.style, css `
+      .container {
+          width: 220px;
+          min-height: 300px;
+      }
       .inputs{
         float: left;
         margin-top: 5px;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
 export * from "./elements/helper/LayoutHelper.js";
+export * from "./elements/helper/SelectionHelper.js";
 export type { IContextMenuItem, IContextMenu } from "./elements/helper/contextMenu/IContextMenuItem.js";
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
@@ -29,6 +30,7 @@ export type { IBindableObjectsService } from "./elements/services/bindableObject
 export type { IBindableObjectDragDropService } from "./elements/services/bindableObjectsService/IBindableObjectDragDropService.js";
 export type { IBindingService } from "./elements/services/bindingsService/IBindingService.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/placementService/AbsolutePlacementService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/dist/index.js

@@ -15,12 +15,14 @@ export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
 export * from "./elements/helper/LayoutHelper.js";
+export * from "./elements/helper/SelectionHelper.js";
 export * from "./elements/item/DesignItem.js";
 export * from "./elements/item/BindingMode.js";
 export * from "./elements/item/BindingTarget.js";
 export * from "./elements/item/NodeType.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/placementService/AbsolutePlacementService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.91",
+  "version": "0.1.93",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",