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

package/lib/flow-viewer/components/flow-node-socket.js

@@ -1,35 +1,150 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,d=arguments.length,n=d<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(d<3?r(n):d>3?r(t,o,n):r(t,o))||n);return d>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement as e,html as t,css as o}from"lit";import{customElement as i,property as r,query as d}from"lit/decorators.js";import{IdentityDomLink as n}from"../node-structure";import{Utilities as s}from"../utils";import{i18next as c,translate as a}from"@openremote/or-translate";import{project as l}from"./flow-editor";let FlowNodeSocket=class extends a(c)(e){constructor(){super(...arguments),this.renderLabel=!1,this.identityDeleted=!1,this.forceUpdate=()=>this.requestUpdate()}get connectionPosition(){return s.getCenter(this.circleElem.getBoundingClientRect())}static get styles(){return o`
-        :host{
-            width: auto;
-            height: var(--socket-size);
-            margin: 2px;
-            display: inline-block;
+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;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { IdentityDomLink } from "../node-structure";
+import { Utilities } from "../utils";
+import { i18next, translate } from "@openremote/or-translate";
+import { project } from "./flow-editor";
+let FlowNodeSocket = class FlowNodeSocket extends translate(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.renderLabel = false;
+        this.identityDeleted = false;
+        this.forceUpdate = () => this.requestUpdate();
+    }
+    get connectionPosition() {
+        return Utilities.getCenter(this.circleElem.getBoundingClientRect());
+    }
+    static get styles() {
+        return css `
+        :host{
+            width: auto;
+            height: var(--socket-size);
+            margin: 2px;
+            display: inline-block;
+        }
+        .socket{
+            background: none;
+            height: var(--socket-size);
+            width: var(--socket-size);
+            border-radius: 100%;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .socket:hover{
+            background: var(--highlight);
+        }
+        .label{
+            display:inline-block;
+            vertical-align: top;
+            color: rgba(0,0,0,.5);
+        }
+        .circle{
+            box-sizing: border-box;
+            background: grey;
+            width: var(--socket-display-size);
+            height: var(--socket-display-size);
+            border-radius: 100%;
+            pointer-events: none;
+            border: 1px solid rgb(80,80,80);
+        }`;
+    }
+    get socketTypeString() {
+        const socketType = this.socket.type.toString().toLowerCase();
+        // If the socket type is NUMBER_ARRAY, remove the array part, since we only allow the input of NUMBER into that
+        // socket, just multiple ones. Also helps with displaying the correct color.
+        return socketType.replace("_array", "");
+    }
+    disconnectedCallback() {
+        this.identityDeleted = delete IdentityDomLink.map[this.socket.id];
+        project.removeListener("connectioncreated", this.forceUpdate);
+        project.removeListener("connectionremoved", this.forceUpdate);
+        project.removeListener("nodeadded", this.forceUpdate);
+        project.removeListener("noderemoved", this.forceUpdate);
+        project.removeListener("cleared", this.forceUpdate);
+        IdentityDomLink.map[this.socket.nodeId].removeEventListener("updated", this.forceUpdate);
+    }
+    firstUpdated() {
+        this.title = Utilities.humanLike(this.socketTypeString);
+        this.linkIdentity();
+        project.addListener("connectioncreated", this.forceUpdate);
+        project.addListener("connectionremoved", this.forceUpdate);
+        project.addListener("nodeadded", this.forceUpdate);
+        project.addListener("noderemoved", this.forceUpdate);
+        project.addListener("cleared", this.forceUpdate);
+        IdentityDomLink.map[this.socket.nodeId].addEventListener("updated", this.forceUpdate);
+        const isInputSocket = this.side === "input";
+        const md = (e) => {
+            this.linkIdentity();
+            if (e.buttons !== 1) {
+                return;
+            }
+            if (project.isCurrentlyConnecting) {
+                return;
+            }
+            project.startConnectionDrag(e, this.socket, isInputSocket);
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        };
+        const mu = (e) => {
+            project.createUndoSnapshot();
+            this.linkIdentity();
+            project.endConnectionDrag(e, this.socket, isInputSocket);
+            project.notifyChange();
+            if (e.buttons !== 1) {
+                return;
+            }
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        };
+        this.addEventListener("mousedown", md);
+        this.addEventListener("mouseup", mu);
+    }
+    updated() {
+        this.linkIdentity();
+    }
+    render() {
+        const color = `var(--${this.socketTypeString})`;
+        const socket = html `<div class="socket">
+            <div class="circle" id="circle" style="background: ${color}"></div>
+            </div>`;
+        if (!this.renderLabel) {
+            return socket;
         }
-        .socket{
-            background: none;
-            height: var(--socket-size);
-            width: var(--socket-size);
-            border-radius: 100%;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+        const label = html `<div class="label">${i18next.t(Utilities.humanLike(this.socket.name))}</div>`;
+        if (this.side === "input") {
+            return html `${socket}${label}`;
         }
-        .socket:hover{
-            background: var(--highlight);
+        else {
+            return html `${label}${socket}`;
         }
-        .label{
-            display:inline-block;
-            vertical-align: top;
-            color: rgba(0,0,0,.5);
+    }
+    linkIdentity() {
+        if (!this.identityDeleted) {
+            IdentityDomLink.map[this.socket.id] = this;
         }
-        .circle{
-            box-sizing: border-box;
-            background: grey;
-            width: var(--socket-display-size);
-            height: var(--socket-display-size);
-            border-radius: 100%;
-            pointer-events: none;
-            border: 1px solid rgb(80,80,80);
-        }`}get socketTypeString(){return this.socket.type.toString().toLowerCase().replace("_array","")}disconnectedCallback(){this.identityDeleted=delete n.map[this.socket.id],l.removeListener("connectioncreated",this.forceUpdate),l.removeListener("connectionremoved",this.forceUpdate),l.removeListener("nodeadded",this.forceUpdate),l.removeListener("noderemoved",this.forceUpdate),l.removeListener("cleared",this.forceUpdate),n.map[this.socket.nodeId].removeEventListener("updated",this.forceUpdate)}firstUpdated(){this.title=s.humanLike(this.socketTypeString),this.linkIdentity(),l.addListener("connectioncreated",this.forceUpdate),l.addListener("connectionremoved",this.forceUpdate),l.addListener("nodeadded",this.forceUpdate),l.addListener("noderemoved",this.forceUpdate),l.addListener("cleared",this.forceUpdate),n.map[this.socket.nodeId].addEventListener("updated",this.forceUpdate);let e="input"===this.side;this.addEventListener("mousedown",t=>{this.linkIdentity(),1===t.buttons&&(l.isCurrentlyConnecting||(l.startConnectionDrag(t,this.socket,e),t.stopPropagation(),t.stopImmediatePropagation()))}),this.addEventListener("mouseup",t=>{l.createUndoSnapshot(),this.linkIdentity(),l.endConnectionDrag(t,this.socket,e),l.notifyChange(),1===t.buttons&&(t.stopPropagation(),t.stopImmediatePropagation())})}updated(){this.linkIdentity()}render(){let e=`var(--${this.socketTypeString})`,o=t`<div class="socket">
-            <div class="circle" id="circle" style="background: ${e}"></div>
-            </div>`;if(!this.renderLabel)return o;let i=t`<div class="label">${c.t(s.humanLike(this.socket.name))}</div>`;return"input"===this.side?t`${o}${i}`:t`${i}${o}`}linkIdentity(){this.identityDeleted||(n.map[this.socket.id]=this)}};__decorate([r({type:Object})],FlowNodeSocket.prototype,"socket",void 0),__decorate([r({type:String})],FlowNodeSocket.prototype,"side",void 0),__decorate([r({type:Boolean})],FlowNodeSocket.prototype,"renderLabel",void 0),__decorate([d("#circle")],FlowNodeSocket.prototype,"circleElem",void 0),FlowNodeSocket=__decorate([i("flow-node-socket")],FlowNodeSocket);export{FlowNodeSocket};
+    }
+};
+__decorate([
+    property({ type: Object })
+], FlowNodeSocket.prototype, "socket", void 0);
+__decorate([
+    property({ type: String })
+], FlowNodeSocket.prototype, "side", void 0);
+__decorate([
+    property({ type: Boolean })
+], FlowNodeSocket.prototype, "renderLabel", void 0);
+__decorate([
+    query("#circle")
+], FlowNodeSocket.prototype, "circleElem", void 0);
+FlowNodeSocket = __decorate([
+    customElement("flow-node-socket")
+], FlowNodeSocket);
+export { FlowNodeSocket };
+//# sourceMappingURL=flow-node-socket.js.map

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

