@openremote/or-rules 1.8.0-snapshot.20250723203453 → 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,n=arguments.length,o=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,s):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,s,l);else for(var c=e.length-1;c>=0;c--)(i=e[c])&&(o=(n<3?i(o):n>3?i(t,s,o):i(t,s))||o);return n>3&&o&&Object.defineProperty(t,s,o),o};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=!1,this.onSelected=e=>{e===this&&(this.isSelected=!0)},this.onDeselected=e=>{e===this&&(this.isSelected=!1)},this.handleSelection=e=>{1===e.buttons?(input.handleSelection(this),e.stopPropagation()):2===e.buttons&&input.handleSelection(this,!0)}}get selected(){return this.isSelected}get handle(){return this.selectableHandle}disconnectedCallback(){super.disconnectedCallback(),this.selected&&input.selected.splice(input.selected.indexOf(this),1),this.isSelected=!1,input.removeListener("selected",this.onSelected),input.removeListener("deselected",this.onDeselected),input.selectables.splice(input.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),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:!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.d.ts

@@ -8,7 +8,7 @@ export declare class SelectionBox extends LitElement {
     private selectionStartPosition;
     private selectionBox;
     protected firstUpdated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private workspaceMouseDown;
     private mouseMove;
     private workspaceMouseUp;

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,html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{Utilities}from"../utils";import{input}from"./flow-editor";let SelectionBox=class extends LitElement{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=>{const 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 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;
+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?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>`:html``}selectInBounds(){input.clearSelection();const 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(const e of input.selectables){const i=e.handle.getBoundingClientRect();Utilities.isBoxInsideBox({x:i.left,y:i.top,width:i.width,height:i.height},t)&&input.select(e,!0)}}};__decorate([property({attribute:!1})],SelectionBox.prototype,"workspace",void 0),__decorate([property({attribute:!1})],SelectionBox.prototype,"isSelecting",void 0),__decorate([property({attribute:!1})],SelectionBox.prototype,"selectionStartPosition",void 0),__decorate([property({attribute:!1})],SelectionBox.prototype,"selectionBox",void 0),SelectionBox=__decorate([customElement("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.d.ts

@@ -4,7 +4,7 @@ declare const TopBar_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -13,7 +13,7 @@ export declare class TopBar extends TopBar_base {
     static get styles(): import("lit").CSSResult;
     application: FlowEditor;
     protected firstUpdated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private save;
     private showRuleBrowser;
     private showSaveAsDialog;

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

@@ -1,51 +1,118 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,i=arguments.length,a=i<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 n=e.length-1;n>=0;n--)(l=e[n])&&(a=(i<3?l(a):i>3?l(t,o,a):l(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};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 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;
+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(){project.addListener("unsavedstateset",(()=>{this.requestUpdate()}))}render(){return html`
-        <span class="title">${i18next.t("flowEditor")}</span>
-        <a class="button" @click="${()=>{project.unsavedState?modal.confirmation((()=>{project.clear(!0)}),"New project"):project.clear(!0)}}">New</a>
-        <a class="button" @click="${this.save}">${i18next.t("save")} <i>${Utilities.ellipsis(project.existingFlowRuleName)}</i>${project.unsavedState&&-1!==project.existingFlowRuleId?"*":""}</a>
-        ${-1===project.existingFlowRuleId?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(){-1===project.existingFlowRuleId?this.showSaveAsDialog():exporter.exportAsExisting(project.existingFlowRuleId,project.toNodeCollection(project.existingFlowRuleName,project.existingFlowRuleDesc))}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 e="",t="";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="${t=>{e=t.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=>{t=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="${()=>{e&&(exporter.exportAsNew(project.toNodeCollection(e,t)),modal.element.close())}}"></or-mwc-input>
-            </div>
-            </div>
-        `,modal.element.header="Save project",modal.element.open()}};__decorate([property({attribute:!1})],TopBar.prototype,"application",void 0),TopBar=__decorate([customElement("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}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=(e,t)=>{const o=input.selected.filter((e=>e instanceof FlowNode&&e.selected)),n=input.selected.filter((e=>e instanceof ConnectionLine&&e.selected)),a=o=>{let n=[{type:"button",label:"",icon:"arrow-left",action:()=>{e.dispatchEvent(new MouseEvent("contextmenu",t))}}];return n=n.concat(integration.nodes.filter((e=>e.type===o)).map((o=>({type:"button",label:i18next.t("flow."+o.name,Utilities.humanLike(o.name)),action:()=>{const n=CopyMachine.copy(o);n.position=e.offsetToWorld({x:t.offsetX-e.offsetLeft,y:t.offsetY-e.offsetTop}),project.createUndoSnapshot(),project.addNode(n)}})))),n};let i=[{type:"button",label:i18next.t("input","Input"),icon:"arrow-collapse-right",action:()=>{ContextMenu.open(t.pageX,t.pageY,e,a("INPUT"))}},{type:"button",label:i18next.t("processors","Processors"),icon:"cog",action:()=>{ContextMenu.open(t.pageX,t.pageY,e,a("PROCESSOR"))}},{type:"button",label:i18next.t("output","Output"),icon:"arrow-expand-right",action:()=>{ContextMenu.open(t.pageX,t.pageY,e,a("OUTPUT"))}}];return i=i.concat([{type:"separator"},{type:"button",icon:"content-copy",label:i18next.t("copy","Copy"),action:()=>{const o=e.offsetToWorld({x:t.offsetX,y:t.offsetY});copyPasteManager.copy(o.x,o.y)},disabled:0===o.length},{type:"button",icon:"content-paste",label:i18next.t("paste","Paste"),action:()=>{project.createUndoSnapshot();const o=e.offsetToWorld({x:t.offsetX,y:t.offsetY});project.notifyChange(),e.pasteAt(o.x,o.y)},disabled:copyPasteManager.isFull},{type:"button",icon:"delete",label:i18next.t("delete","Delete"),action:()=>{project.createUndoSnapshot(),o.forEach((e=>{e.frozen||project.removeNode(e.node)})),n.forEach((e=>project.removeConnection(e.connection))),project.notifyChange()},disabled:0===o.length&&0===n.length||0!==o.length&&o.every((e=>e.frozen))},{type:"separator"},{type:"button",icon:"fit-to-page-outline",label:i18next.t("fitViewToSelectedNodes","Fit view to selected nodes"),action:()=>e.fitCamera(o.map((e=>e.node))),disabled:0===o.length},{type:"button",icon:"snowflake",label:"TOGGLE FROZEN [DEBUG FUNCTION]",action:()=>o.forEach((e=>e.frozen=!e.frozen)),disabled:0===o.length},{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>
-                `)}}]),i};
+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.d.ts

@@ -9,5 +9,5 @@ export declare class WritableDropdown extends LitElement {
     static get styles(): import("lit").CSSResult;
     protected firstUpdated(): void;
     protected shouldUpdate(_changedProperties: PropertyValues): boolean;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,5 +1,51 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(n=(i<3?l(n):i>3?l(t,o,n):l(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement,html}from"lit";import{customElement,property,query}from"lit/decorators.js";import{PickerStyle}from"../styles/picker-styles";let WritableDropdown=class extends LitElement{constructor(){super(...arguments),this.options=[]}static get styles(){return PickerStyle}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 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((e=>html`<option value="${e.value}">${e.name}</option>`))}
-        </select>
-        `}};__decorate([property({type:Object,reflect:!0})],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};
+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}from"../components/flow-editor";export const nodeConverter={fromAttribute:o=>project.nodes.find((t=>t.id===o)),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