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,88 @@
+import React, { useState, memo } from 'react';
+import ReactDraggable from 'react-draggable';
+
+import { useStoreState, useStoreActions } from '../../store/hooks';
+import { isNode } from '../../utils/graph';
+import { Node, Elements, XYPosition } from '../../types';
+
+function getStartPositions(elements: Elements) {
+  return elements
+    .filter(isNode)
+    .reduce((res, node: Node) => {
+      const startPosition = {
+        x: node.__rg.position.x || node.position.x,
+        y: node.__rg.position.y || node.position.x
+      };
+
+      res[node.id] = startPosition;
+
+      return res;
+  }, {});
+}
+
+export default memo(() => {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [startPositions, setStartPositions] = useState({});
+  const state = useStoreState(s => ({
+    transform: s.transform,
+    selectedNodesBbox: s.selectedNodesBbox,
+    selectedElements: s.selectedElements
+  }));
+  const updateNodePos = useStoreActions(a => a.updateNodePos);
+  const [x, y, k] = state.transform;
+  const position = state.selectedNodesBbox;
+
+  const onStart = (evt: MouseEvent) => {
+    const scaledClient: XYPosition = {
+      x: evt.clientX * (1 / k),
+      y: evt.clientY * (1 / k)
+    };
+    const offsetX: number = scaledClient.x - position.x - x;
+    const offsetY: number = scaledClient.y - position.y - y;
+    const startPositions = getStartPositions(state.selectedElements);
+
+    setOffset({ x: offsetX, y: offsetY });
+    setStartPositions(startPositions);
+  };
+
+  const onDrag = (evt: MouseEvent) => {
+    const scaledClient: XYPosition = {
+      x: evt.clientX * (1 / k),
+      y: evt.clientY * (1 / k)
+    };
+
+    state.selectedElements
+      .filter(isNode)
+      .forEach((node: Node) => {
+        updateNodePos({ id: node.id, pos: {
+          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
+          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
+        }});
+      });
+  };
+
+  return (
+    <div
+      className="react-flow__nodesselection"
+      style={{
+        transform: `translate(${x}px,${y}px) scale(${k})`
+      }}
+    >
+      <ReactDraggable
+        scale={k}
+        onStart={(evt: MouseEvent) => onStart(evt)}
+        onDrag={(evt: MouseEvent) => onDrag(evt)}
+      >
+        <div
+          className="react-flow__nodesselection-rect"
+          style={{
+            width: state.selectedNodesBbox.width,
+            height: state.selectedNodesBbox.height,
+            top: state.selectedNodesBbox.y,
+            left: state.selectedNodesBbox.x
+          }}
+        />
+      </ReactDraggable>
+    </div>
+  );
+});