@node-projects/web-component-designer 0.0.116 → 0.0.118

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

@@ -391,6 +391,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._updateTransform();
         this._fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
+        this.extensionManager.refreshAllAppliedExtentions();
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;
@@ -405,7 +406,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
-        this.rootDesignItem.clearChildren();
+        for (let i of this.rootDesignItem.children())
+            this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
     }

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

@@ -11,6 +11,9 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     refresh() {
         let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
+        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -8,6 +8,6 @@ export class AltToEnterContainerExtensionProvider {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; }
   `;
 }

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

@@ -16,19 +16,26 @@ export class ElementDragTitleExtension extends AbstractExtension {
         this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+        this.refresh();
     }
     _drawMoveOverlay(itemRect) {
     }
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
+        const h = (15 / this.designerCanvas.scaleFactor);
+        const w = (60 / this.designerCanvas.scaleFactor);
+        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - h;
         this._rect.setAttribute('x', xr);
         this._rect.setAttribute('y', yr);
+        this._rect.setAttribute('height', '' + h);
+        this._rect.setAttribute('width', '' + w);
+        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
         const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
+        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5 / this.designerCanvas.scaleFactor;
         this._text.setAttribute('x', x);
         this._text.setAttribute('y', y);
+        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
     }
     _pointerEvent(event) {
         event.preventDefault();

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

@@ -8,6 +8,6 @@ export class ElementDragTitleExtensionProvider {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+    .svg-text-primary { stroke: none; fill: white; font-family: monospace; }
   `;
 }

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

@@ -4,6 +4,7 @@ import { ExtensionType } from './ExtensionType';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
+    designItemsWithExtentions: Set<IDesignItem>;
     constructor(designerCanvas: IDesignerCanvas);
     private _contentChanged;
     private _selectedElementsChanged;
@@ -14,4 +15,5 @@ export declare class ExtensionManager implements IExtensionManager {
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
     refreshAllExtensions(designItems: IDesignItem[]): void;
+    refreshAllAppliedExtentions(): void;
 }

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

@@ -2,6 +2,7 @@ import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from './ExtensionType';
 export class ExtensionManager {
     designerCanvas;
+    designItemsWithExtentions = new Set();
     constructor(designerCanvas) {
         this.designerCanvas = designerCanvas;
         designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
@@ -60,6 +61,7 @@ export class ExtensionManager {
                         }
                         appE.push(ext);
                         designItem.appliedDesignerExtensions.set(extensionType, appE);
+                        this.designItemsWithExtentions.add(designItem);
                     }
                 }
             }
@@ -89,6 +91,7 @@ export class ExtensionManager {
                             }
                             appE.push(ext);
                             i.appliedDesignerExtensions.set(extensionType, appE);
+                            this.designItemsWithExtentions.add(i);
                         }
                     }
                 }
@@ -114,6 +117,8 @@ export class ExtensionManager {
                         }
                     }
                     designItem.appliedDesignerExtensions.delete(extensionType);
+                    if (!designItem.appliedDesignerExtensions.size)
+                        this.designItemsWithExtentions.delete(designItem);
                 }
             }
             else {
@@ -128,6 +133,7 @@ export class ExtensionManager {
                     }
                 }
                 designItem.appliedDesignerExtensions.clear();
+                this.designItemsWithExtentions.delete(designItem);
             }
         }
     }
@@ -146,6 +152,8 @@ export class ExtensionManager {
                             }
                         }
                         i.appliedDesignerExtensions.delete(extensionType);
+                        if (!i.appliedDesignerExtensions.size)
+                            this.designItemsWithExtentions.delete(i);
                     }
                 }
             }
@@ -162,6 +170,7 @@ export class ExtensionManager {
                         }
                     }
                     i.appliedDesignerExtensions.clear();
+                    this.designItemsWithExtentions.delete(i);
                 }
             }
         }
@@ -242,4 +251,7 @@ export class ExtensionManager {
             this.refreshExtensions(designItems, ExtensionType.Doubleclick);
         }
     }
+    refreshAllAppliedExtentions() {
+        this.refreshAllExtensions([...this.designItemsWithExtentions]);
+    }
 }

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

