work on svghmi

jogibear9988 · jogibear9988 · commit e789023935a6 · 2025-04-22T14:47:08.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-projects/svghmi.webcomponent",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "a svghmi webcomponent.",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
   },
   "customElements": "custom-elements.json",
   "devDependencies": {
-    "@node-projects/web-component-designer": "^0.1.253",
+    "@node-projects/web-component-designer": "^0.1.254",
     "@web/dev-server": "^0.4.6",
     "typescript": "^5.8.3"
   },
diff --git a/sample/index.html b/sample/index.html
@@ -12,11 +12,11 @@
     <body>
         <node-projects-svghmi src="./sample.svghmi" style="position: absolute; width: 500px; height: 300px;">
         </node-projects-svghmi>
-        <!--<node-projects-svghmi FarbeKreis="0xFF334455" src="./sample.svghmi" style="position: absolute; width: 500px; height: 300px; top: 400px;">
+        <node-projects-svghmi farbe-kreis="0xFF334455" src="./sample.svghmi" style="position: absolute; width: 500px; height: 300px; top: 400px;">
         </node-projects-svghmi>
         <node-projects-svghmi src="./BatteryCharge.svghmi" style="position: absolute; width: 500px; height: 300px; top: 800px;">
         </node-projects-svghmi>
         <node-projects-svghmi src="./RegenerativeBlower_WithBox.svghmi" style="position: absolute; width: 500px; height: 300px; top: 1200px;">
-        </node-projects-svghmi>-->
+        </node-projects-svghmi>
     </body>
 </html>
diff --git a/src/SvgHmi.ts b/src/SvgHmi.ts
@@ -71,7 +71,7 @@ export class SvgHmi extends BaseCustomWebComponentConstructorAppend {
                     continue;
 
                 let name = n.getAttribute('name');
-                let nm = name.toLocaleLowerCase(); //TODO, lowercase Name should be snake cased!
+                let nm = SvgHmi.camelToDashCase(name);
                 let tp = n.getAttribute('type');
                 let d = n.getAttribute('default');
                 this._svgHmiProperties.set(nm, { name: name, type: tp, default: d });
@@ -126,6 +126,10 @@ export class SvgHmi extends BaseCustomWebComponentConstructorAppend {
         }
     }
 
+    public static camelToDashCase(text: string) {
+        return text[0].toLowerCase() + text.substring(1).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+    }
+
     /*private parseValue(value: string, type: string) {
         switch (type) {
             case "HmiColor": {
@@ -135,7 +139,7 @@ export class SvgHmi extends BaseCustomWebComponentConstructorAppend {
 
         return value;
     }*/
-   
+
     protected override _parseAttributesToProperties(noBindings?: boolean): void {
         super._parseAttributesToProperties();
     }
diff --git a/src/designer/SvgHmiPropertiesService.ts b/src/designer/SvgHmiPropertiesService.ts
@@ -1,5 +1,4 @@
-import { IDesignItem, IProperty, IPropertyGroup, PropertyType } from "@node-projects/web-component-designer";
-import { AbstractPolymerLikePropertiesService } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js";
+import { AbstractPolymerLikePropertiesService, IDesignItem, IProperty, IPropertyGroup, PropertyType } from "@node-projects/web-component-designer";
 import { SvgHmi } from "../SvgHmi.js";
 
 export default class AttachedPropertiesService extends AbstractPolymerLikePropertiesService {
