🐛 Fix incorrect shape filtering on bool creation on library

common/src/app/common/files/builder.cljc

@@ -21,7 +21,6 @@
    [app.common.time :as dt]
    [app.common.types.color :as types.color]
    [app.common.types.component :as types.comp]
-   [app.common.types.container :as types.cont]
    [app.common.types.file :as types.file]
    [app.common.types.page :as types.page]
    [app.common.types.path :as types.path]
@@ -341,8 +340,7 @@
         (comp
          (map (d/getf objects))
          (remove cph/frame-shape?)
-         (remove types.comp/is-variant?)
-         (remove (partial types.cont/has-any-copy-parent? objects)))
+         (remove types.comp/is-variant?))
 
         children
         (->> (get bool-shape :shapes)

library/CHANGES.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 1.0.4
+
+- Fix incorrect shapes filtering on creating boolean shapes within components
+
+
 ## 1.0.3
 
 - Add missing isLocal field on file media for fix compatibility of the

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penpot/library",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MPL-2.0",
   "author": "Kaleidos INC",
   "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538",

library/playground/sample-bool-with-components.js

@@ -0,0 +1,132 @@
+import * as penpot from "#self";
+import { writeFile } from "fs/promises";
+
+(async function () {
+  const context = penpot.createBuildContext();
+
+  {
+    context.addFile({ name: "Test File 1" });
+    context.addPage({ name: "Foo Page" });
+
+    const componentId = context.genId();
+
+    const mainInstanceId = context.addBoard({
+      name: "Artboard 1",
+      componentFile: context.currentFileId,
+      componentId,
+      componentRoot: true,
+      mainInstance: true,
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    const groupId = context.addGroup({
+      name: "Group 1",
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    const rectId = context.addRect({
+      name: "Rect 1",
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    const circleId = context.addCircle({
+      name: "Circle 1",
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 100
+    });
+
+    context.closeGroup();
+
+    context.addBool({
+      groupId,
+      type: "intersection"
+    });
+
+    context.closeBoard();
+
+    context.addBoard({
+      name: "Artboard 1",
+      componentFile: context.currentFileId,
+      componentId,
+      componentRoot: true,
+      shapeRef: mainInstanceId,
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    const groupId2 = context.addGroup({
+      name: "Group 1",
+      shapeRef: groupId,
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    context.addRect({
+      name: "Rect 1",
+      shapeRef: rectId,
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 200
+    });
+
+    context.addCircle({
+      name: "Circle 1",
+      shapeRef: circleId,
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 100
+    });
+
+    context.closeGroup();
+
+    context.addBool({
+      groupId: groupId2,
+      type: "intersection"
+    });
+
+    context.closeBoard();
+
+    context.addComponent({
+      componentId: componentId,
+      fileId: context.currentFileId,
+      name: "Artboard 1",
+      frameId: mainInstanceId,
+    });
+
+    context.closeFile();
+  }
+
+  {
+    let result = await penpot.exportAsBytes(context);
+    await writeFile("sample-bool-and-comp.zip", result);
+  }
+})()
+  .catch(cause => {
+    console.error(cause);
+
+    const innerCause = cause.cause;
+    if (innerCause) {
+      console.error("Inner cause:", innerCause);
+    }
+    process.exit(-1);
+  })
+  .finally(() => {
+    process.exit(0);
+  });