109 lines
2.5 KiB
JavaScript
109 lines
2.5 KiB
JavaScript
/**
|
|
@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); |