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
@@ -0,0 +1,156 @@
+import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
+import cx from 'classnames';
+
+import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
+
+type ValidConnectionFunc = (connection: Connection) => boolean;
+
+interface BaseHandleProps {
+  type: HandleType;
+  nodeId: ElementId;
+  onConnect: OnConnectFunc;
+  position: Position;
+  setSourceId: (nodeId: ElementId) => void;
+  setPosition: (pos: XYPosition) => void;
+  isValidConnection: ValidConnectionFunc;
+  id?: ElementId | boolean;
+  className?: string;
+};
+
+type Result = {
+  elementBelow: Element;
+  isValid: boolean;
+  connection: Connection;
+  isHoveringHandle: boolean;
+};
+
+function onMouseDown(
+  evt: ReactMouseEvent, nodeId: ElementId, setSourceId: (nodeId: ElementId) => void, setPosition: (pos: XYPosition) => any,
+  onConnect: OnConnectFunc, isTarget: boolean, isValidConnection: ValidConnectionFunc
+): void {
+  const reactFlowNode = document.querySelector('.react-flow');
+
+  if (!reactFlowNode) {
+    return null;
+  }
+
+  const containerBounds = reactFlowNode.getBoundingClientRect();
+  let recentHoveredHandle: Element = null;
+
+  setPosition({
+    x: evt.clientX - containerBounds.left,
+    y: evt.clientY - containerBounds.top,
+  });
+  setSourceId(nodeId);
+
+  function resetRecentHandle() {
+    if (!recentHoveredHandle) {
+      return false;
+    }
+
+    recentHoveredHandle.classList.remove('valid');
+    recentHoveredHandle.classList.remove('connecting');
+  }
+
+  // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
+  function checkElementBelowIsValid(evt: MouseEvent) {
+    const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
+    const result: Result = {
+      elementBelow,
+      isValid: false,
+      connection: { source: null, target: null },
+      isHoveringHandle: false
+    };
+
+    if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
+      let connection: Connection = { source: null, target: null };
+
+      if (isTarget) {
+        const sourceId = elementBelow.getAttribute('data-nodeid');
+        connection = { source: sourceId, target: nodeId };
+      } else {
+        const targetId = elementBelow.getAttribute('data-nodeid');
+        connection = { source: nodeId, target: targetId };
+      }
+
+      const isValid = isValidConnection(connection);
+
+      result.connection = connection;
+      result.isValid = isValid;
+      result.isHoveringHandle = true;
+    }
+
+    return result;
+  }
+
+  function onMouseMove(evt: MouseEvent) {
+    setPosition({
+      x: evt.clientX - containerBounds.left,
+      y: evt.clientY - containerBounds.top,
+    });
+
+    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
+
+    if (!isHoveringHandle) {
+      return resetRecentHandle();
+    }
+
+    const isOwnHandle = connection.source === connection.target;
+
+    if (!isOwnHandle) {
+      recentHoveredHandle = elementBelow;
+      elementBelow.classList.add('connecting');
+      elementBelow.classList.toggle('valid', isValid);
+    }
+  }
+
+  function onMouseUp(evt: MouseEvent) {
+    const { connection, isValid } = checkElementBelowIsValid(evt);
+
+    if (isValid) {
+      onConnect(connection);
+    }
+
+    resetRecentHandle();
+    setSourceId(null);
+
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+const BaseHandle = memo(({
+  type, nodeId, onConnect, position,
+  setSourceId, setPosition, className,
+  id = false, isValidConnection, ...rest
+}: BaseHandleProps) => {
+  const isTarget = type === 'target';
+  const handleClasses = cx(
+    'react-flow__handle',
+    className,
+    position,
+    { source: !isTarget, target: isTarget }
+  );
+
+  const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
+
+  return (
+    <div
+      data-nodeid={nodeIdWithHandleId}
+      data-handlepos={position}
+      className={handleClasses}
+      onMouseDown={evt => onMouseDown(evt,
+        nodeIdWithHandleId, setSourceId, setPosition,
+        onConnect, isTarget, isValidConnection
+      )}
+      {...rest}
+    />
+  );
+});
+
+BaseHandle.displayName = 'BaseHandle';
+
+export default BaseHandle;