From 555f4232d60138ec1db7ecc17e2e32523dddcc41 Mon Sep 17 00:00:00 2001
From: Martin Vladic <martin.vladic@gmail.com>
Date: Wed, 13 Nov 2024 14:52:49 +0100
Subject: [PATCH] Implemented: [LVGL] Show "Code identifier" in Page and Widget
 properties #633

---
 .../project-editor/features/page/page.tsx     | 29 ++++++++++++++++-
 packages/project-editor/lvgl/widgets/Base.tsx | 31 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/packages/project-editor/features/page/page.tsx b/packages/project-editor/features/page/page.tsx
index 03c995b4..b641bc9f 100644
--- a/packages/project-editor/features/page/page.tsx
+++ b/packages/project-editor/features/page/page.tsx
@@ -31,7 +31,12 @@ import {
     isDashboardProject,
     isLVGLProject
 } from "project-editor/project/project-type-traits";
-import { Project, findStyle } from "project-editor/project/project";
+import {
+    NamingConvention,
+    Project,
+    findStyle,
+    getName
+} from "project-editor/project/project";
 
 import type {
     IResizeHandler,
@@ -212,6 +217,20 @@ export class Page extends Flow {
     _lvglObj: number | undefined;
     _lvglUserWidgetOfPageCopy: LVGLUserWidgetWidget;
 
+    get codeIdentifier() {
+        const codeIdentifier = getName(
+            "",
+            this.name,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.name) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     constructor() {
         super();
 
@@ -296,6 +315,14 @@ export class Page extends Flow {
                 },
                 propertyGridGroup: generalGroup
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: Page) => object.codeIdentifier == undefined
+            },
             {
                 name: "description",
                 type: PropertyType.MultilineText,
diff --git a/packages/project-editor/lvgl/widgets/Base.tsx b/packages/project-editor/lvgl/widgets/Base.tsx
index ba5ab264..8d845391 100644
--- a/packages/project-editor/lvgl/widgets/Base.tsx
+++ b/packages/project-editor/lvgl/widgets/Base.tsx
@@ -36,7 +36,9 @@ import {
     ProjectType,
     findAction,
     findLvglStyle,
-    Project
+    Project,
+    NamingConvention,
+    getName
 } from "project-editor/project/project";
 
 import type {
@@ -527,6 +529,24 @@ export class LVGLWidget extends Widget {
     _xScroll2: number = 0;
     _yScroll2: number = 0;
 
+    get codeIdentifier() {
+        if (!this.identifier) {
+            return undefined;
+        }
+
+        const codeIdentifier = getName(
+            "",
+            this.identifier,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.identifier) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     static classInfo = makeDerivedClassInfo(Widget.classInfo, {
         enabledInComponentPalette: (projectType: ProjectType) =>
             projectType === ProjectType.LVGL,
@@ -550,6 +570,15 @@ export class LVGLWidget extends Widget {
                 propertyGridGroup: generalGroup,
                 disabled: object => object instanceof LVGLScreenWidget // LVGLScreenWidget is using Page name as identifier
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: LVGLWidget) =>
+                    object.codeIdentifier == undefined
+            },
             {
                 name: "left",
                 type: PropertyType.Number,