Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in / Register
  • pagedjs pagedjs
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 196
    • Issues 196
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 4
    • Merge requests 4
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • pagedjs
  • pagedjspagedjs
  • Merge requests
  • !150

Open
Created Apr 30, 2021 by Boris Budini@kominoshja🛡Owner
  • Report abuse
Report abuse

Display: Flex Prototype

  • Overview 4
  • Commits 10
  • Changes 9

Creating a merge request just to showcase the ideas + prototype. So you'll see stretches of comments I've left myself as I tried to familiarize myself with the library, commented out code, things of that nature.

Visual step by step of ideal algorithm with these changes - Public_for_Paged_-Step_by_step__2.pdf

To summarize: Enhancing breakTokens to understand 'why' overflow occurred, and use that information in rebuildAncestors(), as well as refactoring to work with an array of breaktokens as opposed to just one.

Modifications showcased

  • When searching for overflow, we additionally track flex boundaries. When flex begins, and each of its flex columns
  • Then, when overflow is located, that information is tacked on too (to the breakToken). We also continue searching for more overflows, adding to a list
  • During this, when we hit ‘leaf nodes,’ we mark them as done rendering on the source DOM
  • When build a page, we have multiple overflows and thus, multiple breakTokens. RebuildAncestors() should rebuild differently based on “why” the overflow occurred
  • If it’s because of flex, then we also must rebuild the flexSiblings, and the flexSiblings ancestors
  • RenderTo() starts at the first breakToken, but we must 1) not reappend elements already present on the page and 2) not append elements that are ‘done’ on previous pages.

Issues known and Ideas

  • Very flex focused, but similar idea can be leveraged for table. E.g. detect that a table has begun, and track elements that would need to be rebuilt (tr th, previous tds) in the breakToken for rebuildAncestors()
  • Only works for simple example, and 'context' can nest (table in flex, flex in flex, etc). An idea I had for that was tracking nesting contexts in the breakToken as a queue. Then when it comes to rebuilding ancestors, you would start at the top/first, rebuild what’s necessary for that context, and then dequeue, continuing until all contexts have been dealt with
  • renderTo() walks the original DOM, even if there’s content way off the page. Could we also check the wrapper here, and try to intelligently stop?
Edited Mar 30, 2022 by Fred Chasen
Assignee
Assign to
Reviewer
Request review from
Time tracking
Source branch: dev2