Skip to content

Proposal: Introduce ViewPortGroup #2020

@luowenxing

Description

@luowenxing

Background

When using Group node to handle a large content of child nodes which is overflow the Group size,we need to recalculate the position of child nodes by the latest scroll positon of Group, remove the overflowed nodes and create the new nodes. When building applications like Sheet(with cells and scroll container) and Processon(large pannel)

Introduce ViewPortGroup

Like most 2d game engine contains a main concept of Camera,We can add new type of Node called ViewPortGroup.
It extends Group node and provide a method and an option

  1. method: moveViewPort: move the view port when scroll position x or y changed.
  2. options: getViewPortChildren: return the child nodes by lastest viewport

The child nodes position should be affected by the viewport of parent ViewPortGroup
It works like this
Image

More benefit

We can impelment incremental draw by reuse the oringin viewport canvas image with context.drawImage,which is similar to the Shape canvas cache. When moveViewPort called

  1. we compair the latest viewport and prev viewport to get a incremental viewport
  2. call getViewPortChildren to get nodes that need to redraw
  3. combile clip, drawImage, redraw nodes together to do faster rendering. In our sheet like application,it make 3x faster in render large content of nodes when scrolling

The all approach bellow is implemented and be used in production. Because the approach add a new node type of ViewPortGroup,I dont know whether it meets the design patten of Konva. I could create a PR if the proposal issue is needed

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions