react-screenshots 0.5.21 → 0.6.0

package/lib/{types → Screenshots}/operations/Rectangle/draw.d.ts

@@ -1,5 +1,5 @@
-import { RectangleData, RectangleEditData } from '.';
-import { HistoryItemSource } from '../../types';
+import type { RectangleData, RectangleEditData } from '.';
+import type { HistoryItemSource } from '../../types';
 export declare function getEditedRectangleData(action: HistoryItemSource<RectangleData, RectangleEditData>): {
     x1: number;
     x2: number;

package/lib/Screenshots/operations/Rectangle/draw.js

@@ -0,0 +1,66 @@
+import { RectangleEditType } from "./index.js";
+import { drawDragCircle } from "../utils.js";
+function getEditedRectangleData(action) {
+    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 === RectangleEditType.Move) {
+            x1 += x;
+            y1 += y;
+            x2 += x;
+            y2 += y;
+        } else if (data.type === RectangleEditType.ResizeTop) y1 += y;
+        else if (data.type === RectangleEditType.ResizeRightTop) {
+            x2 += x;
+            y1 += y;
+        } else if (data.type === RectangleEditType.ResizeRight) x2 += x;
+        else if (data.type === RectangleEditType.ResizeRightBottom) {
+            x2 += x;
+            y2 += y;
+        } else if (data.type === RectangleEditType.ResizeBottom) y2 += y;
+        else if (data.type === RectangleEditType.ResizeLeftBottom) {
+            x1 += x;
+            y2 += y;
+        } else if (data.type === RectangleEditType.ResizeLeft) x1 += x;
+        else if (data.type === RectangleEditType.ResizeLeftTop) {
+            x1 += x;
+            y1 += y;
+        }
+    });
+    return {
+        ...action.data,
+        x1,
+        x2,
+        y1,
+        y2
+    };
+}
+function draw(ctx, action) {
+    const { size, color, x1, y1, x2, y2 } = getEditedRectangleData(action);
+    ctx.lineCap = 'butt';
+    ctx.lineJoin = 'miter';
+    ctx.lineWidth = size;
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y1);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(x1, y2);
+    ctx.closePath();
+    ctx.stroke();
+    if (action.isSelected) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = '#000000';
+        ctx.fillStyle = '#ffffff';
+        drawDragCircle(ctx, (x1 + x2) / 2, y1);
+        drawDragCircle(ctx, x2, y1);
+        drawDragCircle(ctx, x2, (y1 + y2) / 2);
+        drawDragCircle(ctx, x2, y2);
+        drawDragCircle(ctx, (x1 + x2) / 2, y2);
+        drawDragCircle(ctx, x1, y2);
+        drawDragCircle(ctx, x1, (y1 + y2) / 2);
+        drawDragCircle(ctx, x1, y1);
+    }
+}
+export { draw as default, getEditedRectangleData };

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface RectangleData {
     size: number;
     color: string;

package/lib/Screenshots/operations/Rectangle/index.js

@@ -0,0 +1,186 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
+import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
+import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
+import useCursor from "../../hooks/useCursor.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
+import useHistory from "../../hooks/useHistory.js";
+import useLang from "../../hooks/useLang.js";
+import useOperation from "../../hooks/useOperation.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
+import { HistoryItemType } from "../../types.js";
+import { isHit, isHitCircle } from "../utils.js";
+import draw, { getEditedRectangleData } from "./draw.js";
+var Rectangle_RectangleEditType = /*#__PURE__*/ function(RectangleEditType) {
+    RectangleEditType[RectangleEditType["Move"] = 0] = "Move";
+    RectangleEditType[RectangleEditType["ResizeTop"] = 1] = "ResizeTop";
+    RectangleEditType[RectangleEditType["ResizeRightTop"] = 2] = "ResizeRightTop";
+    RectangleEditType[RectangleEditType["ResizeRight"] = 3] = "ResizeRight";
+    RectangleEditType[RectangleEditType["ResizeRightBottom"] = 4] = "ResizeRightBottom";
+    RectangleEditType[RectangleEditType["ResizeBottom"] = 5] = "ResizeBottom";
+    RectangleEditType[RectangleEditType["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
+    RectangleEditType[RectangleEditType["ResizeLeft"] = 7] = "ResizeLeft";
+    RectangleEditType[RectangleEditType["ResizeLeftTop"] = 8] = "ResizeLeftTop";
+    return RectangleEditType;
+}({});
+function Rectangle() {
+    const lang = useLang();
+    const [history, historyDispatcher] = useHistory();
+    const [operation, operationDispatcher] = useOperation();
+    const [, cursorDispatcher] = useCursor();
+    const canvasContextRef = useCanvasContextRef();
+    const [size, setSize] = useState(3);
+    const [color, setColor] = useState('#ee5126');
+    const rectangleRef = useRef(null);
+    const rectangleEditRef = useRef(null);
+    const checked = 'Rectangle' === operation;
+    const selectRectangle = useCallback(()=>{
+        operationDispatcher.set('Rectangle');
+        cursorDispatcher.set('crosshair');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectRectangle = useCallback(()=>{
+        if (checked) return;
+        selectRectangle();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectRectangle,
+        historyDispatcher
+    ]);
+    const onDrawSelect = useCallback((action, e)=>{
+        if ('Rectangle' !== action.name || !canvasContextRef.current) return;
+        const source = action;
+        selectRectangle();
+        const { x1, y1, x2, y2 } = getEditedRectangleData(source);
+        let type = 0;
+        if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: (x1 + x2) / 2,
+            y: y1
+        })) type = 1;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x2,
+            y: y1
+        })) type = 2;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x2,
+            y: (y1 + y2) / 2
+        })) type = 3;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x2,
+            y: y2
+        })) type = 4;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: (x1 + x2) / 2,
+            y: y2
+        })) type = 5;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x1,
+            y: y2
+        })) type = 6;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x1,
+            y: (y1 + y2) / 2
+        })) type = 7;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x1,
+            y: y1
+        })) type = 8;
+        rectangleEditRef.current = {
+            type: HistoryItemType.Edit,
+            data: {
+                type,
+                x1: e.clientX,
+                y1: e.clientY,
+                x2: e.clientX,
+                y2: e.clientY
+            },
+            source: action
+        };
+        historyDispatcher.select(action);
+    }, [
+        canvasContextRef,
+        selectRectangle,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current || rectangleRef.current) return;
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+        const x = e.clientX - left;
+        const y = e.clientY - top;
+        rectangleRef.current = {
+            name: 'Rectangle',
+            type: HistoryItemType.Source,
+            data: {
+                size,
+                color,
+                x1: x,
+                y1: y,
+                x2: x,
+                y2: y
+            },
+            editHistory: [],
+            draw: draw,
+            isHit: isHit
+        };
+    }, [
+        checked,
+        size,
+        color,
+        canvasContextRef
+    ]);
+    const onMousemove = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current) return;
+        if (rectangleEditRef.current) {
+            rectangleEditRef.current.data.x2 = e.clientX;
+            rectangleEditRef.current.data.y2 = e.clientY;
+            if (history.top !== rectangleEditRef.current) {
+                rectangleEditRef.current.source.editHistory.push(rectangleEditRef.current);
+                historyDispatcher.push(rectangleEditRef.current);
+            } else historyDispatcher.set(history);
+        } else if (rectangleRef.current) {
+            const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+            const rectangleData = rectangleRef.current.data;
+            rectangleData.x2 = e.clientX - left;
+            rectangleData.y2 = e.clientY - top;
+            if (history.top !== rectangleRef.current) historyDispatcher.push(rectangleRef.current);
+            else historyDispatcher.set(history);
+        }
+    }, [
+        checked,
+        canvasContextRef,
+        history,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        if (rectangleRef.current) historyDispatcher.clearSelect();
+        rectangleRef.current = null;
+        rectangleEditRef.current = null;
+    }, [
+        checked,
+        historyDispatcher
+    ]);
+    useDrawSelect(onDrawSelect);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_rectangle_title,
+        icon: "icon-rectangle",
+        checked: checked,
+        onClick: onSelectRectangle,
+        option: /*#__PURE__*/ jsx(ScreenshotsSizeColor, {
+            size: size,
+            color: color,
+            onSizeChange: setSize,
+            onColorChange: setColor
+        })
+    });
+}
+export { Rectangle_RectangleEditType as RectangleEditType, Rectangle as default };

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

