Strokes (#44)

* strokes

* adjust a few types

* simplify

---------

Co-authored-by: Jordi Sala Morales <jordism91@gmail.com>

plugin-src/transformers/partials/transformStrokes.ts

@@ -6,19 +6,25 @@ const isVectorLike = (node: GeometryMixin | VectorLikeMixin): node is VectorLike
   return 'vectorNetwork' in node;
 };
 
-const hasFillGeometry = (node: GeometryMixin | (GeometryMixin & VectorLikeMixin)): boolean => {
+const isIndividualStrokes = (
+  node: GeometryMixin | IndividualStrokesMixin
+): node is IndividualStrokesMixin => {
+  return 'strokeTopWeight' in node;
+};
+
+const hasFillGeometry = (node: GeometryMixin): boolean => {
   return node.fillGeometry.length > 0;
 };
 
 export const transformStrokes = (
-  node: GeometryMixin | (GeometryMixin & VectorLikeMixin)
+  node: GeometryMixin | (GeometryMixin & IndividualStrokesMixin)
 ): Partial<ShapeAttributes> => {
   return {
     strokes: translateStrokes(
-      node.strokes,
+      node,
-      node.strokeWeight,
       hasFillGeometry(node),
-      isVectorLike(node) ? node.vectorNetwork : undefined
+      isVectorLike(node) ? node.vectorNetwork : undefined,
+      isIndividualStrokes(node) ? node : undefined
     )
   };
 };

plugin-src/translators/translateStrokes.ts

@@ -1,19 +1,21 @@
 import { translateFill } from '@plugin/translators/translateFills';
 
-import { Stroke, StrokeCaps } from '@ui/lib/types/utils/stroke';
+import { Stroke, StrokeAlignment, StrokeCaps } from '@ui/lib/types/utils/stroke';
 
 export const translateStrokes = (
-  paints: readonly Paint[],
+  nodeStrokes: MinimalStrokesMixin,
-  strokeWeight: number | typeof figma.mixed,
   hasFillGeometry?: boolean,
-  vectorNetwork?: VectorNetwork
+  vectorNetwork?: VectorNetwork,
+  individualStrokes?: IndividualStrokesMixin
 ): Stroke[] => {
-  return paints.map((paint, index) => {
+  return nodeStrokes.strokes.map((paint, index) => {
     const fill = translateFill(paint, 0, 0);
     const stroke: Stroke = {
       strokeColor: fill?.fillColor,
       strokeOpacity: fill?.fillOpacity,
-      strokeWidth: strokeWeight === figma.mixed ? 1 : strokeWeight
+      strokeWidth: translateStrokeWeight(nodeStrokes.strokeWeight, individualStrokes),
+      strokeAlignment: translateStrokeAlignment(nodeStrokes.strokeAlign),
+      strokeStyle: nodeStrokes.dashPattern.length ? 'dashed' : 'solid'
     };
 
     if (!hasFillGeometry && index === 0 && vectorNetwork && vectorNetwork.vertices.length) {
@@ -27,6 +29,39 @@ export const translateStrokes = (
   });
 };
 
+const translateStrokeWeight = (
+  strokeWeight: number | typeof figma.mixed,
+  individualStrokes?: IndividualStrokesMixin
+): number => {
+  if (strokeWeight !== figma.mixed) {
+    return strokeWeight;
+  }
+
+  if (!individualStrokes) {
+    return 1;
+  }
+
+  return Math.max(
+    individualStrokes.strokeTopWeight,
+    individualStrokes.strokeRightWeight,
+    individualStrokes.strokeBottomWeight,
+    individualStrokes.strokeLeftWeight
+  );
+};
+
+const translateStrokeAlignment = (
+  strokeAlign: 'CENTER' | 'INSIDE' | 'OUTSIDE'
+): StrokeAlignment => {
+  switch (strokeAlign) {
+    case 'CENTER':
+      return 'center';
+    case 'INSIDE':
+      return 'inner';
+    case 'OUTSIDE':
+      return 'outer';
+  }
+};
+
 const translateStrokeCap = (vertex: VectorVertex): StrokeCaps | undefined => {
   switch (vertex.strokeCap as StrokeCap | ConnectorStrokeCap) {
     case 'NONE':