Add Display Netwrok implementation

Author: basiclines

manifest_prod.json

@@ -0,0 +1,15 @@
+{
+  "name": "Super Tidy",
+  "id": "731260060173130163",
+  "api": "1.0.0",
+  "ui": "dist/ui.html",
+  "main": "dist/core.js",
+	"menu": [
+		{"name": "Rename", "command": "rename"},
+		{"name": "Reorder", "command": "reorder"},
+		{"name": "Tidy", "command": "tidy"},
+		{"name": "Run all", "command": "all"},
+		{"separator": true},
+		{"name": "Run custom...", "command": "options"}
+	]
+}

package-lock.json

@@ -20,6 +20,6 @@
   },
   "dependencies": {
     "@basiclines/leo": "^0.6.4",
-    "ua-parser-js": "^0.7.21"
+    "ua-parser-js": "^0.7.24"
   }
 }

package.json

@@ -47,7 +47,7 @@
 }
 
 body { text-align: left; overflow: hidden; }
-root-ui { transition: opacity 0.05s linear; display: block; position: relative; height: 459px; }
+root-ui { transition: opacity 0.05s linear; display: block; position: relative; height: 539px; }
 root-ui[notready] { opacity: 0; pointer-events: none; }
 
 .c-icon {

src/App.css

@@ -60,6 +60,7 @@ class ui extends Element {
 				xspacing="${this.data.preferences.spacing.x}"
 				yspacing="${this.data.preferences.spacing.y}"
 				startname="${this.data.preferences.start_name}"
+				wrapinstances="${this.data.preferences.wrap_instances}"
 				renamestrategy="${this.data.preferences.rename_strategy}"
 			>
 			</v-form>

src/App.js

@@ -87,7 +87,7 @@ function cmdReorder() {
 	})
 }
 
-function cmdTidy(xSpacing, ySpacing) {
+function cmdTidy(xSpacing, ySpacing, wrapInstances) {
 	var selection = figma.currentPage.selection
 	var parent = (selection[0].type == 'PAGE') ? figma.currentPage : selection[0].parent
 	var allNodes = parent.children
@@ -117,20 +117,34 @@ function cmdTidy(xSpacing, ySpacing) {
 				xPos = col.x
 				yPos = col.y
 			}
-			var match = allNodes.find(node => node.id === col.id)
-			match.x = (colidx == 0) ? xPos : xPos + xSpacing;
-			match.y = yPos
-			xPos = match.x + match.width
+			var match = allNodes.find(node => node.id === col.id)	
+			var newXPos =	(colidx == 0) ? xPos : xPos + xSpacing;
+			var newYPos = yPos
+			
+			// Wrap instances with a frame around
+			if (wrapInstances && match.type == 'INSTANCE') {
+				var instanceParent = figma.createFrame()
+				instanceParent.x = newXPos
+				instanceParent.y = newYPos
+				instanceParent.resize(match.width, match.height)
+				instanceParent.appendChild(match)
+				match.x = 0
+				match.y = 0
+				figma.currentPage.selection = figma.currentPage.selection.concat(instanceParent)
+			} else {
+				match.x = newXPos
+				match.y = newYPos
+			}
+				
+			xPos = newXPos + match.width
 		})
 
 		xPos = x0
 		yPos = yPos + (tallestInRow[rowidx] + ySpacing)
 	})
 }
 
