fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

columnresizer

es6
guy 8 years ago
parent
559a024908
commit
dd7032324b
10 changed files with 138 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      bi/base.css
  2. 46
      bi/base.js
  3. 6
      docs/base.css
  4. 46
      docs/base.js
  5. 22
      src/base/table/table.resizable.cell.js
  6. 24
      src/base/table/table.resizable.js
  7. 3
      src/css/base/table/table.resizable.cell.css
  8. 3
      src/css/base/table/table.resizable.css
  9. 5
      src/less/base/table/table.resizable.cell.less
  10. 5
      src/less/base/table/table.resizable.less

6
bi/base.css
Unescape View File

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/ /****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1; z-index: 1;
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer { .bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize; cursor: ew-resize;
z-index: 1; z-index: 1;

46
bi/base.js
Unescape View File

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell", baseCls: "bi-resizable-table-cell",
cell: {}, cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn, start: BI.emptyFn,
resize: BI.emptyFn, resize: BI.emptyFn,
stop: BI.emptyFn stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false; var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width; 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) { var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging"); self.handler.element.addClass("dragging");
o.resize(size); o.resize(size);
} }
}, function () { }, function () {
if (startDrag === true) { if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE); size = optimizeSize(size);
o.stop(size); o.stop(size);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = o.width; defaultSize = o.width;
self.handler.element.removeClass("dragging"); self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false; startDrag = false;
} }
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) { _formatHeader: function (header) {
var self = this, o = this.options; var self = this, o = this.options;
var result = []; var result = [];
var resize = function (j, size) { var resize = function (j, i, size) {
self.resizer.setVisible(true); self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1]; var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height); 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); 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); self.resizer.setVisible(false);
var columnSize = o.columnSize.slice(); var columnSize = o.columnSize.slice();
columnSize[j] = size; columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = { result[i][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: col, cell: col,
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
if (o.isNeedMerge) { if (o.isNeedMerge) {
var r = i; var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = { result[r - 1][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: result[r - 1][j], cell: result[r - 1][j],
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
r--; r--;
} }

6
docs/base.css
Unescape View File

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/ /****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/ /****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/ /**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1; z-index: 1;
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer { .bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize; cursor: ew-resize;
z-index: 1; z-index: 1;

46
docs/base.js
Unescape View File

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell", baseCls: "bi-resizable-table-cell",
cell: {}, cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn, start: BI.emptyFn,
resize: BI.emptyFn, resize: BI.emptyFn,
stop: BI.emptyFn stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false; var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width; 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) { var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging"); self.handler.element.addClass("dragging");
o.resize(size); o.resize(size);
} }
}, function () { }, function () {
if (startDrag === true) { if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE); size = optimizeSize(size);
o.stop(size); o.stop(size);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = o.width; defaultSize = o.width;
self.handler.element.removeClass("dragging"); self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false; startDrag = false;
} }
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) { _formatHeader: function (header) {
var self = this, o = this.options; var self = this, o = this.options;
var result = []; var result = [];
var resize = function (j, size) { var resize = function (j, i, size) {
self.resizer.setVisible(true); self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1]; var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height); 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); 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); self.resizer.setVisible(false);
var columnSize = o.columnSize.slice(); var columnSize = o.columnSize.slice();
columnSize[j] = size; columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = { result[i][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: col, cell: col,
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
if (o.isNeedMerge) { if (o.isNeedMerge) {
var r = i; var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = { result[r - 1][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: result[r - 1][j], cell: result[r - 1][j],
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
r--; r--;
} }

22
src/base/table/table.resizable.cell.js
Unescape View File

@ -11,6 +11,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell", baseCls: "bi-resizable-table-cell",
cell: {}, cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn, start: BI.emptyFn,
resize: BI.emptyFn, resize: BI.emptyFn,
stop: BI.emptyFn stop: BI.emptyFn
@ -24,22 +27,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false; var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width; 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) { var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) { if (mouseMoveTracker.isDragging()) {
startDrag = true; startDrag = true;
offset += deltaX; offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE); size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging"); self.handler.element.addClass("dragging");
o.resize(size); o.resize(size);
} }
}, function () { }, function () {
if (startDrag === true) { if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE); size = optimizeSize(size);
o.stop(size); o.stop(size);
size = 0; size = 0;
offset = 0; offset = 0;
defaultSize = o.width; defaultSize = o.width;
self.handler.element.removeClass("dragging"); self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false; startDrag = false;
} }
mouseMoveTracker.releaseMouseMoves(); mouseMoveTracker.releaseMouseMoves();

24
src/base/table/table.resizable.js
Unescape View File

@ -212,14 +212,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) { _formatHeader: function (header) {
var self = this, o = this.options; var self = this, o = this.options;
var result = []; var result = [];
var resize = function (j, size) { var resize = function (j, i, size) {
self.resizer.setVisible(true); self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1]; var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height); 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); 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); self.resizer.setVisible(false);
var columnSize = o.columnSize.slice(); var columnSize = o.columnSize.slice();
columnSize[j] = size; columnSize[j] = size;
@ -239,8 +245,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = { result[i][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: col, cell: col,
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
if (o.isNeedMerge) { if (o.isNeedMerge) {
var r = i; var r = i;
@ -248,8 +256,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = { result[r - 1][j] = {
type: "bi.resizable_table_cell", type: "bi.resizable_table_cell",
cell: result[r - 1][j], cell: result[r - 1][j],
resize: BI.bind(resize, null, j), suitableSize: o.minColumnSize[i],
stop: BI.bind(stop, null, j) maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
}; };
r--; r--;
} }

3
src/css/base/table/table.resizable.cell.css
Unescape View File

@ -9,3 +9,6 @@
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { .bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}

3
src/css/base/table/table.resizable.css
Unescape View File

@ -6,6 +6,9 @@
z-index: 1; z-index: 1;
background-color: #3f8ce8; background-color: #3f8ce8;
} }
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer { .bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize; cursor: ew-resize;
z-index: 1; z-index: 1;

5
src/less/base/table/table.resizable.cell.less
Unescape View File

@ -9,5 +9,10 @@
background-color: @color-bi-background-highlight; background-color: @color-bi-background-highlight;
} }
} }
&.suitable{
& .resizable-table-cell-resizer-knob {
background-color: @color-bi-background-success;
}
}
} }
} }

5
src/less/base/table/table.resizable.less
Unescape View File

@ -1,10 +1,13 @@
@import "../../bibase"; @import "../../bibase";
.bi-resizable-table { .bi-resizable-table {
& .resizable-table-resizer{ & .resizable-table-resizer {
cursor: ew-resize; cursor: ew-resize;
z-index: 1; z-index: 1;
background-color: @color-bi-background-highlight; background-color: @color-bi-background-highlight;
&.suitable {
background-color: @color-bi-background-success;
}
} }
& .resizable-table-region-resizer { & .resizable-table-region-resizer {
cursor: ew-resize; cursor: ew-resize;

Write Preview
Loading…
Cancel
Save