react-screenshots 0.5.21 → 0.6.0

package/lib/{types → Screenshots}/ScreenshotsCanvas/getPoints.d.ts

@@ -1,2 +1,2 @@
-import { Point, Bounds } from '../types';
+import type { Point, Bounds } from '../types';
 export default function getBoundsByPoints(e: MouseEvent, resizeOrMove: string, point: Point, bounds: Bounds): Point[];

package/lib/Screenshots/ScreenshotsCanvas/getPoints.js

@@ -0,0 +1,57 @@
+function getBoundsByPoints(e, resizeOrMove, point, bounds) {
+    const x = e.clientX - point.x;
+    const y = e.clientY - point.y;
+    let x1 = bounds.x;
+    let y1 = bounds.y;
+    let x2 = bounds.x + bounds.width;
+    let y2 = bounds.y + bounds.height;
+    switch(resizeOrMove){
+        case 'top':
+            y1 += y;
+            break;
+        case 'top-right':
+            x2 += x;
+            y1 += y;
+            break;
+        case 'right':
+            x2 += x;
+            break;
+        case 'right-bottom':
+            x2 += x;
+            y2 += y;
+            break;
+        case 'bottom':
+            y2 += y;
+            break;
+        case 'bottom-left':
+            x1 += x;
+            y2 += y;
+            break;
+        case 'left':
+            x1 += x;
+            break;
+        case 'left-top':
+            x1 += x;
+            y1 += y;
+            break;
+        case 'move':
+            x1 += x;
+            y1 += y;
+            x2 += x;
+            y2 += y;
+            break;
+        default:
+            break;
+    }
+    return [
+        {
+            x: x1,
+            y: y1
+        },
+        {
+            x: x2,
+            y: y2
+        }
+    ];
+}
+export { getBoundsByPoints as default };

