develop (#43)

* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch

src/types/index.ts

@@ -2,136 +2,131 @@ import { CSSProperties, SVGAttributes } from 'react';
 
 export type ElementId = string;
 
-export type Elements = Array<Node | Edge>;
+export type Elements = Array<Node | Edge>;
 
 export type Transform = [number, number, number];
 
-export type Position = 'left' | 'top' | 'right' | 'bottom';
+export type Position = 'left' | 'top' | 'right' | 'bottom';
 
 export type XYPosition = {
-  x: number,
-  y: number
+  x: number;
+  y: number;
 };
 
 export enum GridType {
   Lines = 'lines',
   Dots = 'dots',
-};
+}
 
-export type HandleType = 'source' | 'target';
+export type HandleType = 'source' | 'target';
 
-export type NodeTypesType = { [key: string]: React.ReactNode };
+export type NodeTypesType = { [key: string]: React.ReactNode };
 
 export type EdgeTypesType = NodeTypesType;
 
 export interface Dimensions {
-  width: number,
-  height: number
+  width: number;
+  height: number;
 }
 
 export interface Rect extends Dimensions {
-  x: number,
-  y: number
-};
+  x: number;
+  y: number;
+}
 
 export interface SelectionRect extends Rect {
   startX: number;
   startY: number;
-  draw: boolean
-};
+  draw: boolean;
+}
 
 export interface Node {
-  id: ElementId,
-  position?: XYPosition,
-  type?: string,
-  __rg?: any,
-  data?: any,
-  style?: CSSProperties
-};
+  id: ElementId;
+  position: XYPosition;
+  type?: string;
+  __rg?: any;
+  data?: any;
+  style?: CSSProperties;
+}
 
 export interface Edge {
-  id: ElementId,
-  type?: string,
-  source: ElementId,
-  target: ElementId,
-  style?: SVGAttributes<{}>
-  animated?: boolean
-};
+  id: ElementId;
+  type?: string;
+  source: ElementId;
+  target: ElementId;
+  style?: SVGAttributes<{}>;
+  animated?: boolean;
+}
 
 export interface EdgeProps {
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number,
-  style?: SVGAttributes<{}>
-};
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  style?: SVGAttributes<{}>;
+}
 
-export interface EdgeBezierProps extends EdgeProps{
-  sourcePosition: Position,
-  targetPosition: Position
-};
+export interface EdgeBezierProps extends EdgeProps {
+  sourcePosition: Position;
+  targetPosition: Position;
+}
 
 export interface NodeProps {
-  id: ElementId,
-  type: string,
+  id: ElementId;
+  type: string;
   data: any;
   selected: boolean;
   style?: CSSProperties;
-};
+}
 
 export interface NodeComponentProps {
-  id: ElementId,
+  id: ElementId;
   type: string;
   data: any;
   selected?: boolean;
   transform?: Transform;
   xPos?: number;
   yPos?: number;
-  onClick?: () => any;
+  onClick?: (node: Node) => void | undefined;
   onNodeDragStop?: () => any;
   style?: CSSProperties;
-};
+}
 
 export type FitViewParams = {
-  padding: number
+  padding: number;
 };
 export type FitViewFunc = (fitViewOptions: FitViewParams) => void;
 
 type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
-  fitView: FitViewFunc
+  fitView: FitViewFunc;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;
 
-export type OnConnectParams = {
-  source: ElementId;
-  target: ElementId;
-};
-
-export type OnConnectFunc = (params: OnConnectParams) => void;
-
 export type Connection = {
-  source: ElementId;
-  target: ElementId;
+  source: ElementId | null;
+  target: ElementId | null;
 };
 
+export type OnConnectFunc = (params: Connection) => void;
+
 export interface HandleElement {
-  id?: ElementId;
+  id?: ElementId | null;
   position: Position;
   x: number;
   y: number;
   width: number;
   height: number;
-};
+}
 
-export interface EdgeWrapperProps {
-  id: ElementId,
-  source: ElementId,
-  target: ElementId,
-  type: any,
-  onClick?: (edge: Edge) => void
-  animated?: boolean,
-  selected?: boolean,
-};
+export interface EdgeCompProps {
+  id: ElementId;
+  source: ElementId;
+  target: ElementId;
+  type: any;
+  onClick?: (edge: Edge) => void;
+  animated?: boolean;
+  selected?: boolean;
+}