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

package/lib/flow-viewer/components/internal-picker.js

@@ -1,271 +1,54 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { AssetModelUtil } from "@openremote/model";
-import { nodeConverter } from "../converters/node-converter";
-import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
-import rest from "@openremote/rest";
-import "@openremote/or-asset-tree";
-import { ResizeObserver } from "resize-observer";
-import { project } from "./flow-editor";
-import { NodeUtilities } from "../node-structure";
-import { translate, i18next } from "@openremote/or-translate";
-import { PickerStyle } from "../styles/picker-styles";
-import { Util } from "@openremote/core";
-import { OrAssetAttributePicker, OrAssetAttributePickerPickedEvent } from "@openremote/or-attribute-picker";
-import { showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
-import { getAssetDescriptorIconTemplate } from "@openremote/or-icon";
-import { ifDefined } from "lit/directives/if-defined.js";
-let InternalPicker = class InternalPicker extends translate(i18next)(LitElement) {
-    constructor() {
-        super();
-    }
-    get internal() {
-        return this.node.internals[this.internalIndex];
-    }
-    static get styles() {
-        return [css `
-            :host{
-                padding: 0;
-                margin: 0;
-                display: flex;
-                flex-direction: column;
-                --or-app-color4: var(--or-mwc-input-color);
-            }`,
-            PickerStyle,
-            css `.attribute-label-white {
-                background: #ffffff;
-            }
-            .selected-asset-container {
-                display: flex;
-                align-items: center;
-            }
-            .selected-asset-container:hover {
-                cursor: pointer;
-                background-color: #F9F9F9;
-            }
-            .selected-asset-label {
-                padding: 5px;
-                display: flex;
-                flex-direction: column;
-                line-height: 16px;
-                justify-content: flex-start;
-                font-size: 14px;
-                text-align: left;
-            }
-            .selected-asset-label .asset {
-                color: rgb(76, 76, 76);
-            }
-            .selected-asset-label .asset-attribute {
-                color: grey;
-            }
-            .selected-asset-icon {
-                display: flex;
-                justify-content: center;
-                padding: 0px 5px 0px 5px;
-                --or-icon-width: 20px;
-            }`];
-    }
-    firstUpdated() {
-        this.addEventListener("contextmenu", (e) => e.stopPropagation());
-        this.addEventListener("mousedown", (e) => {
-            project.createUndoSnapshot();
-            return project.notifyChange();
-        });
-        this.resizeObserver = new ResizeObserver((a, b) => {
-            const rect = a[0].contentRect;
-            this.node.size = { x: rect.width - 20, y: rect.height - 20 };
-        });
-        this.resizeObserver.observe(this);
-    }
-    render() {
-        switch (this.internal.picker.type) {
-            case "ASSET_ATTRIBUTE" /* PickerType.ASSET_ATTRIBUTE */:
-                if (this.internal.value && !this.selectedAsset) {
-                    this.setSelectedAssetFromInternalValue();
-                }
-                return this.assetAttributeInput;
-            case "COLOR" /* PickerType.COLOR */:
-                return this.colorInput;
-            case "DOUBLE_DROPDOWN" /* PickerType.DOUBLE_DROPDOWN */:
-                return this.doubleDropdownInput;
-            case "CHECKBOX" /* PickerType.CHECKBOX */:
-                return this.checkBoxInput;
-            case "DROPDOWN" /* PickerType.DROPDOWN */:
-                return this.dropdownInput;
-            case "MULTILINE" /* PickerType.MULTILINE */:
-                return this.multilineInput;
-            case "DATE" /* PickerType.DATE */:
-                return this.getNumberInput(0, undefined, 50);
-            case "NUMBER" /* PickerType.NUMBER */:
-                return this.getNumberInput(undefined, undefined, undefined);
-            case "TEXT" /* PickerType.TEXT */:
-                return this.textInput;
-            default:
-                return html `unimplemented picker`;
-        }
-    }
-    setSocketTypeDynamically(value) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const results = (yield rest.api.AssetResource.queryAssets({
-                ids: [value.assetId],
-                select: {
-                    attributes: [
-                        value.attributeName
-                    ]
-                }
-            })).data;
-            const socket = this.node.outputs[0] || this.node.inputs[0];
-            socket.type = "ANY" /* NodeDataType.ANY */;
-            if (results == null) {
-                return;
-            }
-            if (results[0] == null) {
-                return;
-            }
-            if (results[0].attributes == null) {
-                return;
-            }
-            try {
-                const relevantAttribute = results[0].attributes[value.attributeName];
-                const descriptors = AssetModelUtil.getValueDescriptors();
-                const relevantDescriptor = descriptors.find((c) => c.name === relevantAttribute.type);
-                socket.type = NodeUtilities.convertValueTypeToSocketType(relevantDescriptor);
-            }
-            catch (e) {
-                console.error(e);
-            }
-        });
-    }
-    setSelectedAssetFromInternalValue() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield rest.api.AssetResource.queryAssets({
-                ids: [this.internal.value.assetId]
-            });
-            if (response.data.length === 0) {
-                console.warn(`Asset with id ${this.internal.value.assetId} is missing`);
-                return;
-            }
-            this.selectedAsset = response.data[0];
-        });
-    }
-    get assetAttributeInput() {
-        var _a, _b, _c, _d;
-        const openDialog = () => {
-            const dialog = showDialog(new OrAssetAttributePicker()
-                .setShowOnlyRuleStateAttrs(true)
-                .setShowOnlyDatapointAttrs(false)
-                .setMultiSelect(false));
-            dialog.addEventListener(OrAssetAttributePickerPickedEvent.NAME, (ev) => __awaiter(this, void 0, void 0, function* () {
-                const value = {
-                    assetId: ev.detail[0].id,
-                    attributeName: ev.detail[0].name
-                };
-                yield this.setSocketTypeDynamically(value);
-                this.setValue(value);
-                yield this.setSelectedAssetFromInternalValue();
-            }));
-        };
-        let selectedAttrLabel = '?';
-        if (this.selectedAsset && this.selectedAsset.attributes && ((_b = (_a = this.internal) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.attributeName)) {
-            const attrName = (_d = (_c = this.internal) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.attributeName;
-            const attributeDescriptor = AssetModelUtil.getAttributeDescriptor(attrName, this.selectedAsset.type);
-            let attr = this.selectedAsset.attributes[attrName];
-            if (attr) {
-                selectedAttrLabel = Util.getAttributeLabel(attr, attributeDescriptor, this.selectedAsset.type, true);
-            }
-        }
-        const descriptor = this.selectedAsset ? AssetModelUtil.getAssetDescriptor(this.selectedAsset.type) : undefined;
-        const myIcon = getAssetDescriptorIconTemplate(descriptor);
-        return html `<div>
-            ${(this.selectedAsset ?
-            html `<div class="attribute-label attribute-label-white selected-asset-container" @click="${() => openDialog()}">
-                        <div class="selected-asset-icon">${myIcon}</div>
-                        <div class="selected-asset-label">
-                            <div class="asset">${this.selectedAsset.name}</div>
-                            <div class="asset-attribute">${selectedAttrLabel}</div>
-                        </div>
-                    </div>` :
-            html `<or-mwc-input class="attribute-label-white" .type="${InputType.BUTTON}" label="attribute" icon="plus" @or-mwc-input-changed="${() => openDialog()}"></or-mwc-input>`)}
-        </div>`;
-    }
-    get colorInput() {
-        return html `<or-mwc-input type="color"></or-mwc-input>`; // looks strange
-    }
-    get doubleDropdownInput() {
-        return html `unimplemented`;
-    }
-    get dropdownInput() {
-        return html `<writable-dropdown @input="${(e) => this.setValue(e.target.value)}" .value="${this.internal.value}" .options="${this.internal.picker.options}">
-        </writable-dropdown>`;
-    }
-    get checkBoxInput() {
-        return html `<input type="checkbox" ?checked="${this.internal.value || false}" @input="${(e) => this.setValue(e.target.checked)}"/>`;
-        return html `<or-mwc-input type="checkbox" 
-        @or-mwc-input-changed="${(e) => {
-            this.setValue(e.detail.value);
-        }}"></or-mwc-input>`;
-    }
-    get multilineInput() {
-        const sizeString = this.node.size ? `width:${this.node.size.x}px; height:${this.node.size.y}px` : ``;
-        return html `<textarea @wheel="${(e) => {
-            if (e.target.clientHeight < e.target.scrollHeight) {
-                return e.stopPropagation();
-            }
-        }}" style="${sizeString}" @input="${(e) => this.setValue(e.target.value)}" placeholder="${this.internal.name}">${this.internal.value || ""}</textarea>`;
-    }
-    getNumberInput(min, max, width) {
-        return html `<input
-                @wheel="${(e) => {
-            if (e.target === this.shadowRoot.activeElement) {
-                return e.stopPropagation();
-            }
-        }}"
-                @input="${(e) => this.setValue(parseFloat(e.target.value))}"
-                value="${this.internal.value || 0}" type="number" placeholder="${this.internal.name}"
-                style="max-width: ${ifDefined(width)}px"
-                min="${ifDefined(min)}" max="${ifDefined(max)}"
-        />`;
-    }
-    get textInput() {
-        return html `<input @input="${(e) => this.setValue(e.target.value)}" value="${this.internal.value || ""}" type="text" placeholder="${this.internal.name}"/>`;
-    }
-    setValue(value) {
-        this.node.internals[this.internalIndex].value = value;
-        this.onPicked();
-    }
-    onPicked() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.updateComplete;
-            this.dispatchEvent(new CustomEvent("picked"));
-        });
-    }
-};
-__decorate([
-    property({ converter: nodeConverter, reflect: true })
-], InternalPicker.prototype, "node", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], InternalPicker.prototype, "internalIndex", void 0);
-__decorate([
-    property({ type: Object })
-], InternalPicker.prototype, "selectedAsset", void 0);
-InternalPicker = __decorate([
-    customElement("internal-picker")
-], InternalPicker);
-export { InternalPicker };
-//# sourceMappingURL=internal-picker.js.map
+var __decorate=this&&this.__decorate||function(e,t,i,r){var s,n=arguments.length,o=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(n<3?s(o):n>3?s(t,i,o):s(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))(function(s,n){function o(e){try{l(r.next(e))}catch(e){n(e)}}function a(e){try{l(r.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?s(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(o,a)}l((r=r.apply(e,t||[])).next())})};import{LitElement as e,html as t,css as i}from"lit";import{customElement as r,property as s}from"lit/decorators.js";import{AssetModelUtil as n}from"@openremote/model";import{nodeConverter as o}from"../converters/node-converter";import{InputType as a}from"@openremote/or-mwc-components/or-mwc-input";import l from"@openremote/rest";import"@openremote/or-asset-tree";import{ResizeObserver as c}from"resize-observer";import{project as u}from"./flow-editor";import{NodeUtilities as d}from"../node-structure";import{translate as p,i18next as h}from"@openremote/or-translate";import{PickerStyle as m}from"../styles/picker-styles";import{Util as v}from"@openremote/core";import{OrAssetAttributePicker as f,OrAssetAttributePickerPickedEvent as y}from"@openremote/or-attribute-picker";import{showDialog as b}from"@openremote/or-mwc-components/or-mwc-dialog";import{getAssetDescriptorIconTemplate as g}from"@openremote/or-icon";import{ifDefined as w}from"lit/directives/if-defined.js";let InternalPicker=class extends p(h)(e){constructor(){super()}get internal(){return this.node.internals[this.internalIndex]}static get styles(){return[i`
+            :host{
+                padding: 0;
+                margin: 0;
+                display: flex;
+                flex-direction: column;
+                --or-app-color4: var(--or-mwc-input-color);
+            }`,m,i`.attribute-label-white {
+                background: #ffffff;
+            }
+            .selected-asset-container {
+                display: flex;
+                align-items: center;
+            }
+            .selected-asset-container:hover {
+                cursor: pointer;
+                background-color: #F9F9F9;
+            }
+            .selected-asset-label {
+                padding: 5px;
+                display: flex;
+                flex-direction: column;
+                line-height: 16px;
+                justify-content: flex-start;
+                font-size: 14px;
+                text-align: left;
+            }
+            .selected-asset-label .asset {
+                color: rgb(76, 76, 76);
+            }
+            .selected-asset-label .asset-attribute {
+                color: grey;
+            }
+            .selected-asset-icon {
+                display: flex;
+                justify-content: center;
+                padding: 0px 5px 0px 5px;
+                --or-icon-width: 20px;
+            }`]}firstUpdated(){this.addEventListener("contextmenu",e=>e.stopPropagation()),this.addEventListener("mousedown",e=>(u.createUndoSnapshot(),u.notifyChange())),this.resizeObserver=new c((e,t)=>{let i=e[0].contentRect;this.node.size={x:i.width-20,y:i.height-20}}),this.resizeObserver.observe(this)}render(){switch(this.internal.picker.type){case"ASSET_ATTRIBUTE":return this.internal.value&&!this.selectedAsset&&this.setSelectedAssetFromInternalValue(),this.assetAttributeInput;case"COLOR":return this.colorInput;case"DOUBLE_DROPDOWN":return this.doubleDropdownInput;case"CHECKBOX":return this.checkBoxInput;case"DROPDOWN":return this.dropdownInput;case"MULTILINE":return this.multilineInput;case"DATE":return this.getNumberInput(0,void 0,50);case"NUMBER":return this.getNumberInput(void 0,void 0,void 0);case"TEXT":return this.textInput;default:return t`unimplemented picker`}}setSocketTypeDynamically(e){return __awaiter(this,void 0,void 0,function*(){let t=(yield l.api.AssetResource.queryAssets({ids:[e.assetId],select:{attributes:[e.attributeName]}})).data,i=this.node.outputs[0]||this.node.inputs[0];if((i.type="ANY",null!=t&&null!=t[0])&&null!=t[0].attributes)try{let r=t[0].attributes[e.attributeName],s=n.getValueDescriptors().find(e=>e.name===r.type);i.type=d.convertValueTypeToSocketType(s)}catch(e){console.error(e)}})}setSelectedAssetFromInternalValue(){return __awaiter(this,void 0,void 0,function*(){let e=yield l.api.AssetResource.queryAssets({ids:[this.internal.value.assetId]});if(0===e.data.length)return void console.warn(`Asset with id ${this.internal.value.assetId} is missing`);this.selectedAsset=e.data[0]})}get assetAttributeInput(){var e,i,r,s;let o=()=>{b(new f().setShowOnlyRuleStateAttrs(!0).setShowOnlyDatapointAttrs(!1).setMultiSelect(!1)).addEventListener(y.NAME,e=>__awaiter(this,void 0,void 0,function*(){let t={assetId:e.detail[0].id,attributeName:e.detail[0].name};yield this.setSocketTypeDynamically(t),this.setValue(t),yield this.setSelectedAssetFromInternalValue()}))},l="?";if(this.selectedAsset&&this.selectedAsset.attributes&&(null==(i=null==(e=this.internal)?void 0:e.value)?void 0:i.attributeName)){let e=null==(s=null==(r=this.internal)?void 0:r.value)?void 0:s.attributeName,t=n.getAttributeDescriptor(e,this.selectedAsset.type),i=this.selectedAsset.attributes[e];i&&(l=v.getAttributeLabel(i,t,this.selectedAsset.type,!0))}let c=g(this.selectedAsset?n.getAssetDescriptor(this.selectedAsset.type):void 0);return t`<div>
+            ${this.selectedAsset?t`<div class="attribute-label attribute-label-white selected-asset-container" @click="${()=>o()}">
+                        <div class="selected-asset-icon">${c}</div>
+                        <div class="selected-asset-label">
+                            <div class="asset">${this.selectedAsset.name}</div>
+                            <div class="asset-attribute">${l}</div>
+                        </div>
+                    </div>`:t`<or-mwc-input class="attribute-label-white" .type="${a.BUTTON}" label="attribute" icon="plus" @or-mwc-input-changed="${()=>o()}"></or-mwc-input>`}
+        </div>`}get colorInput(){return t`<or-mwc-input type="color"></or-mwc-input>`}get doubleDropdownInput(){return t`unimplemented`}get dropdownInput(){return t`<writable-dropdown @input="${e=>this.setValue(e.target.value)}" .value="${this.internal.value}" .options="${this.internal.picker.options}">
+        </writable-dropdown>`}get checkBoxInput(){return t`<input type="checkbox" ?checked="${this.internal.value||!1}" @input="${e=>this.setValue(e.target.checked)}"/>`}get multilineInput(){let e=this.node.size?`width:${this.node.size.x}px; height:${this.node.size.y}px`:"";return t`<textarea @wheel="${e=>{if(e.target.clientHeight<e.target.scrollHeight)return e.stopPropagation()}}" style="${e}" @input="${e=>this.setValue(e.target.value)}" placeholder="${this.internal.name}">${this.internal.value||""}</textarea>`}getNumberInput(e,i,r){return t`<input
+                @wheel="${e=>{if(e.target===this.shadowRoot.activeElement)return e.stopPropagation()}}"
+                @input="${e=>this.setValue(parseFloat(e.target.value))}"
+                value="${this.internal.value||0}" type="number" placeholder="${this.internal.name}"
+                style="max-width: ${w(r)}px"
+                min="${w(e)}" max="${w(i)}"
+        />`}get textInput(){return t`<input @input="${e=>this.setValue(e.target.value)}" value="${this.internal.value||""}" type="text" placeholder="${this.internal.name}"/>`}setValue(e){this.node.internals[this.internalIndex].value=e,this.onPicked()}onPicked(){return __awaiter(this,void 0,void 0,function*(){yield this.updateComplete,this.dispatchEvent(new CustomEvent("picked"))})}};__decorate([s({converter:o,reflect:!0})],InternalPicker.prototype,"node",void 0),__decorate([s({type:Number,reflect:!0})],InternalPicker.prototype,"internalIndex",void 0),__decorate([s({type:Object})],InternalPicker.prototype,"selectedAsset",void 0),InternalPicker=__decorate([r("internal-picker")],InternalPicker);export{InternalPicker};

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

@@ -1,134 +1,34 @@
-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 { i18next, translate } from "@openremote/or-translate";
-import { newIds, project } from "./flow-editor";
-import { CopyMachine } from "../node-structure";
-let NodeMenuItem = class NodeMenuItem extends translate(i18next)(LitElement) {
-    constructor() {
-        super();
-        this.isDragging = false;
-        this.x = 0;
-        this.y = 0;
-        this.xOffset = 0;
-        this.yOffset = 0;
-        this.startDrag = (e) => {
-            this.xOffset = e.offsetX;
-            this.yOffset = e.offsetY;
-            this.x = e.clientX;
-            this.y = e.clientY;
-            this.isDragging = true;
-            window.addEventListener("mouseup", this.stopDrag);
-            window.addEventListener("mousemove", this.onMove);
-        };
-        this.onMove = (e) => {
-            this.x = e.clientX;
-            this.y = e.clientY;
-        };
-        this.stopDrag = (e) => {
-            window.removeEventListener("mouseup", this.stopDrag);
-            window.removeEventListener("mousemove", this.onMove);
-            this.isDragging = false;
-            if (Utilities.isPointInsideBox(e.offsetX, e.offsetY, {
-                x: this.workspace.clientRect.left,
-                y: this.workspace.clientRect.top,
-                width: this.workspace.clientRect.width,
-                height: this.workspace.clientRect.height,
-            })) {
-                const copy = CopyMachine.copy(this.node);
-                newIds.add(copy.id);
-                copy.position = this.workspace.offsetToWorld({ x: e.offsetX - this.workspace.clientRect.left, y: e.offsetY - this.workspace.clientRect.top });
-                project.createUndoSnapshot();
-                project.addNode(copy);
-                project.notifyChange();
-            }
-        };
-        this.addEventListener("mousedown", this.startDrag);
-    }
-    static get styles() {
-        return css `
-        :host, .node-drag-item{
-            padding: 4px;
-            margin: 0 0 15px 0;
-            display: inline-block;
-            text-align: center;
-            color: white;
-            border-radius: var(--roundness);
-            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;
-
-            width: calc(var(--nodepanel-width) - 4px * 2);
-            height: 22px;
-            line-height: 22px;
-            cursor:grab;
-            transition: box-shadow 150ms;
-        }
-        :host(.small), .small{
-            width: 26px;
-            height: 26px;
-            line-height: 26px;
-            margin: 0;
-        }
-        .node-drag-item{
-            z-index: 5000;
-            position: fixed;
-            background: inherit;
-            box-shadow: rgba(0, 0, 0, 0.2) 0 2px 15px;
-            filter: opacity(90%);
-            pointer-events: none;
-        }
-        `;
-    }
-    render() {
-        switch (this.node.type) {
-            case "INPUT" /* NodeType.INPUT */:
-                this.classList.add("input-node");
-                break;
-            case "PROCESSOR" /* NodeType.PROCESSOR */:
-                this.classList.add("processor-node");
-                break;
-            case "OUTPUT" /* NodeType.OUTPUT */:
-                this.classList.add("output-node");
-                break;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement as e,html as t,css as i}from"lit";import{customElement as o,property as s}from"lit/decorators.js";import{Utilities as r}from"../utils";import{i18next as a,translate as n}from"@openremote/or-translate";import{newIds as d,project as h}from"./flow-editor";import{CopyMachine as l}from"../node-structure";let NodeMenuItem=class extends n(a)(e){constructor(){super(),this.isDragging=!1,this.x=0,this.y=0,this.xOffset=0,this.yOffset=0,this.startDrag=e=>{this.xOffset=e.offsetX,this.yOffset=e.offsetY,this.x=e.clientX,this.y=e.clientY,this.isDragging=!0,window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onMove)},this.onMove=e=>{this.x=e.clientX,this.y=e.clientY},this.stopDrag=e=>{if(window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onMove),this.isDragging=!1,r.isPointInsideBox(e.offsetX,e.offsetY,{x:this.workspace.clientRect.left,y:this.workspace.clientRect.top,width:this.workspace.clientRect.width,height:this.workspace.clientRect.height})){let t=l.copy(this.node);d.add(t.id),t.position=this.workspace.offsetToWorld({x:e.offsetX-this.workspace.clientRect.left,y:e.offsetY-this.workspace.clientRect.top}),h.createUndoSnapshot(),h.addNode(t),h.notifyChange()}},this.addEventListener("mousedown",this.startDrag)}static get styles(){return i`
+        :host, .node-drag-item{
+            padding: 4px;
+            margin: 0 0 15px 0;
+            display: inline-block;
+            text-align: center;
+            color: white;
+            border-radius: var(--roundness);
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;
+
+            width: calc(var(--nodepanel-width) - 4px * 2);
+            height: 22px;
+            line-height: 22px;
+            cursor:grab;
+            transition: box-shadow 150ms;
         }
-        if (this.node.displayCharacter) {
-            this.classList.add("small");
+        :host(.small), .small{
+            width: 26px;
+            height: 26px;
+            line-height: 26px;
+            margin: 0;
         }
-        this.title = i18next.t(this.node.name, Utilities.humanLike(this.node.name.toLowerCase()));
-        return html `
-        <div class="label">${this.flowNodeName}</div>
-        ${this.isDragging ? this.dragNodeTemplate : null}
-        `;
-    }
-    get dragNodeTemplate() {
-        return html `<div class="node-drag-item ${(this.node.displayCharacter ? "small" : null)}" style="top: ${this.y - this.yOffset}px; left: ${this.x - this.xOffset}px"><div class="label">${this.flowNodeName}</div></div>`;
-    }
-    get flowNodeName() {
-        return i18next.t(this.node.displayCharacter ? "flow." + this.node.displayCharacter : "flow." + this.node.name, this.node.displayCharacter || this.node.name || "invalid node name");
-    }
-};
-__decorate([
-    property({ attribute: false })
-], NodeMenuItem.prototype, "node", void 0);
-__decorate([
-    property({ attribute: false })
-], NodeMenuItem.prototype, "isDragging", void 0);
-__decorate([
-    property({ attribute: false })
-], NodeMenuItem.prototype, "x", void 0);
-__decorate([
-    property({ attribute: false })
-], NodeMenuItem.prototype, "y", void 0);
-__decorate([
-    property({ attribute: false })
-], NodeMenuItem.prototype, "workspace", void 0);
-NodeMenuItem = __decorate([
-    customElement("node-menu-item")
-], NodeMenuItem);
-export { NodeMenuItem };
-//# sourceMappingURL=node-menu-item.js.map
+        .node-drag-item{
+            z-index: 5000;
+            position: fixed;
+            background: inherit;
+            box-shadow: rgba(0, 0, 0, 0.2) 0 2px 15px;
+            filter: opacity(90%);
+            pointer-events: none;
+        }
+        `}render(){switch(this.node.type){case"INPUT":this.classList.add("input-node");break;case"PROCESSOR":this.classList.add("processor-node");break;case"OUTPUT":this.classList.add("output-node")}return this.node.displayCharacter&&this.classList.add("small"),this.title=a.t(this.node.name,r.humanLike(this.node.name.toLowerCase())),t`
+        <div class="label">${this.flowNodeName}</div>
+        ${this.isDragging?this.dragNodeTemplate:null}
+        `}get dragNodeTemplate(){return t`<div class="node-drag-item ${this.node.displayCharacter?"small":null}" style="top: ${this.y-this.yOffset}px; left: ${this.x-this.xOffset}px"><div class="label">${this.flowNodeName}</div></div>`}get flowNodeName(){return a.t(this.node.displayCharacter?"flow."+this.node.displayCharacter:"flow."+this.node.name,this.node.displayCharacter||this.node.name||"invalid node name")}};__decorate([s({attribute:!1})],NodeMenuItem.prototype,"node",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"isDragging",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"x",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"y",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"workspace",void 0),NodeMenuItem=__decorate([o("node-menu-item")],NodeMenuItem);export{NodeMenuItem};