@nesso-how/graph 0.1.0-alpha.35 → 0.1.0-alpha.37

package/README.md

@@ -47,6 +47,8 @@ Turn on `nodesDraggable`/`nodesConnectable`/`elementsSelectable` as needed. How
 - `nodes`/`edges` — _controlled_: you own the state and must also pass `onNodesChange`/`onEdgesChange`/`onConnect` to apply updates (e.g. the main app, where positions live in its own store).
 - `defaultNodes`/`defaultEdges` — _uncontrolled_: React Flow seeds its internal state once and manages drag/connect/selection itself — no wiring needed, the right choice for decorative or one-off embeds.
 
+When `zoomOnScroll` is off (typical for decorative embeds in a scrollable page), `NessoGraph` sets `preventScrolling` to false so the page keeps scrolling over the canvas. Override via `reactFlowProps.preventScrolling` if needed.
+
 ```tsx
 <NessoGraph
   defaultNodes={nodes}

package/dist/NessoGraph.d.ts

@@ -2,6 +2,8 @@ import type { Node, Edge, NodeTypes, EdgeTypes, ReactFlowProps, Viewport, OnNode
 import type { RelationTypeName, ConceptNodeData, NessoGraphDocument, NessoGraphDocumentInput, CategoryPalette } from '@nesso-how/vocab-learning';
 import type { NessoEdgeData, GraphDisplaySettings } from './display.js';
 import { type CategoryColorMode } from './context.js';
+/** React Flow defaults `preventScrolling` to true, which blocks page scroll over the canvas even when wheel zoom/pan are off. */
+export declare function resolvePreventScrolling(zoomOnScroll: boolean, reactFlowProps?: Pick<ReactFlowProps, 'preventScrolling' | 'panOnScroll'>): boolean;
 type PassthroughKeys = 'nodes' | 'defaultNodes' | 'edges' | 'defaultEdges' | 'nodeTypes' | 'edgeTypes' | 'nodesDraggable' | 'nodesConnectable' | 'elementsSelectable' | 'onNodesChange' | 'onEdgesChange' | 'onConnect' | 'onConnectStart' | 'onConnectEnd' | 'onSelectionChange' | 'onMoveEnd' | 'onNodeClick' | 'onEdgeClick' | 'fitView' | 'defaultViewport' | 'minZoom' | 'maxZoom' | 'panOnDrag' | 'zoomOnScroll';
 export interface NessoGraphProps {
     graph?: NessoGraphDocument | NessoGraphDocumentInput;

package/dist/NessoGraph.js

@@ -8,6 +8,12 @@ import { ConceptNode } from './ConceptNode.js';
 import { NessoEdge } from './NessoEdge.js';
 const DEFAULT_NODE_TYPES = { concept: ConceptNode };
 const DEFAULT_EDGE_TYPES = { nesso: NessoEdge };
+/** React Flow defaults `preventScrolling` to true, which blocks page scroll over the canvas even when wheel zoom/pan are off. */
+export function resolvePreventScrolling(zoomOnScroll, reactFlowProps) {
+    if (reactFlowProps?.preventScrolling !== undefined)
+        return reactFlowProps.preventScrolling;
+    return zoomOnScroll || Boolean(reactFlowProps?.panOnScroll);
+}
 export function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edgesProp, defaultEdges, display, palette = 'default', categoryColorMode = 'palette', getRelationLabel, isItemSelected, nodeTypes = DEFAULT_NODE_TYPES, edgeTypes = DEFAULT_EDGE_TYPES, nodesDraggable = false, nodesConnectable = false, elementsSelectable = true, panOnDrag = true, zoomOnScroll = true, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onSelectionChange, onMoveEnd, onNodeClick, onEdgeClick, fitView = true, defaultViewport, minZoom, maxZoom, reactFlowProps, style, className, onDoubleClick, children, }) {
     const rendered = graph ? documentToRenderGraph(graph) : undefined;
     const graphDisplay = rendered?.display;
@@ -31,7 +37,12 @@ export function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edges
         getRelationLabel,
         isItemSelected,
     }), [display, graphDisplay, palette, categoryColorMode, getRelationLabel, isItemSelected]);
-    return (_jsx("div", { style: { width: '100%', height: '100%', ...style }, className: className, onDoubleClick: onDoubleClick, children: _jsx(GraphDisplayContext.Provider, { value: ctx, children: _jsx(ReactFlow, { ...nodesProps, ...edgesProps, nodeTypes: nodeTypes, edgeTypes: edgeTypes, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, elementsSelectable: elementsSelectable, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onSelectionChange: onSelectionChange, onMoveEnd: onMoveEnd, fitView: fitView, defaultViewport: defaultViewport, minZoom: minZoom, maxZoom: maxZoom, onNodeClick: onNodeClick
+    const { preventScrolling: preventScrollingOverride, ...restReactFlowProps } = reactFlowProps ?? {};
+    const preventScrolling = resolvePreventScrolling(zoomOnScroll, {
+        preventScrolling: preventScrollingOverride,
+        panOnScroll: restReactFlowProps.panOnScroll,
+    });
+    return (_jsx("div", { style: { width: '100%', height: '100%', ...style }, className: className, onDoubleClick: onDoubleClick, children: _jsx(GraphDisplayContext.Provider, { value: ctx, children: _jsx(ReactFlow, { ...nodesProps, ...edgesProps, nodeTypes: nodeTypes, edgeTypes: edgeTypes, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, elementsSelectable: elementsSelectable, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, preventScrolling: preventScrolling, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onSelectionChange: onSelectionChange, onMoveEnd: onMoveEnd, fitView: fitView, defaultViewport: defaultViewport, minZoom: minZoom, maxZoom: maxZoom, onNodeClick: onNodeClick
                     ? (_, node) => onNodeClick(node.id, node.data)
-                    : undefined, onEdgeClick: onEdgeClick ? (_, edge) => onEdgeClick(edge.id, edge.data) : undefined, ...reactFlowProps, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Background, {}), _jsx(Controls, {})] })) }) }) }));
+                    : undefined, onEdgeClick: onEdgeClick ? (_, edge) => onEdgeClick(edge.id, edge.data) : undefined, ...restReactFlowProps, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Background, {}), _jsx(Controls, {})] })) }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nesso-how/graph",
-  "version": "0.1.0-alpha.35",
+  "version": "0.1.0-alpha.37",
   "description": "Embeddable Nesso knowledge graph React component (read-only by default)",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@nesso-how/vocab-learning": "0.1.0-alpha.35"
+    "@nesso-how/vocab-learning": "0.1.0-alpha.37"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.6.4",