fockl / QUMAL

main.js

(() => {
  var W = 2;
  var N = 2;
  var state = [];

The variable state seems to be never used. Consider removing it.

  var sort_show_flag = false;
  var num_of_state = 4;
  const Operator_name = [
    ["I", "Measure", "X", "Z", "H", "S", "Sd", "T", "Td", "Rx", "Ry", "Rz"],
    ["CI", "SCI", "CX", "CZ", "CH", "CS", "CSd", "CT", "CTd", "CRx", "CRy", "CRz"],
    ["I", "Fs", "Fe"]
  ];

  let Sim = new Simulate();

  const X_SHIFT = 0;
  const Y_SHIFT = 50;

  function make_button(name, left, top, id_name){

The function make_button is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_button = function() { /* ... */ }; instead.

    if(name==="sort_show" || name==="simulate"){
      let button = document.createElement("button");
      button.setAttribute("id", id_name);
      button.setAttribute("class", name);
      button.setAttribute("type", "button");
      button.setAttribute("style", "cursor:pointer");
      if(name==="sort_show"){
        button.innerHTML = "SORT";
      }else if(name==="simulate"){
        button.innerHTML = "Simulate";
      }
      document.body.appendChild(button);
    }
    console.log(name);

console.log looks like debug code. Are you sure you do not want to remove it?

    let button = document.getElementById(id_name);
    button.style.left = left + X_SHIFT + "px";
    button.style.top = top + Y_SHIFT + "px";
  }

  function make_zero(y){

The function make_zero is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_zero = function() { /* ... */ }; instead.

    var canvas = document.createElement("canvas");
    canvas.setAttribute("class", "zero");
    canvas.setAttribute("id", "z"+y);
    canvas.style.position = "absolute";
    canvas.style.left = X_SHIFT + "px";
    canvas.style.top = 100*(y+1) + Y_SHIFT + "px";
    var width = canvas.width;
    var height = canvas.height;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = "./Figures/Zero.png"
    img.onload = function(){
      ctx.drawImage(img, 0, 0, width, height);
    }
    document.body.appendChild(canvas);
  }

  function delete_zero(y){

The function delete_zero is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var delete_zero = function() { /* ... */ }; instead.

    var canvas = document.getElementById("z"+y);
    canvas.remove();
  }

  function draw_operator_text(canvas){

The function draw_operator_text is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var draw_operator_text = function() { /* ... */ }; instead.

    var width = canvas.width;
    var height = canvas.height;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    var id = canvas.object.Operator_id;
    var flag = canvas.object.line_flag;
    console.log(flag, id);

console.log looks like debug code. Are you sure you do not want to remove it?

    img.src = "./Figures/" + Operator_name[flag][id] + ".png";
    ctx.clearRect(0, 0, width, height);
    img.onload = function(){
      ctx.drawImage(img, 0, 0, width, height);
    }
  };

  function make_operator(x, y){

The function make_operator is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_operator = function() { /* ... */ }; instead.

    var canvas = document.createElement("canvas");
    canvas.setAttribute("class", "operator");
    canvas.setAttribute("id", "c"+x+"-"+y);
    canvas.style.position = "absolute";
    canvas.style.left = 100*(x+1) + X_SHIFT + "px";
    canvas.style.top = 100*(y+1) + Y_SHIFT + "px";
    document.body.appendChild(canvas);

    canvas.object = new Operator_Cell(x,y);

    draw_operator_text(canvas);
  }

  function delete_operator(x, y){

The function delete_operator is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var delete_operator = function() { /* ... */ }; instead.

    console.log("delete x:"+x+",y:"+y);

console.log looks like debug code. Are you sure you do not want to remove it?

    var canvas = document.getElementById("c"+x+"-"+y);
    canvas.remove();
    delete_input_theta(x,y);
  }

  function check_switch(){

The function check_switch is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var check_switch = function() { /* ... */ }; instead.

    let checkbox = document.getElementById("controll");
    checkbox.checked = false;
    checkbox = document.getElementById("for_check");
    checkbox.checked = false;
  }

  function delete_results(){

The function delete_results is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var delete_results = function() { /* ... */ }; instead.

    let canvases = document.querySelectorAll(".result_left_top");
    for(let i=0; i<canvases.length; ++i) if(canvases[i]!=null) canvases[i].remove();

Comparing canvases.i to null using the != operator is not safe. Consider using !== instead.

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

    canvases = document.querySelectorAll(".result-bar");
    for(let i=0; i<canvases.length; ++i) if(canvases[i]!=null) canvases[i].remove();

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

    canvases = document.querySelectorAll(".result-index");
    for(let i=0; i<canvases.length; ++i) if(canvases[i]!=null) canvases[i].remove();

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

    canvases = document.querySelectorAll(".sort_show");
    for(let i=0; i<canvases.length; ++i) if(canvases[i]!=null) canvases[i].remove();

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

    /*
    var canvas = document.getElementById("result_left_top");
    if(canvas!=null) canvas.remove();
    for(var i=0; i<num_of_state; i++){
      canvas = document.getElementById("result-bar-"+i);
      if(canvas!=null) canvas.remove();
      canvas = document.getElementById("result-index-"+i);
      if(canvas!=null) canvas.remove();
    }
    var button = document.getElementById("sort_show");
    if(button!=null) button.remove();
    */
  }

  function make_result_left_top(shift){

The function make_result_left_top is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_result_left_top = function() { /* ... */ }; instead.

    var canvas = document.createElement("canvas");
    canvas.setAttribute("class", "result_left_top");
    canvas.setAttribute("id", "result_left_top");
    canvas.style.position = "absolute";
    canvas.style.left = 50 + X_SHIFT + "px";
    canvas.style.top = 100*(N+2) + Y_SHIFT + 300*shift + "px";
    document.body.appendChild(canvas);
  }

  function make_result_bar(index, pos, val, width, shift){

The function make_result_bar is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_result_bar = function() { /* ... */ }; instead.

    var canvas = document.createElement("canvas");
    canvas.setAttribute("class", "result-bar");
    canvas.setAttribute("id", "result-bar-"+index);
    canvas.style.position = "absolute";
    canvas.style.left = 100+pos*width+X_SHIFT+"px";
    canvas.style.top = 100*(N+2)+Y_SHIFT+300*shift+"px";
    canvas.width = width;
    var height = canvas.height;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(width/4, height*(1-val), width/2, height*val);
    document.body.appendChild(canvas);
  }

  function index_converter_to_string(index, show_elements_length){

The function index_converter_to_string is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var index_converter_to_string = function() { /* ... */ }; instead.

    var str="";
    var index_copy = index;
    for(var i=0; i<show_elements_length; i++){
      str = String(index_copy%2) + str;
      index_copy=Math.floor(index_copy/2);
    }
    return str;
  }

  function make_result_index(index, pos, name, width, shift){

The function make_result_index is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_result_index = function() { /* ... */ }; instead.

    var canvas = document.createElement("canvas");
    canvas.setAttribute("class", "result-index");
    canvas.setAttribute("id", "result-index-"+index);
    canvas.style.position = "absolute";
    canvas.style.left = 100+pos*width+X_SHIFT+"px";
    canvas.style.top = 100*(N+2)+200+Y_SHIFT+300*shift+"px";
    var ctx = canvas.getContext('2d');
    ctx.font = '64px serif';
    ctx.fillStyle = '#404040';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText(name, canvas.width/2, canvas.height/2);
    document.body.appendChild(canvas);
  }

  function make_result(index, pos, val, show_elements_length, shift){

The function make_result is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_result = function() { /* ... */ }; instead.

    //var width = (N+2)*25; canvasの幅を動的に変更しようとしてできなかった
    var width = 100;
    make_result_bar(index, pos, val, width, shift);
    var index_string = index_converter_to_string(index, show_elements_length);
    make_result_index(index, pos, index_string, width, shift);
  }

  function show_results(measure_List){

The function show_results is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var show_results = function() { /* ... */ }; instead.

    delete_results();

    for(let j=0; j<measure_List.length; ++j){
      let state_all = [];
      make_result_left_top(j);
      let List = measure_List[j];
      List.forEach((value, key)=>{
        state_all.push([key, value]);
      });
      if(sort_show_flag){
        state_all.sort(function(a, b){return b[1]-a[1]});
      }else{
        state_all.sort(function(a, b){return a[0]-b[0]});
      }
      let measure_indices_length = 0;
      for(let i=0; (1<<i)<state_all.length; ++i){
        measure_indices_length++;
      }
      for(var i=0; i<state_all.length; i++){
        make_result(state_all[i][0], i, state_all[i][1], measure_indices_length, j);
      }
      make_button("sort_show", 20, 100*(N+4)+300*j+10, "sort_show"+j);
      document.querySelector('#sort_show'+j).addEventListener('click', () => {
        sort_show_flag = !sort_show_flag;
        show_results(measure_List);
      })
    }
  }

  function init(){

The function init is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var init = function() { /* ... */ }; instead.

    make_button("wbutton1", 25, 25, "wbutton1");
    document.querySelector('.wbutton1').addEventListener('click', () => {
      for(let y=0; y<N; ++y) make_operator(W,y);

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

      W++;
    })

    make_button("wbutton2", 125, 25, "wbutton2");
    document.querySelector('.wbutton2').addEventListener('click', () => {
      W--;
      if(W==0){
        W=1;
      }else{
        for(let y=0; y<N; ++y){
          delete_operator(W,y);
          delete_input_theta(W,y);
        }
        delete_input_fornum(W);
      }
    })

    make_button("nbutton1", 225, 25, "nbutton1");
    document.querySelector('.nbutton1').addEventListener('click', () => {
      delete_results();
      make_zero(N);
      for(let x=0; x<W; ++x) make_operator(x,N);

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

      N++;
      num_of_state *= 2;
    })

    make_button("nbutton2", 325, 25, "nbutton2");
    document.querySelector('.nbutton2').addEventListener('click', () => {
      delete_results();
      N--;
      if(N==0){
        N=1;
      }else{
        num_of_state/=2;
        delete_zero(N);
        for(let x=0; x<W; ++x){
          delete_operator(x,N);
          delete_input_theta(x,N);
        }
      }
    })

    make_button("simulate", 425, 25, "simulate");
    document.querySelector('.simulate').addEventListener('click', () => {
      sort_show_flag = false;
      let results = Sim.simulate(W,N,num_of_state);
      state = results[0];

The variable state seems to be never used. Consider removing it.

      measure_List = results[1];

The variable measure_List seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.measure_List.

      show_results(measure_List);
      scroll();
    })
    check_switch();

    for(var y=0; y<N; y++){
      make_zero(y);

      for(var x=0; x<W; x++){
        make_operator(x,y);
      }
    }
  }

  function make_input_theta(iIdx,iIdy,canvas){

The function make_input_theta is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_input_theta = function() { /* ... */ }; instead.

    let input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", "input");
    input.setAttribute("class", "theta");
    input.setAttribute("id", "theta-"+iIdx+"-"+iIdy);
    input.setAttribute("value", "0");

    input.style.width = 50 + "px";
    input.style.height = 10 + "px";
    input.style.position = "absolute";
    input.style.left = 100*(iIdx+1) + X_SHIFT + 25 + "px";
    input.style.top = 100*(iIdy+1) + Y_SHIFT + 80 + "px";

    input.addEventListener('keyup', () => {
      canvas.object.theta = input.value;
    })

    document.body.appendChild(input);
  }

  function delete_input_theta(iIdx,iIdy){

The function delete_input_theta is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var delete_input_theta = function() { /* ... */ }; instead.

    let canvas = document.getElementById("theta-"+iIdx+"-"+iIdy);
    if(canvas!=null) canvas.remove();

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Comparing canvas to null using the != operator is not safe. Consider using !== instead.

  }

  function make_input_fornum(iIdx){

The function make_input_fornum is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var make_input_fornum = function() { /* ... */ }; instead.

    let input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", "input");
    input.setAttribute("class", "fornum");
    input.setAttribute("id", "fornum-"+iIdx);
    input.setAttribute("value", "0");

    input.style.width = 50 + "px";
    input.style.height = 10 + "px";
    input.style.position = "absolute";
    input.style.left = 100*(iIdx+1) + X_SHIFT + 25 + "px";
    input.style.top = Y_SHIFT + 80 + "px";

    input.addEventListener('keyup', () => {
      let ob = document.getElementById("c"+iIdx+"-0").object;
      ob.for_num = input.value;
    })

    document.body.appendChild(input);
  }

  function delete_input_fornum(iIdx){

The function delete_input_fornum is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var delete_input_fornum = function() { /* ... */ }; instead.

    let canvas = document.getElementById("fornum-"+iIdx);
    if(canvas!=null) canvas.remove();

Comparing canvas to null using the != operator is not safe. Consider using !== instead.

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

  }
 
  function Operator_Cell(iIdx,iIdy){

The function Operator_Cell is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var Operator_Cell = function() { /* ... */ }; instead.

    var self = this;
    this.mIdx = iIdx;
    this.mIdy = iIdy;
    this.Operator_id = 0;
    this.line_flag = 0;
    this.theta = 0.0;
    this.for_num = 0;
    this.for_count = 0;
    if(iIdy>0){
      this.line_flag = document.getElementById("c"+iIdx+"-"+0).object.line_flag;
      if(this.line_flag===2){
        this.Operator_id = document.getElementById("c"+iIdx+"-"+0).object.Operator_id;
      }
    }
    // line_flag = 0 (nothing) 1 (controll) // 2 (for start) 3 (for end)
    this.mCanvas = document.getElementById("c"+iIdx+"-"+iIdy);

    this.Click = function(e){
      console.log(""+self.mIdx+"-"+self.mIdy+" is clicked ");
      let controll_button = document.getElementById("controll");
      let for_button = document.getElementById("for_check");

      if(for_button.checked){
        if(self.line_flag===2){
          self.Operator_id += 1;
          self.Operator_id %= Operator_name[self.line_flag].length;
          for(let y=0; y<N; ++y){
            let another_canvas = document.getElementById("c"+self.mIdx+"-"+y);
            another_canvas.object.Operator_id = self.Operator_id;
            draw_operator_text(another_canvas);
          }
          if(self.Operator_id===2) make_input_fornum(self.mIdx);

Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

          else delete_input_fornum(self.mIdx);
        }else{
          for(let y=0; y<N; ++y){
            let another_canvas = document.getElementById("c"+self.mIdx+"-"+y);
            if(another_canvas.object.line_flag!==2){
              another_canvas.object.line_flag = 2;
              another_canvas.object.Operator_id = 0;
            }
            delete_input_theta(self.mIdx,y);
            draw_operator_text(another_canvas);
          }
        }
      }else if(controll_button.checked){
        if(self.line_flag===1){

This code seems to be duplicated in your project.

          self.Operator_id += 1;
          self.Operator_id %= Operator_name[self.line_flag].length;
          delete_input_theta(self.mIdx,self.mIdy);
          if(self.Operator_id-1 >= 8 && self.Operator_id-1 <= 10){
            make_input_theta(self.mIdx,self.mIdy,this);
          }
          draw_operator_text(self.mCanvas);
        }else{
          for(var y=0; y<N; y++){
            var another_canvas = document.getElementById("c"+self.mIdx+"-"+y);
            if(another_canvas.object.line_flag!==1){
              if(another_canvas.object.line_flag===2){
                delete_input_fornum(self.mIdx);
                another_canvas.object.Operator_id=0;
              }
              another_canvas.object.line_flag = 1;
              if(another_canvas.object.Operator_id==1){

Comparing another_canvas.object.Operator_id to 1 using the == operator is not safe. Consider using === instead.

                another_canvas.object.Operator_id=0;
              }
            }
            draw_operator_text(another_canvas);
          }
        }
      }else{
        if(self.line_flag!==0){

This code seems to be duplicated in your project.

          for(var y=0; y<N; y++){

The variable y already seems to be declared on line 391. Consider using another variable name or omitting the var keyword.

            var another_canvas = document.getElementById("c"+self.mIdx+"-"+y);

The variable another_canvas already seems to be declared on line 392. Consider using another variable name or omitting the var keyword.

            if(another_canvas.object.line_flag!==0){
              if(another_canvas.object.line_flag===2){
                delete_input_fornum(self.mIdx);
                another_canvas.object.Operator_id=0;
              }
              another_canvas.object.line_flag=0;
              if(another_canvas.object.Operator_id==1){
                another_canvas.object.Operator_id=0;
              }
            }
            draw_operator_text(another_canvas);
          }
        }else{
          self.Operator_id += 1;
          self.Operator_id %= Operator_name[self.line_flag].length;
          delete_input_theta(self.mIdx,self.mIdy);
          if(self.Operator_id-1 >= 8 && self.Operator_id-1 <= 10){
            make_input_theta(self.mIdx,self.mIdy,this);
          }
          draw_operator_text(self.mCanvas);
        }
      }
    }

    this.mCanvas.onclick = this.Click;
  };

  function scroll(){

The function scroll is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using var scroll = function() { /* ... */ }; instead.

    /*
    var element = document.documentElement;
    var Target = element.scrollHeight - element.clientHeight;
    var Pos = window.pageYOffset;
    var move = Target/20;
    var interval = 1000/100;
    window.scrollBy(0, move);
    var rep = setTimeout(scroll, interval);
    if(Pos === Target){
      clearTimeout(rep);
    }
    //window.scrollTo(0, Target);
    */
  }

  window.onload = function(){
    init();
  };

})();