@node-projects/web-component-designer 0.0.155 → 0.0.157

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -1,5 +1,5 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {

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

@@ -1,7 +1,7 @@
-import { PropertyGridPropertyList } from './PropertyGridPropertyList';
-import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
+import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
 export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.d.ts

@@ -1,8 +1,8 @@
-import { IProperty } from '../../services/propertiesService/IProperty';
-import { ServiceContainer } from '../../services/ServiceContainer';
+import { IProperty } from '../../services/propertiesService/IProperty.js';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignItem } from '../../item/IDesignItem';
-import { IPropertiesService } from '../../services/propertiesService/IPropertiesService';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
 export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     private _div;
     private _propertyMap;

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

@@ -1,8 +1,8 @@
 import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
-import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
-import { ValueType } from '../../services/propertiesService/ValueType';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
-import { PropertyType } from '../../services/propertiesService/PropertyType';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
+import { ValueType } from '../../services/propertiesService/ValueType.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+import { PropertyType } from '../../services/propertiesService/PropertyType.js';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _div;
     _propertyMap = new Map();
@@ -143,11 +143,29 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                                 this._div.appendChild(label);
                             }
                             else {
-                                let label = document.createElement("label");
-                                label.htmlFor = p.name;
-                                label.textContent = p.name;
-                                label.title = p.name;
-                                this._div.appendChild(label);
+                                if (!p.renamable) {
+                                    let label = document.createElement("label");
+                                    label.htmlFor = p.name;
+                                    label.textContent = p.name;
+                                    label.title = p.name;
+                                    this._div.appendChild(label);
+                                }
+                                else {
+                                    let label = document.createElement("input");
+                                    let input = editor.element;
+                                    label.value = p.name;
+                                    label.onkeyup = 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);
+                                            p.name = label.value;
+                                            p.service.setValue(this._designItems, p, input.value);
+                                            pg.commit();
+                                            this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                                        }
+                                    };
+                                    this._div.appendChild(label);
+                                }
                             }
                             editor.element.id = p.name;
                             this._div.appendChild(editor.element);
