add scale

src/Icon.tsx

@@ -9,6 +9,8 @@ export enum ActionType {
   rotateRight = 6,
   reset = 7,
   close = 8,
+  scaleX = 9,
+  scaleY = 10,
 }
 
 export interface IconProps {

src/ViewerCavans.tsx

@@ -13,6 +13,8 @@ export interface ViewerCavansProps {
   onResize: () => void;
   onZoom: (targetX: number, targetY: number, direct: number) => void;
   zIndex: number;
+  scaleX: 1 | -1;
+  scaleY: 1 | -1;
 }
 
 export interface ViewerCavansState {
@@ -115,7 +117,7 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
       width: `${this.props.width}px`,
       marginTop: `${this.props.top}px`,
       marginLeft: this.props.left ? `${this.props.left}px` : 'auto',
-      transform: `rotate(${this.props.rotate}deg) scaleX(1) scaleY(1)`,
+      transform: `rotate(${this.props.rotate}deg) scaleX(${this.props.scaleX}) scaleY(${this.props.scaleY})`,
     };
 
     let imgClass = '';

src/ViewerCore.tsx

@@ -17,6 +17,8 @@ export interface ViewerCoreState {
   rotate?: number;
   imageWidth?: number;
   imageHeight?: number;
+  scaleX?: 1 | -1;
+  scaleY?: 1 | -1;
 }
 
 export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreState> {
@@ -44,6 +46,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       rotate: 0,
       imageWidth: 0,
       imageHeight: 0,
+      scaleX: 1,
+      scaleY: 1,
     };
 
     this.handleChangeImg = this.handleChangeImg.bind(this);
@@ -53,6 +57,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     this.handleZoom = this.handleZoom.bind(this);
     this.handleRotate = this.handleRotate.bind(this);
     this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleScaleX = this.handleScaleX.bind(this);
+    this.handleScaleY = this.handleScaleY.bind(this);
   }
 
   handleClose(e) {
@@ -97,6 +103,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         rotate: 0,
         imageWidth: imgWidth,
         imageHeight: imgHeight,
+        scaleX: 1,
+        scaleY: 1,
       });
     };
     img.onerror = () => {
@@ -109,6 +117,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         rotate: 0,
         imageWidth: 0,
         imageHeight: 0,
+        scaleX: 1,
+        scaleY: 1,
       });
     };
   }
@@ -153,11 +163,29 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       case ActionType.reset:
         this.loadImg(this.state.activeIndex);
         break;
+      case ActionType.scaleX:
+        this.handleScaleX(this.state.scaleX === 1 ? -1 : 1);
+        break;
+      case ActionType.scaleY:
+        this.handleScaleY(this.state.scaleY === 1 ? -1 : 1);
+        break;
       default:
         break;
     }
   }
 
+  handleScaleX(newScale: 1 | -1) {
+    this.setState({
+      scaleX: newScale,
+    });
+  }
+
+  handleScaleY(newScale: 1 | -1) {
+    this.setState({
+      scaleY: newScale,
+    });
+  }
+
   handleZoom(targetX, targetY, direct) {
     let diffX = targetX - this.state.left;
     let diffY = targetY - this.state.height;
@@ -281,6 +309,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         onResize={this.handleResize}
         onZoom={this.handleZoom}
         zIndex={zIndex + 5}
+        scaleX={this.state.scaleX}
+        scaleY={this.state.scaleY}
         />
         <div className={`${this.prefixCls}-footer`} style={{zIndex: zIndex + 5}}>
           <ViewerToolbar

src/ViewerToolbar.tsx

@@ -47,6 +47,12 @@ export default class ViewerToolbar extends React.Component<ViewerToolbarProps, a
           <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.rotateRight);}}>
             <Icon type={ActionType.rotateRight}/>
           </li>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.scaleX);}}>
+            <Icon type={ActionType.scaleX}/>
+          </li>
+          <li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.scaleY);}}>
+            <Icon type={ActionType.scaleY}/>
+          </li>
         </ul>
       </div>
     );

src/style/fonts/icomoon.svg

@@ -15,4 +15,6 @@
 <glyph unicode="&#xea0f;" glyph-name="close" d="M1014.662 137.34c-0.004 0.004-0.008 0.008-0.012 0.010l-310.644 310.65 310.644 310.65c0.004 0.004 0.008 0.006 0.012 0.010 3.344 3.346 5.762 7.254 7.312 11.416 4.246 11.376 1.824 24.682-7.324 33.83l-146.746 146.746c-9.148 9.146-22.45 11.566-33.828 7.32-4.16-1.55-8.070-3.968-11.418-7.31 0-0.004-0.004-0.006-0.008-0.010l-310.648-310.652-310.648 310.65c-0.004 0.004-0.006 0.006-0.010 0.010-3.346 3.342-7.254 5.76-11.414 7.31-11.38 4.248-24.682 1.826-33.83-7.32l-146.748-146.748c-9.148-9.148-11.568-22.452-7.322-33.828 1.552-4.16 3.97-8.072 7.312-11.416 0.004-0.002 0.006-0.006 0.010-0.010l310.65-310.648-310.65-310.652c-0.002-0.004-0.006-0.006-0.008-0.010-3.342-3.346-5.76-7.254-7.314-11.414-4.248-11.376-1.826-24.682 7.322-33.83l146.748-146.746c9.15-9.148 22.452-11.568 33.83-7.322 4.16 1.552 8.070 3.97 11.416 7.312 0.002 0.004 0.006 0.006 0.010 0.010l310.648 310.65 310.648-310.65c0.004-0.002 0.008-0.006 0.012-0.008 3.348-3.344 7.254-5.762 11.414-7.314 11.378-4.246 24.684-1.826 33.828 7.322l146.746 146.748c9.148 9.148 11.57 22.454 7.324 33.83-1.552 4.16-3.97 8.068-7.314 11.414z" />
 <glyph unicode="&#xea34;" glyph-name="next" d="M992 448l-480 480v-288h-512v-384h512v-288z" />
 <glyph unicode="&#xea38;" glyph-name="prev" d="M32 448l480-480v288h512v384h-512v288z" />
+<glyph unicode="&#xea5f;" glyph-name="scaleY" d="M896 192h128l-160-192-160 192h128v512h-128l160 192 160-192h-128zM640 896v-256l-64 128h-192v-704h128v-64h-384v64h128v704h-192l-64-128v256z" />
+<glyph unicode="&#xea60;" glyph-name="scaleX" d="M256 64v-128l-192 160 192 160v-128h512v128l192-160-192-160v128zM832 896v-256l-64 128h-192v-448h128v-64h-384v64h128v448h-192l-64-128v256z" />
 </font></defs></svg>

src/style/index.less

@@ -220,4 +220,12 @@
   &-reset:before {
     content: '\e984';
   }
+
+  &-scaleX:before {
+    content: '\ea60';
+  } 
+
+  &-scaleY:before {
+    content: '\ea5f';
+  }     
 }