@elicdavis/node-flow 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -749,6 +749,509 @@ up_fn = function(event) {
   __privateGet(this, _clickStop).call(this);
 };
 
+// src/elements/interfaces.ts
+function InstantiateRenderElementSidesStyling(config) {
+  if (typeof config === "number") {
+    return {
+      Bottom: config,
+      Right: config,
+      Top: config,
+      Left: config
+    };
+  }
+  return {
+    Bottom: (config == null ? void 0 : config.Bottom) === void 0 ? 0 : config == null ? void 0 : config.Bottom,
+    Right: (config == null ? void 0 : config.Right) === void 0 ? 0 : config == null ? void 0 : config.Right,
+    Left: (config == null ? void 0 : config.Left) === void 0 ? 0 : config == null ? void 0 : config.Left,
+    Top: (config == null ? void 0 : config.Top) === void 0 ? 0 : config == null ? void 0 : config.Top
+  };
+}
+
+// src/elements/base.ts
+var _margin, _padding, _border, _backgroundColor, _minWidth, _maxWidth, _minHeight, _maxHeight, _grow, _display, _RenderElementBase_instances, horizontalOffset_fn, verticalOffset_fn, totalTopOffset_fn, totalLeftOffset_fn;
+var RenderElementBase = class {
+  constructor(config) {
+    __privateAdd(this, _RenderElementBase_instances);
+    __privateAdd(this, _margin);
+    __privateAdd(this, _padding);
+    __privateAdd(this, _border);
+    __privateAdd(this, _backgroundColor);
+    __privateAdd(this, _minWidth);
+    __privateAdd(this, _maxWidth);
+    __privateAdd(this, _minHeight);
+    __privateAdd(this, _maxHeight);
+    __privateAdd(this, _grow);
+    __privateAdd(this, _display);
+    var _a, _b, _c, _d, _e, _f, _g;
+    __privateSet(this, _margin, InstantiateRenderElementSidesStyling(config == null ? void 0 : config.Margin));
+    __privateSet(this, _padding, InstantiateRenderElementSidesStyling(config == null ? void 0 : config.Padding));
+    __privateSet(this, _backgroundColor, config == null ? void 0 : config.BackgroundColor);
+    __privateSet(this, _border, {
+      Color: (_b = (_a = config == null ? void 0 : config.Border) == null ? void 0 : _a.Color) != null ? _b : "black",
+      Thickness: (_d = (_c = config == null ? void 0 : config.Border) == null ? void 0 : _c.Thickness) != null ? _d : 0,
+      Radius: (_f = (_e = config == null ? void 0 : config.Border) == null ? void 0 : _e.Radius) != null ? _f : 0
+    });
+    __privateSet(this, _minWidth, config == null ? void 0 : config.MinWidth);
+    __privateSet(this, _maxWidth, config == null ? void 0 : config.MaxWidth);
+    __privateSet(this, _minHeight, config == null ? void 0 : config.MinHeight);
+    __privateSet(this, _maxHeight, config == null ? void 0 : config.MaxHeight);
+    __privateSet(this, _grow, config == null ? void 0 : config.Grow);
+    __privateSet(this, _display, (_g = config == null ? void 0 : config.Display) != null ? _g : "flex" /* Flex */);
+  }
+  setBackgroundColor(newColor) {
+    __privateSet(this, _backgroundColor, newColor);
+  }
+  render(ctx, position, graphScale, scaledFillableSpace) {
+    if (__privateGet(this, _display) === "none" /* None */) {
+      return;
+    }
+    const scaledSize = { x: 0, y: 0 };
+    this.size(ctx, scaledSize);
+    scaledSize.x = scaledSize.x * graphScale;
+    scaledSize.y = scaledSize.y * graphScale;
+    scaledSize.x = Math.max(scaledSize.x, scaledFillableSpace.x);
+    scaledSize.y = Math.max(scaledSize.y, scaledFillableSpace.y);
+    if (__privateGet(this, _backgroundColor)) {
+      ctx.fillStyle = __privateGet(this, _backgroundColor);
+      ctx.beginPath();
+      ctx.roundRect(
+        position.x + __privateGet(this, _margin).Left * graphScale,
+        position.y + __privateGet(this, _margin).Right * graphScale,
+        scaledSize.x - (__privateGet(this, _margin).Left + __privateGet(this, _margin).Right) * graphScale,
+        scaledSize.y - (__privateGet(this, _margin).Top + __privateGet(this, _margin).Bottom) * graphScale,
+        __privateGet(this, _border).Radius * graphScale
+      );
+      ctx.fill();
+    }
+    if (__privateGet(this, _border).Thickness > 0) {
+      ctx.lineWidth = __privateGet(this, _border).Thickness * graphScale;
+      ctx.strokeStyle = __privateGet(this, _border).Color;
+      ctx.stroke();
+    }
+    const offsetPosition = {
+      x: position.x + __privateMethod(this, _RenderElementBase_instances, totalLeftOffset_fn).call(this) * graphScale,
+      y: position.y + __privateMethod(this, _RenderElementBase_instances, totalTopOffset_fn).call(this) * graphScale
+    };
+    const elementSize = {
+      x: scaledSize.x - __privateMethod(this, _RenderElementBase_instances, horizontalOffset_fn).call(this) * graphScale,
+      y: scaledSize.y - __privateMethod(this, _RenderElementBase_instances, verticalOffset_fn).call(this) * graphScale
+    };
+    this.doRender(ctx, offsetPosition, graphScale, elementSize);
+  }
+  maxLimitations(out) {
+    out.x = -1;
+    out.y = -1;
+    if (__privateGet(this, _maxWidth)) {
+      out.x = __privateGet(this, _maxWidth);
+    }
+    if (__privateGet(this, _maxHeight)) {
+      out.y = __privateGet(this, _maxHeight);
+    }
+  }
+  setDisplay(display) {
+    __privateSet(this, _display, display);
+  }
+  getDisplay() {
+    return __privateGet(this, _display);
+  }
+  size(ctx, out) {
+    out.x = 0;
+    out.y = 0;
+    if (__privateGet(this, _display) === "none" /* None */) {
+      return;
+    }
+    const maxLimits = { x: -1, y: -1 };
+    this.maxLimitations(maxLimits);
+    this.calcSize(ctx, out, maxLimits);
+    out.x += __privateMethod(this, _RenderElementBase_instances, horizontalOffset_fn).call(this);
+    out.y += __privateMethod(this, _RenderElementBase_instances, verticalOffset_fn).call(this);
+    if (__privateGet(this, _minWidth)) {
+      out.x = Math.max(out.x, __privateGet(this, _minWidth));
+    }
+    if (__privateGet(this, _maxWidth)) {
+      out.x = Math.min(__privateGet(this, _maxWidth), out.x);
+    }
+    if (__privateGet(this, _maxHeight)) {
+      out.y = Math.min(__privateGet(this, _maxHeight), out.y);
+    }
+    if (__privateGet(this, _minHeight)) {
+      out.y = Math.max(__privateGet(this, _minHeight), out.y);
+    }
+  }
+};
+_margin = new WeakMap();
+_padding = new WeakMap();
+_border = new WeakMap();
+_backgroundColor = new WeakMap();
+_minWidth = new WeakMap();
+_maxWidth = new WeakMap();
+_minHeight = new WeakMap();
+_maxHeight = new WeakMap();
+_grow = new WeakMap();
+_display = new WeakMap();
+_RenderElementBase_instances = new WeakSet();
+horizontalOffset_fn = function() {
+  return __privateGet(this, _border).Thickness + __privateGet(this, _margin).Left + __privateGet(this, _margin).Right + __privateGet(this, _padding).Left + __privateGet(this, _padding).Right;
+};
+verticalOffset_fn = function() {
+  return __privateGet(this, _border).Thickness + __privateGet(this, _margin).Top + __privateGet(this, _margin).Bottom + __privateGet(this, _padding).Top + __privateGet(this, _padding).Bottom;
+};
+totalTopOffset_fn = function() {
+  return __privateGet(this, _border).Thickness / 2 + __privateGet(this, _margin).Top + __privateGet(this, _padding).Top;
+};
+totalLeftOffset_fn = function() {
+  return __privateGet(this, _border).Thickness / 2 + __privateGet(this, _margin).Left + __privateGet(this, _padding).Left;
+};
+
+// src/elements/container.ts
+var _elements, _layout, _alignment, _ContainerRenderElement_instances, renderColumn_fn;
+var ContainerRenderElement = class extends RenderElementBase {
+  constructor(elements, config) {
+    super(config);
+    __privateAdd(this, _ContainerRenderElement_instances);
+    __privateAdd(this, _elements);
+    __privateAdd(this, _layout);
+    __privateAdd(this, _alignment);
+    __privateSet(this, _elements, elements);
+    __privateSet(this, _layout, "column" /* Column */);
+    __privateSet(this, _alignment, "stretch" /* Stretch */);
+  }
+  calcSize(ctx, out, limitations) {
+    out.x = 0;
+    out.y = 0;
+    const eleSize = { x: 0, y: 0 };
+    switch (__privateGet(this, _layout)) {
+      case "column" /* Column */:
+        for (let i = 0; i < __privateGet(this, _elements).length; i++) {
+          __privateGet(this, _elements)[i].size(ctx, eleSize);
+          out.x = Math.max(out.x, eleSize.x);
+          out.y += eleSize.y;
+        }
+        break;
+      case "row" /* Row */:
+        for (let i = 0; i < __privateGet(this, _elements).length; i++) {
+          __privateGet(this, _elements)[i].size(ctx, eleSize);
+          out.y = Math.max(out.y, eleSize.y);
+          out.x += eleSize.x;
+        }
+        break;
+      default:
+        throw new Error("unknown layout: " + __privateGet(this, _layout));
+    }
+  }
+  doRender(ctx, position, graphScale, scaledFillableSpace) {
+    switch (__privateGet(this, _layout)) {
+      case "column" /* Column */:
+        __privateMethod(this, _ContainerRenderElement_instances, renderColumn_fn).call(this, ctx, position, graphScale, scaledFillableSpace);
+        break;
+      default:
+        throw new Error("unimplemented layout direction: " + __privateGet(this, _layout));
+    }
+  }
+};
+_elements = new WeakMap();
+_layout = new WeakMap();
+_alignment = new WeakMap();
+_ContainerRenderElement_instances = new WeakSet();
+renderColumn_fn = function(ctx, position, graphScale, scaledFillableSpace) {
+  const currnetPos = { x: position.x, y: position.y };
+  const scaledEleSize = { x: 0, y: 0 };
+  for (let i = 0; i < __privateGet(this, _elements).length; i++) {
+    const ele = __privateGet(this, _elements)[i];
+    ele.size(ctx, scaledEleSize);
+    ScaleVector(scaledEleSize, graphScale);
+    switch (__privateGet(this, _alignment)) {
+      case "stretch" /* Stretch */:
+        currnetPos.x = position.x;
+        scaledEleSize.x = scaledFillableSpace.x;
+        break;
+      // I'm not sure if this is even needed, I feel like this should
+      // already be the case.
+      case "start" /* Start */:
+        currnetPos.x = position.x;
+        break;
+      case "end" /* End */:
+        currnetPos.x = scaledFillableSpace.x - scaledEleSize.x;
+        break;
+      case "center" /* Center */:
+        currnetPos.x = scaledFillableSpace.x - scaledEleSize.x / 2;
+        break;
+      default:
+        throw new Error("unimplmeneted alignment: " + __privateGet(this, _alignment));
+    }
+    ele.render(ctx, currnetPos, graphScale, scaledEleSize);
+    currnetPos.y += scaledEleSize.y;
+  }
+};
+
+// src/elements/text.ts
+var _text, _align, _verticalAlign, _lineHeight;
+var TextElement = class extends RenderElementBase {
+  constructor(text, styling) {
+    var _a, _b, _c;
+    super(styling);
+    __privateAdd(this, _text);
+    __privateAdd(this, _align);
+    __privateAdd(this, _verticalAlign);
+    __privateAdd(this, _lineHeight);
+    __privateSet(this, _text, text);
+    __privateSet(this, _align, (_a = styling == null ? void 0 : styling.Align) != null ? _a : "left" /* Left */);
+    __privateSet(this, _verticalAlign, (_b = styling == null ? void 0 : styling.VerticalAlign) != null ? _b : "top" /* Top */);
+    __privateSet(this, _lineHeight, (_c = styling == null ? void 0 : styling.LineHeight) != null ? _c : 1);
+  }
+  doRender(ctx, position, graphScale, scaledFillableSpace) {
+    const scale = Zero();
+    this.calcSize(ctx, scale, scaledFillableSpace);
+    ScaleVector(scale, graphScale);
+    const justifiedPosition = Zero();
+    CopyVector2(justifiedPosition, position);
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    switch (__privateGet(this, _align)) {
+      case "left" /* Left */:
+        break;
+      case "right" /* Right */:
+        justifiedPosition.x += scaledFillableSpace.x - scale.x;
+        break;
+      case "center" /* Center */:
+        justifiedPosition.x += (scaledFillableSpace.x - scale.x) / 2;
+        break;
+      default:
+        throw new Error("unimplemented justification: " + __privateGet(this, _align));
+    }
+    switch (__privateGet(this, _verticalAlign)) {
+      case "top" /* Top */:
+        break;
+      case "bottom" /* Bottom */:
+        justifiedPosition.y += scaledFillableSpace.y - scale.y;
+        break;
+      case "center" /* Center */:
+        justifiedPosition.y += (scaledFillableSpace.y - scale.y) / 2;
+        break;
+      default:
+        throw new Error("unimplemented justification: " + __privateGet(this, _align));
+    }
+    if (scaledFillableSpace.x <= 0) {
+      __privateGet(this, _text).render(ctx, graphScale, justifiedPosition);
+    } else {
+      const eles = __privateGet(this, _text).breakIntoLines(ctx, scaledFillableSpace.x);
+      const tempSize = { x: 0, y: 0 };
+      for (let i = 0; i < eles.length; i++) {
+        eles[i].render(ctx, graphScale, justifiedPosition);
+        eles[i].size(ctx, 1, tempSize);
+        justifiedPosition.y += __privateGet(this, _text).style().getSize() * __privateGet(this, _lineHeight);
+      }
+    }
+  }
+  calcSize(ctx, out, limitations) {
+    if (limitations.x <= 0) {
+      __privateGet(this, _text).size(ctx, 1, out);
+      return;
+    }
+    const eles = __privateGet(this, _text).breakIntoLines(ctx, limitations.x);
+    const tempSize = { x: 0, y: 0 };
+    out.x = 0;
+    out.y = __privateGet(this, _text).style().getSize() * eles.length * __privateGet(this, _lineHeight);
+    for (let i = 0; i < eles.length; i++) {
+      eles[i].size(ctx, 1, tempSize);
+      out.x = Math.max(tempSize.x, out.x);
+    }
+  }
+};
+_text = new WeakMap();
+_align = new WeakMap();
+_verticalAlign = new WeakMap();
+_lineHeight = new WeakMap();
+
+// src/utils/string.ts
+var binarySearch = ({ max, getValue, match }) => {
+  let min = 0;
+  while (min <= max) {
+    let guess = Math.floor((min + max) / 2);
+    const compareVal = getValue(guess);
+    if (compareVal === match) return guess;
+    if (compareVal < match) min = guess + 1;
+    else max = guess - 1;
+  }
+  return max;
+};
+function fitString(ctx, str, maxWidth) {
+  let width2 = ctx.measureText(str).width;
+  const ellipsis = "\u2026";
+  const ellipsisWidth = ctx.measureText(ellipsis).width;
+  if (width2 <= maxWidth || width2 <= ellipsisWidth) {
+    return str;
+  }
+  const index = binarySearch({
+    max: str.length,
+    getValue: (guess) => ctx.measureText(str.substring(0, guess)).width,
+    match: maxWidth - ellipsisWidth
+  });
+  return str.substring(0, index) + ellipsis;
+}
+function splitString(ctx, str, maxWidth) {
+  let width2 = ctx.measureText(str).width;
+  if (width2 <= maxWidth) {
+    return [str];
+  }
+  let index = binarySearch({
+    max: str.length,
+    getValue: (guess) => ctx.measureText(str.substring(0, guess)).width,
+    match: maxWidth
+  });
+  for (let backward = index - 1; backward >= 1; backward--) {
+    if (str.charAt(backward) === " ") {
+      index = backward + 1;
+      break;
+    }
+  }
+  return [str.substring(0, index), str.substring(index)];
+}
+function splitStringIntoLines(ctx, str, maxWidth) {
+  let width2 = ctx.measureText(str).width;
+  if (width2 <= maxWidth) {
+    return [str];
+  }
+  const strings = new Array();
+  let remaining = str;
+  while (remaining !== "") {
+    let index = binarySearch({
+      max: remaining.length,
+      getValue: (guess) => ctx.measureText(remaining.substring(0, guess)).width,
+      match: maxWidth
+    });
+    if (index === remaining.length) {
+      strings.push(remaining.substring(0, index));
+      break;
+    }
+    for (let backward = index - 1; backward >= 1; backward--) {
+      if (remaining.charAt(backward) === " ") {
+        index = backward + 1;
+        break;
+      }
+    }
+    strings.push(remaining.substring(0, index));
+    remaining = remaining.substring(index);
+  }
+  return strings;
+}
+
+// src/types/text.ts
+var _measured, _size2, _style, _value, _Text_instances, measure_fn;
+var _Text = class _Text {
+  constructor(value, style) {
+    __privateAdd(this, _Text_instances);
+    __privateAdd(this, _measured);
+    __privateAdd(this, _size2);
+    __privateAdd(this, _style);
+    __privateAdd(this, _value);
+    __privateSet(this, _value, value);
+    __privateSet(this, _measured, false);
+    __privateSet(this, _size2, Zero());
+    __privateSet(this, _style, new TextStyle(style));
+    if (!document.fonts.check(`16px "${__privateGet(this, _style).getFont()}"`)) {
+      document.fonts.addEventListener("loadingdone", (event) => {
+        __privateSet(this, _measured, false);
+      });
+    }
+  }
+  set(newValue) {
+    __privateSet(this, _value, newValue);
+    __privateSet(this, _measured, false);
+  }
+  get() {
+    return __privateGet(this, _value);
+  }
+  breakIntoLines(ctx, maxWidth) {
+    const results = new Array();
+    __privateGet(this, _style).setupStyle(ctx, 1);
+    const entries = splitStringIntoLines(ctx, __privateGet(this, _value), maxWidth);
+    if (entries.length === 1) {
+      return [this];
+    }
+    for (let i = 0; i < entries.length; i++) {
+      const text = new _Text(entries[i]);
+      __privateSet(text, _style, __privateGet(this, _style));
+      results.push(text);
+    }
+    return results;
+  }
+  split(char) {
+    const entries = __privateGet(this, _value).split(char);
+    const results = new Array();
+    for (let i = 0; i < entries.length; i++) {
+      const text = new _Text(entries[i]);
+      __privateSet(text, _style, __privateGet(this, _style));
+      results.push(text);
+    }
+    return results;
+  }
+  splitAtIndex(index) {
+    const results = [
+      new _Text(__privateGet(this, _value).substring(0, index)),
+      new _Text(__privateGet(this, _value).substring(index, 0))
+    ];
+    for (let i = 0; i < results.length; i++) {
+      __privateSet(results[i], _style, __privateGet(this, _style));
+    }
+    return results;
+  }
+  splitAtWidth(ctx, maxWidth) {
+    __privateGet(this, _style).setupStyle(ctx, 1);
+    const entries = splitString(ctx, __privateGet(this, _value), maxWidth);
+    if (entries.length === 1) {
+      return [this];
+    }
+    const results = new Array();
+    for (let i = 0; i < entries.length; i++) {
+      const text = new _Text(entries[i]);
+      __privateSet(text, _style, __privateGet(this, _style));
+      results.push(text);
+    }
+    return results;
+  }
+  size(ctx, scale, out) {
+    __privateMethod(this, _Text_instances, measure_fn).call(this, ctx);
+    CopyVector2(out, __privateGet(this, _size2));
+    ScaleVector(out, scale);
+  }
+  setColor(color) {
+    __privateGet(this, _style).setColor(color);
+  }
+  getColor() {
+    return __privateGet(this, _style).getColor();
+  }
+  setSize(size) {
+    __privateGet(this, _style).setSize(size);
+  }
+  setWeight(weight) {
+    __privateGet(this, _style).setWeight(weight);
+  }
+  render(ctx, scale, position) {
+    __privateGet(this, _style).setupStyle(ctx, scale);
+    ctx.fillText(__privateGet(this, _value), position.x, position.y);
+  }
+  style() {
+    return __privateGet(this, _style);
+  }
+};
+_measured = new WeakMap();
+_size2 = new WeakMap();
+_style = new WeakMap();
+_value = new WeakMap();
+_Text_instances = new WeakSet();
+measure_fn = function(ctx) {
+  if (__privateGet(this, _measured)) {
+    return;
+  }
+  __privateGet(this, _style).setupStyle(ctx, 1);
+  const measurements = ctx.measureText(__privateGet(this, _value));
+  __privateGet(this, _size2).x = measurements.width;
+  __privateGet(this, _size2).y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
+  __privateSet(this, _measured, true);
+};
+var Text = _Text;
+
 // src/utils/math.ts
 function Clamp(v, min, max) {
   return Math.min(Math.max(v, min), max);
@@ -841,7 +1344,7 @@ function fallbackColor(type, s) {
   HSV2RGB(hsv, color);
   return RgbToHex(color);
 }
-var _node, _displayName, _emptyStyle, _filledStyle, _connections, _portType, _dataType, _onConnectionAdded, _onConnectionRemoved, _box;
+var _node, _displayName, _emptyStyle, _filledStyle, _connections, _portType, _dataType, _dataTypePopupElement, _onConnectionAdded, _onConnectionRemoved, _box;
 var Port = class {
   constructor(node, portType, config) {
     __privateAdd(this, _node);
@@ -851,6 +1354,7 @@ var Port = class {
     __privateAdd(this, _connections);
     __privateAdd(this, _portType);
     __privateAdd(this, _dataType);
+    __privateAdd(this, _dataTypePopupElement);
     __privateAdd(this, _onConnectionAdded);
     __privateAdd(this, _onConnectionRemoved);
     __privateAdd(this, _box, { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } });
@@ -880,6 +1384,41 @@ var Port = class {
     if (config == null ? void 0 : config.onConnectionRemoved) {
       __privateGet(this, _onConnectionRemoved).push(config == null ? void 0 : config.onConnectionRemoved);
     }
+    const containerElements = new Array();
+    let dataTypeDisplay = __privateGet(this, _dataType);
+    if ((config == null ? void 0 : config.array) === true) {
+      dataTypeDisplay = "Array<" + dataTypeDisplay + ">";
+    }
+    containerElements.push(new TextElement(
+      new Text(dataTypeDisplay, {
+        color: "white"
+      }),
+      {
+        Align: "center" /* Center */
+      }
+    ));
+    const description = config == null ? void 0 : config.description;
+    if (description && description !== "") {
+      containerElements.push(new TextElement(
+        new Text(description, { color: "white", style: "italic" /* Italic */ }),
+        {
+          Align: "center" /* Center */,
+          Padding: { Top: 16 },
+          MaxWidth: 400,
+          LineHeight: 1.5
+        }
+      ));
+    }
+    __privateSet(this, _dataTypePopupElement, new ContainerRenderElement(
+      containerElements,
+      {
+        BackgroundColor: "rgba(0, 0, 0, 0.75)",
+        Border: {
+          Radius: 6
+        },
+        Padding: 13
+      }
+    ));
   }
   addConnection(connection) {
     const c = __privateGet(this, _connections).length;
@@ -948,16 +1487,9 @@ var Port = class {
       const xPos = position.x;
       const yPos = position.y;
       postProcess.queue(() => {
-        ctx.textAlign = "center" /* Center */;
-        const padding = 13;
-        const measurement = ctx.measureText(__privateGet(this, _dataType));
-        const w = measurement.width + padding * camera.zoom;
-        ctx.beginPath();
-        ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
-        ctx.roundRect(xPos - w / 2, yPos + scaledRadius * 3 - padding * camera.zoom, w, padding * 2 * camera.zoom, 4 * camera.zoom);
-        ctx.fill();
-        ctx.fillStyle = "#FFFFFF";
-        ctx.fillText(__privateGet(this, _dataType), xPos, yPos + scaledRadius * 3);
+        const size = { x: 0, y: 0 };
+        __privateGet(this, _dataTypePopupElement).calcSize(ctx, size, { x: -1, y: -1 });
+        __privateGet(this, _dataTypePopupElement).render(ctx, { x: xPos - size.x / 2, y: yPos }, 1, size);
       });
     }
     __privateGet(this, _box).Position.x = position.x - scaledRadius;
@@ -984,6 +1516,7 @@ _filledStyle = new WeakMap();
 _connections = new WeakMap();
 _portType = new WeakMap();
 _dataType = new WeakMap();
+_dataTypePopupElement = new WeakMap();
 _onConnectionAdded = new WeakMap();
 _onConnectionRemoved = new WeakMap();
 _box = new WeakMap();
@@ -995,29 +1528,29 @@ function StrokeStyleWithFallback(input, fallback) {
     size: (input == null ? void 0 : input.size) === void 0 ? fallback == null ? void 0 : fallback.size : input == null ? void 0 : input.size
   };
 }
-var _size2, _color2;
+var _size3, _color2;
 var StrokeStyle = class {
   constructor(config) {
-    __privateAdd(this, _size2);
+    __privateAdd(this, _size3);
     __privateAdd(this, _color2);
-    __privateSet(this, _size2, (config == null ? void 0 : config.size) === void 0 ? 0.5 : config.size);
+    __privateSet(this, _size3, (config == null ? void 0 : config.size) === void 0 ? 0.5 : config.size);
     __privateSet(this, _color2, (config == null ? void 0 : config.color) === void 0 ? "black" : config.color);
   }
   setupStyle(ctx, scale) {
     ctx.strokeStyle = __privateGet(this, _color2);
-    ctx.lineWidth = scale * __privateGet(this, _size2);
+    ctx.lineWidth = scale * __privateGet(this, _size3);
   }
   setColor(newColor) {
     __privateSet(this, _color2, newColor);
   }
   setSize(newSize) {
-    __privateSet(this, _size2, newSize);
+    __privateSet(this, _size3, newSize);
   }
   size() {
-    return __privateGet(this, _size2);
+    return __privateGet(this, _size3);
   }
 };
-_size2 = new WeakMap();
+_size3 = new WeakMap();
 _color2 = new WeakMap();
 
 // src/styles/box.ts
@@ -1028,20 +1561,20 @@ function BoxStyleWithFallback(input, fallback) {
     border: StrokeStyleWithFallback(input == null ? void 0 : input.border, fallback == null ? void 0 : fallback.border)
   };
 }
-var _border, _color3, _radius, _BoxStyle_instances, box_fn, draw_fn;
+var _border2, _color3, _radius, _BoxStyle_instances, box_fn, draw_fn;
 var BoxStyle = class {
   constructor(config) {
     __privateAdd(this, _BoxStyle_instances);
-    __privateAdd(this, _border);
+    __privateAdd(this, _border2);
     __privateAdd(this, _color3);
     __privateAdd(this, _radius);
     __privateSet(this, _color3, (config == null ? void 0 : config.color) === void 0 ? "#CCCCCC" : config.color);
-    __privateSet(this, _border, (config == null ? void 0 : config.border) === void 0 ? null : new StrokeStyle(config.border));
+    __privateSet(this, _border2, (config == null ? void 0 : config.border) === void 0 ? null : new StrokeStyle(config.border));
     __privateSet(this, _radius, (config == null ? void 0 : config.radius) === void 0 ? 2 : config.radius);
   }
   Outline(ctx, box, scale, radius) {
     var _a;
-    (_a = __privateGet(this, _border)) == null ? void 0 : _a.setupStyle(ctx, scale);
+    (_a = __privateGet(this, _border2)) == null ? void 0 : _a.setupStyle(ctx, scale);
     ctx.beginPath();
     ctx.roundRect(
       box.Position.x,
@@ -1066,238 +1599,49 @@ var BoxStyle = class {
     ctx.stroke();
   }
   borderSize() {
-    if (__privateGet(this, _border) === null) {
+    if (__privateGet(this, _border2) === null) {
       return 0;
     }
-    return __privateGet(this, _border).size();
+    return __privateGet(this, _border2).size();
   }
   radius() {
     return __privateGet(this, _radius);
   }
   setColor(color) {
-    __privateSet(this, _color3, color);
-  }
-  setBorderColor(color) {
-    if (__privateGet(this, _border) === null) {
-      __privateSet(this, _border, new StrokeStyle({
-        color
-      }));
-    } else {
-      __privateGet(this, _border).setColor(color);
-    }
-  }
-};
-_border = new WeakMap();
-_color3 = new WeakMap();
-_radius = new WeakMap();
-_BoxStyle_instances = new WeakSet();
-box_fn = function(ctx, box, scale, radius) {
-  var _a;
-  ctx.fillStyle = __privateGet(this, _color3);
-  (_a = __privateGet(this, _border)) == null ? void 0 : _a.setupStyle(ctx, scale);
-  ctx.beginPath();
-  ctx.roundRect(
-    box.Position.x,
-    box.Position.y,
-    box.Size.x,
-    box.Size.y,
-    radius
-  );
-  ctx.fill();
-};
-draw_fn = function(ctx, box, scale, radius) {
-  __privateMethod(this, _BoxStyle_instances, box_fn).call(this, ctx, box, scale, radius);
-  ctx.stroke();
-};
-
-// src/utils/string.ts
-var binarySearch = ({ max, getValue, match }) => {
-  let min = 0;
-  while (min <= max) {
-    let guess = Math.floor((min + max) / 2);
-    const compareVal = getValue(guess);
-    if (compareVal === match) return guess;
-    if (compareVal < match) min = guess + 1;
-    else max = guess - 1;
-  }
-  return max;
-};
-function fitString(ctx, str, maxWidth) {
-  let width2 = ctx.measureText(str).width;
-  const ellipsis = "\u2026";
-  const ellipsisWidth = ctx.measureText(ellipsis).width;
-  if (width2 <= maxWidth || width2 <= ellipsisWidth) {
-    return str;
-  }
-  const index = binarySearch({
-    max: str.length,
-    getValue: (guess) => ctx.measureText(str.substring(0, guess)).width,
-    match: maxWidth - ellipsisWidth
-  });
-  return str.substring(0, index) + ellipsis;
-}
-function splitString(ctx, str, maxWidth) {
-  let width2 = ctx.measureText(str).width;
-  if (width2 <= maxWidth) {
-    return [str];
-  }
-  let index = binarySearch({
-    max: str.length,
-    getValue: (guess) => ctx.measureText(str.substring(0, guess)).width,
-    match: maxWidth
-  });
-  for (let backward = index - 1; backward >= 1; backward--) {
-    if (str.charAt(backward) === " ") {
-      index = backward + 1;
-      break;
-    }
-  }
-  return [str.substring(0, index), str.substring(index)];
-}
-function splitStringIntoLines(ctx, str, maxWidth) {
-  let width2 = ctx.measureText(str).width;
-  if (width2 <= maxWidth) {
-    return [str];
-  }
-  const strings = new Array();
-  let remaining = str;
-  while (remaining !== "") {
-    let index = binarySearch({
-      max: remaining.length,
-      getValue: (guess) => ctx.measureText(remaining.substring(0, guess)).width,
-      match: maxWidth
-    });
-    if (index === remaining.length) {
-      strings.push(remaining.substring(0, index));
-      break;
-    }
-    for (let backward = index - 1; backward >= 1; backward--) {
-      if (remaining.charAt(backward) === " ") {
-        index = backward + 1;
-        break;
-      }
-    }
-    strings.push(remaining.substring(0, index));
-    remaining = remaining.substring(index);
-  }
-  return strings;
-}
-
-// src/types/text.ts
-var _measured, _size3, _style, _value, _Text_instances, measure_fn;
-var _Text = class _Text {
-  constructor(value, style) {
-    __privateAdd(this, _Text_instances);
-    __privateAdd(this, _measured);
-    __privateAdd(this, _size3);
-    __privateAdd(this, _style);
-    __privateAdd(this, _value);
-    __privateSet(this, _value, value);
-    __privateSet(this, _measured, false);
-    __privateSet(this, _size3, Zero());
-    __privateSet(this, _style, new TextStyle(style));
-    if (!document.fonts.check(`16px "${__privateGet(this, _style).getFont()}"`)) {
-      document.fonts.addEventListener("loadingdone", (event) => {
-        __privateSet(this, _measured, false);
-      });
-    }
-  }
-  set(newValue) {
-    __privateSet(this, _value, newValue);
-    __privateSet(this, _measured, false);
-  }
-  get() {
-    return __privateGet(this, _value);
-  }
-  breakIntoLines(ctx, maxWidth) {
-    const results = new Array();
-    __privateGet(this, _style).setupStyle(ctx, 1);
-    const entries = splitStringIntoLines(ctx, __privateGet(this, _value), maxWidth);
-    if (entries.length === 1) {
-      return [this];
-    }
-    for (let i = 0; i < entries.length; i++) {
-      const text = new _Text(entries[i]);
-      __privateSet(text, _style, __privateGet(this, _style));
-      results.push(text);
-    }
-    return results;
-  }
-  split(char) {
-    const entries = __privateGet(this, _value).split(char);
-    const results = new Array();
-    for (let i = 0; i < entries.length; i++) {
-      const text = new _Text(entries[i]);
-      __privateSet(text, _style, __privateGet(this, _style));
-      results.push(text);
-    }
-    return results;
-  }
-  splitAtIndex(index) {
-    const results = [
-      new _Text(__privateGet(this, _value).substring(0, index)),
-      new _Text(__privateGet(this, _value).substring(index, 0))
-    ];
-    for (let i = 0; i < results.length; i++) {
-      __privateSet(results[i], _style, __privateGet(this, _style));
-    }
-    return results;
-  }
-  splitAtWidth(ctx, maxWidth) {
-    __privateGet(this, _style).setupStyle(ctx, 1);
-    const entries = splitString(ctx, __privateGet(this, _value), maxWidth);
-    if (entries.length === 1) {
-      return [this];
-    }
-    const results = new Array();
-    for (let i = 0; i < entries.length; i++) {
-      const text = new _Text(entries[i]);
-      __privateSet(text, _style, __privateGet(this, _style));
-      results.push(text);
-    }
-    return results;
-  }
-  size(ctx, scale, out) {
-    __privateMethod(this, _Text_instances, measure_fn).call(this, ctx);
-    CopyVector2(out, __privateGet(this, _size3));
-    ScaleVector(out, scale);
-  }
-  setColor(color) {
-    __privateGet(this, _style).setColor(color);
-  }
-  getColor() {
-    return __privateGet(this, _style).getColor();
-  }
-  setSize(size) {
-    __privateGet(this, _style).setSize(size);
-  }
-  setWeight(weight) {
-    __privateGet(this, _style).setWeight(weight);
-  }
-  render(ctx, scale, position) {
-    __privateGet(this, _style).setupStyle(ctx, scale);
-    ctx.fillText(__privateGet(this, _value), position.x, position.y);
+    __privateSet(this, _color3, color);
   }
-  style() {
-    return __privateGet(this, _style);
+  setBorderColor(color) {
+    if (__privateGet(this, _border2) === null) {
+      __privateSet(this, _border2, new StrokeStyle({
+        color
+      }));
+    } else {
+      __privateGet(this, _border2).setColor(color);
+    }
   }
 };
-_measured = new WeakMap();
-_size3 = new WeakMap();
-_style = new WeakMap();
-_value = new WeakMap();
-_Text_instances = new WeakSet();
-measure_fn = function(ctx) {
-  if (__privateGet(this, _measured)) {
-    return;
-  }
-  __privateGet(this, _style).setupStyle(ctx, 1);
-  const measurements = ctx.measureText(__privateGet(this, _value));
-  __privateGet(this, _size3).x = measurements.width;
-  __privateGet(this, _size3).y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
-  __privateSet(this, _measured, true);
+_border2 = new WeakMap();
+_color3 = new WeakMap();
+_radius = new WeakMap();
+_BoxStyle_instances = new WeakSet();
+box_fn = function(ctx, box, scale, radius) {
+  var _a;
+  ctx.fillStyle = __privateGet(this, _color3);
+  (_a = __privateGet(this, _border2)) == null ? void 0 : _a.setupStyle(ctx, scale);
+  ctx.beginPath();
+  ctx.roundRect(
+    box.Position.x,
+    box.Position.y,
+    box.Size.x,
+    box.Size.y,
+    radius
+  );
+  ctx.fill();
+};
+draw_fn = function(ctx, box, scale, radius) {
+  __privateMethod(this, _BoxStyle_instances, box_fn).call(this, ctx, box, scale, radius);
+  ctx.stroke();
 };
-var Text = _Text;
 
 // src/popup.ts
 var _title, _options, _content, _onClose, _buttonCSS, _popup;
@@ -1372,15 +1716,15 @@ function TextBoxStyleWithFallback(input, fallback) {
     textBaseline: (input == null ? void 0 : input.textBaseline) === void 0 ? fallback == null ? void 0 : fallback.textBaseline : input == null ? void 0 : input.textBaseline
   };
 }
-var _box2, _text, _textAlign, _textBaseline;
+var _box2, _text2, _textAlign, _textBaseline;
 var TextBoxStyle = class {
   constructor(config) {
     __privateAdd(this, _box2);
-    __privateAdd(this, _text);
+    __privateAdd(this, _text2);
     __privateAdd(this, _textAlign);
     __privateAdd(this, _textBaseline);
     __privateSet(this, _box2, new BoxStyle(config == null ? void 0 : config.box));
-    __privateSet(this, _text, new TextStyle(config == null ? void 0 : config.text));
+    __privateSet(this, _text2, new TextStyle(config == null ? void 0 : config.text));
     __privateSet(this, _textAlign, (config == null ? void 0 : config.textAlign) === void 0 ? "center" /* Center */ : config.textAlign);
     __privateSet(this, _textBaseline, (config == null ? void 0 : config.textBaseline) === void 0 ? "middle" /* Middle */ : config.textBaseline);
   }
@@ -1388,7 +1732,7 @@ var TextBoxStyle = class {
     __privateGet(this, _box2).Draw(ctx, box, scale);
     ctx.textAlign = __privateGet(this, _textAlign);
     ctx.textBaseline = __privateGet(this, _textBaseline);
-    __privateGet(this, _text).setupStyle(ctx, scale);
+    __privateGet(this, _text2).setupStyle(ctx, scale);
     ctx.fillText(
       text,
       box.Position.x + box.Size.x / 2,
@@ -1399,7 +1743,7 @@ var TextBoxStyle = class {
     __privateGet(this, _box2).DrawUnderline(ctx, box, scale);
     ctx.textAlign = __privateGet(this, _textAlign);
     ctx.textBaseline = __privateGet(this, _textBaseline);
-    __privateGet(this, _text).setupStyle(ctx, scale);
+    __privateGet(this, _text2).setupStyle(ctx, scale);
     ctx.fillText(
       text,
       box.Position.x + box.Size.x / 2,
@@ -1407,7 +1751,7 @@ var TextBoxStyle = class {
     );
   }
   setTextColor(color) {
-    __privateGet(this, _text).setColor(color);
+    __privateGet(this, _text2).setColor(color);
   }
   setBoxColor(color) {
     __privateGet(this, _box2).setColor(color);
@@ -1417,7 +1761,7 @@ var TextBoxStyle = class {
   }
 };
 _box2 = new WeakMap();
-_text = new WeakMap();
+_text2 = new WeakMap();
 _textAlign = new WeakMap();
 _textBaseline = new WeakMap();
 
@@ -1426,7 +1770,7 @@ var width = 150;
 var height = 25;
 
 // src/widgets/number.ts
-var _node2, _nodeProperty, _value2, _idleBoxStyle, _highlightBoxStyle, _text2, _callback2;
+var _node2, _nodeProperty, _value2, _idleBoxStyle, _highlightBoxStyle, _text3, _callback2;
 var NumberWidget = class {
   constructor(node, config) {
     __privateAdd(this, _node2);
@@ -1434,10 +1778,10 @@ var NumberWidget = class {
     __privateAdd(this, _value2);
     __privateAdd(this, _idleBoxStyle);
     __privateAdd(this, _highlightBoxStyle);
-    __privateAdd(this, _text2);
+    __privateAdd(this, _text3);
     __privateAdd(this, _callback2);
     __privateSet(this, _value2, 0);
-    __privateSet(this, _text2, "0");
+    __privateSet(this, _text3, "0");
     __privateSet(this, _node2, node);
     __privateSet(this, _nodeProperty, config == null ? void 0 : config.property);
     __privateSet(this, _idleBoxStyle, new TextBoxStyle(TextBoxStyleWithFallback(config == null ? void 0 : config.idleBoxStyle, {
@@ -1484,7 +1828,7 @@ var NumberWidget = class {
     if (__privateGet(this, _callback2) !== void 0) {
       __privateGet(this, _callback2).call(this, __privateGet(this, _value2));
     }
-    __privateSet(this, _text2, "" + parseFloat(__privateGet(this, _value2).toPrecision(6)));
+    __privateSet(this, _text3, "" + parseFloat(__privateGet(this, _value2).toPrecision(6)));
   }
   ClickStart() {
   }
@@ -1527,7 +1871,7 @@ var NumberWidget = class {
         style = __privateGet(this, _highlightBoxStyle);
       }
     }
-    style.DrawUnderline(ctx, box, scale, __privateGet(this, _text2));
+    style.DrawUnderline(ctx, box, scale, __privateGet(this, _text3));
     return box;
   }
 };
@@ -1536,20 +1880,20 @@ _nodeProperty = new WeakMap();
 _value2 = new WeakMap();
 _idleBoxStyle = new WeakMap();
 _highlightBoxStyle = new WeakMap();
-_text2 = new WeakMap();
+_text3 = new WeakMap();
 _callback2 = new WeakMap();
 
 // src/widgets/button.ts
-var _text3, _idleStyle, _hoverStyle, _clickStyle, _callback3, _gettingClicked;
+var _text4, _idleStyle, _hoverStyle, _clickStyle, _callback3, _gettingClicked;
 var ButtonWidget = class {
   constructor(config) {
-    __privateAdd(this, _text3);
+    __privateAdd(this, _text4);
     __privateAdd(this, _idleStyle);
     __privateAdd(this, _hoverStyle);
     __privateAdd(this, _clickStyle);
     __privateAdd(this, _callback3);
     __privateAdd(this, _gettingClicked);
-    __privateSet(this, _text3, (config == null ? void 0 : config.text) === void 0 ? "Button" : config == null ? void 0 : config.text);
+    __privateSet(this, _text4, (config == null ? void 0 : config.text) === void 0 ? "Button" : config == null ? void 0 : config.text);
     __privateSet(this, _callback3, config == null ? void 0 : config.callback);
     __privateSet(this, _gettingClicked, false);
     __privateSet(this, _idleStyle, new TextBoxStyle(TextBoxStyleWithFallback(config == null ? void 0 : config.idleStyle, {
@@ -1604,7 +1948,7 @@ var ButtonWidget = class {
     if (__privateGet(this, _gettingClicked)) {
       style = __privateGet(this, _clickStyle);
     }
-    style.Draw(ctx, box, scale, __privateGet(this, _text3));
+    style.Draw(ctx, box, scale, __privateGet(this, _text4));
     return box;
   }
   ClickStart() {
@@ -1617,7 +1961,7 @@ var ButtonWidget = class {
     }
   }
 };
-_text3 = new WeakMap();
+_text4 = new WeakMap();
 _idleStyle = new WeakMap();
 _hoverStyle = new WeakMap();
 _clickStyle = new WeakMap();
@@ -1735,14 +2079,14 @@ _textBoxStyle = new WeakMap();
 _callback4 = new WeakMap();
 
 // src/widgets/slider.ts
-var _min, _max, _value4, _text4, _snapIncrement, _node4, _nodeProperty3, _change, _release, _textStyle3, _backgroundColor, _borderColor, _fillColor, _lastMousePosition2, _clickStartMousePosition, _clicking;
+var _min, _max, _value4, _text5, _snapIncrement, _node4, _nodeProperty3, _change, _release, _textStyle3, _backgroundColor2, _borderColor, _fillColor, _lastMousePosition2, _clickStartMousePosition, _clicking;
 var SliderWidget = class {
   constructor(node, config) {
     // Data Variables =========================================================
     __privateAdd(this, _min);
     __privateAdd(this, _max);
     __privateAdd(this, _value4);
-    __privateAdd(this, _text4);
+    __privateAdd(this, _text5);
     __privateAdd(this, _snapIncrement);
     __privateAdd(this, _node4);
     __privateAdd(this, _nodeProperty3);
@@ -1751,7 +2095,7 @@ var SliderWidget = class {
     __privateAdd(this, _release);
     // Styling Variables ======================================================
     __privateAdd(this, _textStyle3);
-    __privateAdd(this, _backgroundColor);
+    __privateAdd(this, _backgroundColor2);
     __privateAdd(this, _borderColor);
     __privateAdd(this, _fillColor);
     // Runtime Variables ======================================================
@@ -1764,9 +2108,9 @@ var SliderWidget = class {
     __privateSet(this, _max, (config == null ? void 0 : config.max) === void 0 ? 1 : config == null ? void 0 : config.max);
     __privateSet(this, _snapIncrement, config == null ? void 0 : config.snapIncrement);
     __privateSet(this, _nodeProperty3, config == null ? void 0 : config.property);
-    __privateSet(this, _text4, "");
+    __privateSet(this, _text5, "");
     __privateSet(this, _release, config == null ? void 0 : config.release);
-    __privateSet(this, _backgroundColor, (config == null ? void 0 : config.backgroundColor) === void 0 ? Theme.Widget.BackgroundColor : config == null ? void 0 : config.backgroundColor);
+    __privateSet(this, _backgroundColor2, (config == null ? void 0 : config.backgroundColor) === void 0 ? Theme.Widget.BackgroundColor : config == null ? void 0 : config.backgroundColor);
     __privateSet(this, _fillColor, (config == null ? void 0 : config.fillColor) === void 0 ? Theme.Widget.Slider.FillColor : config == null ? void 0 : config.fillColor);
     __privateSet(this, _borderColor, (config == null ? void 0 : config.borderColor) === void 0 ? Theme.Widget.Border.Color : config == null ? void 0 : config.borderColor);
     __privateSet(this, _textStyle3, new TextStyle(TextStyleFallback(config == null ? void 0 : config.textStyle, {
@@ -1792,7 +2136,7 @@ var SliderWidget = class {
     if (__privateGet(this, _nodeProperty3)) {
       __privateGet(this, _node4).setProperty(__privateGet(this, _nodeProperty3), __privateGet(this, _value4));
     }
-    __privateSet(this, _text4, __privateGet(this, _value4).toFixed(3));
+    __privateSet(this, _text5, __privateGet(this, _value4).toFixed(3));
     if (__privateGet(this, _change) !== void 0) {
       __privateGet(this, _change).call(this, __privateGet(this, _value4));
     }
@@ -1814,7 +2158,7 @@ var SliderWidget = class {
     const scaledWidth = width * scale;
     const scaledHeight = height * scale;
     const scaledBorderThickness = Theme.Widget.Border.Size * scale;
-    ctx.fillStyle = __privateGet(this, _backgroundColor);
+    ctx.fillStyle = __privateGet(this, _backgroundColor2);
     ctx.strokeStyle = __privateGet(this, _borderColor);
     ctx.lineWidth = scaledBorderThickness;
     ctx.beginPath();
@@ -1842,7 +2186,7 @@ var SliderWidget = class {
     ctx.textBaseline = "middle" /* Middle */;
     __privateGet(this, _textStyle3).setupStyle(ctx, scale);
     ctx.fillText(
-      __privateGet(this, _text4),
+      __privateGet(this, _text5),
       position.x + scaledWidth / 2,
       position.y + scaledHeight / 2
     );
@@ -1871,14 +2215,14 @@ var SliderWidget = class {
 _min = new WeakMap();
 _max = new WeakMap();
 _value4 = new WeakMap();
-_text4 = new WeakMap();
+_text5 = new WeakMap();
 _snapIncrement = new WeakMap();
 _node4 = new WeakMap();
 _nodeProperty3 = new WeakMap();
 _change = new WeakMap();
 _release = new WeakMap();
 _textStyle3 = new WeakMap();
-_backgroundColor = new WeakMap();
+_backgroundColor2 = new WeakMap();
 _borderColor = new WeakMap();
 _fillColor = new WeakMap();
 _lastMousePosition2 = new WeakMap();
@@ -2082,13 +2426,13 @@ _lightColor = new WeakMap();
 _lightBorderColor = new WeakMap();
 _lightBlur = new WeakMap();
 _box3 = new WeakMap();
-var _node6, _nodeProperty5, _value6, _text5, _enabledStyle, _disabledStyle, _callback6;
+var _node6, _nodeProperty5, _value6, _text6, _enabledStyle, _disabledStyle, _callback6;
 var ToggleWidget = class {
   constructor(node, config) {
     __privateAdd(this, _node6);
     __privateAdd(this, _nodeProperty5);
     __privateAdd(this, _value6);
-    __privateAdd(this, _text5);
+    __privateAdd(this, _text6);
     __privateAdd(this, _enabledStyle);
     __privateAdd(this, _disabledStyle);
     __privateAdd(this, _callback6);
@@ -2096,7 +2440,7 @@ var ToggleWidget = class {
     __privateSet(this, _value6, false);
     __privateSet(this, _node6, node);
     __privateSet(this, _nodeProperty5, config == null ? void 0 : config.property);
-    __privateSet(this, _text5, (config == null ? void 0 : config.text) === void 0 ? "Toggle" : config == null ? void 0 : config.text);
+    __privateSet(this, _text6, (config == null ? void 0 : config.text) === void 0 ? "Toggle" : config == null ? void 0 : config.text);
     __privateSet(this, _enabledStyle, new ToggleStyle({
       idle: TextBoxStyleWithFallback((_a = config == null ? void 0 : config.enabledStyle) == null ? void 0 : _a.idle, {
         box: {
@@ -2139,7 +2483,7 @@ var ToggleWidget = class {
   }
   Draw(ctx, position, scale, mousePosition) {
     let style = __privateGet(this, _value6) ? __privateGet(this, _enabledStyle) : __privateGet(this, _disabledStyle);
-    return style.Draw(ctx, position, scale, __privateGet(this, _text5), mousePosition);
+    return style.Draw(ctx, position, scale, __privateGet(this, _text6), mousePosition);
   }
   Toggle() {
     this.Set(!__privateGet(this, _value6));
@@ -2165,21 +2509,21 @@ var ToggleWidget = class {
 _node6 = new WeakMap();
 _nodeProperty5 = new WeakMap();
 _value6 = new WeakMap();
-_text5 = new WeakMap();
+_text6 = new WeakMap();
 _enabledStyle = new WeakMap();
 _disabledStyle = new WeakMap();
 _callback6 = new WeakMap();
 
 // src/widgets/image.ts
-var _url, _image, _maxWidth, _maxHeight;
+var _url, _image, _maxWidth2, _maxHeight2;
 var ImageWidget = class {
   constructor(config) {
     __privateAdd(this, _url);
     __privateAdd(this, _image);
-    __privateAdd(this, _maxWidth);
-    __privateAdd(this, _maxHeight);
-    __privateSet(this, _maxWidth, (config == null ? void 0 : config.maxWidth) === void 0 ? 150 : config == null ? void 0 : config.maxWidth);
-    __privateSet(this, _maxHeight, (config == null ? void 0 : config.maxHeight) === void 0 ? 150 : config == null ? void 0 : config.maxHeight);
+    __privateAdd(this, _maxWidth2);
+    __privateAdd(this, _maxHeight2);
+    __privateSet(this, _maxWidth2, (config == null ? void 0 : config.maxWidth) === void 0 ? 150 : config == null ? void 0 : config.maxWidth);
+    __privateSet(this, _maxHeight2, (config == null ? void 0 : config.maxHeight) === void 0 ? 150 : config == null ? void 0 : config.maxHeight);
     if (config == null ? void 0 : config.image) {
       this.SetUrl(config == null ? void 0 : config.image);
     } else if (config == null ? void 0 : config.blob) {
@@ -2208,11 +2552,11 @@ var ImageWidget = class {
       return { "x": 0, "y": 0 };
     }
     let adjust = 1;
-    if (__privateGet(this, _image).width > __privateGet(this, _maxWidth)) {
-      adjust = __privateGet(this, _maxWidth) / __privateGet(this, _image).width;
+    if (__privateGet(this, _image).width > __privateGet(this, _maxWidth2)) {
+      adjust = __privateGet(this, _maxWidth2) / __privateGet(this, _image).width;
     }
-    if (__privateGet(this, _image).height > __privateGet(this, _maxHeight)) {
-      let heightAdjust = __privateGet(this, _maxHeight) / __privateGet(this, _image).height;
+    if (__privateGet(this, _image).height > __privateGet(this, _maxHeight2)) {
+      let heightAdjust = __privateGet(this, _maxHeight2) / __privateGet(this, _image).height;
       if (heightAdjust < adjust) {
         adjust = heightAdjust;
       }
@@ -2251,8 +2595,8 @@ var ImageWidget = class {
 };
 _url = new WeakMap();
 _image = new WeakMap();
-_maxWidth = new WeakMap();
-_maxHeight = new WeakMap();
+_maxWidth2 = new WeakMap();
+_maxHeight2 = new WeakMap();
 
 // src/widgets/text.ts
 var _value7, _callback7, _node7, _nodeProperty6, _size4;
@@ -3483,7 +3827,7 @@ function FormPopup(config) {
 
 // src/node.ts
 var MINIMUM_NODE_WIDTH = 150;
-var _position, _title2, _subTitle, _infoSymbol, _infoText, _input, _output, _widgets, _locked, _canEditTitle, _canEditInfo, _canEditPorts, _contextMenu2, _metadata, _onSelect, _onUnselect, _onFiledrop, _onDragStop, _titleChangeCallback, _infoChangeCallback, _titleColor, _selectedStyle, _stateStyles, _padding, _portTextStyle, _elementSpacing, _selected, _inputPortPositions, _outputPortPositions, _widgetPositions, _data, _registeredAnyPropertyChangeCallbacks, _registeredPropertyChangeCallbacks, _FlowNode_instances, popupNodeTitleSelection_fn, popupNodeInfoSelection_fn, popupNewButtonWidget_fn, widgetSubmenu_fn, calculateStyle_fn;
+var _position, _title2, _subTitle, _infoSymbol, _infoText, _input, _output, _widgets, _locked, _canEditTitle, _canEditInfo, _canEditPorts, _contextMenu2, _metadata, _onSelect, _onUnselect, _onFiledrop, _onDragStop, _titleChangeCallback, _infoChangeCallback, _titleColor, _selectedStyle, _stateStyles, _padding2, _portTextStyle, _elementSpacing, _selected, _inputPortPositions, _outputPortPositions, _widgetPositions, _data, _registeredAnyPropertyChangeCallbacks, _registeredPropertyChangeCallbacks, _FlowNode_instances, popupNodeTitleSelection_fn, popupNodeInfoSelection_fn, popupNewButtonWidget_fn, widgetSubmenu_fn, calculateStyle_fn;
 var FlowNode = class {
   constructor(config) {
     __privateAdd(this, _FlowNode_instances);
@@ -3512,7 +3856,7 @@ var FlowNode = class {
     __privateAdd(this, _titleColor);
     __privateAdd(this, _selectedStyle);
     __privateAdd(this, _stateStyles);
-    __privateAdd(this, _padding);
+    __privateAdd(this, _padding2);
     __privateAdd(this, _portTextStyle);
     __privateAdd(this, _elementSpacing);
     // Runtime ================================================================
@@ -3592,7 +3936,7 @@ var FlowNode = class {
     ));
     __privateSet(this, _infoText, (config == null ? void 0 : config.info) ? config == null ? void 0 : config.info : "");
     __privateSet(this, _titleColor, ((_f = (_e = config == null ? void 0 : config.style) == null ? void 0 : _e.title) == null ? void 0 : _f.color) === void 0 ? "#154050" : (_h = (_g = config == null ? void 0 : config.style) == null ? void 0 : _g.title) == null ? void 0 : _h.color);
-    __privateSet(this, _padding, ((_j = (_i = config == null ? void 0 : config.style) == null ? void 0 : _i.title) == null ? void 0 : _j.padding) === void 0 ? 15 : (_l = (_k = config == null ? void 0 : config.style) == null ? void 0 : _k.title) == null ? void 0 : _l.padding);
+    __privateSet(this, _padding2, ((_j = (_i = config == null ? void 0 : config.style) == null ? void 0 : _i.title) == null ? void 0 : _j.padding) === void 0 ? 15 : (_l = (_k = config == null ? void 0 : config.style) == null ? void 0 : _k.title) == null ? void 0 : _l.padding);
     __privateSet(this, _stateStyles, /* @__PURE__ */ new Map());
     __privateGet(this, _stateStyles).set(0 /* Idle */, new BoxStyle(BoxStyleWithFallback((_m = config == null ? void 0 : config.style) == null ? void 0 : _m.idle, {
       border: { color: Theme.Node.Border.Idle, size: 1 },
@@ -3873,7 +4217,7 @@ var FlowNode = class {
   // }
   calculateBounds(ctx, camera) {
     const tempMeasurement = Zero();
-    const doublePadding = __privateGet(this, _padding) * 2;
+    const doublePadding = __privateGet(this, _padding2) * 2;
     const screenSpacePosition = Zero();
     camera.graphSpaceToScreenSpace(__privateGet(this, _position), screenSpacePosition);
     const size = Zero();
@@ -4038,7 +4382,7 @@ var FlowNode = class {
       __privateGet(this, _inputPortPositions).Clear();
       __privateGet(this, _outputPortPositions).Clear();
       __privateGet(this, _widgetPositions).Clear();
-      const scaledPadding = __privateGet(this, _padding) * camera.zoom;
+      const scaledPadding = __privateGet(this, _padding2) * camera.zoom;
       const scaledElementSpacing = __privateGet(this, _elementSpacing) * camera.zoom;
       const nodeBounds = this.calculateBounds(ctx, camera);
       const nodeStyle = __privateMethod(this, _FlowNode_instances, calculateStyle_fn).call(this, state);
@@ -4185,7 +4529,7 @@ _infoChangeCallback = new WeakMap();
 _titleColor = new WeakMap();
 _selectedStyle = new WeakMap();
 _stateStyles = new WeakMap();
-_padding = new WeakMap();
+_padding2 = new WeakMap();
 _portTextStyle = new WeakMap();
 _elementSpacing = new WeakMap();
 _selected = new WeakMap();
@@ -4485,15 +4829,15 @@ text_fn = function() {
 };
 
 // src/markdown/entry.ts
-var _text6, _calculatedPositions, _calculatedEntries, _calculatedForWidth, _CodeBlockEntry_instances, calculateLayout_fn;
+var _text7, _calculatedPositions, _calculatedEntries, _calculatedForWidth, _CodeBlockEntry_instances, calculateLayout_fn;
 var CodeBlockEntry = class {
   constructor(text) {
     __privateAdd(this, _CodeBlockEntry_instances);
-    __privateAdd(this, _text6);
+    __privateAdd(this, _text7);
     __privateAdd(this, _calculatedPositions);
     __privateAdd(this, _calculatedEntries);
     __privateAdd(this, _calculatedForWidth);
-    __privateSet(this, _text6, text);
+    __privateSet(this, _text7, text);
     __privateSet(this, _calculatedForWidth, -1);
     __privateSet(this, _calculatedEntries, new List());
     __privateSet(this, _calculatedPositions, new List());
@@ -4532,7 +4876,7 @@ var CodeBlockEntry = class {
     return max + padding * 2;
   }
 };
-_text6 = new WeakMap();
+_text7 = new WeakMap();
 _calculatedPositions = new WeakMap();
 _calculatedEntries = new WeakMap();
 _calculatedForWidth = new WeakMap();
@@ -4546,8 +4890,8 @@ calculateLayout_fn = function(ctx, maxWidth) {
   __privateGet(this, _calculatedEntries).Clear();
   __privateGet(this, _calculatedPositions).Clear();
   let curHeight = 0;
-  const lineInc = __privateGet(this, _text6).style().getSize() + Theme.Note.LineSpacing;
-  let entries = __privateGet(this, _text6).split("\n");
+  const lineInc = __privateGet(this, _text7).style().getSize() + Theme.Note.LineSpacing;
+  let entries = __privateGet(this, _text7).split("\n");
   for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
     const entry = entries[entryIndex];
     let lines = entry.breakIntoLines(ctx, adjustedWith);
@@ -5334,404 +5678,114 @@ var NoteSubsystem = class {
     return false;
   }
   clickEnd() {
-    if (__privateGet(this, _noteSelected) !== null) {
-      __privateGet(this, _noteSelected).selectHandle(0 /* None */);
-      for (let i = 0; i < __privateGet(this, _onNoteDragStopCallbacks).length; i++) {
-        __privateGet(this, _onNoteDragStopCallbacks)[i](__privateGet(this, _noteSelected));
-      }
-    }
-    __privateSet(this, _noteSelected, null);
-  }
-  mouseDragEvent(delta, scale) {
-    if (__privateGet(this, _noteSelected) === null) {
-      return false;
-    }
-    if (__privateGet(this, _noteSelected).handleSelected()) {
-      return true;
-    }
-    __privateGet(this, _noteSelected).translate({
-      x: delta.x * (1 / scale),
-      y: delta.y * (1 / scale)
-    });
-    return true;
-  }
-  fileDrop(file) {
-    return false;
-  }
-  removeNote(note) {
-    const index = __privateGet(this, _notes).indexOf(note);
-    if (index > -1) {
-      const noteRemoved = __privateGet(this, _notes)[index];
-      __privateGet(this, _notes).splice(index, 1);
-      for (let i = 0; i < __privateGet(this, _onNoteRemovedCallbacks).length; i++) {
-        __privateGet(this, _onNoteRemovedCallbacks)[i](noteRemoved);
-      }
-    } else {
-      console.error("no note found to remove");
-    }
-  }
-  render(ctx, camera, mousePosition) {
-    __privateSet(this, _noteHovering, null);
-    __privateSet(this, _hoveringHandle, 0 /* None */);
-    if (mousePosition) {
-      for (let i = 0; i < __privateGet(this, _notes).length; i++) {
-        __privateGet(this, _notes)[i].setHovering(false);
-        if (InBox(__privateGet(this, _notes)[i].bounds(), mousePosition)) {
-          __privateSet(this, _noteHovering, __privateGet(this, _notes)[i]);
-        }
-      }
-    }
-    if (__privateGet(this, _noteHovering) != null) {
-      __privateGet(this, _noteHovering).setHovering(true);
-      if (mousePosition) {
-        if (InBox(__privateGet(this, _noteHovering).leftResizeHandleBox(), mousePosition)) {
-          __privateSet(this, _hoveringHandle, 1 /* Left */);
-        } else if (InBox(__privateGet(this, _noteHovering).rightResizeHandleBox(), mousePosition)) {
-          __privateSet(this, _hoveringHandle, 2 /* Right */);
-        }
-      }
-    }
-    for (let i = 0; i < __privateGet(this, _notes).length; i++) {
-      __privateGet(this, _notes)[i].render(ctx, camera, mousePosition);
-    }
-    return;
-  }
-};
-_notes = new WeakMap();
-_noteHovering = new WeakMap();
-_noteSelected = new WeakMap();
-_hoveringHandle = new WeakMap();
-_onNoteAddedCallbacks = new WeakMap();
-_onNoteRemovedCallbacks = new WeakMap();
-_onNoteDragStartCallbacks = new WeakMap();
-_onNoteDragStopCallbacks = new WeakMap();
-
-// src/pass/subsystem.ts
-var _queue;
-var PassSubsystem = class {
-  constructor() {
-    __privateAdd(this, _queue);
-    __privateSet(this, _queue, new List());
-  }
-  queue(lambda) {
-    if (!lambda) {
-      return;
-    }
-    __privateGet(this, _queue).Push(lambda);
-  }
-  render(ctx, camera, mousePosition) {
-    for (let i = 0; i < __privateGet(this, _queue).Count(); i++) {
-      __privateGet(this, _queue).At(i)();
-    }
-    __privateGet(this, _queue).Clear();
-    return;
-  }
-  openContextMenu(ctx, position) {
-    return null;
-  }
-  clickStart(mousePosition, camera, ctrlKey) {
-    return false;
-  }
-  mouseDragEvent(delta, scale) {
-    return false;
-  }
-  fileDrop(file) {
-    return false;
-  }
-  clickEnd() {
-  }
-};
-_queue = new WeakMap();
-
-// src/elements/interfaces.ts
-function InstantiateRenderElementSidesStyling(config) {
-  if (typeof config === "number") {
-    return {
-      Bottom: config,
-      Right: config,
-      Top: config,
-      Left: config
-    };
-  }
-  return {
-    Bottom: (config == null ? void 0 : config.Bottom) === void 0 ? 0 : config == null ? void 0 : config.Bottom,
-    Right: (config == null ? void 0 : config.Right) === void 0 ? 0 : config == null ? void 0 : config.Right,
-    Left: (config == null ? void 0 : config.Left) === void 0 ? 0 : config == null ? void 0 : config.Left,
-    Top: (config == null ? void 0 : config.Top) === void 0 ? 0 : config == null ? void 0 : config.Top
-  };
-}
-
-// src/elements/base.ts
-var _margin, _padding2, _border2, _backgroundColor2, _minWidth, _maxWidth2, _minHeight, _maxHeight2, _grow, _display, _RenderElementBase_instances, horizontalOffset_fn, verticalOffset_fn, totalTopOffset_fn, totalLeftOffset_fn;
-var RenderElementBase = class {
-  constructor(config) {
-    __privateAdd(this, _RenderElementBase_instances);
-    __privateAdd(this, _margin);
-    __privateAdd(this, _padding2);
-    __privateAdd(this, _border2);
-    __privateAdd(this, _backgroundColor2);
-    __privateAdd(this, _minWidth);
-    __privateAdd(this, _maxWidth2);
-    __privateAdd(this, _minHeight);
-    __privateAdd(this, _maxHeight2);
-    __privateAdd(this, _grow);
-    __privateAdd(this, _display);
-    var _a, _b, _c, _d, _e, _f, _g;
-    __privateSet(this, _margin, InstantiateRenderElementSidesStyling(config == null ? void 0 : config.Margin));
-    __privateSet(this, _padding2, InstantiateRenderElementSidesStyling(config == null ? void 0 : config.Padding));
-    __privateSet(this, _backgroundColor2, config == null ? void 0 : config.BackgroundColor);
-    __privateSet(this, _border2, {
-      Color: (_b = (_a = config == null ? void 0 : config.Border) == null ? void 0 : _a.Color) != null ? _b : "black",
-      Thickness: (_d = (_c = config == null ? void 0 : config.Border) == null ? void 0 : _c.Thickness) != null ? _d : 0,
-      Radius: (_f = (_e = config == null ? void 0 : config.Border) == null ? void 0 : _e.Radius) != null ? _f : 0
-    });
-    __privateSet(this, _minWidth, config == null ? void 0 : config.MinWidth);
-    __privateSet(this, _maxWidth2, config == null ? void 0 : config.MaxWidth);
-    __privateSet(this, _minHeight, config == null ? void 0 : config.MinHeight);
-    __privateSet(this, _maxHeight2, config == null ? void 0 : config.MaxHeight);
-    __privateSet(this, _grow, config == null ? void 0 : config.Grow);
-    __privateSet(this, _display, (_g = config == null ? void 0 : config.Display) != null ? _g : "flex" /* Flex */);
-  }
-  setBackgroundColor(newColor) {
-    __privateSet(this, _backgroundColor2, newColor);
-  }
-  render(ctx, position, graphScale, scaledFillableSpace) {
-    if (__privateGet(this, _display) === "none" /* None */) {
-      return;
-    }
-    const scaledSize = { x: 0, y: 0 };
-    this.size(ctx, scaledSize);
-    scaledSize.x = scaledSize.x * graphScale;
-    scaledSize.y = scaledSize.y * graphScale;
-    scaledSize.x = Math.max(scaledSize.x, scaledFillableSpace.x);
-    scaledSize.y = Math.max(scaledSize.y, scaledFillableSpace.y);
-    if (__privateGet(this, _backgroundColor2)) {
-      ctx.fillStyle = __privateGet(this, _backgroundColor2);
-      ctx.beginPath();
-      ctx.roundRect(
-        position.x + __privateGet(this, _margin).Left * graphScale,
-        position.y + __privateGet(this, _margin).Right * graphScale,
-        scaledSize.x - (__privateGet(this, _margin).Left + __privateGet(this, _margin).Right) * graphScale,
-        scaledSize.y - (__privateGet(this, _margin).Top + __privateGet(this, _margin).Bottom) * graphScale,
-        __privateGet(this, _border2).Radius * graphScale
-      );
-      ctx.fill();
-    }
-    if (__privateGet(this, _border2).Thickness > 0) {
-      ctx.lineWidth = __privateGet(this, _border2).Thickness * graphScale;
-      ctx.strokeStyle = __privateGet(this, _border2).Color;
-      ctx.stroke();
+    if (__privateGet(this, _noteSelected) !== null) {
+      __privateGet(this, _noteSelected).selectHandle(0 /* None */);
+      for (let i = 0; i < __privateGet(this, _onNoteDragStopCallbacks).length; i++) {
+        __privateGet(this, _onNoteDragStopCallbacks)[i](__privateGet(this, _noteSelected));
+      }
     }
-    const offsetPosition = {
-      x: position.x + __privateMethod(this, _RenderElementBase_instances, totalLeftOffset_fn).call(this) * graphScale,
-      y: position.y + __privateMethod(this, _RenderElementBase_instances, totalTopOffset_fn).call(this) * graphScale
-    };
-    const elementSize = {
-      x: scaledSize.x - __privateMethod(this, _RenderElementBase_instances, horizontalOffset_fn).call(this) * graphScale,
-      y: scaledSize.y - __privateMethod(this, _RenderElementBase_instances, verticalOffset_fn).call(this) * graphScale
-    };
-    this.doRender(ctx, offsetPosition, graphScale, elementSize);
+    __privateSet(this, _noteSelected, null);
   }
-  maxLimitations(out) {
-    out.x = -1;
-    out.y = -1;
-    if (__privateGet(this, _maxWidth2)) {
-      out.x = __privateGet(this, _maxWidth2);
+  mouseDragEvent(delta, scale) {
+    if (__privateGet(this, _noteSelected) === null) {
+      return false;
     }
-    if (__privateGet(this, _maxHeight2)) {
-      out.y = __privateGet(this, _maxHeight2);
+    if (__privateGet(this, _noteSelected).handleSelected()) {
+      return true;
     }
+    __privateGet(this, _noteSelected).translate({
+      x: delta.x * (1 / scale),
+      y: delta.y * (1 / scale)
+    });
+    return true;
   }
-  setDisplay(display) {
-    __privateSet(this, _display, display);
-  }
-  getDisplay() {
-    return __privateGet(this, _display);
+  fileDrop(file) {
+    return false;
   }
-  size(ctx, out) {
-    out.x = 0;
-    out.y = 0;
-    if (__privateGet(this, _display) === "none" /* None */) {
-      return;
-    }
-    const maxLimits = { x: -1, y: -1 };
-    this.maxLimitations(maxLimits);
-    this.calcSize(ctx, out, maxLimits);
-    out.x += __privateMethod(this, _RenderElementBase_instances, horizontalOffset_fn).call(this);
-    out.y += __privateMethod(this, _RenderElementBase_instances, verticalOffset_fn).call(this);
-    if (__privateGet(this, _minWidth)) {
-      out.x = Math.max(out.x, __privateGet(this, _minWidth));
+  removeNote(note) {
+    const index = __privateGet(this, _notes).indexOf(note);
+    if (index > -1) {
+      const noteRemoved = __privateGet(this, _notes)[index];
+      __privateGet(this, _notes).splice(index, 1);
+      for (let i = 0; i < __privateGet(this, _onNoteRemovedCallbacks).length; i++) {
+        __privateGet(this, _onNoteRemovedCallbacks)[i](noteRemoved);
+      }
+    } else {
+      console.error("no note found to remove");
     }
-    if (__privateGet(this, _maxWidth2)) {
-      out.x = Math.min(__privateGet(this, _maxWidth2), out.x);
+  }
+  render(ctx, camera, mousePosition) {
+    __privateSet(this, _noteHovering, null);
+    __privateSet(this, _hoveringHandle, 0 /* None */);
+    if (mousePosition) {
+      for (let i = 0; i < __privateGet(this, _notes).length; i++) {
+        __privateGet(this, _notes)[i].setHovering(false);
+        if (InBox(__privateGet(this, _notes)[i].bounds(), mousePosition)) {
+          __privateSet(this, _noteHovering, __privateGet(this, _notes)[i]);
+        }
+      }
     }
-    if (__privateGet(this, _maxHeight2)) {
-      out.y = Math.min(__privateGet(this, _maxHeight2), out.y);
+    if (__privateGet(this, _noteHovering) != null) {
+      __privateGet(this, _noteHovering).setHovering(true);
+      if (mousePosition) {
+        if (InBox(__privateGet(this, _noteHovering).leftResizeHandleBox(), mousePosition)) {
+          __privateSet(this, _hoveringHandle, 1 /* Left */);
+        } else if (InBox(__privateGet(this, _noteHovering).rightResizeHandleBox(), mousePosition)) {
+          __privateSet(this, _hoveringHandle, 2 /* Right */);
+        }
+      }
     }
-    if (__privateGet(this, _minHeight)) {
-      out.y = Math.max(__privateGet(this, _minHeight), out.y);
+    for (let i = 0; i < __privateGet(this, _notes).length; i++) {
+      __privateGet(this, _notes)[i].render(ctx, camera, mousePosition);
     }
+    return;
   }
 };
-_margin = new WeakMap();
-_padding2 = new WeakMap();
-_border2 = new WeakMap();
-_backgroundColor2 = new WeakMap();
-_minWidth = new WeakMap();
-_maxWidth2 = new WeakMap();
-_minHeight = new WeakMap();
-_maxHeight2 = new WeakMap();
-_grow = new WeakMap();
-_display = new WeakMap();
-_RenderElementBase_instances = new WeakSet();
-horizontalOffset_fn = function() {
-  return __privateGet(this, _border2).Thickness + __privateGet(this, _margin).Left + __privateGet(this, _margin).Right + __privateGet(this, _padding2).Left + __privateGet(this, _padding2).Right;
-};
-verticalOffset_fn = function() {
-  return __privateGet(this, _border2).Thickness + __privateGet(this, _margin).Top + __privateGet(this, _margin).Bottom + __privateGet(this, _padding2).Top + __privateGet(this, _padding2).Bottom;
-};
-totalTopOffset_fn = function() {
-  return __privateGet(this, _border2).Thickness / 2 + __privateGet(this, _margin).Top + __privateGet(this, _padding2).Top;
-};
-totalLeftOffset_fn = function() {
-  return __privateGet(this, _border2).Thickness / 2 + __privateGet(this, _margin).Left + __privateGet(this, _padding2).Left;
-};
+_notes = new WeakMap();
+_noteHovering = new WeakMap();
+_noteSelected = new WeakMap();
+_hoveringHandle = new WeakMap();
+_onNoteAddedCallbacks = new WeakMap();
+_onNoteRemovedCallbacks = new WeakMap();
+_onNoteDragStartCallbacks = new WeakMap();
+_onNoteDragStopCallbacks = new WeakMap();
 
-// src/elements/container.ts
-var _elements, _layout, _alignment, _ContainerRenderElement_instances, renderColumn_fn;
-var ContainerRenderElement = class extends RenderElementBase {
-  constructor(elements, config) {
-    super(config);
-    __privateAdd(this, _ContainerRenderElement_instances);
-    __privateAdd(this, _elements);
-    __privateAdd(this, _layout);
-    __privateAdd(this, _alignment);
-    __privateSet(this, _elements, elements);
-    __privateSet(this, _layout, "column" /* Column */);
-    __privateSet(this, _alignment, "stretch" /* Stretch */);
+// src/pass/subsystem.ts
+var _queue;
+var PassSubsystem = class {
+  constructor() {
+    __privateAdd(this, _queue);
+    __privateSet(this, _queue, new List());
   }
-  calcSize(ctx, out, limitations) {
-    out.x = 0;
-    out.y = 0;
-    const eleSize = { x: 0, y: 0 };
-    switch (__privateGet(this, _layout)) {
-      case "column" /* Column */:
-        for (let i = 0; i < __privateGet(this, _elements).length; i++) {
-          __privateGet(this, _elements)[i].size(ctx, eleSize);
-          out.x = Math.max(out.x, eleSize.x);
-          out.y += eleSize.y;
-        }
-        break;
-      case "row" /* Row */:
-        for (let i = 0; i < __privateGet(this, _elements).length; i++) {
-          __privateGet(this, _elements)[i].size(ctx, eleSize);
-          out.y = Math.max(out.y, eleSize.y);
-          out.x += eleSize.x;
-        }
-        break;
-      default:
-        throw new Error("unknown layout: " + __privateGet(this, _layout));
+  queue(lambda) {
+    if (!lambda) {
+      return;
     }
+    __privateGet(this, _queue).Push(lambda);
   }
-  doRender(ctx, position, graphScale, scaledFillableSpace) {
-    switch (__privateGet(this, _layout)) {
-      case "column" /* Column */:
-        __privateMethod(this, _ContainerRenderElement_instances, renderColumn_fn).call(this, ctx, position, graphScale, scaledFillableSpace);
-        break;
-      default:
-        throw new Error("unimplemented layout direction: " + __privateGet(this, _layout));
+  render(ctx, camera, mousePosition) {
+    for (let i = 0; i < __privateGet(this, _queue).Count(); i++) {
+      __privateGet(this, _queue).At(i)();
     }
+    __privateGet(this, _queue).Clear();
+    return;
   }
-};
-_elements = new WeakMap();
-_layout = new WeakMap();
-_alignment = new WeakMap();
-_ContainerRenderElement_instances = new WeakSet();
-renderColumn_fn = function(ctx, position, graphScale, scaledFillableSpace) {
-  const currnetPos = { x: position.x, y: position.y };
-  const scaledEleSize = { x: 0, y: 0 };
-  for (let i = 0; i < __privateGet(this, _elements).length; i++) {
-    const ele = __privateGet(this, _elements)[i];
-    ele.size(ctx, scaledEleSize);
-    ScaleVector(scaledEleSize, graphScale);
-    switch (__privateGet(this, _alignment)) {
-      case "stretch" /* Stretch */:
-        currnetPos.x = position.x;
-        scaledEleSize.x = scaledFillableSpace.x;
-        break;
-      // I'm not sure if this is even needed, I feel like this should
-      // already be the case.
-      case "start" /* Start */:
-        currnetPos.x = position.x;
-        break;
-      case "end" /* End */:
-        currnetPos.x = scaledFillableSpace.x - scaledEleSize.x;
-        break;
-      case "center" /* Center */:
-        currnetPos.x = scaledFillableSpace.x - scaledEleSize.x / 2;
-        break;
-      default:
-        throw new Error("unimplmeneted alignment: " + __privateGet(this, _alignment));
-    }
-    ele.render(ctx, currnetPos, graphScale, scaledEleSize);
-    currnetPos.y += scaledEleSize.y;
+  openContextMenu(ctx, position) {
+    return null;
   }
-};
-
-// src/elements/text.ts
-var _text7, _align, _verticalAlign;
-var TextElement = class extends RenderElementBase {
-  constructor(text, styling) {
-    var _a, _b;
-    super(styling);
-    __privateAdd(this, _text7);
-    __privateAdd(this, _align);
-    __privateAdd(this, _verticalAlign);
-    __privateSet(this, _text7, text);
-    __privateSet(this, _align, (_a = styling == null ? void 0 : styling.Align) != null ? _a : "left" /* Left */);
-    __privateSet(this, _verticalAlign, (_b = styling == null ? void 0 : styling.VerticalAlign) != null ? _b : "top" /* Top */);
+  clickStart(mousePosition, camera, ctrlKey) {
+    return false;
   }
-  doRender(ctx, position, graphScale, scaledFillableSpace) {
-    const scale = Zero();
-    this.calcSize(ctx, scale);
-    ScaleVector(scale, graphScale);
-    const justifiedPosition = Zero();
-    CopyVector2(justifiedPosition, position);
-    ctx.textAlign = "left";
-    ctx.textBaseline = "top";
-    switch (__privateGet(this, _align)) {
-      case "left" /* Left */:
-        break;
-      case "right" /* Right */:
-        justifiedPosition.x += scaledFillableSpace.x - scale.x;
-        break;
-      case "center" /* Center */:
-        justifiedPosition.x += (scaledFillableSpace.x - scale.x) / 2;
-        break;
-      default:
-        throw new Error("unimplemented justification: " + __privateGet(this, _align));
-    }
-    switch (__privateGet(this, _verticalAlign)) {
-      case "top" /* Top */:
-        break;
-      case "bottom" /* Bottom */:
-        justifiedPosition.y += scaledFillableSpace.y - scale.y;
-        break;
-      case "center" /* Center */:
-        justifiedPosition.y += (scaledFillableSpace.y - scale.y) / 2;
-        break;
-      default:
-        throw new Error("unimplemented justification: " + __privateGet(this, _align));
-    }
-    __privateGet(this, _text7).render(ctx, graphScale, justifiedPosition);
+  mouseDragEvent(delta, scale) {
+    return false;
   }
-  calcSize(ctx, out) {
-    __privateGet(this, _text7).size(ctx, 1, out);
+  fileDrop(file) {
+    return false;
+  }
+  clickEnd() {
   }
 };
-_text7 = new WeakMap();
-_align = new WeakMap();
-_verticalAlign = new WeakMap();
+_queue = new WeakMap();
 
 // src/quickMenu.ts
 var _text8;