@node-projects/web-component-designer 0.1.93 → 0.1.95

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.d.ts

@@ -6,6 +6,8 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    constructor(recreateElementsOnPropertyChange?: boolean);
+    protected _recreateElementsOnPropertyChange: boolean;
     private static _stylesCache;
     private _cssCacheClearTimer;
     private static _bindingsCache;
@@ -22,4 +24,5 @@ export declare abstract class AbstractPropertiesService implements IPropertiesSe
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+    protected static recreateElements(service: IPropertiesService, designItems: IDesignItem[]): void;
 }

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

@@ -3,7 +3,12 @@ import { PropertiesHelper } from './PropertiesHelper.js';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { NodeType } from '../../../item/NodeType.js';
+import { newElementFromString } from '../../../helper/ElementHelper.js';
 export class AbstractPropertiesService {
+    constructor(recreateElementsOnPropertyChange) {
+        this._recreateElementsOnPropertyChange = recreateElementsOnPropertyChange;
+    }
+    _recreateElementsOnPropertyChange = false;
     static _stylesCache = new Map;
     _cssCacheClearTimer;
     static _bindingsCache = new Map;
@@ -64,6 +69,8 @@ export class AbstractPropertiesService {
             this._notifyChangedProperty(d, property, value);
         }
         cg.commit();
+        if (this._recreateElementsOnPropertyChange)
+            AbstractPropertiesService.recreateElements(this, designItems);
     }
     getPropertyTarget(designItem, property) {
         if (property.propertyType == PropertyType.attribute)
@@ -94,6 +101,8 @@ export class AbstractPropertiesService {
             this._notifyChangedProperty(d, property, undefined);
         }
         cg.commit();
+        if (this._recreateElementsOnPropertyChange)
+            AbstractPropertiesService.recreateElements(this, designItems);
     }
     isSet(designItems, property) {
         let all = true;
@@ -233,4 +242,23 @@ export class AbstractPropertiesService {
         else
             return property.defaultValue;
     }
+    static recreateElements(service, designItems) {
+        for (let d of designItems) {
+            if (!service.isHandledElement(d))
+                continue;
+            let txt = '<' + d.name + ' ';
+            for (let a of d.element.attributes) {
+                txt += a.name + '="' + a.value.replaceAll('"', '&quot;') + '" ';
+            }
+            txt += '></' + d.name + '>';
+            let element = newElementFromString(txt); // some custom elements only parse attributes during constructor call 
+            for (let c of [...d.element.childNodes])
+                element.appendChild(c);
+            element.style.pointerEvents = 'auto';
+            d.node.insertAdjacentElement('beforebegin', element);
+            if (d.node.parentNode)
+                d.node.parentNode.removeChild(d.node);
+            d.replaceNode(element);
+        }
+    }
 }

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

@@ -11,7 +11,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
         return RefreshMode.fullOnValueChange;
     }
     constructor() {
-        super();
+        super(false);
         this.name = 'styles';
     }
     isHandledElement(designItem) {

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

@@ -6,7 +6,7 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssCustomPropertiesService extends CommonPropertiesService {
     removeInheritedCustomProperties;
     constructor(removeInheritedCustomProperties = true) {
-        super();
+        super(false);
         this.name = 'customProperties';
         this.removeInheritedCustomProperties = removeInheritedCustomProperties;
     }

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

@@ -79,7 +79,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         "stroke-opacity"
     ];
     constructor(name) {
-        super();
+        super(false);
         this.name = name;
     }
     isHandledElement(designItem) {

package/dist/elements/services/propertiesService/services/ListPropertiesService.d.ts

@@ -8,7 +8,7 @@ export declare class ListPropertiesService extends AbstractPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     name: string;
     private _propertys;
-    constructor(propertyDefinitions: IJsonPropertyDefinitions);
+    constructor(propertyDefinitions: IJsonPropertyDefinitions, recreateElementsOnPropertyChange?: boolean);
     isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];

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

@@ -7,8 +7,8 @@ export class ListPropertiesService extends AbstractPropertiesService {
     }
     name = "list";
     _propertys = new Map();
-    constructor(propertyDefinitions) {
-        super();
+    constructor(propertyDefinitions, recreateElementsOnPropertyChange) {
+        super(recreateElementsOnPropertyChange);
         for (let e in propertyDefinitions) {
             let parr = [];
             this._propertys.set(e, parr);

package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.d.ts

@@ -9,7 +9,7 @@ export declare class WebcomponentManifestPropertiesService extends AbstractPrope
     private _name;
     get name(): string;
     private _propertiesList;
-    constructor(name: string, manifest: any);
+    constructor(name: string, manifest: any, recreateElementsOnPropertyChange?: boolean);
     private _parseManifest;
     static manifestClassPropertyTypeToEditorPropertyType(type: string, editor: string): [type: string, values?: string[]];
     isHandledElement(designItem: IDesignItem): boolean;

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

@@ -9,8 +9,8 @@ export class WebcomponentManifestPropertiesService extends AbstractPropertiesSer
     _name;
     get name() { return this._name; }
     _propertiesList;
-    constructor(name, manifest) {
-        super();
+    constructor(name, manifest, recreateElementsOnPropertyChange) {
+        super(recreateElementsOnPropertyChange);
         this._name = name;
         this._parseManifest(manifest);
     }

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

@@ -32,6 +32,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     canvasOffset: IPoint;
     canvas: HTMLElement;
     additionalStyles: CSSStyleSheet[];
+    ignoreEvent(event: Event): any;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;

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

@@ -63,6 +63,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     extensionManager: IExtensionManager;
     private _pointerextensions;
     private _lastCopiedPrimaryItem;
+    private _ignoreEvent;
     constructor();
     get designerWidth(): string;
     set designerWidth(value: string);
@@ -74,6 +75,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set additionalStyles(value: CSSStyleSheet[]);
     get additionalStyles(): CSSStyleSheet[];
     private applyAllStyles;
+    ignoreEvent(event: Event): void;
     executeCommand(command: IUiCommand): Promise<void>;
     disableBackgroud(): void;
     enableBackground(): void;

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

@@ -275,6 +275,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     extensionManager;
     _pointerextensions;
     _lastCopiedPrimaryItem;
+    _ignoreEvent;
     constructor() {
         super();
         this._restoreCachedInititalValues();
@@ -342,6 +343,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this._canvasShadowRoot.adoptedStyleSheets = styles;
     }
+    ignoreEvent(event) {
+        this._ignoreEvent = event;
+    }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
         const modelCommandService = this.serviceContainer.modelCommandService;
@@ -1026,6 +1030,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     _pointerEventHandler(event, forceElement = null) {
+        if (this._ignoreEvent === event)
+            return;
         if (!this.serviceContainer)
             return;
         if (this._touchGestureHelper.multitouchEventActive)

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -47,7 +47,11 @@ export class EditTextExtension extends AbstractExtension {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const elements = EditTextExtension.template.content.cloneNode(true);
         FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
-        elements.querySelectorAll('button').forEach(x => x.onpointerdown = () => this._formatSelection(x.dataset['command'], x.dataset['commandParameter']));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+            this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
+        });
+        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
         elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
         //Button overlay
         const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",