Visual Console Refactor: added the line item

Former-commit-id: a639af5f7a158e0dd236fbf2b21cc022fce08510

visual_console/playground/index.html

@@ -166,13 +166,33 @@
         fillColor: "black"
       };
 
+      var lineRawProps = {
+        // Generic props.
+        id: 7,
+        type: 13, // Line = 13
+        // Position props.
+        x: 720,
+        y: 20,
+        // Size props.
+        width: 50,
+        height: 50,
+        // Custom props.
+        startX: 200,
+        startY: 100,
+        endX: 350,
+        endY: 30,
+        lineWidth: 2,
+        color: "white"
+      };
+
       var items = [
         staticGraphRawProps,
         colorCloudRawProps,
         digitalClockRawProps,
         digitalClockRawProps2,
         analogicClockRawProps,
-        boxRawProps
+        boxRawProps,
+        lineRawProps
       ];
 
       try {

visual_console/src/VisualConsole.ts

@@ -12,6 +12,7 @@ import ColorCloud, { colorCloudPropsDecoder } from "./items/ColorCloud";
 import Group, { groupPropsDecoder } from "./items/Group";
 import Clock, { clockPropsDecoder } from "./items/Clock";
 import Box, { boxPropsDecoder } from "./items/Box";
+import Line, { linePropsDecoder } from "./items/Line";
 
 // Base properties.
 export interface VisualConsoleProps extends Size {
@@ -100,7 +101,7 @@ function itemInstanceFrom(data: UnknownObject) {
     case ItemType.BOX_ITEM:
       return new Box(boxPropsDecoder(data));
     case ItemType.LINE_ITEM:
-      throw new TypeError("item not found");
+      return new Line(linePropsDecoder(data));
     case ItemType.AUTO_SLA_GRAPH:
       throw new TypeError("item not found");
     case ItemType.CIRCULAR_PROGRESS_BAR:

visual_console/src/items/Line.ts

@@ -1,4 +1,4 @@
-import { UnknownObject, Position } from "../types";
+import { UnknownObject, Position, Size } from "../types";
 import { parseIntOr, notEmptyStringOr } from "../lib";
 import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
 
@@ -9,11 +9,6 @@ interface LineProps extends ItemProps {
   isLinkEnabled: false;
   parentId: null;
   aclGroupId: null;
-  // Clear Position & Size.
-  x: 0;
-  y: 0;
-  width: 0;
-  height: 0;
   // Custom properties.
   startPosition: Position;
   endPosition: Position;
@@ -38,19 +33,19 @@ export function linePropsDecoder(data: UnknownObject): LineProps | never {
     isLinkEnabled: false,
     parentId: null,
     aclGroupId: null,
-    // Clear Position & Size.
+    // Initialize Position & Size.
     x: 0,
     y: 0,
     width: 0,
     height: 0,
     // Custom properties.
     startPosition: {
-      x: 0,
+      x: parseIntOr(data.startX, 0),
-      y: 0
+      y: parseIntOr(data.startY, 0)
     },
     endPosition: {
-      x: 0,
+      x: parseIntOr(data.endX, 0),
-      y: 0
+      y: parseIntOr(data.endY, 0)
     },
     lineWidth: parseIntOr(data.lineWidth, 0),
     color: notEmptyStringOr(data.color, null)
@@ -58,10 +53,63 @@ export function linePropsDecoder(data: UnknownObject): LineProps | never {
 }
 
 export default class Line extends Item<LineProps> {
-  public createDomElement(): HTMLElement {
+  /**
-    const line: HTMLDivElement = document.createElement("div");
+   * @override
-    line.className = "line";
+   */
+  public constructor(props: LineProps) {
+    /*
+     * We need to override the constructor cause we need to obtain
+     * the
+     * box size and position from the start and finish points
+     * of the line.
+     */
+    super({
+      ...props,
+      ...Line.extractBoxSizeAndPosition(props)
+    });
+  }
 
-    return line;
+  /**
+   * @override
+   * To create the item's DOM representation.
+   * @return Item.
+   */
+  public createDomElement(): HTMLElement {
+    const element: HTMLDivElement = document.createElement("div");
+    element.className = "line";
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    // SVG container.
+    const svg = document.createElementNS(svgNS, "svg");
+    // Set SVG size.
+    // svg.setAttribute("width", this.props.width.toString());
+    // svg.setAttribute("height", this.props.height.toString());
+    const line = document.createElementNS(svgNS, "line");
+    line.setAttribute("x1", `${this.props.startPosition.x - this.props.x}`);
+    line.setAttribute("y1", `${this.props.startPosition.y - this.props.y}`);
+    line.setAttribute("x2", `${this.props.endPosition.x - this.props.x}`);
+    line.setAttribute("y2", `${this.props.endPosition.y - this.props.y}`);
+    line.setAttribute("stroke", this.props.color || "black");
+    line.setAttribute("stroke-width", this.props.lineWidth.toString());
+    line.setAttribute("stroke-linecap", "round");
+
+    svg.append(line);
+    element.append(svg);
+
+    return element;
+  }
+
+  /**
+   * Extract the size and position of the box from
+   * the start and the finish of the line.
+   * @param props Item properties.
+   */
+  private static extractBoxSizeAndPosition(props: LineProps): Size & Position {
+    return {
+      width: Math.abs(props.startPosition.x - props.endPosition.x),
+      height: Math.abs(props.startPosition.y - props.endPosition.y),
+      x: Math.min(props.startPosition.x, props.endPosition.x),
+      y: Math.min(props.startPosition.y, props.endPosition.y)
+    };
   }
 }