cd-aichat 1.0.0

package/src/components/screenshot/ScreenshotsCanvas/index.tsx

@@ -0,0 +1,277 @@
+import React, {
+	forwardRef,
+	memo,
+	ReactElement,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useLayoutEffect,
+	useRef,
+} from "react";
+import useBounds from "../hooks/useBounds";
+import useCursor from "../hooks/useCursor";
+import useEmiter from "../hooks/useEmiter";
+import useHistory from "../hooks/useHistory";
+import useOperation from "../hooks/useOperation";
+import useStore from "../hooks/useStore";
+import { Bounds, HistoryItemType, Point } from "../types";
+import getBoundsByPoints from "./getBoundsByPoints";
+import getPoints from "./getPoints";
+import "./index.scss";
+import isPointInDraw from "./isPointInDraw";
+
+const borders = ["top", "right", "bottom", "left"];
+
+export enum ResizePoints {
+	ResizeTop = "top",
+	ResizetopRight = "top-right",
+	ResizeRight = "right",
+	ResizeRightBottom = "right-bottom",
+	ResizeBottom = "bottom",
+	ResizeBottomLeft = "bottom-left",
+	ResizeLeft = "left",
+	ResizeLeftTop = "left-top",
+	Move = "move",
+}
+
+const resizePoints = [
+	ResizePoints.ResizeTop,
+	ResizePoints.ResizetopRight,
+	ResizePoints.ResizeRight,
+	ResizePoints.ResizeRightBottom,
+	ResizePoints.ResizeBottom,
+	ResizePoints.ResizeBottomLeft,
+	ResizePoints.ResizeLeft,
+	ResizePoints.ResizeLeftTop,
+];
+
+export default memo(
+	forwardRef<CanvasRenderingContext2D>(function ScreenshotsCanvas(
+		props,
+		ref,
+	): ReactElement | null {
+		const { url, image, width, height } = useStore();
+
+		const emiter = useEmiter();
+		const [history] = useHistory();
+		const [cursor] = useCursor();
+		const [bounds, boundsDispatcher] = useBounds();
+		const [operation] = useOperation();
+
+		const resizeOrMoveRef = useRef<string>();
+		const pointRef = useRef<Point | null>(null);
+		const boundsRef = useRef<Bounds | null>(null);
+		const canvasRef = useRef<HTMLCanvasElement | null>(null);
+		const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
+
+		const isCanResize = bounds && !history.stack.length && !operation;
+
+		const draw = useCallback(() => {
+			if (!bounds || !ctxRef.current) {
+				return;
+			}
+
+			const ctx = ctxRef.current;
+			ctx.imageSmoothingEnabled = true;
+			// 设置太高，图片会模糊
+			ctx.imageSmoothingQuality = "low";
+			ctx.clearRect(0, 0, bounds.width, bounds.height);
+
+			history.stack.slice(0, history.index + 1).forEach((item) => {
+				if (item.type === HistoryItemType.Source) {
+					item.draw(ctx, item);
+				}
+			});
+		}, [bounds, ctxRef, history]);
+
+		const onMouseDown = useCallback(
+			(e: React.MouseEvent, resizeOrMove: string) => {
+				if (e.button !== 0 || !bounds) {
+					return;
+				}
+				if (!operation) {
+					resizeOrMoveRef.current = resizeOrMove;
+					pointRef.current = {
+						x: e.clientX,
+						y: e.clientY,
+					};
+					boundsRef.current = {
+						x: bounds.x,
+						y: bounds.y,
+						width: bounds.width,
+						height: bounds.height,
+					};
+				} else {
+					const draw = isPointInDraw(
+						bounds,
+						canvasRef.current,
+						history,
+						e.nativeEvent,
+					);
+					if (draw) {
+						emiter.emit("drawselect", draw, e.nativeEvent);
+					} else {
+						emiter.emit("mousedown", e.nativeEvent);
+					}
+				}
+			},
+			[bounds, operation, emiter, history],
+		);
+
+		const updateBounds = useCallback(
+			(e: MouseEvent) => {
+				if (
+					!resizeOrMoveRef.current ||
+					!pointRef.current ||
+					!boundsRef.current ||
+					!bounds
+				) {
+					return;
+				}
+				const points = getPoints(
+					e,
+					resizeOrMoveRef.current,
+					pointRef.current,
+					boundsRef.current,
+				);
+				boundsDispatcher.set(
+					getBoundsByPoints(
+						points[0],
+						points[1],
+						bounds,
+						width,
+						height,
+						resizeOrMoveRef.current,
+					),
+				);
+			},
+			[width, height, bounds, boundsDispatcher],
+		);
+
+		useLayoutEffect(() => {
+			if (!image || !bounds || !canvasRef.current) {
+				ctxRef.current = null;
+				return;
+			}
+
+			if (!ctxRef.current) {
+				ctxRef.current = canvasRef.current.getContext("2d");
+			}
+
+			draw();
+		}, [image, bounds, draw]);
+
+		useEffect(() => {
+			const onMouseMove = (e: MouseEvent) => {
+				if (!operation) {
+					if (
+						!resizeOrMoveRef.current ||
+						!pointRef.current ||
+						!boundsRef.current
+					) {
+						return;
+					}
+					updateBounds(e);
+				} else {
+					emiter.emit("mousemove", e);
+				}
+			};
+
+			const onMouseUp = (e: MouseEvent) => {
+				if (!operation) {
+					if (
+						!resizeOrMoveRef.current ||
+						!pointRef.current ||
+						!boundsRef.current
+					) {
+						return;
+					}
+					updateBounds(e);
+					resizeOrMoveRef.current = undefined;
+					pointRef.current = null;
+					boundsRef.current = null;
+				} else {
+					emiter.emit("mouseup", e);
+				}
+			};
+			window.addEventListener("mousemove", onMouseMove);
+			window.addEventListener("mouseup", onMouseUp);
+
+			return () => {
+				window.removeEventListener("mousemove", onMouseMove);
+				window.removeEventListener("mouseup", onMouseUp);
+			};
+		}, [updateBounds, operation, emiter]);
+
+		// 放到最后，保证ctxRef.current存在
+		useImperativeHandle<
+			CanvasRenderingContext2D | null,
+			CanvasRenderingContext2D | null
+		>(ref, () => ctxRef.current);
+
+		return (
+			<div
+				className="screenshots-canvas"
+				style={{
+					width: bounds?.width || 0,
+					height: bounds?.height || 0,
+					transform: bounds
+						? `translate(${bounds.x}px, ${bounds.y}px)`
+						: "none",
+				}}
+			>
+				<div className="screenshots-canvas-body">
+					{/* 保证一开始就显示，减少加载时间 */}
+					<img
+						className="screenshots-canvas-image"
+						src={url}
+						style={{
+							width,
+							height,
+							transform: bounds
+								? `translate(${-bounds.x}px, ${-bounds.y}px)`
+								: "none",
+						}}
+					/>
+					<canvas
+						ref={canvasRef}
+						className="screenshots-canvas-panel"
+						width={bounds?.width || 0}
+						height={bounds?.height || 0}
+					/>
+				</div>
+				<div
+					className="screenshots-canvas-mask"
+					style={{
+						cursor,
+					}}
+					onMouseDown={(e) => onMouseDown(e, "move")}
+				>
+					{isCanResize && (
+						<div className="screenshots-canvas-size">
+							{bounds.width} &times; {bounds.height}
+						</div>
+					)}
+				</div>
+				{borders.map((border) => {
+					return (
+						<div
+							key={border}
+							className={`screenshots-canvas-border-${border}`}
+						/>
+					);
+				})}
+				{isCanResize &&
+					resizePoints.map((resizePoint) => {
+						return (
+							<div
+								key={resizePoint}
+								className={`screenshots-canvas-point-${resizePoint}`}
+								onMouseDown={(e) => onMouseDown(e, resizePoint)}
+							/>
+						);
+					})}
+			</div>
+		);
+	}),
+);

