alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(node): handle nodrag class

Browse Source
This commit is contained in:
moklick
2019-10-24 14:48:35 +02:00
parent 70ab31b993
commit 5030f7dc1b
8 changed files with 24 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
dist/ReactFlow.esm.js vendored
View File

@@ -8369,9 +8369,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
connection: { source: null, target: null },
isHoveringHandle: false,
};
if (elementBelow &&
(elementBelow.classList.contains('target') ||
elementBelow.classList.contains('source'))) {
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
var connection = { source: null, target: null };
if (isTarget) {
var sourceId = elementBelow.getAttribute('data-nodeid');
@@ -8420,7 +8418,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
var BaseHandle = memo(function (_a) {
var type = _a.type, nodeId = _a.nodeId, onConnect = _a.onConnect, position = _a.position, setSourceId = _a.setSourceId, setPosition = _a.setPosition, className = _a.className, _b = _a.id, id = _b === void 0 ? false : _b, isValidConnection = _a.isValidConnection, rest = __rest(_a, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id", "isValidConnection"]);
var isTarget = type === 'target';
var handleClasses = classnames('react-flow__handle', className, position, {
var handleClasses = classnames('react-flow__handle', 'nodrag', className, position, {
source: !isTarget,
target: isTarget,
});
@@ -8748,12 +8746,6 @@ unwrapExports(ResizeObserver_1);
var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
var ResizeObserver_3 = ResizeObserver_1.install;
var isHandle = function (evt) {
var target = evt.target;
return (target.className &&
target.className.includes &&
(target.className.includes('source') || target.className.includes('target')));
};
var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
var handles = nodeElement.querySelectorAll(selector);
if (!handles || !handles.length) {
@@ -8774,9 +8766,6 @@ var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
});
};
var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
if (isInputDOMNode(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
@@ -8856,7 +8845,7 @@ var wrapNode = (function (NodeComponent) {
}
return;
}, [nodeElement.current]);
return (React.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2], disabled: !isInteractive },
return (React.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2], disabled: !isInteractive, cancel: ".nodrag" },
React.createElement("div", { className: nodeClasses, ref: nodeElement, style: nodeStyle },
React.createElement(Provider, { value: id },
React.createElement(NodeComponent, { id: id, data: data, type: type, style: style, selected: selected, sourcePosition: sourcePosition, targetPosition: targetPosition })))));
@@ -8914,8 +8903,8 @@ var wrapEdge = (function (EdgeComponent) {
var EdgeWrapper = memo(function (_a) {
var id = _a.id, source = _a.source, target = _a.target, type = _a.type, animated = _a.animated, selected = _a.selected, onClick = _a.onClick, isInteractive = _a.isInteractive, rest = __rest(_a, ["id", "source", "target", "type", "animated", "selected", "onClick", "isInteractive"]);
var edgeClasses = classnames('react-flow__edge', { selected: selected, animated: animated });
var onEdgeClick = function (evt) {
if (isInputDOMNode(evt) || !isInteractive) {
var onEdgeClick = function () {
if (!isInteractive) {
return;
}
store.dispatch.setSelectedElements({ id: id, source: source, target: target });

2
dist/ReactFlow.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

21
dist/ReactFlow.js vendored
View File

@@ -8376,9 +8376,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
connection: { source: null, target: null },
isHoveringHandle: false,
};
if (elementBelow &&
(elementBelow.classList.contains('target') ||
elementBelow.classList.contains('source'))) {
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
var connection = { source: null, target: null };
if (isTarget) {
var sourceId = elementBelow.getAttribute('data-nodeid');
@@ -8427,7 +8425,7 @@ function onMouseDown(evt, nodeId, setSourceId, setPosition, onConnect, isTarget,
var BaseHandle = React.memo(function (_a) {
var type = _a.type, nodeId = _a.nodeId, onConnect = _a.onConnect, position = _a.position, setSourceId = _a.setSourceId, setPosition = _a.setPosition, className = _a.className, _b = _a.id, id = _b === void 0 ? false : _b, isValidConnection = _a.isValidConnection, rest = __rest(_a, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id", "isValidConnection"]);
var isTarget = type === 'target';
var handleClasses = classnames('react-flow__handle', className, position, {
var handleClasses = classnames('react-flow__handle', 'nodrag', className, position, {
source: !isTarget,
target: isTarget,
});
@@ -8755,12 +8753,6 @@ unwrapExports(ResizeObserver_1);
var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
var ResizeObserver_3 = ResizeObserver_1.install;
var isHandle = function (evt) {
var target = evt.target;
return (target.className &&
target.className.includes &&
(target.className.includes('source') || target.className.includes('target')));
};
var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
var handles = nodeElement.querySelectorAll(selector);
if (!handles || !handles.length) {
@@ -8781,9 +8773,6 @@ var getHandleBounds = function (selector, nodeElement, parentBounds, k) {
});
};
var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
if (isInputDOMNode(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
@@ -8863,7 +8852,7 @@ var wrapNode = (function (NodeComponent) {
}
return;
}, [nodeElement.current]);
return (React__default.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2], disabled: !isInteractive },
return (React__default.createElement(DraggableCore, { onStart: function (evt) { return onStart(evt, onClick, id, type, data, setOffset, transform, position); }, onDrag: function (evt) { return onDrag(evt, setDragging, id, offset, transform); }, onStop: function () { return onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data); }, scale: transform[2], disabled: !isInteractive, cancel: ".nodrag" },
React__default.createElement("div", { className: nodeClasses, ref: nodeElement, style: nodeStyle },
React__default.createElement(Provider, { value: id },
React__default.createElement(NodeComponent, { id: id, data: data, type: type, style: style, selected: selected, sourcePosition: sourcePosition, targetPosition: targetPosition })))));
@@ -8921,8 +8910,8 @@ var wrapEdge = (function (EdgeComponent) {
var EdgeWrapper = React.memo(function (_a) {
var id = _a.id, source = _a.source, target = _a.target, type = _a.type, animated = _a.animated, selected = _a.selected, onClick = _a.onClick, isInteractive = _a.isInteractive, rest = __rest(_a, ["id", "source", "target", "type", "animated", "selected", "onClick", "isInteractive"]);
var edgeClasses = classnames('react-flow__edge', { selected: selected, animated: animated });
var onEdgeClick = function (evt) {
if (isInputDOMNode(evt) || !isInteractive) {
var onEdgeClick = function () {
if (!isInteractive) {
return;
}
store.dispatch.setSelectedElements({ id: id, source: source, target: target });

2
dist/ReactFlow.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
example/src/CustomNode/ColorSelectorNode.js
View File

@@ -14,7 +14,7 @@ export default ({ data, styles }) => {
onConnect={params => console.log('handle onConnect', params)}
/>
<div>Custom Color Picker Node: <strong>{data.color}</strong></div>
<input type="color" onChange={data.onChange} defaultValue={data.color}/>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color}/>
<Handle
type="source"
position="right"

7
src/components/Edges/wrapEdge.tsx
View File

@@ -1,7 +1,6 @@
import React, { memo, MouseEvent, ComponentType } from 'react';
import React, { memo, ComponentType } from 'react';
import cx from 'classnames';
import { isInputDOMNode } from '../../utils';
import store from '../../store';
import { ElementId, Edge, EdgeCompProps } from '../../types';
@@ -20,8 +19,8 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const EdgeWrapper = memo(
({ id, source, target, type, animated, selected, onClick, isInteractive, ...rest }: EdgeWrapperProps) => {
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt: MouseEvent): void => {
if (isInputDOMNode(evt) || !isInteractive) {
const onEdgeClick = (): void => {
if (!isInteractive) {
return;
}

34
src/components/Handle/BaseHandle.tsx
View File

@@ -1,14 +1,7 @@
import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
import cx from 'classnames';
import {
HandleType,
ElementId,
Position,
XYPosition,
OnConnectFunc,
Connection,
} from '../../types';
import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
type ValidConnectionFunc = (connection: Connection) => boolean;
type SetSourceIdFunc = (nodeId: ElementId | null) => void;
@@ -76,11 +69,7 @@ function onMouseDown(
isHoveringHandle: false,
};
if (
elementBelow &&
(elementBelow.classList.contains('target') ||
elementBelow.classList.contains('source'))
) {
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
let connection: Connection = { source: null, target: null };
if (isTarget) {
@@ -107,12 +96,7 @@ function onMouseDown(
y: evt.clientY - containerBounds.top,
});
const {
connection,
elementBelow,
isValid,
isHoveringHandle,
} = checkElementBelowIsValid(evt);
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
if (!isHoveringHandle) {
return resetRecentHandle();
@@ -159,7 +143,7 @@ const BaseHandle = memo(
...rest
}: BaseHandleProps) => {
const isTarget = type === 'target';
const handleClasses = cx('react-flow__handle', className, position, {
const handleClasses = cx('react-flow__handle', 'nodrag', className, position, {
source: !isTarget,
target: isTarget,
});
@@ -172,15 +156,7 @@ const BaseHandle = memo(
data-handlepos={position}
className={handleClasses}
onMouseDown={evt =>
onMouseDown(
evt,
nodeIdWithHandleId,
setSourceId,
setPosition,
onConnect,
isTarget,
isValidConnection
)
onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection)
}
{...rest}
/>

19
src/components/Nodes/wrapNode.tsx
View File

@@ -1,9 +1,9 @@
import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
import { DraggableCore, DraggableEvent } from 'react-draggable';
import { DraggableCore } from 'react-draggable';
import cx from 'classnames';
import { ResizeObserver } from 'resize-observer';
import { getDimensions, isInputDOMNode } from '../../utils';
import { getDimensions } from '../../utils';
import { Provider } from '../../contexts/NodeIdContext';
import store from '../../store';
import {
@@ -17,16 +17,6 @@ import {
WrapNodeProps,
} 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,
@@ -76,10 +66,6 @@ const onStart = (
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]),
@@ -207,6 +193,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
scale={transform[2]}
disabled={!isInteractive}
cancel=".nodrag"
>
<div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
<Provider value={id}>