Merge branch 'feature/rect-shape' of github.com:Runroom/penpot-exporter-figma-plugin into feature/rect-shape

plugin-src/transformers/transformRectangleNode.ts

@@ -1,5 +1,5 @@
 import { transformDimensionAndPosition } from '@plugin/transformers/partials';
-import { translateFills } from '@plugin/translators';
+import { translateBlendMode, translateFills } from '@plugin/translators';
 
 import { RectShape } from '@ui/lib/types/rect/rectShape';
 
@@ -12,6 +12,7 @@ export const transformRectangleNode = (
     type: 'rect',
     name: node.name,
     fills: translateFills(node.fills, node.width, node.height),
+    blendMode: translateBlendMode(node.blendMode),
     ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/translators/index.ts

@@ -3,3 +3,4 @@ export * from './translateGradientLinearFill';
 export * from './translateSolidFill';
 export * from './translateTextDecoration';
 export * from './translateTextTransform';
+export * from './translateBlendMode';

plugin-src/translators/translateBlendMode.ts

@@ -0,0 +1,46 @@
+import { BlendMode as PenpotBlendMode } from '@ui/lib/types/utils/blendModes';
+
+export const translateBlendMode = (blendMode: BlendMode): PenpotBlendMode => {
+  switch (blendMode) {
+    case 'PASS_THROUGH':
+      return 'normal';
+    case 'NORMAL':
+      return 'normal';
+    case 'DARKEN':
+      return 'darken';
+    case 'MULTIPLY':
+      return 'multiply';
+    case 'LINEAR_BURN':
+      return 'darken'; //@TODO: is not translatable in penpot, this is the closest one
+    case 'COLOR_BURN':
+      return 'color-burn';
+    case 'LIGHTEN':
+      return 'lighten';
+    case 'LINEAR_DODGE':
+      return 'color-dodge'; //@TODO: is not translatable in penpot, this is the closest one
+    case 'SCREEN':
+      return 'screen';
+    case 'COLOR_DODGE':
+      return 'color-dodge';
+    case 'OVERLAY':
+      return 'overlay';
+    case 'SOFT_LIGHT':
+      return 'soft-light';
+    case 'HARD_LIGHT':
+      return 'hard-light';
+    case 'DIFFERENCE':
+      return 'difference';
+    case 'EXCLUSION':
+      return 'exclusion';
+    case 'HUE':
+      return 'hue';
+    case 'SATURATION':
+      return 'saturation';
+    case 'COLOR':
+      return 'color';
+    case 'LUMINOSITY':
+      return 'luminosity';
+    default:
+      return 'normal';
+  }
+};

ui-src/converters/createPenpotRectangle.ts

@@ -1,12 +1,17 @@
 import { PenpotFile } from '@ui/lib/penpot';
 import { RECT_TYPE } from '@ui/lib/types/rect/rectAttributes';
 import { RectShape } from '@ui/lib/types/rect/rectShape';
-import { translateFillGradients } from '@ui/translators';
+import { translateFillGradients, translateUiBlendMode } from '@ui/translators';
 
-export const createPenpotRectangle = (file: PenpotFile, { type, fills, ...rest }: RectShape) => {
+export const createPenpotRectangle = (
+  file: PenpotFile,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { type, fills, blendMode, ...rest }: RectShape
+) => {
   file.createRect({
     type: RECT_TYPE,
     fills: translateFillGradients(fills),
+    blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
 };

ui-src/lib/types/shape/shapeAttributes.d.ts

@@ -1,3 +1,4 @@
+import { BlendMode } from '@ui/lib/types/utils/blendModes';
 import { Blur } from '@ui/lib/types/utils/blur';
 import { Export } from '@ui/lib/types/utils/export';
 import { Fill } from '@ui/lib/types/utils/fill';
@@ -47,7 +48,7 @@ export type ShapeAttributes = {
   strokes?: Stroke[];
   transform?: Matrix;
   transformInverse?: Matrix;
-  blendMode?: string;
+  blendMode?: BlendMode;
   interactions?: Interaction[];
   shadow?: Shadow[];
   blur?: Blur;

ui-src/lib/types/utils/blendModes.ts

@@ -0,0 +1,50 @@
+export const BLEND_MODE_NORMAL: unique symbol = Symbol.for('normal');
+export const BLEND_MODE_DARKEN: unique symbol = Symbol.for('darken');
+export const BLEND_MODE_MULTIPLY: unique symbol = Symbol.for('multiply');
+export const BLEND_MODE_COLOR_BURN: unique symbol = Symbol.for('color-burn');
+export const BLEND_MODE_LIGHTEN: unique symbol = Symbol.for('lighten');
+export const BLEND_MODE_SCREEN: unique symbol = Symbol.for('screen');
+export const BLEND_MODE_COLOR_DODGE: unique symbol = Symbol.for('color-dodge');
+export const BLEND_MODE_OVERLAY: unique symbol = Symbol.for('overlay');
+export const BLEND_MODE_SOFT_LIGHT: unique symbol = Symbol.for('soft-light');
+export const BLEND_MODE_HARD_LIGHT: unique symbol = Symbol.for('hard-light');
+export const BLEND_MODE_DIFFERENCE: unique symbol = Symbol.for('difference');
+export const BLEND_MODE_EXCLUSION: unique symbol = Symbol.for('exclusion');
+export const BLEND_MODE_HUE: unique symbol = Symbol.for('hue');
+export const BLEND_MODE_SATURATION: unique symbol = Symbol.for('saturation');
+export const BLEND_MODE_COLOR: unique symbol = Symbol.for('color');
+export const BLEND_MODE_LUMINOSITY: unique symbol = Symbol.for('luminosity');
+
+export type BlendMode =
+  | 'normal'
+  | 'darken'
+  | 'multiply'
+  | 'color-burn'
+  | 'lighten'
+  | 'screen'
+  | 'color-dodge'
+  | 'overlay'
+  | 'soft-light'
+  | 'hard-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity'
+  | typeof BLEND_MODE_NORMAL
+  | typeof BLEND_MODE_DARKEN
+  | typeof BLEND_MODE_MULTIPLY
+  | typeof BLEND_MODE_COLOR_BURN
+  | typeof BLEND_MODE_LIGHTEN
+  | typeof BLEND_MODE_SCREEN
+  | typeof BLEND_MODE_COLOR_DODGE
+  | typeof BLEND_MODE_OVERLAY
+  | typeof BLEND_MODE_SOFT_LIGHT
+  | typeof BLEND_MODE_HARD_LIGHT
+  | typeof BLEND_MODE_DIFFERENCE
+  | typeof BLEND_MODE_EXCLUSION
+  | typeof BLEND_MODE_HUE
+  | typeof BLEND_MODE_SATURATION
+  | typeof BLEND_MODE_COLOR
+  | typeof BLEND_MODE_LUMINOSITY;

ui-src/translators/index.ts

@@ -2,3 +2,4 @@ export * from './translateFontStyle';
 export * from './translateHorizontalAlign';
 export * from './translateVerticalAlign';
 export * from './translateFillGradients';
+export * from './translateUiBlendMode';

ui-src/translators/translateUiBlendMode.ts

@@ -0,0 +1,59 @@
+import {
+  BLEND_MODE_COLOR_BURN,
+  BLEND_MODE_COLOR_DODGE,
+  BLEND_MODE_DARKEN,
+  BLEND_MODE_DIFFERENCE,
+  BLEND_MODE_EXCLUSION,
+  BLEND_MODE_HARD_LIGHT,
+  BLEND_MODE_HUE,
+  BLEND_MODE_LIGHTEN,
+  BLEND_MODE_LUMINOSITY,
+  BLEND_MODE_MULTIPLY,
+  BLEND_MODE_NORMAL,
+  BLEND_MODE_OVERLAY,
+  BLEND_MODE_SATURATION,
+  BLEND_MODE_SCREEN,
+  BLEND_MODE_SOFT_LIGHT,
+  BlendMode
+} from '@ui/lib/types/utils/blendModes';
+
+export const translateUiBlendMode = (blendMode?: BlendMode): BlendMode | undefined => {
+  if (!blendMode) return blendMode;
+
+  switch (blendMode) {
+    case 'normal':
+      return BLEND_MODE_NORMAL;
+    case 'darken':
+      return BLEND_MODE_DARKEN;
+    case 'multiply':
+      return BLEND_MODE_MULTIPLY;
+    case 'color-burn':
+      return BLEND_MODE_COLOR_BURN;
+    case 'lighten':
+      return BLEND_MODE_LIGHTEN;
+    case 'screen':
+      return BLEND_MODE_SCREEN;
+    case 'color-dodge':
+      return BLEND_MODE_COLOR_DODGE;
+    case 'overlay':
+      return BLEND_MODE_OVERLAY;
+    case 'soft-light':
+      return BLEND_MODE_SOFT_LIGHT;
+    case 'hard-light':
+      return BLEND_MODE_HARD_LIGHT;
+    case 'difference':
+      return BLEND_MODE_DIFFERENCE;
+    case 'exclusion':
+      return BLEND_MODE_EXCLUSION;
+    case 'hue':
+      return BLEND_MODE_HUE;
+    case 'saturation':
+      return BLEND_MODE_SATURATION;
+    case 'color':
+      return BLEND_MODE_COLOR_BURN;
+    case 'luminosity':
+      return BLEND_MODE_LUMINOSITY;
+    default:
+      return BLEND_MODE_NORMAL;
+  }
+};