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,126 @@
+import React, { useEffect, useRef, memo, SVGAttributes } from 'react';
+
+import { useStoreState, useStoreActions } from '../../store/hooks';
+import NodeRenderer from '../NodeRenderer';
+import EdgeRenderer from '../EdgeRenderer';
+import UserSelection from '../../components/UserSelection';
+import NodesSelection from '../../components/NodesSelection';
+import BackgroundGrid from '../../components/BackgroundGrid';
+import useKeyPress from '../../hooks/useKeyPress';
+import useD3Zoom from '../../hooks/useD3Zoom';
+import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
+import useElementUpdater from '../../hooks/useElementUpdater'
+import { getDimensions } from '../../utils';
+import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'
+
+export interface GraphViewProps {
+  elements: Elements,
+  onElementClick: () => void,
+  onElementsRemove: (elements: Elements) => void,
+  onNodeDragStop: () => void,
+  onConnect: () => void,
+	onLoad: OnLoadFunc,
+  onMove: () => void,
+  selectionKeyCode: number,
+  nodeTypes: NodeTypesType,
+  edgeTypes: EdgeTypesType,
+  connectionLineType: string,
+  connectionLineStyle: SVGAttributes<{}>,
+  deleteKeyCode: number,
+  showBackground: boolean,
+  backgroundGap: number,
+  backgroundColor: string,
+  backgroundType: GridType,
+};
+
+const GraphView = memo(({
+  nodeTypes, edgeTypes, onMove, onLoad,
+  onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
+  selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
+  showBackground, backgroundGap, backgroundColor, backgroundType,
+  onConnect
+}: GraphViewProps) => {
+  const zoomPane = useRef<HTMLDivElement>(null);
+  const rendererNode = useRef<HTMLDivElement>(null);
+  const state = useStoreState(s => ({
+    width: s.width,
+    height: s.height,
+    nodes: s.nodes,
+    edges: s.edges,
+    d3Initialised: s.d3Initialised,
+    nodesSelectionActive: s.nodesSelectionActive
+  }));
+  const updateSize = useStoreActions(actions => actions.updateSize);
+  const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
+  const setOnConnect = useStoreActions(a => a.setOnConnect);
+  const selectionKeyPressed = useKeyPress(selectionKeyCode);
+
+  const onZoomPaneClick = () => setNodesSelection({ isActive: false });
+
+  const updateDimensions = () => {
+    const size = getDimensions(rendererNode.current);
+    updateSize(size);
+  };
+
+  useEffect(() => {
+    updateDimensions();
+    setOnConnect(onConnect);
+    window.onresize = updateDimensions;
+
+    return () => {
+      window.onresize = null;
+    };
+  }, []);
+
+  useD3Zoom(zoomPane, onMove, selectionKeyPressed);
+
+  useEffect(() => {
+    if (state.d3Initialised) {
+      onLoad({
+        fitView,
+        zoomIn,
+        zoomOut
+      });
+    }
+  }, [state.d3Initialised]);
+
+  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+  useElementUpdater(elements);
+
+  return (
+    <div className="react-flow__renderer" ref={rendererNode}>
+      {showBackground && (
+        <BackgroundGrid
+          gap={backgroundGap}
+          color={backgroundColor}
+          backgroundType={backgroundType}
+        />
+      )}
+      <NodeRenderer
+        nodeTypes={nodeTypes}
+        onElementClick={onElementClick}
+        onNodeDragStop={onNodeDragStop}
+      />
+      <EdgeRenderer
+        width={state.width}
+        height={state.height}
+        edgeTypes={edgeTypes}
+        onElementClick={onElementClick}
+        connectionLineType={connectionLineType}
+        connectionLineStyle={connectionLineStyle}
+      />
+      {selectionKeyPressed && <UserSelection />}
+      {state.nodesSelectionActive && <NodesSelection />}
+      <div
+        className="react-flow__zoompane"
+        onClick={onZoomPaneClick}
+        ref={zoomPane}
+      />
+    </div>
+  );
+});
+
+GraphView.displayName = 'GraphView';
+
+export default GraphView;