package/src/components/screenshot/ScreenshotsCanvas/isPointInDraw.ts

@@ -0,0 +1,35 @@
+import { Bounds, History, HistoryItemType } from '../types'
+
+export default function isPointInDraw (
+  bounds: Bounds,
+  canvas: HTMLCanvasElement | null,
+  history: History,
+  e: MouseEvent
+) {
+  if (!canvas) {
+    return false
+  }
+
+  const $canvas = document.createElement('canvas')
+  $canvas.width = bounds.width
+  $canvas.height = bounds.height
+  const ctx = $canvas.getContext('2d')
+
+  if (!ctx) {
+    return false
+  }
+
+  const { left, top } = canvas.getBoundingClientRect()
+  const x = e.clientX - left
+  const y = e.clientY - top
+
+  const stack = [...history.stack.slice(0, history.index + 1)]
+
+  return stack.reverse().find(item => {
+    if (item.type !== HistoryItemType.Source) {
+      return false
+    }
+    ctx.clearRect(0, 0, bounds.width, bounds.height)
+    return item.isHit?.(ctx, item, { x, y })
+  })
+}

package/src/components/screenshot/ScreenshotsColor/index.scss

@@ -0,0 +1,45 @@
+@import "../var.scss";
+
+.screenshots-color {
+	height: $sizecolor-size;
+	display: flex;
+	align-items: center;
+
+	&-item {
+		border: 1px solid #777;
+		width: $sizecolor-size;
+		height: $sizecolor-size;
+		cursor: pointer;
+		position: relative;
+		margin: 0 3px;
+		&:before {
+			content: "";
+			display: none;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			width: 10px;
+			height: 10px;
+			background-color: #333;
+		}
+		&:after {
+			content: "";
+			display: none;
+			width: 8px;
+			height: 4px;
+			position: absolute;
+			right: 5px;
+			bottom: 5px;
+			border-bottom: 2px solid #fff;
+			border-left: 2px solid #fff;
+			transform: translate(5px, 2px) rotate(-45deg) scale(0.8, 0.8);
+		}
+	}
+
+	&-active {
+		&:before,
+		&:after {
+			display: block;
+		}
+	}
+}

