@node-projects/web-component-designer 0.1.28 → 0.1.30

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -661,7 +661,26 @@
     "system": {},
     "tabSize": {},
     "tableLayout": {},
-    "textAlign": {},
+    "textAlign": {
+        "type": "list",
+        "values": [
+            "start",
+            "end",
+            "left",
+            "right",
+            "center",
+            "justify",
+            "justify-all",
+            "match-parent",
+            "\".\"",
+            "\".\" center",
+            "inherit",
+            "initial",
+            "revert",
+            "revert-layer",
+            "unset"
+        ]
+    },
     "textAlignLast": {},
     "textAnchor": {},
     "textCombineUpright": {},

package/dist/elements/services/refactorService/BindingsRefactorService copy.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IRefactoring } from "./IRefactoring.js";
+export declare class BindingsRefactorService {
+    getRefactorings(designItems: IDesignItem[]): IRefactoring[];
+    refactor(refactoring: IRefactoring, oldValue: string, newValue: string): void;
+}

package/dist/elements/services/refactorService/BindingsRefactorService copy.js

@@ -0,0 +1,21 @@
+export class BindingsRefactorService {
+    getRefactorings(designItems) {
+        let refactorings = [];
+        for (let d of designItems) {
+            let bindings = d.serviceContainer.bindingService.getBindings(d);
+            if (bindings) {
+                for (let b of bindings) {
+                    for (let s of b.bindableObjectNames) {
+                        refactorings.push({ service: this, name: s, itemType: 'bindableObject', designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName });
+                    }
+                }
+            }
+        }
+        return refactorings;
+    }
+    refactor(refactoring, oldValue, newValue) {
+        let binding = refactoring.sourceObject;
+        binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == oldValue ? newValue : x);
+        refactoring.designItem.serviceContainer.bindingService.setBinding(refactoring.designItem, binding);
+    }
+}

package/dist/elements/services/refactorService/IRefactoring.d.ts

@@ -6,7 +6,7 @@ export interface IRefactoring {
     name: string;
     itemType: string;
     designItem: IDesignItem;
-    type: 'binding' | 'script';
+    type: 'binding' | 'script' | 'content' | 'attribute';
     display?: string;
     sourceObject: any;
     target?: BindingTarget;

package/dist/elements/services/refactorService/TextRefactorService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IRefactoring } from "./IRefactoring.js";
+export declare class TextRefactorService {
+    getRefactorings(designItems: IDesignItem[]): IRefactoring[];
+    refactor(refactoring: IRefactoring, oldValue: string, newValue: string): void;
+}

package/dist/elements/services/refactorService/TextRefactorService.js

@@ -0,0 +1,29 @@
+export class TextRefactorService {
+    getRefactorings(designItems) {
+        let refactorings = [];
+        for (let d of designItems) {
+            if (d.element instanceof HTMLInputElement || d.element instanceof HTMLTextAreaElement) {
+                if (d.element.value)
+                    refactorings.push({ service: this, name: d.element.value, itemType: 'text', designItem: d, type: 'attribute', sourceObject: d, display: 'attribute' + '/' + 'value' });
+            }
+            if (d.childCount > 0 && d.element.textContent) {
+                let onlyTextNodes = true;
+                for (const n of d.element.childNodes)
+                    if (n.nodeType != 3) {
+                        onlyTextNodes = false;
+                    }
+                if (onlyTextNodes)
+                    refactorings.push({ service: this, name: d.element.textContent, itemType: 'text', designItem: d, type: 'content', sourceObject: d, display: 'textContent' });
+            }
+        }
+        return refactorings;
+    }
+    refactor(refactoring, oldValue, newValue) {
+        if (refactoring.type == 'attribute') {
+            refactoring.designItem.setAttribute('value', newValue);
+        }
+        else if (refactoring.type == 'content') {
+            refactoring.designItem.content = newValue;
+        }
+    }
+}

package/dist/elements/widgets/refactorView/refactor-view.d.ts

@@ -10,11 +10,15 @@ export declare class RefactorView extends BaseCustomWebComponentConstructorAppen
     private _instanceServiceContainer;
     private _selectionChangedHandler;
     private _selectedItems;
+    searchText: string;
+    replaceText: string;
     refactorings: Map<string, IRefactoring[]>;
     ready(): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
     get selectedItems(): IDesignItem[];
     set selectedItems(items: IDesignItem[]);
+    replace(): void;
     _refactor(refactoring: [string, IRefactoring[]], event: KeyboardEvent): void;
+    applyRefactoring(refactoring: [string, IRefactoring[]], newValue: string): void;
     updateRefactorlist(designItems: IDesignItem[]): void;
 }