@@ -1,2 +1,2 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export default function Redo(): ReactElement;

package/lib/Screenshots/operations/Redo/index.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import useHistory from "../../hooks/useHistory.js";
+import useLang from "../../hooks/useLang.js";
+function Redo() {
+    const lang = useLang();
+    const [history, historyDispatcher] = useHistory();
+    const onClick = useCallback(()=>{
+        historyDispatcher.redo();
+    }, [
+        historyDispatcher
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_redo_title,
+        icon: "icon-redo",
+        disabled: !history.stack.length || history.stack.length - 1 === history.index,
+        onClick: onClick
+    });
+}
+export { Redo as default };

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

@@ -1,2 +1,2 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export default function Save(): ReactElement;

package/lib/Screenshots/operations/Save/index.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import composeImage from "../../composeImage.js";
+import useStore from "../../hooks/useStore.js";
+import useCall from "../../hooks/useCall.js";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useHistory from "../../hooks/useHistory.js";
+import useReset from "../../hooks/useReset.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+function Save() {
+    const { image, width, height, history, bounds, lang } = useStore();
+    const canvasContextRef = useCanvasContextRef();
+    const [, historyDispatcher] = useHistory();
+    const call = useCall();
+    const reset = useReset();
+    const onClick = useCallback(()=>{
+        historyDispatcher.clearSelect();
+        setTimeout(()=>{
+            if (!canvasContextRef.current || !image || !bounds) return;
+            composeImage({
+                image,
+                width,
+                height,
+                history,
+                bounds
+            }).then((blob)=>{
+                call('onSave', blob, bounds);
+                reset();
+            });
+        });
+    }, [
+        canvasContextRef,
+        historyDispatcher,
+        image,
+        width,
+        height,
+        history,
+        bounds,
+        call,
+        reset
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_save_title,
+        icon: "icon-save",
+        onClick: onClick
+    });
+}
+export { Save as default };

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface TextData {
     size: number;
     color: string;

package/lib/Screenshots/operations/Text/index.js

@@ -0,0 +1,220 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
+import useCursor from "../../hooks/useCursor.js";
+import useHistory from "../../hooks/useHistory.js";
+import useOperation from "../../hooks/useOperation.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
+import { HistoryItemType } from "../../types.js";
+import ScreenshotsTextarea from "../../ScreenshotsTextarea/index.js";
+import useBounds from "../../hooks/useBounds.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
+import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
+import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
+import useLang from "../../hooks/useLang.js";
+const sizes = {
+    3: 18,
+    6: 32,
+    9: 46
+};
+function draw(ctx, action) {
+    const { size, color, fontFamily, x, y, text } = action.data;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.font = `${size}px ${fontFamily}`;
+    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
+    });
+    text.split('\n').forEach((item, index)=>{
+        ctx.fillText(item, x + distance.x, y + distance.y + index * size);
+    });
+}
+function isHit(ctx, action, point) {
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.font = `${action.data.size}px ${action.data.fontFamily}`;
+    let width = 0;
+    let height = 0;
+    action.data.text.split('\n').forEach((item)=>{
+        const measured = ctx.measureText(item);
+        if (width < measured.width) width = measured.width;
+        height += action.data.size;
+    });
+    const { x, y } = action.editHistory.reduce((distance, { data })=>({
+            x: distance.x + data.x2 - data.x1,
+            y: distance.y + data.y2 - data.y1
+        }), {
+        x: 0,
+        y: 0
+    });
+    const left = action.data.x + x;
+    const top = action.data.y + y;
+    const right = left + width;
+    const bottom = top + height;
+    return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;
+}
+function Text() {
+    const lang = useLang();
+    const [history, historyDispatcher] = useHistory();
+    const [bounds] = useBounds();
+    const [operation, operationDispatcher] = useOperation();
+    const [, cursorDispatcher] = useCursor();
+    const canvasContextRef = useCanvasContextRef();
+    const [size, setSize] = useState(3);
+    const [color, setColor] = useState('#ee5126');
+    const textRef = useRef(null);
+    const textEditRef = useRef(null);
+    const [textareaBounds, setTextareaBounds] = useState(null);
+    const [text, setText] = useState('');
+    const checked = 'Text' === operation;
+    const selectText = useCallback(()=>{
+        operationDispatcher.set('Text');
+        cursorDispatcher.set('default');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectText = useCallback(()=>{
+        if (checked) return;
+        selectText();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectText,
+        historyDispatcher
+    ]);
+    const onSizeChange = useCallback((size)=>{
+        if (textRef.current) textRef.current.data.size = sizes[size];
+        setSize(size);
+    }, []);
+    const onColorChange = useCallback((color)=>{
+        if (textRef.current) textRef.current.data.color = color;
+        setColor(color);
+    }, []);
+    const onTextareaChange = useCallback((value)=>{
+        setText(value);
+        if (checked && textRef.current) textRef.current.data.text = value;
+    }, [
+        checked
+    ]);
+    const onTextareaBlur = useCallback(()=>{
+        if (textRef.current && textRef.current.data.text) historyDispatcher.push(textRef.current);
+        textRef.current = null;
+        setText('');
+        setTextareaBounds(null);
+    }, [
+        historyDispatcher
+    ]);
+    const onDrawSelect = useCallback((action, e)=>{
+        if ('Text' !== action.name) return;
+        selectText();
+        textEditRef.current = {
+            type: HistoryItemType.Edit,
+            data: {
+                x1: e.clientX,
+                y1: e.clientY,
+                x2: e.clientX,
+                y2: e.clientY
+            },
+            source: action
+        };
+        historyDispatcher.select(action);
+    }, [
+        selectText,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current || textRef.current || !bounds) return;
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+        const fontFamily = window.getComputedStyle(canvasContextRef.current.canvas).fontFamily;
+        const x = e.clientX - left;
+        const y = e.clientY - top;
+        textRef.current = {
+            name: 'Text',
+            type: HistoryItemType.Source,
+            data: {
+                size: sizes[size],
+                color,
+                fontFamily,
+                x,
+                y,
+                text: ''
+            },
+            editHistory: [],
+            draw,
+            isHit
+        };
+        setTextareaBounds({
+            x: e.clientX,
+            y: e.clientY,
+            maxWidth: bounds.width - x,
+            maxHeight: bounds.height - y
+        });
+    }, [
+        checked,
+        size,
+        color,
+        bounds,
+        canvasContextRef
+    ]);
+    const onMousemove = useCallback((e)=>{
+        if (!checked) return;
+        if (textEditRef.current) {
+            textEditRef.current.data.x2 = e.clientX;
+            textEditRef.current.data.y2 = e.clientY;
+            if (history.top !== textEditRef.current) {
+                textEditRef.current.source.editHistory.push(textEditRef.current);
+                historyDispatcher.push(textEditRef.current);
+            } else historyDispatcher.set(history);
+        }
+    }, [
+        checked,
+        history,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        textEditRef.current = null;
+    }, [
+        checked
+    ]);
+    useDrawSelect(onDrawSelect);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(ScreenshotsButton, {
+                title: lang.operation_text_title,
+                icon: "icon-text",
+                checked: checked,
+                onClick: onSelectText,
+                option: /*#__PURE__*/ jsx(ScreenshotsSizeColor, {
+                    size: size,
+                    color: color,
+                    onSizeChange: onSizeChange,
+                    onColorChange: onColorChange
+                })
+            }),
+            checked && textareaBounds && /*#__PURE__*/ jsx(ScreenshotsTextarea, {
+                x: textareaBounds.x,
+                y: textareaBounds.y,
+                maxWidth: textareaBounds.maxWidth,
+                maxHeight: textareaBounds.maxHeight,
+                size: sizes[size],
+                color: color,
+                value: text,
+                onChange: onTextareaChange,
+                onBlur: onTextareaBlur
+            })
+        ]
+    });
+}
+export { Text as default };

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

