+
+ {/* 保证一开始就显示，减少加载时间 */}
+
+
+
+
onMouseDown(e, "move")}
+ >
+ {isCanResize && (
+
+ {bounds.width} × {bounds.height}
+
+ )}
+
+ {borders.map((border) => {
+ return (
+
+ );
+ })}
+ {isCanResize &&
+ resizePoints.map((resizePoint) => {
+ return (
+
onMouseDown(e, resizePoint)}
+ />
+ );
+ })}
+
+ );
+ }),
+);
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsCanvas/isPointInDraw.ts b/packages/screenshot/src/Screenshots/ScreenshotsCanvas/isPointInDraw.ts
new file mode 100644
index 0000000..6d7f49b
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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 })
+ })
+}
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsColor/index.scss b/packages/screenshot/src/Screenshots/ScreenshotsColor/index.scss
new file mode 100644
index 0000000..0da02b5
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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;
+ }
+ }
+}
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsColor/index.tsx b/packages/screenshot/src/Screenshots/ScreenshotsColor/index.tsx
new file mode 100644
index 0000000..c520871
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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 (
+
+ {colors.map((color) => {
+ const classNames = ["screenshots-color-item"];
+ if (color === value) {
+ classNames.push("screenshots-color-active");
+ }
+ return (
+
onChange && onChange(color)}
+ />
+ );
+ })}
+
+ );
+});
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsContext.ts b/packages/screenshot/src/Screenshots/ScreenshotsContext.ts
new file mode 100644
index 0000000..655bebd
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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?:
(funcName: string, ...args: T[]) => void;
+ setHistory?: Dispatch>;
+ setBounds?: Dispatch>;
+ setCursor?: Dispatch>;
+ setOperation?: Dispatch>;
+}
+
+export interface ScreenshotsContextValue {
+ store: ScreenshotsContextStore;
+ dispatcher: ScreenshotsContextDispatcher;
+}
+
+export default React.createContext({
+ 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,
+ },
+});
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsMagnifier/index.scss b/packages/screenshot/src/Screenshots/ScreenshotsMagnifier/index.scss
new file mode 100644
index 0000000..8780aba
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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;
+ }
+ }
+}
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsMagnifier/index.tsx b/packages/screenshot/src/Screenshots/ScreenshotsMagnifier/index.tsx
new file mode 100644
index 0000000..01778ee
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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(null);
+ const elRef = useRef(null);
+ const canvasRef = useRef(null);
+ const ctxRef = useRef(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 (
+
+
+
+
+
+
+ {lang.magnifier_position_label}: ({x},{y})
+
+
RGB: #{rgb}
+
+
+
+ {OperationButtons.map((OperationButton, index) => {
+ if (OperationButton === "|") {
+ return (
+
+ );
+ } else {
+ return
;
+ }
+ })}
+
+
+ {sizes.map((size) => {
+ const classNames = ["screenshots-size-item"];
+
+ if (size === value) {
+ classNames.push("screenshots-size-active");
+ }
+
+ return (
+
onChange && onChange(size)}
+ >
+
+
+ );
+ })}
+
+
+
+
+ );
+});
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsTextarea/calculateNodeSize.ts b/packages/screenshot/src/Screenshots/ScreenshotsTextarea/calculateNodeSize.ts
new file mode 100644
index 0000000..dbeae68
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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)
+ }
+}
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsTextarea/index.scss b/packages/screenshot/src/Screenshots/ScreenshotsTextarea/index.scss
new file mode 100644
index 0000000..733ba5d
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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;
+}
diff --git a/packages/screenshot/src/Screenshots/ScreenshotsTextarea/index.tsx b/packages/screenshot/src/Screenshots/ScreenshotsTextarea/index.tsx
new file mode 100644
index 0000000..b7fb4cd
--- /dev/null
+++ b/packages/screenshot/src/Screenshots/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) => unknown;
+}
+
+export default memo(function ScreenshotsTextarea({
+ x,
+ y,
+ maxWidth,
+ maxHeight,
+ size,
+ color,
+ value,
+ onChange,
+ onBlur,
+}: TextInputProps): ReactElement {
+ const popoverRef = useRef(null);
+ const textareaRef = useRef(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(
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+