From 876bacdb947191079bdbefc8e232520f7f4e00bc Mon Sep 17 00:00:00 2001
From: infeng <fzhihao@outlook.com>
Date: Wed, 19 Oct 2016 15:02:42 +0800
Subject: [PATCH] add scale

---
 src/Icon.tsx                 |   2 ++
 src/ViewerCavans.tsx         |   4 +++-
 src/ViewerCore.tsx           |  30 ++++++++++++++++++++++++++++++
 src/ViewerToolbar.tsx        |   6 ++++++
 src/style/fonts/icomoon.eot  | Bin 2008 -> 2188 bytes
 src/style/fonts/icomoon.svg  |   2 ++
 src/style/fonts/icomoon.ttf  | Bin 1844 -> 2024 bytes
 src/style/fonts/icomoon.woff | Bin 1920 -> 2100 bytes
 src/style/index.less         |   8 ++++++++
 9 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/Icon.tsx b/src/Icon.tsx
index 25fc7c8..f636e5c 100644
--- a/src/Icon.tsx
+++ b/src/Icon.tsx
@@ -9,6 +9,8 @@ export enum ActionType {
   rotateRight = 6,
   reset = 7,
   close = 8,
+  scaleX = 9,
+  scaleY = 10,
 }
 
 export interface IconProps {
diff --git a/src/ViewerCavans.tsx b/src/ViewerCavans.tsx
index a5a8f52..751865b 100644
--- a/src/ViewerCavans.tsx
+++ b/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 = '';
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index 64f1573..d7ef5fa 100644
--- a/src/ViewerCore.tsx
+++ b/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
diff --git a/src/ViewerToolbar.tsx b/src/ViewerToolbar.tsx
index 51c6b81..3b8b0f5 100644
--- a/src/ViewerToolbar.tsx
+++ b/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>
     );
