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
### 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

74
js/logicengine.js
View File

@ -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;

2
js/main.js
View File

@ -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