amotify 0.0.8 → 0.0.10

package/dist/Functions/Cropper/parts.js

@@ -1,783 +0,0 @@
-"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 _export_1 = require("../../Global/@export");
-var _export_2 = require("../../Atoms/@export");
-var _export_3 = require("../../Molecules/@export");
-var _export_4 = require("../../Functions/@export");
-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 () {
-            _export_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)]))();
-                            _export_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 = _export_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 = _export_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(_export_4.Sheet.Comps.Body, null,
-            React.createElement(_export_2.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(_export_2.Box, { flexGrid: 3, UnderBreakPointStyles: {
-                        width: 1,
-                        padding: 2
-                    } },
-                    React.createElement(_export_2.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(_export_3.Column, { gap: 0, flexGrid: 2, boxShadow: 3, UnderBreakPointStyles: {
-                        width: 1,
-                        maxWidth: 'unset'
-                    }, freeCSS: {
-                        maxWidth: 12 * 28
-                    } },
-                    React.createElement(_export_3.Column, { gap: 1, flexSizing: 0, overflow: 'auto', padding: 1.5, UnderBreakPointStyles: {
-                            flexSizing: 'none'
-                        } },
-                        React.createElement(_export_2.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(_export_2.Flex, { padding: 1.5, flexSizing: 'none', gap: 1, borderTop: true },
-                        React.createElement(_export_4.Buttons.Button.Border.R, { flexGrid: 1, onClick: function () {
-                                abortCallback();
-                            } }, "\u30AD\u30E3\u30F3\u30BB\u30EB"),
-                        React.createElement(_export_4.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 = _export_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(_export_3.Row.Center, { gap: '1/2' },
-                                React.createElement(_export_4.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(_export_2.Box, { className: [
-                            style_module_scss_1.default.ToneBall,
-                            style_module_scss_1.default['ToneBall_' + index]
-                        ].join(' ') }),
-                    React.createElement(_export_2.Box, { textAlign: 'center', flexSizing: 'auto' }, ['', '暖色', '寒色', 'セピア', 'シアン', 'マゼンタ', 'イエロー', 'オリジナル1', 'オリジナル2', 'オリジナル3', 'オリジナル4'][index]))
-            });
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement(_export_3.Column, { gap: '1/3' },
-                React.createElement(_export_2.Box, null,
-                    React.createElement(_export_2.FAIcon.Rotate, { fontSize: '3.paragraph' }),
-                    " Rotate"),
-                React.createElement(_export_3.Row.Separate, { flexChilds: 'even', paddingLeft: 2 },
-                    React.createElement(_export_4.Buttons.Button.Border.R, { onClick: function () {
-                            var next = params.val_rotate - 90;
-                            if (next < 0)
-                                next += 360;
-                            params.set_rotate(next);
-                        } },
-                        React.createElement(_export_2.FAIcon.RotateLeft, null),
-                        " \u5DE6\u306B\u56DE\u8EE2"),
-                    React.createElement(_export_4.Buttons.Button.Border.R, { onClick: function () {
-                            params.set_rotate((params.val_rotate + 90) % 360);
-                        } },
-                        "\u53F3\u306B\u56DE\u8EE2 ",
-                        React.createElement(_export_2.FAIcon.RotateRight, null)))),
-            React.createElement(_export_3.Column, { gap: '1/3' },
-                React.createElement(_export_2.Box, null,
-                    React.createElement(_export_2.FAIcon, { fontSize: '3.paragraph', d: 'magnifying-glass-plus' }),
-                    " Zoom"),
-                React.createElement(_export_2.Box, { paddingLeft: 2 },
-                    React.createElement(_export_4.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(_export_3.Column, { gap: '1/3' },
-                React.createElement(_export_2.Box, null,
-                    React.createElement(_export_2.FAIcon, { fontSize: '3.paragraph', d: 'palette' }),
-                    " Gray Scale"),
-                React.createElement(_export_2.Box, { paddingLeft: 2 },
-                    React.createElement(_export_4.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(_export_3.Column, { gap: '1/3' },
-                React.createElement(_export_2.Box, null,
-                    React.createElement(_export_2.FAIcon, { fontSize: '3.paragraph', d: 'bars-staggered' }),
-                    " Tone"),
-                React.createElement(_export_2.Box, { paddingLeft: 2 },
-                    React.createElement(_export_4.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*/, _export_4.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*/];
-            }
-        });
-    }); }
-};