@node-projects/web-component-designer 0.1.90 → 0.1.92

package/assets/images/tools/PanTool.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.206 21.427l.185.573h-.566l-.187-.603-.063-.171c-.203-.545-.433-.775-.433-1.265a44.468 44.468 0 0 0 .195-4.722c-.056-.762-.025-1.491-.1-2.076-.062-.495-.112-.885-.112-1.09a7.746 7.746 0 0 0-.405-2.233 1.544 1.544 0 0 0-.805-1.014 2.121 2.121 0 0 0-.68-.12c-.396 0-.408.084-.3.764.047.293.108.66.118.703.198.872.3 1.204.07 1.204-.146 0-.47-.172-.5-.372-.012-.086-.331-1.839-.371-2.08A2.883 2.883 0 0 0 15.8 7.8a1.195 1.195 0 0 0-.841-.503.712.712 0 0 0-.646.198 1.77 1.77 0 0 0-.169.283c.014.003.118.535.214.852.097.319.271 1.548.357 1.676a.994.994 0 0 1 .15.645.147.147 0 0 1-.099.061 1.18 1.18 0 0 1-.53-.364c-.122-.156-.273-1.43-.426-1.89-.04-.12-.085-.272-.134-.435a5.147 5.147 0 0 0-.444-1.185 1.394 1.394 0 0 0-.835-.432.869.869 0 0 0-.829.344 1.363 1.363 0 0 0-.246.834 8.518 8.518 0 0 0 .164 1.391l.045.202a6.999 6.999 0 0 0 .401 1.204.174.174 0 0 1 .015.13c-.056.112-.275.116-.299.116a.301.301 0 0 1-.205-.062 7.393 7.393 0 0 1-.473-1.383c-.12-.533-.304-1.681-.645-1.748a1.285 1.285 0 0 0-.254-.025 1.023 1.023 0 0 0-.654.212 2.389 2.389 0 0 0-.742.998 5.79 5.79 0 0 0 .1 1.77c.712 2.656.774 2.617.796 2.788a2.123 2.123 0 0 0 .1.67c.07.203.233.645.251.696a1.967 1.967 0 0 1-.119.753l-.038.154a5.276 5.276 0 0 0-.114.624.082.082 0 0 1-.147.065 1.197 1.197 0 0 1-.241-.65 1.413 1.413 0 0 1 .071-.297.772.772 0 0 0 .043-.522 4.079 4.079 0 0 0-.163-.39 3.069 3.069 0 0 1-.145-.354 1.953 1.953 0 0 1-.067-.336 2.628 2.628 0 0 0-.16-.64 7.251 7.251 0 0 1-.229-.869 12.474 12.474 0 0 0-.287-1.431.685.685 0 0 0-.5-.282.642.642 0 0 0-.23.047.372.372 0 0 0-.205.377 36.57 36.57 0 0 0-.127 1.393.365.365 0 0 1-.071.192.407.407 0 0 0-.06.13 34.4 34.4 0 0 1-.385 1.269l-.08.256c-.032.105-.08.224-.129.347-.135.34-.303.761-.186.977a9.522 9.522 0 0 0 1.087 1.495 6.62 6.62 0 0 1 .57.65c.137.17.273.337.386.46a4.675 4.675 0 0 0 1.004.664c.131.074.252.14.342.196.112.069.265.178.442.305a11.3 11.3 0 0 0 .994.662c.124.071.188.101.376.196.569.28 1.336.705 1.609.85A3.88 3.88 0 0 1 14 22h-.717s-.341-.272-.756-.573a10.113 10.113 0 0 0-1.21-.658l-.18-.088a9.9 9.9 0 0 1-1.25-.8c-.185-.133-.325-.235-.43-.3-.06-.037-.32-.183-.32-.183a4.96 4.96 0 0 1-1.139-.77 8.711 8.711 0 0 1-.367-.434 7.55 7.55 0 0 0-.554-.64 9.849 9.849 0 0 1-1.202-1.64 1.73 1.73 0 0 1 .16-1.431 5.91 5.91 0 0 0 .115-.312l.061-.194c.1-.32.367-1.169.39-1.278a.976.976 0 0 1 .127-.302c.011-.164.069-.876.12-1.311a.913.913 0 0 1 .547-.874 1.185 1.185 0 0 1 .429-.086 1.043 1.043 0 0 1 .34.057 5.276 5.276 0 0 1-.03-1.314 2.742 2.742 0 0 1 .94-1.367 1.609 1.609 0 0 1 .988-.365 1.117 1.117 0 0 1 .47.097.84.84 0 0 1 .283.232 2.171 2.171 0 0 1 .283-.684 1.372 1.372 0 0 1 1.299-.617 1.872 1.872 0 0 1 1.258.634 1.617 1.617 0 0 1 .214.392 1.234 1.234 0 0 1 1.165-.43 1.741 1.741 0 0 1 1.218.74 4.562 4.562 0 0 1 .343.756.98.98 0 0 1 .64-.192 2.63 2.63 0 0 1 .905.17 2.235 2.235 0 0 1 1.087 1.413 8.22 8.22 0 0 1 .44 2.423c0 .17.048.55.11 1.026.08.631.045 1.349.1 2.103a41.59 41.59 0 0 1-.196 4.81 7.328 7.328 0 0 0 .502 1.353l.023.064z"/>
+<path fill="none" d="M0 0h24v24H0z"/>
+</svg>

package/config/elements-native.json

@@ -2,6 +2,7 @@
   "elements":
   [
     "div",
+    "label",
     "input",
     "textarea",
     "select",

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;
 }
@@ -76,11 +78,14 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             break;
         }
         let nextParent = element.offsetParent ? element.offsetParent : element.getRootNode().host;
-        if (element instanceof SVGGraphicsElement) {
+        if (element instanceof SVGSVGElement || element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+            nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
+        }
+        else if (element instanceof SVGGraphicsElement) {
             nextParent = element.ownerSVGElement;
         }
-        else if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
-            nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
+        else if (element instanceof MathMLElement) {
+            nextParent = element.parentElement;
         }
         let scrollLeft = 0;
         let scrollTop = 0;
@@ -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/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/item/DesignItem.d.ts

@@ -74,6 +74,7 @@ export declare class DesignItem implements IDesignItem {
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
+    removeDesignerAttributesAndStylesFromChildren(): void;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     setView(node: Element): void;

package/dist/elements/item/DesignItem.js

@@ -351,6 +351,16 @@ export class DesignItem {
             return this.element.querySelectorAll(selectors);
         }
     }
+    removeDesignerAttributesAndStylesFromChildren() {
+        const els = this.querySelectorAll('*');
+        for (let e of els) {
+            const di = DesignItem.GetDesignItem(e);
+            if (!di.hasAttribute("draggable"))
+                e.removeAttribute("draggable");
+            if (!di.hasStyle("pointer-events"))
+                e.style.pointerEvents = '';
+        }
+    }
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {

package/dist/elements/item/IDesignItem.d.ts

@@ -39,6 +39,7 @@ export interface IDesignItem {
     removeChild(designItem: IDesignItem): any;
     remove(): any;
     clearChildren(): any;
+    removeDesignerAttributesAndStylesFromChildren(): any;
     updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;

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;
 }