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
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';

 import Handle from '../../components/Handle';
+import { NodeProps } from '../../types';

-const nodeStyles = {
+const nodeStyles: CSSProperties = {
  background: '#ff6060',
  padding: 10,
  borderRadius: 5,
  width: 150
 };

-export default ({ data, style }) => (
+export default ({ data, style }: NodeProps) => (
  <div style={{ ...nodeStyles, ...style }}>
    <Handle type="target" position="top" />
    {data.label}
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';

 import Handle from '../../components/Handle';
+import { NodeProps } from '../../types';

-const nodeStyles = {
+const nodeStyles: CSSProperties = {
  background: '#9999ff',
  padding: 10,
  borderRadius: 5,
  width: 150
 };

-export default ({ data, style }) => (
+export default ({ data, style }: NodeProps) => (
  <div style={{ ...nodeStyles, ...style }}>
    {data.label}
    <Handle type="source" position="bottom" />
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';

 import Handle from '../../components/Handle';
+import { NodeProps } from '../../types';

-const nodeStyles = {
+const nodeStyles: CSSProperties = {
  background: '#55dd99',
  padding: 10,
  borderRadius: 5,
  width: 150
 };

-export default ({ data, style }) => (
+export default ({ data, style }: NodeProps) => (
  <div style={{ ...nodeStyles, ...style }}>
    <Handle type="target" position="top" />
    {data.label}
@@ -1,166 +0,0 @@
-import React, { useEffect, useRef, useState, memo } from 'react';
-import ReactDraggable from 'react-draggable';
-import cx from 'classnames';
-
-import { getDimensions, inInputDOMNode } from '../../utils';
-import { Provider } from '../../contexts/NodeIdContext';
-import store from '../../store';
-
-const isHandle = e => (
-  e.target.className &&
-  e.target.className.includes &&
-  (e.target.className.includes('source') || e.target.className.includes('target'))
-);
-
-const hasResizeObserver = !!window.ResizeObserver;
-
-const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
-  const handles = nodeElement.querySelectorAll(sel);
-
-  if (!handles || !handles.length) {
-    return null;
-  }
-
-  return [].map.call(handles, (handle) => {
-    const bounds = handle.getBoundingClientRect();
-    const dimensions = getDimensions(handle);
-    const nodeIdAttr = handle.getAttribute('data-nodeid');
-    const handlePosition = handle.getAttribute('data-handlepos');
-    const nodeIdSplitted = nodeIdAttr.split('__');
-
-    let handleId = null;
-
-    if (nodeIdSplitted) {
-      handleId = nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted;
-    }
-
-    return {
-      id: handleId,
-      position: handlePosition,
-      x: (bounds.x - parentBounds.x) * (1 / k),
-      y: (bounds.y - parentBounds.y) * (1 / k),
-      ...dimensions
-    };
-  });
-};
-
-const onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {
-  if (inInputDOMNode(evt) || isHandle(evt)) {
-    return false;
-  }
-
-  const scaledClient = {
-    x: evt.clientX * (1 / [transform[2]]),
-    y: evt.clientY * (1 / [transform[2]])
-  };
-  const offsetX = scaledClient.x - position.x - transform[0];
-  const offsetY = scaledClient.y - position.y - transform[1];
-  const node = { id, type, position, data };
-
-  store.dispatch.setSelectedElements({ id, type });
-  setOffset({ x: offsetX, y: offsetY });
-  onClick(node);
-};
-
-const onDrag = (evt, { setDragging, id, offset, transform }) => {
-  const scaledClient = {
-    x: evt.clientX * (1 / transform[2]),
-    y: evt.clientY * (1 / transform[2])
-  };
-
-  setDragging(true);
-  store.dispatch.updateNodePos({ id, pos: {
-    x: scaledClient.x - transform[0] - offset.x,
-    y: scaledClient.y - transform[1] - offset.y
-  }});
-};
-
-const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
-  if (!isDragging) {
-    return false;
-  }
-
-  setDragging(false);
-  onNodeDragStop({
-    id, type, position, data
-  });
-};
-
-export default NodeComponent => {
-  const NodeWrapper = memo((props) => {
-    const nodeElement = useRef(null);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const [isDragging, setDragging] = useState(false);
-    const {
-      id, type, data, transform, xPos, yPos, selected,
-      onClick, onNodeDragStop, style
-    } = props;
-
-    const position = { x: xPos, y: yPos };
-    const nodeClasses = cx('react-flow__node', { selected });
-    const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
-
-    const updateNode = () => {
-      const storeState = store.getState()
-      const bounds = nodeElement.current.getBoundingClientRect();
-      const dimensions = getDimensions(nodeElement.current);
-      const handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
-        target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
-      };
-      store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
-    }
-
-    useEffect(() => {
-      updateNode();
-
-      let resizeObserver = null;
-
-      if (hasResizeObserver) {
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            updateNode();
-          }
-        });
-
-        resizeObserver.observe(nodeElement.current);
-      }
-
-      return () => {
-        if (hasResizeObserver && resizeObserver) {
-          resizeObserver.unobserve(nodeElement.current);
-        }
-      }
-    }, []);
-
-    return (
-      <ReactDraggable.DraggableCore
-        onStart={evt => onStart(evt, { onClick, id, type, data, setOffset, transform, position })}
-        onDrag={evt => onDrag(evt, { setDragging, id, offset, transform })}
-        onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
-        scale={transform[2]}
-      >
-        <div
-          className={nodeClasses}
-          ref={nodeElement}
-          style={nodeStyle}
-        >
-          <Provider value={id}>
-            <NodeComponent
-              id={id}
-              data={data}
-              type={type}
-              style={style}
-              selected={selected}
-            />
-          </Provider>
-        </div>
-      </ReactDraggable.DraggableCore>
-    );
-  });
-
-  NodeWrapper.displayName = 'NodeWrapper';
-  NodeWrapper.whyDidYouRender = false;
-
-  return NodeWrapper;
-};
@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
+import { DraggableCore, DraggableEvent } from 'react-draggable';
+import cx from 'classnames';
+import { ResizeObserver } from 'resize-observer';
+
+import { getDimensions, isInputDOMNode } from '../../utils';
+import { Provider } from '../../contexts/NodeIdContext';
+import store from '../../store';
+import { NodeComponentProps, Node, XYPosition, HandleElement, Position, Transform, ElementId } from '../../types';
+
+const isHandle = (evt: MouseEvent | DraggableEvent) => {
+  const target = evt.target as HTMLElement;
+
+  return (
+    target.className &&
+    target.className.includes &&
+    (target.className.includes('source') || target.className.includes('target'))
+  );
+};
+
+const getHandleBounds = (
+  selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number
+): HandleElement => {
+  const handles = nodeElement.querySelectorAll(selector);
+
+  if (!handles || !handles.length) {
+    return null;
+  }
+
+  return [].map.call(handles, (handle: HTMLDivElement): HandleElement => {
+    const bounds = handle.getBoundingClientRect();
+    const dimensions = getDimensions(handle);
+    const nodeIdAttr = handle.getAttribute('data-nodeid');
+    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
+    const nodeIdSplitted = nodeIdAttr.split('__');
+
+    let handleId = null;
+
+    if (nodeIdSplitted) {
+      handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted) as string;
+    }
+
+    return {
+      id: handleId,
+      position: handlePosition,
+      x: (bounds.left - parentBounds.left) * (1 / k),
+      y: (bounds.top - parentBounds.top) * (1 / k),
+      ...dimensions
+    };
+  });
+};
+
+const onStart = (
+  evt: MouseEvent, onClick: (node: Node) => void, id: ElementId, type: string,
+  data: any, setOffset: (pos: XYPosition) => void, transform: Transform, position: XYPosition
+): false | void => {
+  if (isInputDOMNode(evt) || isHandle(evt)) {
+    return false;
+  }
+
+  const scaledClient: XYPosition = {
+    x: evt.clientX * (1 / transform[2]),
+    y: evt.clientY * (1 / transform[2])
+  };
+  const offsetX = scaledClient.x - position.x - transform[0];
+  const offsetY = scaledClient.y - position.y - transform[1];
+  const node = { id, type, position, data };
+
+  store.dispatch.setSelectedElements({ id, type });
+  setOffset({ x: offsetX, y: offsetY });
+  onClick(node);
+};
+
+const onDrag = (
+  evt: MouseEvent, setDragging: (isDragging: boolean) => void, id: ElementId, offset: XYPosition,
+  transform: Transform
+): void => {
+  const scaledClient = {
+    x: evt.clientX * (1 / transform[2]),
+    y: evt.clientY * (1 / transform[2])
+  };
+
+  setDragging(true);
+  store.dispatch.updateNodePos({ id, pos: {
+    x: scaledClient.x - transform[0] - offset.x,
+    y: scaledClient.y - transform[1] - offset.y
+  }});
+};
+
+const onStop = (
+  onNodeDragStop: (params: Node) => void, isDragging: boolean, setDragging: (isDragging: boolean) => void, id: ElementId,
+  type: string, position: XYPosition, data: any
+): void => {
+  if (isDragging) {
+    setDragging(false);
+    onNodeDragStop({
+      id, type, position, data
+    });
+  }
+};
+
+export default (NodeComponent: ComponentType<NodeComponentProps>) => {
+  const NodeWrapper = memo(({
+    id, type, data, transform,
+    xPos, yPos, selected, onClick,
+    onNodeDragStop, style
+  }: NodeComponentProps) => {
+    const nodeElement = useRef<HTMLDivElement>(null);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [isDragging, setDragging] = useState(false);
+
+    const position = { x: xPos, y: yPos };
+    const nodeClasses = cx('react-flow__node', { selected });
+    const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
+
+    const updateNode = () => {
+      if (!nodeElement.current) {
+        return false;
+      }
+
+      const storeState = store.getState()
+      const bounds = nodeElement.current.getBoundingClientRect();
+      const dimensions = getDimensions(nodeElement.current);
+      const handleBounds = {
+        source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
+        target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
+      };
+      store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
+    };
+
+    useEffect(() => {
+      if (nodeElement.current) {
+        updateNode();
+
+        const resizeObserver = new ResizeObserver(entries => {
+          for (let _ of entries) {
+            updateNode();
+          }
+        });
+
+        resizeObserver.observe(nodeElement.current);
+
+        return () => {
+          if (resizeObserver && nodeElement.current) {
+            resizeObserver.unobserve(nodeElement.current);
+          }
+        }
+      }
+    }, [nodeElement.current]);
+
+    return (
+      <DraggableCore
+        onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
+        onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
+        onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
+        scale={transform[2]}
+      >
+        <div
+          className={nodeClasses}
+          ref={nodeElement}
+          style={nodeStyle}
+        >
+          <Provider value={id}>
+            <NodeComponent
+              id={id}
+              data={data}
+              type={type}
+              style={style}
+              selected={selected}
+            />
+          </Provider>
+        </div>
+      </DraggableCore>
+    );
+  });
+
+  NodeWrapper.displayName = 'NodeWrapper';
+
+  return NodeWrapper;
+};