MatCat.OpenSource/BrowserLogic
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

0.2.4: Improved element size, improved input arrangement

Browse Source
This commit is contained in:
MatCat 2021-02-21 16:09:51 -08:00
parent f6e368507d
commit 3d2ed2f9d7
3 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -12,6 +12,12 @@ To be decided, but at this moment this code is open source and free to use for n
## Changelog ## 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 ### 0.2.3
* Fixed bug where timer isn't removed when clock is deleted * Fixed bug where timer isn't removed when clock is deleted

74
js/logicengine.js
View File

@ -193,8 +193,8 @@ class Element extends CanvasTools {
this.Name = "Element"; this.Name = "Element";
this.Designator = ""; this.Designator = "";
this.Inputs = new Array(Inputs); this.Inputs = new Array(Inputs);
this.Width = 150; this.Width = 100;
this.Height = 100; this.Height = 60;
this.inputCircleRadius = 10; this.inputCircleRadius = 10;
this.outputCircleRadius = 10; this.outputCircleRadius = 10;
this.X = 0; this.X = 0;
@ -234,6 +234,8 @@ class Element extends CanvasTools {
inputs = parseInt(inputs,10); inputs = parseInt(inputs,10);
this.Inputs = new Array(inputs); this.Inputs = new Array(inputs);
this.getProperty("Inputs").CurrentValue = inputs; this.getProperty("Inputs").CurrentValue = inputs;
this.Height = inputs*25;
if (this.Height < 60) this.Height = 60;
} }
Delete() { Delete() {
@ -244,7 +246,7 @@ class Element extends CanvasTools {
} }
MouseClick(mousePos) { MouseClick(mousePos) {
let mouseDistOutput = length2D(this.X+(this.Width-20), let mouseDistOutput = length2D(this.X+(this.Width-10),
this.Y+(this.Height/2), this.Y+(this.Height/2),
this.MousePosition.x, this.MousePosition.x,
this.MousePosition.y); 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 // We need to see if an input is being clicked on to be linked to
let foundInput = false; let foundInput = false;
for (let a = 0; a < this.Inputs.length;a++) { 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.Y+(this.inputCircleRadius + 2)+(((a*(4+(this.inputCircleRadius*2))))-2)+(this.inputCircleRadius/2),
this.MousePosition.x, this.MousePosition.x,
this.MousePosition.y); this.MousePosition.y);
@ -285,16 +287,16 @@ class Element extends CanvasTools {
} }
drawInputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover = "#00ffff") { drawInputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover = "#00ffff") {
let old_strokeStyle = ctx.strokeStyle; ctx.save();
let old_fillStyle = ctx.fillStyle; //this.inputCircleRadius = 10;
this.inputCircleRadius = 10; let centerY = y + Math.round(this.Height / 2);
if ((this.totalInputs() * Math.round((this.inputCircleRadius*2)+4)) >= (this.Height-2)) { let totalHeight = this.totalInputs() * ((this.inputCircleRadius*2)+4);
this.inputCircleRadius = Math.round((this.Height-Math.round(2 + this.totalInputs() * 4)) / this.totalInputs())/2; let firstY = (centerY - (totalHeight/2)) + 12;
}
for (let a = 0; a < this.totalInputs();a++) { 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.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.strokeStyle = borderColor;
ctx.fillStyle = circleColorFalse; ctx.fillStyle = circleColorFalse;
if (this.Inputs[a]) ctx.fillStyle = circleColorTrue; if (this.Inputs[a]) ctx.fillStyle = circleColorTrue;
@ -302,16 +304,15 @@ class Element extends CanvasTools {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
} }
ctx.strokeStyle = old_strokeStyle; ctx.restore();
ctx.fillStyle = old_fillStyle;
} }
drawOutputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover="#00ffff") { drawOutputs(ctx,x,y,borderColor = "#000",circleColorFalse = "#ff0000",circleColorTrue="#00ff00",circleColorHover="#00ffff") {
let old_strokeStyle = ctx.strokeStyle; let old_strokeStyle = ctx.strokeStyle;
let old_fillStyle = ctx.fillStyle; 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.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.strokeStyle = borderColor;
ctx.fillStyle = circleColorFalse; ctx.fillStyle = circleColorFalse;
if (this.getOutput()) ctx.fillStyle = circleColorTrue; if (this.getOutput()) ctx.fillStyle = circleColorTrue;
@ -385,7 +386,7 @@ class Element extends CanvasTools {
/* /*
Draw routine for the element 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.drawTextCentered(ctx,x,y,this.Width,this.Height,"LOGIC");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -457,8 +458,8 @@ class ClockElement extends Element {
} }
drawElement(x, y, ctx) { 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.Height/2)),this.Period + "ms " + (this.Duty * 100) + "%","10px Console"); this.drawTextCentered(ctx,x,y+5,this.Width,12,this.Period + "ms " + (this.Duty * 100) + "%","10px Console");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
} }
@ -488,11 +489,12 @@ class InputSwitch extends inputElement {
constructor(logicengine) { constructor(logicengine) {
super(logicengine); super(logicengine);
this.Name = "Switch"; this.Name = "Switch";
this.Height = 70;
} }
MouseClick(mousePos) { MouseClick(mousePos) {
super.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; this.Output = ~this.Output;
for (let a = 0; a < this.OutputConnections.length; a++) { for (let a = 0; a < this.OutputConnections.length; a++) {
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, this.getOutput()); this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, this.getOutput());
@ -501,8 +503,8 @@ class InputSwitch extends inputElement {
} }
drawElement(x, y, ctx) { drawElement(x, y, ctx) {
this.drawBorderBox(ctx, x,y,this.Width,this.Height); this.drawBorderBox(ctx, x,y,this.Width-10,this.Height);
this.drawBorderBox(ctx,x+10,y+25,50,50,1,"#ccc","#777"); this.drawBorderBox(ctx,x+5,y+5,50,50,1,"#ccc","#777");
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
} }
} }
@ -521,7 +523,7 @@ class LogicAND extends Element {
return ANDResult; return ANDResult;
} }
drawElement(x,y,ctx) { 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.drawTextCentered(ctx,x,y,this.Width,this.Height,"|⊃");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -541,7 +543,7 @@ class LogicNAND extends LogicAND {
} }
} }
drawElement(x,y,ctx) { 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.drawTextCentered(ctx,x,y,this.Width,this.Height,"|⊃🞄");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -565,7 +567,7 @@ class LogicOR extends Element {
let drawWidth = this.Width; let drawWidth = this.Width;
let drawHeight = this.Height; 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.drawTextCentered(ctx,x,y,drawWidth,drawHeight,")⊃");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -585,7 +587,7 @@ class LogicNOR extends LogicOR {
} }
} }
drawElement(x,y,ctx) { 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.drawTextCentered(ctx,x,y,this.Width,this.Height,")⊃🞄");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -609,7 +611,7 @@ class LogicXOR extends Element {
let drawWidth = this.Width; let drawWidth = this.Width;
let drawHeight = this.Height; 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.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"))⊃");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -633,7 +635,7 @@ class LogicXNOR extends Element {
let drawWidth = this.Width; let drawWidth = this.Width;
let drawHeight = this.Height; 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.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"))⊃🞄");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -656,7 +658,7 @@ class LogicNOT extends Element {
let drawWidth = this.Width; let drawWidth = this.Width;
let drawHeight = this.Height; 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.drawTextCentered(ctx,x,y,drawWidth,drawHeight,"|>🞄");
this.drawInputs(ctx,x,y); this.drawInputs(ctx,x,y);
this.drawOutputs(ctx,x,y); this.drawOutputs(ctx,x,y);
@ -715,12 +717,7 @@ class elementContainer {
DrawAll(ctx,settings) { DrawAll(ctx,settings) {
for (let a = 0; a < this.Elements.length; a++) { for (let a = 0; a < this.Elements.length; a++) {
// Not ideal to loop twice but we need the connections drawn first 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].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");
this.Elements[a].drawElement(this.Elements[a].X, this.Elements[a].Y, ctx); this.Elements[a].drawElement(this.Elements[a].X, this.Elements[a].Y, ctx);
let old_font = ctx.font; let old_font = ctx.font;
let old_fillStyle = ctx.fillStyle; let old_fillStyle = ctx.fillStyle;
@ -738,6 +735,12 @@ class elementContainer {
let PropertiesBox = document.getElementById("PropertiesBox"); let PropertiesBox = document.getElementById("PropertiesBox");
if (PropertiesBox.style.display != "none") PropertiesBox.style.display = "none"; 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) { Select(element) {
@ -792,7 +795,6 @@ class LogicEngine {
this.MouseDownTime = performance.now(); this.MouseDownTime = performance.now();
let element = this.ActiveContainer.checkMouseBounds(mousePos); let element = this.ActiveContainer.checkMouseBounds(mousePos);
if (element) { if (element) {
console.log("Moused down on " + element.Designator);
this.MovingElement = element; this.MovingElement = element;
this.MovingElementStartX = element.X; this.MovingElementStartX = element.X;
this.MovingElementStartY = element.Y; this.MovingElementStartY = element.Y;

2
js/main.js
View File

@ -2,7 +2,7 @@
MatCat BrowserLogic Simulator MatCat BrowserLogic Simulator
*/ */
let Version = "0.2.3"; let Version = "0.2.4";
let spanVersion = document.getElementById("version"); let spanVersion = document.getElementById("version");
spanVersion.innerText = Version; spanVersion.innerText = Version;
// get the canvas and get the engine object going // get the canvas and get the engine object going