Skip to content

Commit

Permalink
Fixed handling of Current sliders, improved resize handle, allowed Se…
Browse files Browse the repository at this point in the history 
…ttings to be resized, allow resizing by only one dimension
  • Loading branch information
@Lorp
Lorp committed May 22, 2024
1 parent 0e2bfbc commit 13ad9ba
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 23 deletions.
67 changes: 51 additions & 16 deletions src/fencer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,25 @@
<meta charset="utf-8">
<style>

/* container query to remove columns when container is narrower than 200px */
@container Settings (max-width: 300px) {
.content #axes>.key {
grid-template-columns: 40px 40px auto 40px auto 16px 16px;
}
.content #axes>.axis {
grid-template-columns: 40px 40px auto 40px auto 16px 16px;
}
.content #axes input.slider {
display: none;
}
.content #axes>.key *:nth-child(2) {
grid-column: auto;
}
.content #axes>.key *:nth-child(4) {
grid-column: auto;
}
}

:root {
font-family: IBM Plex Sans;
font-size: 16px;
Expand Down Expand Up @@ -60,6 +79,7 @@
.window>h2 {
background-color: #ccc;
color: #333;
border-bottom: 1px solid black;
margin: 0;
padding-left: 0.5em;
user-select: none;
Expand Down Expand Up @@ -89,21 +109,29 @@

.window>.resize {
position: absolute;
right: 0;
bottom: 0;
right: -1px;
bottom: -1px;
width: 20px;
height: 20px;
font-family: Material Symbols Outlined;
/* font-family: Material Symbols Outlined; */
border: solid black;
border-width: 1px 0 0 1px;
cursor: nw-resize;
user-select: none;
background-color: white;
}

.window>.resize::before {
/* .window>.resize::before {
content: "aspect_ratio";
} */

.window.fontinfo {
container-name: Settings;
container-type: inline-size;
}

.window.fontinfo .content {
background-color: lightblue;
/* background-color: lightblue; */
user-select: none;
}

Expand Down Expand Up @@ -159,13 +187,8 @@
font-family: Material Symbols Outlined;
}

.output {
color: #093;
}

.input {
.input, .output {
color: #093;
/*} color: #c91616;*/
}

.mapping {
Expand All @@ -181,7 +204,6 @@
display: grid;
grid-template-rows: auto auto 1fr;
background-color: #eee;
border: 1px solid #ccc;
box-sizing: border-box;
}

Expand Down Expand Up @@ -273,8 +295,12 @@
grid-template-columns: 40px 40px 1fr auto 40px 1fr auto 16px 16px;
}

#axes .key>*:nth-child(4), #axes .axis>*:nth-child(4) {
padding: 0 2px;
#axes .key *:nth-child(2) {
grid-column: 2 / 4;
}

#axes .key *:nth-child(4) {
grid-column: 5 / 7;
}

#axes .key>*:nth-child(4), #axes .axis>*:nth-child(4) {
Expand Down Expand Up @@ -314,9 +340,15 @@
}

input.numeric {
font-weight: bold;
width: calc(100% - 7px);
}

input.numeric.default {
font-weight: normal;
color: grey;
}


</style>

Expand All @@ -343,7 +375,11 @@ <h2>Settings</h2>
<div class="content">
<select id="mapping-selector"></select>
<div id="axes"></div>
</div>
<div class="extra">&nbsp;</div>
</div>

<div class="resize no-vertical"></div>

</div>

<div class="window mappings-ui" style="width: 600px; height: 700px; left: 420px; top: 10px;">
Expand All @@ -370,7 +406,6 @@ <h2>Mappings</h2>

</div>


</div>

