Merge pull request #21 from Runroom/feature/rect-shape

Rectangle & Circle

.eslintrc.cjs

@@ -18,5 +18,8 @@ module.exports = {
     react: {
       version: 'detect'
     }
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }]
   }
 };

plugin-src/transformers/partials/index.ts

@@ -0,0 +1,4 @@
+export * from './transformBlend';
+export * from './transformChildren';
+export * from './transformDimensionAndPosition';
+export * from './transformSceneNode';

plugin-src/transformers/partials/transformBlend.ts

@@ -0,0 +1,12 @@
+import { translateBlendMode } from '@plugin/translators';
+
+import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+
+export const transformBlend = (
+  node: SceneNodeMixin & MinimalBlendMixin
+): Partial<ShapeAttributes> => {
+  return {
+    blendMode: translateBlendMode(node.blendMode),
+    opacity: !node.visible ? 0 : node.opacity // @TODO: check this. If we use the property hidden and it's hidden, it won't export
+  };
+};

plugin-src/transformers/partials/transformChildren.ts

@@ -0,0 +1,13 @@
+import { transformSceneNode } from '@plugin/transformers';
+
+import { Children } from '@ui/lib/types/utils/children';
+
+export const transformChildren = async (
+  node: ChildrenMixin,
+  baseX: number = 0,
+  baseY: number = 0
+): Promise<Children> => {
+  return {
+    children: await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY)))
+  };
+};

plugin-src/transformers/partials/transformDimensionAndPosition.ts

@@ -0,0 +1,14 @@
+import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
+
+export const transformDimensionAndPosition = (
+  node: DimensionAndPositionMixin,
+  baseX: number,
+  baseY: number
+): ShapeGeomAttributes => {
+  return {
+    x: node.x + baseX,
+    y: node.y + baseY,
+    width: node.width,
+    height: node.height
+  };
+};

plugin-src/transformers/partials/transformSceneNode.ts

@@ -0,0 +1,8 @@
+import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+
+export const transformSceneNode = (node: SceneNodeMixin): Partial<ShapeAttributes> => {
+  return {
+    blocked: node.locked,
+    hidden: false // @TODO: check this. it won't export if we hide it
+  };
+};

plugin-src/transformers/transformEllipseNode.ts

@@ -1,3 +1,8 @@
+import {
+  transformBlend,
+  transformDimensionAndPosition,
+  transformSceneNode
+} from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators';
 
 import { CircleShape } from '@ui/lib/types/circle/circleShape';
@@ -10,10 +15,9 @@ export const transformEllipseNode = (
   return {
     type: 'circle',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
-    fills: translateFills(node.fills, node.width, node.height)
+    fills: translateFills(node.fills, node.width, node.height),
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformSceneNode(node),
+    ...transformBlend(node)
   };
 };

plugin-src/transformers/transformFrameNode.ts

@@ -1,9 +1,9 @@
+import { transformDimensionAndPosition, transformSceneNode } from '@plugin/transformers/partials';
+import { transformChildren } from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators';
 
 import { FrameShape } from '@ui/lib/types/frame/frameShape';
 
-import { transformSceneNode } from '.';
-
 export const transformFrameNode = async (
   node: FrameNode,
   baseX: number,
@@ -12,13 +12,9 @@ export const transformFrameNode = async (
   return {
     type: 'frame',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     fills: translateFills(node.fills, node.width, node.height),
-    children: await Promise.all(
-      node.children.map(child => transformSceneNode(child, baseX + node.x, baseY + node.y))
-    )
+    ...(await transformChildren(node, baseX, baseY)),
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformSceneNode(node)
   };
 };

plugin-src/transformers/transformGroupNode.ts

@@ -1,6 +1,11 @@
-import { GroupShape } from '@ui/lib/types/group/groupShape';
+import {
+  transformBlend,
+  transformDimensionAndPosition,
+  transformSceneNode
+} from '@plugin/transformers/partials';
+import { transformChildren } from '@plugin/transformers/partials';
 
-import { transformSceneNode } from './transformSceneNode';
+import { GroupShape } from '@ui/lib/types/group/groupShape';
 
 export const transformGroupNode = async (
   node: GroupNode,
@@ -10,6 +15,9 @@ export const transformGroupNode = async (
   return {
     type: 'group',
     name: node.name,
-    children: await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY)))
+    ...(await transformChildren(node, baseX, baseY)),
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformSceneNode(node),
+    ...transformBlend(node)
   };
 };

plugin-src/transformers/transformImageNode.ts

@@ -1,3 +1,4 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { detectMimeType } from '@plugin/utils';
 
 import { ImageShape } from '@ui/lib/types/image/imageShape';
