0.4.0: Release

README.md

@@ -12,6 +12,20 @@ To be decided, but at this moment this code is open source and free to use for n
 
 ## Changelog
 
+### 0.4.0
+
+* You can now pan the work area, hold ctrl key while mouse dragging an empty area.
+* Right Click Menu
+  * If an item is selected you can delete or disconnect them
+* Top menu
+  * New / Open / Save moved to File menu
+  * You can now disable connection drawing, or put them above or below elements in View menu
+  * There is now a pan to center feature in View menu
+  * Create IC has been moved to Tools menu
+  * Help menu -> About opens the Welcome Window
+* Save dialog
+* Fixed  various small bugs
+
 ### 0.3.10
 * Added BCD and Decimal options to the 4 bit output display, as well as bit labels in inputs
 

css/main.css

@@ -12,8 +12,10 @@
    ========================================================================== */
 body {
   background-color: #54545d;
+  overflow: hidden;
 }
 
+
 html {
   color: #ddd;
   font-size: 1em;
@@ -265,57 +267,93 @@ textarea {
 }
 
 #left-menu {
-  width: 200px;
+  width: 212px;
-  max-width: 200px;
   height: 99vh;
   display: inline-block;
   border: 1px solid black;
   margin: 0px;
   padding: 0px;
+  background-color: #222222;
 }
 
 #inner-left-menu {
   width: 100%;
-  height: 99%;
+  height: 99.4%;
-  overflow: auto;
+  overflow-y: scroll;
+  background-color: #54545d;
 }
 
+#inner-left-menu::-webkit-scrollbar {
+  width: 12px;
+}
+#inner-left-menu::-webkit-scrollbar-track {
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#575a60+0,292b2d+14,000000+49,292b2d+82,575a60+100 */
+  background: rgb(87,90,96); /* Old browsers */
+  background: -moz-linear-gradient(left,  rgba(87,90,96,1) 0%, rgba(41,43,45,1) 14%, rgba(0,0,0,1) 49%, rgba(41,43,45,1) 82%, rgba(87,90,96,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(left,  rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right,  rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575a60', endColorstr='#575a60',GradientType=1 ); /* IE6-9 */
+}
+
+#inner-left-menu::-webkit-scrollbar-thumb {
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+50,8e8e8e+50,000000+100&0+0,1+50,0+100 */
+  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(142,142,142,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+  border-radius: 8px;
+}
+
+
 #top-bar {
-  height: 50px;
+  height: 30px;
   overflow: none;
   margin: 0px;
   padding: 0px;
-  background-color: #222;
   font-size: 2em;
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
+  background: rgb(76,76,76); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
 }
 
-#LeftOf-SiteTitle {
-  display: inline-block;
-  width: 200px;
-  height: 100%;
-  font-size: 0.5em;
-  margin: 0px;
-  padding: 5px;
-}
 
-#SiteTitle {
-  display: inline-block;
-  height: 100%;
-  width: 50%;
-  margin: 0px;
-  padding-top: 2px;
-}
 .TOOLBOX_CATEGORY_HEADER {
   margin: 0px;
   padding: 0px;
   text-align: center;
-  background-color: #222;
+  font-size: 0.8em;
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8c9b3f+0,6d8e20+50,456000+51,799e24+100 */
+  background: rgb(140,155,63); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(140,155,63,1) 0%, rgba(109,142,32,1) 50%, rgba(69,96,0,1) 51%, rgba(121,158,36,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top,  rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom,  rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9b3f', endColorstr='#799e24',GradientType=0 ); /* IE6-9 */
+
 }
 .TOOLBOX_CATEGORY_HEADER h2 {
   margin: 0px;
   padding: 5px;
 }
 
+.TOOLBOX_CATEGORY_BODY input {
+  font-size: 0.9em;
+  padding: 1px;
+  text-shadow: 0 1px 0 rgba(180, 180, 180, 0.4),
+               1px 0 0 rgba(180, 180, 180, 0.4);
+
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
+  background: rgb(245,246,246); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
+
+}
+
 #darkout-overlay {
   position: absolute;
   left: 0px;
@@ -366,7 +404,7 @@ textarea {
 #WelcomeWindow label {
   font-size: 0.5em;
 }
-#PropertiesBox, #CreateICBox {
+#PropertiesBox, #CreateICBox, #SaveWindow {
   display: none;
   position: absolute;
   right: 20px;
@@ -387,16 +425,121 @@ textarea {
   border: 3px solid red;
 }
 
-#PropertiesBoxTitle, #CreateICBoxTitle {
+#SaveWindow {
+  width: 350px;
+  height: 120px;
+}
+
+#SaveWindowContent {
+  margin: auto;
+  width: 90%;
+  margin-top: 10px;
+}
+
+#PropertiesBoxTitle, #CreateICBoxTitle, #SaveWindowTitle {
  text-align: center;
   background-color: #222222;
   font-size: 1.5em;
 }
 
-#PropertiesBoxContent, #CreateICBoxContent {
+#PropertiesBoxContent, #CreateICBoxContent, #SaveWindowContent {
   padding: 5px;
 }
 
+#RightClickMenu, .top-menu-div {
+  display: none;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background-color: #444455;
+  border: 1px solid #232323;
+  z-index: 9999999999;
+}
+
+#left-top-menu {
+  width: 70%;
+  float: left;
+}
+
+#SiteTitle {
+  width: 29%;
+  font-size: 0.6em;
+  float: right;
+}
+
+#top-menu {
+
+}
+
+#top-menu a {
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+}
+#top-menu a:visited {
+  color: #ddd;
+}
+#top-menu ul {
+  margin: 0px;
+  padding: 0px;
+  font-size: 0.5em;
+}
+
+#top-menu li {
+  display: inline-block;
+  cursor: default;
+  text-decoration: none;
+  list-style-type: none;
+  margin: 0px;
+  padding: 2px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.top-menu-div {
+  font-size: 2em;
+}
+
+#top-menu li span {
+  display: inline-block;
+  padding-left: 10px;
+  float: right;
+}
+
+#RightClickMenu ul, .top-menu-div ul {
+  margin: 0px;
+  padding: 0px;
+}
+
+#RightClickMenu li, .top-menu-div li {
+  display: block !important;
+  cursor: default;
+  text-decoration: none;
+  list-style-type: none;
+  margin: 0px;
+  padding: 2px;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+#RightClickMenu li:hover, .top-menu-div li:hover {
+  background-color: #222222;
+}
+
+#RightClickMenu .disabled, #top-menu .disabled {
+  color: #777777;
+}
+
+.rcm_seperator:hover, .tfm_seperator:hover {
+  background-color: transparent !important;
+}
+
+.rcm_seperator, .tfm_seperator {
+  height: 2px;
+  margin-bottom: 7px;
+  border-bottom: 2px groove #54545d;
+}
+
 #LogicPlane {
   outline: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */

index.html

@@ -26,26 +26,85 @@
   <div id="WelcomeWindow">
     <h2>MatCat BrowserLogic Engine</h2>
     <p>Welcome to logic.parts, a free to use logic simulator for anyone to use.  This is opensource software, you can find the project at <a href="https://www.mygit.space/MatCat.OpenSource/BrowserLogic">https://www.mygit.space/MatCat.OpenSource/BrowserLogic</a>.  This is an early development project, so expect bugs and some things to not work :)  If you would like to contribute please feel free to find me on IRC on Freenode in channel #LogicParts.</p>
+    <p><span style="font-weight: bold; font-size: 1.2em;">Now on Version 0.4!</span>  This new version brings an improved UI, panning, more settings options, and much more!</p>
     <input type="button" id="btn_CloseWelcome" value="Simulate Some Logic!"><br />
       <input type="checkbox" id="chk_dontDisplayWelcome" name="chk_dontDisplayWelcome" value="1">
-      <label for="chk_dontDisplayWelcome">Don't show welcome window again</label></div>
+      <label for="chk_dontDisplayWelcome">Don't show welcome window again</label>
+      <input type="file" id="file_Load" accept=".LogicParts" style="display: none;" />
+  </div>
   <script src="js/vendor/modernizr-3.11.2.min.js"></script>
   <div id="top-bar">
