ysandler/textualize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: draw area on shift

Browse Source
This commit is contained in:
Joshua Shoemaker 2023-05-22 21:41:04 -05:00
parent a323a387e5
commit 51c5141f99
2 changed files with 67 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/components/workspace/DocumentRenderer.tsx
View File

@ -38,7 +38,7 @@ const DocumentRenderer = () => {
let downClickX = 0 let downClickX = 0
let downClickY = 0 let downClickY = 0
let isMouseDown = false let isDrawing = false
const applyCanvasSizes = (size: { width: number, height: number }) => { const applyCanvasSizes = (size: { width: number, height: number }) => {
const documentCanvasInstance = documentCanvas.current const documentCanvasInstance = documentCanvas.current
@ -175,16 +175,36 @@ const DocumentRenderer = () => {
}) })
} }
const handleMouseDrawArea = (x: number, y: number) => {
const drawingCanvasInstance = drawingCanvas.current
if (!drawingCanvasInstance) return
const context = drawingCanvasInstance.getContext('2d')
if (!context) return
context.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
context.beginPath()
const width = x - downClickX
const height = y - downClickY
context.rect(downClickX, downClickY, width, height)
context.strokeStyle = '#000'
context.lineWidth = 2
context.stroke()
}
const handleMouseDown = (e: React.MouseEvent) => { const handleMouseDown = (e: React.MouseEvent) => {
console.log(e)
if (e.nativeEvent.shiftKey) {
const drawingCanvasInstance = drawingCanvas.current const drawingCanvasInstance = drawingCanvas.current
if (!drawingCanvasInstance) return if (!drawingCanvasInstance) return
downClickX = e.nativeEvent.offsetX downClickX = e.nativeEvent.offsetX
downClickY = e.nativeEvent.offsetY downClickY = e.nativeEvent.offsetY
isMouseDown = true isDrawing = true
}
} }
const handleMouseUp = async (e: React.MouseEvent) => { const handleMouseUp = async (e: React.MouseEvent) => {
if (isDrawing) {
const drawingCanvasInstance = drawingCanvas.current const drawingCanvasInstance = drawingCanvas.current
if (!drawingCanvasInstance) return if (!drawingCanvasInstance) return
@ -217,31 +237,18 @@ const DocumentRenderer = () => {
const context = drawingCanvasInstance.getContext('2d') const context = drawingCanvasInstance.getContext('2d')
context?.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height) context?.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
isMouseDown = false isDrawing = false
downClickX = 0 downClickX = 0
downClickY = 0 downClickY = 0
} }
}
const handleMouseMove = (e: React.MouseEvent) => { const handleMouseMove = (e: React.MouseEvent) => {
let mouseX = e.nativeEvent.offsetX let mouseX = e.nativeEvent.offsetX
let mouseY = e.nativeEvent.offsetY let mouseY = e.nativeEvent.offsetY
if (!isMouseDown) handleHoverOverArea(e) if (isDrawing) handleMouseDrawArea(mouseX, mouseY)
else { else handleHoverOverArea(e)
const drawingCanvasInstance = drawingCanvas.current
if (!drawingCanvasInstance) return
const context = drawingCanvasInstance.getContext('2d')
if (!context) return
context.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
context.beginPath()
const width = mouseX - downClickX
const height = mouseY - downClickY
context.rect(downClickX, downClickY, width, height)
context.strokeStyle = '#000'
context.lineWidth = 2
context.stroke()
}
} }
const handleWheelEvent = (e: WheelEvent<HTMLDivElement>) => { const handleWheelEvent = (e: WheelEvent<HTMLDivElement>) => {
@ -257,7 +264,7 @@ const DocumentRenderer = () => {
requestUpdateProcessedWordById(wordId, newWordValue) requestUpdateProcessedWordById(wordId, newWordValue)
.then(res => { .then(res => {
console.log('res', res) console.log('res', res)
getProcessedAreaById(hoverOverAreaId|| '').then(response => { getProcessedAreaById(hoverOverAreaId || '').then(response => {
setHoveredProcessedArea(response) setHoveredProcessedArea(response)
}) })
}) })

1
frontend/context/Project/provider.tsx
View File

@ -186,7 +186,6 @@ export function ProjectProvider({ children, projectProps }: Props) {
const requestUpdateProcessedWordById = async (wordId: string, newTextValue: string) => { const requestUpdateProcessedWordById = async (wordId: string, newTextValue: string) => {
const successfulResponse = await RequestUpdateProcessedWordById(wordId, newTextValue) const successfulResponse = await RequestUpdateProcessedWordById(wordId, newTextValue)
// if (successfulResponse) await updateDocuments()
return successfulResponse return successfulResponse
} }