refactor(node-resizer): use package, update resize behaviour

2022-12-01 14:53:04 +01:00
parent f776239ecb
commit 6ee4eb4c42
18 changed files with 323 additions and 103 deletions
--- a/examples/vite-app/package.json
+++ b/examples/vite-app/package.json
@@ -13,6 +13,7 @@
    "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
  },
  "dependencies": {
+    "@reactflow/node-resizer": "workspace:^0.0.0",
    "classcat": "^5.0.3",
    "dagre": "^0.8.5",
    "localforage": "^1.10.0",
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -20,6 +20,7 @@ import Intersection from '../examples/Intersection';
 import Layouting from '../examples/Layouting';
 import MultiFlows from '../examples/MultiFlows';
 import NestedNodes from '../examples/NestedNodes';
+import NodeResizer from '../examples/NodeResizer';
 import NodeTypeChange from '../examples/NodeTypeChange';
 import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
 import Overview from '../examples/Overview';
@@ -174,6 +175,11 @@ const routes: IRoute[] = [
    path: '/node-toolbar',
    component: NodeToolbar,
  },
+  {
+    name: 'NodeResizer',
+    path: '/node-resizer',
+    component: NodeResizer,
+  },
  {
    name: 'Overview',
    path: '/overview',
--- a/examples/vite-app/src/examples/NodeResizer/CustomNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomNode.tsx
@@ -0,0 +1,18 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+import { NodeResizer } from '@reactflow/node-resizer';
+
+const ColorSelectorNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+
+      <NodeResizer nodeId={id} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
+
+import CustomNode from './CustomNode';
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const initialEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+  },
+];
+
+const initialNodes = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'An input node' },
+    position: { x: 0, y: 0 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'custom',
+    data: { label: 'resize me!' },
+    position: { x: 250, y: 0 },
+    style: { padding: 10, border: '1px solid #222' },
+  },
+];
+
+const CustomNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback(
+    (connection: Connection) => setEdges((eds) => addEdge({ ...connection }, eds)),
+    [setEdges]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      snapToGrid={true}
+      fitView
+      minZoom={0.3}
+      maxZoom={2}
+    >
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export default CustomNodeFlow;
--- a/packages/core/src/components/Nodes/wrapNode.tsx
+++ b/packages/core/src/components/Nodes/wrapNode.tsx
@@ -2,8 +2,6 @@ import { useEffect, useRef, memo } from 'react';
 import type { ComponentType, MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';

-import NodeResizer from './NodeResizer';
-
 import { useStoreApi } from '../../hooks/useStore';
 import { Provider } from '../../contexts/NodeIdContext';
 import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
@@ -220,7 +218,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
            zIndex={zIndex}
          />
        </Provider>
-        <NodeResizer nodeId={id} />
      </div>
    );
  };
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -1,15 +1,14 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { RefObject, MouseEvent } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
-import type { D3DragEvent, SubjectPosition } from 'd3';

 import { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
-import type { NodeDragItem, Node, SelectionDragHandler } from '../../types';
+import useGetPointerPosition from '../useGetPointerPosition';
+import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent } from '../../types';

-export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
 export type UseDragData = { dx: number; dy: number };

 type UseDragParams = {
@@ -40,24 +39,7 @@ function useDrag({
  const dragItems = useRef<NodeDragItem[]>();
  const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });

-  // returns the pointer position projected to the RF coordinate system
-  const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
-    const { transform, snapGrid, snapToGrid } = store.getState();
-    const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
-    const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
-
-    const pointerPos = {
-      x: (x - transform[0]) / transform[2],
-      y: (y - transform[1]) / transform[2],
-    };
-
-    // we need the snapped position in order to be able to skip unnecessary drag events
-    return {
-      xSnapped: snapToGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
-      ySnapped: snapToGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
-      ...pointerPos,
-    };
-  }, []);
+  const getPointerPosition = useGetPointerPosition();

  useEffect(() => {
    if (nodeRef?.current) {
--- a/packages/core/src/hooks/useGetPointerPosition.ts
+++ b/packages/core/src/hooks/useGetPointerPosition.ts
@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { useStoreApi } from './useStore';
+import type { UseDragEvent } from '../types';
+
+function useGetPointerPosition() {
+  const store = useStoreApi();
+
+  // returns the pointer position projected to the RF coordinate system
+  const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
+    const { transform, snapGrid, snapToGrid } = store.getState();
+    const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
+    const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
+
+    const pointerPos = {
+      x: (x - transform[0]) / transform[2],
+      y: (y - transform[1]) / transform[2],
+    };
+
+    // we need the snapped position in order to be able to skip unnecessary drag events
+    return {
+      xSnapped: snapToGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
+      ySnapped: snapToGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
+      ...pointerPos,
+    };
+  }, []);
+
+  return getPointerPosition;
+}
+
+export default useGetPointerPosition;
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -37,5 +37,6 @@ export { useStore, useStoreApi } from './hooks/useStore';
 export { default as useOnViewportChange } from './hooks/useOnViewportChange';
 export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized } from './hooks/useNodesInitialized';