@@ -1,2 +1,2 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export default function Undo(): ReactElement;

package/lib/Screenshots/operations/Undo/index.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import useHistory from "../../hooks/useHistory.js";
+import useLang from "../../hooks/useLang.js";
+function Undo() {
+    const lang = useLang();
+    const [history, historyDispatcher] = useHistory();
+    const onClick = useCallback(()=>{
+        historyDispatcher.undo();
+    }, [
+        historyDispatcher
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_undo_title,
+        icon: "icon-undo",
+        disabled: -1 === history.index,
+        onClick: onClick
+    });
+}
+export { Undo as default };

package/lib/Screenshots/operations/index.js

@@ -0,0 +1,27 @@
+import Ok from "./Ok/index.js";
+import Cancel from "./Cancel/index.js";
+import Save from "./Save/index.js";
+import Redo from "./Redo/index.js";
+import Undo from "./Undo/index.js";
+import Mosaic from "./Mosaic/index.js";
+import Text from "./Text/index.js";
+import Brush from "./Brush/index.js";
+import Arrow from "./Arrow/index.js";
+import Ellipse from "./Ellipse/index.js";
+import Rectangle from "./Rectangle/index.js";
+const operations = [
+    Rectangle,
+    Ellipse,
+    Arrow,
+    Brush,
+    Text,
+    Mosaic,
+    '|',
+    Undo,
+    Redo,
+    '|',
+    Save,
+    Cancel,
+    Ok
+];
+export { operations as default };

