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

package/lib/flow-viewer/components/selectable-element.js

@@ -1 +1,71 @@
-var __decorate=this&&this.__decorate||function(e,t,s,l){var i,o=arguments.length,c=o<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,s):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,s,l);else for(var d=e.length-1;d>=0;d--)(i=e[d])&&(c=(o<3?i(c):o>3?i(t,s,c):i(t,s))||c);return o>3&&c&&Object.defineProperty(t,s,c),c};import{LitElement as e}from"lit";import{property as t}from"lit/decorators.js";import{input as s}from"./flow-editor";import{i18next as l,translate as i}from"@openremote/or-translate";export class SelectableElement extends i(l)(e){constructor(){super(...arguments),this.isSelected=!1,this.onSelected=e=>{e===this&&(this.isSelected=!0)},this.onDeselected=e=>{e===this&&(this.isSelected=!1)},this.handleSelection=e=>{1===e.buttons?(s.handleSelection(this),e.stopPropagation()):2===e.buttons&&s.handleSelection(this,!0)}}get selected(){return this.isSelected}get handle(){return this.selectableHandle}disconnectedCallback(){super.disconnectedCallback(),this.selected&&s.selected.splice(s.selected.indexOf(this),1),this.isSelected=!1,s.removeListener("selected",this.onSelected),s.removeListener("deselected",this.onDeselected),s.selectables.splice(s.selectables.indexOf(this),1)}setHandle(e){this.selectableHandle&&this.selectableHandle.removeEventListener("mousedown",this.handleSelection),e.addEventListener("mousedown",this.handleSelection),this.selectableHandle=e}firstUpdated(){this.setHandle(this),s.selectables.push(this),s.addListener("selected",this.onSelected),s.addListener("deselected",this.onDeselected)}}__decorate([t({type:Boolean})],SelectableElement.prototype,"isSelected",void 0),__decorate([t({attribute:!1})],SelectableElement.prototype,"selectableHandle",void 0);
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import { input } from "./flow-editor";
+import { i18next, translate } from "@openremote/or-translate";
+export class SelectableElement extends translate(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.isSelected = false;
+        this.onSelected = (e) => {
+            if (e === this) {
+                this.isSelected = true;
+            }
+        };
+        this.onDeselected = (e) => {
+            if (e === this) {
+                this.isSelected = false;
+            }
+        };
+        this.handleSelection = (event) => {
+            if (event.buttons === 1) {
+                input.handleSelection(this);
+                event.stopPropagation();
+            }
+            else if (event.buttons === 2) {
+                input.handleSelection(this, true);
+            }
+        };
+    }
+    get selected() {
+        return this.isSelected;
+    }
+    get handle() {
+        return this.selectableHandle;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.selected) {
+            input.selected.splice(input.selected.indexOf(this), 1);
+        }
+        this.isSelected = false;
+        input.removeListener("selected", this.onSelected);
+        input.removeListener("deselected", this.onDeselected);
+        input.selectables.splice(input.selectables.indexOf(this), 1);
+    }
+    setHandle(element) {
+        if (this.selectableHandle) {
+            this.selectableHandle.removeEventListener("mousedown", this.handleSelection);
+        }
+        element.addEventListener("mousedown", this.handleSelection);
+        this.selectableHandle = element;
+    }
+    firstUpdated() {
+        this.setHandle(this);
+        input.selectables.push(this);
+        input.addListener("selected", this.onSelected);
+        input.addListener("deselected", this.onDeselected);
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], SelectableElement.prototype, "isSelected", void 0);
+__decorate([
+    property({ attribute: false })
+], SelectableElement.prototype, "selectableHandle", void 0);
+//# sourceMappingURL=selectable-element.js.map

package/lib/flow-viewer/components/selection-box.js

