amotify 0.0.59 → 0.0.62

package/src/functions/Cropper/parts.tsx

@@ -1,31 +1,31 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 
 import {
   Buttons,
   Input,
   Sheet,
   Loader
-} from '@fn';
+} from '@fn'
 
-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 { 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 style from './style.module.scss';
+import style from './style.module.scss'
 
 type CoreProps = {
   val_file: amotify.fn.Input.Filer.CustomFile
@@ -101,12 +101,12 @@ class CroppImage {
     componentID: string
     canvas: HTMLCanvasElement
   } ) {
-    this.set_scale = params.set_scale;
-    this.val_file = params.val_file;
-    this.develops = params.develops;
+    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.use = params.use
+    this.componentID = params.componentID
 
     this.scale = {
       current: params.scale.default,
@@ -115,35 +115,35 @@ class CroppImage {
       max: params.scale.max
     }
 
-    let Canvas = params.canvas;
+    let Canvas = params.canvas
     let {
       width: cvsW,
       height: cvsH
-    } = Canvas;
+    } = Canvas
 
-    let Picture = params.picture.image;
+    let Picture = params.picture.image
     let {
       width: pictW,
       height: pictH
-    } = Picture;
-    let pictAsp = pictW / pictH;
+    } = Picture
+    let pictAsp = pictW / pictH
 
     this.Canvas = {
       elm: Canvas,
       ctx: Canvas.getContext( '2d' )!
     }
 
-    let frameW = 0,frameH = 0;
+    let frameW = 0,frameH = 0
     if ( this.use == 'profile' ) {
-      frameW = Canvas.width / 3 * 2;
-      frameH = Canvas.height / 3 * 2;
+      frameW = Canvas.width / 3 * 2
+      frameH = Canvas.height / 3 * 2
     } else if ( this.use == 'header' ) {
-      frameW = Canvas.width * ( 7 / 9 );
-      frameH = frameW / 3;
+      frameW = Canvas.width * ( 7 / 9 )
+      frameH = frameW / 3
     }
-    let frameX = ( Canvas.width - frameW ) / 2;
-    let frameY = ( Canvas.height - frameH ) / 2;
-    let frameAsp = frameW / frameH;
+    let frameX = ( Canvas.width - frameW ) / 2
+    let frameY = ( Canvas.height - frameH ) / 2
+    let frameAsp = frameW / frameH
 
     this.Picture = {
       elm: Picture,
@@ -183,7 +183,7 @@ class CroppImage {
         scale: this.scale.current
       }
     }
-    this.modifyImage();
+    this.modifyImage()
   }
   dragEffect( params: {
     eventType: 'start' | 'move' | 'end'
@@ -192,10 +192,10 @@ class CroppImage {
   } ) {
     let {
       eventType,x,y
-    } = params;
+    } = params
 
     if ( eventType == 'start' ) {
-      let CanvasRect = this.Canvas.elm.position();
+      let CanvasRect = this.Canvas.elm.position()
       this.dragEffectInfo = {
         origin: { x,y },
         frameExpandRate: {
@@ -207,20 +207,20 @@ class CroppImage {
       let {
         origin,
         frameExpandRate
-      } = this.dragEffectInfo;
-      let dragX = origin.x - x;
-      let dragY = origin.y - y;
+      } = this.dragEffectInfo
+      let dragX = origin.x - x
+      let dragY = origin.y - y
 
-      let scale = this.scale.current * this.Picture.revisedAspect / 100;
+      let scale = this.scale.current * this.Picture.revisedAspect / 100
 
-      let shiftX = dragX / scale * frameExpandRate.x;
-      let shiftY = dragY / scale * frameExpandRate.y;
+      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,
@@ -236,12 +236,12 @@ class CroppImage {
     let {
       eventType,
       event
-    } = params;
-    let { x: x1,y: y1 } = $.getCursor( event.touches[ 0 ] );
-    let { x: x2,y: y2 } = $.getCursor( event.touches[ 1 ] );
+    } = 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;
+    let marginX = x2 - x1
+    let marginY = y2 - y1
     if ( eventType == 'start' ) {
 
       this.pinchEffectInfo.origin = {
@@ -251,75 +251,75 @@ class CroppImage {
     } else if ( eventType == 'move' ) {
       let {
         origin
-      } = this.pinchEffectInfo;
+      } = 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 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 );
+      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 );
+    let nextValue = scale
+    nextValue = Math.max( nextValue,this.scale.min )
+    nextValue = Math.min( nextValue,this.scale.max )
 
-    this.scale.current = nextValue;
-    this.drawImage();
+    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();
+    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;
+    } = 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;
+    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;
+      ImageW = image.height
+      ImageH = image.width
     }
 
-    canvas.width = ImageW;
-    canvas.height = ImageH;
+    canvas.width = ImageW
+    canvas.height = ImageH
 
-    if ( grayScale ) ctx.filter = 'grayscale(' + grayScale + '%)';
+    if ( grayScale ) ctx.filter = 'grayscale(' + grayScale + '%)'
 
     if ( rotate ) {
-      ctx.translate( ImageW / 2,ImageH / 2 );
-      ctx.rotate( rotate * Math.PI / 180 );
+      ctx.translate( ImageW / 2,ImageH / 2 )
+      ctx.rotate( rotate * Math.PI / 180 )
       if ( [ 90,270 ].includes( rotate ) ) {
-        ctx.translate( -ImageH / 2,-ImageW / 2 );
+        ctx.translate( -ImageH / 2,-ImageW / 2 )
       } else {
-        ctx.translate( -ImageW / 2,-ImageH / 2 );
+        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;
+    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;
+      grayScale /= 100
 
       let ColorDir = [
         [ 255,255,255 ], // Original
@@ -333,41 +333,41 @@ class CroppImage {
         [ 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;
+      ][ 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;
+          var Index = ( iH * ImageW + iW ) * 4
 
           if ( grayScale ) {
-            let terminal = 0.3 * imgData[ Index ] + 0.59 * imgData[ Index + 1 ] + 0.11 * imgData[ Index + 2 ];
+            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;
+              let current = imgData[ Index + k ]
+              imgData[ Index + k ] = current + ( terminal - current ) * grayScale
             }
           }
 
-          imgData[ Index ] *= rCorrect;
-          imgData[ Index + 1 ] *= gCorrect;
-          imgData[ Index + 2 ] *= bCorrect;
+          imgData[ Index ] *= rCorrect
+          imgData[ Index + 1 ] *= gCorrect
+          imgData[ Index + 2 ] *= bCorrect
         }
       }
     }
 
-    ctx.putImageData( newImage,0,0 );
+    ctx.putImageData( newImage,0,0 )
 
-    let newDataUrl = canvas.toDataURL( 'image/jpeg' );
+    let newDataUrl = canvas.toDataURL( 'image/jpeg' )
 
     {
-      let Picture = await $.ImageLoader( newDataUrl );
+      let Picture = await $.ImageLoader( newDataUrl )
       let {
         width: pictW,
         height: pictH
-      } = Picture;
-      let pictAsp = pictW / pictH;
+      } = Picture
+      let pictAsp = pictW / pictH
 
       this.Picture = {
         ...this.Picture,
@@ -377,11 +377,11 @@ class CroppImage {
           ? this.pst.frame.w / pictW
           : this.pst.frame.h / pictH
       }
-      // this.pst.imageX = pictW / 2;
-      // this.pst.imageY = pictH / 2;
+      // this.pst.imageX = pictW / 2
+      // this.pst.imageY = pictH / 2
     }
 
-    this.drawImage();
+    this.drawImage()
   }
   drawImage( _imageX?: number,_imageY?: number ) {
     let {
@@ -392,40 +392,40 @@ class CroppImage {
       pst: {
         frame
       }
-    } = this;
+    } = this
 
-    let ImageX = _imageX || this.pst.imageX;
-    let ImageY = _imageY || this.pst.imageY;
+    let ImageX = _imageX || this.pst.imageX
+    let ImageY = _imageY || this.pst.imageY
 
     {
-      let scale = this.scale.current / 100;
+      let scale = this.scale.current / 100
 
-      let totalScale = this.Picture.revisedAspect * scale;
+      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 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 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 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;
+        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;
+        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 );
+        imgX = Math.min( Math.max( imgX,minX ),maxX )
+        imgY = Math.min( Math.max( imgY,minY ),maxY )
       }
 
       this.pst.outImage = {
@@ -438,7 +438,7 @@ class CroppImage {
         0,
         this.Canvas.elm.width,
         this.Canvas.elm.height
-      );
+      )
 
       ctx.drawImage(
         this.Picture.elm,
@@ -448,41 +448,41 @@ class CroppImage {
         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();
+        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.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 );
+      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() {
@@ -493,48 +493,48 @@ class CroppImage {
         outImage,
         frame
       }
-    } = this;
+    } = this
 
-    let ratioX = outImage.w / Picture.elm.width;
-    let ratioY = outImage.h / Picture.elm.height;
+    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 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 Top = ( frame.y - outImage.y ) / ratioY
+    let Bottom = ( frame.y - outImage.y + frame.h ) / ratioY
 
-    let Files: any = Array.from( { length: develops.length } );
+    let Files: any = Array.from( { length: develops.length } )
 
-    let MimeType = 'image/jpeg';
+    let MimeType = 'image/jpeg'
 
     for ( let index = 0; index < develops.length; index++ ) {
       let {
         size,maxSize
-      } = develops[ index ];
+      } = develops[ index ]
 
       maxSize = maxSize || {
         S: 1024 * 20,
         R: 1024 * 100,
         L: 1024 * 350
-      }[ size ];
+      }[ size ]
 
       let width = {
         S: 144,
         R: 576,
         L: 1152
-      }[ size ];
+      }[ size ]
 
