From 22fac97aeb0a4f57f294894735ff881ad15725cc Mon Sep 17 00:00:00 2001 From: karasuneo Date: Fri, 13 Sep 2024 20:06:16 +0900 Subject: [PATCH 1/5] =?UTF-8?q?add:=20=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=B3?= =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ConfirmButton/index.tsx | 19 +++++++++++++++ .../ConfirmButton/styles.module.scss | 17 +++++++++++++ .../components/FreeDrawingCanvas/index.tsx | 10 ++++---- .../features/FreeDrawing/hooks/useDrawing.ts | 6 ++--- src/app/draw/page.tsx | 24 +++++++++++++++++-- src/app/draw/styles.module.scss | 11 ++++++++- src/styles/colors.scss | 3 +++ 7 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 src/app/draw/features/FreeDrawing/components/ConfirmButton/index.tsx create mode 100644 src/app/draw/features/FreeDrawing/components/ConfirmButton/styles.module.scss diff --git a/src/app/draw/features/FreeDrawing/components/ConfirmButton/index.tsx b/src/app/draw/features/FreeDrawing/components/ConfirmButton/index.tsx new file mode 100644 index 0000000..2916f28 --- /dev/null +++ b/src/app/draw/features/FreeDrawing/components/ConfirmButton/index.tsx @@ -0,0 +1,19 @@ +import { ReactElement } from 'react'; + +import styles from './styles.module.scss'; + +type Props = { + disabled: boolean; + children: string; + onClick: () => void; +}; + +function ConfirmButton({ disabled, children, onClick }: Props): ReactElement { + return ( + + ); +} + +export default ConfirmButton; diff --git a/src/app/draw/features/FreeDrawing/components/ConfirmButton/styles.module.scss b/src/app/draw/features/FreeDrawing/components/ConfirmButton/styles.module.scss new file mode 100644 index 0000000..3bc19a5 --- /dev/null +++ b/src/app/draw/features/FreeDrawing/components/ConfirmButton/styles.module.scss @@ -0,0 +1,17 @@ +.button { + border: 1px solid $button-border-color; + border-radius: $radius-md; + color: $text-color; + padding: $sm $xl; + cursor: pointer; + + &:hover { + background-color: $button-hover-background-color; + } + + &:disabled { + color: lighten($text-color, 30%); + cursor: not-allowed; + opacity: 0.6; + } +} diff --git a/src/app/draw/features/FreeDrawing/components/FreeDrawingCanvas/index.tsx b/src/app/draw/features/FreeDrawing/components/FreeDrawingCanvas/index.tsx index f619814..2b9eecd 100644 --- a/src/app/draw/features/FreeDrawing/components/FreeDrawingCanvas/index.tsx +++ b/src/app/draw/features/FreeDrawing/components/FreeDrawingCanvas/index.tsx @@ -1,10 +1,12 @@ -import { ReactElement } from 'react'; -import { useDrawing } from '../../hooks/useDrawing'; +import { ReactElement, RefObject } from 'react'; + import styles from './styles.module.scss'; -function FreeDrawingCanvas(): ReactElement { - const { canvasRef } = useDrawing(); +type Props = { + canvasRef: RefObject; +}; +function FreeDrawingCanvas({ canvasRef }: Props): ReactElement { return ; } diff --git a/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts b/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts index 0d58482..36a9912 100644 --- a/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts +++ b/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import paper from 'paper'; import { curveDraw } from '../functions/curveDraw'; import { splitCurve } from '../functions/curveSprit'; @@ -6,6 +6,7 @@ import { createInterval } from '../functions/intervalCreate'; export function useDrawing() { const canvasRef = useRef(null); + const [isCurveDrawn, setIsCurveDrawn] = useState(false); useEffect(() => { const setupCanvas = async () => { @@ -24,6 +25,5 @@ export function useDrawing() { paper.project.clear(); }; }); - - return { canvasRef }; + return { canvasRef, isCurveDrawn }; } diff --git a/src/app/draw/page.tsx b/src/app/draw/page.tsx index 1ccc4e1..17164a2 100644 --- a/src/app/draw/page.tsx +++ b/src/app/draw/page.tsx @@ -4,16 +4,36 @@ import { ReactElement } from 'react'; import FreeDrawingCanvas from './features/FreeDrawing/components/FreeDrawingCanvas'; import styles from './styles.module.scss'; import DrawingText from './features/FreeDrawing/components/DrawingText'; +import { useDrawing } from './features/FreeDrawing/hooks/useDrawing'; +import ConfirmButton from './features/FreeDrawing/components/ConfirmButton'; function DrawPage(): ReactElement { + const { canvasRef, isCurveDrawn } = useDrawing(); + + const onClickComplete = () => { + console.log('Clicked'); + }; + + const onClickRewrite = () => { + console.log('Clicked'); + }; + return ( <>
- + +
+
+ + NO + + + OK +
- +
diff --git a/src/app/draw/styles.module.scss b/src/app/draw/styles.module.scss index 42191fa..7eafa88 100644 --- a/src/app/draw/styles.module.scss +++ b/src/app/draw/styles.module.scss @@ -4,13 +4,22 @@ height: 100vh; padding: $md; gap: $md; + box-sizing: border-box; .freeDrawingCanvasContainer { width: 100%; - height: 100%; + height: 95%; + } + + .confirmButtonContainer { + display: flex; + justify-content: center; + align-items: center; + gap: $xl; } .drawingTextContainer { + height: 5%; text-align: center; } } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 21b3425..59d9313 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -7,6 +7,9 @@ $background-color: #ffffff; $bar-background-color: #eeeeee; $shadow-color: #333333; +$button-border-color: #d9d9d9; +$button-hover-background-color: #f9f9f9; + $on-primary-color: #ffffff; $on-primary-light-color: #000000; $on-text-color: #ffffff; From 5bcb707442e0fe18b00616a81bb36096ebc9b663 Mon Sep 17 00:00:00 2001 From: karasuneo Date: Sat, 14 Sep 2024 12:41:06 +0900 Subject: [PATCH 2/5] =?UTF-8?q?delete:=20main=E3=81=A8=E3=81=AE=E3=83=9E?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E6=99=82=E3=81=AB=E4=B8=8D=E8=A6=81=E3=81=AB?= =?UTF-8?q?=E3=81=AA=E3=81=A3=E3=81=9F=E3=83=95=E3=82=A1=E3=82=AA=E3=83=AB?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../draw/features/FreeDrawing/dto/curve.d.ts | 9 --- .../FreeDrawing/functions/curveDraw.ts | 58 ------------------- .../features/FreeDrawing/functions/drawing.ts | 28 --------- 3 files changed, 95 deletions(-) delete mode 100644 src/app/draw/features/FreeDrawing/dto/curve.d.ts delete mode 100644 src/app/draw/features/FreeDrawing/functions/curveDraw.ts delete mode 100644 src/app/draw/features/FreeDrawing/functions/drawing.ts diff --git a/src/app/draw/features/FreeDrawing/dto/curve.d.ts b/src/app/draw/features/FreeDrawing/dto/curve.d.ts deleted file mode 100644 index ed0d7d4..0000000 --- a/src/app/draw/features/FreeDrawing/dto/curve.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type Coordinate = { - x: number; - y: number; -}; - -export type CurveInformationDto = { - coordinates: Coordinate[]; - length: number; -}; diff --git a/src/app/draw/features/FreeDrawing/functions/curveDraw.ts b/src/app/draw/features/FreeDrawing/functions/curveDraw.ts deleted file mode 100644 index e32c94f..0000000 --- a/src/app/draw/features/FreeDrawing/functions/curveDraw.ts +++ /dev/null @@ -1,58 +0,0 @@ -import paper from 'paper'; -import styles from '@/styles/colors.module.scss'; -import { Coordinate, CurveInformationDto } from '../dto/curve'; - -function handleMouseDown(event: paper.ToolEvent): paper.Path { - const newPath = new paper.Path(); - newPath.strokeColor = new paper.Color(styles.primaryColor); - newPath.strokeWidth = 2; - newPath.add(event.point); - return newPath; -} - -function handleMouseDrag(event: paper.ToolEvent, path: paper.Path | null) { - if (path) { - path.add(event.point); - } -} - -async function handleMouseUp(path: paper.Path | null): Promise { - let curveInformation: CurveInformationDto = { coordinates: [], length: 0 }; - - if (path) { - path.smooth(); - const coordinates: Coordinate[] = path.segments.map((segment: paper.Segment) => ({ - x: segment.point.x, - y: segment.point.y, - })); - const length = path.length; - - curveInformation = { coordinates, length }; - } - - return curveInformation; -} - -export async function curveDraw(): Promise { - let path: paper.Path | null = null; - let curveInformation: CurveInformationDto = { coordinates: [], length: 0 }; - - return new Promise((resolve) => { - const tool = new paper.Tool(); - - // イベントハンドラの呼び出し - tool.onMouseDown = (event: paper.ToolEvent) => { - path = handleMouseDown(event); - }; - - tool.onMouseDrag = (event: paper.ToolEvent) => { - handleMouseDrag(event, path); - }; - - tool.onMouseUp = async () => { - curveInformation = await handleMouseUp(path); - - resolve(curveInformation); - }; - }); -} diff --git a/src/app/draw/features/FreeDrawing/functions/drawing.ts b/src/app/draw/features/FreeDrawing/functions/drawing.ts deleted file mode 100644 index 62d8ab2..0000000 --- a/src/app/draw/features/FreeDrawing/functions/drawing.ts +++ /dev/null @@ -1,28 +0,0 @@ -import paper from 'paper'; - -export function setupDrawingTool() { - let path: paper.Path | null = null; - - const tool = new paper.Tool(); - - tool.onMouseDown = (event: paper.ToolEvent) => { - path = new paper.Path(); - path.strokeColor = new paper.Color('#4597f8'); - path.strokeWidth = 2; - path.add(event.point); - }; - - tool.onMouseDrag = (event: paper.ToolEvent) => { - if (path) { - path.add(event.point); - } - }; - - tool.onMouseUp = () => { - if (path) { - path.smooth(); - } - }; - - return tool; -} From bfaba4a95b860ea51adc11c654e6f449a96b0f56 Mon Sep 17 00:00:00 2001 From: karasuneo Date: Sat, 14 Sep 2024 12:41:36 +0900 Subject: [PATCH 3/5] =?UTF-8?q?rename:=20dto=E2=86=92types=E3=83=87?= =?UTF-8?q?=E3=82=A3=E3=83=AC=E3=82=AF=E3=83=88=E3=83=AA=E5=90=8D=E3=81=AE?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/draw/features/FreeDrawing/functions/curveSprit.ts | 2 +- src/app/draw/features/FreeDrawing/types/curve.d.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 src/app/draw/features/FreeDrawing/types/curve.d.ts diff --git a/src/app/draw/features/FreeDrawing/functions/curveSprit.ts b/src/app/draw/features/FreeDrawing/functions/curveSprit.ts index 5c61a01..20e5b9a 100644 --- a/src/app/draw/features/FreeDrawing/functions/curveSprit.ts +++ b/src/app/draw/features/FreeDrawing/functions/curveSprit.ts @@ -1,4 +1,4 @@ -import { Coordinate } from '../dto/curve'; +import { Coordinate } from '../types/curve'; export function splitCurve(coordinates: Coordinate[], totalBeatCount: number): Coordinate[] { const resultCurve = Array.from( diff --git a/src/app/draw/features/FreeDrawing/types/curve.d.ts b/src/app/draw/features/FreeDrawing/types/curve.d.ts new file mode 100644 index 0000000..8a8ebd6 --- /dev/null +++ b/src/app/draw/features/FreeDrawing/types/curve.d.ts @@ -0,0 +1,4 @@ +export type Coordinate = { + x: number; + y: number; +}; From dac126128f97bfaef4b97b9a925a402177a7e0f7 Mon Sep 17 00:00:00 2001 From: karasuneo Date: Sat, 14 Sep 2024 12:43:32 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E3=83=9E=E3=83=BC=E3=82=AF=E3=82=A2?= =?UTF-8?q?=E3=83=83=E3=83=97=E5=8F=8A=E3=81=B3=E3=82=B9=E3=82=BF=E3=82=A4?= =?UTF-8?q?=E3=83=AB=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/draw/page.tsx | 21 +++++++-------------- src/app/draw/styles.module.scss | 3 +-- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/app/draw/page.tsx b/src/app/draw/page.tsx index 17164a2..010404b 100644 --- a/src/app/draw/page.tsx +++ b/src/app/draw/page.tsx @@ -11,30 +11,23 @@ function DrawPage(): ReactElement { const { canvasRef, isCurveDrawn } = useDrawing(); const onClickComplete = () => { - console.log('Clicked'); - }; - - const onClickRewrite = () => { - console.log('Clicked'); + console.log('Complete'); }; return ( <>
-
+
-
-
- - NO - + +
OK -
-
+ +
-
+
); diff --git a/src/app/draw/styles.module.scss b/src/app/draw/styles.module.scss index 7eafa88..fc5ec12 100644 --- a/src/app/draw/styles.module.scss +++ b/src/app/draw/styles.module.scss @@ -8,7 +8,7 @@ .freeDrawingCanvasContainer { width: 100%; - height: 95%; + height: 90%; } .confirmButtonContainer { @@ -19,7 +19,6 @@ } .drawingTextContainer { - height: 5%; text-align: center; } } From 20115abe3f9e2f3b35345b37d41a8e40daebcbf9 Mon Sep 17 00:00:00 2001 From: karasuneo Date: Sat, 14 Sep 2024 12:43:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E6=9B=B2=E7=B7=9A=E3=82=92?= =?UTF-8?q?=E4=B8=80=E3=81=A4=E3=81=97=E3=81=8B=E6=9B=B8=E3=81=91=E3=81=AA?= =?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FreeDrawing/functions/intervalCreate.ts | 2 +- .../features/FreeDrawing/hooks/useDrawing.ts | 49 +++++++++++++++++-- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/app/draw/features/FreeDrawing/functions/intervalCreate.ts b/src/app/draw/features/FreeDrawing/functions/intervalCreate.ts index 7f61cdc..cad074a 100644 --- a/src/app/draw/features/FreeDrawing/functions/intervalCreate.ts +++ b/src/app/draw/features/FreeDrawing/functions/intervalCreate.ts @@ -1,5 +1,5 @@ import { Interval, ScaleInterval } from '@/types'; -import { Coordinate } from '../dto/curve'; +import { Coordinate } from '../types/curve'; import { HALF_NOTE, SCALE_NUM, WHOLE_NOTE } from '../const'; export function createInterval(curveCoordinates: Coordinate[]): Interval[] { diff --git a/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts b/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts index fe4f7b6..38b484f 100644 --- a/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts +++ b/src/app/draw/features/FreeDrawing/hooks/useDrawing.ts @@ -1,10 +1,11 @@ import { useEffect, useRef, useState } from 'react'; import paper from 'paper'; -import { curveDraw } from '../functions/curveDraw'; import { splitCurve } from '../functions/curveSprit'; import { createInterval } from '../functions/intervalCreate'; import { useAtomValue } from 'jotai'; import { barCountAtom, beatCountAtom } from '@/stores/settings'; +import styles from '@/styles/colors.module.scss'; +import { Coordinate } from '../types/curve'; export function useDrawing() { const barCount = useAtomValue(barCountAtom); @@ -12,6 +13,7 @@ export function useDrawing() { const totalBeatCount = barCount * beatCount; const canvasRef = useRef(null); + const [isCurveDrawn, setIsCurveDrawn] = useState(false); useEffect(() => { @@ -19,9 +21,45 @@ export function useDrawing() { const canvas = canvasRef.current; if (canvas) { paper.setup(canvas); - const curveInformation = await curveDraw(); - const curveCoordinates = splitCurve(curveInformation.coordinates, totalBeatCount); - const interval = createInterval(curveCoordinates); + + const tool = new paper.Tool(); + let path: paper.Path | null = null; + + tool.onMouseDown = (event: paper.ToolEvent) => { + if (paper.project.activeLayer.hasChildren()) { + paper.project.activeLayer.removeChildren(); + setIsCurveDrawn(false); + } + + path = new paper.Path(); + path.strokeColor = new paper.Color(styles.primaryColor); + path.strokeWidth = 2; + path.add(event.point); + + setIsCurveDrawn(false); + }; + + tool.onMouseDrag = (event: paper.ToolEvent) => { + if (path) { + path.add(event.point); + } + }; + + tool.onMouseUp = () => { + if (path) { + path.smooth(); + + const coordinates = path.segments.map((segment) => ({ + x: segment.point.x, + y: segment.point.y, + })) as Coordinate[]; + + const curveCoordinates = splitCurve(coordinates, totalBeatCount); + const interval = createInterval(curveCoordinates); + + setIsCurveDrawn(true); + } + }; } }; @@ -30,6 +68,7 @@ export function useDrawing() { return () => { paper.project.clear(); }; - }); + }, []); + return { canvasRef, isCurveDrawn }; }