Skip to content

Commit

Permalink
Merge pull request #1370 from googlefonts/font-axes-switch-issue-1367
Browse files Browse the repository at this point in the history
Make Font axes UI switchable between User and Source location
  • Loading branch information
justvanrossum committed May 21, 2024
2 parents 2c65f2c + 61aeb1e commit 10e934d
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 14 deletions.
1 change: 1 addition & 0 deletions src/fontra/client/tabler-icons/menu-2.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/fontra/views/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export class EditorController {
"align",
"fontLocationUser",
"glyphLocation",
"fontAxesUseSourceCoordinates",
"selectedGlyph",
"selection",
"text",
Expand Down Expand Up @@ -2372,6 +2373,9 @@ export class EditorController {

this.sceneModel.setGlyphLocations(viewInfo["glyphLocations"]);

if (viewInfo["fontAxesUseSourceCoordinates"]) {
this.sceneSettings.fontAxesUseSourceCoordinates = true;
}
if (viewInfo["location"]) {
this.sceneSettings.fontLocationUser = viewInfo["location"];
}
Expand Down Expand Up @@ -2404,6 +2408,9 @@ export class EditorController {
viewInfo["selectedGlyph"] = this.sceneSettings.selectedGlyph;
}
viewInfo["location"] = this.sceneSettings.fontLocationUser;
if (this.sceneSettings.fontAxesUseSourceCoordinates) {
viewInfo["fontAxesUseSourceCoordinates"] = true;
}
const glyphLocations = this.sceneController.getGlyphLocations(true);
if (Object.keys(glyphLocations).length) {
viewInfo["glyphLocations"] = glyphLocations;
Expand Down
73 changes: 59 additions & 14 deletions src/fontra/views/editor/panel-designspace-navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@ export default class DesignspaceNavigationPanel extends Panel {
[]
),
auxiliaryHeaderElement: groupAccordionHeaderButtons([
makeAccordionHeaderButton({
icon: "menu-2",
id: "font-axes-view-options-button",
tooltip: "View options",
onclick: (event) => this.showFontAxesViewOptionsMenu(event),
}),
makeAccordionHeaderButton({
icon: "tool",
tooltip: "Edit font axes",
Expand Down Expand Up @@ -160,7 +166,7 @@ export default class DesignspaceNavigationPanel extends Panel {
}

setup() {
this.fontAxesElement.values = this.sceneSettings.fontLocationUser;
this._setFontLocationValues();
this.glyphAxesElement.values = this.sceneSettings.glyphLocation;

this.fontAxesElement.addEventListener(
Expand All @@ -170,7 +176,9 @@ export default class DesignspaceNavigationPanel extends Panel {
this.sceneController.autoViewBox = false;

this.sceneSettingsController.setItem(
"fontLocationUser",
this.sceneSettings.fontAxesUseSourceCoordinates
? "fontLocationSource"
: "fontLocationUser",
{ ...this.fontAxesElement.values },
{ senderID: this }
);
Expand Down Expand Up @@ -205,7 +213,7 @@ export default class DesignspaceNavigationPanel extends Panel {
);

this.sceneSettingsController.addKeyListener(
["fontLocationUser", "glyphLocation"],
["fontLocationSourceMapped", "glyphLocation"],
(event) => {
this.sceneSettings.editLayerName = null;
this.updateResetAllAxesButtonState();
Expand All @@ -215,11 +223,10 @@ export default class DesignspaceNavigationPanel extends Panel {
// Sent by us, ignore
return;
}
if (event.key === "fontLocationUser") {
this.fontAxesElement.values = event.newValue;
} else {
// (event.key === "glyphLocation")
if (event.key === "glyphLocation") {
this.glyphAxesElement.values = event.newValue;
} else {
this._setFontLocationValues();
}
},
true
Expand Down Expand Up @@ -410,6 +417,13 @@ export default class DesignspaceNavigationPanel extends Panel {
this._updateSources();
}

_setFontLocationValues() {
const locationKey = this.sceneSettings.fontAxesUseSourceCoordinates
? "fontLocationSource"
: "fontLocationUser";
this.fontAxesElement.values = this.sceneSettings[locationKey];
}

sourceListGetSourceItem(sourceIndex) {
if (sourceIndex == undefined) {
return undefined;
Expand All @@ -425,6 +439,25 @@ export default class DesignspaceNavigationPanel extends Panel {
}
}

showFontAxesViewOptionsMenu(event) {
const menuItems = [
{
title: "Use source coordinates",
enabled: () => true,
callback: () => {
this.sceneSettings.fontAxesUseSourceCoordinates =
!this.sceneSettings.fontAxesUseSourceCoordinates;
this._updateAxes();
},
checked: this.sceneSettings.fontAxesUseSourceCoordinates,
},
];

const button = this.contentElement.querySelector("#font-axes-view-options-button");
const buttonRect = button.getBoundingClientRect();
showMenu(menuItems, { x: buttonRect.left, y: buttonRect.bottom });
}

resetFontAxesToDefault(event) {
this.sceneSettings.fontLocationUser = {};
}
Expand Down Expand Up @@ -526,8 +559,11 @@ export default class DesignspaceNavigationPanel extends Panel {
}

async _updateAxes() {
const fontAxes = [...this.fontAxes];
const fontAxes = this.sceneSettings.fontAxesUseSourceCoordinates
? mapAxesFromUserSpaceToSourceSpace(this.fontAxes)
: [...this.fontAxes];
this.fontAxesElement.axes = fontAxes;
this._setFontLocationValues();

const varGlyphController =
await this.sceneModel.getSelectedVariableGlyphController();
Expand Down Expand Up @@ -1131,11 +1167,15 @@ function mapAxesFromUserSpaceToSourceSpace(axes) {
return axes.map((axis) => {
const newAxis = { ...axis };
if (axis.mapping) {
for (const prop of ["minValue", "defaultValue", "maxValue"]) {
newAxis[prop] = piecewiseLinearMap(
axis[prop],
Object.fromEntries(axis.mapping)
);
const mappingDict = Object.fromEntries(axis.mapping);
const properties = axis.values
? ["defaultValue"]
: ["minValue", "defaultValue", "maxValue"];
for (const prop of properties) {
newAxis[prop] = piecewiseLinearMap(axis[prop], mappingDict);
}
if (axis.values) {
axis.values.map((value) => piecewiseLinearMap(value, mappingDict));
}
}
return newAxis;
Expand Down Expand Up @@ -1321,7 +1361,12 @@ function makeClickableIconHeader(iconPath, onClick) {

function groupAccordionHeaderButtons(buttons) {
return html.div(
{ style: `display: grid; grid-template-columns: repeat(${buttons.length}, auto)` },
{
style: `display: grid;
grid-template-columns: repeat(${buttons.length}, auto);
gap: 0.15em;
`,
},
buttons
);
}
Expand Down
1 change: 1 addition & 0 deletions src/fontra/views/editor/scene-controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export class SceneController {
fontLocationUser: {},
fontLocationSource: {},
fontLocationSourceMapped: {},
fontAxesUseSourceCoordinates: false,
glyphLocation: {},
selectedGlyph: null,
selectedGlyphName: null,
Expand Down

0 comments on commit 10e934d

Please sign in to comment.