@@ -1,16 +1,120 @@
-var __decorate=this&&this.__decorate||function(t,e,i,o){var s,n=arguments.length,c=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,i,o);else for(var h=t.length-1;h>=0;h--)(s=t[h])&&(c=(n<3?s(c):n>3?s(e,i,c):s(e,i))||c);return n>3&&c&&Object.defineProperty(e,i,c),c};import{LitElement as t,html as e,css as i}from"lit";import{customElement as o,property as s}from"lit/decorators.js";import{Utilities as n}from"../utils";import{input as c}from"./flow-editor";let SelectionBox=class extends t{constructor(){super(...arguments),this.distanceTreshold=20,this.isSelecting=!1,this.selectionStartPosition={x:0,y:0},this.selectionBox={x:0,y:0,width:0,height:0},this.workspaceMouseDown=t=>{1===t.buttons&&(this.selectionBox.x=t.offsetX,this.selectionBox.y=t.offsetY,this.selectionStartPosition.x=this.selectionBox.x,this.selectionStartPosition.y=this.selectionBox.y,window.addEventListener("mousemove",this.mouseMove))},this.mouseMove=t=>{let e=t.pageX-this.workspace.clientRect.left-this.selectionStartPosition.x,i=t.pageY-this.workspace.clientRect.top-this.selectionStartPosition.y;e<0?(this.selectionBox.x=t.pageX-this.workspace.clientRect.left,this.selectionBox.width=Math.abs(this.selectionBox.x-this.selectionStartPosition.x)):(this.selectionBox.x=this.selectionStartPosition.x,this.selectionBox.width=Math.abs(e)),i<0?(this.selectionBox.y=t.pageY-this.workspace.clientRect.top,this.selectionBox.height=Math.abs(this.selectionBox.y-this.selectionStartPosition.y)):(this.selectionBox.y=this.selectionStartPosition.y,this.selectionBox.height=Math.abs(i)),this.selectionBox.width+this.selectionBox.height>this.distanceTreshold&&(this.isSelecting=!0),this.requestUpdate()},this.workspaceMouseUp=()=>{window.removeEventListener("mousemove",this.mouseMove),this.isSelecting&&(this.selectInBounds(),this.isSelecting=!1)}}static get styles(){return i`
-        svg{
-            fill: none;  
-            overflow: visible;
-            position: absolute;
-            pointer-events: all;
-            stroke-linejoin: round;
-            transition: stroke-width 120ms;
-            z-index: 1000;
-            width: 100vw;
-            height: 100vh;
+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 } from "lit/decorators.js";
+import { Utilities } from "../utils";
+import { input } from "./flow-editor";
+let SelectionBox = class SelectionBox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.distanceTreshold = 20;
+        this.isSelecting = false;
+        this.selectionStartPosition = { x: 0, y: 0 };
+        this.selectionBox = { x: 0, y: 0, width: 0, height: 0 };
+        this.workspaceMouseDown = (e) => {
+            if (e.buttons !== 1) {
+                return;
+            }
+            this.selectionBox.x = e.offsetX;
+            this.selectionBox.y = e.offsetY;
+            this.selectionStartPosition.x = this.selectionBox.x;
+            this.selectionStartPosition.y = this.selectionBox.y;
+            window.addEventListener("mousemove", this.mouseMove);
+        };
+        this.mouseMove = (e) => {
+            const width = e.pageX - this.workspace.clientRect.left - this.selectionStartPosition.x;
+            const height = e.pageY - this.workspace.clientRect.top - this.selectionStartPosition.y;
+            if (width < 0) {
+                this.selectionBox.x = e.pageX - this.workspace.clientRect.left;
+                this.selectionBox.width = Math.abs(this.selectionBox.x - this.selectionStartPosition.x);
+            }
+            else {
+                this.selectionBox.x = this.selectionStartPosition.x;
+                this.selectionBox.width = Math.abs(width);
+            }
+            if (height < 0) {
+                this.selectionBox.y = e.pageY - this.workspace.clientRect.top;
+                this.selectionBox.height = Math.abs(this.selectionBox.y - this.selectionStartPosition.y);
+            }
+            else {
+                this.selectionBox.y = this.selectionStartPosition.y;
+                this.selectionBox.height = Math.abs(height);
+            }
+            if (this.selectionBox.width + this.selectionBox.height > this.distanceTreshold) {
+                this.isSelecting = true;
+            }
+            this.requestUpdate();
+        };
+        this.workspaceMouseUp = () => {
+            window.removeEventListener("mousemove", this.mouseMove);
+            if (this.isSelecting) {
+                this.selectInBounds();
+                this.isSelecting = false;
+            }
+        };
+    }
+    static get styles() {
+        return css `
+        svg{
+            fill: none;  
+            overflow: visible;
+            position: absolute;
+            pointer-events: all;
+            stroke-linejoin: round;
+            transition: stroke-width 120ms;
+            z-index: 1000;
+            width: 100vw;
+            height: 100vh;
+        }
+        rect{
+            fill: var(--highlight-faded);
+            outline: solid 1px var(--highlight);
+        }`;
+    }
+    firstUpdated() {
+        this.workspace.addEventListener("mousedown", this.workspaceMouseDown);
+        window.addEventListener("mouseup", this.workspaceMouseUp);
+    }
+    render() {
+        if (!this.isSelecting) {
+            return html ``;
         }
-        rect{
-            fill: var(--highlight-faded);
-            outline: solid 1px var(--highlight);
-        }`}firstUpdated(){this.workspace.addEventListener("mousedown",this.workspaceMouseDown),window.addEventListener("mouseup",this.workspaceMouseUp)}render(){return this.isSelecting?e`<svg><rect x="${this.selectionBox.x}px" y="${this.selectionBox.y}px" width="${this.selectionBox.width}px" height="${this.selectionBox.height}px"></rect></svg>`:e``}selectInBounds(){c.clearSelection();let t={x:this.selectionBox.x+this.workspace.clientRect.left,y:this.selectionBox.y+this.workspace.clientRect.top,width:this.selectionBox.width,height:this.selectionBox.height};for(let e of c.selectables){let i=e.handle.getBoundingClientRect();n.isBoxInsideBox({x:i.left,y:i.top,width:i.width,height:i.height},t)&&c.select(e,!0)}}};__decorate([s({attribute:!1})],SelectionBox.prototype,"workspace",void 0),__decorate([s({attribute:!1})],SelectionBox.prototype,"isSelecting",void 0),__decorate([s({attribute:!1})],SelectionBox.prototype,"selectionStartPosition",void 0),__decorate([s({attribute:!1})],SelectionBox.prototype,"selectionBox",void 0),SelectionBox=__decorate([o("selection-box")],SelectionBox);export{SelectionBox};
+        return html `<svg><rect x="${this.selectionBox.x}px" y="${this.selectionBox.y}px" width="${this.selectionBox.width}px" height="${this.selectionBox.height}px"></rect></svg>`;
+    }
+    selectInBounds() {
+        input.clearSelection();
+        const offsetBox = {
+            x: this.selectionBox.x + this.workspace.clientRect.left,
+            y: this.selectionBox.y + this.workspace.clientRect.top,
+            width: this.selectionBox.width,
+            height: this.selectionBox.height,
+        };
+        for (const selectable of input.selectables) {
+            const rect = selectable.handle.getBoundingClientRect();
+            if (Utilities.isBoxInsideBox({ x: rect.left, y: rect.top, width: rect.width, height: rect.height }, offsetBox)) {
+                input.select(selectable, true);
+            }
+        }
+    }
+};
+__decorate([
+    property({ attribute: false })
+], SelectionBox.prototype, "workspace", void 0);
+__decorate([
+    property({ attribute: false })
+], SelectionBox.prototype, "isSelecting", void 0);
+__decorate([
+    property({ attribute: false })
+], SelectionBox.prototype, "selectionStartPosition", void 0);
+__decorate([
+    property({ attribute: false })
+], SelectionBox.prototype, "selectionBox", void 0);
+SelectionBox = __decorate([
+    customElement("selection-box")
+], SelectionBox);
+export { SelectionBox };
+//# sourceMappingURL=selection-box.js.map

