@node-projects/web-component-designer 0.1.167 → 0.1.169

package/README.md

@@ -60,10 +60,9 @@ Your index.html should be extended as follows:
 
 Pointer Tool:
 alt:   select element behind
-meta:  draw selection rect
-ctrl:  add to selection
-shift: remove from selection
-
+shift:  draw selection rect
+ctrl:  add/remove from selection
+ctrl+shift: pan
 
 ## Copyright notice
 

package/dist/elements/helper/ElementHelper.js

@@ -20,23 +20,23 @@ export var ElementDisplayType;
 export function isInline(element) {
     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)
+    if (element instanceof (element.ownerDocument.defaultView ?? window).SVGElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHtmlElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHeadElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLBodyElement)
         return false;
-    return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
+    return (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display.startsWith('inline');
 }
 export function isInlineAfter(element) {
     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)
+    if (element instanceof (element.ownerDocument.defaultView ?? window).SVGElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHtmlElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHeadElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLBodyElement)
         return false;
-    return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
+    return (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display.startsWith('inline');
 }
 export function getElementDisplaytype(element) {
-    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)
+    if (element instanceof (element.ownerDocument.defaultView ?? window).SVGElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHtmlElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHeadElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLBodyElement)
         return ElementDisplayType.block;
-    if (element instanceof element.ownerDocument.defaultView.MathMLElement)
+    if (element instanceof (element.ownerDocument.defaultView ?? window).MathMLElement)
         return ElementDisplayType.block;
-    const display = element.ownerDocument.defaultView.getComputedStyle(element).display;
+    const display = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
 export function isEmptyTextNode(node) {
@@ -81,18 +81,18 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             break;
         }
         let nextParent = element.offsetParent ? element.offsetParent : element.getRootNode().host;
