text: class Component extends Gate {
      constructor(context, x, y, width, height, no_left, no_bottom, no_right, no_top, labels, title) {
          super(context);
          this.x = x;
          this.y = y;
  
          this.width = width;
          this.height = height;
  
          this.no_left = no_left;
          this.no_bottom = no_bottom;
          this.no_top = no_top;
          this.no_right = no_right;
  
          this.terminals = [];
          for (var i=0; i<this.no_left+this.no_bottom+this.no_top; i++) {
              this.terminals.push(new Terminal(context, INPUT));
          }
          for (var i=0; i<this.no_right; i++) {
              this.terminals.push(new Terminal(context, OUTPUT));
          }
  
          this.labels = labels || [];
          this.title = title || [];
      }
  
      drawIntern() {
      }
      
      apply() {
      }
  
      draw() {
          this.drawIntern();
          
          var x = this.x;
          var y = this.y;
          var ctx = this.context;
      
          var w = this.width;
          var h = this.height;
          var r = x+w;
          var b = y+h;
  
          ctx.beginPath();
          ctx.rect(x, y, w, h)
          ctx.stroke();
          ctx.closePath;
  
          var no_left = this.no_left;
          var no_bottom = this.no_bottom;
          var no_top = this.no_top;
          var no_right = this.no_right;
  
          var margin=15;
  
          for (var i=0; i<this.title.length; i++) {
              ctx.font = "10px Arial";
              ctx.fillStyle = "black";
              ctx.textBaseline = "middle";
              ctx.textAlign = "center";
              ctx.fillText(this.title[i], x+w/2, y+h/2+i*10);
          }
  
          for (var i=0; i<no_left; i++) {
              ctx.beginPath();
              var end = y+margin+i*(h-2*margin)/((no_left-1)||1)
              ctx.moveTo(x, end);
              ctx.lineTo(x-20, end);
              ctx.stroke();
              ctx.closePath();
  
              this.terminals[i].x = x-20;
              this.terminals[i].y = end;
  
              if (this.labels[i]) {
                  ctx.font = "10px Arial";
                  ctx.fillStyle = "black";
                  ctx.textBaseline = "middle";
                  ctx.textAlign = "left";
                  ctx.fillText(this.labels[i], x+2, end);
              }
          }
  
          for (var i=0; i<no_bottom; i++) {
              ctx.beginPath();
              var end = x+margin+i*(w-2*margin)/((no_bottom-1)||1)
              ctx.moveTo(end, b);
              ctx.lineTo(end, b+20);
              ctx.stroke();
              ctx.closePath();
  
              this.terminals[no_left + i].y = b+20;
              this.terminals[no_left + i].x = end;
  
              if (this.labels[no_left + i]) {
                  ctx.font = "10px Arial";
                  ctx.fillStyle = "black";
                  ctx.textBaseline = "bottom";
                  ctx.textAlign = "center";
                  ctx.fillText(this.labels[no_left + i], end, b);
              }
          }
  
          for (var i=0; i<no_right; i++) {
              ctx.beginPath();
              var end = y+margin+i*(h-2*margin)/((no_right-1)||1)
              ctx.moveTo(r, end);
              ctx.lineTo(r+20, end);
              ctx.stroke();
              ctx.closePath();
  
              this.terminals[no_left+no_bottom+i].x = r+20;
              this.terminals[no_left+no_bottom+i].y = end;
  
              if (this.labels[no_left+no_bottom+i]) {
                  ctx.font = "10px Arial";
                  ctx.fillStyle = "black";
                  ctx.textBaseline = "middle";
                  ctx.textAlign = "right";
                  ctx.fillText(this.labels[no_left+no_bottom+i], r-2, end);
              }
          }
  
          for (var i=0; i<no_top; i++) {
              ctx.beginPath();
              var end = x+margin+i*(w-2*margin)/((no_top-1)||1)
              ctx.moveTo(end, y);
              ctx.lineTo(end, y-20);
              ctx.stroke();
              ctx.closePath();
  
              this.terminals[no_left+no_bottom+no_right+i].y = y-20;
              this.terminals[no_left+no_bottom+no_right+i].x = end;
          }
  
          this.terminals.forEach(t => {
              t.draw();
          });
      }
  }