@multiplatform.one/node-graph 7.7.2

package/dist/cjs/nodes/GraphNode.cjs

@@ -0,0 +1,161 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var GraphNode_exports = {};
+__export(GraphNode_exports, {
+  GraphNode: () => GraphNode
+});
+module.exports = __toCommonJS(GraphNode_exports);
+var import_react = require("react");
+var import_graphKnobs = require("../knobs/graphKnobs.cjs");
+var import_tamagui = require("tamagui");
+var import_xy = require("../react-flow/xy.cjs");
+var import_handleGeometry = require("./handleGeometry.cjs");
+var import_lod = require("./lod.cjs");
+var import_nodeMeasure = require("./nodeMeasure.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function usePortInternals(id, ports) {
+  const updateNodeInternals = (0, import_xy.useUpdateNodeInternals)();
+  const first = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    updateNodeInternals(id);
+  }, [id, ports, updateNodeInternals]);
+}
+function GraphNode({
+  id,
+  title,
+  subtitle,
+  ports,
+  intent,
+  selected = false,
+  dragging = false,
+  measure,
+  renderMode = "detail",
+  coarsePointer = false,
+  renderPort,
+  children
+}) {
+  const {
+    knobProps,
+    control
+  } = (0, import_graphKnobs.useGraphNodeKnobs)({
+    intent,
+    selected,
+    dragging
+  });
+  usePortInternals(id, ports);
+  const size = knobProps.size;
+  const portSpacingPx = (0, import_nodeMeasure.portSpacing)({
+    coarsePointer
+  });
+  const portGutterPx = (0, import_handleGeometry.paintedPortSize)(size);
+  const width = (0, import_nodeMeasure.graphNodeWidth)({
+    size,
+    measure
+  });
+  const minHeight = (0, import_nodeMeasure.graphNodeMinHeight)({
+    size,
+    ports: ports ?? [],
+    portSpacingPx,
+    measure
+  });
+  const radiusPx = (0, import_nodeMeasure.containerRadiusPx)(knobProps.containerRadius.borderRadius);
+  const overview = (0, import_lod.isOverview)(renderMode);
+  const fade = (0, import_lod.detailOpacity)(renderMode);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    "data-graph-node": id,
+    "data-graph-node-radius": String(radiusPx),
+    "data-graph-node-width": String(width),
+    "data-graph-node-render-mode": renderMode,
+    "data-graph-node-port-spacing": String(portSpacingPx),
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    ...knobProps.elevationChrome,
+    hoverStyle: {
+      ...control.hoverKnobProps
+    },
+    pressStyle: {
+      ...control.pressKnobProps
+    },
+    focusVisibleStyle: {
+      ...control.focusVisibleKnobProps
+    },
+    width,
+    minHeight,
+    position: "relative",
+    overflow: "visible",
+    opacity: dragging ? 0.85 : 1,
+    transition: knobProps.transition,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...knobProps.label,
+        numberOfLines: 1,
+        "data-graph-node-title": "",
+        children: title
+      }), selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        "data-graph-node-selected": ""
+      }) : null]
+    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      ...knobProps.body,
+      ...knobProps.label,
+      numberOfLines: 2,
+      opacity: 0.75 * fade,
+      children: subtitle
+    }) : null, ports?.length ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-graph-node-ports": "",
+      gap: 0,
+      opacity: fade,
+      pointerEvents: overview ? "none" : "auto",
+      children: ports.map(port => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        "data-graph-node-port-row": port.id,
+        "data-graph-node-port-side": port.side,
+        height: portSpacingPx,
+        alignItems: "center",
+        justifyContent: port.side === "right" ? "flex-end" : "flex-start",
+        position: "relative",
+        overflow: "visible",
+        children: [renderPort?.(port), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+          ...knobProps.body,
+          ...knobProps.label,
+          numberOfLines: 1,
+          paddingLeft: port.side === "right" ? 0 : portGutterPx,
+          paddingRight: port.side === "right" ? portGutterPx : 0,
+          children: port.label ?? port.id
+        })]
+      }, port.id))
+    }) : null, children ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-graph-node-children": "",
+      opacity: fade,
+      pointerEvents: overview ? "none" : "auto",
+      children
+    }) : null]
+  });
+}