-// Obtain UUID then trigger init event
-
-// Obtain UUID and saved file url then trigger init event
+// Obtain UUID and preferences then trigger init event
 Promise.all([
 	figma.clientStorage.getAsync('UUID'),
 	figma.clientStorage.getAsync('preferences'),
@@ -144,11 +158,13 @@ Promise.all([
 
 	let SPACING = { x: 100, y: 200 }
 	let START_NAME = '000'
+	let WRAP_INSTANCES = true
 	let RENAME_STRATEGY_REPLACE = 'replace'
 	let RENAME_STRATEGY_MERGE = 'merge'
 	let PREFERENCES = {
 		spacing: SPACING,
 		start_name: START_NAME,
+		wrap_instances: WRAP_INSTANCES,
 		rename_strategy: RENAME_STRATEGY_REPLACE
 	}
 
@@ -188,21 +204,21 @@ Promise.all([
 	} else
 	if (cmd == 'tidy') {
 		// RUNS WITHOUT UI
-		cmdTidy(preferences.spacing.x, preferences.spacing.y)
+		cmdTidy(preferences.spacing.x, preferences.spacing.y, preferences.wrap_instances)
 		figma.notify('Super Tidy: Tidy')
 		setTimeout(() => figma.closePlugin(), 100)
 	} else
 	if (cmd == 'all') {
 		// RUNS WITHOUT UI
-		cmdTidy(preferences.spacing.x, preferences.spacing.y)
+		cmdTidy(preferences.spacing.x, preferences.spacing.y, preferences.wrap_instances)
 		cmdReorder()
 		cmdRename(preferences.rename_strategy, preferences.start_name)
 		figma.notify('Super Tidy')
 		setTimeout(() => figma.closePlugin(), 100)
 	} else
 	if (cmd == 'options') {
 		// OPEN UI
-		figma.showUI(__html__, { width: 320, height: 460 })
+		figma.showUI(__html__, { width: 320, height: 540 })
 		figma.ui.postMessage({
 			type: 'init',
 			UUID: UUID,
@@ -215,14 +231,14 @@ Promise.all([
 		figma.on('selectionchange', () => {
 			figma.ui.postMessage({ type: 'selection', selection: figma.currentPage.selection })
 		})
-
+		
 		figma.ui.onmessage = msg => {
 			if (msg.type === 'tidy') {
 				var RENAMING_ENABLED = msg.options.renaming
 				var REORDER_ENABLED = msg.options.reorder
 				var TIDY_ENABLED = msg.options.tidy
 
-				if (TIDY_ENABLED) cmdTidy(preferences.spacing.x, preferences.spacing.y)
+				if (TIDY_ENABLED) cmdTidy(preferences.spacing.x, preferences.spacing.y, preferences.wrap_instances)
 				if (RENAMING_ENABLED) cmdRename(preferences.rename_strategy, preferences.start_name)
 				if (REORDER_ENABLED) cmdReorder()
 				figma.notify('Super Tidy')
@@ -234,7 +250,7 @@ Promise.all([
 				figma.notify('Preferences saved')
 			} else
 			if (msg.type === 'displayImpression') {
-				figma.ui.resize(320, 460+124)
+				figma.ui.resize(320, 540+124)
 				figma.clientStorage.setAsync('AD_LAST_SHOWN_DATE', Date.now())
 			}
 		}

src/Core.js

@@ -12,11 +12,13 @@ class PreferencesView extends Element {
 		let x_spacing = this.find('#x_spacing').value
 		let y_spacing = this.find('#y_spacing').value
 		let starting_name = this.find('#starting_name').value
+		let wrap_instances = this.find('#wrap_instances').checked
 		let rename_trategy = this.find('#rename_strategy [selected]').getAttribute('data-value')
 
 		let preferences = {
 			spacing: { x: parseInt(x_spacing), y: parseInt(y_spacing) },
 			start_name: starting_name,
+			wrap_instances: wrap_instances,
 			rename_strategy: rename_trategy
 		}
 
@@ -32,7 +34,7 @@ class PreferencesView extends Element {
 		})
 	}
 
-	render() {
+	render() {		
 		return `
 			<form id="preferences" action="#">
 				<fieldset>		
@@ -58,6 +60,18 @@ class PreferencesView extends Element {
 					</label>
 				</fieldset>
 				
+				<label>
+					<strong>Wrap instances with frames</strong>
+					<p>When using the Tidy action, all instances will be wrapped with a frame of the same dimensions.</p>
+				
+					<label class="switch">
+						<div class="switch__container">
+							<input id="wrap_instances" type="checkbox" class="switch__checkbox" ${(this.attrs.wrapinstances == 'true') ? 'checked' : ''}>
+							<span class="switch__slider"></span>
+						</div>
+					</label>
+				</label>
+				
 				<label>
 					<strong>Starting frame number</strong>
 					<p>Renames your frames starting from the given number when using the Rename action.</p>