@selenite/graph-editor
Version:
A graph editor for visual programming, based on rete and svelte.
109 lines (108 loc) • 4.74 kB
JavaScript
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 __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import {} from '../../socket';
import { get } from 'svelte/store';
import { hidden, Node, registerNode } from '../Node.svelte';
import { isEqual } from 'lodash-es';
import { areTypesCompatible } from '../../plugins/typed-sockets';
import { untrack } from 'svelte';
let VariableNode = class VariableNode extends Node {
variableId = '';
lastValue;
variable = $derived(this.editor?.variables[this.variableId]);
datastructure = $derived(this.variable?.isArray ? 'array' : 'scalar');
constructor(params = {}) {
const { variableId } = params;
super({ ...params, params: { variableId } });
if (!this.editor || !variableId)
return;
this.variableId = variableId;
const variable = this.editor.variables[variableId];
this.addOutData('value', { ...variable, label: variable.name });
$effect.root(() => {
$effect(() => {
if (!this.variable) {
this.factory?.removeNode(this.id);
}
this.variable?.value;
untrack(() => {
this.processDataflow();
});
});
$effect(() => {
this.variable?.name;
untrack(() => {
const output = this.outputs['value'];
if (!output)
return;
output.label = this.variable?.name;
if (this.variable)
this.description = `Get the variable: ${this.variable.name}`;
});
});
$effect(() => {
this.variable?.type;
this.variable?.isArray;
untrack(() => {
const e = this.editor;
if (!e)
return;
const output = this.outputs['value'];
if (!output)
return;
output.socket.type = this.variable?.type;
output.socket.datastructure = this.variable?.isArray ? 'array' : 'scalar';
const t = this.variable?.type;
// Remove invalid connections
for (const conn of this.outConnections['value'] ?? []) {
const target = e.getNode(conn.target);
if (!target)
continue;
const input = target.inputs[conn.targetInput];
if (!input)
continue;
if (areTypesCompatible({ type: t, datastructure: this.datastructure }, input.socket))
continue;
e.removeConnection(conn.id);
}
});
});
});
// this.editor.variables.subscribe(async (variables) => {
// if (variableId in variables) {
// this.label = variables[variableId].name;
// (this.outputs['value'] as Output).socket.type = variables[variableId].type;
// const value = variables[variableId].value;
// if (!isEqual(this.lastValue, value)) setTimeout(this.processDataflow);
// this.lastValue = value;
// } else {
// for (const conns of Object.values(this.outgoingDataConnections))
// for (const conn of Object.values(conns)) await this.editor.removeConnection(conn.id);
// await this.editor.removeNode(this.id);
// return;
// }
// this.updateElement();
// try {
// this.factory.dataflowEngine.reset(this.id);
// } catch (e) {}
// });
}
data(inputs) {
return {
value: this.variable?.value
};
}
};
VariableNode = __decorate([
registerNode('variable.Get'),
hidden,
__metadata("design:paramtypes", [Object])
], VariableNode);
export { VariableNode };