Compare commits
5 Commits
3729a73028
...
131cf088db
| Author | SHA1 | Date | |
|---|---|---|---|
|
131cf088db | ||
|
|
e329ce684e | ||
|
|
a967daa994 | ||
|
|
c906e499b9 | ||
|
|
af617e7058 |
14
README.md
14
README.md
@ -12,6 +12,20 @@ To be decided, but at this moment this code is open source and free to use for n
|
||||
|
||||
## Changelog
|
||||
|
||||
### 0.4.0
|
||||
|
||||
* You can now pan the work area, hold ctrl key while mouse dragging an empty area.
|
||||
* Right Click Menu
|
||||
* If an item is selected you can delete or disconnect them
|
||||
* Top menu
|
||||
* New / Open / Save moved to File menu
|
||||
* You can now disable connection drawing, or put them above or below elements in View menu
|
||||
* There is now a pan to center feature in View menu
|
||||
* Create IC has been moved to Tools menu
|
||||
* Help menu -> About opens the Welcome Window
|
||||
* Save dialog
|
||||
* Fixed various small bugs
|
||||
|
||||
### 0.3.10
|
||||
* Added BCD and Decimal options to the 4 bit output display, as well as bit labels in inputs
|
||||
|
||||
|
||||
193
css/main.css
193
css/main.css
@ -12,8 +12,10 @@
|
||||
========================================================================== */
|
||||
body {
|
||||
background-color: #54545d;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
color: #ddd;
|
||||
font-size: 1em;
|
||||
@ -265,57 +267,93 @@ textarea {
|
||||
}
|
||||
|
||||
#left-menu {
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
width: 212px;
|
||||
height: 99vh;
|
||||
display: inline-block;
|
||||
border: 1px solid black;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#inner-left-menu {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
overflow: auto;
|
||||
height: 99.4%;
|
||||
overflow-y: scroll;
|
||||
background-color: #54545d;
|
||||
}
|
||||
|
||||
#inner-left-menu::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
#inner-left-menu::-webkit-scrollbar-track {
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#575a60+0,292b2d+14,000000+49,292b2d+82,575a60+100 */
|
||||
background: rgb(87,90,96); /* Old browsers */
|
||||
background: -moz-linear-gradient(left, rgba(87,90,96,1) 0%, rgba(41,43,45,1) 14%, rgba(0,0,0,1) 49%, rgba(41,43,45,1) 82%, rgba(87,90,96,1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575a60', endColorstr='#575a60',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
#inner-left-menu::-webkit-scrollbar-thumb {
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+50,8e8e8e+50,000000+100&0+0,1+50,0+100 */
|
||||
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(142,142,142,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
#top-bar {
|
||||
height: 50px;
|
||||
height: 30px;
|
||||
overflow: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: #222;
|
||||
font-size: 2em;
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
|
||||
background: rgb(76,76,76); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
#LeftOf-SiteTitle {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
font-size: 0.5em;
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#SiteTitle {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
margin: 0px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.TOOLBOX_CATEGORY_HEADER {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
background-color: #222;
|
||||
font-size: 0.8em;
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8c9b3f+0,6d8e20+50,456000+51,799e24+100 */
|
||||
background: rgb(140,155,63); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(140,155,63,1) 0%, rgba(109,142,32,1) 50%, rgba(69,96,0,1) 51%, rgba(121,158,36,1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9b3f', endColorstr='#799e24',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
}
|
||||
.TOOLBOX_CATEGORY_HEADER h2 {
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TOOLBOX_CATEGORY_BODY input {
|
||||
font-size: 0.9em;
|
||||
padding: 1px;
|
||||
text-shadow: 0 1px 0 rgba(180, 180, 180, 0.4),
|
||||
1px 0 0 rgba(180, 180, 180, 0.4);
|
||||
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
|
||||
background: rgb(245,246,246); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
}
|
||||
|
||||
#darkout-overlay {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -366,7 +404,7 @@ textarea {
|
||||
#WelcomeWindow label {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
#PropertiesBox, #CreateICBox {
|
||||
#PropertiesBox, #CreateICBox, #SaveWindow {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
@ -387,16 +425,121 @@ textarea {
|
||||
border: 3px solid red;
|
||||
}
|
||||
|
||||
#PropertiesBoxTitle, #CreateICBoxTitle {
|
||||
#SaveWindow {
|
||||
width: 350px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#SaveWindowContent {
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#PropertiesBoxTitle, #CreateICBoxTitle, #SaveWindowTitle {
|
||||
text-align: center;
|
||||
background-color: #222222;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#PropertiesBoxContent, #CreateICBoxContent {
|
||||
#PropertiesBoxContent, #CreateICBoxContent, #SaveWindowContent {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#RightClickMenu, .top-menu-div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: #444455;
|
||||
border: 1px solid #232323;
|
||||
z-index: 9999999999;
|
||||
}
|
||||
|
||||
#left-top-menu {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#SiteTitle {
|
||||
width: 29%;
|
||||
font-size: 0.6em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#top-menu {
|
||||
|
||||
}
|
||||
|
||||
#top-menu a {
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#top-menu a:visited {
|
||||
color: #ddd;
|
||||
}
|
||||
#top-menu ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
#top-menu li {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.top-menu-div {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#top-menu li span {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#RightClickMenu ul, .top-menu-div ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#RightClickMenu li, .top-menu-div li {
|
||||
display: block !important;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 2px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
#RightClickMenu li:hover, .top-menu-div li:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#RightClickMenu .disabled, #top-menu .disabled {
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.rcm_seperator:hover, .tfm_seperator:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.rcm_seperator, .tfm_seperator {
|
||||
height: 2px;
|
||||
margin-bottom: 7px;
|
||||
border-bottom: 2px groove #54545d;
|
||||
}
|
||||
|
||||
#LogicPlane {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
|
||||
|
||||
102
index.html
102
index.html
@ -26,26 +26,85 @@
|
||||
<div id="WelcomeWindow">
|
||||
<h2>MatCat BrowserLogic Engine</h2>
|
||||
<p>Welcome to logic.parts, a free to use logic simulator for anyone to use. This is opensource software, you can find the project at <a href="https://www.mygit.space/MatCat.OpenSource/BrowserLogic">https://www.mygit.space/MatCat.OpenSource/BrowserLogic</a>. This is an early development project, so expect bugs and some things to not work :) If you would like to contribute please feel free to find me on IRC on Freenode in channel #LogicParts.</p>
|
||||
<p><span style="font-weight: bold; font-size: 1.2em;">Now on Version 0.4!</span> This new version brings an improved UI, panning, more settings options, and much more!</p>
|
||||
<input type="button" id="btn_CloseWelcome" value="Simulate Some Logic!"><br />
|
||||
<input type="checkbox" id="chk_dontDisplayWelcome" name="chk_dontDisplayWelcome" value="1">
|
||||
<label for="chk_dontDisplayWelcome">Don't show welcome window again</label></div>
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<div id="top-bar">
|
||||
<div id="LeftOf-SiteTitle">
|
||||
<input type="button" id="btn_New" value="New"/>
|
||||
<input type="button" id="btn_Save" value="Save"/>
|
||||
<input type="button" id="btn_Load" value="Load"/>
|
||||
<label for="chk_dontDisplayWelcome">Don't show welcome window again</label>
|
||||
<input type="file" id="file_Load" accept=".LogicParts" style="display: none;" />
|
||||
</div>
|
||||
<div id ="SiteTitle">
|
||||
MatCat BrowserLogic <span id="version"> </span>
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<div id="top-bar">
|
||||
<div id="top-menu">
|
||||
<div id="left-top-menu">
|
||||
<ul>
|
||||
<li id="tm_File" class="top-menu-item">File
|
||||
<div id="tm_FileMenu" class="top-menu-div">
|
||||
<ul>
|
||||
<li id="tfm_New">New</li>
|
||||
<li id="tfm_Open">Open</li>
|
||||
<li id="tfm_Save">Save</li>
|
||||
<li id="tfm_SaveAs" class="disabled" title="Feature coming soon">Save As</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li id="tm_Edit" class="top-menu-item">Edit
|
||||
<div id="tm_EditMenu" class="top-menu-div">
|
||||
<ul>
|
||||
<li id="tfm_Undo" class="disabled" title="Feature coming soon">Undo</li>
|
||||
<li id="tfm_Redo" class="disabled" title="Feature coming soon">Redo</li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_Cut" class="disabled" title="Feature coming soon">Cut</li>
|
||||
<li id="tfm_Copy" class="disabled" title="Feature coming soon">Copy</li>
|
||||
<li id="tfm_Paste" class="disabled" title="Feature coming soon">Paste</li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_Delete" class="disabled">Delete</li>
|
||||
<li id="tfm_Disconnect" class="disabled">Disconnect</li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_SelectAll" class="disabled" title="Feature coming soon">Select All</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li id="tm_View" class="top-menu-item">View
|
||||
<div id="tm_ViewMenu" class="top-menu-div">
|
||||
<ul>
|
||||
<li id="tfm_Pan2Center">Pan to Center</li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_ShowConnections">Show Connections <span>✓</span></li>
|
||||
<li id="tfm_ConnectionLayer">Connections Below</li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_ShowGrid">Show Grid <span>✓</span></li>
|
||||
<li id="tfm_SnapGrid">Snap to Grid <span>✓</span></li>
|
||||
<li id="tfm_GridSize">Grid Size <input type="number" id="in_GridSize" value="20" min="2" max="100" style="margin-left: 10px; width: 40px;"></li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_ShowFPS">Show FPS <span>✓</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li id="tm_Tools" class="top-menu-item">Tools
|
||||
<div id="tm_ToolsMenu" class="top-menu-div">
|
||||
<ul>
|
||||
<li id="tfm_CreateIC" class="disabled" title="Turn the current design into an IC, must have atleast one IC Output to create">Create IC</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li id="tm_Help" class="top-menu-item">Help
|
||||
<div id="tm_HelpMenu" class="top-menu-div">
|
||||
<ul>
|
||||
<li id="tfm_GITRepo"><a target="new" href="https://mygit.space/MatCat.OpenSource/BrowserLogic">GIT Repo</a></li>
|
||||
<li class="tfm_seperator"></li>
|
||||
<li id="tfm_About">About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="SiteTitle">MatCat BrowserLogic <span id="version"> </span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-menu">
|
||||
<div id="inner-left-menu">
|
||||
LOADING
|
||||
</div>
|
||||
<input type="button" id="btn_CreateIC" value="Create IC" style="position: absolute; bottom: 30px; left: 50px;">
|
||||
</div>
|
||||
<canvas id="GridPlane" width="400" height="300" style="position: absolute; top: 50px; left 202px;"></canvas>
|
||||
<canvas id="LogicPlane" width="400" height="300" style="margin: 0px; padding: 0px; position: absolute; top: 50px; left: 202px;"></canvas>
|
||||
@ -68,6 +127,29 @@
|
||||
<center><input type="button" id="btn_CreateIC_Create" value="Create IC" disabled> <input type="button" id="btn_CreateIC_Cancel" value="Cancel"></center>
|
||||
</div>
|
||||
</div>
|
||||
<div id="RightClickMenu">
|
||||
<ul>
|
||||
<li id="rcm_New">New</li>
|
||||
<li id="rcm_seperator1" class="rcm_seperator"></li>
|
||||
<li id="rcm_CreateIC">Create IC</li>
|
||||
<li id="rcm_seperator2" class="rcm_seperator"></li>
|
||||
<li id="rcm_Delete">Delete</li>
|
||||
<li id="rcm_Disconnect">Disconnect</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="SaveWindow">
|
||||
<div id="SaveWindowTitle">
|
||||
Save Design
|
||||
</div>
|
||||
<div id="SaveWindowContent">
|
||||
<div>
|
||||
<span style="padding-right: 10px;">Design Name</span><span><input type="text" id="saveName" value="My Design"></span>
|
||||
</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<center><input type="button" id="btn_SaveDesign" value="Save"> <input type="button" id="btn_CancelSave" value="Cancel"></center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="darkout-overlay"></div>
|
||||
<script src="js/globalfunctions.js"></script>
|
||||
|
||||
@ -80,6 +80,17 @@ class elementContainer {
|
||||
this.ICOutputs = 0;
|
||||
}
|
||||
|
||||
isHigh(element,input) {
|
||||
let isHigh = false;
|
||||
for (let a = 0; a < this.Elements.length; a++) {
|
||||
let conn = this.Elements[a].ConnectsTo(element,input);
|
||||
if (conn !== false) {
|
||||
if (this.Elements[a].getOutput(conn)) isHigh = true;
|
||||
}
|
||||
}
|
||||
return isHigh;
|
||||
}
|
||||
|
||||
toJSON(key) {
|
||||
let elements = new Array();
|
||||
for (let a = 0; a < this.Elements.length; a++) {
|
||||
@ -131,21 +142,31 @@ class elementContainer {
|
||||
return false;
|
||||
}
|
||||
|
||||
Disconnect(element) {
|
||||
if (!element) return false;
|
||||
for (let a = 0; a < this.Elements.length; a++) {
|
||||
this.Elements[a].Disconnect(element);
|
||||
}
|
||||
}
|
||||
|
||||
DrawAll(ctx,settings) {
|
||||
let ICOuts = 0;
|
||||
|
||||
if (!logicEngine.Settings.TopConnections && !logicEngine.Settings.HideConnections) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
for (let a = 0; a < this.Elements.length; a++) {
|
||||
ctx.save();
|
||||
if (this.Elements[a] instanceof ICOutput) ICOuts++;
|
||||
if (this.Elements[a].isVisible()) {
|
||||
ctx.save();
|
||||
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);
|
||||
ctx.font = "10px Console";
|
||||
let x = this.Elements[a].X;
|
||||
let y = this.Elements[a].Y + (this.Elements[a].Height - 12);
|
||||
let x2 = this.Elements[a].Width;
|
||||
let y2 = 10;
|
||||
//this.Elements[a].drawTextCentered(ctx, x, y, x2, y2, this.Elements[a].Designator, ctx.font, "#000");
|
||||
ctx.restore();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
this.ICOutputs = ICOuts;
|
||||
@ -154,10 +175,12 @@ class elementContainer {
|
||||
if (PropertiesBox.style.display != "none") PropertiesBox.style.display = "none";
|
||||
}
|
||||
|
||||
if (logicEngine.Settings.TopConnections && !logicEngine.Settings.HideConnections) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
248
js/elements.js
248
js/elements.js
@ -76,7 +76,7 @@ class ElementConnection {
|
||||
|
||||
class Element extends CanvasTools {
|
||||
|
||||
constructor(RestoreData = null,logicengine,Inputs) {
|
||||
constructor(_Container,RestoreData = null,logicengine,Inputs) {
|
||||
super();
|
||||
this.Name = "Element";
|
||||
this.Designator = "";
|
||||
@ -97,6 +97,7 @@ class Element extends CanvasTools {
|
||||
this.OutputLabels = new Array(1);
|
||||
this.NoOutput = false;
|
||||
this.OutputLink = 0;
|
||||
this._Container = _Container;
|
||||
|
||||
let inputProperty = new ElementProperty("Inputs","int",{CBObject: this,CBFunction: "ChangeInputs"},2,Inputs,false,2);
|
||||
this.Properties.push(inputProperty);
|
||||
@ -120,6 +121,42 @@ class Element extends CanvasTools {
|
||||
}
|
||||
}
|
||||
|
||||
ConnectsTo(element,input = false) {
|
||||
for (let a = 0; a < this.OutputConnections.length; a++) {
|
||||
if (this.OutputConnections[a].Element == element || this.OutputConnections[a].Element.Designator == element) {
|
||||
if (input !== false) {
|
||||
if (this.OutputConnections[a].Input == input) return this.OutputConnections[a].Output;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
let isvisible = false;
|
||||
if (this.LogicEngine) {
|
||||
let LeftX = this.LogicEngine.Panning.OffsetX;
|
||||
if (LeftX < 0) {
|
||||
LeftX = Math.abs(LeftX);
|
||||
} else {
|
||||
LeftX = -Math.abs(LeftX);
|
||||
}
|
||||
let RightX = LeftX + this.LogicEngine.Canvas.width;
|
||||
let TopY = this.LogicEngine.Panning.OffsetY;
|
||||
if (TopY < 0) {
|
||||
TopY = Math.abs(TopY);
|
||||
} else {
|
||||
TopY = -Math.abs(TopY);
|
||||
}
|
||||
let BottomY = TopY + this.LogicEngine.Canvas.height;
|
||||
if (((this.X + this.Width) >= LeftX) && ((this.X) <= RightX) && ((this.Y + this.Height) >= TopY) && ((this.Y) <= BottomY)) isvisible = true;
|
||||
}
|
||||
return isvisible;
|
||||
|
||||
}
|
||||
|
||||
toJSON(key) {
|
||||
return {
|
||||
Name: this.Name,
|
||||
@ -168,9 +205,28 @@ class Element extends CanvasTools {
|
||||
// if we are active linking stop doing so
|
||||
if (this.LogicEngine.ActiveLink == this) this.LogicEngine.ActiveLink = false;
|
||||
// Just to clean up connections
|
||||
for (let a = 0; a < this.OutputConnections.length;a++) {
|
||||
this.Disconnect();
|
||||
}
|
||||
|
||||
Disconnect(element = false) {
|
||||
if (element) {
|
||||
for (let a = 0; a < this.OutputConnections.length; a++) {
|
||||
if (this.OutputConnections[a].Element == element) {
|
||||
this.LogicEngine.RecursionCount = 0;
|
||||
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input,false);
|
||||
let element = this.OutputConnections[a].Element;
|
||||
let input = this.OutputConnections[a].Input;
|
||||
this.OutputConnections.splice(a,1);
|
||||
element.setInput(input, false);
|
||||
a--;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let a = 0; a < this.OutputConnections.length; a++) {
|
||||
this.LogicEngine.RecursionCount = 0;
|
||||
this.OutputConnections[a].Element.setInput(this.OutputConnections[a].Input, false);
|
||||
this.OutputConnections.splice(a,1);
|
||||
a--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,10 +244,11 @@ class Element extends CanvasTools {
|
||||
|
||||
MouseClick(mousePos) {
|
||||
|
||||
let ctxMousePos = this.MousePosition;
|
||||
let mouseDistOutput = length2D(this.X+(this.Width-10),
|
||||
this.Y+(this.Height/2),
|
||||
this.MousePosition.x,
|
||||
this.MousePosition.y);
|
||||
ctxMousePos.x,
|
||||
ctxMousePos.y);
|
||||
if (this.LogicEngine.ActiveLink) {
|
||||
// We need to see if an input is being clicked on to be linked to
|
||||
let foundInput = false;
|
||||
@ -202,8 +259,8 @@ class Element extends CanvasTools {
|
||||
|
||||
let mouseDist = length2D(this.X+10,
|
||||
firstY+ (a*24),
|
||||
this.MousePosition.x,
|
||||
this.MousePosition.y);
|
||||
ctxMousePos.x,
|
||||
ctxMousePos.y);
|
||||
if (mouseDist <= (this.inputCircleRadius)) {
|
||||
this.LogicEngine.Link(a);
|
||||
foundInput = true;
|
||||
@ -220,9 +277,8 @@ class Element extends CanvasTools {
|
||||
|
||||
let mouseDist = length2D(this.X+(this.Width-10),
|
||||
firstY+ (a*24),
|
||||
this.MousePosition.x,
|
||||
this.MousePosition.y);
|
||||
console.log("Distance from " + a + ": " + mouseDist);
|
||||
ctxMousePos.x,
|
||||
ctxMousePos.y);
|
||||
if (mouseDist <= (this.outputCircleRadius)) {
|
||||
this.OutputLink = {Output: a,x: this.X+(this.Width-10), y: firstY+ (a*24)};
|
||||
this.LogicEngine.Link();
|
||||
@ -234,8 +290,9 @@ class Element extends CanvasTools {
|
||||
}
|
||||
|
||||
mouseInside(mousePos) {
|
||||
mousePos = this.LogicEngine.getCanvasMousePos(mousePos);
|
||||
this.MouseOver = false;
|
||||
if (((mousePos.x >= this.X ) && (mousePos.x <= (this.X + this.Width))) & ((mousePos.y >= this.Y ) && (mousePos.y <= (this.Y + this.Height)))) this.MouseOver = true;
|
||||
if (((mousePos.x >= this.X ) && (mousePos.x <= (this.X + this.Width))) && ((mousePos.y >= this.Y ) && (mousePos.y <= (this.Y + this.Height)))) this.MouseOver = true;
|
||||
this.MousePosition = mousePos;
|
||||
return this.MouseOver;
|
||||
}
|
||||
@ -376,6 +433,9 @@ class Element extends CanvasTools {
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
let isHigh = this._Container.isHigh(this,Input);
|
||||
if (isHigh !== false) this.Inputs[Input] = true;
|
||||
if (isHigh === false) this.Inputs[Input] = false;
|
||||
this.setConnections();
|
||||
}
|
||||
|
||||
@ -399,8 +459,8 @@ class Element extends CanvasTools {
|
||||
}
|
||||
|
||||
class LabelElement extends Element {
|
||||
constructor(RestoreData = null,logicengine) {
|
||||
super(RestoreData,logicengine,0);
|
||||
constructor(_Container, RestoreData = null,logicengine) {
|
||||
super(_Container, RestoreData,logicengine,0);
|
||||
this.removeProperty("Inputs");
|
||||
this.Name = "Label";
|
||||
this.Font = "48px Console";
|
||||
@ -447,7 +507,7 @@ class LabelElement extends Element {
|
||||
this.drawTextCentered(ctx,x,y,textWidth.width,textWidth.height,this.Label,this.Font,this.FontStyle);
|
||||
}
|
||||
}
|
||||
let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","abc",LabelElement,[]);
|
||||
let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","🏷",LabelElement,[]);
|
||||
ElementReferenceTable.push(ElementCatalog_Label);
|
||||
ElementCategory_Other.addElement(ElementCatalog_Label);
|
||||
|
||||
@ -459,8 +519,8 @@ class ICInput extends Element {
|
||||
this.Output = false;
|
||||
}
|
||||
|
||||
constructor(RestoreData = null,logicengine) {
|
||||
super(RestoreData ,logicengine,0);
|
||||
constructor(_Container, RestoreData = null,logicengine) {
|
||||
super(_Container, RestoreData ,logicengine,0);
|
||||
this.removeProperty("Inputs");
|
||||
this.Task = new Task("ICInputTask","CLOCK",0,1,this.ClockTick.bind(this));
|
||||
this.Name = "ICInput";
|
||||
@ -488,8 +548,9 @@ class ICInput extends Element {
|
||||
|
||||
setInput(notused = 0,value) {
|
||||
if (notused > 0) return;
|
||||
if (!value) this.Input = false;
|
||||
if (value) this.Input = true;
|
||||
|
||||
if (value === false) this.Input = false;
|
||||
if (value !== false) this.Input = true;
|
||||
|
||||
if (!this.Task.Enabled) {
|
||||
this.Task.LastCall = 0;
|
||||
@ -539,8 +600,8 @@ class ICOutput extends Element {
|
||||
this.Output = false;
|
||||
}
|
||||
|
||||
constructor(RestoreData = null,logicengine) {
|
||||
super(RestoreData ,logicengine,1);
|
||||
constructor(_Container, RestoreData = null,logicengine) {
|
||||
super(_Container, RestoreData ,logicengine,1);
|
||||
this.removeProperty("Inputs");
|
||||
this.Task = new Task("ICOutputTask","CLOCK",0,1,this.ClockTick.bind(this));
|
||||
this.Name = "ICOutput";
|
||||
@ -569,12 +630,12 @@ class ICOutput extends Element {
|
||||
|
||||
setInput(notused = 0,value) {
|
||||
if (notused > 0) return;
|
||||
if (!value) this.Input = false;
|
||||
if (value) this.Input = true;
|
||||
value = this._Container.isHigh(this,0);
|
||||
if (value === false) this.Input = false;
|
||||
if (value !== false) this.Input = true;
|
||||
this.Inputs[0] = this.Input;
|
||||
|
||||
if (!this.Task.Enabled) {
|
||||
console.log("Starting timer");
|
||||
this.Task.LastCall = 0;
|
||||
this.Task.Enabled = true;
|
||||
}
|
||||
@ -619,7 +680,7 @@ ElementReferenceTable.push(ElementCatalog_ICOutput);
|
||||
ElementCategory_ICs.addElement(ElementCatalog_ICOutput);
|
||||
|
||||
class ICElement extends Element {
|
||||
constructor(RestoreData = null, logicengine,ICSettings = null) {
|
||||
constructor(_Container, RestoreData = null, logicengine,ICSettings = null) {
|
||||
|
||||
|
||||
let newContainer = false;
|
||||
@ -648,7 +709,7 @@ class ICElement extends Element {
|
||||
let totalInputs = ICSettings.Inputs.length;
|
||||
let totalOutputs = ICSettings.Outputs.length;
|
||||
|
||||
super(RestoreData, logicengine, totalInputs);
|
||||
super(_Container, RestoreData, logicengine, totalInputs);
|
||||
this.removeProperty("Inputs");
|
||||
this.ICBlueprint = icContainer;
|
||||
this.Outputs = ICSettings.Outputs;
|
||||
@ -677,10 +738,28 @@ class ICElement extends Element {
|
||||
return superjson;
|
||||
}
|
||||
|
||||
Disconnect(element = false) {
|
||||
super.Disconnect(element);
|
||||
if (element) {
|
||||
for (let a = 0; a < this.Outputs.length; a++) {
|
||||
if (this.Outputs[a].toElement == element || this.Outputs[a].fromElement == element) {
|
||||
if (this.Outputs[a].toElement == element) {
|
||||
// It's a too element, we need to tell it we are not high anymore
|
||||
} else {
|
||||
// Its a from element, we need to tell it's too element
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// We are disconnecting all of our own connections
|
||||
for (let a = 0; a < this.Outputs.length; a++) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addConnection(container, element, input, output = 0) {
|
||||
console.log("IC Add Connection " + element.Designator + " I:" + input + " O:"+output);
|
||||
super.addConnection(container, element, input, output);
|
||||
console.log(this.OutputConnections);
|
||||
this.Outputs[output].toElementContainer = container;
|
||||
this.Outputs[output].toElement = element;
|
||||
this.Outputs[output].Input = input;
|
||||
@ -690,7 +769,7 @@ class ICElement extends Element {
|
||||
setInput(Input, Value) {
|
||||
if (this.InputConnections.length >= Input) {
|
||||
// No need to worry about recursion as this goes to an input element which is buffered
|
||||
this.Inputs[Input] = Value;
|
||||
this.Inputs[Input] = (Value === false) ? false : true;
|
||||
//console.log("Calling " + this.InputConnections[Input].toElement.Designator);
|
||||
this.InputConnections[Input].toElement.setInput(this.InputConnections[Input].Input,Value);
|
||||
}
|
||||
@ -752,7 +831,7 @@ class ICElement extends Element {
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
let textSize = false;
|
||||
if (ctx,this.InputConnections[a]) textSize = this.textSize(ctx,this.InputConnections[a].toElement.Properties[0].CurrentValue,"10px Console");
|
||||
if (ctx,this.Outputs[a]) textSize = this.textSize(ctx,this.Outputs[a].fromElement.Properties[0].CurrentValue,"10px Console");
|
||||
this.drawText(ctx,(x+(this.Width-10)) - (textSize.width + 5 + (this.outputCircleRadius*2)),(firstY + (a*24)) + 5,this.Outputs[a].fromElement.Properties[0].CurrentValue,"10px Console","#000");
|
||||
}
|
||||
ctx.restore();
|
||||
@ -786,7 +865,9 @@ class ClockElement extends Element {
|
||||
}
|
||||
|
||||
setInput(Input, Value) {
|
||||
console.log(this.Designator + " got told to set " + Input + " to value " + Value);
|
||||
super.setInput(Input, Value);
|
||||
|
||||
if (!this.Inputs[0]) {
|
||||
this.Output = false;
|
||||
this.Task.LastCall = 0;
|
||||
@ -800,8 +881,8 @@ class ClockElement extends Element {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,1);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,1);
|
||||
this.removeProperty("Inputs");
|
||||
this.Name = "Clock";
|
||||
this.Period = 1000;
|
||||
@ -899,8 +980,10 @@ class PulseElement extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input > 0) return;
|
||||
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
//super.setInput(Input, Value);
|
||||
this.Inputs[Input] = Value;
|
||||
this.Inputs[Input] = (Value === false) ? false : true;
|
||||
if (this.Inputs[0] && !this.Task.Enabled) {
|
||||
this.Output = true;
|
||||
for (let a = 0; a < this.OutputConnections.length;a++) {
|
||||
@ -912,8 +995,8 @@ class PulseElement extends Element {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,1);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,1);
|
||||
this.removeProperty("Inputs");
|
||||
this.Name = "Pulse";
|
||||
this.Period = 100;
|
||||
@ -1020,7 +1103,8 @@ class DelayElement extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input > 0) return;
|
||||
if (this.Inputs[Input] == Value) return;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (this.Inputs[Input] == (Value === false) ? false : true) return;
|
||||
//super.setInput(Input, Value);
|
||||
this.Inputs[Input] = Value;
|
||||
if (this.Inputs[0] && !this.Task.Enabled) {
|
||||
@ -1056,8 +1140,8 @@ class DelayElement extends Element {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,1);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,1);
|
||||
this.removeProperty("Inputs");
|
||||
this.Name = "Delay";
|
||||
this.Period = 100;
|
||||
@ -1126,8 +1210,8 @@ ElementReferenceTable.push(ElementCatalog_DELAY);
|
||||
ElementCategory_Timing.addElement(ElementCatalog_DELAY);
|
||||
|
||||
class output4bitDisplay extends Element {
|
||||
constructor(RestoreData = null,logicengine) {
|
||||
super(RestoreData,logicengine,4);
|
||||
constructor(_Container, RestoreData = null,logicengine) {
|
||||
super(_Container, RestoreData,logicengine,4);
|
||||
this.Name = "4B Display";
|
||||
this.Output = false;
|
||||
this.OutputChar = "0";
|
||||
@ -1142,7 +1226,8 @@ class output4bitDisplay extends Element {
|
||||
this.Properties.push(typeProperty);
|
||||
|
||||
if (RestoreData) {
|
||||
if (RestoreData.Properties) {
|
||||
if (RestoreData.Properties.length > 0) {
|
||||
console.log(RestoreData);
|
||||
this.Properties[0].CurrentValue = RestoreData.Properties[0].CurrentValue;
|
||||
this.Properties[0].Values = RestoreData.Properties[0].Values;
|
||||
this.setType(this.Properties[0].CurrentValue);
|
||||
@ -1167,7 +1252,8 @@ class output4bitDisplay extends Element {
|
||||
}
|
||||
|
||||
setInput(Input, Value) {
|
||||
this.Inputs[Input] = (Value) ? 1 : 0;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
this.Inputs[Input] = (Value !== false) ? 1 : 0;
|
||||
let outchar = (this.Inputs[0] << 3) + (this.Inputs[1] << 2) + (this.Inputs[2] << 1) + (this.Inputs[3]);
|
||||
|
||||
this.OutputChar = (outchar);
|
||||
@ -1220,8 +1306,8 @@ ElementCategory_Outputs.addElement(ElementCatalog_Output_4BDisplay);
|
||||
|
||||
|
||||
class inputElement extends Element {
|
||||
constructor(RestoreData = null,logicengine) {
|
||||
super(RestoreData,logicengine,0);
|
||||
constructor(_Container, RestoreData = null,logicengine) {
|
||||
super(_Container, RestoreData,logicengine,0);
|
||||
this.Name = "InputElement";
|
||||
this.Output = false;
|
||||
this.Width = 100;
|
||||
@ -1240,14 +1326,15 @@ class inputElement extends Element {
|
||||
}
|
||||
|
||||
class InputSwitch extends inputElement {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine);
|
||||
this.Name = "Switch";
|
||||
this.Height = 70;
|
||||
if (RestoreData) this.Output = RestoreData.Output;
|
||||
}
|
||||
|
||||
MouseClick(mousePos) {
|
||||
mousePos = this.LogicEngine.getCanvasMousePos(mousePos);
|
||||
super.MouseClick(mousePos);
|
||||
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;
|
||||
@ -1278,13 +1365,14 @@ ElementReferenceTable.push(ElementCatalog_SWITCH);
|
||||
ElementCategory_Inputs.addElement(ElementCatalog_SWITCH);
|
||||
|
||||
class InputButton extends inputElement {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine);
|
||||
this.Name = "Button";
|
||||
this.Height = 70;
|
||||
}
|
||||
|
||||
MouseDown(mousePos) {
|
||||
mousePos = this.LogicEngine.getCanvasMousePos(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;
|
||||
@ -1321,8 +1409,8 @@ ElementReferenceTable.push(ElementCatalog_BUTTON);
|
||||
ElementCategory_Inputs.addElement(ElementCatalog_BUTTON);
|
||||
|
||||
class FlipFlopJK extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,3);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,3);
|
||||
this.Name = "JK-FF";
|
||||
this.Outputs = new Array(2);
|
||||
this.InputLabels = new Array("J","CLK","K");
|
||||
@ -1344,6 +1432,8 @@ class FlipFlopJK extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input >= this.Inputs.length) return false;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (Value !== false) Value = true;
|
||||
let oldOutput = this.Outputs[0];
|
||||
let oldOutput2 = this.Outputs[1];
|
||||
this.Inputs[Input] = Value;
|
||||
@ -1378,13 +1468,13 @@ class FlipFlopJK extends Element {
|
||||
this.drawOutputs(ctx,x,y);
|
||||
}
|
||||
}
|
||||
let ElementCatalog_JKFlipFlop = new ElementCatalog_Element("JK-FF","The JK Flip-Flop is a common type of flip-flop that allows for either setting in a specific state, or toggling state.","JK",FlipFlopJK,[]);
|
||||
let ElementCatalog_JKFlipFlop = new ElementCatalog_Element("JK-FF","The JK Flip-Flop is a common type of flip-flop that allows for either setting in a specific state, or toggling state.","",FlipFlopJK,[]);
|
||||
ElementReferenceTable.push(ElementCatalog_JKFlipFlop);
|
||||
ElementCategory_FlipFlop.addElement(ElementCatalog_JKFlipFlop);
|
||||
|
||||
class FlipFlopSR extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,3);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,3);
|
||||
this.Name = "SR-FF";
|
||||
this.Outputs = new Array(2);
|
||||
this.InputLabels = new Array("S","CLK","R");
|
||||
@ -1406,6 +1496,8 @@ class FlipFlopSR extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input >= this.Inputs.length) return false;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (Value !== false) Value = true;
|
||||
let oldOutput = this.Outputs[0];
|
||||
let oldOutput2 = this.Outputs[1];
|
||||
this.Inputs[Input] = Value;
|
||||
@ -1436,13 +1528,13 @@ class FlipFlopSR extends Element {
|
||||
this.drawOutputs(ctx,x,y);
|
||||
}
|
||||
}
|
||||
let ElementCatalog_SRFlipFlop = new ElementCatalog_Element("SR-FF","The SR Flip-Flop is a common type of flip-flop that allows for either setting, or resetting the output state.","SR",FlipFlopSR,[]);
|
||||
let ElementCatalog_SRFlipFlop = new ElementCatalog_Element("SR-FF","The SR Flip-Flop is a common type of flip-flop that allows for either setting, or resetting the output state.","",FlipFlopSR,[]);
|
||||
ElementReferenceTable.push(ElementCatalog_SRFlipFlop);
|
||||
ElementCategory_FlipFlop.addElement(ElementCatalog_SRFlipFlop);
|
||||
|
||||
class FlipFlopT extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,2);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,2);
|
||||
this.Name = "T-FF";
|
||||
this.Outputs = new Array(2);
|
||||
this.InputLabels = new Array("T","CLK");
|
||||
@ -1464,6 +1556,8 @@ class FlipFlopT extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input >= this.Inputs.length) return false;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (Value !== false) Value = true;
|
||||
let oldOutput = this.Outputs[0];
|
||||
let oldOutput2 = this.Outputs[1];
|
||||
this.Inputs[Input] = Value;
|
||||
@ -1487,13 +1581,13 @@ class FlipFlopT extends Element {
|
||||
this.drawOutputs(ctx,x,y);
|
||||
}
|
||||
}
|
||||
let ElementCatalog_TFlipFlop = new ElementCatalog_Element("T-FF","The T Flip-Flop is a common type of flip-flop that toggles the output when T is high and CLK goes high.","T",FlipFlopT,[]);
|
||||
let ElementCatalog_TFlipFlop = new ElementCatalog_Element("T-FF","The T Flip-Flop is a common type of flip-flop that toggles the output when T is high and CLK goes high.","",FlipFlopT,[]);
|
||||
ElementReferenceTable.push(ElementCatalog_TFlipFlop);
|
||||
ElementCategory_FlipFlop.addElement(ElementCatalog_TFlipFlop);
|
||||
|
||||
class FlipFlopD extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,2);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,2);
|
||||
this.Name = "D-FF";
|
||||
this.Outputs = new Array(2);
|
||||
this.InputLabels = new Array("D","CLK");
|
||||
@ -1515,6 +1609,8 @@ class FlipFlopD extends Element {
|
||||
|
||||
setInput(Input, Value) {
|
||||
if (Input >= this.Inputs.length) return false;
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (Value !== false) Value = true;
|
||||
let oldOutput = this.Outputs[0];
|
||||
let oldOutput2 = this.Outputs[1];
|
||||
let oldInput = this.Inputs[1];
|
||||
@ -1539,14 +1635,14 @@ class FlipFlopD extends Element {
|
||||
this.drawOutputs(ctx,x,y);
|
||||
}
|
||||
}
|
||||
let ElementCatalog_DFlipFlop = new ElementCatalog_Element("D-FF","The D Flip-Flop is a common type of flip-flop that sets the output to equal D if the clock goes high","D",FlipFlopD,[]);
|
||||
let ElementCatalog_DFlipFlop = new ElementCatalog_Element("D-FF","The D Flip-Flop is a common type of flip-flop that sets the output to equal D if the clock goes high","",FlipFlopD,[]);
|
||||
ElementReferenceTable.push(ElementCatalog_DFlipFlop);
|
||||
ElementCategory_FlipFlop.addElement(ElementCatalog_DFlipFlop);
|
||||
|
||||
|
||||
class LogicAND extends Element {
|
||||
constructor(RestoreData = null, logicengine,Inputs) {
|
||||
super(RestoreData,logicengine,Inputs);
|
||||
constructor(_Container, RestoreData = null, logicengine,Inputs) {
|
||||
super(_Container, RestoreData,logicengine,Inputs);
|
||||
this.Name = "AND";
|
||||
}
|
||||
|
||||
@ -1588,8 +1684,8 @@ ElementReferenceTable.push(ElementCatalog_AND);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_AND);
|
||||
|
||||
class LogicNAND extends LogicAND {
|
||||
constructor(RestoreData = null, logicengine,Inputs) {
|
||||
super(RestoreData,logicengine,Inputs);
|
||||
constructor(_Container, RestoreData = null, logicengine,Inputs) {
|
||||
super(_Container, RestoreData,logicengine,Inputs);
|
||||
this.Name = "NAND";
|
||||
this.Width = this.Width + 10;
|
||||
}
|
||||
@ -1640,8 +1736,8 @@ ElementReferenceTable.push(ElementCatalog_NAND);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_NAND);
|
||||
|
||||
class LogicOR extends Element {
|
||||
constructor(RestoreData = null, logicengine,Inputs) {
|
||||
super(RestoreData,logicengine,Inputs);
|
||||
constructor(_Container, RestoreData = null, logicengine,Inputs) {
|
||||
super(_Container, RestoreData,logicengine,Inputs);
|
||||
this.Name = "OR";
|
||||
}
|
||||
|
||||
@ -1687,8 +1783,8 @@ ElementReferenceTable.push(ElementCatalog_OR);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_OR);
|
||||
|
||||
class LogicNOR extends LogicOR {
|
||||
constructor(RestoreData = null, logicengine,Inputs) {
|
||||
super(RestoreData,logicengine,Inputs);
|
||||
constructor(_Container, RestoreData = null, logicengine,Inputs) {
|
||||
super(_Container, RestoreData,logicengine,Inputs);
|
||||
this.Name = "NOR";
|
||||
this.Width = this.Width + 10;
|
||||
}
|
||||
@ -1741,8 +1837,8 @@ ElementReferenceTable.push(ElementCatalog_NOR);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_NOR);
|
||||
|
||||
class LogicXOR extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,2); // Only 2 inputs on XOR
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,2); // Only 2 inputs on XOR
|
||||
this.Name = "XOR";
|
||||
this.removeProperty("Inputs");
|
||||
}
|
||||
@ -1803,8 +1899,8 @@ ElementReferenceTable.push(ElementCatalog_XOR);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_XOR);
|
||||
|
||||
class LogicXNOR extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,2); // Only 2 inputs on XOR
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,2); // Only 2 inputs on XOR
|
||||
this.Name = "XNOR";
|
||||
this.removeProperty("Inputs");
|
||||
this.Width += 10;
|
||||
@ -1877,8 +1973,8 @@ ElementReferenceTable.push(ElementCatalog_XNOR);
|
||||
ElementCategory_LOGIC.addElement(ElementCatalog_XNOR);
|
||||
|
||||
class LogicNOT extends Element {
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,1); // Only 1 inputs on NOT
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,1); // Only 1 inputs on NOT
|
||||
this.Name = "NOT";
|
||||
this.removeProperty("Inputs");
|
||||
this.Width += 10;
|
||||
@ -1953,6 +2049,8 @@ class LogicBuffer extends Element {
|
||||
setInput(Input, Value) {
|
||||
if (Input > 0) return;
|
||||
//super.setInput(Input, Value);
|
||||
Value = this._Container.isHigh(this,Input);
|
||||
if (Value !== false) Value = true;
|
||||
this.Inputs[Input] = Value;
|
||||
if (!this.Task.Enabled) {
|
||||
this.Task.LastCall = 0;
|
||||
@ -1960,8 +2058,8 @@ class LogicBuffer extends Element {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(RestoreData = null, logicengine) {
|
||||
super(RestoreData,logicengine,1);
|
||||
constructor(_Container, RestoreData = null, logicengine) {
|
||||
super(_Container, RestoreData,logicengine,1);
|
||||
this.removeProperty("Inputs");
|
||||
this.Output = false;
|
||||
this.Name = "Buffer";
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
function addElement(RestoreData = null,refClass,props) {
|
||||
let newElement = new refClass(RestoreData,logicEngine,...props);
|
||||
let newElement = new refClass(logicEngine.ActiveContainer,RestoreData,logicEngine,...props);
|
||||
|
||||
if (!RestoreData) {
|
||||
let x = Math.round(logicEngine.Canvas.width / 2);
|
||||
let y = Math.round(logicEngine.Canvas.height / 2);
|
||||
let x = Math.round(logicEngine.Canvas.width / 2) - (newElement.Width/2);
|
||||
let y = Math.round(logicEngine.Canvas.height / 2) - (newElement.Height/2);
|
||||
x -= logicEngine.Panning.OffsetX;
|
||||
y -= logicEngine.Panning.OffsetY;
|
||||
x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize);
|
||||
y = logicEngine.Settings.GridSize * Math.round(y/logicEngine.Settings.GridSize);
|
||||
let width = newElement.Width;
|
||||
@ -30,6 +32,7 @@ function addElement(RestoreData = null,refClass,props) {
|
||||
}
|
||||
logicEngine.ActiveContainer.AddElement(newElement);
|
||||
logicEngine.ActiveContainer.Select(newElement);
|
||||
disableSelectedRCMs(false);
|
||||
return newElement;
|
||||
}
|
||||
|
||||
@ -168,11 +171,40 @@ function isVersionNewer(version1,version2,orEqual = true) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function disableSelectedRCMs(bool) {
|
||||
let rcm_Delete = document.getElementById("rcm_Delete");
|
||||
let rcm_Disconnect = document.getElementById("rcm_Disconnect");
|
||||
let tfm_Delete = document.getElementById("tfm_Delete");
|
||||
let tfm_Disconnect = document.getElementById("tfm_Disconnect");
|
||||
|
||||
if (bool) {
|
||||
rcm_Delete.classList.add("disabled");
|
||||
rcm_Disconnect.classList.add("disabled");
|
||||
tfm_Delete.classList.add("disabled");
|
||||
tfm_Disconnect.classList.add("disabled");
|
||||
} else {
|
||||
rcm_Delete.classList.remove("disabled");
|
||||
rcm_Disconnect.classList.remove("disabled");
|
||||
tfm_Delete.classList.remove("disabled");
|
||||
tfm_Disconnect.classList.remove("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
function hideMenus() {
|
||||
let tds = document.getElementsByClassName("top-menu-div");
|
||||
for (let a = 0; a < tds.length; a++) {
|
||||
tds[a].setAttribute('style','display: none;');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createSaveState(container = false) {
|
||||
let saveState = {
|
||||
Name: "LogicDesign",
|
||||
Version: Version,
|
||||
Timestamp: Date.now(),
|
||||
PanX: logicEngine.Panning.OffsetX,
|
||||
PanY: logicEngine.Panning.OffsetY,
|
||||
Elements: new Array()
|
||||
};
|
||||
if (container.Elements.length > 0) saveState.Elements = container.Elements;
|
||||
@ -203,13 +235,13 @@ function loadContainer(Elements) {
|
||||
if (!classRef) {
|
||||
// We need to add this IC to the toolbox
|
||||
let newIC = createIC(JSON.stringify(Elements[a].ICBlueprint),Elements[a].Name,Elements[a].Description);
|
||||
console.log("NewIC:" + newIC);
|
||||
//console.log("NewIC:" + newIC);
|
||||
if (!newIC) return false;
|
||||
}
|
||||
}
|
||||
let classRef = getElementInfo(Elements[a].Name).Class;
|
||||
|
||||
let newElement = new classRef(Elements[a],logicEngine,getElementInfo(Elements[a].Name).Args[0]);
|
||||
let newElement = new classRef(newContainer,Elements[a],logicEngine,getElementInfo(Elements[a].Name).Args[0]);
|
||||
|
||||
newContainer.AddElement(newElement);
|
||||
newElement.Designator = Elements[a].Designator;
|
||||
@ -241,10 +273,6 @@ function loadContainer(Elements) {
|
||||
}
|
||||
// Now we need to make all of the connections
|
||||
for (let a = 0; a < elementConnections.length; a++) {
|
||||
if (elementConnections[a].FromElement.Name == "1B_ADD") {
|
||||
console.log("Making connection " + a);
|
||||
console.log(elementConnections[a]);
|
||||
}
|
||||
let toElement = newContainer.HasElement(elementConnections[a].ToElement);
|
||||
if (toElement) {
|
||||
if (elementConnections[a].FromContainer) {
|
||||
@ -258,12 +286,6 @@ function loadContainer(Elements) {
|
||||
if (newConnection) {
|
||||
//elementConnections[a].FromElement.OutputConnections.push(newConnection);
|
||||
elementConnections[a].FromElement.addConnection(newContainer,toElement,elementConnections[a].Input, elementConnections[a].Output)
|
||||
if (elementConnections[a].FromElement.Name == "1B_ADD") {
|
||||
console.log("Making Connection");
|
||||
console.log(newConnection);
|
||||
console.log(elementConnections[a].FromElement);
|
||||
console.log(elementConnections[a].FromElement.OutputConnections);
|
||||
}
|
||||
} else {
|
||||
console.log("We dont have a new connection!!!");
|
||||
console.log(toElement);
|
||||
@ -291,6 +313,17 @@ function loadsave(savedata) {
|
||||
if (!isVersionNewer(savedata.Version,"0.3.0")) return -2; // TODO: Let the person know the version is too old
|
||||
let newContainer = loadContainer(savedata.Elements);
|
||||
if (!newContainer) return -3;
|
||||
let saveName = document.getElementById("saveName");
|
||||
saveName.value = savedata.Name;
|
||||
logicEngine.ActiveContainer = newContainer;
|
||||
logicEngine.Panning.OffsetX = 0;
|
||||
logicEngine.Panning.OffsetY = 0;
|
||||
logicEngine.Ctx.setTransform(1,0,0,1,0,0);
|
||||
|
||||
if (savedata.PanX) {
|
||||
logicEngine.Panning.OffsetX = savedata.PanX;
|
||||
logicEngine.Panning.OffsetY = savedata.PanY;
|
||||
logicEngine.Ctx.translate(logicEngine.Panning.OffsetX,logicEngine.Panning.OffsetY);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -10,41 +10,56 @@ class LogicEngineSettings {
|
||||
this.ShadowColor = "#222";
|
||||
this.InputCircleSize = 10;
|
||||
this.OutputCircleSize = 10;
|
||||
this.ShowGrid = true;
|
||||
this.SnapGrid = true;
|
||||
this.TopConnections = true;
|
||||
this.HideConnections = false;
|
||||
this.GridSize = 20;
|
||||
this.ShowFPS = true;
|
||||
}
|
||||
}
|
||||
|
||||
class LogicEngine {
|
||||
Resize(evt) {
|
||||
let leftmenu = document.getElementById("left-menu");
|
||||
leftmenu.style.height = (window.innerHeight - 52) + "px";
|
||||
this.Canvas.width = window.innerWidth - 205;
|
||||
this.Canvas.height = window.innerHeight - 50;
|
||||
let topbar = document.getElementById("top-bar");
|
||||
let lmrect = leftmenu.getBoundingClientRect();
|
||||
let tbrect = topbar.getBoundingClientRect();
|
||||
leftmenu.style.height = (window.innerHeight - (tbrect.height + 2)) + "px";
|
||||
this.Canvas.width = window.innerWidth - lmrect.width;
|
||||
this.Canvas.height = window.innerHeight - tbrect.height;
|
||||
this.Mouse = false;
|
||||
let gridPlane = document.getElementById("GridPlane");
|
||||
gridPlane.style.top = tbrect.height + "px";
|
||||
gridPlane.style.left = lmrect.width + "px";
|
||||
this.Canvas.style.top = tbrect.height + "px";
|
||||
this.Canvas.style.left = lmrect.width + "px";
|
||||
gridPlane.width = this.Canvas.width;
|
||||
gridPlane.height = this.Canvas.height;
|
||||
this.Ctx.setTransform(1,0,0,1,0,0);
|
||||
this.Ctx.translate(this.Panning.OffsetX,this.Panning.OffsetY);
|
||||
if (this.Settings.ShowGrid) {
|
||||
let Ctx = gridPlane.getContext("2d");
|
||||
Ctx.save();
|
||||
let gridWidth = this.Settings.GridSize;
|
||||
for (let x = gridWidth;x < (this.Canvas.width); x+= gridWidth) {
|
||||
for (let x = gridWidth; x < (this.Canvas.width); x += gridWidth) {
|
||||
Ctx.beginPath();
|
||||
Ctx.moveTo(x,0);
|
||||
Ctx.lineTo(x,this.Canvas.height);
|
||||
Ctx.moveTo(x, 0);
|
||||
Ctx.lineTo(x, this.Canvas.height);
|
||||
Ctx.strokeStyle = "#777";
|
||||
Ctx.lineWidth = "1";
|
||||
Ctx.stroke();
|
||||
}
|
||||
for (let y = gridWidth;y < (this.Canvas.height); y+= gridWidth) {
|
||||
for (let y = gridWidth; y < (this.Canvas.height); y += gridWidth) {
|
||||
Ctx.beginPath();
|
||||
Ctx.moveTo(0,y);
|
||||
Ctx.lineTo(this.Canvas.width,y);
|
||||
Ctx.moveTo(0, y);
|
||||
Ctx.lineTo(this.Canvas.width, y);
|
||||
Ctx.lineWidth = "1";
|
||||
Ctx.strokeStyle = "#777";
|
||||
Ctx.stroke();
|
||||
}
|
||||
Ctx.restore();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
PropertyChange(property) {
|
||||
@ -54,6 +69,7 @@ class LogicEngine {
|
||||
}
|
||||
|
||||
Mouse_Down(evt) {
|
||||
if (evt.which === 1) {
|
||||
let mousePos = getMousePos(this.Canvas, evt);
|
||||
this.MouseDownTime = performance.now();
|
||||
let element = this.ActiveContainer.checkMouseBounds(mousePos);
|
||||
@ -67,7 +83,20 @@ class LogicEngine {
|
||||
this.MovingElementMouseStartY = mousePos.y;
|
||||
element.MouseDown(mousePos);
|
||||
} else {
|
||||
this.MouseDown = true;
|
||||
this.ActiveLink = false;
|
||||
if (this.ControlPressed) {
|
||||
this.Panning.StartOffsetX = this.Panning.OffsetX;
|
||||
this.Panning.StartOffsetY = this.Panning.OffsetY;
|
||||
this.Panning.StartX = mousePos.x;
|
||||
this.Panning.StartY = mousePos.y;
|
||||
}
|
||||
}
|
||||
if (this.ActiveContainer.Selected) {
|
||||
disableSelectedRCMs(false);
|
||||
} else {
|
||||
disableSelectedRCMs(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,9 +110,15 @@ class LogicEngine {
|
||||
}
|
||||
//console.log("Mouse Up");
|
||||
}
|
||||
if (!this.MovingElement) this.ActiveContainer.Selected = false;
|
||||
if (!this.MovingElement && evt.which === 1) this.ActiveContainer.Selected = false;
|
||||
|
||||
this.MovingElement = false;
|
||||
this.MouseDown = false;
|
||||
if (this.ActiveContainer.Selected) {
|
||||
disableSelectedRCMs(false);
|
||||
} else {
|
||||
disableSelectedRCMs(true);
|
||||
}
|
||||
}
|
||||
|
||||
Mouse_Move(evt) {
|
||||
@ -100,11 +135,23 @@ class LogicEngine {
|
||||
let diffyOffset = this.MovingElementMouseStartY - this.MovingElementStartY;
|
||||
let actualPosX = (this.MovingElementMouseStartX + xOffset) - diffxOffset;
|
||||
let actualPosY = (this.MovingElementMouseStartY + yOffset) - diffyOffset;
|
||||
if (!this.ControlPressed) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize;
|
||||
if (!this.ControlPressed) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize;
|
||||
if (!this.ControlPressed && this.Settings.SnapGrid) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize;
|
||||
if (!this.ControlPressed && this.Settings.SnapGrid) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize;
|
||||
this.MovingElement.X = actualPosX;
|
||||
this.MovingElement.Y = actualPosY;
|
||||
}
|
||||
} else {
|
||||
if (this.ControlPressed) {
|
||||
let distX = mousePos.x - this.Panning.StartX;
|
||||
let distY = mousePos.y - this.Panning.StartY;
|
||||
this.Panning.StartX += distX;
|
||||
this.Panning.StartY += distY;
|
||||
|
||||
this.Panning.OffsetX += distX;
|
||||
this.Panning.OffsetY += distY;
|
||||
|
||||
this.Ctx.translate(distX, distY);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.ActiveContainer.checkMouseBounds(mousePos);
|
||||
@ -164,6 +211,7 @@ class LogicEngine {
|
||||
this.RecursionError = false;
|
||||
this.Canvas.setAttribute('tabindex','0');
|
||||
this.ControlPressed = false;
|
||||
this.Panning = {OffsetX: 0, OffsetY: 0,StartOffsetX: 0, StartOffsetY: 0, StartX: 0, StartY: 0};
|
||||
|
||||
}
|
||||
|
||||
@ -183,23 +231,31 @@ class LogicEngine {
|
||||
|
||||
}
|
||||
|
||||
getCanvasMousePos(mousePos) {
|
||||
return {x: mousePos.x - this.Panning.OffsetX, y: mousePos.y - this.Panning.OffsetY};
|
||||
}
|
||||
|
||||
DrawLoop() {
|
||||
if (this.RecursionError) {
|
||||
this.RecursionError = false;
|
||||
alert("Recursion Error! Whatever you last did is causing an oscillating loop, please check your connections and try again!");
|
||||
}
|
||||
let startLoop = performance.now();
|
||||
this.Ctx.clearRect(0,0,this.Canvas.width,this.Canvas.height);
|
||||
this.Ctx.clearRect(0- this.Panning.OffsetX,0- this.Panning.OffsetY,this.Canvas.width,this.Canvas.height);
|
||||
|
||||
this.ActiveContainer.DrawAll(this.Ctx,this.Settings);
|
||||
let btn_CreateIC = document.getElementById("btn_CreateIC");
|
||||
btn_CreateIC.disabled = true;
|
||||
if (this.ActiveContainer.ICOutputs > 0) btn_CreateIC.disabled = false;
|
||||
let tfm_CreateIC = document.getElementById("tfm_CreateIC");
|
||||
let rcm_CreateIC = document.getElementById("rcm_CreateIC");
|
||||
|
||||
tfm_CreateIC.classList.add("disabled");
|
||||
rcm_CreateIC.classList.add("disabled");
|
||||
if (this.ActiveContainer.ICOutputs > 0) tfm_CreateIC.classList.remove("disabled");
|
||||
if (this.ActiveContainer.ICOutputs > 0) rcm_CreateIC.classList.remove("disabled");
|
||||
if (this.ActiveLink) {
|
||||
let startX = this.ActiveLink.LinkOutLocation().x;
|
||||
let startY = this.ActiveLink.LinkOutLocation().y;
|
||||
let endX = this.Mouse.x;
|
||||
let endY = this.Mouse.y;
|
||||
let endX = this.Mouse.x - this.Panning.OffsetX;
|
||||
let endY = this.Mouse.y - this.Panning.OffsetY;
|
||||
let startMidX = startX + ((endX - startX)/2);
|
||||
let startMidY = startY;
|
||||
let midX = startMidX;
|
||||
@ -207,6 +263,7 @@ class LogicEngine {
|
||||
let endMidX = startMidX;
|
||||
let endMidY = endY;
|
||||
|
||||
|
||||
this.Ctx.save();
|
||||
this.Ctx.strokeStyle = this.Settings.LinkingConnectionColor;
|
||||
this.Ctx.lineWidth = this.Settings.LinkingWidth;
|
||||
@ -219,9 +276,11 @@ class LogicEngine {
|
||||
this.Ctx.restore();
|
||||
}
|
||||
let ct = new CanvasTools();
|
||||
let FPSOffset = this.Canvas.width - 150;
|
||||
ct.drawText(this.Ctx,FPSOffset,650,"FPS: " + this.FPS,"12px console", "#00ff00");
|
||||
ct.drawText(this.Ctx,FPSOffset,670,"Potential FPS: " + this.PotentialFPS,"12px console", "#00ff00");
|
||||
let FPSOffset = 5 - this.Panning.OffsetX;
|
||||
if (this.Settings.ShowFPS) {
|
||||
ct.drawText(this.Ctx, FPSOffset, 15 - this.Panning.OffsetY, "FPS: " + this.FPS, "12px console", "#00ff00");
|
||||
ct.drawText(this.Ctx, FPSOffset, 29 - this.Panning.OffsetY, "Potential FPS: " + Math.floor(this.PotentialFPS), "12px console", "#00ff00");
|
||||
}
|
||||
let timeCheck = performance.now();
|
||||
this.FPSCounter++;
|
||||
|
||||
|
||||
221
js/main.js
221
js/main.js
@ -2,7 +2,7 @@
|
||||
MatCat BrowserLogic Simulator
|
||||
*/
|
||||
|
||||
let Version = "0.3.10";
|
||||
let Version = "0.4.0";
|
||||
let spanVersion = document.getElementById("version");
|
||||
spanVersion.innerText = Version;
|
||||
// get the canvas and get the engine object going
|
||||
@ -25,6 +25,15 @@ window.addEventListener('keyup', function(evt) {
|
||||
logicEngine.Key_Up(evt);
|
||||
}, false);
|
||||
|
||||
window.addEventListener('mouseup', function(evt) {
|
||||
let rcm = document.getElementById("RightClickMenu");
|
||||
rcm.style.display = "none";
|
||||
let tfms = document.getElementsByClassName("top-menu-div");
|
||||
for (let a = 0; a < tfms.length; a++) {
|
||||
tfms[a].style.display = "none";
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
lCanvasElement.addEventListener('mousedown', function(evt) {
|
||||
logicEngine.Mouse_Down(evt);
|
||||
@ -55,10 +64,23 @@ btn_CloseWelcome.addEventListener('click', function(evt) {
|
||||
}
|
||||
}, false);
|
||||
|
||||
let btn_CreateIC = document.getElementById("btn_CreateIC");
|
||||
btn_CreateIC.addEventListener('click', function(evt) {
|
||||
let tfm_CreateIC = document.getElementById("tfm_CreateIC");
|
||||
tfm_CreateIC.addEventListener('click', function(evt) {
|
||||
if (!tfm_CreateIC.classList.contains("disabled")) {
|
||||
let CreateICBox = document.getElementById("CreateICBox");
|
||||
CreateICBox.style.display = "block";
|
||||
setTimeout(function () {
|
||||
hideMenus()
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
|
||||
let rcm_CreateIC = document.getElementById("rcm_CreateIC");
|
||||
rcm_CreateIC.addEventListener('click', function(evt) {
|
||||
if (!this.classList.contains("disabled")) {
|
||||
let CreateICBox = document.getElementById("CreateICBox");
|
||||
CreateICBox.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
let btn_CreateIC_Cancel = document.getElementById("btn_CreateIC_Cancel");
|
||||
@ -89,20 +111,81 @@ ICDescription.addEventListener('input', function(evt){
|
||||
if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
|
||||
});
|
||||
|
||||
let btn_New = document.getElementById("btn_New");
|
||||
btn_New.addEventListener('click', function(evt) {
|
||||
let tfm_New = document.getElementById("tfm_New");
|
||||
tfm_New.addEventListener('click', function(evt) {
|
||||
logicEngine.ActiveContainer = new elementContainer();
|
||||
logicEngine.Ctx.setTransform(1,0,0,1,0,0);
|
||||
logicEngine.Panning.OffsetX = 0;
|
||||
logicEngine.Panning.OffsetY = 0;
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let rcm_New = document.getElementById("rcm_New");
|
||||
rcm_New.addEventListener('click', function(evt) {
|
||||
logicEngine.ActiveContainer = new elementContainer();
|
||||
logicEngine.Ctx.setTransform(1,0,0,1,0,0);
|
||||
logicEngine.Panning.OffsetX = 0;
|
||||
logicEngine.Panning.OffsetY = 0;
|
||||
|
||||
});
|
||||
|
||||
let rcm_Delete = document.getElementById("rcm_Delete");
|
||||
rcm_Delete.addEventListener('click', function(evt) {
|
||||
logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
|
||||
disableSelectedRCMs(true);
|
||||
});
|
||||
|
||||
let tfm_Delete = document.getElementById("tfm_Delete");
|
||||
tfm_Delete.addEventListener('click', function(evt) {
|
||||
logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
|
||||
disableSelectedRCMs(true);
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
|
||||
let btn_Save = document.getElementById("btn_Save");
|
||||
btn_Save.addEventListener('click', function(evt) {
|
||||
download("mydeign.LogicParts",createSaveState(logicEngine.ActiveContainer));
|
||||
let rcm_Disconect = document.getElementById("rcm_Disconnect");
|
||||
rcm_Disconect.addEventListener('click', function(evt) {
|
||||
logicEngine.ActiveContainer.Selected.Disconnect();
|
||||
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
|
||||
});
|
||||
|
||||
let tfm_Disconect = document.getElementById("tfm_Disconnect");
|
||||
tfm_Disconect.addEventListener('click', function(evt) {
|
||||
logicEngine.ActiveContainer.Selected.Disconnect();
|
||||
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
|
||||
let tfm_Save = document.getElementById("tfm_Save");
|
||||
tfm_Save.addEventListener('click', function(evt) {
|
||||
let saveWindow = document.getElementById("SaveWindow");
|
||||
saveWindow.style.display="block";
|
||||
saveWindow.style.left = Math.round((window.innerWidth / 2) - (saveWindow.clientWidth/2)) + "px";
|
||||
saveWindow.style.top = Math.round((window.innerHeight / 2) - (saveWindow.clientHeight/2)) + "px";
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let btn_SaveDesign = document.getElementById("btn_SaveDesign");
|
||||
btn_SaveDesign.addEventListener('click', function(evt) {
|
||||
let DesignName = document.getElementById("saveName");
|
||||
let savestate = createSaveState(logicEngine.ActiveContainer);
|
||||
savestate.Name = DesignName.value;
|
||||
let saveWindow = document.getElementById("SaveWindow");
|
||||
saveWindow.style.display = "none";
|
||||
download(savestate.Name + ".LogicParts",savestate);
|
||||
});
|
||||
|
||||
let btn_Save_Cancel = document.getElementById("btn_CancelSave");
|
||||
btn_Save_Cancel.addEventListener('click', function(evt) {
|
||||
let saveWindow = document.getElementById("SaveWindow");
|
||||
saveWindow.style.display = "none";
|
||||
});
|
||||
|
||||
let file_Load = document.getElementById("file_Load");
|
||||
let btn_Load = document.getElementById("btn_Load");
|
||||
btn_Load.addEventListener('click', function(evt) {
|
||||
let tfm_Open = document.getElementById("tfm_Open");
|
||||
tfm_Open.addEventListener('click', function(evt) {
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
file_Load.click();
|
||||
});
|
||||
file_Load.addEventListener('change', function(evt) {
|
||||
@ -111,7 +194,7 @@ file_Load.addEventListener('change', function(evt) {
|
||||
return function (e) {
|
||||
try {
|
||||
let restoredata = JSON.parse(e.target.result);
|
||||
console.log(restoredata);
|
||||
|
||||
loadresult = loadsave(restoredata);
|
||||
if (!loadresult) {
|
||||
switch(loadresult) {
|
||||
@ -127,7 +210,7 @@ file_Load.addEventListener('change', function(evt) {
|
||||
}
|
||||
}
|
||||
} catch (ex) {
|
||||
alert("Bad file!");
|
||||
alert("Bad file! " + ex);
|
||||
console.log(ex);
|
||||
}
|
||||
}
|
||||
@ -135,5 +218,119 @@ file_Load.addEventListener('change', function(evt) {
|
||||
fread.readAsText(evt.target.files[0]);
|
||||
}, false);
|
||||
|
||||
let tfms = document.getElementsByClassName("top-menu-item");
|
||||
for (let a = 0; a < tfms.length; a++) {
|
||||
tfms[a].addEventListener("click", function (evt) {
|
||||
let tfm = document.getElementById(tfms[a].id + "Menu");
|
||||
let tfm_rect = tfms[a].getBoundingClientRect();
|
||||
tfm.style.left = (tfm_rect.left) + "px";
|
||||
tfm.style.top = (tfm_rect.top + tfm_rect.height) + "px";
|
||||
tfm.style.display = "block";
|
||||
});
|
||||
}
|
||||
|
||||
let tfm_About = document.getElementById("tfm_About");
|
||||
tfm_About.addEventListener("click", function (evt) {
|
||||
let WelcomeScreen = document.getElementById("WelcomeWindow");
|
||||
WelcomeScreen.style.display = "block";
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let tfm_ShowConns = document.getElementById("tfm_ShowConnections");
|
||||
tfm_ShowConns.addEventListener("click", function (evt) {
|
||||
if (logicEngine.Settings.HideConnections) {
|
||||
let sgSpan = tfm_ShowConns.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "✓";
|
||||
logicEngine.Settings.HideConnections = false;
|
||||
} else {
|
||||
let sgSpan = tfm_ShowConns.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "";
|
||||
logicEngine.Settings.HideConnections = true;
|
||||
}
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let tfm_ConnLayer = document.getElementById("tfm_ConnectionLayer");
|
||||
tfm_ConnLayer.addEventListener("click", function (evt) {
|
||||
if (logicEngine.Settings.TopConnections) {
|
||||
tfm_ConnLayer.innerText = "Connections Above";
|
||||
logicEngine.Settings.TopConnections = false;
|
||||
} else {
|
||||
tfm_ConnLayer.innerText = "Connections Below";
|
||||
logicEngine.Settings.TopConnections = true;
|
||||
}
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let tfm_ShowFPS = document.getElementById("tfm_ShowFPS");
|
||||
tfm_ShowFPS.addEventListener("click", function (evt) {
|
||||
if (logicEngine.Settings.ShowFPS) {
|
||||
let sgSpan = tfm_ShowFPS.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "";
|
||||
logicEngine.Settings.ShowFPS = false;
|
||||
} else {
|
||||
let sgSpan = tfm_ShowFPS.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "✓";
|
||||
logicEngine.Settings.ShowFPS = true;
|
||||
}
|
||||
logicEngine.Resize("");
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
|
||||
let tfm_Pan2Center = document.getElementById("tfm_Pan2Center");
|
||||
tfm_Pan2Center.addEventListener("click", function (evt) {
|
||||
logicEngine.Ctx.setTransform(1,0,0,1,0,0);
|
||||
logicEngine.Panning.OffsetX = 0;
|
||||
logicEngine.Panning.OffsetY = 0;
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let tfm_ShowGrid = document.getElementById("tfm_ShowGrid");
|
||||
tfm_ShowGrid.addEventListener("click", function (evt) {
|
||||
if (logicEngine.Settings.ShowGrid) {
|
||||
let sgSpan = tfm_ShowGrid.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "";
|
||||
logicEngine.Settings.ShowGrid = false;
|
||||
} else {
|
||||
let sgSpan = tfm_ShowGrid.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "✓";
|
||||
logicEngine.Settings.ShowGrid = true;
|
||||
}
|
||||
logicEngine.Resize("");
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let tfm_SnapGrid = document.getElementById("tfm_SnapGrid");
|
||||
tfm_SnapGrid.addEventListener("click", function (evt) {
|
||||
if (logicEngine.Settings.SnapGrid) {
|
||||
let sgSpan = tfm_SnapGrid.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "";
|
||||
logicEngine.Settings.SnapGrid = false;
|
||||
} else {
|
||||
let sgSpan = tfm_SnapGrid.getElementsByTagName("span")[0];
|
||||
sgSpan.innerText = "✓";
|
||||
logicEngine.Settings.SnapGrid = true;
|
||||
}
|
||||
logicEngine.Resize("");
|
||||
setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
let in_GridSize = document.getElementById("in_GridSize");
|
||||
in_GridSize.addEventListener("change", function (evt) {
|
||||
logicEngine.Settings.GridSize = parseInt(in_GridSize.value);
|
||||
logicEngine.Resize("");
|
||||
//setTimeout(function(){hideMenus()},10);
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener( "contextmenu", function(evt) {
|
||||
evt.preventDefault();
|
||||
let rcm = document.getElementById("RightClickMenu");
|
||||
rcm.style.left = (evt.clientX-40) + "px";
|
||||
rcm.style.top = (evt.clientY-25) + "px";
|
||||
rcm.style.display = "block";
|
||||
|
||||
});
|
||||
|
||||
CheckForWelcomeCookie();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user