package/lib/{types → Screenshots}/ScreenshotsCanvas/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import './index.less';
 export declare enum ResizePoints {
     ResizeTop = "top",
@@ -11,5 +10,5 @@ export declare enum ResizePoints {
     ResizeLeftTop = "left-top",
     Move = "move"
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<CanvasRenderingContext2D>>>;
+declare const _default: import("react").NamedExoticComponent<import("react").RefAttributes<CanvasRenderingContext2D>>;
 export default _default;

package/lib/Screenshots/ScreenshotsCanvas/index.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import useBounds from "../hooks/useBounds.js";
+import { HistoryItemType } from "../types.js";
+import useCursor from "../hooks/useCursor.js";
+import useEmiter from "../hooks/useEmiter.js";
+import useHistory from "../hooks/useHistory.js";
+import useOperation from "../hooks/useOperation.js";
+import useStore from "../hooks/useStore.js";
+import getBoundsByPoints from "./getBoundsByPoints.js";
+import getPoints from "./getPoints.js";
+import "./index.css";
+import isPointInDraw from "./isPointInDraw.js";
+const borders = [
+    'top',
+    'right',
+    'bottom',
+    'left'
+];
+var ScreenshotsCanvas_ResizePoints = /*#__PURE__*/ function(ResizePoints) {
+    ResizePoints["ResizeTop"] = "top";
+    ResizePoints["ResizetopRight"] = "top-right";
+    ResizePoints["ResizeRight"] = "right";
+    ResizePoints["ResizeRightBottom"] = "right-bottom";
+    ResizePoints["ResizeBottom"] = "bottom";
+    ResizePoints["ResizeBottomLeft"] = "bottom-left";
+    ResizePoints["ResizeLeft"] = "left";
+    ResizePoints["ResizeLeftTop"] = "left-top";
+    ResizePoints["Move"] = "move";
+    return ResizePoints;
+}({});
+const resizePoints = [
+    "top",
+    "top-right",
+    "right",
+    "right-bottom",
+    "bottom",
+    "bottom-left",
+    "left",
+    "left-top"
+];
+const Screenshots_ScreenshotsCanvas = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function(_props, ref) {
+    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(void 0);
+    const pointRef = useRef(null);
+    const boundsRef = useRef(null);
+    const canvasRef = useRef(null);
+    const ctxRef = useRef(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, resizeOrMove)=>{
+        if (0 !== e.button || !bounds) return;
+        if (operation) {
+            const draw = isPointInDraw(bounds, canvasRef.current, history, e.nativeEvent);
+            if (draw) emiter.emit('drawselect', draw, e.nativeEvent);
+            else emiter.emit('mousedown', e.nativeEvent);
+        } else {
+            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
+            };
+        }
+    }, [
+        bounds,
+        operation,
+        emiter,
+        history
+    ]);
+    const updateBounds = useCallback((e)=>{
+        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)=>{
+            if (operation) emiter.emit('mousemove', e);
+            else {
+                if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current) return;
+                updateBounds(e);
+            }
+        };
+        const onMouseUp = (e)=>{
+            if (operation) emiter.emit('mouseup', e);
+            else {
+                if (!resizeOrMoveRef.current || !pointRef.current || !boundsRef.current) return;
+                updateBounds(e);
+                resizeOrMoveRef.current = void 0;
+                pointRef.current = null;
+                boundsRef.current = null;
+            }
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return ()=>{
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [
+        updateBounds,
+        operation,
+        emiter
+    ]);
+    useImperativeHandle(ref, ()=>ctxRef.current);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "screenshots-canvas",
+        style: {
+            width: bounds?.width || 0,
+            height: bounds?.height || 0,
+            transform: bounds ? `translate(${bounds.x}px, ${bounds.y}px)` : 'none'
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "screenshots-canvas-body",
+                children: [
+                    /*#__PURE__*/ jsx("img", {
+                        className: "screenshots-canvas-image",
+                        src: url,
+                        style: {
+                            width,
+                            height,
+                            transform: bounds ? `translate(${-bounds.x}px, ${-bounds.y}px)` : 'none'
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("canvas", {
+                        ref: canvasRef,
+                        className: "screenshots-canvas-panel",
+                        width: bounds?.width || 0,
+                        height: bounds?.height || 0
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "screenshots-canvas-mask",
+                style: {
+                    cursor
+                },
+                onMouseDown: (e)=>onMouseDown(e, 'move'),
+                children: isCanResize && /*#__PURE__*/ jsxs("div", {
+                    className: "screenshots-canvas-size",
+                    children: [
+                        bounds.width,
+                        " \xd7 ",
+                        bounds.height
+                    ]
+                })
+            }),
+            borders.map((border)=>/*#__PURE__*/ jsx("div", {
+                    className: `screenshots-canvas-border-${border}`
+                }, border)),
+            isCanResize && resizePoints.map((resizePoint)=>/*#__PURE__*/ jsx("div", {
+                    className: `screenshots-canvas-point-${resizePoint}`,
+                    onMouseDown: (e)=>onMouseDown(e, resizePoint)
+                }, resizePoint))
+        ]
+    });
+}));
+export { ScreenshotsCanvas_ResizePoints as ResizePoints, Screenshots_ScreenshotsCanvas as default };

package/lib/{types → Screenshots}/ScreenshotsCanvas/isPointInDraw.d.ts

@@ -1,2 +1,2 @@
-import { Bounds, History } from '../types';
+import type { Bounds, History } from '../types';
 export default function isPointInDraw(bounds: Bounds, canvas: HTMLCanvasElement | null, history: History, e: MouseEvent): false | import("../types").HistoryItem<any, any> | undefined;

package/lib/Screenshots/ScreenshotsCanvas/isPointInDraw.js

@@ -0,0 +1,24 @@
+import { HistoryItemType } from "../types.js";
+function isPointInDraw(bounds, canvas, history, e) {
+    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
+        });
+    });
+}
+export { isPointInDraw as default };

package/lib/{types → Screenshots}/ScreenshotsColor/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './index.less';
 export interface ColorProps {
     value: string;
     onChange: (value: string) => void;
 }
-declare const _default: React.NamedExoticComponent<ColorProps>;
+declare const _default: import("react").NamedExoticComponent<ColorProps>;
 export default _default;

package/lib/Screenshots/ScreenshotsColor/index.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import "./index.css";
+const Screenshots_ScreenshotsColor = /*#__PURE__*/ memo(function({ value, onChange }) {
+    const colors = [
+        '#ee5126',
+        '#fceb4d',
+        '#90e746',
+        '#51c0fa',
+        '#7a7a7a',
+        '#ffffff'
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "screenshots-color",
+        children: colors.map((color)=>{
+            const classNames = [
+                'screenshots-color-item'
+            ];
+            if (color === value) classNames.push('screenshots-color-active');
+            return /*#__PURE__*/ jsx("div", {
+                className: classNames.join(' '),
+                style: {
+                    backgroundColor: color
+                },
+                onClick: ()=>onChange && onChange(color)
+            }, color);
+        })
+    });
+});
+export { Screenshots_ScreenshotsColor as default };

package/lib/{types → Screenshots}/ScreenshotsContext.d.ts

