amotify 0.0.65 → 0.0.66

package/src/functions/Cropper/parts.tsx

@@ -1,1084 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-
-import {
-  Buttons,
-  Input,
-  Sheet,
-  Loader
-} 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 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: amotify.fn.Cropper.UseTypes
-  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: amotify.fn.Cropper.UseTypes
-    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 == '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: 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 == '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 )
-    }
-  }
-  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 = 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 = 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: React.FC<CoreProps>
-  SettingRegion: React.FC<{
-    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 ] = React.useState( $.uuidGen( 32 ) )
-
-    const DefaultOptions = {
-      scale: {
-        default: 125,
-        min: 100,
-        max: 300
-      },
-      rotate: 0,
-      grayScale: 0,
-      tone: 0
-    }
-
-    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 )
-
-    React.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 ] )
-    React.useEffect( () => {
-      let Instance: CroppImage = useStore.get( val_componentID )?.Instance
-      if ( Instance ) {
-        Instance.updateScale( val_scale )
-      }
-    },[ val_scale ] )
-    React.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.remark' }
-        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 == 'wallpaper.horizontal' ? '1800'
-                  : use == 'wallpaper.vertical' ? '3200'
-                    : '2400'
-              }
-              className={ style.Canvas }
-              id={ 'Canvas-' + val_componentID }
-            />
-          </Box>
-        </Box>
-        <Column
-          gap={ 0 }
-          flexGrid={ 2 }
-          boxShadow={ '3.remark' }
-          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'
-              isSemiBoldFont
-            >
-              フィルター
-            </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>
-          <FAI.Rotate
-            fontSize='3.paragraph'
-            fontColor='4.thin'
-          /> Rotate
-        </Box>
-        <Row.Separate
-          flexChilds='even'
-          paddingLeft={ 2 }
-        >
-          <Buttons.Button.Border.S
-            onClick={ () => {
-              let next = params.val_rotate - 90
-              if ( next < 0 ) next += 360
-              params.set_rotate( next )
-            } }
-          >
-            <FAI icon={ faRotateLeft } /> 左に回転
-          </Buttons.Button.Border.S>
-          <Buttons.Button.Border.S
-            onClick={ () => {
-              params.set_rotate( ( params.val_rotate + 90 ) % 360 )
-            } }
-          >
-            右に回転 <FAI icon={ faRotateRight } />
-          </Buttons.Button.Border.S>
-        </Row.Separate>
-      </Column>
-      <Column gap={ '1/3' } >
-        <Box>
-          <FAI.Search
-            fontSize='3.paragraph'
-            fontColor='4.thin'
-          /> 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 } ) => {
-              $.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
-              }
-            } }
-          />
-        </Box>
-      </Column>
-      <Column gap={ '1/3' } >
-        <Box>
-          <FAI
-            icon={ faPalette }
-            fontSize='3.paragraph'
-            fontColor='4.thin'
-          /> Gray Scale
-        </Box>
-        <Box paddingLeft={ 2 }>
-          <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 + '%' )
-            } }
-          />
-        </Box>
-      </Column>
-      <Column gap={ '1/3' }>
-        <Box>
-          <FAI
-            icon={ faBarsStaggered }
-            fontSize='3.paragraph'
-            fontColor='4.thin'
-          /> 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 == 'wallpaper.horizontal' ? 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 )
-        } }
-      />,
-      close_option: {
-        escapeKeyDown: false
-      }
-    } )
-  }
-}