@openremote/or-rules 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120000

package/lib/flow-viewer/components/editor-workspace.js

@@ -1,20 +1,282 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s},__awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))(function(n,r){function s(t){try{c(i.next(t))}catch(t){r(t)}}function a(t){try{c(i.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):((e=t.value)instanceof o?e:new o(function(t){t(e)})).then(s,a)}c((i=i.apply(t,e||[])).next())})};import{LitElement as t,html as e}from"lit";import{customElement as o,property as i}from"lit/decorators.js";import{repeat as n}from"lit/directives/repeat.js";import{IdentityDomLink as r}from"../node-structure";import{List as s}from"linqts";import{EditorWorkspaceStyle as a}from"../styles/editor-workspace-style";import{i18next as c,translate as d}from"@openremote/or-translate";import{ContextMenu as h}from"./context-menu";import{project as m,input as p,copyPasteManager as l}from"./flow-editor";import{createContextMenuButtons as u}from"./workspace-contextmenu-options";import{InputType as v}from"@openremote/or-mwc-components/or-mwc-input";let EditorWorkspace=class extends d(c)(t){get clientRect(){return this.cachedClientRect}static get styles(){return a}get halfSize(){let t=this.cachedClientRect;return{x:t.width/2,y:t.height/2}}get isCameraInDefaultPosition(){return .05>Math.abs(this.camera.x)&&.05>Math.abs(this.camera.y)&&this.camera.zoom>.95&&this.camera.zoom<1.05}constructor(){super(),this.camera={x:0,y:0,zoom:1},this.topNodeZindex=1,this.scrollSensitivity=1.25,this.zoomLowerBound=.2,this.zoomUpperBound=10,this.connectionDragging=!1,this.connectionFrom={x:0,y:0},this.connectionTo={x:0,y:0},this.isPanning=!1,this.onMove=t=>{let e=window.devicePixelRatio;this.camera={x:this.camera.x+t.movementX/this.camera.zoom/e,y:this.camera.y+t.movementY/this.camera.zoom/e,zoom:this.camera.zoom},this.dispatchEvent(new CustomEvent("pan"))},this.onZoom=t=>{if(this.connectionDragging||this.isPanning)return;let e=.9*this.scrollSensitivity,o=t.deltaY<0?this.camera.zoom*e:this.camera.zoom/e;o<this.zoomLowerBound||o>this.zoomUpperBound||(this.camera={x:this.camera.x,y:this.camera.y,zoom:o},this.dispatchEvent(new CustomEvent("zoom")))},this.onEmptyConnectionRelease=t=>{m.isCurrentlyConnecting&&m.endConnectionDrag(t,null,!1)},this.stopPan=()=>{this.isPanning&&(window.removeEventListener("mousemove",this.onMove),this.isPanning=!1)},m.addListener("nodeadded",t=>{this.requestUpdate()}),m.addListener("noderemoved",t=>{this.requestUpdate()}),m.addListener("cleared",()=>{this.requestUpdate()}),m.addListener("connectionstart",(t,e)=>{if(1!==t.buttons)return;let o=r.map[e.id].connectionPosition;this.connectionFrom=this.pageToOffset(o),this.addEventListener("mousemove",m.connectionDragging),this.addEventListener("mouseup",this.onEmptyConnectionRelease)}),m.addListener("connecting",t=>{this.connectionTo={x:t.pageX-this.clientRect.left,y:t.pageY-this.clientRect.top},this.connectionDragging=!0}),m.addListener("connectionend",()=>{this.connectionDragging=!1,this.removeEventListener("mousemove",m.connectionDragging)}),m.addListener("fitview",()=>{this.fitCamera(m.nodes)}),window.addEventListener("resize",()=>{this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))}),this.addEventListener("mousedown",t=>{this.startPan(t),1===t.buttons&&p.clearSelection()}),this.addEventListener("contextmenu",t=>{let e=u(this,t);h.open(t.pageX,t.pageY,this,e),t.preventDefault()}),m.workspace=this,this.addEventListener("wheel",this.onZoom,{passive:!0})}resetCamera(){this.camera={x:0,y:0,zoom:1},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}fitCamera(t,e=25){let o=new s;if(o.AddRange(t),0==o.Count())return;let i=o.OrderBy(t=>t.position.x).First(),n=o.OrderBy(t=>t.position.y).First(),a=o.OrderByDescending(t=>t.position.x+r.map[t.id].scrollWidth).First(),c=o.OrderByDescending(t=>t.position.y+r.map[t.id].scrollHeight).First(),d=r.map[a.id].scrollWidth,h=r.map[c.id].scrollHeight,m={left:i.position.x-e,right:a.position.x+e+d,top:c.position.y+e+h,bottom:n.position.y-e},p=m.right-m.left,l=m.top-m.bottom,u=this.clientRect,v={x:(m.left+m.right)/2,y:(m.top+m.bottom)/2},g=Math.min(u.width/p,u.height/l);this.camera={x:-v.x,y:-v.y,zoom:Math.min(Math.max(this.zoomLowerBound,g),this.zoomUpperBound)},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}offsetToWorld(t){let e=this.halfSize;return{x:(t.x-e.x)/this.camera.zoom-this.camera.x,y:(t.y-e.y)/this.camera.zoom-this.camera.y}}worldToOffset(t){let e=this.halfSize;return{x:(t.x+this.camera.x)*this.camera.zoom+e.x,y:(t.y+this.camera.y)*this.camera.zoom+e.y}}pageToOffset(t){let e=this.clientRect;return{x:t.x-e.left,y:t.y-e.top}}pasteAt(t,e){return __awaiter(this,void 0,void 0,function*(){let o=l.getFromClipboard({x:t,y:e});o.nodes.forEach(t=>{m.addNode(t)}),yield this.updateComplete,o.connections.forEach(t=>{m.createConnection(t.from,t.to)})})}firstUpdated(){this.cachedClientRect=this.getBoundingClientRect(),this.application.nodePanel.drawer&&this.application.nodePanel.drawer.addEventListener("or-mwc-drawer-changed",t=>__awaiter(this,void 0,void 0,function*(){this.style.width=t.detail?"calc(100% - 255px)":"",yield this.updateComplete,this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))}))}render(){return e`
-        ${n(m.nodes,t=>t.id,t=>e`<flow-node .node="${t}" .workspace="${this}"></flow-node>`)}
-        <connection-container .workspace="${this}"></connection-container>
-        <svg>
-            <line style="display: 
-            ${this.connectionDragging?null:"none"}; 
-            stroke-dasharray: ${20*this.camera.zoom}, ${10*this.camera.zoom}; 
-            stroke-opacity: 0.25; stroke-width: ${4*this.camera.zoom}px" 
-
-            x1="${this.connectionFrom.x}" 
-            y1="${this.connectionFrom.y}" 
-            x2="${this.connectionTo.x}" 
-            y2="${this.connectionTo.y}"></line>
-        </svg>
-        <selection-box .workspace="${this}"></selection-box>
-        <div class="view-options" style="z-index: ${this.topNodeZindex+1}">
-            ${!this.isCameraInDefaultPosition?e`<or-mwc-input type="${v.BUTTON}" icon="vector-square" @or-mwc-input-changed="${this.resetCamera}" label="${c.t("resetView","Reset view")}"></or-mwc-input>`:null}
-            ${0!==m.nodes.length?e`<or-mwc-input type="button" icon="fit-to-page-outline" @or-mwc-input-changed="${()=>this.fitCamera(m.nodes)}" label="${c.t("fitView","Fit view")}"></or-mwc-input>`:null}
-        </div>
-        `}startPan(t){if(this.connectionDragging||4!==t.buttons)return!1;this.isPanning=!0,window.addEventListener("mousemove",this.onMove),window.addEventListener("mouseup",this.stopPan),t.preventDefault()}};__decorate([i({attribute:!1})],EditorWorkspace.prototype,"camera",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"topNodeZindex",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"scrollSensitivity",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"zoomLowerBound",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"zoomUpperBound",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"application",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionDragging",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionFrom",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionTo",void 0),EditorWorkspace=__decorate([o("editor-workspace")],EditorWorkspace);export{EditorWorkspace};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { IdentityDomLink } from "../node-structure";
+import { List } from "linqts";
+import { EditorWorkspaceStyle } from "../styles/editor-workspace-style";
+import { i18next, translate } from "@openremote/or-translate";
+import { ContextMenu } from "./context-menu";
+import { project, input, copyPasteManager } from "./flow-editor";
+import { createContextMenuButtons } from "./workspace-contextmenu-options";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+let EditorWorkspace = class EditorWorkspace extends translate(i18next)(LitElement) {
+    get clientRect() {
+        return this.cachedClientRect;
+    }
+    static get styles() {
+        return EditorWorkspaceStyle;
+    }
+    get halfSize() {
+        const box = this.cachedClientRect;
+        return { x: box.width / 2, y: box.height / 2 };
+    }
+    get isCameraInDefaultPosition() {
+        const errorMargin = 0.05;
+        return (Math.abs(this.camera.x) < errorMargin && Math.abs(this.camera.y) < errorMargin && this.camera.zoom > (1 - errorMargin) && this.camera.zoom < (1 + errorMargin));
+    }
+    constructor() {
+        super();
+        this.camera = { x: 0, y: 0, zoom: 1 };
+        this.topNodeZindex = 1;
+        this.scrollSensitivity = 1.25;
+        this.zoomLowerBound = .2;
+        this.zoomUpperBound = 10;
+        this.connectionDragging = false;
+        this.connectionFrom = { x: 0, y: 0 };
+        this.connectionTo = { x: 0, y: 0 };
+        this.isPanning = false;
+        this.onMove = (event) => {
+            const documentZoom = window.devicePixelRatio;
+            this.camera = {
+                x: this.camera.x + event.movementX / this.camera.zoom / documentZoom,
+                y: this.camera.y + event.movementY / this.camera.zoom / documentZoom,
+                zoom: this.camera.zoom
+            };
+            this.dispatchEvent(new CustomEvent("pan"));
+        };
+        this.onZoom = (event) => {
+            if (this.connectionDragging) {
+                return;
+            }
+            if (this.isPanning) {
+                return;
+            }
+            const magnification = 0.9 * this.scrollSensitivity;
+            const rz = event.deltaY < 0 ? this.camera.zoom * magnification : this.camera.zoom / magnification;
+            if (rz < this.zoomLowerBound || rz > this.zoomUpperBound) {
+                return;
+            }
+            this.camera = {
+                x: this.camera.x,
+                y: this.camera.y,
+                zoom: rz
+            };
+            this.dispatchEvent(new CustomEvent("zoom"));
+        };
+        this.onEmptyConnectionRelease = (ee) => {
+            if (project.isCurrentlyConnecting) {
+                project.endConnectionDrag(ee, null, false);
+            }
+        };
+        this.stopPan = () => {
+            if (!this.isPanning) {
+                return;
+            }
+            window.removeEventListener("mousemove", this.onMove);
+            this.isPanning = false;
+        };
+        project.addListener("nodeadded", (n) => { this.requestUpdate(); });
+        project.addListener("noderemoved", (n) => { this.requestUpdate(); });
+        project.addListener("cleared", () => { this.requestUpdate(); });
+        project.addListener("connectionstart", (e, s) => {
+            if (e.buttons !== 1) {
+                return;
+            }
+            const pos = IdentityDomLink.map[s.id].connectionPosition;
+            this.connectionFrom = this.pageToOffset(pos);
+            this.addEventListener("mousemove", project.connectionDragging);
+            this.addEventListener("mouseup", this.onEmptyConnectionRelease);
+        });
+        project.addListener("connecting", (e) => {
+            this.connectionTo = { x: e.pageX - this.clientRect.left, y: e.pageY - this.clientRect.top };
+            this.connectionDragging = true;
+        });
+        project.addListener("connectionend", () => {
+            this.connectionDragging = false;
+            this.removeEventListener("mousemove", project.connectionDragging);
+        });
+        project.addListener("fitview", () => {
+            this.fitCamera(project.nodes);
+        });
+        window.addEventListener("resize", () => {
+            this.cachedClientRect = this.getBoundingClientRect();
+            this.dispatchEvent(new CustomEvent("pan"));
+        });
+        this.addEventListener("mousedown", (e) => {
+            this.startPan(e);
+            if (e.buttons === 1) {
+                input.clearSelection();
+            }
+        });
+        this.addEventListener("contextmenu", (e) => {
+            const buttons = createContextMenuButtons(this, e);
+            ContextMenu.open(e.pageX, e.pageY, this, buttons);
+            e.preventDefault();
+        });
+        project.workspace = this;
+        this.addEventListener("wheel", this.onZoom, { passive: true });
+    }
+    resetCamera() {
+        this.camera = { x: 0, y: 0, zoom: 1 };
+        this.dispatchEvent(new CustomEvent("pan"));
+        this.dispatchEvent(new CustomEvent("zoom"));
+    }
+    fitCamera(nodes, padding = 25) {
+        const enumerable = new List();
+        enumerable.AddRange(nodes);
+        if (enumerable.Count() == 0)
+            return;
+        const XouterleastNode = enumerable.OrderBy((a) => a.position.x).First();
+        const YouterleastNode = enumerable.OrderBy((a) => a.position.y).First();
+        const XoutermostNode = enumerable.OrderByDescending((a) => a.position.x + IdentityDomLink.map[a.id].scrollWidth).First();
+        const YoutermostNode = enumerable.OrderByDescending((a) => a.position.y + IdentityDomLink.map[a.id].scrollHeight).First();
+        const XoutermostWidth = IdentityDomLink.map[XoutermostNode.id].scrollWidth;
+        const YoutermostHeight = IdentityDomLink.map[YoutermostNode.id].scrollHeight;
+        const fitBounds = {
+            left: XouterleastNode.position.x - padding,
+            right: XoutermostNode.position.x + padding + XoutermostWidth,
+            top: YoutermostNode.position.y + padding + YoutermostHeight,
+            bottom: YouterleastNode.position.y - padding,
+        };
+        const fitWidth = fitBounds.right - fitBounds.left;
+        const fitHeight = fitBounds.top - fitBounds.bottom;
+        const totalBounds = this.clientRect;
+        const center = {
+            x: (fitBounds.left + fitBounds.right) / 2.0,
+            y: (fitBounds.top + fitBounds.bottom) / 2.0
+        };
+        const targetZoom = Math.min(totalBounds.width / fitWidth, totalBounds.height / fitHeight);
+        this.camera = {
+            x: -center.x,
+            y: -center.y,
+            zoom: Math.min(Math.max(this.zoomLowerBound, targetZoom), this.zoomUpperBound)
+        };
+        this.dispatchEvent(new CustomEvent("pan"));
+        this.dispatchEvent(new CustomEvent("zoom"));
+    }
+    offsetToWorld(point) {
+        const halfSize = this.halfSize;
+        return {
+            x: (point.x - halfSize.x) / this.camera.zoom - this.camera.x,
+            y: (point.y - halfSize.y) / this.camera.zoom - this.camera.y
+        };
+    }
+    worldToOffset(point) {
+        const halfSize = this.halfSize;
+        return {
+            x: (point.x + this.camera.x) * this.camera.zoom + halfSize.x,
+            y: (point.y + this.camera.y) * this.camera.zoom + halfSize.y
+        };
+    }
+    pageToOffset(point) {
+        const box = this.clientRect;
+        return {
+            x: point.x - box.left,
+            y: point.y - box.top
+        };
+    }
+    pasteAt(x, y) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const clone = copyPasteManager.getFromClipboard({ x, y });
+            clone.nodes.forEach((n) => {
+                project.addNode(n);
+            });
+            yield this.updateComplete;
+            clone.connections.forEach((c) => {
+                project.createConnection(c.from, c.to);
+            });
+        });
+    }
+    firstUpdated() {
+        this.cachedClientRect = this.getBoundingClientRect();
+        if (this.application.nodePanel.drawer) {
+            this.application.nodePanel.drawer.addEventListener("or-mwc-drawer-changed", (e) => __awaiter(this, void 0, void 0, function* () {
+                this.style.width = e.detail ? "calc(100% - 255px)" : "";
+                yield this.updateComplete;
+                this.cachedClientRect = this.getBoundingClientRect();
+                this.dispatchEvent(new CustomEvent("pan"));
+            }));
+        }
+    }
+    render() {
+        return html `
+        ${repeat(project.nodes, (i) => i.id, (n) => html `<flow-node .node="${n}" .workspace="${this}"></flow-node>`)}
+        <connection-container .workspace="${this}"></connection-container>
+        <svg>
+            <line style="display: 
+            ${this.connectionDragging ? null : `none`}; 
+            stroke-dasharray: ${20 * this.camera.zoom}, ${10 * this.camera.zoom}; 
+            stroke-opacity: 0.25; stroke-width: ${this.camera.zoom * 4}px" 
+
+            x1="${this.connectionFrom.x}" 
+            y1="${this.connectionFrom.y}" 
+            x2="${this.connectionTo.x}" 
+            y2="${this.connectionTo.y}"></line>
+        </svg>
+        <selection-box .workspace="${this}"></selection-box>
+        <div class="view-options" style="z-index: ${this.topNodeZindex + 1}">
+            ${!this.isCameraInDefaultPosition ? html `<or-mwc-input type="${InputType.BUTTON}" icon="vector-square" @or-mwc-input-changed="${this.resetCamera}" label="${i18next.t("resetView", "Reset view")}"></or-mwc-input>` : null}
+            ${project.nodes.length !== 0 ? html `<or-mwc-input type="button" icon="fit-to-page-outline" @or-mwc-input-changed="${() => this.fitCamera(project.nodes)}" label="${i18next.t("fitView", "Fit view")}"></or-mwc-input>` : null}
+        </div>
+        `;
+    }
+    startPan(event) {
+        if (this.connectionDragging) {
+            return false;
+        }
+        if (event.buttons !== 4) {
+            return false;
+        }
+        this.isPanning = true;
+        window.addEventListener("mousemove", this.onMove);
+        window.addEventListener("mouseup", this.stopPan);
+        event.preventDefault();
+    }
+};
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "camera", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "topNodeZindex", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "scrollSensitivity", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "zoomLowerBound", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "zoomUpperBound", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "application", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "connectionDragging", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "connectionFrom", void 0);
+__decorate([
+    property({ attribute: false })
+], EditorWorkspace.prototype, "connectionTo", void 0);
+EditorWorkspace = __decorate([
+    customElement("editor-workspace")
+], EditorWorkspace);
+export { EditorWorkspace };
+//# sourceMappingURL=editor-workspace.js.map

