All files / src/built-in withEditBox.tsx

56.41% Statements 22/39
22.22% Branches 4/18
37.5% Functions 3/8
56.41% Lines 22/39

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  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 { GraphState, 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 === GraphState.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 === GraphState.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}`);
};