0.4.13: Elements are now dragged to position, some refacoring of code

README.md

@@ -14,6 +14,10 @@ LZ-String, Copyright 2013 pieroxy under MIT license https://github.com/pieroxy/l
 
 ## Changelog
 
+### 0.4.13
+
+* Clicking on an element on the toolbar no longer spawns an element to the work area directly, but rather lets the user place it.
+
 ### 0.4.12
 
 * Fixed bug where pastes would get offset when canvas is panned

css/main.css

@@ -382,6 +382,13 @@ textarea {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
 }
 
+#floatCanvas {
+  display: none;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+}
+
 #darkout-overlay {
   position: absolute;
   left: 0px;

index.html

@@ -186,8 +186,11 @@
       </div>
     </div>
   </div>
+  <div id="floatCanvas"><canvas></canvas></div>
   <div id="darkout-overlay"></div>
   <script src="js/vendor/lz-string.min.js"></script>
+  <script src="js/topmenu/topmenu.js"></script>
+  <script src="js/rightclickmenu/rightclickmenu.js"></script>
   <script src="js/globalfunctions.js"></script>
   <script src="js/baseclasses.js"></script>
   <script src="js/scheduler.js"></script>
@@ -199,8 +202,8 @@
   <script src="js/elements/TimingElements.js"></script>
   <script src="js/elements/ICElements.js"></script>
   <script src="js/logicengine.js"></script>
+  <script src="js/mainevents.js"></script>
   <script src="js/main.js"></script>
-
 </body>
 
 </html>

js/globalfunctions.js

@@ -33,7 +33,26 @@ function addElement(RestoreData = null,refClass,props) {
   }
   logicEngine.ActiveContainer.AddElement(newElement);
   logicEngine.ActiveContainer.Select(newElement);
-  disableSelectedRCMs(false);
+
+  logicEngine.MovingElement = new Array(logicEngine.ActiveContainer.Selected.length);
+
+  for (let b = 0; b < logicEngine.ActiveContainer.Selected.length; b++) {
+    logicEngine.ActiveContainer.Selected[b].X =  (logicEngine.Mouse.x - logicEngine.Panning.OffsetX) - (logicEngine.ActiveContainer.Selected[b].Width/2);
+    logicEngine.ActiveContainer.Selected[b].Y = (logicEngine.Mouse.y - logicEngine.Panning.OffsetY) - (logicEngine.ActiveContainer.Selected[b].Height/2);
+    logicEngine.MovingElement[b] = {
+      StartX: logicEngine.ActiveContainer.Selected[b].X,
+      StartY: logicEngine.ActiveContainer.Selected[b].Y
+    };
+    logicEngine.MovingElementMouseStartX = logicEngine.Mouse.x;
+    logicEngine.MovingElementMouseStartY = logicEngine.Mouse.y;
+  }
+  let rect = logicEngine.Canvas.getBoundingClientRect();
+  let realMouseX = logicEngine.Mouse.x + rect.left;
+  let realMouseY = logicEngine.Mouse.y + rect.top;
+
+  logicEngine.MouseDown = true;
+  logicEngine.DrawOffCanvasElement({clientX: realMouseX, clientY: realMouseY});
+  disableSelectedMenus(false);
   return newElement;
 }
 
@@ -171,43 +190,6 @@ function GetCopyObject() {
   }
 }
 
