\n *
\n * Click me to drag
\n * This is some other content
\n * \n *
\n * You can't drag from here
\n * Dragging here works fine
\n * Content
\n * I start with transformX: 25px and transformY: 25px;
\n * I start with transformX: 25px and transformY: 25px;
\n * \n {showBackground && (\n
\n );\n});\n\nGraphView.displayName = 'GraphView';\n\nexport default GraphView;\n","import React, { memo } from 'react';\nimport cx from 'classnames';\n\nfunction onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection }) {\n const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();\n let recentHoveredHandle = null;\n\n setPosition({\n x: evt.clientX - containerBounds.x,\n y: evt.clientY - containerBounds.y,\n });\n setSourceId(nodeId);\n\n function resetRecentHandle() {\n if (recentHoveredHandle) {\n recentHoveredHandle.classList.remove('valid');\n recentHoveredHandle.classList.remove('connecting');\n }\n }\n\n // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }\n function checkElementBelowIsValid(evt) {\n const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);\n const result = {\n elementBelow,\n isValid: false,\n connection: null,\n isHoveringHandle: false\n };\n\n if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {\n let connection = null;\n\n if (isTarget) {\n const sourceId = elementBelow.getAttribute('data-nodeid');\n connection = { source: sourceId, target: nodeId };\n } else {\n const targetId = elementBelow.getAttribute('data-nodeid');\n connection = { source: nodeId, target: targetId };\n }\n\n const isValid = isValidConnection(connection);\n\n result.connection = connection;\n result.isValid = isValid;\n result.isHoveringHandle = true;\n }\n\n return result;\n }\n\n function onMouseMove(evt) {\n setPosition({\n x: evt.clientX - containerBounds.x,\n y: evt.clientY - containerBounds.y,\n });\n\n const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);\n\n if (!isHoveringHandle) {\n return resetRecentHandle();\n }\n\n const isOwnHandle = connection.source === connection.target;\n\n if (!isOwnHandle) {\n recentHoveredHandle = elementBelow;\n elementBelow.classList.add('connecting');\n elementBelow.classList.toggle('valid', isValid);\n }\n }\n\n function onMouseUp(evt) {\n const { connection, isValid } = checkElementBelowIsValid(evt);\n\n if (isValid) {\n onConnect(connection);\n }\n\n resetRecentHandle();\n setSourceId(null);\n\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n }\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp)\n}\n\nconst BaseHandle = memo(({\n type, nodeId, onConnect, position,\n setSourceId, setPosition, className,\n id = false, isValidConnection, ...rest\n}) => {\n const isTarget = type === 'target';\n const handleClasses = cx(\n 'react-flow__handle',\n className,\n position,\n { source: !isTarget, target: isTarget }\n );\n\n const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;\n\n return (\n \n
\n);\n","import React from 'react';\n\nimport Handle from '../../components/Handle';\n\nconst nodeStyles = {\n background: '#9999ff',\n padding: 10,\n borderRadius: 5,\n width: 150\n};\n\nexport default ({ data, style }) => (\n \n {data.label}\n
\n);\n","import React from 'react';\n\nimport Handle from '../../components/Handle';\n\nconst nodeStyles = {\n background: '#55dd99',\n padding: 10,\n borderRadius: 5,\n width: 150\n};\n\nexport default ({ data, style }) => (\n \n
\n);\n","import React, { useEffect, useRef, useState, memo } from 'react';\nimport ReactDraggable from 'react-draggable';\nimport cx from 'classnames';\n\nimport { getDimensions, inInputDOMNode } from '../../utils';\nimport { Provider } from '../../contexts/NodeIdContext';\nimport store from '../../store';\n\nconst isHandle = e => (\n e.target.className &&\n e.target.className.includes &&\n (e.target.className.includes('source') || e.target.className.includes('target'))\n);\n\nconst hasResizeObserver = !!window.ResizeObserver;\n\nconst getHandleBounds = (sel, nodeElement, parentBounds, k) => {\n const handles = nodeElement.querySelectorAll(sel);\n\n if (!handles || !handles.length) {\n return null;\n }\n\n return [].map.call(handles, (handle) => {\n const bounds = handle.getBoundingClientRect();\n const dimensions = getDimensions(handle);\n const nodeIdAttr = handle.getAttribute('data-nodeid');\n const handlePosition = handle.getAttribute('data-handlepos');\n const nodeIdSplitted = nodeIdAttr.split('__');\n\n let handleId = null;\n\n if (nodeIdSplitted) {\n handleId = nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted;\n }\n\n return {\n id: handleId,\n position: handlePosition,\n x: (bounds.x - parentBounds.x) * (1 / k),\n y: (bounds.y - parentBounds.y) * (1 / k),\n ...dimensions\n };\n });\n};\n\nconst onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {\n if (inInputDOMNode(evt) || isHandle(evt)) {\n return false;\n }\n\n const scaledClient = {\n x: evt.clientX * (1 / [transform[2]]),\n y: evt.clientY * (1 / [transform[2]])\n };\n const offsetX = scaledClient.x - position.x - transform[0];\n const offsetY = scaledClient.y - position.y - transform[1];\n const node = { id, type, position, data };\n\n store.dispatch.setSelectedElements({ id, type });\n setOffset({ x: offsetX, y: offsetY });\n onClick(node);\n};\n\nconst onDrag = (evt, { setDragging, id, offset, transform }) => {\n const scaledClient = {\n x: evt.clientX * (1 / transform[2]),\n y: evt.clientY * (1 / transform[2])\n };\n\n setDragging(true);\n store.dispatch.updateNodePos({ id, pos: {\n x: scaledClient.x - transform[0] - offset.x,\n y: scaledClient.y - transform[1] - offset.y\n }});\n};\n\nconst onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {\n if (!isDragging) {\n return false;\n }\n\n setDragging(false);\n onNodeDragStop({\n id, type, position, data\n });\n};\n\nexport default NodeComponent => {\n const NodeWrapper = memo((props) => {\n const nodeElement = useRef(null);\n const [offset, setOffset] = useState({ x: 0, y: 0 });\n const [isDragging, setDragging] = useState(false);\n const {\n id, type, data, transform, xPos, yPos, selected,\n onClick, onNodeDragStop, style\n } = props;\n\n const position = { x: xPos, y: yPos };\n const nodeClasses = cx('react-flow__node', { selected });\n const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };\n\n const updateNode = () => {\n const storeState = store.getState()\n const bounds = nodeElement.current.getBoundingClientRect();\n const dimensions = getDimensions(nodeElement.current);\n const handleBounds = {\n source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),\n target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])\n };\n store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });\n }\n\n useEffect(() => {\n updateNode();\n\n let resizeObserver = null;\n\n if (hasResizeObserver) {\n resizeObserver = new ResizeObserver(entries => {\n for (let entry of entries) {\n updateNode();\n }\n });\n\n resizeObserver.observe(nodeElement.current);\n }\n\n return () => {\n if (hasResizeObserver && resizeObserver) {\n resizeObserver.unobserve(nodeElement.current);\n }\n }\n }, []);\n\n return (\n \n \n \n
\n );\n};\n\nReactFlow.displayName = 'ReactFlow';\n\nReactFlow.propTypes = {\n onElementClick: PropTypes.func,\n onElementsRemove: PropTypes.func,\n onNodeDragStop: PropTypes.func,\n onConnect: PropTypes.func,\n\tonLoad: PropTypes.func,\n onMove: PropTypes.func,\n nodeTypes: PropTypes.object,\n edgeTypes: PropTypes.object,\n connectionLineType: PropTypes.string,\n connectionLineStyle: PropTypes.object,\n deleteKeyCode: PropTypes.number,\n selectionKeyCode: PropTypes.number,\n gridColor: PropTypes.string,\n gridGap: PropTypes.number,\n showBackground: PropTypes.bool,\n backgroundType: PropTypes.oneOf(['grid'])\n};\n\nReactFlow.defaultProps = {\n onElementClick: () => {},\n onElementsRemove: () => {},\n onNodeDragStop: () => {},\n onConnect: () => {},\n\tonLoad: () => {},\n onMove: () => {},\n nodeTypes: {\n input: InputNode,\n default: DefaultNode,\n output: OutputNode\n },\n edgeTypes: {\n default: BezierEdge,\n straight: StraightEdge,\n step: StepEdge\n },\n connectionLineType: 'bezier',\n connectionLineStyle: {},\n deleteKeyCode: 8,\n selectionKeyCode: 16,\n backgroundColor: '#999',\n backgroundGap: 24,\n showBackground: true,\n backgroundType: 'grid'\n};\n\nexport default ReactFlow;\n","import React, { useRef, useEffect } from 'react';\nimport { useStoreState } from 'easy-peasy';\nimport classnames from 'classnames';\n\nimport { isFunction } from '../../utils'\nimport { getNodesInside } from '../../utils/graph';\n\nconst baseStyle = {\n position: 'absolute',\n zIndex: 5,\n bottom: 10,\n right: 10,\n width: 200\n};\n\nexport default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }) => {\n const canvasNode = useRef(null);\n const state = useStoreState(s => ({\n width: s.width,\n height: s.height,\n nodes: s.nodes,\n transform: s.transform,\n })); const mapClasses = classnames('react-flow__minimap', className);\n const nodePositions = state.nodes.map(n => n.__rg.position);\n const width = style.width || baseStyle.width;\n const height = (state.height / (state.width || 1)) * width;\n const bbox = { x: 0, y: 0, width: state.width, height: state.height };\n const scaleFactor = width / state.width;\n const nodeColorFunc = isFunction(nodeColor) ? nodeColor : () => nodeColor;\n\n useEffect(() => {\n if (canvasNode) {\n const ctx = canvasNode.current.getContext('2d');\n const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);\n\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, width, height);\n\n nodesInside.forEach((n) => {\n const pos = n.__rg.position;\n const transformX = state.transform[0];\n const transformY = state.transform[1];\n const x = (pos.x * state.transform[2]) + transformX;\n const y = (pos.y * state.transform[2]) + transformY;\n\n ctx.fillStyle = nodeColorFunc(n);\n\n ctx.fillRect(\n (x * scaleFactor),\n (y * scaleFactor),\n n.__rg.width * scaleFactor * state.transform[2],\n n.__rg.height * scaleFactor * state.transform[2]\n );\n });\n }\n }, [nodePositions, state.transform, height])\n\n return (\n \n *
\n * Click me to drag
\n * This is some other content
\n * \n *
\n * You can't drag from here
\n * Dragging here works fine
\n * Content
\n * I start with transformX: 25px and transformY: 25px;
\n * I start with transformX: 25px and transformY: 25px;
\n * \n {showBackground && (\n
\n );\n});\n\nGraphView.displayName = 'GraphView';\n\nexport default GraphView;\n","import React, { memo } from 'react';\nimport cx from 'classnames';\n\nfunction onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection }) {\n const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();\n let recentHoveredHandle = null;\n\n setPosition({\n x: evt.clientX - containerBounds.x,\n y: evt.clientY - containerBounds.y,\n });\n setSourceId(nodeId);\n\n function resetRecentHandle() {\n if (recentHoveredHandle) {\n recentHoveredHandle.classList.remove('valid');\n recentHoveredHandle.classList.remove('connecting');\n }\n }\n\n // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }\n function checkElementBelowIsValid(evt) {\n const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);\n const result = {\n elementBelow,\n isValid: false,\n connection: null,\n isHoveringHandle: false\n };\n\n if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {\n let connection = null;\n\n if (isTarget) {\n const sourceId = elementBelow.getAttribute('data-nodeid');\n connection = { source: sourceId, target: nodeId };\n } else {\n const targetId = elementBelow.getAttribute('data-nodeid');\n connection = { source: nodeId, target: targetId };\n }\n\n const isValid = isValidConnection(connection);\n\n result.connection = connection;\n result.isValid = isValid;\n result.isHoveringHandle = true;\n }\n\n return result;\n }\n\n function onMouseMove(evt) {\n setPosition({\n x: evt.clientX - containerBounds.x,\n y: evt.clientY - containerBounds.y,\n });\n\n const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);\n\n if (!isHoveringHandle) {\n return resetRecentHandle();\n }\n\n const isOwnHandle = connection.source === connection.target;\n\n if (!isOwnHandle) {\n recentHoveredHandle = elementBelow;\n elementBelow.classList.add('connecting');\n elementBelow.classList.toggle('valid', isValid);\n }\n }\n\n function onMouseUp(evt) {\n const { connection, isValid } = checkElementBelowIsValid(evt);\n\n if (isValid) {\n onConnect(connection);\n }\n\n resetRecentHandle();\n setSourceId(null);\n\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n }\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp)\n}\n\nconst BaseHandle = memo(({\n type, nodeId, onConnect, position,\n setSourceId, setPosition, className,\n id = false, isValidConnection, ...rest\n}) => {\n const isTarget = type === 'target';\n const handleClasses = cx(\n 'react-flow__handle',\n className,\n position,\n { source: !isTarget, target: isTarget }\n );\n\n const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;\n\n return (\n \n
\n);\n","import React from 'react';\n\nimport Handle from '../../components/Handle';\n\nconst nodeStyles = {\n background: '#9999ff',\n padding: 10,\n borderRadius: 5,\n width: 150\n};\n\nexport default ({ data, style }) => (\n \n {data.label}\n
\n);\n","import React from 'react';\n\nimport Handle from '../../components/Handle';\n\nconst nodeStyles = {\n background: '#55dd99',\n padding: 10,\n borderRadius: 5,\n width: 150\n};\n\nexport default ({ data, style }) => (\n \n
\n);\n","import React, { useEffect, useRef, useState, memo } from 'react';\nimport ReactDraggable from 'react-draggable';\nimport cx from 'classnames';\n\nimport { getDimensions, inInputDOMNode } from '../../utils';\nimport { Provider } from '../../contexts/NodeIdContext';\nimport store from '../../store';\n\nconst isHandle = e => (\n e.target.className &&\n e.target.className.includes &&\n (e.target.className.includes('source') || e.target.className.includes('target'))\n);\n\nconst hasResizeObserver = !!window.ResizeObserver;\n\nconst getHandleBounds = (sel, nodeElement, parentBounds, k) => {\n const handles = nodeElement.querySelectorAll(sel);\n\n if (!handles || !handles.length) {\n return null;\n }\n\n return [].map.call(handles, (handle) => {\n const bounds = handle.getBoundingClientRect();\n const dimensions = getDimensions(handle);\n const nodeIdAttr = handle.getAttribute('data-nodeid');\n const handlePosition = handle.getAttribute('data-handlepos');\n const nodeIdSplitted = nodeIdAttr.split('__');\n\n let handleId = null;\n\n if (nodeIdSplitted) {\n handleId = nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted;\n }\n\n return {\n id: handleId,\n position: handlePosition,\n x: (bounds.x - parentBounds.x) * (1 / k),\n y: (bounds.y - parentBounds.y) * (1 / k),\n ...dimensions\n };\n });\n};\n\nconst onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {\n if (inInputDOMNode(evt) || isHandle(evt)) {\n return false;\n }\n\n const scaledClient = {\n x: evt.clientX * (1 / [transform[2]]),\n y: evt.clientY * (1 / [transform[2]])\n };\n const offsetX = scaledClient.x - position.x - transform[0];\n const offsetY = scaledClient.y - position.y - transform[1];\n const node = { id, type, position, data };\n\n store.dispatch.setSelectedElements({ id, type });\n setOffset({ x: offsetX, y: offsetY });\n onClick(node);\n};\n\nconst onDrag = (evt, { setDragging, id, offset, transform }) => {\n const scaledClient = {\n x: evt.clientX * (1 / transform[2]),\n y: evt.clientY * (1 / transform[2])\n };\n\n setDragging(true);\n store.dispatch.updateNodePos({ id, pos: {\n x: scaledClient.x - transform[0] - offset.x,\n y: scaledClient.y - transform[1] - offset.y\n }});\n};\n\nconst onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {\n if (!isDragging) {\n return false;\n }\n\n setDragging(false);\n onNodeDragStop({\n id, type, position, data\n });\n};\n\nexport default NodeComponent => {\n const NodeWrapper = memo((props) => {\n const nodeElement = useRef(null);\n const [offset, setOffset] = useState({ x: 0, y: 0 });\n const [isDragging, setDragging] = useState(false);\n const {\n id, type, data, transform, xPos, yPos, selected,\n onClick, onNodeDragStop, style\n } = props;\n\n const position = { x: xPos, y: yPos };\n const nodeClasses = cx('react-flow__node', { selected });\n const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };\n\n const updateNode = () => {\n const storeState = store.getState()\n const bounds = nodeElement.current.getBoundingClientRect();\n const dimensions = getDimensions(nodeElement.current);\n const handleBounds = {\n source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),\n target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])\n };\n store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });\n }\n\n useEffect(() => {\n updateNode();\n\n let resizeObserver = null;\n\n if (hasResizeObserver) {\n resizeObserver = new ResizeObserver(entries => {\n for (let entry of entries) {\n updateNode();\n }\n });\n\n resizeObserver.observe(nodeElement.current);\n }\n\n return () => {\n if (hasResizeObserver && resizeObserver) {\n resizeObserver.unobserve(nodeElement.current);\n }\n }\n }, []);\n\n return (\n \n \n \n
\n );\n};\n\nReactFlow.displayName = 'ReactFlow';\n\nReactFlow.propTypes = {\n onElementClick: PropTypes.func,\n onElementsRemove: PropTypes.func,\n onNodeDragStop: PropTypes.func,\n onConnect: PropTypes.func,\n\tonLoad: PropTypes.func,\n onMove: PropTypes.func,\n nodeTypes: PropTypes.object,\n edgeTypes: PropTypes.object,\n connectionLineType: PropTypes.string,\n connectionLineStyle: PropTypes.object,\n deleteKeyCode: PropTypes.number,\n selectionKeyCode: PropTypes.number,\n gridColor: PropTypes.string,\n gridGap: PropTypes.number,\n showBackground: PropTypes.bool,\n backgroundType: PropTypes.oneOf(['grid'])\n};\n\nReactFlow.defaultProps = {\n onElementClick: () => {},\n onElementsRemove: () => {},\n onNodeDragStop: () => {},\n onConnect: () => {},\n\tonLoad: () => {},\n onMove: () => {},\n nodeTypes: {\n input: InputNode,\n default: DefaultNode,\n output: OutputNode\n },\n edgeTypes: {\n default: BezierEdge,\n straight: StraightEdge,\n step: StepEdge\n },\n connectionLineType: 'bezier',\n connectionLineStyle: {},\n deleteKeyCode: 8,\n selectionKeyCode: 16,\n backgroundColor: '#999',\n backgroundGap: 24,\n showBackground: true,\n backgroundType: 'grid'\n};\n\nexport default ReactFlow;\n","import React, { useRef, useEffect } from 'react';\nimport { useStoreState } from 'easy-peasy';\nimport classnames from 'classnames';\n\nimport { isFunction } from '../../utils'\nimport { getNodesInside } from '../../utils/graph';\n\nconst baseStyle = {\n position: 'absolute',\n zIndex: 5,\n bottom: 10,\n right: 10,\n width: 200\n};\n\nexport default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }) => {\n const canvasNode = useRef(null);\n const state = useStoreState(s => ({\n width: s.width,\n height: s.height,\n nodes: s.nodes,\n transform: s.transform,\n })); const mapClasses = classnames('react-flow__minimap', className);\n const nodePositions = state.nodes.map(n => n.__rg.position);\n const width = style.width || baseStyle.width;\n const height = (state.height / (state.width || 1)) * width;\n const bbox = { x: 0, y: 0, width: state.width, height: state.height };\n const scaleFactor = width / state.width;\n const nodeColorFunc = isFunction(nodeColor) ? nodeColor : () => nodeColor;\n\n useEffect(() => {\n if (canvasNode) {\n const ctx = canvasNode.current.getContext('2d');\n const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);\n\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, width, height);\n\n nodesInside.forEach((n) => {\n const pos = n.__rg.position;\n const transformX = state.transform[0];\n const transformY = state.transform[1];\n const x = (pos.x * state.transform[2]) + transformX;\n const y = (pos.y * state.transform[2]) + transformY;\n\n ctx.fillStyle = nodeColorFunc(n);\n\n ctx.fillRect(\n (x * scaleFactor),\n (y * scaleFactor),\n n.__rg.width * scaleFactor * state.transform[2],\n n.__rg.height * scaleFactor * state.transform[2]\n );\n });\n }\n }, [nodePositions, state.transform, height])\n\n return (\n