@zseven-w/pen-renderer 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zseven-w/pen-renderer",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Standalone CanvasKit/Skia renderer for OpenPencil (.op) design files",
   "homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-renderer",
   "bugs": {
@@ -30,8 +30,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zseven-w/pen-core": "0.7.1",
-    "@zseven-w/pen-types": "0.7.1",
+    "@zseven-w/pen-core": "0.7.2",
+    "@zseven-w/pen-types": "0.7.2",
     "rbush": "^4.0.1"
   },
   "devDependencies": {

package/src/__tests__/document-flattener.test.ts

@@ -274,4 +274,35 @@ describe('flattenToRenderNodes — dimension consistency', () => {
     expect(t1.clipRect!.h).toBe(rootRN.absH);
     expect(t1.clipRect!.w).toBe(rootRN.absW);
   });
+
+  it('nested frame with clipContent clips its descendants using its own bounds/radius', () => {
+    const root = frame({
+      id: 'root',
+      width: 400,
+      height: 400,
+      children: [
+        frame({
+          id: 'card',
+          x: 40,
+          y: 50,
+          width: 200,
+          height: 120,
+          cornerRadius: 16,
+          clipContent: true,
+          children: [text('inner', 'Nested content', { width: 'fill_container' as any })],
+        }),
+      ],
+    });
+
+    const nodes = flattenToRenderNodes([root]);
+    const card = nodes.find((rn) => rn.node.id === 'card')!;
+    const inner = nodes.find((rn) => rn.node.id === 'inner')!;
+
+    expect(inner.clipRect).toBeDefined();
+    expect(inner.clipRect!.x).toBe(card.absX);
+    expect(inner.clipRect!.y).toBe(card.absY);
+    expect(inner.clipRect!.w).toBe(card.absW);
+    expect(inner.clipRect!.h).toBe(card.absH);
+    expect(inner.clipRect!.rx).toBe(16);
+  });
 });

package/src/document-flattener.ts

@@ -241,10 +241,12 @@ export function flattenToRenderNodes(
       const positioned =
         layout && layout !== 'none' ? computeLayoutPositions(resolved, children) : children;
 
-      // Clipping — only clip for root frames (artboard behavior).
+      // Clipping — root frames always clip like artboards. Nested containers
+      // clip only when clipContent is enabled.
       let childClip = clipCtx;
       const isRootFrame = node.type === 'frame' && depth === 0;
-      if (isRootFrame) {
+      const explicitClip = 'clipContent' in resolved && resolved.clipContent === true;
+      if (isRootFrame || explicitClip) {
         const crRaw = 'cornerRadius' in node ? cornerRadiusVal(node.cornerRadius) : 0;
         const cr = Math.min(crRaw, nodeH / 2);
         childClip = { x: absX, y: absY, w: nodeW, h: nodeH, rx: cr };