package/lib/flow-viewer/components/top-bar.js

@@ -1,51 +1,118 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,a=arguments.length,l=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(a<3?r(l):a>3?r(t,o,l):r(t,o))||l);return a>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement as e,html as t,css as o}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import{InputType as a}from"@openremote/or-mwc-components/or-mwc-input";import{Utilities as l}from"../utils";import{i18next as n,translate as s}from"@openremote/or-translate";import{project as c,modal as p,exporter as u}from"./flow-editor";let TopBar=class extends s(n)(e){static get styles(){return o`
-        :host{
-            display: flex;
-            width: 100%;
-            justify-content: flex-start;
-            align-items: center;
-            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;
-            line-height: var(--topbar-height);
-            z-index: 150;
+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 } from "lit/decorators.js";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { Utilities } from "../utils";
+import { i18next, translate } from "@openremote/or-translate";
+import { project, modal, exporter } from "./flow-editor";
+let TopBar = class TopBar extends translate(i18next)(LitElement) {
+    static get styles() {
+        return css `
+        :host{
+            display: flex;
+            width: 100%;
+            justify-content: flex-start;
+            align-items: center;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;
+            line-height: var(--topbar-height);
+            z-index: 150;
+        }
+        .button{
+            padding: 0 25px 0 25px;
+            cursor: pointer;
+        }
+        .button:hover{
+            background: #fafafa;
+        }
+        .button:active{
+            background: whitesmoke;
+        }
+        .debug.button{
+            background: yellow;
+        }
+        .title{
+            margin: 0 15px 0 15px;
+            text-transform: uppercase;
+            font-weight: bold;
+        }
+        .right{ 
+            margin-left: auto;
+        }`;
+    }
+    firstUpdated() {
+        project.addListener("unsavedstateset", () => {
+            this.requestUpdate();
+        });
+    }
+    render() {
+        return html `
+        <span class="title">${i18next.t("flowEditor")}</span>
+        <a class="button" @click="${() => {
+            if (project.unsavedState) {
+                modal.confirmation(() => { project.clear(true); }, "New project");
+            }
+            else {
+                project.clear(true);
+            }
+        }}">New</a>
+        <a class="button" @click="${this.save}">${i18next.t("save")} <i>${Utilities.ellipsis(project.existingFlowRuleName)}</i>${project.unsavedState && project.existingFlowRuleId !== -1 ? "*" : ""}</a>
+        ${project.existingFlowRuleId === -1 ? null : html `<a @click="${this.showSaveAsDialog}" class="button">Save as...</a>`}
+        <a class="button" @click="${this.showRuleBrowser}">Open</a>
+        <a class="button right" @click="${() => {
+            this.application.nodePanel.drawer.toggle();
+        }}"><or-icon icon="menu"></or-icon></a>
+        `;
+    }
+    save() {
+        if (project.existingFlowRuleId === -1) {
+            this.showSaveAsDialog();
         }
-        .button{
-            padding: 0 25px 0 25px;
-            cursor: pointer;
+        else {
+            exporter.exportAsExisting(project.existingFlowRuleId, project.toNodeCollection(project.existingFlowRuleName, project.existingFlowRuleDesc));
         }
-        .button:hover{
-            background: #fafafa;
-        }
-        .button:active{
-            background: whitesmoke;
-        }
-        .debug.button{
-            background: yellow;
-        }
-        .title{
-            margin: 0 15px 0 15px;
-            text-transform: uppercase;
-            font-weight: bold;
-        }
-        .right{ 
-            margin-left: auto;
-        }`}firstUpdated(){c.addListener("unsavedstateset",()=>{this.requestUpdate()})}render(){return t`
-        <span class="title">${n.t("flowEditor")}</span>
-        <a class="button" @click="${()=>{c.unsavedState?p.confirmation(()=>{c.clear(!0)},"New project"):c.clear(!0)}}">New</a>
-        <a class="button" @click="${this.save}">${n.t("save")} <i>${l.ellipsis(c.existingFlowRuleName)}</i>${c.unsavedState&&-1!==c.existingFlowRuleId?"*":""}</a>
-        ${-1===c.existingFlowRuleId?null:t`<a @click="${this.showSaveAsDialog}" class="button">Save as...</a>`}
-        <a class="button" @click="${this.showRuleBrowser}">Open</a>
-        <a class="button right" @click="${()=>{this.application.nodePanel.drawer.toggle()}}"><or-icon icon="menu"></or-icon></a>
-        `}save(){-1===c.existingFlowRuleId?this.showSaveAsDialog():u.exportAsExisting(c.existingFlowRuleId,c.toNodeCollection(c.existingFlowRuleName,c.existingFlowRuleDesc))}showRuleBrowser(){p.element.content=t`<rule-browser @ruleloaded="${()=>p.element.close()}"></rule-browser>`,p.element.header="Select a Flow rule",p.element.open()}showSaveAsDialog(){let e="",o="";p.element.content=t`
-            <div style="display: flex; flex-direction: column; width: auto; justify-content: space-between; align-items: stretch;">
-            <or-mwc-input style="margin-bottom: 16px; width:100%;" required type="text" label="${n.t("name","Name")}"
-            @or-mwc-input-changed="${t=>{e=t.detail.value}}"
-            ></or-mwc-input>
-            <or-mwc-input style="margin-bottom: 16px; width:100%;" fullwidth type="textarea" label="${n.t("description","Description")}"
-            @or-mwc-input-changed="${e=>{o=e.detail.value}}"
-            ></or-mwc-input>
-            <div>
-                <or-mwc-input style="text-align: left; margin-right: 10px" type="${a.BUTTON}" label="${n.t("cancel","Cancel")}" @or-mwc-input-changed="${p.element.close}"></or-mwc-input>
-                <or-mwc-input style="text-align: right" type="${a.BUTTON}" unelevated label="${n.t("save","Save")}" @or-mwc-input-changed="${()=>{e&&(u.exportAsNew(c.toNodeCollection(e,o)),p.element.close())}}"></or-mwc-input>
-            </div>
-            </div>
-        `,p.element.header="Save project",p.element.open()}};__decorate([r({attribute:!1})],TopBar.prototype,"application",void 0),TopBar=__decorate([i("top-bar")],TopBar);export{TopBar};
+    }
+    showRuleBrowser() {
+        modal.element.content = html `<rule-browser @ruleloaded="${() => modal.element.close()}"></rule-browser>`;
+        modal.element.header = "Select a Flow rule";
+        modal.element.open();
+    }
+    showSaveAsDialog() {
+        let chosenName = "";
+        let chosenDesc = "";
+        modal.element.content = html `
+            <div style="display: flex; flex-direction: column; width: auto; justify-content: space-between; align-items: stretch;">
+            <or-mwc-input style="margin-bottom: 16px; width:100%;" required type="text" label="${i18next.t("name", "Name")}"
+            @or-mwc-input-changed="${(e) => { chosenName = e.detail.value; }}"
+            ></or-mwc-input>
+            <or-mwc-input style="margin-bottom: 16px; width:100%;" fullwidth type="textarea" label="${i18next.t("description", "Description")}"
+            @or-mwc-input-changed="${(e) => { chosenDesc = e.detail.value; }}"
+            ></or-mwc-input>
+            <div>
+                <or-mwc-input style="text-align: left; margin-right: 10px" type="${InputType.BUTTON}" label="${i18next.t("cancel", "Cancel")}" @or-mwc-input-changed="${modal.element.close}"></or-mwc-input>
+                <or-mwc-input style="text-align: right" type="${InputType.BUTTON}" unelevated label="${i18next.t("save", "Save")}" @or-mwc-input-changed="${() => {
+            if (!chosenName) {
+                return;
+            }
+            exporter.exportAsNew(project.toNodeCollection(chosenName, chosenDesc));
+            modal.element.close();
+        }}"></or-mwc-input>
+            </div>
+            </div>
+        `;
+        modal.element.header = "Save project";
+        modal.element.open();
+    }
+};
+__decorate([
+    property({ attribute: false })
+], TopBar.prototype, "application", void 0);
+TopBar = __decorate([
+    customElement("top-bar")
+], TopBar);
+export { TopBar };
+//# sourceMappingURL=top-bar.js.map

