amotify 0.0.2 → 0.0.4

package/src/Functions/Cropper/parts.tsx

@@ -0,0 +1,1061 @@
+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
+      }
+    } );
+  }
+}