Skip to content

Commit

Permalink
Each line now has isolated thickness and color
Browse files Browse the repository at this point in the history
  • Loading branch information
bgonp committed Mar 18, 2021
1 parent 1387c03 commit 466007e
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 35 deletions.
11 changes: 9 additions & 2 deletions src/components/DrawArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,20 @@ const DrawArea: FC<Props> = ({
thickness = 10,
children,
}) => {
const { isDrawing, lines, addPoint, finishLine, reset, undo } = useDrawArea()
const {
isDrawing,
lines,
addPoint,
finishLine,
reset,
undo,
} = useDrawArea({ color, thickness })

const content = hidden
? null
: (
<div className={className}>
<Drawed color={color} lines={lines} thickness={thickness} />
<Drawed lines={lines} />
{disabled || <Drawable addPoint={addPoint} finishLine={finishLine} />}
</div>
)
Expand Down
16 changes: 7 additions & 9 deletions src/components/Drawed.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
import React, { CSSProperties, FC } from 'react'

import { Lines, Line } from 'types'
import { Lines, Point } from 'types'

type Props = {
color: string
lines: Lines
thickness: number
}

const style: CSSProperties = {
height: '100%',
width: '100%',
}

const lineToString = (line: Line): string =>
'M ' + line.map(point => `${point.x} ${point.y}`).join(' L ')
const pointsToString = (points: Point[]): string =>
'M ' + points.map(point => `${point.x} ${point.y}`).join(' L ')

const Drawed: FC<Props> = ({ color, lines, thickness }) => (
const Drawed: FC<Props> = ({ lines }) => (
<svg style={style}>
{lines.map((line, index) =>
{lines.map(({ color, points, thickness }, index) =>
<path
key={index}
d={lineToString(line)}
fill='none'
d={pointsToString(points)}
fill="none"
strokeLinecap="round"
stroke={color}
strokeWidth={thickness}
Expand Down
35 changes: 20 additions & 15 deletions src/hooks/useDrawArea.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { useCallback, useMemo, useState } from 'react'

import { Line, Lines, Point } from 'types'
import { Lines, Point } from 'types'

type UseDrawAreaParams = {
color: string
thickness: number
}

type UseDrawAreaType = {
isDrawing: boolean
Expand All @@ -11,32 +16,32 @@ type UseDrawAreaType = {
undo: () => void
}

const useDrawArea = (): UseDrawAreaType => {
const useDrawArea = ({ color, thickness }: UseDrawAreaParams): UseDrawAreaType => {
const [lines, setLines] = useState<Lines>([])
const [newLine, setNewLine] = useState<Line>([])
const [points, setPoints] = useState<Point[]>([])

const allLines: Lines = useMemo(
() => newLine.length === 0 ? lines : [...lines, newLine],
[lines, newLine]
() => points.length === 0 ? lines : [...lines, { color, points, thickness }],
[color, thickness, lines, points]
)

const isDrawing: boolean = newLine.length > 0
const isDrawing: boolean = points.length > 0

const addPoint = useCallback(
(newPoint: Point) => setNewLine([...newLine, newPoint]),
[newLine]
const addPoint: (point: Point) => void = useCallback(
(newPoint: Point) => setPoints([...points, newPoint]),
[points]
)

const finishLine = useCallback(
const finishLine: () => void = useCallback(
() => {
if (newLine.length > 1) setLines(allLines)
setNewLine([])
}, [allLines, newLine]
if (points.length > 1) setLines(allLines)
setPoints([])
}, [allLines, points]
)

const reset = useCallback(() => setLines([]), [])
const reset: () => void = useCallback(() => setLines([]), [])

const undo = useCallback(() => setLines(lines.slice(0, -1)), [lines])
const undo: () => void = useCallback(() => setLines(lines.slice(0, -1)), [lines])

return {
isDrawing,
Expand Down
16 changes: 8 additions & 8 deletions src/hooks/useDrawable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import { RefObject, MouseEvent, TouchEvent, useState } from 'react'

import { Point } from 'types'

type UseDrawableType = {
startDrawing: (event: MouseEvent | TouchEvent) => void
keepDrawing: (event: MouseEvent | TouchEvent) => void
endDrawing: () => void
}

type UseDrawableProps = {
ref: RefObject<HTMLDivElement>
addPoint: (point: Point) => void
finishLine: () => void
}

type UseDrawableType = {
startDrawing: (event: MouseEvent | TouchEvent) => void
keepDrawing: (event: MouseEvent | TouchEvent) => void
endDrawing: () => void
}

const getCoordinates = (event: MouseEvent | TouchEvent): [number, number] | null => {
if (event instanceof MouseEvent && event.button === 0) {
if ('button' in event && event.button === 0) {
return [event.clientX, event.clientY]
} else if (event instanceof TouchEvent && event.touches.length > 0) {
} else if ('touches' in event && event.touches.length > 0) {
return [event.touches[0].clientX, event.touches[0].clientY]
}
return null
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type Point = { x: number, y: number }
export type Line = Point[]
export type Line = { color: string, points: Point[], thickness: number }
export type Lines = Line[]

0 comments on commit 466007e

Please sign in to comment.