Fixes and improvements

tp-flow-nodes.js

@@ -8,6 +8,7 @@ import { LitElement, html, css } from 'lit';
 import { connections, connectionStyles } from './connections.js';
 import { panning } from './panning.js';
 import { zoom } from './zoom.js';
+import { repeat } from 'lit/directives/repeat.js';
 
 export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   static nodeTypes = new Map();
@@ -36,10 +37,11 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
     ];
   }
 
+  // Using the repeat directive to render the nodes is important here to prevent the nodes from running into a inconsistent data state when nodes are removed.
   render() {
     return html`
       <div class="canvas">
-        ${this.nodes.map(node => html`${node}`)}
+        ${repeat(this.nodes, node => node.id, node => html`${node}`)}
         ${this._renderConnections()}
       </div>
     `;
@@ -61,6 +63,9 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('node-delete-requested', this._boundDeleteHandler);
+    this.addEventListener('update-layout', () => {
+      this.requestUpdate();
+    })
   }
 
   disconnectedCallback() {