Visual Console Refactor: finished the label support

Former-commit-id: d09e3ac1a35722d6531817e5c935e4b582a5e0eb

visual_console/playground/index.html

@@ -137,6 +137,7 @@
         id: 5,
         type: 19, // Clock = 19
         label: "<h1>Analogic clock</h1>",
+        labelPosition: "up",
         isLinkEnabled: false,
         isOnTop: false,
         parentId: null,

visual_console/src/Item.ts

@@ -109,7 +109,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   // Reference to the DOM element which will contain the item.
   public readonly elementRef: HTMLElement;
   private readonly labelElementRef: HTMLElement;
-  private readonly contentElementRef: HTMLElement;
   // Reference to the DOM element which will contain the view of the item which extends this class.
   protected readonly childElementRef: HTMLElement;
   // Event manager for click events.
@@ -133,8 +132,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
      * when hovered, etc.
      */
     this.elementRef = this.createContainerDomElement();
-    this.contentElementRef = document.createElement("div");
-    this.contentElementRef.className = "visual-console-item-content";
     this.labelElementRef = document.createElement("div");
     this.labelElementRef.className = "visual-console-item-label";
 
@@ -151,8 +148,12 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     }
 
     // Insert the elements into the container.
-    this.contentElementRef.append(this.childElementRef);
+    this.elementRef.append(this.childElementRef, this.labelElementRef);
-    this.elementRef.append(this.contentElementRef, this.labelElementRef);
+
+    // Resize element.
+    this.resizeElement(props.width, props.height);
+    // Set label position.
+    this.changeLabelPosition(props.labelPosition);
   }
 
   /**
@@ -162,8 +163,8 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   private createContainerDomElement(): HTMLElement {
     const box: HTMLDivElement = document.createElement("div");
     box.className = "visual-console-item";
-    box.style.width = `${this.props.width}px`;
+    // box.style.width = `${this.props.width}px`;
-    box.style.height = `${this.props.height}px`;
+    // box.style.height = `${this.props.height}px`;
     box.style.left = `${this.props.x}px`;
     box.style.top = `${this.props.y}px`;
     box.onclick = () => this.clickEventManager.emit({ data: this.props });
@@ -217,6 +218,8 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
    * @param prevProps If exists it will be used to only perform DOM updates instead of a full replace.
    */
   public render(prevProps: Props | null = null): void {
+    this.childElementRef.innerHTML = this.createDomElement().innerHTML;
+
     // Move box.
     if (!prevProps || this.positionChanged(prevProps, this.props)) {
       this.moveElement(this.props.x, this.props.y);
@@ -226,15 +229,14 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
       this.resizeElement(this.props.width, this.props.height);
     }
     // Change label.
-    if (
+    if (!prevProps || prevProps.label !== this.props.label) {
-      this.props.label != null &&
+      this.labelElementRef.innerHTML =
-      (!prevProps || prevProps.label !== this.props.label)
+        this.props.label != null ? this.props.label : "";
-    ) {
+    }
-      this.labelElementRef.innerHTML = this.props.label;
+    // Change label position.
+    if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {
+      this.changeLabelPosition(this.props.labelPosition);
     }
-
-    this.contentElementRef.childNodes.item(0).remove();
-    this.contentElementRef.append(this.createDomElement());
   }
 
   /**
@@ -261,6 +263,28 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return prevPosition.x !== newPosition.x || prevPosition.y !== newPosition.y;
   }
 
+  /**
+   * Move the label around the item content.
+   * @param position Label position.
+   */
+  protected changeLabelPosition(position: Props["labelPosition"]): void {
+    switch (position) {
+      case "up":
+        this.elementRef.style.flexDirection = "column-reverse";
+        break;
+      case "left":
+        this.elementRef.style.flexDirection = "row-reverse";
+        break;
+      case "right":
+        this.elementRef.style.flexDirection = "row";
+        break;
+      case "down":
+      default:
+        this.elementRef.style.flexDirection = "column";
+        break;
+    }
+  }
+
   /**
    * Move the DOM container.
    * @param x Horizontal axis position.
@@ -304,8 +328,9 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
    * @param height
    */
   protected resizeElement(width: number, height: number): void {
-    this.elementRef.style.width = `${width}px`;
+    // The most valuable size is the content size.
-    this.elementRef.style.height = `${height}px`;
+    this.childElementRef.style.width = `${width}px`;
+    this.childElementRef.style.height = `${height}px`;
   }
 
   /**

visual_console/src/items/Clock/index.ts

@@ -172,8 +172,8 @@ export default class Clock extends Item<ClockProps> {
    */
   public resize(width: number, height: number): void {
     super.resize(width, height);
-    // this.childElementRef.style.width = `${width}px`;
+    this.childElementRef.style.width = `${width}px`;
-    // this.childElementRef.style.height = `${height}px`;
+    this.childElementRef.style.height = `${height}px`;
     // Re-render the item to force it calculate a new font size.
     if (this.props.clockType === "digital") this.render();
   }
@@ -212,6 +212,8 @@ export default class Clock extends Item<ClockProps> {
 
     const div = document.createElement("div");
     div.className = "analogic-clock";
+    div.style.width = `${this.props.width}px`;
+    div.style.height = `${this.props.height}px`;
 
     // SVG container.
     const svg = document.createElementNS(svgNS, "svg");

visual_console/src/items/Label.ts

@@ -28,9 +28,24 @@ export default class Label extends Item<LabelProps> {
   public createDomElement(): HTMLElement {
     const element = document.createElement("div");
     element.className = "label";
+    // Size to 0, as the item content is managed using the label.
+    element.style.width = "0";
+    element.style.height = "0";
     // The content of this item is already shown into the label container.
     // element.innerHTML = this.props.label || "";
 
     return element;
   }
+
+  /**
+   * @override Item.resize
+   * To resize the item.
+   * @param width Width.
+   * @param height Height.
+   */
+  public resizeElement(width: number, height: number): void {
+    // Size to 0, as the item content is managed using the label.
+    this.childElementRef.style.width = `0`;
+    this.childElementRef.style.height = `0`;
+  }
 }

visual_console/src/items/SimpleValue.ts

@@ -97,10 +97,25 @@ export default class SimpleValue extends Item<SimpleValueProps> {
       img.src = this.props.value;
       element.append(img);
     } else {
+      // Size to 0, as the item content is managed using the label.
+      element.style.width = "0";
+      element.style.height = "0";
       // The content of this item is already shown into the label container.
       // element.innerHTML = this.props.label || "";
     }
 
     return element;
   }
+
+  /**
+   * @override Item.resize
+   * To resize the item.
+   * @param width Width.
+   * @param height Height.
+   */
+  public resizeElement(width: number, height: number): void {
+    // Size to 0, as the item content is managed using the label.
+    this.childElementRef.style.width = `0`;
+    this.childElementRef.style.height = `0`;
+  }
 }

visual_console/src/main.css

@@ -4,9 +4,8 @@
 
 .visual-console-item {
   position: absolute;
-}
+  display: flex;
-
+  flex-direction: initial;
-.visual-console-item-content > * {
+  justify-items: center;
-  width: inherit;
+  align-items: center;
-  height: inherit;
 }