How to Connect Two divs with lines in Angular

Question

* Project Description

I am creating a responsive tournament Brackets tree web Page.

* Problem

My Problem is that I want to connect each Bracket "each bracket is a div of its own" to the next one with a decorated line, in general I want two connect two divs with a line that I can decorate.

- Example

Example1

Example2

* what I tried

I tried using the CanvasRenderingContext2D but I didn't have much luck in it, or at least didn't know how to fully utilize it

* What I want/ What's expected

I want to be able to connect the two brackets/divs with a line that can be bent and moved "by the developer not the user" to design it.

• p.s: This only needs to be shown on screens larger than "xs" so mobile devices is not a concern.

* My Code

Stackblitz Project

- Used Libraries and versions

• Angular V:5.1
• Flex-Layout "angular" V: 2.00 beta 12
• Angular Material V: 5.01

Answer 1

<div style="position:absolute; left:0; top:0; width: 100px; height: 50px; background:red;"></div>
<div style="position:absolute; left:250px; top:150px; width: 100px; height: 50px; background: blue;"></div>

<svg style="position:absolute; left:0; top:0;" width="300" height="300">
    <line x1="100" y1="50" x2="250" y2="150" stroke="black"/>
</svg>

Example:

In app.component.html file:

<div class="cont">
  <div *ngFor="let item of arr_item; index as i" class="block d-flex align-items-center justify-content-between">
    <div class="d-flex flex-column" #left>
      <div *ngFor="let val of item.left" class="box box-left">
        {{val}}
      </div>
    </div>
    <div class="d-flex flex-column align-items-end" #right>
      <div *ngFor="let val of item.right" class="box box-right">
        {{val}}
      </div>
    </div>
  </div>
  <svg style="position: absolute; z-index: -1; width:100%; height:100%; top: 0; left: 0;">
    <polyline *ngFor="let item of polylines" 
      [attr.points]="item.points"
      [attr.fill]="item.fill"
      [attr.stroke]="item.stroke"
      [attr.stroke-width]="item.strokeWidth"
    />
  </svg>
</div>

In app.component.css file:

.cont {
  position: relative;
}
.box {
  padding: 10px;
  border: 1px solid #292929;
  width: fit-content;
  margin: 10px;
  max-width: 200px;
}
.block {
  margin: 10px;
}

In app.component.ts file:

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  QueryList,
  ViewChildren
} from "@angular/core";

