diff --git a/visual_console/playground/index.html b/visual_console/playground/index.html
index 4cd72a7ec2..dd21e2e21a 100644
--- a/visual_console/playground/index.html
+++ b/visual_console/playground/index.html
@@ -136,7 +136,7 @@
// Generic props.
id: 5,
type: 19, // Clock = 19
- label: null,
+ label: "
Analogic clock
",
isLinkEnabled: false,
isOnTop: false,
parentId: null,
diff --git a/visual_console/src/Item.ts b/visual_console/src/Item.ts
index 4eb1077217..bc7d8a40c3 100644
--- a/visual_console/src/Item.ts
+++ b/visual_console/src/Item.ts
@@ -82,7 +82,6 @@ export function itemBasePropsDecoder(data: UnknownObject): ItemProps | never {
if (data.id == null || isNaN(parseInt(data.id))) {
throw new TypeError("invalid id.");
}
- // TODO: Check for valid types.
if (data.type == null || isNaN(parseInt(data.type))) {
throw new TypeError("invalid type.");
}
@@ -101,11 +100,16 @@ export function itemBasePropsDecoder(data: UnknownObject): ItemProps | never {
};
}
+/**
+ * Base class of the visual console items. Should be extended to use its capabilities.
+ */
abstract class VisualConsoleItem {
// Properties of the item.
private itemProps: Props;
// 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.
@@ -129,6 +133,10 @@ abstract class VisualConsoleItem {
* 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";
/*
* Get a HTMLElement which represents the custom view
@@ -137,9 +145,14 @@ abstract class VisualConsoleItem {
*/
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.
- // Visual Console Item Container > Custom Item View.
- this.elementRef.append(this.childElementRef);
+ this.contentElementRef.append(this.childElementRef);
+ this.elementRef.append(this.contentElementRef, this.labelElementRef);
}
/**
@@ -154,7 +167,7 @@ abstract class VisualConsoleItem {
box.style.left = `${this.props.x}px`;
box.style.top = `${this.props.y}px`;
box.onclick = () => this.clickEventManager.emit({ data: this.props });
- // TODO: Add label.
+
return box;
}
@@ -212,8 +225,16 @@ abstract class VisualConsoleItem {
if (!prevProps || this.sizeChanged(prevProps, this.props)) {
this.resizeElement(this.props.width, this.props.height);
}
+ // Change label.
+ if (
+ this.props.label != null &&
+ (!prevProps || prevProps.label !== this.props.label)
+ ) {
+ this.labelElementRef.innerHTML = this.props.label;
+ }
- this.childElementRef.innerHTML = this.createDomElement().innerHTML;
+ this.contentElementRef.childNodes.item(0).remove();
+ this.contentElementRef.append(this.createDomElement());
}
/**
@@ -222,8 +243,6 @@ abstract class VisualConsoleItem {
public remove(): void {
// Event listeners.
this.disposables.forEach(_ => _.dispose());
- // VisualConsoleItem extension DOM element.
- this.childElementRef.remove();
// VisualConsoleItem DOM element.
this.elementRef.remove();
}
@@ -280,7 +299,7 @@ abstract class VisualConsoleItem {
}
/**
- * Resize the DOM container.
+ * Resize the DOM content container.
* @param width
* @param height
*/
diff --git a/visual_console/src/items/Label.ts b/visual_console/src/items/Label.ts
index 9395653499..67a8123c81 100644
--- a/visual_console/src/items/Label.ts
+++ b/visual_console/src/items/Label.ts
@@ -28,7 +28,8 @@ export default class Label extends Item {
public createDomElement(): HTMLElement {
const element = document.createElement("div");
element.className = "label";
- element.innerHTML = this.props.label || "";
+ // The content of this item is already shown into the label container.
+ // element.innerHTML = this.props.label || "";
return element;
}
diff --git a/visual_console/src/items/SimpleValue.ts b/visual_console/src/items/SimpleValue.ts
index 8b5116a044..2cf4ab731d 100644
--- a/visual_console/src/items/SimpleValue.ts
+++ b/visual_console/src/items/SimpleValue.ts
@@ -97,7 +97,8 @@ export default class SimpleValue extends Item {
img.src = this.props.value;
element.append(img);
} else {
- element.innerHTML = this.props.label || "";
+ // The content of this item is already shown into the label container.
+ // element.innerHTML = this.props.label || "";
}
return element;
diff --git a/visual_console/src/main.css b/visual_console/src/main.css
index f6d8ee9a09..12efd54ef5 100644
--- a/visual_console/src/main.css
+++ b/visual_console/src/main.css
@@ -6,7 +6,7 @@
position: absolute;
}
-.visual-console-item > * {
+.visual-console-item-content > * {
width: inherit;
height: inherit;
}