amotify 0.0.4 → 0.0.5

package/src/Functions/Cropper/parts.tsx

@@ -1,1061 +0,0 @@
-import {
-  useStore
-} from '@global';
-import {
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-
-import {
-  Buttons,
-  Input,
-  Sheet,
-  Loader
-} from '@functions';
-
-const {
-  useState,
-  useEffect,
-} = React;
-
-import style from './style.module.scss';
-
-type CoreProps = {
-  val_file: amotify.fn.Input.Filer.CustomFile
-  options: amotify.fn.Cropper.Params
-  finishedCallback( files: amotify.fn.Input.Filer.CustomFile[] ): void
-  abortCallback(): void
-}
-
-class CroppImage {
-  set_scale: React.Dispatch<React.SetStateAction<number>>
-  val_file: File
-  develops: amotify.fn.Cropper.DevelopParams[]
-
-  use: 'profile' | 'header'
-  componentID: string
-  Canvas: {
-    elm: HTMLCanvasElement
-    ctx: CanvasRenderingContext2D
-  }
-  Picture: {
-    elm: HTMLImageElement
-    aspect: number
-    originDataUrl: string
-    revisedAspect: number
-    rotate: number
-    grayScale: number
-    tone: number
-  }
-  scale: {
-    current: number
-    default: number
-    min: number,max: number
-  }
-  pst: {
-    frame: {
-      x: number,y: number,w: number,h: number,aspect: number
-    }
-    outImage: {
-      x: number,y: number,w: number,h: number
-    }
-    imageX: number,imageY: number
-    centerX: number,centerY: number
-  }
-
-  dragEffectInfo: {
-    origin: { x: number,y: number }
-    frameExpandRate: { x: number,y: number }
-  }
-  pinchEffectInfo: {
-    origin: {
-      x: number,
-      y: number,
-      scale: number
-    }
-  }
-
-  constructor( params: {
-    set_scale: React.Dispatch<React.SetStateAction<number>>
-    val_file: File
-    develops: amotify.fn.Cropper.DevelopParams[]
-    scale: {
-      default: number
-      min: number
-      max: number
-    }
-    picture: {
-      image: HTMLImageElement
-      grayScale: number
-      tone: number
-      rotate: number
-    }
-    use: 'profile' | 'header'
-    componentID: string
-    canvas: HTMLCanvasElement
-  } ) {
-    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 Picture = params.picture.image;
-    let {
-      width: pictW,
-      height: pictH
-    } = Picture;
-    let pictAsp = pictW / pictH;
-
-    this.Canvas = {
-      elm: Canvas,
-      ctx: Canvas.getContext( '2d' )!
-    }
-
-    let 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;
-    }
-    let frameX = ( Canvas.width - frameW ) / 2;
-    let frameY = ( Canvas.height - frameH ) / 2;
-    let 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();
-  }
-  dragEffect( params: {
-    eventType: 'start' | 'move' | 'end'
-    x: number
-    y: number
-  } ) {
-    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: {
-    eventType: 'start' | 'move'
-    event: any
-  } ) {
-    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: number ) {
-    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: {
-    grayScale: number
-    tone: number
-    rotate: number
-  } ) {
-    this.Picture.grayScale = params.grayScale;
-    this.Picture.tone = params.tone;
-    this.Picture.rotate = params.rotate;
-    this.modifyImage();
-  }
-  async modifyImage() {
-    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 Picture = await $.ImageLoader( newDataUrl );
-      let {
-        width: pictW,
-        height: pictH
-      } = Picture;
-      let pictAsp = pictW / pictH;
-
-      this.Picture = {
-        ...this.Picture,
-        elm: Picture,
-        aspect: pictAsp,
-        revisedAspect: this.pst.frame.aspect > pictAsp
-          ? this.pst.frame.w / pictW
-          : this.pst.frame.h / pictH
-      }
-      // this.pst.imageX = pictW / 2;
-      // this.pst.imageY = pictH / 2;
-    }
-
-    this.drawImage();
-  }
-  drawImage( _imageX?: number,_imageY?: number ) {
-    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 == '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();
-
-      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 );
-    }
-  }
-  async export() {
-    let {
-      develops,
-      Picture,
-      pst: {
-        outImage,
-        frame
-      }
-    } = this;
-
-    let ratioX = outImage.w / Picture.elm.width;
-    let ratioY = outImage.h / Picture.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: any = 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 = this.use == 'profile' ? width : width / 3;
-
-      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 = await dataUrl.toBlob( MimeType );
-      if ( !blob ) return;
-
-      if ( blob.size >= maxSize ) {
-        let Ratio = maxSize / blob.size;
-        dataUrl = Preview.toDataURL( MimeType,Ratio * 0.92 );
-        blob = await 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: FNC<CoreProps>
-  SettingRegion: FNC<{
-    DefaultOptions: plainObject
-    val_scale: number
-    set_scale: React.Dispatch<React.SetStateAction<number>>
-    val_tone: number
-    set_tone: React.Dispatch<React.SetStateAction<number>>
-    val_grayScale: number
-    set_grayScale: React.Dispatch<React.SetStateAction<number>>
-    val_rotate: number
-    set_rotate: React.Dispatch<React.SetStateAction<number>>
-  }>
-} = {
-  Core: ( params ) => {
-    let {
-      val_file,
-      options,
-      finishedCallback,
-      abortCallback,
-    } = params;
-    let {
-      use,
-      develops = []
-    } = options;
-
-    let [ val_componentID ] = useState( $.uuidGen( 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 () => {
-        amotify.fn.Loader.fn.corner.active();
-
-        let { target } = await val_file.read();
-        if ( !target ) return;
-        let dataUrl = target!.result as string;
-
-        let Canvas = $( '#Canvas-' + val_componentID )[ 0 ] as HTMLCanvasElement;
-        if ( !Canvas ) return;
-
-        let __Cropper = new CroppImage( {
-          set_scale,
-          val_file,
-          develops,
-          use: use,
-          scale: DefaultOptions.scale,
-          componentID: val_componentID,
-          canvas: Canvas,
-          picture: {
-            image: await $.ImageLoader( dataUrl ),
-            grayScale: DefaultOptions.grayScale,
-            tone: DefaultOptions.tone,
-            rotate: DefaultOptions.rotate
-          }
-        } );
-        useStore.set( {
-          key: val_componentID,
-          value: {
-            Instance: __Cropper
-          }
-        } );
-
-        const UserEffectStart = function ( event: any ) {
-          event.preventDefault();
-
-          if ( event.touches && event.touches.length > 1 ) {
-            __Cropper.pinchEffect( {
-              eventType: 'start',
-              event
-            } );
-
-            $( document )
-              .addEvent( {
-                eventType: 'touchmove',eventID: 'CropperEffectMove',option: { passive: false },
-                callback: ( event ) => {
-                  event.preventDefault();
-                  __Cropper.pinchEffect( {
-                    eventType: 'move',
-                    event
-                  } );
-                },
-              } )
-              .addEvent( {
-                eventType: 'touchend',eventID: 'CropperEffectEnd',option: { passive: false },
-                callback: EventEnd,
-              } )
-          } else {
-            __Cropper.dragEffect( {
-              eventType: 'start',
-              ...$.getCursor( event )
-            } );
-
-            let { type } = event;
-
-            $( document )
-              .addEvent( {
-                eventType: type == 'touchstart' ? 'touchmove' : 'mousemove',eventID: 'CropperEffectMove',option: { passive: false },
-                callback: ( event ) => {
-                  DragEffect( 'move',event );
-                },
-              } )
-              .addEvent( {
-                eventType: type == 'touchstart' ? 'touchend' : 'mouseup',eventID: 'CropperEffectEnd',option: { passive: false },
-                callback: ( event ) => {
-                  DragEffect( 'end',event );
-                  EventEnd( event );
-                },
-              } );
-          }
-        }
-        const DragEffect = function ( eventType: 'move' | 'end',event: any ) {
-          event.preventDefault();
-          __Cropper.dragEffect( {
-            eventType: eventType,
-            ...$.getCursor( event )
-          } );
-        }
-        const EventEnd = function ( event: any ) {
-          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 );
-            },
-            option: { passive: false }
-          } )
-          .addEvent( {
-            eventType: 'touchstart',eventID: 'CropperTouchStart',
-            callback: UserEffectStart,option: { passive: false }
-          } )
-          .addEvent( {
-            eventType: 'mousedown',eventID: 'CropperMouseDown',
-            callback: UserEffectStart,option: { passive: false }
-          } );
-
-        setTimeout( () => {
-          amotify.fn.Loader.fn.corner.stop();
-        },1000 );
-      } )();
-    },[ val_file.id ] );
-    useEffect( () => {
-      let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
-      if ( Instance ) {
-        Instance.updateScale( val_scale );
-      }
-    },[ val_scale ] );
-    useEffect( () => {
-      let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
-      if ( Instance ) {
-        Instance.updateFilter( {
-          grayScale: val_grayScale,
-          tone: val_tone,
-          rotate: val_rotate
-        } );
-      }
-    },[ val_grayScale,val_tone,val_rotate ] );
-
-    return ( <Sheet.Comps.Body>
-      <Flex
-        className={ [ style.Wrap,'Use_' + use ].join( ' ' ) }
-        flexWrap={ false }
-        position='relative'
-        overflow={ 'hidden' }
-        borderRadius={ 'inherit' }
-        boxShadow={ 3 }
-        UnderBreakPointStyles={ {
-          flexType: 'col'
-        } }
-      >
-        <Box
-          flexGrid={ 3 }
-          UnderBreakPointStyles={ {
-            width: 1,
-            padding: 2
-          } }
-        >
-          <Box
-            overflow='hidden'
-            position='relative'
-            backgroundColor={ '4.layer.darken' }
-            freeCSS={ {
-              zIndex: 1
-            } }
-            UnderBreakPointStyles={ {
-              borderRadius: '1.tone.primary'
-            } }
-          >
-            <canvas
-              width={ '2400' }
-              height={ use == 'profile' ? '2400' : '1800' }
-              className={ style.Canvas }
-              id={ 'Canvas-' + val_componentID }
-            />
-          </Box>
-        </Box>
-        <Column
-          gap={ 0 }
-          flexGrid={ 2 }
-          boxShadow={ 3 }
-          UnderBreakPointStyles={ {
-            width: 1,
-            maxWidth: 'unset'
-          } }
-          freeCSS={ {
-            maxWidth: 12 * 28
-          } }
-        >
-          <Column
-            gap={ 1 }
-            flexSizing={ 0 }
-            overflow='auto'
-            padding={ 1.5 }
-            UnderBreakPointStyles={ {
-              flexSizing: 'none'
-            } }
-          >
-            <Box
-              flexSizing='none'
-              fontSize='4.thirdTitle'
-              isBoldFont
-            >
-              フィルター
-            </Box>
-            <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 }
-            />
-          </Column>
-          <Flex
-            padding={ 1.5 }
-            flexSizing={ 'none' }
-            gap={ 1 }
-            borderTop
-          >
-            <Buttons.Button.Border.R
-              flexGrid={ 1 }
-              onClick={ () => {
-                abortCallback();
-              } }
-            >
-              キャンセル
-            </Buttons.Button.Border.R>
-            <Buttons.Button.Prime.R
-              flexGrid={ 2 }
-              onClick={ async () => {
-                let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
-                if ( !Instance ) return;
-                amotify.fn.Loader.fn.mini.active( 'CropperExportation' );
-                let Files = await Instance.export();
-
-                setTimeout( () => {
-                  amotify.fn.Loader.fn.mini.stop( 'CropperExportation' );
-                  finishedCallback( Files );
-                },3000 );
-              } }
-            >
-              <Row.Center
-                gap={ '1/2' }
-              >
-                <Loader.White.R
-                  loaderID='CropperExportation'
-                />
-                決定
-              </Row.Center>
-            </Buttons.Button.Prime.R>
-          </Flex>
-        </Column>
-      </Flex>
-    </Sheet.Comps.Body> );
-  },
-  SettingRegion: ( params ) => {
-    let ToneList: amotify.fn.Input.List.OptionParams[] = [];
-    for ( let index = 1; index <= 10; index++ ) {
-      ToneList.push( {
-        value: index,
-        label: <>
-          <Box
-            className={ [
-              style.ToneBall,
-              style[ 'ToneBall_' + index ]
-            ].join( ' ' ) }
-          />
-          <Box
-            textAlign='center'
-            flexSizing={ 'auto' }
-          >
-            { [ '','暖色','寒色','セピア','シアン','マゼンタ','イエロー','オリジナル1','オリジナル2','オリジナル3','オリジナル4' ][ index ] }
-          </Box>
-        </>
-      } );
-    }
-
-    return (
-      <>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAIcon.Rotate
-              fontSize='3.paragraph'
-            /> Rotate
-          </Box>
-          <Row.Separate
-            flexChilds='even'
-            paddingLeft={ 2 }
-          >
-            <Buttons.Button.Border.R
-              onClick={ () => {
-                let next = params.val_rotate - 90;
-                if ( next < 0 ) next += 360;
-                params.set_rotate( next );
-              } }
-            >
-              <FAIcon.RotateLeft /> 左に回転
-            </Buttons.Button.Border.R>
-            <Buttons.Button.Border.R
-              onClick={ () => {
-                params.set_rotate( ( params.val_rotate + 90 ) % 360 );
-              } }
-            >
-              右に回転 <FAIcon.RotateRight />
-            </Buttons.Button.Border.R>
-          </Row.Separate>
-        </Column>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAIcon
-              fontSize='3.paragraph'
-              d='magnifying-glass-plus'
-            /> Zoom
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <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 } ) => {
-                params.set_scale( value + 100 );
-              } }
-              legends={ {
-                enable: true,
-                custom: ( value ) => {
-                  let scale = Math.round( 100 + value );
-                  return 'x' + scale / 100;
-                }
-              } }
-            />
-          </Box>
-        </Column>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAIcon
-              fontSize='3.paragraph'
-              d='palette'
-            /> Gray Scale
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <Input.Slider
-              value={ params.val_grayScale }
-              min={ 0 }
-              max={ 100 }
-              step={ 25 }
-              onUpdateValidValue={ ( { value } ) => {
-                params.set_grayScale( value );
-              } }
-              legends={ {
-                enable: true,
-                custom: ( value ) => ( value + '%' )
-              } }
-            />
-          </Box>
-        </Column>
-        <Column gap={ '1/3' }>
-          <Box>
-            <FAIcon
-              fontSize='3.paragraph'
-              d='bars-staggered'
-            /> Tone
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <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: 'なし',
-                  padding: [ '1/2',1 ],
-                  flexCenter: true
-                },
-                ...ToneList
-              ] }
-              onUpdateValidValue={ ( { value } ) => {
-                params.set_tone( value[ 0 ] );
-              } }
-            />
-          </Box>
-        </Column>
-      </>
-    );
-  }
-}
-
-export const Cropper: amotify.fn.Cropper.Methods = {
-  open: async ( params ) => {
-    let Image = await Input.File.fn.openDialog( {
-      // accept: 'image/jpeg,image/jpg,image/png,image/gif',
-      accept: 'image',
-      multiple: false
-    } );
-
-    let sheetID = 'CropperImage';
-    amotify.fn.Sheet.open( {
-      sheetID: sheetID,
-      type: 'normal.middleCenter',
-      size: '3L',
-      freeCSS: {
-        width: params.use == 'header' ? 12 * 100 : 12 * 80
-      },
-      content: <Comps.Core
-        val_file={ Image[ 0 ] as any }
-        options={ params }
-        finishedCallback={ ( files ) => {
-          amotify.fn.Sheet.close( sheetID );
-          params.onProcessFinished( files );
-        } }
-        abortCallback={ () => {
-          amotify.fn.Sheet.close( sheetID );
-        } }
-      />,
-      closeOption: {
-        escapeKeyDown: false
-      }
-    } );
-  }
-}