lsadmin
/
canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: disable table pagination in continuous page mode

Browse Source
pr675
Hufe921 2 years ago
parent 3f8399de62
commit d0500ac583
5 changed files with 124 additions and 100 deletions
Show Stats Download Patch File Download Diff File

203
src/editor/core/draw/Draw.ts
Unescape View File

@ -3,6 +3,7 @@ import { ZERO } from '../../dataset/constant/Common'
import { RowFlex } from '../../dataset/enum/Row' import { RowFlex } from '../../dataset/enum/Row'
import { import {
IAppendElementListOption, IAppendElementListOption,
IComputeRowListPayload,
IDrawFloatPayload, IDrawFloatPayload,
IDrawOption, IDrawOption,
IDrawPagePayload, IDrawPagePayload,
@ -1095,7 +1096,8 @@ export class Draw {
return el.actualSize || el.size || this.options.defaultSize return el.actualSize || el.size || this.options.defaultSize
} }
public computeRowList(innerWidth: number, elementList: IElement[]) { public computeRowList(payload: IComputeRowListPayload) {
const { innerWidth, elementList, isPagingMode = false } = payload
const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } =
this.options this.options
const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight() const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight()
@ -1206,10 +1208,11 @@ export class Draw {
const tr = trList[t] const tr = trList[t]
for (let d = 0; d < tr.tdList.length; d++) { for (let d = 0; d < tr.tdList.length; d++) {
const td = tr.tdList[d] const td = tr.tdList[d]
const rowList = this.computeRowList( const rowList = this.computeRowList({
(td.width! - tdPaddingWidth) * scale, innerWidth: (td.width! - tdPaddingWidth) * scale,
td.value elementList: td.value,
) isPagingMode
})
const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0) const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0)
td.rowList = rowList td.rowList = rowList
// 移除缩放导致的行高变化-渲染时会进行缩放调整 // 移除缩放导致的行高变化-渲染时会进行缩放调整
@ -1279,105 +1282,107 @@ export class Draw {
metrics.boundingBoxDescent = elementHeight metrics.boundingBoxDescent = elementHeight
metrics.boundingBoxAscent = -rowMargin metrics.boundingBoxAscent = -rowMargin
// 表格分页处理(拆分表格) // 表格分页处理(拆分表格)
const height = this.getHeight() if (isPagingMode) {
const marginHeight = this.getMainOuterHeight() const height = this.getHeight()
let curPagePreHeight = marginHeight const marginHeight = this.getMainOuterHeight()
for (let r = 0; r < rowList.length; r++) { let curPagePreHeight = marginHeight
const row = rowList[r] for (let r = 0; r < rowList.length; r++) {
const row = rowList[r]
if (
row.height + curPagePreHeight > height ||
rowList[r - 1]?.isPageBreak
) {
curPagePreHeight = marginHeight + row.height
} else {
curPagePreHeight += row.height
}
}
// 当前剩余高度是否能容下当前表格第一行（可拆分）的高度
const rowMarginHeight = rowMargin * 2 * scale
if ( if (
row.height + curPagePreHeight > height || curPagePreHeight + element.trList![0].height! + rowMarginHeight >
rowList[r - 1]?.isPageBreak height
) { ) {
curPagePreHeight = marginHeight + row.height // 无可拆分行则切换至新页
} else { curPagePreHeight = marginHeight
curPagePreHeight += row.height
} }
} // 表格高度超过页面高度开始截断行
// 当前剩余高度是否能容下当前表格第一行（可拆分）的高度 if (curPagePreHeight + rowMarginHeight + elementHeight > height) {
const rowMarginHeight = rowMargin * 2 * scale const trList = element.trList!
if ( // 计算需要移除的行数
curPagePreHeight + element.trList![0].height! + rowMarginHeight > let deleteStart = 0
height let deleteCount = 0
) { let preTrHeight = 0
// 无可拆分行则切换至新页 // 大于一行时再拆分避免循环
curPagePreHeight = marginHeight if (trList.length > 1) {
} for (let r = 0; r < trList.length; r++) {
// 表格高度超过页面高度开始截断行 const tr = trList[r]
if (curPagePreHeight + rowMarginHeight + elementHeight > height) { const trHeight = tr.height * scale
const trList = element.trList! if (
// 计算需要移除的行数 curPagePreHeight + rowMarginHeight + preTrHeight + trHeight >
let deleteStart = 0 height
let deleteCount = 0 ) {
let preTrHeight = 0 // 当前行存在跨行中断-暂时忽略分页
// 大于一行时再拆分避免循环 const rowColCount = tr.tdList.reduce(
if (trList.length > 1) { (pre, cur) => pre + cur.colspan,
for (let r = 0; r < trList.length; r++) { 0
const tr = trList[r] )
const trHeight = tr.height * scale if (element.colgroup?.length !== rowColCount) {
if ( deleteCount = 0
curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > }
height break
) { } else {
// 当前行存在跨行中断-暂时忽略分页 deleteStart = r + 1
const rowColCount = tr.tdList.reduce( deleteCount = trList.length - deleteStart
(pre, cur) => pre + cur.colspan, preTrHeight += trHeight
0
)
if (element.colgroup?.length !== rowColCount) {
deleteCount = 0
} }
break
} else {
deleteStart = r + 1
deleteCount = trList.length - deleteStart
preTrHeight += trHeight
} }
} }
} if (deleteCount) {
if (deleteCount) { const cloneTrList = trList.splice(deleteStart, deleteCount)
const cloneTrList = trList.splice(deleteStart, deleteCount) const cloneTrHeight = cloneTrList.reduce(
const cloneTrHeight = cloneTrList.reduce( (pre, cur) => pre + cur.height,
(pre, cur) => pre + cur.height, 0
0
)
const pagingId = element.pagingId || getUUID()
element.pagingId = pagingId
element.height -= cloneTrHeight
metrics.height -= cloneTrHeight
metrics.boundingBoxDescent -= cloneTrHeight
// 追加拆分表格
const cloneElement = deepClone(element)
cloneElement.pagingId = pagingId
cloneElement.trList = cloneTrList
cloneElement.id = getUUID()
this.spliceElementList(elementList, i + 1, 0, cloneElement)
}
}
// 表格经过分页处理-需要处理上下文
if (element.pagingId) {
const positionContext = this.position.getPositionContext()
if (positionContext.isTable) {
// 查找光标所在表格索引（根据trId搜索）
let newPositionContextIndex = -1
let newPositionContextTrIndex = -1
let tableIndex = i
while (tableIndex < elementList.length) {
const curElement = elementList[tableIndex]
if (curElement.pagingId !== element.pagingId) break
const trIndex = curElement.trList!.findIndex(
r => r.id === positionContext.trId
) )
if (~trIndex) { const pagingId = element.pagingId || getUUID()
newPositionContextIndex = tableIndex element.pagingId = pagingId
newPositionContextTrIndex = trIndex element.height -= cloneTrHeight
break metrics.height -= cloneTrHeight
} metrics.boundingBoxDescent -= cloneTrHeight
tableIndex++ // 追加拆分表格
const cloneElement = deepClone(element)
cloneElement.pagingId = pagingId
cloneElement.trList = cloneTrList
cloneElement.id = getUUID()
this.spliceElementList(elementList, i + 1, 0, cloneElement)
} }
if (~newPositionContextIndex) { }
positionContext.index = newPositionContextIndex // 表格经过分页处理-需要处理上下文
positionContext.trIndex = newPositionContextTrIndex if (element.pagingId) {
this.position.setPositionContext(positionContext) const positionContext = this.position.getPositionContext()
if (positionContext.isTable) {
// 查找光标所在表格索引（根据trId搜索）
let newPositionContextIndex = -1
let newPositionContextTrIndex = -1
let tableIndex = i
while (tableIndex < elementList.length) {
const curElement = elementList[tableIndex]
if (curElement.pagingId !== element.pagingId) break
const trIndex = curElement.trList!.findIndex(
r => r.id === positionContext.trId
)
if (~trIndex) {
newPositionContextIndex = tableIndex
newPositionContextTrIndex = trIndex
break
}
tableIndex++
}
if (~newPositionContextIndex) {
positionContext.index = newPositionContextIndex
positionContext.trIndex = newPositionContextTrIndex
this.position.setPositionContext(positionContext)
}
} }
} }
} }
@ -2143,7 +2148,11 @@ export class Draw {
} }
} }
// 行信息 // 行信息
this.rowList = this.computeRowList(innerWidth, this.elementList) this.rowList = this.computeRowList({
isPagingMode,
innerWidth,
elementList: this.elementList
})
// 页面信息 // 页面信息
this.pageRowList = this._computePageList() this.pageRowList = this._computePageList()
// 位置信息 // 位置信息

