@node-projects/web-component-designer 0.1.159 → 0.1.161

package/README.md

@@ -56,16 +56,14 @@ Your index.html should be extended as follows:
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
 
-## Similar Frameworks
+## Keys
 
-| Name                    | Licence  | Edit Source (split View) | Zooming | Transformations |
-|-------------------------|----------|--------------------------|---------|---|
-| web-component-designer  | MIT      | yes         |
-| GrapeJS                 | BSD-3    | yes         |
-| CraftJS                 | MIT      | no          |
+Pointer Tool:
+alt:   select element behind
+meta:  draw selection rect
+ctrl:  add to selection
+shift: remove from selection
 
-TODO:
-force css states via explicit class (or attr??)
 
 ## Copyright notice
 

package/dist/elements/documentContainer.d.ts

@@ -40,7 +40,7 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _disableChangeNotificationDesigner;
     private _disableChangeNotificationEditor;
     static get style(): CSSStyleSheet;
-    constructor(serviceContainer: ServiceContainer, content?: string);
+    constructor(serviceContainer: ServiceContainer, content?: string, useIframe?: boolean);
     refreshInSplitView(): Promise<void>;
     get currentView(): 'designer' | 'split' | 'code' | 'preview';
     set currentView(view: 'designer' | 'split' | 'code' | 'preview');

package/dist/elements/documentContainer.js