+export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';

 export * from './types';
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
-import type { Selection as D3Selection, ZoomBehavior } from 'd3';
+import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';

 import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
 import type { NodeChange, EdgeChange } from './changes';
@@ -245,3 +245,5 @@ export type ProOptions = {
  account?: string;
  hideAttribution: boolean;
 };
+
+export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
--- a/packages/node-resizer/.eslintrc.js
+++ b/packages/node-resizer/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@reactflow/eslint-config'],
+};
--- a/packages/node-resizer/CHANGELOG.md
+++ b/packages/node-resizer/CHANGELOG.md
@@ -0,0 +1 @@
+# @reactflow/node-resizer
--- a/packages/node-resizer/README.md
+++ b/packages/node-resizer/README.md
@@ -0,0 +1,10 @@
+# @reactflow/node-resizer
+
+A resizer component for React Flow that can be attached to a node.
+
+## Installation 
+
+```sh 
+npm install @reactflow/node-resizer
+```
+
--- a/packages/node-resizer/package.json
+++ b/packages/node-resizer/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@reactflow/node-resizer",
+  "version": "0.0.0",
+  "description": "A helper component for resizing nodes.",
+  "keywords": [
+    "react",
+    "node-based UI",
+    "graph",
+    "diagram",
+    "workflow",
+    "react-flow"
+  ],
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.tsx",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbkd/react-flow.git",
+    "directory": "packages/node-resizer"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.9",
+    "@reactflow/core": "workspace:*",
+    "classcat": "^5.0.3",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "zustand": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@reactflow/eslint-config": "workspace:*",
+    "@reactflow/rollup-config": "workspace:*",
+    "@reactflow/tsconfig": "workspace:*",
+    "@types/d3": "^7.4.0",
+    "@types/d3-drag": "^3.0.1",
+    "@types/d3-selection": "^3.0.3",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "typescript": "^4.8.3"
+  },
+  "rollup": {
+    "globals": {
+      "zustand": "Zustand",
+      "zustand/shallow": "zustandShallow",
+      "classcat": "cc"
+    },
+    "name": "ReactFlowNodeResizer"
+  }
+}
--- a/packages/core/src/components/Nodes/NodeResizer.tsx
+++ b/packages/core/src/components/Nodes/NodeResizer.tsx
@@ -2,8 +2,8 @@ import { useRef, useEffect } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import type { D3DragEvent, SubjectPosition } from 'd3';
-import { useStoreApi } from '../../hooks/useStore';
-import { Dimensions, Node, XYPosition } from '../../types';
+import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
+import type { Dimensions, Node, XYPosition } from '@reactflow/core';

 type NodeResizerProps = {
  nodeId: string;
@@ -32,8 +32,16 @@ function ResizeHandle({
 }: ResizeHandleProps) {
  const store = useStoreApi();
  const resizeHandleRef = useRef<HTMLDivElement>(null);
-  const initialDimensionsRef = useRef<Dimensions & XYPosition>({ width: 0, height: 0, x: 0, y: 0 });
+  const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    nodeX: 0,
+    nodeY: 0,
+  });
  const nodeElementRef = useRef<HTMLDivElement | null>(null);
+  const getPointerPosition = useGetPointerPosition();

  useEffect(() => {
    if (!resizeHandleRef.current) {
@@ -42,56 +50,55 @@ function ResizeHandle({

    const selection = select(resizeHandleRef.current);
    const dragHandler = drag<HTMLDivElement, unknown>()
-      .on('start', () => {
-        const { transform, nodeInternals } = store.getState();
-        const node = nodeInternals.get(nodeId);
-        const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
-        const bbox = nodeElement.getBoundingClientRect();
-        initialDimensionsRef.current = {
-          width: bbox.width / transform[2],
-          height: bbox.height / transform[2],
-          x: node?.position.x || 0,
-          y: node?.position.y || 0,
-        };
-        nodeElementRef.current = nodeElement;
-      })
-      .on('drag', (evt: ResizeDragEvent) => {
-        const { transform, updateNodePositions, nodeInternals } = store.getState();
+      .on('start', (event: ResizeDragEvent) => {
+        const node = store.getState().nodeInternals.get(nodeId);
+        const pointerPos = getPointerPosition(event);

+        initialDimensionsRef.current = {
+          width: node?.width ?? 0,
+          height: node?.height ?? 0,
+          nodeX: node?.position.x ?? 0,
+          nodeY: node?.position.y ?? 0,
+          x: pointerPos.xSnapped,
+          y: pointerPos.ySnapped,
+        };
+        nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
+      })
+      .on('drag', (event: ResizeDragEvent) => {
+        const { updateNodePositions, nodeInternals } = store.getState();
+        const pointerPos = getPointerPosition(event);
        const nodeEl = nodeElementRef.current;
        const node = nodeInternals.get(nodeId);

        if (nodeEl && node) {
-          const moveX = invertX ? -evt.x : evt.x;
-          const moveY = invertY ? -evt.y : evt.y;
-          const distX = enableX ? moveX - evt.subject.x : 0;
-          const distY = enableY ? moveY - evt.subject.y : 0;
-          const dragX = distX / transform[2];
-          const dragY = distY / transform[2];
-
-          const xPos = invertX ? initialDimensionsRef.current.x - dragX : initialDimensionsRef.current.x;
-          const yPos = invertY ? initialDimensionsRef.current.y - dragY : initialDimensionsRef.current.y;
-
-          console.log(dragX);
-
-          nodeEl.style.width = `${initialDimensionsRef.current.width + dragX}px`;
-          nodeEl.style.height = `${initialDimensionsRef.current.height + dragY}px`;
-          nodeEl.style.transform = `translate(${xPos}px, ${yPos}px)`;
+          const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
+          const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
+          const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
+          const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);

          if (invertX || invertY) {
-            const positionUpdate = { x: xPos, y: yPos };
+            const x = invertX ? initialDimensionsRef.current.nodeX + distX : node.position.x;
+            const y = invertY ? initialDimensionsRef.current.nodeY + distY : node.position.y;

-            updateNodePositions(
-              [
-                {
-                  id: nodeId,
-                  position: positionUpdate,
-                  // positionAbsolute: node.positionAbsolute,
-                } as Node,
-              ],
-              true,
-              false
-            );
+            if (x !== node.position.x || y !== node.position.y) {
+              updateNodePositions(
+                [
+                  {
+                    id: nodeId,
+                    position: { x, y },
+                  } as Node,
+                ],
+                true,
+                false
+              );
+            }
+          }
+
+          if (width !== node.width) {
+            nodeEl.style.width = `${width}px`;
+          }
+          if (height !== node.height) {
+            nodeEl.style.height = `${height}px`;
          }
        }
      });
@@ -114,6 +121,7 @@ function ResizeHandle({
        width: 10,
        height: 10,
        background: 'red',
+        opacity: 0.7,
        borderRadius: '50%',
        transform: 'translate(-50%, -50%)',
      }}
--- a/packages/node-resizer/src/index.tsx
+++ b/packages/node-resizer/src/index.tsx
@@ -0,0 +1,2 @@
+export { default as NodeResizer } from './NodeResizer';
+export * from './types';
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -0,0 +1,9 @@
+import { Position } from '@reactflow/core';
+import type { HTMLAttributes } from 'react';
+
+export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  nodeId: string;
+  isVisible?: boolean;
+  position?: Position;
+  offset?: number;
+};
--- a/packages/node-resizer/tsconfig.json
+++ b/packages/node-resizer/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@reactflow/tsconfig/react.json",
+  "display": "@reactflow/node-resizer",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,7 @@ importers:
  examples/vite-app:
    specifiers:
      '@cypress/skip-test': ^2.6.1
+      '@reactflow/node-resizer': workspace:^0.0.0
      '@types/react': ^18.0.17
      '@types/react-dom': ^18.0.6
      '@vitejs/plugin-react': ^2.1.0
@@ -73,6 +74,7 @@ importers:
      typescript: ^4.8.3
      vite: ^3.1.0
    dependencies:
+      '@reactflow/node-resizer': link:../../packages/node-resizer
      classcat: registry.npmjs.org/classcat/5.0.4
      dagre: registry.npmjs.org/dagre/0.8.5
      localforage: registry.npmjs.org/localforage/1.10.0
@@ -215,6 +217,45 @@ importers:
      react: registry.npmjs.org/react/18.2.0
      typescript: registry.npmjs.org/typescript/4.8.3

+  packages/node-resizer:
+    specifiers:
+      '@babel/runtime': ^7.18.9
+      '@reactflow/core': workspace:*
+      '@reactflow/eslint-config': workspace:*
+      '@reactflow/rollup-config': workspace:*
+      '@reactflow/tsconfig': workspace:*
+      '@types/d3': ^7.4.0
+      '@types/d3-drag': ^3.0.1
+      '@types/d3-selection': ^3.0.3
+      '@types/node': ^18.7.16
+      '@types/react': ^18.0.19
+      '@types/react-dom': ^18.0.6
+      classcat: ^5.0.3
+      d3-drag: ^3.0.0
+      d3-selection: ^3.0.0
+      react: ^18.2.0
+      typescript: ^4.8.3
+      zustand: ^4.1.1
+    dependencies:
+      '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
+      '@reactflow/core': link:../core
+      classcat: registry.npmjs.org/classcat/5.0.4
+      d3-drag: registry.npmjs.org/d3-drag/3.0.0
+      d3-selection: registry.npmjs.org/d3-selection/3.0.0
+      zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0
+    devDependencies:
+      '@reactflow/eslint-config': link:../../tooling/eslint-config
+      '@reactflow/rollup-config': link:../../tooling/rollup-config
+      '@reactflow/tsconfig': link:../../tooling/tsconfig
+      '@types/d3': registry.npmjs.org/@types/d3/7.4.0
+      '@types/d3-drag': registry.npmjs.org/@types/d3-drag/3.0.1
+      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
+      '@types/node': registry.npmjs.org/@types/node/18.7.16
+      '@types/react': registry.npmjs.org/@types/react/18.0.19
+      '@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
+      react: registry.npmjs.org/react/18.2.0
+      typescript: registry.npmjs.org/typescript/4.8.3
+
  packages/node-toolbar:
    specifiers:
      '@babel/runtime': ^7.18.9
@@ -1380,7 +1421,6 @@ packages:
    resolution: {integrity: sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz}
    name: '@types/d3-array'
    version: 3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-axis/3.0.1:
    resolution: {integrity: sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz}
@@ -1388,7 +1428,6 @@ packages:
    version: 3.0.1
    dependencies:
      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-brush/3.0.1:
    resolution: {integrity: sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz}
@@ -1396,19 +1435,16 @@ packages:
    version: 3.0.1
    dependencies:
      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-chord/3.0.1:
    resolution: {integrity: sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz}
    name: '@types/d3-chord'
    version: 3.0.1
-    dev: false

  registry.npmjs.org/@types/d3-color/3.1.0:
    resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz}
    name: '@types/d3-color'
    version: 3.1.0
-    dev: false

  registry.npmjs.org/@types/d3-contour/3.0.1:
    resolution: {integrity: sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz}
@@ -1417,19 +1453,16 @@ packages:
    dependencies:
      '@types/d3-array': registry.npmjs.org/@types/d3-array/3.0.3
      '@types/geojson': registry.npmjs.org/@types/geojson/7946.0.10
-    dev: false

  registry.npmjs.org/@types/d3-delaunay/6.0.1:
    resolution: {integrity: sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz}
    name: '@types/d3-delaunay'
    version: 6.0.1
-    dev: false

  registry.npmjs.org/@types/d3-dispatch/3.0.1:
    resolution: {integrity: sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz}
    name: '@types/d3-dispatch'
    version: 3.0.1
-    dev: false

  registry.npmjs.org/@types/d3-drag/3.0.1:
    resolution: {integrity: sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz}
@@ -1437,19 +1470,16 @@ packages:
    version: 3.0.1
    dependencies:
      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-dsv/3.0.0:
    resolution: {integrity: sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz}
    name: '@types/d3-dsv'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-ease/3.0.0:
    resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz}
    name: '@types/d3-ease'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-fetch/3.0.1:
    resolution: {integrity: sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz}
@@ -1457,19 +1487,16 @@ packages:
    version: 3.0.1
    dependencies:
      '@types/d3-dsv': registry.npmjs.org/@types/d3-dsv/3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-force/3.0.3:
    resolution: {integrity: sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz}
    name: '@types/d3-force'
    version: 3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-format/3.0.1:
    resolution: {integrity: sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz}
    name: '@types/d3-format'
    version: 3.0.1
-    dev: false

  registry.npmjs.org/@types/d3-geo/3.0.2:
    resolution: {integrity: sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz}
@@ -1477,13 +1504,11 @@ packages:
    version: 3.0.2
    dependencies:
      '@types/geojson': registry.npmjs.org/@types/geojson/7946.0.10
-    dev: false

  registry.npmjs.org/@types/d3-hierarchy/3.1.0:
    resolution: {integrity: sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz}
    name: '@types/d3-hierarchy'
    version: 3.1.0
-    dev: false

  registry.npmjs.org/@types/d3-interpolate/3.0.1:
    resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz}
@@ -1491,37 +1516,31 @@ packages:
    version: 3.0.1
    dependencies:
      '@types/d3-color': registry.npmjs.org/@types/d3-color/3.1.0
-    dev: false

  registry.npmjs.org/@types/d3-path/3.0.0:
    resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz}
    name: '@types/d3-path'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-polygon/3.0.0:
    resolution: {integrity: sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz}
    name: '@types/d3-polygon'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-quadtree/3.0.2:
    resolution: {integrity: sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz}
    name: '@types/d3-quadtree'
    version: 3.0.2
-    dev: false

  registry.npmjs.org/@types/d3-random/3.0.1:
    resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz}
    name: '@types/d3-random'
    version: 3.0.1
