Merge pull request #19 from Doer-org/client-create-queue

Client create queue
Doer-org · Nov 4, 2023 · 6ee04ba · 6ee04ba
2 parents 6f1ac6c + 3250650
commit 6ee04ba
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 63 deletions.
diff --git a/client/src/app/draw/components/DrawEditor.tsx b/client/src/app/draw/components/DrawEditor.tsx
@@ -22,13 +22,12 @@ export const DrawEditor: FC<TDrawEditorProps> = ({ pointsState, stageRef }) => {
 
   // クリックしたときに現在位置を入れている
   const pushPoint = async () => {
-    console.log("onPushPoint");
     await new Promise((resolve, reject) => {
       navigator.geolocation.getCurrentPosition(resolve, reject);
-    }).then((data) => {
-      pointsState.setState([
-        ...pointsState.state,
-        toAppropriatePosition({ start, current: data as GeolocationPosition }),
+    }).then((position) => {
+      pointsState.setState((point) => [
+        ...point,
+        toAppropriatePosition({ start, current: position as GeolocationPosition }),
       ]);
     });
   };
@@ -37,7 +36,7 @@ export const DrawEditor: FC<TDrawEditorProps> = ({ pointsState, stageRef }) => {
     <>
       {/* 初期値が入るまではviewを表示しない。TODO: 別コンポーネントに分けたい */}
       {!start[0] && (
-        <div className="w-screen h-screen bg-white absolute top-0 flex items-center justify-center">
+        <div className="w-screen h-screen bg-white absolute top-0 left-0 flex items-center justify-center">
           現在位置の取得中...
         </div>
       )}

diff --git a/client/src/app/draw/components/KonvasEditor.tsx b/client/src/app/draw/components/KonvasEditor.tsx
@@ -12,7 +12,6 @@ type TKonvasEditorProps = {
 
 const KonvasEditor: FC<TKonvasEditorProps> = ({ pointsState, stageRef }) => {
   Konva.hitOnDragEnabled = true;
-  // const stageRef = useRef<Konva.Stage>(null);
   const layerRef = useRef<Konva.Layer>(null);
   const lineRef = useRef<Konva.Line>(null);
 
@@ -21,57 +20,42 @@ const KonvasEditor: FC<TKonvasEditorProps> = ({ pointsState, stageRef }) => {
 
   let lastCenter: TPointer | null = null;
   let lastDist = 0;
+
   const onTouchMove: KonvaNodeEvents["onTouchMove"] = (e) => {
     e.evt.preventDefault();
     let touch1 = e.evt.touches[0];
     let touch2 = e.evt.touches[1];
+
     const stage = stageRef.current;
+
     if (stage !== null) {
       if (touch1 && touch2) {
-        if (stage.isDragging()) {
-          stage.stopDrag();
-        }
+        if (stage.isDragging()) stage.stopDrag();
 
-        let p1 = {
-          x: touch1.clientX,
-          y: touch1.clientY,
-        };
-        let p2 = {
-          x: touch2.clientX,
-          y: touch2.clientY,
-        };
+        let p1 = { x: touch1.clientX, y: touch1.clientY };
+        let p2 = { x: touch2.clientX, y: touch2.clientY };
 
         if (!lastCenter) {
           lastCenter = getCenter(p1, p2);
           return;
         }
-        let newCenter = getCenter(p1, p2);
 
+        let newCenter = getCenter(p1, p2);
         let dist = getDistance(p1, p2);
 
-        if (!lastDist) {
-          lastDist = dist;
-        }
+        if (!lastDist) lastDist = dist;
 
-        // local coordinates of center point
-        let pointTo = {
-          x: (newCenter.x - stage.x()) / stage.scaleX(),
-          y: (newCenter.y - stage.y()) / stage.scaleX(),
-        };
+        let pointTo = { x: (newCenter.x - stage.x()) / stage.scaleX(), y: (newCenter.y - stage.y()) / stage.scaleX() };
 
         let scale = stage.scaleX() * (dist / lastDist);
 
         stage.scaleX(scale);
         stage.scaleY(scale);
 
-        // calculate new position of the stage
         let dx = newCenter.x - lastCenter.x;
         let dy = newCenter.y - lastCenter.y;
 
-        let newPos = {
-          x: newCenter.x - pointTo.x * scale + dx,
-          y: newCenter.y - pointTo.y * scale + dy,
-        };
+        let newPos = { x: newCenter.x - pointTo.x * scale + dx, y: newCenter.y - pointTo.y * scale + dy };
 
         stage.position(newPos);
         stage.batchDraw();
@@ -88,7 +72,7 @@ const KonvasEditor: FC<TKonvasEditorProps> = ({ pointsState, stageRef }) => {
   };
 
   return (
-    <Stage height={500} width={500} draggable onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} ref={stageRef}>
+    <Stage height={400} width={400} draggable onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} ref={stageRef}>
       <Layer ref={layerRef}>
         {/* 今書いている線を描画する */}
         <Line
@@ -99,7 +83,6 @@ const KonvasEditor: FC<TKonvasEditorProps> = ({ pointsState, stageRef }) => {
           points={[...(pointsState.state.flat(Infinity) as number[])]}
           ref={lineRef}
         />
-        <Line strokeWidth={4} lineCap="round" lineJoin="round" stroke="black" points={[1, 3, 10, 13]} ref={lineRef} />
         <Path />
       </Layer>
     </Stage>

diff --git a/client/src/app/draw/layout.tsx b/client/src/app/draw/layout.tsx
@@ -1,20 +1,14 @@
-import type { Metadata } from 'next';
+import type { Metadata } from "next";
 
-export const metadata: Metadata = { title: 'Duck Stream - draw -' };
+export const metadata: Metadata = { title: "Duck Stream - draw -" };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <header className='h-[8vh] flex items-center bg-secondary'>
-        <h1 className='text-sm text-main w-[95vw] m-auto'>Duck Stream</h1>
+      <header className="h-[8vh] flex items-center bg-secondary">
+        <h1 className="text-sm text-main w-[95vw] m-auto">Duck Stream</h1>
       </header>
-      <main className='flex min-h-[92vh] flex-col items-center justify-center gap-5 bg-secondary'>
-        {children}
-      </main>
+      <main className="flex min-h-[92vh] flex-col gap-5 bg-secondary">{children}</main>
     </>
   );
 }
diff --git a/client/src/app/draw/page.tsx b/client/src/app/draw/page.tsx
@@ -25,25 +25,24 @@ export default function Draw() {
 
   return (
     <div className={`${ZenMaruGothic.className} flex flex-col gap-1`}>
-      <div className="flex gap-1 items-center flex-col">
-        <div className="flex justify-between gap-2">
-          <input
-            id="title"
-            placeholder="タイトル"
-            type="text"
-            className="p-1 rounded-sm"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
-          <button onClick={onSubmit} className="border-2 p-1 rounded-sm">
-            保存
-          </button>
-        </div>
+      <div className="flex gap-1 max-w-[95vw] m-auto">
+        <input
+          id="title"
+          placeholder="タイトル"
+          type="text"
+          className="p-1 rounded-sm max-w-[70%]"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <button onClick={onSubmit} className="border-2 p-1 rounded-sm">
+          保存
+        </button>
       </div>
+
       <DrawEditor pointsState={{ state: points, setState: setPoints }} stageRef={stageRef} />
-      <div>
-        <p className="text-sm">キャンバス内のクリックで描画/移動が切り替えれます</p>
-      </div>
+      <ul className="max-w-[95vw] m-auto">
+        <li className="text-sm">キャンバス内のタップで現在位置に点を打てます</li>
+      </ul>
     </div>
   );
 }