cd-aichat 1.0.0

package/src/components/screenshot/index.tsx

@@ -0,0 +1,169 @@
+import React, {
+	MouseEvent,
+	ReactElement,
+	useCallback,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import composeImage from "./composeImage";
+import "./icons/iconfont.scss";
+import "./screenshots.scss";
+import ScreenshotsBackground from "./ScreenshotsBackground";
+import ScreenshotsCanvas from "./ScreenshotsCanvas";
+import ScreenshotsContext from "./ScreenshotsContext";
+import ScreenshotsOperations from "./ScreenshotsOperations";
+import { Bounds, Emiter, History } from "./types";
+import useGetLoadedImage from "./useGetLoadedImage";
+import zhCN, { Lang } from "./zh_CN";
+
+export interface ScreenshotsProps {
+	url?: string;
+	width: number;
+	height: number;
+	lang?: Partial<Lang>;
+	className?: string;
+	[key: string]: unknown;
+}
+
+export default function Screenshots({
+	url,
+	width,
+	height,
+	lang,
+	className,
+	...props
+}: ScreenshotsProps): ReactElement {
+	const image = useGetLoadedImage(url);
+	const canvasContextRef = useRef<CanvasRenderingContext2D>(null);
+	const emiterRef = useRef<Emiter>({});
+	const [history, setHistory] = useState<History>({
+		index: -1,
+		stack: [],
+	});
+	const [bounds, setBounds] = useState<Bounds | null>(null);
+	const [cursor, setCursor] = useState<string | undefined>("move");
+	const [operation, setOperation] = useState<string | undefined>(undefined);
+
+	const store = {
+		url,
+		width,
+		height,
+		image,
+		lang: {
+			...zhCN,
+			...lang,
+		},
+		emiterRef,
+		canvasContextRef,
+		history,
+		bounds,
+		cursor,
+		operation,
+	};
+
+	const call = useCallback(
+		<T extends unknown[]>(funcName: string, ...args: T) => {
+			const func = props[funcName];
+			if (typeof func === "function") {
+				func(...args);
+			}
+		},
+		[props],
+	);
+
+	const dispatcher = {
+		call,
+		setHistory,
+		setBounds,
+		setCursor,
+		setOperation,
+	};
+
+	const classNames = ["screenshots"];
+
+	if (className) {
+		classNames.push(className);
+	}
+
+	const reset = () => {
+		emiterRef.current = {};
+		setHistory({
+			index: -1,
+			stack: [],
+		});
+		setBounds(null);
+		setCursor("move");
+		setOperation(undefined);
+	};
+
+	const onDoubleClick = useCallback(
+		async (e: MouseEvent) => {
+			if (e.button !== 0 || !image) {
+				return;
+			}
+			if (bounds && canvasContextRef.current) {
+				composeImage({
+					image,
+					width,
+					height,
+					history,
+					bounds,
+				}).then((blob) => {
+					call("onOk", blob, bounds);
+					reset();
+				});
+			} else {
+				const targetBounds = {
+					x: 0,
+					y: 0,
+					width,
+					height,
+				};
+				composeImage({
+					image,
+					width,
+					height,
+					history,
+					bounds: targetBounds,
+				}).then((blob) => {
+					call("onOk", blob, targetBounds);
+					reset();
+				});
+			}
+		},
+		[image, history, bounds, width, height, call],
+	);
+
+	const onContextMenu = useCallback(
+		(e: MouseEvent) => {
+			if (e.button !== 2) {
+				return;
+			}
+			e.preventDefault();
+			call("onCancel");
+			reset();
+		},
+		[call],
+	);
+
+	// url变化，重置截图区域
+	useLayoutEffect(() => {
+		reset();
+	}, [url]);
+
+	return (
+		<ScreenshotsContext.Provider value={{ store, dispatcher }}>
+			<div
+				className={classNames.join(" ")}
+				style={{ width, height }}
+				onDoubleClick={onDoubleClick}
+				onContextMenu={onContextMenu}
+			>
+				<ScreenshotsBackground />
+				<ScreenshotsCanvas ref={canvasContextRef} />
+				<ScreenshotsOperations />
+			</div>
+		</ScreenshotsContext.Provider>
+	);
+}

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

@@ -0,0 +1,56 @@
+import { ArrowData, ArrowEditData, ArrowEditType } from '.'
+import { HistoryItemSource } from '../../types'
+import { drawDragCircle } from '../utils'
+
+export function getEditedArrowData (action: HistoryItemSource<ArrowData, ArrowEditData>) {
+  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 === ArrowEditType.Move) {
+      x1 += x
+      y1 += y
+      x2 += x
+      y2 += y
+    } else if (data.type === ArrowEditType.MoveStart) {
+      x1 += x
+      y1 += y
+    } else if (data.type === ArrowEditType.MoveEnd) {
+      x2 += x
+      y2 += y
+    }
+  })
+  return {
+    ...action.data,
+    x1,
+    x2,
+    y1,
+    y2
+  }
+}
+
+export default function draw (ctx: CanvasRenderingContext2D, action: HistoryItemSource<ArrowData, ArrowEditData>) {
+  const { size, color, x1, x2, y1, y2 } = getEditedArrowData(action)
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'bevel'
+  ctx.lineWidth = size
+  ctx.strokeStyle = color
+
+  const dx = x2 - x1
+  const dy = y2 - y1
+  // 箭头头部长度
+  const length = size * 3
+  const angle = Math.atan2(dy, dx)
+  ctx.beginPath()
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y2)
+  ctx.lineTo(x2 - length * Math.cos(angle - Math.PI / 6), y2 - length * Math.sin(angle - Math.PI / 6))
+  ctx.moveTo(x2, y2)
+  ctx.lineTo(x2 - length * Math.cos(angle + Math.PI / 6), y2 - length * Math.sin(angle + Math.PI / 6))
+  ctx.stroke()
+
+  if (action.isSelected) {
+    drawDragCircle(ctx, x1, y1)
+    drawDragCircle(ctx, x2, y2)
+  }
+}

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

