cd-aichat 1.0.0

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

@@ -0,0 +1,118 @@
+import React, {
+	memo,
+	MouseEvent,
+	ReactElement,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import useBounds from "../hooks/useBounds";
+import useStore from "../hooks/useStore";
+import OperationButtons from "../operations";
+import { Bounds, Position } from "../types";
+import "./index.scss";
+
+export const ScreenshotsOperationsCtx = React.createContext<Bounds | null>(
+	null,
+);
+
+export default memo(function ScreenshotsOperations(): ReactElement | null {
+	const { width, height } = useStore();
+	const [bounds] = useBounds();
+	const [operationsRect, setOperationsRect] = useState<Bounds | null>(null);
+	const [position, setPosition] = useState<Position | null>(null);
+
+	const elRef = useRef<HTMLDivElement>(null);
+	const onDoubleClick = useCallback((e: MouseEvent) => {
+		e.stopPropagation();
+	}, []);
+
+	const onContextMenu = useCallback((e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => {
+		if (!bounds || !elRef.current) {
+			return;
+		}
+
+		const elRect = elRef.current.getBoundingClientRect();
+
+		let x = bounds.x + bounds.width - elRect.width;
+		let y = bounds.y + bounds.height + 10;
+
+		if (x < 0) {
+			x = 0;
+		}
+
+		if (x > width - elRect.width) {
+			x = width - elRect.width;
+		}
+
+		if (y > height - elRect.height) {
+			y = height - elRect.height - 10;
+		}
+
+		// 小数存在精度问题
+		if (
+			!position ||
+			Math.abs(position.x - x) > 1 ||
+			Math.abs(position.y - y) > 1
+		) {
+			setPosition({
+				x,
+				y,
+			});
+		}
+
+		// 小数存在精度问题
+		if (
+			!operationsRect ||
+			Math.abs(operationsRect.x - elRect.x) > 1 ||
+			Math.abs(operationsRect.y - elRect.y) > 1 ||
+			Math.abs(operationsRect.width - elRect.width) > 1 ||
+			Math.abs(operationsRect.height - elRect.height) > 1
+		) {
+			setOperationsRect({
+				x: elRect.x,
+				y: elRect.y,
+				width: elRect.width,
+				height: elRect.height,
+			});
+		}
+	});
+
+	if (!bounds) {
+		return null;
+	}
+
+	return (
+		<ScreenshotsOperationsCtx.Provider value={operationsRect}>
+			<div
+				ref={elRef}
+				className="screenshots-operations"
+				style={{
+					visibility: position ? "visible" : "hidden",
+					transform: `translate(${position?.x ?? 0}px, ${position?.y ?? 0}px)`,
+				}}
+				onDoubleClick={onDoubleClick}
+				onContextMenu={onContextMenu}
+			>
+				<div className="screenshots-operations-buttons">
+					{OperationButtons.map((OperationButton, index) => {
+						if (OperationButton === "|") {
+							return (
+								<div key={index} className="screenshots-operations-divider" />
+							);
+						} else {
+							return <OperationButton key={index} />;
+						}
+					})}
+				</div>
+			</div>
+		</ScreenshotsOperationsCtx.Provider>
+	);
+});

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

@@ -0,0 +1,50 @@
+@import "../var.scss";
+
+.screenshots-option {
+	position: absolute;
+	left: 0;
+	top: 0;
+	font-family: $font-family;
+
+	&,
+	* {
+		box-sizing: border-box;
+		user-select: none;
+	}
+
+	&-container {
+		height: $button-size + 3 * 2 + 2;
+		background-color: #fff;
+		padding: 3px;
+		border-radius: 2px;
+		border: 1px solid #ddd;
+		background-color: #fff;
+	}
+
+	&-arrow {
+		position: absolute;
+		border: 6px solid transparent;
+	}
+
+	&[data-placement="top"] {
+		transform: translate(-50%, -11px);
+	}
+
+	&[data-placement="top"] &-arrow {
+		transform: translate(-50%, -1px);
+		border-top-color: #fff;
+		top: 100%;
+		left: 50%;
+	}
+
+	&[data-placement="bottom"] {
+		transform: translate(-50%, 11px);
+	}
+
+	&[data-placement="bottom"] &-arrow {
+		transform: translate(-50%, 1px);
+		border-bottom-color: #fff;
+		bottom: 100%;
+		left: 50%;
+	}
+}

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

@@ -0,0 +1,150 @@
+import React, {
+	cloneElement,
+	memo,
+	ReactElement,
+	ReactNode,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { ScreenshotsOperationsCtx } from "../ScreenshotsOperations";
+import { Point } from "../types";
+import "./index.scss";
+
+export interface ScreenshotsOptionProps {
+	open?: boolean;
+	content?: ReactNode;
+	children: ReactElement;
+}
+
+export type Position = Point;
+
+export enum Placement {
+	Bottom = "bottom",
+	Top = "top",
+}
+
+export default memo(function ScreenshotsOption({
+	open,
+	content,
+	children,
+}: ScreenshotsOptionProps): ReactElement {
+	const childrenRef = useRef<HTMLDivElement>(null);
+	const popoverRef = useRef<HTMLDivElement | null>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const operationsRect = useContext(ScreenshotsOperationsCtx);
+	const [placement, setPlacement] = useState<Placement>(Placement.Bottom);
+	const [position, setPosition] = useState<Position | null>(null);
+	const [offsetX, setOffsetX] = useState<number>(0);
+
+	const getPopoverEl = () => {
+		if (!popoverRef.current) {
+			popoverRef.current = document.createElement("div");
+		}
+		return popoverRef.current;
+	};
+
+	useEffect(() => {
+		const $el = getPopoverEl();
+		if (open) {
+			document.body.appendChild($el);
+		}
+		return () => {
+			$el.remove();
+		};
+	}, [open]);
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => {
+		if (
+			!open ||
+			!operationsRect ||
+			!childrenRef.current ||
+			!contentRef.current
+		) {
+			return;
+		}
+
+		const childrenRect = childrenRef.current.getBoundingClientRect();
+		const contentRect = contentRef.current.getBoundingClientRect();
+
+		let currentPlacement = placement;
+		let x = childrenRect.left + childrenRect.width / 2;
+		let y = childrenRect.top + childrenRect.height;
+		let currentOffsetX = offsetX;
+
+		// 如果左右都越界了，就以左边界为准
+		if (x + contentRect.width / 2 > operationsRect.x + operationsRect.width) {
+			const ox = x;
+			x = operationsRect.x + operationsRect.width - contentRect.width / 2;
+			currentOffsetX = ox - x;
+		}
+
+		// 左边不能超出
+		if (x < operationsRect.x + contentRect.width / 2) {
+			const ox = x;
+			x = operationsRect.x + contentRect.width / 2;
+			currentOffsetX = ox - x;
+		}
+
+		// 如果上下都越界了，就以上边界为准
+		if (y > window.innerHeight - contentRect.height) {
+			if (currentPlacement === Placement.Bottom) {
+				currentPlacement = Placement.Top;
+			}
+			y = childrenRect.top - contentRect.height;
+		}
+
+		if (y < 0) {
+			if (currentPlacement === Placement.Top) {
+				currentPlacement = Placement.Bottom;
+			}
+			y = childrenRect.top + childrenRect.height;
+		}
+		if (currentPlacement !== placement) {
+			setPlacement(currentPlacement);
+		}
+		if (position?.x !== x || position.y !== y) {
+			setPosition({
+				x,
+				y,
+			});
+		}
+
+		if (currentOffsetX !== offsetX) {
+			setOffsetX(currentOffsetX);
+		}
+	});
+
+	return (
+		<>
+			{cloneElement(children, {
+				ref: childrenRef,
+			})}
+			{open &&
+				content &&
+				createPortal(
+					<div
+						ref={contentRef}
+						className="screenshots-option"
+						style={{
+							visibility: position ? "visible" : "hidden",
+							transform: `translate(${position?.x ?? 0}px, ${
+								position?.y ?? 0
+							}px)`,
+						}}
+						data-placement={placement}
+					>
+						<div className="screenshots-option-container">{content}</div>
+						<div
+							className="screenshots-option-arrow"
+							style={{ marginLeft: offsetX }}
+						/>
+					</div>,
+					getPopoverEl(),
+				)}
+		</>
+	);
+});

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

@@ -0,0 +1,28 @@
+@import "../var.scss";
+
+.screenshots-size {
+	height: $sizecolor-size;
+	display: flex;
+	align-items: center;
+
+	&-item {
+		width: $sizecolor-size;
+		height: $sizecolor-size;
+		position: relative;
+		margin: 0 3px;
+		cursor: pointer;
+	}
+
+	&-pointer {
+		background-color: #555;
+		border-radius: 50%;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	&-active > &-pointer {
+		background-color: #39f;
+	}
+}

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

@@ -0,0 +1,41 @@
+import React, { memo, ReactElement } from "react";
+import "./index.scss";
+
+export interface SizeProps {
+	value: number;
+	onChange: (value: number) => void;
+}
+
+export default memo(function ScreenshotsSize({
+	value,
+	onChange,
+}: SizeProps): ReactElement {
+	const sizes = [3, 6, 9];
+	return (
+		<div className="screenshots-size">
+			{sizes.map((size) => {
+				const classNames = ["screenshots-size-item"];
+
+				if (size === value) {
+					classNames.push("screenshots-size-active");
+				}
+
+				return (
+					<div
+						key={size}
+						className={classNames.join(" ")}
+						onClick={() => onChange && onChange(size)}
+					>
+						<div
+							className="screenshots-size-pointer"
+							style={{
+								width: size * 1.8,
+								height: size * 1.8,
+							}}
+						/>
+					</div>
+				);
+			})}
+		</div>
+	);
+});

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

@@ -0,0 +1,8 @@
+@import "../var.scss";
+
+.screenshots-sizecolor {
+	height: $sizecolor-size;
+	padding: 3px 0;
+	display: flex;
+	align-items: center;
+}

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

@@ -0,0 +1,25 @@
+import React, { memo, ReactElement } from "react";
+import ScreenshotsSize from "../ScreenshotsSize";
+import ScreenshotsColor from "../ScreenshotsColor";
+import "./index.scss";
+
+export interface SizeColorProps {
+	size: number;
+	color: string;
+	onSizeChange: (value: number) => void;
+	onColorChange: (value: string) => void;
+}
+
+export default memo(function ScreenshotsSizeColor({
+	size,
+	color,
+	onSizeChange,
+	onColorChange,
+}: SizeColorProps): ReactElement {
+	return (
+		<div className="screenshots-sizecolor">
+			<ScreenshotsSize value={size} onChange={onSizeChange} />
+			<ScreenshotsColor value={color} onChange={onColorChange} />
+		</div>
+	);
+});

package/src/components/screenshot/ScreenshotsTextarea/calculateNodeSize.ts

@@ -0,0 +1,117 @@
+// Thanks to https://github.com/react-component/textarea
+
+const hiddenTextareaStyle = `
+min-width: 0 !important;
+width: 0 !important;
+min-height: 0 !important;
+height:0 !important;
+visibility: hidden !important;
+overflow: hidden !important;
+position: absolute !important;
+z-index: -1000 !important;
+top:0 !important;
+right:0 !important;
+`
+
+const sizeStyle = [
+  'letter-spacing',
+  'line-height',
+  'padding-top',
+  'padding-bottom',
+  'font-family',
+  'font-weight',
+  'font-size',
+  'font-variant',
+  'text-rendering',
+  'text-transform',
+  'text-indent',
+  'padding-left',
+  'padding-right',
+  'border-width',
+  'box-sizing',
+  'white-space',
+  'word-break'
+]
+
+export interface SizeInfo {
+  sizingStyle: string
+  paddingSize: number
+  borderSize: number
+  boxSizing: string
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+let hiddenTextarea: HTMLTextAreaElement
+
+export function getComputedSizeInfo (node: HTMLElement) {
+  const style = window.getComputedStyle(node)
+
+  const boxSizing =
+    style.getPropertyValue('box-sizing') ||
+    style.getPropertyValue('-moz-box-sizing') ||
+    style.getPropertyValue('-webkit-box-sizing')
+
+  const paddingSize =
+    parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'))
+
+  const borderSize =
+    parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'))
+
+  const sizingStyle = sizeStyle.map(name => `${name}:${style.getPropertyValue(name)}`).join(';')
+
+  return {
+    sizingStyle,
+    paddingSize,
+    borderSize,
+    boxSizing
+  }
+}
+
+export default function calculateNodeSize (
+  textarea: HTMLTextAreaElement,
+  value: string,
+  maxWidth: number,
+  maxHeight: number
+): Size {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea')
+    hiddenTextarea.setAttribute('tab-index', '-1')
+    document.body.appendChild(hiddenTextarea)
+  }
+
+  // Copy all CSS properties that have an impact on the height of the content in
+  // the textbox
+  const { paddingSize, borderSize, boxSizing, sizingStyle } = getComputedSizeInfo(textarea)
+
+  // Need to have the overflow attribute to hide the scrollbar otherwise
+  // text-lines will not calculated properly as the shadow will technically be
+  // narrower for content
+  hiddenTextarea.setAttribute(
+    'style',
+    `${sizingStyle};${hiddenTextareaStyle};max-width:${maxWidth}px;max-height:${maxHeight}px`
+  )
+
+  hiddenTextarea.value = value || ' '
+
+  let width = hiddenTextarea.scrollWidth
+  let height = hiddenTextarea.scrollHeight
+
+  if (boxSizing === 'border-box') {
+    // border-box: add border, since height = content + padding + border
+    width += borderSize
+    height += borderSize
+  } else if (boxSizing === 'content-box') {
+    // remove padding, since height = content
+    width -= paddingSize
+    height -= paddingSize
+  }
+
+  return {
+    width: Math.min(width, maxWidth),
+    height: Math.min(height, maxHeight)
+  }
+}

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

@@ -0,0 +1,19 @@
+@import "../var.scss";
+
+.screenshots-textarea {
+	box-sizing: border-box;
+	position: absolute;
+	left: 0;
+	top: 0;
+	margin: 0;
+	padding: 0;
+	background-color: transparent;
+	border: 2px solid $border-color;
+	resize: none;
+	outline: none;
+	white-space: nowrap;
+	word-break: break-all;
+	overflow: hidden;
+	font-family: $font-family;
+	text-align: left;
+}

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

@@ -0,0 +1,96 @@
+import React, {
+	ReactElement,
+	useRef,
+	FocusEvent,
+	useLayoutEffect,
+	useState,
+	memo,
+} from "react";
+import { createPortal } from "react-dom";
+import calculateNodeSize from "./calculateNodeSize";
+import "./index.scss";
+
+export interface TextInputProps {
+	x: number;
+	y: number;
+	maxWidth: number;
+	maxHeight: number;
+	size: number;
+	color: string;
+	value: string;
+	onChange: (value: string) => unknown;
+	onBlur: (e: FocusEvent<HTMLTextAreaElement>) => unknown;
+}
+
+export default memo(function ScreenshotsTextarea({
+	x,
+	y,
+	maxWidth,
+	maxHeight,
+	size,
+	color,
+	value,
+	onChange,
+	onBlur,
+}: TextInputProps): ReactElement {
+	const popoverRef = useRef<HTMLDivElement | null>(null);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	const getPopoverEl = () => {
+		if (!popoverRef.current) {
+			popoverRef.current = document.createElement("div");
+		}
+		return popoverRef.current;
+	};
+
+	useLayoutEffect(() => {
+		if (popoverRef.current) {
+			document.body.appendChild(popoverRef.current);
+			requestAnimationFrame(() => {
+				textareaRef.current?.focus();
+			});
+		}
+
+		return () => {
+			popoverRef.current?.remove();
+		};
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!textareaRef.current) {
+			return;
+		}
+
+		const { width, height } = calculateNodeSize(
+			textareaRef.current,
+			value,
+			maxWidth,
+			maxHeight,
+		);
+		setWidth(width);
+		setHeight(height);
+	}, [value, maxWidth, maxHeight]);
+
+	return createPortal(
+		<textarea
+			ref={textareaRef}
+			className="screenshots-textarea"
+			style={{
+				color,
+				width,
+				height,
+				maxWidth,
+				maxHeight,
+				fontSize: size,
+				lineHeight: `${size}px`,
+				transform: `translate(${x}px, ${y}px)`,
+			}}
+			value={value}
+			onChange={(e) => onChange && onChange(e.target.value)}
+			onBlur={(e) => onBlur && onBlur(e)}
+		/>,
+		getPopoverEl(),
+	);
+});

package/src/components/screenshot/composeImage.ts

@@ -0,0 +1,57 @@
+import { Bounds, History, HistoryItemType } from './types'
+
+interface ComposeImageOpts {
+  image: HTMLImageElement
+  width: number
+  height: number
+  history: History
+  bounds: Bounds
+}
+
+export default function composeImage ({ image, width, height, history, bounds }: ComposeImageOpts): Promise<Blob> {
+  return new Promise<Blob>((resolve, reject) => {
+    const $canvas = document.createElement('canvas')
+    const targetWidth = bounds.width * window.devicePixelRatio
+    const targetHeight = bounds.height * window.devicePixelRatio
+    $canvas.width = targetWidth
+    $canvas.height = targetHeight
+
+    const ctx = $canvas.getContext('2d')
+    if (!ctx) {
+      return reject(new Error('convert image to blob fail'))
+    }
+
+    const rx = image.naturalWidth / width
+    const ry = image.naturalHeight / height
+
+    ctx.imageSmoothingEnabled = true
+    // 设置太高，图片会模糊
+    ctx.imageSmoothingQuality = 'low'
+    ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0)
+    ctx.clearRect(0, 0, bounds.width, bounds.height)
+    ctx.drawImage(
+      image,
+      bounds.x * rx,
+      bounds.y * ry,
+      bounds.width * rx,
+      bounds.height * ry,
+      0,
+      0,
+      bounds.width,
+      bounds.height
+    )
+
+    history.stack.slice(0, history.index + 1).forEach(item => {
+      if (item.type === HistoryItemType.Source) {
+        item.draw(ctx, item)
+      }
+    })
+
+    $canvas.toBlob(blob => {
+      if (!blob) {
+        return reject(new Error('canvas toBlob fail'))
+      }
+      resolve(blob)
+    }, 'image/png')
+  })
+}