feat: Add option to use imperial units when doing unit conversions (#…

…1836)

CHANGELOG.md

@@ -31,6 +31,8 @@ app.
   ([#1811](https://github.com/birchill/10ten-ja-reader/pull/1811)).
 - Fixed duplicate matching of names with both 新字体 and 旧字体
   ([#1830](https://github.com/birchill/10ten-ja-reader/issues/1830)).
+- Added supported for doing unit conversions to imperial units
+  ([#1836](https://github.com/birchill/10ten-ja-reader/pull/1836))
 
 ## [1.19.1] - 2024-06-08
 

_locales/en/messages.json

@@ -2028,6 +2028,22 @@
     "message": "Look up text by tapping",
     "description": "Checkbox label for setting to enable looking up by tapping a word"
   },
+  "options_unit_conversion_heading": {
+    "message": "Unit conversion",
+    "description": "Heading for the section for configuring unit conversion"
+  },
+  "options_units_imperial_label": {
+    "message": "Imperial",
+    "description": "Label for the 'imperial' drop-down item"
+  },
+  "options_units_label": {
+    "message": "Preferred units",
+    "description": "Label for the drop-down box for choosing the preferred units"
+  },
+  "options_units_metric_label": {
+    "message": "Metric",
+    "description": "Label for the 'metric' drop-down item"
+  },
   "options_update_check_button_label": {
     "message": "Check for updates",
     "description": "Label for the button to check for database updates"

_locales/ja/messages.json

@@ -2028,6 +2028,22 @@
     "message": "タップでテキストを調べる",
     "description": "Checkbox label for setting to enable looking up by tapping a word"
   },
+  "options_unit_conversion_heading": {
+    "message": "単位換算",
+    "description": "Heading for the section for configuring unit conversion"
+  },
+  "options_units_imperial_label": {
+    "message": "ヤード・ポンド法",
+    "description": "Label for the 'imperial' drop-down item"
+  },
+  "options_units_label": {
+    "message": "単位系",
+    "description": "Label for the drop-down box for choosing the preferred units"
+  },
+  "options_units_metric_label": {
+    "message": "メートル法",
+    "description": "Label for the 'metric' drop-down item"
+  },
   "options_update_check_button_label": {
     "message": "更新を確認",
     "description": "Label for the button to check for database updates"

_locales/zh_hans/messages.json

@@ -2028,6 +2028,22 @@
     "message": "点触文本以查询",
     "description": "Checkbox label for setting to enable looking up by tapping a word"
   },
+  "options_unit_conversion_heading": {
+    "message": "单位转换",
+    "description": "Heading for the section for configuring unit conversion"
+  },
+  "options_units_imperial_label": {
+    "message": "英制",
+    "description": "Label for the 'imperial' drop-down item"
+  },
+  "options_units_label": {
+    "message": "单位制",
+    "description": "Label for the drop-down box for choosing the preferred units"
+  },
+  "options_units_metric_label": {
+    "message": "公制",
+    "description": "Label for the 'metric' drop-down item"
+  },
   "options_update_check_button_label": {
     "message": "检查更新",
     "description": "Label for the button to check for database updates"

src/common/config.ts

@@ -80,6 +80,7 @@ interface Settings {
   noTextHighlight?: boolean;
   popupStyle?: string;
   posDisplay?: PartOfSpeechDisplay;
+  preferredUnits?: 'metric' | 'imperial';
   readingOnly?: boolean;
   showKanjiComponents?: boolean;
   showPriority?: boolean;
@@ -402,6 +403,9 @@ export class Config {
   //
   //   https://github.com/evanw/esbuild/issues/104
   //
+  // UPDATE: Looks like support was added for decorators as of esbuild v0.21.3
+  // https://github.com/evanw/esbuild/releases/tag/v0.21.3
+  //
   // Our options are either to use SWC (which runs the risk of behaving a bit
   // differently to TypeScript) or try to get TSC to transpile the relevant
   // files, e.g. using https://github.com/thomaschaaf/esbuild-plugin-tsc
@@ -1084,6 +1088,21 @@ export class Config {
     void browser.storage.sync.set({ posDisplay: value });
   }
 
+  // preferredUnits: Defaults to 'metric'
+
+  get preferredUnits(): 'metric' | 'imperial' {
+    return this.settings.preferredUnits || 'metric';
+  }
+
+  set preferredUnits(value: 'metric' | 'imperial') {
+    if (this.settings.preferredUnits === value) {
+      return;
+    }
+
+    this.settings.preferredUnits = value;
+    void browser.storage.sync.set({ preferredUnits: value });
+  }
+
   // readingOnly: Defaults to false
 
   get readingOnly(): boolean {
@@ -1321,6 +1340,7 @@ export class Config {
       popupInteractive: this.popupInteractive,
       popupStyle: this.popupStyle,
       posDisplay: this.posDisplay,
+      preferredUnits: this.preferredUnits,
       puckState: this.puckState,
       readingOnly: this.readingOnly,
       showKanjiComponents: this.showKanjiComponents,

src/common/content-config-params.ts

@@ -119,6 +119,9 @@ export interface ContentConfigParams {
   // Indicates the type of display to use for part-of-speech labels.
   posDisplay: PartOfSpeechDisplay;
 
+  // The user's preferred units for unit conversion
+  preferredUnits: 'metric' | 'imperial';
+
   // The state of the puck on the screen (e.g. position, orientation, active
   // state etc.)
   puckState: PuckState | undefined;

src/content/content-config.ts

@@ -177,6 +177,9 @@ export class ContentConfig implements ContentConfigParams {
   get posDisplay() {
     return this.params.posDisplay;
   }
+  get preferredUnits() {
+    return this.params.preferredUnits;
+  }
   get puckState() {
     return this.params.puckState;
   }

src/content/content.ts

@@ -2267,6 +2267,7 @@ export class ContentHandler {
       popupStyle: this.config.popupStyle,
       posDisplay: this.config.posDisplay,
       positionMode: this.popupPositionMode,
+      preferredUnits: this.config.preferredUnits,
       previousHeight: this.popupState?.pos?.height,
       safeArea: this.safeAreaProvider.getSafeArea(),
       showDefinitions: !this.config.readingOnly,

src/content/measure.ts

@@ -36,7 +36,7 @@ export function lookForMeasure({
 
 export type MeasureMeta = {
   type: 'measure';
-  unit: '帖' | '畳' | 'm2';
+  unit: '帖' | '畳' | 'm2' | 'sq ft';
   value: number;
   matchLen: number;
 };
@@ -97,15 +97,15 @@ export function extractMeasureMetadata(text: string): MeasureMeta | undefined {
 }
 
 export type ConvertedMeasure = {
-  unit: '帖' | '畳' | 'm2';
+  unit: '帖' | '畳' | 'm2' | 'sq ft';
   value: number;
   alt?: Array<AlternateMeasure>;
 };
 
 export type AlternateMeasure = {
   type: 'kyouma' | 'chuukyouma' | 'edoma' | 'danchima';
   label?: string;
-  unit: '畳' | 'm2';
+  unit: '畳' | 'm2' | 'sq ft';
   value: number;
 };
 
@@ -120,7 +120,10 @@ const alternateJouSizes: Array<{
   { type: 'danchima', label: '団地間', ratio: 1.445 },
 ];
 
-export function convertMeasure(measure: MeasureMeta): ConvertedMeasure {
+export function convertMeasure(
+  measure: MeasureMeta,
+  preferredUnits: 'metric' | 'imperial'
+): ConvertedMeasure {
   if (measure.unit === 'm2') {
     return {
       unit: '帖',
@@ -134,7 +137,7 @@ export function convertMeasure(measure: MeasureMeta): ConvertedMeasure {
     };
   }
 
-  return {
+  const m2Conversion: ConvertedMeasure = {
     unit: 'm2',
     value: measure.value * 1.62,
     alt:
@@ -149,4 +152,24 @@ export function convertMeasure(measure: MeasureMeta): ConvertedMeasure {
           }))
         : undefined,
   };
+
+  // Since feet are defined in terms of meters,
+  // we can do the conversion from the metric one.
+  if (preferredUnits === 'imperial') {
+    const m2f = 10.763915;
+    return {
+      unit: 'sq ft',
+      value: m2Conversion.value * m2f,
+      alt: m2Conversion.alt
+        ? m2Conversion.alt.map(({ type, label, value }) => ({
+            type,
+            label,
+            unit: 'sq ft',
+            value: value * m2f,
+          }))
+        : undefined,
+    };
+  }
+
+  return m2Conversion;
 }

src/content/popup/metadata.test.ts

@@ -186,6 +186,7 @@ function getShogiMove(
 ): string | undefined {
   const params: Parameters<typeof renderMetadata>[0] = {
     fxData: undefined,
+    preferredUnits: 'metric',
     isCombinedResult: false,
     matchLen: 5, // Not used
     meta: {

src/content/popup/metadata.ts

@@ -14,11 +14,13 @@ import { getLangTag } from './lang-tag';
 
 export function renderMetadata({
   fxData,
+  preferredUnits,
   isCombinedResult,
   matchLen,
   meta,
 }: {
   fxData: ContentConfigParams['fx'];
+  preferredUnits: ContentConfigParams['preferredUnits'];
   isCombinedResult: boolean;
   matchLen: number;
   meta: SelectionMeta;
@@ -34,7 +36,7 @@ export function renderMetadata({
       break;
 
     case 'measure':
-      return renderMeasureInfo(meta);
+      return renderMeasureInfo(meta, preferredUnits);
 
     case 'currency':
       return fxData ? renderCurrencyInfo(meta, fxData) : null;
@@ -76,8 +78,11 @@ function renderEraInfo(meta: EraMeta, eraInfo: EraInfo): HTMLElement {
   );
 }
 
-function renderMeasureInfo(meta: MeasureMeta): HTMLElement {
-  const converted = convertMeasure(meta);
+function renderMeasureInfo(
+  meta: MeasureMeta,
+  preferredUnits: ContentConfigParams['preferredUnits']
+): HTMLElement {
+  const converted = convertMeasure(meta, preferredUnits);
 
   const metaDiv = html(
     'div',
@@ -151,6 +156,8 @@ function renderUnit(
 
   if (unit === 'm2') {
     unitSpan.append('m', html('sup', {}, '2'));
+  } else if (unit === 'sq ft') {
+    unitSpan.append('ft', html('sup', {}, '2'));
   } else if (showRuby) {
     unitSpan.append(
       html(

src/content/popup/names.ts

@@ -27,6 +27,7 @@ export function renderNamesEntries({
   if (options.meta) {
     const metadata = renderMetadata({
       fxData: options.fxData,
+      preferredUnits: options.preferredUnits,
       isCombinedResult: true,
       matchLen,
       meta: options.meta,

src/content/popup/render-popup.ts

@@ -141,6 +141,7 @@ export function renderPopup(
 
         const metadata = renderMetadata({
           fxData: options.fxData,
+          preferredUnits: options.preferredUnits,
           isCombinedResult: false,
           matchLen: 0,
           meta: options.meta,

src/content/popup/show-popup.ts

@@ -70,6 +70,7 @@ export type ShowPopupOptions = {
   posDisplay: PartOfSpeechDisplay;
   positionMode: PopupPositionMode;
   popupStyle: string;
+  preferredUnits: 'metric' | 'imperial';
   previousHeight?: number;
   safeArea: Box;
   showDefinitions: boolean;

src/content/popup/words.ts

@@ -58,6 +58,7 @@ export function renderWordEntries({
   if (options.meta) {
     const metadata = renderMetadata({
       fxData: options.fxData,
+      preferredUnits: options.preferredUnits,
       isCombinedResult: true,
       matchLen,
       meta: options.meta,

src/options/OptionsPage.tsx

@@ -12,6 +12,7 @@ import { KeyboardSettings } from './KeyboardSettings';
 import { PopupInteractivitySettings } from './PopupInteractivitySettings';
 import { PopupStyleSettings } from './PopupStyleSettings';
 import { PuckSettings } from './PuckSettings';
+import { UnitSettings } from './UnitSettings';
 
 type Props = {
   config: Config;
@@ -27,6 +28,7 @@ export function OptionsPage(props: Props) {
         <PopupStyleSettings config={props.config} />
         <PopupInteractivitySettings config={props.config} />
         <CurrencySettings config={props.config} />
+        <UnitSettings config={props.config} />
         {hasKeyboard && <KeyboardSettings config={props.config} />}
         <CopySettings config={props.config} />
         <PuckSettings config={props.config} />

src/options/UnitSettings.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'preact/hooks';
+
+import type { Config } from '../common/config';
+import { useLocale } from '../common/i18n';
+
+import { SectionHeading } from './SectionHeading';
+import { UnitSettingsForm } from './UnitSettingsForm';
+import { useConfigValue } from './use-config-value';
+
+type Props = {
+  config: Config;
+};
+
+export function UnitSettings(props: Props) {
+  const { t } = useLocale();
+  const preferredUnits = useConfigValue(props.config, 'preferredUnits');
+
+  const onChangeUnits = useCallback(
+    (value: 'metric' | 'imperial') => {
+      props.config.preferredUnits = value;
+    },
+    [props.config]
+  );
+
+  if (!preferredUnits) {
+    return null;
+  }
+
+  return (
+    <>
+      <SectionHeading>{t('options_unit_conversion_heading')}</SectionHeading>
+      <div class="py-4">
+        <UnitSettingsForm
+          selectedUnits={preferredUnits}
+          onChange={onChangeUnits}
+        />
+      </div>
+    </>
+  );
+}