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

develop (#43)

Browse Source 
* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch
This commit is contained in:
Moritz
2019-10-21 20:58:28 +02:00
committed by GitHub
parent ce210eb5dc
commit a793f8c2ff
80 changed files with 2634 additions and 1247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/BezierEdge.tsx
+29 -21
View File
@@ -2,28 +2,36 @@ import React, { memo } from 'react';
import { EdgeBezierProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY,
sourcePosition = 'bottom', targetPosition = 'top', style = {}
}: EdgeBezierProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
export default memo(
({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition = 'bottom',
targetPosition = 'top',
style = {},
}: EdgeBezierProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
if (['left', 'right'].includes(sourcePosition) && ['left', 'right'].includes(targetPosition)) {
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
if (
['left', 'right'].includes(sourcePosition) &&
['left', 'right'].includes(targetPosition)
) {
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
} else if (['left', 'right'].includes(sourcePosition) || ['left', 'right'].includes(targetPosition)) {
dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
} else if (
['left', 'right'].includes(sourcePosition) ||
['left', 'right'].includes(targetPosition)
) {
dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
}
return <path {...style} d={dAttr} />;
}
return (
<path
{...style}
d={dAttr}
/>
);
});
);
src/components/Edges/StepEdge.tsx
+12 -12
View File
@@ -2,16 +2,16 @@ import React, { memo } from 'react';
import { EdgeProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY, style = {}
} : EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
export default memo(
({ sourceX, sourceY, targetX, targetY, style = {} }: EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
return (
<path
{...style}
d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
/>
);
});
return (
<path
{...style}
d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
/>
);
}
);
src/components/Edges/StraightEdge.tsx
+7 -10
View File
@@ -2,13 +2,10 @@ import React, { memo } from 'react';
import { EdgeProps } from '../../types';
export default memo(({
sourceX, sourceY, targetX, targetY, style = {}
}: EdgeProps) => {
return (
<path
{...style}
d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
/>
);
});
export default memo(
({ sourceX, sourceY, targetX, targetY, style = {} }: EdgeProps) => {
return (
<path {...style} d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`} />
);
}
);
src/components/Edges/wrapEdge.tsx
+47 -33
View File
@@ -3,42 +3,56 @@ import cx from 'classnames';
import { isInputDOMNode } from '../../utils';
import store from '../../store';
import { EdgeWrapperProps } from '../../types';
import { ElementId, Edge, EdgeCompProps } from '../../types';
export default (EdgeComponent: ComponentType<EdgeWrapperProps>) => {
const EdgeWrapper = memo(({
id, source, target, type,
animated, selected, onClick,
...rest
}: EdgeWrapperProps) => {
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt: MouseEvent) => {
if (isInputDOMNode(evt)) {
return false;
}
interface EdgeWrapperProps {
id: ElementId;
source: ElementId;
target: ElementId;
type: any;
onClick: (edge: Edge) => void;
animated: boolean;
selected: boolean;
}
store.dispatch.setSelectedElements({ id, source, target });
onClick({ id, source, target, type });
};
export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const EdgeWrapper = memo(
({
id,
source,
target,
type,
animated,
selected,
onClick,
...rest
}: EdgeWrapperProps) => {
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt: MouseEvent): void => {
if (isInputDOMNode(evt)) {
return;
}
return (
<g
className={edgeClasses}
onClick={onEdgeClick}
>
<EdgeComponent
id={id}
source={source}
target={target}
type={type}
animated={animated}
selected={selected}
onClick={onClick}
{...rest}
/>
</g>
);
});
store.dispatch.setSelectedElements({ id, source, target });
onClick({ id, source, target, type });
};
return (
<g className={edgeClasses} onClick={onEdgeClick}>
<EdgeComponent
id={id}
source={source}
target={target}
type={type}
animated={animated}
selected={selected}
onClick={onClick}
{...rest}
/>
</g>
);
}
);
EdgeWrapper.displayName = 'EdgeWrapper';