-function BuildTopMenu() {
-  // Make sure settings are set correct
-  if (logicEngine.Settings.HideConnections) {
-    let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
-    sgSpan.innerHTML = "&nbsp;";
-  } 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 BuildToolbox() {
   let toolbox = document.getElementById("inner-left-menu");
@@ -267,31 +249,9 @@ function isVersionNewer(version1,version2,orEqual = true) {
   return false;
 }
 
-function disableSelectedRCMs(bool) {
+function disableSelectedMenus(bool) {
-  let rcm_Delete     = document.getElementById("rcm_Delete");
+  disableSelectedRCMs(bool);
-  let rcm_Disconnect = document.getElementById("rcm_Disconnect");
+  disableSelectedTFMs(bool);
-  let tfm_Delete     = document.getElementById("tfm_Delete");
-  let tfm_Disconnect = document.getElementById("tfm_Disconnect");
-
-  if (bool) {
-    rcm_Delete.classList.add("disabled");
-    rcm_Disconnect.classList.add("disabled");
-    tfm_Delete.classList.add("disabled");
-    tfm_Disconnect.classList.add("disabled");
-  } else {
-    rcm_Delete.classList.remove("disabled");
-    rcm_Disconnect.classList.remove("disabled");
-    tfm_Delete.classList.remove("disabled");
-    tfm_Disconnect.classList.remove("disabled");
-  }
-}
-
-function showRCM(evt) {
-  evt.preventDefault();
-  let rcm = document.getElementById("RightClickMenu");
-  rcm.style.left = (evt.clientX-40) + "px";
-  rcm.style.top = (evt.clientY-25) + "px";
-  rcm.style.display = "block";
 }
 
 function ShowHelp() {
@@ -306,14 +266,6 @@ function HideHelp() {
   helpWindow.style.display = "none";
 }
 
-function hideMenus() {
-  let tds = document.getElementsByClassName("top-menu-div");
-  for (let a = 0; a < tds.length; a++) {
-    tds[a].setAttribute('style','display: none;');
-  }
-
-}
-
 function SaveSettings() {
   localStorage.setItem("LogicEngineSettings",JSON.stringify(logicEngine.Settings));
   console.log("Settings Saved");

js/logicengine.js

@@ -150,7 +150,7 @@ class LogicEngineSettings {
                         CreateIC:           {Key:         "i",    // lowercase
                                              Alt:         false,
                                              Shift:       true,
-                                             Ctrl:        true,
+                                             Ctrl:        false,
                                              Meta:        false,
                                              Name:        "Create IC",
                                              Description: "Turns the current design into an IC",
@@ -284,6 +284,7 @@ class LogicEngine {
         }
         element.MouseDown(mousePos);
       } else {
+        this.HideOffCanvasElement();
         this.MouseDown = true;
         this.ActiveLink = false;
         if (this.ControlPressed) {
@@ -303,9 +304,9 @@ class LogicEngine {
         }
       }
       if (this.ActiveContainer.Selected?.length > 0) {
-        disableSelectedRCMs(false);
+        disableSelectedMenus(false);
       } else {
-        disableSelectedRCMs(true);
+        disableSelectedMenus(true);
       }
     }
   }
@@ -329,10 +330,12 @@ class LogicEngine {
       this.ActiveContainer.Selected = false;
       let PropertiesBox = document.getElementById("PropertiesBox");
       PropertiesBox.style.display = "none";
+      this.HideOffCanvasElement();
     }
 
     this.MovingElement = false;
     this.MouseDown = false;
+    this.HideOffCanvasElement();
 
     if (this.MultiSelectStart.InProgress) {
       this.MultiSelectStart.InProgress = false;
@@ -345,9 +348,33 @@ class LogicEngine {
     }
 
     if (this.ActiveContainer.Selected?.length > 0) {
-      disableSelectedRCMs(false);
+      disableSelectedMenus(false);
     } else {
-      disableSelectedRCMs(true);
+      disableSelectedMenus(true);
+    }
+  }
+  HideOffCanvasElement() {
+    let floatingCanvasDiv = document.getElementById("floatCanvas");
+    floatingCanvasDiv.style.display = "none";
+  }
+
+  DrawOffCanvasElement(evt) {
+    let rect = this.Canvas.getBoundingClientRect();
+    let floatingCanvasDiv = document.getElementById("floatCanvas");
+    let floatingCanvas = floatingCanvasDiv.getElementsByTagName("canvas")[0];
+    let floatingCtx = floatingCanvas.getContext("2d");
+
+    if ((evt.clientX >= (rect.left - (this.ActiveContainer.Selected[0].Width/2)))) {
+      floatingCanvasDiv.style.display = "none";
+    } else {
+      floatingCanvas.width = this.ActiveContainer.Selected[0].Width;
+      floatingCanvas.height = this.ActiveContainer.Selected[0].Height;
+      floatingCtx.clearRect(0, 0, floatingCanvas.width, floatingCanvas.height);
+      //console.log(this.ActiveContainer.Selected[0]);
+      floatingCtx.drawImage(this.ActiveContainer.Selected[0].StaticCanvas, 0, 0);
+      floatingCanvasDiv.style.left = (evt.clientX - (this.ActiveContainer.Selected[0].Width / 2)) + "px";
+      floatingCanvasDiv.style.top = (evt.clientY - (this.ActiveContainer.Selected[0].Height / 2)) + "px";
+      floatingCanvasDiv.style.display = "block";
     }
   }
 
@@ -358,6 +385,7 @@ class LogicEngine {
     if(this.MouseDown) {
       //console.log('Mouse at position: ' + mousePos.x + ',' + mousePos.y);
       if (this.MovingElement) {
+        if (this.MovingElement.length == 1) this.DrawOffCanvasElement(evt);
 
         if ((performance.now() - this.MouseDownTime) > 100) {
           let xOffset = mousePos.x - this.MovingElementMouseStartX;
@@ -394,6 +422,7 @@ class LogicEngine {
       }
     } else {
       this.ActiveContainer.checkMouseBounds(mousePos);
+      if (!this.MovingElement) this.HideOffCanvasElement();
     }
   }
 

js/main.js

@@ -2,444 +2,23 @@
     MatCat BrowserLogic Simulator
  */
 
-let Version = "0.4.12";
+let Version = "0.4.13";
 
 let spanVersion = document.getElementById("version");
 spanVersion.innerText = Version;
+
 // get the canvas and get the engine object going
 let lCanvasElement = document.getElementById("LogicPlane");
 let logicEngine = new LogicEngine(lCanvasElement);
 
-// Get the game Tick going, this will be 4ms for now which is the fastest that is supported
+// Get the game Tick going, set to 1ms but most browsers will min to 4ms
-// by the HTML5 spec!
+setInterval(logicEngine.Scheduler.Tick.bind(logicEngine.Scheduler), 1);
-setInterval(logicEngine.Scheduler.Tick.bind(logicEngine.Scheduler), 4);
-
-window.addEventListener('resize', function(evt) {
-  logicEngine.Resize(evt);
-}, false);
-
-document.addEventListener('copy', function(evt) {
-  evt.preventDefault();
-    let copyObject = GetCopyObject();
-    if (!copyObject) return;
-
-    evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
-    evt.clipboardData.setData('text',JSON.stringify(copyObject));
-});
-
-document.addEventListener('cut', function(evt) {
-  evt.preventDefault();
-  let copyObject = GetCopyObject();
-  if (!copyObject) return;
-
-  evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
-  evt.clipboardData.setData('text',JSON.stringify(copyObject));
-
-  logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
-  disableSelectedRCMs(true);
-});
-
-
-document.addEventListener('paste', function(evt) {
-  evt.preventDefault();
-  if (evt.clipboardData.getData('logicparts/json')) {
-    //console.log(evt.clipboardData.getData('logicparts/json'));
-    loadActiveContainer(JSON.parse(evt.clipboardData.getData('logicparts/json')).Elements);
-  } else {
-    // Lets see if they pasted a proper LogicParts format atleast
-    if (evt.clipboardData.getData('text')) {
-      let jsonObj = JSON.parse(evt.clipboardData.getData('text'));
-      if (jsonObj?.LogicParts && jsonObj?.Paste) {
-        console.log("We got a paste of a general text object that is valid");
-        loadActiveContainer(jsonObj.Elements);
-      }
-    }
-  }
-});
-
-
-window.addEventListener('keydown', function(evt) {
-  logicEngine.Key_Press(evt);
-}, false);
-
-window.addEventListener('keyup', function(evt) {
-  logicEngine.Key_Up(evt);
-}, false);
-
-window.addEventListener('mouseup', function(evt) {
-  let rcm = document.getElementById("RightClickMenu");
-  rcm.style.display = "none";
-  let tfms = document.getElementsByClassName("top-menu-div");
-  for (let a = 0; a < tfms.length; a++) {
-    tfms[a].style.display = "none";
-  }
-}, false);
-
-
-lCanvasElement.addEventListener('mousedown', function(evt) {
-  logicEngine.Mouse_Down(evt);
-}, false);
-
-lCanvasElement.addEventListener('mouseup', function(evt) {
-  logicEngine.Mouse_Up(evt);
-}, false);
-
-window.addEventListener('mousemove', function(evt) {
-  logicEngine.Mouse_Move(evt);
-}, false);
 
 // Get the engine going
 logicEngine.StartEngine();
+RegisterEvents();
+TopMenuListeners();
+RightClickMenuListeners();
 BuildToolbox();
-
-// Setup interface buttons
-let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
-btn_CloseWelcome.addEventListener('click', function(evt) {
-  let WelcomeScreen = document.getElementById("WelcomeWindow");
-  let DarkOverlay = document.getElementById("darkout-overlay");
-  WelcomeScreen.style.display = "none";
-  DarkOverlay.style.display = "none";
-  let chk_dontDisplayWelcome = document.getElementById("chk_dontDisplayWelcome");
-  if (chk_dontDisplayWelcome.checked) {
-    setCookie("hidewelcomescreen","true",3600);
-  }
-}, false);
-
-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 rcm_CreateIC = document.getElementById("rcm_CreateIC");
-rcm_CreateIC.addEventListener('click', function(evt) {
-  if (!this.classList.contains("disabled")) {
-    let CreateICBox = document.getElementById("CreateICBox");
-    CreateICBox.style.display = "block";
-  }
-});
-
-let btn_CreateIC_Cancel = document.getElementById("btn_CreateIC_Cancel");
-btn_CreateIC_Cancel.addEventListener('click', function(evt) {
-  let CreateICBox = document.getElementById("CreateICBox");
-  CreateICBox.style.display = "none";
-});
-
-let btn_CreateIC_Create = document.getElementById("btn_CreateIC_Create");
-btn_CreateIC_Create.addEventListener('click', function(evt) {
-  let CreateICBox = document.getElementById("CreateICBox");
-  let ICName = document.getElementById("ICName");
-  let ICDescription = document.getElementById("ICDescription");
-  createIC(logicEngine.ActiveContainer,ICName.value,ICDescription.value);
-  CreateICBox.style.display = "none";
-});
-
-let ICName = document.getElementById("ICName");
-let ICDescription = document.getElementById("ICDescription");
-
-ICName.addEventListener('input', function(evt){
-  btn_CreateIC_Create.disabled = true;
-  if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
-});
-
-ICDescription.addEventListener('input', function(evt){
-  btn_CreateIC_Create.disabled = true;
-  if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
-});
-
-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;
-  setTimeout(function(){hideMenus()},10);
-});
-
-let rcm_New = document.getElementById("rcm_New");
-rcm_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;
-
-});
-
-let rcm_Delete = document.getElementById("rcm_Delete");
-rcm_Delete.addEventListener('click', function(evt) {
-  logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
-  disableSelectedRCMs(true);
-});
-
-let tfm_Cut = document.getElementById("tfm_Cut");
-tfm_Cut.addEventListener('click', function(evt) {
-  document.execCommand('cut');
-  disableSelectedRCMs(true);
-  setTimeout(function(){hideMenus()},10);
-});
-
-let tfm_Copy = document.getElementById("tfm_Copy");
-tfm_Copy.addEventListener('click', function(evt) {
-  document.execCommand('copy');
-  disableSelectedRCMs(true);
-  setTimeout(function(){hideMenus()},10);
-});
-
-let tfm_Paste = document.getElementById("tfm_Paste");
-tfm_Paste.addEventListener('click', function(evt) {
-  document.execCommand('paste');
-  disableSelectedRCMs(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"});
-  disableSelectedRCMs(true);
-  setTimeout(function(){hideMenus()},10);
-});
-
-
-let rcm_Disconect = document.getElementById("rcm_Disconnect");
-rcm_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);
-});
-
-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);
-});
-
-let btn_SaveDesign = document.getElementById("btn_SaveDesign");
-btn_SaveDesign.addEventListener('click', function(evt) {
-  let DesignName = document.getElementById("saveName");
-  let savestate = createSaveState(logicEngine.ActiveContainer);
-  savestate.Name = DesignName.value;
-  let saveWindow = document.getElementById("SaveWindow");
-  saveWindow.style.display = "none";
-  download(savestate.Name + ".LogicParts",savestate);
-});
-
-let btn_Save_Cancel = document.getElementById("btn_CancelSave");
-btn_Save_Cancel.addEventListener('click', function(evt) {
-  let saveWindow = document.getElementById("SaveWindow");
-  saveWindow.style.display = "none";
-});
-
-let file_Load = document.getElementById("file_Load");
-let tfm_Open = document.getElementById("tfm_Open");
-tfm_Open.addEventListener('click', function(evt) {
-  setTimeout(function(){hideMenus()},10);
-  file_Load.click();
-});
-file_Load.addEventListener('change', function(evt) {
-  let fread = new FileReader();
-  fread.onload = (function (theFile) {
-    return function (e) {
-      try {
-        let restoredata = JSON.parse(e.target.result);
-
-        loadresult = loadsave(restoredata);
-        if (!loadresult) {
-          switch(loadresult) {
-            case -1:
-              alert("Invalid LogicParts file!");
-              break;
-            case -2:
-              alert("The version of MatCat BrowserLogic cannot open this save version!");
-              break;
-            default:
-              alert("Bad save file!");
-              break;
-          }
-        }
-      } catch (ex) {
-        alert("Bad file! " + ex);
-        console.log(ex);
-      }
-    }
-  })(evt.target.files[0]);
-  fread.readAsText(evt.target.files[0]);
-}, false);
-
-/*
-    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 in_GridSize = document.getElementById("in_GridSize");
-in_GridSize.addEventListener("change", function (evt) {
-  logicEngine.Settings.GridSize = parseInt(in_GridSize.value);
-  logicEngine.Resize("");
-  SaveSettings();
-  //setTimeout(function(){hideMenus()},10);
-});
-
-let tfm_Help = document.getElementById("tfm_Help");
-tfm_Help.addEventListener("click", function (evt) {
-  setTimeout(function(){hideMenus()},10);
-  ShowHelp();
-});
-
-
-let helpWindow = document.getElementById("HelpWindow");
-let helpWindow_Close = helpWindow.getElementsByClassName("CloseWindow")[0];
-helpWindow_Close.addEventListener("click", function (evt) {
-  HideHelp();
-});
-
-
-let leftmenu = document.getElementById("left-menu");
-let propwin = document.getElementById("PropertiesBox");
-lCanvasElement.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
-leftmenu.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
-propwin.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
-
-let topbar = document.getElementById("top-bar");
-topbar.addEventListener( "contextmenu", function(evt) {
-  evt.preventDefault();
-});
 BuildTopMenu();
 CheckForWelcomeCookie();

js/mainevents.js

@@ -0,0 +1,212 @@
+function RegisterEvents() {
+
+  /*
+      DISPLAY AND RESIZING
+   */
+  window.addEventListener('resize', function (evt) {
+    logicEngine.Resize(evt);
+  }, false);
+
+
+  /*
+      SYSTEM EVENTS
+   */
+  document.addEventListener('copy', function (evt) {
+    evt.preventDefault();
+    let copyObject = GetCopyObject();
+    if (!copyObject) return;
+
+    evt.clipboardData.setData('logicparts/json', JSON.stringify(copyObject));
+    evt.clipboardData.setData('text', JSON.stringify(copyObject));
+  });
+
+  document.addEventListener('cut', function (evt) {
+    evt.preventDefault();
+    let copyObject = GetCopyObject();
+    if (!copyObject) return;
+
+    evt.clipboardData.setData('logicparts/json', JSON.stringify(copyObject));
+    evt.clipboardData.setData('text', JSON.stringify(copyObject));
+
+    logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
+    disableSelectedMenus(true);
+  });
+
+  document.addEventListener('paste', function (evt) {
+    evt.preventDefault();
+    if (evt.clipboardData.getData('logicparts/json')) {
+      //console.log(evt.clipboardData.getData('logicparts/json'));
+      loadActiveContainer(JSON.parse(evt.clipboardData.getData('logicparts/json')).Elements);
+    } else {
+      // Lets see if they pasted a proper LogicParts format atleast
+      if (evt.clipboardData.getData('text')) {
+        let jsonObj = JSON.parse(evt.clipboardData.getData('text'));
+        if (jsonObj?.LogicParts && jsonObj?.Paste) {
+          console.log("We got a paste of a general text object that is valid");
+          loadActiveContainer(jsonObj.Elements);
+        }
+      }
+    }
+  });
+
+  /*
+      KEYBOARD EVENTS
+   */
+  window.addEventListener('keydown', function (evt) {
+    logicEngine.Key_Press(evt);
+  }, false);
+
+  window.addEventListener('keyup', function (evt) {
+    logicEngine.Key_Up(evt);
+  }, false);
+
+  /*
+      MOUSE EVENTS
+   */
+  window.addEventListener('mouseup', function (evt) {
+    let rcm = document.getElementById("RightClickMenu");
+    rcm.style.display = "none";
+    let tfms = document.getElementsByClassName("top-menu-div");
+    for (let a = 0; a < tfms.length; a++) {
+      tfms[a].style.display = "none";
+    }
+  }, false);
+
+  lCanvasElement.addEventListener('mousedown', function (evt) {
+    logicEngine.Mouse_Down(evt);
+  }, false);
+
+  lCanvasElement.addEventListener('mouseup', function (evt) {
+    logicEngine.Mouse_Up(evt);
+  }, false);
+
+  window.addEventListener('mousemove', function (evt) {
+    logicEngine.Mouse_Move(evt);
+  }, false);
+
+
+  /*
+      WINDOW CONTROLS
+   */
+  let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
+  btn_CloseWelcome.addEventListener('click', function (evt) {
+    let WelcomeScreen = document.getElementById("WelcomeWindow");
+    let DarkOverlay = document.getElementById("darkout-overlay");
+    WelcomeScreen.style.display = "none";
+    DarkOverlay.style.display = "none";
+    let chk_dontDisplayWelcome = document.getElementById("chk_dontDisplayWelcome");
+    if (chk_dontDisplayWelcome.checked) {
+      setCookie("hidewelcomescreen", "true", 3600);
+    }
+  }, false);
+
+  let btn_CreateIC_Cancel = document.getElementById("btn_CreateIC_Cancel");
+  btn_CreateIC_Cancel.addEventListener('click', function (evt) {
+    let CreateICBox = document.getElementById("CreateICBox");
+    CreateICBox.style.display = "none";
+  });
+
+  let btn_CreateIC_Create = document.getElementById("btn_CreateIC_Create");
+  btn_CreateIC_Create.addEventListener('click', function (evt) {
+    let CreateICBox = document.getElementById("CreateICBox");
+    let ICName = document.getElementById("ICName");
+    let ICDescription = document.getElementById("ICDescription");
+    createIC(logicEngine.ActiveContainer, ICName.value, ICDescription.value);
+    CreateICBox.style.display = "none";
+  });
+
+  let ICName = document.getElementById("ICName");
+  let ICDescription = document.getElementById("ICDescription");
+
+  ICName.addEventListener('input', function (evt) {
+    btn_CreateIC_Create.disabled = true;
+    if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
+  });
+
+  ICDescription.addEventListener('input', function (evt) {
+    btn_CreateIC_Create.disabled = true;
+    if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
+  });
+
+  let btn_SaveDesign = document.getElementById("btn_SaveDesign");
+  btn_SaveDesign.addEventListener('click', function (evt) {
+    let DesignName = document.getElementById("saveName");
+    let savestate = createSaveState(logicEngine.ActiveContainer);
+    savestate.Name = DesignName.value;
+    let saveWindow = document.getElementById("SaveWindow");
+    saveWindow.style.display = "none";
+    download(savestate.Name + ".LogicParts", savestate);
+  });
+
+  let btn_Save_Cancel = document.getElementById("btn_CancelSave");
+  btn_Save_Cancel.addEventListener('click', function (evt) {
+    let saveWindow = document.getElementById("SaveWindow");
+    saveWindow.style.display = "none";
+  });
+
+  let file_Load = document.getElementById("file_Load");
+  let tfm_Open = document.getElementById("tfm_Open");
+
+  file_Load.addEventListener('change', function (evt) {
+    let fread = new FileReader();
+    fread.onload = (function (theFile) {
+      return function (e) {
+        try {
+          let restoredata = JSON.parse(e.target.result);
+
+          loadresult = loadsave(restoredata);
+          if (!loadresult) {
+            switch (loadresult) {
+              case -1:
+                alert("Invalid LogicParts file!");
+                break;
+              case -2:
+                alert("The version of MatCat BrowserLogic cannot open this save version!");
+                break;
+              default:
+                alert("Bad save file!");
+                break;
+            }
+          }
+        } catch (ex) {
+          alert("Bad file! " + ex);
+          console.log(ex);
+        }
+      }
+    })(evt.target.files[0]);
+    fread.readAsText(evt.target.files[0]);
+  }, false);
+
+
+  let in_GridSize = document.getElementById("in_GridSize");
+  in_GridSize.addEventListener("change", function (evt) {
+    logicEngine.Settings.GridSize = parseInt(in_GridSize.value);
+    logicEngine.Resize("");
+    SaveSettings();
+    //setTimeout(function(){hideMenus()},10);
+  });
+
+  let helpWindow = document.getElementById("HelpWindow");
+  let helpWindow_Close = helpWindow.getElementsByClassName("CloseWindow")[0];
+  helpWindow_Close.addEventListener("click", function (evt) {
+    HideHelp();
+  });
+
+
+  let leftmenu = document.getElementById("left-menu");
+  let propwin = document.getElementById("PropertiesBox");
+  lCanvasElement.addEventListener("contextmenu", function (evt) {
+    showRCM(evt)
+  });
+  leftmenu.addEventListener("contextmenu", function (evt) {
+    showRCM(evt)
+  });
+  propwin.addEventListener("contextmenu", function (evt) {
+    showRCM(evt)
+  });
+
+  let topbar = document.getElementById("top-bar");
+  topbar.addEventListener("contextmenu", function (evt) {
+    evt.preventDefault();
+  });
+}