-    <div id="LeftOf-SiteTitle">
+    <div id="top-menu">
-      <input type="button" id="btn_New" value="New"/>&nbsp;&nbsp;&nbsp;
+      <div id="left-top-menu">
-      <input type="button" id="btn_Save" value="Save"/>&nbsp;&nbsp;&nbsp;
+      <ul>
-      <input type="button" id="btn_Load" value="Load"/>
+        <li id="tm_File" class="top-menu-item">File
-      <input type="file" id="file_Load" accept=".LogicParts" style="display: none;" />
+          <div id="tm_FileMenu" class="top-menu-div">
-    </div>
+            <ul>
-    <div id ="SiteTitle">
+              <li id="tfm_New">New</li>
-      MatCat BrowserLogic <span id="version"> </span>
+              <li id="tfm_Open">Open</li>
+              <li id="tfm_Save">Save</li>
+              <li id="tfm_SaveAs" class="disabled" title="Feature coming soon">Save As</li>
+            </ul>
+          </div>
+        </li>
+        <li id="tm_Edit" class="top-menu-item">Edit
+          <div id="tm_EditMenu" class="top-menu-div">
+            <ul>
+              <li id="tfm_Undo" class="disabled" title="Feature coming soon">Undo</li>
+              <li id="tfm_Redo" class="disabled" title="Feature coming soon">Redo</li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_Cut" class="disabled" title="Feature coming soon">Cut</li>
+              <li id="tfm_Copy" class="disabled" title="Feature coming soon">Copy</li>
+              <li id="tfm_Paste" class="disabled" title="Feature coming soon">Paste</li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_Delete" class="disabled">Delete</li>
+              <li id="tfm_Disconnect" class="disabled">Disconnect</li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_SelectAll" class="disabled" title="Feature coming soon">Select All</li>
+            </ul>
+          </div>
+        </li>
+        <li id="tm_View" class="top-menu-item">View
+          <div id="tm_ViewMenu" class="top-menu-div">
+            <ul>
+              <li id="tfm_Pan2Center">Pan to Center</li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_ShowConnections">Show Connections <span>✓</span></li>
+              <li id="tfm_ConnectionLayer">Connections Below</li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_ShowGrid">Show Grid <span>✓</span></li>
+              <li id="tfm_SnapGrid">Snap to Grid <span>✓</span></li>
+              <li id="tfm_GridSize">Grid Size <input type="number" id="in_GridSize" value="20" min="2" max="100" style="margin-left: 10px; width: 40px;"></li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_ShowFPS">Show FPS <span>✓</span></li>
+            </ul>
+          </div>
+        </li>
+        <li id="tm_Tools" class="top-menu-item">Tools
+          <div id="tm_ToolsMenu" class="top-menu-div">
+            <ul>
+              <li id="tfm_CreateIC" class="disabled" title="Turn the current design into an IC, must have atleast one IC Output to create">Create IC</li>
+            </ul>
+          </div>
+        </li>
+        <li id="tm_Help" class="top-menu-item">Help
+          <div id="tm_HelpMenu" class="top-menu-div">
+            <ul>
+              <li id="tfm_GITRepo"><a target="new" href="https://mygit.space/MatCat.OpenSource/BrowserLogic">GIT Repo</a></li>
+              <li class="tfm_seperator"></li>
+              <li id="tfm_About">About</li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+      </div>
+      <div id="SiteTitle">MatCat BrowserLogic <span id="version"> </span></div>
     </div>
   </div>
   <div id="left-menu">
     <div id="inner-left-menu">
       LOADING
     </div>
-    <input type="button" id="btn_CreateIC" value="Create IC" style="position: absolute; bottom: 30px; left: 50px;">
   </div>
   <canvas id="GridPlane" width="400" height="300" style="position: absolute; top: 50px; left 202px;"></canvas>
   <canvas id="LogicPlane" width="400" height="300" style="margin: 0px; padding: 0px; position: absolute; top: 50px; left: 202px;"></canvas>
@@ -68,6 +127,29 @@
       <center><input type="button" id="btn_CreateIC_Create" value="Create IC" disabled>&nbsp;&nbsp;&nbsp;<input type="button" id="btn_CreateIC_Cancel" value="Cancel"></center>
     </div>
   </div>
+  <div id="RightClickMenu">
+    <ul>
+      <li id="rcm_New">New</li>
+      <li id="rcm_seperator1" class="rcm_seperator"></li>
+      <li id="rcm_CreateIC">Create IC</li>
+      <li id="rcm_seperator2" class="rcm_seperator"></li>
+      <li id="rcm_Delete">Delete</li>
+      <li id="rcm_Disconnect">Disconnect</li>
+    </ul>
+  </div>
+  <div id="SaveWindow">
+    <div id="SaveWindowTitle">
+      Save Design
+    </div>
+    <div id="SaveWindowContent">
+      <div>
+        <span style="padding-right: 10px;">Design Name</span><span><input type="text" id="saveName" value="My Design"></span>
+      </div>
+      <div style="margin-top: 10px;">
+        <center><input type="button" id="btn_SaveDesign" value="Save">&nbsp;&nbsp;&nbsp;<input type="button" id="btn_CancelSave" value="Cancel"></center>
+      </div>
+    </div>
+  </div>
 
   <div id="darkout-overlay"></div>
   <script src="js/globalfunctions.js"></script>

js/baseclasses.js

@@ -80,6 +80,17 @@ class elementContainer {
     this.ICOutputs = 0;
   }
 
