@multiplatform.one/node-graph 7.7.2

package/dist/cjs/react-flow/NodeGraphWeb.cjs

@@ -0,0 +1,386 @@
+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 NodeGraphWeb_exports = {};
+__export(NodeGraphWeb_exports, {
+  NodeGraphWeb: () => NodeGraphWeb,
+  graphCanvasDefaults: () => graphCanvasDefaults
+});
+module.exports = __toCommonJS(NodeGraphWeb_exports);
+var import_style = require("@xyflow/react/dist/style.css");
+var import_graph = require("../../css/graph.css");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_GraphEdge = require("../edges/GraphEdge.cjs");
+var import_snapChanges = require("../interaction/snapChanges.cjs");
+var import_useLassoSelect = require("../interaction/useLassoSelect.cjs");
+var import_LassoOverlay = require("./LassoOverlay.cjs");
+var import_SnapGuides = require("./SnapGuides.cjs");
+var import_ConnectionPuck = require("./ConnectionPuck.cjs");
+var import_KnobEnvelopeProvider = require("../knobs/KnobEnvelopeProvider.cjs");
+var import_useKnobEnvelope = require("../knobs/useKnobEnvelope.cjs");
+var import_handleGeometry = require("../nodes/handleGeometry.cjs");
+var import_lod = require("../nodes/lod.cjs");
+var import_GraphVarsStyle = require("../theme/GraphVarsStyle.cjs");
+var import_GraphActions = require("./GraphActions.cjs");
+var import_GraphCommandBridge = require("./GraphCommandBridge.cjs");
+var import_GraphPaintProbe = require("./GraphPaintProbe.cjs");
+var import_GraphZoomVar = require("./GraphZoomVar.cjs");
+var import_GraphNodeHost = require("./GraphNodeHost.cjs");
+var import_useGraphController = require("./useGraphController.cjs");
+var import_xy = require("./xy.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const graphCanvasDefaults = {
+  onlyRenderVisibleElements: true,
+  fitView: true,
+  /** Below this zoom a node draws in `overview` mode. Design §5. */
+  overviewZoom: import_lod.defaultOverviewZoom,
+  /**
+   * React Flow's own default is **0.5**, which is ABOVE `overviewZoom`.
+   *
+   * Measured in Chrome on `NodeGraph/Overview` at 500 nodes: the zoom-out
+   * control bottomed out at 0.5, `fitView` clamped there and showed 50 of the
+   * 500 nodes, and the overview mode this milestone builds was unreachable —
+   * not broken, unreachable, which is worse, because every unit spec around it
+   * was green. A level of detail below a floor the user cannot cross is dead
+   * code with a passing test suite.
+   *
+   * `graphCanvasDefaults.minZoom < graphCanvasDefaults.overviewZoom` is
+   * asserted in `lod.spec.tsx`, so the two cannot drift back into that state.
+   */
+  minZoom: 0.05,
+  maxZoom: 2
+};
+function FitOnFirstMeasure({
+  enabled
+}) {
+  const {
+    fitView
+  } = (0, import_xy.useReactFlow)();
+  const allMeasured = (0, import_xy.useStore)(state => {
+    let total = 0;
+    let measured = 0;
+    for (const node of state.nodeLookup.values()) {
+      total += 1;
+      if (node.measured?.height) measured += 1;
+    }
+    return total > 0 && total === measured;
+  });
+  const fitted = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || fitted.current || !allMeasured) return;
+    fitted.current = true;
+    void fitView();
+  }, [enabled, allMeasured, fitView]);
+  return null;
+}
+function NodeGraphCanvas(props) {
+  const {
+    schema,
+    document,
+    defaultDocument,
+    onDocumentChange,
+    onConnectionRefused,
+    readOnly = false,
+    knobs,
+    presetName,
+    intent,
+    coarsePointer = (0, import_theme.isTouchSurface)(),
+    interactionMode = "pan",
+    onlyRenderVisibleElements = graphCanvasDefaults.onlyRenderVisibleElements,
+    fitView = graphCanvasDefaults.fitView,
+    overviewZoom = graphCanvasDefaults.overviewZoom,
+    snapping,
+    minZoom = graphCanvasDefaults.minZoom,
+    maxZoom = graphCanvasDefaults.maxZoom,
+    nodeTypes,
+    connectionPuck = true,
+    longPressLasso = false,
+    nodeLabel,
+    className,
+    style,
+    children
+  } = props;
+  const rootRef = (0, import_react.useRef)(null);
+  const graphEventRef = (0, import_react.useRef)(props.onGraphEvent);
+  graphEventRef.current = props.onGraphEvent;
+  const emit = (0, import_react.useCallback)(event => graphEventRef.current?.(event), []);
+  const perfHost = props.renderer ?? "react-flow-web";
+  const readBootMsRef = (0, import_react.useRef)(props.readBootMs);
+  readBootMsRef.current = props.readBootMs;
+  const onPaint = (0, import_react.useCallback)(() => emit({
+    t: "paint",
+    bootMs: readBootMsRef.current?.() ?? null
+  }), [emit]);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const size = knobProps.size;
+  const envelope = (0, import_useKnobEnvelope.useKnobEnvelope)({
+    knobs,
+    presetName,
+    intent: intent ?? void 0,
+    pointer: coarsePointer ? "coarse" : "fine"
+  });
+  const connectionRadius = (0, import_handleGeometry.portConnectionRadius)({
+    size,
+    coarsePointer
+  });
+  const reactFlowApi = (0, import_xy.useReactFlow)();
+  const readMeasuredSizes = (0, import_react.useCallback)(() => {
+    const sizes = {};
+    for (const node of reactFlowApi.getNodes()) {
+      const width = node.measured?.width;
+      const height = node.measured?.height;
+      if (width && height) sizes[node.id] = {
+        width,
+        height
+      };
+    }
+    return sizes;
+  }, [reactFlowApi]);
+  const controller = (0, import_useGraphController.useGraphController)({
+    schema,
+    document,
+    defaultDocument,
+    onDocumentChange,
+    onConnectionRefused,
+    readOnly,
+    size,
+    coarsePointer,
+    readMeasuredSizes
+  });
+  const setNodeData = (0, import_react.useCallback)((id, patch) => {
+    const node = controller.document.nodes.find(candidate => candidate.id === id);
+    if (!node) return;
+    controller.commit({
+      t: "setNodeData",
+      id,
+      data: {
+        ...node.data,
+        ...patch
+      }
+    });
+  }, [controller]);
+  const host = (0, import_react.useMemo)(() => ({
+    schema,
+    overviewZoom,
+    coarsePointer,
+    readOnly,
+    setNodeData
+  }), [schema, overviewZoom, coarsePointer, readOnly, setNodeData]);
+  const snapSession = (0, import_react.useRef)((0, import_snapChanges.createSnapSession)());
+  const [guides, setGuides] = (0, import_react.useState)([]);
+  const snapOptions = (0, import_snapChanges.snapContextOptions)({
+    snapping,
+    animation: envelope.knobs.animation,
+    reducedMotion: envelope.prefersReducedMotion,
+    coarsePointer
+  });
+  const {
+    alignment: snapAlignmentOn,
+    grid: snapGrid,
+    thresholdScreenPx
+  } = snapOptions;
+  const reactFlow = reactFlowApi;
+  const controllerNodesRef = (0, import_react.useRef)(controller.nodes);
+  controllerNodesRef.current = controller.nodes;
+  const controllerChangeRef = (0, import_react.useRef)(controller.onNodesChange);
+  controllerChangeRef.current = controller.onNodesChange;
+  const onNodesChange = (0, import_react.useCallback)(changes => {
+    const snapped = (0, import_snapChanges.applySnapToChanges)(changes, {
+      nodes: controllerNodesRef.current,
+      zoom: reactFlow.getZoom(),
+      session: snapSession.current,
+      alignment: snapAlignmentOn,
+      grid: snapGrid,
+      thresholdScreenPx
+    });
+    setGuides(previous => previous.length === 0 && snapped.guides.length === 0 ? previous : snapped.guides);
+    controllerChangeRef.current(snapped.changes);
+  }, [reactFlow, snapAlignmentOn, snapGrid, thresholdScreenPx]);
+  const longPress = (0, import_react.useMemo)(() => ({
+    rootRef,
+    enabled: longPressLasso,
+    viewport: {
+      get: () => reactFlowApi.getViewport(),
+      set: viewport => {
+        void reactFlowApi.setViewport(viewport, {
+          duration: 0
+        });
+      }
+    },
+    getNodeRects: () => reactFlowApi.getNodes().map(node => ({
+      id: node.id,
+      rect: {
+        x: node.position.x,
+        y: node.position.y,
+        width: node.measured?.width ?? node.width ?? 0,
+        height: node.measured?.height ?? node.height ?? 0
+      }
+    })),
+    onSelect: ids => {
+      const wanted = new Set(ids);
+      reactFlowApi.setNodes(nodes => nodes.map(node => ({
+        ...node,
+        selected: wanted.has(node.id)
+      })));
+      emit({
+        t: "lasso",
+        phase: "select",
+        ids,
+        haptic: null
+      });
+      emit({
+        t: "selection",
+        ids
+      });
+    },
+    // A WebView cannot buzz. The shell can, so the canvas asks — a HINT, not
+    // a command: whether a buzz is appropriate is the shell's call.
+    onHaptic: () => emit({
+      t: "lasso",
+      phase: "arm",
+      ids: [],
+      haptic: "selection"
+    }),
+    onCancel: () => emit({
+      t: "lasso",
+      phase: "cancel",
+      ids: [],
+      haptic: null
+    })
+  }), [emit, longPressLasso, reactFlowApi]);
+  const lasso = (0, import_useLassoSelect.useLassoSelect)({
+    mode: interactionMode,
+    longPress
+  });
+  const ownSlot = (0, import_react.useRef)(null);
+  const slot = props.commandSlot ?? ownSlot;
+  const handle = (0, import_react.useMemo)(() => ({
+    fitView: () => slot.current?.fitView(),
+    relayout: () => slot.current?.relayout(),
+    zoomTo: zoom => slot.current?.zoomTo(zoom),
+    centerOn: nodeId => slot.current?.centerOn(nodeId),
+    setSelection: ids => slot.current?.setSelection(ids),
+    exportViewport: () => slot.current?.exportViewport(),
+    undo: () => slot.current?.undo(),
+    redo: () => slot.current?.redo(),
+    perfStart: label => slot.current?.perfStart(label),
+    perfStop: label => slot.current?.perfStop(label),
+    perfMark: label => slot.current?.perfMark(label),
+    setViewport: (x, y, zoom) => slot.current?.setViewport(x, y, zoom),
+    synthPinch: (scale, steps) => slot.current?.synthPinch(scale, steps)
+  }), [slot]);
+  (0, import_react.useImperativeHandle)(props.graphRef, () => handle, [handle]);
+  const types = (0, import_react.useMemo)(() => ({
+    [import_useGraphController.defaultGraphNodeType]: import_GraphNodeHost.GraphNodeHost,
+    ...nodeTypes
+  }), [nodeTypes]);
+  const actions = (0, import_react.useMemo)(() => ({
+    relayout: controller.relayout,
+    undo: controller.undo,
+    redo: controller.redo,
+    canUndo: controller.canUndo,
+    canRedo: controller.canRedo,
+    layoutRunner: controller.layoutRunner,
+    lastLayoutMs: controller.lastLayoutMs,
+    layoutPending: controller.layoutPending,
+    nodeCount: controller.document.nodes.length
+  }), [controller.relayout, controller.undo, controller.redo, controller.canUndo, controller.canRedo, controller.layoutRunner, controller.lastLayoutMs, controller.layoutPending, controller.document.nodes.length]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    ref: rootRef,
+    className: className ? `${import_GraphVarsStyle.graphRootClassName} ${className}` : import_GraphVarsStyle.graphRootClassName,
+    "data-graph-scheme": envelope.scheme,
+    style: {
+      width: "100%",
+      height: "100%",
+      ...style
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphVarsStyle.GraphVars, {
+      vars: envelope.vars,
+      scheme: envelope.scheme,
+      revision: envelope.revision
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_KnobEnvelopeProvider.KnobEnvelopeProvider, {
+      envelope,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphActions.GraphActionsProvider, {
+        value: actions,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphNodeHost.GraphHostProvider, {
+          value: host,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_xy.ReactFlow, {
+            nodes: controller.nodes,
+            edges: controller.edges,
+            nodeTypes: types,
+            edgeTypes: import_GraphEdge.graphEdgeTypes,
+            onNodesChange,
+            onEdgesChange: controller.onEdgesChange,
+            onConnect: controller.onConnect,
+            isValidConnection: controller.isValidConnection,
+            connectionRadius,
+            onlyRenderVisibleElements,
+            fitView,
+            minZoom,
+            maxZoom,
+            ...lasso.flowProps,
+            colorMode: envelope.scheme,
+            nodesDraggable: !readOnly,
+            nodesConnectable: !readOnly,
+            elementsSelectable: true,
+            proOptions: {
+              hideAttribution: true
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(FitOnFirstMeasure, {
+              enabled: fitView
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphZoomVar.GraphZoomVar, {
+              rootRef
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphPaintProbe.GraphPaintProbe, {
+              onPaint
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GraphCommandBridge.GraphCommandBridge, {
+              commands: slot,
+              culling: onlyRenderVisibleElements,
+              emit,
+              host: perfHost,
+              rootRef,
+              onMounted: props.onCanvasMounted
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SnapGuides.SnapGuides, {
+              guides,
+              animated: snapOptions.animateGuides
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LassoOverlay.LassoOverlay, {
+              rect: lasso.marquee
+            }), connectionPuck ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ConnectionPuck.ConnectionPuck, {
+              document: controller.document,
+              schema,
+              nodeLabel
+            }) : null, children]
+          })
+        })
+      })
+    })]
+  });
+}
+function NodeGraphWeb(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_xy.ReactFlowProvider, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NodeGraphCanvas, {
+      ...props
+    })
+  });
+}