js/rightclickmenu/rightclickmenu.js

@@ -0,0 +1,53 @@
+function disableSelectedRCMs(bool) {
+  let rcm_Delete     = document.getElementById("rcm_Delete");
+  let rcm_Disconnect = document.getElementById("rcm_Disconnect");
+
+  if (bool) {
+    rcm_Delete.classList.add("disabled");
+    rcm_Disconnect.classList.add("disabled");
+  } else {
+    rcm_Delete.classList.remove("disabled");
+    rcm_Disconnect.classList.remove("disabled");
+  }
+}
+
+function showRCM(evt) {
+  evt.preventDefault();
+  let rcm = document.getElementById("RightClickMenu");
+  rcm.style.left = (evt.clientX-40) + "px";
+  rcm.style.top = (evt.clientY-25) + "px";
+  rcm.style.display = "block";
+}
+
+function RightClickMenuListeners() {
+  let rcm_CreateIC = document.getElementById("rcm_CreateIC");
+  rcm_CreateIC.addEventListener('click', function (evt) {
+    if (!this.classList.contains("disabled")) {
+      let CreateICBox = document.getElementById("CreateICBox");
+      CreateICBox.style.display = "block";
+    }
+  });
+
+  let rcm_New = document.getElementById("rcm_New");
+  rcm_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;
+
+  });
+
+  let rcm_Delete = document.getElementById("rcm_Delete");
+  rcm_Delete.addEventListener('click', function (evt) {
+    logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
+    disableSelectedMenus(true);
+  });
+
+  let rcm_Disconect = document.getElementById("rcm_Disconnect");
+  rcm_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);
+  });
+}

js/topmenu/topmenu.js

@@ -0,0 +1,300 @@
+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;
+    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"});
+    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();
+  });
+}