cd-aichat 1.0.0

package/src/components/screenshot/operations/Ellipse/draw.ts

@@ -0,0 +1,96 @@
+import { EllipseData, EllipseEditData, EllipseEditType } from '.'
+import { HistoryItemSource } from '../../types'
+import { drawDragCircle } from '../utils'
+
+export function getEditedEllipseData (action: HistoryItemSource<EllipseData, EllipseEditData>) {
+  let { x1, y1, x2, y2 } = action.data
+
+  action.editHistory.forEach(({ data }) => {
+    const x = data.x2 - data.x1
+    const y = data.y2 - data.y1
+    if (data.type === EllipseEditType.Move) {
+      x1 += x
+      y1 += y
+      x2 += x
+      y2 += y
+    } else if (data.type === EllipseEditType.ResizeTop) {
+      y1 += y
+    } else if (data.type === EllipseEditType.ResizeRightTop) {
+      x2 += x
+      y1 += y
+    } else if (data.type === EllipseEditType.ResizeRight) {
+      x2 += x
+    } else if (data.type === EllipseEditType.ResizeRightBottom) {
+      x2 += x
+      y2 += y
+    } else if (data.type === EllipseEditType.ResizeBottom) {
+      y2 += y
+    } else if (data.type === EllipseEditType.ResizeLeftBottom) {
+      x1 += x
+      y2 += y
+    } else if (data.type === EllipseEditType.ResizeLeft) {
+      x1 += x
+    } else if (data.type === EllipseEditType.ResizeLeftTop) {
+      x1 += x
+      y1 += y
+    }
+  })
+
+  return {
+    ...action.data,
+    x1,
+    x2,
+    y1,
+    y2
+  }
+}
+
+export default function draw (ctx: CanvasRenderingContext2D, action: HistoryItemSource<EllipseData, EllipseEditData>) {
+  const { size, color, x1, y1, x2, y2 } = getEditedEllipseData(action)
+  ctx.lineCap = 'butt'
+  ctx.lineJoin = 'miter'
+  ctx.lineWidth = size
+  ctx.strokeStyle = color
+
+  const x = (x1 + x2) / 2
+  const y = (y1 + y2) / 2
+  const rx = Math.abs(x2 - x1) / 2
+  const ry = Math.abs(y2 - y1) / 2
+  const k = 0.5522848
+  // 水平控制点偏移量
+  const ox = rx * k
+  // 垂直控制点偏移量
+  const oy = ry * k
+  // 从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
+  ctx.beginPath()
+  ctx.moveTo(x - rx, y)
+  ctx.bezierCurveTo(x - rx, y - oy, x - ox, y - ry, x, y - ry)
+  ctx.bezierCurveTo(x + ox, y - ry, x + rx, y - oy, x + rx, y)
+  ctx.bezierCurveTo(x + rx, y + oy, x + ox, y + ry, x, y + ry)
+  ctx.bezierCurveTo(x - ox, y + ry, x - rx, y + oy, x - rx, y)
+  ctx.closePath()
+  ctx.stroke()
+
+  if (action.isSelected) {
+    ctx.lineWidth = 1
+    ctx.strokeStyle = '#000000'
+    ctx.fillStyle = '#ffffff'
+
+    ctx.beginPath()
+    ctx.moveTo(x1, y1)
+    ctx.lineTo(x2, y1)
+    ctx.lineTo(x2, y2)
+    ctx.lineTo(x1, y2)
+    ctx.closePath()
+    ctx.stroke()
+
+    drawDragCircle(ctx, (x1 + x2) / 2, y1)
+    drawDragCircle(ctx, x2, y1)
+    drawDragCircle(ctx, x2, (y1 + y2) / 2)
+    drawDragCircle(ctx, x2, y2)
+    drawDragCircle(ctx, (x1 + x2) / 2, y2)
+    drawDragCircle(ctx, x1, y2)
+    drawDragCircle(ctx, x1, (y1 + y2) / 2)
+    drawDragCircle(ctx, x1, y1)
+  }
+}

