Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 103x 18184x 3542x 7084x 7084x 10626x 10626x 3542x 14168x 3542x 7084x | import { type Edge, MiniMap, type Node } from "@xyflow/react";
import { memo, useMemo } from "react";
import {
getMiniMapEdgeSpecs,
getMiniMapFirstVisibleNodeId,
getMiniMapRenderGraph,
MiniMapSimulationObjectNode,
} from "./FlowsheetMiniMap.utils";
import { createMiniMapNodeComponent } from "./FlowsheetMiniMapNode";
type FlowsheetMiniMapProps = {
nodes: Node[];
edges: Edge[];
};
const MINI_MAP_STYLE = {
width: 220,
height: 160,
position: "relative",
right: "auto",
bottom: "auto",
} as const;
function isMiniMapSimulationObjectNode(
node: Node,
): node is MiniMapSimulationObjectNode {
return node.type === "simulationObjectGraphic";
}
const FlowsheetMiniMap = ({ nodes, edges }: FlowsheetMiniMapProps) => {
const minimapNodes = useMemo(
() => nodes.filter(isMiniMapSimulationObjectNode),
[nodes],
);
const firstVisibleNodeId = useMemo(
() => getMiniMapFirstVisibleNodeId(minimapNodes),
[minimapNodes],
);
const renderGraph = useMemo(
() => getMiniMapRenderGraph(edges, minimapNodes),
[edges, minimapNodes],
);
const edgeSpecs = useMemo(
() => getMiniMapEdgeSpecs(edges, renderGraph),
[edges, renderGraph],
);
const MiniMapNodeComponent = useMemo(
() =>
createMiniMapNodeComponent({
renderGraph,
firstVisibleNodeId,
edgeSpecs,
}),
[edgeSpecs, firstVisibleNodeId, renderGraph],
);
return (
<MiniMap
ariaLabel="Flowsheet overview"
bgColor="#ffffff"
className="flowsheet-minimap pointer-events-auto"
inversePan
maskColor="rgba(240, 240, 240, 0.58)"
maskStrokeColor="#9ca3af"
maskStrokeWidth={1}
nodeComponent={MiniMapNodeComponent}
offsetScale={10}
pannable
style={MINI_MAP_STYLE}
zoomable
/>
);
};
export default memo(FlowsheetMiniMap);
|