@node-projects/web-component-designer 0.1.92 → 0.1.94

package/dist/elements/helper/Helper.d.ts

@@ -6,3 +6,4 @@ export declare function dataURItoBlob(dataURI: any): Blob;
 export declare function pointInRect(point: IPoint, rect: IRect): boolean;
 export declare function removeTrailing(text: string, char: string): string;
 export declare function removeLeading(text: string, char: string): string;
+export declare function requestAnimationFramePromise(): Promise<unknown>;

package/dist/elements/helper/Helper.js

@@ -34,3 +34,6 @@ export function removeLeading(text, char) {
         return text.substring(1);
     return text;
 }
+export function requestAnimationFramePromise() {
+    return new Promise(resolve => requestAnimationFrame(resolve));
+}

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/package.json

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