package/src/components/screenshot/operations/Ellipse/index.tsx

@@ -0,0 +1,245 @@
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import useCanvasMousedown from '../../hooks/useCanvasMousedown'
+import useCanvasMousemove from '../../hooks/useCanvasMousemove'
+import useCanvasMouseup from '../../hooks/useCanvasMouseup'
+import useCursor from '../../hooks/useCursor'
+import useDrawSelect from '../../hooks/useDrawSelect'
+import useHistory from '../../hooks/useHistory'
+import useLang from '../../hooks/useLang'
+import useOperation from '../../hooks/useOperation'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import ScreenshotsSizeColor from '../../ScreenshotsSizeColor'
+import { HistoryItemEdit, HistoryItemSource, HistoryItemType } from '../../types'
+import { isHit, isHitCircle } from '../utils'
+import draw, { getEditedEllipseData } from './draw'
+
+export interface EllipseData {
+  size: number
+  color: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export enum EllipseEditType {
+  Move,
+  ResizeTop,
+  ResizeRightTop,
+  ResizeRight,
+  ResizeRightBottom,
+  ResizeBottom,
+  ResizeLeftBottom,
+  ResizeLeft,
+  ResizeLeftTop
+}
+
+export interface EllipseEditData {
+  type: EllipseEditType
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export default function Ellipse (): ReactElement {
+  const lang = useLang()
+  const [history, historyDispatcher] = useHistory()
+  const [operation, operationDispatcher] = useOperation()
+  const [, cursorDispatcher] = useCursor()
+  const canvasContextRef = useCanvasContextRef()
+  const [size, setSize] = useState(3)
+  const [color, setColor] = useState('#ee5126')
+  const ellipseRef = useRef<HistoryItemSource<EllipseData, EllipseEditData> | null>(null)
+  const ellipseEditRef = useRef<HistoryItemEdit<EllipseEditData, EllipseData> | null>(null)
+
+  const checked = operation === 'Ellipse'
+
+  const selectEllipse = useCallback(() => {
+    operationDispatcher.set('Ellipse')
+    cursorDispatcher.set('crosshair')
+  }, [operationDispatcher, cursorDispatcher])
+
+  const onSelectEllipse = useCallback(() => {
+    if (checked) {
+      return
+    }
+    selectEllipse()
+    historyDispatcher.clearSelect()
+  }, [checked, selectEllipse, historyDispatcher])
+
+  const onDrawSelect = useCallback(
+    (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => {
+      if (action.name !== 'Ellipse' || !canvasContextRef.current) {
+        return
+      }
+
+      const source = action as HistoryItemSource<EllipseData, EllipseEditData>
+
+      selectEllipse()
+
+      const { x1, y1, x2, y2 } = getEditedEllipseData(source)
+
+      let type = EllipseEditType.Move
+      if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: (x1 + x2) / 2,
+          y: y1
+        })
+      ) {
+        type = EllipseEditType.ResizeTop
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x2,
+          y: y1
+        })
+      ) {
+        type = EllipseEditType.ResizeRightTop
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x2,
+          y: (y1 + y2) / 2
+        })
+      ) {
+        type = EllipseEditType.ResizeRight
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x2,
+          y: y2
+        })
+      ) {
+        type = EllipseEditType.ResizeRightBottom
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: (x1 + x2) / 2,
+          y: y2
+        })
+      ) {
+        type = EllipseEditType.ResizeBottom
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x1,
+          y: y2
+        })
+      ) {
+        type = EllipseEditType.ResizeLeftBottom
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x1,
+          y: (y1 + y2) / 2
+        })
+      ) {
+        type = EllipseEditType.ResizeLeft
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x1,
+          y: y1
+        })
+      ) {
+        type = EllipseEditType.ResizeLeftTop
+      }
+
+      ellipseEditRef.current = {
+        type: HistoryItemType.Edit,
+        data: {
+          type,
+          x1: e.clientX,
+          y1: e.clientY,
+          x2: e.clientX,
+          y2: e.clientY
+        },
+        source
+      }
+
+      historyDispatcher.select(action)
+    },
+    [canvasContextRef, selectEllipse, historyDispatcher]
+  )
+
+  const onMousedown = useCallback(
+    (e: MouseEvent) => {
+      if (!checked || !canvasContextRef.current || ellipseRef.current) {
+        return
+      }
+
+      const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+      const x = e.clientX - left
+      const y = e.clientY - top
+      ellipseRef.current = {
+        name: 'Ellipse',
+        type: HistoryItemType.Source,
+        data: {
+          size,
+          color,
+          x1: x,
+          y1: y,
+          x2: x,
+          y2: y
+        },
+        editHistory: [],
+        draw,
+        isHit
+      }
+    },
+    [checked, size, color, canvasContextRef]
+  )
+
+  const onMousemove = useCallback(
+    (e: MouseEvent) => {
+      if (!checked || !canvasContextRef.current) {
+        return
+      }
+
+      if (ellipseEditRef.current) {
+        ellipseEditRef.current.data.x2 = e.clientX
+        ellipseEditRef.current.data.y2 = e.clientY
+        if (history.top !== ellipseEditRef.current) {
+          ellipseEditRef.current.source.editHistory.push(ellipseEditRef.current)
+          historyDispatcher.push(ellipseEditRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      } else if (ellipseRef.current) {
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+        ellipseRef.current.data.x2 = e.clientX - left
+        ellipseRef.current.data.y2 = e.clientY - top
+
+        if (history.top !== ellipseRef.current) {
+          historyDispatcher.push(ellipseRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      }
+    },
+    [checked, canvasContextRef, history, historyDispatcher]
+  )
+
+  const onMouseup = useCallback(() => {
+    if (!checked) {
+      return
+    }
+
+    if (ellipseRef.current) {
+      historyDispatcher.clearSelect()
+    }
+
+    ellipseRef.current = null
+    ellipseEditRef.current = null
+  }, [checked, historyDispatcher])
+
+  useDrawSelect(onDrawSelect)
+  useCanvasMousedown(onMousedown)
+  useCanvasMousemove(onMousemove)
+  useCanvasMouseup(onMouseup)
+
+  return (
+    <ScreenshotsButton
+      title={lang.operation_ellipse_title}
+      icon='icon-ellipse'
+      checked={checked}
+      onClick={onSelectEllipse}
+      option={<ScreenshotsSizeColor size={size} color={color} onSizeChange={setSize} onColorChange={setColor} />}
+    />
+  )
+}

package/src/components/screenshot/operations/Mosaic/index.tsx

@@ -0,0 +1,223 @@
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import ScreenshotsSize from '../../ScreenshotsSize'
+import useCanvasMousedown from '../../hooks/useCanvasMousedown'
+import useCanvasMousemove from '../../hooks/useCanvasMousemove'
+import useCanvasMouseup from '../../hooks/useCanvasMouseup'
+import { HistoryItemSource, HistoryItemType } from '../../types'
+import useOperation from '../../hooks/useOperation'
+import useCursor from '../../hooks/useCursor'
+import useStore from '../../hooks/useStore'
+import useBounds from '../../hooks/useBounds'
+import useHistory from '../../hooks/useHistory'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import useLang from '../../hooks/useLang'
+
+export interface MosaicTile {
+  x: number
+  y: number
+  color: number[]
+}
+
+export interface MosaicData {
+  size: number
+  tiles: MosaicTile[]
+}
+
+function getColor (x: number, y: number, imageData: ImageData): number[] {
+  if (!imageData) {
+    return [0, 0, 0, 0]
+  }
+  const { data, width } = imageData
+
+  const index = y * width * 4 + x * 4
+
+  return Array.from(data.slice(index, index + 4))
+}
+
+function draw (ctx: CanvasRenderingContext2D, action: HistoryItemSource<MosaicData, null>) {
+  const { tiles, size } = action.data
+  tiles.forEach(tile => {
+    const r = Math.round(tile.color[0])
+    const g = Math.round(tile.color[1])
+    const b = Math.round(tile.color[2])
+    const a = tile.color[3] / 255
+
+    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`
+    ctx.fillRect(tile.x - size / 2, tile.y - size / 2, size, size)
+  })
+}
+
+export default function Mosaic (): ReactElement {
+  const lang = useLang()
+  const { image, width, height } = useStore()
+  const [operation, operationDispatcher] = useOperation()
+  const canvasContextRef = useCanvasContextRef()
+  const [history, historyDispatcher] = useHistory()
+  const [bounds] = useBounds()
+  const [, cursorDispatcher] = useCursor()
+  const [size, setSize] = useState(3)
+  const imageDataRef = useRef<ImageData | null>(null)
+  const mosaicRef = useRef<HistoryItemSource<MosaicData, null> | null>(null)
+
+  const checked = operation === 'Mosaic'
+
+  const selectMosaic = useCallback(() => {
+    operationDispatcher.set('Mosaic')
+    cursorDispatcher.set('crosshair')
+  }, [operationDispatcher, cursorDispatcher])
+
+  const onSelectMosaic = useCallback(() => {
+    if (checked) {
+      return
+    }
+    selectMosaic()
+    historyDispatcher.clearSelect()
+  }, [checked, selectMosaic, historyDispatcher])
+
+  const onMousedown = useCallback(
+    (e: MouseEvent): void => {
+      if (!checked || mosaicRef.current || !imageDataRef.current || !canvasContextRef.current) {
+        return
+      }
+
+      const rect = canvasContextRef.current.canvas.getBoundingClientRect()
+      const x = e.clientX - rect.x
+      const y = e.clientY - rect.y
+      const mosaicSize = size * 2
+      mosaicRef.current = {
+        name: 'Mosaic',
+        type: HistoryItemType.Source,
+        data: {
+          size: mosaicSize,
+          tiles: [
+            {
+              x,
+              y,
+              color: getColor(x, y, imageDataRef.current)
+            }
+          ]
+        },
+        editHistory: [],
+        draw
+      }
+    },
+    [checked, size, canvasContextRef]
+  )
+
+  const onMousemove = useCallback(
+    (e: MouseEvent): void => {
+      if (!checked || !mosaicRef.current || !canvasContextRef.current || !imageDataRef.current) {
+        return
+      }
+
+      const rect = canvasContextRef.current.canvas.getBoundingClientRect()
+      const x = e.clientX - rect.x
+      const y = e.clientY - rect.y
+
+      const mosaicSize = mosaicRef.current.data.size
+      const mosaicTiles = mosaicRef.current.data.tiles
+
+      let lastTile = mosaicTiles[mosaicTiles.length - 1]
+
+      if (!lastTile) {
+        mosaicTiles.push({
+          x,
+          y,
+          color: getColor(x, y, imageDataRef.current)
+        })
+      } else {
+        const dx = lastTile.x - x
+        const dy = lastTile.y - y
+        // 减小点的个数
+        let length = Math.sqrt(dx ** 2 + dy ** 2)
+        const sin = -dy / length
+        const cos = -dx / length
+
+        while (length > mosaicSize) {
+          const cx = Math.floor(lastTile.x + mosaicSize * cos)
+          const cy = Math.floor(lastTile.y + mosaicSize * sin)
+          lastTile = {
+            x: cx,
+            y: cy,
+            color: getColor(cx, cy, imageDataRef.current)
+          }
+          mosaicTiles.push(lastTile)
+          length -= mosaicSize
+        }
+
+        // 最后一个位置补充一块
+        if (length > mosaicSize / 2) {
+          mosaicTiles.push({
+            x,
+            y,
+            color: getColor(x, y, imageDataRef.current)
+          })
+        }
+      }
+
+      if (history.top !== mosaicRef.current) {
+        historyDispatcher.push(mosaicRef.current)
+      } else {
+        historyDispatcher.set(history)
+      }
+    },
+    [checked, canvasContextRef, history, historyDispatcher]
+  )
+
+  const onMouseup = useCallback(() => {
+    if (!checked) {
+      return
+    }
+
+    mosaicRef.current = null
+  }, [checked])
+
+  useCanvasMousedown(onMousedown)
+  useCanvasMousemove(onMousemove)
+  useCanvasMouseup(onMouseup)
+
+  useEffect(() => {
+    if (!bounds || !image || !checked) {
+      return
+    }
+
+    const $canvas = document.createElement('canvas')
+
+    const canvasContext = $canvas.getContext('2d')
+
+    if (!canvasContext) {
+      return
+    }
+
+    $canvas.width = bounds.width
+    $canvas.height = bounds.height
+
+    const rx = image.naturalWidth / width
+    const ry = image.naturalHeight / height
+
+    canvasContext.drawImage(
+      image,
+      bounds.x * rx,
+      bounds.y * ry,
+      bounds.width * rx,
+      bounds.height * ry,
+      0,
+      0,
+      bounds.width,
+      bounds.height
+    )
+
+    imageDataRef.current = canvasContext.getImageData(0, 0, bounds.width, bounds.height)
+  }, [width, height, bounds, image, checked])
+
+  return (
+    <ScreenshotsButton
+      title={lang.operation_mosaic_title}
+      icon='icon-mosaic'
+      checked={checked}
+      onClick={onSelectMosaic}
+      option={<ScreenshotsSize value={size} onChange={setSize} />}
+    />
+  )
+}

package/src/components/screenshot/operations/Ok/index.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement, useCallback } from 'react'
+import useStore from '../../hooks/useStore'
+import useCall from '../../hooks/useCall'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import useHistory from '../../hooks/useHistory'
+import useReset from '../../hooks/useReset'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import composeImage from '../../composeImage'
+
+export default function Ok (): ReactElement {
+  const { image, width, height, history, bounds, lang } = useStore()
+  const canvasContextRef = useCanvasContextRef()
+  const [, historyDispatcher] = useHistory()
+  const call = useCall()
+  const reset = useReset()
+
+  const onClick = useCallback(() => {
+    historyDispatcher.clearSelect()
+    setTimeout(() => {
+      if (!canvasContextRef.current || !image || !bounds) {
+        return
+      }
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds
+      }).then(blob => {
+        call('onOk', blob, bounds)
+        reset()
+      })
+    })
+  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset])
+
+  return <ScreenshotsButton title={lang.operation_ok_title} icon='icon-ok' onClick={onClick} />
+}

package/src/components/screenshot/operations/Pin/index.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement, useCallback } from 'react';
+import useStore from '../../hooks/useStore';
+import useCall from '../../hooks/useCall';
+import useCanvasContextRef from '../../hooks/useCanvasContextRef';
+import useHistory from '../../hooks/useHistory';
+import useReset from '../../hooks/useReset';
+import ScreenshotsButton from '../../ScreenshotsButton';
+import composeImage from '../../composeImage';
+
+export default function Pin(): ReactElement {
+  const { image, width, height, history, bounds, lang } = useStore();
+  const canvasContextRef = useCanvasContextRef();
+  const [, historyDispatcher] = useHistory();
+  const call = useCall();
+  const reset = useReset();
+
+  const onClick = useCallback(() => {
+    historyDispatcher.clearSelect();
+    setTimeout(() => {
+      if (!canvasContextRef.current || !image || !bounds) {
+        return;
+      }
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds,
+      }).then((blob) => {
+        call('onPin', blob, bounds);
+        reset();
+      });
+    });
+  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
+
+  return <ScreenshotsButton title={lang.operation_pin_title} icon="icon-pin" onClick={onClick} />;
+}