Graph Prop: isInteractive (#56)

* feat(props): add isInteractive

* refactor(selection): dont allow if not interactive

* feat(renderer): add class if is interactive

* chore(inactive): add tests

* refactor(inactive): no connection line, no edge selection

closes #49

dist/components/Nodes/wrapNode.d.ts

@@ -1,16 +1,4 @@
-import React, { CSSProperties } from 'react';
-import { Node, Transform, ElementId, NodeComponentProps } from '../../types';
-interface WrapNodeProps {
-    id: ElementId;
-    type: string;
-    data: any;
-    selected: boolean;
-    transform: Transform;
-    xPos: number;
-    yPos: number;
-    onClick: (node: Node) => void | undefined;
-    onNodeDragStop: (node: Node) => void;
-    style?: CSSProperties;
-}
-declare const _default: (NodeComponent: React.ComponentType<NodeComponentProps>) => React.MemoExoticComponent<({ id, type, data, transform, xPos, yPos, selected, onClick, onNodeDragStop, style, }: WrapNodeProps) => JSX.Element>;
+import React from 'react';
+import { NodeComponentProps, WrapNodeProps } from '../../types';
+declare const _default: (NodeComponent: React.ComponentType<NodeComponentProps>) => React.MemoExoticComponent<({ id, type, data, transform, xPos, yPos, selected, onClick, onNodeDragStop, style, isInteractive, }: WrapNodeProps) => JSX.Element>;
 export default _default;

dist/components/UserSelection/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+declare const _default: React.MemoExoticComponent<() => JSX.Element | null>;
 export default _default;

dist/container/GraphView/index.d.ts

@@ -21,6 +21,7 @@ export interface GraphViewProps {
     snapToGrid: boolean;
     snapGrid: [number, number];
     onlyRenderVisibleNodes: boolean;
+    isInteractive: boolean;
 }
-declare const GraphView: React.MemoExoticComponent<({ nodeTypes, edgeTypes, onMove, onLoad, onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, onElementsRemove, deleteKeyCode, elements, showBackground, backgroundGap, backgroundColor, backgroundType, onConnect, snapToGrid, snapGrid, onlyRenderVisibleNodes }: GraphViewProps) => JSX.Element>;
+declare const GraphView: React.MemoExoticComponent<({ nodeTypes, edgeTypes, onMove, onLoad, onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, onElementsRemove, deleteKeyCode, elements, showBackground, backgroundGap, backgroundColor, backgroundType, onConnect, snapToGrid, snapGrid, onlyRenderVisibleNodes, isInteractive, }: GraphViewProps) => JSX.Element>;
 export default GraphView;

dist/container/ReactFlow/index.d.ts

@@ -22,9 +22,10 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     snapToGrid: boolean;
     snapGrid: [number, number];
     onlyRenderVisibleNodes: boolean;
+    isInteractive: boolean;
 }
 declare const ReactFlow: {
-    ({ style, onElementClick, elements, children, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, selectionKeyCode, showBackground, backgroundGap, backgroundType, backgroundColor, snapToGrid, snapGrid, onlyRenderVisibleNodes }: ReactFlowProps): JSX.Element;
+    ({ style, onElementClick, elements, children, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, selectionKeyCode, showBackground, backgroundGap, backgroundType, backgroundColor, snapToGrid, snapGrid, onlyRenderVisibleNodes, isInteractive, }: ReactFlowProps): JSX.Element;
     displayName: string;
     defaultProps: {
         onElementClick: () => void;
@@ -54,6 +55,7 @@ declare const ReactFlow: {
         snapToGrid: boolean;
         snapGrid: number[];
         onlyRenderVisibleNodes: boolean;
+        isInteractive: boolean;
     };
 };
 export default ReactFlow;

dist/store/hooks.d.ts

@@ -45,6 +45,7 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
     }>;
     setConnectionPosition: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
     setConnectionSourceId: import("easy-peasy").Action<StoreModel, string | null>;
+    setInteractive: import("easy-peasy").Action<StoreModel, boolean>;
 }, "1">) => Result) => Result;
 export declare const useStoreDispatch: () => import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
 export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").IntermediateStateMapper<{
@@ -65,5 +66,6 @@ export declare const useStoreState: <Result>(mapState: (state: import("easy-peas
     connectionPosition: import("../types").XYPosition;
     snapToGrid: boolean;
     snapGrid: [number, number];
+    isInteractive: boolean;
     onConnect: import("../types").OnConnectFunc;
 }, "1">) => Result, dependencies?: any[] | undefined) => Result;

dist/store/index.d.ts

@@ -49,6 +49,7 @@ export interface StoreModel {
     connectionPosition: XYPosition;
     snapToGrid: boolean;
     snapGrid: [number, number];
+    isInteractive: boolean;
     onConnect: OnConnectFunc;
     setOnConnect: Action<StoreModel, OnConnectFunc>;
     setNodes: Action<StoreModel, Node[]>;
@@ -65,6 +66,7 @@ export interface StoreModel {
     setSnapGrid: Action<StoreModel, SetSnapGrid>;
     setConnectionPosition: Action<StoreModel, XYPosition>;
     setConnectionSourceId: Action<StoreModel, ElementId | null>;
+    setInteractive: Action<StoreModel, boolean>;
 }
 declare const store: {
     getState: () => import("easy-peasy").IntermediateStateMapper<{
@@ -85,6 +87,7 @@ declare const store: {
         connectionPosition: XYPosition;
         snapToGrid: boolean;
         snapGrid: [number, number];
+        isInteractive: boolean;
         onConnect: OnConnectFunc;
     }, "1">;
     subscribe: (listener: () => void) => import("redux").Unsubscribe;
@@ -106,6 +109,7 @@ declare const store: {
         connectionPosition: XYPosition;
         snapToGrid: boolean;
         snapGrid: [number, number];
+        isInteractive: boolean;
         onConnect: OnConnectFunc;
     }, "1">, import("redux").AnyAction>) => void;
     dispatch: import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
@@ -133,6 +137,7 @@ declare const store: {
         setSnapGrid: Action<StoreModel, SetSnapGrid>;
         setConnectionPosition: Action<StoreModel, XYPosition>;
         setConnectionSourceId: Action<StoreModel, string | null>;
+        setInteractive: Action<StoreModel, boolean>;
     }, "1">;
     getListeners: () => import("easy-peasy").ListenerMapper<{
         selectedNodesBbox: Rect;

dist/types/index.d.ts

@@ -82,6 +82,19 @@ export interface NodeComponentProps {
     onNodeDragStop?: () => any;
     style?: CSSProperties;
 }
+export interface WrapNodeProps {
+    id: ElementId;
+    type: string;
+    data: any;
+    selected: boolean;
+    transform: Transform;
+    xPos: number;
+    yPos: number;
+    isInteractive: boolean;
+    onClick: (node: Node) => void | undefined;
+    onNodeDragStop: (node: Node) => void;
+    style?: CSSProperties;
+}
 export declare type FitViewParams = {
     padding: number;
 };