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,115 @@
+import React, { useMemo, CSSProperties, ReactNode, SVGAttributes } from 'react';
+import { StoreProvider } from 'easy-peasy';
+
+const nodeEnv: string = (process.env.NODE_ENV as string);
+
+if (nodeEnv !== 'production') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React);
+}
+
+import GraphView from '../GraphView';
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import { createNodeTypes } from '../NodeRenderer/utils';
+import BezierEdge from '../../components/Edges/BezierEdge';
+import StraightEdge from '../../components/Edges/StraightEdge';
+import StepEdge from '../../components/Edges/StepEdge';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import store from '../../store';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
+
+import '../../style.css';
+
+export interface ReactFlowProps {
+  elements: Elements,
+  style?: CSSProperties,
+  className?: string,
+  children?: ReactNode[],
+  onElementClick: () => void,
+  onElementsRemove: (elements: Elements) => void,
+  onNodeDragStop: () => void,
+  onConnect: () => void,
+	onLoad: OnLoadFunc,
+  onMove: () => void,
+  nodeTypes: NodeTypesType,
+  edgeTypes: EdgeTypesType,
+  connectionLineType: string,
+  connectionLineStyle: SVGAttributes<{}>,
+  deleteKeyCode: number,
+  selectionKeyCode: number,
+  showBackground: boolean,
+  backgroundGap: number,
+  backgroundColor: string,
+  backgroundType: GridType
+};
+
+const ReactFlow = ({
+  style, onElementClick, elements, children,
+  nodeTypes, edgeTypes, onLoad, onMove,
+  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
+  connectionLineStyle, deleteKeyCode, selectionKeyCode,
+  showBackground, backgroundGap, backgroundType, backgroundColor
+}: ReactFlowProps) => {
+  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
+  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
+
+  return (
+    <div style={style} className="react-flow">
+      <StoreProvider store={store}>
+        <GraphView
+          onLoad={onLoad}
+          onMove={onMove}
+          onElementClick={onElementClick}
+          onNodeDragStop={onNodeDragStop}
+          nodeTypes={nodeTypesParsed}
+          edgeTypes={edgeTypesParsed}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          selectionKeyCode={selectionKeyCode}
+          onElementsRemove={onElementsRemove}
+          deleteKeyCode={deleteKeyCode}
+          elements={elements}
+          onConnect={onConnect}
+          backgroundColor={backgroundColor}
+          backgroundGap={backgroundGap}
+          showBackground={showBackground}
+          backgroundType={backgroundType}
+        />
+        {children}
+      </StoreProvider>
+    </div>
+  );
+};
+
+ReactFlow.displayName = 'ReactFlow';
+
+ReactFlow.defaultProps = {
+  onElementClick: () => {},
+  onElementsRemove: () => {},
+  onNodeDragStop: () => {},
+  onConnect: () => {},
+	onLoad: () => {},
+  onMove: () => {},
+  nodeTypes: {
+    input: InputNode,
+    default: DefaultNode,
+    output: OutputNode
+  },
+  edgeTypes: {
+    default: BezierEdge,
+    straight: StraightEdge,
+    step: StepEdge
+  },
+  connectionLineType: 'bezier',
+  connectionLineStyle: {},
+  deleteKeyCode: 8,
+  selectionKeyCode: 16,
+  backgroundColor: '#eee',
+  backgroundGap: 24,
+  showBackground: true,
+  backgroundType: GridType.Dots
+};
+
+export default ReactFlow;