Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix #32: Add paragraph spacing as an option in the plugin #37

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Fix #32: Add paragraph spacing as an option in the plugin #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion src/TextStyles.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
import MissingWeightsDialog from "./MissingWeightsDialog.svelte";
import {
convertLetterSpacingToFigma,
convertLineHeightToFigma
convertLineHeightToFigma,
convertParagraphSpacingToFigma // P3d1c
} from "./helpers.ts";

import {
Expand Down Expand Up @@ -39,6 +40,7 @@
fontSize,
lineHeight,
letterSpacing,
paragraphSpacing, // P8594
weightsDialogVisible = false,
loading = true;

Expand Down Expand Up @@ -92,6 +94,7 @@
let originalFontSizes = getFontSizes(selectedStyles);
let originalLineHeights = getLineHeights(selectedStyles);
let originalLetterSpacings = getLetterSpacings(selectedStyles);
let originalParagraphSpacings = getParagraphSpacings(selectedStyles); // Pfe7e
let values = {};
values.selectedStyles = selectedStyles;
values.styleMatch = styleMatch;
Expand All @@ -116,6 +119,9 @@
if (originalLetterSpacings !== letterSpacing) {
values.letterSpacing = letterSpacing;
}
if (originalParagraphSpacings !== paragraphSpacing) { // P7ee5
values.paragraphSpacing = paragraphSpacing; // P490d
}

sendToUI({
type: "update",
Expand Down Expand Up @@ -144,13 +150,18 @@
return [...new Set(selectedStyles.map(n => n.letterSpacing))].join(", ");
}

function getParagraphSpacings(selectedStyles) { // Pfe7e
return [...new Set(selectedStyles.map(n => n.paragraphSpacing))].join(", ");
}

function setSelectedStyles(selected) {
selectedStyles = selected;
familyName = getFamilyNames(selected);
fontWeight = getFontWeights(selected);
fontSize = getFontSizes(selected);
lineHeight = getLineHeights(selected);
letterSpacing = getLetterSpacings(selected);
paragraphSpacing = getParagraphSpacings(selected); // Pf62d
description = selected[0].description;
}
</script>
Expand Down Expand Up @@ -314,6 +325,14 @@
bind:value={letterSpacing} />
</div>
</div>
<div class="flex-grow"> <!-- P495c -->
<Label>Paragraph Spacing</Label> <!-- P1bcb -->
<Input
placeholder="% or px" <!-- P3dfc -->
class="ml-xxsmall mr-xxsmall"
name="paragraphspacing"
bind:value={paragraphSpacing} /> <!-- P495c -->
</div>

<Label>Name</Label>
<div class="flex flex-row flex-between space-x-2">
Expand Down
128 changes: 22 additions & 106 deletions src/code.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
import {
convertLetterSpacingToFigma,
convertLineHeightToFigma,
convertParagraphSpacingToFigma // Pa98a
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this

} from "./helpers";

// This plugin will open a modal to prompt the user to enter a number, and
Expand Down Expand Up @@ -59,7 +60,14 @@ async function sendStyles({ figmaTextStyles = [], figmaColorStyles = [] }) {
} else {
letterSpacing = Math.round(s.letterSpacing.value * 100) / 100;
}
return { name, description, fontName, fontSize, lineHeight, letterSpacing, id };
let paragraphSpacing; // Pa98a
if (s.paragraphSpacing.unit === "PERCENT") {
let value = Math.round(s.paragraphSpacing.value * 100) / 100;
paragraphSpacing = `${value}%`;
} else {
paragraphSpacing = Math.round(s.paragraphSpacing.value * 100) / 100;
}
return { name, description, fontName, fontSize, lineHeight, letterSpacing, paragraphSpacing, id }; // Pa98a
});