<div class="resize"></div>
Expand Down
48 changes: 41 additions & 7 deletions src/fencer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,8 +302,6 @@ function loadFontFromArrayBuffer (arrayBuffer, options={}) {
key[4].style.fontFamily = "Material Symbols Outlined";
key[4].title = "Reset all input axes\n(shift-click to reset all output axes)";
key[4].onclick = axisReset;
key[1].style.gridColumn = "2 / 4"; // occupy 2 cells
key[3].style.gridColumn = "5 / 7"; // occupy 2 cells

keyEl.append(...key);
Q("#axes").append(keyEl);
Expand Down Expand Up @@ -419,6 +417,7 @@ function loadFontFromArrayBuffer (arrayBuffer, options={}) {
mappingsChanged();
updateRenders();
updateMappingsXML();
formatNumericControls(GLOBAL.draggingIndex);
}

function axisReset (e) {
Expand Down Expand Up @@ -447,7 +446,7 @@ function loadFontFromArrayBuffer (arrayBuffer, options={}) {

if (GLOBAL.draggingIndex === -1) {
GLOBAL.current[0][axisId] = axis.defaultValue;
GLOBAL.current[1][axisId] = axis.defaultValue;
//GLOBAL.current[1][axisId] = axis.defaultValue;
}
else {
GLOBAL.mappings[GLOBAL.draggingIndex][inputOrOutput][axisId] = axis.defaultValue;
Expand Down Expand Up @@ -1104,6 +1103,14 @@ function mappingsChanged(mode) {
elCurrent1.style.opacity = 0.4;
elCurrent1.style.color = "var(--currentLocationColor)";

// update the output locations for the current axis, if it’s selected
if (GLOBAL.draggingIndex === -1) {
Qall("#axes .axis").forEach((axisEl, a) => {
axisEl.querySelectorAll("input.output").forEach(el => el.value = GLOBAL.current[1][a]);
});
formatNumericControls(-1);
}

// draw the arrow
const arrowSvg = svgArrow({index: -1, x1: svgCoordsFrom[0], y1: svgCoordsFrom[1], x2: svgCoordsTo[0], y2: svgCoordsTo[1], tipLen: 7, tipWid: 7, strokeWidth: 1, color: "var(--currentLocationColor)"});

Expand Down Expand Up @@ -1362,19 +1369,44 @@ function exportFontWithTables(font, inserts={}, deletes={}) {
return newFontBuf;
}

function formatNumericControls(m) {
Qall("#axes .axis").forEach((axisEl, a) => {
const axis = GLOBAL.font.fvar.axes[a];
const inputNumericEl = axisEl.querySelector(".input.numeric");
const outputNumericEl = axisEl.querySelector(".output.numeric");
const inputVal = (m === -1) ? GLOBAL.current[0][a] : GLOBAL.mappings[m][0][a];
const outputVal = (m === -1) ? GLOBAL.current[1][a] : GLOBAL.mappings[m][1][a];

if (simpleNormalize(axis, inputVal) === 0)
inputNumericEl.classList.add("default");
else
inputNumericEl.classList.remove("default");

if (simpleNormalize(axis, outputVal) === 0)
outputNumericEl.classList.add("default");
else
outputNumericEl.classList.remove("default");
});
}

function updateMappingsSliders(m) {

Qall("#axes .axis").forEach((axisEl, a) => {
const axis = GLOBAL.font.fvar.axes[a];
const inputSliderEl = axisEl.querySelector(".input.slider");
const inputNumericEl = axisEl.querySelector(".input.numeric");
const outputSliderEl = axisEl.querySelector(".output.slider");
const outputNumericEl = axisEl.querySelector(".output.numeric");

inputSliderEl.value = inputNumericEl.value = (m === -1) ? GLOBAL.current[0][a] : GLOBAL.mappings[m][0][a];
outputSliderEl.value = outputNumericEl.value = (m === -1) ? GLOBAL.current[1][a] : GLOBAL.mappings[m][1][a];
const inputVal = (m === -1) ? GLOBAL.current[0][a] : GLOBAL.mappings[m][0][a];
const outputVal = (m === -1) ? GLOBAL.current[1][a] : GLOBAL.mappings[m][1][a];

inputSliderEl.value = inputNumericEl.value = inputVal;
outputSliderEl.value = outputNumericEl.value = outputVal;
});

formatNumericControls(m);

// select the correct item in the mappings dropdown
Q("#mapping-selector").value = m;

Expand Down Expand Up @@ -1502,8 +1534,10 @@ function initFencer() {
if (!isResizing) return;
const dx = e.clientX - initialMouseX;
const dy = e.clientY - initialMouseY;
windowEl.style.width = initialWindowWidth + dx + 'px';
windowEl.style.height = initialWindowHeight + dy + 'px';
if (!resizeHandle.classList.contains("no-horizontal"))
windowEl.style.width = initialWindowWidth + dx + 'px';
if (!resizeHandle.classList.contains("no-vertical"))
windowEl.style.height = initialWindowHeight + dy + 'px';
mappingsChanged(); // update the SVG, yay!
};

Expand Down

0 comments on commit 13ad9ba

Please sign in to comment.