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 | 1x 1x 9x 10063x 10063x 10063x 10063x 1x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 10063x 1x 1x | import * as React from "react"; import { GraphNodeState, ICanvasNode } from "../components"; import { INodeConfig, INodeDrawArgs, INodeUpdateArgs } from "../contexts"; export const withEditBox = (base: INodeConfig): INodeConfig => { return { draw(args: INodeDrawArgs): React.ReactNode { const node = args.model; const updateNodeComment = (newComment: string): void => { args.propsApi.updateNode(node.id, { data: { ...node.data, comment: newComment } }); }; addEditBox(node, updateNodeComment); return base.draw(args); }, didUpdate(args: INodeUpdateArgs): void { const node = args.model; startEdit(node); if (base.didUpdate) { base.didUpdate(args); } } }; }; const addEditBox = ( node: ICanvasNode, updateNodeComment: (newComment: string) => void ) => { const root = document.getElementById("root"); const container = document.createElement("div"); root?.appendChild(container); const editBox = document.createElement("textarea"); editBox.setAttribute("id", `edit-box-${node.id}`); editBox.style.position = "absolute"; editBox.style.left = `${node.x + 10}px`; editBox.style.top = `${node.y + node.height / 1.8}px`; editBox.style.display = node.state === GraphNodeState.editing ? "block" : "none"; Eif (container) { container.appendChild(editBox); } editBox.addEventListener("change", (evt): void => { const newComment = (evt.target as HTMLTextAreaElement).value; updateNodeComment(newComment); }); }; const startEdit = (node: ICanvasNode) => { const editBox = getEditBoxElementByNodeId(node.id); if (editBox) { editBox.style.display = "none"; if (node.state === GraphNodeState.editing) { editBox.style.left = `${node.x + 10}px`; editBox.style.top = `${node.y + node.height / 1.8}px`; editBox.style.display = ""; (editBox as HTMLTextAreaElement).value = (node && node.data && node.data.comment) || ""; editBox.focus(); } } }; const getEditBoxElementByNodeId = (nodeId: string) => { return document.getElementById(`edit-box-${nodeId}`); }; |