innov
/
am-editor-001
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(table): 修正表格高度和宽度不精准问题

This commit is contained in:
yanmao 2022-02-13 23:17:56 +08:00
parent f8cd441ed8
commit ea84a38096
5 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/engine/src/scrollbar/index.ts
View File

@ -122,9 +122,10 @@ class Scrollbar extends EventEmitter2 {
getWidth() {
const element = this.container.get<HTMLElement>();
if (!element) return 0;
const width = this.container.width();
const offsetWidth = this.#scroll?.getOffsetWidth
? this.#scroll.getOffsetWidth(element.offsetWidth)
: element.offsetWidth;
? this.#scroll.getOffsetWidth(width)
: width;
return offsetWidth;
}
@ -141,7 +142,7 @@ class Scrollbar extends EventEmitter2 {
this.container.css('padding-bottom'),
);
const scrollWidth = contentElement
? contentElement.offsetWidth + sPLeft + sPRight
? this.#content!.width() + sPLeft + sPRight
: element.scrollWidth;
const scrollHeight = contentElement
? contentElement.offsetHeight + sPTop + sPBottom
@ -164,7 +165,7 @@ class Scrollbar extends EventEmitter2 {
const display =
this.oWidth - sPLeft - sPRight === this.sWidth ||
(contentElement &&
contentElement.offsetWidth <=
this.#content!.width() <=
this.oWidth - sPLeft - sPRight)
? 'none'
: 'block';
@ -190,13 +191,13 @@ class Scrollbar extends EventEmitter2 {
this.x &&
contentElement &&
element.scrollWidth - sPLeft - sPRight >
contentElement.offsetWidth
this.#content!.width()
) {
let left =
element.scrollWidth -
sPLeft -
sPRight -
contentElement.offsetWidth;
this.#content!.width();
if (this.#scroll) {
const { onScrollX, getScrollLeft } = this.#scroll;
@ -295,9 +296,10 @@ class Scrollbar extends EventEmitter2 {
: 'down';
const containerElement = this.container.get<HTMLElement>();
if (!containerElement) return;
const width = this.container.width();
const containerWidth = this.#scroll?.getOffsetWidth
? this.#scroll.getOffsetWidth(containerElement.offsetWidth)
: containerElement.offsetWidth;
? this.#scroll.getOffsetWidth(width)
: width;
const step = Math.max(
containerWidth /
(isMacos ? 20 - Math.abs(event.wheelDelta) : 8),

4
packages/engine/src/utils/string.ts
View File

@ -189,8 +189,8 @@ export const addUnit = (value: string | number, unit: string = 'px') => {
*/
export const removeUnit = (value: string) => {
let match;
return value && (match = /^(-?\d+)/.exec(value))
? parseInt(match[1], 10)
return value && (match = /^((-?\d+)(\.\d+)?)/.exec(value))
? parseFloat(match[1])
: 0;
};

39
plugins/table/src/component/controllbar.ts
View File

@ -11,6 +11,7 @@ import {
$,
CardActiveTrigger,
EditorInterface,
getComputedStyle,
isEngine,
isHotkey,
isMobile,
@ -129,7 +130,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
end = end || trs?.length || 0;
const rowBars = this.rowsHeader?.find(Template.ROWS_HEADER_ITEM_CLASS);
for (let i = start; i < end; i++) {
rowBars?.eq(i)?.css('height', `${trs[i].offsetHeight}px`);
rowBars?.eq(i)?.css('height', getComputedStyle(trs[i], 'height'));
}
const rowTrigger = this.rowsHeader?.find(
Template.ROWS_HEADER_TRIGGER_CLASS,
@ -146,7 +147,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
renderColBars() {
const table = this.tableRoot?.get<HTMLTableElement>();
if (!table) return;
const tableWidth = table.offsetWidth;
const tableWidth = removeUnit(getComputedStyle(table, 'width'));
//列删除按钮
this.colDeleteButton?.removeAllEvents();
this.colDeleteButton = this.table.wrapper?.find(
@ -204,7 +205,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
const colWidth = $(col).attributes('width');
if (colWidth) {
colWidthArray[i] = colWidth;
allColWidth += parseInt(colWidth);
allColWidth += parseFloat(colWidth);
isInit = false;
} else {
colIndex++;
@ -224,7 +225,9 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
!tdModel.isMulti &&
tdModel.element
) {
tdWidth[c] = tdModel.element.offsetWidth;
tdWidth[c] = removeUnit(
getComputedStyle(tdModel.element, 'width'),
);
}
});
});
@ -250,9 +253,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
cols.eq(i)?.attributes('width', width);
}
} else if (colIndex) {
const averageWidth = Math.round(
(tableWidth - allColWidth) / colIndex,
);
const averageWidth = (tableWidth - allColWidth) / colIndex;
cols.each((_, index) => {
const width =
undefined === colWidthArray[index]
@ -263,9 +264,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
});
} else {
cols.each((_, index) => {
const width = Math.round(
(tableWidth * colWidthArray[index]) / allColWidth,
);
const width = (tableWidth * colWidthArray[index]) / allColWidth;
colBars.eq(index)?.css('width', width + 'px');
cols.eq(index)?.attributes('width', width);
});
@ -654,11 +653,15 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
this.changeSize = {
trigger: {
element: trigger,
height: trigger.height(),
width: trigger.width(),
height: removeUnit(
getComputedStyle(trigger.get<Element>()!, 'height'),
),
width: removeUnit(
getComputedStyle(trigger.get<Element>()!, 'width'),
),
},
element: col,
width: colElement.offsetWidth,
width: removeUnit(getComputedStyle(colElement, 'width')),
height: -1,
index,
table: {
@ -694,12 +697,16 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
this.changeSize = {
trigger: {
element: trigger,
height: trigger.height(),
width: trigger.width(),
height: removeUnit(
getComputedStyle(trigger.get<Element>()!, 'height'),
),
width: removeUnit(
getComputedStyle(trigger.get<Element>()!, 'width'),
),
},
element: row,
width: -1,
height: rowElement.offsetHeight,
height: removeUnit(getComputedStyle(rowElement, 'height')),
index,
table: {
width: this.table.selection.tableModel?.width || 0,

14
plugins/table/src/component/index.ts
View File

@ -4,6 +4,7 @@ import {
CardToolbarItemOptions,
CardType,
EDITABLE_SELECTOR,
getComputedStyle,
isEngine,
isMobile,
NodeInterface,
@ -868,8 +869,17 @@ class TableComponent<V extends TableValue = TableValue>
}
const rowElements = table.find('tr').toArray();
rowElements.forEach((rowElement, index) => {
const height = rowElement.css('height');
rowItems.eq(index)?.css('height', height);
rowItems
.eq(index)
?.css(
'height',
removeUnit(
getComputedStyle(
rowElement.get<Element>()!,
'height',
),
),
);
});
this.conltrollBar.refresh();
this.scrollbar?.refresh();

6
plugins/table/src/index.css
View File

@ -252,7 +252,7 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
.table-wrapper .table-rows-header {
position: absolute;
left: -13px;
top: 42px;
top: 41px;
width: 14px;
z-index: 128;
border-right: 0;
@ -277,9 +277,9 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
background-color: #e2e4e6;
}
.table-wrapper .table-rows-header .table-rows-header-item:nth-child(3) {
/* .table-wrapper .table-rows-header .table-rows-header-item:nth-child(3) {
border-top: 0 none;
}
} */
.table-wrapper .table-rows-header .table-rows-header-item:last-child{
border-bottom: 1px solid #dfdfdf;