diff --git a/README.md b/README.md index 483a35e..b16d587 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/css/main.css b/css/main.css index 36e57a7..f0b070f 100644 --- a/css/main.css +++ b/css/main.css @@ -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; diff --git a/index.html b/index.html index 7c708b3..072cecf 100644 --- a/index.html +++ b/index.html @@ -186,8 +186,11 @@ +
+ + @@ -199,8 +202,8 @@ + - diff --git a/js/globalfunctions.js b/js/globalfunctions.js index 555110f..d3ebf21 100644 --- a/js/globalfunctions.js +++ b/js/globalfunctions.js @@ -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 = " "; - } else { - let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0]; - sgSpan.innerText = "✓"; - } - if (!logicEngine.Settings.TopConnections) { - tfm_ConnLayer.innerHTML = ' Connections Above'; - } else { - tfm_ConnLayer.innerHTML = ' Connections Below'; - } - if (!logicEngine.Settings.ShowFPS) { - let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0]; - sgSpan.innerHTML = " "; - } else { - let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0]; - sgSpan.innerText = "✓"; - } - if (!logicEngine.Settings.ShowGrid) { - let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0]; - sgSpan.innerHTML = " "; - } else { - let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0]; - sgSpan.innerText = "✓"; - } - if (!logicEngine.Settings.SnapGrid) { - let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0]; - sgSpan.innerHTML = " "; - } 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"); diff --git a/js/logicengine.js b/js/logicengine.js index 6c5c548..78d9dda 100644 --- a/js/logicengine.js +++ b/js/logicengine.js @@ -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(); } } diff --git a/js/main.js b/js/main.js index b6006a9..af0e06d 100644 --- a/js/main.js +++ b/js/main.js @@ -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 = '' + menuItems[b].innerHTML + '' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + ''; - } - } -} - -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 = " "; - 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 = " "; - 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 = " "; - 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 = " "; - 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(); diff --git a/js/mainevents.js b/js/mainevents.js new file mode 100644 index 0000000..e0a47f2 --- /dev/null +++ b/js/mainevents.js @@ -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(); + }); +} diff --git a/js/rightclickmenu/rightclickmenu.js b/js/rightclickmenu/rightclickmenu.js new file mode 100644 index 0000000..aa1252d --- /dev/null +++ b/js/rightclickmenu/rightclickmenu.js @@ -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); + }); +} diff --git a/js/topmenu/topmenu.js b/js/topmenu/topmenu.js new file mode 100644 index 0000000..8dbd4e4 --- /dev/null +++ b/js/topmenu/topmenu.js @@ -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 = " "; + } else { + let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0]; + sgSpan.innerText = "✓"; + } + if (!logicEngine.Settings.TopConnections) { + tfm_ConnLayer.innerHTML = ' Connections Above'; + } else { + tfm_ConnLayer.innerHTML = ' Connections Below'; + } + if (!logicEngine.Settings.ShowFPS) { + let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0]; + sgSpan.innerHTML = " "; + } else { + let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0]; + sgSpan.innerText = "✓"; + } + if (!logicEngine.Settings.ShowGrid) { + let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0]; + sgSpan.innerHTML = " "; + } else { + let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0]; + sgSpan.innerText = "✓"; + } + if (!logicEngine.Settings.SnapGrid) { + let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0]; + sgSpan.innerHTML = " "; + } 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 = '' + menuItems[b].innerHTML + '' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + ''; + } + } + } + + 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 = " "; + 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 = " "; + 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 = " "; + 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 = " "; + 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(); + }); +}