How to use the konva.Layer function in konva

componentDidMount() {
    const stageW = 640
    const stageH = 450
    this.stage = new Konva.Stage({
      container: 'certiCntnr',
      width: stageW,
      height: stageH
    })
    // certificat template image
    const imageObj = new Image()
    // load template image file...
    const imageLayer = new Konva.Layer()
    const textLayer = new Konva.Layer()
    imageObj.onload = function(e) {
      let certiImage = new Konva.Image({
        x: 0, y: 0,
        image: imageObj,
        width: stageW, height: stageH
      })
      imageLayer.add(certiImage)
      imageLayer.draw()
    }
    imageObj.src = '/img/certemplateA_from_dreamstime.com_s.png'
    this.stage.add(imageLayer)
    this.stage.add(textLayer)
    // start to redraw cert texts....
    const firstCt = this.state.certs[0]
    if(!firstCt) return console.log('no certificate yet...');

componentDidMount() {
    const stageW = 640
    const stageH = 450
    this.stage = new Konva.Stage({
      container: 'certiCntnr',
      width: stageW,
      height: stageH
    })
    // certificat template image
    const imageObj = new Image()
    // load template image file...
    const imageLayer = new Konva.Layer()
    const textLayer = new Konva.Layer()
    imageObj.onload = function(e) {
      let certiImage = new Konva.Image({
        x: 0, y: 0,
        image: imageObj,
        width: stageW, height: stageH
      })
      imageLayer.add(certiImage)
      imageLayer.draw()
    }
    imageObj.src = '/img/certemplateA_from_dreamstime.com_s.png'
    this.stage.add(imageLayer)
    this.stage.add(textLayer)
    // start to redraw cert texts....
    const firstCt = this.state.certs[0]
    if(!firstCt) return console.log('no certificate yet...');

this.stage = new Konva.Stage({
      container: 'crmi-pipeline-graph',
      width: this.pgraph.stWidth,
      height: this.pgraph.stHeight
    });

    this.layerLines = new Konva.Layer();
    this.stage.add(this.layerLines);

    // Job box layer
    this.layerJobBoxes = new Konva.Layer();
    this.stage.add(this.layerJobBoxes);

    // Add layer Tooltip
    this.layerTooltip = new Konva.Layer();
    this.gtooltip.add(this.btooltip);
    this.gtooltip.add(this.tooltip);
    this.layerTooltip.add(this.gtooltip);
    this.stage.add(this.layerTooltip);

    // Context Menu Layer
    this.layerContextMenu = new Konva.Layer();
    this.stage.add(this.layerContextMenu);

    // Draw Layers
    this.drawLines();
    this.drawJobBoxes();

    this.layerLines.on('click', (event) => {
      if (this.ctxMenuShown) {
        const [x, y] = [

public drawStage() {
    this.ctxMenuZone = {x: [], y: []};

    this.stage = new Konva.Stage({
      container: 'crmi-pipeline-graph',
      width: this.pgraph.stWidth,
      height: this.pgraph.stHeight
    });

    this.layerLines = new Konva.Layer();
    this.stage.add(this.layerLines);

    // Job box layer
    this.layerJobBoxes = new Konva.Layer();
    this.stage.add(this.layerJobBoxes);

    // Add layer Tooltip
    this.layerTooltip = new Konva.Layer();
    this.gtooltip.add(this.btooltip);
    this.gtooltip.add(this.tooltip);
    this.layerTooltip.add(this.gtooltip);
    this.stage.add(this.layerTooltip);

    // Context Menu Layer
    this.layerContextMenu = new Konva.Layer();
    this.stage.add(this.layerContextMenu);

InCHlib.prototype._draw_heatmap = function () {
    const self = this;
    if (!self.options.heatmap) {
      return;
    }

    // let heatmap_row;
    let y;
    let key;

    self.heatmap_layer = new Konva.Layer();
    self.heatmap_overlay = new Konva.Layer();

    self.current_draw_values = true;
    self.max_value_length = self._get_max_value_length();
    self.value_font_size = self._get_font_size(self.max_value_length, self.pixels_for_dimension, self.pixels_for_leaf, 12);

    if (self.pixels_for_leaf < self.min_size_draw_values) {
      self.current_draw_values = false;
    }

    const x1 = self.heatmap_distance;

    for (var i = 0, keys = Object.keys(self.leaves_y_coordinates), len = keys.length; i < len; i++) {
      key = keys[i];
      y = self.leaves_y_coordinates[key];
      const heatmap_row = self._draw_heatmap_row(key, x1, y);

InCHlib.prototype._draw_heatmap = function () {
    const self = this;
    if (!self.options.heatmap) {
      return;
    }

    // let heatmap_row;
    let y;
    let key;

    self.heatmap_layer = new Konva.Layer();
    self.heatmap_overlay = new Konva.Layer();

    self.current_draw_values = true;
    self.max_value_length = self._get_max_value_length();
    self.value_font_size = self._get_font_size(self.max_value_length, self.pixels_for_dimension, self.pixels_for_leaf, 12);

    if (self.pixels_for_leaf < self.min_size_draw_values) {
      self.current_draw_values = false;
    }

    const x1 = self.heatmap_distance;

    for (var i = 0, keys = Object.keys(self.leaves_y_coordinates), len = keys.length; i < len; i++) {
      key = keys[i];
      y = self.leaves_y_coordinates[key];
      const heatmap_row = self._draw_heatmap_row(key, x1, y);
      self.heatmap_layer.add(heatmap_row);

}

    // Define the layers
    // They are added to the stage later on at the end of this function
    // We don't want to add too many layers; the Konva documentation states that 3-5 is max:
    // https://konvajs.org/docs/performance/Layer_Management.html
    const layers = [
        'UI',
        'timer', // The timer gets its own layer since it is being constantly updated
        'card',
        'sparkle', // Sparkles get their own layer since they are constantly animating
        'arrow',
        'UI2', // We need some UI elements to be on top of cards
    ];
    for (const layerName of layers) {
        const layer = new Konva.Layer({
            // Disable "listening" for every layer/element by default to increase performance
            // https://konvajs.org/docs/performance/Listening_False.html
            // This means that we have to explicitly set "listening: true" for every element that
            // we want to bind events to (for clicking, dragging, hovering, etc.)
            listening: false,
        });
        globals.layers.set(layerName, layer);
    }
};

module.exports = function(stage, input) {
  const {width, height} = input.container;
  stage.setWidth(width);
  stage.height(height);
  const layer = new Konva.Layer();
  const Text = function(x, y, width, height, label, style) {
    const opt = Object.assign({}, style, {text: label, width, x, y});
    const text = new Konva.Text(opt);
    layer.add(text);
  };

  const Box = function(centerX, centerY, width, height, label, style) {
    const x = centerX - width / 2;
    const y = centerY - height / 2;
    const opt = Object.assign({}, style, {x, y, width, height});
    var rect = new Konva.Rect(opt);
    layer.add(rect);
    Text(x, y, width, height, label, style.fontType);
  };

  const Line = function(a, type) {

public initialize(elementId: string): Promise {
        const element = document.getElementById(elementId);

        if (!element) {
            throw `Container element with id '${elementId} not found`;
        }

        this.stage = new Konva.Stage({
            container: element.id,
            width: element.offsetWidth,
            height: element.offsetHeight
        });

        this.layer = new Konva.Layer();
        this.stage.add(this.layer);

        this.shapes = {};

        return Promise.resolve(true);
    }

InCHlib.prototype._draw_heatmap_header = function () {
    const self = this;
    if (
      self.options.heatmap_header &&
      self.header.length > 0 &&
      self.pixels_for_dimension >= self.min_size_draw_values
    ) {
      self.header_layer = new Konva.Layer();
      const count = self._hack_size(self.leaves_y_coordinates);
      const y = (self.options.column_dendrogram && self.heatmap_header)
        ? self.header_height + (self.pixels_for_leaf * count) + 15 + self.column_metadata_height
        : self.header_height - 20;
      const rotation = (self.options.column_dendrogram && self.heatmap_header)
        ? 45 
        : -45;
      let distance_step = 0;
      let x;
      let column_header;
      let key;
      const current_headers = [];

      for (var i = 0, len = self.on_features.data.length; i < len; i++) {
        current_headers.push(self.header[self.on_features.data[i]]);
      }