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

0.4.13: Elements are now dragged to position, some refacoring of code

Browse Source
This commit is contained in:
MatCat 2021-03-14 00:33:21 -08:00
parent 3405cc2105
commit 6bf4c9873f
9 changed files with 644 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -14,6 +14,10 @@ LZ-String, Copyright 2013 pieroxy under MIT license https://github.com/pieroxy/l
## Changelog
### 0.4.13
* Clicking on an element on the toolbar no longer spawns an element to the work area directly, but rather lets the user place it.
### 0.4.12
* Fixed bug where pastes would get offset when canvas is panned

7
css/main.css
View File

@ -382,6 +382,13 @@ textarea {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}
#floatCanvas {
display: none;
position: absolute;
left: 0px;
right: 0px;
}
#darkout-overlay {
position: absolute;
left: 0px;

5
index.html
View File

@ -186,8 +186,11 @@
</div>
</div>
</div>
<div id="floatCanvas"><canvas></canvas></div>
<div id="darkout-overlay"></div>
<script src="js/vendor/lz-string.min.js"></script>
<script src="js/topmenu/topmenu.js"></script>
<script src="js/rightclickmenu/rightclickmenu.js"></script>
<script src="js/globalfunctions.js"></script>
<script src="js/baseclasses.js"></script>
<script src="js/scheduler.js"></script>
@ -199,8 +202,8 @@
<script src="js/elements/TimingElements.js"></script>
<script src="js/elements/ICElements.js"></script>
<script src="js/logicengine.js"></script>
<script src="js/mainevents.js"></script>
<script src="js/main.js"></script>
</body>
</html>

94
js/globalfunctions.js
View File

