react-screenshots 0.5.21 → 0.6.0

package/lib/Screenshots/hooks/useHistory.js

@@ -0,0 +1,122 @@
+import { useCallback } from "react";
+import { HistoryItemType } from "../types.js";
+import useDispatcher from "./useDispatcher.js";
+import useStore from "./useStore.js";
+function useHistory() {
+    const { history } = useStore();
+    const { setHistory } = useDispatcher();
+    const push = useCallback((action)=>{
+        const { index, stack } = history;
+        stack.forEach((item)=>{
+            if (item.type === HistoryItemType.Source) item.isSelected = false;
+        });
+        if (action.type === HistoryItemType.Source) action.isSelected = true;
+        else if (action.type === HistoryItemType.Edit) action.source.isSelected = true;
+        stack.splice(index + 1);
+        stack.push(action);
+        setHistory?.({
+            index: stack.length - 1,
+            stack
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const pop = useCallback(()=>{
+        const { stack } = history;
+        stack.pop();
+        setHistory?.({
+            index: stack.length - 1,
+            stack
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const undo = useCallback(()=>{
+        const { index, stack } = history;
+        const item = stack[index];
+        if (item) {
+            if (item.type === HistoryItemType.Source) item.isSelected = false;
+            else if (item.type === HistoryItemType.Edit) item.source.editHistory.pop();
+        }
+        setHistory?.({
+            index: index <= 0 ? -1 : index - 1,
+            stack
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const redo = useCallback(()=>{
+        const { index, stack } = history;
+        const item = stack[index + 1];
+        if (item) {
+            if (item.type === HistoryItemType.Source) item.isSelected = false;
+            else if (item.type === HistoryItemType.Edit) item.source.editHistory.push(item);
+        }
+        setHistory?.({
+            index: index >= stack.length - 1 ? stack.length - 1 : index + 1,
+            stack
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const set = useCallback((history)=>{
+        setHistory?.({
+            ...history
+        });
+    }, [
+        setHistory
+    ]);
+    const select = useCallback((action)=>{
+        history.stack.forEach((item)=>{
+            if (item.type === HistoryItemType.Source) if (item === action) item.isSelected = true;
+            else item.isSelected = false;
+        });
+        setHistory?.({
+            ...history
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const clearSelect = useCallback(()=>{
+        history.stack.forEach((item)=>{
+            if (item.type === HistoryItemType.Source) item.isSelected = false;
+        });
+        setHistory?.({
+            ...history
+        });
+    }, [
+        history,
+        setHistory
+    ]);
+    const reset = useCallback(()=>{
+        setHistory?.({
+            index: -1,
+            stack: []
+        });
+    }, [
+        setHistory
+    ]);
+    return [
+        {
+            index: history.index,
+            stack: history.stack,
+            top: history.stack.slice(history.index, history.index + 1)[0]
+        },
+        {
+            push,
+            pop,
+            undo,
+            redo,
+            set,
+            select,
+            clearSelect,
+            reset
+        }
+    ];
+}
+export { useHistory as default };

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

@@ -1,2 +1,2 @@
-import { Lang } from '../zh_CN';
+import type { Lang } from '../zh_CN';
 export default function useLang(): Lang;

package/lib/Screenshots/hooks/useLang.js

@@ -0,0 +1,6 @@
+import useStore from "./useStore.js";
+function useLang() {
+    const { lang } = useStore();
+    return lang;
+}
+export { useLang as default };

package/lib/Screenshots/hooks/useOperation.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import useDispatcher from "./useDispatcher.js";
+import useStore from "./useStore.js";
+function useOperation() {
+    const { operation } = useStore();
+    const { setOperation } = useDispatcher();
+    const set = useCallback((operation)=>{
+        setOperation?.(operation);
+    }, [
+        setOperation
+    ]);
+    const reset = useCallback(()=>{
+        setOperation?.(void 0);
+    }, [
+        setOperation
+    ]);
+    return [
+        operation,
+        {
+            set,
+            reset
+        }
+    ];
+}
+export { useOperation as default };

package/lib/Screenshots/hooks/useReset.js

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import useBounds from "./useBounds.js";
+import useCursor from "./useCursor.js";
+import useEmiter from "./useEmiter.js";
+import useHistory from "./useHistory.js";
+import useOperation from "./useOperation.js";
+function useReset() {
+    const emiter = useEmiter();
+    const [, boundsDispatcher] = useBounds();
+    const [, cursorDispatcher] = useCursor();
+    const [, historyDispatcher] = useHistory();
+    const [, operatioDispatcher] = useOperation();
+    const reset = useCallback(()=>{
+        emiter.reset();
+        historyDispatcher.reset();
+        boundsDispatcher.reset();
+        cursorDispatcher.reset();
+        operatioDispatcher.reset();
+    }, [
+        emiter,
+        historyDispatcher,
+        boundsDispatcher,
+        cursorDispatcher,
+        operatioDispatcher
+    ]);
+    return reset;
+}
+export { useReset as default };

package/lib/Screenshots/hooks/useStore.d.ts

@@ -0,0 +1,2 @@
+import type { ScreenshotsContextStore } from '../ScreenshotsContext';
+export default function useStore(): ScreenshotsContextStore;

package/lib/Screenshots/hooks/useStore.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import ScreenshotsContext from "../ScreenshotsContext.js";
+function useStore() {
+    const { store } = useContext(ScreenshotsContext);
+    return store;
+}
+export { useStore as default };

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import './icons/iconfont.less';
 import './screenshots.less';
-import { Lang } from './zh_CN';
+import type { Lang } from './zh_CN';
 export interface ScreenshotsProps {
     url?: string;
     width: number;

package/lib/Screenshots/index.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import composeImage from "./composeImage.js";
+import "./icons/iconfont.css";
+import "./screenshots.css";
+import ScreenshotsBackground from "./ScreenshotsBackground/index.js";
+import ScreenshotsCanvas from "./ScreenshotsCanvas/index.js";
+import ScreenshotsContext from "./ScreenshotsContext.js";
+import ScreenshotsOperations from "./ScreenshotsOperations/index.js";
+import useGetLoadedImage from "./useGetLoadedImage.js";
+import zh_CN from "./zh_CN.js";
+function Screenshots({ url, width, height, lang, className, ...props }) {
+    const image = useGetLoadedImage(url);
+    const canvasContextRef = useRef(null);
+    const emiterRef = useRef({});
+    const [history, setHistory] = useState({
+        index: -1,
+        stack: []
+    });
+    const [bounds, setBounds] = useState(null);
+    const [cursor, setCursor] = useState('move');
+    const [operation, setOperation] = useState(void 0);
+    const store = {
+        url,
+        width,
+        height,
+        image,
+        lang: {
+            ...zh_CN,
+            ...lang
+        },
+        emiterRef,
+        canvasContextRef,
+        history,
+        bounds,
+        cursor,
+        operation
+    };
+    const call = useCallback((funcName, ...args)=>{
+        const func = props[funcName];
+        if ('function' == typeof func) func(...args);
+    }, [
+        props
+    ]);
+    const dispatcher = {
+        call,
+        setHistory,
+        setBounds,
+        setCursor,
+        setOperation
+    };
+    const classNames = [
+        'screenshots'
+    ];
+    if (className) classNames.push(className);
+    const reset = ()=>{
+        emiterRef.current = {};
+        setHistory({
+            index: -1,
+            stack: []
+        });
+        setBounds(null);
+        setCursor('move');
+        setOperation(void 0);
+    };
+    const onDoubleClick = useCallback(async (e)=>{
+        if (0 !== e.button || !image) return;
+        if (bounds && canvasContextRef.current) composeImage({
+            image,
+            width,
+            height,
+            history,
+            bounds
+        }).then((blob)=>{
+            call('onOk', blob, bounds);
+            reset();
+        });
+        else {
+            const targetBounds = {
+                x: 0,
+                y: 0,
+                width,
+                height
+            };
+            composeImage({
+                image,
+                width,
+                height,
+                history,
+                bounds: targetBounds
+            }).then((blob)=>{
+                call('onOk', blob, targetBounds);
+                reset();
+            });
+        }
+    }, [
+        image,
+        history,
+        bounds,
+        width,
+        height,
+        call
+    ]);
+    const onContextMenu = useCallback((e)=>{
+        if (2 !== e.button) return;
+        e.preventDefault();
+        call('onCancel');
+        reset();
+    }, [
+        call
+    ]);
+    useLayoutEffect(()=>{
+        reset();
+    }, [
+        url
+    ]);
+    return /*#__PURE__*/ jsx(ScreenshotsContext.Provider, {
+        value: {
+            store,
+            dispatcher
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classNames.join(' '),
+            style: {
+                width,
+                height
+            },
+            onDoubleClick: onDoubleClick,
+            onContextMenu: onContextMenu,
+            children: [
+                /*#__PURE__*/ jsx(ScreenshotsBackground, {}),
+                /*#__PURE__*/ jsx(ScreenshotsCanvas, {
+                    ref: canvasContextRef
+                }),
+                /*#__PURE__*/ jsx(ScreenshotsOperations, {})
+            ]
+        })
+    });
+}
+export { Screenshots as default };

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

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

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

@@ -0,0 +1,51 @@
+import { ArrowEditType } from "./index.js";
+import { drawDragCircle } from "../utils.js";
+function getEditedArrowData(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 === ArrowEditType.Move) {
+            x1 += x;
+            y1 += y;
+            x2 += x;
+            y2 += y;
+        } else if (data.type === ArrowEditType.MoveStart) {
+            x1 += x;
+            y1 += y;
+        } else if (data.type === ArrowEditType.MoveEnd) {
+            x2 += x;
+            y2 += y;
+        }
+    });
+    return {
+        ...action.data,
+        x1,
+        x2,
+        y1,
+        y2
+    };
+}
+function draw(ctx, action) {
+    const { size, color, x1, x2, y1, y2 } = getEditedArrowData(action);
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'bevel';
+    ctx.lineWidth = size;
+    ctx.strokeStyle = color;
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const length = 3 * size;
+    const angle = Math.atan2(dy, dx);
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(x2 - length * Math.cos(angle - Math.PI / 6), y2 - length * Math.sin(angle - Math.PI / 6));
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - length * Math.cos(angle + Math.PI / 6), y2 - length * Math.sin(angle + Math.PI / 6));
+    ctx.stroke();
+    if (action.isSelected) {
+        drawDragCircle(ctx, x1, y1);
+        drawDragCircle(ctx, x2, y2);
+    }
+}
+export { draw as default, getEditedArrowData };

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

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

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

@@ -0,0 +1,153 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import ScreenshotsButton from "../../ScreenshotsButton/index.js";
+import ScreenshotsSizeColor from "../../ScreenshotsSizeColor/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 useCursor from "../../hooks/useCursor.js";
+import useOperation from "../../hooks/useOperation.js";
+import useHistory from "../../hooks/useHistory.js";
+import useCanvasContextRef from "../../hooks/useCanvasContextRef.js";
+import { isHit, isHitCircle } from "../utils.js";
+import useDrawSelect from "../../hooks/useDrawSelect.js";
+import draw, { getEditedArrowData } from "./draw.js";
+import useLang from "../../hooks/useLang.js";
+var Arrow_ArrowEditType = /*#__PURE__*/ function(ArrowEditType) {
+    ArrowEditType[ArrowEditType["Move"] = 0] = "Move";
+    ArrowEditType[ArrowEditType["MoveStart"] = 1] = "MoveStart";
+    ArrowEditType[ArrowEditType["MoveEnd"] = 2] = "MoveEnd";
+    return ArrowEditType;
+}({});
+function Arrow() {
+    const lang = useLang();
+    const [, cursorDispatcher] = useCursor();
+    const [operation, operationDispatcher] = useOperation();
+    const [history, historyDispatcher] = useHistory();
+    const canvasContextRef = useCanvasContextRef();
+    const [size, setSize] = useState(3);
+    const [color, setColor] = useState('#ee5126');
+    const arrowRef = useRef(null);
+    const arrowEditRef = useRef(null);
+    const checked = 'Arrow' === operation;
+    const selectArrow = useCallback(()=>{
+        operationDispatcher.set('Arrow');
+        cursorDispatcher.set('default');
+    }, [
+        operationDispatcher,
+        cursorDispatcher
+    ]);
+    const onSelectArrow = useCallback(()=>{
+        if (checked) return;
+        selectArrow();
+        historyDispatcher.clearSelect();
+    }, [
+        checked,
+        selectArrow,
+        historyDispatcher
+    ]);
+    const onDrawSelect = useCallback((action, e)=>{
+        if ('Arrow' !== action.name || !canvasContextRef.current) return;
+        const source = action;
+        selectArrow();
+        const { x1, y1, x2, y2 } = getEditedArrowData(source);
+        let type = 0;
+        if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x1,
+            y: y1
+        })) type = 1;
+        else if (isHitCircle(canvasContextRef.current.canvas, e, {
+            x: x2,
+            y: y2
+        })) type = 2;
+        arrowEditRef.current = {
+            type: HistoryItemType.Edit,
+            data: {
+                type,
+                x1: e.clientX,
+                y1: e.clientY,
+                x2: e.clientX,
+                y2: e.clientY
+            },
+            source
+        };
+        historyDispatcher.select(action);
+    }, [
+        canvasContextRef,
+        selectArrow,
+        historyDispatcher
+    ]);
+    const onMousedown = useCallback((e)=>{
+        if (!checked || arrowRef.current || !canvasContextRef.current) return;
+        const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+        arrowRef.current = {
+            name: 'Arrow',
+            type: HistoryItemType.Source,
+            data: {
+                size,
+                color,
+                x1: e.clientX - left,
+                y1: e.clientY - top,
+                x2: e.clientX - left,
+                y2: e.clientY - top
+            },
+            editHistory: [],
+            draw: draw,
+            isHit: isHit
+        };
+    }, [
+        checked,
+        color,
+        size,
+        canvasContextRef
+    ]);
+    const onMousemove = useCallback((e)=>{
+        if (!checked || !canvasContextRef.current) return;
+        if (arrowEditRef.current) {
+            arrowEditRef.current.data.x2 = e.clientX;
+            arrowEditRef.current.data.y2 = e.clientY;
+            if (history.top !== arrowEditRef.current) {
+                arrowEditRef.current.source.editHistory.push(arrowEditRef.current);
+                historyDispatcher.push(arrowEditRef.current);
+            } else historyDispatcher.set(history);
+        } else if (arrowRef.current) {
+            const { left, top } = canvasContextRef.current.canvas.getBoundingClientRect();
+            arrowRef.current.data.x2 = e.clientX - left;
+            arrowRef.current.data.y2 = e.clientY - top;
+            if (history.top !== arrowRef.current) historyDispatcher.push(arrowRef.current);
+            else historyDispatcher.set(history);
+        }
+    }, [
+        checked,
+        history,
+        canvasContextRef,
+        historyDispatcher
+    ]);
+    const onMouseup = useCallback(()=>{
+        if (!checked) return;
+        if (arrowRef.current) historyDispatcher.clearSelect();
+        arrowRef.current = null;
+        arrowEditRef.current = null;
+    }, [
+        checked,
+        historyDispatcher
+    ]);
+    useDrawSelect(onDrawSelect);
+    useCanvasMousedown(onMousedown);
+    useCanvasMousemove(onMousemove);
+    useCanvasMouseup(onMouseup);
+    return /*#__PURE__*/ jsx(ScreenshotsButton, {
+        title: lang.operation_arrow_title,
+        icon: "icon-arrow",
+        checked: checked,
+        onClick: onSelectArrow,
+        option: /*#__PURE__*/ jsx(ScreenshotsSizeColor, {
+            size: size,
+            color: color,
+            onSizeChange: setSize,
+            onColorChange: setColor
+        })
+    });
+}
+export { Arrow_ArrowEditType as ArrowEditType, Arrow as default };

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

@@ -1,3 +1,3 @@
-import { BrushData, BrushEditData } from '.';
-import { HistoryItemSource } from '../../types';
+import type { BrushData, BrushEditData } from '.';
+import type { HistoryItemSource } from '../../types';
 export default function draw(ctx: CanvasRenderingContext2D, action: HistoryItemSource<BrushData, BrushEditData>): void;

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

@@ -0,0 +1,31 @@
+function draw(ctx, action) {
+    const { size, color, points } = action.data;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.lineWidth = size;
+    ctx.strokeStyle = color;
+    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
+    });
+    ctx.beginPath();
+    points.forEach((item, index)=>{
+        if (0 === index) ctx.moveTo(item.x + distance.x, item.y + distance.y);
+        else ctx.lineTo(item.x + distance.x, item.y + distance.y);
+    });
+    ctx.stroke();
+    if (action.isSelected) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = '#000000';
+        ctx.beginPath();
+        points.forEach((item, index)=>{
+            if (0 === index) ctx.moveTo(item.x + distance.x, item.y + distance.y);
+            else ctx.lineTo(item.x + distance.x, item.y + distance.y);
+        });
+        ctx.stroke();
+    }
+}
+export { draw as default };

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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { Point } from '../../types';
+import type { ReactElement } from 'react';
+import type { Point } from '../../types';
 export interface BrushData {
     size: number;
     color: string;