@node-projects/web-component-designer 0.1.24 → 0.1.26

package/dist/elements/services/ServiceContainer.d.ts

@@ -44,6 +44,7 @@ import { IDesignItemService } from './designItemService/IDesignItemService.js';
 import { IEventsService } from './eventsService/IEventsService.js';
 import { IPropertyGridDragDropService } from './dragDropService/IPropertyGridDragDropService.js';
 import { IConfigUiService } from './configUiService/IConfigUiService.js';
+import { IRefactorService } from './refactorService/IRefactorService.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "attachedPropertyService": IPropertiesService;
@@ -70,6 +71,7 @@ interface ServiceNameMap {
     "eventsService": IEventsService;
     "propertyGridDragDropService": IPropertyGridDragDropService;
     "configUiService": IConfigUiService;
+    "refactorService": IRefactorService;
     "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
     "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
     "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
@@ -118,5 +120,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get demoProviderService(): IDemoProviderService;
     get designItemService(): IDesignItemService;
     get configUiServices(): IConfigUiService[];
+    get refactorServices(): IRefactorService[];
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -100,4 +100,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get configUiServices() {
         return this.getServices('configUiService');
     }
+    get refactorServices() {
+        return this.getServices('refactorService');
+    }
 }

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -15,30 +15,31 @@ export class BaseCustomWebcomponentBindingsService {
                 if (a[0].startsWith('css:')) {
                     bnd.targetName = name.substring(4);
                     bnd.target = BindingTarget.css;
-                    bnd.expression = value.substring(2, value.length - 4);
+                    bnd.expression = value.substring(2, value.length - 2);
                 }
                 else if (a[0].startsWith('class:')) {
                     bnd.targetName = name.substring(4);
                     bnd.target = BindingTarget.class;
-                    bnd.expression = value.substring(2, value.length - 4);
+                    bnd.expression = value.substring(2, value.length - 2);
                 }
                 else if (a[0].startsWith('$')) {
                     bnd.targetName = name.substring(1);
                     bnd.target = BindingTarget.attribute;
-                    bnd.expression = value.substring(2, value.length - 4);
+                    bnd.expression = value.substring(2, value.length - 2);
                 }
                 else if (a[0].startsWith('@')) {
                     bnd.targetName = name.substring(1);
                     bnd.target = BindingTarget.event;
-                    bnd.expression = value.substring(2, value.length - 4);
+                    bnd.expression = value.substring(2, value.length - 2);
                 }
                 else {
                     bnd.targetName = PropertiesHelper.dashToCamelCase(name);
                     bnd.target = BindingTarget.property;
-                    bnd.expression = value.substring(2, value.length - 4);
+                    bnd.expression = value.substring(2, value.length - 2);
                 }
                 bnd.type = BaseCustomWebcomponentBindingsService.type;
                 bnd.targetName = bnd.targetName;
+                bnd.bindableObjectNames = [value.substring(2, value.length - 2)];
                 bindings.push(bnd);
             }
         }

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -17,7 +17,6 @@ export declare class WebcomponentManifestParserService extends AbstractPropertie
     private _importPrefix;
     constructor(name: string, fileOrObject: string | object, importPrefix?: string);
     private _parseManifest;
-    private manifestClassPropertyTypeToEditorPropertyType;
     getElements(): Promise<IElementDefinition[]>;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -3,6 +3,7 @@ import { RefreshMode } from '../propertiesService/IPropertiesService.js';
 import { PropertyType } from '../propertiesService/PropertyType.js';
 import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
 import { removeLeading, removeTrailing } from '../../helper/Helper.js';
+import { WebcomponentManifestPropertiesService } from '../propertiesService/services/WebcomponentManifestPropertiesService.js';
 export class WebcomponentManifestParserService extends AbstractPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;
@@ -59,7 +60,7 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
                             let pType = PropertyType.property;
                             if (declaration.attributes)
                                 pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
-                            const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text, d.type?.editor);
+                            const p = WebcomponentManifestPropertiesService.manifestClassPropertyTypeToEditorPropertyType(d.type?.text, d.type?.editor);
                             properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
                         }
                     }
@@ -73,25 +74,6 @@ export class WebcomponentManifestParserService extends AbstractPropertiesService
             }
         }
     }
