diff --git a/.gitignore b/.gitignore index 8d67a86..f9e35be 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store +.idea/ node_modules dist diff --git a/src/code.ts b/src/code.ts index a0af449..cac907c 100644 --- a/src/code.ts +++ b/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.') + } } diff --git a/src/scss/ui.scss b/src/scss/ui.scss index 080ac81..d5c9281 100644 --- a/src/scss/ui.scss +++ b/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; +} diff --git a/src/ui.html b/src/ui.html index 6139947..75c8840 100644 --- a/src/ui.html +++ b/src/ui.html @@ -31,6 +31,12 @@ + +