-      let height = this.use == 'profile' ? width : width / 3;
+      let height = this.use == 'profile' ? width : width / 3
 
-      let Preview = document.createElement( 'canvas' );
-      Preview.width = width;
-      Preview.height = height;
+      let Preview = document.createElement( 'canvas' )
+      Preview.width = width
+      Preview.height = height
 
-      let previewCtx = Preview.getContext( '2d' );
-      if ( !previewCtx ) return;
+      let previewCtx = Preview.getContext( '2d' )
+      if ( !previewCtx ) return
 
-      previewCtx.clearRect( 0,0,width,height );
+      previewCtx.clearRect( 0,0,width,height )
       previewCtx.drawImage(
         this.Picture.elm,
         Left,
@@ -544,25 +544,25 @@ class CroppImage {
         0,0,
         width,
         height
-      );
+      )
 
-      let dataUrl = Preview.toDataURL( MimeType );
-      let blob = await dataUrl.toBlob( MimeType );
-      if ( !blob ) return;
+      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 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 } );
+      let file = new File( [ blob ],this.val_file.name,{ type: MimeType } )
 
-      Files[ index ] = file;
+      Files[ index ] = file
     }
 
-    return Files;
+    return Files
   }
 }
 
@@ -586,13 +586,13 @@ const Comps: {
       options,
       finishedCallback,
       abortCallback,
-    } = params;
+    } = params
     let {
       use,
       develops = []
-    } = options;
+    } = options
 