package/dist/cjs/nodes/GraphNode.native.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var GraphNode_exports = {};
+__export(GraphNode_exports, {
+  GraphNode: () => GraphNode
+});
+module.exports = __toCommonJS(GraphNode_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_graphKnobs = require("../knobs/graphKnobs.native.js");
+var import_tamagui = require("tamagui");
+var import_xy = require("../react-flow/xy.native.js");
+var import_handleGeometry = require("./handleGeometry.native.js");
+var import_lod = require("./lod.native.js");
+var import_nodeMeasure = require("./nodeMeasure.native.js");
+function usePortInternals(id, ports) {
+  var updateNodeInternals = (0, import_xy.useUpdateNodeInternals)();
+  var first = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(function () {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    updateNodeInternals(id);
+  }, [id, ports, updateNodeInternals]);
+}
+function GraphNode(param) {
+  var {
+    id,
+    title,
+    subtitle,
+    ports,
+    intent,
+    selected = false,
+    dragging = false,
+    measure,
+    renderMode = "detail",
+    coarsePointer = false,
+    renderPort,
+    children
+  } = param;
+  var {
+    knobProps,
+    control
+  } = (0, import_graphKnobs.useGraphNodeKnobs)({
+    intent,
+    selected,
+    dragging
+  });
+  usePortInternals(id, ports);
+  var size = knobProps.size;
+  var portSpacingPx = (0, import_nodeMeasure.portSpacing)({
+    coarsePointer
+  });
+  var portGutterPx = (0, import_handleGeometry.paintedPortSize)(size);
+  var width = (0, import_nodeMeasure.graphNodeWidth)({
+    size,
+    measure
+  });
+  var minHeight = (0, import_nodeMeasure.graphNodeMinHeight)({
+    size,
+    ports: ports !== null && ports !== void 0 ? ports : [],
+    portSpacingPx,
+    measure
+  });
+  var radiusPx = (0, import_nodeMeasure.containerRadiusPx)(knobProps.containerRadius.borderRadius);
+  var overview = (0, import_lod.isOverview)(renderMode);
+  var fade = (0, import_lod.detailOpacity)(renderMode);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    "data-graph-node": id,
+    "data-graph-node-radius": String(radiusPx),
+    "data-graph-node-width": String(width),
+    "data-graph-node-render-mode": renderMode,
+    "data-graph-node-port-spacing": String(portSpacingPx),
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    ...knobProps.elevationChrome,
+    hoverStyle: {
+      ...control.hoverKnobProps
+    },
+    pressStyle: {
+      ...control.pressKnobProps
+    },
+    focusVisibleStyle: {
+      ...control.focusVisibleKnobProps
+    },
+    width,
+    minHeight,
+    // The containing block for its own ports. React Flow positions every
+    // Handle absolutely, so a `static` frame hands them to whatever ancestor
+    // happens to be positioned — off canvas, that is the document, and the
+    // discs pile up in the page corner instead of on the node edge.
+    position: "relative",
+    // §7.1 H6. Handles overhang the frame; a clipping node eats them.
+    overflow: "visible",
+    opacity: dragging ? 0.85 : 1,
+    transition: knobProps.transition,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [
+      /*
+        `label` ALONE, and deliberately not `{...knobProps.heading}` before
+        it. Measured in the MPO-191 knob fuzz: `label` carries
+        `fontFamily: bodyFontValue` (resolveKnobs.ts:648-652) and `heading`
+        carries the heading family, so spreading heading first and label
+        second made the title paint the BODY face while the source read as if
+        it painted the heading one. The rendered result was right — design §11
+        declares this ink honours `bodyFont` — but only by spread order, and a
+        reorder would have flipped a documented law silently. One fragment,
+        one law. `GraphNode.spec.tsx` pins that `headingFont` does not move it.
+      */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...knobProps.label,
+        numberOfLines: 1,
+        "data-graph-node-title": "",
+        children: title
+      }), selected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        "data-graph-node-selected": ""
+      }) : null]
+    }), subtitle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      ...knobProps.body,
+      ...knobProps.label,
+      numberOfLines: 2,
+      // 0.75 is the subtitle's own de-emphasis in detail; overview
+      // multiplies it to zero rather than replacing it, so the two laws
+      // compose instead of one silently overriding the other.
+      opacity: 0.75 * fade,
+      children: subtitle
+    }) : null, (ports === null || ports === void 0 ? void 0 : ports.length) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-graph-node-ports": "",
+      gap: 0,
+      opacity: fade,
+      // An invisible 44 px press target is a trap. The ports stay MOUNTED
+      // (the box depends on them) but stop taking a pointer while nothing
+      // is drawn there for the user to aim at.
+      pointerEvents: overview ? "none" : "auto",
+      children: ports.map(function (port) {
+        var _port_label;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-graph-node-port-row": port.id,
+          "data-graph-node-port-side": port.side,
+          height: portSpacingPx,
+          alignItems: "center",
+          justifyContent: port.side === "right" ? "flex-end" : "flex-start",
+          // Each row is the containing block for ITS OWN port. React Flow
+          // places a handle at `top: 50%` of the nearest positioned
+          // ancestor, so with only the frame positioned every left port on
+          // a six-port node lands on the same pixel — seen in the Crowded
+          // story before this line existed. Per-row makes the pitch real.
+          position: "relative",
+          // The row is where the port's painted disc overhangs the frame.
+          overflow: "visible",
+          children: [renderPort === null || renderPort === void 0 ? void 0 : renderPort(port), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.body,
+            ...knobProps.label,
+            numberOfLines: 1,
+            paddingLeft: port.side === "right" ? 0 : portGutterPx,
+            paddingRight: port.side === "right" ? portGutterPx : 0,
+            children: (_port_label = port.label) !== null && _port_label !== void 0 ? _port_label : port.id
+          })]
+        }, port.id);
+      })
+    }) : null,
+    /*
+      Wrapped, and the wrapper is present in BOTH modes. Rendering
+      `{children}` bare and switching it off in overview is what the previous
+      version did, and an unmount collapses the box — which is the one thing
+      design §5 forbids, because React Flow's observer then reports a new
+      height and every edge attached to this node moves.
+    */
+    children ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      "data-graph-node-children": "",
+      opacity: fade,
+      pointerEvents: overview ? "none" : "auto",
+      children
+    }) : null]
+  });
+}
+//# sourceMappingURL=GraphNode.native.js.map