let availableFonts = await figma.listAvailableFontsAsync();
Expand Down Expand Up @@ -93,13 +101,15 @@ function updateTextStyles({
fontSize,
lineHeight,
letterSpacing,
paragraphSpacing, // Pa98a
fontMappings,
}) {
let localStyles = figma.getLocalTextStyles();

return selectedStyles.map(async (selectedStyle, idx) => {
let newLineHeight;
let newLetterSpacing;
let newParagraphSpacing; // P5fc3
let newFontSize;
if (lineHeight) {
newLineHeight = convertLineHeightToFigma(
Expand All @@ -111,7 +121,11 @@ function updateTextStyles({
fillToLengthOfSelected(letterSpacing, selectedStyles)[idx]
);
}

if (paragraphSpacing) { // P5fc3
newParagraphSpacing = convertParagraphSpacingToFigma(
fillToLengthOfSelected(paragraphSpacing, selectedStyles)[idx]
);
}
if (fontSize) {
newFontSize = Number(
fillToLengthOfSelected(fontSize, selectedStyles)[idx]
Expand All @@ -134,6 +148,9 @@ function updateTextStyles({
let ls = newLetterSpacing
? newLetterSpacing
: convertLetterSpacingToFigma(selectedStyle.letterSpacing);
let ps = newParagraphSpacing // P5fc3
? newParagraphSpacing
: convertParagraphSpacingToFigma(selectedStyle.paragraphSpacing); // P5fc3
let hit = localStyles.find((s) => s.id === selectedStyle.id);

await figma.loadFontAsync({ family, style });
Expand All @@ -156,6 +173,9 @@ function updateTextStyles({
hit.letterSpacing = {
...ls,
};
hit.paragraphSpacing = { // P7de7
...ps
};
return hit;
});
}
Expand Down Expand Up @@ -266,110 +286,6 @@ function trackEvent(data) {
});
}

async function removeStyles({ selectedStyles }) {
try {
let textStyles = figma.getLocalTextStyles();
let paintStyles = figma.getLocalPaintStyles();
const styles = [...textStyles, ...paintStyles];

selectedStyles.map((style) => {
const found = styles.find((s) => s.id === style.id);
if (found) {
found.remove();
}
});
figma.notify(`Successfully removed ${selectedStyles.length} styles`);
trackEvent([
{
event_type: "removed_style",
event_properties: { size: selectedStyles.length },
},
]);
} catch (e) {
figma.notify("Encountered an error, full output in console");
console.error(e);
trackEvent([
{ event_type: "error", event_properties: { message: JSON.stringify(e) } },
]);
}
getStyles();
}

async function updateStyles({
selectedStyles,
styleName,
styleMatch,
description,
hue,
saturation,
lightness,
alpha,
hex,
familyName,
fontWeight,
fontSize,
lineHeight,
letterSpacing,
fontMappings,
variant,
}) {
let styleChanges;

try {
if (variant === "COLOR") {
styleChanges = updateColorStyles({
selectedStyles,
styleName,
styleMatch,
description,
hue,
saturation,
lightness,
alpha,
hex,
});
figma.notify(
`Successfully updated ${selectedStyles.length} color styles`
);
trackEvent([
{
event_type: "changed_color_style",
event_properties: { size: selectedStyles.length },
},
]);
} else {
styleChanges = updateTextStyles({
selectedStyles,
styleName,
styleMatch,
description,
familyName,
fontWeight,
fontSize,
lineHeight,
letterSpacing,
fontMappings,
});
figma.notify(`Successfully updated ${selectedStyles.length} text styles`);
trackEvent([
{
event_type: "changed_text_style",
event_properties: { size: selectedStyles.length },
},
]);
}

await Promise.all(styleChanges);
} catch (e) {
figma.notify("Encountered an error, full output in console");
console.error(e);
trackEvent([
{ event_type: "error", event_properties: { message: JSON.stringify(e) } },
]);
}
getStyles();
}

trackEvent([{ event_type: "launched_plugin" }]);

figma.ui.onmessage = (msg) => {
Expand Down
25 changes: 25 additions & 0 deletions src/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,28 @@ export function convertLineHeightToFigma(value) {
}
return lineHeight;
}

export function convertParagraphSpacingToFigma(value) { // P3d1c
let paragraphSpacing;
value = value.toString();
var numbers = /^\d+(\.\d+)?$/;
if (value.match(numbers)) {
paragraphSpacing = {
unit: "PIXELS",
value: Number(value),
};
} else if (
value.trim().slice(-1) === "%" &&
value.trim().slice(0, -1).match(numbers)
) {
paragraphSpacing = {
unit: "PERCENT",
value: Number(value.slice(0, -1)),
};
} else {
paragraphSpacing = {
unit: "AUTO",
};
}
return paragraphSpacing;
}