diff --git a/css/main.css b/css/main.css index 924dcb3..ace2903 100644 --- a/css/main.css +++ b/css/main.css @@ -12,6 +12,7 @@ ========================================================================== */ body { background-color: #54545d; + overflow: hidden; } diff --git a/js/baseclasses.js b/js/baseclasses.js index f3eea9e..9403d14 100644 --- a/js/baseclasses.js +++ b/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; diff --git a/js/elements.js b/js/elements.js index 4dac5f2..42bce78 100644 --- a/js/elements.js +++ b/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, diff --git a/js/globalfunctions.js b/js/globalfunctions.js index a178de0..50ff9f9 100644 --- a/js/globalfunctions.js +++ b/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; diff --git a/js/logicengine.js b/js/logicengine.js index 9289c93..c506d22 100644 --- a/js/logicengine.js +++ b/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) { diff --git a/js/main.js b/js/main.js index c7f034f..fe47f2a 100644 --- a/js/main.js +++ b/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");