#3

backend/app/controllers/thread_posts_controller.rb

@@ -24,7 +24,15 @@ class ThreadPostsController < ApplicationController
   def create
     post = @thread.posts.new(post_params)
     if post.save
-      render json: post, status: :created
+      post.thread.tap { |thread|
+        thread.updated_at = post.created_at
+      }.save!
+      render json: post.as_json.merge(image_url: (
+          if post.image.attached?
+            Rails.application.routes.url_helpers.rails_blob_url(post.image, only_path: true)
+          else
+            nil
+          end)), status: :created
     else
       render json: { errors: post.errors.full_messages }, status: :unprocessable_entity
     end
@@ -37,6 +45,8 @@ class ThreadPostsController < ApplicationController
   end
 
   def post_params
-    params.require(:post).permit(:name, :body, :password)
+    params.permit(:name, :message, :password, :image).transform_values { |v|
+      v.presence
+    }
   end
 end

backend/app/models/post.rb

@@ -2,7 +2,16 @@ class Post < ApplicationRecord
   belongs_to :thread, class_name: 'Topic', foreign_key: :thread_id
   has_one_attached :image
 
+  before_create :set_post_no
+
   has_secure_password validations: false
 
   scope :active, -> { where deleted_at: nil }
+
+  private
+
+  def set_post_no
+    max_no = Post.where(thread_id:).maximum(:post_no) || 0
+    self.post_no = max_no + 1
+  end
 end

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import cn from 'classnames'
 import { useEffect, useRef, useState } from 'react'
-import { BrowserRouter,
+import { Link,
-	 Link,
 	 Navigate,
 	 Route,
 	 Routes,
-	 useLocation } from 'react-router-dom'
+	 useLocation,
+	 useSearchParams } from 'react-router-dom'
 
 import bgmSrc from '@/assets/music.mp3'
 import ThreadListPage from '@/pages/threads/ThreadListPage'
@@ -22,9 +22,23 @@ const colours = ['bg-fuchsia-500 dark:bg-fuchsia-900',
 		 'bg-yellow-500 dark:bg-yellow-900'] as const
 
 