package/dist/cjs/nodes/GraphNode.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","GraphNode_exports","__export","GraphNode","module","exports","import_jsx_runtime","require","import_react","import_graphKnobs","import_tamagui","import_xy","import_handleGeometry","import_lod","import_nodeMeasure","usePortInternals","id","ports","updateNodeInternals","useUpdateNodeInternals","first","useRef","useEffect","current","param","title","subtitle","intent","selected","dragging","measure","renderMode","coarsePointer","renderPort","children","knobProps","control","useGraphNodeKnobs","size","portSpacingPx","portSpacing","portGutterPx","paintedPortSize","width","graphNodeWidth","minHeight","graphNodeMinHeight","radiusPx","containerRadiusPx","containerRadius","borderRadius","overview","isOverview","fade","detailOpacity","jsxs","YStack","String","surface","panelPadding","gap","elevationChrome","hoverStyle","hoverKnobProps","pressStyle","pressKnobProps","focusVisibleStyle","focusVisibleKnobProps","position","overflow","opacity","transition","XStack","alignItems","justifyContent","jsx","SizableText","label","numberOfLines","body","length","pointerEvents","map","port","_port_label"],"sources":["../../../src/nodes/GraphNode.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/nodes/GraphPort.cjs

@@ -0,0 +1,104 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var GraphPort_exports = {};
+__export(GraphPort_exports, {
+  GraphPort: () => GraphPort
+});
+module.exports = __toCommonJS(GraphPort_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_xy = require("../react-flow/xy.cjs");
+var import_handleGeometry = require("./handleGeometry.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const positionForSide = {
+  left: import_xy.Position.Left,
+  right: import_xy.Position.Right,
+  top: import_xy.Position.Top,
+  bottom: import_xy.Position.Bottom
+};
+function GraphPort({
+  id,
+  side,
+  direction,
+  intent,
+  coarsePointer = (0, import_theme.isTouchSurface)(),
+  portSpacingPx,
+  isConnectable = true
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "GraphPort",
+    intent
+  });
+  const size = knobProps.size;
+  const painted = (0, import_handleGeometry.paintedPortSize)(size);
+  const hit = (0, import_handleGeometry.portHitSize)({
+    size,
+    coarsePointer,
+    portSpacingPx
+  });
+  const borderWidthPx = knobProps.surface.borderWidth;
+  const inset = (0, import_handleGeometry.portRegionInset)({
+    size,
+    coarsePointer,
+    portSpacingPx,
+    borderWidthPx
+  });
+  const style = {
+    backgroundColor: knobProps.surface.backgroundColor,
+    borderColor: knobProps.surface.borderColor,
+    borderWidth: borderWidthPx,
+    borderStyle: "solid",
+    // The custom properties `css/graph.css` reads. Three INPUTS, not an
+    // answer: the sheet computes the inset itself, because milestone 6's H7
+    // makes it depend on the live viewport zoom — which this component cannot
+    // see without subscribing to the store on every pinch frame, and would then
+    // have to re-render every port to publish.
+    //
+    // `--mpo-graph-handle-inset` used to be published here as the answer. It is
+    // gone rather than kept beside the calc: a var nothing reads is the kind of
+    // drift that survives three refactors and then gets believed.
+    ["--mpo-graph-handle-size"]: `${painted}px`,
+    ["--mpo-graph-handle-hit"]: `${hit}px`,
+    ["--mpo-graph-handle-border"]: `${borderWidthPx}px`,
+    // §11: the circle is identity. Declared here as well as in the sheet so a
+    // consumer who forgets to import the CSS still gets a round port rather
+    // than a square one that reads as a resize grip.
+    borderRadius: "50%",
+    width: painted,
+    height: painted,
+    boxShadow: "none"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_xy.Handle, {
+    id,
+    type: direction === "in" ? "target" : "source",
+    position: positionForSide[side],
+    className: "mp-graph-port",
+    isConnectable,
+    style,
+    "data-graph-port": id,
+    "data-graph-port-painted": String(painted),
+    "data-graph-port-hit": String(hit),
+    "data-graph-port-inset": String(inset)
+  });
+}

