From 3d2ed2f9d7f7b821f95e793a6bc192d1a9d3bff0 Mon Sep 17 00:00:00 2001 From: MatCat Date: Sun, 21 Feb 2021 16:09:51 -0800 Subject: [PATCH] 0.2.4: Improved element size, improved input arrangement --- README.md | 6 ++++ js/logicengine.js | 74 ++++++++++++++++++++++++----------------------- js/main.js | 2 +- 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 4563ab7..98ad6cb 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,12 @@ To be decided, but at this moment this code is open source and free to use for n ## Changelog +### 0.2.4 +* Brought connections to foreground to make them more obvious in less then ideal layouts +* Resized logic elements and positions I/O better +* Logic elements will now grow or shrink in size based on I/O +* Made selection box transparent + ### 0.2.3 * Fixed bug where timer isn't removed when clock is deleted diff --git a/js/logicengine.js b/js/logicengine.js index 9882dc6..597a85f 100644 --- a/js/logicengine.js +++ b/js/logicengine.js @@ -193,8 +193,8 @@ class Element extends CanvasTools { this.Name = "Element"; this.Designator = ""; this.Inputs = new Array(Inputs); - this.Width = 150; - this.Height = 100; + this.Width = 100; + this.Height = 60; this.inputCircleRadius = 10; this.outputCircleRadius = 10; this.X = 0; @@ -234,6 +234,8 @@ class Element extends CanvasTools { inputs = parseInt(inputs,10); this.Inputs = new Array(inputs); this.getProperty("Inputs").CurrentValue = inputs; + this.Height = inputs*25; + if (this.Height < 60) this.Height = 60; } Delete() { @@ -244,7 +246,7 @@ class Element extends CanvasTools { } MouseClick(mousePos) { - let mouseDistOutput = length2D(this.X+(this.Width-20), + let mouseDistOutput = length2D(this.X+(this.Width-10), this.Y+(this.Height/2), this.MousePosition.x, this.MousePosition.y); @@ -252,7 +254,7 @@ class Element extends CanvasTools { // We need to see if an input is being clicked on to be linked to let foundInput = false; for (let a = 0; a < this.Inputs.length;a++) { - let mouseDist = length2D(this.X+20, + let mouseDist = length2D(this.X+10, this.Y+(this.inputCircleRadius + 2)+(((a*(4+(this.inputCircleRadius*2))))-2)+(this.inputCircleRadius/2), this.MousePosition.x, this.MousePosition.y); @@ -285,16 +287,16 @@ class Element extends CanvasTools { } drawInputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover = "#00ffff") { - let old_strokeStyle = ctx.strokeStyle; - let old_fillStyle = ctx.fillStyle; - this.inputCircleRadius = 10; - if ((this.totalInputs() * Math.round((this.inputCircleRadius*2)+4)) >= (this.Height-2)) { - this.inputCircleRadius = Math.round((this.Height-Math.round(2 + this.totalInputs() * 4)) / this.totalInputs())/2; - } + ctx.save(); + //this.inputCircleRadius = 10; + let centerY = y + Math.round(this.Height / 2); + let totalHeight = this.totalInputs() * ((this.inputCircleRadius*2)+4); + let firstY = (centerY - (totalHeight/2)) + 12; + for (let a = 0; a < this.totalInputs();a++) { - let mouseDist = length2D(x+20,y+(this.inputCircleRadius + 2)+(((a*(4+(this.inputCircleRadius*2))))-2)+(this.inputCircleRadius/2),this.MousePosition.x,this.MousePosition.y); + let mouseDist = length2D(x+10, firstY + (a*24),this.MousePosition.x,this.MousePosition.y); ctx.beginPath(); - ctx.arc(x+20,y+(this.inputCircleRadius + 2)+(((a*(4+(this.inputCircleRadius*2))))-2)+(this.inputCircleRadius/2),this.inputCircleRadius,0,2*Math.PI); + ctx.arc(x+10,firstY + (a*24),this.inputCircleRadius,0,2*Math.PI); ctx.strokeStyle = borderColor; ctx.fillStyle = circleColorFalse; if (this.Inputs[a]) ctx.fillStyle = circleColorTrue; @@ -302,16 +304,15 @@ class Element extends CanvasTools { ctx.fill(); ctx.stroke(); } - ctx.strokeStyle = old_strokeStyle; - ctx.fillStyle = old_fillStyle; + ctx.restore(); } drawOutputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover="#00ffff") { let old_strokeStyle = ctx.strokeStyle; let old_fillStyle = ctx.fillStyle; - let mouseDist = length2D(x+(this.Width-20),y+(this.Height/2),this.MousePosition.x,this.MousePosition.y); + let mouseDist = length2D(x+(this.Width-10),y+(this.Height/2),this.MousePosition.x,this.MousePosition.y); ctx.beginPath(); - ctx.arc(x+(this.Width-20),y+(this.Height/2),this.outputCircleRadius,0,2*Math.PI); + ctx.arc(x+(this.Width-10),y+(this.Height/2),this.outputCircleRadius,0,2*Math.PI); ctx.strokeStyle = borderColor; ctx.fillStyle = circleColorFalse; if (this.getOutput()) ctx.fillStyle = circleColorTrue; @@ -385,7 +386,7 @@ class Element extends CanvasTools { /* Draw routine for the element */ - this.drawBorderBox(ctx,x,y,drawWidth,drawHeight); + this.drawBorderBox(ctx,x+10,y,drawWidth-20,drawHeight); this.drawTextCentered(ctx,x,y,this.Width,this.Height,"LOGIC"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -457,8 +458,8 @@ class ClockElement extends Element { } drawElement(x, y, ctx) { - this.drawBorderBox(ctx, x,y,this.Width,this.Height); - this.drawTextCentered(ctx,x,y,this.Width,(this.Height+(this.Height/2)),this.Period + "ms " + (this.Duty * 100) + "%","10px Console"); + this.drawBorderBox(ctx, x+10,y,this.Width-20,this.Height); + this.drawTextCentered(ctx,x,y+5,this.Width,12,this.Period + "ms " + (this.Duty * 100) + "%","10px Console"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); } @@ -488,11 +489,12 @@ class InputSwitch extends inputElement { constructor(logicengine) { super(logicengine); this.Name = "Switch"; + this.Height = 70; } MouseClick(mousePos) { super.MouseClick(mousePos); - if ((mousePos.x >= (this.X + 10)) && (mousePos.x <= (this.X + 60)) && (mousePos.y >= (this.Y + 25)) && (mousePos.y <= (this.Y + 75))) { + 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; for (let a = 0; a < this.OutputConnections.length; a++) { this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, this.getOutput()); @@ -501,8 +503,8 @@ class InputSwitch extends inputElement { } drawElement(x, y, ctx) { - this.drawBorderBox(ctx, x,y,this.Width,this.Height); - this.drawBorderBox(ctx,x+10,y+25,50,50,1,"#ccc","#777"); + this.drawBorderBox(ctx, x,y,this.Width-10,this.Height); + this.drawBorderBox(ctx,x+5,y+5,50,50,1,"#ccc","#777"); this.drawOutputs(ctx,x,y); } } @@ -521,7 +523,7 @@ class LogicAND extends Element { return ANDResult; } drawElement(x,y,ctx) { - this.drawBorderBox(ctx, x,y,this.Width,this.Height); + this.drawBorderBox(ctx, x+10,y,this.Width-20,this.Height); this.drawTextCentered(ctx,x,y,this.Width,this.Height,"|⊃"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -541,7 +543,7 @@ class LogicNAND extends LogicAND { } } drawElement(x,y,ctx) { - this.drawBorderBox(ctx, x,y,this.Width,this.Height); + this.drawBorderBox(ctx, x+10,y,this.Width-20,this.Height); this.drawTextCentered(ctx,x,y,this.Width,this.Height,"|⊃🞄"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -565,7 +567,7 @@ class LogicOR extends Element { let drawWidth = this.Width; let drawHeight = this.Height; - this.drawBorderBox(ctx, x,y,drawWidth,drawHeight); + this.drawBorderBox(ctx, x+10,y,drawWidth-20,drawHeight); this.drawTextCentered(ctx,x,y,drawWidth,drawHeight,")⊃"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -585,7 +587,7 @@ class LogicNOR extends LogicOR { } } drawElement(x,y,ctx) { - this.drawBorderBox(ctx, x,y,this.Width,this.Height); + this.drawBorderBox(ctx, x+10,y,this.Width-20,this.Height); this.drawTextCentered(ctx,x,y,this.Width,this.Height,")⊃🞄"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -609,7 +611,7 @@ class LogicXOR extends Element { let drawWidth = this.Width; let drawHeight = this.Height; - this.drawBorderBox(ctx, x,y,drawWidth,drawHeight); + this.drawBorderBox(ctx, x+10,y,drawWidth-20,drawHeight); this.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"))⊃"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -633,7 +635,7 @@ class LogicXNOR extends Element { let drawWidth = this.Width; let drawHeight = this.Height; - this.drawBorderBox(ctx, x,y,drawWidth,drawHeight); + this.drawBorderBox(ctx, x+10,y,drawWidth-20,drawHeight); this.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"))⊃🞄"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -656,7 +658,7 @@ class LogicNOT extends Element { let drawWidth = this.Width; let drawHeight = this.Height; - this.drawBorderBox(ctx, x,y,drawWidth,drawHeight); + this.drawBorderBox(ctx, x+10,y,drawWidth-20,drawHeight); this.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"|>🞄"); this.drawInputs(ctx,x,y); this.drawOutputs(ctx,x,y); @@ -715,12 +717,7 @@ class elementContainer { DrawAll(ctx,settings) { for (let a = 0; a < this.Elements.length; a++) { - // Not ideal to loop twice but we need the connections drawn first - this.Elements[a].drawConnections(ctx, settings); - } - - for (let a = 0; a < this.Elements.length; a++) { - 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, 2, "#5555FF", "#5555ff"); + 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); let old_font = ctx.font; let old_fillStyle = ctx.fillStyle; @@ -738,6 +735,12 @@ class elementContainer { let PropertiesBox = document.getElementById("PropertiesBox"); if (PropertiesBox.style.display != "none") PropertiesBox.style.display = "none"; } + + 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); + } + } Select(element) { @@ -792,7 +795,6 @@ class LogicEngine { this.MouseDownTime = performance.now(); let element = this.ActiveContainer.checkMouseBounds(mousePos); if (element) { - console.log("Moused down on " + element.Designator); this.MovingElement = element; this.MovingElementStartX = element.X; this.MovingElementStartY = element.Y; diff --git a/js/main.js b/js/main.js index a124a17..4868d0b 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,7 @@ MatCat BrowserLogic Simulator */ -let Version = "0.2.3"; +let Version = "0.2.4"; let spanVersion = document.getElementById("version"); spanVersion.innerText = Version; // get the canvas and get the engine object going