fix artboard row positions (#36)

wix-incubator · Apr 25, 2018 · 067370d · 067370d
1 parent 52895c6
commit 067370d
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 26 deletions.
diff --git a/Legend.sketchplugin/Contents/Sketch/cleanUp.js b/Legend.sketchplugin/Contents/Sketch/cleanUp.js
@@ -1,5 +1,6 @@
 const isSketchStringsEqual = require('./utils/isSketchStringsEqual');
-const { adjustArtboardHeight } = require('./utils/adjustArtboardHeight');
+const { calculateArtboardSize } = require('./utils/calculateArtboardSize');
+const adjustLayerFrame = require('./utils/adjustLayerFrame');
 const { LEGEND_CONTENT_NAME, LEGEND_BADGES_NAME } = require('./constants');
 
 function getLayersToRemove({ layer, itemsToRemove = [] }) {
@@ -27,7 +28,7 @@ function cleanUpLegend(artboard) {
     layer.removeFromParent();
   });
 
-  adjustArtboardHeight(artboard);
+  adjustLayerFrame(artboard, calculateArtboardSize(artboard));
 }
 
 function cleanUpPageLegends(page) {

diff --git a/Legend.sketchplugin/Contents/Sketch/handlers/runAddLegends.js b/Legend.sketchplugin/Contents/Sketch/handlers/runAddLegends.js
@@ -1,8 +1,8 @@
-const isSketchStringsEqual = require('../utils/isSketchStringsEqual');
+const { isArtboard } = require('../utils/classMatchers');
 const createSymbolsDictionary = require('../utils/createSymbolsDictionary');
+const adjustArtboardPositions = require('../utils/adjustArtboardPositions');
 const legendifyArtboard = require('../legendifyArtboard/legendifyArtboard');
 const { cleanUpPageLegends } = require('../cleanUp');
-const { ARTBOARD_GROUP_CLASS_NAME } = require('../constants');
 
 module.exports = ({ document }) => {
   coscript.shouldKeepAround = false;
@@ -15,12 +15,21 @@ module.exports = ({ document }) => {
     // cleanup previous legends on rerun
     cleanUpPageLegends(page);
 
+    let artboardsProcessed = 0;
     page.artboards().forEach(artboard => {
-      if (isSketchStringsEqual(artboard.class(), ARTBOARD_GROUP_CLASS_NAME)) {
+      if (isArtboard(artboard)) {
         legendifyArtboard({
           artboard,
           symbolsDictionary,
           document,
+          onProcessed() {
+            artboardsProcessed++;
+            if (artboardsProcessed === page.artboards().length) {
+              artboardsProcessed = 0;
+              adjustArtboardPositions(page.artboards());
+              document.showMessage('All Artboards processed.');
+            }
+          }
         });
       }
     });

diff --git a/Legend.sketchplugin/Contents/Sketch/handlers/runAddLegendsForSelected.js b/Legend.sketchplugin/Contents/Sketch/handlers/runAddLegendsForSelected.js
@@ -1,7 +1,8 @@
 const getSelectedArtboards = require('../utils/getSelectedArtboards');
-const { cleanUpArtboardLegends } = require('../cleanUp');
 const createSymbolsDictionary = require('../utils/createSymbolsDictionary');
+const adjustArtboardPositions = require('../utils/adjustArtboardPositions');
 const legendifyArtboard = require('../legendifyArtboard/legendifyArtboard');
+const { cleanUpArtboardLegends } = require('../cleanUp');
 
 module.exports = context => {
   coscript.shouldKeepAround = false;
@@ -20,13 +21,22 @@ module.exports = context => {
     document.documentData().allSymbols()
   );
 
+  let artboardsProcessed = 0;
   artboards.forEach(artboard => {
     cleanUpArtboardLegends(artboard);
 
     legendifyArtboard({
       document,
       artboard,
       symbolsDictionary,
+      onProcessed() {
+        artboardsProcessed++;
+        if (artboardsProcessed === artboards.length) {
+          artboardsProcessed = 0;
+          adjustArtboardPositions(artboards);
+          document.showMessage('All Artboards processed.');
+        }
+      }
     });
   });
 };
diff --git a/Legend.sketchplugin/Contents/Sketch/handlers/runCleanUpLegends.js b/Legend.sketchplugin/Contents/Sketch/handlers/runCleanUpLegends.js
@@ -1,9 +1,11 @@
+const adjustArtboardPositions = require('../utils/adjustArtboardPositions');
 const { cleanUpPageLegends } = require('../cleanUp');
 
 module.exports = ({ document }) => {
   coscript.shouldKeepAround = false;
 
   document.pages().forEach(page => {
     cleanUpPageLegends(page);
+    adjustArtboardPositions(page.artboards());
   });
 };
diff --git a/Legend.sketchplugin/Contents/Sketch/handlers/runCleanUpLegendsForSelected.js b/Legend.sketchplugin/Contents/Sketch/handlers/runCleanUpLegendsForSelected.js
@@ -1,4 +1,5 @@
 const getSelectedArtboards = require('../utils/getSelectedArtboards');
+const adjustArtboardPositions = require('../utils/adjustArtboardPositions');
 const { cleanUpArtboardLegends } = require('../cleanUp');
 
 module.exports = context => {
@@ -17,4 +18,6 @@ module.exports = context => {
   artboards.forEach(artboard => {
     cleanUpArtboardLegends(artboard);
   });
+
+  adjustArtboardPositions(artboards);
 };
diff --git a/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/adjustLegendFrames.js b/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/adjustLegendFrames.js
@@ -1,11 +1,10 @@
 const adjustLayerFrame = require('../utils/adjustLayerFrame');
 
 const LEGEND_PADDING = 20;
-const ARTBOARD_MARGIN = 30;
 
 const adjustArtboardFrame = (artboard, legendGroupBackground) => {
   adjustLayerFrame(artboard, {
-    height: artboard.frame().height() + legendGroupBackground._object.frame().height() + ARTBOARD_MARGIN,
+    height: artboard.frame().height() + legendGroupBackground._object.frame().height(),
   });
 }
 
@@ -18,7 +17,7 @@ const adjustLegendGroupFrame = (artboard, legendGroup, legendGroupItems) => {
 
   adjustLayerFrame(legendGroup._object, {
     x: 0,
-    y: artboardHeight + ARTBOARD_MARGIN,
+    y: artboardHeight,
     width: artboardWidth,
     height: legendGroupItemsHeight + LEGEND_PADDING * 2,
   });

diff --git a/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/legendifyArtboard.js b/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/legendifyArtboard.js
@@ -92,7 +92,7 @@ function legendify({
   layersCache.forEach(processLayer);
 }
 
-function legendifyArtboard({ artboard, document, symbolsDictionary }) {
+function legendifyArtboard({ artboard, document, symbolsDictionary, onProcessed }) {
   const legendItemsGroup = createLegendBadgesGroup(artboard);
 
   const legendItems = [];
@@ -112,14 +112,14 @@ function legendifyArtboard({ artboard, document, symbolsDictionary }) {
       }
 
       legendItemsGroup.layers = legendIndexItems;
-
-      document.showMessage('All Artboards processed.');
       coscript.shouldKeepAround = false;
 
       createLegendGroup({
         artboard,
         legendItems,
       });
+
+      onProcessed && onProcessed();
     },
   });
 }

diff --git a/Legend.sketchplugin/Contents/Sketch/utils/adjustArtboardPositions.js b/Legend.sketchplugin/Contents/Sketch/utils/adjustArtboardPositions.js
@@ -0,0 +1,46 @@
+const adjustLayerFrame = require('./adjustLayerFrame');
+const { isArtboard } = require('./classMatchers');
+
+const SAME_ROW_THRESHOLD = 100;
+const ROW_MARGIN = 100;
+
+const isBetween = (base, value) => base - SAME_ROW_THRESHOLD < value && base + SAME_ROW_THRESHOLD > value;
+const getFirstRowTop = artboards => Math.min(...artboards.map(artboard => artboard.frame().y()));
+const getRowMaxHeight = artboards => Math.max(...artboards.map(artboard => artboard.frame().height()));
+
+const getRows = artboards => {
+  const sortedArtboards = artboards.sort(artboard => artboard.frame().y());
+  let currentRow = { index: 0, y: sortedArtboards[0].frame().y() };
+  return sortedArtboards.reduce((acc, artboard) => {
+    if (!isBetween(currentRow.y, artboard.frame().y())) {
+      currentRow = { index: currentRow.index + 1, y: artboard.frame().y() };
+    }
+    acc[currentRow.index] = (acc[currentRow.index] || []).concat(artboard);
+    return acc;
+  }, []);
+};
+
+const getRowYs = rows => {
+  let currentRowBottom = getFirstRowTop(rows[0]);
+
+  return rows.map(artboards => {
+    const y = currentRowBottom;
+    currentRowBottom = currentRowBottom + getRowMaxHeight(artboards) + ROW_MARGIN;
+    return y;
+  });
+};
+
+const adjustArtboardPositions = artboards => {
+  const applicableArtboards = Array.from(artboards).filter(isArtboard);
+  if (!applicableArtboards.length) return;
+
+  const artboardRows = getRows(applicableArtboards);
+  getRowYs(artboardRows).forEach((y, index) => {
+    artboardRows[index].forEach(artboard => {
+      adjustLayerFrame(artboard, { y });
+    })
+  })
+};
+
+
+module.exports = adjustArtboardPositions;
diff --git a/...ents/Sketch/utils/adjustArtboardHeight.js → ...nts/Sketch/utils/calculateArtboardSize.js b/...ents/Sketch/utils/adjustArtboardHeight.js → ...nts/Sketch/utils/calculateArtboardSize.js
@@ -1,6 +1,6 @@
 //SOURCE: https://github.com/zhifengkoh/resize_artboard/
 
-function adjustArtboardHeight(artboard) {
+function calculateArtboardSize(artboard) {
   const layers = artboard.layers();
   if (layers.count() == 0) {
     return;
@@ -39,17 +39,10 @@ function adjustArtboardHeight(artboard) {
     }
   }
 
-  //Resize the artboard
-  const rect = artboard.rect();
-  rect.size.width = (maxX - minX);
-  rect.size.height = (maxY - minY);
-  artboard.setRect(rect);
-}
-
-function setArtboardHeight(artboard, height) {
-  const rect = artboard.rect();
-  rect.size.height =height;
-  artboard.setRect(rect);
+  return {
+    width: (maxX - minX),
+    height: (maxY - minY),
+  };
 }
 
 function getLeftEdge(cgrect) {
@@ -66,7 +59,6 @@ function getBottomEdge(cgrect) {
 }
 
 module.exports = {
-  adjustArtboardHeight,
-  setArtboardHeight
+  calculateArtboardSize,
 };
 
diff --git a/Legend.sketchplugin/Contents/Sketch/utils/classMatchers.js b/Legend.sketchplugin/Contents/Sketch/utils/classMatchers.js
@@ -0,0 +1,14 @@
+const { ARTBOARD_GROUP_CLASS_NAME, SYMBOL_INSTANCE_CLASS_NAME } = require('../constants');
+const isSketchStringsEqual = require('./isSketchStringsEqual');
+
+const isClass = className => layer => isSketchStringsEqual(layer.class(), className);
+
+const isSymbol = isClass(SYMBOL_INSTANCE_CLASS_NAME);
+
+const isArtboard = isClass(ARTBOARD_GROUP_CLASS_NAME);
+
+
+module.exports = {
+  isSymbol,
+  isArtboard,
+}