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,49 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import cx from 'classnames';
-
-export default (props) => {
-  const [sourceNode, setSourceNode] = useState(null);
-  const hasHandleId = props.connectionSourceId.includes('__');
-  const sourceIdSplitted = props.connectionSourceId.split('__');
-  const nodeId = sourceIdSplitted[0];
-  const handleId = hasHandleId ? sourceIdSplitted[1] : null;
-
-  useEffect(() => {
-    setSourceNode(props.nodes.find(n => n.id === nodeId));
-  }, []);
-
-  if (!sourceNode) {
-    return null;
-  }
-
-  const style = props.connectionLineStyle || {};
-  const className = cx('react-flow__edge', 'connection', props.className);
-
-  const sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(d => d.id === handleId) : sourceNode.__rg.handleBounds.source[0];
-  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
-  const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
-  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
-  const sourceY = sourceNode.__rg.position.y + sourceHandleY;
-
-  const targetX = (props.connectionPositionX - props.transform[0]) * (1 / props.transform[2]);
-  const targetY = (props.connectionPositionY - props.transform[1]) * (1 / props.transform[2]);
-
-  let dAttr = '';
-
-  if (props.connectionLineType === 'bezier') {
-    const yOffset = Math.abs(targetY - sourceY) / 2;
-    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-    dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
-  } else {
-    dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
-  }
-
-  return (
-    <g className={className}>
-      <path
-        d={dAttr}
-        {...style}
-      />
-    </g>
-  );
-};
@@ -0,0 +1,67 @@
+import React, { useEffect, useState, SVGAttributes } from 'react';
+import cx from 'classnames';
+
+import { ElementId, Node, Transform, HandleElement } from '../../types';
+
+interface ConnectionLineProps {
+  connectionSourceId: ElementId;
+  connectionPositionX: number;
+  connectionPositionY: number;
+  connectionLineType?: string | null;
+  nodes: Node[];
+  transform: Transform;
+  connectionLineStyle?: SVGAttributes<{}>;
+  className?: string;
+};
+
+export default ({
+  connectionSourceId, connectionLineStyle = {}, connectionPositionX, connectionPositionY,
+  connectionLineType, nodes = [], className, transform
+}: ConnectionLineProps) => {
+  const [sourceNode, setSourceNode] = useState<Node | null>(null);
+  const hasHandleId = connectionSourceId.includes('__');
+  const sourceIdSplitted = connectionSourceId.split('__');
+  const nodeId = sourceIdSplitted[0];
+  const handleId = hasHandleId ? sourceIdSplitted[1] : null;
+
+  useEffect(() => {
+    const nextSourceNode = nodes.find(n => n.id === nodeId) || null;
+    setSourceNode(nextSourceNode);
+  }, []);
+
+  if (!sourceNode) {
+    return null;
+  }
+
+  const edgeClasses: string = cx('react-flow__edge', 'connection', className);
+
+  const sourceHandle = handleId ?
+    sourceNode.__rg.handleBounds.source.find((d: HandleElement) => d.id === handleId) :
+    sourceNode.__rg.handleBounds.source[0];
+  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
+  const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
+  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
+  const sourceY = sourceNode.__rg.position.y + sourceHandleY;
+
+  const targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
+  const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);
+
+  let dAttr: string = '';
+
+  if (connectionLineType === 'bezier') {
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+  } else {
+    dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
+  }
+
+  return (
+    <g className={edgeClasses}>
+      <path
+        d={dAttr}
+        {...connectionLineStyle}
+      />
+    </g>
+  );
+};