wip

plugin-src/transformers/partials/transformMaskChildren.ts

@@ -1,53 +1,53 @@
 import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers';
 
 import { PenpotNode } from '@ui/lib/types/penpotNode';
-import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 
 export const transformMaskChildren = async (
   children: readonly SceneNode[],
   baseX: number,
   baseY: number
 ): Promise<PenpotNode[]> => {
-  const splitChildren: PenpotNode[] = [];
-  let currentGroup: Partial<GroupShape> | null = null;
-
-  const transformedChildren = await Promise.all(
-    children.map(child => transformSceneNode(child, baseX, baseY))
-  );
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const transformedChild = transformedChildren[i];
-
-    if (!transformedChild) {
-      continue;
-    }
-
-    if (isMask(child)) {
-      if (currentGroup?.children?.length) {
-        splitChildren.push(currentGroup as GroupShape);
-      }
-      currentGroup = {
-        ...transformGroupNodeLike(child, baseX, baseY),
-        children: [],
-        maskedGroup: true
-      };
-    }
-
-    if (currentGroup) {
-      currentGroup.children?.push(transformedChild);
-    } else {
-      splitChildren.push(transformedChild);
-    }
+  const maskIndex = children.findIndex(child => isMaskNode(child) && isMask(child));
+  if (maskIndex === -1) {
+    return (
+      await Promise.all(children.map(child => transformSceneNode(child, baseX, baseY)))
+    ).filter((child): child is PenpotNode => !!child);
   }
 
-  if (currentGroup?.children?.length) {
-    splitChildren.push(currentGroup as GroupShape);
-  }
+  const unmaskedChildren = await transformMaskChildren(children.slice(0, maskIndex), baseX, baseY);
+  const maskedChildren = children.slice(maskIndex);
+
+  const maskGroup = {
+    ...transformGroupNodeLike(maskedChildren[0], baseX, baseY),
+    children: await transformMaskChildren(maskedChildren, baseX, baseY),
+    maskedGroup: true
+  };
 
-  return splitChildren;
+  return [...unmaskedChildren, maskGroup];
 };
 
-const isMask = (node: SceneNode): boolean => {
-  return 'isMask' in node && node.isMask;
+const isMask = (node: MaskNode): boolean => {
+  return node.isMask;
 };
+
+const isMaskNode = (node: SceneNode): node is MaskNode => {
+  return 'isMask' in node;
+};
+
+type MaskNode =
+  | FrameNode
+  | GroupNode
+  | ComponentSetNode
+  | ComponentNode
+  | InstanceNode
+  | BooleanOperationNode
+  | VectorNode
+  | StarNode
+  | LineNode
+  | EllipseNode
+  | PolygonNode
+  | RectangleNode
+  | TextNode
+  | StampNode
+  | HighlightNode
+  | WashiTapeNode;