Add user resizable nodes

Fix EdgePath.getNodeIntersection incorrectly calculating whether 2 nodes
intersect

Author: rChaoz

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+examples

src/components/BaseNode.tsx

@@ -0,0 +1,83 @@
+import React, {useContext} from "react";
+import styled from "@emotion/styled";
+import {cx} from "@emotion/css";
+import {NODE_CLASS, Z_INDEX_GRABBED_NODE} from "../../util/constants";
+import {BoundsContext} from "../../context/BoundsContext";
+import {Node} from "../../data/Node";
+import {useBaseNode} from "./useBaseNode";
+// Used by documentation
+// eslint-disable-next-line
+import {BaseResizableNode} from "./BaseResizableNode";
+import {Property} from "csstype";
+
+export interface BaseNodeProps {
+    /**
+     * ID of the node
+     */
+    id: string
+    /**
+     * CSS classes to be added to the node element
+     */
+    classes: string[]
+    /**
+     * Absolute position of this node
+     * TODO This shouldn't be recalculated every render
+     */
+    absolutePosition: DOMPoint
+    /**
+     * Whether this node is grabbed (being moved)
+     */
+    grabbed: boolean
+    /**
+     * Whether this node is selected
+     */
+    selected: boolean
+    /**
+     * Contents of your node should be placed here
+     */
+    children: React.ReactNode
+}
+
+export interface NodeProps<T> extends Omit<BaseNodeProps, "children"> {
+    /**
+     * Custom node data
+     */
+    data: T
+    /**
+     * Parent of this node, if it exists
+     */
+    parent?: Node<unknown> | null
+    /**
+     * Position relative to parent, if parent is not null, or same as {@link absolutePosition} if it is null
+     */
+    position: DOMPoint
+    /**
+     * Spacing between this node and the edges that connect to it. This space is *automatically taken into consideration* for the calculation of edges.
+     */
+    edgeMargin: number
+    /**
+     * Whether this node wants to be user-resizable, as set in the {@link Node Node's} properties. In general, you can (and should) ignore this and use the non-resizable
+     * {@link BaseNode}, instead of {@link BaseResizableNode}, unless you expect this value to change dynamically.
+     */
+    resize: Property.Resize
+}
+
+const BaseDiv = styled.div<{ baseZIndex: number, grabbed: boolean }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: ${props => props.grabbed ? Z_INDEX_GRABBED_NODE : props.baseZIndex};
+`
+
+export function BaseNode({id, classes, absolutePosition, grabbed, selected, children}: BaseNodeProps) {
+    const [grapherContext, ref] = useBaseNode(id)
+    const bounds = useContext(BoundsContext)
+
+    return <BaseDiv ref={ref} id={`${grapherContext.id}n-${id}`} baseZIndex={grapherContext.nodeZIndex} grabbed={grabbed}
+                    className={cx(classes, NODE_CLASS)} data-grabbed={grabbed} data-selected={selected} style={{
+        left: absolutePosition.x - bounds.x,
+        top: absolutePosition.y - bounds.y,
+    }}>
+        {children}
+    </BaseDiv>
+}
+

src/components/BaseNode/BaseNode.tsx

@@ -0,0 +1,54 @@
+import {useBaseNode} from "./useBaseNode";
+import React, {useContext, useEffect} from "react";
+import {BoundsContext} from "../../context/BoundsContext";
+import {NODE_CLASS, NODE_RESIZABLE_WRAPPER, Z_INDEX_GRABBED_NODE} from "../../util/constants";
+import {cx} from "@emotion/css";
+import {Property} from "csstype";
+import {BaseNodeProps} from "./BaseNode";
+import styled from "@emotion/styled";
+
+const ResizableDiv = styled.div<{ baseZIndex: number, grabbed: boolean, resize?: Property.Resize }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: ${props => props.grabbed ? Z_INDEX_GRABBED_NODE : props.baseZIndex};
+  resize: ${props => props.resize};
+  overflow: auto;
+`
+
+const ContentDiv = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+`
+
+export interface BaseResizableNodeProps extends BaseNodeProps {
+    /**
+     * Direction of allowed user resizing.
+     */
+    resize: Property.Resize
+}
+
+export function BaseResizableNode({id, classes, absolutePosition, grabbed, selected, children, resize}: BaseResizableNodeProps) {
+    const [grapherContext, ref] = useBaseNode(id)
+    const bounds = useContext(BoundsContext)
+
+    useEffect(() => {
+        if (ref.current == null) return
+        const parent = ref.current.parentElement
+        if (parent == null) return
+
+        const onResizeStart = grapherContext.onResizeStart
+
+        parent.addEventListener("pointerdown", onResizeStart)
+        return () => parent.removeEventListener("pointerdown", onResizeStart)
+    }, [grapherContext.onResizeStart, ref])
+
+    return <ResizableDiv className={NODE_RESIZABLE_WRAPPER} baseZIndex={grapherContext.nodeZIndex} grabbed={grabbed} resize={resize} style={{
+        left: absolutePosition.x - bounds.x,
+        top: absolutePosition.y - bounds.y,
+    }}>
+        <ContentDiv id={`${grapherContext.id}n-${id}`} ref={ref} className={cx(classes, NODE_CLASS)} data-grabbed={grabbed} data-selected={selected}>
+            {children}
+        </ContentDiv>
+    </ResizableDiv>
+}

src/components/BaseNode/BaseResizableNode.tsx

@@ -0,0 +1,5 @@
+import {BaseNode, BaseNodeProps, NodeProps} from "./BaseNode";
+import {BaseResizableNode, BaseResizableNodeProps} from "./BaseResizableNode";
+
+export {BaseNode, BaseNodeProps, NodeProps}
+export {BaseResizableNode, BaseResizableNodeProps}

src/components/BaseNode/index.ts

@@ -0,0 +1,72 @@
+import {GrapherContext, GrapherContextValue} from "../../context/GrapherContext";
+import React, {useCallback, useContext, useEffect, useRef} from "react";
+import {CallbacksContext} from "../../context/CallbacksContext";
+import {errorUnknownNode} from "../../util/log";
+import {resolveValues} from "../../util/utils";
+
+// Common code of BaseNode and BaseNodeResizable
+export function useBaseNode(id: string): [GrapherContextValue, React.RefObject<HTMLDivElement>] {
+    const grapherContext = useContext(GrapherContext)
+    const listeners = useContext(CallbacksContext)
+
+    const ref = useRef<HTMLDivElement>(null)
+    const node = grapherContext.getNode(id)
+    if (node == null) errorUnknownNode(id)
+
+    // Function to notify ReactGrapher of changes to this node (size, border radius)
+    const recalculateNode = useCallback(() => {
+        const elem = ref.current
+        if (elem == null || node == null) return
+        // Update node size
+        if (Math.abs(node.width - elem.offsetWidth) > 3) {
+            node.width = elem.offsetWidth
+            grapherContext.rerenderEdges()
+            grapherContext.recalculateBounds()
+        }
+        if (Math.abs(node.height - elem.offsetHeight) > 3) {
+            node.height = elem.offsetHeight
+            grapherContext.rerenderEdges()
+            grapherContext.recalculateBounds()
+        }
+
+        // Update border radius
+        let borderChanged = false
+        const style = getComputedStyle(elem)
+        /* border[pos][axis] - border radius for every corner
+        pos = 0 (top-left) / 1 (top-right) / 2 (bottom-right) / 3 (bottom-left)
+        axis = 0 (x-axis) / 1 (y-axis)
+         */
+        const border: [[number, number], [number, number], [number, number], [number, number]] = [
+            resolveValues(style.borderTopLeftRadius, node.width, node.height),
+            resolveValues(style.borderTopRightRadius, node.width, node.height),
+            resolveValues(style.borderBottomRightRadius, node.width, node.height),
+            resolveValues(style.borderBottomLeftRadius, node.width, node.height),
+        ]
+        for (let i = 0; i < 4; ++i) if (Math.abs(border[i][0] - node.borderRadius[i][0]) > 3 || Math.abs(border[i][1] - node.borderRadius[i][1]) > 3) {
+            borderChanged = true
+            break
+        }
+        if (borderChanged) {
+            node.borderRadius = border
+            grapherContext.rerenderEdges()
+        }
+    }, [grapherContext, node])
+
+    // Set listeners
+    useEffect(() => {
+        const elem = ref.current
+        if (elem == null || node == null || grapherContext.static) return
+
+        elem.addEventListener("pointerdown", listeners.onObjectPointerDown)
+        elem.addEventListener("pointerup", listeners.onObjectPointerUp)
+        const observer = new ResizeObserver(recalculateNode)
+        observer.observe(elem)
+        return () => {
+            elem.removeEventListener("pointerdown", listeners.onObjectPointerDown)
+            elem.removeEventListener("pointerup", listeners.onObjectPointerUp)
+            observer.disconnect()
+        }
+    }, [grapherContext, listeners, node, recalculateNode])
+
+    return [grapherContext, ref]
+}