@ -33,7 +33,26 @@ function addElement(RestoreData = null,refClass,props) {
}
logicEngine.ActiveContainer.AddElement(newElement);
logicEngine.ActiveContainer.Select(newElement);
disableSelectedRCMs(false);
logicEngine.MovingElement = new Array(logicEngine.ActiveContainer.Selected.length);
for (let b = 0; b < logicEngine.ActiveContainer.Selected.length; b++) {
logicEngine.ActiveContainer.Selected[b].X = (logicEngine.Mouse.x - logicEngine.Panning.OffsetX) - (logicEngine.ActiveContainer.Selected[b].Width/2);
logicEngine.ActiveContainer.Selected[b].Y = (logicEngine.Mouse.y - logicEngine.Panning.OffsetY) - (logicEngine.ActiveContainer.Selected[b].Height/2);
logicEngine.MovingElement[b] = {
StartX: logicEngine.ActiveContainer.Selected[b].X,
StartY: logicEngine.ActiveContainer.Selected[b].Y
};
logicEngine.MovingElementMouseStartX = logicEngine.Mouse.x;
logicEngine.MovingElementMouseStartY = logicEngine.Mouse.y;
}
let rect = logicEngine.Canvas.getBoundingClientRect();
let realMouseX = logicEngine.Mouse.x + rect.left;
let realMouseY = logicEngine.Mouse.y + rect.top;
logicEngine.MouseDown = true;
logicEngine.DrawOffCanvasElement({clientX: realMouseX, clientY: realMouseY});
disableSelectedMenus(false);
return newElement;
}
@ -171,43 +190,6 @@ function GetCopyObject() {
}
}
function BuildTopMenu() {
// Make sure settings are set correct
if (logicEngine.Settings.HideConnections) {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.TopConnections) {
tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Above';
} else {
tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Below';
}
if (!logicEngine.Settings.ShowFPS) {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.ShowGrid) {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.SnapGrid) {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
in_GridSize.value = logicEngine.Settings.GridSize;
}
function BuildToolbox() {
let toolbox = document.getElementById("inner-left-menu");
@ -267,31 +249,9 @@ 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 showRCM(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";
function disableSelectedMenus(bool) {
disableSelectedRCMs(bool);
disableSelectedTFMs(bool);
}
function ShowHelp() {
@ -306,14 +266,6 @@ function HideHelp() {
helpWindow.style.display = "none";
}
function hideMenus() {
let tds = document.getElementsByClassName("top-menu-div");
for (let a = 0; a < tds.length; a++) {
tds[a].setAttribute('style','display: none;');
}
}
function SaveSettings() {
localStorage.setItem("LogicEngineSettings",JSON.stringify(logicEngine.Settings));
console.log("Settings Saved");

39
js/logicengine.js
View File

@ -150,7 +150,7 @@ class LogicEngineSettings {
CreateIC: {Key: "i", // lowercase
Alt: false,
Shift: true,
Ctrl: true,
Ctrl: false,
Meta: false,
Name: "Create IC",
Description: "Turns the current design into an IC",
@ -284,6 +284,7 @@ class LogicEngine {
}
element.MouseDown(mousePos);
} else {
this.HideOffCanvasElement();
this.MouseDown = true;
this.ActiveLink = false;
if (this.ControlPressed) {
@ -303,9 +304,9 @@ class LogicEngine {
}
}
if (this.ActiveContainer.Selected?.length > 0) {
disableSelectedRCMs(false);
disableSelectedMenus(false);
} else {
disableSelectedRCMs(true);
disableSelectedMenus(true);
}
}
}
@ -329,10 +330,12 @@ class LogicEngine {
this.ActiveContainer.Selected = false;
let PropertiesBox = document.getElementById("PropertiesBox");
PropertiesBox.style.display = "none";
this.HideOffCanvasElement();
}
this.MovingElement = false;
this.MouseDown = false;
this.HideOffCanvasElement();
if (this.MultiSelectStart.InProgress) {
this.MultiSelectStart.InProgress = false;
@ -345,9 +348,33 @@ class LogicEngine {
}
if (this.ActiveContainer.Selected?.length > 0) {
disableSelectedRCMs(false);
disableSelectedMenus(false);
} else {
disableSelectedRCMs(true);
disableSelectedMenus(true);
}
}
HideOffCanvasElement() {
let floatingCanvasDiv = document.getElementById("floatCanvas");
floatingCanvasDiv.style.display = "none";
}
DrawOffCanvasElement(evt) {
let rect = this.Canvas.getBoundingClientRect();
let floatingCanvasDiv = document.getElementById("floatCanvas");
let floatingCanvas = floatingCanvasDiv.getElementsByTagName("canvas")[0];
let floatingCtx = floatingCanvas.getContext("2d");
if ((evt.clientX >= (rect.left - (this.ActiveContainer.Selected[0].Width/2)))) {
floatingCanvasDiv.style.display = "none";
} else {
floatingCanvas.width = this.ActiveContainer.Selected[0].Width;
floatingCanvas.height = this.ActiveContainer.Selected[0].Height;
floatingCtx.clearRect(0, 0, floatingCanvas.width, floatingCanvas.height);
//console.log(this.ActiveContainer.Selected[0]);
floatingCtx.drawImage(this.ActiveContainer.Selected[0].StaticCanvas, 0, 0);
floatingCanvasDiv.style.left = (evt.clientX - (this.ActiveContainer.Selected[0].Width / 2)) + "px";
floatingCanvasDiv.style.top = (evt.clientY - (this.ActiveContainer.Selected[0].Height / 2)) + "px";
floatingCanvasDiv.style.display = "block";
}
}
@ -358,6 +385,7 @@ class LogicEngine {
if(this.MouseDown) {
//console.log('Mouse at position: ' + mousePos.x + ',' + mousePos.y);
if (this.MovingElement) {
if (this.MovingElement.length == 1) this.DrawOffCanvasElement(evt);
if ((performance.now() - this.MouseDownTime) > 100) {
let xOffset = mousePos.x - this.MovingElementMouseStartX;
@ -394,6 +422,7 @@ class LogicEngine {
}
} else {
this.ActiveContainer.checkMouseBounds(mousePos);
if (!this.MovingElement) this.HideOffCanvasElement();
}
}

435
js/main.js
View File

@ -2,444 +2,23 @@
MatCat BrowserLogic Simulator
*/
let Version = "0.4.12";
let Version = "0.4.13";
let spanVersion = document.getElementById("version");
spanVersion.innerText = Version;
// get the canvas and get the engine object going
let lCanvasElement = document.getElementById("LogicPlane");
let logicEngine = new LogicEngine(lCanvasElement);
// Get the game Tick going, this will be 4ms for now which is the fastest that is supported
// by the HTML5 spec!
setInterval(logicEngine.Scheduler.Tick.bind(logicEngine.Scheduler), 4);
window.addEventListener('resize', function(evt) {
logicEngine.Resize(evt);
}, false);
document.addEventListener('copy', function(evt) {
evt.preventDefault();
let copyObject = GetCopyObject();
if (!copyObject) return;
evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
evt.clipboardData.setData('text',JSON.stringify(copyObject));
});
document.addEventListener('cut', function(evt) {
evt.preventDefault();
let copyObject = GetCopyObject();
if (!copyObject) return;
evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
evt.clipboardData.setData('text',JSON.stringify(copyObject));
logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
disableSelectedRCMs(true);
});
document.addEventListener('paste', function(evt) {
evt.preventDefault();
if (evt.clipboardData.getData('logicparts/json')) {
//console.log(evt.clipboardData.getData('logicparts/json'));
loadActiveContainer(JSON.parse(evt.clipboardData.getData('logicparts/json')).Elements);
} else {
// Lets see if they pasted a proper LogicParts format atleast
if (evt.clipboardData.getData('text')) {
let jsonObj = JSON.parse(evt.clipboardData.getData('text'));
if (jsonObj?.LogicParts && jsonObj?.Paste) {
console.log("We got a paste of a general text object that is valid");
loadActiveContainer(jsonObj.Elements);
}
}
}
});
window.addEventListener('keydown', function(evt) {
logicEngine.Key_Press(evt);
}, false);
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);
}, false);
lCanvasElement.addEventListener('mouseup', function(evt) {
logicEngine.Mouse_Up(evt);
}, false);
window.addEventListener('mousemove', function(evt) {
logicEngine.Mouse_Move(evt);
}, false);
// Get the game Tick going, set to 1ms but most browsers will min to 4ms
setInterval(logicEngine.Scheduler.Tick.bind(logicEngine.Scheduler), 1);
// Get the engine going
logicEngine.StartEngine();
RegisterEvents();
TopMenuListeners();
RightClickMenuListeners();
BuildToolbox();
// Setup interface buttons
let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
btn_CloseWelcome.addEventListener('click', function(evt) {
let WelcomeScreen = document.getElementById("WelcomeWindow");
let DarkOverlay = document.getElementById("darkout-overlay");
WelcomeScreen.style.display = "none";
DarkOverlay.style.display = "none";
let chk_dontDisplayWelcome = document.getElementById("chk_dontDisplayWelcome");
if (chk_dontDisplayWelcome.checked) {
setCookie("hidewelcomescreen","true",3600);
}
}, false);
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");
btn_CreateIC_Cancel.addEventListener('click', function(evt) {
let CreateICBox = document.getElementById("CreateICBox");
CreateICBox.style.display = "none";
});
let btn_CreateIC_Create = document.getElementById("btn_CreateIC_Create");
btn_CreateIC_Create.addEventListener('click', function(evt) {
let CreateICBox = document.getElementById("CreateICBox");
let ICName = document.getElementById("ICName");
let ICDescription = document.getElementById("ICDescription");
createIC(logicEngine.ActiveContainer,ICName.value,ICDescription.value);
CreateICBox.style.display = "none";
});
let ICName = document.getElementById("ICName");
let ICDescription = document.getElementById("ICDescription");
ICName.addEventListener('input', function(evt){
btn_CreateIC_Create.disabled = true;
if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});
ICDescription.addEventListener('input', function(evt){
btn_CreateIC_Create.disabled = true;
if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});
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_Cut = document.getElementById("tfm_Cut");
tfm_Cut.addEventListener('click', function(evt) {
document.execCommand('cut');
disableSelectedRCMs(true);
setTimeout(function(){hideMenus()},10);
});
let tfm_Copy = document.getElementById("tfm_Copy");
tfm_Copy.addEventListener('click', function(evt) {
document.execCommand('copy');
disableSelectedRCMs(true);
setTimeout(function(){hideMenus()},10);
});
let tfm_Paste = document.getElementById("tfm_Paste");
tfm_Paste.addEventListener('click', function(evt) {
document.execCommand('paste');
disableSelectedRCMs(true);
setTimeout(function(){hideMenus()},10);
});
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 rcm_Disconect = document.getElementById("rcm_Disconnect");
rcm_Disconect.addEventListener('click', function(evt) {
for (let a = 0; a < logicEngine.ActiveContainer.Selected.length;a++) {
logicEngine.ActiveContainer.Selected[a].Disconnect();
}
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
});
let tfm_Disconect = document.getElementById("tfm_Disconnect");
tfm_Disconect.addEventListener('click', function(evt) {
for (let a = 0; a < logicEngine.ActiveContainer.Selected.length;a++) {
logicEngine.ActiveContainer.Selected[a]?.Disconnect();
}
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
setTimeout(function(){hideMenus()},10);
});
let tfm_SelectAll = document.getElementById("tfm_SelectAll");
tfm_SelectAll.addEventListener('click', function(evt) {
let elements = new Array();
for (let a = 0; a < logicEngine.ActiveContainer.Elements?.length;a++) {
elements.push(logicEngine.ActiveContainer.Elements[a]);
}
logicEngine.ActiveContainer.Selected = elements;
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 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) {
let fread = new FileReader();
fread.onload = (function (theFile) {
return function (e) {
try {
let restoredata = JSON.parse(e.target.result);
loadresult = loadsave(restoredata);
if (!loadresult) {
switch(loadresult) {
case -1:
alert("Invalid LogicParts file!");
break;
case -2:
alert("The version of MatCat BrowserLogic cannot open this save version!");
break;
default:
alert("Bad save file!");
break;
}
}
} catch (ex) {
alert("Bad file! " + ex);
console.log(ex);
}
}
})(evt.target.files[0]);
fread.readAsText(evt.target.files[0]);
}, false);
/*
Generate the top menu item listeners
*/
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 = document.getElementById(tfms[a].id + "Menu");
if (!tfm.classList.contains("keybinding-complete")) {
tfm.classList.add("keybinding-complete");
let menuItems = tfm?.getElementsByTagName("li");
for (let b = 0; b < menuItems?.length; b++) {
if (menuItems[b]?.getAttribute("value")) menuItems[b].innerHTML = '<span class="menuitem-label">' + menuItems[b].innerHTML + '</span><span class="menuitem-shortcut">' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + '</span>';
}
}
}
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.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.HideConnections = false;
} else {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.HideConnections = true;
}
SaveSettings();
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;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.ShowFPS = false;
} else {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.ShowFPS = true;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.ShowGrid = false;
} else {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.ShowGrid = true;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.SnapGrid = false;
} else {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.SnapGrid = true;
}
SaveSettings();
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("");
SaveSettings();
//setTimeout(function(){hideMenus()},10);
});
let tfm_Help = document.getElementById("tfm_Help");
tfm_Help.addEventListener("click", function (evt) {
setTimeout(function(){hideMenus()},10);
ShowHelp();
});
let helpWindow = document.getElementById("HelpWindow");
let helpWindow_Close = helpWindow.getElementsByClassName("CloseWindow")[0];
helpWindow_Close.addEventListener("click", function (evt) {
HideHelp();
});
let leftmenu = document.getElementById("left-menu");
let propwin = document.getElementById("PropertiesBox");
lCanvasElement.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
leftmenu.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
propwin.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
let topbar = document.getElementById("top-bar");
topbar.addEventListener( "contextmenu", function(evt) {
evt.preventDefault();
});
BuildTopMenu();
CheckForWelcomeCookie();