@@ -68,7 +68,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       }
       `;
     }
-    constructor(serviceContainer, content) {
+    constructor(serviceContainer, content, useIframe = false) {
         super();
         this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
         this._serviceContainer = serviceContainer;
@@ -77,7 +77,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         let div = document.createElement("div");
         this._tabControl = new DesignerTabControl();
         div.appendChild(this._tabControl);
-        this.designerView = new DesignerView();
+        this.designerView = new DesignerView(useIframe);
         this.designerView.setAttribute('exportparts', 'canvas');
         this.designerView.slot = 'top';
         this._designerDiv = document.createElement("div");

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

@@ -3,7 +3,7 @@ import { IRect } from '../../interfaces/IRect.js';
 import { IDesignItem } from '../item/IDesignItem.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 export declare function inDesigner(element: Element): boolean;
-export declare function newElementFromString(text: any): Element;
+export declare function newElementFromString(text: any, document: Document): Element;
 export declare enum ElementDisplayType {
     none = 0,
     inline = 1,

package/dist/elements/helper/ElementHelper.js

@@ -5,7 +5,7 @@ export function inDesigner(element) {
         return true;
     return false;
 }
-export function newElementFromString(text) {
+export function newElementFromString(text, document) {
     const range = document.createRange();
     range.selectNode(document.body);
     //@ts-ignore
@@ -19,21 +19,25 @@ export var ElementDisplayType;
     ElementDisplayType[ElementDisplayType["block"] = 2] = "block";
 })(ElementDisplayType || (ElementDisplayType = {}));
 export function isInline(element) {
-    if (element instanceof SVGElement)
+    if (element == null)
         return false;
-    return element != null && window.getComputedStyle(element).display.startsWith('inline');
+    if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
+        return false;
+    return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
 }
 export function isInlineAfter(element) {
-    if (element instanceof SVGElement)
+    if (element == null)
+        return false;
+    if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
         return false;
-    return element != null && window.getComputedStyle(element).display.startsWith('inline');
+    return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
 }
 export function getElementDisplaytype(element) {
-    if (element instanceof SVGElement)
+    if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
         return ElementDisplayType.block;
-    if (element instanceof MathMLElement)
+    if (element instanceof element.ownerDocument.defaultView.MathMLElement)
         return ElementDisplayType.block;
-    const display = window.getComputedStyle(element).display;
+    const display = element.ownerDocument.defaultView.getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
 export function isEmptyTextNode(node) {
@@ -78,18 +82,18 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             break;
         }
         let nextParent = element.offsetParent ? element.offsetParent : element.getRootNode().host;
-        if (element instanceof SVGSVGElement || element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+        if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement) {
             nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
         }
-        else if (element instanceof SVGGraphicsElement) {
+        else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
             nextParent = element.ownerSVGElement;
         }
-        else if (element instanceof MathMLElement) {
+        else if (element instanceof element.ownerDocument.defaultView.MathMLElement) {
             nextParent = element.parentElement ?? nextParent;
         }
         let scrollLeft = 0;
         let scrollTop = 0;
-        if (element instanceof HTMLElement) {
+        if (element instanceof element.ownerDocument.defaultView.HTMLElement) {
             let parent = element.parentElement;
             while (parent !== null && parent !== nextParent) {
                 scrollLeft += parent.scrollLeft;
@@ -103,7 +107,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
         }
         let currLeft = 0;
         let currTop = 0;
-        if (element instanceof SVGSVGElement || element instanceof MathMLElement) {
+        if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.MathMLElement) {
             //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';
@@ -113,7 +117,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             currLeft = (bcEl.left - bcPar.left) / zoom;
             currTop = (bcEl.top - bcPar.top) / zoom;
         }
-        else if (element instanceof SVGGraphicsElement) {
+        else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
             let bbox = element.getBBox();
             currLeft = bbox.x;
             currTop = bbox.y;

package/dist/elements/helper/LayoutHelper.js

@@ -33,10 +33,10 @@ export function placeDesignItem(container, designItem, offset, mode) {
     const computedStyleMovedElement = getComputedStyle(movedElement);
     if (mode === 'position') {
         let positionedContainerElement = container.element;
-        let computedStylePositionedContainer = getComputedStyle(container.element);
-        if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
+        let computedStylePositionedContainer = container.getComputedStyle();
+        if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute' && positionedContainerElement.offsetParent) {
             positionedContainerElement = positionedContainerElement.offsetParent;
-            computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
+            computedStylePositionedContainer = container.window.getComputedStyle(positionedContainerElement);
         }
         let oldLeft = null;
         let oldRight = null;

package/dist/elements/helper/SvgHelper.js

@@ -1,11 +1,11 @@
 export function isVisualSvgElement(element) {
     let el = element;
     while (el) {
-        if (el instanceof SVGSVGElement)
+        if (el instanceof el.ownerDocument.defaultView.SVGSVGElement)
             return true;
-        if (el instanceof SVGDefsElement)
+        if (el instanceof el.ownerDocument.defaultView.SVGDefsElement)
             return false;
-        if (el instanceof SVGMetadataElement)
+        if (el instanceof el.ownerDocument.defaultView.SVGMetadataElement)
             return false;
         el = el.parentElement;
     }

package/dist/elements/helper/TransformHelper.js

@@ -187,16 +187,16 @@ export function getDesignerCanvasNormalizedTransformedPoint(element, point, desi
 export function getElementSize(element) {
     let width = element.offsetWidth;
     let height = element.offsetHeight;
-    if (element instanceof SVGElement && element.width) {
+    if (element instanceof element.ownerDocument.defaultView.SVGElement && element.width) {
         width = element.width.baseVal.value;
         height = element.height.baseVal.value;
     }
-    else if (element instanceof SVGGraphicsElement) {
+    else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
         let bbox = element.getBBox();
         width = bbox.width;
         height = bbox.height;
     }
-    else if (element instanceof MathMLElement) {
+    else if (element instanceof element.ownerDocument.defaultView.MathMLElement) {
         let bbox = element.getBoundingClientRect();
         width = bbox.width;
         height = bbox.height;
@@ -251,11 +251,12 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     let top1Transformed = top1.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
     let top2Transformed = top2.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
     let top3Transformed = top3.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
-    let transformedCornerPoints = [];
-    transformedCornerPoints[0] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top0Transformed.x, designerCanvasNormalizedTransformOrigin.y + top0Transformed.y);
-    transformedCornerPoints[1] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top1Transformed.x, designerCanvasNormalizedTransformOrigin.y + top1Transformed.y);
-    transformedCornerPoints[2] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top2Transformed.x, designerCanvasNormalizedTransformOrigin.y + top2Transformed.y);
-    transformedCornerPoints[3] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top3Transformed.x, designerCanvasNormalizedTransformOrigin.y + top3Transformed.y);
+    const transformedCornerPoints = [];
+    const offset = designerCanvas.containerOffset;
+    transformedCornerPoints[0] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top0Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top0Transformed.y + offset.y);
+    transformedCornerPoints[1] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top1Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top1Transformed.y + offset.y);
+    transformedCornerPoints[2] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top2Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top2Transformed.y + offset.y);
+    transformedCornerPoints[3] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top3Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top3Transformed.y + offset.y);
     return transformedCornerPoints;
 }
 export function extractTranslationFromDOMMatrix(matrix) {

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

@@ -22,6 +22,9 @@ export declare class DesignItem implements IDesignItem {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     nodeReplaced: TypedEvent<void>;
+    get window(): Window & typeof globalThis;
+    get document(): Document;
+    get usableContainer(): Element | Document | ShadowRoot;
     clone(): Promise<IDesignItem>;
     allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
     replaceNode(newNode: Node): void;
@@ -76,6 +79,7 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
     removeDesignerAttributesAndStylesFromChildren(): void;
+    updateChildrenFromNodesChildren(): void;
     _internalUpdateChildrenFromNodesChildren(): any[];
     _backupWhenEditContent: any;
     _inEditContent: boolean;

package/dist/elements/item/DesignItem.js

@@ -27,6 +27,23 @@ export class DesignItem {
     serviceContainer;
     instanceServiceContainer;
     nodeReplaced = new TypedEvent;
+    get window() {
+        if (this.isRootItem && this.node instanceof HTMLIFrameElement)
+            return this.node.contentDocument.defaultView;
+        return this.node.ownerDocument.defaultView;
+    }
+    get document() {
+        if (this.isRootItem && this.node instanceof HTMLIFrameElement)
+            return this.node.contentDocument;
+        return this.node.ownerDocument;
+    }
+    get usableContainer() {
+        if (this.isRootItem && this.element instanceof this.element.ownerDocument.defaultView.HTMLIFrameElement)
+            return this.element.contentWindow.document;
+        else if (this.isRootItem)
+            return this.node.shadowRoot;
+        return this.element;
+    }
     async clone() {
         try {
             const html = DomConverter.ConvertToString([this], false);
@@ -57,9 +74,9 @@ export class DesignItem {
         this.nodeReplaced.emit();
     }
     get nodeType() {
-        if (this.node instanceof Comment)
+        if (this.node instanceof this.node.ownerDocument.defaultView.Comment)
             return NodeType.Comment;
-        if (this.node instanceof Text)
+        if (this.node instanceof this.node.ownerDocument.defaultView.Text)
             return NodeType.TextNode;
         return NodeType.Element;
     }
@@ -88,7 +105,7 @@ export class DesignItem {
     }
     _reparseSpecialAttributes(name) {
         if (name == hideAtDesignTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
                 if (!this._attributes.has(hideAtDesignTimeAttributeName))
                     this.element.style.display = this._styles.get('display') ?? "";
                 else
@@ -96,7 +113,7 @@ export class DesignItem {
             }
         }
         else if (name == hideAtRunTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
                 if (!this._attributes.has(hideAtRunTimeAttributeName))
                     this.element.style.opacity = this._styles.get('opacity') ?? "";
                 else
@@ -104,7 +121,7 @@ export class DesignItem {
             }
         }
         else if (name == lockAtDesignTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
                 if (!this._attributes.has(lockAtDesignTimeAttributeName))
                     this.element.style.pointerEvents = 'auto';
                 else
@@ -313,7 +330,7 @@ export class DesignItem {
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
-        if (node instanceof HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') {
+        if (node instanceof node.ownerDocument.defaultView.HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') {
             try {
                 const shadow = node.parentNode.attachShadow({ mode: 'open' });
                 shadow.appendChild(node.content.cloneNode(true));
@@ -328,7 +345,7 @@ export class DesignItem {
                     designItem._attributes.set(a.name, a.value);
                 }
             }
-            if (node instanceof HTMLElement || node instanceof SVGElement) {
+            if (node instanceof node.ownerDocument.defaultView.HTMLElement || node instanceof node.ownerDocument.defaultView.SVGElement) {
                 const cssParser = new CssAttributeParser();
                 const st = node.getAttribute("style");
                 if (st) {
@@ -369,15 +386,27 @@ export class DesignItem {
                 e.style.pointerEvents = '';
         }
     }
+    updateChildrenFromNodesChildren() {
+        this._childArray = this._internalUpdateChildrenFromNodesChildren();
+        for (let c of this._childArray) {
+            c._parent = this;
+        }
+    }
     _internalUpdateChildrenFromNodesChildren() {
         const newChilds = [];
         if (this.nodeType == NodeType.Element) {
-            if (this.element instanceof HTMLTemplateElement) {
+            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
                 for (const c of this.element.content.childNodes) {
                     const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
                     newChilds.push(di);
                 }
             }
+            else if (this.element instanceof this.node.ownerDocument.defaultView.HTMLIFrameElement) {
+                for (const c of this.element.contentWindow.document.childNodes) {
+                    const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+                    newChilds.push(di);
+                }
+            }
             else {
                 for (const c of this.element.childNodes) {
                     const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
@@ -565,7 +594,7 @@ export class DesignItem {
     }
     getComputedStyle() {
         if (this.nodeType == NodeType.Element)
-            return window.getComputedStyle(this.element);
+            return this.window.getComputedStyle(this.element);
         return null;
     }
     _stylesCache = null;
@@ -616,7 +645,7 @@ export class DesignItem {
             if (this.isRootItem) {
                 this.node.shadowRoot.appendChild(designItem.view);
             }
-            else if (this.view instanceof HTMLTemplateElement) {
+            else if (this.view instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
                 this.view.content.appendChild(designItem.view);
             }
             else
@@ -627,7 +656,7 @@ export class DesignItem {
             if (this.isRootItem) {
                 this.node.shadowRoot.insertBefore(designItem.view, el.element);
             }
-            else if (this.view instanceof HTMLTemplateElement) {
+            else if (this.view instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
                 this.view.content.insertBefore(designItem.view, el.element);
             }
             else

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

@@ -8,6 +8,10 @@ import { IPlacementService } from '../services/placementService/IPlacementServic
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface IDesignItem {
     lastContainerSize: ISize;
+    readonly window: Window & typeof globalThis;
+    readonly document: Document;
+    readonly usableContainer: ShadowRoot | Element | Document;
+    updateChildrenFromNodesChildren(): any;
     setView(node: Element): any;
     replaceNode(newNode: Node): any;
     nodeReplaced: TypedEvent<void>;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -133,7 +133,7 @@ export function createDefaultServiceContainer() {
         new InvisibleElementExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
-        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
         new PreviousElementSelectExtensionProvider(),
         new TransformOriginExtensionProvider(true),
         new MarginExtensionProvider(),
@@ -142,7 +142,7 @@ export function createDefaultServiceContainer() {
         new SvgElementExtensionProvider(),
         new ApplyFirstMachingExtensionProvider(new GridChildResizeExtensionProvider(), new ResizeExtensionProvider(true)),
         new RotateExtensionProvider(),
-        new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [
         new GridChildToolbarExtensionProvider(),
@@ -156,7 +156,7 @@ export function createDefaultServiceContainer() {
         new FlexboxExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Selection, [
-        new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
         new DisplayGridExtensionProvider('lightgray', '#8080802b'),
@@ -165,8 +165,8 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
         new HighlightElementExtensionProvider(),
-        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
-        new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
+        new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Placement, [
         new PlacementExtensionProvider()

package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js

@@ -2,7 +2,7 @@ import { DesignItem } from "../../item/DesignItem.js";
 export class BaseCustomWebcomponentDesignItemService {
     createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
         const di = new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
-        if (node instanceof HTMLTemplateElement) {
+        if (node instanceof node.ownerDocument.defaultView.HTMLTemplateElement) {
             requestAnimationFrame(() => {
                 let repeatCount = 1;
                 const attr = node.getAttribute('sample-repeat-count');

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

@@ -74,7 +74,7 @@ export class DragDropService {
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {
                     //TODO: Maybe the check for SVG Element should be in "canEnterByDrop"?
-                    if (newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
+                    if (newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof newContainerElementDesignItem.window.SVGElement)) {
                         break;
                     }
                     else {

package/dist/elements/services/eventsService/EventsService.js

@@ -89,9 +89,9 @@ export class EventsService {
         return true;
     }
     getPossibleEvents(designItem) {
-        if (designItem.element instanceof HTMLInputElement ||
-            designItem.element instanceof HTMLTextAreaElement ||
-            designItem.element instanceof HTMLSelectElement) {
+        if (designItem.element instanceof designItem.window.HTMLInputElement ||
+            designItem.element instanceof designItem.window.HTMLTextAreaElement ||
+            designItem.element instanceof designItem.window.HTMLSelectElement) {
             let events = [...this._simpleForm, ...this._simpleMouseEvents, ...this._form, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
             return events;
         }

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -7,22 +7,22 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
         super(options);
     }
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
-        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
-            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+        if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) ||
+            (designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
             (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
-            (designItem.element instanceof SVGElement))
+            (designItem.element instanceof designItem.window.SVGElement))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteIndentBefore(indentedTextWriter, designItem) {
-        if ((designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+        if ((designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
             (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
-            (designItem.element instanceof SVGElement))
+            (designItem.element instanceof designItem.window.SVGElement))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
-        if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
-            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
-            (designItem.element instanceof SVGElement))
+        if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) ||
+            (designItem.element.nextElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
+            (designItem.element instanceof designItem.window.SVGElement))
             indentedTextWriter.writeNewline();
     }
     write(indentedTextWriter, designItems, rootContainerKeepInline, updatePositions = false) {
@@ -36,8 +36,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
         let end = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
             if (isEmptyTextNode(designItem.element) &&
-                ((designItem.element.previousSibling instanceof HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
-                    (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+                ((designItem.element.previousSibling instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
+                    (designItem.element.nextSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextSibling)))) {
             }
             else
                 this.writeTextNode(indentedTextWriter, designItem, true);
@@ -66,7 +66,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                     this.writeTextNode(indentedTextWriter, designItem, false, !notrim);
                 }
                 else {
-                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+                    if (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement)) {
                         indentedTextWriter.writeNewline();
                         indentedTextWriter.levelRaise();
                     }
@@ -77,7 +77,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                             if (!indentedTextWriter.isLastCharNewline())
                                 this._conditionalyWriteNewline(indentedTextWriter, c);
                     }
-                    if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+                    if (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement)) {
                         indentedTextWriter.levelShrink();
                         if (!indentedTextWriter.isLastCharNewline())
                             indentedTextWriter.writeNewline();

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -45,7 +45,7 @@ export class DefaultInstanceService {
             }
         }
         const elementString = '<' + definition.tag + attr + '></' + definition.tag + '>';
-        const element = newElementFromString(elementString);
+        const element = newElementFromString(elementString, instanceServiceContainer.designerCanvas.rootDesignItem.document);
         element._inNodeProjectsDesignerView = true;
         if (definition.defaultWidth)
             element.style.width = definition.defaultWidth;
@@ -58,7 +58,7 @@ export class DefaultInstanceService {
         }
         if (definition.defaultContent) {
             if (typeof definition.defaultContent === "string") {
-                const parser = new DOMParser();
+                const parser = new instanceServiceContainer.designerCanvas.rootDesignItem.window.DOMParser();
                 //@ts-ignore
                 const doc = parser.parseFromString(definition.defaultContent, 'text/html', { includeShadowRoots: true });
                 element.append(...doc.head.childNodes);

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

@@ -12,7 +12,7 @@ export class SnaplinesProviderService {
             const positionsMiddleH = [];
             const positionsV = [];
             const positionsMiddleV = [];
-            const tw = document.createTreeWalker(containerItem.isRootItem ? containerItem.element.shadowRoot : containerItem.element, NodeFilter.SHOW_ELEMENT);
+            const tw = containerItem.document.createTreeWalker(containerItem.usableContainer, NodeFilter.SHOW_ELEMENT);
             let n = tw.nextNode();
             while (n != null) {
                 if (ignMap.has(n)) {

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

@@ -60,7 +60,7 @@ export class PropertyGroupsService {
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         let lst = this._pgList;
-        if (designItems[0].element instanceof SVGElement)
+        if (designItems[0].element instanceof designItems[0].window.SVGElement)
             lst = this._svgPgList;
         const style = designItems[0].getComputedStyle();
         if (style.display.includes('grid'))

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

@@ -262,7 +262,7 @@ export class AbstractPropertiesService {
                 txt += a.name + '="' + a.value.replaceAll('"', '"') + '" ';
             }
             txt += '></' + d.name + '>';
-            let element = newElementFromString(txt); // some custom elements only parse attributes during constructor call 
+            let element = newElementFromString(txt, designItems[0].document); // some custom elements only parse attributes during constructor call 
             for (let c of [...d.element.childNodes])
                 element.appendChild(c);
             element.style.pointerEvents = 'auto';

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

@@ -50,7 +50,7 @@ export class MathMLElementsPropertiesService extends CommonPropertiesService {
         return RefreshMode.full;
     }
     isHandledElement(designItem) {
-        return designItem.element instanceof MathMLElement;
+        return designItem.element instanceof designItem.window.MathMLElement;
     }
     getProperty(designItem, name) {
         return this.getProperties(designItem).find(x => x.name == name);

package/dist/elements/services/refactorService/TextRefactorService.js

@@ -2,7 +2,7 @@ export class TextRefactorService {
     getRefactorings(designItems) {
         let refactorings = [];
         for (let d of designItems) {
-            if (d.element instanceof HTMLInputElement || d.element instanceof HTMLTextAreaElement) {
+            if (d.element instanceof d.window.HTMLInputElement || d.element instanceof d.window.HTMLTextAreaElement) {
                 if (d.element.value)
                     refactorings.push({ service: this, name: d.element.value, itemType: 'text', designItem: d, type: 'attribute', sourceObject: d, display: 'attribute' + '/' + 'value' });
             }

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

@@ -30,6 +30,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     designerOffsetHeight: number;
     readonly scaleFactor: number;
     canvasOffset: IPoint;
+    readonly containerOffset: IPoint;
     canvas: HTMLElement;
     additionalStyles: CSSStyleSheet[];
     ignoreEvent(event: Event): any;

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

@@ -48,6 +48,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set canvasOffset(value: IPoint);
     get canvasOffsetUnzoomed(): IPoint;
     set canvasOffsetUnzoomed(value: IPoint);
+    /** Offset when using an iframe as container */
+    get containerOffset(): IPoint;
     onContentChanged: TypedEvent<void>;
     onZoomFactorChanged: TypedEvent<number>;
     get canvas(): HTMLElement;
@@ -64,7 +66,10 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _pointerextensions;
     private _lastCopiedPrimaryItem;
     private _ignoreEvent;
-    constructor();
+    private _useIframe;
+    private _iframe;
+    private _window;
+    constructor(useIframe?: boolean);
     get designerWidth(): string;
     set designerWidth(value: string);
     get designerHeight(): string;
@@ -124,6 +129,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
         realHeight: number;
     };
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    private transformPoint;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _patchStylesheetForDesigner(text: string): string;

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

@@ -1,7 +1,7 @@
 import { EventNames } from '../../../enums/EventNames.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { DesignItem, forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from '../../item/DesignItem.js';
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
 import { Snaplines } from './Snaplines.js';
@@ -21,6 +21,7 @@ import { StylesheetChangedAction } from '../../services/undoService/transactionI
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
 import { filterChildPlaceItems } from '../../helper/LayoutHelper.js';
 import { TouchGestureHelper } from '../../helper/TouchGestureHelper.js';
+import { stylesheetFromString } from '../../helper/StylesheetHelper.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -91,6 +92,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     set canvasOffsetUnzoomed(value) {
         this.canvasOffset = { x: value.x / this.zoomFactor, y: value.y / this.zoomFactor };
     }
+    /** Offset when using an iframe as container */
+    get containerOffset() {
+        if (this._useIframe) {
+            const rect = this._outercanvas2.getBoundingClientRect();
+            return rect;
+        }
+        return { x: 0, y: 0 };
+    }
     onContentChanged = new TypedEvent();
     onZoomFactorChanged = new TypedEvent();
     get canvas() {
@@ -158,6 +167,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       user-select: none;
       -webkit-user-select: none;
     }
+
+    #node-projects-designer-canvas-canvas iframe {
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      border: none;
+      width: 100%;
+      height: 100%;
+    }
     
     #node-projects-designer-canvas-clickOverlay {
       position: absolute;
@@ -275,11 +293,27 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _pointerextensions;
     _lastCopiedPrimaryItem;
     _ignoreEvent;
-    constructor() {
+    _useIframe = true;
+    _iframe;
+    _window;
+    constructor(useIframe = false) {
         super();
+        this._useIframe = useIframe;
         this._restoreCachedInititalValues();
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
-        this._canvasShadowRoot = this._canvas.attachShadow({ mode: 'open' });
+        if (this._useIframe) {
+            this._iframe = document.createElement('iframe');
+            this._iframe.setAttribute("sandbox", "allow-same-origin");
+            this._canvas.appendChild(this._iframe);
+            requestAnimationFrame(() => {
+                this._window = this._iframe.contentWindow;
+                this._canvasShadowRoot = this._iframe.contentWindow.document;
+            });
+        }
+        else {
+            this._window = window;
+            this._canvasShadowRoot = this._canvas.attachShadow({ mode: 'open' });
+        }
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
         this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
@@ -333,15 +367,25 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return this._additionalStyle;
     }
     applyAllStyles() {
-        let styles = [];
-        if (this._additionalStyle)
-            styles.push(...this._additionalStyle);
-        if (this.instanceServiceContainer.stylesheetService) {
-            styles.push(...this.instanceServiceContainer.stylesheetService
-                .getStylesheets()
-                .map(x => cssFromString(this._patchStylesheetForDesigner(x.content))));
+        if (this._window) {
+            let styles = [];
+            if (this._additionalStyle)
+                styles.push(...this._additionalStyle);
+            if (this.instanceServiceContainer.stylesheetService) {
+                styles.push(...this.instanceServiceContainer.stylesheetService
+                    .getStylesheets()
+                    .map(x => stylesheetFromString(this._window, this._patchStylesheetForDesigner(x.content))));
+            }
+            if (this._useIframe) {
+                this._iframe.contentWindow.document.adoptedStyleSheets = styles;
+            }
+            else {
+                this._canvasShadowRoot.adoptedStyleSheets = styles;
+            }
+        }
+        else {
+            requestAnimationFrame(() => this.applyAllStyles());
         }
-        this._canvasShadowRoot.adoptedStyleSheets = styles;
     }
     ignoreEvent(event) {
         this._ignoreEvent = event;
@@ -489,7 +533,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.canvasOffset = { x: 0, y: 0 };
         this.zoomFactor = 1;
         for (let n of this.rootDesignItem.querySelectorAll('*')) {
-            if (n instanceof Element) {
+            if (n instanceof n.ownerDocument.defaultView.Element) {
                 const rect = n.getBoundingClientRect();
                 minX = minX < rect.x ? minX : rect.x;
                 minY = minY < rect.y ? minY : rect.y;
@@ -598,8 +642,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (designItemDocumentPositionService) {
             this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
         }
-        this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this._canvas, this.serviceContainer, this.instanceServiceContainer);
-        //this.rootDesignItem.setView(<any>this._canvasShadowRoot);
+        if (this._useIframe) {
+            this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._iframe, this._iframe, this.serviceContainer, this.instanceServiceContainer);
+            requestAnimationFrame(() => {
+                this.rootDesignItem.updateChildrenFromNodesChildren();
+            });
+        }
+        else {
+            this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this._canvas, this.serviceContainer, this.instanceServiceContainer);
+        }
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService) {
             this.instanceServiceContainer.register("contentService", contentService(this));
@@ -998,14 +1049,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let range = document.createRange();
         range.selectNodeContents(element);
         let targetRect = range.getBoundingClientRect();
-        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
+        const offset = this.containerOffset;
+        return { x: offset.x + (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: offset.y + (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
     }
     getNormalizedElementCoordinates(element, ignoreScalefactor) {
         if (element.nodeType == NodeType.TextNode) {
             return this.getNormalizedTextNodeCoordinates(element, ignoreScalefactor);
         }
         const targetRect = element.getBoundingClientRect();
-        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
+        const offset = this.containerOffset;
+        return { x: offset.x + (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: offset.y + (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
     }
     getNormalizedElementCoordinatesAndRealSizes(element) {
         let ret = this.getNormalizedElementCoordinates(element);
@@ -1023,9 +1076,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
+    transformPoint(point) {
+        if (this._useIframe) {
+            const rect = this._canvasContainer.getBoundingClientRect();
+            return { x: point.x - rect.x, y: point.y - rect.y };
+        }
+        return point;
+    }
     elementsFromPoint(x, y) {
         let retVal = [];
-        let elements = this._canvasShadowRoot.elementsFromPoint(x, y);
+        const t = this.transformPoint({ x, y });
+        const elements = this._canvasShadowRoot.elementsFromPoint(t.x, t.y);
         for (let e of elements) {
             if (e.getRootNode() !== this._canvasShadowRoot)
                 continue;
@@ -1034,7 +1095,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return retVal;
     }
     getElementAtPoint(point, ignoreElementCallback) {
-        const elements = this._canvasShadowRoot.elementsFromPoint(point.x, point.y);
+        const t = this.transformPoint(point);
+        const elements = this._canvasShadowRoot.elementsFromPoint(t.x, t.y);
         let currentElement = null;
         for (let i = 0; i < elements.length; i++) {
             currentElement = elements[i];
@@ -1055,12 +1117,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return currentElement;
     }
     _patchStylesheetForDesigner(text) {
-        return text.replace(':hover', '[' + forceHoverAttributeName + ']')
-            .replace(':active', '[' + forceActiveAttributeName + ']')
-            .replace(':visited', '[' + forceVisitedAttributeName + ']')
-            .replace(':focus', '[' + forceFocusAttributeName + ']')
-            .replace(':focus-within', '[' + forceFocusWithinAttributeName + ']')
-            .replace(':focus-visible', '[' + forceFocusVisibleAttributeName + ']');
+        return text.replaceAll(':hover', '[' + forceHoverAttributeName + ']')
+            .replaceAll(':active', '[' + forceActiveAttributeName + ']')
+            .replaceAll(':visited', '[' + forceVisitedAttributeName + ']')
+            .replaceAll(':focus', '[' + forceFocusAttributeName + ']')
+            .replaceAll(':focus-within', '[' + forceFocusWithinAttributeName + ']')
+            .replaceAll(':focus-visible', '[' + forceFocusVisibleAttributeName + ']');
     }
     _hoverElement;
     showHoverExtension(element, event) {

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

@@ -19,7 +19,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     private _toolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    constructor();
+    constructor(useIframe?: boolean);
     zoomReset(): void;
     zoomToFit(): void;
     private _onScrollbar;

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

@@ -150,13 +150,13 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
       </div>
     </div>`;
