zoom

.jshintrc

@@ -20,6 +20,8 @@
         "KITYMINDER_CONFIG",
         "keymap",
         "Utils",
-        "utils"
+        "utils",
+        "$",
+        "KM"
     ]
 }
\ No newline at end of file

configure.js

@@ -63,7 +63,7 @@
         'KITYMINDER_HOME_URL': getKMBasePath(),
         //定义工具栏
         toolbars: [
-            'hand | undo redo | bold italic | fontfamily fontsize forecolor | saveto | markers'
+            'hand zoom-in zoom-out | undo redo | bold italic | fontfamily fontsize forecolor | saveto | markers'
         ]
 
         //设置主题

src/adapter/hand.js

-KM.registerUI( 'hand',
+function zoom( paper, rate ) {
+    var viewbox = paper.getViewBox();
+    var zoomValue = paper._zoom || 1;
+    var w = viewbox.width,
+        h = viewbox.height,
+        x = viewbox.x,
+        y = viewbox.y;
+    var ww = w * rate,
+        hh = h * rate,
+        xx = x + ( w - ww ) / 2,
+        yy = y + ( h - hh ) / 2;
+    var animator = new kity.Animator( {
+        beginValue: viewbox,
+        finishValue: {
+            width: ww,
+            height: hh,
+            x: xx,
+            y: yy
+        },
+        setter: function ( target, value ) {
+            target.setViewBox( value.x, value.y, value.width, value.height );
+        }
+    } );
+
+    animator.start( paper, 100, 'ease' );
+    paper._zoom = zoomValue *= rate;
+    return zoomValue;
+}
+
+KM.registerUI( 'hand zoom-in zoom-out',
     function ( name ) {
         var me = this;
         var $btn = $.kmuibutton( {
             icon: name,
-            click: function ( e ) {
+            click: {
+                'hand': function ( e ) {
                     var drag = me._onDragMode = !me._onDragMode;
                     me._paper.setStyle( 'cursor', drag ? 'pointer' : 'default' );
                     me._paper.setStyle( 'cursor', drag ? '-webkit-grab' : 'default' );
@@ -14,14 +44,64 @@ KM.registerUI( 'hand',
                         me._paper.undrag();
                     }
                 },
+                'zoom-in': function ( e ) {
+                    var value = zoom( me.getPaper(), 0.707 );
+                    me.fire( 'zoom', {
+                        zoom: value
+                    } );
+                },
+                'zoom-out': function ( e ) {
+                    var value = zoom( me.getPaper(), 1 / 0.707 );
+                    me.fire( 'zoom', {
+                        zoom: value
+                    } );
+                }
+            }[ name ],
             title: this.getLang( 'tooltips.' )[ name ] || ''
         } );
+        switch ( name ) {
+        case 'hand':
             me.on( 'beforemousemove', function ( e ) {
                 if ( this._onDragMode ) {
                     e.stopPropagation();
                 }
             } );
             kity.extendClass( kity.Paper, kity.Draggable );
+            break;
+        case 'zoom-in':
+            me.on( 'zoom', function ( e ) {
+                $btn.kmui().disabled( e.zoom <= 0.5 );
+            } );
+            break;
+        case 'zoom-out':
+            me.on( 'zoom', function ( e ) {
+                $btn.kmui().disabled( e.zoom >= 2 );
+            } );
+            me.on( 'mousewheel', function ( e ) {
+                var delta = e.originEvent.wheelDelta;
+                if ( Math.abs( delta ) > 100 ) {
+                    clearTimeout( me._wheelZoomTimeout );
+                } else {
+                    return;
+                }
+                me._wheelZoomTimeout = setTimeout( function () {
+                    var value;
+                    var lastValue = me.getPaper()._zoom || 1;
+                    if ( delta < 0 && lastValue > 0.5 ) {
+                        value = zoom( me.getPaper(), 0.707 );
+                        me.fire( 'zoom', {
+                            zoom: value
+                        } );
+                    } else if ( delta > 0 && lastValue < 2 ) {
+                        value = zoom( me.getPaper(), 1 / 0.707 );
+                        me.fire( 'zoom', {
+                            zoom: value
+                        } );
+                    }
+                }, 100 );
+                e.originEvent.preventDefault();
+            } );
+        }
         return $btn;
     }
 );
\ No newline at end of file

src/module/dragtree.js

@@ -206,8 +206,8 @@ var DragBox = kity.createClass( "DragBox", {
 		}
 		if ( target ) {
 			this._addDropStyle( target );
-			this._lastSucceedTarget = target;
 		}
+		this._lastSucceedTarget = target;
 	},
 
 	_removeDropStyle: function ( node ) {
@@ -215,7 +215,7 @@ var DragBox = kity.createClass( "DragBox", {
 	},
 
 	_addDropStyle: function ( node ) {
-		node._layout.bgRect.stroke( 'rgb(254, 219, 0)', 2 );
+		node._layout.bgRect.stroke( 'rgb(254, 219, 0)', 3 );
 	},
 
 	dragStart: function ( position ) {

src/module/select.js

@@ -80,7 +80,7 @@ KityMinder.registerModule( "Select", function () {
                 }
                 if ( marqueeMode ) {
                     marqueeShape.fadeOut( 200, 'ease', 0, function () {
-                        marqueeShape.remove();
+                        if(marqueeShape.remove) marqueeShape.remove();
                     } );
                     marqueeMode = false;
                 }

src/module/zoom.js

 KityMinder.registerModule( 'Zoom', function () {
-	/*
+	
 	return {
 		events: {
 			'mousewheel': function ( e ) {
-				if ( e.originEvent.wheelDelta > 0 ) {
-					if ( this._zoom < 0.2 ) return;
-					this._zoom *= 0.95;
-					this.getRenderContainer().scale( 0.95 );
-				} else {
-					if ( this._zoom > 5 ) return;
-					this._zoom /= 0.95;
-					this.getRenderContainer().scale( 1 / 0.95 );
-				}
+				
 				e.originEvent.preventDefault();
 			},
 			'ready': function () {
 				this._zoom = 1;
 			}
 		}
-	};*/
-	return {};
+	};
 } );
\ No newline at end of file

themes/default/_css/buttonicon.css

@@ -23,3 +23,9 @@
 .kmui-btn-toolbar .kmui-btn .kmui-icon-clock {
     background: url(../images/clock.png) no-repeat 2px 2px;
 }
+.kmui-btn-toolbar .kmui-btn .kmui-icon-zoom-in {
+    background: url(../images/zoom_in.png) no-repeat 2px 2px;
+}
+.kmui-btn-toolbar .kmui-btn .kmui-icon-zoom-out {
+    background: url(../images/zoom_out.png) no-repeat 2px 2px;
+}
\ No newline at end of file