212
js/mainevents.js Normal file
View File

@ -0,0 +1,212 @@
function RegisterEvents() {
/*
DISPLAY AND RESIZING
*/
window.addEventListener('resize', function (evt) {
logicEngine.Resize(evt);
}, false);
/*
SYSTEM EVENTS
*/
document.addEventListener('copy', function (evt) {
evt.preventDefault();
let copyObject = GetCopyObject();
if (!copyObject) return;
evt.clipboardData.setData('logicparts/json', JSON.stringify(copyObject));
evt.clipboardData.setData('text', JSON.stringify(copyObject));
});
document.addEventListener('cut', function (evt) {
evt.preventDefault();
let copyObject = GetCopyObject();
if (!copyObject) return;
evt.clipboardData.setData('logicparts/json', JSON.stringify(copyObject));
evt.clipboardData.setData('text', JSON.stringify(copyObject));
logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
disableSelectedMenus(true);
});
document.addEventListener('paste', function (evt) {
evt.preventDefault();
if (evt.clipboardData.getData('logicparts/json')) {
//console.log(evt.clipboardData.getData('logicparts/json'));
loadActiveContainer(JSON.parse(evt.clipboardData.getData('logicparts/json')).Elements);
} else {
// Lets see if they pasted a proper LogicParts format atleast
if (evt.clipboardData.getData('text')) {
let jsonObj = JSON.parse(evt.clipboardData.getData('text'));
if (jsonObj?.LogicParts && jsonObj?.Paste) {
console.log("We got a paste of a general text object that is valid");
loadActiveContainer(jsonObj.Elements);
}
}
}
});
/*
KEYBOARD EVENTS
*/
window.addEventListener('keydown', function (evt) {
logicEngine.Key_Press(evt);
}, false);
window.addEventListener('keyup', function (evt) {
logicEngine.Key_Up(evt);
}, false);
/*
MOUSE EVENTS
*/
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);
}, false);
lCanvasElement.addEventListener('mouseup', function (evt) {
logicEngine.Mouse_Up(evt);
}, false);
window.addEventListener('mousemove', function (evt) {
logicEngine.Mouse_Move(evt);
}, false);
/*
WINDOW CONTROLS
*/
let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
btn_CloseWelcome.addEventListener('click', function (evt) {
let WelcomeScreen = document.getElementById("WelcomeWindow");
let DarkOverlay = document.getElementById("darkout-overlay");
WelcomeScreen.style.display = "none";
DarkOverlay.style.display = "none";
let chk_dontDisplayWelcome = document.getElementById("chk_dontDisplayWelcome");
if (chk_dontDisplayWelcome.checked) {
setCookie("hidewelcomescreen", "true", 3600);
}
}, false);
let btn_CreateIC_Cancel = document.getElementById("btn_CreateIC_Cancel");
btn_CreateIC_Cancel.addEventListener('click', function (evt) {
let CreateICBox = document.getElementById("CreateICBox");
CreateICBox.style.display = "none";
});
let btn_CreateIC_Create = document.getElementById("btn_CreateIC_Create");
btn_CreateIC_Create.addEventListener('click', function (evt) {
let CreateICBox = document.getElementById("CreateICBox");
let ICName = document.getElementById("ICName");
let ICDescription = document.getElementById("ICDescription");
createIC(logicEngine.ActiveContainer, ICName.value, ICDescription.value);
CreateICBox.style.display = "none";
});
let ICName = document.getElementById("ICName");
let ICDescription = document.getElementById("ICDescription");
ICName.addEventListener('input', function (evt) {
btn_CreateIC_Create.disabled = true;
if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});
ICDescription.addEventListener('input', function (evt) {
btn_CreateIC_Create.disabled = true;
if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});
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 tfm_Open = document.getElementById("tfm_Open");
file_Load.addEventListener('change', function (evt) {
let fread = new FileReader();
fread.onload = (function (theFile) {
return function (e) {
try {
let restoredata = JSON.parse(e.target.result);
loadresult = loadsave(restoredata);
if (!loadresult) {
switch (loadresult) {
case -1:
alert("Invalid LogicParts file!");
break;
case -2:
alert("The version of MatCat BrowserLogic cannot open this save version!");
break;
default:
alert("Bad save file!");
break;
}
}
} catch (ex) {
alert("Bad file! " + ex);
console.log(ex);
}
}
})(evt.target.files[0]);
fread.readAsText(evt.target.files[0]);
}, false);
let in_GridSize = document.getElementById("in_GridSize");
in_GridSize.addEventListener("change", function (evt) {
logicEngine.Settings.GridSize = parseInt(in_GridSize.value);
logicEngine.Resize("");
SaveSettings();
//setTimeout(function(){hideMenus()},10);
});
let helpWindow = document.getElementById("HelpWindow");
let helpWindow_Close = helpWindow.getElementsByClassName("CloseWindow")[0];
helpWindow_Close.addEventListener("click", function (evt) {
HideHelp();
});
let leftmenu = document.getElementById("left-menu");
let propwin = document.getElementById("PropertiesBox");
lCanvasElement.addEventListener("contextmenu", function (evt) {
showRCM(evt)
});
leftmenu.addEventListener("contextmenu", function (evt) {
showRCM(evt)
});
propwin.addEventListener("contextmenu", function (evt) {
showRCM(evt)
});
let topbar = document.getElementById("top-bar");
topbar.addEventListener("contextmenu", function (evt) {
evt.preventDefault();
});
}

