スキャン機能取り敢えず完成!!!

src/app/note/components/ImageNote.tsx

@@ -6,35 +6,51 @@ 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
   paths: string[]
 }
 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>

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(

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]']

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)
+  }
+}