package/lib/flow-viewer/components/workspace-contextmenu-options.js

@@ -1,5 +1,128 @@
-import{FlowNode as e}from"./flow-node";import{ConnectionLine as t}from"../flow-viewer";import{integration as o,project as n,copyPasteManager as a,input as l,exporter as i,modal as r}from"./flow-editor";import p from"i18next";import{Utilities as c}from"../utils";import{CopyMachine as s}from"../node-structure";import{ContextMenu as f}from"./context-menu";import{html as d}from"lit";export const createContextMenuButtons=(u,m)=>{let y=l.selected.filter(t=>t instanceof e&&t.selected),b=l.selected.filter(e=>e instanceof t&&e.selected),h=e=>{let t=[{type:"button",label:"",icon:"arrow-left",action:()=>{u.dispatchEvent(new MouseEvent("contextmenu",m))}}];return t.concat(o.nodes.filter(t=>t.type===e).map(e=>({type:"button",label:p.t("flow."+e.name,c.humanLike(e.name)),action:()=>{let t=s.copy(e);t.position=u.offsetToWorld({x:m.offsetX-u.offsetLeft,y:m.offsetY-u.offsetTop}),n.createUndoSnapshot(),n.addNode(t)}})))},g=[{type:"button",label:p.t("input","Input"),icon:"arrow-collapse-right",action:()=>{f.open(m.pageX,m.pageY,u,h("INPUT"))}},{type:"button",label:p.t("processors","Processors"),icon:"cog",action:()=>{f.open(m.pageX,m.pageY,u,h("PROCESSOR"))}},{type:"button",label:p.t("output","Output"),icon:"arrow-expand-right",action:()=>{f.open(m.pageX,m.pageY,u,h("OUTPUT"))}}];return g.concat([{type:"separator"},{type:"button",icon:"content-copy",label:p.t("copy","Copy"),action:()=>{let e=u.offsetToWorld({x:m.offsetX,y:m.offsetY});a.copy(e.x,e.y)},disabled:0===y.length},{type:"button",icon:"content-paste",label:p.t("paste","Paste"),action:()=>{n.createUndoSnapshot();let e=u.offsetToWorld({x:m.offsetX,y:m.offsetY});n.notifyChange(),u.pasteAt(e.x,e.y)},disabled:a.isFull},{type:"button",icon:"delete",label:p.t("delete","Delete"),action:()=>{n.createUndoSnapshot(),y.forEach(e=>{e.frozen||n.removeNode(e.node)}),b.forEach(e=>n.removeConnection(e.connection)),n.notifyChange()},disabled:0===y.length&&0===b.length||0!==y.length&&y.every(e=>e.frozen)},{type:"separator"},{type:"button",icon:"fit-to-page-outline",label:p.t("fitViewToSelectedNodes","Fit view to selected nodes"),action:()=>u.fitCamera(y.map(e=>e.node)),disabled:0===y.length},{type:"button",icon:"snowflake",label:"TOGGLE FROZEN [DEBUG FUNCTION]",action:()=>y.forEach(e=>e.frozen=!e.frozen),disabled:0===y.length},{type:"separator"},{type:"button",icon:"export",label:"Export to JSON",action:()=>{r.anything("Export result",d`
-                <div style="user-select: all;font-family: monospace; padding: 5px; overflow: auto; background: whitesmoke; max-width:50vw; max-height:50vh">
-                ${i.flowToJson(n.toNodeCollection("Exported on "+new Date,""))}
-                </div>
-                `)}}])};
+import { FlowNode } from "./flow-node";
+import { ConnectionLine } from "../flow-viewer";
+import { integration, project, copyPasteManager, input, exporter, modal } from "./flow-editor";
+import i18next from "i18next";
+import { Utilities } from "../utils";
+import { CopyMachine } from "../node-structure";
+import { ContextMenu } from "./context-menu";
+import { html } from "lit";
+export const createContextMenuButtons = (workspace, e) => {
+    const selectedNodes = input.selected.filter((s) => s instanceof FlowNode && s.selected);
+    const selectedConnections = input.selected.filter((s) => s instanceof ConnectionLine && s.selected);
+    const createNodeButtons = (type) => {
+        let nB = [
+            {
+                type: "button",
+                label: "",
+                icon: "arrow-left",
+                action: () => { workspace.dispatchEvent(new MouseEvent("contextmenu", e)); }
+            }
+        ];
+        nB = nB.concat(integration.nodes.filter((n) => n.type === type).map((node) => {
+            const b = {
+                type: "button",
+                label: i18next.t("flow." + node.name, Utilities.humanLike(node.name)),
+                action: () => {
+                    const copy = CopyMachine.copy(node);
+                    copy.position = workspace.offsetToWorld({ x: e.offsetX - workspace.offsetLeft, y: e.offsetY - workspace.offsetTop });
+                    project.createUndoSnapshot();
+                    project.addNode(copy);
+                }
+            };
+            return b;
+        }));
+        return nB;
+    };
+    let buttons = [
+        {
+            type: "button",
+            label: i18next.t("input", "Input"),
+            icon: "arrow-collapse-right",
+            action: () => { ContextMenu.open(e.pageX, e.pageY, workspace, createNodeButtons("INPUT" /* NodeType.INPUT */)); }
+        },
+        {
+            type: "button",
+            label: i18next.t("processors", "Processors"),
+            icon: "cog",
+            action: () => { ContextMenu.open(e.pageX, e.pageY, workspace, createNodeButtons("PROCESSOR" /* NodeType.PROCESSOR */)); }
+        },
+        {
+            type: "button",
+            label: i18next.t("output", "Output"),
+            icon: "arrow-expand-right",
+            action: () => { ContextMenu.open(e.pageX, e.pageY, workspace, createNodeButtons("OUTPUT" /* NodeType.OUTPUT */)); }
+        },
+    ];
+    buttons = buttons.concat([
+        { type: "separator" },
+        {
+            type: "button",
+            icon: "content-copy",
+            label: i18next.t("copy", "Copy"),
+            action: () => {
+                const pos = workspace.offsetToWorld({ x: e.offsetX, y: e.offsetY });
+                copyPasteManager.copy(pos.x, pos.y);
+            },
+            disabled: selectedNodes.length === 0
+        },
+        {
+            type: "button",
+            icon: "content-paste",
+            label: i18next.t("paste", "Paste"),
+            action: () => {
+                project.createUndoSnapshot();
+                const pos = workspace.offsetToWorld({ x: e.offsetX, y: e.offsetY });
+                project.notifyChange();
+                workspace.pasteAt(pos.x, pos.y);
+            },
+            disabled: copyPasteManager.isFull
+        },
+        {
+            type: "button",
+            icon: "delete",
+            label: i18next.t("delete", "Delete"),
+            action: () => {
+                project.createUndoSnapshot();
+                selectedNodes.forEach((n) => {
+                    if (n.frozen) {
+                        return;
+                    }
+                    project.removeNode(n.node);
+                });
+                selectedConnections.forEach((n) => project.removeConnection(n.connection));
+                project.notifyChange();
+            },
+            disabled: (selectedNodes.length === 0 && selectedConnections.length === 0) || (selectedNodes.length !== 0 && selectedNodes.every((n) => n.frozen))
+        },
+        { type: "separator" },
+        {
+            type: "button",
+            icon: "fit-to-page-outline",
+            label: i18next.t("fitViewToSelectedNodes", "Fit view to selected nodes"),
+            action: () => workspace.fitCamera(selectedNodes.map((n) => n.node)),
+            disabled: selectedNodes.length === 0
+        },
+        {
+            type: "button",
+            icon: "snowflake",
+            label: "TOGGLE FROZEN [DEBUG FUNCTION]",
+            action: () => selectedNodes.forEach((n) => n.frozen = !n.frozen),
+            disabled: selectedNodes.length === 0
+        },
+        { type: "separator" },
+        {
+            type: "button",
+            icon: "export",
+            label: "Export to JSON",
+            action: () => {
+                modal.anything("Export result", html `
+                <div style="user-select: all;font-family: monospace; padding: 5px; overflow: auto; background: whitesmoke; max-width:50vw; max-height:50vh">
+                ${exporter.flowToJson(project.toNodeCollection("Exported on " + new Date(), ""))}
+                </div>
+                `);
+            },
+        },
+    ]);
+    return buttons;
+};
+//# sourceMappingURL=workspace-contextmenu-options.js.map

