Visual Studio Refactor: fixed the items which use their label as content

Former-commit-id: 48d50e90bd581312b39a90b12c5fe50e03c8730a

visual_console/playground/index.html

@@ -212,7 +212,7 @@
         // Generic props.
         id: 9,
         type: 2, // Simple value = 2
-        label: '<h3 style="color: #FDFD96;">Simple Value: 10</h3>',
+        label: '<h3 style="color: #FDFD96;">Simple Value: (_VALUE_)</h3>',
         isLinkEnabled: false,
         isOnTop: false,
         parentId: null,

visual_console/src/Item.ts

@@ -132,8 +132,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
      * when hovered, etc.
      */
     this.elementRef = this.createContainerDomElement();
-    this.labelElementRef = document.createElement("div");
-    this.labelElementRef.className = "visual-console-item-label";
+    this.labelElementRef = this.createLabelDomElement();
 
     /*
      * Get a HTMLElement which represents the custom view
@@ -142,11 +141,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
      */
     this.childElementRef = this.createDomElement();
 
-    // Add the label if it exists.
-    if (this.props.label && this.props.label.length) {
-      this.labelElementRef.innerHTML = this.props.label;
-    }
-
     // Insert the elements into the container.
     this.elementRef.append(this.childElementRef, this.labelElementRef);
 
@@ -172,6 +166,21 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return box;
   }
 
+  /**
+   * To create a new label for the visual console item.
+   * @return Item label.
+   */
+  protected createLabelDomElement(): HTMLElement {
+    const element = document.createElement("div");
+    element.className = "visual-console-item-label";
+    // Add the label if it exists.
+    if (this.props.label && this.props.label.length) {
+      element.innerHTML = this.props.label;
+    }
+
+    return element;
+  }
+
   /**
    * Public accessor of the `props` property.
    * @return Properties.
@@ -230,8 +239,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     }
     // Change label.
     if (!prevProps || prevProps.label !== this.props.label) {
-      this.labelElementRef.innerHTML =
-        this.props.label != null ? this.props.label : "";
+      this.labelElementRef.innerHTML = this.createLabelDomElement().innerHTML;
     }
     // Change label position.
     if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {

visual_console/src/items/Label.ts

@@ -28,22 +28,20 @@ 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 || "";
+    element.innerHTML = this.props.label || "";
 
     return element;
   }
 
   /**
-   * @override Item.resize
-   * To resize the item.
+   * @override Item.createLabelDomElement
+   * Create a new label for the visual console item.
+   * @return Item label.
    */
-  public resizeElement(): void {
-    // Size to 0, as the item content is managed using the label.
-    this.childElementRef.style.width = `0`;
-    this.childElementRef.style.height = `0`;
+  public createLabelDomElement(): HTMLElement {
+    const element = document.createElement("div");
+    element.className = "visual-console-item-label";
+    // Always return an empty label.
+    return element;
   }
 }

visual_console/src/items/SimpleValue.ts

@@ -97,23 +97,27 @@ 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 || "";
+      // Add the value to the label and show it.
+      let text = this.props.value;
+      if (this.props.label) {
+        text = this.props.label.replace(/\(?_VALUE_\)?/i, text);
+      }
+
+      element.innerHTML = text;
     }
 
     return element;
   }
 
   /**
-   * @override Item.resize
-   * To resize the item.
+   * @override Item.createLabelDomElement
+   * Create a new label for the visual console item.
+   * @return Item label.
    */
-  public resizeElement(): void {
-    // Size to 0, as the item content is managed using the label.
-    this.childElementRef.style.width = `0`;
-    this.childElementRef.style.height = `0`;
+  public createLabelDomElement(): HTMLElement {
+    const element = document.createElement("div");
+    element.className = "visual-console-item-label";
+    // Always return an empty label.
+    return element;
   }
 }