Additional layout properties (#190)

* additional layout properties

* changeset

.changeset/five-teachers-cheat.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Add additional layout properties

plugin-src/transformers/partials/transformLayout.ts

@@ -3,9 +3,11 @@ import {
   translateLayoutAlignItems,
   translateLayoutFlexDir,
   translateLayoutGap,
+  translateLayoutItemAlignSelf,
   translateLayoutJustifyContent,
   translateLayoutJustifyItems,
   translateLayoutPadding,
+  translateLayoutPaddingType,
   translateLayoutSizing,
   translateLayoutWrapType
 } from '@plugin/translators';
@@ -23,6 +25,7 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
     ),
     layoutWrapType: translateLayoutWrapType(node.layoutWrap),
     layoutPadding: translateLayoutPadding(node),
+    layoutPaddingType: translateLayoutPaddingType(node),
     layoutJustifyContent: translateLayoutJustifyContent(node),
     layoutJustifyItems: translateLayoutJustifyItems(node),
     layoutAlignContent: translateLayoutAlignContent(node),
@@ -37,6 +40,7 @@ export const transformLayoutAttributes = (
   LayoutChildAttributes,
   | 'layoutItemH-Sizing'
   | 'layoutItemV-Sizing'
+  | 'layoutItemAlignSelf'
   | 'layoutItemAbsolute'
   | 'layoutItemMaxH'
   | 'layoutItemMinH'
@@ -46,6 +50,7 @@ export const transformLayoutAttributes = (
   return {
     'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
     'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical, isFrame),
+    'layoutItemAlignSelf': translateLayoutItemAlignSelf(node.layoutAlign),
     'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
     'layoutItemMaxH': node.maxHeight ?? undefined,
     'layoutItemMinH': node.minHeight ?? undefined,

plugin-src/translators/translateLayout.ts

@@ -1,6 +1,7 @@
 import {
   JustifyAlignContent,
   JustifyAlignItems,
+  LayoutAlignSelf,
   LayoutFlexDir,
   LayoutGap,
   LayoutPadding,
@@ -14,6 +15,8 @@ type FigmaWrap = 'NO_WRAP' | 'WRAP';
 
 type FigmaLayoutSizing = 'FIXED' | 'HUG' | 'FILL';
 
+type FigmaLayoutAlign = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'INHERIT';
+
 export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
   switch (layoutMode) {
     case 'HORIZONTAL':
@@ -61,6 +64,14 @@ export const translateLayoutPadding = (node: BaseFrameMixin): LayoutPadding => {
   };
 };
 
+export const translateLayoutPaddingType = (node: BaseFrameMixin): 'simple' | 'multiple' => {
+  if (node.paddingTop === node.paddingBottom && node.paddingRight === node.paddingLeft) {
+    return 'simple';
+  }
+
+  return 'multiple';
+};
+
 export const translateLayoutJustifyContent = (node: BaseFrameMixin): JustifyAlignContent => {
   switch (node.primaryAxisAlignItems) {
     case 'MIN':
@@ -128,3 +139,16 @@ export const translateLayoutSizing = (
       return isFrame ? 'fix' : 'fill'; // @TODO: Penpot does not handle fill in frames as figma does
   }
 };
+
+export const translateLayoutItemAlignSelf = (align: FigmaLayoutAlign): LayoutAlignSelf => {
+  switch (align) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};

ui-src/lib/types/shapes/layout.ts

@@ -2,6 +2,8 @@ import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export type LayoutSizing = 'fill' | 'fix' | 'auto';
 
+export type LayoutAlignSelf = 'start' | 'end' | 'center' | 'stretch';
+
 export type LayoutChildAttributes = {
   'layoutItemMarginType'?: 'simple' | 'multiple';
   'layoutItemMargin'?: {
@@ -16,7 +18,7 @@ export type LayoutChildAttributes = {
   'layoutItemMinW'?: number;
   'layoutItemH-Sizing'?: LayoutSizing;
   'layoutItemV-Sizing'?: LayoutSizing;
-  'layoutItemAlignSelf'?: 'start' | 'end' | 'center' | 'stretch';
+  'layoutItemAlignSelf'?: LayoutAlignSelf;
   'layoutItemAbsolute'?: boolean;
   'layoutItemZIndex'?: number;
 };