Fixes and improvements

2025-02-25 19:07:21 +01:00
parent 6d77ff13c9
commit 083a25f302
6 changed files with 247 additions and 85 deletions
--- a/tp-flow-node-port.js
+++ b/tp-flow-node-port.js
@@ -0,0 +1,109 @@
+/**
+@license
+Copyright (c) 2025 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import '@tp/tp-timeout-strip/tp-timeout-strip.js';
+import { LitElement, html, css } from 'lit';
+
+class TpFlowNodePort extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          position: relative;
+        }
+
+        .connectionPoint {
+          width: 12px;
+          height: 12px;
+          background: #666;
+          border-radius: 50%;
+          cursor: pointer;
+        }
+
+        .connectionPoint:hover {
+          background: #888;
+        }
+
+        .tag {
+          position: absolute;
+          background: #888;
+          visibility: hidden;
+          pointer-events: none;
+        }
+
+        :host([portType="input"]) .tag {
+          left: 0;
+          top: 0;
+          transform: translateX(calc(-100% - 10px));
+        }
+
+        :host([portType="output"]) .tag {
+          right: 0;
+          top: 0;
+          transform: translateX(calc(100% + 10px));
+        }
+
+        :host(:hover) .tag,
+        .tag[visible] {
+          visibility: visible;
+          pointer-events: all;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { showTag, errorMsg, tagContent } = this;
+
+    return html`
+      <div class="connectionPoint" part="connection-point"></div>
+      
+      ${showTag || Boolean(tagContent) ? html`
+        <div class="tag" ?visible=${showTag} part="tag">
+          ${errorMsg ? html`
+            <div part="tag-error">
+              ${errorMsg}
+            </div>
+            ` : null}
+          ${tagContent ? html`
+            <div class="tag-content" part="tag-content">${tagContent}</div>
+          ` : null}
+          <tp-timeout-strip part="tag-timeout" @timeout=${this._onTimeout}></tp-timeout-strip>
+        </div>
+        ` : null}
+    `;
+  }
+
+  static get properties() {
+    return {
+      portType: { type: String, reflect: true },
+      portId: { type: Number, reflect: true },
+      portName: { type: String },
+      tagContent: { type: String },
+      errorMsg: { type: String },
+      showTag: { type: Boolean },
+    };
+  }
+
+  showConnectionError(msg, timeout = 0) {
+    this.errorMsg = msg;
+    this.showTag = true;
+
+    if (timeout > 0) {
+      this.updateComplete.then(() => {
+        this.shadowRoot.querySelector('tp-timeout-strip').show(timeout);
+      });
+    }
+  }
+
+  _onTimeout() {
+    this.showTag = false;
+    this.errorMsg = null;
+  }
+}
+
+window.customElements.define('tp-flow-node-port', TpFlowNodePort);