var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a},__awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))(function(i,s){function a(e){try{n(r.next(e))}catch(e){s(e)}}function p(e){try{n(r.throw(e))}catch(e){s(e)}}function n(e){var t;e.done?i(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(a,p)}n((r=r.apply(e,t||[])).next())})};import{LitElement as e,html as t,css as o}from"lit";import{customElement as r,property as i,query as s}from"lit/decorators.js";import{Integration as a}from"../services/integration";import{CopyPasteManager as p}from"../services/copy-paste-manager";import{Project as n}from"../services/project";import{Input as l}from"../services/input";import{ModalService as c}from"../services/modal";import{Exporter as d}from"../services/exporter";import{Shortcuts as h}from"../services/shortcuts";import{OrRulesRuleChangedEvent as u}from"../..";import{translate as w,i18next as m}from"@openremote/or-translate";import{NodeUtilities as f}from"../node-structure";export const integration=new a;export const copyPasteManager=new p;export const project=new n;export const input=new l;export const modal=new c;export const exporter=new d;export const shortcuts=new h;export const newIds=new Set;let FlowEditor=class extends w(m)(e){constructor(){super(),this.showTopbar=!1}validate(){return f.validate(exporter.jsonToFlow(this._ruleset.rules||"{}"))}beforeSave(){this.readonly||this.serialiseRule()}set ruleset(e){if(this._ruleset!==e)if(this._ruleset=e,e.rules){let t=exporter.jsonToFlow(e.rules);project.fromNodeCollection(t),project.setCurrentProject(e.id,e.name,t.description)}else project.clear(!0)}static get styles(){return[o`
            :host{
                user-select: none;
                display: grid;
                grid-template-columns: 1fr auto;
                grid-template-rows: 100%;
                grid-template-areas: 
                "workspace node-panel";

                width: 100%;
                height: 100%;
                
                --or-app-color4: rgb(76,76,76);

                --socket-size: 24px;
                --socket-display-size: 14px;
                
                --topbar-height: 50px;
                --nodepanel-width: 195px;
                --roundness: 3px;
                
                --highlight-faded: hsla(102, 100%, 31%, 0.2);
                --highlight: hsla(102, 100%, 31%, 0.5);
                --highlight-opaque: hsla(102, 100%, 31%);
                
                --any: rgb(162, 0, 255);
                --number: rgb(165, 228, 50);
                --boolean: rgb(0, 102, 255);
                --string: rgb(45, 180, 221);
                --color: rgb(255, 228, 78);
                
                --input-color: hsl(222, 60%, 46%);
                --processor-color: hsl(102, 58%, 39%);
                --output-color: hsl(282, 60%, 47%);
                
                --input-color-h: hsl(222, 58%, 54%);
                --processor-color-h: hsl(102, 48%, 49%);
                --output-color-h: hsl(282, 58%, 54%);
                
                overflow: hidden;
            }`]}firstUpdated(){return __awaiter(this,void 0,void 0,function*(){yield integration.refreshNodes(),this.requestUpdate(),yield this.updateComplete,project.emit("fitview"),project.addListener("changed",()=>{this.serialiseRule(),this.dispatchEvent(new u(this.validate()))})})}render(){return this.showTopbar&&(this.style.gridTemplateRows="var(--topbar-height) 1fr",this.style.gridTemplateAreas='"topbar topbar" "workspace node-panel";'),t`
        ${this.showTopbar?t`<top-bar .application="${this}" style="grid-area: topbar"></top-bar>`:""}
        <node-panel .application="${this}" style="grid-area: node-panel; overflow:auto;" .nodes= "${integration.nodes}"></node-panel>
        <editor-workspace .application="${this}" id="workspace" style="grid-area: workspace"></editor-workspace>
        <context-menu></context-menu>
        <popup-modal id="popup-modal"></popup-modal>
        `}serialiseRule(){this._ruleset.rules=exporter.flowToJson(project.toNodeCollection(this._ruleset.name,project.existingFlowRuleDesc))}};__decorate([s("node-panel")],FlowEditor.prototype,"nodePanel",void 0),__decorate([s("top-bar")],FlowEditor.prototype,"topBar",void 0),__decorate([s("editor-workspace")],FlowEditor.prototype,"editorWorkspace",void 0),__decorate([i({type:Boolean})],FlowEditor.prototype,"showTopbar",void 0),__decorate([i({attribute:!1})],FlowEditor.prototype,"readonly",void 0),__decorate([i({attribute:!1})],FlowEditor.prototype,"_ruleset",void 0),FlowEditor=__decorate([r("flow-editor")],FlowEditor);export{FlowEditor};