amotify 0.1.32 → 0.1.34

package/dist/fn/Cropper.js

@@ -1,1009 +1 @@
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-JJ3PEWPN.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  $$,
-  $$fromRoot,
-  useStore
-} from "../@utils/_";
-import {
-  useState,
-  useEffect
-} from "react";
-import Flex from "../atoms/Flex";
-import Box from "../atoms/Box";
-import FAI from "../atoms/FAI";
-import Column from "../mols/Column";
-import Row from "../mols/Row";
-import Button from "./Button";
-import Sheet from "./Sheet";
-import Loader from "./Loader/_";
-import Input from "./Input/_";
-import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
-import { faBarsStaggered } from "@fortawesome/free-solid-svg-icons/faBarsStaggered";
-import { faRotateLeft } from "@fortawesome/free-solid-svg-icons/faRotateLeft";
-import { faRotateRight } from "@fortawesome/free-solid-svg-icons/faRotateRight";
-import { CropperClasses } from "../@styles/componentClasses/_";
-class Picture {
-  constructor(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
-    };
-    let Canvas = params.canvas;
-    let {
-      width: cvsW,
-      height: cvsH
-    } = Canvas;
-    let Picture2 = params.picture.image;
-    let {
-      width: pictW,
-      height: pictH
-    } = Picture2;
-    let pictAsp = pictW / pictH;
-    this.Canvas = {
-      elm: Canvas,
-      ctx: Canvas.getContext("2d")
-    };
-    let frameW = 0, frameH = 0;
-    if (this.use == "square") {
-      frameW = Canvas.width / 3 * 2;
-      frameH = Canvas.height / 3 * 2;
-    } else if (this.use == "wallpaper.horizontal") {
-      frameW = Canvas.width * (7 / 9);
-      frameH = frameW / 3;
-    } else if (this.use == "wallpaper.vertical") {
-      frameH = Canvas.height * (7 / 9);
-      frameW = frameH / 2;
-    }
-    let frameX = (Canvas.width - frameW) / 2;
-    let frameY = (Canvas.height - frameH) / 2;
-    let frameAsp = frameW / frameH;
-    this.Picture = {
-      elm: Picture2,
-      originDataUrl: Picture2.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();
-  }
-  dragEffect(params) {
-    let {
-      eventType,
-      x,
-      y
-    } = params;
-    if (eventType == "start") {
-      let CanvasRect = this.Canvas.elm.position();
-      this.dragEffectInfo = {
-        origin: { x, y },
-        frameExpandRate: {
-          x: this.Canvas.elm.width / CanvasRect.width,
-          y: this.Canvas.elm.height / CanvasRect.height
-        }
-      };
-    } else {
-      let {
-        origin,
-        frameExpandRate
-      } = this.dragEffectInfo;
-      let dragX = origin.x - x;
-      let dragY = origin.y - y;
-      let scale = this.scale.current * this.Picture.revisedAspect / 100;
-      let shiftX = dragX / scale * frameExpandRate.x;
-      let 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
-        );
-      }
-    }
-  }
-  pinchEffect(params) {
-    let {
-      eventType,
-      event
-    } = params;
-    let { x: x1, y: y1 } = $$.getCursor(event.touches[0]);
-    let { x: x2, y: y2 } = $$.getCursor(event.touches[1]);
-    let marginX = x2 - x1;
-    let marginY = y2 - y1;
-    if (eventType == "start") {
-      this.pinchEffectInfo.origin = {
-        x: marginX,
-        y: marginY,
-        scale: this.scale.current
-      };
-    } else if (eventType == "move") {
-      let {
-        origin
-      } = this.pinchEffectInfo;
-      let originDist = Math.sqrt(Math.pow(origin.x, 2) + Math.pow(origin.y, 2));
-      let dist = Math.sqrt(Math.pow(marginX, 2) + Math.pow(marginY, 2));
-      let margin = dist / originDist;
-      let scale = Number(origin.scale * margin);
-      this.set_scale(scale);
-    }
-  }
-  updateScale(scale) {
-    let nextValue = scale;
-    nextValue = Math.max(nextValue, this.scale.min);
-    nextValue = Math.min(nextValue, this.scale.max);
-    this.scale.current = nextValue;
-    this.drawImage();
-  }
-  updateFilter(params) {
-    this.Picture.grayScale = params.grayScale;
-    this.Picture.tone = params.tone;
-    this.Picture.rotate = params.rotate;
-    this.modifyImage();
-  }
-  modifyImage() {
-    return __async(this, null, function* () {
-      let {
-        grayScale,
-        tone,
-        rotate
-      } = this.Picture;
-      const canvas = document.createElement("canvas");
-      let ctx = canvas.getContext("2d");
-      let image = new Image();
-      image.src = this.Picture.originDataUrl;
-      let ImageW = image.width;
-      let 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);
-      let newImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      let imgData = newImage.data;
-      {
-        grayScale /= 100;
-        let ColorDir = [
-          [255, 255, 255],
-          // Original
-          [255, 200, 100],
-          // Warm
-          [170, 170, 255],
-          // Cold
-          [240, 200, 145],
-          // Sepia
-          [128, 255, 255],
-          // Cyan
-          [255, 128, 255],
-          // Magenta
-          [255, 255, 128],
-          // Yellow
-          [128, 158, 169],
-          // Origin1
-          [128, 112, 162],
-          // Origin2
-          [50, 192, 87],
-          // Origin3
-          [246, 100, 140]
-          // Origin4
-        ][tone];
-        let rCorrect = ColorDir[0] / 255;
-        let gCorrect = ColorDir[1] / 255;
-        let bCorrect = ColorDir[2] / 255;
-        for (let iH = 0; iH < ImageH; iH++) {
-          for (let iW = 0; iW < ImageW; iW++) {
-            var Index = (iH * ImageW + iW) * 4;
-            if (grayScale) {
-              let terminal = 0.3 * imgData[Index] + 0.59 * imgData[Index + 1] + 0.11 * imgData[Index + 2];
-              for (var k = 0; k < 3; k++) {
-                let 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);
-      let newDataUrl = canvas.toDataURL("image/jpeg");
-      {
-        let Picture2 = yield $$.ImageLoader(newDataUrl);
-        let {
-          width: pictW,
-          height: pictH
-        } = Picture2;
-        let pictAsp = pictW / pictH;
-        this.Picture = __spreadProps(__spreadValues({}, this.Picture), {
-          elm: Picture2,
-          aspect: pictAsp,
-          revisedAspect: this.pst.frame.aspect > pictAsp ? this.pst.frame.w / pictW : this.pst.frame.h / pictH
-        });
-      }
-      this.drawImage();
-    });
-  }
-  drawImage(_imageX, _imageY) {
-    let {
-      use,
-      Canvas: {
-        ctx
-      },
-      pst: {
-        frame
-      }
-    } = this;
-    let ImageX = _imageX || this.pst.imageX;
-    let ImageY = _imageY || this.pst.imageY;
-    {
-      let scale = this.scale.current / 100;
-      let totalScale = this.Picture.revisedAspect * scale;
-      let imgX = this.pst.centerX - ImageX * totalScale;
-      let imgY = this.pst.centerY - ImageY * totalScale;
-      let imgW = this.Picture.elm.width * totalScale;
-      let imgH = this.Picture.elm.height * totalScale;
-      {
-        let minX = this.pst.frame.x + this.pst.frame.w - imgW;
-        let maxX = this.pst.frame.x;
-        let minY = this.pst.frame.y + this.pst.frame.h - imgH;
-        let maxY = this.pst.frame.y;
-        let extraX = 0;
-        if (imgX < minX)
-          extraX = imgX - minX;
-        if (imgX > maxX)
-          extraX = imgX - maxX;
-        let 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 == "square") {
-        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 == "wallpaper.horizontal") {
-        ctx.fillStyle = "rgba( 20,24,20,.3 )";
-      } else if (use == "wallpaper.vertical") {
-        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();
-      let body = $$(document.body);
-      let themeColorHSL = body.getStyleProperty("--color-theme-hsl");
-      ctx.lineWidth = this.Canvas.elm.width / 200;
-      ctx.strokeStyle = `hsla( ${themeColorHSL},1 )`;
-      ctx.strokeRect(frame.x, frame.y, frame.w, frame.h);
-    }
-  }
-  export() {
-    return __async(this, null, function* () {
-      let {
-        develops,
-        Picture: Picture2,
-        pst: {
-          outImage,
-          frame
-        }
-      } = this;
-      let ratioX = outImage.w / Picture2.elm.width;
-      let ratioY = outImage.h / Picture2.elm.height;
-      let Left = (frame.x - outImage.x) / ratioX;
-      let Right = (frame.x - outImage.x + frame.w) / ratioX;
-      let Top = (frame.y - outImage.y) / ratioY;
-      let Bottom = (frame.y - outImage.y + frame.h) / ratioY;
-      let Files = Array.from({ length: develops.length });
-      let MimeType = "image/jpeg";
-      for (let index = 0; index < develops.length; index++) {
-        let {
-          size,
-          maxSize
-        } = develops[index];
-        maxSize = maxSize || {
-          S: 1024 * 20,
-          R: 1024 * 100,
-          L: 1024 * 350
-        }[size];
-        let width = {
-          S: 144,
-          R: 576,
-          L: 1152
-        }[size];
-        let height = width;
-        if (this.use == "wallpaper.horizontal") {
-          height = width / 3 * 2;
-        } else if (this.use == "wallpaper.vertical") {
-          height = width * 2;
-        }
-        let Preview = document.createElement("canvas");
-        Preview.width = width;
-        Preview.height = height;
-        let previewCtx = Preview.getContext("2d");
-        if (!previewCtx)
-          return;
-        previewCtx.clearRect(0, 0, width, height);
-        previewCtx.drawImage(
-          this.Picture.elm,
-          Left,
-          Top,
-          Right - Left,
-          Bottom - Top,
-          0,
-          0,
-          width,
-          height
-        );
-        let dataUrl = Preview.toDataURL(MimeType);
-        let blob = yield dataUrl.toBlob(MimeType);
-        if (!blob)
-          return;
-        if (blob.size >= maxSize) {
-          let Ratio = maxSize / blob.size;
-          dataUrl = Preview.toDataURL(MimeType, Ratio * 0.92);
-          blob = yield dataUrl.toBlob(MimeType);
-          if (!blob)
-            return;
-        }
-        let file = new File([blob], this.val_file.name, { type: MimeType });
-        Files[index] = file;
-      }
-      return Files;
-    });
-  }
-}
-const Comps = {
-  Core: (params) => {
-    let {
-      val_file,
-      options,
-      finishedCallback,
-      abortCallback
-    } = params;
-    let {
-      use,
-      develops = []
-    } = options;
-    let [val_componentID] = useState($$.uuid.gen(32));
-    const DefaultOptions = {
-      scale: {
-        default: 125,
-        min: 100,
-        max: 300
-      },
-      rotate: 0,
-      grayScale: 0,
-      tone: 0
-    };
-    let [val_scale, set_scale] = useState(DefaultOptions.scale.default);
-    let [val_rotate, set_rotate] = useState(DefaultOptions.rotate);
-    let [val_grayScale, set_grayScale] = useState(DefaultOptions.grayScale);
-    let [val_tone, set_tone] = useState(DefaultOptions.tone);
-    useEffect(() => {
-      useStore.set({
-        key: val_componentID,
-        value: {}
-      });
-      (() => __async(void 0, null, function* () {
-        Loader.fn.corner.active();
-        let { target } = yield val_file.read();
-        if (!target)
-          return;
-        let dataUrl = target.result;
-        let Canvas = $$fromRoot("#Canvas-" + val_componentID)[0];
-        if (!Canvas)
-          return;
-        let __Cropper = new Picture({
-          set_scale,
-          val_file,
-          develops,
-          use,
-          scale: DefaultOptions.scale,
-          componentID: val_componentID,
-          canvas: Canvas,
-          picture: {
-            image: yield $$.ImageLoader(dataUrl),
-            grayScale: DefaultOptions.grayScale,
-            tone: DefaultOptions.tone,
-            rotate: DefaultOptions.rotate
-          }
-        });
-        useStore.set({
-          key: val_componentID,
-          value: {
-            Instance: __Cropper
-          }
-        });
-        const UserEffectStart = function(event) {
-          event.preventDefault();
-          if (event.touches && event.touches.length > 1) {
-            __Cropper.pinchEffect({
-              eventType: "start",
-              event
-            });
-            $$(document).addEvent({
-              eventType: "touchmove",
-              eventID: "CropperEffectMove",
-              options: { passive: false },
-              callback: (event2) => {
-                event2.preventDefault();
-                __Cropper.pinchEffect({
-                  eventType: "move",
-                  event: event2
-                });
-              }
-            }).addEvent({
-              eventType: "touchend",
-              eventID: "CropperEffectEnd",
-              options: { passive: false },
-              callback: EventEnd
-            });
-          } else {
-            __Cropper.dragEffect(__spreadValues({
-              eventType: "start"
-            }, $$.getCursor(event)));
-            let { type } = event;
-            $$(document).addEvent({
-              eventType: type == "touchstart" ? "touchmove" : "mousemove",
-              eventID: "CropperEffectMove",
-              options: { passive: false },
-              callback: (event2) => {
-                DragEffect("move", event2);
-              }
-            }).addEvent({
-              eventType: type == "touchstart" ? "touchend" : "mouseup",
-              eventID: "CropperEffectEnd",
-              options: { passive: false },
-              callback: (event2) => {
-                DragEffect("end", event2);
-                EventEnd(event2);
-              }
-            });
-          }
-        };
-        const DragEffect = function(eventType, event) {
-          event.preventDefault();
-          __Cropper.dragEffect(__spreadValues({
-            eventType
-          }, $$.getCursor(event)));
-        };
-        const EventEnd = function(event) {
-          event.preventDefault();
-          $$(document).removeEvent([
-            "CropperEffectMove",
-            "CropperEffectEnd"
-          ]);
-        };
-        $$(Canvas).removeEvent([
-          "CropperMouseWheel",
-          "CropperTouchStart",
-          "CropperMouseDown"
-        ]).addEvent({
-          eventID: "CropperMouseWheel",
-          eventType: "wheel",
-          callback: (event) => {
-            event.preventDefault();
-            let bitScale = Number(event.wheelDelta * 0.04);
-            let nextScale = __Cropper.scale.current + bitScale;
-            nextScale = Math.max(nextScale, __Cropper.scale.min);
-            nextScale = Math.min(nextScale, __Cropper.scale.max);
-            set_scale(nextScale);
-          },
-          options: { passive: false }
-        }).addEvent({
-          eventType: "touchstart",
-          eventID: "CropperTouchStart",
-          callback: UserEffectStart,
-          options: { passive: false }
-        }).addEvent({
-          eventType: "mousedown",
-          eventID: "CropperMouseDown",
-          callback: UserEffectStart,
-          options: { passive: false }
-        });
-        setTimeout(() => {
-          Loader.fn.corner.stop();
-        }, 1e3);
-      }))();
-    }, [val_file.id]);
-    useEffect(() => {
-      var _a;
-      let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
-      if (Instance) {
-        Instance.updateScale(val_scale);
-      }
-    }, [val_scale]);
-    useEffect(() => {
-      var _a;
-      let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
-      if (Instance) {
-        Instance.updateFilter({
-          grayScale: val_grayScale,
-          tone: val_tone,
-          rotate: val_rotate
-        });
-      }
-    }, [val_grayScale, val_tone, val_rotate]);
-    return /* @__PURE__ */ jsx(Sheet.Comps.Body, { children: /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        className: [
-          CropperClasses("Wrap"),
-          CropperClasses("Use_" + use)
-        ].join(" "),
-        flexWrap: false,
-        position: "relative",
-        overflow: "hidden",
-        borderRadius: "inherit",
-        boxShadow: "3.remark",
-        UnderBreakPointStyles: {
-          flexType: "col"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              flexGrid: 3,
-              UnderBreakPointStyles: {
-                width: 1,
-                padding: 2
-              },
-              children: /* @__PURE__ */ jsx(
-                Box,
-                {
-                  overflow: "hidden",
-                  position: "relative",
-                  backgroundColor: "4.layer.darken",
-                  freeCSS: {
-                    zIndex: 1
-                  },
-                  UnderBreakPointStyles: {
-                    borderRadius: "1.tone.primary"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "canvas",
-                    {
-                      width: "2400",
-                      height: use == "wallpaper.horizontal" ? "1800" : use == "wallpaper.vertical" ? "3200" : "2400",
-                      className: CropperClasses("Canvas"),
-                      id: "Canvas-" + val_componentID
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Column,
-            {
-              gap: 0,
-              flexGrid: 2,
-              boxShadow: "3.remark",
-              UnderBreakPointStyles: {
-                width: 1,
-                maxWidth: "unset"
-              },
-              freeCSS: {
-                maxWidth: 12 * 28
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  Column,
-                  {
-                    gap: 1,
-                    flexSizing: 0,
-                    overflow: "auto",
-                    padding: 1.5,
-                    UnderBreakPointStyles: {
-                      flexSizing: "none"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          flexSizing: "none",
-                          fontSize: "4.thirdTitle",
-                          isSemiBoldFont: true,
-                          children: "\u30D5\u30A3\u30EB\u30BF\u30FC"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Comps.SettingRegion,
-                        {
-                          DefaultOptions,
-                          val_scale,
-                          set_scale,
-                          val_tone,
-                          set_tone,
-                          val_grayScale,
-                          set_grayScale,
-                          val_rotate,
-                          set_rotate
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  Flex,
-                  {
-                    padding: 1.5,
-                    flexSizing: "none",
-                    gap: 1,
-                    borderTop: true,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Button.Button.Border.R,
-                        {
-                          onClick: () => {
-                            abortCallback();
-                          },
-                          children: "\u30AD\u30E3\u30F3\u30BB\u30EB"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Button.Button.Prime.R,
-                        {
-                          flexSizing: 0,
-                          onClick: () => __async(void 0, null, function* () {
-                            var _a;
-                            let Instance = (_a = useStore.get(val_componentID)) == null ? void 0 : _a.Instance;
-                            if (!Instance)
-                              return;
-                            Loader.fn.mini.active("CropperExportation");
-                            let Files = yield Instance.export();
-                            setTimeout(() => {
-                              Loader.fn.mini.stop("CropperExportation");
-                              finishedCallback(Files);
-                            }, 3e3);
-                          }),
-                          children: /* @__PURE__ */ jsxs(
-                            Row.Center,
-                            {
-                              gap: "1/2",
-                              children: [
-                                /* @__PURE__ */ jsx(
-                                  Loader.White.R,
-                                  {
-                                    loaderID: "CropperExportation"
-                                  }
-                                ),
-                                "\u6C7A\u5B9A"
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ) });
-  },
-  SettingRegion: (params) => {
-    let ToneList = [];
-    for (let index = 1; index <= 10; index++) {
-      ToneList.push({
-        value: index,
-        label: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: [
-                CropperClasses("ToneBall"),
-                CropperClasses("ToneBall_" + index)
-              ].join(" ")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              textAlign: "center",
-              flexSizing: "auto",
-              children: ["", "\u6696\u8272", "\u5BD2\u8272", "\u30BB\u30D4\u30A2", "\u30B7\u30A2\u30F3", "\u30DE\u30BC\u30F3\u30BF", "\u30A4\u30A8\u30ED\u30FC", "\u30AA\u30EA\u30B8\u30CA\u30EB1", "\u30AA\u30EA\u30B8\u30CA\u30EB2", "\u30AA\u30EA\u30B8\u30CA\u30EB3", "\u30AA\u30EA\u30B8\u30CA\u30EB4"][index]
-            }
-          )
-        ] })
-      });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(
-            FAI.Rotate,
-            {
-              fontSize: "3.paragraph",
-              fontColor: "4.thin"
-            }
-          ),
-          " Rotate"
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Row.Separate,
-          {
-            flexChilds: "even",
-            paddingLeft: 2,
-            children: [
-              /* @__PURE__ */ jsxs(
-                Button.Button.Border.S,
-                {
-                  onClick: () => {
-                    let next = params.val_rotate - 90;
-                    if (next < 0)
-                      next += 360;
-                    params.set_rotate(next);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(FAI, { icon: faRotateLeft }),
-                    " \u5DE6\u306B\u56DE\u8EE2"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Button.Button.Border.S,
-                {
-                  onClick: () => {
-                    params.set_rotate((params.val_rotate + 90) % 360);
-                  },
-                  children: [
-                    "\u53F3\u306B\u56DE\u8EE2 ",
-                    /* @__PURE__ */ jsx(FAI, { icon: faRotateRight })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(
-            FAI.Search,
-            {
-              fontSize: "3.paragraph",
-              fontColor: "4.thin"
-            }
-          ),
-          " Zoom"
-        ] }),
-        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
-          Input.Slider,
-          {
-            override: "force",
-            value: params.val_scale - 100,
-            min: params.DefaultOptions.scale.min - 100,
-            max: params.DefaultOptions.scale.max - 100,
-            step: 25,
-            onUpdateValidValue: ({ eventType, value }) => {
-              $$.interval.clear("Cropper.UpdateScale");
-              $$.interval.standBy("Cropper.UpdateScale", 400, () => {
-                params.set_scale(value + 100);
-              });
-            },
-            legends: {
-              enable: true,
-              custom: (value) => {
-                let scale = Math.round(100 + value);
-                return "x" + scale / 100;
-              }
-            }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(
-            FAI,
-            {
-              icon: faPalette,
-              fontSize: "3.paragraph",
-              fontColor: "4.thin"
-            }
-          ),
-          " Gray Scale"
-        ] }),
-        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
-          Input.Slider,
-          {
-            value: params.val_grayScale,
-            min: 0,
-            max: 100,
-            step: 10,
-            onUpdateValidValue: ({ value }) => {
-              $$.interval.clear("Cropper.GrayScale");
-              $$.interval.standBy("Cropper.GrayScale", 400, () => {
-                params.set_grayScale(value);
-              });
-            },
-            legends: {
-              enable: true,
-              custom: (value) => value + "%"
-            }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs(Column, { gap: "1/3", children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(
-            FAI,
-            {
-              icon: faBarsStaggered,
-              fontSize: "3.paragraph",
-              fontColor: "4.thin"
-            }
-          ),
-          " Tone"
-        ] }),
-        /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsx(
-          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: [
-              {
-                value: 0,
-                label: "\u306A\u3057",
-                padding: ["1/2", 1],
-                flexCenter: true
-              },
-              ...ToneList
-            ],
-            onUpdateValidValue: ({ value }) => {
-              params.set_tone(value[0]);
-            }
-          }
-        ) })
-      ] })
-    ] });
-  }
-};
-const Cropper = {
-  open: (params) => __async(void 0, null, function* () {
-    let Image2 = yield Input.Filer.fn.openDialog({
-      // accept: 'image/jpeg,image/jpg,image/png,image/gif',
-      accept: "image",
-      multiple: false
-    });
-    let sheetID = "CropperImage";
-    Sheet.open({
-      sheetID,
-      type: "normal.middleCenter",
-      size: "3L",
-      freeCSS: {
-        width: params.use == "wallpaper.horizontal" ? 12 * 100 : 12 * 80
-      },
-      content: /* @__PURE__ */ jsx(
-        Comps.Core,
-        {
-          val_file: Image2[0],
-          options: params,
-          finishedCallback: (files) => {
-            Sheet.close(sheetID);
-            params.onProcessFinished(files);
-          },
-          abortCallback: () => {
-            Sheet.close(sheetID);
-          }
-        }
-      ),
-      close_option: {
-        escapeKeyDown: false
-      }
-    });
-  })
-};
-export {
-  Cropper,
-  Cropper as default
-};
+import{b as X,c as O,e as P}from"../chunk-VY3566IV.js";import{Fragment as $,jsx as h,jsxs as y}from"react/jsx-runtime";import{$$ as b,$$fromRoot as j,useStore as M}from"../@utils/_";import{useState as k,useEffect as H}from"react";import V from"../atoms/Flex";import D from"../atoms/Box";import B from"../atoms/FAI";import T from"../mols/Column";import q from"../mols/Row";import Y from"./Button";import A from"./Sheet";import z from"./Loader/_";import W from"./Input/_";import{faPalette as K}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Z}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as J}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as Q}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as U}from"../@styles/componentClasses/_";class ee{constructor(i){this.set_scale=i.set_scale,this.val_file=i.val_file,this.develops=i.develops,this.use=i.use,this.componentID=i.componentID,this.scale={current:i.scale.default,default:i.scale.default,min:i.scale.min,max:i.scale.max};let e=i.canvas,{width:l,height:t}=e,a=i.picture.image,{width:m,height:s}=a,c=m/s;this.Canvas={elm:e,ctx:e.getContext("2d")};let o=0,r=0;this.use=="square"?(o=e.width/3*2,r=e.height/3*2):this.use=="wallpaper.horizontal"?(o=e.width*(7/9),r=o/3):this.use=="wallpaper.vertical"&&(r=e.height*(7/9),o=r/2);let n=(e.width-o)/2,d=(e.height-r)/2,g=o/r;this.Picture={elm:a,originDataUrl:a.src,aspect:c,revisedAspect:g>c?o/m:r/s,rotate:i.picture.rotate,grayScale:i.picture.grayScale,tone:i.picture.tone},this.pst={frame:{x:n,y:d,w:o,h:r,aspect:g},outImage:{x:0,y:0,w:0,h:0},imageX:m/2,imageY:s/2,centerX:l/2,centerY:t/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()}dragEffect(i){let{eventType:e,x:l,y:t}=i;if(e=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:l,y:t},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:m}=this.dragEffectInfo,s=a.x-l,c=a.y-t,o=this.scale.current*this.Picture.revisedAspect/100,r=s/o*m.x,n=c/o*m.y;e=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+n):e=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=n)}}pinchEffect(i){let{eventType:e,event:l}=i,{x:t,y:a}=b.getCursor(l.touches[0]),{x:m,y:s}=b.getCursor(l.touches[1]),c=m-t,o=s-a;if(e=="start")this.pinchEffectInfo.origin={x:c,y:o,scale:this.scale.current};else if(e=="move"){let{origin:r}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),g=Math.sqrt(Math.pow(c,2)+Math.pow(o,2))/n,C=Number(r.scale*g);this.set_scale(C)}}updateScale(i){let e=i;e=Math.max(e,this.scale.min),e=Math.min(e,this.scale.max),this.scale.current=e,this.drawImage()}updateFilter(i){this.Picture.grayScale=i.grayScale,this.Picture.tone=i.tone,this.Picture.rotate=i.rotate,this.modifyImage()}modifyImage(){return P(this,null,function*(){let{grayScale:i,tone:e,rotate:l}=this.Picture;const t=document.createElement("canvas");let a=t.getContext("2d"),m=new Image;m.src=this.Picture.originDataUrl;let s=m.width,c=m.height;(l==90||l==270)&&(s=m.height,c=m.width),t.width=s,t.height=c,i&&(a.filter="grayscale("+i+"%)"),l&&(a.translate(s/2,c/2),a.rotate(l*Math.PI/180),[90,270].includes(l)?a.translate(-c/2,-s/2):a.translate(-s/2,-c/2)),a.drawImage(m,0,0,m.width,m.height);let o=a.getImageData(0,0,t.width,t.height),r=o.data;{i/=100;let C=[[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]][e],x=C[0]/255,S=C[1]/255,p=C[2]/255;for(let u=0;u<c;u++)for(let v=0;v<s;v++){var n=(u*s+v)*4;if(i){let w=.3*r[n]+.59*r[n+1]+.11*r[n+2];for(var d=0;d<3;d++){let E=r[n+d];r[n+d]=E+(w-E)*i}}r[n]*=x,r[n+1]*=S,r[n+2]*=p}}a.putImageData(o,0,0);let g=t.toDataURL("image/jpeg");{let C=yield b.ImageLoader(g),{width:x,height:S}=C,p=x/S;this.Picture=O(X({},this.Picture),{elm:C,aspect:p,revisedAspect:this.pst.frame.aspect>p?this.pst.frame.w/x:this.pst.frame.h/S})}this.drawImage()})}drawImage(i,e){let{use:l,Canvas:{ctx:t},pst:{frame:a}}=this,m=i||this.pst.imageX,s=e||this.pst.imageY;{let c=this.scale.current/100,o=this.Picture.revisedAspect*c,r=this.pst.centerX-m*o,n=this.pst.centerY-s*o,d=this.Picture.elm.width*o,g=this.Picture.elm.height*o;{let C=this.pst.frame.x+this.pst.frame.w-d,x=this.pst.frame.x,S=this.pst.frame.y+this.pst.frame.h-g,p=this.pst.frame.y,u=0;r<C&&(u=r-C),r>x&&(u=r-x);let v=0;n<S&&(v=n-S),n>p&&(v=n-p),this.dragEffectInfo.origin.x+=u/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=v/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,C),x),n=Math.min(Math.max(n,S),p)}this.pst.outImage={x:r,y:n,w:d,h:g},t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,n,d,g)}{l=="square"?(t.fillStyle="rgba( 20,24,20,.3 )",t.beginPath(),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width,0,Math.PI*2,!0),t.arc(this.Canvas.elm.width/2,this.Canvas.elm.height/2,this.Canvas.elm.width/3*2/2,0,Math.PI*2,!1),t.closePath(),t.fill()):(l=="wallpaper.horizontal"||l=="wallpaper.vertical")&&(t.fillStyle="rgba( 20,24,20,.3 )"),t.beginPath(),t.moveTo(0,0),t.lineTo(this.Canvas.elm.width,0),t.lineTo(this.Canvas.elm.width,this.Canvas.elm.height),t.lineTo(0,this.Canvas.elm.height),t.lineTo(0,0),t.closePath(),t.lineTo(a.x,a.y),t.lineTo(a.x,a.y+a.h),t.lineTo(a.x+a.w,a.y+a.h),t.lineTo(a.x+a.w,a.y),t.lineTo(a.x,a.y),t.fill();let o=b(document.body).getStyleProperty("--color-theme-hsl");t.lineWidth=this.Canvas.elm.width/200,t.strokeStyle=`hsla( ${o},1 )`,t.strokeRect(a.x,a.y,a.w,a.h)}}export(){return P(this,null,function*(){let{develops:i,Picture:e,pst:{outImage:l,frame:t}}=this,a=l.w/e.elm.width,m=l.h/e.elm.height,s=(t.x-l.x)/a,c=(t.x-l.x+t.w)/a,o=(t.y-l.y)/m,r=(t.y-l.y+t.h)/m,n=Array.from({length:i.length}),d="image/jpeg";for(let g=0;g<i.length;g++){let{size:C,maxSize:x}=i[g];x=x||{S:1024*20,R:1024*100,L:1024*350}[C];let S={S:144,R:576,L:1152}[C],p=S;this.use=="wallpaper.horizontal"?p=S/3*2:this.use=="wallpaper.vertical"&&(p=S*2);let u=document.createElement("canvas");u.width=S,u.height=p;let v=u.getContext("2d");if(!v)return;v.clearRect(0,0,S,p),v.drawImage(this.Picture.elm,s,o,c-s,r-o,0,0,S,p);let w=u.toDataURL(d),E=yield w.toBlob(d);if(!E)return;if(E.size>=x){let F=x/E.size;if(w=u.toDataURL(d,F*.92),E=yield w.toBlob(d),!E)return}let L=new File([E],this.val_file.name,{type:d});n[g]=L}return n})}}const G={Core:f=>{let{val_file:i,options:e,finishedCallback:l,abortCallback:t}=f,{use:a,develops:m=[]}=e,[s]=k(b.uuid.gen(32));const c={scale:{default:125,min:100,max:300},rotate:0,grayScale:0,tone:0};let[o,r]=k(c.scale.default),[n,d]=k(c.rotate),[g,C]=k(c.grayScale),[x,S]=k(c.tone);return H(()=>{M.set({key:s,value:{}}),P(void 0,null,function*(){z.fn.corner.active();let{target:p}=yield i.read();if(!p)return;let u=p.result,v=j("#Canvas-"+s)[0];if(!v)return;let w=new ee({set_scale:r,val_file:i,develops:m,use:a,scale:c.scale,componentID:s,canvas:v,picture:{image:yield b.ImageLoader(u),grayScale:c.grayScale,tone:c.tone,rotate:c.rotate}});M.set({key:s,value:{Instance:w}});const E=function(I){if(I.preventDefault(),I.touches&&I.touches.length>1)w.pinchEffect({eventType:"start",event:I}),b(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:R=>{R.preventDefault(),w.pinchEffect({eventType:"move",event:R})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:F});else{w.dragEffect(X({eventType:"start"},b.getCursor(I)));let{type:R}=I;b(document).addEvent({eventType:R=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{L("move",_)}}).addEvent({eventType:R=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{L("end",_),F(_)}})}},L=function(I,R){R.preventDefault(),w.dragEffect(X({eventType:I},b.getCursor(R)))},F=function(I){I.preventDefault(),b(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};b(v).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:I=>{I.preventDefault();let R=Number(I.wheelDelta*.04),_=w.scale.current+R;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),r(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:E,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:E,options:{passive:!1}}),setTimeout(()=>{z.fn.corner.stop()},1e3)})},[i.id]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateScale(o)},[o]),H(()=>{var u;let p=(u=M.get(s))==null?void 0:u.Instance;p&&p.updateFilter({grayScale:g,tone:x,rotate:n})},[g,x,n]),h(A.Comps.Body,{children:y(V,{className:[U("Wrap"),U("Use_"+a)].join(" "),flexWrap:!1,position:"relative",overflow:"hidden",borderRadius:"inherit",boxShadow:"3.remark",UnderBreakPointStyles:{flexType:"col"},children:[h(D,{flexGrid:3,UnderBreakPointStyles:{width:1,padding:2},children:h(D,{overflow:"hidden",position:"relative",backgroundColor:"4.layer.darken",freeCSS:{zIndex:1},UnderBreakPointStyles:{borderRadius:"1.tone.primary"},children:h("canvas",{width:"2400",height:a=="wallpaper.horizontal"?"1800":a=="wallpaper.vertical"?"3200":"2400",className:U("Canvas"),id:"Canvas-"+s})})}),y(T,{gap:0,flexGrid:2,boxShadow:"3.remark",UnderBreakPointStyles:{width:1,maxWidth:"unset"},freeCSS:{maxWidth:12*28},children:[y(T,{gap:1,flexSizing:0,overflow:"auto",padding:1.5,UnderBreakPointStyles:{flexSizing:"none"},children:[h(D,{flexSizing:"none",fontSize:"4.thirdTitle",isSemiBoldFont:!0,children:"\u30D5\u30A3\u30EB\u30BF\u30FC"}),h(G.SettingRegion,{DefaultOptions:c,val_scale:o,set_scale:r,val_tone:x,set_tone:S,val_grayScale:g,set_grayScale:C,val_rotate:n,set_rotate:d})]}),y(V,{padding:1.5,flexSizing:"none",gap:1,borderTop:!0,children:[h(Y.Button.Border.R,{onClick:()=>{t()},children:"\u30AD\u30E3\u30F3\u30BB\u30EB"}),h(Y.Button.Prime.R,{flexSizing:0,onClick:()=>P(void 0,null,function*(){var v;let p=(v=M.get(s))==null?void 0:v.Instance;if(!p)return;z.fn.mini.active("CropperExportation");let u=yield p.export();setTimeout(()=>{z.fn.mini.stop("CropperExportation"),l(u)},3e3)}),children:y(q.Center,{gap:"1/2",children:[h(z.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:f=>{let i=[];for(let e=1;e<=10;e++)i.push({value:e,label:y($,{children:[h(D,{className:[U("ToneBall"),U("ToneBall_"+e)].join(" ")}),h(D,{textAlign:"center",flexSizing:"auto",children:["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"][e]})]})});return y($,{children:[y(T,{gap:"1/3",children:[y(D,{children:[h(B.Rotate,{fontSize:"3.paragraph",fontColor:"4.thin"})," Rotate"]}),y(q.Separate,{flexChilds:"even",paddingLeft:2,children:[y(Y.Button.Border.S,{onClick:()=>{let e=f.val_rotate-90;e<0&&(e+=360),f.set_rotate(e)},children:[h(B,{icon:J})," \u5DE6\u306B\u56DE\u8EE2"]}),y(Y.Button.Border.S,{onClick:()=>{f.set_rotate((f.val_rotate+90)%360)},children:["\u53F3\u306B\u56DE\u8EE2 ",h(B,{icon:Q})]})]})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B.Search,{fontSize:"3.paragraph",fontColor:"4.thin"})," Zoom"]}),h(D,{paddingLeft:2,children:h(W.Slider,{override:"force",value:f.val_scale-100,min:f.DefaultOptions.scale.min-100,max:f.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:e,value:l})=>{b.interval.clear("Cropper.UpdateScale"),b.interval.standBy("Cropper.UpdateScale",400,()=>{f.set_scale(l+100)})},legends:{enable:!0,custom:e=>"x"+Math.round(100+e)/100}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B,{icon:K,fontSize:"3.paragraph",fontColor:"4.thin"})," Gray Scale"]}),h(D,{paddingLeft:2,children:h(W.Slider,{value:f.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:e})=>{b.interval.clear("Cropper.GrayScale"),b.interval.standBy("Cropper.GrayScale",400,()=>{f.set_grayScale(e)})},legends:{enable:!0,custom:e=>e+"%"}})})]}),y(T,{gap:"1/3",children:[y(D,{children:[h(B,{icon:Z,fontSize:"3.paragraph",fontColor:"4.thin"})," Tone"]}),h(D,{paddingLeft:2,children:h(W.Radio,{value:f.val_tone,gap:"1/2",cellStyles:{isRounded:!0,borderWidth:2,borderColor:"1.thin",padding:"1/2",paddingRight:1,fontSize:"1.mini",gap:"1/3",flexSizing:"auto"},options:[{value:0,label:"\u306A\u3057",padding:["1/2",1],flexCenter:!0},...i],onUpdateValidValue:({value:e})=>{f.set_tone(e[0])}})})]})]})}},N={open:f=>P(void 0,null,function*(){let i=yield W.Filer.fn.openDialog({accept:"image",multiple:!1}),e="CropperImage";A.open({sheetID:e,type:"normal.middleCenter",size:"3L",freeCSS:{width:f.use=="wallpaper.horizontal"?12*100:12*80},content:h(G.Core,{val_file:i[0],options:f,finishedCallback:l=>{A.close(e),f.onProcessFinished(l)},abortCallback:()=>{A.close(e)}}),close_option:{escapeKeyDown:!1}})})};export{N as Cropper,N as default};