react-screenshots 0.5.21 → 0.6.0

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

@@ -0,0 +1,138 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
+import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
+import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/index.js";
+import useCursor from "../../hooks/useCursor.js";
+import useOperation from "../../hooks/useOperation.js";
+import useHistory from "../../hooks/useHistory.js";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import { HistoryItemType } from "../../types.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
+import { isHit } from "../utils.js";
+import draw from "./draw.js";
+import useLang from "../../hooks/useLang.js";
+function Brush() {
+    const lang = useLang();
+    const [, cursorDispatcher] = useCursor();
+    const [operation, operationDispatcher] = useOperation();
+    const canvasContextRef = useCanvasContextRef();
+    const [history, historyDispatcher] = useHistory();
+    const [size, setSize] = useState(3);
+    const [color, setColor] = useState('#ee5126');
+    const brushRef = useRef(null);
+    const brushEditRef = useRef(null);
+    const checked = 'Brush' === operation;
+    const selectBrush = useCallback(()=>{
+        operationDispatcher.set('Brush');
+        cursorDispatcher.set('default');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectBrush = useCallback(()=>{
+        if (checked) return;
+        selectBrush();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectBrush,
+        historyDispatcher
+    ]);
+    const onDrawSelect = useCallback((action, e)=>{
+        if ('Brush' !== action.name) return;
+        selectBrush();
+        brushEditRef.current = {
+            type: HistoryItemType.Edit,
+            data: {
+                x1: e.clientX,
+                y1: e.clientY,
+                x2: e.clientX,
+                y2: e.clientY
+            },
+            source: action
+        };
+        historyDispatcher.select(action);
+    }, [
+        selectBrush,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || brushRef.current || !canvasContextRef.current) return;
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+        brushRef.current = {
+            name: 'Brush',
+            type: HistoryItemType.Source,
+            data: {
+                size,
+                color,
+                points: [
+                    {
+                        x: e.clientX - left,
+                        y: e.clientY - top
+                    }
+                ]
+            },
+            editHistory: [],
+            draw: draw,
+            isHit: isHit
+        };
+    }, [
+        checked,
+        canvasContextRef,
+        size,
+        color
+    ]);
+    const onMousemove = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current) return;
+        if (brushEditRef.current) {
+            brushEditRef.current.data.x2 = e.clientX;
+            brushEditRef.current.data.y2 = e.clientY;
+            if (history.top !== brushEditRef.current) {
+                brushEditRef.current.source.editHistory.push(brushEditRef.current);
+                historyDispatcher.push(brushEditRef.current);
+            } else historyDispatcher.set(history);
+        } else if (brushRef.current) {
+            const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+            brushRef.current.data.points.push({
+                x: e.clientX - left,
+                y: e.clientY - top
+            });
+            if (history.top !== brushRef.current) historyDispatcher.push(brushRef.current);
+            else historyDispatcher.set(history);
+        }
+    }, [
+        checked,
+        history,
+        canvasContextRef,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        if (brushRef.current) historyDispatcher.clearSelect();
+        brushRef.current = null;
+        brushEditRef.current = null;
+    }, [
+        checked,
+        historyDispatcher
+    ]);
+    useDrawSelect(onDrawSelect);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_brush_title,
+        icon: "icon-brush",
+        checked: checked,
+        onClick: onSelectBrush,
+        option: /*#__PURE__*/ jsx(ScreenshotsSizeColor, {
+            size: size,
+            color: color,
+            onSizeChange: setSize,
+            onColorChange: setColor
+        })
+    });
+}
+export { Brush as default };

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

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

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

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import useCall from "../../hooks/useCall.js";
+import useLang from "../../hooks/useLang.js";
+import useReset from "../../hooks/useReset.js";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+function Cancel() {
+    const call = useCall();
+    const reset = useReset();
+    const lang = useLang();
+    const onClick = useCallback(()=>{
+        call('onCancel');
+        reset();
+    }, [
+        call,
+        reset
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_cancel_title,
+        icon: "icon-cancel",
+        onClick: onClick
+    });
+}
+export { Cancel as default };

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

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

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