5
src/editor/core/draw/frame/Footer.ts
Unescape View File

@ -55,7 +55,10 @@ export class Footer {
private _computeRowList() { private _computeRowList() {
const innerWidth = this.draw.getInnerWidth() const innerWidth = this.draw.getInnerWidth()
this.rowList = this.draw.computeRowList(innerWidth, this.elementList) this.rowList = this.draw.computeRowList({
innerWidth,
elementList: this.elementList
})
} }
private _computePositionList() { private _computePositionList() {

5
src/editor/core/draw/frame/Header.ts
Unescape View File

@ -55,7 +55,10 @@ export class Header {
private _computeRowList() { private _computeRowList() {
const innerWidth = this.draw.getInnerWidth() const innerWidth = this.draw.getInnerWidth()
this.rowList = this.draw.computeRowList(innerWidth, this.elementList) this.rowList = this.draw.computeRowList({
innerWidth,
elementList: this.elementList
})
} }
private _computePositionList() { private _computePositionList() {

5
src/editor/core/draw/frame/Placeholder.ts
Unescape View File

@ -38,7 +38,10 @@ export class Placeholder {
private _computeRowList() { private _computeRowList() {
const innerWidth = this.draw.getInnerWidth() const innerWidth = this.draw.getInnerWidth()
this.rowList = this.draw.computeRowList(innerWidth, this.elementList) this.rowList = this.draw.computeRowList({
innerWidth,
elementList: this.elementList
})
} }
private _computePositionList() { private _computePositionList() {

6
src/editor/interface/Draw.ts
Unescape View File

@ -61,3 +61,9 @@ export interface IGetImageOption {
pixelRatio?: number pixelRatio?: number
mode?: EditorMode mode?: EditorMode
} }
export interface IComputeRowListPayload {
innerWidth: number
elementList: IElement[]
isPagingMode?: boolean
}

Write Preview
Loading…
Cancel
Save