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,123 @@
+import React, { useEffect, useRef, useState, memo, MouseEvent } from 'react';
+
+import { useStoreActions } from '../../store/hooks';
+import { SelectionRect } from '../../types';
+
+const initialRect: SelectionRect = {
+  startX: 0,
+  startY: 0,
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  draw: false
+};
+
+function getMousePosition(evt: MouseEvent) {
+  const reactFlowNode = document.querySelector('.react-flow');
+  if (!reactFlowNode) {
+    return false;
+  }
+
+  const containerBounds = reactFlowNode.getBoundingClientRect();
+
+  return {
+    x: evt.clientX - containerBounds.left,
+    y: evt.clientY - containerBounds.top,
+  };
+}
+
+export default memo(() => {
+  const selectionPane = useRef(null);
+  const [rect, setRect] = useState(initialRect);
+  const setSelection = useStoreActions(a => a.setSelection);
+  const updateSelection = useStoreActions(a => a.updateSelection);
+  const setNodesSelection = useStoreActions(a => a.setNodesSelection);
+
+  useEffect(() => {
+    function onMouseDown(evt: MouseEvent) {
+      const mousePos = getMousePosition(evt);
+      if (!mousePos) {
+        return false;
+      }
+
+      setRect((currentRect) => ({
+        ...currentRect,
+        startX: mousePos.x,
+        startY: mousePos.y,
+        x: mousePos.x,
+        y: mousePos.y,
+        draw: true
+      }));
+
+      setSelection(true);
+    }
+
+    function onMouseMove(evt: MouseEvent) {
+      setRect((currentRect) => {
+        if (!currentRect.draw) {
+          return currentRect;
+        }
+
+        const mousePos = getMousePosition(evt);
+        if (!mousePos) {
+          return currentRect;
+        }
+
+        const negativeX = mousePos.x < currentRect.startX;
+        const negativeY = mousePos.y < currentRect.startY;
+        const nextRect = {
+          ...currentRect,
+          x: negativeX ? mousePos.x : currentRect.x,
+          y: negativeY ? mousePos.y : currentRect.y,
+          width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX,
+          height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY,
+        };
+
+        updateSelection(nextRect);
+
+        return nextRect;
+      });
+    }
+
+    function onMouseUp() {
+      setRect((currentRect) => {
+        setNodesSelection({ isActive: true, selection: currentRect });
+        setSelection(false);
+
+        return {
+          ...currentRect,
+          draw: false
+        };
+      });
+    }
+
+    selectionPane.current.addEventListener('mousedown', onMouseDown);
+    selectionPane.current.addEventListener('mousemove', onMouseMove);
+    selectionPane.current.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      selectionPane.current.removeEventListener('mousedown', onMouseDown);
+      selectionPane.current.removeEventListener('mousemove', onMouseMove);
+      selectionPane.current.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+  return (
+    <div
+      className="react-flow__selectionpane"
+      ref={selectionPane}
+    >
+      {rect.draw && (
+        <div
+          className="react-flow__selection"
+          style={{
+            width: rect.width,
+            height: rect.height,
+            transform: `translate(${rect.x}px, ${rect.y}px)`
+          }}
+        />
+      )}
+    </div>
+  );
+});