From 6a7a7dcd5ae9f569469978ab7d4034fd63af416c Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Fri, 16 Feb 2024 15:35:27 +1100 Subject: [PATCH] site: Add metrics viewer to site (#172) --- pnpm-lock.yaml | 13 +- site/package.json | 1 + site/src/components/MetricsPreview.tsx | 438 ++++++++++++++----------- 3 files changed, 261 insertions(+), 191 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ba4fd1..28a0a5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -209,6 +209,9 @@ importers: react-helmet-async: specifier: ^2.0.4 version: 2.0.4(react-dom@18.2.0)(react@18.2.0) + react-icons: + specifier: ^5.0.1 + version: 5.0.1(react@18.2.0) react-syntax-highlighter: specifier: ^15.5.0 version: 15.5.0(react@18.2.0) @@ -14914,7 +14917,6 @@ packages: react: 16.14.0 scheduler: 0.19.1 dev: false - bundledDependencies: false /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} @@ -14962,6 +14964,14 @@ packages: shallowequal: 1.1.0 dev: false + /react-icons@5.0.1(react@18.2.0): + resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: false @@ -15066,7 +15076,6 @@ packages: object-assign: 4.1.1 prop-types: 15.8.1 dev: false - bundledDependencies: false /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} diff --git a/site/package.json b/site/package.json index 12d3e2f..21e9b8e 100644 --- a/site/package.json +++ b/site/package.json @@ -38,6 +38,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet-async": "^2.0.4", + "react-icons": "^5.0.1", "react-syntax-highlighter": "^15.5.0" }, "devDependencies": { diff --git a/site/src/components/MetricsPreview.tsx b/site/src/components/MetricsPreview.tsx index 5d6ffa0..588a104 100644 --- a/site/src/components/MetricsPreview.tsx +++ b/site/src/components/MetricsPreview.tsx @@ -1,7 +1,22 @@ import React, { ChangeEvent, useState, useEffect } from 'react'; -import { Box, Text, Input, FormLabel, IconButton } from '@chakra-ui/react'; +import { + Box, + Text, + Input, + FormLabel, + IconButton, + Icon, + Tabs, + TabList, + Tab, + TabPanels, + TabPanel, +} from '@chakra-ui/react'; +import { VscJson } from 'react-icons/vsc'; +import { TbRulerMeasure } from 'react-icons/tb'; import { EditIcon } from '@chakra-ui/icons'; import { useAppState } from './AppStateContext'; +import Code from './Code'; const Metric = ({ voffset = 0, @@ -132,205 +147,250 @@ const MetricsPreview = () => { const lineHeightNormal = lineHeightScale * previewFontSize; return ( - - {!editMetrics && ( - } - aria-label="Customise font metrics" - title="Customise font metrics" - variant="outline" - borderRadius={20} - _hover={{ color: 'pink.500', background: 'transparent' }} - _focus={{ boxShadow: 'outline', borderColor: 'transparent' }} - _active={{ transform: 'scale(.9)' }} - onClick={() => setEditMetrics(true)} - color="gray.600" - pos="absolute" - bottom={0} - right={0} - /> - )} - - -1 - ? `'${selectedFont.name}'` - : selectedFont.name - } - lineHeight="normal" - pos="relative" - overflow="auto" - paddingLeft="130px" // cater for arrow offsets - paddingRight="150px" // cater for arrow offsets - paddingTop="40px" // cater for ascender overflow - marginTop="-40px" // cater for ascender overflow - paddingBottom="60px" // cater for descender overflow - marginBottom="-60px" // cater for descender overflow - > - - - - - - - - - - - - - - Hg - + + + + + - - - {editMetrics && ( - - - - Ascender - - ) => { - setCustomMetrics({ - ...customMetrics, - ascent: parseInt(ev.currentTarget.value, 10), - }); - }} - borderRadius={12} - _focus={{ boxShadow: 'outline', borderColor: 'transparent' }} - w="80px" - /> + Measurements + + + + + JSON + + + + - - Cap Height - - ) => { - setCustomMetrics({ - ...customMetrics, - capHeight: parseInt(ev.currentTarget.value, 10), - }); - }} - borderRadius={12} - _focus={{ boxShadow: 'outline', borderColor: 'transparent' }} - w="80px" - /> + {!editMetrics && ( + } + aria-label="Customise font metrics" + title="Customise font metrics" + variant="outline" + borderRadius={20} + _hover={{ color: 'pink.500', background: 'transparent' }} + _focus={{ boxShadow: 'outline', borderColor: 'transparent' }} + _active={{ transform: 'scale(.9)' }} + onClick={() => setEditMetrics(true)} + color="gray.600" + pos="absolute" + bottom={0} + right={0} + /> + )} + + -1 + ? `'${selectedFont.name}'` + : selectedFont.name + } + lineHeight="normal" + pos="relative" + overflow="auto" + paddingLeft="130px" // cater for arrow offsets + paddingRight="150px" // cater for arrow offsets + paddingTop="40px" // cater for ascender overflow + marginTop="-40px" // cater for ascender overflow + paddingBottom="60px" // cater for descender overflow + marginBottom="-60px" // cater for descender overflow + > + + + + + + + + + + + + + + Hg + + + + + {editMetrics && ( + + + + Ascender + + ) => { + setCustomMetrics({ + ...customMetrics, + ascent: parseInt(ev.currentTarget.value, 10), + }); + }} + borderRadius={12} + _focus={{ + boxShadow: 'outline', + borderColor: 'transparent', + }} + w="80px" + /> + + + + Cap Height + + ) => { + setCustomMetrics({ + ...customMetrics, + capHeight: parseInt(ev.currentTarget.value, 10), + }); + }} + borderRadius={12} + _focus={{ + boxShadow: 'outline', + borderColor: 'transparent', + }} + w="80px" + /> + + + + Descender + + ) => { + setCustomMetrics({ + ...customMetrics, + descent: parseInt(ev.currentTarget.value, 10), + }); + }} + borderRadius={12} + _focus={{ + boxShadow: 'outline', + borderColor: 'transparent', + }} + w="80px" + /> + + + )} + + - - Descender - - ) => { - setCustomMetrics({ - ...customMetrics, - descent: parseInt(ev.currentTarget.value, 10), - }); - }} - borderRadius={12} - _focus={{ boxShadow: 'outline', borderColor: 'transparent' }} - w="80px" - /> + + {JSON.stringify(metrics, null, 2).replace(/"([^:].*)":/g, `$1:`)} + - - )} - + + + ); };