-        if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement) {
+        if (element instanceof (element.ownerDocument.defaultView ?? window).SVGSVGElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLBodyElement || element instanceof (element.ownerDocument.defaultView ?? window).HTMLHtmlElement) {
             nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
         }
-        else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
+        else if (element instanceof (element.ownerDocument.defaultView ?? window).SVGGraphicsElement) {
             nextParent = element.ownerSVGElement;
         }
-        else if (element instanceof element.ownerDocument.defaultView.MathMLElement) {
+        else if (element instanceof (element.ownerDocument.defaultView ?? window).MathMLElement) {
             nextParent = element.parentElement ?? nextParent;
         }
         let scrollLeft = 0;
         let scrollTop = 0;
-        if (element instanceof element.ownerDocument.defaultView.HTMLElement) {
+        if (element instanceof (element.ownerDocument.defaultView ?? window).HTMLElement) {
             let parent = element.parentElement;
             while (parent !== null && parent !== nextParent) {
                 scrollLeft += parent.scrollLeft;
@@ -106,7 +106,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
         }
         let currLeft = 0;
         let currTop = 0;
-        if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.MathMLElement) {
+        if (element instanceof (element.ownerDocument.defaultView ?? window).SVGSVGElement || element instanceof (element.ownerDocument.defaultView ?? window).MathMLElement) {
             //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';
@@ -116,7 +116,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             currLeft = (bcEl.left - bcPar.left) / zoom;
             currTop = (bcEl.top - bcPar.top) / zoom;
         }
-        else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
+        else if (element instanceof (element.ownerDocument.defaultView ?? window).SVGGraphicsElement) {
             let bbox = element.getBBox();
             currLeft = bbox.x;
             currTop = bbox.y;

package/dist/elements/helper/SvgHelper.js

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

package/dist/elements/helper/TransformHelper.js

@@ -9,7 +9,7 @@ let identityMatrix = [
 ];
 export function getElementCombinedTransform(element) {
     //https://www.w3.org/TR/css-transforms-2/#ctm
-    let s = element.ownerDocument.defaultView.getComputedStyle(element);
+    let s = (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
     let m = new DOMMatrix();
     if (s.translate != 'none' && s.translate) {
         m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
@@ -159,7 +159,7 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
         const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + tfX, elementWindowOffset.offsetTop - designerCanvas.outerRect.y + tfY);
         //if (actualElement == element) 
         {
-            const transf = element.ownerDocument.defaultView.getComputedStyle(element).transform;
+            const transf = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).transform;
             const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(transf));
             parentElementTransformOrigin.x -= mtx.x;
             parentElementTransformOrigin.y -= mtx.y;
@@ -177,16 +177,16 @@ export function getDesignerCanvasNormalizedTransformedPoint(element, point, desi
 export function getElementSize(element) {
     let width = element.offsetWidth;
     let height = element.offsetHeight;
-    if (element instanceof element.ownerDocument.defaultView.SVGElement && element.width) {
+    if (element instanceof (element.ownerDocument.defaultView ?? window).SVGElement && element.width) {
         width = element.width.baseVal.value;
         height = element.height.baseVal.value;
     }
-    else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
+    else if (element instanceof (element.ownerDocument.defaultView ?? window).SVGGraphicsElement) {
         let bbox = element.getBBox();
         width = bbox.width;
         height = bbox.height;
     }
-    else if (element instanceof element.ownerDocument.defaultView.MathMLElement) {
+    else if (element instanceof (element.ownerDocument.defaultView ?? window).MathMLElement) {
         let bbox = element.getBoundingClientRect();
         width = bbox.width;
         height = bbox.height;

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -316,7 +316,7 @@ export class ContextMenu {
     close() {
         this._menuElement.remove();
         window.removeEventListener("keyup", this._windowKeyUp);
-        window.removeEventListener("mousedown", this._windowDown);
+        window.removeEventListener("mousedown", this._windowDown, true);
         window.removeEventListener("resize", this._windowResize);
         setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10);
     }

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

@@ -24,7 +24,7 @@ export declare class DesignItem implements IDesignItem {
     nodeReplaced: TypedEvent<void>;
     get window(): Window & typeof globalThis;
     get document(): Document;
-    get usableContainer(): Element | Document | ShadowRoot;
+    get usableContainer(): ShadowRoot | Document | Element;
     clone(): Promise<IDesignItem>;
     allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
     replaceNode(newNode: Node): void;

package/dist/elements/item/DesignItem.js

@@ -30,7 +30,7 @@ export class DesignItem {
     get window() {
         if (this.isRootItem && this.node instanceof HTMLIFrameElement)
             return this.node.contentDocument.defaultView;
-        return this.node.ownerDocument.defaultView;
+        return (this.node.ownerDocument.defaultView ?? window);
     }
     get document() {
         if (this.isRootItem && this.node instanceof HTMLIFrameElement)
@@ -38,7 +38,7 @@ export class DesignItem {
         return this.node.ownerDocument;
     }
     get usableContainer() {
-        if (this.isRootItem && this.element instanceof this.element.ownerDocument.defaultView.HTMLIFrameElement)
+        if (this.isRootItem && this.element instanceof (this.element.ownerDocument.defaultView ?? window).HTMLIFrameElement)
             return this.element.contentWindow.document;
         else if (this.isRootItem)
             return this.node.shadowRoot;
@@ -74,9 +74,9 @@ export class DesignItem {
         this.nodeReplaced.emit();
     }
     get nodeType() {
-        if (this.node instanceof this.node.ownerDocument.defaultView.Comment)
+        if (this.node instanceof (this.node.ownerDocument.defaultView ?? window).Comment)
             return NodeType.Comment;
-        if (this.node instanceof this.node.ownerDocument.defaultView.Text)
+        if (this.node instanceof (this.node.ownerDocument.defaultView ?? window).Text)
             return NodeType.TextNode;
         return NodeType.Element;
     }
@@ -105,7 +105,7 @@ export class DesignItem {
     }
     _reparseSpecialAttributes(name) {
         if (name == hideAtDesignTimeAttributeName) {
-            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
+            if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLElement || this.element instanceof (this.node.ownerDocument.defaultView ?? window).SVGElement) {
                 if (!this._attributes.has(hideAtDesignTimeAttributeName))
                     this.element.style.display = this._styles.get('display') ?? "";
                 else
@@ -113,7 +113,7 @@ export class DesignItem {
             }
         }
         else if (name == hideAtRunTimeAttributeName) {
-            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
+            if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLElement || this.element instanceof (this.node.ownerDocument.defaultView ?? window).SVGElement) {
                 if (!this._attributes.has(hideAtRunTimeAttributeName))
                     this.element.style.opacity = this._styles.get('opacity') ?? "";
                 else
@@ -121,7 +121,7 @@ export class DesignItem {
             }
         }
         else if (name == lockAtDesignTimeAttributeName) {
-            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLElement || this.element instanceof this.node.ownerDocument.defaultView.SVGElement) {
+            if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLElement || this.element instanceof (this.node.ownerDocument.defaultView ?? window).SVGElement) {
                 if (!this._attributes.has(lockAtDesignTimeAttributeName))
                     this.element.style.pointerEvents = 'auto';
                 else
@@ -330,7 +330,7 @@ export class DesignItem {
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
-        if (node instanceof node.ownerDocument.defaultView.HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') {
+        if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') {
             try {
                 const shadow = node.parentNode.attachShadow({ mode: 'open' });
                 shadow.appendChild(node.content.cloneNode(true));
@@ -345,7 +345,7 @@ export class DesignItem {
                     designItem._attributes.set(a.name, a.value);
                 }
             }
-            if (node instanceof node.ownerDocument.defaultView.HTMLElement || node instanceof node.ownerDocument.defaultView.SVGElement) {
+            if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGElement) {
                 const cssParser = new CssAttributeParser();
                 const st = node.getAttribute("style");
                 if (st) {
@@ -390,13 +390,13 @@ export class DesignItem {
     _internalUpdateChildrenFromNodesChildren() {
         const newChilds = [];
         if (this.nodeType == NodeType.Element) {
-            if (this.element instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
+            if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).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) {
+            else if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLIFrameElement) {
                 for (const c of this.element.contentWindow.document.childNodes) {
                     const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
                     newChilds.push(di);
@@ -640,7 +640,7 @@ export class DesignItem {
             if (this.isRootItem) {
                 this.usableContainer.appendChild(designItem.view);
             }
-            else if (this.view instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
+            else if (this.view instanceof (this.node.ownerDocument.defaultView ?? window).HTMLTemplateElement) {
                 this.view.content.appendChild(designItem.view);
             }
             else
@@ -651,7 +651,7 @@ export class DesignItem {
             if (this.isRootItem) {
                 this.usableContainer.insertBefore(designItem.view, el.element);
             }
-            else if (this.view instanceof this.node.ownerDocument.defaultView.HTMLTemplateElement) {
+            else if (this.view instanceof (this.node.ownerDocument.defaultView ?? window).HTMLTemplateElement) {
                 this.view.content.insertBefore(designItem.view, el.element);
             }
             else

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

@@ -9,7 +9,7 @@ export class DesignContext {
         enableStylesheetService: false,
         basicStackedToolbarExtensionShowOverlay: false,
         simulateHoverOnHover: false,
-        selectUnhitableElements: false,
+        selectUnhitableElements: true,
     };
     extensionOptionsChanged = new TypedEvent;
 }

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

@@ -36,7 +36,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _scaleFactor;
     private _canvasOffset;
     private _additionalStyle;
-    private _currentContextMenu;
     private _backgroundImage;
     private _enableSelectTextNodesOnClick;
     private _moveGroup;

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

@@ -64,7 +64,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
     _additionalStyle;
-    _currentContextMenu;
     _backgroundImage;
     _enableSelectTextNodesOnClick = false;
     _moveGroup;
@@ -535,7 +534,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 n.ownerDocument.defaultView.Element) {
+            if (n instanceof (n.ownerDocument.defaultView ?? window).Element) {
                 const rect = n.getBoundingClientRect();
                 minX = minX < rect.x ? minX : rect.x;
                 minY = minY < rect.y ? minY : rect.y;
@@ -910,7 +909,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     showDesignItemContextMenu(designItem, event) {
-        this._currentContextMenu?.close();
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
             if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {

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

@@ -31,7 +31,7 @@ export class PointerTool {
     }
     _showContextMenu(event, designerCanvas) {
         event.preventDefault();
-        if (!event.ctrlKey && !event.shiftKey) {
+        if (!event.ctrlKey) {
             let items = designerCanvas.elementsFromPoint(event.x, event.y);
             for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                 if (items.indexOf(e.element) >= 0) {
@@ -48,8 +48,7 @@ export class PointerTool {
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        event.preventDefault();
-        if (event.ctrlKey || event.shiftKey)
+        if (event.ctrlKey)
             this.cursor = 'copy';
         else
             this.cursor = 'default';
@@ -104,7 +103,8 @@ export class PointerTool {
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
             this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
-            if (event.metaKey) {
+            if (event.shiftKey) {
+                event.preventDefault();
                 this._actionType = PointerActionType.DrawSelection;
             }
             else if (event.type == EventNames.PointerDown) {
@@ -196,7 +196,7 @@ export class PointerTool {
                     }
                     if (this._firstTimeInMove) {
                         if (!currentDesignItem.instanceServiceContainer.selectionService.selectedElements.includes(currentDesignItem)) {
-                            if (event.ctrlKey || event.shiftKey)
+                            if (event.ctrlKey)
                                 currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...currentDesignItem.instanceServiceContainer.selectionService.selectedElements, currentDesignItem], event);
                             else
                                 currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event);
@@ -320,7 +320,7 @@ export class PointerTool {
                 {
                     this._started = false;
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
-                        if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey) {
+                        if (this._previousEventName == EventNames.PointerDown && !event.ctrlKey) {
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem], event);
                         }
                         else {
@@ -373,7 +373,7 @@ export class PointerTool {
         }
     }
     checkSelectElement(event, designerCanvas, currentDesignItem) {
-        if (event.shiftKey || event.ctrlKey) {
+        if (event.ctrlKey) {
             const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
             if (index >= 0) {
                 let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);

package/package.json

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