diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 951e964..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore index 1316eed..bed10c7 100644 --- a/.gitignore +++ b/.gitignore @@ -129,4 +129,5 @@ dist .yarn/install-state.gz .pnp.* -behringer-routing/ \ No newline at end of file +behringer-routing/ +.DS_Store diff --git a/index.html b/index.html index 2ed806f..8fd1150 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,37 @@ - - - - Mixers routing tool - - - -
+
+ + +
+ + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6942a63..ff84471 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,12 @@ { "name": "mixers-routing-tool", - "version": "1.0.0", + "version": "0.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mixers-routing-tool", - "version": "1.0.0", - "hasInstallScript": true, + "version": "0.0.2", "license": "GPL-3.0", "dependencies": { "electron-squirrel-startup": "^1.0.0", diff --git a/preload.js b/preload.js index 57f2dc9..70d0a38 100644 --- a/preload.js +++ b/preload.js @@ -1,4 +1,5 @@ -const { contextBridge, ipcRenderer } = require('electron') +const { contextBridge, ipcRenderer } = require('electron'); +const { link } = require('fs'); const path = require('path') // Uncomment for npm start command @@ -10,6 +11,11 @@ const publicPath = : path.join(process.resourcesPath, 'public'); const imagesPath = path.join(publicPath, "assets", "images"); +const AES50 = { + A: "A", + B: "B" +}; + class Device { constructor(x, y, type, id, name) { this.x = x; @@ -18,17 +24,24 @@ class Device { this.id = id; this.name = name; this.visible = true; + + + this.AES50A = id; + this.AES50B = id; } show() { if (this.visible) + { return "
"; + "px; left: " + this.x + "px;'>" + + "
A
" + + "
B
" + + "
"; + } else return ""; } @@ -41,6 +54,56 @@ class Device { // this.visible = false; //} } + +class Link { + constructor(dev1, aes50_1, dev2, aes50_2) { + this.valid = true + this.device1 = dev1; + this.device2 = dev2; + this.aes50_1 = aes50_1; + this.aes50_2 = aes50_2; + this.check(); + } + + /// Check if link is valable + check() { + console.log("CHECK") + links.forEach(link => { + // if link already on aes50 + if ((this.device1 == link.device1 && this.aes50_1 == link.aes50_1) || + (this.device1 == link.device2 && this.aes50_1 == link.aes50_2)) { + console.log("LINK ALREADY CREATED") + link.delete() + } + else if ((this.device2 == link.device1 && this.aes50_2 == link.aes50_1) || + (this.device2 == link.device2 && this.aes50_2 == link.aes50_2)) { + console.log("LINK ALREADY CREATED") + link.delete() + } + }); + } + + delete() { + this.valid = false; + this.device1 = -1; + this.aes50_1 = -1; + this.device2 = -1; + this.aes50_2 = -2; + } + + show() { + if (this.valid) { + let x1offset = this.aes50_1 == AES50.A ? 58 : 78; + let x2offset = this.aes50_2 == AES50.A ? 58 : 78; + //return ""; + return ""; + } + } +} /* contextBridge.exposeInMainWorld('versions', { node: () => process.versions.node, @@ -52,9 +115,12 @@ contextBridge.exposeInMainWorld('versions', { */ let devices = []; +let links = []; +let selectedElement = null; +let originX, originY, mouseX, mouseY; function selectTopDiv(ele) { - while (!ele.classList.contains('device') && ele.tagName != "INPUT") { + while (ele.tagName != "BODY" && !ele.classList.contains('device') && !ele.classList.contains('AES50') && ele.tagName != "INPUT") { ele = ele.parentElement; } return ele; @@ -62,46 +128,89 @@ function selectTopDiv(ele) { function draw() { console.log("DRAW"); - console.log(devices); - document.getElementById("canvas").innerHTML = ""; + document.getElementById("canvas").innerHTML = ""; devices.forEach(device => { document.getElementById("canvas").innerHTML += device.show(); }) + drawLine(); } +function drawLine() { + document.getElementById("lines").innerHTML = ""; + links.forEach(link => { + document.getElementById("lines").innerHTML += link.show(); + }) +} -function enableDragging(ele) { - var dragging = dragging || false, - x, y, Ox, Oy, - current; - enableDragging.z = enableDragging.z || 1; - ele.onmousedown = function (ev) { - current = selectTopDiv(ev.target); - dragging = true; - x = ev.clientX; - y = ev.clientY; - Ox = current.offsetLeft; - Oy = current.offsetTop; - current.style.zIndex = ++enableDragging.z; - - window.onmousemove = function (ev) { - if (dragging == true) { - var Sx = ev.clientX - x + Ox, - Sy = ev.clientY - y + Oy; - if (Sx < 0) Sx = 0; - if (Sy < 0) Sy = 0; - current.style.top = Sy + "px"; - current.style.left = Sx + "px"; - return false; - } - }; - window.onmouseup = function (ev) { - dragging && (dragging = false); - devices[current.id].move(parseInt(current.style.left, 10), parseInt(current.style.top, 10)); - //draw(); +function enableClick(ele) { + ele.addEventListener("mousedown", (ev) => { + element = selectTopDiv(ev.target) + if (element.classList.contains('AES50')) { + selectedElement = element; + fromID = selectedElement.parentElement.id + fromAES50 = selectedElement.classList[1] + links.forEach(link => { + if ((link.device1 == fromID && link.aes50_1 == fromAES50) || + (link.device2 == fromID && link.aes50_2 == fromAES50)) { + link.delete(); + } + }); } - }; + else if (element.classList.contains('device')) { + selectedElement = element; // Select element + console.log("Element selected: " + selectedElement.id) + originX = selectedElement.offsetLeft; + originY = selectedElement.offsetTop; + mouseX = ev.clientX; + mouseY = ev.clientY; + } + }); } + +window.addEventListener("mousemove", (ev) => { + drawLine() + if (selectedElement == null) return; + if (selectedElement.classList.contains('AES50')) { + fromID = selectedElement.parentElement.id + fromAES50 = selectedElement.classList[1] + xoffset = fromAES50 == AES50.A ? 58 : 78; + document.getElementById("lines").innerHTML = ""; + links.forEach(link => { + document.getElementById("lines").innerHTML += link.show(); + }) + } + else if (selectedElement.classList.contains('device')) { + var Sx = ev.clientX - mouseX + originX, + Sy = ev.clientY - mouseY + originY; + if (Sx < 0) Sx = 0; + if (Sy < 0) Sy = 0; + selectedElement.style.top = Math.round(Sy / 10) * 10 + "px"; + selectedElement.style.left = Math.round(Sx / 10) * 10 + "px"; + devices[selectedElement.id].move(parseInt(selectedElement.style.left, 10), parseInt(selectedElement.style.top, 10)); + drawLine() + } +}); + +window.addEventListener("mouseup", (ev) => { + if (selectedElement.classList.contains('AES50')) { + target = selectTopDiv(ev.target) + toID = target.parentElement.id + if (fromID != toID) + { + links.push(new Link(devices[fromID].id, selectedElement.classList[1], devices[toID].id, target.classList[1])) + } + drawLine(); + } + else if (selectedElement.classList.contains('device')) { + devices[selectedElement.id].move(parseInt(selectedElement.style.left, 10), parseInt(selectedElement.style.top, 10)); + drawLine() + } + selectedElement = null; // Unselect element +}); function enableDoubleClick(ele) { ele.ondblclick = function (ev) { @@ -119,13 +228,15 @@ function enableRightClick(ele) { ipcRenderer.on('menu', (event, arg) => { devices.push(new Device(10, 10, arg, devices.length, arg)); + // if (devices.length == 2) links.push(new Link(devices[0], AES50.A, devices[1], AES50.A)); + // if (devices.length == 3) links.push(new Link(devices[1], AES50.B, devices[2], AES50.A)); draw(); var ele = document.getElementsByClassName("device"); for (var i = 0; i < ele.length; i++) { - enableDragging(ele[i]); + enableClick(ele[i]); enableDoubleClick(ele[i]); enableRightClick(ele[i]); } -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/style.css b/style.css index aac76d4..64beda8 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,5 @@ -html, body { +html, +body { height: 100%; margin: 0; } @@ -7,10 +8,12 @@ html, body { min-width: 100%; min-height: 100%; } + .device { width: min-content; - display:inline-block; - position:absolute; + display: inline-block; + position: absolute; + padding-top: 5px; } .device:hover { @@ -25,9 +28,30 @@ html, body { background: transparent; } +.device .AES50 { + border: 1px solid black; + background: white; + height: 1em; + width: 1em; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: crosshair !important; +} + +.device .AES50:hover { + background: black; + color: white; +} + .x32c img { - width: 250px; + width: 260px; } + .sd16 img { width: 200px; } @@ -35,4 +59,18 @@ html, body { .detail { width: 100% !important; height: 100% !important; +} + +#canvas svg { + height: 100%; + width: 100%; +} + +.lines { + position: absolute; + z-index: -1; +} + +.line { + stroke-width: 3px; } \ No newline at end of file