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

0.2.8: Logic spawns to center, added button, changed switch look

Browse Source
This commit is contained in:
MatCat 2021-02-22 20:22:37 -08:00
parent ab4450e1f7
commit 36afdcdab5
4 changed files with 99 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -12,6 +12,11 @@ To be decided, but at this moment this code is open source and free to use for n
## Changelog
### 0.2.8
* New elements now spawn in the center
* Added button element
* Changed switch graphical look
### 0.2.7
* Added welcome screen window

1
index.html
View File

@ -43,6 +43,7 @@
<input type="button" id="btn_AddXNOR" value="!^ XNOR"/><br />
<input type="button" id="btn_AddNOT" value="! NOT"/><br />
<input type="button" id="btn_AddSWITCH" value="|- SWITCH"/><br />
<input type="button" id="btn_AddBTN" value="[o] BUTTON"/><br />
<input type="button" id="btn_AddCLK" value="🕑 Clock"/><br />
<input type="button" id="btn_Delete" value="🗑 Delete"/>
</div>

68
js/logicengine.js
View File

@ -280,6 +280,15 @@ class Element extends CanvasTools {
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input,false);
}
}
MouseDown(mousePos) {
return;
}
MouseUp(mousePos) {
return;
}
MouseClick(mousePos) {
let mouseDistOutput = length2D(this.X+(this.Width-10),
@ -569,6 +578,54 @@ class InputSwitch extends inputElement {
}
}
drawElement(x, y, ctx) {
this.drawBorderBox(ctx, x,y,this.Width-20,this.Height,1,"#000","#f7e979",this.LogicEngine.Settings.ShadowColor);
//this.drawBorderBox(ctx,x+5,y+5,50,50,1,"#ccc","#777");
this.drawBorderBox(ctx,x+5,y+25,50,10,1,"#ccc","#777");
if (this.getOutput()) {
this.drawBorderBox(ctx,x+15,y+5,30,25,1,"#ccc","#777");
this.drawTextCentered(ctx,x,y+this.Height - 30,this.Width-(this.outputCircleRadius*2)-20,12,"OFF","12px Console","#000");
} else {
this.drawBorderBox(ctx,x+15,y+30,30,25,1,"#ccc","#777");
this.drawTextCentered(ctx,x,y+7,this.Width-(this.outputCircleRadius*2)-20,12,"ON","12px Console","#000");
}
this.drawTextCentered(ctx,x,y+(this.Height-14),this.Width-(this.outputCircleRadius*2),12,this.Designator,"12px Console","#000");
this.drawOutputs(ctx,x,y);
}
}
class InputButton extends inputElement {
constructor(logicengine) {
super(logicengine);
this.Name = "Button";
this.Height = 70;
}
MouseDown(mousePos) {
if ((mousePos.x >= (this.X + 5)) && (mousePos.x <= (this.X + 55)) && (mousePos.y >= (this.Y + 5)) && (mousePos.y <= (this.Y + 55))) {
let old_output = this.Output;
this.Output = true;
this.LogicEngine.MouseDown = false; // Prevent movement on the button when its being pushed
if (old_output != this.Output) {
for (let a = 0; a < this.OutputConnections.length; a++) {
this.LogicEngine.RecursionCount = 0;
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, this.getOutput());
}
}
}
}
MouseUp(mousePos) {
let old_output = this.Output;
this.Output = false;
if (old_output != this.Output) {
for (let a = 0; a < this.OutputConnections.length; a++) {
this.LogicEngine.RecursionCount = 0;
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, this.getOutput());
}
}
}
drawElement(x, y, ctx) {
this.drawBorderBox(ctx, x,y,this.Width-20,this.Height,1,"#000","#f7e979",this.LogicEngine.Settings.ShadowColor);
this.drawBorderBox(ctx,x+5,y+5,50,50,1,"#ccc","#777");
@ -1090,15 +1147,17 @@ class LogicEngine {
Mouse_Down(evt) {
let mousePos = getMousePos(this.Canvas, evt);
this.MouseDown = true;
this.MouseDownTime = performance.now();
let element = this.ActiveContainer.checkMouseBounds(mousePos);
if (element) {
this.MouseDown = true;
this.ActiveContainer.Select(element);
this.MovingElement = element;
this.MovingElementStartX = element.X;
this.MovingElementStartY = element.Y;
this.MovingElementMouseStartX = mousePos.x;
this.MovingElementMouseStartY = mousePos.y;
element.MouseDown(mousePos);
} else {
this.ActiveLink = false;
}
@ -1106,28 +1165,27 @@ class LogicEngine {
Mouse_Up(evt) {
let mousePos = getMousePos(this.Canvas, evt);
this.MouseDown = false;
if (this.MovingElement) this.MovingElement.MouseUp(mousePos);
if (this.MovingElement && (this.MovingElement.X == this.MovingElementStartX) && (this.MovingElement.Y == this.MovingElementStartY)) {
if ((performance.now() - this.MouseDownTime) < 3000) {
// Presume this was a click
this.ActiveContainer.Select(this.MovingElement);
this.MovingElement.MouseClick(mousePos);
}
//console.log("Mouse Up");
}
if (!this.MovingElement) this.ActiveContainer.Selected = false;
this.MovingElement = false;
this.MouseDown = false;
}
Mouse_Move(evt) {
this.Canvas.focus();
//this.Canvas.focus();
let mousePos = getMousePos(this.Canvas, evt);
this.Mouse = mousePos;
if(this.MouseDown) {
//console.log('Mouse at position: ' + mousePos.x + ',' + mousePos.y);
if (this.MovingElement) {
if ((performance.now() - this.MouseDownTime) > 100) {
this.ActiveContainer.Select(this.MovingElement);
let xOffset = mousePos.x - this.MovingElementMouseStartX;
let yOffset = mousePos.y - this.MovingElementMouseStartY;
let diffxOffset = this.MovingElementMouseStartX - this.MovingElementStartX;

50
js/main.js
View File

@ -2,7 +2,7 @@
MatCat BrowserLogic Simulator
*/
let Version = "0.2.7";
let Version = "0.2.8";
let spanVersion = document.getElementById("version");
spanVersion.innerText = Version;
// get the canvas and get the engine object going
@ -18,7 +18,7 @@ window.addEventListener('resize', function(evt) {
logicEngine.Resize(evt);
}, false);
lCanvasElement.addEventListener('keydown', function(evt) {
window.addEventListener('keydown', function(evt) {
logicEngine.Key_Press(evt);
}, false);
@ -30,7 +30,7 @@ lCanvasElement.addEventListener('mouseup', function(evt) {
logicEngine.Mouse_Up(evt);
}, false);
lCanvasElement.addEventListener('mousemove', function(evt) {
window.addEventListener('mousemove', function(evt) {
logicEngine.Mouse_Move(evt);
}, false);
@ -58,71 +58,79 @@ btn_Delete.addEventListener('click', function(evt) {
let btn_AddAND = document.getElementById("btn_AddAND");
btn_AddAND.addEventListener('click', function(evt) {
let newAND = new LogicAND(logicEngine,2);
newAND.X = 20;
newAND.Y = 20;
newAND.X = logicEngine.Canvas.width/2;
newAND.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newAND);
}, false);
let btn_AddNAND = document.getElementById("btn_AddNAND");
btn_AddNAND.addEventListener('click', function(evt) {
let newNAND = new LogicNAND(logicEngine,2);
newNAND.X = 20;
newNAND.Y = 20;
newNAND.X = logicEngine.Canvas.width/2;
newNAND.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newNAND);
}, false);
let btn_AddOR = document.getElementById("btn_AddOR");
btn_AddOR.addEventListener('click', function(evt) {
let newOR = new LogicOR(logicEngine,2);
newOR.X = 20;
newOR.Y = 20;
newOR.X = logicEngine.Canvas.width/2;
newOR.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newOR);
}, false);
let btn_AddNOR = document.getElementById("btn_AddNOR");
btn_AddNOR.addEventListener('click', function(evt) {
let newNOR = new LogicNOR(logicEngine,2);
newNOR.X = 20;
newNOR.Y = 20;
newNOR.X = logicEngine.Canvas.width/2;
newNOR.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newNOR);
}, false);
let btn_AddXOR = document.getElementById("btn_AddXOR");
btn_AddXOR.addEventListener('click', function(evt) {
let newXOR = new LogicXOR(logicEngine);
newXOR.X = 20;
newXOR.Y = 20;
newXOR.X = logicEngine.Canvas.width/2;
newXOR.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newXOR);
}, false);
let btn_AddXNOR = document.getElementById("btn_AddXNOR");
btn_AddXNOR.addEventListener('click', function(evt) {
let newXNOR = new LogicXNOR(logicEngine);
newXNOR.X = 20;
newXNOR.Y = 20;
newXNOR.X = logicEngine.Canvas.width/2;
newXNOR.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newXNOR);
}, false);
btn_AddNOT.addEventListener('click', function(evt) {
let newNOT = new LogicNOT(logicEngine);
newNOT.X = 20;
newNOT.Y = 20;
newNOT.X = logicEngine.Canvas.width/2;
newNOT.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newNOT);
}, false);
let btn_AddSWITCH = document.getElementById("btn_AddSWITCH");
btn_AddSWITCH.addEventListener('click', function(evt) {
let newSWITCH = new InputSwitch(logicEngine);
newSWITCH.X = 20;
newSWITCH.Y = 20;
newSWITCH.X = logicEngine.Canvas.width/2;
newSWITCH.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newSWITCH);
}, false);
let btn_AddBTN = document.getElementById("btn_AddBTN");
btn_AddBTN.addEventListener('click', function(evt) {
let newBTN = new InputButton(logicEngine);
newBTN.X = logicEngine.Canvas.width/2;
newBTN.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newBTN);
}, false);
let btn_AddCLK = document.getElementById("btn_AddCLK");
btn_AddCLK.addEventListener('click', function(evt) {
let newCLK = new ClockElement(logicEngine);
newCLK.X = 20;
newCLK.Y = 20;
newCLK.X = logicEngine.Canvas.width/2;
newCLK.Y = logicEngine.Canvas.height/2;
logicEngine.ActiveContainer.AddElement(newCLK);
logicEngine.Scheduler.addTask(newCLK.Task);
}, false);