-    manifestClassPropertyTypeToEditorPropertyType(type, editor) {
-        if (editor) {
-            if (editor.toLowerCase() === 'color')
-                return ['color'];
-        }
-        if (type) {
-            if (type.toLowerCase() === 'boolean')
-                return ['boolean'];
-            if (type.toLowerCase() === 'number')
-                return ['number'];
-            if (type.toLowerCase() === 'string')
-                return ['string'];
-            if (type.startsWith("'") && type.includes("|")) {
-                const values = type.split("|").map(x => x.trim()).map(x => x.substring(1, x.length - 1));
-                return ['list', values];
-            }
-        }
-        return [type];
-    }
     async getElements() {
         if (this._packageData)
             return Promise.resolve(this._elementList);

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

@@ -11,7 +11,7 @@ export declare class WebcomponentManifestPropertiesService extends AbstractPrope
     private _propertiesList;
     constructor(name: string, manifest: any);
     private _parseManifest;
-    private manifestClassPropertyTypeToEditorPropertyType;
+    static manifestClassPropertyTypeToEditorPropertyType(type: string, editor: string): [type: string, values?: string[]];
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -33,7 +33,7 @@ export class WebcomponentManifestPropertiesService extends AbstractPropertiesSer
                                     let pType = PropertyType.property;
                                     if (declaration.attributes)
                                         pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
-                                    const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
+                                    const p = WebcomponentManifestPropertiesService.manifestClassPropertyTypeToEditorPropertyType(d.type?.text, d.type?.editor);
                                     if (d.name)
                                         properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
                                 }
@@ -48,7 +48,11 @@ export class WebcomponentManifestPropertiesService extends AbstractPropertiesSer
             }
         }
     }