@@ -0,0 +1,193 @@
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import ScreenshotsSizeColor from '../../ScreenshotsSizeColor'
+import useCanvasMousedown from '../../hooks/useCanvasMousedown'
+import useCanvasMousemove from '../../hooks/useCanvasMousemove'
+import useCanvasMouseup from '../../hooks/useCanvasMouseup'
+import { HistoryItemEdit, HistoryItemSource, HistoryItemType } from '../../types'
+import useCursor from '../../hooks/useCursor'
+import useOperation from '../../hooks/useOperation'
+import useHistory from '../../hooks/useHistory'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import { isHit, isHitCircle } from '../utils'
+import useDrawSelect from '../../hooks/useDrawSelect'
+import draw, { getEditedArrowData } from './draw'
+import useLang from '../../hooks/useLang'
+
+export interface ArrowData {
+  size: number
+  color: string
+  x1: number
+  x2: number
+  y1: number
+  y2: number
+}
+
+export enum ArrowEditType {
+  Move,
+  MoveStart,
+  MoveEnd
+}
+
+export interface ArrowEditData {
+  type: ArrowEditType
+  x1: number
+  x2: number
+  y1: number
+  y2: number
+}
+
+export default function Arrow (): ReactElement {
+  const lang = useLang()
+  const [, cursorDispatcher] = useCursor()
+  const [operation, operationDispatcher] = useOperation()
+  const [history, historyDispatcher] = useHistory()
+  const canvasContextRef = useCanvasContextRef()
+  const [size, setSize] = useState(3)
+  const [color, setColor] = useState('#ee5126')
+  const arrowRef = useRef<HistoryItemSource<ArrowData, ArrowEditData> | null>(null)
+  const arrowEditRef = useRef<HistoryItemEdit<ArrowEditData, ArrowData> | null>(null)
+
+  const checked = operation === 'Arrow'
+
+  const selectArrow = useCallback(() => {
+    operationDispatcher.set('Arrow')
+    cursorDispatcher.set('default')
+  }, [operationDispatcher, cursorDispatcher])
+
+  const onSelectArrow = useCallback(() => {
+    if (checked) {
+      return
+    }
+    selectArrow()
+    historyDispatcher.clearSelect()
+  }, [checked, selectArrow, historyDispatcher])
+
+  const onDrawSelect = useCallback(
+    (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => {
+      if (action.name !== 'Arrow' || !canvasContextRef.current) {
+        return
+      }
+
+      const source = action as HistoryItemSource<ArrowData, ArrowEditData>
+      selectArrow()
+
+      const { x1, y1, x2, y2 } = getEditedArrowData(source)
+      let type = ArrowEditType.Move
+      if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x1,
+          y: y1
+        })
+      ) {
+        type = ArrowEditType.MoveStart
+      } else if (
+        isHitCircle(canvasContextRef.current.canvas, e, {
+          x: x2,
+          y: y2
+        })
+      ) {
+        type = ArrowEditType.MoveEnd
+      }
+
+      arrowEditRef.current = {
+        type: HistoryItemType.Edit,
+        data: {
+          type,
+          x1: e.clientX,
+          y1: e.clientY,
+          x2: e.clientX,
+          y2: e.clientY
+        },
+        source
+      }
+
+      historyDispatcher.select(action)
+    },
+    [canvasContextRef, selectArrow, historyDispatcher]
+  )
+
+  const onMousedown = useCallback(
+    (e: MouseEvent) => {
+      if (!checked || arrowRef.current || !canvasContextRef.current) {
+        return
+      }
+
+      const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+      arrowRef.current = {
+        name: 'Arrow',
+        type: HistoryItemType.Source,
+        data: {
+          size,
+          color,
+          x1: e.clientX - left,
+          y1: e.clientY - top,
+          x2: e.clientX - left,
+          y2: e.clientY - top
+        },
+        editHistory: [],
+        draw,
+        isHit
+      }
+    },
+    [checked, color, size, canvasContextRef]
+  )
+
+  const onMousemove = useCallback(
+    (e: MouseEvent) => {
+      if (!checked || !canvasContextRef.current) {
+        return
+      }
+      if (arrowEditRef.current) {
+        arrowEditRef.current.data.x2 = e.clientX
+        arrowEditRef.current.data.y2 = e.clientY
+        if (history.top !== arrowEditRef.current) {
+          arrowEditRef.current.source.editHistory.push(arrowEditRef.current)
+          historyDispatcher.push(arrowEditRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      } else if (arrowRef.current) {
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+
+        arrowRef.current.data.x2 = e.clientX - left
+        arrowRef.current.data.y2 = e.clientY - top
+
+        if (history.top !== arrowRef.current) {
+          historyDispatcher.push(arrowRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      }
+    },
+    [checked, history, canvasContextRef, historyDispatcher]
+  )
+
+  const onMouseup = useCallback(() => {
+    if (!checked) {
+      return
+    }
+
+    if (arrowRef.current) {
+      historyDispatcher.clearSelect()
+    }
+
+    arrowRef.current = null
+    arrowEditRef.current = null
+  }, [checked, historyDispatcher])
+
+  useDrawSelect(onDrawSelect)
+  useCanvasMousedown(onMousedown)
+  useCanvasMousemove(onMousemove)
+  useCanvasMouseup(onMouseup)
+
+  return (
+    <ScreenshotsButton
+      title={lang.operation_arrow_title}
+      icon='icon-arrow'
+      checked={checked}
+      onClick={onSelectArrow}
+      option={<ScreenshotsSizeColor size={size} color={color} onSizeChange={setSize} onColorChange={setColor} />}
+    />
+  )
+}

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

@@ -0,0 +1,45 @@
+import { BrushData, BrushEditData } from '.';
+import { HistoryItemSource } from '../../types';
+
+export default function draw(
+  ctx: CanvasRenderingContext2D,
+  action: HistoryItemSource<BrushData, BrushEditData>,
+): void {
+  const { size, color, points } = action.data;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = size;
+  ctx.strokeStyle = color;
+
+  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 },
+  );
+
+  ctx.beginPath();
+  points.forEach((item, index) => {
+    if (index === 0) {
+      ctx.moveTo(item.x + distance.x, item.y + distance.y);
+    } else {
+      ctx.lineTo(item.x + distance.x, item.y + distance.y);
+    }
+  });
+  ctx.stroke();
+
+  if (action.isSelected) {
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(0,0,0,0)';
+    ctx.beginPath();
+    points.forEach((item, index) => {
+      if (index === 0) {
+        ctx.moveTo(item.x + distance.x, item.y + distance.y);
+      } else {
+        ctx.lineTo(item.x + distance.x, item.y + distance.y);
+      }
+    });
+    ctx.stroke();
+  }
+}

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

@@ -0,0 +1,169 @@
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
+import useCanvasMousedown from '../../hooks/useCanvasMousedown'
+import useCanvasMousemove from '../../hooks/useCanvasMousemove'
+import useCanvasMouseup from '../../hooks/useCanvasMouseup'
+import ScreenshotsButton from '../../ScreenshotsButton'
+import ScreenshotsSizeColor from '../../ScreenshotsSizeColor'
+import useCursor from '../../hooks/useCursor'
+import useOperation from '../../hooks/useOperation'
+import useHistory from '../../hooks/useHistory'
+import useCanvasContextRef from '../../hooks/useCanvasContextRef'
+import { HistoryItemEdit, HistoryItemSource, HistoryItemType, Point } from '../../types'
+import useDrawSelect from '../../hooks/useDrawSelect'
+import { isHit } from '../utils'
+import draw from './draw'
+import useLang from '../../hooks/useLang'
+
+export interface BrushData {
+  size: number
+  color: string
+  points: Point[]
+}
+
+export interface BrushEditData {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export default function Brush (): ReactElement {
+  const lang = useLang()
+  const [, cursorDispatcher] = useCursor()
+  const [operation, operationDispatcher] = useOperation()
+  const canvasContextRef = useCanvasContextRef()
+  const [history, historyDispatcher] = useHistory()
+  const [size, setSize] = useState(3)
+  const [color, setColor] = useState('#ee5126')
+  const brushRef = useRef<HistoryItemSource<BrushData, BrushEditData> | null>(null)
+  const brushEditRef = useRef<HistoryItemEdit<BrushEditData, BrushData> | null>(null)
+
+  const checked = operation === 'Brush'
+
+  const selectBrush = useCallback(() => {
+    operationDispatcher.set('Brush')
+    cursorDispatcher.set('default')
+  }, [operationDispatcher, cursorDispatcher])
+
+  const onSelectBrush = useCallback(() => {
+    if (checked) {
+      return
+    }
+    selectBrush()
+    historyDispatcher.clearSelect()
+  }, [checked, selectBrush, historyDispatcher])
+
+  const onDrawSelect = useCallback(
+    (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => {
+      if (action.name !== 'Brush') {
+        return
+      }
+
+      selectBrush()
+
+      brushEditRef.current = {
+        type: HistoryItemType.Edit,
+        data: {
+          x1: e.clientX,
+          y1: e.clientY,
+          x2: e.clientX,
+          y2: e.clientY
+        },
+        source: action as HistoryItemSource<BrushData, BrushEditData>
+      }
+
+      historyDispatcher.select(action)
+    },
+    [selectBrush, historyDispatcher]
+  )
+
+  const onMousedown = useCallback(
+    (e: MouseEvent): void => {
+      if (!checked || brushRef.current || !canvasContextRef.current) {
+        return
+      }
+
+      const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+
+      brushRef.current = {
+        name: 'Brush',
+        type: HistoryItemType.Source,
+        data: {
+          size,
+          color,
+          points: [
+            {
+              x: e.clientX - left,
+              y: e.clientY - top
+            }
+          ]
+        },
+        editHistory: [],
+        draw,
+        isHit
+      }
+    },
+    [checked, canvasContextRef, size, color]
+  )
+
+  const onMousemove = useCallback(
+    (e: MouseEvent): void => {
+      if (!checked || !canvasContextRef.current) {
+        return
+      }
+
+      if (brushEditRef.current) {
+        brushEditRef.current.data.x2 = e.clientX
+        brushEditRef.current.data.y2 = e.clientY
+        if (history.top !== brushEditRef.current) {
+          brushEditRef.current.source.editHistory.push(brushEditRef.current)
+          historyDispatcher.push(brushEditRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      } else if (brushRef.current) {
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect()
+
+        brushRef.current.data.points.push({
+          x: e.clientX - left,
+          y: e.clientY - top
+        })
+
+        if (history.top !== brushRef.current) {
+          historyDispatcher.push(brushRef.current)
+        } else {
+          historyDispatcher.set(history)
+        }
+      }
+    },
+    [checked, history, canvasContextRef, historyDispatcher]
+  )
+
+  const onMouseup = useCallback((): void => {
+    if (!checked) {
+      return
+    }
+
+    if (brushRef.current) {
+      historyDispatcher.clearSelect()
+    }
+
+    brushRef.current = null
+    brushEditRef.current = null
+  }, [checked, historyDispatcher])
+
+  useDrawSelect(onDrawSelect)
+  useCanvasMousedown(onMousedown)
+  useCanvasMousemove(onMousemove)
+  useCanvasMouseup(onMouseup)
+
+  return (
+    <ScreenshotsButton
+      title={lang.operation_brush_title}
+      icon='icon-brush'
+      checked={checked}
+      onClick={onSelectBrush}
+      option={<ScreenshotsSizeColor size={size} color={color} onSizeChange={setSize} onColorChange={setColor} />}
+    />
+  )
+}

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

@@ -0,0 +1,18 @@
+import React, { ReactElement, useCallback } from 'react'
+import useCall from '../../hooks/useCall'
+import useLang from '../../hooks/useLang'
+import useReset from '../../hooks/useReset'
+import ScreenshotsButton from '../../ScreenshotsButton'
+
+export default function Cancel (): ReactElement {
+  const call = useCall()
+  const reset = useReset()
+  const lang = useLang()
+
+  const onClick = useCallback(() => {
+    call('onCancel')
+    reset()
+  }, [call, reset])
+
+  return <ScreenshotsButton title={lang.operation_cancel_title} icon='icon-cancel' onClick={onClick} />
+}