package/dist/elements/widgets/refactorView/refactor-view.js

@@ -2,10 +2,18 @@ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projec
 export class RefactorView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <div id="root">
+      <div class="search">
+        <span>search</span>
+        <input style="flex-grow: 1; min-width: 0" value="{{this.searchText}}">
+        <span>replace</span>
+        <input style="flex-grow: 1; min-width: 0"value="{{this.replaceText}}">
+        <button @click="[[this.replace()]]" style="grid-column: 2;">replace</button>
+      </div>
+      <hr>
       <template repeat:item="[[this.refactorings]]">
         <details open>
           <summary>
-              name:<input value="[[item[0]]]" @keydown="[[this._refactor(item, event)]]" style="flex-grow: 1; min-width: 0">
+              name:<input value="[[item[1][0].name]]" @keydown="[[this._refactor(item, event)]]" style="flex-grow: 1; min-width: 0">
           </summary>
           <ul>
             <template repeat:reft="[[item[1]]]">
@@ -25,6 +33,16 @@ export class RefactorView extends BaseCustomWebComponentConstructorAppend {
         overflow: hidden;
     }
 
+    .search {
+      display: grid;
+      grid-template-columns: 40px 1fr;
+      align-items: center;
+    }
+
+    span {
+      font-size: 10px;
+    }
+
     summary {
       cursor: pointer;
       font-size: 10px;
@@ -51,6 +69,8 @@ export class RefactorView extends BaseCustomWebComponentConstructorAppend {
     _instanceServiceContainer;
     _selectionChangedHandler;
     _selectedItems;
+    searchText = "(.*)";
+    replaceText = "$1";
     refactorings = new Map();
     ;
     ready() {
@@ -73,13 +93,36 @@ export class RefactorView extends BaseCustomWebComponentConstructorAppend {
             this.updateRefactorlist(this._selectedItems);
         }
     }
+    replace() {
+        let grp = null;
+        for (let r of this.refactorings) {
+            let n = r[1][0].name;
+            const regex = new RegExp(this.searchText);
+            const found = n.match(regex);
+            if (found) {
+                if (!grp)
+                    grp = r[1][0].designItem.openGroup('refactor with regex ' + this.searchText + " -> " + this.replaceText);
+                const newText = n.replace(regex, this.replaceText);
+                if (newText != n) {
+                    this.applyRefactoring(r, newText);
+                }
+            }
+        }
+        if (!grp)
+            grp.commit();
+    }
     _refactor(refactoring, event) {
         const ip = event.target;
         if (event.key == 'Enter') {
-            for (let r of refactoring[1]) {
-                r.service.refactor(r, r.name, ip.value);
-            }
+            this.applyRefactoring(refactoring, ip.value);
+        }
+    }
+    applyRefactoring(refactoring, newValue) {
+        const grp = refactoring[1][0].designItem.openGroup('refactor ' + refactoring[1][0].name + ' to ' + newValue);
+        for (let r of refactoring[1]) {
+            r.service.refactor(r, r.name, newValue);
         }
+        grp.commit();
     }
     updateRefactorlist(designItems) {
         this.refactorings.clear();
@@ -91,11 +134,12 @@ export class RefactorView extends BaseCustomWebComponentConstructorAppend {
                 refactorings.push(...rfs);
             }
             //Group refactorings by name
+            //TODO: group also by itemType, cause different item types (for example screen and signal name) could have the same string
             for (const r of refactorings) {
-                let thisList = this.refactorings.get(r.name);
+                let thisList = this.refactorings.get(r.itemType + '|' + r.name);
                 if (thisList === undefined) {
                     thisList = [];
-                    this.refactorings.set(r.name, thisList);
+                    this.refactorings.set(r.itemType + '|' + r.name, thisList);
                 }
                 thisList.push(r);
             }

package/dist/index.d.ts

@@ -121,6 +121,7 @@ export * from "./elements/services/propertiesService/services/UnkownElementsProp
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/refactorService/BindingsRefactorService.js";
+export * from "./elements/services/refactorService/TextRefactorService.js";
 export type { IRefactorService } from "./elements/services/refactorService/IRefactorService.js";
 export type { IRefactoring } from "./elements/services/refactorService/IRefactoring.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";

package/dist/index.js

@@ -81,6 +81,7 @@ export * from "./elements/services/propertiesService/services/UnkownElementsProp
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/refactorService/BindingsRefactorService.js";
+export * from "./elements/services/refactorService/TextRefactorService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/stylesheetService/AbstractStylesheetService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";

package/package.json

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