Add read-only mode and connection labels.

connections.js

@@ -283,6 +283,9 @@ export const connections = function(superClass) {
       const path = `M${start.x},${start.y} C${controlPoint1.x},${controlPoint1.y} ${controlPoint2.x},${controlPoint2.y} ${end.x},${end.y}`;
       const isSelected = this.selectedConnection === conn.id;
 
+      // Get label position at midpoint of curve
+      const labelPoint = getPointOnCurve(0.5);
+
       return svg`
         <g>
           <path 
@@ -294,6 +297,16 @@ export const connections = function(superClass) {
             class="${isSelected ? 'selected' : ''}"
             @click="${() => this._handleConnectionClick(conn.id)}"
           />
+          ${conn.label ? svg`
+            <text
+              x="${labelPoint.x}"
+              y="${labelPoint.y - 8}"
+              text-anchor="middle"
+              fill="var(--connection-label-color, #ccc)"
+              font-size="var(--connection-label-font-size, 12)"
+              pointer-events="none"
+            >${conn.label}</text>
+          ` : ''}
           ${isSelected ? svg`
             <g>
               <!-- Source delete button -->
@@ -329,6 +342,8 @@ export const connections = function(superClass) {
     }
 
     _handleConnectionClick(connectionId) {
+      if (this.readonly) return;
+
       // Deselect if clicking the same connection
       if (this.selectedConnection === connectionId) {
         this.selectedConnection = null;
@@ -354,6 +369,8 @@ export const connections = function(superClass) {
     }
 
     _handlePortClick(e) {
+      if (this.readonly) return;
+
       const { node, port } = e.detail;
       const nodeId = node.id;
       const { portType, portId, portName } = port;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-flow-nodes",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "",
   "main": "tp-flow-nodes.js",
   "scripts": {

tp-flow-node.js

@@ -106,7 +106,7 @@ export class TpFlowNode extends LitElement {
     return html`
       <header drag-node>
         A Node
-        <div class="delete-btn" @click="${this._handleDelete}">✕</div>
+        ${!this.readonly ? html`<div class="delete-btn" @click="${this._handleDelete}">✕</div>` : null}
       </header>
     `;
   }
@@ -122,7 +122,8 @@ export class TpFlowNode extends LitElement {
       outputs: { type: Array },
       x: { type: Number },
       y: { type: Number },
-      data: { type: Object }
+      data: { type: Object },
+      readonly: { type: Boolean, reflect: true }
     };
   }
 
@@ -133,6 +134,7 @@ export class TpFlowNode extends LitElement {
     this.x = 0;
     this.y = 0;
     this.data = {};
+    this.readonly = false;
   }
 
   updated(changes) {

tp-flow-nodes.js

@@ -41,7 +41,7 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   render() {
     return html`
       <div class="canvas">
-        ${repeat(this.nodes, node => node.id, node => html`${node}`)}
+        ${repeat(this.nodes, node => node.id, node => { node.readonly = this.readonly; return html`${node}`; })}
         ${this._renderConnections()}
       </div>
     `;
@@ -50,13 +50,15 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   static get properties() {
     return {
       nodes: { type: Array },
-      connections: { type: Array }
+      connections: { type: Array },
+      readonly: { type: Boolean, reflect: true }
     };
   }
 
   constructor() {
     super();
     this.nodes = [];
+    this.readonly = false;
     this._boundDeleteHandler = this._handleNodeDeleteRequested.bind(this);
   }
 
@@ -74,6 +76,8 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   }
 
   _handleNodeDeleteRequested(e) {
+    if (this.readonly) return;
+
     const { nodeId } = e.detail;
     this.removeNode(nodeId);
   }