@node-projects/web-component-designer 0.1.151 → 0.1.153

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/PropertyGroupsService.d.ts

@@ -20,10 +20,18 @@ export declare class PropertyGroupsService implements IPropertyGroupsService {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _grid: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     protected _flexChild: {
         name: string;
         propertiesService: IPropertiesService;
     }[];
+    protected _flex: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     getPropertygroups(designItems: IDesignItem[]): {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -11,8 +11,6 @@ export class PropertyGroupsService {
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
     ];
     _pgList = [
         { name: 'properties', propertiesService: null },
@@ -22,8 +20,6 @@ export class PropertyGroupsService {
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
     ];
     _svgPgList = [
         { name: 'properties', propertiesService: null },
@@ -38,28 +34,46 @@ export class PropertyGroupsService {
     _gridChild = [
         { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
     ];
+    _grid = [
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
     _flexChild = [
         { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
     ];
+    _flex = [
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+    ];
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)
             return [];
         if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
             return [];
-        if (designItems[0].isRootItem)
-            return this._rootPgList;
+        if (designItems[0].isRootItem) {
+            const style = designItems[0].getComputedStyle();
+            let lst = this._rootPgList;
+            if (style.display.includes('grid'))
+                lst = [...lst, ...this._grid];
+            else if (style.display.includes('flex'))
+                lst = [...lst, ...this._flex];
+            return lst;
+        }
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
             lst = this._svgPgList;
+        const style = designItems[0].getComputedStyle();
+        if (style.display.includes('grid'))
+            lst = [...lst, ...this._grid];
+        else if (style.display.includes('flex'))
+            lst = [...lst, ...this._flex];
         if (designItems[0].parent) {
             const parentStyle = designItems[0].parent.getComputedStyle();
             if (parentStyle.display.includes('grid'))
-                lst = [...lst, this._gridChild[0]];
+                lst = [...lst, ...this._gridChild];
             else if (parentStyle.display.includes('flex'))
-                lst = [...lst, this._flexChild[0]];
+                lst = [...lst, ...this._flexChild];
         }
-        return lst; //.filter(x => x.propertiesService.isHandledElement(designItems[0]));
+        return lst;
     }
 }

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/CommonPropertiesService.js

@@ -8,11 +8,6 @@ export class CommonPropertiesService extends AbstractPropertiesService {
     //@ts-ignore
     commonProperties = [
         {
-            name: "id",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
             name: "class",
             type: "string",
             service: this,

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/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/propertyGrid/PropertyGrid.js

@@ -88,6 +88,15 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                 if (lst.createElements(items[0]))
                     visibleDict.add(p.name);
             }
+            let parentEl = this._designerTabControl;
+            for (const v of visibleDict) {
+                let el = this._propertyGridPropertyListsDict[v];
+                if (parentEl === this._designerTabControl)
+                    parentEl.insertAdjacentElement('afterbegin', el);
+                else
+                    parentEl.insertAdjacentElement('afterend', el);
+                parentEl = el;
+            }
             for (let p of this._propertyGridPropertyLists) {
                 if (visibleDict.has(p.title))
                     p.style.display = 'block';

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.151",
+  "version": "0.1.153",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",