feat(spacing): add strokeCaps to spacings

ph1p · Jul 29, 2022 · 274266a · 274266a
1 parent aa609b1
commit 274266a
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 3 deletions.
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -450,6 +450,7 @@ const setMeasurements = async (
               labels: settings.labels,
               labelsOutside: settings.labelsOutside,
               labelPattern: settings.labelPattern,
+              strokeCap: settings.strokeCap,
               // strokeOffset: settings.strokeOffset,
             }
           );

diff --git a/src/main/line.ts b/src/main/line.ts
@@ -1,5 +1,6 @@
 import { findAndReplaceNumberPattern } from '../shared/helpers';
 import { Alignments, LineParameterTypes } from '../shared/interfaces';
+import Line from '../views/Home/components/Viewer/components/Line';
 
 import { getColor, solidColor } from './helper';
 
@@ -74,6 +75,49 @@ export const getLineFrame = (node, data) => {
   return lineFrame;
 };
 
+export const createStandardCapForSpacing = ({
+  line,
+  height,
+  width,
+  mainColor,
+  isHorizontal = false,
+  isFirst = false,
+}) => {
+  const transformPosition = line.absoluteTransform;
+  const lineX = transformPosition[0][2];
+  const lineY = transformPosition[1][2];
+
+  const strokeCapWidth = line.strokeWeight + 6;
+
+  const strokeCapLine = figma.createLine();
+  strokeCapLine.relativeTransform = transformPosition;
+  strokeCapLine.strokeWeight = line.strokeWeight;
+  strokeCapLine.strokes = [].concat(mainColor);
+  strokeCapLine.resize(strokeCapWidth, 0);
+
+  if (!isHorizontal) {
+    if (isFirst) {
+      strokeCapLine.x = lineX - strokeCapWidth / 2;
+      strokeCapLine.y += strokeCapLine.strokeWeight;
+    } else {
+      strokeCapLine.x = lineX - strokeCapWidth / 2;
+      strokeCapLine.y += height;
+    }
+  } else {
+    if (isFirst) {
+      strokeCapLine.rotation = 90;
+      strokeCapLine.x += strokeCapLine.strokeWeight;
+      strokeCapLine.y = lineY + strokeCapWidth / 2;
+    } else {
+      strokeCapLine.rotation = 90;
+      strokeCapLine.x += width;
+      strokeCapLine.y = lineY + strokeCapWidth / 2;
+    }
+  }
+
+  return strokeCapLine;
+};
+
 export const createStandardCap = ({
   group,
   line,
@@ -89,6 +133,7 @@ export const createStandardCap = ({
 
   group.appendChild(firstMeasureLine);
   group.appendChild(secondMeasureLine);
+
   const strokeCapWidth = line.strokeWeight + 6;
 
   firstMeasureLine.strokes = [].concat(mainColor);

diff --git a/src/main/spacing.ts b/src/main/spacing.ts
@@ -7,7 +7,7 @@ import {
   getColor,
   getRenderBoundsOfRectangle,
 } from './helper';
-import { createLabel } from './line';
+import { createLabel, createStandardCapForSpacing } from './line';
 import { getState } from './store';
 
 export const getSpacing = (node: SceneNode) => {
@@ -33,7 +33,7 @@ EventEmitter.on('remove spacing', () => {
       setSpacing(node, spacing);
       try {
         group.remove();
-      } catch {
+      } catch (e) {
         console.log('could not remove group');
       }
 
@@ -101,7 +101,13 @@ const getShapeValues = (shape) => {
 
 export const drawSpacing = async (
   rects: SceneNode[],
-  { color = '', labels = true, labelPattern = '', labelsOutside = false }
+  {
+    color = '',
+    labels = true,
+    labelPattern = '',
+    labelsOutside = false,
+    strokeCap = 'NONE',
+  }
 ) => {
   const state = await getState();
   const LABEL_OUTSIDE_MARGIN = 4 * (state.labelFontSize / 10);
@@ -243,6 +249,49 @@ export const drawSpacing = async (
     ];
     line1.strokes = [].concat(mainColor);
     line1.strokeWeight = STROKE_WIDTH;
+
+    if (cutsVerticalRectPoints) {
+      if (strokeCap === 'STANDARD') {
+        spacingGroup.push(
+          [true, false].map((isFirst) =>
+            createStandardCapForSpacing({
+              line: line1,
+              isFirst,
+              mainColor,
+              width: line1.width,
+              height: line1.height,
+            })
+          )
+        );
+      } else {
+        line1.strokeCap = strokeCap as StrokeCap;
+      }
+    } else {
+      if (strokeCap === 'STANDARD') {
+        spacingGroup.push(
+          createStandardCapForSpacing({
+            line: line1,
+            isFirst: horizontalDirection === 'top',
+            mainColor,
+            width: line1.width,
+            height: line1.height,
+          })
+        );
+      } else {
+        line1.vectorNetwork = {
+          ...line1.vectorNetwork,
+          vertices: line1.vectorNetwork.vertices.map((vector) => ({
+            ...vector,
+            strokeCap:
+              (horizontalDirection === 'bottom' && vector.y !== 0) ||
+              (horizontalDirection === 'top' && vector.y === 0)
+                ? (strokeCap as StrokeCap)
+                : 'NONE',
+          })),
+        };
+      }
+    }
+
     spacingGroup.push(line1);
 
     if (labels) {
@@ -366,6 +415,51 @@ export const drawSpacing = async (
     ];
     line4.strokes = [].concat(mainColor);
     line4.strokeWeight = STROKE_WIDTH;
+
+    if (cutsHorizontalRectPoints) {
+      if (strokeCap === 'STANDARD') {
+        spacingGroup.push(
+          [true, false].map((isFirst) =>
+            createStandardCapForSpacing({
+              line: line4,
+              isHorizontal: true,
+              isFirst,
+              mainColor,
+              width: line4.width,
+              height: line4.height,
+            })
+          )
+        );
+      } else {
+        line4.strokeCap = strokeCap as StrokeCap;
+      }
+    } else {
+      if (strokeCap === 'STANDARD') {
+        spacingGroup.push(
+          createStandardCapForSpacing({
+            line: line4,
+            isHorizontal: true,
+            isFirst: verticalDirection === 'left',
+            mainColor,
+            width: line4.width,
+            height: line4.height,
+          })
+        );
+      } else {
+        line4.vectorNetwork = {
+          ...line4.vectorNetwork,
+          vertices: line4.vectorNetwork.vertices.map((vector) => ({
+            ...vector,
+            strokeCap:
+              (verticalDirection === 'right' && vector.x !== 0) ||
+              (verticalDirection === 'left' && vector.x === 0)
+                ? (strokeCap as StrokeCap)
+                : 'NONE',
+          })),
+        };
+      }
+    }
+
     spacingGroup.push(line4);
 
     if (labels) {

diff --git a/src/views/Home/components/Viewer/components/Spacing.tsx b/src/views/Home/components/Viewer/components/Spacing.tsx
@@ -25,6 +25,7 @@ export const Spacing: FunctionComponent<{
         strokeOffset: store.strokeOffset,
         labelsOutside: store.labelsOutside,
         labelPattern: store.labelPattern,
+        strokeCap: store.strokeCap,
       });
       refreshSelection();
     }