@node-projects/web-component-designer 0.0.180 → 0.0.182

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

@@ -146,10 +146,16 @@ export class ContextMenu {
     }
     renderLevel(level) {
         let ul_outer = document.createElement("ul");
-        let lastWasDivider = false;
+        let addDivider = false;
         level.forEach((item) => {
-            let li = document.createElement("li");
             if (item.title !== '-') {
+                if (addDivider) {
+                    let li = document.createElement("li");
+                    li.className = "context_menu_divider";
+                    addDivider = false;
+                    ul_outer.appendChild(li);
+                }
+                let li = document.createElement("li");
                 let icon_span = document.createElement("span");
                 icon_span.className = 'context_menu_icon_span';
                 if ((item.icon ?? '') != '') {
@@ -190,15 +196,10 @@ export class ContextMenu {
                         });
                     }
                 }
-                lastWasDivider = false;
                 ul_outer.appendChild(li);
             }
             else {
-                if (!lastWasDivider) {
-                    li.className = "context_menu_divider";
-                    lastWasDivider = true;
-                    ul_outer.appendChild(li);
-                }
+                addDivider = true;
             }
         });
         return ul_outer;

package/dist/elements/item/DesignItem.js

@@ -165,12 +165,14 @@ export class DesignItem {
         return this.node.textContent;
     }
     set content(value) {
+        //undo
         this.node.textContent = value;
     }
     get innerHTML() {
         return this.element.innerHTML;
     }
     set innerHTML(value) {
+        //undo
         this.element.innerHTML = value;
         this.updateChildrenFromNodesChildren();
     }
@@ -354,6 +356,8 @@ export class DesignItem {
         return value ?? fallback;
     }
     getAllStyles() {
+        if (this.nodeType != NodeType.Element)
+            return [];
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
         if (this.instanceServiceContainer.stylesheetService) {
             const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);

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

@@ -1,5 +1,8 @@
 export declare enum NodeType {
     Element = 1,
+    Attribute = 2,
     TextNode = 3,
-    Comment = 8
+    Comment = 8,
+    Document = 9,
+    DocumentFragment = 11
 }

package/dist/elements/item/NodeType.js

@@ -1,6 +1,9 @@
 export var NodeType;
 (function (NodeType) {
     NodeType[NodeType["Element"] = 1] = "Element";
+    NodeType[NodeType["Attribute"] = 2] = "Attribute";
     NodeType[NodeType["TextNode"] = 3] = "TextNode";
     NodeType[NodeType["Comment"] = 8] = "Comment";
+    NodeType[NodeType["Document"] = 9] = "Document";
+    NodeType[NodeType["DocumentFragment"] = 11] = "DocumentFragment";
 })(NodeType || (NodeType = {}));

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js

@@ -15,7 +15,7 @@ export class WebcomponentManifestElementsService {
         for (let m of manifest.modules) {
             for (let e of m.exports) {
                 if (e.kind == 'custom-element-definition') {
-                    let elDef = { tag: e.name, import: this._importPrefix + '/' + e.declaration.module, defaultWidth: "200px", defaultHeight: "200px", className: e.declaration.name };
+                    let elDef = { tag: e.name, import: this._importPrefix + (this._importPrefix.endsWith('/') ? '' : '/') + e.declaration.module, defaultWidth: "200px", defaultHeight: "200px", className: e.declaration.name };
                     this._elementList.push(elDef);
                 }
             }

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -42,7 +42,7 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
         for (let m of this._packageData.modules) {
             for (let e of m.exports) {
                 if (e.kind == 'custom-element-definition') {
-                    this._elementList.push({ tag: e.name, import: this._importPrefix + '/' + e.declaration.module });
+                    this._elementList.push({ tag: e.name, import: this._importPrefix + (this._importPrefix.endsWith('/') ? '' : '/') + e.declaration.module });
                     let properties = [];
                     let declaration = m.declarations.find(x => x.name == e.declaration.name);
                     for (let d of declaration.members) {

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

@@ -3,6 +3,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import cssProperties from './CssProperties.json' assert { type: 'json' };
 import { ValueType } from '../ValueType.js';
+import { NodeType } from '../../../item/NodeType.js';
 const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
@@ -19,7 +20,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
         return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
     }
     getProperties(designItem) {
-        if (!designItem)
+        if (!designItem || designItem.nodeType != NodeType.Element)
             return [];
         let styles = designItem.getAllStyles();
         let arr = styles.map(x => ({

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

@@ -102,6 +102,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
      * Converts the Event x/y coordinates, to the mouse position in the viewport
      */
     getViewportCoordinates(event: MouseEvent): IPoint;
+    getNormalizedTextNodeCoordinates(element: Text, ignoreScalefactor?: boolean): IRect;
     getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect;
     getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
         realWidth: number;

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

@@ -17,6 +17,7 @@ import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelpe
 import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { OverlayLayerView } from './overlayLayerView.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+import { NodeType } from '../../item/NodeType.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -391,7 +392,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let di = designItems[i];
                 let pos = positions ? positions[i] : null;
                 this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
-                if (!disableRestoreOfPositions && pos) {
+                if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) {
                     di.setStyle('left', (pos.x - containerPos.x) + 'px');
                     di.setStyle('top', (pos.y - containerPos.y) + 'px');
                 }
@@ -797,7 +798,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: (event.clientY - this.outerRect.y)
         };
     }
+    getNormalizedTextNodeCoordinates(element, ignoreScalefactor) {
+        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) };
+    }
     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) };
     }

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

@@ -93,7 +93,7 @@ export class ExtensionManager {
                             shouldAppE = [];
                         shouldAppE.push(e);
                         i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
-                        if (i.nodeType == NodeType.Element && e.shouldExtend(this, this.designerCanvas, i)) {
+                        if ( /*i.nodeType == NodeType.Element &&*/e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
                                 appE = [];

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

@@ -1,4 +1,5 @@
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { NodeType } from '../../../item/NodeType.js';
 import { AbstractExtension } from './AbstractExtension.js';
 export class SelectionDefaultExtension extends AbstractExtension {
     _line1;
@@ -12,7 +13,13 @@ export class SelectionDefaultExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let transformedCornerPoints;
+        if (this.extendedItem.nodeType == NodeType.TextNode) {
+            let rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+            transformedCornerPoints = [{ x: rect.x, y: rect.y }, { x: rect.x + rect.width, y: rect.y }, { x: rect.x, y: rect.y + rect.height }, { x: rect.x + rect.width, y: rect.y + rect.height }];
+        }
+        else
+            transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-selection', this._line1);
         this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-selection', this._line2);
         this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-selection', this._line3);

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js

@@ -1,7 +1,8 @@
 import { CommandType } from '../../../../../commandHandling/CommandType.js';
+import { NodeType } from '../../../../item/NodeType.js';
 export class RotateLeftAndRight {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return !designItem.isRootItem;
+        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -1,7 +1,8 @@
 import { CommandType } from '../../../../../commandHandling/CommandType.js';
+import { NodeType } from '../../../../item/NodeType.js';
 export class ZMoveContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return !designItem.isRootItem;
+        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -1,6 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
 import { DesignItem } from '../../item/DesignItem.js';
+import { NodeType } from '../../item/NodeType.js';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
@@ -103,9 +104,15 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
             this._pg.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
-            this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element)
+                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            else
+                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
-            if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
+            if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+            }
+            else if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
                 this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
             else
                 this._content.value = '';

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -31,13 +31,13 @@
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.4.0",
+    "jest": "^29.4.1",
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.2",
     "mdn-data": "^2.0.30",
     "monaco-editor": "^0.34.1",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {