[WIP] ZIndex

plugin-src/transformers/partials/transformChildren.ts

@@ -6,17 +6,29 @@ const nodeActsAsMask = (node: SceneNode): boolean => {
   return 'isMask' in node && node.isMask;
 };
 
+const nodeIsLayoutWithItemReverseZIndex = (node: ChildrenMixin): boolean => {
+  return !!('itemReverseZIndex' in node && node.itemReverseZIndex);
+};
+
 export const transformChildren = async (
   node: ChildrenMixin,
   baseX: number = 0,
-  baseY: number = 0
+  baseY: number = 0,
+  zIndex: number = 0
 ): Promise<Children> => {
   const maskIndex = node.children.findIndex(nodeActsAsMask);
   const containsMask = maskIndex !== -1;
-
+  const itemReverseZIndex = nodeIsLayoutWithItemReverseZIndex(node);
   return {
     children: containsMask
-      ? await translateMaskChildren(node.children, maskIndex, baseX, baseY)
-      : await translateChildren(node.children, baseX, baseY)
+      ? await translateMaskChildren(
+          node.children,
+          maskIndex,
+          baseX,
+          baseY,
+          zIndex,
+          itemReverseZIndex
+        )
+      : await translateChildren(node.children, baseX, baseY, zIndex, itemReverseZIndex)
   };
 };

plugin-src/transformers/partials/transformLayout.ts

@@ -42,3 +42,11 @@ export const transformLayoutAttributes = (
     'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE'
   };
 };
+
+export const transformLayoutItemZIndex = (
+  zIndex: number
+): Pick<LayoutChildAttributes, 'layoutItemZ-Index'> => {
+  return {
+    'layoutItemZ-Index': zIndex
+  };
+};

plugin-src/transformers/partials/transformVectorPaths.ts

