wire deleting

src/common/lang/arrays/helpers/removeElement.ts

@@ -0,0 +1,12 @@
+/**
+ * Removes element from array efficiently
+ * Based on a gist by the creator of rollup.
+ *
+ * @param arr The array to remove the element from
+ * @param element The element to remove
+ */
+export const removeElement = <T>(arr: T[], element: T) => {
+    const index = arr.indexOf(element)
+    arr[index] = arr[arr.length - 1]
+    return arr.pop()
+}

src/main.tsx

@@ -7,6 +7,7 @@ import { initKeyBindings } from './modules/keybindings/helpers/initialiseKeyBind
 import { initBaseTemplates } from './modules/saving/helpers/initBaseTemplates'
 import { loadSubject } from './modules/core/subjects/loadedSubject'
 import { take } from 'rxjs/operators'
+import { logWelcome } from './modules/core/helpers/logWelcome'
 
 export const start = async () => {
     console.clear()
@@ -16,6 +17,7 @@ export const start = async () => {
     handleErrors()
     initKeyBindings()
     initBaseTemplates()
+    logWelcome()
 
     render(<App />, document.getElementById('app'))
 

src/modules/core/helpers/logWelcome.ts

@@ -0,0 +1,23 @@
+/**
+ * In case the guys who look at my projet open the console -_-
+ */
+export const logWelcome = () => {
+    const commonStyles = 'padding: 3px'
+    const titleStyles = `font-size: 3em;`
+
+    // console.log('%c Hello!',` `${titleStyles})
+    console.log(
+        `%c Hello
+        %c I don't know if you see this, 
+        but if you do than you are probably wondering... 
+        Why did I include this? The answer is - I don't know. 
+        At first, it seemed like a good idea to include a welcome message in the console
+        (in case someone randomly openes it), but now i don't even know what i'm doing :) 
+        Anyways, I hope you are having a good time in my simulator!!!`
+            .split('\n')
+            .map(s => s.trim())
+            .join(' '),
+        `${titleStyles}`,
+        `${commonStyles}`
+    )
+}

src/modules/simulation/helpers/deleteWire.ts

@@ -0,0 +1,9 @@
+import { Simulation } from '../classes/Simulation'
+import { Wire } from '../classes/Wire'
+import { removeElement } from '../../../common/lang/arrays/helpers/removeElement'
+
+export const deleteWire = (simulation: Simulation, wire: Wire) => {
+    removeElement(simulation.wires, wire)
+
+    wire.dispose()
+}

src/modules/simulationRenderer/classes/SimulationRenderer.ts

@@ -28,6 +28,8 @@ import { updateMouse, handleScroll } from '../helpers/scaleCanvas'
 import { RefObject } from 'react'
 import { dumpSimulation } from '../../saving/helpers/dumpSimulation'
 import { modalIsOpen } from '../../modals/helpers/modalIsOpen'
+import { SimulationError } from '../../errors/classes/SimulationError'
+import { deleteWire } from '../../simulation/helpers/deleteWire'
 
 export class SimulationRenderer {
     public mouseDownOutput = new Subject<MouseEventInfo>()
@@ -113,6 +115,24 @@ export class SimulationRenderer {
                             this.options.gates.pinRadius
                         )
                     ) {
+                        if (pin.value.pairs.size) {
+                            if (pin.value.type & 1) {
+                                const wire = this.simulation.wires.find(
+                                    wire => wire.end.value === pin.value
+                                )
+
+                                if (wire) {
+                                    deleteWire(this.simulation, wire)
+                                } else {
+                                    throw new SimulationError(
+                                        `Cannot find wire to remove`
+                                    )
+                                }
+                            }
+
+                            return
+                        }
+
                         if (
                             this.selectedPins.start &&
                             pin.value === this.selectedPins.start.wrapper.value
@@ -130,21 +150,14 @@ export class SimulationRenderer {
                                 wrapper: pin,
                                 transform
                             }
-                        } else if (
-                            pin.value.type & 1 &&
-                            pin.value.pairs.size === 0
-                        ) {
+                        } else if (pin.value.type & 1) {
                             this.selectedPins.end = {
                                 wrapper: pin,
                                 transform
                             }
                         }
 
-                        if (
-                            this.selectedPins.start &&
-                            this.selectedPins.end &&
-                            this.selectedPins.end.wrapper.value.pairs.size === 0
-                        ) {
+                        if (this.selectedPins.start && this.selectedPins.end) {
                             this.simulation.wires.push(
                                 new Wire(
                                     this.selectedPins.start.wrapper,
@@ -158,7 +171,7 @@ export class SimulationRenderer {
                 }
             }
 
-            this.mouseState |= 2
+            this.mouseState |= 0b10
         })
 
         this.mouseUpOutput.subscribe(event => {

src/modules/splash/classes/Splash.scss

@@ -26,6 +26,7 @@
 }
 
 .Splash > .error {
+    color: white;
     display: none;
 }
 
@@ -37,7 +38,7 @@
 .Splash > .error > .details {
     padding: 16px;
 
-    background-color: shade(darker);
+    background-color: $grey / 2;
 
     border-radius: 3px;
     margin-bottom: 16px;
@@ -46,11 +47,15 @@
 }
 
 .Splash > .error > .description {
-    color: font-color(normal);
+    color: white;
     margin-bottom: 16px;
     font-size: 14px;
 }
 
+.Splash > .error > .details > a {
+    color: $primary !important;
+}
+
 .Splash.-hasError {
     > .error {
         display: block;
@@ -59,3 +64,7 @@
         display: none;
     }
 }
+
+.mail {
+    color: $primary * 2;
+}

src/modules/splash/classes/Splash.ts

@@ -4,6 +4,7 @@ import './Splash.scss'
 
 export class Splash {
     private element = querySelector<HTMLDivElement>('.Splash')
+    private email = 'rafaeladriel11@gmail.com'
 
     public fade() {
         this.element.style.transition = '0.3s'
@@ -33,6 +34,13 @@ export class Splash {
         <p>Your browser might not be supported, or your data might be corrupt.
         Press "Clear data" below to reset the simulator and try again.</br>
         </br></br>
+
+        If the problem persists, you can <a class="mail" href="mailto:${
+            this.email
+        }">contact the developer</a>
+
+        </br></br>
+
         We do not support the following browsers:</p>
         <ul>
           <li><span>Opera Mini</span></li>