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

src/store/hooks.ts

@@ -0,0 +1,9 @@
+import { createTypedHooks } from 'easy-peasy';
+
+import { StoreModel } from './index';
+
+const typedHooks = createTypedHooks<StoreModel>();
+
+export const useStoreActions = typedHooks.useStoreActions;
+export const useStoreDispatch = typedHooks.useStoreDispatch;
+export const useStoreState = typedHooks.useStoreState;

src/store/index.js

@@ -1,30 +0,0 @@
-import { createStore } from 'easy-peasy';
-
-import actions from './actions';
-
-const store = createStore({
-  width: 0,
-  height: 0,
-  transform: [0, 0, 1],
-  nodes: [],
-  edges: [],
-  selectedElements: [],
-  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
-
-  d3Zoom: null,
-  d3Selection: null,
-  d3Initialised: false,
-
-  nodesSelectionActive: false,
-  selectionActive: false,
-  selection: {},
-
-  connectionSourceId: null,
-  connectionPosition: { x: 0, y: 0 },
-
-  onConnect: () => {},
-
-  ...actions
-});
-
-export default store;

src/store/index.ts

@@ -1,9 +1,118 @@
-import { action } from 'easy-peasy';
+import { createStore, Action, action } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
+import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
+import {
+  ElementId, Elements, Transform, Node,
+  Edge, Rect, Dimensions, XYPosition,
+  OnConnectFunc, SelectionRect, HandleElement
+} from '../types';
+
+type TransformXYK = {
+  x: number,
+  y: number,
+  k: number
+};
+
+type NodePosUpdate = {
+  id: ElementId,
+  pos: XYPosition
+};
+
+type NodeUpdate = {
+  id: ElementId,
+  width: number,
+  height: number,
+  handleBounds: {
+    source: HandleElement,
+    target: HandleElement
+  }
+};
+
+type SelectionUpdate = {
+  isActive: boolean;
+  selection?: SelectionRect;
+};
+
+type D3Init = {
+  zoom: ZoomBehavior<Element, unknown>;
+  selection: D3Selection<Element, unknown, null, undefined>;
+};
+
+export interface StoreModel {
+  width: number;
+  height: number;
+  transform: Transform;
+  nodes: Node[];
+  edges: Edge[];
+  selectedElements: Elements;
+  selectedNodesBbox: Rect;
+
+  d3Zoom: ZoomBehavior<Element, unknown>;
+  d3Selection: D3Selection<Element, unknown, null, undefined>;
+  d3Initialised: boolean;
+
+  nodesSelectionActive: boolean;
+  selectionActive: boolean;
+  selection: SelectionRect | null;
+
+  connectionSourceId: ElementId | null;
+  connectionPosition: XYPosition;
+
+  onConnect: OnConnectFunc;
+
+  setOnConnect: Action<StoreModel, OnConnectFunc>;
+
+  setNodes: Action<StoreModel, Node[]>;
+
+  setEdges: Action<StoreModel, Edge[]>;
+
+  updateNodeData:  Action<StoreModel, NodeUpdate>;
+
+  updateNodePos: Action<StoreModel, NodePosUpdate>;
+
+  setSelection: Action<StoreModel, boolean>;
+
+  setNodesSelection: Action<StoreModel, SelectionUpdate>;
+
+  setSelectedElements: Action<StoreModel, Elements | Node | Edge>
+
+  updateSelection: Action<StoreModel, SelectionRect>;
+
+  updateTransform: Action<StoreModel, TransformXYK>;
+
+  updateSize: Action<StoreModel, Dimensions>;
+
+  initD3: Action<StoreModel, D3Init>;
+
+  setConnectionPosition: Action<StoreModel, XYPosition>;
+
+  setConnectionSourceId: Action<StoreModel, ElementId>;
+};
+
+const storeModel: StoreModel = {
+  width: 0,
+  height: 0,
+  transform: [0, 0, 1],
+  nodes: [],
+  edges: [],
+  selectedElements: [],
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+
+  d3Zoom: null,
+  d3Selection: null,
+  d3Initialised: false,
+
+  nodesSelectionActive: false,
+  selectionActive: false,
+  selection: null,
+
+  connectionSourceId: null,
+  connectionPosition: { x: 0, y: 0 },
+
+  onConnect: () => {},
 
-export default {
   setOnConnect: action((state, onConnect) => {
     state.onConnect = onConnect;
   }),
@@ -99,4 +208,8 @@ export default {
   setConnectionSourceId: action((state, sourceId) => {
     state.connectionSourceId = sourceId;
   })
-};
+};
+
+const store = createStore(storeModel);
+
+export default store;