How to use the konva.Line function in konva

// put this circle hit area into array for later detect
      this.hitTestPots.push({
        rect: {tx:cStartX-10, ty:cStartY-10, bx:cStartX+10, by:cStartY+10}, 
        title: t.title
      })
      // save the last end point
      lEndX = parseInt((i+1)/6)%2?(cStartX - distance):(cStartX + distance)
      lEndY = cStartY
      // the 6th point line, reset end x/y
      if(i>0 && (i+1)%6===0){//get line down in the n 6th point
        // console.log('draw down line ...')
        lEndX = cStartX
        lEndY = cStartY + distance
      }
      // line
      var line = new Konva.Line({
        points: [cStartX, cStartY, lEndX, lEndY],
        stroke: 'black',
        strokeWidth: 2,
      });

      var arc = new Konva.Arc({
        x: cStartX,
        y: cStartY,
        innerRadius: 4,
        outerRadius: 6,
        angle: 90,
        fill: 'white',
      });

      var vline = new Konva.Line({
        points: [cStartX, cStartY, cStartX, (i%2)?cStartY-30:cStartY+30],

x,
                y * 0.8,
            ],
            pointerLength,
            pointerWidth: pointerLength,
            fill: 'black',
            stroke: 'black',
            strokeWidth: pointerLength * 2,
            shadowBlur: pointerLength * 4,
            shadowOpacity: 1,
        });
        this.add(border);

        // The border arrow will be missing a bottom edge,
        // so draw that manually at the bottom of the arrow
        const edge = new Konva.Line({
            points: [
                x - pointerLength,
                0,
                x + pointerLength,
                0,
            ],
            fill: 'black',
            stroke: 'black',
            strokeWidth: pointerLength * 0.75,
        });
        this.add(edge);

        // The main (inside) arrow is exported so that we can change the color later
        this.base = new Konva.Arrow({
            points: [
                x,

// The line from top-left to bottom-right
    const line1 = new Konva.Line({
        points: [
            spacing.x * winW,
            spacing.y * winH,
            (clueAreaValues.w! - spacing.x) * winW,
            (clueAreaValues.h! - spacing.y) * winH,
        ],
        stroke: lineColor,
        strokeWidth: 5,
    });
    globals.elements.clueAreaDisabled.add(line1);

    // The line from bottom-left to top-right
    const line2 = new Konva.Line({
        points: [
            spacing.x * winW,
            (clueAreaValues.h! - spacing.y) * winH,
            (clueAreaValues.w! - spacing.x) * winW,
            spacing.y * winH,
        ],
        stroke: lineColor,
        strokeWidth: 5,
    });
    globals.elements.clueAreaDisabled.add(line2);

    // The "No clues available" text
    const noCluesText = new FitText({
        y: clueAreaValues.h! * 0.4 * winH,
        width: clueAreaValues.w! * winW,
        fontSize: 0.07 * winH,

fontSize: self.options.font.size,
      fontFamily: self.options.font.family,
      fill: self.options.font.color,
      align: 'right',
      listening: false,
    });
    self.dendrogram_layer.add(path, circle, distance_number);

    if (marker_distance_step == 0) {
      marker_distance_step = 0.5;
    }

    var path;
    if (marker_number_distance > 0.1) {
      while (marker_distance > 0) {
        path = new Konva.Line({
          points: [
            marker_distance,
            (y1 - marker_tail),
            marker_distance,
            (y2 + marker_tail),
          ],
          stroke: 'grey',
          listening: false,
        });
        self.dendrogram_layer.add(path);

        number = self._hack_round((number + marker_number_distance) * 10) / 10;
        if (number > 10) {
          number = self._hack_round(number);
        }

fill: self.options.font.color,
      }),

      count: new Konva.Text({
        fontSize: 10,
        fill: '#6d6b6a',
        fontFamily: self.options.font.family,
        listening: false,
      }),

      cluster_overlay: new Konva.Rect({
        fill: 'white',
        opacity: 0.5,
      }),

      cluster_border: new Konva.Line({
        stroke: '#3a3a3a',
        strokeWidth: 1,
        dash: [6, 2],
      }),

      icon: new Konva.Path({
        fill: 'grey',
      }),

      rect_gradient: new Konva.Rect({
        x: 0,
        y: 80,
        width: 100,
        height: 20,
        fillLinearGradientStartPoint: {
          x: 0,

this.pgraph.lines.forEach((nLine) => {
      const line = new Konva.Line({
        x: 0,
        y: 0,
        points: nLine.points,
        stroke: nLine.color || this.lineColor,
        tension: 1
      });
      this.layerLines.add(line);
    });
    this.layerLines.draw();