From dd7032324ba46f853823a4e86d6276f245dba6fe Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 5 Jun 2017 18:43:51 +0800 Subject: [PATCH] columnresizer --- bi/base.css | 6 +++ bi/base.js | 46 +++++++++++++++---- docs/base.css | 6 +++ docs/base.js | 46 +++++++++++++++---- src/base/table/table.resizable.cell.js | 22 ++++++++- src/base/table/table.resizable.js | 24 +++++++--- src/css/base/table/table.resizable.cell.css | 3 ++ src/css/base/table/table.resizable.css | 3 ++ src/less/base/table/table.resizable.cell.less | 5 ++ src/less/base/table/table.resizable.less | 5 +- 10 files changed, 138 insertions(+), 28 deletions(-) diff --git a/bi/base.css b/bi/base.css index b9ac8ced1..5d30a881e 100644 --- a/bi/base.css +++ b/bi/base.css @@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active { .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { background-color: #3f8ce8; } +.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob { + background-color: #58cc7d; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active { z-index: 1; background-color: #3f8ce8; } +.bi-resizable-table .resizable-table-resizer.suitable { + background-color: #58cc7d; +} .bi-resizable-table .resizable-table-region-resizer { cursor: ew-resize; z-index: 1; diff --git a/bi/base.js b/bi/base.js index d6145caa9..387de77a2 100644 --- a/bi/base.js +++ b/bi/base.js @@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-resizable-table-cell", cell: {}, + minSize: 15, + // suitableSize, + maxSize: Number.MAX_VALUE, start: BI.emptyFn, resize: BI.emptyFn, stop: BI.emptyFn @@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { var startDrag = false; var size = 0, offset = 0, defaultSize = o.width; + + function optimizeSize(size) { + size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE); + if (o.suitableSize) { + if (Math.abs(o.suitableSize - size) < 5) { + size = o.suitableSize; + self.handler.element.addClass("suitable"); + } else { + self.handler.element.removeClass("suitable"); + } + } + return size; + } + var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { if (mouseMoveTracker.isDragging()) { startDrag = true; offset += deltaX; - size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); + size = optimizeSize(defaultSize + offset); self.handler.element.addClass("dragging"); o.resize(size); } }, function () { if (startDrag === true) { - size = BI.clamp(size, 15, Number.MAX_VALUE); + size = optimizeSize(size); o.stop(size); size = 0; offset = 0; defaultSize = o.width; self.handler.element.removeClass("dragging"); + self.handler.element.removeClass("suitable"); startDrag = false; } mouseMoveTracker.releaseMouseMoves(); @@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, { _formatHeader: function (header) { var self = this, o = this.options; var result = []; - var resize = function (j, size) { + var resize = function (j, i, size) { self.resizer.setVisible(true); var height = o.headerRowSize + self._getRegionRowSize()[1]; self.resizer.setHeight(height); - + if (o.minColumnSize[i]) { + if (Math.abs(size - o.minColumnSize[i]) < 5) { + self.resizer.element.addClass("suitable"); + } else { + self.resizer.element.removeClass("suitable"); + } + } self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize); }; - var stop = function (j, size) { + var stop = function (j, i, size) { self.resizer.setVisible(false); var columnSize = o.columnSize.slice(); columnSize[j] = size; @@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[i][j] = { type: "bi.resizable_table_cell", cell: col, - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; if (o.isNeedMerge) { var r = i; @@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[r - 1][j] = { type: "bi.resizable_table_cell", cell: result[r - 1][j], - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; r--; } diff --git a/docs/base.css b/docs/base.css index b9ac8ced1..5d30a881e 100644 --- a/docs/base.css +++ b/docs/base.css @@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active { .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { background-color: #3f8ce8; } +.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob { + background-color: #58cc7d; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active { z-index: 1; background-color: #3f8ce8; } +.bi-resizable-table .resizable-table-resizer.suitable { + background-color: #58cc7d; +} .bi-resizable-table .resizable-table-region-resizer { cursor: ew-resize; z-index: 1; diff --git a/docs/base.js b/docs/base.js index d6145caa9..387de77a2 100644 --- a/docs/base.js +++ b/docs/base.js @@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-resizable-table-cell", cell: {}, + minSize: 15, + // suitableSize, + maxSize: Number.MAX_VALUE, start: BI.emptyFn, resize: BI.emptyFn, stop: BI.emptyFn @@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { var startDrag = false; var size = 0, offset = 0, defaultSize = o.width; + + function optimizeSize(size) { + size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE); + if (o.suitableSize) { + if (Math.abs(o.suitableSize - size) < 5) { + size = o.suitableSize; + self.handler.element.addClass("suitable"); + } else { + self.handler.element.removeClass("suitable"); + } + } + return size; + } + var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { if (mouseMoveTracker.isDragging()) { startDrag = true; offset += deltaX; - size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); + size = optimizeSize(defaultSize + offset); self.handler.element.addClass("dragging"); o.resize(size); } }, function () { if (startDrag === true) { - size = BI.clamp(size, 15, Number.MAX_VALUE); + size = optimizeSize(size); o.stop(size); size = 0; offset = 0; defaultSize = o.width; self.handler.element.removeClass("dragging"); + self.handler.element.removeClass("suitable"); startDrag = false; } mouseMoveTracker.releaseMouseMoves(); @@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, { _formatHeader: function (header) { var self = this, o = this.options; var result = []; - var resize = function (j, size) { + var resize = function (j, i, size) { self.resizer.setVisible(true); var height = o.headerRowSize + self._getRegionRowSize()[1]; self.resizer.setHeight(height); - + if (o.minColumnSize[i]) { + if (Math.abs(size - o.minColumnSize[i]) < 5) { + self.resizer.element.addClass("suitable"); + } else { + self.resizer.element.removeClass("suitable"); + } + } self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize); }; - var stop = function (j, size) { + var stop = function (j, i, size) { self.resizer.setVisible(false); var columnSize = o.columnSize.slice(); columnSize[j] = size; @@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[i][j] = { type: "bi.resizable_table_cell", cell: col, - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; if (o.isNeedMerge) { var r = i; @@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[r - 1][j] = { type: "bi.resizable_table_cell", cell: result[r - 1][j], - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; r--; } diff --git a/src/base/table/table.resizable.cell.js b/src/base/table/table.resizable.cell.js index ad8c08a03..be9a9f55d 100644 --- a/src/base/table/table.resizable.cell.js +++ b/src/base/table/table.resizable.cell.js @@ -11,6 +11,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-resizable-table-cell", cell: {}, + minSize: 15, + // suitableSize, + maxSize: Number.MAX_VALUE, start: BI.emptyFn, resize: BI.emptyFn, stop: BI.emptyFn @@ -24,22 +27,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, { var startDrag = false; var size = 0, offset = 0, defaultSize = o.width; + + function optimizeSize(size) { + size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE); + if (o.suitableSize) { + if (Math.abs(o.suitableSize - size) < 5) { + size = o.suitableSize; + self.handler.element.addClass("suitable"); + } else { + self.handler.element.removeClass("suitable"); + } + } + return size; + } + var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { if (mouseMoveTracker.isDragging()) { startDrag = true; offset += deltaX; - size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); + size = optimizeSize(defaultSize + offset); self.handler.element.addClass("dragging"); o.resize(size); } }, function () { if (startDrag === true) { - size = BI.clamp(size, 15, Number.MAX_VALUE); + size = optimizeSize(size); o.stop(size); size = 0; offset = 0; defaultSize = o.width; self.handler.element.removeClass("dragging"); + self.handler.element.removeClass("suitable"); startDrag = false; } mouseMoveTracker.releaseMouseMoves(); diff --git a/src/base/table/table.resizable.js b/src/base/table/table.resizable.js index 2a9194294..edd654275 100644 --- a/src/base/table/table.resizable.js +++ b/src/base/table/table.resizable.js @@ -212,14 +212,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, { _formatHeader: function (header) { var self = this, o = this.options; var result = []; - var resize = function (j, size) { + var resize = function (j, i, size) { self.resizer.setVisible(true); var height = o.headerRowSize + self._getRegionRowSize()[1]; self.resizer.setHeight(height); - + if (o.minColumnSize[i]) { + if (Math.abs(size - o.minColumnSize[i]) < 5) { + self.resizer.element.addClass("suitable"); + } else { + self.resizer.element.removeClass("suitable"); + } + } self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize); }; - var stop = function (j, size) { + var stop = function (j, i, size) { self.resizer.setVisible(false); var columnSize = o.columnSize.slice(); columnSize[j] = size; @@ -239,8 +245,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[i][j] = { type: "bi.resizable_table_cell", cell: col, - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; if (o.isNeedMerge) { var r = i; @@ -248,8 +256,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, { result[r - 1][j] = { type: "bi.resizable_table_cell", cell: result[r - 1][j], - resize: BI.bind(resize, null, j), - stop: BI.bind(stop, null, j) + suitableSize: o.minColumnSize[i], + maxSize: o.maxColumnSize[i], + resize: BI.bind(resize, null, j, i), + stop: BI.bind(stop, null, j, i) }; r--; } diff --git a/src/css/base/table/table.resizable.cell.css b/src/css/base/table/table.resizable.cell.css index d080f2994..214340d95 100644 --- a/src/css/base/table/table.resizable.cell.css +++ b/src/css/base/table/table.resizable.cell.css @@ -9,3 +9,6 @@ .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { background-color: #3f8ce8; } +.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob { + background-color: #58cc7d; +} diff --git a/src/css/base/table/table.resizable.css b/src/css/base/table/table.resizable.css index 71921f5f6..fc7321608 100644 --- a/src/css/base/table/table.resizable.css +++ b/src/css/base/table/table.resizable.css @@ -6,6 +6,9 @@ z-index: 1; background-color: #3f8ce8; } +.bi-resizable-table .resizable-table-resizer.suitable { + background-color: #58cc7d; +} .bi-resizable-table .resizable-table-region-resizer { cursor: ew-resize; z-index: 1; diff --git a/src/less/base/table/table.resizable.cell.less b/src/less/base/table/table.resizable.cell.less index ea7ca49fb..63d67d400 100644 --- a/src/less/base/table/table.resizable.cell.less +++ b/src/less/base/table/table.resizable.cell.less @@ -9,5 +9,10 @@ background-color: @color-bi-background-highlight; } } + &.suitable{ + & .resizable-table-cell-resizer-knob { + background-color: @color-bi-background-success; + } + } } } \ No newline at end of file diff --git a/src/less/base/table/table.resizable.less b/src/less/base/table/table.resizable.less index 737a5e8db..d9ad74635 100644 --- a/src/less/base/table/table.resizable.less +++ b/src/less/base/table/table.resizable.less @@ -1,10 +1,13 @@ @import "../../bibase"; .bi-resizable-table { - & .resizable-table-resizer{ + & .resizable-table-resizer { cursor: ew-resize; z-index: 1; background-color: @color-bi-background-highlight; + &.suitable { + background-color: @color-bi-background-success; + } } & .resizable-table-region-resizer { cursor: ew-resize;