var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,r=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{html as e,css as t}from"lit";import{customElement as o,property as n}from"lit/decorators.js";import{IdentityDomLink as i,IdentityAssigner as s,NodeUtilities as r}from"../node-structure";import{ResizeObserver as l}from"resize-observer";import{SelectableElement as d}from"./selectable-element";import{project as c}from"./flow-editor";let ConnectionLine=class extends d{constructor(){super(),this.fancyLine=!0,this.curveIntensity=1,this.nodeChanged=()=>{this.requestUpdate()},this.polylineId=s.generateIdentity()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),c.removeListener("connectionremoved",this.nodeChanged)}firstUpdated(){super.firstUpdated();let e=this.shadowRoot.getElementById(this.polylineId);e&&this.setHandle(e)}render(){if(this.isInvalid){let t=r.getSocketFromID(this.connection.from,c.nodes),o=r.getSocketFromID(this.connection.to,c.nodes);if(this.fromNodeElement=i.map[t.nodeId],this.toNodeElement=i.map[o.nodeId],this.fromElement=i.map[t.id],this.toElement=i.map[o.id],this.isInvalid)return console.warn(this.fromNodeElement),console.warn(this.toNodeElement),console.warn(this.fromElement),console.warn(this.toElement),console.warn("Attempt to render invalid connection"),e``;this.fromNodeElement.addEventListener("updated",this.nodeChanged),this.toNodeElement.addEventListener("updated",this.nodeChanged),this.resizeObserver=new l(this.nodeChanged),this.resizeObserver.observe(this.fromNodeElement),this.resizeObserver.observe(this.toNodeElement)}let t=this.workspace.clientRect,o=this.fromElement.connectionPosition,n=this.toElement.connectionPosition;if(this.fancyLine){let i=o.x-t.left,s=o.y-t.top,r=n.x-t.left,l=n.y-t.top,d=this.curveIntensity*(Math.abs(i-r)/2);return e`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;">
                <path id="${this.polylineId}" 
                d="M ${i} ${s} C ${i+d} ${s}, ${r-d} ${l}, ${r} ${l}"
                selected="${this.selected}"
                />
            </svg>`}return e`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;"><polyline id="${this.polylineId}"
        selected="${this.selected}"
        points="
        ${o.x-t.left}, ${o.y-t.top} 
        ${n.x-t.left}, ${n.y-t.top}"
        ></polyline>
        </svg>`}static get styles(){return t`
            svg{
                fill: none;  
                overflow: visible;
                position: absolute;
                pointer-events: none;
                stroke-linejoin: round;
            }
            path, line{
                position: absolute;
                pointer-events: all;
            }
            path:hover, line:hover, path[selected = true], line[selected = true]{
                stroke: var(--highlight);
            }
            text{
                fill: red;
                stroke: none;
            }`}get isInvalid(){return!this.fromNodeElement||!this.toNodeElement||!this.fromElement||!this.toElement}};__decorate([n({attribute:!1})],ConnectionLine.prototype,"connection",void 0),__decorate([n({attribute:!1})],ConnectionLine.prototype,"workspace",void 0),__decorate([n({type:String})],ConnectionLine.prototype,"polylineId",void 0),ConnectionLine=__decorate([o("connection-line")],ConnectionLine);export{ConnectionLine};