chore: manage boolean operations ("exclude" preview not fully working)

Author: sneko

src/features/transformers/transformBooleanNode.ts

@@ -0,0 +1,54 @@
+import assert from 'assert';
+import { parseSVG } from 'svg-path-parser';
+
+import { BooleanOperationNode, Transform } from '@figpot/src/clients/figma';
+import { MappingType } from '@figpot/src/features/document';
+import { transformBlend } from '@figpot/src/features/transformers/partials/transformBlend';
+import { transformChildren } from '@figpot/src/features/transformers/partials/transformChildren';
+import { transformDimensionAndRotationAndPosition } from '@figpot/src/features/transformers/partials/transformDimensionAndRotationAndPosition';
+import { transformEffects } from '@figpot/src/features/transformers/partials/transformEffects';
+import { transformFills } from '@figpot/src/features/transformers/partials/transformFills';
+import { transformLayoutAttributes } from '@figpot/src/features/transformers/partials/transformLayout';
+import { transformProportion } from '@figpot/src/features/transformers/partials/transformProportion';
+import { transformSceneNode } from '@figpot/src/features/transformers/partials/transformSceneNode';
+import { transformStrokes } from '@figpot/src/features/transformers/partials/transformStrokes';
+import { translateBoolType } from '@figpot/src/features/translators/translateBoolType';
+import { translateId } from '@figpot/src/features/translators/translateId';
+import { translateCommands } from '@figpot/src/features/translators/vectors/translateCommands';
+import { PenpotNode } from '@figpot/src/models/entities/penpot/node';
+import { BoolShape } from '@figpot/src/models/entities/penpot/shapes/bool';
+import { BoolContent } from '@figpot/src/models/entities/penpot/shapes/bool';
+
+function translatePathNode(node: BooleanOperationNode, figmaNodeTransform: Transform): BoolContent[] {
+  assert(node.fillGeometry);
+
+  // TODO: this won't work for `exclude`, the Figma path of the bool operation does seems to not involves the exclusion
+  // Meaning within the UI the preview will be a `difference` operation, if moving position or switching back and forth to another bool mode it will adjust correctly
+  return translateCommands(node, figmaNodeTransform, parseSVG(node.fillGeometry[0].path));
+}
+
+export function transformBooleanNode(
+  registeredPageNodes: PenpotNode[],
+  node: BooleanOperationNode,
+  closestFigmaFrameId: string,
+  figmaNodeTransform: Transform,
+  mapping: MappingType
+): BoolShape {
+  transformChildren(registeredPageNodes, node, closestFigmaFrameId, figmaNodeTransform, mapping);
+
+  return {
+    type: 'bool',
+    name: node.name,
+    shapes: node.children.map((figmaChild) => translateId(figmaChild.id, mapping)),
+    boolContent: translatePathNode(node, figmaNodeTransform),
+    boolType: translateBoolType(node.booleanOperation),
+    ...transformFills(node),
+    ...transformEffects(node, mapping),
+    ...transformStrokes(node),
+    ...transformDimensionAndRotationAndPosition(node, figmaNodeTransform),
+    ...transformSceneNode(node),
+    ...transformBlend(node),
+    ...transformProportion(node),
+    ...transformLayoutAttributes(node),
+  };
+}

src/features/transformers/transformSceneNode.ts

@@ -1,5 +1,6 @@
 import { SubcanvasNode, Transform } from '@figpot/src/clients/figma';
 import { MappingType } from '@figpot/src/features/document';
+import { transformBooleanNode } from '@figpot/src/features/transformers/transformBooleanNode';
 import { transformEllipseNode } from '@figpot/src/features/transformers/transformEllipseNode';
 import { transformFrameNode } from '@figpot/src/features/transformers/transformFrameNode';
 import { transformGroupNode } from '@figpot/src/features/transformers/transformGroupNode';
@@ -12,7 +13,6 @@ import { PenpotNode } from '@figpot/src/models/entities/penpot/node';
 
 // TODO:
 // import {
-//   transformBooleanNode,
 //   transformComponentNode,
 //   transformInstanceNode,
 // } from '.';
@@ -54,9 +54,9 @@ export function transformSceneNode(
     case 'REGULAR_POLYGON':
       penpotNode = transformPathNode(figmaNode, figmaNodeTransform, mapping);
       break;
-    // case 'BOOLEAN_OPERATION':
-    //   penpotNode = await transformBooleanNode(figmaNode, baseX, baseY);
-    //   break;
+    case 'BOOLEAN_OPERATION':
+      penpotNode = transformBooleanNode(registeredPageNodes, figmaNode, closestFigmaFrameId, figmaNodeTransform, mapping);
+      break;
     // case 'CONNECTOR':
     //   // TODO: implement it?
     //   penpotNode = await transformConnectorNode(figmaNode, baseX, baseY);

src/features/translators/translateBoolType.ts

@@ -0,0 +1,15 @@
+import { booleanOperation } from '@figpot/src/clients/figma';
+import { BoolOperations } from '@figpot/src/models/entities/penpot/shapes/bool';
+
+export function translateBoolType(booleanOperation: booleanOperation): BoolOperations {
+  switch (booleanOperation) {
+    case 'EXCLUDE':
+      return 'exclude';
+    case 'INTERSECT':
+      return 'intersection';
+    case 'SUBTRACT':
+      return 'difference';
+    case 'UNION':
+      return 'union';
+  }
+}

src/models/entities/penpot/shapes/bool.ts

@@ -1,6 +1,6 @@
 import { LayoutChildAttributes } from '@figpot/src/models/entities/penpot/layout';
 import { ShapeAttributes, ShapeBaseAttributes } from '@figpot/src/models/entities/penpot/shape';
-import { PathContent } from '@figpot/src/models/entities/penpot/shapes/path';
+import { Segment } from '@figpot/src/models/entities/penpot/shapes/path';
 import { Point } from '@figpot/src/models/entities/penpot/traits/point';
 import { Uuid } from '@figpot/src/models/entities/penpot/traits/uuid';
 
@@ -21,14 +21,14 @@ export type BoolOperations =
 
 export type BoolShape = ShapeBaseAttributes & ShapeAttributes & BoolAttributes & LayoutChildAttributes;
 
-type BoolAttributes = {
+export type BoolAttributes = {
   type?: 'bool';
   shapes?: Uuid[];
   boolType: BoolOperations;
   boolContent?: BoolContent[];
 };
 
-type BoolContent = {
+export type BoolContent = {
   relative?: boolean;
   prevPos?: Point;
-} & PathContent;
+} & Segment;