-    let [ val_componentID ] = React.useState( $.uuidGen( 32 ) );
+    let [ val_componentID ] = React.useState( $.uuidGen( 32 ) )
 
     const DefaultOptions = {
       scale: {
@@ -605,10 +605,10 @@ const Comps: {
       tone: 0
     }
 
-    let [ val_scale,set_scale ] = React.useState( DefaultOptions.scale.default );
+    let [ val_scale,set_scale ] = React.useState( DefaultOptions.scale.default )
     let [ val_rotate,set_rotate ] = React.useState( DefaultOptions.rotate )
-    let [ val_grayScale,set_grayScale ] = React.useState( DefaultOptions.grayScale );
-    let [ val_tone,set_tone ] = React.useState( DefaultOptions.tone );
+    let [ val_grayScale,set_grayScale ] = React.useState( DefaultOptions.grayScale )
+    let [ val_tone,set_tone ] = React.useState( DefaultOptions.tone )
 
     React.useEffect( () => {
       useStore.set( {
@@ -617,14 +617,14 @@ const Comps: {
       } );
 
       ( async () => {
-        amotify.fn.Loader.fn.corner.active();
+        amotify.fn.Loader.fn.corner.active()
 
-        let { target } = await val_file.read();
-        if ( !target ) return;
-        let dataUrl = target!.result as string;
+        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 Canvas = $( '#Canvas-' + val_componentID )[ 0 ] as HTMLCanvasElement
+        if ( !Canvas ) return
 
         let __Cropper = new CroppImage( {
           set_scale,
@@ -640,32 +640,32 @@ const Comps: {
             tone: DefaultOptions.tone,
             rotate: DefaultOptions.rotate
           }
-        } );
+        } )
         useStore.set( {
           key: val_componentID,
           value: {
             Instance: __Cropper
           }
-        } );
+        } )
 
         const UserEffectStart = function ( event: any ) {
-          event.preventDefault();
+          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();
+                  event.preventDefault()
                   __Cropper.pinchEffect( {
                     eventType: 'move',
                     event
-                  } );
+                  } )
                 },
               } )
               .addEvent( {
@@ -676,35 +676,35 @@ const Comps: {
             __Cropper.dragEffect( {
               eventType: 'start',
               ...$.getCursor( event )
-            } );
+            } )
 
-            let { type } = event;
+            let { type } = event
 
             $( document )
               .addEvent( {
                 eventType: type == 'touchstart' ? 'touchmove' : 'mousemove',eventID: 'CropperEffectMove',option: { passive: false },
                 callback: ( event ) => {
-                  DragEffect( 'move',event );
+                  DragEffect( 'move',event )
                 },
               } )
               .addEvent( {
                 eventType: type == 'touchstart' ? 'touchend' : 'mouseup',eventID: 'CropperEffectEnd',option: { passive: false },
                 callback: ( event ) => {
-                  DragEffect( 'end',event );
-                  EventEnd( event );
+                  DragEffect( 'end',event )
+                  EventEnd( event )
                 },
-              } );
+              } )
           }
         }
         const DragEffect = function ( eventType: 'move' | 'end',event: any ) {
-          event.preventDefault();
+          event.preventDefault()
           __Cropper.dragEffect( {
             eventType: eventType,
             ...$.getCursor( event )
-          } );
+          } )
         }
         const EventEnd = function ( event: any ) {
-          event.preventDefault();
+          event.preventDefault()
 
           $( document ).removeEvent( [
             'CropperEffectMove',
@@ -722,15 +722,15 @@ const Comps: {
             eventID: 'CropperMouseWheel',
             eventType: 'wheel',
             callback: ( event ) => {
-              event.preventDefault();
+              event.preventDefault()
 
-              let bitScale = Number( event.wheelDelta * 0.04 );
-              let nextScale = __Cropper.scale.current + bitScale;
+              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 );
+              nextScale = Math.max( nextScale,__Cropper.scale.min )
+              nextScale = Math.min( nextScale,__Cropper.scale.max )
 
-              set_scale( nextScale );
+              set_scale( nextScale )
             },
             option: { passive: false }
           } )
@@ -741,29 +741,29 @@ const Comps: {
           .addEvent( {
             eventType: 'mousedown',eventID: 'CropperMouseDown',
             callback: UserEffectStart,option: { passive: false }
-          } );
+          } )
 
         setTimeout( () => {
-          amotify.fn.Loader.fn.corner.stop();
-        },1000 );
-      } )();
-    },[ val_file.id ] );
+          amotify.fn.Loader.fn.corner.stop()
+        },1000 )
+      } )()
+    },[ val_file.id ] )
     React.useEffect( () => {
-      let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
+      let Instance: CroppImage = useStore.get( val_componentID )?.Instance
       if ( Instance ) {
-        Instance.updateScale( val_scale );
+        Instance.updateScale( val_scale )
       }
-    },[ val_scale ] );
+    },[ val_scale ] )
     React.useEffect( () => {
-      let Instance: CroppImage = useStore.get( val_componentID )?.Instance;
+      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 ] );
+    },[ val_grayScale,val_tone,val_rotate ] )
 
     return <Sheet.Comps.Body>
       <Flex