53
js/rightclickmenu/rightclickmenu.js Normal file
View File

@ -0,0 +1,53 @@
function disableSelectedRCMs(bool) {
let rcm_Delete = document.getElementById("rcm_Delete");
let rcm_Disconnect = document.getElementById("rcm_Disconnect");
if (bool) {
rcm_Delete.classList.add("disabled");
rcm_Disconnect.classList.add("disabled");
} else {
rcm_Delete.classList.remove("disabled");
rcm_Disconnect.classList.remove("disabled");
}
}
function showRCM(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";
}
function RightClickMenuListeners() {
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 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"});
disableSelectedMenus(true);
});
let rcm_Disconect = document.getElementById("rcm_Disconnect");
rcm_Disconect.addEventListener('click', function (evt) {
for (let a = 0; a < logicEngine.ActiveContainer.Selected.length; a++) {
logicEngine.ActiveContainer.Selected[a].Disconnect();
}
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
});
}

300
js/topmenu/topmenu.js Normal file
View File

@ -0,0 +1,300 @@
function BuildTopMenu() {
// Make sure settings are set correct
let tfm_ShowConns = document.getElementById("tfm_ShowConnections");
let tfm_ConnLayer = document.getElementById("tfm_ConnectionLayer");
if (logicEngine.Settings.HideConnections) {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.TopConnections) {
tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Above';
} else {
tfm_ConnLayer.innerHTML = '<span class="blankbox">&nbsp;</span>Connections Below';
}
if (!logicEngine.Settings.ShowFPS) {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.ShowGrid) {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
if (!logicEngine.Settings.SnapGrid) {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
} else {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
}
in_GridSize.value = logicEngine.Settings.GridSize;
}
function disableSelectedTFMs(bool) {
let tfm_Delete = document.getElementById("tfm_Delete");
let tfm_Disconnect = document.getElementById("tfm_Disconnect");
if (bool) {
tfm_Delete.classList.add("disabled");
tfm_Disconnect.classList.add("disabled");
} else {
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 TopMenuListeners() {
/*
All the listeners for the top menu
*/
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 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 tfm_Cut = document.getElementById("tfm_Cut");
tfm_Cut.addEventListener('click', function (evt) {
document.execCommand('cut');
disableSelectedMenus(true);
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_Copy = document.getElementById("tfm_Copy");
tfm_Copy.addEventListener('click', function (evt) {
document.execCommand('copy');
disableSelectedMenus(true);
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_Paste = document.getElementById("tfm_Paste");
tfm_Paste.addEventListener('click', function (evt) {
document.execCommand('paste');
disableSelectedMenus(true);
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_Delete = document.getElementById("tfm_Delete");
tfm_Delete.addEventListener('click', function (evt) {
logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
disableSelectedMenus(true);
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_Disconect = document.getElementById("tfm_Disconnect");
tfm_Disconect.addEventListener('click', function (evt) {
for (let a = 0; a < logicEngine.ActiveContainer.Selected.length; a++) {
logicEngine.ActiveContainer.Selected[a]?.Disconnect();
}
logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_SelectAll = document.getElementById("tfm_SelectAll");
tfm_SelectAll.addEventListener('click', function (evt) {
let elements = new Array();
for (let a = 0; a < logicEngine.ActiveContainer.Elements?.length; a++) {
elements.push(logicEngine.ActiveContainer.Elements[a]);
}
logicEngine.ActiveContainer.Selected = elements;
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);
});
tfm_Open.addEventListener('click', function (evt) {
setTimeout(function () {
hideMenus()
}, 10);
file_Load.click();
});
/*
Generate the top menu item listeners
*/
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 = document.getElementById(tfms[a].id + "Menu");
if (!tfm.classList.contains("keybinding-complete")) {
tfm.classList.add("keybinding-complete");
let menuItems = tfm?.getElementsByTagName("li");
for (let b = 0; b < menuItems?.length; b++) {
if (menuItems[b]?.getAttribute("value")) menuItems[b].innerHTML = '<span class="menuitem-label">' + menuItems[b].innerHTML + '</span><span class="menuitem-shortcut">' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + '</span>';
}
}
}
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.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.HideConnections = false;
} else {
let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.HideConnections = true;
}
SaveSettings();
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;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.ShowFPS = false;
} else {
let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.ShowFPS = true;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.ShowGrid = false;
} else {
let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.ShowGrid = true;
}
SaveSettings();
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.getElementsByClassName("checkbox")[0];
sgSpan.innerHTML = "&nbsp;";
logicEngine.Settings.SnapGrid = false;
} else {
let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
sgSpan.innerText = "✓";
logicEngine.Settings.SnapGrid = true;
}
SaveSettings();
logicEngine.Resize("");
setTimeout(function () {
hideMenus()
}, 10);
});
let tfm_Help = document.getElementById("tfm_Help");
tfm_Help.addEventListener("click", function (evt) {
setTimeout(function () {
hideMenus()
}, 10);
ShowHelp();
});
}