@@ -160,7 +178,12 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     openContextMenu(event, property) {
         const ctxMenu = [
-            { title: 'clear', action: (e) => property.service.clearValue(this._designItems, property) },
+            {
+                title: 'clear', action: (e) => {
+                    property.service.clearValue(this._designItems, property);
+                    this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                }
+            },
         ];
         if (this._serviceContainer.config.openBindingsEditor) {
             ctxMenu.push(...[

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -1,6 +1,6 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;

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

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
-import { DesignItem } from '../../item/DesignItem';
+import { DesignItem } from '../../item/DesignItem.js';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {

package/dist/elements/widgets/treeView/ITreeView.d.ts

@@ -1,5 +1,5 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { ISelectionChangedEvent } from "../../services/selectionService/ISelectionChangedEvent";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
 export interface ITreeView {
     createTree(rootItem: IDesignItem): any;
     selectionChanged(event: ISelectionChangedEvent): any;

package/dist/elements/widgets/treeView/treeView.d.ts

@@ -1,7 +1,7 @@
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
-import { IDesignItem } from '../../item/IDesignItem';
-import { ITreeView } from './ITreeView';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ITreeView } from './ITreeView.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class TreeView extends BaseCustomWebComponentLazyAppend implements ITreeView {
     private _items;

package/dist/elements/widgets/treeView/treeView.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { DesignItem } from '../../item/DesignItem';
+import { DesignItem } from '../../item/DesignItem.js';
 export class TreeView extends BaseCustomWebComponentLazyAppend {
     _items;
     _index;

package/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -1,9 +1,9 @@
 import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { ITreeView } from './ITreeView';
-import { IDesignItem } from '../../item/IDesignItem';
-import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
+import { ITreeView } from './ITreeView.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
     private _treeDiv;
     private _tree;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -1,9 +1,9 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { NodeType } from '../../item/NodeType';
-import { assetsPath } from '../../../Constants';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
-import { switchContainer } from '../../helper/SwitchContainerHelper';
-import { DomConverter } from '../designerView/DomConverter';
+import { NodeType } from '../../item/NodeType.js';
+import { assetsPath } from '../../../Constants.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+import { switchContainer } from '../../helper/SwitchContainerHelper.js';
+import { DomConverter } from '../designerView/DomConverter.js';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;

package/dist/index.d.ts

@@ -67,7 +67,7 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
-export type { IPropertyGroupsService } from "./elements/services/propertiesService/IPropertyGroupsService";
+export type { IPropertyGroupsService } from './elements/services/propertiesService/IPropertyGroupsService.js';
 export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
@@ -107,7 +107,6 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
-export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -74,7 +74,6 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
-export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";

package/dist/interfaces/ICommandHandler.d.ts

@@ -1,4 +1,4 @@
-import { CommandType } from "../commandHandling/CommandType";
+import { CommandType } from '../commandHandling/CommandType.js';
 export interface ICommandHandler {
     executeCommand(type: CommandType, parameter: any): Promise<void>;
     canExecuteCommand(type: CommandType, parameter: any): boolean;

package/fixesimport.js

@@ -0,0 +1,98 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+// https://gist.github.com/lovasoa/8691344
+async function* walk(dir) {
+	for await (const d of await fs.promises.opendir(dir)) {
+		const entry = path.join(dir, d.name);
+		if (d.isDirectory()) {
+			yield* walk(entry);
+		} else if (d.isFile()) {
+			yield entry;
+		}
+	}
+}
+
+function resolveImportPath(sourceFile, importPath, options) {
+	const sourceFileAbs                        = path.resolve(process.cwd(), sourceFile);
+	const root                                 = path.dirname(sourceFileAbs);
+	const {moduleFilter = defaultModuleFilter} = options;
+
+	if (moduleFilter(importPath)) {
+		const importPathAbs = path.resolve(root, importPath);
+		let possiblePath    = [
+			path.resolve(importPathAbs, './index.ts'),
+			path.resolve(importPathAbs, './index.js'),
+			importPathAbs + '.ts',
+			importPathAbs + '.js',
+		];
+
+		if (possiblePath.length) {
+			for (let i = 0; i < possiblePath.length; i++) {
+				let entry = possiblePath[i];
+				if (fs.existsSync(entry)) {
+					const resolved = path.relative(root, entry.replace(/\.ts$/, '.js'));
+
+					if (!resolved.startsWith('.')) {
+						return './' + resolved;
+					}
+
+					return resolved;
+				}
+			}
+		}
+	}
+
+	return null;
+}
+
+function replace(filePath, outFilePath, options) {
+	const code    = fs.readFileSync(filePath).toString();
+	const newCode = code.replace(
+		/(import|export) (.+?) from ('[^\n']+'|"[^\n"]+");/gs,
+		function (found, action, imported, from) {
+			const importPath   = from.slice(1, -1);
+			const resolvedPath = resolveImportPath(filePath, importPath, options);
+
+			if (resolvedPath) {
+				console.log('\t', importPath, resolvedPath);
+				return `${action} ${imported} from '${resolvedPath.replaceAll('\\','/')}';`;
+			}
+
+			return found;
+		});
+
+	if (code !== newCode) {
+		fs.writeFileSync(outFilePath, newCode);
+	}
+}
+
+// Then, use it with a simple async for loop
+async function run(srcDir, options = defaultOptions) {
+	const {
+			  sourceFileFilter = defaultSourceFileFilter,
+		  } = options;
+
+	for await (const entry of walk(srcDir)) {
+		if (sourceFileFilter(entry)) {
+			console.log(entry);
+			replace(entry, entry, options);
+		}
+	}
+}
+
+const defaultSourceFileFilter = function (sourceFilePath) {
+	return /\.(js|ts)$/.test(sourceFilePath) && !/node_modules/.test(sourceFilePath);
+};
+
+const defaultModuleFilter = function (importedModule) {
+	return !path.isAbsolute(importedModule) && !importedModule.startsWith('@') && !importedModule.endsWith('.js');
+};
+
+const defaultOptions      = {
+	sourceFileFilter: defaultSourceFileFilter,
+	moduleFilter    : defaultModuleFilter,
+};
+
+
+await run('./src', defaultOptions);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,8 +13,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.3",
-    "@types/node": "^18.11.9",
+    "@node-projects/base-custom-webcomponent": "^0.10.5",
+    "@types/node": "^18.11.13",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -24,7 +24,7 @@
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.13.1",
+    "ace-builds": "^1.13.2",
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
@@ -33,7 +33,7 @@
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {