fontdue-js 2.8.3 → 2.9.0

package/dist/components/useTotalStyles.js

@@ -8,19 +8,20 @@ var _useTotalStyles_fontCollection2 = _interopRequireDefault(require("../__gener
 var _reactRelay = require("react-relay");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const useTotalStyles = _ref => {
-  var _data$children;
   let {
     fontCollection
   } = _ref;
-  const data = (0, _reactRelay.useFragment)((_useTotalStyles_fontCollection2.default.hash && _useTotalStyles_fontCollection2.default.hash !== "24cf564c6f5bf49e27a9a0d65c937882" && console.error("The definition of 'useTotalStyles_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useTotalStyles_fontCollection2.default), fontCollection);
-  const variableFonts = (_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.filter(child => child.isVariableFont);
-  let totalStyles = data.totalStyles;
-  if (variableFonts !== null && variableFonts !== void 0 && variableFonts.length) {
-    totalStyles -= (variableFonts === null || variableFonts === void 0 ? void 0 : variableFonts.reduce((acc, child) => acc + child.totalStyles, 0)) ?? 0;
+  const data = (0, _reactRelay.useFragment)((_useTotalStyles_fontCollection2.default.hash && _useTotalStyles_fontCollection2.default.hash !== "d050379fa0ed41b1f9ce94454366187a" && console.error("The definition of 'useTotalStyles_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useTotalStyles_fontCollection2.default), fontCollection);
+  let variableFonts = 0;
+  if (data.isVariableFont) {
+    variableFonts = data.totalStyles ?? 0;
+  } else {
+    var _data$children;
+    variableFonts = ((_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.filter(child => child.isVariableFont).reduce((acc, child) => acc + child.totalStyles, 0)) ?? 0;
   }
   return {
-    totalStyles,
-    variableFonts: variableFonts === null || variableFonts === void 0 ? void 0 : variableFonts.length
+    totalStyles: data.totalStyles - variableFonts,
+    variableFonts
   };
 };
 var _default = useTotalStyles;

package/dist/fontdue.css

@@ -883,15 +883,15 @@ div[data-component=TypeTesters] {
   }
 }
 
-.character-viewer__monitor__container,
-.character-viewer__feature-monitor__container {
+.character-viewer__monitor__container {
   position: sticky;
-  top: var(--character_viewer_sticky_top, 16px);
+  top: var(--character_viewer_sticky_top, 32px);
 }
 
 .character-viewer__monitor__character-container {
   position: relative;
   margin-bottom: 32px;
+  height: calc(1px * (var(--ascender) - var(--descender) + var(--line-gap)) * var(--scale));
 }
 
 .character-viewer__monitor__character {
@@ -935,11 +935,19 @@ div[data-component=TypeTesters] {
   grid-template-columns: max-content auto;
   grid-column-gap: 20px;
   line-height: 1.6;
+  --checkbox-size: 20px;
+  --checkbox-margin: 10px;
 }
-.character-viewer__monitor__details span {
+.character-viewer__monitor__details > span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+}
+.character-viewer__monitor__details > span > label {
+  display: flex;
+  align-items: center;
 }
 @media screen and (max-width: 1000px) {
   .character-viewer__monitor__details {
@@ -950,80 +958,58 @@ div[data-component=TypeTesters] {
   }
 }
 
-.character-viewer__feature-monitor__characters,
-.character-viewer__feature-monitor__labels {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 1fr;
-}
-
-.character-viewer__feature-monitor__characters {
-  --size: calc(var(--monitor-width) * 1 / 3);
-  --scale: calc(var(--size) / var(--units-per-em));
-  margin-top: 12px;
-  margin-bottom: 32px;
-  position: relative;
-}
-
-.character-viewer__feature-monitor__characters__on,
-.character-viewer__feature-monitor__characters__off {
-  padding: 0 10px;
-  position: relative;
-}
-
-.character-viewer__feature-monitor__character {
-  display: block;
-  font-size: calc(1px * var(--size));
-  text-align: center;
-  white-space: pre;
-  position: relative;
-  z-index: 1;
-}
-
-.character-viewer__feature-monitor__characters__off {
-  overflow: auto;
-  border-right: 1px solid var(--horizontal_rule_color, currentcolor);
+.character-viewer__block {
+  clear: both;
 }
-.character-viewer__feature-monitor__characters__off > div {
-  opacity: 0.3;
+.character-viewer__block:not(:first-child) {
+  padding-top: 20px;
 }
 
 .character-viewer__block__name {
   height: 30px;
 }
 
-.character-viewer__block:not(:last-child) .character-viewer__block__characters {
-  margin-bottom: 20px;
-}
-
 .character-viewer__block__characters {
-  display: grid;
-  grid-template-columns: repeat(calc(var(--width) / 60), minmax(0, 1fr));
   font-size: 30px;
   margin-left: 1px;
 }
-.character-viewer__block__characters > div {
+
+.character-viewer__block__character-list > div {
+  --size: 1;
+  --item-size: calc(var(--size) / (var(--width) / 60) * 100%);
+  --height: calc(var(--item-size) / var(--size));
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid;
   margin-left: -1px;
   margin-bottom: -1px;
-  padding: 12px 0;
   text-align: center;
   cursor: default;
   white-space: pre;
+  width: var(--item-size);
+  height: 0;
+  padding-top: calc(var(--height) / 2);
+  padding-bottom: calc(var(--height) / 2);
+  float: left;
+  z-index: 0;
+  position: relative;
 }
-.character-viewer__block__characters > div[data-size="2"] {
-  grid-column: span 2;
+.character-viewer__block__character-list > div[data-size="2"] {
+  --size: 2;
 }
-.character-viewer__block__characters > div[data-size="3"] {
-  grid-column: span 3;
+.character-viewer__block__character-list > div[data-size="3"] {
+  --size: 3;
 }
-.character-viewer__block__characters > div[data-size="4"] {
-  grid-column: span 4;
+.character-viewer__block__character-list > div[data-size="4"] {
+  --size: 4;
 }
-.character-viewer__block__characters > div[data-size="5"] {
-  grid-column: span 5;
+.character-viewer__block__character-list > div[data-size="5"] {
+  --size: 5;
 }
 @media screen and (min-width: 600px) {
-  .character-viewer__block__characters > div:hover, .character-viewer__block__characters > div[data-selected=true] {
+  .character-viewer__block__character-list > div:hover, .character-viewer__block__character-list > div[data-selected=true] {
+    z-index: 1;
     background: var(--character_viewer_selected_background_color, var(--primary_text_color));
     border-color: var(--character_viewer_selected_border_color, var(--primary_text_color));
     color: var(--character_viewer_selected_text_color, var(--primary_background_color));
@@ -1033,7 +1019,6 @@ div[data-component=TypeTesters] {
 .checkbox {
   position: relative;
   flex-shrink: 0;
-  cursor: pointer;
   margin-right: var(--checkbox-margin, 20px);
   width: var(--checkbox-size, 40px);
   height: var(--checkbox-size, 40px);

package/dist/utils.d.ts

@@ -26,4 +26,5 @@ export declare const variableInstanceCSS: (variableInstance: VariableInstance) =
 export declare const parseCustomProperties: (props: readonly string[] | null | undefined) => {
     [key: string]: string;
 };
+export declare const inspect: (value: any) => any;
 export {};

package/dist/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelected = exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collContainsSkuId = void 0;
+exports.isSelected = exports.inspect = exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collContainsSkuId = void 0;
 exports.kebabToCamel = kebabToCamel;
 exports.notEmpty = notEmpty;
 exports.variableSettingsCSS = exports.variableInstanceSettings = exports.variableInstanceCSS = exports.pluralize = exports.parseCustomProperties = void 0;
@@ -83,4 +83,9 @@ const parseCustomProperties = props => {
     return acc;
   }, {});
 };
-exports.parseCustomProperties = parseCustomProperties;
+exports.parseCustomProperties = parseCustomProperties;
+const inspect = value => {
+  console.log(value);
+  return value;
+};
+exports.inspect = inspect;

package/package.json

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