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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 1x 1x 1x 1x 63286x 63286x 10550x 10550x 10550x 10550x 10550x 10550x 10550x 10550x 10550x 10540x 10550x 10550x | import * as React from "react"; import { GraphNodeState, ICanvasNode, TSetData } from "../components"; import { INodeConfig, INodeDrawArgs } from "../contexts"; import { updateNode } from "../utils"; const getChangeHandler = (node: ICanvasNode, setData: TSetData) => ( e: React.ChangeEvent<HTMLInputElement> ) => { updateNode( node.id, { data: { ...node.data, comment: e.target.value } }, setData ); }; export const rect: INodeConfig = { getHeight(): number { return 150; }, getWidth(): number { return 150; }, getStyle(node: ICanvasNode): Partial<React.CSSProperties> { Iif ( node.state === GraphNodeState.selected || node.state === GraphNodeState.activated ) { return { fill: "#ffffff", stroke: "#0078D4" }; } return { fill: "#ffffff", fillOpacity: 0.1, stroke: "#cccccc", borderRadius: "5" }; }, render(args: INodeDrawArgs): React.ReactNode { const node = args.model; const graphProps = args.graphProps; const width = rect.getWidth(node); const height = rect.getHeight(node); const style = rect.getStyle ? rect.getStyle(node) : {}; const textY = node.y + height / 3; if (!graphProps.isNodeDraggingDisabled) { style.cursor = "move"; } const comment = node.data && node.data.comment ? node.data.comment : ""; return ( <g key={node.id}> <rect width={width} height={height} x={node.x} y={node.y} style={style} rx={style.borderRadius} /> <text x={node.x} y={textY} fontSize={12}> {node.name} </text> {node.data && node.data.comment && node.state !== GraphNodeState.editing && ( <text x={node.x} y={textY + 20} fontSize={12} className={`comment-${node.id}`} > {node.data.comment} </text> )} {node.state === GraphNodeState.editing && ( <foreignObject x={node.x} y={textY} height={height / 2.5} width={width - 5} > <input value={comment} placeholder="Input your comment here" onChange={getChangeHandler(node, args.setData.bind(null))} /> </foreignObject> )} </g> ); } }; |