@@ -0,0 +1,81 @@
+import { EllipseEditType } from "./index.js";
+import { drawDragCircle } from "../utils.js";
+function getEditedEllipseData(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 === EllipseEditType.Move) {
+            x1 += x;
+            y1 += y;
+            x2 += x;
+            y2 += y;
+        } else if (data.type === EllipseEditType.ResizeTop) y1 += y;
+        else if (data.type === EllipseEditType.ResizeRightTop) {
+            x2 += x;
+            y1 += y;
+        } else if (data.type === EllipseEditType.ResizeRight) x2 += x;
+        else if (data.type === EllipseEditType.ResizeRightBottom) {
+            x2 += x;
+            y2 += y;
+        } else if (data.type === EllipseEditType.ResizeBottom) y2 += y;
+        else if (data.type === EllipseEditType.ResizeLeftBottom) {
+            x1 += x;
+            y2 += y;
+        } else if (data.type === EllipseEditType.ResizeLeft) x1 += x;
+        else if (data.type === EllipseEditType.ResizeLeftTop) {
+            x1 += x;
+            y1 += y;
+        }
+    });
+    return {
+        ...action.data,
+        x1,
+        x2,
+        y1,
+        y2
+    };
+}
+function draw(ctx, action) {
+    const { size, color, x1, y1, x2, y2 } = getEditedEllipseData(action);
+    ctx.lineCap = 'butt';
+    ctx.lineJoin = 'miter';
+    ctx.lineWidth = size;
+    ctx.strokeStyle = color;
+    const x = (x1 + x2) / 2;
+    const y = (y1 + y2) / 2;
+    const rx = Math.abs(x2 - x1) / 2;
+    const ry = Math.abs(y2 - y1) / 2;
+    const k = 0.5522848;
+    const ox = rx * k;
+    const oy = ry * k;
+    ctx.beginPath();
+    ctx.moveTo(x - rx, y);
+    ctx.bezierCurveTo(x - rx, y - oy, x - ox, y - ry, x, y - ry);
+    ctx.bezierCurveTo(x + ox, y - ry, x + rx, y - oy, x + rx, y);
+    ctx.bezierCurveTo(x + rx, y + oy, x + ox, y + ry, x, y + ry);
+    ctx.bezierCurveTo(x - ox, y + ry, x - rx, y + oy, x - rx, y);
+    ctx.closePath();
+    ctx.stroke();
+    if (action.isSelected) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = '#000000';
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y1);
+        ctx.lineTo(x2, y2);
+        ctx.lineTo(x1, y2);
+        ctx.closePath();
+        ctx.stroke();
+        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, getEditedEllipseData };

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

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

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

