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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 1x 1x 1x 1x 1x 1x 1x 40x 40x 1x 1x 284x 244x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x | import { initializeIcons } from "@uifabric/icons"; import { Icon, Stack } from "office-ui-fabric-react"; import * as React from "react"; import { GraphNodeState, ICanvasNode, TSetData } from "../components"; import { INodeConfig } from "../contexts"; import { updateNode } from "../utils"; initializeIcons(); const renderStatusIcon = (node: ICanvasNode): React.ReactNode => { Iif (!node.data || !node.data.statusIcon) { return null; } return node.data.statusIcon; }; const getChangeHandler = (node: ICanvasNode, setData: TSetData) => ( e: React.ChangeEvent<HTMLTextAreaElement> ) => { updateNode( node.id, { data: { ...node.data, comment: e.target.value } }, setData ); }; export const moduleNode: INodeConfig = { getHeight(curNode: ICanvasNode): number { return (curNode.data && curNode.data.comment) || curNode.state === GraphNodeState.editing ? 86 : 56; }, getWidth(): number { return 280; }, render(args): React.ReactNode { const node = args.model; const setData = args.setData.bind(null); const isHighlighted = node.state === GraphNodeState.activated || node.state === GraphNodeState.selected; const isEditing = node.state === GraphNodeState.editing; const containerStyles = { root: { height: moduleNode.getHeight(node), padding: 8, backgroundColor: "#fff", borderRadius: 4, cursor: "move", borderColor: isHighlighted ? "#0078D4" : "#CCCCCC", borderWidth: isHighlighted ? 2 : 1, borderStyle: "solid" } }; const mainContainerStyles = { root: { height: 58 } }; const iconStyles = { root: { marginRight: 8, color: "#0078D4" } }; const comment = node.data.comment || ""; const iconName = node.data.iconName || ""; return ( <foreignObject x={node.x} y={node.y} height={moduleNode.getHeight(node)} width={moduleNode.getWidth(node)} > <Stack styles={containerStyles}> <Stack horizontal={true} verticalAlign="center" styles={mainContainerStyles} > <Stack.Item grow={true}> <Icon iconName={iconName} styles={iconStyles} style={{ userSelect: "none" }} /> </Stack.Item> <Stack.Item grow={true} disableShrink={true} styles={{ root: { width: 200, marginBottom: 5 } }} > <div style={{ userSelect: "none" }}>{node.name}</div> </Stack.Item> <Stack.Item grow={true}>{renderStatusIcon(node)}</Stack.Item> </Stack> {isEditing && ( <textarea value={comment} placeholder="Input your comment here" onChange={getChangeHandler(node, setData)} /> )} {!isEditing && node.data && node.data.comment && ( <div style={{ color: "#ccc", fontSize: 12 }}>{comment}</div> )} </Stack> </foreignObject> ); } }; |