cd-aichat 1.0.0

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

@@ -0,0 +1,307 @@
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import useCanvasMousedown from '../../hooks/useCanvasMousedown'
+import useCursor from '../../hooks/useCursor'
+import useHistory from '../../hooks/useHistory'
+import useOperation from '../../hooks/useOperation'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import ScreenshotsSizeColor from '../../ScreenshotsSizeColor'
+import {
+  HistoryItemEdit,
+  HistoryItemSource,
+  HistoryItemType,
+  Point
+} from '../../types'
+import ScreenshotsTextarea from '../../ScreenshotsTextarea'
+import useBounds from '../../hooks/useBounds'
+import useDrawSelect from '../../hooks/useDrawSelect'
+import useCanvasMousemove from '../../hooks/useCanvasMousemove'
+import useCanvasMouseup from '../../hooks/useCanvasMouseup'
+import useLang from '../../hooks/useLang'
+
+export interface TextData {
+  size: number;
+  color: string;
+  fontFamily: string;
+  x: number;
+  y: number;
+  text: string;
+}
+
+export interface TextEditData {
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}
+
+export interface TextareaBounds {
+  x: number;
+  y: number;
+  maxWidth: number;
+  maxHeight: number;
+}
+
+const sizes: Record<number, number> = {
+  3: 18,
+  6: 32,
+  9: 46
+}
+
+function draw (
+  ctx: CanvasRenderingContext2D,
+  action: HistoryItemSource<TextData, TextEditData>
+) {
+  const { size, color, fontFamily, x, y, text } = action.data
+  ctx.fillStyle = color
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.font = `${size}px ${fontFamily}`
+
+  const distance = action.editHistory.reduce(
+    (distance, { data }) => ({
+      x: distance.x + data.x2 - data.x1,
+      y: distance.y + data.y2 - data.y1
+    }),
+    { x: 0, y: 0 }
+  )
+
+  text.split('\n').forEach((item, index) => {
+    ctx.fillText(item, x + distance.x, y + distance.y + index * size)
+  })
+}
+
+function isHit (
+  ctx: CanvasRenderingContext2D,
+  action: HistoryItemSource<TextData, TextEditData>,
+  point: Point
+) {
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.font = `${action.data.size}px ${action.data.fontFamily}`
+
+  let width = 0
+  let height = 0
+
+  action.data.text.split('\n').forEach((item) => {
+    const measured = ctx.measureText(item)
+    if (width < measured.width) {
+      width = measured.width
+    }
+    height += action.data.size
+  })
+
+  const { x, y } = action.editHistory.reduce(
+    (distance, { data }) => ({
+      x: distance.x + data.x2 - data.x1,
+      y: distance.y + data.y2 - data.y1
+    }),
+    { x: 0, y: 0 }
+  )
+
+  const left = action.data.x + x
+  const top = action.data.y + y
+  const right = left + width
+  const bottom = top + height
+
+  return (
+    point.x >= left && point.x <= right && point.y >= top && point.y <= bottom
+  )
+}
+
+export default function Text (): ReactElement {
+  const lang = useLang()
+  const [history, historyDispatcher] = useHistory()
+  const [bounds] = useBounds()
+  const [operation, operationDispatcher] = useOperation()
+  const [, cursorDispatcher] = useCursor()
+  const canvasContextRef = useCanvasContextRef()
+  const [size, setSize] = useState(3)
+  const [color, setColor] = useState('#ee5126')
+  const textRef = useRef<HistoryItemSource<TextData, TextEditData> | null>(
+    null
+  )
+  const textEditRef = useRef<HistoryItemEdit<TextEditData, TextData> | null>(
+    null
+  )
+  const [textareaBounds, setTextareaBounds] = useState<TextareaBounds | null>(
+    null
+  )
+  const [text, setText] = useState<string>('')
+
+  const checked = operation === 'Text'
+
+  const selectText = useCallback(() => {
+    operationDispatcher.set('Text')
+    cursorDispatcher.set('default')
+  }, [operationDispatcher, cursorDispatcher])
+
+  const onSelectText = useCallback(() => {
+    if (checked) {
+      return
+    }
+    selectText()
+    historyDispatcher.clearSelect()
+  }, [checked, selectText, historyDispatcher])
+
+  const onSizeChange = useCallback((size: number) => {
+    if (textRef.current) {
+      textRef.current.data.size = sizes[size]
+    }
+    setSize(size)
+  }, [])
+
+  const onColorChange = useCallback((color: string) => {
+    if (textRef.current) {
+      textRef.current.data.color = color
+    }
+    setColor(color)
+  }, [])
+
+  const onTextareaChange = useCallback(
+    (value: string) => {
+      setText(value)
+      if (checked && textRef.current) {
+        textRef.current.data.text = value
+      }
+    },
+    [checked]
+  )
+
+  const onTextareaBlur = useCallback(() => {
+    if (textRef.current && textRef.current.data.text) {
+      historyDispatcher.push(textRef.current)
+    }
+    textRef.current = null
+    setText('')
+    setTextareaBounds(null)
+  }, [historyDispatcher])
+
+  const onDrawSelect = useCallback(
+    (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => {
+      if (action.name !== 'Text') {
+        return
+      }
+
+      selectText()
+
+      textEditRef.current = {
+        type: HistoryItemType.Edit,
+        data: {
+          x1: e.clientX,
+          y1: e.clientY,
+          x2: e.clientX,
+          y2: e.clientY
+        },
+        source: action as HistoryItemSource<TextData, TextEditData>
+      }
+
+      historyDispatcher.select(action)
+    },
+    [selectText, historyDispatcher]
+  )
+
+  const onMousedown = useCallback(
+    (e: MouseEvent) => {
+      if (!checked || !canvasContextRef.current || textRef.current || !bounds) {
+        return
+      }
+      const { left, top } =
+        canvasContextRef.current.canvas.getBoundingClientRect()
+      const fontFamily = window.getComputedStyle(
+        canvasContextRef.current.canvas
+      ).fontFamily
+      const x = e.clientX - left
+      const y = e.clientY - top
+
+      textRef.current = {
+        name: 'Text',
+        type: HistoryItemType.Source,
+        data: {
+          size: sizes[size],
+          color,
+          fontFamily,
+          x,
+          y,
+          text: ''
+        },
+        editHistory: [],
+        draw,
+        isHit
+      }
+
+      setTextareaBounds({
+        x: e.clientX,
+        y: e.clientY,
+        maxWidth: bounds.width - x,
+        maxHeight: bounds.height - y
+      })
+    },
+    [checked, size, color, bounds, canvasContextRef]
+  )
+
+  const onMousemove = useCallback(
+    (e: MouseEvent): void => {
+      if (!checked) {
+        return
+      }
+
+      if (textEditRef.current) {
+        textEditRef.current.data.x2 = e.clientX
+        textEditRef.current.data.y2 = e.clientY
+        if (history.top !== textEditRef.current) {
+          textEditRef.current.source.editHistory.push(textEditRef.current)
+          historyDispatcher.push(textEditRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      }
+    },
+    [checked, history, historyDispatcher]
+  )
+
+  const onMouseup = useCallback((): void => {
+    if (!checked) {
+      return
+    }
+
+    textEditRef.current = null
+  }, [checked])
+
+  useDrawSelect(onDrawSelect)
+  useCanvasMousedown(onMousedown)
+  useCanvasMousemove(onMousemove)
+  useCanvasMouseup(onMouseup)
+
+  return (
+    <>
+      <ScreenshotsButton
+        title={lang.operation_text_title}
+        icon='icon-text'
+        checked={checked}
+        onClick={onSelectText}
+        option={
+          <ScreenshotsSizeColor
+            size={size}
+            color={color}
+            onSizeChange={onSizeChange}
+            onColorChange={onColorChange}
+          />
+        }
+      />
+      {checked && textareaBounds && (
+        <ScreenshotsTextarea
+          x={textareaBounds.x}
+          y={textareaBounds.y}
+          maxWidth={textareaBounds.maxWidth}
+          maxHeight={textareaBounds.maxHeight}
+          size={sizes[size]}
+          color={color}
+          value={text}
+          onChange={onTextareaChange}
+          onBlur={onTextareaBlur}
+        />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,22 @@
+import React, { ReactElement, useCallback } from 'react'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import useHistory from '../../hooks/useHistory'
+import useLang from '../../hooks/useLang'
+
+export default function Undo (): ReactElement {
+  const lang = useLang()
+  const [history, historyDispatcher] = useHistory()
+
+  const onClick = useCallback(() => {
+    historyDispatcher.undo()
+  }, [historyDispatcher])
+
+  return (
+    <ScreenshotsButton
+      title={lang.operation_undo_title}
+      icon='icon-undo'
+      disabled={history.index === -1}
+      onClick={onClick}
+    />
+  )
+}

package/src/components/screenshot/operations/index.ts

@@ -0,0 +1,34 @@
+import Ok from './Ok';
+import Cancel from './Cancel';
+import Save from './Save';
+import Redo from './Redo';
+import Undo from './Undo';
+import Mosaic from './Mosaic';
+import Text from './Text';
+import Brush from './Brush';
+import Arrow from './Arrow';
+import Ellipse from './Ellipse';
+import Rectangle from './Rectangle';
+import Search from './Search';
+import Scan from './Scan';
+import Pin from './Pin';
+
+export default [
+  Pin,
+  Scan,
+  Search,
+  '|',
+  Rectangle,
+  Ellipse,
+  Arrow,
+  Brush,
+  Text,
+  Mosaic,
+  '|',
+  Undo,
+  Redo,
+  '|',
+  Save,
+  Cancel,
+  Ok,
+];

package/src/components/screenshot/operations/utils.ts

@@ -0,0 +1,34 @@
+import { HistoryItemSource, Point } from '../types'
+
+const CircleRadius = 4
+
+export function drawDragCircle (ctx: CanvasRenderingContext2D, x: number, y: number) {
+  ctx.lineWidth = 1
+  ctx.strokeStyle = '#000000'
+  ctx.fillStyle = '#ffffff'
+
+  ctx.beginPath()
+  ctx.arc(x, y, CircleRadius, 0, 2 * Math.PI)
+  ctx.fill()
+  ctx.stroke()
+}
+
+export function isHit<S, E> (ctx: CanvasRenderingContext2D, action: HistoryItemSource<S, E>, point: Point) {
+  action.draw(ctx, action)
+  const { data } = ctx.getImageData(point.x, point.y, 1, 1)
+  return data.some(val => val !== 0)
+}
+
+export function isHitCircle (canvas: HTMLCanvasElement | null, e: MouseEvent, point: Point) {
+  if (!canvas) {
+    return false
+  }
+
+  const { left, top } = canvas.getBoundingClientRect()
+
+  const x = e.clientX - left
+  const y = e.clientY - top
+
+  // 点到圆心的距离是否小于半径
+  return (point.x - x) ** 2 + (point.y - y) ** 2 < CircleRadius ** 2
+}

package/src/components/screenshot/screenshots.scss

@@ -0,0 +1,13 @@
+@import "./var.scss";
+
+.screenshots {
+	position: relative;
+	transform: translateZ(0);
+	cursor: crosshair;
+	font-family: $font-family;
+	&,
+	* {
+		box-sizing: border-box;
+		user-select: none;
+	}
+}

package/src/components/screenshot/types.ts

@@ -0,0 +1,53 @@
+import { MutableRefObject } from 'react'
+
+export type CanvasContextRef = MutableRefObject<CanvasRenderingContext2D | null>
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type EmiterListener = (...args: any) => unknown
+
+export type Emiter = Record<string, EmiterListener[]>
+
+export type EmiterRef = MutableRefObject<Emiter>
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export enum HistoryItemType {
+  Edit,
+  Source
+}
+
+export interface HistoryItemEdit<E, S> {
+  type: HistoryItemType.Edit
+  data: E
+  source: HistoryItemSource<S, E>
+}
+
+export interface HistoryItemSource<S, E> {
+  name: string
+  type: HistoryItemType.Source
+  data: S
+  isSelected?: boolean
+  editHistory: HistoryItemEdit<E, S>[]
+  draw: (ctx: CanvasRenderingContext2D, action: HistoryItemSource<S, E>) => void
+  isHit?: (ctx: CanvasRenderingContext2D, action: HistoryItemSource<S, E>, point: Point) => boolean
+}
+
+export type HistoryItem<S, E> = HistoryItemEdit<E, S> | HistoryItemSource<S, E>
+
+export interface History {
+  index: number
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  stack: HistoryItem<any, any>[]
+}
+
+export interface Bounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type Position = Point

package/src/components/screenshot/useGetLoadedImage.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+export default function useGetLoadedImage (url?: string): HTMLImageElement | null {
+  const [image, setImage] = useState<HTMLImageElement | null>(null)
+
+  useEffect(() => {
+    // 先置空图片
+    setImage(null)
+    if (url == null) {
+      return
+    }
+
+    const $image = document.createElement('img')
+
+    const onLoad = () => setImage($image)
+    const onError = () => setImage(null)
+
+    $image.addEventListener('load', onLoad)
+    $image.addEventListener('error', onError)
+    $image.src = url
+
+    return () => {
+      $image.removeEventListener('load', onLoad)
+      $image.removeEventListener('error', onError)
+    }
+  }, [url])
+
+  return image
+}

package/src/components/screenshot/var.scss

@@ -0,0 +1,107 @@
+$border-color: #39f;
+$point-color: $border-color;
+$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+	Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji,
+	segoe ui emoji, Segoe UI Symbol, noto color emoji;
+
+$borders:
+	// left,top,width,height,transform
+	(
+		"top": (
+			left: 0,
+			top: 0,
+			width: 100%,
+			height: 2px,
+			transform: translateY(-50%),
+		),
+	),
+	(
+		"right": (
+			left: 100%,
+			top: 0,
+			width: 2px,
+			height: 100%,
+			transform: translateX(-50%),
+		),
+	),
+	(
+		"bottom": (
+			left: 0,
+			top: 100%,
+			width: 100%,
+			height: 2px,
+			transform: translateY(-50%),
+		),
+	),
+	(
+		"left": (
+			left: 0,
+			top: 0,
+			width: 2px,
+			height: 100%,
+			transform: translateX(-50%),
+		),
+	);
+
+$points:
+	// left,top,cursor
+	(
+		top: (
+			left: 50%,
+			top: 0,
+			cursor: ns-resize,
+		),
+	),
+	(
+		top-right: (
+			left: 100%,
+			top: 0,
+			cursor: nesw-resize,
+		),
+	),
+	(
+		right: (
+			left: 100%,
+			top: 50%,
+			cursor: ew-resize,
+		),
+	),
+	(
+		right-bottom: (
+			left: 100%,
+			top: 100%,
+			cursor: nwse-resize,
+		),
+	),
+	(
+		bottom: (
+			left: 50%,
+			top: 100%,
+			cursor: ns-resize,
+		),
+	),
+	(
+		bottom-left: (
+			left: 0,
+			top: 100%,
+			cursor: nesw-resize,
+		),
+	),
+	(
+		left: (
+			left: 0,
+			top: 50%,
+			cursor: ew-resize,
+		),
+	),
+	(
+		left-top: (
+			left: 0,
+			top: 0,
+			cursor: nwse-resize,
+		),
+	);
+
+$button-size: 35px;
+
+$sizecolor-size: 35px;

package/src/components/screenshot/zh_CN.ts

@@ -0,0 +1,37 @@
+export interface Lang {
+  magnifier_position_label: string;
+  operation_ok_title: string;
+  operation_cancel_title: string;
+  operation_save_title: string;
+  operation_redo_title: string;
+  operation_undo_title: string;
+  operation_mosaic_title: string;
+  operation_text_title: string;
+  operation_brush_title: string;
+  operation_arrow_title: string;
+  operation_ellipse_title: string;
+  operation_rectangle_title: string;
+  operation_search_title: string;
+  operation_scan_title: string;
+  operation_pin_title: string;
+}
+
+const zhCN: Lang = {
+  magnifier_position_label: '坐标',
+  operation_ok_title: '确定',
+  operation_cancel_title: '取消',
+  operation_save_title: '保存',
+  operation_redo_title: '重做',
+  operation_undo_title: '撤销',
+  operation_mosaic_title: '马赛克',
+  operation_text_title: '文本',
+  operation_brush_title: '画笔',
+  operation_arrow_title: '箭头',
+  operation_ellipse_title: '椭圆',
+  operation_rectangle_title: '矩形',
+  operation_search_title: '搜图',
+  operation_scan_title: '扫码',
+  operation_pin_title: '贴图',
+};
+
+export default zhCN;