package/dist/cjs/nodes/GraphPort.native.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var GraphPort_exports = {};
+__export(GraphPort_exports, {
+  GraphPort: () => GraphPort
+});
+module.exports = __toCommonJS(GraphPort_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_xy = require("../react-flow/xy.native.js");
+var import_handleGeometry = require("./handleGeometry.native.js");
+var positionForSide = {
+  left: import_xy.Position.Left,
+  right: import_xy.Position.Right,
+  top: import_xy.Position.Top,
+  bottom: import_xy.Position.Bottom
+};
+function GraphPort(param) {
+  var {
+    id,
+    side,
+    direction,
+    intent,
+    coarsePointer = (0, import_theme.isTouchSurface)(),
+    portSpacingPx,
+    isConnectable = true
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "GraphPort",
+    intent
+  });
+  var size = knobProps.size;
+  var painted = (0, import_handleGeometry.paintedPortSize)(size);
+  var hit = (0, import_handleGeometry.portHitSize)({
+    size,
+    coarsePointer,
+    portSpacingPx
+  });
+  var borderWidthPx = knobProps.surface.borderWidth;
+  var inset = (0, import_handleGeometry.portRegionInset)({
+    size,
+    coarsePointer,
+    portSpacingPx,
+    borderWidthPx
+  });
+  var style = {
+    backgroundColor: knobProps.surface.backgroundColor,
+    borderColor: knobProps.surface.borderColor,
+    borderWidth: borderWidthPx,
+    borderStyle: "solid",
+    // The custom properties `css/graph.css` reads. Three INPUTS, not an
+    // answer: the sheet computes the inset itself, because milestone 6's H7
+    // makes it depend on the live viewport zoom — which this component cannot
+    // see without subscribing to the store on every pinch frame, and would then
+    // have to re-render every port to publish.
+    //
+    // `--mpo-graph-handle-inset` used to be published here as the answer. It is
+    // gone rather than kept beside the calc: a var nothing reads is the kind of
+    // drift that survives three refactors and then gets believed.
+    ["--mpo-graph-handle-size"]: `${painted}px`,
+    ["--mpo-graph-handle-hit"]: `${hit}px`,
+    ["--mpo-graph-handle-border"]: `${borderWidthPx}px`,
+    // §11: the circle is identity. Declared here as well as in the sheet so a
+    // consumer who forgets to import the CSS still gets a round port rather
+    // than a square one that reads as a resize grip.
+    borderRadius: "50%",
+    width: painted,
+    height: painted,
+    boxShadow: "none"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_xy.Handle, {
+    id,
+    type: direction === "in" ? "target" : "source",
+    position: positionForSide[side],
+    className: "mp-graph-port",
+    isConnectable,
+    style,
+    "data-graph-port": id,
+    "data-graph-port-painted": String(painted),
+    "data-graph-port-hit": String(hit),
+    "data-graph-port-inset": String(inset)
+  });
+}
+//# sourceMappingURL=GraphPort.native.js.map

