feat(2d): respect view's cache padding (#986)

packages/2d/src/lib/components/Node.ts

@@ -963,24 +963,28 @@ export class Node implements Promisable<Node> {
    *
    * @param newParent - The new parent of this node.
    */
-  public reparent(newParent: Node) {
+  public reparent(newParent: Node): this {
     const position = this.absolutePosition();
     const rotation = this.absoluteRotation();
     const scale = this.absoluteScale();
     newParent.add(this);
     this.absolutePosition(position);
     this.absoluteRotation(rotation);
     this.absoluteScale(scale);
+
+    return this;
   }
 
   /**
    * Remove all children of this node.
    */
-  public removeChildren() {
+  public removeChildren(): this {
     for (const oldChild of this.realChildren) {
       oldChild.parent(null);
     }
     this.setParsedChildren([]);
+
+    return this;
   }
 
   /**
@@ -1456,7 +1460,9 @@ export class Node implements Promisable<Node> {
    */
   @computed()
   protected worldSpaceCacheBBox(): BBox {
-    const viewBBox = BBox.fromSizeCentered(this.view().size());
+    const viewBBox = BBox.fromSizeCentered(this.view().size()).expand(
+      this.view().cachePadding(),
+    );
     const canvasBBox = BBox.fromPoints(
       ...viewBBox.transformCorners(this.view().localToWorld()),
     );

packages/docs/docs/advanced/shaders.mdx

@@ -179,9 +179,15 @@ know the size and position of everything rendered by the node. This goes beyond
 its logical size. Things like shadows, strokes, and filters can make the
 rendered area larger. We account for that in the case of built-in effects, but
 for custom shaders you may need to adjust the cache size manually. The
-[`cachePadding`](/api/2d/components/Node#cachePadding) property can be used to
-do exactly that. It specifies the extra space around the node that should be
-included in the cache.
+[`cachePadding`][cachePadding] property can be used to do exactly that. It
+specifies the extra space around the node that should be included in the cache.
+
+### View Caching
+
+By default, the size of the cache is limited to the visible area. This may cause
+certain shaders to behave incorrectly when the node is partially off-screen. To
+fix this, you can increase the [`cachePadding`][cachePadding] of the view
+itself. It will act as a buffer around the visible area.
 
 [globalCompositeOperation]:
   https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
@@ -190,3 +196,4 @@ included in the cache.
 [BBox]: /api/core/types/BBox
 [Spacing]: /api/core/types/Spacing
 [WebGLConvertible]: /api/core/types/WebGLConvertible
+[cachePadding]: /api/2d/components/Node#cachePadding