@threekit-tools/treble 0.0.81 → 0.0.84

package/dist/hooks/useImageEditor/index.js

@@ -1,320 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var CANVAS_HEIGHT = 600;
-var CANVAS_WIDTH = 900;
-var INVERT_COLOR = false;
-var APPLY_GRAYSCALE = false;
-var CORNER_BOX_SIZE = 4;
-var CROP_RATIO = 'custom';
-function useImageEditor(image, config) {
-    var _a = Object.assign({}, {
-        canvasHeight: CANVAS_HEIGHT,
-        canvasWidth: CANVAS_WIDTH,
-        cornerCircleSize: CORNER_BOX_SIZE,
-        cropRatio: CROP_RATIO,
-    }, config), canvasHeight = _a.canvasHeight, canvasWidth = _a.canvasWidth, cornerCircleSize = _a.cornerCircleSize;
-    var _b = (0, react_1.useState)(INVERT_COLOR), invertColor = _b[0], setInvertColor = _b[1];
-    var _c = (0, react_1.useState)(APPLY_GRAYSCALE), applyGrayscale = _c[0], setApplyGrayscale = _c[1];
-    var imageRef = (0, react_1.useRef)(null);
-    var canvasRef = (0, react_1.useRef)(null);
-    var cropStartRef = (0, react_1.useRef)(null);
-    var cropBoxRef = (0, react_1.useRef)(null);
-    var moveCropBoxOffsetRef = (0, react_1.useRef)(null);
-    var resizeCropBoxOffsetRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        if (!image || !canvasRef.current)
-            return;
-        var ctx = canvasRef.current.getContext('2d');
-        if (!ctx)
-            return;
-        canvasRef.current.height = canvasHeight;
-        canvasRef.current.width = canvasWidth;
-        var background = new Image();
-        background.src = image;
-        background.onload = function () {
-            imageRef.current = background;
-            drawImage(ctx, background);
-        };
-    }, [image, canvasHeight, canvasWidth]);
-    (0, react_1.useEffect)(function () {
-        if (!image)
-            return function () { };
-        if (canvasRef && canvasRef.current) {
-            canvasRef.current.addEventListener('mousedown', handleMouseDown);
-            canvasRef.current.addEventListener('mousemove', handleMouseMove);
-            canvasRef.current.addEventListener('mouseup', handleMouseUp);
-            return function () {
-                var _a, _b, _c;
-                (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', handleMouseDown);
-                (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousemove', handleMouseMove);
-                (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-        return function () { };
-        function handleMouseDown(e) {
-            if (cropBoxRef === null || cropBoxRef === void 0 ? void 0 : cropBoxRef.current) {
-                if (e.offsetX >= cropBoxRef.current.startX &&
-                    e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
-                    e.offsetY >= cropBoxRef.current.startY &&
-                    e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY) {
-                    moveCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
-                    return;
-                }
-                if (e.offsetX >=
-                    cropBoxRef.current.startX +
-                        cropBoxRef.current.deltaX -
-                        cornerCircleSize / 2 &&
-                    e.offsetX <=
-                        cropBoxRef.current.startX +
-                            cropBoxRef.current.deltaX +
-                            cornerCircleSize / 2 &&
-                    e.offsetY >=
-                        cropBoxRef.current.startY +
-                            cropBoxRef.current.deltaY -
-                            cornerCircleSize / 2 &&
-                    e.offsetY <=
-                        cropBoxRef.current.startY +
-                            cropBoxRef.current.deltaY +
-                            cornerCircleSize / 2) {
-                    resizeCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
-                    return;
-                }
-            }
-            cropStartRef.current = { x: e.offsetX, y: e.offsetY };
-            cropBoxRef.current = null;
-        }
-        function handleMouseMove(e) {
-            var _a, _b, _c, _d;
-            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!ctx || !cropBoxRef.current)
-                return;
-            if ((_b = moveCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
-                var deltaX = e.offsetX - moveCropBoxOffsetRef.current.x;
-                var deltaY = e.offsetY - moveCropBoxOffsetRef.current.y;
-                var rect_1 = Object.assign({}, cropBoxRef.current, {
-                    startX: cropBoxRef.current.startX + deltaX,
-                    startY: cropBoxRef.current.startY + deltaY,
-                });
-                draw(ctx, rect_1, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-                return;
-            }
-            if ((_c = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _c === void 0 ? void 0 : _c.x) {
-                var deltaX = e.offsetX - resizeCropBoxOffsetRef.current.x;
-                var deltaY = e.offsetY - resizeCropBoxOffsetRef.current.y;
-                var rect_2 = Object.assign({}, cropBoxRef.current, {
-                    deltaX: cropBoxRef.current.deltaX + deltaX,
-                    deltaY: cropBoxRef.current.deltaY + deltaY,
-                });
-                draw(ctx, rect_2, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-                return;
-            }
-            if (!((_d = cropStartRef === null || cropStartRef === void 0 ? void 0 : cropStartRef.current) === null || _d === void 0 ? void 0 : _d.x))
-                return;
-            var rect = {
-                startX: cropStartRef.current.x,
-                startY: cropStartRef.current.y,
-                deltaX: e.offsetX - cropStartRef.current.x,
-                deltaY: e.offsetY - cropStartRef.current.y,
-            };
-            draw(ctx, rect, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-        }
-        function handleMouseUp(e) {
-            var _a, _b;
-            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!ctx || !cropBoxRef.current || !cropStartRef.current)
-                return;
-            if (moveCropBoxOffsetRef.current) {
-                var deltaX_1 = moveCropBoxOffsetRef.current.x - e.offsetX;
-                var deltaY_1 = moveCropBoxOffsetRef.current.y - e.offsetY;
-                var rect_3 = Object.assign(cropBoxRef.current, {
-                    startX: cropBoxRef.current.startX - deltaX_1,
-                    startY: cropBoxRef.current.startY - deltaY_1,
-                });
-                draw(ctx, rect_3, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
-                cropBoxRef.current = rect_3;
-                moveCropBoxOffsetRef.current = null;
-                return;
-            }
-            if ((_b = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
-                var deltaX_2 = e.offsetX - resizeCropBoxOffsetRef.current.x;
-                var deltaY_2 = e.offsetY - resizeCropBoxOffsetRef.current.y;
-                var rect_4 = Object.assign({}, cropBoxRef.current, {
-                    deltaX: cropBoxRef.current.deltaX + deltaX_2,
-                    deltaY: cropBoxRef.current.deltaY + deltaY_2,
-                });
-                draw(ctx, rect_4, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
-                cropBoxRef.current = rect_4;
-                resizeCropBoxOffsetRef.current = null;
-                return;
-            }
-            var deltaX = e.offsetX - cropStartRef.current.x;
-            var deltaY = e.offsetY - cropStartRef.current.y;
-            var rect = {
-                startX: deltaX > 0 ? cropStartRef.current.x : cropStartRef.current.x + deltaX,
-                startY: deltaY > 0 ? cropStartRef.current.y : cropStartRef.current.y + deltaY,
-                deltaX: Math.abs(deltaX),
-                deltaY: Math.abs(deltaY),
-            };
-            cropBoxRef.current = rect;
-            draw(ctx, rect, { drawCornerBoxes: true });
-            cropStartRef.current = null;
-        }
-    }, [image, canvasHeight, canvasWidth]);
-    // useEffect(() => {
-    //   if (!image) return;
-    //   if (canvasRef && canvasRef.current) {
-    //     canvasRef.current.addEventListener("mousemove", handleMouseMove);
-    //     return () => {
-    //       canvasRef.current.removeEventListener("mousemove", handleMouseMove);
-    //     };
-    //   }
-    //   function handleMouseMove(e) {
-    //     if (cropBoxRef?.current) {
-    //       if (
-    //         e.offsetX >= cropBoxRef.current.startX &&
-    //         e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
-    //         e.offsetY >= cropBoxRef.current.startY &&
-    //         e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY
-    //       ) {
-    //         canvasRef.current.style.cursor = "move";
-    //         return;
-    //       }
-    //       if (
-    //         e.offsetX >=
-    //           cropBoxRef.current.startX +
-    //             cropBoxRef.current.deltaX -
-    //             cornerCircleSize / 2 &&
-    //         e.offsetX <=
-    //           cropBoxRef.current.startX +
-    //             cropBoxRef.current.deltaX +
-    //             cornerCircleSize / 2 &&
-    //         e.offsetY >=
-    //           cropBoxRef.current.startY +
-    //             cropBoxRef.current.deltaY -
-    //             cornerCircleSize / 2 &&
-    //         e.offsetY <=
-    //           cropBoxRef.current.startY +
-    //             cropBoxRef.current.deltaY +
-    //             cornerCircleSize / 2
-    //       ) {
-    //         canvasRef.current.style.cursor = "pointer";
-    //         return;
-    //       }
-    //     }
-    //     canvasRef.current.style.cursor = "default";
-    //   }
-    // }, [image, canvasHeight, canvasWidth]);
-    function drawImage(ctx, image, config) {
-        var _a = config || {}, invertColor = _a.invertColor, applyGrayscale = _a.applyGrayscale;
-        if (invertColor)
-            ctx.filter = 'invert(1)';
-        else if (applyGrayscale)
-            ctx.filter = 'grayscale(1)';
-        else
-            ctx.filter = 'invert(0)';
-        // else ctx.filter = "grayscale(0)";
-        var wRatio = ctx.canvas.width / image.width;
-        var hRatio = ctx.canvas.height / image.height;
-        var ratio = Math.min(wRatio, hRatio);
-        var centerOffsetX = (ctx.canvas.width - image.width * ratio) / 2;
-        var centerOffsetY = (ctx.canvas.height - image.height * ratio) / 2;
-        ctx.drawImage(image, 0, 0, image.width, image.height, centerOffsetX, centerOffsetY, image.width * ratio, image.height * ratio);
-    }
-    function draw(ctx, rect, config) {
-        var _a = config || {}, drawCornerBoxes = _a.drawCornerBoxes, invertColor = _a.invertColor;
-        // clear the canvas
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-        // redraw the image
-        if (!imageRef.current)
-            return;
-        drawImage(ctx, imageRef.current, { invertColor: invertColor });
-        if (!rect)
-            return;
-        // redraw one or more things based on their javascript objects
-        ctx.beginPath();
-        ctx.setLineDash([]);
-        ctx.rect(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
-        ctx.rect(canvasWidth, 0, 0 - canvasWidth, canvasHeight);
-        ctx.closePath();
-        ctx.strokeStyle = '#fff';
-        ctx.stroke();
-        ctx.fillStyle = '#00000055';
-        ctx.fill();
-        if (!drawCornerBoxes)
-            return;
-        ctx.beginPath();
-        ctx.arc(rect.startX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX + rect.deltaX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX + rect.deltaX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-    }
-    function handleCrop() {
-        var _a, _b;
-        if (!cropBoxRef.current)
-            return;
-        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx || !imageRef.current)
-            return;
-        var rect = cropBoxRef.current;
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-        drawImage(ctx, imageRef.current, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-        var imageData = ctx.getImageData(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
-        var clone = (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.cloneNode();
-        if (!clone)
-            return;
-        clone.width = rect.deltaX;
-        clone.height = rect.deltaY;
-        var cloneCtx = clone.getContext('2d');
-        if (!cloneCtx)
-            return;
-        cloneCtx.putImageData(imageData, 0, 0);
-        var url = clone.toDataURL();
-        console.log(url);
-        cropBoxRef.current = null;
-    }
-    function handleInvert() {
-        var _a;
-        if (!cropBoxRef.current)
-            return;
-        var updated = !invertColor;
-        setInvertColor(updated);
-        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx)
-            return;
-        draw(ctx, cropBoxRef.current, {
-            invertColor: updated,
-            drawCornerBoxes: true,
-            applyGrayscale: applyGrayscale,
-        });
-    }
-    function handleGrayscale() {
-        setApplyGrayscale(!applyGrayscale);
-    }
-    if (!image)
-        return [null, null];
-    var crop = {
-        handleCrop: handleCrop,
-    };
-    var color = {
-        handleInvert: handleInvert,
-        handleGrayscale: handleGrayscale,
-    };
-    return [canvasRef, crop, color];
-}
-exports.default = useImageEditor;