diff --git a/README.md b/README.md index 104cdd0..cdabd70 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,12 @@ LZ-String, Copyright 2013 pieroxy under MIT license https://github.com/pieroxy/l ## Changelog +### 0.4.15 + +* Prepending ! or ~ (active low) before a pin name will now overline it when displayed on element +* Fixed a bug that disabled a switch after it was disconnected +* Fixed bug in how JK flipflops handled PRE and CLR and CLK + ### 0.4.14 * Added WireNode element, allows you to better manage wires. Please note that signals only flow in the direction of connection! It is NOT a bidirectional element diff --git a/js/baseclasses.js b/js/baseclasses.js index aaf69ed..65374ab 100644 --- a/js/baseclasses.js +++ b/js/baseclasses.js @@ -32,25 +32,41 @@ class CanvasTools { ctx.restore(); } - drawTextCentered(ctx,x,y,x2,y2,text,fontStyle="24px Console",fontColor = "#555") { + drawTextCentered(ctx,x,y,x2,y2,text,fontStyle="24px Console",fontColor = "#555", Overline = false) { ctx.save(); ctx.font = fontStyle; ctx.fillStyle = fontColor; + let textSize = this.textSize(ctx,text,fontStyle); let tHeight = ctx.measureText(text).actualBoundingBoxAscent + ctx.measureText(text).actualBoundingBoxDescent; let tX = x+((x2/2)-(ctx.measureText(text).width/2)); let tY = y+tHeight+((y2/2)-(tHeight/2)); + if (Overline) { + ctx.strokeStyle = fontColor; + ctx.beginPath(); + ctx.moveTo(tX,tY-textSize.height-1); + ctx.lineTo(tX+textSize.width,tY-textSize.height-1); + ctx.stroke(); + } + ctx.fillText(text,tX,tY); ctx.restore(); } - drawText(ctx,x,y,text,fontStyle="24px Console",fontColor = "#555") { + drawText(ctx,x,y,text,fontStyle="24px Console",fontColor = "#555",Overline = false) { + let textSize = this.textSize(ctx,text,fontStyle); ctx.save(); ctx.font = fontStyle; ctx.fillStyle = fontColor; ctx.fillText(text,x,y); + if (Overline) { + ctx.strokeStyle = fontColor; + ctx.beginPath(); + ctx.moveTo(x,y-textSize.height-2); + ctx.lineTo(x+textSize.width,y-textSize.height-2); + ctx.stroke(); + } ctx.restore(); } - } class ContainerConnection { diff --git a/js/elements/BaseElementClasses.js b/js/elements/BaseElementClasses.js index d3e704a..0c8496c 100644 --- a/js/elements/BaseElementClasses.js +++ b/js/elements/BaseElementClasses.js @@ -239,6 +239,7 @@ class Element extends CanvasTools { this.OutputConnections.splice(a,1); a--; } + this.Disconnecting = false; } this.drawElement(0,0,this.StaticCtx); } @@ -354,7 +355,17 @@ class Element extends CanvasTools { if ((mouseDist <= (this.inputCircleRadius)) && this.LogicEngine.ActiveLink) ctx.fillStyle = circleColorHover; ctx.fill(); ctx.stroke(); - if (this.InputLabels[a] && drawFresh) this.drawText(ctx,x+(this.inputCircleRadius*2)+ 5,(firstY + (a*24)) + 5,this.InputLabels[a],"10px Console","#000"); + let drawOverline = false; + let label = this.InputLabels[a]; + + if (this.InputLabels[a] && drawFresh) { + if (this.InputLabels[a].charAt(0) == "!" || this.InputLabels[a].charAt(0) == "~") { + // Draw a NOT line + drawOverline = true; + label = this.InputLabels[a].substring(1); + } + this.drawText(ctx,x+(this.inputCircleRadius*2)+ 5,(firstY + (a*24)) + 5,label,"10px Console","#000",drawOverline); + } } ctx.restore(); } @@ -379,9 +390,18 @@ class Element extends CanvasTools { ctx.fill(); ctx.stroke(); let textSize = false; + let drawOverline = false; + let label = this.OutputLabels[a]; + if (this?.OutputLabels[a]?.charAt(0) == "!" || this?.OutputLabels[a]?.charAt(0) == "~") { + // Draw a NOT line + drawOverline = true; + label = this.OutputLabels[a].substring(1); + } - if (this.OutputLabels[a]) textSize = this.textSize(ctx,this.OutputLabels[a],"10px Console"); - if (this.OutputLabels[a] && drawFresh) this.drawText(ctx,(x+(this.Width)) - (textSize.width + 5 + (this.outputCircleRadius*2)),(firstY + (a*24)) + 5,this.OutputLabels[a],"10px Console","#000"); + if (this.OutputLabels[a]) textSize = this.textSize(ctx,label,"10px Console"); + if (this.OutputLabels[a] && drawFresh) { + this.drawText(ctx,(x+(this.Width)) - (textSize.width + 5 + (this.outputCircleRadius*2)),(firstY + (a*24)) + 5,label,"10px Console","#000",drawOverline); + } } ctx.restore(); } diff --git a/js/elements/FFElements.js b/js/elements/FFElements.js index 841875c..01756ae 100644 --- a/js/elements/FFElements.js +++ b/js/elements/FFElements.js @@ -3,11 +3,12 @@ class FlipFlopJK extends Element { super(_Container, RestoreData,logicengine,5); this.Name = "JK-FF"; this.Outputs = new Array(2); - this.InputLabels = new Array("J","CLK","K","!PRE", "!CLR"); + this.InputLabels = new Array("J","!CLK","K","!PRE", "!CLR"); this.OutputLabels = new Array("Q","~Q"); this.removeProperty("Inputs"); this.Height = 140; - + this.Outputs[0] = true; + this.Outputs[1] = true; if (RestoreData) { this.Outputs = RestoreData.OutputStates; } @@ -26,9 +27,12 @@ class FlipFlopJK extends Element { if (Value !== false) Value = true; let oldOutput = this.Outputs[0]; let oldOutput2 = this.Outputs[1]; + let oldInput2 = this.Inputs[1]; + let oldInput3 = this.Inputs[3]; + let oldInput4 = this.Inputs[4]; this.Inputs[Input] = Value; - if (this.Inputs[1]) { + if (!this.Inputs[1] && oldInput2) { if (!this.Inputs[0] && this.Inputs[2]) { // set Q low this.Outputs[0] = false; @@ -43,11 +47,18 @@ class FlipFlopJK extends Element { this.Outputs[1] = !this.Outputs[0]; } } - if (!this.Inputs[3]) { + + if (this.Inputs[4] && !oldInput4 && this.Outputs[0] && this.Outputs[1]) { + this.Outputs[1] = false; + } + if (this.Inputs[3] && !oldInput3 && this.Outputs[0] && this.Outputs[1]) { + this.Outputs[0] = false; + } + if (!this.Inputs[3] && oldInput3) { this.Outputs[0] = true; this.Outputs[1] = false; } - if (!this.Inputs[4]) { + if (!this.Inputs[4] && oldInput4) { this.Outputs[0] = false; this.Outputs[1] = true; } @@ -105,26 +116,37 @@ class FlipFlopSR extends Element { if (Value !== false) Value = true; let oldOutput = this.Outputs[0]; let oldOutput2 = this.Outputs[1]; + let oldInput1 = this.Inputs[1]; + let oldInput3 = this.Inputs[3]; + let oldInput4 = this.Inputs[4]; + this.Inputs[Input] = Value; this.redraw = true; - if (this.Inputs[1]) { + if (this.Inputs[1] && !oldInput1) { if (!this.Inputs[0] && this.Inputs[2]) { // set Q low this.Outputs[0] = false; this.Outputs[1] = true; } else if (this.Inputs[0] && !this.Inputs[2]) { - // set Q low + // set Q high this.Outputs[0] = true; this.Outputs[1] = false; } } - if (!this.Inputs[3]) { + if (this.Inputs[4] && !oldInput4 && !this.Inputs[3] && this.Outputs[1]) { + this.Outputs[1] = false; + } + if (this.Inputs[3] && !oldInput3 && !this.Inputs[4] && this.Outputs[0]) { + this.Outputs[0] = false; + } + + if (!this.Inputs[3] && oldInput3) { this.Outputs[0] = true; this.Outputs[1] = false; } - if (!this.Inputs[4]) { + if (!this.Inputs[4] && oldInput4) { this.Outputs[0] = false; this.Outputs[1] = true; } @@ -182,6 +204,8 @@ class FlipFlopT extends Element { if (Value !== false) Value = true; let oldOutput = this.Outputs[0]; let oldOutput2 = this.Outputs[1]; + let oldInput2 = this.Inputs[2]; + let oldInput3 = this.Inputs[3]; this.Inputs[Input] = Value; this.redraw = true; @@ -190,11 +214,11 @@ class FlipFlopT extends Element { this.Outputs[1] = !this.Outputs[0]; } - if (!this.Inputs[2]) { + if (!this.Inputs[2] && oldInput2) { this.Outputs[0] = true; this.Outputs[1] = false; } - if (!this.Inputs[3]) { + if (!this.Inputs[3] && oldInput3) { this.Outputs[0] = false; this.Outputs[1] = true; } @@ -254,18 +278,19 @@ class FlipFlopD extends Element { let oldOutput = this.Outputs[0]; let oldOutput2 = this.Outputs[1]; let oldInput = this.Inputs[1]; + let oldInput2 = this.Inputs[2]; + let oldInput3 = this.Inputs[3]; this.Inputs[Input] = Value; - this.redraw = true; if (this.Inputs[1] && !oldInput) { this.Outputs[0] = this.Inputs[0]; this.Outputs[1] = !this.Outputs[0]; } - if (!this.Inputs[2]) { + if (!this.Inputs[2] && oldInput2) { this.Outputs[0] = true; this.Outputs[1] = false; } - if (!this.Inputs[3]) { + if (!this.Inputs[3] && oldInput3) { this.Outputs[0] = false; this.Outputs[1] = true; } diff --git a/js/elements/ICElements.js b/js/elements/ICElements.js index f698024..fd19682 100644 --- a/js/elements/ICElements.js +++ b/js/elements/ICElements.js @@ -78,9 +78,17 @@ class ICInput extends Element { this.StaticCanvas.width = this.Width; this.StaticCanvas.height = this.Height; + let drawOverline = false; + let label = (this.Properties[0].CurrentValue) ? this.Properties[0].CurrentValue.toString() : ""; + if (label.charAt(0) == "!" || label.charAt(0) == "~") { + // Draw a NOT line + drawOverline = true; + label = label.substring(1); + } + this.drawBorderBox(ctx,x+10,y,this.Width-30,this.Height); this.drawTextCentered(ctx,x,y+2,this.Width-10,14,this.Designator,"12px Console"); - this.drawTextCentered(ctx,x,y,this.Width-10,this.Height,this.Properties[0].CurrentValue,"12px Console"); + this.drawTextCentered(ctx,x,y,this.Width-10,this.Height,label,"12px Console",undefined,drawOverline); this.drawOutputs(ctx,x,y); } @@ -186,9 +194,17 @@ class ICOutput extends Element { this.StaticCanvas.width = this.Width; this.StaticCanvas.height = this.Height; + let drawOverline = false; + let label = (this.Properties[0].CurrentValue) ? this.Properties[0].CurrentValue.toString() : ""; + if (label.charAt(0) == "!" || label.charAt(0) == "~") { + // Draw a NOT line + drawOverline = true; + label = label.substring(1); + } + this.drawBorderBox(ctx,x+20,y,this.Width-10,this.Height); this.drawTextCentered(ctx,x+20,y+2,this.Width-10,14,this.Designator,"12px Console"); - this.drawTextCentered(ctx,x+20,y,this.Width-10,this.Height,this.Properties[0].CurrentValue,"12px Console"); + this.drawTextCentered(ctx,x+20,y,this.Width-10,this.Height,label,"12px Console",undefined,drawOverline); this.drawInputs(ctx,x,y,undefined,undefined,undefined,undefined,true); } } diff --git a/js/elements/InputElements.js b/js/elements/InputElements.js index 9727410..f3620a7 100644 --- a/js/elements/InputElements.js +++ b/js/elements/InputElements.js @@ -307,12 +307,11 @@ class InputKeypad extends inputElement { for (let pX = 0; pX < this.ButtonColumns; pX++) { this.drawBorderBox(ctx, x + (5*(pX+1))+(buttonWidth*pX), y + (5*(pY+1))+(buttonHeight*pY), buttonWidth, buttonHeight, 1, "#ccc", "#777"); this.drawTextCentered(ctx,x + (5*(pX+1))+(buttonWidth*pX), y + (5*(pY+1))+(buttonHeight*pY), buttonWidth, buttonHeight, this.Buttons[(pY*this.ButtonColumns) + pX].Text,"16px Console", "#fff"); - } } this.drawTextCentered(ctx,x,y+(this.Height-14),this.Width-(this.outputCircleRadius*2),12,this.Designator,"12px Console","#000"); - this.drawOutputs(ctx,x,y); + this.drawOutputs(ctx,x,y,undefined,undefined,undefined,undefined,true); } } diff --git a/js/main.js b/js/main.js index 5f651b6..1f83e33 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,7 @@ MatCat BrowserLogic Simulator */ -let Version = "0.4.14"; +let Version = "0.4.15"; let spanVersion = document.getElementById("version"); spanVersion.innerText = Version;