amotify 0.0.62 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",

package/src/functions/Cropper/parts.tsx

@@ -39,7 +39,7 @@ class CroppImage {
   val_file: File
   develops: amotify.fn.Cropper.DevelopParams[]
 
-  use: 'profile' | 'header'
+  use: amotify.fn.Cropper.UseTypes
   componentID: string
   Canvas: {
     elm: HTMLCanvasElement
@@ -97,7 +97,7 @@ class CroppImage {
       tone: number
       rotate: number
     }
-    use: 'profile' | 'header'
+    use: amotify.fn.Cropper.UseTypes
     componentID: string
     canvas: HTMLCanvasElement
   } ) {
@@ -134,13 +134,17 @@ class CroppImage {
     }
 
     let frameW = 0,frameH = 0
-    if ( this.use == 'profile' ) {
+    if ( this.use == 'square' ) {
       frameW = Canvas.width / 3 * 2
       frameH = Canvas.height / 3 * 2
-    } else if ( this.use == 'header' ) {
+    } 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
@@ -452,14 +456,16 @@ class CroppImage {
     }
 
     {
-      if ( use == 'profile' ) {
+      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 == 'header' ) {
+      } else if ( use == 'wallpaper.horizontal' ) {
+        ctx.fillStyle = 'rgba( 20,24,20,.3 )'
+      } else if ( use == 'wallpaper.vertical' ) {
         ctx.fillStyle = 'rgba( 20,24,20,.3 )'
       }
 
@@ -525,7 +531,12 @@ class CroppImage {
         L: 1152
       }[ size ]
 
-      let height = this.use == 'profile' ? width : width / 3
+      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
@@ -797,7 +808,11 @@ const Comps: {
           >
             <canvas
               width={ '2400' }
-              height={ use == 'profile' ? '2400' : '1800' }
+              height={
+                use == 'wallpaper.horizontal' ? '1800'
+                  : use == 'wallpaper.vertical' ? '3200'
+                    : '2400'
+              }
               className={ style.Canvas }
               id={ 'Canvas-' + val_componentID }
             />
@@ -919,7 +934,7 @@ const Comps: {
           flexChilds='even'
           paddingLeft={ 2 }
         >
-          <Buttons.Button.Border.R
+          <Buttons.Button.Border.S
             onClick={ () => {
               let next = params.val_rotate - 90
               if ( next < 0 ) next += 360
@@ -927,14 +942,14 @@ const Comps: {
             } }
           >
             <FAI icon={ faRotateLeft } /> 左に回転
-          </Buttons.Button.Border.R>
-          <Buttons.Button.Border.R
+          </Buttons.Button.Border.S>
+          <Buttons.Button.Border.S
             onClick={ () => {
               params.set_rotate( ( params.val_rotate + 90 ) % 360 )
             } }
           >
             右に回転 <FAI icon={ faRotateRight } />
-          </Buttons.Button.Border.R>
+          </Buttons.Button.Border.S>
         </Row.Separate>
       </Column>
       <Column gap={ '1/3' } >
@@ -952,7 +967,10 @@ const Comps: {
             max={ params.DefaultOptions.scale.max - 100 }
             step={ 25 }
             onUpdateValidValue={ ( { eventType,value } ) => {
-              params.set_scale( value + 100 )
+              $.interval.clear( 'Cropper.UpdateScale' )
+              $.interval.standBy( 'Cropper.UpdateScale',400,() => {
+                params.set_scale( value + 100 )
+              } )
             } }
             legends={ {
               enable: true,
@@ -977,9 +995,12 @@ const Comps: {
             value={ params.val_grayScale }
             min={ 0 }
             max={ 100 }
-            step={ 25 }
+            step={ 10 }
             onUpdateValidValue={ ( { value } ) => {
-              params.set_grayScale( value )
+              $.interval.clear( 'Cropper.GrayScale' )
+              $.interval.standBy( 'Cropper.GrayScale',400,() => {
+                params.set_grayScale( value )
+              } )
             } }
             legends={ {
               enable: true,
@@ -1042,7 +1063,7 @@ export const Cropper: amotify.fn.Cropper.Methods = {
       type: 'normal.middleCenter',
       size: '3L',
       freeCSS: {
-        width: params.use == 'header' ? 12 * 100 : 12 * 80
+        width: params.use == 'wallpaper.horizontal' ? 12 * 100 : 12 * 80
       },
       content: <Comps.Core
         val_file={ Image[ 0 ] as any }

package/src/functions/Cropper/style.module.scss

@@ -15,6 +15,7 @@
   cursor: move;
   overflow: hidden;
   // user-select: none !important;
+  vertical-align: middle;
 }
 .Preview {
   display: none;

package/src/functions/Input/Slider/_.tsx

@@ -6,6 +6,9 @@ import {
   Box,
   Flex,
 } from '@atoms'
+import {
+  Column
+} from '@mols'
 import {
   Input,
   Buttons
@@ -146,7 +149,8 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
       data-input-type={ 'slider' }
       { ...others }
     />
-    <Box
+    <Column
+      gap={ '1/2' }
       flexSizing={ 'auto' }
       className={ [
         style.Wrap,
@@ -169,7 +173,7 @@ export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( para
         step={ step }
         customLegends={ customLegends }
       /> : null }
-    </Box>
+    </Column>
   </BoxWrapper>
 }
 
@@ -206,8 +210,8 @@ const Comps = {
         display={ index == minStep || index == maxStep ? 'flex' : 'none' }
         position='absolute'
         top={ 0 }
-        height={ 1 }
-        unitWidth={ 2 }
+        unitHeight={ 1 }
+        unitWidth={ 1.5 }
         transition='middle'
         fontColor={ '1.clear' }
         freeCSS={ {
@@ -256,7 +260,7 @@ const Comps = {
       className={ style.Labels }
       verticalAlign='center'
       horizontalAlign='between'
-      unitHeight={ 2 }
+      backgroundColor='posi'
       fontSize={ '0.xs' }
       position='relative'
       id={ 'Labels-' + componentID }
@@ -265,8 +269,10 @@ const Comps = {
         position='absolute'
         top={ 0 }
         left={ 0 }
-        right={ 2 }
         bottom={ 0 }
+        freeCSS={ {
+          right: 12 * 1.5
+        } }
         children={ Labels }
       />
     </Flex>
@@ -294,7 +300,7 @@ const Comps = {
       className={ style.Rail }
       position='relative'
       paddingLeft={ '1/2' }
-      unitHeight={ 2 }
+      unitHeight={ 1.5 }
       verticalAlign='center'
       freeCSS={ {
         minWidth: '10rem',
@@ -351,8 +357,10 @@ const Comps = {
         position='absolute'
         top={ 0 }
         left={ 0 }
-        right={ 2 }
         bottom={ 0 }
+        freeCSS={ {
+          right: 12 * 1.5
+        } }
       >
         <Buttons.Button.Plain
           className={ style.Ball }
@@ -360,7 +368,7 @@ const Comps = {
           backgroundColor={ props.color }
           top={ 0 }
           left={ 0 }
-          ssSphere={ 2 }
+          ssSphere={ 1.5 }
           freeCSS={ {
             zIndex: 2,
             left: DotData.positionLeft

package/src/functions/Input/Slider/style.module.scss

@@ -4,8 +4,8 @@
   &:before {
     content: "";
     position: absolute;
-    top: calc(-1 * $unit1 / 6);
-    height: calc($unit1 / 2);
+    top: calc(-1 * $unit1-5 / 2);
+    height: calc($unit1-5 / 2);
     left: 50%;
     width: 1px;
     transform: translateX(-50%);