fix?: ImageNOte

nakasyou · Feb 19, 2024 · 709ce41 · 709ce41
1 parent 5dae434
commit 709ce41
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 33 deletions.
diff --git a/src/islands/note/components/notes/ImageNote/components/EditorCoreX.tsx b/src/islands/note/components/notes/ImageNote/components/EditorCoreX.tsx
@@ -23,7 +23,7 @@ export default (props: Props) => {
   const [editMode, setEditMode] = createSignal<'move' | 'paint' | 'clear'>(
     'move'
   )
-
+  
   const [imageUrl, setImageUrl] = createSignal<string>()
   const [imageSize, setImageSize] = createSignal<{
     w: number
@@ -73,6 +73,9 @@ export default (props: Props) => {
       setEditorContainerRect(editorContainer.getBoundingClientRect())
     })
     observer.observe(editorContainer)
+    setTimeout(() => {
+      setEditorContainerRect(editorContainer.getBoundingClientRect())
+    }, 500)
   })
 
   const getPositionByImage = (evt: MouseEvent) => {
@@ -146,7 +149,7 @@ export default (props: Props) => {
     }
   }
   createEffect(() => {
-    console.log(editorPosition())
+    console.log(editorContainerRect())
   })
   const pointerMove = (evt: PointerEvent) => {
     evt.preventDefault()
@@ -245,6 +248,16 @@ export default (props: Props) => {
     }
   }
   const [getRescanConfirm, setRescanConfirm] = createSignal(false)
+
+  let forGetTouchRef!: HTMLDivElement
+
+  onMount(() => {
+    document.onpointerdown = pointerDown
+    document.onpointermove = pointerMove
+    document.onpointerup = pointerUp
+    document.onpointercancel = pointerUp
+    document.onwheel = onWheel
+  })
   return (
     <div>
       <Show when={getRescanConfirm()}>
@@ -271,6 +284,7 @@ export default (props: Props) => {
               width: imageSize().w + 'px',
               height: imageSize().h + 'px',
             }}
+            ref={forGetTouchRef}
           >
             <div
               class="origin-top-left"
@@ -314,11 +328,6 @@ export default (props: Props) => {
                 width: editorContainerRect().width + 'px',
                 height: editorContainerRect().height + 'px',
               }}
-              onPointerDown={pointerDown}
-              onPointerMove={pointerMove}
-              onPointerUp={pointerUp}
-              onPointerCancel={pointerUp}
-              onWheel={onWheel}
             ></div>
           </div>
         </div>

diff --git a/src/islands/note/components/notes/ImageNote/components/ScanedImageEditor.tsx b/src/islands/note/components/notes/ImageNote/components/ScanedImageEditor.tsx
@@ -1,5 +1,4 @@
-
-import { Show } from 'solid-js'
+import { Show, createEffect } from 'solid-js'
 import { Dialog, createDialog } from '../../../utils/Dialog'
 import EditorCore from './EditorCoreX'
 import type { Sheets } from './Sheet'
@@ -33,6 +32,9 @@ export const ScanedImageEditor = (props: Props) => {
     }
     scanInputRef.click()
   }
+  createEffect(() => {
+    console.log(props.noteData.canToJsonData)
+  })
   return (
     <Dialog
       type="custom"
@@ -44,7 +46,7 @@ export const ScanedImageEditor = (props: Props) => {
           result && nowScanedImageBlob
             ? {
                 sheets: props.noteData.canToJsonData.sheets,
-                image: nowScanedImageBlob,
+                image: nowScanedImageBlob
               }
             : null
         )
@@ -60,29 +62,34 @@ export const ScanedImageEditor = (props: Props) => {
         </Show>
       </div>
       <div>
-        <Show when={props.noteData.blobs.scanedImage}>
-          <div>
-            <EditorCore
-              scanedImage={props.noteData.blobs.scanedImage}
-              changeSheets={(sheets) => {
-                props.setNoteData('canToJsonData', 'sheets', sheets)
-              }}
-              sheets={props.noteData.canToJsonData.sheets}
-              rescan={() => {
-                props.setNoteData('canToJsonData', 'sheets', [])
-                props.setNoteData('blobs', 'scanedImage', undefined)
-              }}
-            />
-          </div>
-          <div class="flex justify-center gap-5 items-center">
-            <button class="outlined-button" onClick={() => dialog.close(false)}>
-              キャンセル
-            </button>
-            <button class="filled-button" onClick={() => dialog.close(true)}>
-              完了
-            </button>
-          </div>
-        </Show>
+        {props.noteData.blobs.scanedImage && (
+          <>
+            <div>
+              <EditorCore
+                scanedImage={props.noteData.blobs.scanedImage}
+                changeSheets={(sheets) => {
+                  props.setNoteData('canToJsonData', 'sheets', sheets)
+                }}
+                sheets={props.noteData.canToJsonData.sheets}
+                rescan={() => {
+                  props.setNoteData('canToJsonData', 'sheets', [])
+                  props.setNoteData('blobs', 'scanedImage', undefined)
+                }}
+              />
+            </div>
+            <div class="flex justify-center gap-5 items-center">
+              <button
+                class="outlined-button"
+                onClick={() => dialog.close(false)}
+              >
+                キャンセル
+              </button>
+              <button class="filled-button" onClick={() => dialog.close(true)}>
+                完了
+              </button>
+            </div>
+          </>
+        )}
       </div>
     </Dialog>
   )