-
Notifications
You must be signed in to change notification settings - Fork 691
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
199 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
import { localPoint } from '@vx/event'; | ||
import React from 'react'; | ||
|
||
type MouseOrTouchEvent = React.MouseEvent | React.TouchEvent; | ||
|
||
export type DragProps = { | ||
/** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */ | ||
children: (args: ChildrenArgs) => React.ReactNode; | ||
/** Width of the drag container. */ | ||
width: number; | ||
/** Height of the drag container. */ | ||
height: number; | ||
/** Whether to render an invisible rect below children to capture the drag area as defined by width and height. */ | ||
captureDragArea?: boolean; | ||
/** Whether to reset drag state upon the start of a new drag. */ | ||
resetOnStart?: boolean; | ||
/** Optional callback invoked upon drag end. */ | ||
onDragEnd?: (args: HandlerArgs) => void; | ||
/** Optional callback invoked upon drag movement. */ | ||
onDragMove?: (args: HandlerArgs) => void; | ||
/** Optional callback invoked upon drag start. */ | ||
onDragStart?: (args: HandlerArgs) => void; | ||
}; | ||
|
||
type DragState = { | ||
x: number | undefined; | ||
y: number | undefined; | ||
dx: number; | ||
dy: number; | ||
isDragging: boolean; | ||
}; | ||
|
||
type HandlerArgs = DragState & { event: MouseOrTouchEvent }; | ||
|
||
type ChildrenArgs = DragState & { | ||
dragEnd: (event: MouseOrTouchEvent) => void; | ||
dragMove: (event: MouseOrTouchEvent) => void; | ||
dragStart: (event: MouseOrTouchEvent) => void; | ||
}; | ||
|
||
export default class Drag extends React.Component<DragProps, DragState> { | ||
static defaultProps = { | ||
captureDragArea: true, | ||
resetOnStart: false, | ||
}; | ||
|
||
state = { | ||
x: undefined, | ||
y: undefined, | ||
dx: 0, | ||
dy: 0, | ||
isDragging: false, | ||
}; | ||
|
||
handleDragStart = (event: MouseOrTouchEvent) => { | ||
const { onDragStart, resetOnStart } = this.props; | ||
event.persist(); | ||
|
||
this.setState( | ||
({ dx, dy }) => { | ||
const point = localPoint(event) || { x: 0, y: 0 }; | ||
return { | ||
isDragging: true, | ||
dx: resetOnStart ? 0 : dx, | ||
dy: resetOnStart ? 0 : dy, | ||
x: resetOnStart ? point.x : -dx + point.x, | ||
y: resetOnStart ? point.y : -dy + point.y, | ||
}; | ||
}, | ||
onDragStart && | ||
(() => { | ||
onDragStart({ ...this.state, event }); | ||
}), | ||
); | ||
}; | ||
|
||
handleDragMove = (event: MouseOrTouchEvent) => { | ||
const { onDragMove } = this.props; | ||
event.persist(); | ||
|
||
this.setState( | ||
({ x, y, isDragging }) => { | ||
const point = localPoint(event) || { x: 0, y: 0 }; | ||
return isDragging | ||
? { | ||
isDragging: true, | ||
dx: -((x || 0) - point.x), | ||
dy: -((y || 0) - point.y), | ||
} | ||
: null; | ||
}, | ||
onDragMove && | ||
(() => { | ||
if (this.state.isDragging) onDragMove({ ...this.state, event }); | ||
}), | ||
); | ||
}; | ||
|
||
handleDragEnd = (event: MouseOrTouchEvent) => { | ||
const { onDragEnd } = this.props; | ||
event.persist(); | ||
|
||
this.setState( | ||
{ isDragging: false }, | ||
onDragEnd && | ||
(() => { | ||
onDragEnd({ ...this.state, event }); | ||
}), | ||
); | ||
}; | ||
|
||
render() { | ||
const { x, y, dx, dy, isDragging } = this.state; | ||
const { children, width, height, captureDragArea } = this.props; | ||
return ( | ||
<> | ||
{isDragging && captureDragArea && ( | ||
<rect | ||
width={width} | ||
height={height} | ||
onMouseMove={this.handleDragMove} | ||
onMouseUp={this.handleDragEnd} | ||
fill="transparent" | ||
/> | ||
)} | ||
{children({ | ||
x, | ||
y, | ||
dx, | ||
dy, | ||
isDragging, | ||
dragEnd: this.handleDragEnd, | ||
dragMove: this.handleDragMove, | ||
dragStart: this.handleDragStart, | ||
})} | ||
</> | ||
); | ||
} | ||
} |
File renamed without changes.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** Given at an array of items, moves the item at the specified index to the end of the array. */ | ||
export default function raise<T>(items: T[], raiseIndex: number) { | ||
const array = [...items]; | ||
const lastIndex = array.length - 1; | ||
const [raiseItem] = array.splice(raiseIndex, 1); | ||
array.splice(lastIndex, 0, raiseItem); | ||
return array; | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.