BrowserLogic/js/topmenu/topmenu.js

function BuildTopMenu() {
  // Make sure settings are set correct
  let tfm_ShowConns = document.getElementById("tfm_ShowConnections");
  let tfm_ConnLayer = document.getElementById("tfm_ConnectionLayer");

  if (logicEngine.Settings.HideConnections) {
    let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = " ";
  } else {
    let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
  }
  if (!logicEngine.Settings.TopConnections) {
    tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Above';
  } else {
    tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Below';
  }
  if (!logicEngine.Settings.ShowFPS) {
    let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
  } else {
    let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
  }
  if (!logicEngine.Settings.ShowGrid) {
    let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
  } else {
    let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
  }
  if (!logicEngine.Settings.SnapGrid) {
    let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
  } else {
    let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
  }
  in_GridSize.value = logicEngine.Settings.GridSize;
}

function disableSelectedTFMs(bool) {
  let tfm_Delete     = document.getElementById("tfm_Delete");
  let tfm_Disconnect = document.getElementById("tfm_Disconnect");

  if (bool) {
    tfm_Delete.classList.add("disabled");
    tfm_Disconnect.classList.add("disabled");
  } else {
    tfm_Delete.classList.remove("disabled");
    tfm_Disconnect.classList.remove("disabled");
  }
}

function hideMenus() {
  let tds = document.getElementsByClassName("top-menu-div");
  for (let a = 0; a < tds.length; a++) {
    tds[a].setAttribute('style','display: none;');
  }
}

