Created
January 3, 2020 18:10
-
-
Save alexanderson1993/55d059a529779f12876bdcb3b4abdce6 to your computer and use it in GitHub Desktop.
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
import styled from "@emotion/styled"; | |
const DragContainer = styled.div` | |
height: 460px; | |
max-height: 80vh; | |
width: 100%; | |
position: relative; | |
overflow: hidden; | |
`; |
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
import styled from "@emotion/styled"; | |
const DragSelection = styled.div` | |
position: absolute; | |
background: rgba(0, 142, 226, 0.1); | |
border: 1px solid #008ee2; | |
width: 20px; | |
height: 20px; | |
transform: translate(${({ x }) => x}px, ${({ y }) => y}px); | |
width: ${({ width }) => width}px; | |
height: ${({ height }) => height}px; | |
left: 0; | |
top: 0; | |
`; | |
export default DragSelection |
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
import React from 'react'; | |
import useDragSelect from './useDragSelect.js' | |
import DragSelection from './DragSelection.js' | |
import DragContainer from './DragContainer.js' | |
const SelectableContainer = ({ children }) => { | |
const [ref, dragPosition] = useDragSelect(); | |
return ( | |
<PlotAreaStyle ref={ref} id="plotArea"> | |
{children} | |
{dragPosition && <DragSelection {...dragPosition}></DragSelection>} | |
</PlotAreaStyle> | |
); | |
}; | |
export default SelectableContainer |
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
import React from "react"; | |
import useMeasure from "./useMeasure"; | |
import useEventListener from "./useEventListener"; | |
export default function useDragSelect() { | |
const [dragPosition, setDragPosition] = React.useState(null); | |
const [initialPosition, setInitialPosition] = React.useState(null); | |
const [ref, dimensions] = useMeasure(); | |
useEventListener("mousedown", e => { | |
if (e.target.id === "plotArea") { | |
setInitialPosition({ | |
x: e.clientX - dimensions.left, | |
y: e.clientY - dimensions.top | |
}); | |
setDragPosition({ | |
x: e.clientX - dimensions.left, | |
y: e.clientY - dimensions.top, | |
width: 0, | |
height: 0 | |
}); | |
} | |
}); | |
useEventListener("mouseup", () => { | |
setDragPosition(null); | |
setInitialPosition(null); | |
}); | |
useEventListener("mousemove", e => { | |
if (dragPosition) { | |
const position = { | |
x: | |
e.clientX - dimensions.left < initialPosition.x | |
? e.clientX - dimensions.left | |
: initialPosition.x, | |
y: | |
e.clientY - dimensions.top < initialPosition.y | |
? e.clientY - dimensions.top | |
: initialPosition.y, | |
width: Math.abs(e.clientX - initialPosition.x - dimensions.left), | |
height: Math.abs(e.clientY - initialPosition.y - dimensions.top) | |
}; | |
setDragPosition(position); | |
} | |
}); | |
return [ref, dragPosition]; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment