refactor: split node i/o into separate components

Author: danferns

src/svelte/editor/NodeInputs.svelte

@@ -0,0 +1,43 @@
+<!--
+
+    Copyright (C) 2024 Daniel Fernandes
+
+    This file is part of MIDI-FX.
+
+    MIDI-FX is free software: you can redistribute it and/or modify it
+    under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    MIDI-FX is distributed in the hope that it will be useful, but
+    WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with MIDI-FX. If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<script lang="ts">
+    import Port, { PortType } from "./Port.svelte";
+
+    export let id: string;
+    export let inputs: string[] = [];
+    export let handles = {};
+</script>
+
+<div class="node-inputs">
+    {#each inputs as name}
+        <Port type={PortType.Input} {name} {id} bind:handle={handles[name]}/>
+    {/each}
+</div>
+
+<style>
+    .node-inputs {
+        width: 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+</style>

src/svelte/editor/NodeOutputs.svelte

@@ -0,0 +1,43 @@
+<!--
+
+    Copyright (C) 2024 Daniel Fernandes
+
+    This file is part of MIDI-FX.
+
+    MIDI-FX is free software: you can redistribute it and/or modify it
+    under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    MIDI-FX is distributed in the hope that it will be useful, but
+    WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with MIDI-FX. If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<script lang="ts">
+    import Port, { PortType } from "./Port.svelte";
+
+    export let id: string;
+    export let inputs: string[] = [];
+    export let handles = {};
+</script>
+
+<div class="node-outputs">
+    {#each inputs as name}
+        <Port type={PortType.Output} {name} {id} bind:handle={handles[name]}/>
+    {/each}
+</div>
+
+<style>
+    .node-outputs {
+        width: 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+</style>

src/svelte/editor/NodeWrapper.svelte

@@ -57,6 +57,8 @@
     import ContextMenu from "./ContextMenu.svelte";
     import { showInfo } from "./InfoModal.svelte";
     import interact from "interactjs";
+    import NodeInputsUI from "./NodeInputs.svelte";
+    import NodeOutputsUI from "./NodeOutputs.svelte";
 
     export let id: string;
     export let type: string;
@@ -108,6 +110,7 @@
 
     function updateIOCoords(elements: IOElements, io: { [key: string]: LiveIO }) {
         for (const [name, elm] of Object.entries(elements)) {
+            console.log(name)
             const displayCoords = getCenterCoords(elm);
             const { x, y } = displayToEditorCoords(displayCoords);
             io[name].x = x;
@@ -145,66 +148,6 @@
         updateCoords();
     });
 
-    function onOutputPointerdown(e: PointerEvent, name: string) {
-        if (e.pointerType !== "mouse" || e.buttons === 1) {
-            e.stopPropagation();
-
-            pseudoConnection.update((val) => {
-                val.from = [id, name];
-                return val;
-            });
-        }
-    }
-
-    function onInputPointerup(e: Event, name: string) {
-        pseudoConnection.update((val) => {
-            if (val.from) {
-                createConnection(val.from[0], val.from[1], [id, name]);
-                val.from = undefined;
-            }
-            return val;
-        });
-    }
-
-    function onInputPointerdown(e: PointerEvent, name: string) {
-        if (e.pointerType !== "mouse" || e.buttons === 1) {
-            e.stopPropagation();
-
-            function onInputPointerleave(e: PointerEvent) {
-                if (e.pointerType !== "mouse" || e.buttons === 1) {
-                    e.stopPropagation();
-                    let outputNode, outputName;
-                    instances.update((val: LiveInstances) => {
-                        for (const node of Object.entries(val)) {
-                            for (const output of Object.entries(node[1].outputs)) {
-                                for (const connection of output[1].connections) {
-                                    if (connection[0] === id && connection[1] === name) {
-                                        outputNode = node[0];
-                                        outputName = output[0];
-                                    }
-                                }
-                            }
-                        }
-                        return val;
-                    });
-                    if (outputNode) {
-                        destroyConnection(outputNode, outputName, [id, name]);
-                        pseudoConnection.update((val) => {
-                            val.from = [outputNode, outputName];
-                            return val;
-                        });
-                    }
-                }
-            }
-
-            e.target.addEventListener("pointerleave", onInputPointerleave);
-
-            window.addEventListener("pointerup", () => {
-                e.target.removeEventListener("pointerleave", onInputPointerleave);
-            });
-        }
-    }
-
     let showContextMenu: boolean = false;
     let contextMenuCoords: Point;
 
@@ -250,20 +193,7 @@
     bind:this={node}
 >
     <div class="inputs">
-        {#each Object.entries(liveInputs) as [name]}
-            <div class="input">
-                <div
-                    class={name}
-                    bind:this={inputElements[name]}
-                    on:pointerup={(e) => {
-                        onInputPointerup(e, name);
-                    }}
-                    on:pointerdown|stopPropagation={(e) => onInputPointerdown(e, name)}
-                >
-                    <span>{name}</span>
-                </div>
-            </div>
-        {/each}
+        <NodeInputsUI {id} inputs={Object.keys(liveInputs)} bind:handles={inputElements}/>
     </div>
 
     <div class="body">
@@ -283,19 +213,7 @@
     </div>
 
     <div class="outputs">
-        {#each Object.entries(liveOutputs) as [name]}
-            <div class="output">
-                <div
-                    class={name}
-                    bind:this={outputElements[name]}
-                    on:pointerdown={(e) => {
-                        onOutputPointerdown(e, name);
-                    }}
-                >
-                    <span>{name}</span>
-                </div>
-            </div>
-        {/each}
+        <NodeOutputsUI {id} inputs={Object.keys(liveOutputs)} bind:handles={outputElements}/>
     </div>
 </div>
 
@@ -336,42 +254,4 @@
         padding: 4px 12px;
     }
 
-    /* text */
-
-    :is(div.output, div.input) {
-        writing-mode: vertical-lr;
-        color: black;
-        font-size: 12px;
-        margin: 4px 0px;
-        padding: 0px;
-        width: 24px;
-    }
-
-    /* socket */
-
-    :is(div.output, div.input) > div {
-        padding: 6px 4px;
-        background: white;
-    }
-
-    div.input > div {
-        border-radius: 6px 0 0 6px;
-    }
-
-    div.output > div {
-        border-radius: 0 6px 6px 0;
-    }
-
-    /* hover effect */
-
-    :is(div.input, div.output) > div:hover {
-        background: hsl(0 0% 10%) !important;
-        color: white;
-    }
-
-    /* special colors */
-
-    :is(div.output, div.input) > div.MIDI {
-        background: hsl(160 90% 60%);
-    }
 </style>