@@ -5,6 +5,7 @@ import {
   transformDimensionAndPositionFromVectorPath,
   transformEffects,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokesFromVector
@@ -34,7 +35,8 @@ export const transformVectorPathsAsContent = (
 export const transformVectorPaths = (
   node: VectorNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): PathShape[] => {
   const pathShapes = node.vectorPaths
     .filter((vectorPath, index) => {
@@ -44,7 +46,14 @@ export const transformVectorPaths = (
       );
     })
     .map((vectorPath, index) =>
-      transformVectorPath(node, vectorPath, (node.vectorNetwork.regions ?? [])[index], baseX, baseY)
+      transformVectorPath(
+        node,
+        vectorPath,
+        (node.vectorNetwork.regions ?? [])[index],
+        baseX,
+        baseY,
+        zIndex
+      )
     );
 
   const geometryShapes = node.fillGeometry
@@ -54,7 +63,7 @@ export const transformVectorPaths = (
           vectorPath => normalizePath(vectorPath.data) === normalizePath(geometry.data)
         )
     )
-    .map(geometry => transformVectorPath(node, geometry, undefined, baseX, baseY));
+    .map(geometry => transformVectorPath(node, geometry, undefined, baseX, baseY, zIndex));
 
   return [...geometryShapes, ...pathShapes];
 };
@@ -91,7 +100,8 @@ const transformVectorPath = (
   vectorPath: VectorPath,
   vectorRegion: VectorRegion | undefined,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): PathShape => {
   const normalizedPaths = parseSVG(vectorPath.data);
 
@@ -106,6 +116,7 @@ const transformVectorPath = (
     },
     constraintsH: 'scale',
     constraintsV: 'scale',
+    ...transformLayoutItemZIndex(zIndex),
     ...transformStrokesFromVector(node, normalizedPaths, vectorRegion),
     ...transformEffects(node),
     ...transformDimensionAndPositionFromVectorPath(vectorPath, baseX, baseY),

plugin-src/transformers/transformBooleanNode.ts

@@ -6,6 +6,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -17,12 +18,14 @@ import { BoolShape } from '@ui/lib/types/shapes/boolShape';
 export const transformBooleanNode = async (
   node: BooleanOperationNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): Promise<BoolShape> => {
   return {
     type: 'bool',
     name: node.name,
     boolType: translateBoolType(node.booleanOperation),
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...(await transformChildren(node, baseX, baseY)),
     ...transformFills(node),

plugin-src/transformers/transformComponentNode.ts

@@ -10,6 +10,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -20,13 +21,15 @@ import { ComponentRoot } from '@ui/types';
 export const transformComponentNode = async (
   node: ComponentNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): Promise<ComponentRoot> => {
   componentsLibrary.register(node.id, {
     type: 'component',
     name: node.name,
     path: node.parent?.type === 'COMPONENT_SET' ? node.parent.name : '',
     showContent: !node.clipsContent,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...transformEffects(node),
@@ -36,7 +39,7 @@ export const transformComponentNode = async (
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
     ...transformCornerRadius(node),
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y, zIndex)),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformConstraints(node),
     ...transformAutoLayout(node)

plugin-src/transformers/transformEllipseNode.ts

@@ -6,6 +6,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -17,11 +18,13 @@ import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 export const transformEllipseNode = (
   node: EllipseNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): CircleShape => {
   return {
     type: 'circle',
     name: node.name,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...transformEffects(node),

plugin-src/transformers/transformFrameNode.ts

@@ -9,6 +9,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -23,7 +24,8 @@ const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node i
 export const transformFrameNode = async (
   node: FrameNode | SectionNode | ComponentSetNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): Promise<FrameShape> => {
   let frameSpecificAttributes: Partial<FrameShape> = {};
 
@@ -48,10 +50,11 @@ export const transformFrameNode = async (
     type: 'frame',
     name: node.name,
     showContent: isSectionNode(node) ? true : !node.clipsContent,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...frameSpecificAttributes,
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y, zIndex)),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node)
   };

plugin-src/transformers/transformGroupNode.ts

@@ -3,6 +3,7 @@ import {
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
+  transformLayoutItemZIndex,
   transformSceneNode
 } from '@plugin/transformers/partials';
 import { transformChildren } from '@plugin/transformers/partials';
@@ -12,11 +13,12 @@ import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 export const transformGroupNode = async (
   node: GroupNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): Promise<GroupShape> => {
   return {
     ...transformFigmaIds(node),
-    ...transformGroupNodeLike(node, baseX, baseY),
+    ...transformGroupNodeLike(node, baseX, baseY, zIndex),
     ...transformEffects(node),
     ...transformBlend(node),
     ...(await transformChildren(node, baseX, baseY))
@@ -26,11 +28,13 @@ export const transformGroupNode = async (
 export const transformGroupNodeLike = (
   node: BaseNodeMixin & DimensionAndPositionMixin & SceneNodeMixin,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): GroupShape => {
   return {
     type: 'group',
     name: node.name,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node)
   };

plugin-src/transformers/transformInstanceNode.ts

@@ -10,6 +10,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -20,7 +21,8 @@ import { ComponentInstance } from '@ui/types';
 export const transformInstanceNode = async (
   node: InstanceNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): Promise<ComponentInstance | undefined> => {
   const mainComponent = await node.getMainComponentAsync();
 
@@ -38,6 +40,7 @@ export const transformInstanceNode = async (
     mainComponentFigmaId: mainComponent.id,
     isComponentRoot: isComponentRoot(node),
     showContent: !node.clipsContent,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...transformEffects(node),
@@ -50,7 +53,7 @@ export const transformInstanceNode = async (
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y))
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y, zIndex))
   };
 };
 

plugin-src/transformers/transformPathNode.ts

@@ -6,6 +6,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformSceneNode,
   transformStrokes,
@@ -21,11 +22,13 @@ const hasFillGeometry = (node: StarNode | LineNode | PolygonNode): boolean => {
 export const transformPathNode = (
   node: StarNode | LineNode | PolygonNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): PathShape => {
   return {
     type: 'path',
     name: node.name,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...(hasFillGeometry(node) ? transformFills(node) : []),
     ...transformStrokes(node),

plugin-src/transformers/transformRectangleNode.ts

@@ -7,6 +7,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutItemZIndex,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -18,11 +19,13 @@ import { RectShape } from '@ui/lib/types/shapes/rectShape';
 export const transformRectangleNode = (
   node: RectangleNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  zIndex: number
 ): RectShape => {
   return {
     type: 'rect',
     name: node.name,
+    ...transformLayoutItemZIndex(zIndex),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...transformEffects(node),

plugin-src/transformers/transformSceneNode.ts

@@ -16,7 +16,8 @@ import {
 export const transformSceneNode = async (
   node: SceneNode,
   baseX: number = 0,
-  baseY: number = 0
+  baseY: number = 0,
+  zIndex: number = 0
 ): Promise<PenpotNode | undefined> => {
   let penpotNode: PenpotNode | undefined;
 
@@ -27,38 +28,38 @@ export const transformSceneNode = async (
 
   switch (node.type) {
     case 'RECTANGLE':
-      penpotNode = transformRectangleNode(node, baseX, baseY);
+      penpotNode = transformRectangleNode(node, baseX, baseY, zIndex);
       break;
     case 'ELLIPSE':
-      penpotNode = transformEllipseNode(node, baseX, baseY);
+      penpotNode = transformEllipseNode(node, baseX, baseY, zIndex);
       break;
     case 'SECTION':
     case 'FRAME':
     case 'COMPONENT_SET':
-      penpotNode = await transformFrameNode(node, baseX, baseY);
+      penpotNode = await transformFrameNode(node, baseX, baseY, zIndex);
       break;
     case 'GROUP':
-      penpotNode = await transformGroupNode(node, baseX, baseY);
+      penpotNode = await transformGroupNode(node, baseX, baseY, zIndex);
       break;
     case 'TEXT':
-      penpotNode = transformTextNode(node, baseX, baseY);
+      penpotNode = transformTextNode(node, baseX, baseY, zIndex);
       break;
     case 'VECTOR':
-      penpotNode = transformVectorNode(node, baseX, baseY);
+      penpotNode = transformVectorNode(node, baseX, baseY, zIndex);
       break;
     case 'STAR':
     case 'POLYGON':
     case 'LINE':
-      penpotNode = transformPathNode(node, baseX, baseY);
+      penpotNode = transformPathNode(node, baseX, baseY, zIndex);
       break;
     case 'BOOLEAN_OPERATION':
-      penpotNode = await transformBooleanNode(node, baseX, baseY);
+      penpotNode = await transformBooleanNode(node, baseX, baseY, zIndex);
       break;
     case 'COMPONENT':
-      penpotNode = await transformComponentNode(node, baseX, baseY);
+      penpotNode = await transformComponentNode(node, baseX, baseY, zIndex);
       break;
     case 'INSTANCE':
-      penpotNode = await transformInstanceNode(node, baseX, baseY);
+      penpotNode = await transformInstanceNode(node, baseX, baseY, zIndex);
       break;
   }