@@ -852,7 +852,7 @@ const Comps: {
             <Buttons.Button.Border.R
               flexGrid={ 1 }
               onClick={ () => {
-                abortCallback();
+                abortCallback()
               } }
             >
               キャンセル
@@ -860,15 +860,15 @@ const Comps: {
             <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();
+                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 );
+                  amotify.fn.Loader.fn.mini.stop( 'CropperExportation' )
+                  finishedCallback( Files )
+                },3000 )
               } }
             >
               <Row.Center
@@ -883,10 +883,10 @@ const Comps: {
           </Flex>
         </Column>
       </Flex>
-    </Sheet.Comps.Body>;
+    </Sheet.Comps.Body>
   },
   SettingRegion: ( params ) => {
-    let ToneList: amotify.fn.Input.List.OptionParams[] = [];
+    let ToneList: amotify.fn.Input.List.OptionParams[] = []
     for ( let index = 1; index <= 10; index++ ) {
       ToneList.push( {
         value: index,
@@ -904,7 +904,7 @@ const Comps: {
             { [ '','暖色','寒色','セピア','シアン','マゼンタ','イエロー','オリジナル1','オリジナル2','オリジナル3','オリジナル4' ][ index ] }
           </Box>
         </>
-      } );
+      } )
     }
 
     return <>
