fontdue-js 2.26.0 → 2.26.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.26.1
+
+- Fixed a jitter in the `TypeTester` variable-font axis sliders: dragging a slider no longer shifts the handle position as the instance name and value beside it change width. The instance name now settles shortly after dragging stops, and the value reserves a fixed width for its range.
+
 ## 2.26.0
 
 - Added support for **OpenType color fonts** (COLRv1, COLRv0, SVG, sbix, CBDT). When a typeface ships multiple color-tech variants of the same style, fontdue-js now picks the source the current browser can actually render using `CSS.supports("font-tech(color-X)")` — fixing cases where Chrome would otherwise pin an SVG-in-OpenType file it can only render as outline. Falls back optimistically on SSR / pre-`tech()` browsers, so existing setups continue to work unchanged.

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -27,8 +27,10 @@ const TypeTesterVariableAxes = _ref => {
   if (!variableSettings) return null;
   if (!axes) return null;
   const handleChange = (axis, value) => {
-    variableSettings[axis] = value;
-    setVariableSettings(variableSettings);
+    setVariableSettings({
+      ...variableSettings,
+      [axis]: value
+    });
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__variable-axes"
@@ -50,14 +52,25 @@ const TypeTesterVariableAxes = _ref => {
     } = _ref3;
     const isSmall = Math.abs(maxValue - minValue) <= 1;
     const value = variableSettings[axis];
+    const format = v => isSmall ? v.toFixed(2) : v.toFixed(0);
+
+    // Reserve enough room for the widest value the axis can show so the
+    // number changing (e.g. 99 → 100, or a decimal flipping sign) never
+    // reflows the slider beside it. The widest string is always at one of
+    // the endpoints — most digits plus any minus sign. With tabular
+    // figures (tnum, set in CSS) each character is a stable 1ch wide.
+    const valueWidth = Math.max(format(minValue).length, format(maxValue).length);
     return /*#__PURE__*/_react.default.createElement("div", {
       key: axis,
       className: "type-tester__variable-axes__axis"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "type-tester__variable-axes__name"
     }, name), /*#__PURE__*/_react.default.createElement("span", {
-      className: "type-tester__variable-axes__value"
-    }, isSmall ? value.toFixed(2) : value.toFixed(0)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__variable-axes__value",
+      style: {
+        width: `${valueWidth}ch`
+      }
+    }, format(value)), /*#__PURE__*/_react.default.createElement("div", {
       className: "type-tester__variable-axes__slider"
     }, /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
       value: value,

package/dist/components/TypeTester/index.js

@@ -20,6 +20,7 @@ var _TypeTesterContent = _interopRequireDefault(require("./TypeTesterContent"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
 var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
 var _TypeTesterVariableAxes = _interopRequireDefault(require("./TypeTesterVariableAxes"));
+var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -51,6 +52,12 @@ const TypeTester = _ref => {
   const props = (0, _TypeTesterState.default)({
     id
   });
+
+  // The instance name (e.g. "Regular" → "Custom") is a flex sibling of the
+  // inline axis slider, so updating it mid-drag changes its width and shifts
+  // the slider. Debounce the value used purely for the name display — the font
+  // preview and sliders keep reading the live `props.variableSettings`.
+  const nameVariableSettings = (0, _hooks.useDebouncedValue)(props.variableSettings, 200);
   (0, _react.useEffect)(() => {
     if (onFocus && props.focused) onFocus();
     if (onBlur && !props.focused) onBlur();
@@ -86,7 +93,7 @@ const TypeTester = _ref => {
     className: "type-tester__toolbar"
   }, /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelectData.default, {
     fontStyle: fontStyle,
-    variableSettings: props.variableSettings,
+    variableSettings: nameVariableSettings,
     viewer: viewer,
     onSelectFontStyleValue: _ref2 => {
       let {

package/dist/fontdue.css

@@ -708,6 +708,7 @@ div[data-component=TypeTesters] {
   margin-left: 10px;
   margin-right: 16px;
   text-align: right;
+  font-feature-settings: "tnum" 1;
 }
 .type-tester__variable-axes__name {
   white-space: nowrap;

package/dist/hooks.d.ts

@@ -1 +1,2 @@
+export declare function useDebouncedValue<T>(value: T, delay: number): T;
 export declare const useNewPortalElement: () => import("react").RefObject<HTMLDivElement>;

package/dist/hooks.js

@@ -3,8 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useDebouncedValue = useDebouncedValue;
 exports.useNewPortalElement = void 0;
 var _react = require("react");
+// Returns a copy of `value` that only updates `delay` ms after `value` stops
+// changing. Useful for trailing UI that shouldn't react to rapid changes mid
+// interaction (e.g. the variable-font instance name while a slider is dragged).
+// NOTE: detects changes by reference, so callers must update `value`
+// immutably — an object mutated in place won't trigger an update.
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
 const useNewPortalElement = () => {
   const elementRef = (0, _react.useRef)(document.createElement('div'));
   (0, _react.useEffect)(() => {

package/fontdue.css

@@ -674,7 +674,8 @@ div[data-component='TypeTesters'] {
 .type-tester__variable-axes__value {
   margin-left: 10px;
   margin-right: 16px;
-  width: 3em;
+  /* width is reserved per-axis inline (in ch) for the widest value in range,
+     so the number changing never reflows the slider. */
   text-align: right;
   font-feature-settings: 'tnum' 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.26.0",
+  "version": "2.26.1",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",