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

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

@@ -1,54 +1,271 @@
-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};
+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

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

@@ -1,34 +1,134 @@
-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;
+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;
         }
-        :host(.small), .small{
-            width: 26px;
-            height: 26px;
-            line-height: 26px;
-            margin: 0;
+        if (this.node.displayCharacter) {
+            this.classList.add("small");
         }
-        .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};
+        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