diff --git a/src/style/fonts/icomoon.eot b/src/style/fonts/icomoon.eot
index 4db0df4866345dc574f3abacbc0441b6ec06d69f..ffcad2a471ff18ab641094c3cc58ec52cc0b2f74 100644
GIT binary patch
delta 557
zcmY+AF=!J}9LB$QFL&2A(DZ2HEfP{<$x@0CV?u554NlI*MIkxTCWj<8(1LZbHx#EV
z^(MDiS|}8!ZX$R}3+W_6h0ad)W}T!xzZb0Fga7^C_kHjGdyhNM^c}N52K?ADtErRL
zX+4~=vOCMot;Ya9uo}&-*E@5=JRojTZ@0bm9{UvafPJjpdC@vt817OZ0P@&h^;Xi)
zzkLME4)eP{4g0hFLcK?Q%kOS%&X3NTL+V;*t?5|{Cixa6@?CGU2WK9SXcTA^o_XEX
zHxI{uQ!8Hbs<*bj0m%fm1{5IW*KkGL7maXF+^hKXZt!`MJb}W6f3Y2><4k-fuEmYy
zGD-9#{WkrHzkWTOGO||g9fw5t$###Hj5)bw=z}T90ON3h*|J?KJH@J7oOMb?r<|Lq
zP}+_Rg27-^2~-qZ1wo{uC^EoLg5XjqWki7h45%cM(LY|UR3*c;E7Sk+1PAr-19eSP
z*B3}d;1z*l1SC_h`f2N=o>}~bbZVr}=7w+eM)$C9R>fp^Y~HTvkfn5l31pGSBA#Fu
g=lCg}ikITGcrU&))7VKY^Syc*{2|jvWouvj0R?%GqyPW_

delta 379
zcmeAXyur_UgPnoFWFo6M%l;h}5fdHC>opk|81?{hLUL|m!9JCJ(-{~TWq|ye^u*!<
zAT0po&j8XK={c2Y=k7*^0r?9U7?@QuQWI0SOH11s7+8(~<;^mH0_=yF&jR^>fP9sV
z+>#142F45q237?i-ykPHIgurTIR(fM0P>}B6DtZB`1BZn2D0V=1r+iUb5mz}asCGK
zdw`a-733F}FfapU7}!NX@(j$($0w&S+A~^AUczYYnE(_M0XmPFfrWvQLE&Y_%a&K%
zulQe?yt4TJ_y2#OEKtwObf72~k|^W<$6|BEnneGK{t~?=dKsvjadIJt=w??Y9cE=l
zuqK8Giyiyp`E9;3aI=5~u4vC_1u;PMWD_=XMxMzzYzAszIWC|Z<QQxiVi*=N++g^^
Yn8jGfI0+~NGKz;Ggn@DMIktU_0PVqHR{#J2

diff --git a/src/style/fonts/icomoon.svg b/src/style/fonts/icomoon.svg
index 2457df8..766aace 100644
--- a/src/style/fonts/icomoon.svg
+++ b/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>
\ No newline at end of file
diff --git a/src/style/fonts/icomoon.ttf b/src/style/fonts/icomoon.ttf
index 93c16b215af71aab7ca6e24d92e24dedd70dfbbd..0b788d4dfe3dc0ce2a1d556f6f2f4b769cc756ab 100644
GIT binary patch
delta 543
zcmY+B!Al!K6vp4|WL<3_=_;FGDY6nJmlDNPBU*3@J++4xT6*!2ELO9JL<0)y$)SkX
zQuiPpgjf^=>B*jo;80pfPo>oM4`?sCcQ2N>{bs3!K6v}~_szWTJ$B!v&eChdh$u;t
zI1N93Iy92*wx*#RBP%m?uW_0U`iR(V@Osr-Y@pr*H&HvQwbi-9iPjtN0TKV`&w4MC
z%im9k%o@(ed<fPD{sp`T9`Nf+D~0&3*#eK(7G~~y9TO%7bbzU^?yWS)rsrT6?9O}j
z+3km2zrg}SHW~|yOIQ?PX#<xy|N2@@vC1Z!eB?vPU^xymM((+Pz8)sSba*!$4=YhS
zigX|JD)bwF^>VDU=vQVZ^U`TMm(CC8oAWl1toLY(75JK=dlJMYby1dRuxRCrcCM7o
z4chsfU3B_KftJmsY&PSJNGN$Fr4mXhgYbw*wuKOelK9jHiAZtv&(F!1;E}aPd;ard
zXw=OQ#I>8a9>4_*uVBbxL;d>@<<E1U%ISL-luX2YdZ)FkUvv%55+#-jTywZnA0kEY
c#JrVZ@7YhVc1Y1Ptfs>V`mLU$SLQzZ19GI1?*IS*

delta 351
zcmaFCzlE=!fsuiMft#U$ftkU;KUm+0Ux-~3D6$8L6OwZi3-+n(o6f+%C<Elzq$d^^
z0BHdre+H1|NYANEJ9jrS49H)=z`(4Mk(!voU0T}Cz`$|@C~uYl6ktEZd=|+61LUh@
z<d#&ZF)(H@Ft92B`35=p$&QIE5zHw-fdHU@RBmEL0RtZc&_LE4AYUObF*kLl7w2yv
zzXxbZTS0zt3DBWHz%BxkXJBSNKJkD(qs1gfYr_PfhzQVe%nU3*Pbs|2c-iub`xXBy
zlUEl1|Nj3Elm+T|nGO`?f{0EoU=(2iDrcO0kzI82LPi~CWl&%ML4?JQ{qg)ZUm3Vr
w!2B!PGg?6m5IuPUt2raj<P)q0lh~w$fPx@BJPaXVnt_1{XqfP3XSSt`0Qgf<7ytkO

diff --git a/src/style/fonts/icomoon.woff b/src/style/fonts/icomoon.woff
index d40e1c65a56db5ddfe7bd239a03dadd0341d8d70..837e46c47046366e50e39cd545d4710f6a37e50e 100644
GIT binary patch
delta 594
zcmY*VJxCl;5T4n0yL;xuyX9{0AjP4aa*e2PXHHDOSBOQB*oaMvb1`~b+(kh_Q~3yz
zDoxlbkbnsUgpf*$kS2>5FjWwLnlz$~w^*b|8pFAnS$`k{-@f;KGxN=xRmrVXW_e<4
z3=k;dWk~R8o_Twi@s2U}syDs*c&6bj0H8~mHO4{C%h#Mm*3OB?uaT<NpUsi>8$j$Z
zJ`V4`cW0d^0QzUDxyMK>AAWU7B<&aRZicxnez=XL6#yece2CEpxKW><p}I%LI0<=%
zF|6ks&I%1S>cl%ESTOa}Y0Q%Ll7_!vynfjBcVT{UiQdMBS9OAJLhO0%ID*sOINqP&
zg|d(W0S4{g*>sz0K_W;7<zOh74qIVJdFpP~NWXKfS0f$6)9l;qbGv0<*hluh{fRt~
z|JmjV_KQ`G`(hvzv_TG_r(_mOR-uwB^jO7$RkFJViJF#BYJELI2+~)VO8L_FeGTXn
zf@(=AHD4is1~T-8f9q!#E98+g2h;!gAvJRIsJwBLHv@zu!%H&6$dEias^90nRg(|?
zKq40LgWlbDeBsk8>lN(q>iR&OlLYC#(eGyQ3!V^XhYpyer*UYsdwTPy{sI31j>DPB

delta 414
zcmdlY(7-QJ?(gQtz{mgu><tXuVA^D|B8Tu~0}hsn+9LIu$+?LI3=E7JK&cuK-lwu}
zdU|3pNbCua&jG~(={c2YK(RLr49qGZeC}>!SVn4M3IhYH08ot?2y>T~wr2nZfnpv&
zK2RNl3i~1Evl+Q16+p2ZAm0Fl)qwWp<R=5w`LWIc3P^!4O9XRDZej({V%8l%z5*EY
zF@)tM=B5J0ZU8NB1L2uooWBe5i%Wn$N`R|l2C|r$k5A@dv}d%K?89j736c|G5MW?t
zU;+AH;bq3lmRH=b_+Od4viSe^|9_w?(2kesKv6CvQO5s|#pa4NiT)M+C3;QtGEg@o
zD6}@eX4GR=1_vVpLxjbS{qg)ZUm3Vrz@}W$p3w?ofauA0Sj`!ECX28cO!i@u5(0{X
TH1RNmfN2H>Ca`J!Y)csdmY!cd

diff --git a/src/style/index.less b/src/style/index.less
index ce8bce6..80b17aa 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -220,4 +220,12 @@
   &-reset:before {
     content: '\e984';
   }
+
+  &-scaleX:before {
+    content: '\ea60';
+  } 
+
+  &-scaleY:before {
+    content: '\ea5f';
+  }     
 }
\ No newline at end of file