@node-projects/web-component-designer 0.0.115 → 0.0.117

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

@@ -8,7 +8,7 @@ export class DefaultInstanceService {
             if (importUri[0] === '.')
                 importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri;
             //@ts-ignore
-            if (importShim) {
+            if (window.importShim) {
                 //@ts-ignore
                 importShim(importUri).then((x) => {
                     let ctor = customElements.get(definition.tag);

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -31,7 +31,7 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        if (importShim)
+        if (window.importShim)
             //@ts-ignore
             importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         else

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        if (importShim)
+        if (window.importShim)
             //@ts-ignore
             importShim("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         else

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -55,7 +55,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     async ready() {
         let style;
         //@ts-ignore
-        if (importShim)
+        if (window.importShim)
             //@ts-ignore
             style = await importShim("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
         else

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/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

@@ -74,18 +74,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 +122,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

@@ -57,7 +57,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        if (importShim)
+        if (window.importShim)
             //@ts-ignore
             importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         else
@@ -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 ?? '';
@@ -104,7 +105,11 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
             this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
-            this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+            if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+            else
+                this._content.value = '';
+            this._content.title = this._content.value;
         });
     }
 }

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -96,7 +96,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         super();
         this._restoreCachedInititalValues();
         //@ts-ignore
-        if (importShim)
+        if (window.importShim)
             //@ts-ignore
             importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         else

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",