var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement as e,html as t,css as i}from"lit";import{customElement as o,property as s}from"lit/decorators.js";import{Utilities as r}from"../utils";import{i18next as a,translate as n}from"@openremote/or-translate";import{newIds as d,project as h}from"./flow-editor";import{CopyMachine as l}from"../node-structure";let NodeMenuItem=class extends n(a)(e){constructor(){super(),this.isDragging=!1,this.x=0,this.y=0,this.xOffset=0,this.yOffset=0,this.startDrag=e=>{this.xOffset=e.offsetX,this.yOffset=e.offsetY,this.x=e.clientX,this.y=e.clientY,this.isDragging=!0,window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onMove)},this.onMove=e=>{this.x=e.clientX,this.y=e.clientY},this.stopDrag=e=>{if(window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onMove),this.isDragging=!1,r.isPointInsideBox(e.offsetX,e.offsetY,{x:this.workspace.clientRect.left,y:this.workspace.clientRect.top,width:this.workspace.clientRect.width,height:this.workspace.clientRect.height})){let t=l.copy(this.node);d.add(t.id),t.position=this.workspace.offsetToWorld({x:e.offsetX-this.workspace.clientRect.left,y:e.offsetY-this.workspace.clientRect.top}),h.createUndoSnapshot(),h.addNode(t),h.notifyChange()}},this.addEventListener("mousedown",this.startDrag)}static get styles(){return i`
        :host, .node-drag-item{
            padding: 4px;
            margin: 0 0 15px 0;
            display: inline-block;
            text-align: center;
            color: white;
            border-radius: var(--roundness);
            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;

            width: calc(var(--nodepanel-width) - 4px * 2);
            height: 22px;
            line-height: 22px;
            cursor:grab;
            transition: box-shadow 150ms;
        }
        :host(.small), .small{
            width: 26px;
            height: 26px;
            line-height: 26px;
            margin: 0;
        }
        .node-drag-item{
            z-index: 5000;
            position: fixed;
            background: inherit;
            box-shadow: rgba(0, 0, 0, 0.2) 0 2px 15px;
            filter: opacity(90%);
            pointer-events: none;
        }
        `}render(){switch(this.node.type){case"INPUT":this.classList.add("input-node");break;case"PROCESSOR":this.classList.add("processor-node");break;case"OUTPUT":this.classList.add("output-node")}return this.node.displayCharacter&&this.classList.add("small"),this.title=a.t(this.node.name,r.humanLike(this.node.name.toLowerCase())),t`
        <div class="label">${this.flowNodeName}</div>
        ${this.isDragging?this.dragNodeTemplate:null}
        `}get dragNodeTemplate(){return t`<div class="node-drag-item ${this.node.displayCharacter?"small":null}" style="top: ${this.y-this.yOffset}px; left: ${this.x-this.xOffset}px"><div class="label">${this.flowNodeName}</div></div>`}get flowNodeName(){return a.t(this.node.displayCharacter?"flow."+this.node.displayCharacter:"flow."+this.node.name,this.node.displayCharacter||this.node.name||"invalid node name")}};__decorate([s({attribute:!1})],NodeMenuItem.prototype,"node",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"isDragging",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"x",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"y",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"workspace",void 0),NodeMenuItem=__decorate([o("node-menu-item")],NodeMenuItem);export{NodeMenuItem};