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

refactor(variables): dont use abbreviations

Browse Source
This commit is contained in:
moklick
2020-08-10 12:10:17 +02:00
parent 1f9a76eb89
commit 59742c9526
24 changed files with 160 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/wrapEdge.tsx
+4 -4
View File
@@ -14,7 +14,7 @@ interface EdgeWrapperProps {
labelShowBg?: boolean;
labelBgStyle: CSSProperties;
className?: string;
onClick?: (evt: React.MouseEvent, edge: Edge) => void;
onClick?: (event: React.MouseEvent, edge: Edge) => void;
animated?: boolean;
selected: boolean;
elementsSelectable: boolean;
@@ -41,7 +41,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
data,
...rest
}: EdgeWrapperProps) => {
const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
if (isHidden) {
return null;
@@ -51,7 +51,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const edgeGroupStyle: CSSProperties = {
pointerEvents: elementsSelectable ? 'all' : 'none',
};
const onEdgeClick = (evt: React.MouseEvent<SVGGElement, MouseEvent>): void => {
const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
if (!elementsSelectable) {
return;
}
@@ -59,7 +59,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
setSelectedElements({ id, source, target });
if (onClick) {
onClick(evt, { id, source, target, type });
onClick(event, { id, source, target, type });
}
};
src/components/Handle/index.tsx
+5 -5
View File
@@ -18,11 +18,11 @@ const Handle = ({
onConnect,
}: HandleProps) => {
const nodeId = useContext(NodeIdContext) as ElementId;
const setPosition = useStoreActions((a) => a.setConnectionPosition);
const setConnectionNodeId = useStoreActions((a) => a.setConnectionNodeId);
const onConnectAction = useStoreState((s) => s.onConnect);
const onConnectStart = useStoreState((s) => s.onConnectStart);
const onConnectStop = useStoreState((s) => s.onConnectStop);
const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
const onConnectAction = useStoreState((state) => state.onConnect);
const onConnectStart = useStoreState((state) => state.onConnectStart);
const onConnectStop = useStoreState((state) => state.onConnectStop);
const onConnectExtended = (params: Connection) => {
if (onConnectAction) {
onConnectAction(params);
src/components/Nodes/wrapNode.tsx
+33 -33
View File
@@ -30,11 +30,11 @@ import {
import { noop } from '../../utils';
const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent);
const getMouseEvent = (event: MouseEvent | TouchEvent) =>
typeof TouchEvent !== 'undefined' && event instanceof TouchEvent ? event.touches[0] : (event as MouseEvent);
interface OnDragStartParams {
evt: MouseEvent | TouchEvent;
event: MouseEvent | TouchEvent;
id: ElementId;
type: string;
data: any;
@@ -44,11 +44,11 @@ interface OnDragStartParams {
transform: Transform;
position: XYPosition;
setSelectedElements: (elms: Elements | Node | Edge) => void;
onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (event: MouseEvent, node: Node) => void;
}
const onStart = ({
evt,
event,
onNodeDragStart,
id,
type,
@@ -60,11 +60,11 @@ const onStart = ({
setSelectedElements,
isSelectable,
}: OnDragStartParams): false | void => {
const startEvt = getMouseEvent(evt);
const startEvent = getMouseEvent(event);
const scaledClient: XYPosition = {
x: startEvt.clientX * (1 / transform[2]),
y: startEvt.clientY * (1 / transform[2]),
x: startEvent.clientX * (1 / transform[2]),
y: startEvent.clientY * (1 / transform[2]),
};
const offsetX = scaledClient.x - position.x - transform[0];
@@ -74,7 +74,7 @@ const onStart = ({
setOffset({ x: offsetX, y: offsetY });
if (onNodeDragStart) {
onNodeDragStart(evt as MouseEvent, node);
onNodeDragStart(event as MouseEvent, node);
}
if (selectNodesOnDrag && isSelectable) {
@@ -83,7 +83,7 @@ const onStart = ({
};
interface OnDragParams {
evt: MouseEvent | TouchEvent;
event: MouseEvent | TouchEvent;
setDragging: (isDragging: boolean) => void;
id: ElementId;
offset: XYPosition;
@@ -91,12 +91,12 @@ interface OnDragParams {
updateNodePos: (params: NodePosUpdate) => void;
}
const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => {
const dragEvt = getMouseEvent(evt);
const onDrag = ({ event, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => {
const dragEvent = getMouseEvent(event);
const scaledClient = {
x: dragEvt.clientX / transform[2],
y: dragEvt.clientY / transform[2],
x: dragEvent.clientX / transform[2],
y: dragEvent.clientY / transform[2],
};
setDragging(true);
@@ -110,7 +110,7 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr
};
interface OnDragStopParams {
evt: MouseEvent;
event: MouseEvent;
isDragging: boolean;
setDragging: (isDragging: boolean) => void;
id: ElementId;
@@ -120,12 +120,12 @@ interface OnDragStopParams {
selectNodesOnDrag: boolean;
isSelectable: boolean;
setSelectedElements: (elms: Elements | Node | Edge) => void;
onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
onClick?: (evt: MouseEvent, node: Node) => void;
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
onClick?: (event: MouseEvent, node: Node) => void;
}
const onStop = ({
evt,
event,
id,
type,
position,
@@ -150,14 +150,14 @@ const onStop = ({
}
if (onClick) {
return onClick(evt, node);
return onClick(event, node);
}
}
setDragging(false);
if (onNodeDragStop) {
onNodeDragStop(evt, node);
onNodeDragStop(event, node);
}
};
@@ -187,9 +187,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
targetPosition,
isHidden,
}: WrapNodeProps) => {
const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
const updateNodePos = useStoreActions((a) => a.updateNodePos);
const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
const nodeElement = useRef<HTMLDivElement>(null);
const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -210,7 +210,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return noop;
}
return (evt: MouseEvent) => onMouseEnter(evt, node);
return (event: MouseEvent) => onMouseEnter(event, node);
}, [onMouseEnter, isDragging]);
const onMouseMoveHandler = useMemo(() => {
@@ -218,7 +218,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return noop;
}
return (evt: MouseEvent) => onMouseMove(evt, node);
return (event: MouseEvent) => onMouseMove(event, node);
}, [onMouseMove, isDragging]);
const onMouseLeaveHandler = useMemo(() => {
@@ -226,7 +226,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return noop;
}
return (evt: MouseEvent) => onMouseLeave(evt, node);
return (event: MouseEvent) => onMouseLeave(event, node);
}, [onMouseLeave, isDragging]);
const onContextMenuHandler = useMemo(() => {
@@ -234,7 +234,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return noop;
}
return (evt: MouseEvent) => onContextMenu(evt, node);
return (event: MouseEvent) => onContextMenu(event, node);
}, [onContextMenu]);
const onSelectNodeHandler = useCallback(() => {
@@ -242,7 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
setSelectedElements({ id: node.id, type: node.type } as Node);
if (onClick) {
return (evt: MouseEvent) => onClick(evt, node);
return (event: MouseEvent) => onClick(event, node);
}
}
@@ -284,9 +284,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return (
<DraggableCore
onStart={(evt) =>
onStart={(event) =>
onStart({
evt: evt as MouseEvent,
event: event as MouseEvent,
selectNodesOnDrag,
isSelectable,
onNodeDragStart,
@@ -299,10 +299,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
setSelectedElements,
})
}
onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
onStop={(evt) =>
onDrag={(event) => onDrag({ event: event as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
onStop={(event) =>
onStop({
evt: evt as MouseEvent,
event: event as MouseEvent,
onNodeDragStop,
selectNodesOnDrag,
isSelectable,
src/components/NodesSelection/index.tsx
+8 -8
View File
@@ -46,10 +46,10 @@ export default () => {
return null;
}
const onStart = (evt: MouseEvent) => {
const onStart = (event: MouseEvent) => {
const scaledClient: XYPosition = {
x: evt.clientX / tScale,
y: evt.clientY / tScale,
x: event.clientX / tScale,
y: event.clientY / tScale,
};
const offsetX: number = scaledClient.x - selectedNodesBbox.x - tX;
const offsetY: number = scaledClient.y - selectedNodesBbox.y - tY;
@@ -67,10 +67,10 @@ export default () => {
}
};
const onDrag = (evt: MouseEvent) => {
const onDrag = (event: MouseEvent) => {
const scaledClient: XYPosition = {
x: evt.clientX / tScale,
y: evt.clientY / tScale,
x: event.clientX / tScale,
y: event.clientY / tScale,
};
if (selectedElements) {
@@ -95,8 +95,8 @@ export default () => {
<ReactDraggable
scale={tScale}
grid={grid}
onStart={(evt) => onStart(evt as MouseEvent)}
onDrag={(evt) => onDrag(evt as MouseEvent)}
onStart={(event) => onStart(event as MouseEvent)}
onDrag={(event) => onDrag(event as MouseEvent)}
>
<div
className="react-flow__nodesselection-rect"
src/components/UserSelection/index.tsx
+13 -13
View File
@@ -11,7 +11,7 @@ type UserSelectionProps = {
selectionKeyPressed: boolean;
};
function getMousePosition(evt: React.MouseEvent): XYPosition | void {
function getMousePosition(event: React.MouseEvent): XYPosition | void {
const reactFlowNode = document.querySelector('.react-flow');
if (!reactFlowNode) {
return;
@@ -20,13 +20,13 @@ function getMousePosition(evt: React.MouseEvent): XYPosition | void {
const containerBounds = reactFlowNode.getBoundingClientRect();
return {
x: evt.clientX - containerBounds.left,
y: evt.clientY - containerBounds.top,
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
};
}
const SelectionRect = () => {
const userSelectionRect = useStoreState((s) => s.userSelectionRect);
const userSelectionRect = useStoreState((state) => state.userSelectionRect);
if (!userSelectionRect.draw) {
return null;
@@ -45,12 +45,12 @@ const SelectionRect = () => {
};
export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
const selectionActive = useStoreState((s) => s.selectionActive);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const selectionActive = useStoreState((state) => state.selectionActive);
const elementsSelectable = useStoreState((state) => state.elementsSelectable);
const setUserSelection = useStoreActions((a) => a.setUserSelection);
const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
const unsetUserSelection = useStoreActions((a) => a.unsetUserSelection);
const setUserSelection = useStoreActions((actions) => actions.setUserSelection);
const updateUserSelection = useStoreActions((actions) => actions.updateUserSelection);
const unsetUserSelection = useStoreActions((actions) => actions.unsetUserSelection);
const renderUserSelectionPane = selectionActive || selectionKeyPressed;
useEffect(() => {
@@ -63,8 +63,8 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
return null;
}
const onMouseDown = (evt: React.MouseEvent): void => {
const mousePos = getMousePosition(evt);
const onMouseDown = (event: React.MouseEvent): void => {
const mousePos = getMousePosition(event);
if (!mousePos) {
return;
}
@@ -72,11 +72,11 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
setUserSelection(mousePos);
};
const onMouseMove = (evt: React.MouseEvent): void => {
const onMouseMove = (event: React.MouseEvent): void => {
if (!selectionKeyPressed || !selectionActive) {
return;
}
const mousePos = getMousePosition(evt);
const mousePos = getMousePosition(event);
if (!mousePos) {
return;