WIP:0.4.0 Fixed canvas bug on resizing

css/main.css

@@ -12,6 +12,7 @@
    ========================================================================== */
 body {
   background-color: #54545d;
+  overflow: hidden;
 }
 
 

js/baseclasses.js

@@ -141,18 +141,13 @@ class elementContainer {
   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 (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;

js/elements.js

@@ -120,6 +120,25 @@ class Element extends CanvasTools {
     }
   }
 
+  isVisible() {
+    let isvisible = false;
+    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,

js/globalfunctions.js

@@ -309,6 +309,10 @@ function loadsave(savedata) {
   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;

js/logicengine.js

@@ -23,7 +23,7 @@ class LogicEngine {
     let lmrect = leftmenu.getBoundingClientRect();
     let tbrect = topbar.getBoundingClientRect();
     leftmenu.style.height = (window.innerHeight - (tbrect.height + 2)) + "px";
-    this.Canvas.width = window.innerWidth - (lmrect.width);
+    this.Canvas.width = window.innerWidth - lmrect.width;
     this.Canvas.height = window.innerHeight - tbrect.height;
     this.Mouse = false;
     let gridPlane = document.getElementById("GridPlane");
@@ -33,8 +33,10 @@ class LogicEngine {
     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);
+    this.Ctx.translate(this.Panning.OffsetX,this.Panning.OffsetY);
     if (this.Settings.ShowGrid) {
+      let Ctx = gridPlane.getContext("2d");
       Ctx.save();
       let gridWidth = this.Settings.GridSize;
       for (let x = gridWidth; x < (this.Canvas.width); x += gridWidth) {
@@ -55,6 +57,7 @@ class LogicEngine {
       }
       Ctx.restore();
     }
+    console.log("Resized");
   }
 
   PropertyChange(property) {

js/main.js

@@ -114,12 +114,19 @@ ICDescription.addEventListener('input', function(evt){
 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");