Merge pull request #170 in FUI/fineui from ~GUY/fineui:master to master

* commit 'f382166ff3da5f47240df696fbed106f3e55c2eb':
  update
  update
  视觉修改
  canvas bug
  update
  update
  update
  BI-11253 去jquery ui
  update
  update
  update
  update

bi/base.css

@@ -682,7 +682,8 @@ li.CodeMirror-hint-active {
 .bi-theme-dark .bi-segment > .first-element {
   border-left: 1px solid #242640;
 }
-.bi-button {
+body .bi-button,
+#body .bi-button {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -693,131 +694,196 @@ li.CodeMirror-hint-active {
   cursor: pointer;
   font-size: 14px;
 }
-.bi-button.block {
+body .bi-button.block,
+#body .bi-button.block {
   font-size: inherit;
   border-width: 0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.bi-button.clear {
+body .bi-button.clear,
+#body .bi-button.clear {
   font-size: inherit;
   border-width: 0;
   background-color: transparent;
 }
-.bi-button.clear:hover,
+body .bi-button.clear:hover,
-.bi-button.clear:active {
+#body .bi-button.clear:hover,
+body .bi-button.clear:active,
+#body .bi-button.clear:active {
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
-.bi-button.button-common,
+body .bi-button.button-common,
-.bi-button.button-common .b-font:before {
+#body .bi-button.button-common,
+body .bi-button.button-common .b-font:before,
+#body .bi-button.button-common .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-common.clear,
+body .bi-button.button-common.clear,
-.bi-button.button-common.clear .b-font:before {
+#body .bi-button.button-common.clear,
+body .bi-button.button-common.clear .b-font:before,
+#body .bi-button.button-common.clear .b-font:before {
   color: #3f8ce8;
 }
-.bi-button.button-ignore {
+body .bi-button.button-ignore,
+#body .bi-button.button-ignore {
   background-color: #ffffff;
   border-color: #d4dadd;
 }
-.bi-button.button-ignore,
+body .bi-button.button-ignore,
-.bi-button.button-ignore .b-font:before {
+#body .bi-button.button-ignore,
+body .bi-button.button-ignore .b-font:before,
+#body .bi-button.button-ignore .b-font:before {
   color: #1a1a1a;
 }
-.bi-button.button-ignore.clear {
+body .bi-button.button-ignore.clear,
+#body .bi-button.button-ignore.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success {
+body .bi-button.button-success,
+#body .bi-button.button-success {
   background-color: #58cc7d;
   border-color: #58cc7d;
 }
-.bi-button.button-success,
+body .bi-button.button-success,
-.bi-button.button-success .b-font:before {
+#body .bi-button.button-success,
+body .bi-button.button-success .b-font:before,
+#body .bi-button.button-success .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-success.clear {
+body .bi-button.button-success.clear,
+#body .bi-button.button-success.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success.clear,
+body .bi-button.button-success.clear,
-.bi-button.button-success.clear .b-font:before {
+#body .bi-button.button-success.clear,
+body .bi-button.button-success.clear .b-font:before,
+#body .bi-button.button-success.clear .b-font:before {
   color: #0c6d23;
 }
-.bi-button.button-warning {
+body .bi-button.button-warning,
+#body .bi-button.button-warning {
   background-color: #e85050;
   border-color: #e85050;
 }
-.bi-button.button-warning,
+body .bi-button.button-warning,
-.bi-button.button-warning .b-font:before {
+#body .bi-button.button-warning,
+body .bi-button.button-warning .b-font:before,
+#body .bi-button.button-warning .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-warning.clear {
+body .bi-button.button-warning.clear,
+#body .bi-button.button-warning.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-warning.clear,
+body .bi-button.button-warning.clear,
-.bi-button.button-warning.clear .b-font:before {
+#body .bi-button.button-warning.clear,
+body .bi-button.button-warning.clear .b-font:before,
+#body .bi-button.button-warning.clear .b-font:before {
   color: #e85050;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled {
+#body .bi-button.button-warning.disabled,
+body .bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-common.disabled.base-disabled,
+body .bi-button.button-success.disabled.base-disabled,
+#body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
   border-color: #cccccc !important;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled,
-.bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled,
-.bi-button.button-warning.disabled.base-disabled .b-font:before {
+#body .bi-button.button-warning.disabled.base-disabled,
+body .bi-button.button-common.disabled .b-font:before,
+#body .bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-warning.disabled .b-font:before,
+#body .bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled .b-font:before,
+#body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
 }
-.bi-button.button-ignore.disabled {
+body .bi-button.button-ignore.disabled,
+#body .bi-button.button-ignore.disabled {
   background: #ffffff !important;
   border-color: #d4dadd !important;
 }
-.bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled,
-.bi-button.button-ignore.disabled .b-font:before {
+#body .bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled .b-font:before,
+#body .bi-button.button-ignore.disabled .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear {
+#body .bi-button.button-success.disabled.clear,
+body .bi-button.button-warning.disabled.clear,
+#body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
   border-width: 0 !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-success.disabled.clear,
-.bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear,
-.bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear,
-.bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear,
-.bi-button.button-ignore.disabled.clear .b-font:before {
+#body .bi-button.button-ignore.disabled.clear,
+body .bi-button.button-common.disabled.clear .b-font:before,
+#body .bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-success.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear .b-font:before,
+#body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:hover,
+#body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:hover,
+#body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-common.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:active {
+#body .bi-button.button-ignore.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:active,
+#body .bi-button.button-common.disabled.clear:active,
+body .bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-success.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:active,
+#body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
   filter: alpha(opacity=100);
 }

bi/base.js

@@ -2425,6 +2425,10 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._queue = [];
     },
 
+    mounted: function () {
+        this.stroke();
+    },
+
     _getContext: function () {
         if (!this.ctx) {
             this.ctx = this.canvas.getContext('2d');
@@ -2509,20 +2513,19 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._getContext().clearRect(0, 0, this.canvas.width, this.canvas.height);
     },
 
-    stroke: function (callback) {
+    stroke: function () {
-        var self = this;
+        var ctx = this._getContext();
-        BI.nextTick(function () {
+        if(!ctx){
-            var ctx = self._getContext();
+            return false;
-            BI.each(self._queue, function (i, q) {
+        }
+        BI.each(this._queue, function (i, q) {
             if (BI.isFunction(ctx[q.k])) {
                 ctx[q.k].apply(ctx, q.v);
             } else {
                 ctx[q.k] = q.v;
             }
         });
-            self._queue = [];
+        this._queue = [];
-            callback && callback();
-        });
     }
 });
 BI.shortcut("bi.canvas", BI.Canvas);/**
@@ -15139,10 +15142,10 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._center,
-                            left: 10,
+                            left: 20,
-                            top: 10,
+                            top: 20,
-                            right: 10,
+                            right: 20,
-                            bottom: 10
+                            bottom: 0
                         }]
                     }
                 },
@@ -15151,9 +15154,9 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._south,
-                            left: 10,
+                            left: 20,
                             top: 0,
-                            right: 10,
+                            right: 20,
                             bottom: 0
                         }]
                     },
@@ -18996,6 +18999,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
         }
         options.value = value;
         this.editor.markText(from, to, options);
+        this.editor.replaceSelection(" ");
         this.editor.focus();
     },
 
@@ -32400,18 +32404,17 @@ BI.Table = BI.inherit(BI.Widget, {
         }))));
 
         this._initFreezeScroll();
-        BI.nextTick(function () {
-            if (self.element.is(":visible")) {
-                self._resize();
-                self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
-            }
-        });
         BI.ResizeDetector.addResizeListener(this, function () {
             self._resize();
             self.fireEvent(BI.Table.EVENT_TABLE_RESIZE);
         });
     },
 
+    mounted: function () {
+        this._resize();
+        this.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
+    },
+
     _initFreezeScroll: function () {
         var self = this, o = this.options;
         scroll(this.scrollBottomRight.element, this.scrollTopRight.element, this.scrollBottomLeft.element);

bi/sliders.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -542,56 +556,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -621,6 +591,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -807,13 +841,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -1218,28 +1247,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1342,6 +1350,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1511,28 +1569,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1614,6 +1651,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1769,25 +1856,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -1849,6 +1918,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;

demo/js/fix-2.0/globalwatcher.js

@@ -13,6 +13,9 @@
             return model;
         },
         watch: {
+            "*.*.n": function () {
+                debugger
+            },
             "arr.**": function () {
                 debugger
             },

dist/base.css

@@ -682,7 +682,8 @@ li.CodeMirror-hint-active {
 .bi-theme-dark .bi-segment > .first-element {
   border-left: 1px solid #242640;
 }
-.bi-button {
+body .bi-button,
+#body .bi-button {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -693,131 +694,196 @@ li.CodeMirror-hint-active {
   cursor: pointer;
   font-size: 14px;
 }
-.bi-button.block {
+body .bi-button.block,
+#body .bi-button.block {
   font-size: inherit;
   border-width: 0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.bi-button.clear {
+body .bi-button.clear,
+#body .bi-button.clear {
   font-size: inherit;
   border-width: 0;
   background-color: transparent;
 }
-.bi-button.clear:hover,
+body .bi-button.clear:hover,
-.bi-button.clear:active {
+#body .bi-button.clear:hover,
+body .bi-button.clear:active,
+#body .bi-button.clear:active {
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
-.bi-button.button-common,
+body .bi-button.button-common,
-.bi-button.button-common .b-font:before {
+#body .bi-button.button-common,
+body .bi-button.button-common .b-font:before,
+#body .bi-button.button-common .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-common.clear,
+body .bi-button.button-common.clear,
-.bi-button.button-common.clear .b-font:before {
+#body .bi-button.button-common.clear,
+body .bi-button.button-common.clear .b-font:before,
+#body .bi-button.button-common.clear .b-font:before {
   color: #3f8ce8;
 }
-.bi-button.button-ignore {
+body .bi-button.button-ignore,
+#body .bi-button.button-ignore {
   background-color: #ffffff;
   border-color: #d4dadd;
 }
-.bi-button.button-ignore,
+body .bi-button.button-ignore,
-.bi-button.button-ignore .b-font:before {
+#body .bi-button.button-ignore,
+body .bi-button.button-ignore .b-font:before,
+#body .bi-button.button-ignore .b-font:before {
   color: #1a1a1a;
 }
-.bi-button.button-ignore.clear {
+body .bi-button.button-ignore.clear,
+#body .bi-button.button-ignore.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success {
+body .bi-button.button-success,
+#body .bi-button.button-success {
   background-color: #58cc7d;
   border-color: #58cc7d;
 }
-.bi-button.button-success,
+body .bi-button.button-success,
-.bi-button.button-success .b-font:before {
+#body .bi-button.button-success,
+body .bi-button.button-success .b-font:before,
+#body .bi-button.button-success .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-success.clear {
+body .bi-button.button-success.clear,
+#body .bi-button.button-success.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success.clear,
+body .bi-button.button-success.clear,
-.bi-button.button-success.clear .b-font:before {
+#body .bi-button.button-success.clear,
+body .bi-button.button-success.clear .b-font:before,
+#body .bi-button.button-success.clear .b-font:before {
   color: #0c6d23;
 }
-.bi-button.button-warning {
+body .bi-button.button-warning,
+#body .bi-button.button-warning {
   background-color: #e85050;
   border-color: #e85050;
 }
-.bi-button.button-warning,
+body .bi-button.button-warning,
-.bi-button.button-warning .b-font:before {
+#body .bi-button.button-warning,
+body .bi-button.button-warning .b-font:before,
+#body .bi-button.button-warning .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-warning.clear {
+body .bi-button.button-warning.clear,
+#body .bi-button.button-warning.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-warning.clear,
+body .bi-button.button-warning.clear,
-.bi-button.button-warning.clear .b-font:before {
+#body .bi-button.button-warning.clear,
+body .bi-button.button-warning.clear .b-font:before,
+#body .bi-button.button-warning.clear .b-font:before {
   color: #e85050;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled {
+#body .bi-button.button-warning.disabled,
+body .bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-common.disabled.base-disabled,
+body .bi-button.button-success.disabled.base-disabled,
+#body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
   border-color: #cccccc !important;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled,
-.bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled,
-.bi-button.button-warning.disabled.base-disabled .b-font:before {
+#body .bi-button.button-warning.disabled.base-disabled,
+body .bi-button.button-common.disabled .b-font:before,
+#body .bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-warning.disabled .b-font:before,
+#body .bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled .b-font:before,
+#body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
 }
-.bi-button.button-ignore.disabled {
+body .bi-button.button-ignore.disabled,
+#body .bi-button.button-ignore.disabled {
   background: #ffffff !important;
   border-color: #d4dadd !important;
 }
-.bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled,
-.bi-button.button-ignore.disabled .b-font:before {
+#body .bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled .b-font:before,
+#body .bi-button.button-ignore.disabled .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear {
+#body .bi-button.button-success.disabled.clear,
+body .bi-button.button-warning.disabled.clear,
+#body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
   border-width: 0 !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-success.disabled.clear,
-.bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear,
-.bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear,
-.bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear,
-.bi-button.button-ignore.disabled.clear .b-font:before {
+#body .bi-button.button-ignore.disabled.clear,
+body .bi-button.button-common.disabled.clear .b-font:before,
+#body .bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-success.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear .b-font:before,
+#body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:hover,
+#body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:hover,
+#body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-common.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:active {
+#body .bi-button.button-ignore.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:active,
+#body .bi-button.button-common.disabled.clear:active,
+body .bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-success.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:active,
+#body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
   filter: alpha(opacity=100);
 }

dist/base.js

@@ -2425,6 +2425,10 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._queue = [];
     },
 
+    mounted: function () {
+        this.stroke();
+    },
+
     _getContext: function () {
         if (!this.ctx) {
             this.ctx = this.canvas.getContext('2d');
@@ -2509,20 +2513,19 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._getContext().clearRect(0, 0, this.canvas.width, this.canvas.height);
     },
 
-    stroke: function (callback) {
+    stroke: function () {
-        var self = this;
+        var ctx = this._getContext();
-        BI.nextTick(function () {
+        if(!ctx){
-            var ctx = self._getContext();
+            return false;
-            BI.each(self._queue, function (i, q) {
+        }
+        BI.each(this._queue, function (i, q) {
             if (BI.isFunction(ctx[q.k])) {
                 ctx[q.k].apply(ctx, q.v);
             } else {
                 ctx[q.k] = q.v;
             }
         });
-            self._queue = [];
+        this._queue = [];
-            callback && callback();
-        });
     }
 });
 BI.shortcut("bi.canvas", BI.Canvas);/**
@@ -15139,10 +15142,10 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._center,
-                            left: 10,
+                            left: 20,
-                            top: 10,
+                            top: 20,
-                            right: 10,
+                            right: 20,
-                            bottom: 10
+                            bottom: 0
                         }]
                     }
                 },
@@ -15151,9 +15154,9 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._south,
-                            left: 10,
+                            left: 20,
                             top: 0,
-                            right: 10,
+                            right: 20,
                             bottom: 0
                         }]
                     },
@@ -18996,6 +18999,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
         }
         options.value = value;
         this.editor.markText(from, to, options);
+        this.editor.replaceSelection(" ");
         this.editor.focus();
     },
 
@@ -32400,18 +32404,17 @@ BI.Table = BI.inherit(BI.Widget, {
         }))));
 
         this._initFreezeScroll();
-        BI.nextTick(function () {
-            if (self.element.is(":visible")) {
-                self._resize();
-                self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
-            }
-        });
         BI.ResizeDetector.addResizeListener(this, function () {
             self._resize();
             self.fireEvent(BI.Table.EVENT_TABLE_RESIZE);
         });
     },
 
+    mounted: function () {
+        this._resize();
+        this.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
+    },
+
     _initFreezeScroll: function () {
         var self = this, o = this.options;
         scroll(this.scrollBottomRight.element, this.scrollTopRight.element, this.scrollBottomLeft.element);

dist/bundle.css

@@ -2261,7 +2261,8 @@ li.CodeMirror-hint-active {
 .bi-theme-dark .bi-segment > .first-element {
   border-left: 1px solid #242640;
 }
-.bi-button {
+body .bi-button,
+#body .bi-button {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -2272,131 +2273,196 @@ li.CodeMirror-hint-active {
   cursor: pointer;
   font-size: 14px;
 }
-.bi-button.block {
+body .bi-button.block,
+#body .bi-button.block {
   font-size: inherit;
   border-width: 0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.bi-button.clear {
+body .bi-button.clear,
+#body .bi-button.clear {
   font-size: inherit;
   border-width: 0;
   background-color: transparent;
 }
-.bi-button.clear:hover,
+body .bi-button.clear:hover,
-.bi-button.clear:active {
+#body .bi-button.clear:hover,
+body .bi-button.clear:active,
+#body .bi-button.clear:active {
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
-.bi-button.button-common,
+body .bi-button.button-common,
-.bi-button.button-common .b-font:before {
+#body .bi-button.button-common,
+body .bi-button.button-common .b-font:before,
+#body .bi-button.button-common .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-common.clear,
+body .bi-button.button-common.clear,
-.bi-button.button-common.clear .b-font:before {
+#body .bi-button.button-common.clear,
+body .bi-button.button-common.clear .b-font:before,
+#body .bi-button.button-common.clear .b-font:before {
   color: #3f8ce8;
 }
-.bi-button.button-ignore {
+body .bi-button.button-ignore,
+#body .bi-button.button-ignore {
   background-color: #ffffff;
   border-color: #d4dadd;
 }
-.bi-button.button-ignore,
+body .bi-button.button-ignore,
-.bi-button.button-ignore .b-font:before {
+#body .bi-button.button-ignore,
+body .bi-button.button-ignore .b-font:before,
+#body .bi-button.button-ignore .b-font:before {
   color: #1a1a1a;
 }
-.bi-button.button-ignore.clear {
+body .bi-button.button-ignore.clear,
+#body .bi-button.button-ignore.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success {
+body .bi-button.button-success,
+#body .bi-button.button-success {
   background-color: #58cc7d;
   border-color: #58cc7d;
 }
-.bi-button.button-success,
+body .bi-button.button-success,
-.bi-button.button-success .b-font:before {
+#body .bi-button.button-success,
+body .bi-button.button-success .b-font:before,
+#body .bi-button.button-success .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-success.clear {
+body .bi-button.button-success.clear,
+#body .bi-button.button-success.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success.clear,
+body .bi-button.button-success.clear,
-.bi-button.button-success.clear .b-font:before {
+#body .bi-button.button-success.clear,
+body .bi-button.button-success.clear .b-font:before,
+#body .bi-button.button-success.clear .b-font:before {
   color: #0c6d23;
 }
-.bi-button.button-warning {
+body .bi-button.button-warning,
+#body .bi-button.button-warning {
   background-color: #e85050;
   border-color: #e85050;
 }
-.bi-button.button-warning,
+body .bi-button.button-warning,
-.bi-button.button-warning .b-font:before {
+#body .bi-button.button-warning,
+body .bi-button.button-warning .b-font:before,
+#body .bi-button.button-warning .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-warning.clear {
+body .bi-button.button-warning.clear,
+#body .bi-button.button-warning.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-warning.clear,
+body .bi-button.button-warning.clear,
-.bi-button.button-warning.clear .b-font:before {
+#body .bi-button.button-warning.clear,
+body .bi-button.button-warning.clear .b-font:before,
+#body .bi-button.button-warning.clear .b-font:before {
   color: #e85050;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled {
+#body .bi-button.button-warning.disabled,
+body .bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-common.disabled.base-disabled,
+body .bi-button.button-success.disabled.base-disabled,
+#body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
   border-color: #cccccc !important;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled,
-.bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled,
-.bi-button.button-warning.disabled.base-disabled .b-font:before {
+#body .bi-button.button-warning.disabled.base-disabled,
+body .bi-button.button-common.disabled .b-font:before,
+#body .bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-warning.disabled .b-font:before,
+#body .bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled .b-font:before,
+#body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
 }
-.bi-button.button-ignore.disabled {
+body .bi-button.button-ignore.disabled,
+#body .bi-button.button-ignore.disabled {
   background: #ffffff !important;
   border-color: #d4dadd !important;
 }
-.bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled,
-.bi-button.button-ignore.disabled .b-font:before {
+#body .bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled .b-font:before,
+#body .bi-button.button-ignore.disabled .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear {
+#body .bi-button.button-success.disabled.clear,
+body .bi-button.button-warning.disabled.clear,
+#body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
   border-width: 0 !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-success.disabled.clear,
-.bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear,
-.bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear,
-.bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear,
-.bi-button.button-ignore.disabled.clear .b-font:before {
+#body .bi-button.button-ignore.disabled.clear,
+body .bi-button.button-common.disabled.clear .b-font:before,
+#body .bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-success.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear .b-font:before,
+#body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:hover,
+#body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:hover,
+#body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-common.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:active {
+#body .bi-button.button-ignore.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:active,
+#body .bi-button.button-common.disabled.clear:active,
+body .bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-success.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:active,
+#body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
   filter: alpha(opacity=100);
 }

dist/bundle.js

@@ -28166,6 +28166,10 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._queue = [];
     },
 
+    mounted: function () {
+        this.stroke();
+    },
+
     _getContext: function () {
         if (!this.ctx) {
             this.ctx = this.canvas.getContext('2d');
@@ -28250,20 +28254,19 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._getContext().clearRect(0, 0, this.canvas.width, this.canvas.height);
     },
 
-    stroke: function (callback) {
+    stroke: function () {
-        var self = this;
+        var ctx = this._getContext();
-        BI.nextTick(function () {
+        if(!ctx){
-            var ctx = self._getContext();
+            return false;
-            BI.each(self._queue, function (i, q) {
+        }
+        BI.each(this._queue, function (i, q) {
             if (BI.isFunction(ctx[q.k])) {
                 ctx[q.k].apply(ctx, q.v);
             } else {
                 ctx[q.k] = q.v;
             }
         });
-            self._queue = [];
+        this._queue = [];
-            callback && callback();
-        });
     }
 });
 BI.shortcut("bi.canvas", BI.Canvas);/**
@@ -40880,10 +40883,10 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._center,
-                            left: 10,
+                            left: 20,
-                            top: 10,
+                            top: 20,
-                            right: 10,
+                            right: 20,
-                            bottom: 10
+                            bottom: 0
                         }]
                     }
                 },
@@ -40892,9 +40895,9 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._south,
-                            left: 10,
+                            left: 20,
                             top: 0,
-                            right: 10,
+                            right: 20,
                             bottom: 0
                         }]
                     },
@@ -44737,6 +44740,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
         }
         options.value = value;
         this.editor.markText(from, to, options);
+        this.editor.replaceSelection(" ");
         this.editor.focus();
     },
 
@@ -58141,18 +58145,17 @@ BI.Table = BI.inherit(BI.Widget, {
         }))));
 
         this._initFreezeScroll();
-        BI.nextTick(function () {
-            if (self.element.is(":visible")) {
-                self._resize();
-                self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
-            }
-        });
         BI.ResizeDetector.addResizeListener(this, function () {
             self._resize();
             self.fireEvent(BI.Table.EVENT_TABLE_RESIZE);
         });
     },
 
+    mounted: function () {
+        this._resize();
+        this.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
+    },
+
     _initFreezeScroll: function () {
         var self = this, o = this.options;
         scroll(this.scrollBottomRight.element, this.scrollTopRight.element, this.scrollBottomLeft.element);

dist/demo.js

@@ -10280,6 +10280,9 @@ BI.shortcut("demo.tmp", Demo.Func);
             return model;
         },
         watch: {
+            "*.*.n": function () {
+                debugger
+            },
             "arr.**": function () {
                 debugger
             },

dist/fix/fix.compact.js

@@ -14,14 +14,7 @@
     }
 
     function createWatcher(vm, keyOrFn, handler, options) {
-        if (BI.isPlainObject(handler)) {
+        return Fix.watch(vm.model, keyOrFn, _.bind(handler, vm), options)
-            options = handler
-            handler = handler.handler
-        }
-        if (typeof handler === 'string') {
-            handler = vm[handler]
-        }
-        return Fix.VM.prototype.$watch.call(vm, keyOrFn, handler, options)
     }
 
     var _init = BI.Widget.prototype._init;

dist/fix/fix.js

@@ -400,7 +400,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         Observer.prototype.observeArray = function observeArray(items) {
             for (var i = 0, l = items.length; i < l; i++) {
-                items[i] = observe(items[i], this).model;
+                items[i] = observe(items[i], this, i).model;
             }
             return items;
         };
@@ -422,7 +422,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         }
     }
 
-    function observe(value, parentObserver) {
+    function observe(value, parentObserver, parentKey) {
         if (!_.isObject(value)) {
             return;
         }
@@ -433,6 +433,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             ob = new Observer(value);
         }
         ob.parent = parentObserver || ob.parent;
+        ob.parentKey = parentKey;
         return ob;
     }
 
@@ -445,7 +446,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             }
             var dep = observer && observer['__dep' + key] || new Dep();
             observer && (observer['__dep' + key] = dep);
-            var childOb = !shallow && observe(val, observer);
+            var childOb = !shallow && observe(val, observer, key);
             props[key] = {
                 enumerable: true,
                 configurable: true,
@@ -468,21 +469,33 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
                         return;
                     }
                     val = newVal;
-                    childOb = !shallow && observe(newVal, observer);
+                    childOb = !shallow && observe(newVal, observer, key);
                     obj[key] = childOb ? childOb.model : newVal;
                     dep.notify();
-                    //触发a.*绑定的hooks
+                    //触发a.*绑定的依赖
                     _.each(model.__ob__._deps, function (dep) {
                         dep.notify();
                     });
-                    //触发a.**绑定的hooks
+                    //触发a.**绑定的依赖
-                    var parent = model.__ob__;
+                    var parent = model.__ob__,
+                        root = model.__ob__,
+                        route = key;
                     while (parent) {
-                        _.each(parent._globalDeps, function (dep) {
+                        _.each(parent._scopeDeps, function (dep) {
                             dep.notify();
                         });
+                        if (parent.parentKey != null) {
+                            route = parent.parentKey + '.' + route;
+                        }
+                        root = parent;
                         parent = parent.parent;
                     }
+                    for (var _key2 in root._globalDeps) {
+                        var reg = new RegExp(_key2);
+                        if (reg.test(route)) {
+                            root._globalDeps[_key2].notify();
+                        }
+                    }
                 }
             };
         });
@@ -868,37 +881,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         }
     }
 
-    function createWatcher(vm, keyOrFn, handler, options) {
-        if (isPlainObject(handler)) {
-            options = handler;
-            handler = handler.handler;
-        }
-        if (typeof handler === 'string') {
-            handler = vm[handler];
-        }
-        return vm.$watch(keyOrFn, handler, options);
-    }
-
-    var falsy$1;
-    var operators = {
-        '||': falsy$1,
-        '&&': falsy$1,
-        '(': falsy$1,
-        ')': falsy$1
-    };
-
-    function runBinaryFunction(binarys) {
-        var expr = '';
-        for (var i = 0, len = binarys.length; i < len; i++) {
-            if (_.isBoolean(binarys[i]) || _.has(operators, binarys[i])) {
-                expr += binarys[i];
-            } else {
-                expr += 'false';
-            }
-        }
-        return new Function('return ' + expr)();
-    }
-
     var VM = function () {
         function VM(model) {
             _classCallCheck(this, VM);
@@ -947,18 +929,57 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             }
         }
 
-        VM.prototype.$watch = function $watch(expOrFn, cb, options) {
+        VM.prototype._init = function _init() {};
-            var vm = this;
+
+        VM.prototype.destroy = function destroy() {
+            for (var _key3 in this._computedWatchers) {
+                this._computedWatchers[_key3].teardown();
+            }
+        };
+
+        return VM;
+    }();
+
+    var falsy$1;
+    var operators = {
+        '||': falsy$1,
+        '&&': falsy$1,
+        '(': falsy$1,
+        ')': falsy$1
+    };
+
+    function runBinaryFunction(binarys) {
+        var expr = '';
+        for (var i = 0, len = binarys.length; i < len; i++) {
+            if (_.isBoolean(binarys[i]) || _.has(operators, binarys[i])) {
+                expr += binarys[i];
+            } else {
+                expr += 'false';
+            }
+        }
+        return new Function('return ' + expr)();
+    }
+
+    function routeToRegExp(route) {
+        route = route.replace(/\*./g, '[a-zA-Z0-9_]+.');
+        return '^' + route + '$';
+    }
+
+    function watch(model, expOrFn, cb, options) {
         if (isPlainObject(cb)) {
-                return createWatcher(vm, expOrFn, cb, options);
+            options = cb;
+            cb = cb.handler;
+        }
+        if (typeof cb === 'string') {
+            cb = model[cb];
         }
         options = options || {};
         options.user = true;
         var exps = void 0;
         if (_.isFunction(expOrFn) || !(exps = expOrFn.match(/[a-zA-Z0-9_.*]+|[|][|]|[&][&]|[(]|[)]/g)) || exps.length === 1 && !/\*/.test(expOrFn)) {
-                var watcher = new Watcher(vm.model, expOrFn, _.bind(cb, vm), options);
+            var watcher = new Watcher(model, expOrFn, cb, options);
             if (options.immediate) {
-                    cb.call(vm, watcher.value);
+                cb(watcher.value);
             }
             return function unwatchFn() {
                 watcher.teardown();
@@ -972,7 +993,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             if (_.has(operators, exp)) {
                 return;
             }
-                if (/\*\*$|\*$/.test(exp)) {
+            //a.**或a.*形式
+            if (/^[1-9a-zA-Z.]+(\*\*$|\*$)/.test(exp)) {
                 var isGlobal = /\*\*$/.test(exp);
                 if (isGlobal) {
                     //a.**的形式
@@ -982,32 +1004,60 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
                     exp = exp.replace(".*", "");
                 }
                 var getter = parsePath(exp);
-                    var v = getter.call(vm.model, vm.model);
+                var v = getter.call(model, model);
                 var dep = new Dep();
                 if (isGlobal) {
-                        (v.__ob__._globalDeps || (v.__ob__._globalDeps = [])).push(dep);
+                    (v.__ob__._scopeDeps || (v.__ob__._scopeDeps = [])).push(dep);
                 } else {
                     (v.__ob__._deps || (v.__ob__._deps = [])).push(dep);
                 }
-                    var w = new Watcher(vm.model, function () {
+                var w = new Watcher(model, function () {
                     dep.depend();
                     return NaN;
-                    }, _.bind(cb, vm));
+                }, cb);
                 watchers.push(function unwatchFn() {
                     w.teardown();
-                        v.__ob__._globalDeps && remove(v.__ob__._globalDeps, dep);
+                    v.__ob__._scopeDeps && remove(v.__ob__._scopeDeps, dep);
                     v.__ob__._deps && remove(v.__ob__._deps, dep);
                 });
                 return;
             }
-                var watcher = new Watcher(vm.model, exp, function () {
+            if (/\*\*|\*$/.test(exp)) {
+                throw new Error('not support');
+            }
+            //其他含有*的情况，如*.a,*.*.a,a.*.a.*
+            if (/\*/.test(exp)) {
+                //补全路径
+                var parent = model.__ob__.parent,
+                    root = model.__ob__;
+                while (parent) {
+                    exp = '*.' + exp;
+                    root = parent;
+                    parent = parent.parent;
+                }
+                var regStr = routeToRegExp(exp);
+                var _dep = new Dep();
+                root._globalDeps || (root._globalDeps = {});
+                root._globalDeps[regStr] = _dep;
+
+                var _w = new Watcher(model, function () {
+                    _dep.depend();
+                    return NaN;
+                }, cb);
+                watchers.push(function unwatchFn() {
+                    _w.teardown();
+                    root._globalDeps && delete root._globalDeps[regStr];
+                });
+                return;
+            }
+            var watcher = new Watcher(model, exp, function () {
                 if (complete === true) {
                     return;
                 }
                 fns[i] = true;
                 if (runBinaryFunction(fns)) {
                     complete = true;
-                        cb.call(vm);
+                    cb();
                 }
                 if (!running) {
                     running = true;
@@ -1023,18 +1073,27 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             });
         });
         return watchers;
-        };
-
-        VM.prototype._init = function _init() {};
-
-        VM.prototype.destroy = function destroy() {
-            for (var _key2 in this._computedWatchers) {
-                this._computedWatchers[_key2].teardown();
     }
-        };
 
-        return VM;
+    function toJSON(model) {
-    }();
+        var result = void 0;
+        if (_.isArray(model)) {
+            result = [];
+            for (var i = 0, len = model.length; i < len; i++) {
+                result[i] = toJSON(model[i]);
+            }
+        } else if (isPlainObject(model)) {
+            result = {};
+            for (var _key4 in model) {
+                if (!_.has($$skipArray, _key4)) {
+                    result[_key4] = toJSON(model[_key4]);
+                }
+            }
+        } else {
+            result = model;
+        }
+        return result;
+    }
 
     function define(model) {
         return new Observer(model).model;
@@ -1052,6 +1111,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     exports.set = set;
     exports.del = del;
     exports.Watcher = Watcher;
+    exports.watch = watch;
+    exports.toJSON = toJSON;
 
     exports.__esModule = true;
 });

dist/sliders.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -542,56 +556,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -621,6 +591,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -807,13 +841,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -1218,28 +1247,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1342,6 +1350,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1511,28 +1569,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1614,6 +1651,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1769,25 +1856,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -1849,6 +1918,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;

src/addons/sliders/js/intervalslider/intervalslider.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {

src/addons/sliders/js/intervalslider/intervalslider.label.js

@@ -58,56 +58,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -137,6 +93,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -323,13 +343,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {

src/addons/sliders/js/singleslider/singleslider.js

@@ -39,28 +39,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -163,6 +142,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",

src/addons/sliders/js/singleslider/singleslider.label.js

@@ -41,28 +41,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -144,6 +123,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",

src/addons/sliders/js/singleslider/singleslider.normal.js

@@ -28,25 +28,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -108,6 +90,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;

src/base/canvas/canvas.js

@@ -29,6 +29,10 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._queue = [];
     },
 
+    mounted: function () {
+        this.stroke();
+    },
+
     _getContext: function () {
         if (!this.ctx) {
             this.ctx = this.canvas.getContext('2d');
@@ -113,20 +117,19 @@ BI.Canvas = BI.inherit(BI.Widget, {
         this._getContext().clearRect(0, 0, this.canvas.width, this.canvas.height);
     },
 
-    stroke: function (callback) {
+    stroke: function () {
-        var self = this;
+        var ctx = this._getContext();
-        BI.nextTick(function () {
+        if(!ctx){
-            var ctx = self._getContext();
+            return false;
-            BI.each(self._queue, function (i, q) {
+        }
+        BI.each(this._queue, function (i, q) {
             if (BI.isFunction(ctx[q.k])) {
                 ctx[q.k].apply(ctx, q.v);
             } else {
                 ctx[q.k] = q.v;
             }
         });
-            self._queue = [];
+        this._queue = [];
-            callback && callback();
-        });
     }
 });
 BI.shortcut("bi.canvas", BI.Canvas);

src/base/layer/layer.floatbox.js

@@ -79,10 +79,10 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._center,
-                            left: 10,
+                            left: 20,
-                            top: 10,
+                            top: 20,
-                            right: 10,
+                            right: 20,
-                            bottom: 10
+                            bottom: 0
                         }]
                     }
                 },
@@ -91,9 +91,9 @@ BI.FloatBox = BI.inherit(BI.Widget, {
                         type: "bi.absolute",
                         items: [{
                             el: this._south,
-                            left: 10,
+                            left: 20,
                             top: 0,
-                            right: 10,
+                            right: 20,
                             bottom: 0
                         }]
                     },

src/base/single/editor/editor.code.js

@@ -121,6 +121,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
         }
         options.value = value;
         this.editor.markText(from, to, options);
+        this.editor.replaceSelection(" ");
         this.editor.focus();
     },
 

src/base/table/table.js

@@ -349,18 +349,17 @@ BI.Table = BI.inherit(BI.Widget, {
         }))));
 
         this._initFreezeScroll();
-        BI.nextTick(function () {
-            if (self.element.is(":visible")) {
-                self._resize();
-                self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
-            }
-        });
         BI.ResizeDetector.addResizeListener(this, function () {
             self._resize();
             self.fireEvent(BI.Table.EVENT_TABLE_RESIZE);
         });
     },
 
+    mounted: function () {
+        this._resize();
+        this.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT);
+    },
+
     _initFreezeScroll: function () {
         var self = this, o = this.options;
         scroll(this.scrollBottomRight.element, this.scrollTopRight.element, this.scrollBottomLeft.element);

src/css/base/single/button/button.css

@@ -1,4 +1,5 @@
-.bi-button {
+body .bi-button,
+#body .bi-button {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -9,131 +10,196 @@
   cursor: pointer;
   font-size: 14px;
 }
-.bi-button.block {
+body .bi-button.block,
+#body .bi-button.block {
   font-size: inherit;
   border-width: 0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.bi-button.clear {
+body .bi-button.clear,
+#body .bi-button.clear {
   font-size: inherit;
   border-width: 0;
   background-color: transparent;
 }
-.bi-button.clear:hover,
+body .bi-button.clear:hover,
-.bi-button.clear:active {
+#body .bi-button.clear:hover,
+body .bi-button.clear:active,
+#body .bi-button.clear:active {
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
-.bi-button.button-common,
+body .bi-button.button-common,
-.bi-button.button-common .b-font:before {
+#body .bi-button.button-common,
+body .bi-button.button-common .b-font:before,
+#body .bi-button.button-common .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-common.clear,
+body .bi-button.button-common.clear,
-.bi-button.button-common.clear .b-font:before {
+#body .bi-button.button-common.clear,
+body .bi-button.button-common.clear .b-font:before,
+#body .bi-button.button-common.clear .b-font:before {
   color: #3f8ce8;
 }
-.bi-button.button-ignore {
+body .bi-button.button-ignore,
+#body .bi-button.button-ignore {
   background-color: #ffffff;
   border-color: #d4dadd;
 }
-.bi-button.button-ignore,
+body .bi-button.button-ignore,
-.bi-button.button-ignore .b-font:before {
+#body .bi-button.button-ignore,
+body .bi-button.button-ignore .b-font:before,
+#body .bi-button.button-ignore .b-font:before {
   color: #1a1a1a;
 }
-.bi-button.button-ignore.clear {
+body .bi-button.button-ignore.clear,
+#body .bi-button.button-ignore.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success {
+body .bi-button.button-success,
+#body .bi-button.button-success {
   background-color: #58cc7d;
   border-color: #58cc7d;
 }
-.bi-button.button-success,
+body .bi-button.button-success,
-.bi-button.button-success .b-font:before {
+#body .bi-button.button-success,
+body .bi-button.button-success .b-font:before,
+#body .bi-button.button-success .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-success.clear {
+body .bi-button.button-success.clear,
+#body .bi-button.button-success.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-success.clear,
+body .bi-button.button-success.clear,
-.bi-button.button-success.clear .b-font:before {
+#body .bi-button.button-success.clear,
+body .bi-button.button-success.clear .b-font:before,
+#body .bi-button.button-success.clear .b-font:before {
   color: #0c6d23;
 }
-.bi-button.button-warning {
+body .bi-button.button-warning,
+#body .bi-button.button-warning {
   background-color: #e85050;
   border-color: #e85050;
 }
-.bi-button.button-warning,
+body .bi-button.button-warning,
-.bi-button.button-warning .b-font:before {
+#body .bi-button.button-warning,
+body .bi-button.button-warning .b-font:before,
+#body .bi-button.button-warning .b-font:before {
   color: #ffffff;
 }
-.bi-button.button-warning.clear {
+body .bi-button.button-warning.clear,
+#body .bi-button.button-warning.clear {
   background-color: transparent;
   border-width: 0;
 }
-.bi-button.button-warning.clear,
+body .bi-button.button-warning.clear,
-.bi-button.button-warning.clear .b-font:before {
+#body .bi-button.button-warning.clear,
+body .bi-button.button-warning.clear .b-font:before,
+#body .bi-button.button-warning.clear .b-font:before {
   color: #e85050;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled {
+#body .bi-button.button-warning.disabled,
+body .bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-common.disabled.base-disabled,
+body .bi-button.button-success.disabled.base-disabled,
+#body .bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled.base-disabled {
   background: #cccccc !important;
   border-color: #cccccc !important;
 }
-.bi-button.button-common.disabled,
+body .bi-button.button-common.disabled,
-.bi-button.button-success.disabled,
+#body .bi-button.button-common.disabled,
-.bi-button.button-warning.disabled,
+body .bi-button.button-success.disabled,
-.bi-button.button-common.disabled.base-disabled,
+#body .bi-button.button-success.disabled,
-.bi-button.button-success.disabled.base-disabled,
+body .bi-button.button-warning.disabled,
-.bi-button.button-warning.disabled.base-disabled,
+#body .bi-button.button-warning.disabled,
-.bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled,
-.bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled,
-.bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled,
-.bi-button.button-warning.disabled.base-disabled .b-font:before {
+#body .bi-button.button-warning.disabled.base-disabled,
+body .bi-button.button-common.disabled .b-font:before,
+#body .bi-button.button-common.disabled .b-font:before,
+body .bi-button.button-success.disabled .b-font:before,
+#body .bi-button.button-success.disabled .b-font:before,
+body .bi-button.button-warning.disabled .b-font:before,
+#body .bi-button.button-warning.disabled .b-font:before,
+body .bi-button.button-common.disabled.base-disabled .b-font:before,
+#body .bi-button.button-common.disabled.base-disabled .b-font:before,
+body .bi-button.button-success.disabled.base-disabled .b-font:before,
+#body .bi-button.button-success.disabled.base-disabled .b-font:before,
+body .bi-button.button-warning.disabled.base-disabled .b-font:before,
+#body .bi-button.button-warning.disabled.base-disabled .b-font:before {
   color: #ffffff !important;
 }
-.bi-button.button-ignore.disabled {
+body .bi-button.button-ignore.disabled,
+#body .bi-button.button-ignore.disabled {
   background: #ffffff !important;
   border-color: #d4dadd !important;
 }
-.bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled,
-.bi-button.button-ignore.disabled .b-font:before {
+#body .bi-button.button-ignore.disabled,
+body .bi-button.button-ignore.disabled .b-font:before,
+#body .bi-button.button-ignore.disabled .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear {
+#body .bi-button.button-success.disabled.clear,
+body .bi-button.button-warning.disabled.clear,
+#body .bi-button.button-warning.disabled.clear,
+body .bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-ignore.disabled.clear {
   background: transparent !important;
   border-width: 0 !important;
 }
-.bi-button.button-common.disabled.clear,
+body .bi-button.button-common.disabled.clear,
-.bi-button.button-success.disabled.clear,
+#body .bi-button.button-common.disabled.clear,
-.bi-button.button-warning.disabled.clear,
+body .bi-button.button-success.disabled.clear,
-.bi-button.button-ignore.disabled.clear,
+#body .bi-button.button-success.disabled.clear,
-.bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear,
-.bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear,
-.bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear,
-.bi-button.button-ignore.disabled.clear .b-font:before {
+#body .bi-button.button-ignore.disabled.clear,
+body .bi-button.button-common.disabled.clear .b-font:before,
+#body .bi-button.button-common.disabled.clear .b-font:before,
+body .bi-button.button-success.disabled.clear .b-font:before,
+#body .bi-button.button-success.disabled.clear .b-font:before,
+body .bi-button.button-warning.disabled.clear .b-font:before,
+#body .bi-button.button-warning.disabled.clear .b-font:before,
+body .bi-button.button-ignore.disabled.clear .b-font:before,
+#body .bi-button.button-ignore.disabled.clear .b-font:before {
   color: #cccccc !important;
 }
-.bi-button.button-common.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:hover,
+#body .bi-button.button-common.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:hover,
+body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:hover,
+#body .bi-button.button-success.disabled.clear:hover,
-.bi-button.button-common.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:hover,
-.bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:hover,
-.bi-button.button-ignore.disabled.clear:active {
+#body .bi-button.button-ignore.disabled.clear:hover,
+body .bi-button.button-common.disabled.clear:active,
+#body .bi-button.button-common.disabled.clear:active,
+body .bi-button.button-success.disabled.clear:active,
+#body .bi-button.button-success.disabled.clear:active,
+body .bi-button.button-warning.disabled.clear:active,
+#body .bi-button.button-warning.disabled.clear:active,
+body .bi-button.button-ignore.disabled.clear:active,
+#body .bi-button.button-ignore.disabled.clear:active {
   opacity: 1;
   filter: alpha(opacity=100);
 }

src/less/base/single/button/button.less

@@ -1,6 +1,6 @@
 @import "../../../bibase";
 
-.bi-button {
+body .bi-button, #body .bi-button {
   .border-radius(2px);
   border: 1px solid @color-bi-border-highlight;
   background-color: @color-bi-background-highlight;