deferred connection rendering

.eslintrc

@@ -20,6 +20,7 @@
   },
   "env": {
     "es6": true,
-    "mocha": true
+    "mocha": true,
+    "browser": true
   }
-}
+}

src/view/connection.ts

@@ -20,25 +20,31 @@ export class ConnectionView extends Emitter<EventsTypes> {
         this.el.style.position = 'absolute';
         this.el.style.zIndex = '-1';
 
-        this.trigger('renderconnection', { 
-            el: this.el, 
-            connection: this.connection, 
+        this.trigger('renderconnection', {
+            el: this.el,
+            connection: this.connection,
             points: this.getPoints()
         });
     }
 
     getPoints() {
-        const [x1, y1] = this.outputNode.getSocketPosition(this.connection.output);
-        const [x2, y2] = this.inputNode.getSocketPosition(this.connection.input);
+        const { input, output } = this.connection
 
-        return [x1, y1, x2, y2];
+        if (this.inputNode.hasSocket(input) && this.outputNode.hasSocket(output)) {
+            const [x1, y1] = this.outputNode.getSocketPosition(output);
+            const [x2, y2] = this.inputNode.getSocketPosition(input);
+
+            return [x1, y1, x2, y2];
+        }
+
+        return [0, 0, 0, 0]
     }
 
     update() {
-        this.trigger('updateconnection', { 
-            el: this.el, 
-            connection: this.connection, 
+        this.trigger('updateconnection', {
+            el: this.el,
+            connection: this.connection,
             points: this.getPoints()
         });
     }
-}
+}

src/view/index.ts

@@ -16,6 +16,7 @@ export class EditorView extends Emitter<EventsTypes> {
     connections = new Map<Connection, ConnectionView>();
     area: Area;
 
+    // eslint-disable-next-line max-statements
     constructor(container: HTMLElement, components: Map<string, Component>, emitter: Emitter<EventsTypes>) {
         super(emitter);
 
@@ -28,9 +29,19 @@ export class EditorView extends Emitter<EventsTypes> {
         this.container.addEventListener('contextmenu', e => this.trigger('contextmenu', { e, view: this }));
         emitter.on('destroy', listenWindow('resize', this.resize.bind(this)));
         emitter.on('destroy', () => this.nodes.forEach(view => view.destroy()));
-  
+
         this.on('nodetranslated', this.updateConnections.bind(this));
-
+        this.on('rendersocket', ({ socket }) => {
+            const connections = Array.from(this.connections.entries())
+            const relatedConnections = connections.filter(([connection]) => {
+                const { input, output } = connection
+
+                return [input.socket, output.socket].includes(socket)
+            })
+
+            relatedConnections.forEach(([_, view]) => requestAnimationFrame(() => view.update()))
+        })
+
         this.area = new Area(container, this);
         this.container.appendChild(this.area.el);
     }
@@ -39,7 +50,7 @@ export class EditorView extends Emitter<EventsTypes> {
         const component = this.components.get(node.name);
 
         if (!component) throw new Error(`Component ${node.name} not found`);
-        
+
         const nodeView = new NodeView(node, component, this);
 
         this.nodes.set(node, nodeView);
@@ -105,7 +116,7 @@ export class EditorView extends Emitter<EventsTypes> {
 
     click(e: Event) {
         const container = this.container;
-        
+
         if (container !== e.target) return;
         if (!this.trigger('click', { e, container })) return;
     }

src/view/node.ts

@@ -35,9 +35,9 @@ export class NodeView extends Emitter<EventsTypes> {
         });
 
         this.trigger('rendernode', {
-            el: this.el, 
-            node, 
-            component: component.data, 
+            el: this.el,
+            node,
+            component: component.data,
             bindSocket: this.bindSocket.bind(this),
             bindControl: this.bindControl.bind(this)
         });
@@ -47,7 +47,7 @@ export class NodeView extends Emitter<EventsTypes> {
 
     clearSockets() {
         const ios: IO[] = [ ...this.node.inputs.values(), ...this.node.outputs.values()];
-        
+
         this.sockets.forEach(s => {
             if (!ios.includes(s.io)) this.sockets.delete(s.io);
         });
@@ -62,6 +62,10 @@ export class NodeView extends Emitter<EventsTypes> {
         this.controls.set(control, new ControlView(el, control, this));
     }
 
+    hasSocket(io: IO) {
+        return this.sockets.has(io)
+    }
+
     getSocketPosition(io: IO) {
         const socket = this.sockets.get(io);
 
@@ -72,7 +76,7 @@ export class NodeView extends Emitter<EventsTypes> {
 
     onSelect(e: MouseEvent) {
         const payload = { node: this.node, accumulate: e.ctrlKey, e };
-    
+
         this.onStart();
         this.trigger('multiselectnode', payload);
         this.trigger('selectnode', payload);
@@ -116,7 +120,7 @@ export class NodeView extends Emitter<EventsTypes> {
     }
 
     remove() {
-        
+
     }
 
     destroy() {