Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] ZIndex #162

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Next Next commit
wip
Cenadros committed Jun 10, 2024
commit 9053ba9226f6db632c07013b6621a081102d0c3e
1 change: 1 addition & 0 deletions plugin-src/transformers/partials/index.ts
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ export * from './transformDimensionAndPosition';
export * from './transformEffects';
export * from './transformFigmaIds';
export * from './transformFills';
export * from './transformLayout';
export * from './transformProportion';
export * from './transformRotationAndPosition';
export * from './transformSceneNode';
25 changes: 25 additions & 0 deletions plugin-src/transformers/partials/transformLayout.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {
translateLayoutFlexDir,
translateLayoutGap,
translateLayoutJustifyContent,
translateLayoutJustifyItems,
translateLayoutPadding,
translateLayoutWrapType
} from '@plugin/translators';

import { LayoutAttributes } from '@ui/lib/types/shapes/layout';

export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
console.log(node);
return {
layout: node.layoutMode !== 'NONE' ? 'flex' : undefined,
layoutFlexDir: translateLayoutFlexDir(node.layoutMode),
layoutGap: translateLayoutGap(node.layoutMode, node.itemSpacing),
layoutWrapType: translateLayoutWrapType(node.layoutWrap),
layoutPadding: translateLayoutPadding(node),
layoutJustifyContent: translateLayoutJustifyContent(node),
layoutJustifyItems: translateLayoutJustifyItems(node),
layoutAlignContent: translateLayoutJustifyContent(node),
layoutAlignItems: translateLayoutJustifyItems(node)
};
};
4 changes: 3 additions & 1 deletion plugin-src/transformers/transformFrameNode.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
transformAutoLayout,
transformBlend,
transformChildren,
transformConstraints,
@@ -36,7 +37,8 @@ export const transformFrameNode = async (
...transformProportion(node),
...transformCornerRadius(node),
...transformEffects(node),
...transformConstraints(node)
...transformConstraints(node),
...transformAutoLayout(node)
};
}

1 change: 1 addition & 0 deletions plugin-src/translators/index.ts
Original file line number Diff line number Diff line change
@@ -3,5 +3,6 @@ export * from './translateBlurEffects';
export * from './translateBoolType';
export * from './translateChildren';
export * from './translateConstraints';
export * from './translateLayout';
export * from './translateShadowEffects';
export * from './translateStrokes';
75 changes: 75 additions & 0 deletions plugin-src/translators/translateLayout.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import {
JustifyAlignContent,
JustifyAlignItems,
LayoutFlexDir,
LayoutGap,
LayoutPadding,
LayoutWrapType
} from '@ui/lib/types/shapes/layout';

type FigmaLayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL';

type FigmaWrap = 'NO_WRAP' | 'WRAP';
export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
switch (layoutMode) {
case 'HORIZONTAL':
return 'row-reverse';
case 'VERTICAL':
return 'column-reverse';
default:
return;
}
};

export const translateLayoutGap = (layoutMode: FigmaLayoutMode, itemSpacing: number): LayoutGap => {
return {
rowGap: layoutMode === 'VERTICAL' ? itemSpacing : 0,
columnGap: layoutMode === 'HORIZONTAL' ? itemSpacing : 0
};
};

export const translateLayoutWrapType = (wrap: FigmaWrap): LayoutWrapType => {
switch (wrap) {
case 'NO_WRAP':
return 'nowrap';
case 'WRAP':
return 'wrap';
}
};

export const translateLayoutPadding = (node: BaseFrameMixin): LayoutPadding => {
return {
p1: node.paddingTop,
p2: node.paddingRight,
p3: node.paddingBottom,
p4: node.paddingLeft
};
};

export const translateLayoutJustifyContent = (node: BaseFrameMixin): JustifyAlignContent => {
switch (node.primaryAxisAlignItems) {
case 'MIN':
return 'start';
case 'CENTER':
return 'center';
case 'MAX':
return 'end';
case 'SPACE_BETWEEN':
return 'space-between';
default:
return 'stretch';
}
};

export const translateLayoutJustifyItems = (node: BaseFrameMixin): JustifyAlignItems => {
switch (node.counterAxisAlignItems) {
case 'MIN':
return 'start';
case 'CENTER':
return 'center';
case 'MAX':
return 'end';
default:
return 'stretch';
}
};
48 changes: 28 additions & 20 deletions ui-src/lib/types/shapes/layout.ts
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ export type LayoutChildAttributes = {
layoutItemZIndex?: number;
};

type JustifyAlignContent =
export type JustifyAlignContent =
| 'start'
| 'center'
| 'end'
@@ -65,30 +65,38 @@ type JustifyAlignContent =
| 'space-evenly'
| 'stretch';

type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
export type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';

export type LayoutFlexDir =
| 'row'
| 'reverse-row'
| 'row-reverse'
| 'column'
| 'reverse-column'
| 'column-reverse';

export type LayoutGap = {
rowGap?: number;
columnGap?: number;
};

export type LayoutWrapType = 'wrap' | 'nowrap' | 'no-wrap';

export type LayoutPadding = {
p1?: number;
p2?: number;
p3?: number;
p4?: number;
};

export type LayoutAttributes = {
layout?: 'flex' | 'grid';
layoutFlexDir?:
| 'row'
| 'reverse-row'
| 'row-reverse'
| 'column'
| 'reverse-column'
| 'column-reverse';
layoutGap?: {
rowGap?: number;
columnGap?: number;
};
layoutFlexDir?: LayoutFlexDir;
layoutGap?: LayoutGap;
layoutGapType?: 'simple' | 'multiple';
layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
layoutWrapType?: LayoutWrapType;
layoutPaddingType?: 'simple' | 'multiple';
layoutPadding?: {
p1?: number;
p2?: number;
p3?: number;
p4?: number;
};
layoutPadding?: LayoutPadding;
layoutJustifyContent?: JustifyAlignContent;
layoutJustifyItems?: JustifyAlignItems;
layoutAlignContent?: JustifyAlignContent;