74 improve code quality of inspector and inspectorComponents (#98)

- Renamed SingleFieldInspectorComponent -> InputFieldInspectorComponent
- Combine and simplify event listeners to render inspector
- Refactor and de-duplicate inspector components

Author: lisannengel

canvas_editor/static/js/editor/inspector.mjs

@@ -1,6 +1,4 @@
 import { Picker } from "picker";
-import { ItemDeletedEvent } from "deleteCommands";
-import { ItemUpdatedEvent } from "updateCommands";
 import { CanvasObject } from "canvasObject";
 
 /**
@@ -24,18 +22,11 @@ export class Inspector {
     this.#inspectorElem = document.getElementById("inspector");
 
     const canvas = document.getElementById("canvas");
-    canvas.addEventListener("itemSelected", () => {
-      this.#render();
-    });
 
-    canvas.addEventListener("itemDeleted", (/** @type {ItemDeletedEvent}*/ event) => {
-      if (this.#objectList.length == 1 && event.detail.item == this.#objectList[0]) {
-        this.#render();
-      }
-    });
+    const rerenderEvents = ["itemSelected", "itemUpdated", "itemDeleted"];
 
-    canvas.addEventListener("itemUpdated", (/** @type {ItemUpdatedEvent} */ event) => {
-      if (this.#objectList.length == 1 && event.detail.item == this.#objectList[0]) this.#render();
+    rerenderEvents.forEach((eventName) => {
+      canvas.addEventListener(eventName, () => this.#render());
     });
 
     this.#render();

canvas_editor/static/js/editor/inspectorComponents.mjs

@@ -5,6 +5,7 @@ import { abstractClassError, methodMustBeImplementedError } from "message_dict";
  * Represents a single component of the inspector
  */
 export class InspectorComponent {
+  #hasBorder = false;
   /**
    * Creates a new inspector component.
    * @throws {Error} if trying to instantiate this abstract class directly
@@ -25,22 +26,63 @@ export class InspectorComponent {
 
   /**
    * Disables the border around the component
-   * @throws {Error} if this method is not implemented in a subclass
    */
   disableBorder() {
-    throw new Error(methodMustBeImplementedError);
+    this.#hasBorder = false;
+  }
+
+  /**
+   * Enables the border around the component
+   */
+  enableBorder() {
+    this.#hasBorder = true;
+  }
+
+  /**
+   * Gets whether the component has a border or not
+   * @returns {boolean} whether the component has a border or not
+   */
+  get hasBorder() {
+    return this.#hasBorder;
+  }
+
+  /**
+   * Creates the wrapper element for the component
+   * @param {string[]} classes the classes to add to the wrapper
+   * @returns {HTMLElement} the created wrapper element
+   */
+  createWrapper(classes) {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add(...classes);
+    if (this.hasBorder) {
+      wrapper.classList.add("border");
+    }
+    return wrapper;
+  }
+
+  /**
+   * Creates the field name element
+   * @param {HTMLElement} wrapper the wrapper to add the field name to
+   * @param {string} fieldNametext the text of the field name
+   * @returns {HTMLElement} the created field name element
+   */
+  createFieldNameElement(wrapper, fieldNametext) {
+    const fieldName = document.createElement("div");
+    fieldName.classList.add("d-flex", "align-items-center", "text-nowrap");
+    fieldName.innerText = fieldNametext + ":";
+    wrapper.appendChild(fieldName);
+    return fieldName;
   }
 }
 
 /**
  * A single field component consists out of a name and the corresponding input field
  */
-export class SingleFieldInspectorComponent extends InspectorComponent {
+export class InputFieldInspectorComponent extends InspectorComponent {
   #fieldName;
   #fieldType;
   #getFieldValueFunc;
   #saveFunc;
-  #hasBorder;
   #InputLimitBottom;
 
   /**
@@ -57,25 +99,18 @@ export class SingleFieldInspectorComponent extends InspectorComponent {
     this.#fieldType = fieldType;
     this.#getFieldValueFunc = getFieldValueFunc;
     this.#saveFunc = saveFunc;
-    this.#hasBorder = true;
     this.#InputLimitBottom = InputLimitBottom;
+    super.enableBorder();
   }
 
   /**
    * Renders the component and also adds the necessary logic to updating and saving.
    * @returns {HTMLElement} the rendered component
    */
   render() {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add("d-flex", "p-2", "bg-body", "rounded-2", "gap-2");
-    if (this.#hasBorder) {
-      wrapper.classList.add("border");
-    }
+    const wrapper = super.createWrapper(["d-flex", "p-2", "bg-body", "rounded-2", "gap-2"]);
 
-    const fieldName = document.createElement("div");
-    fieldName.classList.add("d-flex", "align-items-center", "text-nowrap");
-    fieldName.innerText = this.#fieldName + ":";
-    wrapper.appendChild(fieldName);
+    super.createFieldNameElement(wrapper, this.#fieldName);
 
     const input = document.createElement("input");
     input.classList.add("form-control", "rounded-1");
@@ -107,13 +142,6 @@ export class SingleFieldInspectorComponent extends InspectorComponent {
 
     return wrapper;
   }
-
-  /**
-   * Disables the border around the component
-   */
-  disableBorder() {
-    this.#hasBorder = false;
-  }
 }
 
 /**
@@ -140,8 +168,7 @@ export class MultiFieldInspectorComponent extends InspectorComponent {
    * @returns {HTMLElement} the rendered component
    */
   render() {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add("accordion");
+    const wrapper = super.createWrapper(["accordion"]);
     wrapper.id = this.#title;
 
     const accordionItem = document.createElement("div");
@@ -181,7 +208,9 @@ export class MultiFieldInspectorComponent extends InspectorComponent {
     bodyWrapper.appendChild(body);
 
     this.#componentList.forEach((component) => {
-      component.disableBorder();
+      if (component.hasBorder === true) {
+        component.disableBorder();
+      }
       body.appendChild(component.render());
     });
 
@@ -197,7 +226,6 @@ export class SelectFieldInspectorComponent extends InspectorComponent {
   #options;
   #getFieldValueFunc;
   #saveFunc;
-  #hasBorder;
 
   /**
    * Creates a new single field component
@@ -212,24 +240,17 @@ export class SelectFieldInspectorComponent extends InspectorComponent {
     this.#options = options;
     this.#getFieldValueFunc = getFieldValueFunc;
     this.#saveFunc = saveFunc;
-    this.#hasBorder = true;
+    super.enableBorder();
   }
 
   /**
    * Renders the component and also adds the necessary logic to updating and saving.
    * @returns {HTMLElement} the rendered component
    */
   render() {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add("d-flex", "p-2", "bg-body", "rounded-3", "gap-2");
-    if (this.#hasBorder) {
-      wrapper.classList.add("border");
-    }
+    const wrapper = super.createWrapper(["d-flex", "p-2", "bg-body", "rounded-3", "gap-2"]);
 
-    const fieldName = document.createElement("div");
-    fieldName.classList.add("d-flex", "align-items-center", "text-nowrap");
-    fieldName.innerText = this.#fieldName + ":";
-    wrapper.appendChild(fieldName);
+    super.createFieldNameElement(wrapper, this.#fieldName);
 
     const select = document.createElement("select");
     select.classList.add("form-select", "rounded-1");
@@ -254,13 +275,6 @@ export class SelectFieldInspectorComponent extends InspectorComponent {
 
     return wrapper;
   }
-
-  /**
-   * Disables the border around the component
-   */
-  disableBorder() {
-    this.#hasBorder = false;
-  }
 }
 
 /**
@@ -273,7 +287,6 @@ export class SliderFieldInspectorComponent extends InspectorComponent {
   #max;
   #getFieldValueFunc;
   #saveFunc;
-  #hasBorder;
 
   /**
    * Creates a new slider component
@@ -292,28 +305,21 @@ export class SliderFieldInspectorComponent extends InspectorComponent {
     this.#step = step;
     this.#getFieldValueFunc = getFieldValueFunc;
     this.#saveFunc = saveFunc;
-    this.#hasBorder = true;
+    super.enableBorder();
   }
 
   /**
    * Renders the component and also adds the necessary logic to updating and saving.
    * @returns {HTMLElement} the rendered component
    */
   render() {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add("d-flex", "flex-column", "p-2", "bg-body", "rounded-3", "gap-2");
-    if (this.#hasBorder) {
-      wrapper.classList.add("border");
-    }
+    const wrapper = super.createWrapper(["d-flex", "flex-column", "p-2", "bg-body", "rounded-3", "gap-2"]);
 
     const header = document.createElement("div");
     header.classList.add("d-flex", "gap-2");
     wrapper.appendChild(header);
 
-    const fieldName = document.createElement("div");
-    fieldName.classList.add("d-flex", "align-items-center", "text-nowrap");
-    fieldName.innerText = this.#fieldName + ":";
-    header.appendChild(fieldName);
+    super.createFieldNameElement(header, this.#fieldName);
 
     const input = document.createElement("input");
     input.classList.add("form-control", "rounded-1");
@@ -363,13 +369,6 @@ export class SliderFieldInspectorComponent extends InspectorComponent {
 
     return wrapper;
   }
-
-  /**
-   * Disables the border around the component
-   */
-  disableBorder() {
-    this.#hasBorder = false;
-  }
 }
 
 /**
@@ -398,8 +397,7 @@ export class HeaderInspectorComponent extends InspectorComponent {
    * @returns {HTMLElement} the rendered component
    */
   render() {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add("d-flex", "px-1", "gap-1");
+    const wrapper = super.createWrapper(["d-flex", "px-1", "gap-1"]);
 
     const title = document.createElement("div");
     title.classList.add("fw-bolder", "fs-4");
@@ -430,23 +428,20 @@ export class HeaderInspectorComponent extends InspectorComponent {
     inputField.type = "text";
     inputField.classList.add("form-control", "rounded-1");
 
-    // Event listeners for clicking the title
-    title.addEventListener("click", () => {
+    /**
+     * Enables editing of the title field
+     */
+    const enableEditing = () => {
       title.innerText = "";
       inputField.value = this.#getFieldValueFunc();
       title.appendChild(inputField);
       inputField.focus();
       inputField.select();
-    });
+    };
 
-    // Event listeners for clicking the edit button
-    editButton.addEventListener("click", () => {
-      title.innerText = "";
-      inputField.value = this.#getFieldValueFunc();
-      title.appendChild(inputField);
-      inputField.focus();
-      inputField.select();
-    });
+    // Use the same handler for both events
+    title.addEventListener("click", enableEditing);
+    editButton.addEventListener("click", enableEditing);
 
     // duplicate button
     const duplicateButton = document.createElement("button");

canvas_editor/static/js/editor/objects/heliostat.mjs

@@ -3,7 +3,7 @@ import { DeleteHeliostatCommand } from "deleteCommands";
 import { DuplicateHeliostatCommand } from "duplicateCommands";
 import {
   HeaderInspectorComponent,
-  SingleFieldInspectorComponent,
+  InputFieldInspectorComponent,
   MultiFieldInspectorComponent,
   InspectorComponent,
 } from "inspectorComponents";
@@ -51,7 +51,7 @@ export class Heliostat extends CanvasObject {
       this,
     );
 
-    const nCoordinate = new SingleFieldInspectorComponent(
+    const nCoordinate = new InputFieldInspectorComponent(
       "N",
       "number",
       () => this.position.x,
@@ -63,7 +63,7 @@ export class Heliostat extends CanvasObject {
       -Infinity,
     );
 
-    const uCoordinate = new SingleFieldInspectorComponent(
+    const uCoordinate = new InputFieldInspectorComponent(
       "U",
       "number",
       () => this.position.y,
@@ -75,7 +75,7 @@ export class Heliostat extends CanvasObject {
       0,
     );
 
-    const eCoordinate = new SingleFieldInspectorComponent(
+    const eCoordinate = new InputFieldInspectorComponent(
       "E",
       "number",
       () => this.position.z,

canvas_editor/static/js/editor/objects/lightSource.mjs

@@ -3,7 +3,7 @@ import { DeleteLightSourceCommand } from "deleteCommands";
 import { DuplicateLightSourceCommand } from "duplicateCommands";
 import {
   HeaderInspectorComponent,
-  SingleFieldInspectorComponent,
+  InputFieldInspectorComponent,
   SelectFieldInspectorComponent,
   InspectorComponent,
 } from "inspectorComponents";
@@ -80,7 +80,7 @@ export class LightSource extends CanvasObject {
       this,
     );
 
-    this.#numberOfRaysComponent = new SingleFieldInspectorComponent(
+    this.#numberOfRaysComponent = new InputFieldInspectorComponent(
       "Number of rays",
       "number",
       () => this.numberOfRays,
@@ -108,7 +108,7 @@ export class LightSource extends CanvasObject {
       },
     );
 
-    this.#distributionMeanComponent = new SingleFieldInspectorComponent(
+    this.#distributionMeanComponent = new InputFieldInspectorComponent(
       "Mean",
       "number",
       () => this.distributionMean,
@@ -118,7 +118,7 @@ export class LightSource extends CanvasObject {
       -Infinity,
     );
 
-    this.#distributionCovarianceComponent = new SingleFieldInspectorComponent(
+    this.#distributionCovarianceComponent = new InputFieldInspectorComponent(
       "Covariance",
       "number",
       () => this.distributionCovariance,