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
This commit is contained in:
Moritz
@@ -1,35 +1,69 @@
|
||||
import React, { memo } from 'react';
|
||||
import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
|
||||
import cx from 'classnames';
|
||||
|
||||
function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection }) {
|
||||
const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
|
||||
let recentHoveredHandle = null;
|
||||
import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
|
||||
|
||||
type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
|
||||
interface BaseHandleProps {
|
||||
type: HandleType;
|
||||
nodeId: ElementId;
|
||||
onConnect: OnConnectFunc;
|
||||
position: Position;
|
||||
setSourceId: (nodeId: ElementId) => void;
|
||||
setPosition: (pos: XYPosition) => void;
|
||||
isValidConnection: ValidConnectionFunc;
|
||||
id?: ElementId | boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type Result = {
|
||||
elementBelow: Element;
|
||||
isValid: boolean;
|
||||
connection: Connection;
|
||||
isHoveringHandle: boolean;
|
||||
};
|
||||
|
||||
function onMouseDown(
|
||||
evt: ReactMouseEvent, nodeId: ElementId, setSourceId: (nodeId: ElementId) => void, setPosition: (pos: XYPosition) => any,
|
||||
onConnect: OnConnectFunc, isTarget: boolean, isValidConnection: ValidConnectionFunc
|
||||
): void {
|
||||
const reactFlowNode = document.querySelector('.react-flow');
|
||||
|
||||
if (!reactFlowNode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const containerBounds = reactFlowNode.getBoundingClientRect();
|
||||
let recentHoveredHandle: Element = null;
|
||||
|
||||
setPosition({
|
||||
x: evt.clientX - containerBounds.x,
|
||||
y: evt.clientY - containerBounds.y,
|
||||
x: evt.clientX - containerBounds.left,
|
||||
y: evt.clientY - containerBounds.top,
|
||||
});
|
||||
setSourceId(nodeId);
|
||||
|
||||
function resetRecentHandle() {
|
||||
if (recentHoveredHandle) {
|
||||
recentHoveredHandle.classList.remove('valid');
|
||||
recentHoveredHandle.classList.remove('connecting');
|
||||
if (!recentHoveredHandle) {
|
||||
return false;
|
||||
}
|
||||
|
||||
recentHoveredHandle.classList.remove('valid');
|
||||
recentHoveredHandle.classList.remove('connecting');
|
||||
}
|
||||
|
||||
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
|
||||
function checkElementBelowIsValid(evt) {
|
||||
function checkElementBelowIsValid(evt: MouseEvent) {
|
||||
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
|
||||
const result = {
|
||||
const result: Result = {
|
||||
elementBelow,
|
||||
isValid: false,
|
||||
connection: null,
|
||||
connection: { source: null, target: null },
|
||||
isHoveringHandle: false
|
||||
};
|
||||
|
||||
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
|
||||
let connection = null;
|
||||
let connection: Connection = { source: null, target: null };
|
||||
|
||||
if (isTarget) {
|
||||
const sourceId = elementBelow.getAttribute('data-nodeid');
|
||||
@@ -49,10 +83,10 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
|
||||
return result;
|
||||
}
|
||||
|
||||
function onMouseMove(evt) {
|
||||
function onMouseMove(evt: MouseEvent) {
|
||||
setPosition({
|
||||
x: evt.clientX - containerBounds.x,
|
||||
y: evt.clientY - containerBounds.y,
|
||||
x: evt.clientX - containerBounds.left,
|
||||
y: evt.clientY - containerBounds.top,
|
||||
});
|
||||
|
||||
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
|
||||
@@ -70,7 +104,7 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp(evt) {
|
||||
function onMouseUp(evt: MouseEvent) {
|
||||
const { connection, isValid } = checkElementBelowIsValid(evt);
|
||||
|
||||
if (isValid) {
|
||||
@@ -92,7 +126,7 @@ const BaseHandle = memo(({
|
||||
type, nodeId, onConnect, position,
|
||||
setSourceId, setPosition, className,
|
||||
id = false, isValidConnection, ...rest
|
||||
}) => {
|
||||
}: BaseHandleProps) => {
|
||||
const isTarget = type === 'target';
|
||||
const handleClasses = cx(
|
||||
'react-flow__handle',
|
||||
@@ -108,16 +142,15 @@ const BaseHandle = memo(({
|
||||
data-nodeid={nodeIdWithHandleId}
|
||||
data-handlepos={position}
|
||||
className={handleClasses}
|
||||
onMouseDown={evt => onMouseDown(evt, {
|
||||
nodeId: nodeIdWithHandleId, setSourceId, setPosition,
|
||||
onMouseDown={evt => onMouseDown(evt,
|
||||
nodeIdWithHandleId, setSourceId, setPosition,
|
||||
onConnect, isTarget, isValidConnection
|
||||
})}
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
BaseHandle.displayName = 'BaseHandle';
|
||||
BaseHandle.whyDidYouRender = false;
|
||||
|
||||
export default BaseHandle;
|
||||
@@ -1,18 +1,29 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useStoreActions, useStoreState } from 'easy-peasy';
|
||||
|
||||
import { useStoreActions, useStoreState } from '../../store/hooks';
|
||||
import BaseHandle from './BaseHandle';
|
||||
import NodeIdContext from '../../contexts/NodeIdContext'
|
||||
|
||||
const Handle = memo(({ onConnect, ...rest }) => {
|
||||
const nodeId = useContext(NodeIdContext);
|
||||
import { HandleType, ElementId, Position, OnConnectParams, OnConnectFunc } from '../../types';
|
||||
|
||||
interface HandleProps {
|
||||
type: HandleType,
|
||||
position: Position,
|
||||
onConnect?: OnConnectFunc,
|
||||
isValidConnection?: () => boolean
|
||||
};
|
||||
|
||||
const Handle = memo(({
|
||||
onConnect = _ => {}, type = 'source', position = 'top', isValidConnection = () => true,
|
||||
...rest
|
||||
}: HandleProps) => {
|
||||
const nodeId = useContext(NodeIdContext) as ElementId;
|
||||
const { setPosition, setSourceId } = useStoreActions(a => ({
|
||||
setPosition: a.setConnectionPosition,
|
||||
setSourceId: a.setConnectionSourceId
|
||||
}));
|
||||
const onConnectAction = useStoreState(s => s.onConnect);
|
||||
const onConnectExtended = (params) => {
|
||||
const onConnectExtended = (params: OnConnectParams) => {
|
||||
onConnectAction(params);
|
||||
onConnect(params);
|
||||
};
|
||||
@@ -23,6 +34,9 @@ const Handle = memo(({ onConnect, ...rest }) => {
|
||||
setPosition={setPosition}
|
||||
setSourceId={setSourceId}
|
||||
onConnect={onConnectExtended}
|
||||
type={type}
|
||||
position={position}
|
||||
isValidConnection={isValidConnection}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
@@ -30,18 +44,4 @@ const Handle = memo(({ onConnect, ...rest }) => {
|
||||
|
||||
Handle.displayName = 'Handle';
|
||||
|
||||
Handle.propTypes = {
|
||||
type: PropTypes.oneOf(['source', 'target']),
|
||||
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||
onConnect: PropTypes.func,
|
||||
isValidConnection: PropTypes.func
|
||||
};
|
||||
|
||||
Handle.defaultProps = {
|
||||
type: 'source',
|
||||
position: 'top',
|
||||
onConnect: () => {},
|
||||
isValidConnection: () => true
|
||||
};
|
||||
|
||||
export default Handle;
|
||||
Reference in New Issue
Block a user