Proposal: Use Lit framework to improve dynamic creation of html inside the overview

CONTRIBUTING.md

@@ -146,7 +146,7 @@ By participating, you can help improve the project and make it even better :rais
    As the remote branch is already linked
 
 
-8. **Rebase Onto Current Main:** Rebase your feature branch onto the current main branch of the original repo. 
+8. **Rebase Onto Current Main:** Rebase your feature branch onto the current main branch of the original repo.
    This will include any changes that might have been pushed into the main in the meantime and resolve possible conflicts.
    To sync your fork with the original upstream repo, check out [this page](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)
    or follow the steps below. Note that before you can sync your fork with an upstream repo, you must configure a remote that points to the upstream repository in Git.

canvas_editor/editor/templates/editor/editor.html

@@ -13,6 +13,7 @@
       "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/",
       "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.esm.min.js",
       "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
+      "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
       "navbar": "{% static 'js/editor/navbar.mjs' %}",
       "compass": "{% static 'js/editor/compass.mjs' %}",
       "objects": "{% static 'js/editor/objects.mjs' %}",
@@ -28,6 +29,7 @@
       "saveAndLoadHandler": "{% static 'js/editor/saveAndLoadHandler.mjs' %}",
       "bulkObjectCommands": "{% static 'js/commands/bulkObjectCommands.mjs' %}",
       "overview": "{% static 'js/editor/overview.mjs' %}",
+      "object-overview": "{% static 'js/editor/sidebar/objectOverview.mjs' %}",
       "editor": "{% static 'js/editor/editor.mjs' %}",
       "objectManager": "{% static 'js/editor/objectManager.mjs' %}",
       "quickSelector": "{% static 'js/editor/quickSelector.mjs' %}",

canvas_editor/editor/templates/editor/sidebar/itemOverview.html

@@ -1,47 +1,7 @@
-<div class="tab-pane fade"
-     id="overview-tab-pane"
-     role="tabpanel"
-     aria-labelledby="overview-tab"
-     tabindex="0">
-    <div class="accordion w-100" id="accordionOverview">
-        <div class="accordion-item">
-            <h2 class="accordion-header">
-                <button class="accordion-button"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#overviewCollapseOne"
-                        aria-expanded="true"
-                        aria-controls="overviewCollapseOne">Heliostats</button>
-            </h2>
-            <div id="overviewCollapseOne" class="accordion-collapse collapse show">
-                <div class="accordion-body d-flex flex-column gap-2" id="heliostatList"></div>
-            </div>
-        </div>
-        <div class="accordion-item">
-            <h2 class="accordion-header">
-                <button class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#overviewCollapseTwo"
-                        aria-expanded="false"
-                        aria-controls="overviewCollapseTwo">Receivers</button>
-            </h2>
-            <div id="overviewCollapseTwo" class="accordion-collapse collapse">
-                <div class="accordion-body d-flex flex-column gap-2" id="receiverList"></div>
-            </div>
-        </div>
-        <div class="accordion-item">
-            <h2 class="accordion-header">
-                <button class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#overviewCollapseThree"
-                        aria-expanded="false"
-                        aria-controls="overviewCollapseThree">Light Sources</button>
-            </h2>
-            <div id="overviewCollapseThree" class="accordion-collapse collapse">
-                <div class="accordion-body d-flex flex-column gap-2" id="lightsourceList"></div>
-            </div>
-        </div>
-    </div>
-</div>
+<div
+  class="tab-pane fade"
+  id="overview-tab-pane"
+  role="tabpanel"
+  aria-labelledby="overview-tab"
+  tabindex="0"
+></div>

canvas_editor/jsconfig.json

@@ -19,6 +19,7 @@
       "saveAndLoadHandler": ["static/js/editor/saveAndLoadHandler.mjs"],
       "bulkObjectCommands": ["static/js/commands/bulkObjectCommands.mjs"],
       "overview": ["static/js/editor/overview.mjs"],
+      "object-overview": ["static/js/editor/sidebar/objectOverview.mjs"],
       "editor": ["static/js/editor/editor.mjs"],
       "objectManager": ["static/js/editor/objectManager.mjs"],
       "quickSelector": ["static/js/editor/quickSelector.mjs"],

canvas_editor/package.json

@@ -13,7 +13,8 @@
     "eslint": "^9.35.0",
     "eslint-plugin-jsdoc": "^54.0.0",
     "globals": "^15.15.0",
-    "lint-staged": "^16.1.2"
+    "lint-staged": "^16.1.2",
+    "lit": "^3.3.1"
   },
   "lint-staged": {
     "*.{js,mjs}": "npx eslint --config canvas_editor/eslint.config.mjs"

canvas_editor/project_management/migrations/0002_alter_lightsource_distribution_type_and_more.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.2.7 on 2025-11-06 09:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    """Updated the possible length of type fields for the objects."""
+
+    dependencies = [
+        ("project_management", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="lightsource",
+            name="distribution_type",
+            field=models.CharField(default="normal", max_length=50),
+        ),
+        migrations.AlterField(
+            model_name="lightsource",
+            name="light_source_type",
+            field=models.CharField(default="sun", max_length=50),
+        ),
+        migrations.AlterField(
+            model_name="receiver",
+            name="receiver_type",
+            field=models.CharField(default="planar", max_length=50),
+        ),
+    ]

canvas_editor/pyproject.toml

@@ -91,4 +91,3 @@ convention = "numpy"
 
 [tool.djlint]
 profile = "django"
-

canvas_editor/static/js/editor/editor.mjs

@@ -3,7 +3,6 @@ import { ViewHelper } from "compass";
 import { UndoRedoHandler } from "undoRedoHandler";
 import { SaveAndLoadHandler } from "saveAndLoadHandler";
 import { Navbar } from "navbar";
-import { OverviewHandler } from "overview";
 import { Picker } from "picker";
 import { ProjectSettingsManager } from "projectSettingsManager";
 import { ObjectManager } from "objectManager";
@@ -28,6 +27,7 @@ import {
   skyboxPyPath,
   skyboxPzPath,
 } from "path_dict";
+import { Overview, OverviewController } from "object-overview";
 
 /**
  * Represents the main editor class.
@@ -41,7 +41,7 @@ export class Editor {
   #saveAndLoadHandler;
   #navbar; // eslint-disable-line no-unused-private-class-members -- for structural consistency, not used yet
   #picker;
-  #overview; // eslint-disable-line no-unused-private-class-members -- for structural consistency, not used yet
+  #overview;
   #modeSelector; // eslint-disable-line no-unused-private-class-members -- for structural consistency, not used yet
   #projectSettingManager;
   #objectManager;
@@ -98,7 +98,11 @@ export class Editor {
       this.#selectionBox,
       this.#selectableGroup,
     );
-    this.#overview = new OverviewHandler(this.#picker);
+
+    this.#overview = new Overview(this.#picker);
+    document.getElementById("overview-tab-pane").append(this.#overview);
+    new OverviewController(this.#overview);
+
     this.#projectSettingManager = new ProjectSettingsManager();
     this.#projectSettingManager.initialize();
     this.#objectManager = new ObjectManager(