@@ -8,4 +8,5 @@ export interface IExtensionManager {
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshAllExtensions(designItems: IDesignItem[]): any;
+    refreshAllAppliedExtentions(): any;
 }

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

@@ -13,6 +13,7 @@ export class MouseOverExtension extends AbstractExtension {
         const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
         const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
         this._rect = this._drawRect((xOffset - offset) / this.designerCanvas.scaleFactor, (yOffset - offset) / this.designerCanvas.scaleFactor, (itemRect.width + offset + offset) / this.designerCanvas.scaleFactor, (itemRect.height + offset + offset) / this.designerCanvas.scaleFactor, 'svg-hover', this._rect);
+        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -26,6 +26,10 @@ export class PathExtension extends AbstractExtension {
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._lastPos = { x: p.values[0], y: p.values[1] };
                     break;
+                case 'l':
+                    this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
+                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
+                    break;
                 case 'H':
                     break;
                 case 'V':
@@ -74,18 +78,19 @@ export class PathExtension extends AbstractExtension {
     }
     pointerEvent(event, circle, p, index) {
         event.stopPropagation();
+        const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._startPos = { x: event.x, y: event.y };
+                this._startPos = cursorPos;
                 this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
                 this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
-                    const cx = event.x - this._lastPos.x + this._circlePos.x;
-                    const cy = event.y - this._lastPos.y + this._circlePos.y;
+                    const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
+                    const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
                     const dx = cx - this._circlePos.x;
                     const dy = cy - this._circlePos.y;
                     if (event.shiftKey) {
@@ -121,7 +126,8 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y, p, index) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5, 'svg-path');
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path');
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         let circlePos = { x: x, y: y };
         const items = [];
         const pidx = this._pathdata.indexOf(p);

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

@@ -50,13 +50,14 @@ export class ResizeExtension extends AbstractExtension {
         }
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
-        let circle = this._drawCircle(x, y, 3, 'svg-primary-resizer', oldCircle);
+        let circle = this._drawCircle(x, y, 3 / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         if (!oldCircle) {
             circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
             circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(circle, event, cursor));
             circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(circle, event, cursor));
         }
-        circle.setAttribute('style', 'cursor: ' + cursor);
+        circle.style.cursor = cursor;
         return circle;
     }
     _pointerActionTypeResize(circle, event, actionMode = 'se-resize') {

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

@@ -15,6 +15,7 @@ export class SelectionDefaultExtension extends AbstractExtension {
         const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
         const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
         this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
+        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -11,10 +11,12 @@ export class TransformOriginExtension extends AbstractExtension {
         const rect = this.extendedItem.element.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
-        this._circle.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
-        this._circle2.setAttribute('style', 'pointer-events: none');
+        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        this._circle.style.cursor = 'pointer';
+        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        this._circle2.style.pointerEvents = 'none';
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -77,6 +77,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             extensions: ['childcounter', 'dnd5', 'filter'],
             quicksearch: true,
             source: [],
+            tooltip: true,
             filter: {
                 autoExpand: true,
                 mode: 'hide',

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

@@ -78,6 +78,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 let di = DesignItem.GetOrCreateDesignItem(t, this._instanceServiceContainer.selectionService.primarySelection.serviceContainer, this._instanceServiceContainer);
                 this._instanceServiceContainer.selectionService.primarySelection.insertAdjacentElement(di, 'afterbegin');
                 grp.commit();
+                this._content.title = this._content.value;
             }
             else if (e.key == 'Escape') {
                 this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
@@ -108,6 +109,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
             else
                 this._content.value = '';
+            this._content.title = 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.116",
+  "version": "0.0.118",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -19,20 +19,20 @@
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.37",
+    "@papyrs/stylo": "^0.0.39",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.9.6",
+    "ace-builds": "^1.11.2",
     "codemirror": "^6.0.1",
-    "esprima-next": "^5.8.3",
+    "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^28.0.8",
+    "jest": "^29.1.1",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.0",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.8.2",
+    "ts-jest": "^29.0.2",
+    "typescript": "^4.8.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {