Develop (#35)

* refactor(ts): add ReactFlowProps * Refactor/grid.tsx (#24) * chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5 Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5. - [Release notes](https://github.com/bahmutov/start-server-and-test/releases) - [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * chore(deps-dev): bump typescript from 3.6.3 to 3.6.4 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * refactor: grid.js -> grid.tsx * refactor(bg): remove unused renderer * refactor(connectionline): use ts * refactor(ts): edges * chore(build): update * Refactor/typescript (WIP) (#25) * refactor(store): use ts * refactor(edgewrapper): use ts * fix(handle): provide onConnect default func * refactor(nodeselection): use ts * refactor(userselction): use ts * refactor(plugins): use ts * refactor(hooks): use ts * refactor(nodes): use ts * refactor(edgerenderer): use ts * refactor(graphview): use ts * refactor(utils): rename js to ts * refactor(app): fix ts errors * fix(ts): errors * fix(app): ts errors * refactor(app): ts erros * refactor(app): ts errors * fix(utils): removeElements * feat(example): add empty renderer closes #34 * fix(connect): dont drag node on connect * chore(build): update
2019-10-15 22:44:10 +02:00
parent 1651ed332a
commit c5632323c3
55 changed files with 4399 additions and 13047 deletions
@@ -1,51 +1,54 @@
 import { zoomIdentity } from 'd3-zoom';

 import store from '../store';
-import { isDefined } from './index';
+import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';

-export const isEdge = element => element.source && element.target;
+export const isEdge = (element: Node | Edge): boolean =>
+  element.hasOwnProperty('source') && element.hasOwnProperty('target');

-export const isNode = element => !element.source && !element.target;
+export const isNode = (element: Node | Edge): boolean =>
+  !element.hasOwnProperty('source') && !element.hasOwnProperty('target');

-export const getOutgoers = (node, elements) => {
+export const getOutgoers = (node: Node, elements: Elements): Elements => {
  if (!isNode(node)) {
    return [];
  }

-  const outgoerIds = elements.filter(e => e.source === node.id).map(e => e.target);
+  const outgoerIds = elements.filter((e: Edge) => e.source === node.id).map((e: Edge) => e.target);
  return elements.filter(e => outgoerIds.includes(e.id));
 };

-export const removeElements = (elementsToRemove, elements) => {
+export const removeElements = (elementsToRemove: Elements, elements: Elements): Elements => {
  const nodeIdsToRemove = elementsToRemove.map(n => n.id);

-  return elements.filter(e => {
-    return (
-      !nodeIdsToRemove.includes(e.id) &&
-      !nodeIdsToRemove.includes(e.target) &&
-      !nodeIdsToRemove.includes(e.source)
+  return elements.filter((element) => {
+    const edgeElement = element as Edge;
+    return !(
+      nodeIdsToRemove.includes(element.id) ||
+      nodeIdsToRemove.includes(edgeElement.target) ||
+      nodeIdsToRemove.includes(edgeElement.source)
    );
  });
 };

-function getEdgeId(params) {
-  return `reactflow__edge-${params.source}-${params.target}`;
+function getEdgeId(edgeParams: Edge): ElementId {
+  return `reactflow__edge-${edgeParams.source}-${edgeParams.target}`;
 }

-export const addEdge = (edgeParams, elements) => {
+export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
  if (!edgeParams.source || !edgeParams.target) {
    throw new Error('Can not create edge. An edge needs a source and a target');
  }

  return elements.concat({
    ...edgeParams,
-    id: isDefined(edgeParams.id) ? edgeParams.id : getEdgeId(edgeParams)
+    id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams)
  });
 }

-const pointToRendererPoint = ({ x, y }, transform) => {
-  const rendererX = (x - transform[0]) * (1 / [transform[2]]);
-  const rendererY = (y - transform[1]) * (1 / [transform[2]]);
+const pointToRendererPoint = ({ x, y }: XYPosition, transform: Transform): XYPosition => {
+  const rendererX = (x - transform[0]) * (1 / transform[2]);
+  const rendererY = (y - transform[1]) * (1 / transform[2]);

  return {
    x: rendererX,
@@ -53,25 +56,27 @@ const pointToRendererPoint = ({ x, y }, transform) => {
  };
 };

-export const parseElement = (e, transform) => {
-  if (!e.id) {
+export const parseElement = (element: Node | Edge, transform?: Transform): Node | Edge => {
+  if (!element.id) {
    throw new Error('All elements (nodes and edges) need to have an id.',)
  }

-  if (isEdge(e)) {
+  if (isEdge(element)) {
    return {
-      ...e,
-      id: e.id.toString(),
-      type: e.type || 'default'
+      ...element,
+      id: element.id.toString(),
+      type: element.type || 'default'
    };
  }

+  const nodeElement = element as Node;
+
  return {
-    ...e,
-    id: e.id.toString(),
-    type: e.type || 'default',
+    ...nodeElement,
+    id: nodeElement.id.toString(),
+    type: nodeElement.type || 'default',
    __rg: {
-      position: pointToRendererPoint(e.position, transform),
+      position: pointToRendererPoint(nodeElement.position, transform),
      width: null,
      height: null,
      handleBounds : {}
@@ -79,7 +84,7 @@ export const parseElement = (e, transform) => {
  };
 };

-export const getBoundingBox = (nodes) => {
+export const getBoundingBox = (nodes: Node[]): Rect => {
  const bbox = nodes.reduce((res, node) => {
    const { position } = node.__rg;
    const x2 = position.x + node.__rg.width;
@@ -117,16 +122,16 @@ export const getBoundingBox = (nodes) => {
  };
 };

-export const graphPosToZoomedPos = (pos, transform) => {
+export const graphPosToZoomedPos = (pos: XYPosition, transform: Transform): XYPosition => {
  return {
    x: (pos.x * transform[2]) + transform[0],
    y: (pos.y * transform[2]) + transform[1]
  };
 }

-export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = false) => {
-  return nodes.
-    filter(n => {
+export const getNodesInside = (nodes: Node[], bbox: Rect, transform: Transform = [0, 0, 1], partially: boolean = false): Node[] => {
+  return nodes
+    .filter(n => {
      const bboxPos = {
        x: (bbox.x - transform[0]) * (1 / transform[2]),
        y: (bbox.y - transform[1]) * (1 / transform[2])
@@ -146,7 +151,7 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = f
    });
 };

-export const getConnectedEdges = (nodes, edges) => {
+export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
  const nodeIds = nodes.map(n => n.id);

  return edges.filter(e => {
@@ -160,7 +165,7 @@ export const getConnectedEdges = (nodes, edges) => {
  });
 };

-export const fitView = ({ padding = 0 } = {}) => {
+export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => {
  const state = store.getState();
  const bounds = getBoundingBox(state.nodes);
  const maxBoundsSize = Math.max(bounds.width, bounds.height);
@@ -173,12 +178,12 @@ export const fitView = ({ padding = 0 } = {}) => {
  state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 };

-export const zoomIn = () => {
+export const zoomIn = (): void => {
  const state = store.getState();
  state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
 };

-export const zoomOut = () => {
+export const zoomOut = (): void => {
  const state = store.getState();
  state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
 };
@@ -1,10 +0,0 @@
-export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
-
-export const isDefined = obj => typeof obj !== 'undefined';
-
-export const inInputDOMNode = e => e && e.target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
-
-export const getDimensions = (node = {}) => ({
-  width: node.offsetWidth,
-  height: node.offsetHeight
-});
@@ -0,0 +1,12 @@
+import { DraggableEvent } from 'react-draggable';
+import { MouseEvent as ReactMouseEvent } from 'react';
+
+export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
+  const target = e.target as HTMLElement;
+  return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+};
+
+export const getDimensions = (node: HTMLDivElement) => ({
+  width: node.offsetWidth,
+  height: node.offsetHeight
+});