An option to manage a skew angle

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
+.idea/
 node_modules
 dist

src/code.ts

@@ -1,54 +1,45 @@
 const {skewDEG, rotateDEG, compose} = require('transformation-matrix')
 
-let selection = figma.currentPage.selection
+const defaultAngle = 30
 
-if(selection.length !== 1) {
-    figma.closePlugin('Select a single node.')
-}
-
-function getOptions(direction) {
+function getOptions(direction, angle) {
     switch(direction) {
         case 'left':
             return {
                 rotate: 0,
-                skew: 30,
-                degree: -30
+                skew: angle,
+                degree: -angle
             }
-        break
         case 'right':
             return {
                 rotate: 0,
-                skew: -30,
-                degree: 30
+                skew: -angle,
+                degree: angle
             }
-        break
         case 'top-left':
             return {
                 rotate: 0,
-                skew: -30,
-                degree: -30
+                skew: 2 * angle - 90,
+                degree: -angle
             }
-        break
         case 'top-right':
             return {
                 rotate: 90,
-                skew: -30,
-                degree: 30
+                skew: 2 * angle - 90,
+                degree: angle
             }
-        break
         default:
             return {
                 rotate: 0,
                 skew: 0,
                 degree: 0
             }
-        break
     }
 }
 
-function setIsomentric(node, direction) {
+function setIsometric(node, direction, angle) {
 
-    let options = getOptions(direction),
+    let options = getOptions(direction, angle),
         matrix = compose(
             rotateDEG(options.rotate),
             skewDEG(0, options.skew)
@@ -66,39 +57,36 @@ function setIsomentric(node, direction) {
     node.y = y
 
     node.setPluginData('direction', direction)
+    node.setPluginData('angle', angle.toString())
 
     return node
 
 }
 
 function setActive(selection) {
-    if(selection.length !== 1) {
-        return false
+    if(selection.length === 1) {
+        let active = selection[0].getPluginData('direction') || false,
+            angle = parseFloat(selection[0].getPluginData('angle')) || defaultAngle
+
+        figma.ui.postMessage({ type: 'setBlocked', state: false })
+        figma.ui.postMessage({ type: 'setActive', active })
+        figma.ui.postMessage({ type: 'setAngle', angle })
+    } else {
+        figma.ui.postMessage({ type: 'setBlocked', state: true })
     }
-    return selection[0].getPluginData('direction') || false
 }
 
 if(figma.command == 'modal') {
 
     figma.showUI(__html__, {
         width: 320,
-        height: 328
+        height: 374
     })
 
-    figma.on('selectionchange', () => {
-        selection = figma.currentPage.selection
-        if(selection.length !== 1) {
-            figma.closePlugin('Select a single node.')
-        }
-        figma.ui.postMessage({
-            type: 'setActive',
-            active: setActive(selection)
-        })
-    })
+    setActive(figma.currentPage.selection)
 
-    figma.ui.postMessage({
-        type: 'setActive',
-        active: setActive(selection)
+    figma.on('selectionchange', () => {
+        setActive(figma.currentPage.selection)
     })
 
     figma.clientStorage.getAsync('easometricClose').then(bool => {
@@ -110,18 +98,18 @@ if(figma.command == 'modal') {
     })
 
     figma.ui.onmessage = response => {
+        let selection = figma.currentPage.selection;
+
+        if(response.type === 'set' && selection.length === 1) {
+            setIsometric(selection[0], response.direction, response.angle)
 
-        if(response.type == 'set') {
             figma.clientStorage.getAsync('easometricClose').then(bool => {
                 bool = bool === undefined ? true : bool
-                setIsomentric(selection[0], response.direction)
-                if(bool) {
-                    figma.closePlugin('Isometric set.')
-                }
+                bool && figma.closePlugin('Isometric set.')
             })
         }
 
-        if(response.type == 'toggle') {
+        if(response.type === 'toggle') {
             figma.clientStorage.setAsync('easometricClose', response.bool).then(() => {
                 figma.notify(response.bool ? 'Modal will close after selection.' : 'Modal will stay after selection.')
             })
@@ -130,8 +118,13 @@ if(figma.command == 'modal') {
     }
 
 } else {
+    let selection = figma.currentPage.selection
 
-    setIsomentric(selection[0], figma.command)
-    figma.closePlugin('Isometric set.')
+    if (selection.length === 1) {
+        setIsometric(selection[0], figma.command, defaultAngle)
+        figma.closePlugin('Isometric set.')
+    } else {
+        figma.closePlugin('Select a single node.')
+    }
 
 }

src/scss/ui.scss

@@ -6,6 +6,7 @@
     --border: #b6b6b6;
     font-family: 'Inter', 'Inter UI', Arial;
     padding: 4px 8px;
+    position: relative;
     nav {
         margin: 32px 0 20px 0;
         ul {
@@ -212,19 +213,47 @@
     }
 }
 
+.skew {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    span {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--inactive);
+    }
+
+    #skew-angle {
+        flex: 0 0 60px;
+        margin: 0;
+        padding: 6px 12px;
+        border-radius: 5px;
+        border: 1px solid var(--line);
+        outline: none;
+        font-size: 14px;
+        color: var(--primary);
+        text-align: right;
+
+        &:focus {
+            border-color: var(--primary);
+        }
+    }
+}
+
 .switch {
-    width: 100%;
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     span {
-        display: block;
-        list-style: 23px;
         font-size: 14px;
         font-weight: 500;
         color: var(--inactive);
     }
+
     input {
         display: none;
         & + div {
@@ -260,3 +289,19 @@
         }
     }
 }
+
+#easometric.blocked::before {
+    content: "Select a single node";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #ffffff;
+    opacity: 0.75;
+    z-index: 10;
+    cursor: not-allowed;
+}

src/ui.html

@@ -31,6 +31,12 @@
             </li>
         </ul>
     </nav>
+
+    <div class="skew">
+        <span>Skew angle (deg)</span>
+        <input id="skew-angle" type="number" min="-90" max="90" step="0.1">
+    </div>
+
     <label class="switch">
         <span>Close after selection</span>
         <input type="checkbox" name="close" checked>

src/ui.ts

@@ -1,6 +1,6 @@
 import './scss/ui.scss'
 
-var $ = require('jQuery')
+const $ = require('jQuery')
 
 window.onmessage = async (event) => {
     if(event.data.pluginMessage.type == 'setToggle') {
@@ -12,12 +12,21 @@ window.onmessage = async (event) => {
             $('[data-direction="' + event.data.pluginMessage.active + '"]').addClass('active')
         }
     }
+
+    if (event.data.pluginMessage.type == 'setAngle' && event.data.pluginMessage.angle) {
+        $('#skew-angle').val(event.data.pluginMessage.angle)
+    }
+
+    if (event.data.pluginMessage.type == 'setBlocked') {
+        event.data.pluginMessage.state ?
+            $('#easometric').addClass('blocked') :
+            $('#easometric').removeClass('blocked')
+    }
 }
 
 $('[data-direction]').on('click', e => {
 
     let link = $(e.currentTarget),
-        keep = $('[name="close"]').is(':checked'),
         active = link.data('direction')
 
     active = link.hasClass('active') ? 'none' : active
@@ -28,12 +37,12 @@ $('[data-direction]').on('click', e => {
     parent.postMessage({
         pluginMessage: {
             type: 'set',
-            direction: active
+            direction: active,
+            angle: parseFloat($('#skew-angle').val())
         }
     }, '*')
 
-    return false;
-
+    return false
 })
 
 $('[data-direction]').hover(function(e) {
@@ -52,3 +61,13 @@ $('[name="close"]').on('change', e => {
         }
     }, '*')
 })
+
+$('#skew-angle').on('input', function(e) {
+    parent.postMessage({
+        pluginMessage: {
+            type: 'set',
+            direction: $('[data-direction].active').data('direction'),
+            angle: parseFloat(e.currentTarget.value) || 0
+        }
+    }, '*')
+})