package/lib/flow-viewer/components/writable-dropdown.js

@@ -1,5 +1,51 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,s=arguments.length,i=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(s<3?l(i):s>3?l(t,o,i):l(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement as e,html as t}from"lit";import{customElement as o,property as r,query as l}from"lit/decorators.js";import{PickerStyle as s}from"../styles/picker-styles";let WritableDropdown=class extends e{constructor(){super(...arguments),this.options=[]}static get styles(){return s}firstUpdated(){this.options.length>0&&!this.value&&(this.value=this.options[0].value),this.selectElement.value=this.value}shouldUpdate(e){return this.selectElement&&e.has("value")&&(this.selectElement.value=this.value),super.shouldUpdate(e)}render(){return t`
-        <select id="select-element" @change=${e=>this.dispatchEvent(new Event("onchange",e))} @input=${e=>{this.dispatchEvent(new InputEvent("oninput",e)),this.value=this.selectElement.value}}>
-            ${this.options.map(e=>t`<option value="${e.value}">${e.name}</option>`)}
-        </select>
-        `}};__decorate([r({type:Object,reflect:!0})],WritableDropdown.prototype,"value",void 0),__decorate([r({type:Array})],WritableDropdown.prototype,"options",void 0),__decorate([l("#select-element")],WritableDropdown.prototype,"selectElement",void 0),WritableDropdown=__decorate([o("writable-dropdown")],WritableDropdown);export{WritableDropdown};
+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 } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { PickerStyle } from "../styles/picker-styles";
+let WritableDropdown = class WritableDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+    }
+    static get styles() {
+        return PickerStyle;
+    }
+    firstUpdated() {
+        if (this.options.length > 0 && !this.value) {
+            this.value = this.options[0].value;
+        }
+        this.selectElement.value = this.value;
+    }
+    shouldUpdate(_changedProperties) {
+        if (this.selectElement && _changedProperties.has("value")) {
+            this.selectElement.value = this.value;
+        }
+        return super.shouldUpdate(_changedProperties);
+    }
+    render() {
+        return html `
+        <select id="select-element" @change=${(e) => this.dispatchEvent(new Event("onchange", e))} @input=${(e) => { this.dispatchEvent(new InputEvent("oninput", e)); this.value = this.selectElement.value; }}>
+            ${this.options.map((o) => html `<option value="${o.value}">${o.name}</option>`)}
+        </select>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object, reflect: true })
+], WritableDropdown.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], WritableDropdown.prototype, "options", void 0);
+__decorate([
+    query("#select-element")
+], WritableDropdown.prototype, "selectElement", void 0);
+WritableDropdown = __decorate([
+    customElement("writable-dropdown")
+], WritableDropdown);
+export { WritableDropdown };
+//# sourceMappingURL=writable-dropdown.js.map

package/lib/flow-viewer/converters/node-converter.js

@@ -1 +1,10 @@
-import{project as o}from"../components/flow-editor";export const nodeConverter={fromAttribute:t=>o.nodes.find(o=>o.id===t),toAttribute:o=>o.id};
+import { project } from "../components/flow-editor";
+export const nodeConverter = {
+    fromAttribute: (value) => {
+        return project.nodes.find((n) => n.id === value);
+    },
+    toAttribute: (node) => {
+        return node.id;
+    },
+};
+//# sourceMappingURL=node-converter.js.map

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

@@ -1 +1,19 @@
-export{FlowEditor}from"./components/flow-editor";export{NodePanel}from"./components/node-panel";export{EditorWorkspace}from"./components/editor-workspace";export{TopBar}from"./components/top-bar";export{NodeMenuItem}from"./components/node-menu-item";export{SelectableElement}from"./components/selectable-element";export{FlowNode}from"./components/flow-node";export{FlowNodeSocket}from"./components/flow-node-socket";export{ConnectionLine}from"./components/connection-line";export{ConnectionContainer}from"./components/connection-container";export{SelectionBox}from"./components/selection-box";export{ContextMenu}from"./components/context-menu";export{InternalPicker}from"./components/internal-picker";export{PopupModal}from"./components/popup-modal";export{RuleBrowser}from"./components/rule-browser";export{WritableDropdown}from"./components/writable-dropdown";export{ConfirmationDialog}from"./components/confirmation-dialog";export{NotificationDialog}from"./components/notification-dialog";
+export { FlowEditor } from "./components/flow-editor";
+export { NodePanel } from "./components/node-panel";
+export { EditorWorkspace } from "./components/editor-workspace";
+export { TopBar } from "./components/top-bar";
+export { NodeMenuItem } from "./components/node-menu-item";
+export { SelectableElement } from "./components/selectable-element";
+export { FlowNode } from "./components/flow-node";
+export { FlowNodeSocket } from "./components/flow-node-socket";
+export { ConnectionLine } from "./components/connection-line";
+export { ConnectionContainer } from "./components/connection-container";
+export { SelectionBox } from "./components/selection-box";
+export { ContextMenu } from "./components/context-menu";
+export { InternalPicker } from "./components/internal-picker";
+export { PopupModal } from "./components/popup-modal";
+export { RuleBrowser } from "./components/rule-browser";
+export { WritableDropdown } from "./components/writable-dropdown";
+export { ConfirmationDialog } from "./components/confirmation-dialog";
+export { NotificationDialog } from "./components/notification-dialog";
+//# sourceMappingURL=flow-viewer.js.map

package/lib/flow-viewer/models/camera.js

@@ -1 +1,2 @@
-export{};
+export {};
+//# sourceMappingURL=camera.js.map

package/lib/flow-viewer/models/context-menu-button.js

@@ -1 +1,2 @@
-export{};
+export {};
+//# sourceMappingURL=context-menu-button.js.map

package/lib/flow-viewer/models/light-node-collection.js

@@ -1 +1,2 @@
-export{};
+export {};
+//# sourceMappingURL=light-node-collection.js.map