Improve TS documentation (#63)

* Ignore .idea folder

* Rename ElkOptions > ElkLayoutOptions + add documentation about ElkLayoutOptions + avoid passing bad prop "direction" to ELKjs

* Add yarn build:watch command

* Enforce better typing (and easier to log)

* Add documentation and reference link for all default options

* Misc doc

* Refactor ElkLayoutOptions > ElkCanvasLayoutOptions + add ElkNodeLayoutOptions and use them correctly

* Add "link:reaflow" command to quickly link all relevant packages

* Split commands (unlink) into another because it messes things up

* Fix command

* Remove "extra" on drag events because nothing is ever sent (unused code)

* Only run undo/redo if it can undo/redo (unsure about that, needs PEER REVIEW, seems legit but I might be missing something)

* Revert "Remove "extra" on drag events because nothing is ever sent (unused code)"

This reverts commit 4ec0c48

* Misc doc

* Add doc about ELK options being used by Reaflow

* Rename internal variables to avoid confusion (port = fromPort or toPort? was confusing)

* Revert wrong change (misc)

* Convert to TODO

* Change to org.eclipse.elk.layered.layering.strategy

* Remove TODO

* Remove commands (linking)

.gitignore

@@ -66,3 +66,6 @@ typings/
 .DS_Store
 src/**/*.scss.d.ts
 src/**/*.css.d.ts
+
+# IDE
+.idea

docs/GettingStarted/DataShapes.stories.mdx

@@ -73,7 +73,7 @@ export interface NodeData<T = any> {
   /**
    * ELK layout options.
    */
-  layoutOptions?: any;
+  layoutOptions?: ElkNodeLayoutOptions;
 
   /**
    * Whether the node can be clicked.

package.json

@@ -4,6 +4,7 @@
   "description": "Node-based Visualizations for React",
   "scripts": {
     "build": "rollup -c",
+    "build:watch": "rollup -c -w",
     "test": "jest --env=jsdom",
     "prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint --ext js,ts,tsx",

src/Canvas.tsx

@@ -12,7 +12,12 @@ import React, {
 import { useId, CloneElement } from 'rdk';
 import { Node, NodeProps } from './symbols/Node';
 import { Edge, EdgeProps } from './symbols/Edge';
-import { ElkRoot, CanvasDirection, useLayout, LayoutResult } from './layout';
+import {
+  ElkRoot,
+  CanvasDirection,
+  LayoutResult,
+  ElkCanvasLayoutOptions
+} from './layout';
 import { MarkerArrow, MarkerArrowProps } from './symbols/Arrow';
 import { EdgeData, NodeData, PortData } from './types';
 import classNames from 'classnames';
@@ -90,20 +95,24 @@ export interface CanvasContainerProps extends CanvasProps {
   /**
    * ELKJS Layout Options
    */
-  layoutOptions?: any;
+  layoutOptions?: ElkCanvasLayoutOptions;
 
   /**
    * Callback to check if a node is linkable or not.
    */
-  onNodeLink?: (from: NodeData, to: NodeData, port?: PortData) => void;
+  onNodeLink?: (
+    fromNode: NodeData,
+    toNode: NodeData,
+    fromPort?: PortData
+  ) => void;
 
   /**
    * Callback when a node is linked.
    */
   onNodeLinkCheck?: (
-    from: NodeData,
-    to: NodeData,
-    port?: PortData
+    fromNode: NodeData,
+    toNode: NodeData,
+    fromPort?: PortData
   ) => undefined | boolean;
 
   /**

src/helpers/useProximity.ts

@@ -12,7 +12,9 @@ export interface ProximityProps {
   disabled?: boolean;
 
   /**
-   * Min distance required before match is made. Default is 40.
+   * Min distance required before match is made.
+   *
+   * @default 40
    */
   minDistance?: number;
 
@@ -213,7 +215,7 @@ export const useProximity = ({
     // @ts-ignore
     setMatrix(getCoords(ref));
     setPoints(buildPoints(ref.layout.children));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [disabled]);
 
   const onDrag = useCallback(
@@ -257,12 +259,7 @@ export const useProximity = ({
 
       setMatch(foundNodeId);
     },
-    [
-      matrix,
-      disabled,
-      minDistance,
-      points
-    ]
+    [matrix, disabled, minDistance, points]
   );
 
   useEffect(() => {

src/helpers/useSelection.ts

@@ -6,6 +6,8 @@ import { removeNode } from './crudHelpers';
 export interface SelectionProps {
   /**
    * Current selections.
+   *
+   * Contains both nodes and edges ids.
    */
   selections?: string[];
 
@@ -27,7 +29,7 @@ export interface SelectionProps {
   /**
    * On selection change.
    */
-  onSelection?: (value: string[]) => void;
+  onSelection?: (newSelectedIds: string[]) => void;
 
   /**
    * On data change.
@@ -37,7 +39,7 @@ export interface SelectionProps {
 
 export interface SelectionResult {
   /**
-   * Selections id array.
+   * Selections id array (of nodes and edges).
    */
   selections: string[];
 

src/helpers/useUndo.ts

@@ -43,11 +43,15 @@ export interface UndoProps {
 
   /**
    * Max history count.
+   *
+   * @default 20
    */
   maxHistory?: number;
 
   /**
    * Disabled or not.
+   *
+   * @default false
    */
   disabled?: boolean;
 
@@ -178,7 +182,7 @@ export const useUndo = ({
       description: 'Undo changes',
       callback: (event) => {
         event.preventDefault();
-        if (!disabled) {
+        if (!disabled && canUndo) {
           undo();
         }
       }
@@ -190,7 +194,7 @@ export const useUndo = ({
       description: 'Redo changes',
       callback: (event) => {
         event.preventDefault();
-        if (!disabled) {
+        if (!disabled && canRedo) {
           redo();
         }
       }