@@ -1,31 +1,194 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(s<3?n(r):s>3?n(t,i,r):n(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r},__awaiter=this&&this.__awaiter||function(e,t,i,o){return new(i||(i=Promise))(function(n,s){function r(e){try{d(o.next(e))}catch(e){s(e)}}function a(e){try{d(o.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?n(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(r,a)}d((o=o.apply(e,t||[])).next())})};import{css as e,html as t}from"lit";import{customElement as i,property as o}from"lit/decorators.js";import{IdentityDomLink as n}from"../node-structure";import{FlowNodeStyle as s}from"../styles/flow-node-style";import{i18next as r}from"@openremote/or-translate";import{nodeConverter as a}from"../converters/node-converter";import{SelectableElement as d}from"./selectable-element";import{newIds as l,project as h}from"./flow-editor";let FlowNode=class extends d{constructor(){super(),this.frozen=!1,this.minimal=!1,this.isBeingDragged=!1,this.forceUpdate=()=>{this.requestUpdate()},this.setTranslate=()=>{let e=this.workspace.worldToOffset(this.node.position);this.style.transform=`translate(${e.x}px, ${e.y}px) scale(${this.workspace.camera.zoom})`,this.dispatchEvent(new CustomEvent("updated"))},this.startDrag=e=>{this.frozen||1===e.buttons&&(h.createUndoSnapshot(),this.bringToFront(),window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onDrag),this.isBeingDragged=!0)},this.onDrag=e=>{this.node.position={x:this.node.position.x+e.movementX/this.workspace.camera.zoom,y:this.node.position.y+e.movementY/this.workspace.camera.zoom},this.setTranslate()},this.stopDrag=()=>{window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onDrag),this.isBeingDragged=!1,h.notifyChange()},this.linkIdentity=()=>{n.map[this.node.id]=this}}static get styles(){return[s,e`
-            .internal-item {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                flex: 0 0 auto;
+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 { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { IdentityDomLink } from "../node-structure";
+import { FlowNodeStyle } from "../styles/flow-node-style";
+import { i18next } from "@openremote/or-translate";
+import { nodeConverter } from "../converters/node-converter";
+import { SelectableElement } from "./selectable-element";
+import { newIds, project } from "./flow-editor";
+let FlowNode = class FlowNode extends SelectableElement {
+    constructor() {
+        super();
+        this.frozen = false;
+        this.minimal = false;
+        this.isBeingDragged = false;
+        this.forceUpdate = () => { this.requestUpdate(); };
+        this.setTranslate = () => {
+            const pos = this.workspace.worldToOffset(this.node.position);
+            this.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(${this.workspace.camera.zoom})`;
+            this.dispatchEvent(new CustomEvent("updated"));
+        };
+        this.startDrag = (e) => {
+            if (this.frozen) {
+                return;
             }
-            .internal-title {
-                font-size: 0.8em;
-                margin-bottom: 0;
-                margin-top:3px;
-                text-align: left;
+            if (e.buttons !== 1) {
+                return;
             }
-        `]}disconnectedCallback(){this.workspace.removeEventListener("pan",this.setTranslate),this.workspace.removeEventListener("zoom",this.setTranslate),h.removeListener("cleared",this.forceUpdate),h.removeListener("connectionremoved",this.linkIdentity),super.disconnectedCallback()}bringToFront(){this.frozen||(this.style.zIndex=`${this.workspace.topNodeZindex++}`)}firstUpdated(){let e=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return __awaiter(this,void 0,void 0,function*(){if(e.firstUpdated.call(this),this.linkIdentity(),this.workspace.addEventListener("pan",this.setTranslate),this.workspace.addEventListener("zoom",this.setTranslate),h.addListener("cleared",this.forceUpdate),h.addListener("connectionremoved",this.linkIdentity),this.minimal=0!==(this.node.displayCharacter||"").length,this.bringToFront(),l.has(this.node.id)){yield this.updateComplete,yield this.updateComplete;let e=this.getBoundingClientRect();this.node.position.x-=e.width/2/this.workspace.camera.zoom,this.node.position.y-=e.height/2/this.workspace.camera.zoom,this.setTranslate(),l.delete(this.node.id)}this.minimal&&this.addEventListener("mousedown",this.startDrag)})}updated(){return __awaiter(this,void 0,void 0,function*(){this.linkIdentity(),this.dispatchEvent(new CustomEvent("updated"))})}render(){this.minimal?this.style.background=`var(--${this.node.type.toLowerCase()}-color)`:this.style.background="",this.setTranslate(),this.style.boxShadow=this.selected?"var(--highlight) 0 0 0 3px":"";let e=this.minimal?t`<div class="title minimal" ?singlechar="${1===this.node.displayCharacter.length}">${r.t("flow."+this.node.displayCharacter,this.node.displayCharacter)}</div>`:t`<div class="title ${this.node.type.toLowerCase()}" @mousedown="${this.startDrag}">${r.t("flow."+this.node.name)||"invalid"}</div>`,i=t`<div class="socket-side inputs">${this.node.inputs.map(e=>t`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${e}" side="input"></flow-node-socket>`)}</div>`,o=t`<div class="socket-side outputs">${this.node.outputs.map(e=>t`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${e}" side="output"></flow-node-socket>`)}</div>`,n=t`<div style="width: 10px"></div>`;return t`
-        ${e}
-        ${this.node.inputs.length>0?i:n}
-        ${this.minimal?null:t`
-            <div class="internal-container" style="padding-top: 8px">
-            ${this.node.internals.reduce((e,t,i,o)=>(e[e.length-1].push(t),"NEW_LINE"===t.breakType&&i<o.length-1&&e.push([]),e),[[]]).map(e=>t`
-            <div class="internal-group" style="max-width: fit-content; min-width: fit-content; padding-bottom: 8px;">
-                ${e.map(e=>t`
-                    <div class="internal-item" style="display: inline-block">
-                        <internal-picker style="pointer-events: ${this.frozen?"none":"normal"};" @picked="${()=>__awaiter(this,void 0,void 0,function*(){this.forceUpdate(),yield this.updateComplete,h.removeInvalidConnections()})}" .node="${this.node}" .internalIndex="${this.node.internals.indexOf(e)}"></internal-picker>
-                    </div>
-                `)}
-            </div>
-        `)}
-        </div>`}
-        ${this.node.outputs.length>0?o:n}
-        ${this.frozen?t`<or-icon class="lock-icon ${this.node.type.toLowerCase()}" icon="lock"></or-icon>`:""}
-        `}};__decorate([o({converter:a})],FlowNode.prototype,"node",void 0),__decorate([o({attribute:!1})],FlowNode.prototype,"workspace",void 0),__decorate([o({type:Boolean,reflect:!0})],FlowNode.prototype,"frozen",void 0),__decorate([o({type:Boolean,reflect:!0})],FlowNode.prototype,"minimal",void 0),__decorate([o({attribute:!1})],FlowNode.prototype,"isBeingDragged",void 0),FlowNode=__decorate([i("flow-node")],FlowNode);export{FlowNode};
+            project.createUndoSnapshot();
+            this.bringToFront();
+            window.addEventListener("mouseup", this.stopDrag);
+            window.addEventListener("mousemove", this.onDrag);
+            this.isBeingDragged = true;
+        };
+        this.onDrag = (e) => {
+            this.node.position = {
+                x: this.node.position.x + e.movementX / this.workspace.camera.zoom,
+                y: this.node.position.y + e.movementY / this.workspace.camera.zoom
+            };
+            this.setTranslate();
+        };
+        this.stopDrag = () => {
+            window.removeEventListener("mouseup", this.stopDrag);
+            window.removeEventListener("mousemove", this.onDrag);
+            this.isBeingDragged = false;
+            project.notifyChange();
+        };
+        this.linkIdentity = () => {
+            IdentityDomLink.map[this.node.id] = this;
+        };
+    }
+    static get styles() {
+        return [FlowNodeStyle,
+            css `
+            .internal-item {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                flex: 0 0 auto;
+            }
+            .internal-title {
+                font-size: 0.8em;
+                margin-bottom: 0;
+                margin-top:3px;
+                text-align: left;
+            }
+        `];
+    }
+    disconnectedCallback() {
+        this.workspace.removeEventListener("pan", this.setTranslate);
+        this.workspace.removeEventListener("zoom", this.setTranslate);
+        project.removeListener("cleared", this.forceUpdate);
+        project.removeListener("connectionremoved", this.linkIdentity);
+        super.disconnectedCallback();
+    }
+    bringToFront() {
+        if (this.frozen) {
+            return;
+        }
+        this.style.zIndex = `${this.workspace.topNodeZindex++}`;
+    }
+    firstUpdated() {
+        const _super = Object.create(null, {
+            firstUpdated: { get: () => super.firstUpdated }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.firstUpdated.call(this);
+            this.linkIdentity();
+            this.workspace.addEventListener("pan", this.setTranslate);
+            this.workspace.addEventListener("zoom", this.setTranslate);
+            project.addListener("cleared", this.forceUpdate);
+            project.addListener("connectionremoved", this.linkIdentity);
+            this.minimal = (this.node.displayCharacter || "").length !== 0;
+            this.bringToFront();
+            if (newIds.has(this.node.id)) { // node centering has to keep track of which nodes were created by the user
+                yield this.updateComplete;
+                yield this.updateComplete;
+                const size = this.getBoundingClientRect();
+                this.node.position.x -= size.width / 2 / this.workspace.camera.zoom;
+                this.node.position.y -= size.height / 2 / this.workspace.camera.zoom;
+                this.setTranslate();
+                newIds.delete(this.node.id);
+            }
+            if (this.minimal) {
+                this.addEventListener("mousedown", this.startDrag);
+            }
+        });
+    }
+    updated() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.linkIdentity();
+            this.dispatchEvent(new CustomEvent("updated"));
+        });
+    }
+    render() {
+        if (this.minimal) {
+            this.style.background = `var(--${this.node.type.toLowerCase()}-color)`;
+        }
+        else {
+            this.style.background = "";
+        }
+        this.setTranslate();
+        this.style.boxShadow = this.selected ? "var(--highlight) 0 0 0 3px" : "";
+        const title = this.minimal ?
+            html `<div class="title minimal" ?singlechar="${this.node.displayCharacter.length === 1}">${i18next.t("flow." + this.node.displayCharacter, this.node.displayCharacter)}</div>` :
+            html `<div class="title ${this.node.type.toLowerCase()}" @mousedown="${this.startDrag}">${i18next.t("flow." + this.node.name) || "invalid"}</div>`;
+        const inputSide = html `<div class="socket-side inputs">${this.node.inputs.map((i) => html `<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${i}" side="input"></flow-node-socket>`)}</div>`;
+        const outputSide = html `<div class="socket-side outputs">${this.node.outputs.map((i) => html `<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${i}" side="output"></flow-node-socket>`)}</div>`;
+        const spacer = html `<div style="width: 10px"></div>`;
+        // Gather the elements between NEW_LINES in distinct groups, that can then be iterated per-group and per-element below. Should help with adding as many internals in any configuration we would like.
+        return html `
+        ${title}
+        ${this.node.inputs.length > 0 ? inputSide : spacer}
+        ${(this.minimal) ? null : html `
+            <div class="internal-container" style="padding-top: 8px">
+            ${this.node.internals.reduce((acc, i, index, array) => {
+            acc[acc.length - 1].push(i);
+            if (i.breakType === "NEW_LINE" /* NodeInternalBreakType.NEW_LINE */ && index < array.length - 1) {
+                acc.push([]);
+            }
+            return acc;
+        }, [[]]).map((group) => html `
+            <div class="internal-group" style="max-width: fit-content; min-width: fit-content; padding-bottom: 8px;">
+                ${group.map((i) => html `
+                    <div class="internal-item" style="display: inline-block">
+                        <internal-picker style="pointer-events: ${(this.frozen ? "none" : "normal")};" @picked="${() => __awaiter(this, void 0, void 0, function* () {
+            this.forceUpdate();
+            yield this.updateComplete;
+            project.removeInvalidConnections();
+        })}" .node="${this.node}" .internalIndex="${this.node.internals.indexOf(i)}"></internal-picker>
+                    </div>
+                `)}
+            </div>
+        `)}
+        </div>`}
+        ${this.node.outputs.length > 0 ? outputSide : spacer}
+        ${(this.frozen ? html `<or-icon class="lock-icon ${this.node.type.toLowerCase()}" icon="lock"></or-icon>` : ``)}
+        `;
+    }
+};
+__decorate([
+    property({ converter: nodeConverter })
+], FlowNode.prototype, "node", void 0);
+__decorate([
+    property({ attribute: false })
+], FlowNode.prototype, "workspace", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FlowNode.prototype, "frozen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FlowNode.prototype, "minimal", void 0);
+__decorate([
+    property({ attribute: false })
+], FlowNode.prototype, "isBeingDragged", void 0);
+FlowNode = __decorate([
+    customElement("flow-node")
+], FlowNode);
+export { FlowNode };
+//# sourceMappingURL=flow-node.js.map