-    manifestClassPropertyTypeToEditorPropertyType(type) {
+    static manifestClassPropertyTypeToEditorPropertyType(type, editor) {
+        if (editor) {
+            if (editor.toLowerCase() === 'color')
+                return ['color'];
+        }
         if (type) {
             if (type.toLowerCase() === 'boolean')
                 return ['boolean'];

package/dist/elements/services/refactorService/BindingsRefactorService.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.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, 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/IRefactorService.d.ts

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IRefactorService } from "./IRefactorService.js";
+export interface IRefactoring {
+    service: IRefactorService;
+    name: string;
+    designItem: IDesignItem;
+    type: 'binding' | 'script';
+    display?: string;
+    sourceObject: any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IRefactoring } from "./IRefactoring.js";
+export declare class RefactorService {
+    getRefactorings(designItems: IDesignItem[]): Record<string, IRefactoring[]>;
+}

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

@@ -0,0 +1,17 @@
+export class RefactorService {
+    getRefactorings(designItems) {
+        let refactorings = {};
+        for (let d of designItems) {
+            let bindings = d.serviceContainer.bindingService.getBindings(d);
+            for (let b of bindings) {
+                for (let s of b.bindableObjectNames) {
+                    if (!refactorings[s]) {
+                        refactorings[s] = [];
+                    }
+                    refactorings[s].push({ name: s, designItem: d, type: 'binding', sourceObject: b });
+                }
+            }
+        }
+        return refactorings;
+    }
+}

package/dist/elements/widgets/refactorView/code-view-simple.d.ts

@@ -0,0 +1,23 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IActivateable } from '../../../interfaces/IActivateable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+export declare class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    dispose(): void;
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    onTextChanged: TypedEvent<string>;
+    private _text;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/refactorView/code-view-simple.js

@@ -0,0 +1,55 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
+    dispose() {
+    }
+    canvasElement;
+    elementsToPackages;
+    onTextChanged = new TypedEvent();
+    _text;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    textarea {
+      height: 100%;
+      width: 100%;
+      resize: none;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+    `;
+    static template = html `
+      <div id="container" style="width: 100%; height: 100%; position: absolute;">
+        <textarea id="text"></textarea>
+      </div>
+  `;
+    executeCommand(command) {
+    }
+    canExecuteCommand(command) {
+        return false;
+    }
+    async ready() {
+        this._text = this._getDomElement('text');
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._text.focus();
+        });
+    }
+    activated() {
+    }
+    update(code) {
+        this._text.value = code;
+    }
+    getText() {
+        return this._text.value;
+    }
+    setSelection(position) {
+        this._text.setSelectionRange(position.start, position.start + position.length);
+    }
+}
+customElements.define('node-projects-code-view-simple', CodeViewSimple);

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

@@ -0,0 +1,20 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IRefactoring } from '../../services/refactorService/IRefactoring.js';
+export declare class RefactorView extends BaseCustomWebComponentConstructorAppend {
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    static readonly is = "node-projects-refactor-view";
+    static readonly properties: {};
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _selectedItems;
+    refactorings: Map<string, IRefactoring[]>;
+    ready(): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+    _refactor(refactoring: [string, IRefactoring[]], event: KeyboardEvent): void;
+    updateRefactorlist(designItems: IDesignItem[]): void;
+}

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

@@ -0,0 +1,99 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class RefactorView extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+    <div id="root">
+      <template repeat:item="[[this.refactorings]]">
+        <details>
+          <summary style="display: flex;">
+              name:<input value="[[item[0]]]" @keydown="[[this._refactor(item, event)]]" style="flex-grow: 1; min-width: 0">
+          </summary>
+          <ul>
+            <template repeat:reft="[[item[1]]]">
+              <li>[[reft.type]] - [[reft.display]]</li>
+            </template>
+          </ul>
+        </details>
+      </template>
+    </div>`;
+    static style = css `
+    :host {
+        box-sizing: border-box;      
+        font-family: monospace;  
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        overflow: hidden;
+    }
+    
+    ul {
+      margin: 4px;
+      padding-left: 30px;
+      font-size: 10px;
+    }
+    
+    #root {
+      padding: 5px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      overflow-y: auto;
+      height: calc(100% - 10px);
+    }`;
+    static is = 'node-projects-refactor-view';
+    static properties = {};
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _selectedItems;
+    refactorings = new Map();
+    ;
+    ready() {
+        this._bindingsParse();
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectedItems = e.selectedElements;
+        });
+        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+    }
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(items) {
+        if (this._selectedItems != items) {
+            this._selectedItems = items;
+            this.updateRefactorlist(this._selectedItems);
+        }
+    }
+    _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);
+            }
+        }
+    }
+    updateRefactorlist(designItems) {
+        this.refactorings.clear();
+        if (designItems && designItems.length) {
+            let refactorings = [];
+            const serviceContainer = designItems[0].serviceContainer;
+            for (let s of serviceContainer.refactorServices) {
+                let rfs = s.getRefactorings(designItems);
+                refactorings.push(...rfs);
+            }
+            //Group refactorings by name
+            for (const r of refactorings) {
+                let thisList = this.refactorings.get(r.name);
+                if (thisList === undefined) {
+                    thisList = [];
+                    this.refactorings.set(r.name, thisList);
+                }
+                thisList.push(r);
+            }
+        }
+        this._bindingsRefresh();
+    }
+}
+customElements.define(RefactorView.is, RefactorView);

package/dist/index.d.ts

@@ -120,6 +120,9 @@ export * from "./elements/services/propertiesService/services/CssCustomPropertie
 export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
+export * from "./elements/services/refactorService/BindingsRefactorService.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";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
@@ -246,6 +249,7 @@ export * from "./elements/widgets/designerView/extensions/pointerExtensions/Curs
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export type { IMiniatureView } from "./elements/widgets/miniatureView/IMiniatureView.js";
 export * from "./elements/widgets/debugView/debug-view.js";
+export * from "./elements/widgets/refactorView/refactor-view.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/dist/index.js

@@ -80,6 +80,7 @@ export * from "./elements/services/propertiesService/services/CssCustomPropertie
 export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 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/selectionService/SelectionService.js";
 export * from "./elements/services/stylesheetService/AbstractStylesheetService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
@@ -186,6 +187,7 @@ export * from "./elements/widgets/designerView/extensions/pointerExtensions/Abst
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export * from "./elements/widgets/debugView/debug-view.js";
+export * from "./elements/widgets/refactorView/refactor-view.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -12,10 +12,10 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.19.0"
+    "@node-projects/base-custom-webcomponent": ">=0.21.2"
   },
   "devDependencies": {
-    "mdn-data": "^2.1.0"
+    "mdn-data": "^2.3.0"
   },
   "repository": {
     "type": "git",