package/dist/cjs/nodes/GraphPort.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","GraphPort_exports","__export","GraphPort","module","exports","import_jsx_runtime","require","import_theme","import_xy","import_handleGeometry","positionForSide","left","Position","Left","right","Right","top","Top","bottom","Bottom","param","id","side","direction","intent","coarsePointer","isTouchSurface","portSpacingPx","isConnectable","knobProps","useResolvedKnobs","component","size","painted","paintedPortSize","hit","portHitSize","borderWidthPx","surface","borderWidth","inset","portRegionInset","style","backgroundColor","borderColor","borderStyle","borderRadius","width","height","boxShadow","jsx","Handle","type","position","className","String"],"sources":["../../../src/nodes/GraphPort.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,iBAAA;AAAAC,QAAA,CAAAD,iBAAA;EAAAE,SAAA,EAAAA,CAAA,KAAAA;AAAA;AAmBAC,MAAA,CAAAC,OAAA,GAAAT,YAAiD,CAAAK,iBAAA;AAEjD,IAAAK,kBAAiC,GAAAC,OAAA;AACjC,IAAAC,YAAA,GAAAD,OAAA,2BAA8D;AAiF1D,IAAAE,SAAA,GAAAF,OAAA;AA9EJ,IAAAG,qBAAyD,GAAAH,OAAA;AAAA,IACvDI,eAAM;EACNC,IAAA,EAAAH,SAAO,CAAAI,QAAA,CAAAC,IAAS;EAChBC,KAAK,EAAAN,SAAA,CAAAI,QAAS,CAAAG,KAAA;EACdC,GAAA,EAAAR,SAAQ,CAAAI,QAAA,CAAAK,GAAS;EACnBC,MAAA,EAAAV,SAAA,CAAAI,QAAA,CAAAO;AAuBO;AAAmB,SACxBjB,UAAAkB,KAAA;EACA;IAAAC,EAAA;IAAAC,IAAA;IAAAC,SAAA;IAAAC,MAAA;IAAAC,aAAA,OAAAlB,YAAA,CAAAmB,cAAA;IAAAC,aAAA;IAAAC,aAAA;EAAA,IAAAR,KAAA;EACA;IAAAS;EAAA,QAAAtB,YAAA,CAAAuB,gBAAA;IACAC,SAAA;IACAP;EACA;EACA,IAAAQ,IAAA,GAAAH,SAAgB,CAAAG,IAAA;EAClB,IAAmBC,OAAA,OAAAxB,qBAAA,CAAAyB,eAAA,EAAAF,IAAA;EACjB,IAAAG,GAAM,GAAE,IAAA1B,qBAAc,CAAA2B,WAAA;IACtBJ,IAAM;IAENP,aAAM;IACNE;EACA;EAIA,IAAAU,aAAM,GAAQR,SAAA,CAAAS,OAAA,CAAAC,WAAA;EAKd,IAAAC,KAAM,KAAuB,EAAA/B,qBAAA,CAAAgC,eAAA;IAC3BT,IAAA;IACAP,aAAa;IACbE,aAAa;IACbU;EAAa;EAAA,IAAAK,KAAA;IAAAC,eAAA,EAAAd,SAAA,CAAAS,OAAA,CAAAK,eAAA;IAAAC,WAAA,EAAAf,SAAA,CAAAS,OAAA,CAAAM,WAAA;IAAAL,WAAA,EAAAF,aAAA;IAAAQ,WAAA;IAAA;IAAA;IAAA;IAUb;IACA;IACA;IAAyD;IAAA;IAAA;IAIzD,0BAAc,MAAAZ,OAAA;IACd,yBAAO,MAAAE,GAAA;IACP,4BAAQ,MAAAE,aAAA;IACR;IACF;IAEA;IACGS,YAAA;IAAAC,KAAA,EAAAd,OAAA;IAAAe,MACC,EAAAf,OAAA;IAAAgB,SACM;EAAgC;EACR,OAC9B,eAAU,IAAA5C,kBAAA,CAAA6C,GAAA,EAAA1C,SAAA,CAAA2C,MAAA;IAAA9B,EACV;IAAA+B,IACA,EAAA7B,SAAA;IAAA8B,QACA,EAAA3C,eAAiB,CAAAY,IAAA;IAAAgC,SACjB;IAAuC1B,aACvC;IAA+Bc,KAC/B;IAAmC,mBAAArB,EAAA;IACrC,2BAAAkC,MAAA,CAAAtB,OAAA;IAEJ,uBAAAsB,MAAA,CAAApB,GAAA","ignoreList":[]}