-    constructor() {
+    constructor(useIframe = false) {
         super();
         this._restoreCachedInititalValues();
         this._sVert = this._getDomElement('s-vert');
         this._sHor = this._getDomElement('s-hor');
         const outer = this._getDomElement('outer');
-        this._designerCanvas = new DesignerCanvas();
+        this._designerCanvas = new DesignerCanvas(useIframe);
         this._designerCanvas.id = "canvas";
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);

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

@@ -24,11 +24,15 @@ export class ElementDragTitleExtension extends AbstractExtension {
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 15, 'svg-primary-selection-move', this._rect);
             this._clickRect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 18, 'svg-invisible', this._clickRect);
             this._clickRect.style.background = 'transparent';
-            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; padding-left: 2px;">' + 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 = this._drawHTML('<div style="position:relative; pointer-events: none;"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0; padding-left: 2px;">' + 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._clickRect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._clickRect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._clickRect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+            this._clickRect.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                this.designerCanvas.showDesignItemContextMenu(this.extendedItem, e);
+            });
             this.refresh(cache, event);
         }
     }
@@ -67,7 +71,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
     _pointerEvent(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
+        if (event.button != 2)
+            this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -103,7 +103,10 @@ export class PointerTool {
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
             this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
-            if (event.type == EventNames.PointerDown) {
+            if (event.metaKey) {
+                this._actionType = PointerActionType.DrawSelection;
+            }
+            else if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
                 this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                 designerCanvas.snapLines.clearSnaplines();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.159",
+  "version": "0.1.161",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",