Performance: Modify bounds detection to inheritance when clipping is disabled

examples/tests/viewport-events.ts

@@ -29,6 +29,23 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
     parent: testRoot,
   });
 
+  const yellowStatus = renderer.createTextNode({
+    text: 'Yellow Status: ',
+    fontSize: 30,
+    x: 800,
+    y: 10,
+    parent: testRoot,
+  });
+
+  const clippingStatus = renderer.createTextNode({
+    text: 'Clipping: ON',
+    fontSize: 30,
+    x: 800,
+    y: 50,
+    parent: testRoot,
+    color: 0x00ff00ff,
+  });
+
   const boundaryRect = renderer.createNode({
     x: 1920 / 2 - (1920 * 0.75) / 2,
     y: 1080 / 2 - (1080 * 0.75) / 2,
@@ -51,6 +68,50 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
     parent: boundaryRect,
   });
 
+  const yellow1Rect = renderer.createNode({
+    x: 20,
+    y: 20,
+    alpha: 1,
+    width: 20,
+    height: 20,
+    color: 0xffff00ff,
+    pivot: 0,
+    parent: redRect,
+  });
+
+  const yellow2Rect = renderer.createNode({
+    x: 50,
+    y: 50,
+    alpha: 1,
+    width: 20,
+    height: 20,
+    color: 0xffff00ff,
+    pivot: 0,
+    parent: redRect,
+  });
+
+  const yellow3Rect = renderer.createNode({
+    x: 80,
+    y: 80,
+    alpha: 1,
+    width: 20,
+    height: 20,
+    color: 0xffff00ff,
+    pivot: 0,
+    parent: redRect,
+  });
+
+  const yellow4Rect = renderer.createNode({
+    x: 110,
+    y: 110,
+    alpha: 1,
+    width: 20,
+    height: 20,
+    color: 0xffff00ff,
+    pivot: 0,
+    parent: redRect,
+  });
+
   redRect.on('outOfBounds', () => {
     console.log('red rect out of bounds');
     redStatus.text = 'Red Status: rect out of bounds';
@@ -69,6 +130,84 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
     redStatus.color = 0xffff00ff;
   });
 
+  // yellowstate
+  // 0 : out of bounds
+  // 1 : in bounds
+  // 2 : in viewport
+  const yellowRectState = [0, 0, 0, 0];
+  const updateYellowState = (state: number, yellowIdx: number) => {
+    let stateString = '';
+    yellowRectState[yellowIdx] = state;
+
+    Array(4)
+      .fill(0)
+      .forEach((_, i) => {
+        stateString += `${yellowRectState[i]} `;
+      });
+
+    yellowStatus.text = `Yellow Status: ${stateString}`;
+  };
+
+  yellow1Rect.on('inBounds', () => {
+    console.log('yellow 1 rect inside render bounds');
+    updateYellowState(1, 0);
+  });
+
+  yellow1Rect.on('inViewport', () => {
+    console.log('yellow 1 rect in view port');
+    updateYellowState(2, 0);
+  });
+
+  yellow1Rect.on('outOfBounds', () => {
+    console.log('yellow 1 rect out of bounds');
+    updateYellowState(0, 0);
+  });
+
+  yellow2Rect.on('inBounds', () => {
+    console.log('yellow 2 rect inside render bounds');
+    updateYellowState(1, 1);
+  });
+
+  yellow2Rect.on('inViewport', () => {
+    console.log('yellow 2 rect in view port');
+    updateYellowState(2, 1);
+  });
+
+  yellow2Rect.on('outOfBounds', () => {
+    console.log('yellow 2 rect out of bounds');
+    updateYellowState(0, 1);
+  });
+
+  yellow3Rect.on('inBounds', () => {
+    console.log('yellow 3 rect inside render bounds');
+    updateYellowState(1, 2);
+  });
+
+  yellow3Rect.on('inViewport', () => {
+    console.log('yellow 3 rect in view port');
+    updateYellowState(2, 2);
+  });
+
+  yellow3Rect.on('outOfBounds', () => {
+    console.log('yellow 3 rect out of bounds');
+    updateYellowState(0, 2);
+  });
+
+  yellow4Rect.on('inBounds', () => {
+    console.log('yellow 4 rect inside render bounds');
+    updateYellowState(1, 3);
+  });
+
+  yellow4Rect.on('inViewport', () => {
+    console.log('yellow 4 rect in view port');
+    updateYellowState(2, 3);
+  });
+
+  yellow4Rect.on('outOfBounds', () => {
+    console.log('yellow 4 rect out of bounds');
+    updateYellowState(0, 3);
+  });
+
   const blueRect = renderer.createNode({
     x: 1920 / 2 - 200,
     y: 100,
@@ -181,5 +320,14 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
       redRect.x = 520;
       blueRect.x = 1920 / 2 - 200;
     }
+
+    if (e.key === 't') {
+      boundaryRect.clipping = !boundaryRect.clipping;
+
+      clippingStatus.text = boundaryRect.clipping
+        ? 'Clipping: ON'
+        : 'Clipping: OFF';
+      clippingStatus.color = boundaryRect.clipping ? 0x00ff00ff : 0xff0000ff;
+    }
   };
 }