API to get the height of elements and the height of the current page content

[douglasmatheus]

What problem does this feature solve?

Hello, I needed to implement two methods to get the height of elements and internal content.

The usage scenario was as follows: I have a set of elements that will be added in stages, which can be text, tables, lists, etc. Let's assume they are only tables, and the content of these tables varies greatly (it's loaded from a database). I'll add the tables one after the other while the page has enough space. If the remaining space is insufficient, I'll add a page break, and I'll insert the next tables on the remaining pages.

Page with table with broken content

Page with page break

What does the proposed API look like?

After adding each table, I calculate the height of the next table. I also need to know the size of the remaining space on the page to check whether the table to be inserted will fit on the current page. If the table is larger than the remaining space on the page, I'll insert a page break and add the table to the next page.

This way, I can control whether parts of the content are cut off and are displayed in their entirety. Of course, if a table is larger than a page, I'll let it "cut" because there's nothing else to do.

I'd like to know if the author might find these implementations useful for the project. It's not quite a paragraph control, but it allows the developer to control the display of their content if desired. There are two methods implemented, both with approximately 30 lines each: getHeightElementList(elementList: IElement[]) and getInternalHeightsPages(rowList?: IRow[]). I copied parts of the computePageList() and computeRowList() methods for this.

Would you like me to submit a PR for review?

[douglasmatheus]

@Hufe921 , I'd like to explain a bit about my scenario and present an idea I had. The implementation I created allows me to obtain an array with the height of the content of all pages:

  public getPagesContentHeight(rowList?: IRow[]) {
    if (!rowList) {
      rowList = this.draw.getRowList()
    }
    const pageRowList: IRow[][] = [[]]
    const internalHeights: number[] = [0]
    const { pageMode } = this.options
    const height = this.draw.getHeight()
    const marginHeight = this.draw.getMainOuterHeight()
    let pageHeight = marginHeight
    let pageNo = 0
    if (pageMode === PageMode.PAGING) {
      for (let i = 0; i < rowList.length; i++) {
        const row = rowList[i]
//        if (row.height) {
          if (
            row.height! + pageHeight > height ||
            rowList[i - 1]?.isPageBreak
          ) {
            pageHeight = marginHeight + row.height
            pageRowList.push([row])
            internalHeights.push(row.height)
            pageNo++
          } else {
            pageHeight += row.height
            pageRowList[pageNo].push(row)
            internalHeights[pageNo] += row.height
          }
//        }
      }
    }
    return internalHeights
  }

Another method allows me to pass a set of elements and receive their height:

  public getHeightElementList(elementList: IElement[]) {
    let elementHeight = 0
    const margins = this.draw.getMargins()
    const pageHeight = this.draw.getHeight()
    const extraHeight = this.draw.getHeader().getExtraHeight()
    const mainOuterHeight = this.draw.getMainOuterHeight()
    const startX = margins[3]
    const startY = margins[0] + extraHeight
    const surroundElementList = pickSurroundElementList(this.draw.getElementList())
    elementList = JSON.parse(JSON.stringify(elementList))
    formatElementList(elementList, {
      isHandleFirstElement: false,
      editorOptions: this.options
    })
    const rowList = this.draw.computeRowList({
      startX,
      startY,
      pageHeight,
      mainOuterHeight,
      isPagingMode: true,
      innerWidth,
      surroundElementList,
      elementList: elementList
    })
    elementHeight = rowList.reduce((accum: number, row) => {
      if (row.height) {
        accum += row.height
      }
      return accum
    }, 0)
    return elementHeight
  }

These two methods helped me process the content of each page before inserting it. My scenario works as follows: I create the editor instance initially without data, then load the data from the backend, and then assemble the editor elements piece by piece and insert them.

This way, before inserting into the editor, I get the height of the current page's content (for me, it will always be the last page, as I always insert at the end) with getPagesContentHeight(). Then, with the element ready to be inserted, I get the height of these elements with getHeightElementList(elementList: IElement[]). Then, I get the page height from the editor settings, calculate the remaining page height by taking the difference between the page and the content height of this page, and then check if the height of the elements to be inserted is greater than the remaining height. If so, I add a line break and then insert the elements. Here's a code example:

  const height = instance.command.getOptions().height
  const heightContentPage = instance.command.getPagesContentHeight()

  const { dataHeaderProd, dataItensProd, dataBreak } = elem
  const heightDataHeader = instance.command.getHeightElementList([dataHeaderProd])
  const heightDataItens = instance.command.getHeightElementList([dataItensProd])
  const heightDataBreak = instance.command.getHeightElementList([dataBreak])

  const totalHeightProdutos = heightDataHeader + heightDataItens + heightDataBreak

  const remainingHeight = height - heightContentPage[0]
  if (totalHeightProdutos > remainingHeight) {
    elementList.push({ value: '\n', type: ElementType.PAGE_BREAK, width: 774 })
  }
  elementList.push(dataHeaderProd)
  elementList.push(dataItensProd)
  elementList.push(dataBreak)

In other words, in my scenario, the process is entirely manual; I process and insert the elements one by one after I have the editor instance. What I was thinking was a way to have the editor do this automatically, but I had difficulty implementing it within Draw. One suggestion I can make is to add a property similar to the CSS break-before, break-inside, and break-after properties. Perhaps simplify a property called break with the values: "before, always-before, after, always-after," or something along those lines. This way, a set of elements could behave similarly to a paragraph, being able to be configured to always break before/after, or be dynamic and break before/after if there's not enough remaining space.

I'd like to know what you think of this idea and what I've already implemented? I tried to think of how to implement the break property, but I couldn't fit it into drarRow(). If you could guide me on this part, or if you think it could be done differently and provide the guidelines, I would be very grateful and excited to implement it.

[douglasmatheus]

Hey @Hufe921 what do you think of these two methods, would you be interested in adding them, or would it be better to think of a more robust implementation?