Add read-only mode and connection labels.

2026-06-23 06:56:23 +02:00
parent ab325afaa0
commit 88fa815bf5
4 changed files with 28 additions and 5 deletions
@@ -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);
  }