From fe95013850e7d521806b698ff571d8a3732afe3f Mon Sep 17 00:00:00 2001
From: Shotaro Nakamura <79000684+nakasyou@users.noreply.github.com>
Date: Sun, 27 Aug 2023 09:14:30 +0000
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=82=AD=E3=83=A3=E3=83=B3=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD=E5=8F=96=E3=82=8A=E6=95=A2=E3=81=88=E3=81=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90!!!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/note/components/ImageNote.tsx | 40 +++++++++++++++++++--------
 src/app/note/components/TextNote.tsx  | 13 ++-------
 src/app/note/const/sheetClasses.ts    |  4 +--
 src/app/note/utils/classListAll.ts    | 10 +++++++
 4 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 src/app/note/utils/classListAll.ts

diff --git a/src/app/note/components/ImageNote.tsx b/src/app/note/components/ImageNote.tsx
index 5ea7e67f..c07d9552 100644
--- a/src/app/note/components/ImageNote.tsx
+++ b/src/app/note/components/ImageNote.tsx
@@ -6,6 +6,7 @@ import {
 } from "@tabler/icons-react"
 import { useEffect, useRef, useContext, useState } from "react"
 import classNames from "classnames"
+import { classListAddAll, classListRemoveAll } from "../utils/classListAll.ts"
 
 export interface Props {
   imageBlob: Blob
@@ -13,28 +14,43 @@ export interface Props {
 }
 export default (props: Props) => {
   const userState = useContext(UserStateContext)
-  const blobUrl = URL.createObjectURL(props.imageBlob)
 
   const [imageSize, setImageSize] = useState({
     width: 1,
     height: 1,
   })
-  
-  const image = new Image()
-  image.onload = () => {
-    setImageSize({
-      width: image.width,
-      height: image.height
-    })
-  }
-  image.src = blobUrl
+  const [blobUrl, setBlobUrl] = useState('')
+  useEffect(() => {
+    const blobUrl = URL.createObjectURL(props.imageBlob)
+    const image = new Image()
+    image.onload = () => {
+      setImageSize({
+        width: image.width,
+        height: image.height
+      })
+    }
+    setBlobUrl(blobUrl)
+    image.src = blobUrl
+  }, [])
+
   return <div>
     <div className='relative w-full h-screen'>
       <img className='absolute top-0 w-full h-full object-contain' src={ blobUrl } alt='Scaned Image' />
-      <svg className='absolute top-0 w-full h-full object-contain' viewbox={ `0 0 ${imageSize.width} ${imageSize.height}` }>
+      <svg className='absolute top-0 w-full h-full object-contain' viewBox={ `0 0 ${imageSize.width} ${imageSize.height}` }>
         {
           props.paths.map((path, index) => {
-            return <path d={ path } key={ index } stroke="#f002" strokeWidth="20" fill="none" />
+            return <path d={ path } key={ index } stroke="#f002" strokeWidth="20" fill="none" onClick={(evt) => {
+              const pathElement: SVGPathElement = evt.target as SVGPathElement
+              const nextIsView = pathElement.dataset.isView !== 'true'
+              pathElement.dataset.isView = nextIsView.toString()
+              if (nextIsView) {
+                classListAddAll(pathElement, viewClasses)
+                classListRemoveAll(pathElement, hideClasses)
+              } else {
+                classListAddAll(pathElement, hideClasses)
+                classListRemoveAll(pathElement, viewClasses)
+              }
+            }}/>
           })
         }
       </svg>
diff --git a/src/app/note/components/TextNote.tsx b/src/app/note/components/TextNote.tsx
index ef5df0a4..296b9b1b 100644
--- a/src/app/note/components/TextNote.tsx
+++ b/src/app/note/components/TextNote.tsx
@@ -6,7 +6,7 @@ import { TipTapPluginSheet } from "../utils/tiptap-plugin-sheet"
 import { TiptapPluginImageNote } from "../utils/tiptap-plugin-imagenote"
 import { UserStateContext } from "../index.tsx"
 import { viewClasses, hideClasses } from '../const/sheetClasses.ts'
-
+import { classListAddAll, classListRemoveAll } from "../utils/classListAll.ts"
 import {
   IconBold,
   IconBoldOff,
@@ -27,16 +27,7 @@ export default (props: Props) => {
     content: props.defaultContent,
   })
   props.setEditorState(editor)
-  const classListAddAll = (element: Element, classes: string[]) => {
-    for (const className of classes) {
-      element.classList.add(className)
-    }
-  }
-  const classListRemoveAll = (element: Element, classes: string[]) => {
-    for (const className of classes) {
-      element.classList.remove(className)
-    }
-  }
+
   const viewEditorRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     for (const nanohaSheetElement of viewEditorRef?.current?.getElementsByClassName(
diff --git a/src/app/note/const/sheetClasses.ts b/src/app/note/const/sheetClasses.ts
index a8ca80c6..3767114d 100644
--- a/src/app/note/const/sheetClasses.ts
+++ b/src/app/note/const/sheetClasses.ts
@@ -1,2 +1,2 @@
-export const viewClasses = ['bg-red-100']
-export const hideClasses = ['bg-red-500', 'text-transparent']
+export const viewClasses = ['bg-red-100', 'stroke-[#f002]']
+export const hideClasses = ['bg-red-500', 'text-transparent', 'stroke-[#f00]']
diff --git a/src/app/note/utils/classListAll.ts b/src/app/note/utils/classListAll.ts
new file mode 100644
index 00000000..238d20ed
--- /dev/null
+++ b/src/app/note/utils/classListAll.ts
@@ -0,0 +1,10 @@
+export const classListAddAll = (element: Element, classes: string[]) => {
+  for (const className of classes) {
+    element.classList.add(className)
+  }
+}
+export const classListRemoveAll = (element: Element, classes: string[]) => {
+  for (const className of classes) {
+    element.classList.remove(className)
+  }
+}