package/lib/flow-viewer/components/flow-editor.js

@@ -1,47 +1,160 @@
-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};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { Integration } from "../services/integration";
+import { CopyPasteManager } from "../services/copy-paste-manager";
+import { Project } from "../services/project";
+import { Input } from "../services/input";
+import { ModalService } from "../services/modal";
+import { Exporter } from "../services/exporter";
+import { Shortcuts } from "../services/shortcuts";
+import { OrRulesRuleChangedEvent } from "../..";
+import { translate, i18next } from "@openremote/or-translate";
+import { NodeUtilities } from "../node-structure";
+export const integration = new Integration();
+export const copyPasteManager = new CopyPasteManager();
+export const project = new Project();
+export const input = new Input();
+export const modal = new ModalService();
+export const exporter = new Exporter();
+export const shortcuts = new Shortcuts();
+export const newIds = new Set();
+let FlowEditor = class FlowEditor extends translate(i18next)(LitElement) {
+    constructor() {
+        super();
+        this.showTopbar = false;
+    }
+    validate() {
+        return NodeUtilities.validate(exporter.jsonToFlow(this._ruleset.rules || "{}"));
+    }
+    beforeSave() {
+        if (this.readonly) {
+            return;
+        }
+        this.serialiseRule();
+    }
+    set ruleset(ruleset) {
+        if (this._ruleset === ruleset) {
+            return;
+        }
+        this._ruleset = ruleset;
+        if (ruleset.rules) {
+            const collection = exporter.jsonToFlow(ruleset.rules);
+            project.fromNodeCollection(collection);
+            project.setCurrentProject(ruleset.id, ruleset.name, collection.description);
+        }
+        else {
+            project.clear(true);
+        }
+    }
+    static get styles() {
+        return [
+            css `
+            :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 OrRulesRuleChangedEvent(this.validate()));
+            });
+        });
+    }
+    render() {
+        if (this.showTopbar) {
+            this.style.gridTemplateRows = "var(--topbar-height) 1fr";
+            this.style.gridTemplateAreas = '"topbar topbar" "workspace node-panel";';
+        }
+        return html `
+        ${(this.showTopbar ? html `<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([
+    query("node-panel")
+], FlowEditor.prototype, "nodePanel", void 0);
+__decorate([
+    query("top-bar")
+], FlowEditor.prototype, "topBar", void 0);
+__decorate([
+    query("editor-workspace")
+], FlowEditor.prototype, "editorWorkspace", void 0);
+__decorate([
+    property({ type: Boolean })
+], FlowEditor.prototype, "showTopbar", void 0);
+__decorate([
+    property({ attribute: false })
+], FlowEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ attribute: false })
+], FlowEditor.prototype, "_ruleset", void 0);
+FlowEditor = __decorate([
+    customElement("flow-editor")
+], FlowEditor);
+export { FlowEditor };
+//# sourceMappingURL=flow-editor.js.map