@babsey/code-graph 0.0.0

package/dist/code-graph.js

@@ -0,0 +1,1799 @@
+import { AbstractNode, NodeInterfaceType, NodeInterface, ButtonInterfaceComponent, CheckboxInterfaceComponent, IntegerInterfaceComponent, NumberInterfaceComponent, SelectInterfaceComponent, SliderInterfaceComponent, TextInputInterfaceComponent, TextareaInputInterfaceComponent, setType, allowMultipleConnections, IntegerInterface as IntegerInterface$1, TextInputInterface as TextInputInterface$1, displayInSidebar, sortTopologically, useViewModel, useTemporaryConnection, Components, useGraph, GRAPH_NODE_TYPE_PREFIX, useTransform, useNodeCategories, BaklavaEditor, DEFAULT_TOOLBAR_COMMANDS, useBaklava, DependencyEngine, applyResult } from "baklavajs";
+import { ButtonInterfaceComponent as ButtonInterfaceComponent2, CheckboxInterfaceComponent as CheckboxInterfaceComponent2, IntegerInterfaceComponent as IntegerInterfaceComponent2, NumberInterfaceComponent as NumberInterfaceComponent2, SelectInterfaceComponent as SelectInterfaceComponent2, SliderInterfaceComponent as SliderInterfaceComponent2, TextInputInterfaceComponent as TextInputInterfaceComponent2, TextareaInputInterfaceComponent as TextareaInputInterfaceComponent2 } from "baklavajs";
+import mustache from "mustache";
+import { reactive, defineComponent, createElementBlock, openBlock, toDisplayString, markRaw, ref, computed, onMounted, onUpdated, normalizeClass, createCommentVNode, createElementVNode, unref, renderSlot, createStaticVNode, onBeforeUnmount, normalizeStyle, withModifiers, createBlock, withDirectives, Fragment, createTextVNode, createVNode, withKeys, vModelText, renderList, nextTick, toRef, resolveDynamicComponent, inject, Transition, withCtx, onUnmounted, normalizeProps, guardReactiveProps, mergeProps } from "vue";
+import toposort from "toposort";
+import { v4 } from "uuid";
+import { usePointer } from "@vueuse/core";
+class AbstractCodeNode extends AbstractNode {
+  state;
+  code;
+  isCodeNode = true;
+  inputs = {};
+  outputs = {};
+  constructor() {
+    super();
+    this.initializeIo();
+    this.width = 400;
+    this.twoColumn = true;
+    this.state = reactive({
+      codeTemplate: "{{ &outputs.code }}",
+      hidden: false,
+      integrated: false,
+      modules: [],
+      script: "",
+      variableName: ""
+    });
+  }
+  get codeTemplate() {
+    return this.state.codeTemplate;
+  }
+  get idx() {
+    return this.code?.codeNodes.filter((node) => !node.state.integrated).indexOf(this) ?? -1;
+  }
+  get idxByVariableNames() {
+    return this.code?.getNodesBySameVariableNames(this.state.variableName).indexOf(this) ?? -1;
+  }
+  get script() {
+    return this.state.script;
+  }
+  get shortId() {
+    return this.id.slice(0, 6);
+  }
+  get variableName() {
+    return this.state.variableName ? this.state.variableName + (this.idxByVariableNames + 1) : "";
+  }
+  /**
+   * Get connected nodes to the node.
+   * @param type inputs or outputs
+   * @returns code node instances
+   */
+  getConnectedNodes(type) {
+    let nodeIds = [];
+    if (type !== "inputs") {
+      const targets = this.graph?.connections.filter((c) => c.from.name !== "_node").filter((c) => c.from.nodeId === this.id).map((c) => c.to.nodeId);
+      if (targets) nodeIds = nodeIds.concat(targets);
+    }
+    if (type !== "outputs") {
+      const sources = this.graph?.connections.filter((c) => c.from.name !== "_node").filter((c) => c.to.nodeId === this.id).map((c) => c.from.nodeId);
+      if (sources) nodeIds = nodeIds.concat(sources);
+    }
+    if (!nodeIds || nodeIds.length == 0) return [];
+    return nodeIds.map((nodeId) => this.graph?.findNodeById(nodeId));
+  }
+  registerCode(code) {
+    this.code = code;
+  }
+  /**
+   * Render code of this node.
+   */
+  renderCode() {
+    const inputs = {};
+    Object.keys(this.inputs).forEach((intfKey) => {
+      if (intfKey === "_node") return;
+      const intf = this.inputs[intfKey];
+      const value = intf.isString ? `'${intf.value}'` : intf.value;
+      if (intf && intf.state) inputs[intfKey] = intf.state.script.length > 0 ? intf.state.script : value;
+    });
+    const outputs = {};
+    Object.keys(this.outputs).forEach((intfKey) => {
+      if (intfKey === "_node") return;
+      const intf = this.outputs[intfKey];
+      const value = intf.isString ? `'${intf.value}'` : intf.value;
+      if (intf && intf.state) outputs[intfKey] = value;
+    });
+    this.state.script = mustache.render(this.state.codeTemplate, { inputs, outputs });
+    if (this.outputs.code) this.outputs.code.state.script = this.state.script;
+  }
+  updateOutputVariableName() {
+    if (this.outputs.code) this.outputs.code.name = this.variableName;
+  }
+}
+class CodeNode extends AbstractCodeNode {
+  /**
+   * The default implementation does nothing.
+   * Overwrite this method to do calculation.
+   * @param inputs Values of all input interfaces
+   * @param globalValues Set of values passed to every node by the engine plugin
+   * @return Values for output interfaces
+   */
+  calculate;
+  load(state) {
+    super.load(state);
+    loadNodeState(this.graph, state);
+  }
+  save() {
+    const state = super.save();
+    saveNodeState(this.graph, state);
+    return state;
+  }
+  updateModules(modules) {
+    if (modules) {
+      this.state.modules = modules;
+    } else if (this.type.includes(".")) {
+      const modules2 = this.type.split(".");
+      this.state.modules.push(modules2.slice(0, modules2.length - 1).join("."));
+    }
+  }
+}
+const loadNodeState = (graph, nodeState) => {
+  if (!graph) return;
+  const node = graph.findNodeById(nodeState.id);
+  if (!node || node.subgraph) return;
+  const codeNode = node;
+  if (codeNode.state) {
+    codeNode.state.integrated = nodeState.integrated;
+    codeNode.state.modules = nodeState.modules;
+    codeNode.state.props = nodeState.props;
+  }
+  Object.entries(nodeState.inputs).forEach(([inputKey, inputItem]) => {
+    if (inputKey === "_node") return;
+    if (codeNode.inputs[inputKey]) codeNode.inputs[inputKey].hidden = inputItem.hidden;
+  });
+  Object.entries(nodeState.outputs).forEach(([outputKey, outputItem]) => {
+    if (outputKey === "_node") return;
+    if (codeNode.outputs[outputKey]) codeNode.outputs[outputKey].hidden = outputItem.hidden;
+  });
+};
+const saveNodeState = (graph, nodeState) => {
+  if (!graph) return;
+  const node = graph.findNodeById(nodeState.id);
+  if (!node || node.subgraph) return;
+  const codeNode = node;
+  if (codeNode.state) {
+    nodeState.integrated = codeNode.state.integrated;
+    nodeState.modules = codeNode.state.modules;
+  }
+  Object.entries(nodeState.inputs).forEach(([inputKey, inputItem]) => {
+    if (inputKey === "_node") return;
+    if (codeNode.inputs[inputKey]) inputItem.hidden = codeNode.inputs[inputKey].hidden;
+  });
+  Object.entries(nodeState.outputs).forEach(([outputKey, outputItem]) => {
+    if (outputKey === "_node") return;
+    if (codeNode.outputs[outputKey]) outputItem.hidden = codeNode.outputs[outputKey].hidden;
+  });
+};
+new NodeInterfaceType("boolean");
+new NodeInterfaceType("dict");
+new NodeInterfaceType("list");
+const nodeType = new NodeInterfaceType("node");
+const numberType = new NodeInterfaceType("number");
+const stringType = new NodeInterfaceType("string");
+const _hoisted_1$f = ["title"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "CodeNodeInterface",
+  props: {
+    intf: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        title: _ctx.intf.state?.script
+      }, toDisplayString(_ctx.intf.name), 9, _hoisted_1$f);
+    };
+  }
+});
+class CodeNodeInterface extends NodeInterface {
+  optional = false;
+  code;
+  state;
+  constructor(name, value) {
+    super(name, value);
+    this.setComponent(markRaw(_sfc_main$g));
+    this.state = reactive({
+      script: ""
+    });
+  }
+  get shortId() {
+    return this.id.slice(0, 6);
+  }
+  // override get value(): T {
+  //   return super.value
+  // }
+  // override set value(value: T) {
+  //   super.value = value;
+  //   if (this.name !== '_node') this.setHidden(false);
+  // }
+}
+class ButtonInterface extends CodeNodeInterface {
+  component = markRaw(ButtonInterfaceComponent);
+  callback;
+  constructor(name, callback) {
+    super(name, void 0);
+    this.callback = callback;
+    this.setPort(false);
+  }
+}
+class CheckboxInterface extends CodeNodeInterface {
+  component = markRaw(CheckboxInterfaceComponent);
+}
+class BaseNumericInterface extends CodeNodeInterface {
+  min;
+  max;
+  constructor(name, value, min, max) {
+    super(name, value);
+    this.min = min;
+    this.max = max;
+  }
+  validate(v) {
+    return (this.min === void 0 || v >= this.min) && (this.max === void 0 || v <= this.max);
+  }
+}
+class IntegerInterface extends BaseNumericInterface {
+  component = markRaw(IntegerInterfaceComponent);
+  validate(v) {
+    return Number.isInteger(v) && super.validate(v);
+  }
+}
+class CodeInputInterface extends CodeNodeInterface {
+  isCodeInput = true;
+  constructor(name = "", value) {
+    super(name, value);
+    this.setComponent(markRaw(_sfc_main$g));
+  }
+}
+class CodeOutputInterface extends CodeNodeInterface {
+  isCodeOutput = true;
+  constructor(name = "", value = "") {
+    super(name, value);
+    this.setComponent(markRaw(_sfc_main$g));
+  }
+  get script() {
+    return this.state.script;
+  }
+  get value() {
+    return super.value;
+  }
+  set value(value) {
+    super.value = value;
+    this.state.script = this.name.length > 0 ? this.name : this.value;
+  }
+}
+class NumberInterface extends BaseNumericInterface {
+  component = markRaw(NumberInterfaceComponent);
+}
+class SelectInterface extends CodeNodeInterface {
+  component = markRaw(SelectInterfaceComponent);
+  items;
+  constructor(name, value, items) {
+    super(name, value);
+    this.items = items;
+  }
+}
+class SliderInterface extends BaseNumericInterface {
+  component = markRaw(SliderInterfaceComponent);
+  min;
+  max;
+  constructor(name, value, min, max) {
+    super(name, value, min, max);
+    this.min = min;
+    this.max = max;
+  }
+}
+class TextInterface extends CodeNodeInterface {
+  component = markRaw(TextInputInterfaceComponent);
+  constructor(name, value) {
+    super(name, value);
+    this.setPort(false);
+  }
+}
+class TextInputInterface extends CodeNodeInterface {
+  isString = true;
+  component = markRaw(TextInputInterfaceComponent);
+}
+class TextareaInputInterface extends CodeNodeInterface {
+  component = markRaw(TextareaInputInterfaceComponent);
+}
+function defineCodeNode(definition) {
+  return class extends CodeNode {
+    type = definition.type;
+    inputs = {};
+    outputs = {};
+    constructor() {
+      super();
+      this._title = definition.title ?? definition.type;
+      this.updateModules(definition.modules);
+      if (definition.codeTemplate) this.state.codeTemplate = definition.codeTemplate(this);
+      if (definition.variableName) this.state.variableName = definition.variableName;
+      this.addInput(
+        "_node",
+        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
+      );
+      this.addOutput(
+        "_node",
+        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
+      );
+      this.executeFactory("input", definition.inputs);
+      this.executeFactory("output", definition.outputs);
+      definition.onCreate?.call(this);
+    }
+    calculate = definition.calculate ? (inputs, globalValues) => ({
+      ...definition.calculate.call(this, inputs, globalValues),
+      _node: null
+    }) : void 0;
+    onPlaced() {
+      definition.onPlaced?.call(this);
+    }
+    onDestroy() {
+      definition.onDestroy?.call(this);
+    }
+    onCodeUpdate() {
+      definition.onCodeUpdate?.call(this);
+    }
+    executeFactory(type, factory) {
+      Object.keys(factory || {}).forEach((k) => {
+        const intf = factory[k]();
+        if (type === "input") {
+          this.addInput(k, intf);
+        } else {
+          this.addOutput(k, intf);
+        }
+      });
+    }
+  };
+}
+class DynamicCodeNode extends CodeNode {
+  /**
+   * The default implementation does nothing.
+   * Overwrite this method to do calculation.
+   * @param inputs Values of all input interfaces
+   * @param globalValues Set of values passed to every node by the engine plugin
+   * @return Values for output interfaces
+   */
+  calculate;
+}
+function defineDynamicCodeNode(definition) {
+  return class extends DynamicCodeNode {
+    type = definition.type;
+    inputs = {};
+    outputs = {};
+    calculate;
+    preventUpdate = false;
+    staticInputKeys = Object.keys(definition.inputs ?? {});
+    staticOutputKeys = Object.keys(definition.outputs ?? {});
+    constructor() {
+      super();
+      this._title = definition.title ?? definition.type;
+      this.updateModules(definition.modules);
+      if (definition.codeTemplate) this.state.codeTemplate = definition.codeTemplate(this);
+      if (definition.variableName) this.state.variableName = definition.variableName;
+      this.addInput(
+        "_node",
+        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
+      );
+      this.addOutput(
+        "_node",
+        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
+      );
+      this.staticInputKeys.push("_node");
+      this.staticOutputKeys.push("_node");
+      this.executeFactory("input", definition.inputs);
+      this.executeFactory("output", definition.outputs);
+      if (definition.calculate) {
+        this.calculate = (inputs, globalValues) => ({
+          ...definition.calculate?.call(this, inputs, globalValues),
+          _node: null
+        });
+      }
+      definition.onCreate?.call(this);
+    }
+    onPlaced() {
+      this.events.update.subscribe(this, (data) => {
+        if (!data) return;
+        if (data.type === "input" && this.staticInputKeys.includes(data.name) || data.type === "output" && this.staticOutputKeys.includes(data.name)) {
+          this.onUpdate();
+        }
+      });
+      this.onUpdate();
+      definition.onPlaced?.call(this);
+    }
+    onDestroy() {
+      definition.onDestroy?.call(this);
+    }
+    onCodeUpdate() {
+      definition.onCodeUpdate?.call(this);
+    }
+    load(state) {
+      this.preventUpdate = true;
+      this.hooks.beforeLoad.execute(state);
+      this.id = state.id;
+      this.title = state.title;
+      for (const k of this.staticInputKeys) {
+        this.inputs[k].load(state.inputs[k]);
+        this.inputs[k].nodeId = this.id;
+        if (k === "_node") continue;
+        this.inputs[k].hidden = state.inputs[k].hidden;
+      }
+      for (const k of this.staticOutputKeys) {
+        this.outputs[k].load(state.outputs[k]);
+        this.outputs[k].nodeId = this.id;
+        if (k === "_node") continue;
+        this.outputs[k].hidden = state.outputs[k].hidden;
+      }
+      this.preventUpdate = false;
+      this.onUpdate();
+      this.preventUpdate = true;
+      for (const k of Object.keys(state.inputs)) {
+        if (this.staticInputKeys.includes(k)) continue;
+        if (!this.inputs[k]) {
+          const value = state.inputs[k].value;
+          let inputInterface;
+          if (typeof value == "number") {
+            inputInterface = new IntegerInterface$1(k, value).use(setType, numberType);
+          } else {
+            inputInterface = new TextInputInterface$1(k, JSON.stringify(value)).use(setType, stringType);
+          }
+          inputInterface.use(displayInSidebar, true);
+          this.addInput(k, inputInterface);
+        }
+        if (this.inputs[k]) {
+          this.inputs[k].load(state.inputs[k]);
+          this.inputs[k].nodeId = this.id;
+        }
+      }
+      for (const k of Object.keys(state.outputs)) {
+        if (this.staticOutputKeys.includes(k)) continue;
+        if (!this.outputs[k]) {
+          const outputInterface = new CodeOutputInterface(k);
+          this.addOutput(k, outputInterface);
+        }
+        if (this.outputs[k]) {
+          this.outputs[k].load(state.outputs[k]);
+          this.outputs[k].nodeId = this.id;
+        }
+      }
+      loadNodeState(this.graph, state);
+      this.preventUpdate = false;
+      this.events.loaded.emit(this);
+    }
+    onUpdate() {
+      if (this.preventUpdate) return;
+      if (this.graph) this.graph.activeTransactions++;
+      const inputValues = this.getStaticValues(this.staticInputKeys, this.inputs);
+      const outputValues = this.getStaticValues(this.staticOutputKeys, this.outputs);
+      const result = definition.onUpdate.call(this, inputValues, outputValues);
+      this.updateInterfaces("input", result.inputs ?? {}, result.forceUpdateInputs ?? []);
+      this.updateInterfaces("output", result.outputs ?? {}, result.forceUpdateOutputs ?? []);
+      if (this.graph) this.graph.activeTransactions--;
+    }
+    getStaticValues(keys, interfaces) {
+      const values = {};
+      for (const k of keys) {
+        values[k] = interfaces[k].value;
+      }
+      return values;
+    }
+    updateInterfaces(type, newInterfaces, forceUpdates) {
+      const staticKeys = type === "input" ? this.staticInputKeys : this.staticOutputKeys;
+      const currentInterfaces = type === "input" ? this.inputs : this.outputs;
+      for (const k of Object.keys(currentInterfaces)) {
+        if (staticKeys.includes(k) || newInterfaces[k] && !forceUpdates.includes(k)) continue;
+        if (type === "input") {
+          this.removeInput(k);
+        } else {
+          this.removeOutput(k);
+        }
+      }
+      for (const k of Object.keys(newInterfaces)) {
+        if (currentInterfaces[k]) continue;
+        const intf = newInterfaces[k]();
+        if (type === "input") {
+          this.addInput(k, intf);
+        } else {
+          this.addOutput(k, intf);
+        }
+      }
+    }
+    executeFactory(type, factory) {
+      Object.keys(factory || {}).forEach((k) => {
+        const intf = factory[k]();
+        if (type === "input") {
+          this.addInput(k, intf);
+        } else {
+          this.addOutput(k, intf);
+        }
+      });
+    }
+  };
+}
+class Code {
+  _id;
+  _viewModel;
+  _state;
+  constructor(viewModel) {
+    this._id = v4();
+    this._viewModel = viewModel;
+    this._state = reactive({
+      autosort: false,
+      modules: {},
+      script: "",
+      token: null,
+      template: ""
+    });
+  }
+  get codeNodes() {
+    return getCodeNodes(this.graph);
+  }
+  get connections() {
+    return this.graph.connections;
+  }
+  get graph() {
+    return this.viewModel.displayedGraph;
+  }
+  get id() {
+    return this._id;
+  }
+  get modules() {
+    let categories = [];
+    this.codeNodes.filter((node) => node.state.modules?.length > 0).forEach((node) => {
+      categories = categories.concat(node.state.modules);
+    });
+    if (!categories) return [];
+    categories.sort();
+    return Array.from(new Set(categories.map((category) => this.viewModel.state.modules[category])));
+  }
+  get nodeIds() {
+    return this.codeNodes.map((node) => node.id);
+  }
+  get nodes() {
+    return this.graph.nodes;
+  }
+  get scriptedCodeNodes() {
+    return getCodeNodes(this.graph).filter(
+      (codeNode) => codeNode.state?.script.length > 0
+    );
+  }
+  get shortId() {
+    return this.id.slice(0);
+  }
+  get state() {
+    return this._state;
+  }
+  get viewModel() {
+    return this._viewModel;
+  }
+  get visibleNodes() {
+    return this.codeNodes.filter((node) => !node.state?.hidden);
+  }
+  /**
+   * Add code node to graph.
+   * @param node code node
+   * @param props optional
+   */
+  addNode(node, props) {
+    if (props) node.state.props = props;
+    return this.graph.addNode(node);
+  }
+  /**
+   * Add code node at coordinates.
+   * @param node code node
+   * @param position position
+   * @param props optional
+   * @returns code node
+   */
+  addNodeAtCoordinates = (node, position = { x: 0, y: 0 }, props) => {
+    this.addNode(node, props);
+    if (node.position) node.position = position;
+    return node;
+  };
+  /**
+   * Add connection of code nodes
+   * @param from code node interface
+   * @param to code node interface
+   */
+  addConnection(from, to) {
+    if (from.name !== "_node") from.hidden = false;
+    if (to.name !== "_node") to.hidden = false;
+    this.graph.addConnection(from, to);
+  }
+  /**
+   * Clear code graph.
+   */
+  clear() {
+    this.graph._nodes = [];
+    this.graph._connections = [];
+  }
+  findNodeById(id) {
+    return this.graph.findNodeById(id);
+  }
+  findNodeByType(nodeType2) {
+    return this.codeNodes.find((codeNode) => codeNode.type === nodeType2);
+  }
+  getNodesBySameType(type) {
+    return this.codeNodes.filter((codeNode) => codeNode.type === type);
+  }
+  getNodesBySameVariableNames(variableName) {
+    return this.codeNodes.filter(
+      (codeNode) => codeNode.state.variableName === variableName
+    );
+  }
+  /**
+   * Check whether the graph has this connection.
+   * @param from node interface
+   * @param to node interface
+   * @returns boolean
+   */
+  hasConnection(from, to) {
+    return this.connections.some(
+      (connection) => connection.from.id === from.id && connection.to.id === to.id
+    );
+  }
+  /**
+   * Load template from the file.
+   */
+  loadTemplate(resolve) {
+    resolve.then((template) => {
+      this._state.template = template.default ?? "";
+    });
+  }
+  onCodeUpdate() {
+    this.codeNodes.forEach((codeNode) => codeNode.onCodeUpdate());
+  }
+  /**
+   * Remove connection from the graph
+   * @param connection connection between code nodes
+   */
+  removeConnection(connection) {
+    this.graph.removeConnection(connection);
+  }
+  /**
+   * Remove node from the graph.
+   * @param codeNode code node
+   */
+  removeNode(codeNode) {
+    this.graph.removeNode(codeNode);
+  }
+  /**
+   * Render node codes.
+   */
+  renderNodeCodes() {
+    if (this.codeNodes.length === 0) return;
+    this.codeNodes.forEach((node) => node.renderCode());
+  }
+  /**
+   * Render code.
+   */
+  renderCode() {
+    this.state.script = mustache.render(this.state.template || "", this);
+  }
+  /**
+   * Save code graph.
+   * @returns graph state
+   */
+  save() {
+    if (this.state.autosort) this.sortNodes();
+    const editorState = this.viewModel.editor.save();
+    editorState.graph.id = this.id;
+    this.saveNodeStates(editorState.graph.nodes);
+    return JSON.parse(JSON.stringify(editorState));
+  }
+  /**
+   * Save node states.
+   * @param nodeStates a list of node state.
+   */
+  saveNodeStates(nodeStates) {
+    nodeStates.forEach((nodeState, nodeIdx) => {
+      const node = this.nodes[nodeIdx];
+      Object.entries(nodeState.inputs).forEach(([inputKey]) => {
+        if (node.inputs[inputKey]) nodeState.inputs[inputKey].hidden = node.inputs[inputKey].hidden;
+      });
+      Object.entries(nodeState.outputs).forEach(([outputKey]) => {
+        if (node.inputs[outputKey]) nodeState.outputs[outputKey].hidden = node.outputs[outputKey].hidden;
+      });
+    });
+  }
+  /**
+   * Sort code nodes.
+   */
+  sortNodes() {
+    if (this.nodes.length === 0 || this.connections.length === 0) return;
+    try {
+      const edges = this.connections.map((connection) => [
+        connection.to.nodeId,
+        connection.from.nodeId
+      ]);
+      let nodeIds = [...this.nodeIds];
+      nodeIds.reverse();
+      nodeIds = toposort.array(nodeIds, edges);
+      nodeIds.reverse();
+      const unconnected = this.graph.nodes.map((node) => node.id).filter((nodeId) => !nodeIds.includes(nodeId));
+      nodeIds = nodeIds.concat(unconnected);
+      this.graph._nodes = nodeIds.map((nodeId) => this.findNodeById(nodeId));
+    } catch {
+      console.warn("Failed to sort nodes.");
+    }
+  }
+  updateOutputVariableNames() {
+    this.codeNodes.forEach((codeNode) => codeNode.updateOutputVariableName());
+  }
+}
+const getCodeNodes = (graph) => {
+  let nodes = [];
+  graph.nodes.forEach((node) => {
+    if (node.subgraph) {
+      nodes = nodes.concat(getCodeNodes(node.subgraph));
+    } else if (node.isCodeNode) {
+      nodes.push(node);
+    }
+  });
+  return nodes;
+};
+const getPositionAtColumn = (col = 0, offset = 100) => {
+  const width = 350;
+  const padding = 70;
+  return {
+    x: col * (width + padding),
+    y: offset
+  };
+};
+const getPositionBeforeNode = (node) => {
+  const position = { ...node.position };
+  position.x -= 400;
+  position.y += 50;
+  return position;
+};
+const transferCodeScript = (graph) => {
+  const { calculationOrder, connectionsFromNode } = sortTopologically(graph);
+  calculationOrder.forEach((node) => {
+    if (!node.isCodeNode) return;
+    const codeNode = node;
+    if (connectionsFromNode.has(codeNode)) {
+      connectionsFromNode.get(codeNode).forEach((c) => {
+        if (c.to.state && c.from.script) c.to.state.script = c.from.script;
+      });
+    }
+  });
+};
+const _hoisted_1$e = ["id"];
+const _hoisted_2$5 = { class: "align-middle" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "CodeGraphNodeInterface",
+  props: {
+    node: {},
+    intf: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { viewModel } = useViewModel();
+    const { hoveredOver, temporaryConnection } = useTemporaryConnection();
+    const el = ref(null);
+    const isConnected = computed(() => props.intf.connectionCount > 0);
+    const classes = computed(() => ({
+      "--connected": isConnected.value
+    }));
+    const startHover = () => {
+      hoveredOver(props.intf);
+    };
+    const endHover = () => {
+      hoveredOver(void 0);
+    };
+    const onRender = () => {
+      if (el.value) {
+        viewModel.value.hooks.renderInterface.execute({ intf: props.intf, el: el.value });
+      }
+    };
+    onMounted(onRender);
+    onUpdated(onRender);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: _ctx.intf.id,
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(["baklava-node-interface", classes.value])
+      }, [
+        _ctx.intf.port ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["__port", { "--selected": unref(temporaryConnection)?.from === _ctx.intf }]),
+          onPointerover: startHover,
+          onPointerout: endHover
+        }, null, 34)) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$5, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 10, _hoisted_1$e);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$e = {};
+const _hoisted_1$d = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
+};
+function _sfc_render$9(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+  ])]);
+}
+const LayoutSidebarLeftCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
+const _sfc_main$d = {};
+const _hoisted_1$c = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
+};
+function _sfc_render$8(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$c, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+  ])]);
+}
+const LayoutSidebarLeftExpand = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
+const _sfc_main$c = {};
+const _hoisted_1$b = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  class: "balkava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
+};
+function _sfc_render$7(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
+  ])]);
+}
+const LayoutSidebarRight = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
+const _sfc_main$b = {};
+const _hoisted_1$a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
+};
+function _sfc_render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+  ])]);
+}
+const LayoutSidebarRightCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$6]]);
+const _sfc_main$a = {};
+const _hoisted_1$9 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
+};
+function _sfc_render$5(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+  ])]);
+}
+const LayoutSidebarRightExpand = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$5]]);
+const _sfc_main$9 = {};
+const _hoisted_1$8 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "baklava-icon",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
+    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
+  ])]);
+}
+const Schema = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$4]]);
+const _sfc_main$8 = {};
+const _hoisted_1$7 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "baklava-icon",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
+    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
+  ])]);
+}
+const SchemaOff = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$3]]);
+const _sfc_main$7 = {};
+const _hoisted_1$6 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "baklava-icon",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
+    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
+  ])]);
+}
+const TrashOff = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
+const _sfc_main$6 = {};
+const _hoisted_1$5 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "baklava-icon",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  fill: "none",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    createElementVNode("circle", {
+      cx: "12",
+      cy: "12",
+      r: "1"
+    }, null, -1),
+    createElementVNode("circle", {
+      cx: "12",
+      cy: "19",
+      r: "1"
+    }, null, -1),
+    createElementVNode("circle", {
+      cx: "12",
+      cy: "5",
+      r: "1"
+    }, null, -1)
+  ])]);
+}
+const VerticalDots = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$1]]);
+const _hoisted_1$4 = ["id", "data-node-type"];
+const _hoisted_2$4 = {
+  class: "__title-label",
+  style: { "flex-grow": "1" }
+};
+const _hoisted_3$2 = { key: 0 };
+const _hoisted_4$1 = {
+  class: "__menu",
+  style: { "display": "flex" }
+};
+const _hoisted_5 = { class: "__outputs" };
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = ["id", "title"];
+const _hoisted_8 = { class: "__inputs" };
+const _hoisted_9 = { key: 0 };
+const _hoisted_10 = ["id", "title"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "CodeGraphNode",
+  props: {
+    node: {},
+    selected: { type: Boolean, default: false },
+    dragging: { type: Boolean }
+  },
+  emits: ["select", "start-drag", "update"],
+  setup(__props, { emit: __emit }) {
+    const ContextMenu = Components.ContextMenu;
+    const NodeInterface2 = Components.NodeInterface;
+    const props = __props;
+    const node = computed(() => props.node);
+    const emit = __emit;
+    const { viewModel } = useViewModel();
+    const { graph, switchGraph } = useGraph();
+    const el = ref(null);
+    const renaming = ref(false);
+    const tempName = ref("");
+    const renameInputEl = ref(null);
+    const isResizing = ref(false);
+    let resizeStartWidth = 0;
+    let resizeStartMouseX = 0;
+    const showContextMenu = ref(false);
+    const contextMenuItems = computed(() => {
+      const items = [
+        { value: "edit", label: "Edit" },
+        { value: "rename", label: "Rename" },
+        { value: "delete", label: "Delete" }
+      ];
+      if (props.node.type.startsWith(GRAPH_NODE_TYPE_PREFIX)) {
+        items.push({ value: "editSubgraph", label: "Edit Subgraph" });
+      }
+      return items;
+    });
+    const classes = computed(() => ({
+      "--selected": props.selected,
+      "--dragging": props.dragging,
+      "--two-column": !!props.node.twoColumn,
+      "--hidden": node.value.state?.hidden
+    }));
+    const classesContent = computed(() => ({
+      "--reverse-y": props.node.reverseY ?? viewModel.value.settings.nodes.reverseY
+    }));
+    const styles = computed(() => ({
+      "top": `${props.node.position?.y ?? 0}px`,
+      "left": `${props.node.position?.x ?? 0}px`,
+      "--width": `${props.node.width ?? viewModel.value.settings.nodes.defaultWidth}px`
+    }));
+    const displayedInputs = computed(() => Object.values(props.node.inputs).filter((ni) => !ni.hidden));
+    const displayedOutputs = computed(() => Object.values(props.node.outputs).filter((ni) => !ni.hidden));
+    const select = () => {
+      emit("select");
+    };
+    const startDrag = (ev) => {
+      if (!props.selected) {
+        select();
+      }
+      emit("start-drag", ev);
+    };
+    const openContextMenu = () => {
+      showContextMenu.value = true;
+    };
+    const closeSidebar = () => {
+      const sidebar = viewModel.value.displayedGraph.sidebar;
+      sidebar.nodeId = "";
+      sidebar.visible = false;
+    };
+    const openSidebar = () => {
+      const sidebar = viewModel.value.displayedGraph.sidebar;
+      sidebar.nodeId = props.node.id;
+      sidebar.visible = true;
+    };
+    const updateSidebar = () => {
+      const sidebar = viewModel.value.displayedGraph.sidebar;
+      sidebar.nodeId = props.node.id;
+    };
+    const onContextMenuClick = async (action) => {
+      switch (action) {
+        case "edit":
+          openSidebar();
+          break;
+        case "delete":
+          graph.value.removeNode(props.node);
+          break;
+        case "rename":
+          tempName.value = props.node.title;
+          renaming.value = true;
+          await nextTick();
+          renameInputEl.value?.focus();
+          break;
+        case "editSubgraph":
+          switchGraph(props.node.template);
+          break;
+      }
+    };
+    const doneRenaming = () => {
+      props.node.title = tempName.value;
+      renaming.value = false;
+    };
+    const onRender = () => {
+      if (el.value) {
+        viewModel.value.hooks.renderNode.execute({ node: props.node, el: el.value });
+      }
+    };
+    const startResize = (ev) => {
+      isResizing.value = true;
+      resizeStartWidth = props.node.width;
+      resizeStartMouseX = ev.clientX;
+      ev.preventDefault();
+    };
+    const doResize = (ev) => {
+      if (!isResizing.value) return;
+      const deltaX = ev.clientX - resizeStartMouseX;
+      const newWidth = resizeStartWidth + deltaX / graph.value.scaling;
+      const minWidth = viewModel.value.settings.nodes.minWidth;
+      const maxWidth = viewModel.value.settings.nodes.maxWidth;
+      props.node.width = Math.max(minWidth, Math.min(maxWidth, newWidth));
+    };
+    const stopResize = () => {
+      isResizing.value = false;
+    };
+    onMounted(() => {
+      onRender();
+      window.addEventListener("mousemove", doResize);
+      window.addEventListener("mouseup", stopResize);
+    });
+    onUpdated(onRender);
+    onBeforeUnmount(() => {
+      window.removeEventListener("mousemove", doResize);
+      window.removeEventListener("mouseup", stopResize);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: node.value.id,
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass([classes.value, "baklava-node"]),
+        "data-node-type": node.value.type,
+        style: normalizeStyle(styles.value),
+        onPointerdown: select
+      }, [
+        unref(viewModel).settings.nodes.resizable ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "__resize-handle",
+          onMousedown: startResize
+        }, null, 32)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "__title",
+          onPointerdown: withModifiers(startDrag, ["self", "stop"]),
+          onContextmenu: withModifiers(openContextMenu, ["prevent"])
+        }, [
+          node.value.inputs._node ? (openBlock(), createBlock(_sfc_main$f, {
+            key: 0,
+            node: node.value,
+            intf: node.value.inputs._node,
+            class: "--input",
+            "data-interface-type": "node",
+            style: { "flex-grow": "0" }
+          }, null, 8, ["node", "intf"])) : createCommentVNode("", true),
+          !renaming.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("div", _hoisted_2$4, [
+              node.value.idx > -1 ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(node.value.idx + 1) + " - ", 1)) : createCommentVNode("", true),
+              createTextVNode(toDisplayString(node.value.title) + " (" + toDisplayString(node.value.shortId) + ") ", 1)
+            ]),
+            createElementVNode("div", _hoisted_4$1, [
+              !node.value.subgraph ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                !unref(viewModel).displayedGraph.sidebar.visible && unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (openBlock(), createBlock(unref(LayoutSidebarRightExpand), {
+                  key: 0,
+                  class: "--clickable mx-1",
+                  onClick: openSidebar
+                })) : unref(viewModel).displayedGraph.sidebar.visible && unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (openBlock(), createBlock(unref(LayoutSidebarRight), {
+                  key: 1,
+                  class: "--clickable mx-1",
+                  onClick: updateSidebar
+                })) : (openBlock(), createBlock(unref(LayoutSidebarRightCollapse), {
+                  key: 2,
+                  class: "--clickable mx-1",
+                  onClick: closeSidebar
+                }))
+              ], 64)) : createCommentVNode("", true),
+              createVNode(unref(VerticalDots), {
+                class: "--clickable mx-1",
+                onClick: openContextMenu
+              }),
+              createVNode(unref(ContextMenu), {
+                modelValue: showContextMenu.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showContextMenu.value = $event),
+                x: 0,
+                y: 0,
+                items: contextMenuItems.value,
+                onClick: onContextMenuClick
+              }, null, 8, ["modelValue", "items"])
+            ])
+          ], 64)) : withDirectives((openBlock(), createElementBlock("input", {
+            key: 2,
+            ref_key: "renameInputEl",
+            ref: renameInputEl,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tempName.value = $event),
+            class: "baklava-input",
+            placeholder: "Node Name",
+            style: { "flex-grow": "1" },
+            type: "text",
+            onBlur: doneRenaming,
+            onKeydown: withKeys(doneRenaming, ["enter"])
+          }, null, 544)), [
+            [vModelText, tempName.value]
+          ]),
+          node.value.outputs._node ? (openBlock(), createBlock(_sfc_main$f, {
+            key: 3,
+            node: node.value,
+            intf: node.value.outputs._node,
+            class: "--output",
+            "data-interface-type": "node"
+          }, null, 8, ["node", "intf"])) : createCommentVNode("", true)
+        ], 32),
+        createElementVNode("div", {
+          class: normalizeClass(["__content", classesContent.value]),
+          onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
+          }, ["stop"]), ["delete"])),
+          onContextmenu: _cache[3] || (_cache[3] = withModifiers(() => {
+          }, ["prevent"]))
+        }, [
+          createElementVNode("div", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayedOutputs.value, (output) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: output.id
+              }, [
+                node.value.state?.hidden ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                  output.port ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: output.id,
+                    title: output.name,
+                    class: "baklava-node-interface --output --connected"
+                  }, [..._cache[4] || (_cache[4] = [
+                    createElementVNode("div", { class: "__port" }, null, -1)
+                  ])], 8, _hoisted_7)) : createCommentVNode("", true)
+                ])) : renderSlot(_ctx.$slots, "nodeInterface", {
+                  key: 1,
+                  type: "output",
+                  node: node.value,
+                  intf: output
+                }, () => [
+                  createVNode(unref(NodeInterface2), {
+                    node: node.value,
+                    intf: output
+                  }, null, 8, ["node", "intf"])
+                ])
+              ], 64);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayedInputs.value, (input) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: input.id
+              }, [
+                node.value.state?.hidden ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                  input.port ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: input.id,
+                    title: input.name,
+                    class: "baklava-node-interface --input --connected"
+                  }, [..._cache[5] || (_cache[5] = [
+                    createElementVNode("div", { class: "__port" }, null, -1)
+                  ])], 8, _hoisted_10)) : createCommentVNode("", true)
+                ])) : renderSlot(_ctx.$slots, "nodeInterface", {
+                  key: 1,
+                  node: node.value,
+                  intf: input,
+                  type: "input"
+                }, () => [
+                  createVNode(unref(NodeInterface2), {
+                    node: node.value,
+                    intf: input,
+                    title: input.name
+                  }, null, 8, ["node", "intf", "title"])
+                ])
+              ], 64);
+            }), 128))
+          ])
+        ], 34)
+      ], 46, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["title"];
+const _hoisted_2$3 = {
+  key: 0,
+  class: "__label"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Checkbox",
+  props: {
+    modelValue: { type: Boolean },
+    inversed: { type: Boolean },
+    name: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["baklava-checkbox", { "--checked": _ctx.inversed ? !_ctx.modelValue : _ctx.modelValue }]),
+        title: _ctx.name,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", !_ctx.modelValue))
+      }, [
+        _cache[1] || (_cache[1] = createElementVNode("div", { class: "__checkmark-container" }, [
+          createElementVNode("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "18",
+            height: "18",
+            viewBox: "0 0 18 18"
+          }, [
+            createElementVNode("path", {
+              class: "__checkmark",
+              d: "M 6 5 L 6 10 L 16 10",
+              transform: "rotate(-45 10 10)"
+            })
+          ])
+        ], -1)),
+        _ctx.name ? (openBlock(), createElementBlock("div", _hoisted_2$3, toDisplayString(_ctx.name), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "__header" };
+const _hoisted_2$2 = { class: "__node-name" };
+const _hoisted_3$1 = { style: { "display": "flex" } };
+const _hoisted_4 = {
+  key: 1,
+  class: "__interface"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "CodeGraphSidebar",
+  setup(__props) {
+    const { viewModel } = useViewModel();
+    const { graph } = useGraph();
+    const el = ref(null);
+    const width = toRef(viewModel.value.settings.sidebar, "width");
+    const resizable = computed(() => viewModel.value.settings.sidebar.resizable);
+    let resizeStartWidth = 0;
+    let resizeStartMouseX = 0;
+    const node = computed(() => {
+      const id = graph.value.sidebar.nodeId;
+      return graph.value.nodes.find((x) => x.id === id);
+    });
+    const codeNode = computed(() => node.value);
+    const styles = computed(() => ({
+      width: `${width.value}px`
+    }));
+    const displayedInterfaces = computed(() => {
+      if (!node.value) return [];
+      const allIntfs = [...Object.values(node.value.inputs), ...Object.values(node.value.outputs)];
+      return allIntfs.filter((intf) => intf.displayInSidebar && intf.component);
+    });
+    const close = () => {
+      graph.value.sidebar.visible = false;
+    };
+    const doneRenaming = () => {
+      node.value?.events.update.emit(null);
+    };
+    const startResize = (event) => {
+      resizeStartWidth = width.value;
+      resizeStartMouseX = event.clientX;
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener(
+        "mouseup",
+        () => {
+          window.removeEventListener("mousemove", onMouseMove);
+        },
+        { once: true }
+      );
+    };
+    const onMouseMove = (event) => {
+      const maxwidth = el.value?.parentElement?.getBoundingClientRect().width ?? 500;
+      const deltaX = event.clientX - resizeStartMouseX;
+      let newWidth = resizeStartWidth - deltaX;
+      if (newWidth < 300) {
+        newWidth = 300;
+      } else if (newWidth > 0.9 * maxwidth) {
+        newWidth = 0.9 * maxwidth;
+      }
+      width.value = newWidth;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(["baklava-sidebar", { "--open": unref(graph).sidebar.visible }]),
+        style: normalizeStyle(styles.value)
+      }, [
+        resizable.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "__resizer",
+          onMousedown: startResize
+        }, null, 32)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_1$2, [
+          createElementVNode("button", {
+            tabindex: "-1",
+            class: "__close",
+            onClick: close
+          }, "×"),
+          createElementVNode("div", _hoisted_2$2, [
+            createElementVNode("b", null, toDisplayString(node.value ? node.value.title : ""), 1)
+          ])
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(displayedInterfaces.value, (intf) => {
+          return openBlock(), createElementBlock("div", {
+            key: intf.id,
+            class: "__interface"
+          }, [
+            createElementVNode("div", _hoisted_3$1, [
+              createVNode(_sfc_main$4, {
+                modelValue: intf.hidden,
+                "onUpdate:modelValue": [
+                  ($event) => intf.hidden = $event,
+                  _cache[0] || (_cache[0] = () => node.value?.events.update.emit(null))
+                ],
+                inversed: "",
+                style: { "margin-right": "8px" }
+              }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+              (openBlock(), createBlock(resolveDynamicComponent(intf.component), {
+                modelValue: intf.value,
+                "onUpdate:modelValue": ($event) => intf.value = $event,
+                node: node.value,
+                intf,
+                style: { "width": "100%" }
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
+            ])
+          ]);
+        }), 128)),
+        codeNode.value && codeNode.value.state ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          _cache[2] || (_cache[2] = createElementVNode("label", null, "Variable name", -1)),
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => codeNode.value.state.variableName = $event),
+            type: "text",
+            class: "baklava-input",
+            title: "Variable name",
+            onBlur: doneRenaming,
+            onKeydown: withKeys(doneRenaming, ["enter"])
+          }, null, 544), [
+            [vModelText, codeNode.value.state.variableName]
+          ])
+        ])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const _sfc_main$2 = defineComponent({
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { viewModel } = useViewModel();
+    const { switchGraph } = useGraph();
+    const showContextMenu = ref(false);
+    const hasContextMenu = computed(() => props.type.startsWith(GRAPH_NODE_TYPE_PREFIX));
+    const contextMenuItems = [
+      { label: "Edit Subgraph", value: "editSubgraph" },
+      { label: "Delete Subgraph", value: "deleteSubgraph" }
+    ];
+    const openContextMenu = () => {
+      showContextMenu.value = true;
+    };
+    const onContextMenuClick = (action) => {
+      const graphTemplateId = props.type.substring(GRAPH_NODE_TYPE_PREFIX.length);
+      const graphTemplate = viewModel.value.editor.graphTemplates.find((gt) => gt.id === graphTemplateId);
+      if (!graphTemplate) {
+        return;
+      }
+      switch (action) {
+        case "editSubgraph":
+          switchGraph(graphTemplate);
+          break;
+        case "deleteSubgraph":
+          viewModel.value.editor.removeGraphTemplate(graphTemplate);
+          break;
+      }
+    };
+    return { showContextMenu, hasContextMenu, contextMenuItems, openContextMenu, onContextMenuClick };
+  }
+});
+const _hoisted_1$1 = ["data-node-type"];
+const _hoisted_2$1 = { class: "__title" };
+const _hoisted_3 = { class: "__title-label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: "baklava-node --palette",
+    "data-node-type": _ctx.type
+  }, [
+    createElementVNode("div", _hoisted_2$1, [
+      createElementVNode("div", _hoisted_3, toDisplayString(_ctx.title), 1)
+    ])
+  ], 8, _hoisted_1$1);
+}
+const PaletteEntry = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const _hoisted_1 = {
+  class: "baklava-node --palette",
+  style: { "margin-top": "-20px", "margin-bottom": "30px" }
+};
+const _hoisted_2 = { key: 0 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "CodeNodePalette",
+  setup(__props) {
+    const { viewModel } = useViewModel();
+    const { x: mouseX, y: mouseY } = usePointer();
+    const { transform } = useTransform();
+    const categories = useNodeCategories(viewModel);
+    const editorEl = inject("editorEl");
+    const searchQuery = ref("");
+    const draggedNode = ref(null);
+    const filterCategoryBySearch = (categories2) => {
+      if (searchQuery.value) {
+        return categories2.filter(
+          (c) => Object.values(c.nodeTypes).some(
+            (nodeType2) => nodeType2.title.toLowerCase().includes(searchQuery.value?.toLowerCase())
+          )
+        );
+      }
+      return categories2;
+    };
+    const filterNodesBySearch = (nodeTypes) => {
+      if (searchQuery.value) {
+        return Object.values(nodeTypes).filter(
+          (nt) => nt.title.toLowerCase().includes(searchQuery.value?.toLowerCase())
+        );
+      }
+      return Object.values(nodeTypes);
+    };
+    const draggedNodeStyles = computed(() => {
+      if (!draggedNode.value || !editorEl?.value) return {};
+      const { left, top } = editorEl.value.getBoundingClientRect();
+      return {
+        top: `${mouseY.value - top}px`,
+        left: `${mouseX.value - left}px`
+      };
+    });
+    const onDragStart = (type, nodeInformation) => {
+      draggedNode.value = {
+        type,
+        nodeInformation
+      };
+      const onDragEnd = () => {
+        const instance = reactive(new nodeInformation.type());
+        viewModel.value.displayedGraph.addNode(instance);
+        const rect = editorEl.value.getBoundingClientRect();
+        const [x, y] = transform(mouseX.value - rect.left, mouseY.value - rect.top);
+        instance.position.x = x;
+        instance.position.y = y;
+        draggedNode.value = null;
+        document.removeEventListener("pointerup", onDragEnd);
+      };
+      document.addEventListener("pointerup", onDragEnd);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass(["baklava-node-palette", { "--open": unref(viewModel).settings.palette.enabled }]),
+          onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["stop", "prevent"]))
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            withDirectives(createElementVNode("input", {
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+              type: "text",
+              class: "baklava-input",
+              title: "Filter node types"
+            }, null, 512), [
+              [vModelText, searchQuery.value]
+            ])
+          ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(filterCategoryBySearch(unref(categories)), (c) => {
+            return openBlock(), createElementBlock("section", {
+              key: c.name
+            }, [
+              c.name !== "default" ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString(c.name), 1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filterNodesBySearch(c.nodeTypes), (ni, nt) => {
+                return openBlock(), createBlock(PaletteEntry, {
+                  key: nt,
+                  type: nt,
+                  title: ni.title,
+                  onPointerdown: ($event) => onDragStart(nt, ni)
+                }, null, 8, ["type", "title", "onPointerdown"]);
+              }), 128))
+            ]);
+          }), 128))
+        ], 34),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            draggedNode.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "baklava-dragged-node",
+              style: normalizeStyle(draggedNodeStyles.value)
+            }, [
+              createVNode(PaletteEntry, {
+                type: draggedNode.value.type,
+                title: draggedNode.value.nodeInformation.title
+              }, null, 8, ["type", "title"])
+            ], 4)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CodeGraphEditor",
+  props: {
+    viewModel: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const viewModel = toRef(props, "viewModel");
+    const onUpdate = (node) => node.events.update.emit(null);
+    onMounted(() => {
+      viewModel.value.subscribe();
+      viewModel.value.engine.start();
+    });
+    onUnmounted(() => {
+      viewModel.value.unsubscribe();
+      viewModel.value.engine.stop();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BaklavaEditor), { "view-model": viewModel.value }, {
+        palette: withCtx(() => [
+          createVNode(_sfc_main$1)
+        ]),
+        node: withCtx((nodeProps) => [
+          createVNode(_sfc_main$5, mergeProps(nodeProps, {
+            onUpdate: ($event) => onUpdate(nodeProps.node)
+          }), null, 16, ["onUpdate"])
+        ]),
+        sidebar: withCtx((nodeProps) => [
+          createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(nodeProps)), null, 16)
+        ]),
+        _: 1
+      }, 8, ["view-model"]);
+    };
+  }
+});
+const addToolbarCommands = (viewModel) => {
+  const TOGGLE_PALETTE_COMMAND = "TOGGLE_PALETTE";
+  viewModel.commandHandler.registerCommand(TOGGLE_PALETTE_COMMAND, {
+    execute: () => viewModel.settings.palette.enabled = !viewModel.settings.palette.enabled,
+    canExecute: () => true
+  });
+  const CLEAR_ALL_COMMAND = "CLEAR_ALL";
+  viewModel.commandHandler.registerCommand(CLEAR_ALL_COMMAND, {
+    execute: () => viewModel.displayedGraph.nodes.forEach((node) => viewModel.displayedGraph.removeNode(node)),
+    canExecute: () => viewModel.displayedGraph.nodes.length > 0
+  });
+  const TOGGLE_MINIMAP_COMMAND = "TOGGLE_MINIMAP";
+  viewModel.commandHandler.registerCommand(TOGGLE_MINIMAP_COMMAND, {
+    execute: () => viewModel.settings.enableMinimap = !viewModel.settings.enableMinimap,
+    canExecute: () => viewModel.displayedGraph.nodes.length > 1
+  });
+  viewModel.settings.toolbar.commands = [
+    {
+      command: TOGGLE_PALETTE_COMMAND,
+      title: "Toggle palette",
+      // Tooltip text
+      icon: computed(() => viewModel.settings.palette.enabled ? LayoutSidebarLeftCollapse : LayoutSidebarLeftExpand)
+    },
+    ...DEFAULT_TOOLBAR_COMMANDS,
+    {
+      command: CLEAR_ALL_COMMAND,
+      title: "Clear all",
+      // Tooltip text
+      icon: TrashOff
+    },
+    {
+      command: TOGGLE_MINIMAP_COMMAND,
+      title: "Toggle minimap",
+      // Tooltip text
+      icon: computed(() => viewModel.settings.enableMinimap ? SchemaOff : Schema)
+    }
+  ];
+};
+const DEFAULT_SETTINGS = {
+  enableMinimap: false,
+  toolbar: {
+    enabled: true
+  },
+  palette: {
+    enabled: true
+  },
+  sidebar: {
+    enabled: true,
+    resizable: true,
+    width: 350
+  },
+  displayValueOnHover: false
+};
+function useCodeGraph(existingEditor) {
+  const viewModel = useBaklava(existingEditor);
+  addToolbarCommands(viewModel);
+  viewModel.code = new Code(viewModel);
+  const settings = {};
+  Object.keys(DEFAULT_SETTINGS).forEach((K) => {
+    settings[K] = typeof DEFAULT_SETTINGS[K] === "object" ? { ...viewModel.settings[K], ...DEFAULT_SETTINGS[K] } : DEFAULT_SETTINGS[K];
+  });
+  viewModel.settings = reactive({ ...viewModel.settings, ...settings });
+  viewModel.settings.nodes.defaultWidth = 350;
+  viewModel.state = reactive({
+    modules: {},
+    token: null
+  });
+  viewModel.engine = new DependencyEngine(viewModel.editor);
+  viewModel.subscribe = () => {
+    if (viewModel.state.token) viewModel.unsubscribe();
+    const token = Symbol();
+    viewModel.displayedGraph.events.addNode.subscribe(token, (node) => node.code = viewModel.code);
+    viewModel.engine.events.beforeRun.subscribe(token, () => {
+      viewModel.engine.pause();
+      viewModel.code.onCodeUpdate();
+      viewModel.code.sortNodes();
+      viewModel.code.updateOutputVariableNames();
+      viewModel.engine.resume();
+    });
+    viewModel.engine.events.afterRun.subscribe(token, (result) => {
+      viewModel.engine.pause();
+      applyResult(result, viewModel.editor);
+      transferCodeScript(viewModel.displayedGraph);
+      viewModel.code.renderNodeCodes();
+      viewModel.code.renderCode();
+      viewModel.engine.resume();
+    });
+    viewModel.state.token = token;
+  };
+  viewModel.unsubscribe = () => {
+    if (!viewModel.state.token) return;
+    const token = viewModel.state.token;
+    viewModel.displayedGraph.events.addNode.unsubscribe(token);
+    viewModel.engine.events.beforeRun.unsubscribe(token);
+    viewModel.engine.events.afterRun.unsubscribe(token);
+    viewModel.state.token = null;
+  };
+  return viewModel;
+}
+export {
+  AbstractCodeNode,
+  ButtonInterface,
+  ButtonInterfaceComponent2 as ButtonInterfaceComponent,
+  CheckboxInterface,
+  CheckboxInterfaceComponent2 as CheckboxInterfaceComponent,
+  Code,
+  _sfc_main as CodeGraphEditor,
+  CodeInputInterface,
+  CodeNode,
+  CodeNodeInterface,
+  CodeOutputInterface,
+  DEFAULT_SETTINGS,
+  DynamicCodeNode,
+  IntegerInterface,
+  IntegerInterfaceComponent2 as IntegerInterfaceComponent,
+  NumberInterface,
+  NumberInterfaceComponent2 as NumberInterfaceComponent,
+  SelectInterface,
+  SelectInterfaceComponent2 as SelectInterfaceComponent,
+  SliderInterface,
+  SliderInterfaceComponent2 as SliderInterfaceComponent,
+  TextInputInterface,
+  TextInputInterfaceComponent2 as TextInputInterfaceComponent,
+  TextInterface,
+  TextareaInputInterface,
+  TextareaInputInterfaceComponent2 as TextareaInputInterfaceComponent,
+  addToolbarCommands,
+  defineCodeNode,
+  defineDynamicCodeNode,
+  getCodeNodes,
+  getPositionAtColumn,
+  getPositionBeforeNode,
+  loadNodeState,
+  saveNodeState,
+  transferCodeScript,
+  useCodeGraph
+};