export class Polyline {
  points: string;
  fill: string;
  stroke: string;
  strokeWidth: number;
  constructor(
    points?: string,
    fill?: string,
    stroke?: string,
    strokeWidth?: number
  ) {
    this.points = points || "";
    this.fill = fill || "none";
    this.stroke = stroke || "blue";
    this.strokeWidth = strokeWidth || 3;
  }
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, AfterViewInit {
  arr_item = [
    {
      left: ["Lorem Ipsum", "ABC"],
      right: ["Hello World", "Hello"]
    },
    {
      left: [
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
        "Lorem Ipsum is simply dummy text"
      ],
      right: [""]
    },
    {
      left: [
        "",
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
      ],
      right: ["Rainbow"]
    }
  ];

  @ViewChildren("left", { read: ElementRef }) left: QueryList<ElementRef>;
  @ViewChildren("right", { read: ElementRef }) right: QueryList<ElementRef>;

  polylines: Polyline[] = [];

  ngAfterViewInit() {
    this.drawLines();
  }

  ngOnInit(): void {
    window.addEventListener("resize", () => {
      this.drawLines();
    });
  }

  getPos_line(ele) {
    var className = ele.getAttribute("class");
    if (className.indexOf("left") !== -1) {
      return {
        x: Math.round(ele.offsetLeft + ele.offsetWidth),
        y: Math.round(ele.offsetTop + ele.offsetHeight / 2)
      };
    } else {
      return {
        x: Math.round(ele.offsetLeft),
        y: Math.round(ele.offsetTop + ele.offsetHeight / 2)
      };
    }
  }

  getMaxX_Left(arr: any) {
    if (arr.length >= 1) {
      var maxX = this.getPos_line(arr[0]).x;
      for (var i = 0; i < arr.length; i++) {
        var posLine = this.getPos_line(arr[i]);
        if (posLine.x > maxX) {
          maxX = posLine.x;
        }
      }
      return maxX;
    } else {
      return null;
    }
  }

  getMinX_Right(arr: any) {
    if (arr.length >= 1) {
      var minX = this.getPos_line(arr[0]).x;
      for (var i = 0; i < arr.length; i++) {
        var posLine = this.getPos_line(arr[i]);
        if (posLine.x < minX) {
          minX = posLine.x;
        }
      }
      return minX;
    } else {
      return null;
    }
  }

  getCenY(left, right) {
    if (left.offsetHeight >= right.offsetHeight) {
      return Math.round(left.offsetTop + left.offsetHeight / 2);
    } else {
      return Math.round(right.offsetTop + right.offsetHeight / 2);
    }
  }

  drawLines() {
    this.polylines = [];
    for (var i = 0; i < this.arr_item.length; i++) {
      var polylines_temp: Polyline[] = [];
      var left_children = this.left.get(i).nativeElement.children;
      var right_children = this.right.get(i).nativeElement.children;
      var left_childrenLen = left_children.length;
      var right_childrenLen = right_children.length;
      var maxX_left = this.getMaxX_Left(left_children);
      var minX_right = this.getMinX_Right(right_children);
      var cenY = this.getCenY(
        this.left.get(i).nativeElement,
        this.right.get(i).nativeElement
      );
      var cenX = Math.round((maxX_left + minX_right) / 2);

      var space = 0;
      if (left_childrenLen > 1 && right_childrenLen > 1) {
        space = 10;
      }

      for (var j = 0; j < left_childrenLen; j++) {
        var posLine = this.getPos_line(left_children[j]);
        polylines_temp.push(
          new Polyline(`
            ${posLine.x},${posLine.y} 
            ${cenX - space},${posLine.y} 
            ${cenX - space},${cenY} 
            ${cenX},${cenY} 
          `)
        );
      }
      for (var j = 0; j < right_childrenLen; j++) {
        var posLine = this.getPos_line(right_children[j]);
        polylines_temp.push(
          new Polyline(`
            ${cenX},${cenY} 
            ${cenX + space},${cenY} 
            ${cenX + space},${posLine.y}  
            ${posLine.x},${posLine.y} 
          `)
        );
      }
      this.polylines = this.polylines.concat(polylines_temp);
    }
  }
}

Link to Stackblitz

Answer 2

clearcanv() {
while (this.svg1.lastChild) {
  this.svg1.removeChild(this.svg1.lastChild);
}
this.lines = [];
console.log(this.lines.length);}

drawcanv() {
var body = document.body,
  html = document.documentElement;

var pheight = Math.max(
  body.scrollHeight,
  body.offsetHeight,
  html.clientHeight,
  html.scrollHeight,
  html.offsetHeight
);
this.svg1.setAttribute("id", "svg");
var j2 = 0;
for (let i = 0; i < this.stages.length; i++) {
  j2 = 0;
  for (let j = 0; j < this.stages[i].Hist.length; j += 2) {
    //Get Position of elements
    var element1A = document.getElementById(i.toString() + j.toString());
    var element1B = document.getElementById(
      i.toString() + (j + 1).toString()
    );
    var element2 = document.getElementById(
      (i + 1).toString() + j2.toString()
    );
    const x1A = element1A.offsetLeft + element1A.clientWidth;
    const x1B = element1B.offsetLeft + element1B.clientWidth;
    const x2 = element2.offsetLeft;
    const y1A =
      element1A.offsetTop + element1A.getBoundingClientRect().height / 2;
    const y1B =
      element1B.offsetTop + element1B.getBoundingClientRect().height / 2;
    const y2 =
      element2.offsetTop + element2.getBoundingClientRect().height / 2;
    const halfwayx = Math.abs(x1A + x2) / 2;
    const halfwayy = Math.abs(y1A + y1B) / 2;
    //=======================================================================================
    this.DrawLine(x1A, halfwayx, y1A, y1A, pheight);
    this.DrawLine(x1B, halfwayx, y1B, y1B, pheight);
    this.DrawLine(halfwayx, halfwayx, y1A, halfwayy, pheight);
    this.DrawLine(halfwayx, halfwayx, y1B, halfwayy, pheight);
    j2++;
  }
}}
DrawLine(xs: number, xd: number, ys: number, yd: number, PageHeight: Number) {
//creating a line and adding design
this.lines.push(
  document.createElementNS("http://www.w3.org/2000/svg", "line")
);
this.lines[this.lines.length - 1].setAttribute("stroke-width", "1px");
this.lines[this.lines.length - 1].setAttribute("stroke", "#000000");
this.lines[this.lines.length - 1].setAttribute(
  "marker-end",
  "url(#triangle)"
);
//=======================================================================================
//appending to and styling the svg
this.svg1.appendChild(this.lines[this.lines.length - 1]);
document.body.appendChild(this.svg1);
this.svg1.style.position = "absolute";
this.svg1.style.top = "0";
this.svg1.style.left = "0";
this.svg1.style.width = "100%";
this.svg1.style.height = PageHeight.toString();
this.svg1.style.zIndex = "-2";
//==================================================================s=====================
//Drawing the line.
this.lines[this.lines.length - 1].setAttribute("x1", `${xs}`);
this.lines[this.lines.length - 1].setAttribute("x2", `${xd}`);
this.lines[this.lines.length - 1].setAttribute("y1", `${ys}`);
this.lines[this.lines.length - 1].setAttribute("y2", `${yd}`);
//=======================================================================================}