@@ -1,6 +1,7 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { EmiterRef, History, Bounds, CanvasContextRef } from './types';
-import { Lang } from './zh_CN';
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { EmiterRef, History, Bounds, CanvasContextRef } from './types';
+import type { Lang } from './zh_CN';
 export interface ScreenshotsContextStore {
     url?: string;
     image: HTMLImageElement | null;

package/lib/Screenshots/ScreenshotsContext.js

@@ -0,0 +1,32 @@
+import react from "react";
+import zh_CN from "./zh_CN.js";
+const ScreenshotsContext = react.createContext({
+    store: {
+        url: void 0,
+        image: null,
+        width: 0,
+        height: 0,
+        lang: zh_CN,
+        emiterRef: {
+            current: {}
+        },
+        canvasContextRef: {
+            current: null
+        },
+        history: {
+            index: -1,
+            stack: []
+        },
+        bounds: null,
+        cursor: 'move',
+        operation: void 0
+    },
+    dispatcher: {
+        call: void 0,
+        setHistory: void 0,
+        setBounds: void 0,
+        setCursor: void 0,
+        setOperation: void 0
+    }
+});
+export { ScreenshotsContext as default };

package/lib/{types → Screenshots}/ScreenshotsMagnifier/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './index.less';
 export interface ScreenshotsMagnifierProps {
     x: number;
     y: number;
 }
-declare const _default: React.NamedExoticComponent<ScreenshotsMagnifierProps>;
+declare const _default: import("react").NamedExoticComponent<ScreenshotsMagnifierProps>;
 export default _default;

package/lib/Screenshots/ScreenshotsMagnifier/index.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import useLang from "../hooks/useLang.js";
+import useStore from "../hooks/useStore.js";
+import "./index.css";
+const magnifierWidth = 100;
+const magnifierHeight = 80;
+const Screenshots_ScreenshotsMagnifier = /*#__PURE__*/ memo(function({ x, y }) {
+    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 /*#__PURE__*/ jsxs("div", {
+        ref: elRef,
+        className: "screenshots-magnifier",
+        style: {
+            transform: `translate(${position?.x}px, ${position?.y}px)`
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "screenshots-magnifier-body",
+                children: /*#__PURE__*/ jsx("canvas", {
+                    ref: canvasRef,
+                    className: "screenshots-magnifier-body-canvas",
+                    width: magnifierWidth,
+                    height: magnifierHeight
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "screenshots-magnifier-footer",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "screenshots-magnifier-footer-item",
+                        children: [
+                            lang.magnifier_position_label,
+                            ": (",
+                            x,
+                            ",",
+                            y,
+                            ")"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "screenshots-magnifier-footer-item",
+                        children: [
+                            "RGB: #",
+                            rgb
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+});
+export { Screenshots_ScreenshotsMagnifier as default };

package/lib/{types → Screenshots}/ScreenshotsOperations/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Bounds } from '../types';
+import type { Bounds } from '../types';
 import './index.less';
 export declare const ScreenshotsOperationsCtx: React.Context<Bounds | null>;
 declare const _default: React.NamedExoticComponent<object>;

package/lib/Screenshots/ScreenshotsOperations/index.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import react, { memo, useCallback, useEffect, useRef, useState } from "react";
+import useBounds from "../hooks/useBounds.js";
+import useStore from "../hooks/useStore.js";
+import operations from "../operations/index.js";
+import "./index.css";
+const ScreenshotsOperationsCtx = /*#__PURE__*/ react.createContext(null);
+const Screenshots_ScreenshotsOperations = /*#__PURE__*/ memo(function() {
+    const { width, height } = useStore();
+    const [bounds] = useBounds();
+    const [operationsRect, setOperationsRect] = useState(null);
+    const [position, setPosition] = useState(null);
+    const elRef = useRef(null);
+    const onDoubleClick = useCallback((e)=>{
+        e.stopPropagation();
+    }, []);
+    const onContextMenu = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    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 /*#__PURE__*/ jsx(ScreenshotsOperationsCtx.Provider, {
+        value: operationsRect,
+        children: /*#__PURE__*/ jsx("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,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "screenshots-operations-buttons",
+                children: operations.map((OperationButton, index)=>{
+                    if ('|' === OperationButton) return /*#__PURE__*/ jsx("div", {
+                        className: "screenshots-operations-divider"
+                    }, index);
+                    return /*#__PURE__*/ jsx(OperationButton, {}, index);
+                })
+            })
+        })
+    });
+});
+export { ScreenshotsOperationsCtx, Screenshots_ScreenshotsOperations as default };

package/lib/{types → Screenshots}/ScreenshotsOption/index.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { Point } from '../types';
+import type { ReactElement, ReactNode } from 'react';
+import type { Point } from '../types';
 import './index.less';
 export interface ScreenshotsOptionProps {
     open?: boolean;
@@ -11,5 +11,5 @@ export declare enum Placement {
     Bottom = "bottom",
     Top = "top"
 }
-declare const _default: React.NamedExoticComponent<ScreenshotsOptionProps>;
+declare const _default: import("react").NamedExoticComponent<ScreenshotsOptionProps>;
 export default _default;