function TopMenuListeners() {
  /*
      All the listeners for the top menu
  */
  let tfm_CreateIC = document.getElementById("tfm_CreateIC");
  tfm_CreateIC.addEventListener('click', function (evt) {
    if (!tfm_CreateIC.classList.contains("disabled")) {
      let CreateICBox = document.getElementById("CreateICBox");
      CreateICBox.style.display = "block";
      setTimeout(function () {
        hideMenus()
      }, 10);
    }
  });

  let tfm_New = document.getElementById("tfm_New");
  tfm_New.addEventListener('click', function (evt) {
    logicEngine.ActiveContainer = new elementContainer();
    logicEngine.Ctx.setTransform(1, 0, 0, 1, 0, 0);
    logicEngine.Panning.OffsetX = 0;
    logicEngine.Panning.OffsetY = 0;
    HidePropertiesWindow();
    disableSelectedMenus(true);

    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Cut = document.getElementById("tfm_Cut");
  tfm_Cut.addEventListener('click', function (evt) {
    document.execCommand('cut');
    disableSelectedMenus(true);
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Copy = document.getElementById("tfm_Copy");
  tfm_Copy.addEventListener('click', function (evt) {
    document.execCommand('copy');
    disableSelectedMenus(true);
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Paste = document.getElementById("tfm_Paste");
  tfm_Paste.addEventListener('click', function (evt) {
    document.execCommand('paste');
    disableSelectedMenus(true);
    setTimeout(function () {
      hideMenus()
    }, 10);
  });


  let tfm_Delete = document.getElementById("tfm_Delete");
  tfm_Delete.addEventListener('click', function (evt) {
    logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
    HidePropertiesWindow();
    disableSelectedMenus(true);
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Disconect = document.getElementById("tfm_Disconnect");
  tfm_Disconect.addEventListener('click', function (evt) {
    for (let a = 0; a < logicEngine.ActiveContainer.Selected.length; a++) {
      logicEngine.ActiveContainer.Selected[a]?.Disconnect();
    }
    logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_SelectAll = document.getElementById("tfm_SelectAll");
  tfm_SelectAll.addEventListener('click', function (evt) {
    let elements = new Array();
    for (let a = 0; a < logicEngine.ActiveContainer.Elements?.length; a++) {
      elements.push(logicEngine.ActiveContainer.Elements[a]);
    }
    logicEngine.ActiveContainer.Selected = elements;
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Save = document.getElementById("tfm_Save");
  tfm_Save.addEventListener('click', function (evt) {
    let saveWindow = document.getElementById("SaveWindow");
    saveWindow.style.display = "block";
    saveWindow.style.left = Math.round((window.innerWidth / 2) - (saveWindow.clientWidth / 2)) + "px";
    saveWindow.style.top = Math.round((window.innerHeight / 2) - (saveWindow.clientHeight / 2)) + "px";
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  tfm_Open.addEventListener('click', function (evt) {
    setTimeout(function () {
      hideMenus()
    }, 10);
    file_Load.click();
  });

  /*
      Generate the top menu item listeners
   */
  let tfms = document.getElementsByClassName("top-menu-item");
  for (let a = 0; a < tfms.length; a++) {
    tfms[a].addEventListener("click", function (evt) {
      let tfm = document.getElementById(tfms[a].id + "Menu");
      let tfm_rect = tfms[a].getBoundingClientRect();
      tfm.style.left = (tfm_rect.left) + "px";
      tfm.style.top = (tfm_rect.top + tfm_rect.height) + "px";
      tfm.style.display = "block";
    });
    let tfm = document.getElementById(tfms[a].id + "Menu");
    if (!tfm.classList.contains("keybinding-complete")) {
      tfm.classList.add("keybinding-complete");
      let menuItems = tfm?.getElementsByTagName("li");
      for (let b = 0; b < menuItems?.length; b++) {
        if (menuItems[b]?.getAttribute("value")) menuItems[b].innerHTML = '<span class="menuitem-label">' + menuItems[b].innerHTML + '</span><span class="menuitem-shortcut">' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + '</span>';
      }
    }
  }

  let tfm_About = document.getElementById("tfm_About");
  tfm_About.addEventListener("click", function (evt) {
    let WelcomeScreen = document.getElementById("WelcomeWindow");
    WelcomeScreen.style.display = "block";
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_ShowConns = document.getElementById("tfm_ShowConnections");
  tfm_ShowConns.addEventListener("click", function (evt) {
    if (logicEngine.Settings.HideConnections) {
      let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
      sgSpan.innerText = "✓";
      logicEngine.Settings.HideConnections = false;
    } else {
      let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
      sgSpan.innerHTML = "&nbsp;";
      logicEngine.Settings.HideConnections = true;
    }
    SaveSettings();
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_ConnLayer = document.getElementById("tfm_ConnectionLayer");
  tfm_ConnLayer.addEventListener("click", function (evt) {
    if (logicEngine.Settings.TopConnections) {
      tfm_ConnLayer.innerText = "Connections Above";
      logicEngine.Settings.TopConnections = false;
    } else {
      tfm_ConnLayer.innerText = "Connections Below";
      logicEngine.Settings.TopConnections = true;
    }
    SaveSettings();
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_ShowFPS = document.getElementById("tfm_ShowFPS");
  tfm_ShowFPS.addEventListener("click", function (evt) {
    if (logicEngine.Settings.ShowFPS) {
      let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
      sgSpan.innerHTML = "&nbsp;";
      logicEngine.Settings.ShowFPS = false;
    } else {
      let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
      sgSpan.innerText = "✓";
      logicEngine.Settings.ShowFPS = true;
    }
    SaveSettings();
    logicEngine.Resize("");
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Pan2Center = document.getElementById("tfm_Pan2Center");
  tfm_Pan2Center.addEventListener("click", function (evt) {
    logicEngine.Ctx.setTransform(1, 0, 0, 1, 0, 0);
    logicEngine.Panning.OffsetX = 0;
    logicEngine.Panning.OffsetY = 0;
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_ShowGrid = document.getElementById("tfm_ShowGrid");
  tfm_ShowGrid.addEventListener("click", function (evt) {
    if (logicEngine.Settings.ShowGrid) {
      let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
      sgSpan.innerHTML = "&nbsp;";
      logicEngine.Settings.ShowGrid = false;
    } else {
      let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
      sgSpan.innerText = "✓";
      logicEngine.Settings.ShowGrid = true;
    }
    SaveSettings();
    logicEngine.Resize("");
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_SnapGrid = document.getElementById("tfm_SnapGrid");
  tfm_SnapGrid.addEventListener("click", function (evt) {
    if (logicEngine.Settings.SnapGrid) {
      let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
      sgSpan.innerHTML = "&nbsp;";
      logicEngine.Settings.SnapGrid = false;
    } else {
      let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
      sgSpan.innerText = "✓";
      logicEngine.Settings.SnapGrid = true;
    }
    SaveSettings();
    logicEngine.Resize("");
    setTimeout(function () {
      hideMenus()
    }, 10);
  });

  let tfm_Help = document.getElementById("tfm_Help");
  tfm_Help.addEventListener("click", function (evt) {
    setTimeout(function () {
      hideMenus()
    }, 10);
    ShowHelp();
  });
}