@@ -17,14 +18,11 @@ export const transformImageNode = async (
   return {
     type: 'image',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     metadata: {
       width: node.width,
       height: node.height
     },
-    dataUri: dataUri
+    dataUri: dataUri,
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/transformers/transformPageNode.ts

@@ -1,10 +1,10 @@
-import { PenpotPage } from '@ui/lib/types/penpotPage';
+import { transformChildren } from '@plugin/transformers/partials';
 
-import { transformSceneNode } from '.';
+import { PenpotPage } from '@ui/lib/types/penpotPage';
 
 export const transformPageNode = async (node: PageNode): Promise<PenpotPage> => {
   return {
     name: node.name,
-    children: await Promise.all(node.children.map(child => transformSceneNode(child)))
+    ...(await transformChildren(node))
   };
 };

plugin-src/transformers/transformRectangleNode.ts

@@ -1,3 +1,8 @@
+import {
+  transformBlend,
+  transformDimensionAndPosition,
+  transformSceneNode
+} from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators';
 
 import { RectShape } from '@ui/lib/types/rect/rectShape';
@@ -10,10 +15,9 @@ export const transformRectangleNode = (
   return {
     type: 'rect',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
-    fills: translateFills(node.fills, node.width, node.height)
+    fills: translateFills(node.fills, node.width, node.height),
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformSceneNode(node),
+    ...transformBlend(node)
   };
 };

plugin-src/transformers/transformTextNode.ts

@@ -1,3 +1,8 @@
+import {
+  transformBlend,
+  transformDimensionAndPosition,
+  transformSceneNode
+} from '@plugin/transformers/partials';
 import {
   translateFills,
   translateTextDecoration,
@@ -37,10 +42,6 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
   return {
     type: 'text',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     content: {
       type: 'root',
       children: [
@@ -61,6 +62,9 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
           ]
         }
       ]
-    }
+    },
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformSceneNode(node),
+    ...transformBlend(node)
   };
 };

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) {
+    //@TODO: is not translatable in penpot, this is the closest one
+    case 'PASS_THROUGH':
+    case 'NORMAL':
+      return 'normal';
+    //@TODO: is not translatable in penpot, this is the closest one
+    case 'LINEAR_BURN':
+    case 'DARKEN':
+      return 'darken';
+    case 'MULTIPLY':
+      return 'multiply';
+    case 'COLOR_BURN':
+      return 'color-burn';
+    case 'LIGHTEN':
+      return 'lighten';
+    case 'SCREEN':
+      return 'screen';
+    //@TODO: is not translatable in penpot, this is the closest one
+    case 'LINEAR_DODGE':
+    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/createPenpotArtboard.ts

@@ -6,7 +6,6 @@ import { createPenpotItem } from '.';
 
 export const createPenpotArtboard = (
   file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   { type, children = [], ...rest }: FrameShape
 ) => {
   file.addArtboard({

ui-src/converters/createPenpotCircle.ts

@@ -2,13 +2,16 @@ import { PenpotFile } from '@ui/lib/penpot';
 import { CIRCLE_TYPE } from '@ui/lib/types/circle/circleAttributes';
 import { CircleShape } from '@ui/lib/types/circle/circleShape';
 
-import { translateFillGradients } from '../translators';
+import { translateFillGradients, translateUiBlendMode } from '../translators';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const createPenpotCircle = (file: PenpotFile, { type, fills, ...rest }: CircleShape) => {
+export const createPenpotCircle = (
+  file: PenpotFile,
+  { type, fills, blendMode, ...rest }: CircleShape
+) => {
   file.createCircle({
     type: CIRCLE_TYPE,
     fills: translateFillGradients(fills),
+    blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
 };

ui-src/converters/createPenpotGroup.ts

@@ -1,16 +1,17 @@
 import { PenpotFile } from '@ui/lib/penpot';
 import { GROUP_TYPE } from '@ui/lib/types/group/groupAttributes';
 import { GroupShape } from '@ui/lib/types/group/groupShape';
+import { translateUiBlendMode } from '@ui/translators';
 
 import { createPenpotItem } from '.';
 
 export const createPenpotGroup = (
   file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  { type, children = [], ...rest }: GroupShape
+  { type, blendMode, children = [], ...rest }: GroupShape
 ) => {
   file.addGroup({
     type: GROUP_TYPE,
+    blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
 

ui-src/converters/createPenpotImage.ts

@@ -2,7 +2,6 @@ import { PenpotFile } from '@ui/lib/penpot';
 import { IMAGE_TYPE } from '@ui/lib/types/image/imageAttributes';
 import { ImageShape } from '@ui/lib/types/image/imageShape';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createPenpotImage = (file: PenpotFile, { type, ...rest }: ImageShape) => {
   file.createImage({
     type: IMAGE_TYPE,

ui-src/converters/createPenpotRectangle.ts

@@ -1,13 +1,16 @@
 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';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const createPenpotRectangle = (file: PenpotFile, { type, fills, ...rest }: RectShape) => {
+export const createPenpotRectangle = (
+  file: PenpotFile,
+  { type, fills, blendMode, ...rest }: RectShape
+) => {
   file.createRect({
     type: RECT_TYPE,
     fills: translateFillGradients(fills),
+    blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
 };

ui-src/converters/createPenpotText.ts

@@ -1,14 +1,12 @@
 import { PenpotFile } from '@ui/lib/penpot';
 import { TEXT_TYPE } from '@ui/lib/types/text/textAttributes';
 import { TextShape } from '@ui/lib/types/text/textShape';
+import { translateUiBlendMode } from '@ui/translators';
 
-export const createPenpotText = (
-  file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  { type, ...rest }: TextShape
-) => {
+export const createPenpotText = (file: PenpotFile, { type, blendMode, ...rest }: TextShape) => {
   file.createText({
     type: TEXT_TYPE,
+    blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
 };

ui-src/lib/penpot.d.ts

@@ -36,8 +36,7 @@ export interface PenpotFile {
   // lookupShape(shapeId: string): void;
   // updateObject(id: string, object: any): void;
   // deleteObject(id: string): void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  asMap(): any;
+  asMap(): unknown;
   export(): void;
 }