package/src/components/screenshot/ScreenshotsColor/index.tsx

@@ -0,0 +1,39 @@
+import React, { memo, ReactElement } from "react";
+import "./index.scss";
+
+export interface ColorProps {
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export default memo(function ScreenshotsColor({
+	value,
+	onChange,
+}: ColorProps): ReactElement {
+	const colors = [
+		"#ee5126",
+		"#fceb4d",
+		"#90e746",
+		"#51c0fa",
+		"#7a7a7a",
+		"#ffffff",
+	];
+	return (
+		<div className="screenshots-color">
+			{colors.map((color) => {
+				const classNames = ["screenshots-color-item"];
+				if (color === value) {
+					classNames.push("screenshots-color-active");
+				}
+				return (
+					<div
+						key={color}
+						className={classNames.join(" ")}
+						style={{ backgroundColor: color }}
+						onClick={() => onChange && onChange(color)}
+					/>
+				);
+			})}
+		</div>
+	);
+});

package/src/components/screenshot/ScreenshotsContext.ts

@@ -0,0 +1,56 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { EmiterRef, History, Bounds, CanvasContextRef } from './types';
+import zhCN, { Lang } from './zh_CN';
+
+export interface ScreenshotsContextStore {
+  url?: string;
+  image: HTMLImageElement | null;
+  width: number;
+  height: number;
+  lang: Lang;
+  emiterRef: EmiterRef;
+  canvasContextRef: CanvasContextRef;
+  history: History;
+  bounds: Bounds | null;
+  cursor?: string;
+  operation?: string;
+}
+
+export interface ScreenshotsContextDispatcher {
+  call?: <T>(funcName: string, ...args: T[]) => void;
+  setHistory?: Dispatch<SetStateAction<History>>;
+  setBounds?: Dispatch<SetStateAction<Bounds | null>>;
+  setCursor?: Dispatch<SetStateAction<string | undefined>>;
+  setOperation?: Dispatch<SetStateAction<string | undefined>>;
+}
+
+export interface ScreenshotsContextValue {
+  store: ScreenshotsContextStore;
+  dispatcher: ScreenshotsContextDispatcher;
+}
+
+export default React.createContext<ScreenshotsContextValue>({
+  store: {
+    url: undefined,
+    image: null,
+    width: 0,
+    height: 0,
+    lang: zhCN,
+    emiterRef: { current: {} },
+    canvasContextRef: { current: null },
+    history: {
+      index: -1,
+      stack: [],
+    },
+    bounds: null,
+    cursor: 'move',
+    operation: undefined,
+  },
+  dispatcher: {
+    call: undefined,
+    setHistory: undefined,
+    setBounds: undefined,
+    setCursor: undefined,
+    setOperation: undefined,
+  },
+});

package/src/components/screenshot/ScreenshotsMagnifier/index.scss

@@ -0,0 +1,61 @@
+@import "../var.scss";
+
+.screenshots-magnifier {
+	position: absolute;
+	font-family: $font-family;
+	left: 0;
+	top: 0;
+	width: 100px;
+	box-shadow: 0 0 8px 0px #000;
+	z-index: 9;
+
+	&,
+	* {
+		box-sizing: border-box;
+		user-select: none;
+	}
+
+	&-body {
+		position: relative;
+		background-color: #fff;
+		&:before {
+			content: "";
+			background-color: rgb(10, 114, 161);
+			position: absolute;
+			top: 50%;
+			left: 0;
+			width: 100%;
+			height: 2px;
+			z-index: 1;
+		}
+		&:after {
+			content: "";
+			background-color: rgb(10, 114, 161);
+			position: absolute;
+			top: 0;
+			left: 50%;
+			width: 2px;
+			height: 100%;
+			z-index: 1;
+		}
+		&-canvas {
+			display: block;
+			width: 100px;
+			height: 80px;
+		}
+	}
+	&-footer {
+		height: 40px;
+		color: #fff;
+		font-size: 11px;
+		background-color: rgb(95, 94, 94);
+		padding: 4px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-align: center;
+		&-item {
+			height: 18px;
+			line-height: 18px;
+		}
+	}
+}

package/src/components/screenshot/ScreenshotsMagnifier/index.tsx

@@ -0,0 +1,126 @@
+import React, {
+	memo,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import useLang from "../hooks/useLang";
+import useStore from "../hooks/useStore";
+import { Position } from "../types";
+import "./index.scss";
+
+export interface ScreenshotsMagnifierProps {
+	x: number;
+	y: number;
+}
+
+const magnifierWidth = 100;
+const magnifierHeight = 80;
+
+export default memo(function ScreenshotsMagnifier({
+	x,
+	y,
+}: ScreenshotsMagnifierProps) {
+	const { width, height, image } = useStore();
+	const lang = useLang();
+	const [position, setPosition] = useState<Position | null>(null);
+	const elRef = useRef<HTMLDivElement>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
+	const [rgb, setRgb] = useState("000000");
+
+	useLayoutEffect(() => {
+		if (!elRef.current) {
+			return;
+		}
+		const elRect = elRef.current.getBoundingClientRect();
+		let tx = x + 20;
+		let ty = y + 20;
+		if (tx + elRect.width > width) {
+			tx = x - elRect.width - 20;
+		}
+		if (ty + elRect.height > height) {
+			ty = y - elRect.height - 20;
+		}
+
+		if (tx < 0) {
+			tx = 0;
+		}
+		if (ty < 0) {
+			ty = 0;
+		}
+		setPosition({
+			x: tx,
+			y: ty,
+		});
+	}, [width, height, x, y]);
+
+	useEffect(() => {
+		if (!image || !canvasRef.current) {
+			ctxRef.current = null;
+			return;
+		}
+
+		if (!ctxRef.current) {
+			ctxRef.current = canvasRef.current.getContext("2d");
+		}
+		if (!ctxRef.current) {
+			return;
+		}
+
+		const ctx = ctxRef.current;
+		ctx.clearRect(0, 0, magnifierWidth, magnifierHeight);
+		const rx = image.naturalWidth / width;
+		const ry = image.naturalHeight / height;
+		// 显示原图比例
+		ctx.drawImage(
+			image,
+			x * rx - magnifierWidth / 2,
+			y * ry - magnifierHeight / 2,
+			magnifierWidth,
+			magnifierHeight,
+			0,
+			0,
+			magnifierWidth,
+			magnifierHeight,
+		);
+		const { data } = ctx.getImageData(
+			Math.floor(magnifierWidth / 2),
+			Math.floor(magnifierHeight / 2),
+			1,
+			1,
+		);
+		const hex = Array.from(data.slice(0, 3))
+			.map((val) => (val >= 16 ? val.toString(16) : `0${val.toString(16)}`))
+			.join("")
+			.toUpperCase();
+
+		setRgb(hex);
+	}, [width, height, image, x, y]);
+
+	return (
+		<div
+			ref={elRef}
+			className="screenshots-magnifier"
+			style={{
+				transform: `translate(${position?.x}px, ${position?.y}px)`,
+			}}
+		>
+			<div className="screenshots-magnifier-body">
+				<canvas
+					ref={canvasRef}
+					className="screenshots-magnifier-body-canvas"
+					width={magnifierWidth}
+					height={magnifierHeight}
+				/>
+			</div>
+			<div className="screenshots-magnifier-footer">
+				<div className="screenshots-magnifier-footer-item">
+					{lang.magnifier_position_label}: ({x},{y})
+				</div>
+				<div className="screenshots-magnifier-footer-item">RGB: #{rgb}</div>
+			</div>
+		</div>
+	);
+});

package/src/components/screenshot/ScreenshotsOperations/index.scss

@@ -0,0 +1,25 @@
+@import "../var.scss";
+
+.screenshots-operations {
+	position: absolute;
+	left: 0;
+	top: 0;
+	will-change: transform;
+
+	&-buttons {
+		display: flex;
+		align-items: center;
+		padding: 3px;
+		border-radius: 2px;
+		border: 1px solid #ddd;
+		background-color: #fff;
+		overflow: hidden;
+	}
+
+	&-divider {
+		background-color: #ddd;
+		width: 1px;
+		height: $button-size;
+		margin: 0 3px;
+	}
+}