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; }