+const ScrollToTop = () => {
+  const { pathname } = useLocation ()
+
+  useEffect (() => {
+    scrollTo (0, 0)
+  }, [pathname])
+
+  return null
+}
+
+
 export default () => {
   const bgmRef = useRef<HTMLAudioElement | null> (null)
 
+  const [searchParams] = useSearchParams ()
+  const threadId = searchParams.get ('thread')
+
   const [colourIndex, setColourIndex] = useState (0)
   const [mute, setMute] = useState (false)
   const [playing, setPlaying] = useState (false)
@@ -35,7 +49,7 @@ export default () => {
     bgmRef.current.volume = 1
 
     const playBGM = async () => {
-      if (playing)
+      if (playing || !(bgmRef.current))
 	return
 
       try
@@ -54,7 +68,7 @@ export default () => {
     document.addEventListener ('touchstart', playBGM)
 
     const changeColour = () => {
-      setColourIndex (idx => Math.floor (Math.random () * colours.length))
+      setColourIndex (Math.floor (Math.random () * colours.length))
     }
     changeColour ()
     const colouringInterval = setInterval (changeColour, 3000)
@@ -66,7 +80,8 @@ export default () => {
   }, [])
 
   return (
-      <BrowserRouter>
+      <>
+	<ScrollToTop />
 	<div className={cn ('w-screen min-h-screen',
 			    colours[colourIndex],
 			    'transition-colors duration-[3s] ease-linear')}>
@@ -86,7 +101,7 @@ export default () => {
 		{playing && (
 		    <a href="#" onClick={ev => {
 		      ev.preventDefault ()
-		      setMute (bgmRef.current.muted = !(mute))
+		      bgmRef.current && setMute (bgmRef.current.muted = !(mute))
 		    }}>
 		      {mute ? 'やっぱり BGM が恋しい人用' : 'BGM がうるさい人用'}
 		    </a>)}
@@ -94,13 +109,9 @@ export default () => {
 	    </header>
 	    <main className="mb-8">
 	      <Routes>
-		{() => {
+		<Route path="/"
-		  const { pathname } = useLocation ()
+		       element={<Navigate to={`/threads/${ threadId ? (+threadId) + 1 : '' }`}
-		  useEffect (() => {
+					  replace />} />
-		    scrollTo (0, 0)
-		  }, [pathname])
-	        }}
-		<Route path="/" element={<Navigate to="/threads" replace />} />
 		<Route path="/threads" element={<ThreadListPage />} />
 		<Route path="/threads/:id" element={<ThreadDetailPage />} />
 	      </Routes>
@@ -111,5 +122,5 @@ export default () => {
 	    </footer>
 	  </div>
 	</div>
-      </BrowserRouter>)
+      </>)
 }

frontend/src/components/threads/ThreadCanvas.tsx

@@ -1,9 +1,14 @@
+import cn from 'classnames'
+import Konva from 'konva'
 import { nanoid } from 'nanoid'
-import { useEffect, useRef, useState } from 'react'
+import { forwardRef,
+	 useEffect,
+	 useImperativeHandle,
+	 useRef,
+	 useState } from 'react'
 import { FaRedo, FaUndo } from 'react-icons/fa'
 import { Layer, Line, Rect, Stage, Image } from 'react-konva'
 
-import type { KonvaEventObject } from 'konva'
 import type { ChangeEventHandler } from 'react'
 
 type ImageItem = { src: string }
@@ -16,41 +21,144 @@ type Layer = {
     future:   Line[][]
     image?:   ImageItem }
 
-type Line = {
+type Line =
-    mode:         Mode
+    | { mode:         typeof Mode.Pen | typeof Mode.Rubber
 	points:       number[]
 	stroke:       string
 	strokeWidth:  number }
+    | { mode:     typeof Mode.Paint
+	points:   number[]
+	stroke:   string,
+	imageSrc: string }
 
 const Mode = {
-    Pen:    Symbol (),
+    Pen:    'Pen',
-    Rubber: Symbol (),
+    Rubber: 'Rubber',
-    Image:  Symbol () } as const
+    Paint:  'Paint' } as const
-type Mode = keyof Mode
+type Mode = (typeof Mode)[keyof typeof Mode]
 
 
-export default () => {
+const colourDiffMax = (c1: readonly number[], c2: readonly number[]) => (
+    Math.max (...[0, 1, 2, 3].map (i => Math.abs (c1[i] - c2[i]))))
+
+
+const floodFill = (
+    imgData:    ImageData,
+    sx:         number,
+    sy:         number,
+    fill:       { r:  number
+		  g:  number
+		  b:  number
+		  a:  number },
+    tolerance:  number          = 16) => {
+  const { data, width: W, height: H } = imgData
+  const start = getRGBA (data, sx, sy, W)
+  const visited = new Uint8Array (W * H)
+
+  if (colourDiffMax (start, [fill.r, fill.g, fill.b, fill.a]) <= tolerance)
+    return
+
+  const stack: [number, number][] = [[sx, sy]]
+  while (stack.length > 0)
+    {
+      const [x, y] = stack.pop ()!
+      let lx = x
+      while (lx >= 0
+	     && !(visited[y * W + lx])
+	     && colourDiffMax (getRGBA (data, lx, y, W), start) <= tolerance)
+	--lx
+      ++lx
+      let rx = x
+      while (rx < W
+	     && !(visited[y * W + rx])
+	     && colourDiffMax (getRGBA (data, rx, y, W), start) <= tolerance)
+	++rx
+      for (let i = lx; i < rx; ++i)
+	{
+	  const idx = y * W + i
+	  visited[idx] = 1
+	  const p = idx * 4
+	  data[p] = fill.r
+	  data[p + 1] = fill.g
+	  data[p + 2] = fill.b
+	  data[p + 3] = fill.a
+	  if (y > 0
+	      && !(visited[(y - 1) * W + i])
+	      && colourDiffMax (getRGBA (data, i, y - 1, W), start) <= tolerance)
+	    stack.push ([i, y - 1])
+	  if (y < H - 1
+	      && !(visited[(y + 1) * W + i])
+	      && colourDiffMax (getRGBA (data, i, y + 1, W), start) <= tolerance)
+	    stack.push ([i, y + 1])
+	}
+    }
+}
+
+
+const getRGBA = (data: Uint8ClampedArray, x: number, y: number, w: number) => {
+  const i = (y * w + x) * 4
+  return [data[i], data[i + 1], data[i + 2], data[i + 3]] as const
+}
+
+
+const hexToRgba = (hex: string, alpha = 255): [number, number, number, number] => {
+  const m = /^#?([0-9a-f]{6})$/i.exec (hex)
+  const n = parseInt (m![1], 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255, alpha]
+}
+
+
+const isLayer = (obj: unknown): obj is Layer => (
+    typeof obj === 'object'
+    && obj !== null
+    && typeof (obj as Layer).id === 'string'
+    && typeof (obj as Layer).name === 'string'
+    && Array.isArray ((obj as Layer).lines)
+    && Array.isArray ((obj as Layer).history)
+    && Array.isArray ((obj as Layer).future))
+
+
+export type ThreadCanvasHandle = {
+    exportAll:  () => Promise<{ dataURL:  string
+			        width:    number
+			        height:   number }>
+    clear:      () => void }
+
+type Props = { visible: boolean }
+
+
+export default forwardRef<ThreadCanvasHandle, Props> (({ visible }, ref) => {
   const drawingRef = useRef (false)
   const fileInputRef = useRef<HTMLInputElement> (null)
-  const stageRef = useRef<Stage | null> (null)
+  const layersRef = useRef<Record<string, Konva.Layer>> ({ })
+  const stageRef = useRef<Konva.Stage | null> (null)
 
   const [activeLayerId, setActiveLayerId] = useState<string | null> (null)
   const [colour, setColour] = useState ('#000000')
-  const [images, setImages] = useState<Record<string, window.Image[]>> ({ })
+  const [images, setImages] = useState<Record<string, HTMLImageElement>> ({ })
-  const [layers, setLayers] = useState<Layer[]> ([])
   const [layerCnt, setLayerCnt] = useState (0)
+  const [layers, setLayers] = useState<Layer[]> ([])
   const [mode, setMode] = useState<Mode> (Mode.Pen)
   const [pointSize, setPointSize] = useState (3)
-  const [stageWidth, setStageWidth] = useState (480)
+  const [singleLayer, setSingleLayer] = useState (false)
   const [stageHeight, setStageHeight] = useState (480)
+  const [stageWidth, setStageWidth] = useState (480)
 
   const activeLayer = layers.find (l => l.id === activeLayerId)
 
-  const handleMouseDown = (ev: KonvaEventObject<MouseEvent>) => {
+  const handleMouseDown = (ev: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
+    if (!(activeLayer) || (mode !== Mode.Pen && mode !== Mode.Rubber))
+      return
+
     drawingRef.current = true
+
+    updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines])
+    updateActiveLayerFuture ([])
+
     const pos = ev.target.getStage ()?.getPointerPosition ()
     if (!(pos))
       return
+
     const lines: Line[] = [
 	...activeLayer.lines,
 	{ mode,
@@ -60,9 +168,10 @@ export default () => {
     updateActiveLayerLines (lines)
   }
 
-  const handleMouseMove = (ev: KonvaEventObject<MouseEvent>) => {
+  const handleMouseMove = (ev: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
-    if (!(drawingRef.current))
+    if (!(drawingRef.current) || !(activeLayer))
       return
+
     const stage = ev.target.getStage ()
     const point = stage?.getPointerPosition ()
     if (!(point))
@@ -80,21 +189,23 @@ export default () => {
   }
 
   const handleUndo = () => {
-    if (activeLayer.lines.length === 0)
+    if (!(activeLayer) || activeLayer.lines.length === 0)
       return
-    const newLines = [...activeLayer.lines]
+
-    const last = newLines.pop()!
+    const prev = activeLayer.history[activeLayer.history.length - 1]
-    updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines])
+    updateActiveLayerFuture ([...activeLayer.future, activeLayer.lines])
-    updateActiveLayerFuture ([])
+    updateActiveLayerLines (prev)
-    updateActiveLayerLines (newLines)
+    updateActiveLayerHistory (activeLayer.history.slice (0, -1))
   }
 
   const handleRedo = () => {
-    if (activeLayer.history.length === 0)
+    if (!(activeLayer) || activeLayer.future.length === 0)
       return
-    const prev = activeLayer.history[activeLayer.history.length - 1]
+
-    updateActiveLayerLines (prev)
+    const next = activeLayer.future[activeLayer.future.length - 1]
-    updateActiveLayerHistory (activeLayer.history.slice (0, -1))
+    updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines])
+    updateActiveLayerLines (next)
+    updateActiveLayerFuture (activeLayer.future.slice (0, -1))
   }
 
   const handleImportImage: ChangeEventHandler<HTMLInputElement> = ev => {
@@ -115,6 +226,46 @@ export default () => {
       fileInputRef.current.value = ''
   }
 
+  const handlePaint = (ev: Konva.KonvaEventObject<PointerEvent | MouseEvent | TouchEvent>) => {
+    const layer = activeLayer
+    if (!(layer) || !(layersRef.current?.[layer.id]))
+      return
+
+    const pos = ev.target.getStage ()?.getPointerPosition ()
+    if (!(pos))
+      return
+
+    const stage = layersRef.current[layer.id]
+    if (!(stage))
+      return
+
+    if (drawingRef.current)
+      return
+
+    drawingRef.current = true
+
+    const off = stage.toCanvas ({ pixelRatio: 1 })
+    const ctx = off.getContext ('2d')!
+    const imgData = ctx.getImageData (0, 0, off.width, off.height)
+
+    const [r, g, b, a] = hexToRgba (colour, 255)
+    floodFill (imgData, Math.floor (pos.x), Math.floor (pos.y), { r, g, b, a })
+    ctx.putImageData (imgData, 0, 0)
+
+    updateActiveLayerHistory ([...layer.history, layer.lines])
+    updateActiveLayerFuture ([])
+
+    setLayers (prev => prev.map (l => l.id === activeLayerId ? ({
+	...l,
+	lines: [...l.lines,
+		{ mode:     Mode.Paint,
+		  points:   [pos.x, pos.y],
+		  stroke:   colour,
+		  imageSrc: off.toDataURL ('image/png') }] }) : l))
+
+    drawingRef.current = false
+  }
+
   const updateActiveLayerLines = (lines: Line[]) => {
     setLayers (prev => (
 	prev.map (layer => (layer.id === activeLayerId
@@ -150,19 +301,25 @@ export default () => {
     return layer
   }
 
-  const moveLayer = (direction: number) => {
+  const canMoveLayer = (direction: number) => {
-    setLayers(prev => {
+    const idx = layers.findIndex (l => l.id === activeLayerId)
-      const idx = prev.findIndex (l => l.id === activeLayerId)
     if (idx < 0)
-	return prev
+      return false
+
     const target = idx + direction
-      if (target < 0 || target >= prev.length)
+    return 0 <= target && target < layers.length
-	return prev
+  }
-      const next = [...prev]
+
-      const [item] = next.splice(idx, 1)
+  const moveLayer = (direction: number) => {
-      next.splice(target, 0, item)
+    if (!(canMoveLayer (direction)))
-      return next
+      return
-    })
+
+    const idx = layers.findIndex (l => l.id === activeLayerId)
+    const target = idx + direction
+    const next = [...layers]
+    const [item] = next.splice (idx, 1)
+    next.splice (target, 0, item)
+    setLayers(next)
   }
 
   const clearCanvas = () => {
@@ -178,14 +335,87 @@ export default () => {
     setStageHeight (480)
   }
 
+  const exportAllLayers = async (): Promise<string> => {
+    const container = document.createElement ('div')
+    const stage = new Konva.Stage ({
+	container,
+	width:      stageWidth,
+	height:     stageHeight })
+
+    const bgLayer = new Konva.Layer
+    bgLayer.add (new Konva.Rect ({
+	x:          0,
+	y:          0,
+	width:      stageWidth,
+	height:     stageHeight,
+	fill:       'white',
+	listening:  false }))
+    stage.add (bgLayer)
+
+    layers.forEach (layer => {
+      const kLayer = new Konva.Layer
+
+      const baseImg = images[layer.id]
+      if (baseImg)
+	{
+	  kLayer.add (new Konva.Image ({
+	      image:      baseImg,
+	      x:          0,
+	      y:          0,
+	      scaleX:     stageWidth / baseImg.width,
+	      scaleY:     stageHeight / baseImg.height,
+	      listening:  false }))
+	}
+
+      layer.lines.forEach (line => {
+	if (line.mode === Mode.Paint)
+	  {
+	    const img = images[line.imageSrc]
+	    img && kLayer.add (new Konva.Image ({
+		image:      img,
+		x:          0,
+		y:          0,
+		listening:  false }))
+	  }
+	else
+	  {
+	    kLayer.add (new Konva.Line ({
+		points:                   line.points,
+		stroke:                   line.mode === Mode.Rubber ? 'black' : line.stroke,
+		strokeWidth:              line.strokeWidth,
+		tension:                  .5,
+		lineCap:                  'round',
+		globalCompositeOperation: line.mode === Mode.Rubber ? 'destination-out' : 'source-over',
+		listening:                false }))
+	  }
+      })
+
+      stage.add (kLayer)
+    })
+
+    const dataURL = stage.toDataURL ({ mimeType: 'image/png', pixelRatio: 1 })
+    stage.destroy ()
+    return dataURL
+  }
+
   useEffect (() => {
     try
     {
-      const paint = JSON.parse (localStorage.getItem ('paint'))
+      const raw = localStorage.getItem ('paint')
-      if (!(paint instanceof Array))
+      if (!(raw))
 	throw new Error
-      setLayers (paint)
+
-      setActiveLayerId (paint[0].id)
+      const parsed: unknown = JSON.parse (raw)
+      if (!(Array.isArray (parsed)))
+	throw new Error
+
+      const restored: Layer[] = parsed.filter (isLayer)
+      if (restored.length === 0)
+	throw new Error
+
+      setLayers (restored)
+      setActiveLayerId (restored[0].id)
+      setLayerCnt (restored.length)
     }
     catch
     {
@@ -200,16 +430,35 @@ export default () => {
       if (layer.image && !(layer.id in images))
 	{
 	  const image = new window.Image
+	  image.crossOrigin = 'anonymous'
 	  image.src = layer.image.src
 	  image.onload = () => {
 	    setImages (prev => ({ ...prev, [layer.id]: image }))
 	  }
 	}
+
+      layer.lines.forEach (line => {
+	if (line.mode === Mode.Paint && !(line.imageSrc in images))
+	  {
+	    const image = new window.Image
+	    image.crossOrigin = 'anonymous'
+	    image.src = line.imageSrc
+	    image.onload = () => {
+	      setImages (prev => ({ ...prev, [line.imageSrc]: image }))
+	    }
+	  }
+      })
     })
   }, [layers])
 
+  useImperativeHandle (ref, () => ({
+      exportAll:  async () => ({ dataURL: await exportAllLayers (),
+				 width:   stageWidth,
+				 height:  stageHeight }),
+      clear:	  clearCanvas }))
+
   return (
-      <div>
+      <div className={cn (!(visible) && 'hidden')}>
 	<div>
 	  <div>
 	    <button onClick={() => {
@@ -249,20 +498,20 @@ export default () => {
 
 	    <div>
 	      <label>
-		幅：
+		幅（{stageWidth} px）：
 		<input type="range"
 		       min={32}
 		       max={640}
 		       value={stageWidth}
-		       onChange={ev => setStageWidth (ev.target.value)} />
+		       onChange={ev => setStageWidth (+ev.target.value)} />
 	      </label>
 	      <label>
-		高さ：
+		高さ（{stageHeight} px）：
 		<input type="range"
 		       min={24}
 		       max={480}
 		       value={stageHeight}
-		       onChange={ev => setStageHeight (ev.target.value)} />
+		       onChange={ev => setStageHeight (+ev.target.value)} />
 	      </label>
 	    </div>
 	  </div>
@@ -277,6 +526,7 @@ export default () => {
 		     onChange={() => setMode (Mode.Pen)} />
 	      ペン
 	    </label>
+
 	    <label>
 	      <input type="radio"
 		     name="mode"
@@ -285,13 +535,24 @@ export default () => {
 		     onChange={() => setMode (Mode.Rubber)} />
 	      消しゴム
 	    </label>
+
+	    <label>
+	      <input type="radio"
+		     name="mode"
+		     value="paint"
+		     checked={mode === Mode.Paint}
+		     onChange={() => setMode (Mode.Paint)} />
+	      塗りつぶし
+	    </label>
 	  </div>
 
 	  <div>
-	    <button onClick={handleUndo} disabled={activeLayer?.lines.length === 0}>
+	    <button onClick={handleUndo}
+		    disabled={!(activeLayer) || activeLayer.lines.length === 0}>
 	      <FaUndo />
 	    </button>
-	    <button onClick={handleRedo} disabled={activeLayer?.history.length === 0}>
+	    <button onClick={handleRedo}
+		    disabled={!(activeLayer) || activeLayer.future.length === 0}>
 	      <FaRedo />
 	    </button>
 	  </div>
@@ -324,8 +585,8 @@ export default () => {
 			 onChange={() => setActiveLayerId (layer.id)} />
 		  {layer.name}
 		</label>))}
-	    <button onClick={() => {
+	    <button disabled={layers.length <= 1} onClick={() => {
-	      if (layers.length === 1)
+	      if (layers.length <= 1)
 		{
 		  alert ('何を消そうというのだ．')
 		  return
@@ -343,12 +604,12 @@ export default () => {
 	    }}>
 	      削除
 	    </button>
-	    <button onClick={() => {
+	    <button disabled={!(canMoveLayer (-1))} onClick={() => {
 	      moveLayer (-1)
 	    }}>
 	      下へ
 	    </button>
-	    <button onClick={() => {
+	    <button disabled={!(canMoveLayer (1))} onClick={() => {
 	      moveLayer (1)
 	    }}>
 	      上へ
@@ -357,32 +618,43 @@ export default () => {
 	      追加
 	    </button>
 	  </div>
+
+	  <label>
+	    <input type="checkbox"
+		   checked={singleLayer}
+		   onChange={ev => setSingleLayer (ev.target.checked)} />
+	    レイアを分けて表示
+	  </label>
 	</div>
 
-	<div className="w-full flex items-center justify-center mb-16">
+	<div className="w-full flex items-center justify-center">
 	  <div className="border border-black dark:border-white">
-	    <Stage ref={node => {
+	    <Stage className="touch-none"
+		   ref={node => {
 		     stageRef.current = node
-		     return node
 		   }}
 		   width={stageWidth}
 		   height={stageHeight}
-		   onMouseDown={handleMouseDown}
+		   onMouseDown={mode === Mode.Paint ? handlePaint : handleMouseDown}
-		   onMouseMove={handleMouseMove}
+		   onMouseMove={mode === Mode.Paint ? undefined : handleMouseMove}
-		   onMouseUp={handleMouseUp}
+		   onMouseUp={mode === Mode.Paint ? undefined : handleMouseUp}
-		   onTouchStart={handleMouseDown}
+		   onTouchStart={mode === Mode.Paint ? handlePaint : handleMouseDown}
-		   onTouchMove={handleMouseMove}
+		   onTouchMove={mode === Mode.Paint ? undefined : handleMouseMove}
-		   onTouchEnd={handleMouseUp}>
+		   onTouchEnd={mode === Mode.Paint ? undefined : handleMouseUp}>
 	      <Layer>
 		<Rect x={0}
 		      y={0}
 		      width={stageWidth}
 		      height={stageHeight}
-		      fill="white" />
+		      fill="white"
+		      listening={false} />
 	      </Layer>
 
-	      {layers.map (layer => (
+	      {layers.map (layer => (!(singleLayer) || layer.id === activeLayerId) && (
-		  <Layer key={layer.id}>
+		  <Layer key={layer.id} ref={node => {
+		    if (node)
+		      layersRef.current = { ...layersRef.current, [layer.id]: node }
+		  }}>
 		    {images[layer.id] && (
 			<Image image={images[layer.id]}
 			       x={0}
@@ -390,7 +662,12 @@ export default () => {
 			       scaleX={stageWidth / images[layer.id].width}
 			       scaleY={stageHeight / images[layer.id].height} />)}
 
-		    {layer.lines.map ((line, i) => (
+		    {layer.lines.map ((line, i) => {
+		      switch (line.mode)
+		      {
+		      case Mode.Pen:
+		      case Mode.Rubber:
+			return (
 			  <Line key={i}
 				points={line.points}
 				stroke={line.mode === Mode.Rubber ? 'black' : line.stroke}
@@ -399,10 +676,20 @@ export default () => {
 				lineCap="round"
 				globalCompositeOperation={line.mode === Mode.Rubber
 							  ? 'destination-out'
-							: 'source-over'} />))}
+							  : 'source-over'} />)
+		      case Mode.Paint:
+			return (
+			    <Image key={i}
+				   image={images[line.imageSrc]}
+				   x={0}
+				   y={0}
+				   scaleX={1}
+				   scaleY={1} />)
+		      }
+		    })}
 		  </Layer>))}
 	    </Stage>
 	  </div>
 	</div>
       </div>)
-}
+})

frontend/src/main.tsx

@@ -1,6 +1,10 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
 
-createRoot(document.getElementById('root')!).render(<App />)
+import App from '@/App.tsx'
+import '@/index.css'
+
+createRoot(document.getElementById('root')!).render(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>)

frontend/src/pages/threads/ThreadDetailPage.tsx

@@ -1,21 +1,111 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { FaThumbsDown, FaThumbsUp } from 'react-icons/fa'
-import { useParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 
 import ThreadCanvas from '@/components/threads/ThreadCanvas'
 import { API_BASE_URL } from '@/config'
 
+import type { ThreadCanvasHandle } from '@/components/threads/ThreadCanvas'
+import type { Post, Thread } from '@/types'
+
+const Sort = {
+    Newest:   'newest',
+    Oldest:   'oldest',
+    Likes:    'likes',
+    Dislikes: 'dislikes' } as const
+type Sort = (typeof Sort)[keyof typeof Sort]
+
+
+const reformPost = (post: Post): Post => ({
+    ...post,
+    createdAt:  (new Date (post.createdAt)).toLocaleString ('ja-JP-u-ca-japanese') })
+
 
 export default () => {
   const { id } = useParams ()
 
+  const canvasRef = useRef<ThreadCanvasHandle> (null)
+
+  const [searchParams, setSearchParams] = useSearchParams ()
+  const sort = searchParams.get ('sort') ?? 'created_at'
+  const order = searchParams.get ('order') ?? 'desc'
+  const sortKey = (() => {
+    if (sort === 'score')
+      {
+	if (order === 'asc')
+	  return Sort.Dislikes
+	return Sort.Likes
+      }
+    else
+      {
+	if (order === 'asc')
+	  return Sort.Oldest
+	return Sort.Newest
+      }
+  }) ()
+
   const [loading, setLoading] = useState (true)
+  const [message, setMessage] = useState ('')
+  const [name, setName] = useState ('')
+  const [password, setPassword] = useState ('')
   const [posts, setPosts] = useState<Post[]> ([])
+  const [sending, setSending] = useState (false)
   const [thread, setThread] = useState<Thread | null> (null)
+  const [withImage, setWithImage] = useState (false)
+
+  const handleSend = async () => {
+    if (!(message) && !(withImage))
+      {
+	alert ('メッセージ書くか画像描くかどっちかはしろ．')
+	return
+      }
+
+    setSending (true)
+    try
+    {
+      const form = new FormData
+      if (withImage)
+	{
+	  if (!(canvasRef.current))
+	    return
+	  const { dataURL } = await canvasRef.current.exportAll ()
+	  const blob = await (await fetch (dataURL)).blob ()
+	  form.append ('image', new File ([blob], `kekec_${ Date.now () }.png`, { type: 'image/png' }))
+	}
+      form.append ('name', name)
+      form.append ('message', message)
+      form.append ('password', password)
+      const res = await axios.post (`${ API_BASE_URL }/threads/${ id }/posts`,
+				    form,
+				    { headers: { 'Content-Type': 'multipart/form-data' } })
+      const data: Post = toCamel (res.data as any, { deep: true })
+      setPosts(prev => [reformPost (data), ...prev])
+
+      setMessage ('')
+      if (withImage)
+	{
+	  canvasRef.current!.clear ()
+	  setWithImage (false)
+	}
+
+      localStorage.setItem ('name', name)
+      localStorage.setItem ('password', password)
+    }
+    finally
+    {
+      setSending (false)
+    }
+  }
 
   useEffect (() => {
+    const nameRaw = localStorage.getItem ('name')
+    nameRaw && setName (nameRaw)
+
+    const passRaw = localStorage.getItem ('password')
+    passRaw && setPassword (passRaw)
+
     const fetchThread = async () => {
       try
       {
@@ -27,16 +117,17 @@ export default () => {
 	setThread (null)
       }
     }
+    fetchThread ()
+  }, [])
 
+  useEffect (() => {
     const fetchPosts = async () => {
-      setLoading (true)
       try
       {
-	const res = await axios.get (`${ API_BASE_URL }/threads/${ id }/posts`)
+	const res = await axios.get (`${ API_BASE_URL }/threads/${ id }/posts`,
+				     { params: { sort, order } })
 	const data = toCamel (res.data as any, { deep: true }) as Post[]
-	setPosts (data.map (p => ({
+	setPosts (data.map (reformPost))
-	    ...p,
-	    createdAt:  (new Date (p.createdAt)).toLocaleString ('ja-JP-u-ca-japanese') })))
       }
       catch
       {
@@ -44,10 +135,8 @@ export default () => {
       }
       setLoading (false)
     }
-
-    fetchThread ()
     fetchPosts ()
-  }, [])
+  }, [sortKey])
 
   useEffect (() => {
     if (!(thread))
@@ -57,11 +146,93 @@ export default () => {
 
   return (
       <>
-	<ThreadCanvas />
+	<div className="bg-white dark:bg-gray-800 p-3 m-4
+			border border-gray-400 rounded-xl
+			mb-8">
+	  <div className="px-2 py-1 text-bold">
+	    {thread?.name}
+	  </div>
+	  {thread?.description && (
+	      <div className="px-4 my-2">
+		{thread.description.replaceAll ('\r\n', '\n')
+				   .replaceAll ('\r', '\n')
+				   .split ('\n')
+				   .map ((l, i) => <p key={i}>{l}</p>)}
+	      </div>)}
+	</div>
+
+	<div className="mb-16">
+	  <div>
+	    <label>名前：</label>
+	    <input type="text"
+		   value={name}
+		   onChange={ev => setName (ev.target.value)} />
+	  </div>
+	  <div>
+	    <label>削除用パスワード：</label>
+	    <input type="password"
+		   value={password}
+		   onChange={ev => setPassword (ev.target.value)} />
+	  </div>
+	  <div>
+	    <label>メッセージ：</label>
+	    <textarea value={message}
+		      onChange={ev => setMessage (ev.target.value)} />
+	  </div>
+	  <div>
+	    <label>
+	      <input type="checkbox"
+		     checked={withImage}
+		     onChange={ev => setWithImage (ev.target.checked)} />
+	      イラストを投稿に含める
+	    </label>
+	  </div>
+	  <ThreadCanvas ref={canvasRef} visible={withImage} />
+	  <div>
+	    <button onClick={handleSend} disabled={sending}>
+	      {sending ? '送信中...' : '送信'}
+	    </button>
+	  </div>
+	</div>
 	{loading ? 'Loading...' : (
 	    posts.length > 0
-	    ? posts.map (post => (
+	    ? (
+		<>
+		  <div>
+		    <label>
+		      並べ替え：
+		    <select value={sortKey} onChange={ev => {
+		      switch (ev.target.value)
+		      {
+		      case Sort.Newest:
+			searchParams.set ('sort', 'created_at')
+			searchParams.set ('order', 'desc')
+			break
+		      case Sort.Likes:
+			searchParams.set ('sort', 'score')
+			searchParams.set ('order', 'desc')
+			break
+		      case Sort.Dislikes:
+			searchParams.set ('sort', 'score')
+			searchParams.set ('order', 'asc')
+			break
+		      case Sort.Oldest:
+			searchParams.set ('sort', 'created_at')
+			searchParams.set ('order', 'asc')
+			break
+		      }
+		      setSearchParams (searchParams)
+		    }}>
+		      <option value={Sort.Newest}>投稿が新しい順</option>
+		      <option value={Sort.Likes}>評価が高い順</option>
+		      <option value={Sort.Dislikes}>評価が低い順</option>
+		      <option value={Sort.Oldest}>投稿が古い順</option>
+		    </select>
+		  </label>
+		</div>
+		  {posts.map (post => (
 		      <div key={post.id}
+			   id={post.postNo.toString ()}
 			   className="bg-white dark:bg-gray-800 p-3 m-4
 				      border border-gray-400 rounded-xl
 				      text-center">
@@ -117,10 +288,21 @@ export default () => {
 			    {post.good} <FaThumbsUp className="inline" />
 			  </a>
 			</div>
+			{post.deletedAt
+			 ? <em className="font-bold">削除されました．</em>
+			 : (
+			    <>
+			      {post.message && (
+				  <div className="text-left px-4 my-2">
+				    {post.message}
+				  </div>)}
+			      {post.imageUrl && (
 				  <div className="bg-white inline-block border border-black dark:border-white">
 				    <img src={`${ API_BASE_URL }${ post.imageUrl }`} />
-		  </div>
+				  </div>)}
-		</div>))
+			    </>)}
+		      </div>))}
+		</>)
 	    : 'レスないよ（笑）．')}
       </>)
 }

frontend/src/pages/threads/ThreadListPage.tsx

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import cn from 'classnames'
 import { useEffect, useState } from 'react'
 import { Accordion,
 	 AccordionItem,

frontend/src/types.ts

@@ -0,0 +1,23 @@
+export type Post = {
+    id:         number
+    threadId:   number
+    postNo:     number
+    name:       string | null
+    message:    string | null
+    imageUrl:   string | null
+    held:       boolean
+    sensitive:  boolean
+    good:       number
+    bad:        number
+    createdAt:  string
+    updatedAt:  string
+    deletedAt:  string | null }
+
+export type Thread = {
+    id:           number
+    name:         string
+    description:  string | null
+    postCount:    number
+    createdAt:    string
+    updatedAt:    string
+    deletedAt:    string | null }