amotify 0.0.0

package/dist/@comps/Functions/Cropper/parts.js

@@ -0,0 +1,783 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cropper = void 0;
+var _global_1 = require("@global");
+var _atoms_1 = require("@atoms");
+var _mols_1 = require("@mols");
+var _functions_1 = require("@functions");
+var useState = React.useState, useEffect = React.useEffect;
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+var CroppImage = /** @class */ (function () {
+    function CroppImage(params) {
+        this.set_scale = params.set_scale;
+        this.val_file = params.val_file;
+        this.develops = params.develops;
+        this.use = params.use;
+        this.componentID = params.componentID;
+        this.scale = {
+            current: params.scale.default,
+            default: params.scale.default,
+            min: params.scale.min,
+            max: params.scale.max
+        };
+        var Canvas = params.canvas;
+        var cvsW = Canvas.width, cvsH = Canvas.height;
+        var Picture = params.picture.image;
+        var pictW = Picture.width, pictH = Picture.height;
+        var pictAsp = pictW / pictH;
+        this.Canvas = {
+            elm: Canvas,
+            ctx: Canvas.getContext('2d')
+        };
+        var frameW = 0, frameH = 0;
+        if (this.use == 'profile') {
+            frameW = Canvas.width / 3 * 2;
+            frameH = Canvas.height / 3 * 2;
+        }
+        else if (this.use == 'header') {
+            frameW = Canvas.width * (7 / 9);
+            frameH = frameW / 3;
+        }
+        var frameX = (Canvas.width - frameW) / 2;
+        var frameY = (Canvas.height - frameH) / 2;
+        var frameAsp = frameW / frameH;
+        this.Picture = {
+            elm: Picture,
+            originDataUrl: Picture.src,
+            aspect: pictAsp,
+            revisedAspect: frameAsp > pictAsp
+                ? frameW / pictW
+                : frameH / pictH,
+            rotate: params.picture.rotate,
+            grayScale: params.picture.grayScale,
+            tone: params.picture.tone
+        };
+        this.pst = {
+            frame: {
+                x: frameX,
+                y: frameY,
+                w: frameW,
+                h: frameH,
+                aspect: frameAsp,
+            },
+            outImage: { x: 0, y: 0, w: 0, h: 0 },
+            imageX: pictW / 2,
+            imageY: pictH / 2,
+            centerX: cvsW / 2,
+            centerY: cvsH / 2
+        };
+        this.dragEffectInfo = {
+            origin: { x: 0, y: 0 },
+            frameExpandRate: { x: 0, y: 0 }
+        };
+        this.pinchEffectInfo = {
+            origin: {
+                x: 0, y: 0,
+                scale: this.scale.current
+            }
+        };
+        this.modifyImage();
+    }
+    CroppImage.prototype.dragEffect = function (params) {
+        var eventType = params.eventType, x = params.x, y = params.y;
+        if (eventType == 'start') {
+            var CanvasRect = this.Canvas.elm.position();
+            this.dragEffectInfo = {
+                origin: { x: x, y: y },
+                frameExpandRate: {
+                    x: this.Canvas.elm.width / CanvasRect.width,
+                    y: this.Canvas.elm.height / CanvasRect.height
+                }
+            };
+        }
+        else {
+            var _a = this.dragEffectInfo, origin_1 = _a.origin, frameExpandRate = _a.frameExpandRate;
+            var dragX = origin_1.x - x;
+            var dragY = origin_1.y - y;
+            var scale = this.scale.current * this.Picture.revisedAspect / 100;
+            var shiftX = dragX / scale * frameExpandRate.x;
+            var shiftY = dragY / scale * frameExpandRate.y;
+            if (eventType == 'move') {
+                this.drawImage(this.pst.imageX + shiftX, this.pst.imageY + shiftY);
+            }
+            else if (eventType == 'end') {
+                this.drawImage(this.pst.imageX += shiftX, this.pst.imageY += shiftY);
+            }
+        }
+    };
+    CroppImage.prototype.pinchEffect = function (params) {
+        var eventType = params.eventType, event = params.event;
+        var _a = $.getCursor(event.touches[0]), x1 = _a.x, y1 = _a.y;
+        var _b = $.getCursor(event.touches[1]), x2 = _b.x, y2 = _b.y;
+        var marginX = x2 - x1;
+        var marginY = y2 - y1;
+        if (eventType == 'start') {
+            this.pinchEffectInfo.origin = {
+                x: marginX, y: marginY,
+                scale: this.scale.current
+            };
+        }
+        else if (eventType == 'move') {
+            var origin_2 = this.pinchEffectInfo.origin;
+            var originDist = Math.sqrt(Math.pow(origin_2.x, 2) + Math.pow(origin_2.y, 2));
+            var dist = Math.sqrt(Math.pow(marginX, 2) + Math.pow(marginY, 2));
+            var margin = dist / originDist;
+            var scale = Number(origin_2.scale * margin);
+            this.set_scale(scale);
+        }
+    };
+    CroppImage.prototype.updateScale = function (scale) {
+        var nextValue = scale;
+        nextValue = Math.max(nextValue, this.scale.min);
+        nextValue = Math.min(nextValue, this.scale.max);
+        this.scale.current = nextValue;
+        this.drawImage();
+    };
+    CroppImage.prototype.updateFilter = function (params) {
+        this.Picture.grayScale = params.grayScale;
+        this.Picture.tone = params.tone;
+        this.Picture.rotate = params.rotate;
+        this.modifyImage();
+    };
+    CroppImage.prototype.modifyImage = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, grayScale, tone, rotate, canvas, ctx, image, ImageW, ImageH, newImage, imgData, ColorDir, rCorrect, gCorrect, bCorrect, iH, iW, Index, terminal, k, current, newDataUrl, Picture, pictW, pictH, pictAsp;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.Picture, grayScale = _a.grayScale, tone = _a.tone, rotate = _a.rotate;
+                        canvas = document.createElement('canvas');
+                        ctx = canvas.getContext('2d');
+                        image = new Image();
+                        image.src = this.Picture.originDataUrl;
+                        ImageW = image.width;
+                        ImageH = image.height;
+                        if (rotate == 90 || rotate == 270) {
+                            ImageW = image.height;
+                            ImageH = image.width;
+                        }
+                        canvas.width = ImageW;
+                        canvas.height = ImageH;
+                        if (grayScale)
+                            ctx.filter = 'grayscale(' + grayScale + '%)';
+                        if (rotate) {
+                            ctx.translate(ImageW / 2, ImageH / 2);
+                            ctx.rotate(rotate * Math.PI / 180);
+                            if ([90, 270].includes(rotate)) {
+                                ctx.translate(-ImageH / 2, -ImageW / 2);
+                            }
+                            else {
+                                ctx.translate(-ImageW / 2, -ImageH / 2);
+                            }
+                        }
+                        ctx.drawImage(image, 0, 0, image.width, image.height);
+                        newImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                        imgData = newImage.data;
+                        {
+                            grayScale /= 100;
+                            ColorDir = [
+                                [255, 255, 255],
+                                [255, 200, 100],
+                                [170, 170, 255],
+                                [240, 200, 145],
+                                [128, 255, 255],
+                                [255, 128, 255],
+                                [255, 255, 128],
+                                [128, 158, 169],
+                                [128, 112, 162],
+                                [50, 192, 87],
+                                [246, 100, 140], // Origin4
+                            ][tone];
+                            rCorrect = ColorDir[0] / 255;
+                            gCorrect = ColorDir[1] / 255;
+                            bCorrect = ColorDir[2] / 255;
+                            for (iH = 0; iH < ImageH; iH++) {
+                                for (iW = 0; iW < ImageW; iW++) {
+                                    Index = (iH * ImageW + iW) * 4;
+                                    if (grayScale) {
+                                        terminal = 0.3 * imgData[Index] + 0.59 * imgData[Index + 1] + 0.11 * imgData[Index + 2];
+                                        for (k = 0; k < 3; k++) {
+                                            current = imgData[Index + k];
+                                            imgData[Index + k] = current + (terminal - current) * grayScale;
+                                        }
+                                    }
+                                    imgData[Index] *= rCorrect;
+                                    imgData[Index + 1] *= gCorrect;
+                                    imgData[Index + 2] *= bCorrect;
+                                }
+                            }
+                        }
+                        ctx.putImageData(newImage, 0, 0);
+                        newDataUrl = canvas.toDataURL('image/jpeg');
+                        return [4 /*yield*/, $.ImageLoader(newDataUrl)];
+                    case 1:
+                        Picture = _b.sent();
+                        pictW = Picture.width, pictH = Picture.height;
+                        pictAsp = pictW / pictH;
+                        this.Picture = __assign(__assign({}, this.Picture), { elm: Picture, aspect: pictAsp, revisedAspect: this.pst.frame.aspect > pictAsp
+                                ? this.pst.frame.w / pictW
+                                : this.pst.frame.h / pictH });
+                        this.drawImage();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CroppImage.prototype.drawImage = function (_imageX, _imageY) {
+        var _a = this, use = _a.use, ctx = _a.Canvas.ctx, frame = _a.pst.frame;
+        var ImageX = _imageX || this.pst.imageX;
+        var ImageY = _imageY || this.pst.imageY;
+        {
+            var scale = this.scale.current / 100;
+            var totalScale = this.Picture.revisedAspect * scale;
+            var imgX = this.pst.centerX - ImageX * totalScale;
+            var imgY = this.pst.centerY - ImageY * totalScale;
+            var imgW = this.Picture.elm.width * totalScale;
+            var imgH = this.Picture.elm.height * totalScale;
+            {
+                var minX = this.pst.frame.x + this.pst.frame.w - imgW;
+                var maxX = this.pst.frame.x;
+                var minY = this.pst.frame.y + this.pst.frame.h - imgH;
+                var maxY = this.pst.frame.y;
+                var extraX = 0;
+                if (imgX < minX)
+                    extraX = imgX - minX;
+                if (imgX > maxX)
+                    extraX = imgX - maxX;
+                var extraY = 0;
+                if (imgY < minY)
+                    extraY = imgY - minY;
+                if (imgY > maxY)
+                    extraY = imgY - maxY;
+                this.dragEffectInfo.origin.x += extraX / 2 / this.dragEffectInfo.frameExpandRate.x;
+                this.dragEffectInfo.origin.y += extraY / 2 / this.dragEffectInfo.frameExpandRate.y;
+                imgX = Math.min(Math.max(imgX, minX), maxX);
+                imgY = Math.min(Math.max(imgY, minY), maxY);
+            }
+            this.pst.outImage = {
+                x: imgX, y: imgY,
+                w: imgW, h: imgH
+            };
+            ctx.clearRect(0, 0, this.Canvas.elm.width, this.Canvas.elm.height);
+            ctx.drawImage(this.Picture.elm, 0, 0, this.Picture.elm.width, this.Picture.elm.height, imgX, imgY, imgW, imgH);
+        }
+        {
+            if (use == 'profile') {
+                ctx.fillStyle = 'rgba( 20,24,20,.3 )';
+                ctx.beginPath();
+                ctx.arc(this.Canvas.elm.width / 2, this.Canvas.elm.height / 2, this.Canvas.elm.width, 0, Math.PI * 2, true);
+                ctx.arc(this.Canvas.elm.width / 2, this.Canvas.elm.height / 2, this.Canvas.elm.width / 3 * 2 / 2, 0, Math.PI * 2, false);
+                ctx.closePath();
+                ctx.fill();
+            }
+            else if (use == 'header') {
+                ctx.fillStyle = 'rgba( 20,24,20,.3 )';
+            }
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.lineTo(this.Canvas.elm.width, 0);
+            ctx.lineTo(this.Canvas.elm.width, this.Canvas.elm.height);
+            ctx.lineTo(0, this.Canvas.elm.height);
+            ctx.lineTo(0, 0);
+            ctx.closePath();
+            ctx.lineTo(frame.x, frame.y);
+            ctx.lineTo(frame.x, frame.y + frame.h);
+            ctx.lineTo(frame.x + frame.w, frame.y + frame.h);
+            ctx.lineTo(frame.x + frame.w, frame.y);
+            ctx.lineTo(frame.x, frame.y);
+            ctx.fill();
+            var body = $(document.body);
+            var themeColorHSL = body.getStyleProperty('--color-theme-hsl');
+            ctx.lineWidth = this.Canvas.elm.width / 200;
+            ctx.strokeStyle = "hsla( ".concat(themeColorHSL, ",1 )");
+            ctx.strokeRect(frame.x, frame.y, frame.w, frame.h);
+        }
+    };
+    CroppImage.prototype.export = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, develops, Picture, _b, outImage, frame, ratioX, ratioY, Left, Right, Top, Bottom, Files, MimeType, index, _c, size, maxSize, width, height, Preview, previewCtx, dataUrl, blob, Ratio, file;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _a = this, develops = _a.develops, Picture = _a.Picture, _b = _a.pst, outImage = _b.outImage, frame = _b.frame;
+                        ratioX = outImage.w / Picture.elm.width;
+                        ratioY = outImage.h / Picture.elm.height;
+                        Left = (frame.x - outImage.x) / ratioX;
+                        Right = (frame.x - outImage.x + frame.w) / ratioX;
+                        Top = (frame.y - outImage.y) / ratioY;
+                        Bottom = (frame.y - outImage.y + frame.h) / ratioY;
+                        Files = Array.from({ length: develops.length });
+                        MimeType = 'image/jpeg';
+                        index = 0;
+                        _d.label = 1;
+                    case 1:
+                        if (!(index < develops.length)) return [3 /*break*/, 6];
+                        _c = develops[index], size = _c.size, maxSize = _c.maxSize;
+                        maxSize = maxSize || {
+                            S: 1024 * 20,
+                            R: 1024 * 100,
+                            L: 1024 * 350
+                        }[size];
+                        width = {
+                            S: 144,
+                            R: 576,
+                            L: 1152
+                        }[size];
+                        height = this.use == 'profile' ? width : width / 3;
+                        Preview = document.createElement('canvas');
+                        Preview.width = width;
+                        Preview.height = height;
+                        previewCtx = Preview.getContext('2d');
+                        if (!previewCtx)
+                            return [2 /*return*/];
+                        previewCtx.clearRect(0, 0, width, height);
+                        previewCtx.drawImage(this.Picture.elm, Left, Top, Right - Left, Bottom - Top, 0, 0, width, height);
+                        dataUrl = Preview.toDataURL(MimeType);
+                        return [4 /*yield*/, dataUrl.toBlob(MimeType)];
+                    case 2:
+                        blob = _d.sent();
+                        if (!blob)
+                            return [2 /*return*/];
+                        if (!(blob.size >= maxSize)) return [3 /*break*/, 4];
+                        Ratio = maxSize / blob.size;
+                        dataUrl = Preview.toDataURL(MimeType, Ratio * 0.92);
+                        return [4 /*yield*/, dataUrl.toBlob(MimeType)];
+                    case 3:
+                        blob = _d.sent();
+                        if (!blob)
+                            return [2 /*return*/];
+                        _d.label = 4;
+                    case 4:
+                        file = new File([blob], this.val_file.name, { type: MimeType });
+                        Files[index] = file;
+                        _d.label = 5;
+                    case 5:
+                        index++;
+                        return [3 /*break*/, 1];
+                    case 6: return [2 /*return*/, Files];
+                }
+            });
+        });
+    };
+    return CroppImage;
+}());
+var Comps = {
+    Core: function (params) {
+        var val_file = params.val_file, options = params.options, finishedCallback = params.finishedCallback, abortCallback = params.abortCallback;
+        var use = options.use, _a = options.develops, develops = _a === void 0 ? [] : _a;
+        var _b = __read(useState($.uuidGen(32)), 1), val_componentID = _b[0];
+        var DefaultOptions = {
+            scale: {
+                default: 125,
+                min: 100,
+                max: 300
+            },
+            rotate: 0,
+            grayScale: 0,
+            tone: 0
+        };
+        var _c = __read(useState(DefaultOptions.scale.default), 2), val_scale = _c[0], set_scale = _c[1];
+        var _d = __read(useState(DefaultOptions.rotate), 2), val_rotate = _d[0], set_rotate = _d[1];
+        var _e = __read(useState(DefaultOptions.grayScale), 2), val_grayScale = _e[0], set_grayScale = _e[1];
+        var _f = __read(useState(DefaultOptions.tone), 2), val_tone = _f[0], set_tone = _f[1];
+        useEffect(function () {
+            _global_1.useStore.set({
+                key: val_componentID,
+                value: {}
+            });
+            (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var target, dataUrl, Canvas, __Cropper, _a, UserEffectStart, DragEffect, EventEnd;
+                var _b, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            amotify.fn.Loader.fn.corner.active();
+                            return [4 /*yield*/, val_file.read()];
+                        case 1:
+                            target = (_d.sent()).target;
+                            if (!target)
+                                return [2 /*return*/];
+                            dataUrl = target.result;
+                            Canvas = $('#Canvas-' + val_componentID)[0];
+                            if (!Canvas)
+                                return [2 /*return*/];
+                            _a = CroppImage.bind;
+                            _b = {
+                                set_scale: set_scale,
+                                val_file: val_file,
+                                develops: develops,
+                                use: use,
+                                scale: DefaultOptions.scale,
+                                componentID: val_componentID,
+                                canvas: Canvas
+                            };
+                            _c = {};
+                            return [4 /*yield*/, $.ImageLoader(dataUrl)];
+                        case 2:
+                            __Cropper = new (_a.apply(CroppImage, [void 0, (_b.picture = (_c.image = _d.sent(),
+                                    _c.grayScale = DefaultOptions.grayScale,
+                                    _c.tone = DefaultOptions.tone,
+                                    _c.rotate = DefaultOptions.rotate,
+                                    _c),
+                                    _b)]))();
+                            _global_1.useStore.set({
+                                key: val_componentID,
+                                value: {
+                                    Instance: __Cropper
+                                }
+                            });
+                            UserEffectStart = function (event) {
+                                event.preventDefault();
+                                if (event.touches && event.touches.length > 1) {
+                                    __Cropper.pinchEffect({
+                                        eventType: 'start',
+                                        event: event
+                                    });
+                                    $(document)
+                                        .addEvent({
+                                        eventType: 'touchmove', eventID: 'CropperEffectMove', option: { passive: false },
+                                        callback: function (event) {
+                                            event.preventDefault();
+                                            __Cropper.pinchEffect({
+                                                eventType: 'move',
+                                                event: event
+                                            });
+                                        },
+                                    })
+                                        .addEvent({
+                                        eventType: 'touchend', eventID: 'CropperEffectEnd', option: { passive: false },
+                                        callback: EventEnd,
+                                    });
+                                }
+                                else {
+                                    __Cropper.dragEffect(__assign({ eventType: 'start' }, $.getCursor(event)));
+                                    var type = event.type;
+                                    $(document)
+                                        .addEvent({
+                                        eventType: type == 'touchstart' ? 'touchmove' : 'mousemove', eventID: 'CropperEffectMove', option: { passive: false },
+                                        callback: function (event) {
+                                            DragEffect('move', event);
+                                        },
+                                    })
+                                        .addEvent({
+                                        eventType: type == 'touchstart' ? 'touchend' : 'mouseup', eventID: 'CropperEffectEnd', option: { passive: false },
+                                        callback: function (event) {
+                                            DragEffect('end', event);
+                                            EventEnd(event);
+                                        },
+                                    });
+                                }
+                            };
+                            DragEffect = function (eventType, event) {
+                                event.preventDefault();
+                                __Cropper.dragEffect(__assign({ eventType: eventType }, $.getCursor(event)));
+                            };
+                            EventEnd = function (event) {
+                                event.preventDefault();
+                                $(document).removeEvent([
+                                    'CropperEffectMove',
+                                    'CropperEffectEnd'
+                                ]);
+                            };
+                            $(Canvas)
+                                .removeEvent([
+                                'CropperMouseWheel',
+                                'CropperTouchStart',
+                                'CropperMouseDown'
+                            ])
+                                .addEvent({
+                                eventID: 'CropperMouseWheel',
+                                eventType: 'wheel',
+                                callback: function (event) {
+                                    event.preventDefault();
+                                    var bitScale = Number(event.wheelDelta * 0.04);
+                                    var nextScale = __Cropper.scale.current + bitScale;
+                                    nextScale = Math.max(nextScale, __Cropper.scale.min);
+                                    nextScale = Math.min(nextScale, __Cropper.scale.max);
+                                    set_scale(nextScale);
+                                },
+                                option: { passive: false }
+                            })
+                                .addEvent({
+                                eventType: 'touchstart', eventID: 'CropperTouchStart',
+                                callback: UserEffectStart, option: { passive: false }
+                            })
+                                .addEvent({
+                                eventType: 'mousedown', eventID: 'CropperMouseDown',
+                                callback: UserEffectStart, option: { passive: false }
+                            });
+                            setTimeout(function () {
+                                amotify.fn.Loader.fn.corner.stop();
+                            }, 1000);
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }, [val_file.id]);
+        useEffect(function () {
+            var _a;
+            var Instance = (_a = _global_1.useStore.get(val_componentID)) === null || _a === void 0 ? void 0 : _a.Instance;
+            if (Instance) {
+                Instance.updateScale(val_scale);
+            }
+        }, [val_scale]);
+        useEffect(function () {
+            var _a;
+            var Instance = (_a = _global_1.useStore.get(val_componentID)) === null || _a === void 0 ? void 0 : _a.Instance;
+            if (Instance) {
+                Instance.updateFilter({
+                    grayScale: val_grayScale,
+                    tone: val_tone,
+                    rotate: val_rotate
+                });
+            }
+        }, [val_grayScale, val_tone, val_rotate]);
+        return (React.createElement(_functions_1.Sheet.Comps.Body, null,
+            React.createElement(_atoms_1.Flex, { className: [style_module_scss_1.default.Wrap, 'Use_' + use].join(' '), flexWrap: false, position: 'relative', overflow: 'hidden', borderRadius: 'inherit', boxShadow: 3, UnderBreakPointStyles: {
+                    flexType: 'col'
+                } },
+                React.createElement(_atoms_1.Box, { flexGrid: 3, UnderBreakPointStyles: {
+                        width: 1,
+                        padding: 2
+                    } },
+                    React.createElement(_atoms_1.Box, { overflow: 'hidden', position: 'relative', backgroundColor: '4.layer.darken', freeCSS: {
+                            zIndex: 1
+                        }, UnderBreakPointStyles: {
+                            borderRadius: '1.tone.primary'
+                        } },
+                        React.createElement("canvas", { width: '2400', height: use == 'profile' ? '2400' : '1800', className: style_module_scss_1.default.Canvas, id: 'Canvas-' + val_componentID }))),
+                React.createElement(_mols_1.Column, { gap: 0, flexGrid: 2, boxShadow: 3, UnderBreakPointStyles: {
+                        width: 1,
+                        maxWidth: 'unset'
+                    }, freeCSS: {
+                        maxWidth: 12 * 28
+                    } },
+                    React.createElement(_mols_1.Column, { gap: 1, flexSizing: 0, overflow: 'auto', padding: 1.5, UnderBreakPointStyles: {
+                            flexSizing: 'none'
+                        } },
+                        React.createElement(_atoms_1.Box, { flexSizing: 'none', fontSize: '4.thirdTitle', isBoldFont: true }, "\u30D5\u30A3\u30EB\u30BF\u30FC"),
+                        React.createElement(Comps.SettingRegion, { DefaultOptions: DefaultOptions, val_scale: val_scale, set_scale: set_scale, val_tone: val_tone, set_tone: set_tone, val_grayScale: val_grayScale, set_grayScale: set_grayScale, val_rotate: val_rotate, set_rotate: set_rotate })),
+                    React.createElement(_atoms_1.Flex, { padding: 1.5, flexSizing: 'none', gap: 1, borderTop: true },
+                        React.createElement(_functions_1.Buttons.Button.Border.R, { flexGrid: 1, onClick: function () {
+                                abortCallback();
+                            } }, "\u30AD\u30E3\u30F3\u30BB\u30EB"),
+                        React.createElement(_functions_1.Buttons.Button.Prime.R, { flexGrid: 2, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                var Instance, Files;
+                                var _a;
+                                return __generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            Instance = (_a = _global_1.useStore.get(val_componentID)) === null || _a === void 0 ? void 0 : _a.Instance;
+                                            if (!Instance)
+                                                return [2 /*return*/];
+                                            amotify.fn.Loader.fn.mini.active('CropperExportation');
+                                            return [4 /*yield*/, Instance.export()];
+                                        case 1:
+                                            Files = _b.sent();
+                                            setTimeout(function () {
+                                                amotify.fn.Loader.fn.mini.stop('CropperExportation');
+                                                finishedCallback(Files);
+                                            }, 3000);
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); } },
+                            React.createElement(_mols_1.Row.Center, { gap: '1/2' },
+                                React.createElement(_functions_1.Loader.White.R, { loaderID: 'CropperExportation' }),
+                                "\u6C7A\u5B9A")))))));
+    },
+    SettingRegion: function (params) {
+        var ToneList = [];
+        for (var index = 1; index <= 10; index++) {
+            ToneList.push({
+                value: index,
+                label: React.createElement(React.Fragment, null,
+                    React.createElement(_atoms_1.Box, { className: [
+                            style_module_scss_1.default.ToneBall,
+                            style_module_scss_1.default['ToneBall_' + index]
+                        ].join(' ') }),
+                    React.createElement(_atoms_1.Box, { textAlign: 'center', flexSizing: 'auto' }, ['', '暖色', '寒色', 'セピア', 'シアン', 'マゼンタ', 'イエロー', 'オリジナル1', 'オリジナル2', 'オリジナル3', 'オリジナル4'][index]))
+            });
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement(_mols_1.Column, { gap: '1/3' },
+                React.createElement(_atoms_1.Box, null,
+                    React.createElement(_atoms_1.FAIcon.Rotate, { fontSize: '3.paragraph' }),
+                    " Rotate"),
+                React.createElement(_mols_1.Row.Separate, { flexChilds: 'even', paddingLeft: 2 },
+                    React.createElement(_functions_1.Buttons.Button.Border.R, { onClick: function () {
+                            var next = params.val_rotate - 90;
+                            if (next < 0)
+                                next += 360;
+                            params.set_rotate(next);
+                        } },
+                        React.createElement(_atoms_1.FAIcon.RotateLeft, null),
+                        " \u5DE6\u306B\u56DE\u8EE2"),
+                    React.createElement(_functions_1.Buttons.Button.Border.R, { onClick: function () {
+                            params.set_rotate((params.val_rotate + 90) % 360);
+                        } },
+                        "\u53F3\u306B\u56DE\u8EE2 ",
+                        React.createElement(_atoms_1.FAIcon.RotateRight, null)))),
+            React.createElement(_mols_1.Column, { gap: '1/3' },
+                React.createElement(_atoms_1.Box, null,
+                    React.createElement(_atoms_1.FAIcon, { fontSize: '3.paragraph', d: 'magnifying-glass-plus' }),
+                    " Zoom"),
+                React.createElement(_atoms_1.Box, { paddingLeft: 2 },
+                    React.createElement(_functions_1.Input.Slider, { override: 'force', value: params.val_scale - 100, min: params.DefaultOptions.scale.min - 100, max: params.DefaultOptions.scale.max - 100, step: 25, onUpdateValidValue: function (_a) {
+                            var eventType = _a.eventType, value = _a.value;
+                            params.set_scale(value + 100);
+                        }, legends: {
+                            enable: true,
+                            custom: function (value) {
+                                var scale = Math.round(100 + value);
+                                return 'x' + scale / 100;
+                            }
+                        } }))),
+            React.createElement(_mols_1.Column, { gap: '1/3' },
+                React.createElement(_atoms_1.Box, null,
+                    React.createElement(_atoms_1.FAIcon, { fontSize: '3.paragraph', d: 'palette' }),
+                    " Gray Scale"),
+                React.createElement(_atoms_1.Box, { paddingLeft: 2 },
+                    React.createElement(_functions_1.Input.Slider, { value: params.val_grayScale, min: 0, max: 100, step: 25, onUpdateValidValue: function (_a) {
+                            var value = _a.value;
+                            params.set_grayScale(value);
+                        }, legends: {
+                            enable: true,
+                            custom: function (value) { return (value + '%'); }
+                        } }))),
+            React.createElement(_mols_1.Column, { gap: '1/3' },
+                React.createElement(_atoms_1.Box, null,
+                    React.createElement(_atoms_1.FAIcon, { fontSize: '3.paragraph', d: 'bars-staggered' }),
+                    " Tone"),
+                React.createElement(_atoms_1.Box, { paddingLeft: 2 },
+                    React.createElement(_functions_1.Input.Radio, { value: params.val_tone, gap: '1/2', cellStyles: {
+                            isRounded: true,
+                            borderWidth: 2,
+                            borderColor: '1.thin',
+                            padding: '1/2',
+                            paddingRight: 1,
+                            fontSize: '1.mini',
+                            gap: '1/3',
+                            flexSizing: 'auto'
+                        }, options: __spreadArray([
+                            {
+                                value: 0, label: 'なし',
+                                padding: ['1/2', 1],
+                                flexCenter: true
+                            }
+                        ], __read(ToneList), false), onUpdateValidValue: function (_a) {
+                            var value = _a.value;
+                            params.set_tone(value[0]);
+                        } })))));
+    }
+};
+exports.Cropper = {
+    open: function (params) { return __awaiter(void 0, void 0, void 0, function () {
+        var Image, sheetID;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, _functions_1.Input.File.fn.openDialog({
+                        // accept: 'image/jpeg,image/jpg,image/png,image/gif',
+                        accept: 'image',
+                        multiple: false
+                    })];
+                case 1:
+                    Image = _a.sent();
+                    sheetID = 'CropperImage';
+                    amotify.fn.Sheet.open({
+                        sheetID: sheetID,
+                        type: 'normal.middleCenter',
+                        size: '3L',
+                        freeCSS: {
+                            width: params.use == 'header' ? 12 * 100 : 12 * 80
+                        },
+                        content: React.createElement(Comps.Core, { val_file: Image[0], options: params, finishedCallback: function (files) {
+                                amotify.fn.Sheet.close(sheetID);
+                                params.onProcessFinished(files);
+                            }, abortCallback: function () {
+                                amotify.fn.Sheet.close(sheetID);
+                            } }),
+                        closeOption: {
+                            escapeKeyDown: false
+                        }
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); }
+};