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 | 1x 1x 1x 1x 1x 10590x 10590x 10590x 10590x 10590x 10582x 10582x 10582x 1x 1x | import * as React from "react"; import { GraphConfigContext, IGraphConfig } from "../contexts"; import { getNodeConfig, updateNode } from "../utils"; import { IGraphProps } from "./Graph"; import { GraphNodeState, ICanvasNode, TSetData } from "./Graph.interface"; interface IProps { node: ICanvasNode; graphProps: IGraphProps; setData: TSetData; onNodeMouseDown: React.EventHandler<React.MouseEvent<SVGGElement>>; onMouseEnter: React.EventHandler<React.MouseEvent<SVGGElement>>; onMouseLeave: React.EventHandler<React.MouseEvent<SVGGElement>>; } const GraphNode: React.FunctionComponent<IProps> = props => { const node = props.node; const setData = props.setData.bind(null); const graphConfig = React.useContext<IGraphConfig>(GraphConfigContext); const shape = node.shape ? node.shape : "rect"; const nodeConfig = getNodeConfig(node, graphConfig); Iif (!nodeConfig.render) { throw new Error(`Missing "render" method in node config ${shape}`); } // add comment to node const onNodeDoubleClick = (evt: React.MouseEvent) => { evt.stopPropagation(); updateNode( node.id, { state: GraphNodeState.editing }, setData ); }; return ( <g key={node.id} id={`node-container-${node.id}`} onMouseDown={props.onNodeMouseDown} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} onDoubleClick={onNodeDoubleClick} > {nodeConfig.render({ model: node, graphProps: props.graphProps, setData: props.setData })} </g> ); }; const GraphNodeMemo = React.memo(GraphNode, (prevProps, nextProps) => { const prevNode = prevProps.node; const nextNode = nextProps.node; return ["id", "name", "state", "data", "x", "y"].every( key => prevNode[key] === nextNode[key] ); }); export { GraphNodeMemo as GraphNode }; |