-    dev: false

  registry.npmjs.org/@types/d3-scale-chromatic/3.0.0:
    resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz}
    name: '@types/d3-scale-chromatic'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-scale/4.0.2:
    resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz}
@@ -1529,13 +1548,11 @@ packages:
    version: 4.0.2
    dependencies:
      '@types/d3-time': registry.npmjs.org/@types/d3-time/3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-selection/3.0.3:
    resolution: {integrity: sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz}
    name: '@types/d3-selection'
    version: 3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-shape/3.1.0:
    resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz}
@@ -1543,25 +1560,21 @@ packages:
    version: 3.1.0
    dependencies:
      '@types/d3-path': registry.npmjs.org/@types/d3-path/3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-time-format/4.0.0:
    resolution: {integrity: sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz}
    name: '@types/d3-time-format'
    version: 4.0.0
-    dev: false

  registry.npmjs.org/@types/d3-time/3.0.0:
    resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz}
    name: '@types/d3-time'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-timer/3.0.0:
    resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz}
    name: '@types/d3-timer'
    version: 3.0.0
-    dev: false

  registry.npmjs.org/@types/d3-transition/3.0.2:
    resolution: {integrity: sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.2.tgz}
@@ -1569,7 +1582,6 @@ packages:
    version: 3.0.2
    dependencies:
      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
-    dev: false

  registry.npmjs.org/@types/d3-zoom/3.0.1:
    resolution: {integrity: sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz}
@@ -1578,7 +1590,6 @@ packages:
    dependencies:
      '@types/d3-interpolate': registry.npmjs.org/@types/d3-interpolate/3.0.1
      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
-    dev: false

  registry.npmjs.org/@types/d3/7.4.0:
    resolution: {integrity: sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz}
@@ -1615,7 +1626,6 @@ packages:
      '@types/d3-timer': registry.npmjs.org/@types/d3-timer/3.0.0
      '@types/d3-transition': registry.npmjs.org/@types/d3-transition/3.0.2
      '@types/d3-zoom': registry.npmjs.org/@types/d3-zoom/3.0.1
-    dev: false

  registry.npmjs.org/@types/estree/0.0.39:
    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz}
@@ -1633,7 +1643,6 @@ packages:
    resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz}
    name: '@types/geojson'
    version: 7946.0.10
-    dev: false

  registry.npmjs.org/@types/is-ci/3.0.0:
    resolution: {integrity: sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/is-ci/-/is-ci-3.0.0.tgz}