@@ -921,16 +921,16 @@ const Comps: {
         >
           <Buttons.Button.Border.R
             onClick={ () => {
-              let next = params.val_rotate - 90;
-              if ( next < 0 ) next += 360;
-              params.set_rotate( next );
+              let next = params.val_rotate - 90
+              if ( next < 0 ) next += 360
+              params.set_rotate( next )
             } }
           >
             <FAI icon={ faRotateLeft } /> 左に回転
           </Buttons.Button.Border.R>
           <Buttons.Button.Border.R
             onClick={ () => {
-              params.set_rotate( ( params.val_rotate + 90 ) % 360 );
+              params.set_rotate( ( params.val_rotate + 90 ) % 360 )
             } }
           >
             右に回転 <FAI icon={ faRotateRight } />
@@ -952,13 +952,13 @@ const Comps: {
             max={ params.DefaultOptions.scale.max - 100 }
             step={ 25 }
             onUpdateValidValue={ ( { eventType,value } ) => {
-              params.set_scale( value + 100 );
+              params.set_scale( value + 100 )
             } }
             legends={ {
               enable: true,
               custom: ( value ) => {
-                let scale = Math.round( 100 + value );
-                return 'x' + scale / 100;
+                let scale = Math.round( 100 + value )
+                return 'x' + scale / 100
               }
             } }
           />
@@ -979,7 +979,7 @@ const Comps: {
             max={ 100 }
             step={ 25 }
             onUpdateValidValue={ ( { value } ) => {
-              params.set_grayScale( value );
+              params.set_grayScale( value )
             } }
             legends={ {
               enable: true,
@@ -1019,12 +1019,12 @@ const Comps: {
               ...ToneList
             ] }
             onUpdateValidValue={ ( { value } ) => {
-              params.set_tone( value[ 0 ] );
+              params.set_tone( value[ 0 ] )
             } }
           />
         </Box>
       </Column>
-    </>;
+    </>
   }
 }
 
@@ -1034,9 +1034,9 @@ export const Cropper: amotify.fn.Cropper.Methods = {
       // accept: 'image/jpeg,image/jpg,image/png,image/gif',
       accept: 'image',
       multiple: false
-    } );
+    } )
 
-    let sheetID = 'CropperImage';
+    let sheetID = 'CropperImage'
     amotify.fn.Sheet.open( {
       sheetID: sheetID,
       type: 'normal.middleCenter',
@@ -1048,16 +1048,16 @@ export const Cropper: amotify.fn.Cropper.Methods = {
         val_file={ Image[ 0 ] as any }
         options={ params }
         finishedCallback={ ( files ) => {
-          amotify.fn.Sheet.close( sheetID );
-          params.onProcessFinished( files );
+          amotify.fn.Sheet.close( sheetID )
+          params.onProcessFinished( files )
         } }
         abortCallback={ () => {
-          amotify.fn.Sheet.close( sheetID );
+          amotify.fn.Sheet.close( sheetID )
         } }
       />,
       close_option: {
         escapeKeyDown: false
       }
-    } );
+    } )
   }
 }