@node-projects/web-component-designer 0.1.150 → 0.1.152

package/README.md

@@ -56,6 +56,15 @@ Your index.html should be extended as follows:
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
 
+## Similar Frameworks
+
+| Name                    | Licence  | Edit Source |   |   |
+|-------------------------|----------|-------------|---|---|
+| web-component-designer  | MIT      | yes         |   |   |
+| GrapeJS                 | BSD-3    | yes         |   |   |
+| CraftJS                 | MIT      | no          |   |   |
+
+
 ## Copyright notice
 
 The Library uses Images from the Chrome Dev Tools, see

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

@@ -18,7 +18,7 @@ export interface IPropertiesService extends IService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): any;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): Promise<void>;
     clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): any;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): any;

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.d.ts

@@ -8,7 +8,7 @@ export declare abstract class BasePropertyEditor<T extends HTMLElement> implemen
     designItems: IDesignItem[];
     protected disableChangeNotification: boolean;
     constructor(property: IProperty);
-    protected _valueChanged(newValue: any): void;
+    protected _valueChanged(newValue: any): Promise<void>;
     designItemsChanged(designItems: IDesignItem[]): void;
     abstract refreshValue(valueType: ValueType, value: any): any;
     refreshValueWithoutNotification(valueType: ValueType, value: any): void;

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js

@@ -7,7 +7,7 @@ export class BasePropertyEditor {
     constructor(property) {
         this.property = property;
     }
-    _valueChanged(newValue) {
+    async _valueChanged(newValue) {
         if (!this.disableChangeNotification) {
             if (this.designItems && this.designItems.length) {
                 const cg = this.designItems[0].openGroup("set property: " + this.property.name);
@@ -15,7 +15,7 @@ export class BasePropertyEditor {
                     if (newValue == null)
                         this.property.service.clearValue([d], this.property, 'value');
                     else
-                        this.property.service.setValue([d], this.property, newValue);
+                        await this.property.service.setValue([d], this.property, newValue);
                 }
                 cg.commit();
             }

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

@@ -18,7 +18,7 @@ export declare abstract class AbstractPropertiesService implements IPropertiesSe
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     abstract getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): Promise<void>;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;

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

@@ -23,7 +23,7 @@ export class AbstractPropertiesService {
         else
             return properties.find(x => x.name == name);
     }
-    setValue(designItems, property, value) {
+    async setValue(designItems, property, value) {
         const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value);
         for (let d of designItems) {
             if (!this.isHandledElement(d))
@@ -31,9 +31,10 @@ export class AbstractPropertiesService {
             if (!this.getProperty(d, property.name))
                 continue;
             if (property.propertyType == PropertyType.cssValue) {
-                d.updateStyleInSheetOrLocal(property.name, value);
+                //TODO: use async version here, but then everything needs to be async
+                await d.updateStyleInSheetOrLocalAsync(property.name, value);
                 //unkown css property names do not trigger the mutation observer of property grid, 
-                //fixed by assinging stle again to the attribute
+                //fixed by assinging style again to the attribute
                 d.element.setAttribute('style', d.element.getAttribute('style'));
             }
             else {
@@ -282,11 +283,11 @@ export class AbstractPropertiesService {
             {
                 title: 'edit as text', action: (e, _1, _2, menu) => {
                     menu.close();
-                    setTimeout(() => {
+                    setTimeout(async () => {
                         const oldValue = property.service.getValue(designItems, property);
                         let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
                         if (value && value != oldValue) {
-                            property.service.setValue(designItems, property, value);
+                            await property.service.setValue(designItems, property, value);
                         }
                         designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
                     }, 10);

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

@@ -12,7 +12,7 @@ export declare class AttributesPropertiesService extends AbstractPropertiesServi
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): Promise<void>;
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;

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

@@ -26,7 +26,7 @@ export class AttributesPropertiesService extends AbstractPropertiesService {
         }
         return null;
     }
-    setValue(designItems, property, value) {
+    async setValue(designItems, property, value) {
         const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             d.setAttribute(property.name, value);

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

@@ -15,7 +15,7 @@ export declare class CssCurrentPropertiesService extends AbstractCssPropertiesSe
     setValue(designItems: IDesignItem[], property: (IProperty & {
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
-    }), value: any): void;
+    }), value: any): Promise<void>;
     clearValue(designItems: IDesignItem[], property: IProperty & {
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;

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

@@ -41,7 +41,7 @@ export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
         }));
         return arr;
     }
-    setValue(designItems, property, value) {
+    async setValue(designItems, property, value) {
         // No selector means local style, styleDeclaration is null means new property
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
             // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload

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

@@ -1,3 +1,4 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignContext } from './IDesignContext.js';
 export declare class DesignContext implements IDesignContext {
     imports: string[];
@@ -5,4 +6,5 @@ export declare class DesignContext implements IDesignContext {
     extensionOptions: {
         [key: string]: any;
     };
+    extensionOptionsChanged: TypedEvent<void>;
 }

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

@@ -1,5 +1,7 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class DesignContext {
     imports = [];
     npmPackages = [];
     extensionOptions = {};
+    extensionOptionsChanged = new TypedEvent;
 }

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

@@ -1,7 +1,9 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 export interface IDesignContext {
     imports: string[];
     npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
     };
+    extensionOptionsChanged: TypedEvent<void>;
 }

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

@@ -322,7 +322,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     async parseHTML(html, disableUndo = false) {
         const parserService = this.serviceContainer.htmlParserService;
         if (!html) {
-            this.instanceServiceContainer.undoService.clear();
             this._designerCanvas.overlayLayer.removeAllOverlays();
             DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
             this._designerCanvas.rootDesignItem.clearChildren();

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js

@@ -18,6 +18,12 @@ export class AbstractDesignViewConfigButton {
             btn.appendChild(this.content);
         btn.title = this.tooltp;
         btn.className = 'toolbar-control';
+        designerCanvas.instanceServiceContainer.designContext.extensionOptionsChanged.on(() => {
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        });
         const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
         if (extensionOptions[this.settingName] !== false)
             btn.classList.add('selected');

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

@@ -238,12 +238,12 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         let label = document.createElement("input");
                         let input = editor.element;
                         label.value = p.name;
-                        label.onkeyup = e => {
+                        label.onkeyup = async (e) => {
                             if (e.key == 'Enter' && label.value) {
                                 const pg = this._designItems[0].openGroup("rename property name from '" + p.name + "' to '" + label.value + "'");
                                 p.service.clearValue(this._designItems, p, 'all');
                                 p.name = label.value;
-                                p.service.setValue(this._designItems, p, input.value);
+                                await p.service.setValue(this._designItems, p, input.value);
                                 pg.commit();
                                 this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
                             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.150",
+  "version": "0.1.152",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",