+  isHigh(element,input) {
+    let isHigh = false;
+    for (let a = 0; a < this.Elements.length; a++) {
+      let conn = this.Elements[a].ConnectsTo(element,input);
+      if (conn !== false) {
+        if (this.Elements[a].getOutput(conn)) isHigh = true;
+      }
+    }
+    return isHigh;
+  }
+
   toJSON(key) {
     let elements = new Array();
     for (let a = 0; a < this.Elements.length; a++) {
@@ -131,21 +142,31 @@ class elementContainer {
     return false;
   }
 
+  Disconnect(element) {
+    if (!element) return false;
+    for (let a = 0; a < this.Elements.length; a++) {
+      this.Elements[a].Disconnect(element);
+    }
+  }
+
   DrawAll(ctx,settings) {
     let ICOuts = 0;
-    for (let a = 0; a < this.Elements.length; a++) {
-      ctx.save();
-      if (this.Elements[a] instanceof ICOutput) ICOuts++;
-      if (this.Elements[a] == this.Selected) this.Elements[a].drawBorderBox(ctx, this.Elements[a].X - 2, this.Elements[a].Y - 2, this.Elements[a].Width + 4, this.Elements[a].Height + 4, 1, "rgba(100,200,255,0.25)", "rgba(100,200,255,0.25)");
-      this.Elements[a].drawElement(this.Elements[a].X, this.Elements[a].Y, ctx);
-      ctx.font = "10px Console";
-      let x = this.Elements[a].X;
-      let y = this.Elements[a].Y + (this.Elements[a].Height - 12);
-      let x2 = this.Elements[a].Width;
-      let y2 = 10;
-      //this.Elements[a].drawTextCentered(ctx, x, y, x2, y2, this.Elements[a].Designator, ctx.font, "#000");
-      ctx.restore();
 
+    if (!logicEngine.Settings.TopConnections && !logicEngine.Settings.HideConnections) {
+      for (let a = 0; a < this.Elements.length; a++) {
+        // Not ideal to loop twice but we need the connections drawn all at once to prevent layer issues
+        this.Elements[a].drawConnections(ctx, settings);
+      }
+    }
+
+    for (let a = 0; a < this.Elements.length; a++) {
+      if (this.Elements[a] instanceof ICOutput) ICOuts++;
+      if (this.Elements[a].isVisible()) {
+        ctx.save();
+        if (this.Elements[a] == this.Selected) this.Elements[a].drawBorderBox(ctx, this.Elements[a].X - 2, this.Elements[a].Y - 2, this.Elements[a].Width + 4, this.Elements[a].Height + 4, 1, "rgba(100,200,255,0.25)", "rgba(100,200,255,0.25)");
+        this.Elements[a].drawElement(this.Elements[a].X, this.Elements[a].Y, ctx);
+        ctx.restore();
+      }
     }
 
     this.ICOutputs = ICOuts;
@@ -154,9 +175,11 @@ class elementContainer {
       if (PropertiesBox.style.display != "none") PropertiesBox.style.display = "none";
     }
 
-    for (let a = 0; a < this.Elements.length; a++) {
+    if (logicEngine.Settings.TopConnections && !logicEngine.Settings.HideConnections) {
-      // Not ideal to loop twice but we need the connections drawn all at once to prevent layer issues
+      for (let a = 0; a < this.Elements.length; a++) {
-      this.Elements[a].drawConnections(ctx, settings);
+        // Not ideal to loop twice but we need the connections drawn all at once to prevent layer issues
+        this.Elements[a].drawConnections(ctx, settings);
+      }
     }
 
   }

js/elements.js

@@ -76,7 +76,7 @@ class ElementConnection {
 
 class Element extends CanvasTools {
 
-  constructor(RestoreData = null,logicengine,Inputs) {
+  constructor(_Container,RestoreData = null,logicengine,Inputs) {
     super();
     this.Name = "Element";
     this.Designator = "";
@@ -97,6 +97,7 @@ class Element extends CanvasTools {
     this.OutputLabels = new Array(1);
     this.NoOutput = false;
     this.OutputLink = 0;
+    this._Container = _Container;
 
     let inputProperty = new ElementProperty("Inputs","int",{CBObject: this,CBFunction: "ChangeInputs"},2,Inputs,false,2);
     this.Properties.push(inputProperty);
@@ -120,6 +121,42 @@ class Element extends CanvasTools {
     }
   }
 
+  ConnectsTo(element,input = false) {
+    for (let a = 0; a < this.OutputConnections.length; a++) {
+      if (this.OutputConnections[a].Element == element || this.OutputConnections[a].Element.Designator == element) {
+        if (input !== false) {
+          if (this.OutputConnections[a].Input == input) return this.OutputConnections[a].Output;
+        } else {
+          return 0;
+        }
+      }
+    }
+    return false;
+  }
+
+  isVisible() {
+    let isvisible = false;
+    if (this.LogicEngine) {
+      let LeftX = this.LogicEngine.Panning.OffsetX;
+      if (LeftX < 0) {
+        LeftX = Math.abs(LeftX);
+      } else {
+        LeftX = -Math.abs(LeftX);
+      }
+      let RightX = LeftX + this.LogicEngine.Canvas.width;
+      let TopY = this.LogicEngine.Panning.OffsetY;
+      if (TopY < 0) {
+        TopY = Math.abs(TopY);
+      } else {
+        TopY = -Math.abs(TopY);
+      }
+      let BottomY = TopY + this.LogicEngine.Canvas.height;
+      if (((this.X + this.Width) >= LeftX) && ((this.X) <= RightX) && ((this.Y + this.Height) >= TopY) && ((this.Y) <= BottomY)) isvisible = true;
+    }
+    return isvisible;
+
+  }
+
   toJSON(key) {
     return {
       Name: this.Name,
@@ -168,9 +205,28 @@ class Element extends CanvasTools {
     // if we are active linking stop doing so
     if (this.LogicEngine.ActiveLink == this) this.LogicEngine.ActiveLink = false;
     // Just to clean up connections
-    for (let a = 0; a < this.OutputConnections.length;a++) {
+    this.Disconnect();
-      this.LogicEngine.RecursionCount = 0;
+  }
-      this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input,false);
+
+  Disconnect(element = false) {
+    if (element) {
+      for (let a = 0; a < this.OutputConnections.length; a++) {
+        if (this.OutputConnections[a].Element == element) {
+          this.LogicEngine.RecursionCount = 0;
+          let element = this.OutputConnections[a].Element;
+          let input = this.OutputConnections[a].Input;
+          this.OutputConnections.splice(a,1);
+          element.setInput(input, false);
+          a--;
+        }
+      }
+    } else {
+      for (let a = 0; a < this.OutputConnections.length; a++) {
+        this.LogicEngine.RecursionCount = 0;
+        this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, false);
+        this.OutputConnections.splice(a,1);
+        a--;
+      }
     }
   }
 
@@ -188,10 +244,11 @@ class Element extends CanvasTools {
 
   MouseClick(mousePos) {
 
+    let ctxMousePos = this.MousePosition;
     let mouseDistOutput = length2D(this.X+(this.Width-10),
       this.Y+(this.Height/2),
-      this.MousePosition.x,
+      ctxMousePos.x,
-      this.MousePosition.y);
+      ctxMousePos.y);
     if (this.LogicEngine.ActiveLink) {
       // We need to see if an input is being clicked on to be linked to
       let foundInput = false;
@@ -202,8 +259,8 @@ class Element extends CanvasTools {
 
         let mouseDist = length2D(this.X+10,
           firstY+ (a*24),
-          this.MousePosition.x,
+          ctxMousePos.x,
-          this.MousePosition.y);
+          ctxMousePos.y);
         if (mouseDist <= (this.inputCircleRadius)) {
           this.LogicEngine.Link(a);
           foundInput = true;
@@ -220,9 +277,8 @@ class Element extends CanvasTools {
 
         let mouseDist = length2D(this.X+(this.Width-10),
           firstY+ (a*24),
-          this.MousePosition.x,
+          ctxMousePos.x,
-          this.MousePosition.y);
+          ctxMousePos.y);
-          console.log("Distance from " + a + ": " + mouseDist);
         if (mouseDist <= (this.outputCircleRadius)) {
           this.OutputLink = {Output: a,x: this.X+(this.Width-10), y: firstY+ (a*24)};
           this.LogicEngine.Link();
@@ -234,8 +290,9 @@ class Element extends CanvasTools {
   }
 
   mouseInside(mousePos) {
+    mousePos = this.LogicEngine.getCanvasMousePos(mousePos);
     this.MouseOver = false;
-    if (((mousePos.x >= this.X ) && (mousePos.x <= (this.X + this.Width))) & ((mousePos.y >= this.Y ) && (mousePos.y <= (this.Y + this.Height)))) this.MouseOver = true;
+    if (((mousePos.x >= this.X ) && (mousePos.x <= (this.X + this.Width))) && ((mousePos.y >= this.Y ) && (mousePos.y <= (this.Y + this.Height)))) this.MouseOver = true;
     this.MousePosition = mousePos;
     return this.MouseOver;
   }
@@ -376,6 +433,9 @@ class Element extends CanvasTools {
     } else {
       return;
     }
+    let isHigh = this._Container.isHigh(this,Input);
+    if (isHigh !== false) this.Inputs[Input] = true;
+    if (isHigh === false) this.Inputs[Input] = false;
     this.setConnections();
   }
 
@@ -399,8 +459,8 @@ class Element extends CanvasTools {
 }
 
 class LabelElement extends Element {
-  constructor(RestoreData = null,logicengine) {
+  constructor(_Container, RestoreData = null,logicengine) {
-    super(RestoreData,logicengine,0);
+    super(_Container, RestoreData,logicengine,0);
     this.removeProperty("Inputs");
     this.Name = "Label";
     this.Font = "48px Console";
@@ -447,7 +507,7 @@ class LabelElement extends Element {
     this.drawTextCentered(ctx,x,y,textWidth.width,textWidth.height,this.Label,this.Font,this.FontStyle);
   }
 }
-let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","abc",LabelElement,[]);
+let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","🏷",LabelElement,[]);
 ElementReferenceTable.push(ElementCatalog_Label);
 ElementCategory_Other.addElement(ElementCatalog_Label);
 
@@ -459,8 +519,8 @@ class ICInput extends Element {
     this.Output = false;
   }
 
-  constructor(RestoreData = null,logicengine) {
+  constructor(_Container, RestoreData = null,logicengine) {
-    super(RestoreData ,logicengine,0);
+    super(_Container, RestoreData ,logicengine,0);
     this.removeProperty("Inputs");
     this.Task = new Task("ICInputTask","CLOCK",0,1,this.ClockTick.bind(this));
     this.Name = "ICInput";
@@ -488,8 +548,9 @@ class ICInput extends Element {
 
   setInput(notused = 0,value) {
     if (notused > 0) return;
-    if (!value) this.Input = false;
+
-    if (value) this.Input = true;
+    if (value === false) this.Input = false;
+    if (value !== false) this.Input = true;
 
     if (!this.Task.Enabled) {
       this.Task.LastCall = 0;
@@ -539,8 +600,8 @@ class ICOutput extends Element {
     this.Output = false;
   }
 
-  constructor(RestoreData = null,logicengine) {
+  constructor(_Container, RestoreData = null,logicengine) {
-    super(RestoreData ,logicengine,1);
+    super(_Container, RestoreData ,logicengine,1);
     this.removeProperty("Inputs");
     this.Task = new Task("ICOutputTask","CLOCK",0,1,this.ClockTick.bind(this));
     this.Name = "ICOutput";
@@ -569,12 +630,12 @@ class ICOutput extends Element {
 
   setInput(notused = 0,value) {
     if (notused > 0) return;
-    if (!value) this.Input = false;
+    value = this._Container.isHigh(this,0);
-    if (value) this.Input = true;
+    if (value === false) this.Input = false;
+    if (value !== false) this.Input = true;
     this.Inputs[0] = this.Input;
 
     if (!this.Task.Enabled) {
-      console.log("Starting timer");
       this.Task.LastCall = 0;
       this.Task.Enabled = true;
     }
@@ -619,7 +680,7 @@ ElementReferenceTable.push(ElementCatalog_ICOutput);
 ElementCategory_ICs.addElement(ElementCatalog_ICOutput);
 
 class ICElement extends Element {
-  constructor(RestoreData = null, logicengine,ICSettings = null) {
+  constructor(_Container, RestoreData = null, logicengine,ICSettings = null) {
 
 
     let newContainer = false;
@@ -648,7 +709,7 @@ class ICElement extends Element {
     let totalInputs = ICSettings.Inputs.length;
     let totalOutputs = ICSettings.Outputs.length;
 
-    super(RestoreData, logicengine, totalInputs);
+    super(_Container, RestoreData, logicengine, totalInputs);
     this.removeProperty("Inputs");
     this.ICBlueprint = icContainer;
     this.Outputs = ICSettings.Outputs;
@@ -677,10 +738,28 @@ class ICElement extends Element {
     return superjson;
   }
 
+  Disconnect(element = false) {
+    super.Disconnect(element);
+    if (element) {
+      for (let a = 0; a < this.Outputs.length; a++) {
+        if (this.Outputs[a].toElement == element || this.Outputs[a].fromElement == element) {
+          if (this.Outputs[a].toElement == element) {
+            // It's a too element, we need to tell it we are not high anymore
+          } else {
+            // Its a from element, we need to tell it's too element
+          }
+        }
+      }
+    } else {
+      // We are disconnecting all of our own connections
+      for (let a = 0; a < this.Outputs.length; a++) {
+
+      }
+    }
+  }
+
   addConnection(container, element, input, output = 0) {
-    console.log("IC Add Connection " + element.Designator + " I:" + input + " O:"+output);
     super.addConnection(container, element, input, output);
-    console.log(this.OutputConnections);
     this.Outputs[output].toElementContainer = container;
     this.Outputs[output].toElement = element;
     this.Outputs[output].Input = input;
@@ -690,7 +769,7 @@ class ICElement extends Element {
   setInput(Input, Value) {
     if (this.InputConnections.length >= Input) {
       // No need to worry about recursion as this goes to an input element which is buffered
-      this.Inputs[Input] = Value;
+      this.Inputs[Input] = (Value === false) ? false : true;
       //console.log("Calling " + this.InputConnections[Input].toElement.Designator);
       this.InputConnections[Input].toElement.setInput(this.InputConnections[Input].Input,Value);
     }
@@ -752,7 +831,7 @@ class ICElement extends Element {
       ctx.fill();
       ctx.stroke();
       let textSize = false;
-      if (ctx,this.InputConnections[a]) textSize = this.textSize(ctx,this.InputConnections[a].toElement.Properties[0].CurrentValue,"10px Console");
+      if (ctx,this.Outputs[a]) textSize = this.textSize(ctx,this.Outputs[a].fromElement.Properties[0].CurrentValue,"10px Console");
       this.drawText(ctx,(x+(this.Width-10)) - (textSize.width + 5 + (this.outputCircleRadius*2)),(firstY + (a*24)) + 5,this.Outputs[a].fromElement.Properties[0].CurrentValue,"10px Console","#000");
     }
     ctx.restore();
@@ -786,7 +865,9 @@ class ClockElement extends Element {
   }
 
   setInput(Input, Value) {
+    console.log(this.Designator + " got told to set " + Input + " to value " + Value);
     super.setInput(Input, Value);
+
     if (!this.Inputs[0]) {
       this.Output = false;
       this.Task.LastCall = 0;
@@ -800,8 +881,8 @@ class ClockElement extends Element {
     }
   }
 
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,1);
+    super(_Container, RestoreData,logicengine,1);
     this.removeProperty("Inputs");
     this.Name = "Clock";
     this.Period = 1000;
@@ -899,8 +980,10 @@ class PulseElement extends Element {
 
   setInput(Input, Value) {
     if (Input > 0) return;
+
+    Value = this._Container.isHigh(this,Input);
     //super.setInput(Input, Value);
-    this.Inputs[Input] = Value;
+    this.Inputs[Input] = (Value === false) ? false : true;
     if (this.Inputs[0] && !this.Task.Enabled) {
       this.Output = true;
       for (let a = 0; a < this.OutputConnections.length;a++) {
@@ -912,8 +995,8 @@ class PulseElement extends Element {
     }
   }
 
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,1);
+    super(_Container, RestoreData,logicengine,1);
     this.removeProperty("Inputs");
     this.Name = "Pulse";
     this.Period = 100;
@@ -1020,7 +1103,8 @@ class DelayElement extends Element {
 
   setInput(Input, Value) {
     if (Input > 0) return;
-    if (this.Inputs[Input] == Value) return;
+    Value = this._Container.isHigh(this,Input);
+    if (this.Inputs[Input] == (Value === false) ? false : true) return;
     //super.setInput(Input, Value);
     this.Inputs[Input] = Value;
     if (this.Inputs[0] && !this.Task.Enabled) {
@@ -1056,8 +1140,8 @@ class DelayElement extends Element {
     }
   }
 
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,1);
+    super(_Container, RestoreData,logicengine,1);
     this.removeProperty("Inputs");
     this.Name = "Delay";
     this.Period = 100;
@@ -1126,8 +1210,8 @@ ElementReferenceTable.push(ElementCatalog_DELAY);
 ElementCategory_Timing.addElement(ElementCatalog_DELAY);
 
 class output4bitDisplay extends Element {
-  constructor(RestoreData = null,logicengine) {
+  constructor(_Container, RestoreData = null,logicengine) {
-    super(RestoreData,logicengine,4);
+    super(_Container, RestoreData,logicengine,4);
     this.Name = "4B Display";
     this.Output = false;
     this.OutputChar = "0";
@@ -1142,7 +1226,8 @@ class output4bitDisplay extends Element {
     this.Properties.push(typeProperty);
 
     if (RestoreData) {
-      if (RestoreData.Properties) {
+      if (RestoreData.Properties.length > 0) {
+        console.log(RestoreData);
         this.Properties[0].CurrentValue = RestoreData.Properties[0].CurrentValue;
         this.Properties[0].Values = RestoreData.Properties[0].Values;
         this.setType(this.Properties[0].CurrentValue);
@@ -1167,7 +1252,8 @@ class output4bitDisplay extends Element {
   }
 
   setInput(Input, Value) {
-    this.Inputs[Input] = (Value) ? 1 : 0;
+    Value = this._Container.isHigh(this,Input);
+    this.Inputs[Input] = (Value !== false) ? 1 : 0;
     let outchar = (this.Inputs[0] << 3) + (this.Inputs[1] << 2) + (this.Inputs[2] << 1) + (this.Inputs[3]);
 
     this.OutputChar = (outchar);
@@ -1220,8 +1306,8 @@ ElementCategory_Outputs.addElement(ElementCatalog_Output_4BDisplay);
 
 
 class inputElement extends Element {
-  constructor(RestoreData = null,logicengine) {
+  constructor(_Container, RestoreData = null,logicengine) {
-    super(RestoreData,logicengine,0);
+    super(_Container, RestoreData,logicengine,0);
     this.Name = "InputElement";
     this.Output = false;
     this.Width = 100;
@@ -1240,14 +1326,15 @@ class inputElement extends Element {
 }
 
 class InputSwitch extends inputElement {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine);
+    super(_Container, RestoreData,logicengine);
     this.Name = "Switch";
     this.Height = 70;
     if (RestoreData) this.Output = RestoreData.Output;
   }
 
   MouseClick(mousePos) {
+    mousePos = this.LogicEngine.getCanvasMousePos(mousePos);
     super.MouseClick(mousePos);
     if ((mousePos.x >= (this.X + 5)) && (mousePos.x <= (this.X + 55)) && (mousePos.y >= (this.Y + 5)) && (mousePos.y <= (this.Y + 55))) {
       this.Output = !this.Output;
@@ -1278,13 +1365,14 @@ ElementReferenceTable.push(ElementCatalog_SWITCH);
 ElementCategory_Inputs.addElement(ElementCatalog_SWITCH);
 
 class InputButton extends inputElement {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine);
+    super(_Container, RestoreData,logicengine);
     this.Name = "Button";
     this.Height = 70;
   }
 
   MouseDown(mousePos) {
+    mousePos = this.LogicEngine.getCanvasMousePos(mousePos);
     if ((mousePos.x >= (this.X + 5)) && (mousePos.x <= (this.X + 55)) && (mousePos.y >= (this.Y + 5)) && (mousePos.y <= (this.Y + 55))) {
       let old_output = this.Output;
       this.Output = true;
@@ -1321,8 +1409,8 @@ ElementReferenceTable.push(ElementCatalog_BUTTON);
 ElementCategory_Inputs.addElement(ElementCatalog_BUTTON);
 
 class FlipFlopJK extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,3);
+    super(_Container, RestoreData,logicengine,3);
     this.Name = "JK-FF";
     this.Outputs = new Array(2);
     this.InputLabels = new Array("J","CLK","K");
@@ -1344,6 +1432,8 @@ class FlipFlopJK extends Element {
 
   setInput(Input, Value) {
     if (Input >= this.Inputs.length) return false;
+    Value = this._Container.isHigh(this,Input);
+    if (Value !== false) Value = true;
     let oldOutput = this.Outputs[0];
     let oldOutput2 = this.Outputs[1];
     this.Inputs[Input] = Value;
@@ -1378,13 +1468,13 @@ class FlipFlopJK extends Element {
     this.drawOutputs(ctx,x,y);
   }
 }
-let ElementCatalog_JKFlipFlop = new ElementCatalog_Element("JK-FF","The JK Flip-Flop is a common type of flip-flop that allows for either setting in a specific state, or toggling state.","JK",FlipFlopJK,[]);
+let ElementCatalog_JKFlipFlop = new ElementCatalog_Element("JK-FF","The JK Flip-Flop is a common type of flip-flop that allows for either setting in a specific state, or toggling state.","",FlipFlopJK,[]);
 ElementReferenceTable.push(ElementCatalog_JKFlipFlop);
 ElementCategory_FlipFlop.addElement(ElementCatalog_JKFlipFlop);
 
 class FlipFlopSR extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,3);
+    super(_Container, RestoreData,logicengine,3);
     this.Name = "SR-FF";
     this.Outputs = new Array(2);
     this.InputLabels = new Array("S","CLK","R");
@@ -1406,6 +1496,8 @@ class FlipFlopSR extends Element {
 
   setInput(Input, Value) {
     if (Input >= this.Inputs.length) return false;
+    Value = this._Container.isHigh(this,Input);
+    if (Value !== false) Value = true;
     let oldOutput = this.Outputs[0];
     let oldOutput2 = this.Outputs[1];
     this.Inputs[Input] = Value;
@@ -1436,13 +1528,13 @@ class FlipFlopSR extends Element {
     this.drawOutputs(ctx,x,y);
   }
 }
-let ElementCatalog_SRFlipFlop = new ElementCatalog_Element("SR-FF","The SR Flip-Flop is a common type of flip-flop that allows for either setting, or resetting the output state.","SR",FlipFlopSR,[]);
+let ElementCatalog_SRFlipFlop = new ElementCatalog_Element("SR-FF","The SR Flip-Flop is a common type of flip-flop that allows for either setting, or resetting the output state.","",FlipFlopSR,[]);
 ElementReferenceTable.push(ElementCatalog_SRFlipFlop);
 ElementCategory_FlipFlop.addElement(ElementCatalog_SRFlipFlop);
 
 class FlipFlopT extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,2);
+    super(_Container, RestoreData,logicengine,2);
     this.Name = "T-FF";
     this.Outputs = new Array(2);
     this.InputLabels = new Array("T","CLK");
@@ -1464,6 +1556,8 @@ class FlipFlopT extends Element {
 
   setInput(Input, Value) {
     if (Input >= this.Inputs.length) return false;
+    Value = this._Container.isHigh(this,Input);
+    if (Value !== false) Value = true;
     let oldOutput = this.Outputs[0];
     let oldOutput2 = this.Outputs[1];
     this.Inputs[Input] = Value;
@@ -1487,13 +1581,13 @@ class FlipFlopT extends Element {
     this.drawOutputs(ctx,x,y);
   }
 }
-let ElementCatalog_TFlipFlop = new ElementCatalog_Element("T-FF","The T Flip-Flop is a common type of flip-flop that toggles the output when T is high and CLK goes high.","T",FlipFlopT,[]);
+let ElementCatalog_TFlipFlop = new ElementCatalog_Element("T-FF","The T Flip-Flop is a common type of flip-flop that toggles the output when T is high and CLK goes high.","",FlipFlopT,[]);
 ElementReferenceTable.push(ElementCatalog_TFlipFlop);
 ElementCategory_FlipFlop.addElement(ElementCatalog_TFlipFlop);
 
 class FlipFlopD extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,2);
+    super(_Container, RestoreData,logicengine,2);
     this.Name = "D-FF";
     this.Outputs = new Array(2);
     this.InputLabels = new Array("D","CLK");
@@ -1515,6 +1609,8 @@ class FlipFlopD extends Element {
 
   setInput(Input, Value) {
     if (Input >= this.Inputs.length) return false;
+    Value = this._Container.isHigh(this,Input);
+    if (Value !== false) Value = true;
     let oldOutput = this.Outputs[0];
     let oldOutput2 = this.Outputs[1];
     let oldInput = this.Inputs[1];
@@ -1539,14 +1635,14 @@ class FlipFlopD extends Element {
     this.drawOutputs(ctx,x,y);
   }
 }
-let ElementCatalog_DFlipFlop = new ElementCatalog_Element("D-FF","The D Flip-Flop is a common type of flip-flop that sets the output to equal D if the clock goes high","D",FlipFlopD,[]);
+let ElementCatalog_DFlipFlop = new ElementCatalog_Element("D-FF","The D Flip-Flop is a common type of flip-flop that sets the output to equal D if the clock goes high","",FlipFlopD,[]);
 ElementReferenceTable.push(ElementCatalog_DFlipFlop);
 ElementCategory_FlipFlop.addElement(ElementCatalog_DFlipFlop);
 
 
 class LogicAND extends Element {
-  constructor(RestoreData = null, logicengine,Inputs) {
+  constructor(_Container, RestoreData = null, logicengine,Inputs) {
-    super(RestoreData,logicengine,Inputs);
+    super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "AND";
   }
 
@@ -1588,8 +1684,8 @@ ElementReferenceTable.push(ElementCatalog_AND);
 ElementCategory_LOGIC.addElement(ElementCatalog_AND);
 
 class LogicNAND extends LogicAND {
-  constructor(RestoreData = null, logicengine,Inputs) {
+  constructor(_Container, RestoreData = null, logicengine,Inputs) {
-    super(RestoreData,logicengine,Inputs);
+    super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "NAND";
     this.Width = this.Width + 10;
   }
@@ -1640,8 +1736,8 @@ ElementReferenceTable.push(ElementCatalog_NAND);
 ElementCategory_LOGIC.addElement(ElementCatalog_NAND);
 
 class LogicOR extends Element {
-  constructor(RestoreData = null, logicengine,Inputs) {
+  constructor(_Container, RestoreData = null, logicengine,Inputs) {
-    super(RestoreData,logicengine,Inputs);
+    super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "OR";
   }
 
@@ -1687,8 +1783,8 @@ ElementReferenceTable.push(ElementCatalog_OR);
 ElementCategory_LOGIC.addElement(ElementCatalog_OR);
 
 class LogicNOR extends LogicOR {
-  constructor(RestoreData = null, logicengine,Inputs) {
+  constructor(_Container, RestoreData = null, logicengine,Inputs) {
-    super(RestoreData,logicengine,Inputs);
+    super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "NOR";
     this.Width = this.Width + 10;
   }
@@ -1741,8 +1837,8 @@ ElementReferenceTable.push(ElementCatalog_NOR);
 ElementCategory_LOGIC.addElement(ElementCatalog_NOR);
 
 class LogicXOR extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,2); // Only 2 inputs on XOR
+    super(_Container, RestoreData,logicengine,2); // Only 2 inputs on XOR
     this.Name = "XOR";
     this.removeProperty("Inputs");
   }
@@ -1803,8 +1899,8 @@ ElementReferenceTable.push(ElementCatalog_XOR);
 ElementCategory_LOGIC.addElement(ElementCatalog_XOR);
 
 class LogicXNOR extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,2); // Only 2 inputs on XOR
+    super(_Container, RestoreData,logicengine,2); // Only 2 inputs on XOR
     this.Name = "XNOR";
     this.removeProperty("Inputs");
     this.Width += 10;
@@ -1877,8 +1973,8 @@ ElementReferenceTable.push(ElementCatalog_XNOR);
 ElementCategory_LOGIC.addElement(ElementCatalog_XNOR);
 
 class LogicNOT extends Element {
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,1); // Only 1 inputs on NOT
+    super(_Container, RestoreData,logicengine,1); // Only 1 inputs on NOT
     this.Name = "NOT";
     this.removeProperty("Inputs");
     this.Width += 10;
@@ -1953,6 +2049,8 @@ class LogicBuffer extends Element {
   setInput(Input, Value) {
     if (Input > 0) return;
     //super.setInput(Input, Value);
+    Value = this._Container.isHigh(this,Input);
+    if (Value !== false) Value = true;
     this.Inputs[Input] = Value;
     if (!this.Task.Enabled) {
       this.Task.LastCall = 0;
@@ -1960,8 +2058,8 @@ class LogicBuffer extends Element {
     }
   }
 
-  constructor(RestoreData = null, logicengine) {
+  constructor(_Container, RestoreData = null, logicengine) {
-    super(RestoreData,logicengine,1);
+    super(_Container, RestoreData,logicengine,1);
     this.removeProperty("Inputs");
     this.Output = false;
     this.Name = "Buffer";

js/globalfunctions.js

@@ -1,9 +1,11 @@
 function addElement(RestoreData = null,refClass,props) {
-  let newElement = new refClass(RestoreData,logicEngine,...props);
+  let newElement = new refClass(logicEngine.ActiveContainer,RestoreData,logicEngine,...props);
 
   if (!RestoreData) {
-    let x = Math.round(logicEngine.Canvas.width / 2);
+    let x = Math.round(logicEngine.Canvas.width / 2) - (newElement.Width/2);
-    let y = Math.round(logicEngine.Canvas.height / 2);
+    let y = Math.round(logicEngine.Canvas.height / 2) - (newElement.Height/2);
+    x -= logicEngine.Panning.OffsetX;
+    y -= logicEngine.Panning.OffsetY;
     x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize);
     y = logicEngine.Settings.GridSize * Math.round(y/logicEngine.Settings.GridSize);
     let width = newElement.Width;
@@ -30,6 +32,7 @@ function addElement(RestoreData = null,refClass,props) {
   }
   logicEngine.ActiveContainer.AddElement(newElement);
   logicEngine.ActiveContainer.Select(newElement);
+  disableSelectedRCMs(false);
   return newElement;
 }
 
@@ -168,11 +171,40 @@ function isVersionNewer(version1,version2,orEqual = true) {
   return false;
 }
 
+function disableSelectedRCMs(bool) {
+  let rcm_Delete     = document.getElementById("rcm_Delete");
+  let rcm_Disconnect = document.getElementById("rcm_Disconnect");
+  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 hideMenus() {
+  let tds = document.getElementsByClassName("top-menu-div");
+  for (let a = 0; a < tds.length; a++) {
+    tds[a].setAttribute('style','display: none;');
+  }
+
+}
+
 function createSaveState(container = false) {
   let saveState = {
     Name: "LogicDesign",
     Version: Version,
     Timestamp: Date.now(),
+    PanX: logicEngine.Panning.OffsetX,
+    PanY: logicEngine.Panning.OffsetY,
     Elements: new Array()
   };
   if (container.Elements.length > 0) saveState.Elements = container.Elements;
@@ -203,13 +235,13 @@ function loadContainer(Elements) {
       if (!classRef) {
         // We need to add this IC to the toolbox
         let newIC = createIC(JSON.stringify(Elements[a].ICBlueprint),Elements[a].Name,Elements[a].Description);
-        console.log("NewIC:" + newIC);
+        //console.log("NewIC:" + newIC);
         if (!newIC) return false;
       }
     }
     let classRef = getElementInfo(Elements[a].Name).Class;
 
-    let newElement = new classRef(Elements[a],logicEngine,getElementInfo(Elements[a].Name).Args[0]);
+    let newElement = new classRef(newContainer,Elements[a],logicEngine,getElementInfo(Elements[a].Name).Args[0]);
 
     newContainer.AddElement(newElement);
     newElement.Designator = Elements[a].Designator;
@@ -241,10 +273,6 @@ function loadContainer(Elements) {
   }
   // Now we need to make all of the connections
   for (let a = 0; a < elementConnections.length; a++) {
-    if (elementConnections[a].FromElement.Name == "1B_ADD") {
-      console.log("Making connection " + a);
-      console.log(elementConnections[a]);
-    }
     let toElement = newContainer.HasElement(elementConnections[a].ToElement);
     if (toElement) {
       if (elementConnections[a].FromContainer) {
@@ -258,12 +286,6 @@ function loadContainer(Elements) {
         if (newConnection) {
           //elementConnections[a].FromElement.OutputConnections.push(newConnection);
           elementConnections[a].FromElement.addConnection(newContainer,toElement,elementConnections[a].Input, elementConnections[a].Output)
-          if (elementConnections[a].FromElement.Name == "1B_ADD") {
-            console.log("Making Connection");
-            console.log(newConnection);
-            console.log(elementConnections[a].FromElement);
-            console.log(elementConnections[a].FromElement.OutputConnections);
-          }
         } else {
           console.log("We dont have a new connection!!!");
           console.log(toElement);
@@ -291,6 +313,17 @@ function loadsave(savedata) {
   if (!isVersionNewer(savedata.Version,"0.3.0")) return -2; // TODO: Let the person know the version is too old
   let newContainer = loadContainer(savedata.Elements);
   if (!newContainer) return -3;
+  let saveName = document.getElementById("saveName");
+  saveName.value = savedata.Name;
   logicEngine.ActiveContainer = newContainer;
+  logicEngine.Panning.OffsetX = 0;
+  logicEngine.Panning.OffsetY = 0;
+  logicEngine.Ctx.setTransform(1,0,0,1,0,0);
+
+  if (savedata.PanX) {
+    logicEngine.Panning.OffsetX = savedata.PanX;
+    logicEngine.Panning.OffsetY = savedata.PanY;
+    logicEngine.Ctx.translate(logicEngine.Panning.OffsetX,logicEngine.Panning.OffsetY);
+  }
   return true;
 }

js/logicengine.js

@@ -10,41 +10,56 @@ class LogicEngineSettings {
     this.ShadowColor = "#222";
     this.InputCircleSize = 10;
     this.OutputCircleSize = 10;
+    this.ShowGrid = true;
+    this.SnapGrid = true;
+    this.TopConnections = true;
+    this.HideConnections = false;
     this.GridSize = 20;
+    this.ShowFPS = true;
   }
 }
 
 class LogicEngine {
   Resize(evt) {
     let leftmenu = document.getElementById("left-menu");
-    leftmenu.style.height = (window.innerHeight - 52) + "px";
+    let topbar = document.getElementById("top-bar");
-    this.Canvas.width = window.innerWidth - 205;
+    let lmrect = leftmenu.getBoundingClientRect();
-    this.Canvas.height = window.innerHeight - 50;
+    let tbrect = topbar.getBoundingClientRect();
+    leftmenu.style.height = (window.innerHeight - (tbrect.height + 2)) + "px";
+    this.Canvas.width = window.innerWidth - lmrect.width;
+    this.Canvas.height = window.innerHeight - tbrect.height;
     this.Mouse = false;
     let gridPlane = document.getElementById("GridPlane");
+    gridPlane.style.top = tbrect.height + "px";
+    gridPlane.style.left = lmrect.width + "px";
+    this.Canvas.style.top = tbrect.height + "px";
+    this.Canvas.style.left = lmrect.width + "px";
     gridPlane.width = this.Canvas.width;
     gridPlane.height = this.Canvas.height;
-    let Ctx = gridPlane.getContext("2d");
+    this.Ctx.setTransform(1,0,0,1,0,0);
-    Ctx.save();
+    this.Ctx.translate(this.Panning.OffsetX,this.Panning.OffsetY);
-    let gridWidth = this.Settings.GridSize;
+    if (this.Settings.ShowGrid) {
-    for (let x = gridWidth;x < (this.Canvas.width); x+= gridWidth) {
+      let Ctx = gridPlane.getContext("2d");
-      Ctx.beginPath();
+      Ctx.save();
-      Ctx.moveTo(x,0);
+      let gridWidth = this.Settings.GridSize;
-      Ctx.lineTo(x,this.Canvas.height);
+      for (let x = gridWidth; x < (this.Canvas.width); x += gridWidth) {
-      Ctx.strokeStyle = "#777";
+        Ctx.beginPath();
-      Ctx.lineWidth = "1";
+        Ctx.moveTo(x, 0);
-      Ctx.stroke();
+        Ctx.lineTo(x, this.Canvas.height);
+        Ctx.strokeStyle = "#777";
+        Ctx.lineWidth = "1";
+        Ctx.stroke();
+      }
+      for (let y = gridWidth; y < (this.Canvas.height); y += gridWidth) {
+        Ctx.beginPath();
+        Ctx.moveTo(0, y);
+        Ctx.lineTo(this.Canvas.width, y);
+        Ctx.lineWidth = "1";
+        Ctx.strokeStyle = "#777";
+        Ctx.stroke();
+      }
+      Ctx.restore();
     }
-    for (let y = gridWidth;y < (this.Canvas.height); y+= gridWidth) {
-      Ctx.beginPath();
-      Ctx.moveTo(0,y);
-      Ctx.lineTo(this.Canvas.width,y);
-      Ctx.lineWidth = "1";
-      Ctx.strokeStyle = "#777";
-      Ctx.stroke();
-    }
-    Ctx.restore();
-
   }
 
   PropertyChange(property) {
@@ -54,20 +69,34 @@ class LogicEngine {
   }
 
   Mouse_Down(evt) {
-    let mousePos = getMousePos(this.Canvas, evt);
+    if (evt.which === 1) {
-    this.MouseDownTime = performance.now();
+      let mousePos = getMousePos(this.Canvas, evt);
-    let element = this.ActiveContainer.checkMouseBounds(mousePos);
+      this.MouseDownTime = performance.now();
-    if (element) {
+      let element = this.ActiveContainer.checkMouseBounds(mousePos);
-      this.MouseDown = true;
+      if (element) {
-      this.ActiveContainer.Select(element);
+        this.MouseDown = true;
-      this.MovingElement = element;
+        this.ActiveContainer.Select(element);
-      this.MovingElementStartX = element.X;
+        this.MovingElement = element;
-      this.MovingElementStartY = element.Y;
+        this.MovingElementStartX = element.X;
-      this.MovingElementMouseStartX = mousePos.x;
+        this.MovingElementStartY = element.Y;
-      this.MovingElementMouseStartY = mousePos.y;
+        this.MovingElementMouseStartX = mousePos.x;
-      element.MouseDown(mousePos);
+        this.MovingElementMouseStartY = mousePos.y;
-    } else {
+        element.MouseDown(mousePos);
-      this.ActiveLink = false;
+      } else {
+        this.MouseDown = true;
+        this.ActiveLink = false;
+        if (this.ControlPressed) {
+          this.Panning.StartOffsetX = this.Panning.OffsetX;
+          this.Panning.StartOffsetY = this.Panning.OffsetY;
+          this.Panning.StartX = mousePos.x;
+          this.Panning.StartY = mousePos.y;
+        }
+      }
+      if (this.ActiveContainer.Selected) {
+        disableSelectedRCMs(false);
+      } else {
+        disableSelectedRCMs(true);
+      }
     }
   }
 
@@ -81,9 +110,15 @@ class LogicEngine {
       }
       //console.log("Mouse Up");
     }
-    if (!this.MovingElement) this.ActiveContainer.Selected = false;
+    if (!this.MovingElement && evt.which === 1) this.ActiveContainer.Selected = false;
+
     this.MovingElement = false;
     this.MouseDown = false;
+    if (this.ActiveContainer.Selected) {
+      disableSelectedRCMs(false);
+    } else {
+      disableSelectedRCMs(true);
+    }
   }
 
   Mouse_Move(evt) {
@@ -100,11 +135,23 @@ class LogicEngine {
           let diffyOffset = this.MovingElementMouseStartY - this.MovingElementStartY;
           let actualPosX = (this.MovingElementMouseStartX + xOffset) - diffxOffset;
           let actualPosY = (this.MovingElementMouseStartY + yOffset) - diffyOffset;
-          if (!this.ControlPressed) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize;
+          if (!this.ControlPressed && this.Settings.SnapGrid) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize;
-          if (!this.ControlPressed) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize;
+          if (!this.ControlPressed && this.Settings.SnapGrid) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize;
           this.MovingElement.X = actualPosX;
           this.MovingElement.Y = actualPosY;
         }
+      } else {
+        if (this.ControlPressed) {
+          let distX = mousePos.x - this.Panning.StartX;
+          let distY = mousePos.y - this.Panning.StartY;
+          this.Panning.StartX += distX;
+          this.Panning.StartY += distY;
+
+          this.Panning.OffsetX += distX;
+          this.Panning.OffsetY += distY;
+
+          this.Ctx.translate(distX, distY);
+        }
       }
     } else {
       this.ActiveContainer.checkMouseBounds(mousePos);
@@ -164,6 +211,7 @@ class LogicEngine {
     this.RecursionError = false;
     this.Canvas.setAttribute('tabindex','0');
     this.ControlPressed = false;
+    this.Panning =  {OffsetX: 0, OffsetY: 0,StartOffsetX: 0, StartOffsetY: 0, StartX: 0, StartY: 0};
 
   }
 
@@ -183,23 +231,31 @@ class LogicEngine {
 
   }
 
+  getCanvasMousePos(mousePos) {
+    return {x: mousePos.x - this.Panning.OffsetX, y: mousePos.y - this.Panning.OffsetY};
+  }
+
   DrawLoop() {
     if (this.RecursionError) {
       this.RecursionError = false;
       alert("Recursion Error!  Whatever you last did is causing an oscillating loop, please check your connections and try again!");
     }
     let startLoop = performance.now();
-    this.Ctx.clearRect(0,0,this.Canvas.width,this.Canvas.height);
+    this.Ctx.clearRect(0- this.Panning.OffsetX,0- this.Panning.OffsetY,this.Canvas.width,this.Canvas.height);
 
     this.ActiveContainer.DrawAll(this.Ctx,this.Settings);
-    let btn_CreateIC = document.getElementById("btn_CreateIC");
+    let tfm_CreateIC = document.getElementById("tfm_CreateIC");
-    btn_CreateIC.disabled = true;
+    let rcm_CreateIC = document.getElementById("rcm_CreateIC");
-    if (this.ActiveContainer.ICOutputs > 0) btn_CreateIC.disabled = false;
+
+    tfm_CreateIC.classList.add("disabled");
+    rcm_CreateIC.classList.add("disabled");
+    if (this.ActiveContainer.ICOutputs > 0) tfm_CreateIC.classList.remove("disabled");
+    if (this.ActiveContainer.ICOutputs > 0) rcm_CreateIC.classList.remove("disabled");
     if (this.ActiveLink) {
       let startX = this.ActiveLink.LinkOutLocation().x;
       let startY = this.ActiveLink.LinkOutLocation().y;
-      let endX = this.Mouse.x;
+      let endX = this.Mouse.x - this.Panning.OffsetX;
-      let endY = this.Mouse.y;
+      let endY = this.Mouse.y - this.Panning.OffsetY;
       let startMidX = startX + ((endX - startX)/2);
       let startMidY = startY;
       let midX = startMidX;
@@ -207,6 +263,7 @@ class LogicEngine {
       let endMidX = startMidX;
       let endMidY = endY;
 
+
       this.Ctx.save();
       this.Ctx.strokeStyle = this.Settings.LinkingConnectionColor;
       this.Ctx.lineWidth = this.Settings.LinkingWidth;
@@ -219,9 +276,11 @@ class LogicEngine {
       this.Ctx.restore();
     }
     let ct = new CanvasTools();
-    let FPSOffset = this.Canvas.width - 150;
+    let FPSOffset = 5 - this.Panning.OffsetX;
-    ct.drawText(this.Ctx,FPSOffset,650,"FPS: " + this.FPS,"12px console", "#00ff00");
+    if (this.Settings.ShowFPS) {
-    ct.drawText(this.Ctx,FPSOffset,670,"Potential FPS: " + this.PotentialFPS,"12px console", "#00ff00");
+      ct.drawText(this.Ctx, FPSOffset, 15 - this.Panning.OffsetY, "FPS: " + this.FPS, "12px console", "#00ff00");
+      ct.drawText(this.Ctx, FPSOffset, 29 - this.Panning.OffsetY, "Potential FPS: " + Math.floor(this.PotentialFPS), "12px console", "#00ff00");
+    }
     let timeCheck = performance.now();
     this.FPSCounter++;
 

js/main.js

@@ -2,7 +2,7 @@
     MatCat BrowserLogic Simulator
  */
 
-let Version = "0.3.10";
+let Version = "0.4.0";
 let spanVersion = document.getElementById("version");
 spanVersion.innerText = Version;
 // get the canvas and get the engine object going
@@ -25,6 +25,15 @@ 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);
@@ -55,10 +64,23 @@ btn_CloseWelcome.addEventListener('click', function(evt) {
   }
 }, false);
 
-let btn_CreateIC = document.getElementById("btn_CreateIC");
+let tfm_CreateIC = document.getElementById("tfm_CreateIC");
-btn_CreateIC.addEventListener('click', function(evt) {
+tfm_CreateIC.addEventListener('click', function(evt) {
-  let CreateICBox = document.getElementById("CreateICBox");
+  if (!tfm_CreateIC.classList.contains("disabled")) {
-  CreateICBox.style.display = "block";
+    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");
@@ -89,20 +111,81 @@ ICDescription.addEventListener('input', function(evt){
   if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
 });
 
-let btn_New = document.getElementById("btn_New");
+let tfm_New = document.getElementById("tfm_New");
-btn_New.addEventListener('click', function(evt) {
+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_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 btn_Save = document.getElementById("btn_Save");
+let rcm_Disconect = document.getElementById("rcm_Disconnect");
-btn_Save.addEventListener('click', function(evt) {
+rcm_Disconect.addEventListener('click', function(evt) {
-  download("mydeign.LogicParts",createSaveState(logicEngine.ActiveContainer));
+  logicEngine.ActiveContainer.Selected.Disconnect();
+  logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
+});
+
+let tfm_Disconect = document.getElementById("tfm_Disconnect");
+tfm_Disconect.addEventListener('click', function(evt) {
+  logicEngine.ActiveContainer.Selected.Disconnect();
+  logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
+  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 btn_Load = document.getElementById("btn_Load");
+let tfm_Open = document.getElementById("tfm_Open");
-btn_Load.addEventListener('click', function(evt) {
+tfm_Open.addEventListener('click', function(evt) {
+  setTimeout(function(){hideMenus()},10);
   file_Load.click();
 });
 file_Load.addEventListener('change', function(evt) {
@@ -111,7 +194,7 @@ file_Load.addEventListener('change', function(evt) {
     return function (e) {
       try {
         let restoredata = JSON.parse(e.target.result);
-        console.log(restoredata);
+
         loadresult = loadsave(restoredata);
         if (!loadresult) {
           switch(loadresult) {
@@ -127,7 +210,7 @@ file_Load.addEventListener('change', function(evt) {
           }
         }
       } catch (ex) {
-        alert("Bad file!");
+        alert("Bad file! " + ex);
         console.log(ex);
       }
     }
@@ -135,5 +218,119 @@ file_Load.addEventListener('change', function(evt) {
   fread.readAsText(evt.target.files[0]);
 }, false);
 
+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_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.getElementsByTagName("span")[0];
+    sgSpan.innerText = "✓";
+    logicEngine.Settings.HideConnections = false;
+  } else {
+    let sgSpan = tfm_ShowConns.getElementsByTagName("span")[0];
+    sgSpan.innerText = "";
+    logicEngine.Settings.HideConnections = true;
+  }
+  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;
+  }
+  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.getElementsByTagName("span")[0];
+    sgSpan.innerText = "";
+    logicEngine.Settings.ShowFPS = false;
+  } else {
+    let sgSpan = tfm_ShowFPS.getElementsByTagName("span")[0];
+    sgSpan.innerText = "✓";
+    logicEngine.Settings.ShowFPS = true;
+  }
+  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.getElementsByTagName("span")[0];
+    sgSpan.innerText = "";
+    logicEngine.Settings.ShowGrid = false;
+  } else {
+    let sgSpan = tfm_ShowGrid.getElementsByTagName("span")[0];
+    sgSpan.innerText = "✓";
+    logicEngine.Settings.ShowGrid = true;
+  }
+  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.getElementsByTagName("span")[0];
+    sgSpan.innerText = "";
+    logicEngine.Settings.SnapGrid = false;
+  } else {
+    let sgSpan = tfm_SnapGrid.getElementsByTagName("span")[0];
+    sgSpan.innerText = "✓";
+    logicEngine.Settings.SnapGrid = true;
+  }
+  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("");
+  //setTimeout(function(){hideMenus()},10);
+});
+
+
+document.addEventListener( "contextmenu", function(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";
+
+});
 
 CheckForWelcomeCookie();