@@ -0,0 +1,185 @@
+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, { getEditedEllipseData } from "./draw.js";
+var Ellipse_EllipseEditType = /*#__PURE__*/ function(EllipseEditType) {
+    EllipseEditType[EllipseEditType["Move"] = 0] = "Move";
+    EllipseEditType[EllipseEditType["ResizeTop"] = 1] = "ResizeTop";
+    EllipseEditType[EllipseEditType["ResizeRightTop"] = 2] = "ResizeRightTop";
+    EllipseEditType[EllipseEditType["ResizeRight"] = 3] = "ResizeRight";
+    EllipseEditType[EllipseEditType["ResizeRightBottom"] = 4] = "ResizeRightBottom";
+    EllipseEditType[EllipseEditType["ResizeBottom"] = 5] = "ResizeBottom";
+    EllipseEditType[EllipseEditType["ResizeLeftBottom"] = 6] = "ResizeLeftBottom";
+    EllipseEditType[EllipseEditType["ResizeLeft"] = 7] = "ResizeLeft";
+    EllipseEditType[EllipseEditType["ResizeLeftTop"] = 8] = "ResizeLeftTop";
+    return EllipseEditType;
+}({});
+function Ellipse() {
+    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 ellipseRef = useRef(null);
+    const ellipseEditRef = useRef(null);
+    const checked = 'Ellipse' === operation;
+    const selectEllipse = useCallback(()=>{
+        operationDispatcher.set('Ellipse');
+        cursorDispatcher.set('crosshair');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectEllipse = useCallback(()=>{
+        if (checked) return;
+        selectEllipse();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectEllipse,
+        historyDispatcher
+    ]);
+    const onDrawSelect = useCallback((action, e)=>{
+        if ('Ellipse' !== action.name || !canvasContextRef.current) return;
+        const source = action;
+        selectEllipse();
+        const { x1, y1, x2, y2 } = getEditedEllipseData(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;
+        ellipseEditRef.current = {
+            type: HistoryItemType.Edit,
+            data: {
+                type,
+                x1: e.clientX,
+                y1: e.clientY,
+                x2: e.clientX,
+                y2: e.clientY
+            },
+            source
+        };
+        historyDispatcher.select(action);
+    }, [
+        canvasContextRef,
+        selectEllipse,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current || ellipseRef.current) return;
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+        const x = e.clientX - left;
+        const y = e.clientY - top;
+        ellipseRef.current = {
+            name: 'Ellipse',
+            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 (ellipseEditRef.current) {
+            ellipseEditRef.current.data.x2 = e.clientX;
+            ellipseEditRef.current.data.y2 = e.clientY;
+            if (history.top !== ellipseEditRef.current) {
+                ellipseEditRef.current.source.editHistory.push(ellipseEditRef.current);
+                historyDispatcher.push(ellipseEditRef.current);
+            } else historyDispatcher.set(history);
+        } else if (ellipseRef.current) {
+            const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+            ellipseRef.current.data.x2 = e.clientX - left;
+            ellipseRef.current.data.y2 = e.clientY - top;
+            if (history.top !== ellipseRef.current) historyDispatcher.push(ellipseRef.current);
+            else historyDispatcher.set(history);
+        }
+    }, [
+        checked,
+        canvasContextRef,
+        history,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        if (ellipseRef.current) historyDispatcher.clearSelect();
+        ellipseRef.current = null;
+        ellipseEditRef.current = null;
+    }, [
+        checked,
+        historyDispatcher
+    ]);
+    useDrawSelect(onDrawSelect);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_ellipse_title,
+        icon: "icon-ellipse",
+        checked: checked,
+        onClick: onSelectEllipse,
+        option: /*#__PURE__*/ jsx(ScreenshotsSizeColor, {
+            size: size,
+            color: color,
+            onSizeChange: setSize,
+            onColorChange: setColor
+        })
+    });
+}
+export { Ellipse_EllipseEditType as EllipseEditType, Ellipse as default };

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface MosaicTile {
     x: number;
     y: number;

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

@@ -0,0 +1,174 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSize from "../../ScreenshotsSize/index.js";
+import useCanvasMousedown from "../../hooks/useCanvasMousedown.js";
+import useCanvasMousemove from "../../hooks/useCanvasMousemove.js";
+import useCanvasMouseup from "../../hooks/useCanvasMouseup.js";
+import { HistoryItemType } from "../../types.js";
+import useOperation from "../../hooks/useOperation.js";
+import useCursor from "../../hooks/useCursor.js";
+import useStore from "../../hooks/useStore.js";
+import useBounds from "../../hooks/useBounds.js";
+import useHistory from "../../hooks/useHistory.js";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import useLang from "../../hooks/useLang.js";
+function getColor(x, y, imageData) {
+    if (!imageData) return [
+        0,
+        0,
+        0,
+        0
+    ];
+    const { data, width } = imageData;
+    const index = y * width * 4 + 4 * x;
+    return Array.from(data.slice(index, index + 4));
+}
+function draw(ctx, action) {
+    const { tiles, size } = action.data;
+    tiles.forEach((tile)=>{
+        const r = Math.round(tile.color[0]);
+        const g = Math.round(tile.color[1]);
+        const b = Math.round(tile.color[2]);
+        const a = tile.color[3] / 255;
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        ctx.fillRect(tile.x - size / 2, tile.y - size / 2, size, size);
+    });
+}
+function Mosaic() {
+    const lang = useLang();
+    const { image, width, height } = useStore();
+    const [operation, operationDispatcher] = useOperation();
+    const canvasContextRef = useCanvasContextRef();
+    const [history, historyDispatcher] = useHistory();
+    const [bounds] = useBounds();
+    const [, cursorDispatcher] = useCursor();
+    const [size, setSize] = useState(3);
+    const imageDataRef = useRef(null);
+    const mosaicRef = useRef(null);
+    const checked = 'Mosaic' === operation;
+    const selectMosaic = useCallback(()=>{
+        operationDispatcher.set('Mosaic');
+        cursorDispatcher.set('crosshair');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectMosaic = useCallback(()=>{
+        if (checked) return;
+        selectMosaic();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectMosaic,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || mosaicRef.current || !imageDataRef.current || !canvasContextRef.current) return;
+        const rect = canvasContextRef.current.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.x;
+        const y = e.clientY - rect.y;
+        const mosaicSize = 2 * size;
+        mosaicRef.current = {
+            name: 'Mosaic',
+            type: HistoryItemType.Source,
+            data: {
+                size: mosaicSize,
+                tiles: [
+                    {
+                        x,
+                        y,
+                        color: getColor(x, y, imageDataRef.current)
+                    }
+                ]
+            },
+            editHistory: [],
+            draw
+        };
+    }, [
+        checked,
+        size,
+        canvasContextRef
+    ]);
+    const onMousemove = useCallback((e)=>{
+        if (!checked || !mosaicRef.current || !canvasContextRef.current || !imageDataRef.current) return;
+        const rect = canvasContextRef.current.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.x;
+        const y = e.clientY - rect.y;
+        const mosaicSize = mosaicRef.current.data.size;
+        const mosaicTiles = mosaicRef.current.data.tiles;
+        let lastTile = mosaicTiles[mosaicTiles.length - 1];
+        if (lastTile) {
+            const dx = lastTile.x - x;
+            const dy = lastTile.y - y;
+            let length = Math.sqrt(dx ** 2 + dy ** 2);
+            const sin = -dy / length;
+            const cos = -dx / length;
+            while(length > mosaicSize){
+                const cx = Math.floor(lastTile.x + mosaicSize * cos);
+                const cy = Math.floor(lastTile.y + mosaicSize * sin);
+                lastTile = {
+                    x: cx,
+                    y: cy,
+                    color: getColor(cx, cy, imageDataRef.current)
+                };
+                mosaicTiles.push(lastTile);
+                length -= mosaicSize;
+            }
+            if (length > mosaicSize / 2) mosaicTiles.push({
+                x,
+                y,
+                color: getColor(x, y, imageDataRef.current)
+            });
+        } else mosaicTiles.push({
+            x,
+            y,
+            color: getColor(x, y, imageDataRef.current)
+        });
+        if (history.top !== mosaicRef.current) historyDispatcher.push(mosaicRef.current);
+        else historyDispatcher.set(history);
+    }, [
+        checked,
+        canvasContextRef,
+        history,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        mosaicRef.current = null;
+    }, [
+        checked
+    ]);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    useEffect(()=>{
+        if (!bounds || !image || !checked) return;
+        const $canvas = document.createElement('canvas');
+        const canvasContext = $canvas.getContext('2d');
+        if (!canvasContext) return;
+        $canvas.width = bounds.width;
+        $canvas.height = bounds.height;
+        const rx = image.naturalWidth / width;
+        const ry = image.naturalHeight / height;
+        canvasContext.drawImage(image, bounds.x * rx, bounds.y * ry, bounds.width * rx, bounds.height * ry, 0, 0, bounds.width, bounds.height);
+        imageDataRef.current = canvasContext.getImageData(0, 0, bounds.width, bounds.height);
+    }, [
+        width,
+        height,
+        bounds,
+        image,
+        checked
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_mosaic_title,
+        icon: "icon-mosaic",
+        checked: checked,
+        onClick: onSelectMosaic,
+        option: /*#__PURE__*/ jsx(ScreenshotsSize, {
+            value: size,
+            onChange: setSize
+        })
+    });
+}
+export { Mosaic as default };

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

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

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

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+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";
+import composeImage from "../../composeImage.js";
+function Ok() {
+    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('onOk', blob, bounds);
+                reset();
+            });
+        });
+    }, [
+        canvasContextRef,
+        historyDispatcher,
+        image,
+        width,
+        height,
+        history,
+        bounds,
+        call,
+        reset
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_ok_title,
+        icon: "icon-ok",
+        onClick: onClick
+    });
+}
+export { Ok as default };