package/lib/{types → Screenshots}/operations/utils.d.ts

@@ -1,4 +1,4 @@
-import { HistoryItemSource, Point } from '../types';
+import type { HistoryItemSource, Point } from '../types';
 export declare function drawDragCircle(ctx: CanvasRenderingContext2D, x: number, y: number): void;
 export declare function isHit<S, E>(ctx: CanvasRenderingContext2D, action: HistoryItemSource<S, E>, point: Point): boolean;
 export declare function isHitCircle(canvas: HTMLCanvasElement | null, e: MouseEvent, point: Point): boolean;

package/lib/Screenshots/operations/utils.js

@@ -0,0 +1,23 @@
+const CircleRadius = 4;
+function drawDragCircle(ctx, x, y) {
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = '#000000';
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.arc(x, y, CircleRadius, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.stroke();
+}
+function isHit(ctx, action, point) {
+    action.draw(ctx, action);
+    const { data } = ctx.getImageData(point.x, point.y, 1, 1);
+    return data.some((val)=>0 !== val);
+}
+function isHitCircle(canvas, e, point) {
+    if (!canvas) return false;
+    const { left, top } = canvas.getBoundingClientRect();
+    const x = e.clientX - left;
+    const y = e.clientY - top;
+    return (point.x - x) ** 2 + (point.y - y) ** 2 < CircleRadius ** 2;
+}
+export { drawDragCircle, isHit, isHitCircle };

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

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export type CanvasContextRef = MutableRefObject<CanvasRenderingContext2D | null>;
 export type EmiterListener = (...args: any) => unknown;
 export type Emiter = Record<string, EmiterListener[]>;

package/lib/Screenshots/types.js

@@ -0,0 +1,6 @@
+var types_HistoryItemType = /*#__PURE__*/ function(HistoryItemType) {
+    HistoryItemType[HistoryItemType["Edit"] = 0] = "Edit";
+    HistoryItemType[HistoryItemType["Source"] = 1] = "Source";
+    return HistoryItemType;
+}({});
+export { types_HistoryItemType as HistoryItemType };