Fixed #506. Clarified behavior of localized setting.

wordplaydev · Jul 6, 2024 · 9d2fedf · 9d2fedf
1 parent 4e11764
commit 9d2fedf
Show file tree

Hide file tree

Showing 26 changed files with 172 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 -   [#507](https://github.com/wordplaydev/wordplay/issues/507) Fixed Webpage stream replay bug.
 -   [#216](https://github.com/wordplaydev/wordplay/issues/216) Improved design of view code and copy buttons.
 -   [#397](https://github.com/wordplaydev/wordplay/issues/397) Redesigned home page for clarity and navigability.
+-   [#506](https://github.com/wordplaydev/wordplay/issues/506) Clarified behavior of localized setting.
 -   Added fade out sequence.
 -   Fixed select all button.
 

diff --git a/src/components/concepts/BindConceptView.svelte b/src/components/concepts/BindConceptView.svelte
@@ -20,11 +20,11 @@
         >{#if concept.bind.type}•<RootView
                 node={concept.bind.type}
                 inline
-                localized
+                localized="symbolic"
             />{#if concept.bind.value}: <RootView
                     node={concept.bind.value}
                     inline
-                    localized
+                    localized="symbolic"
                 />{/if}{/if}
     </svelte:fragment>
 </Speech>
diff --git a/src/components/concepts/ConceptView.svelte b/src/components/concepts/ConceptView.svelte
@@ -78,7 +78,7 @@
                     {/if}{@const name = variable.names.getPreferredName(
                         $locales.getLocales(),
                     )}{#if name}<RootView
-                            localized
+                            localized="symbolic"
                             node={name.withoutLanguage()}
                         />{/if}{/each}{/if}</svelte:fragment
         >

diff --git a/src/components/concepts/SegmentHTMLView.svelte b/src/components/concepts/SegmentHTMLView.svelte
@@ -59,7 +59,7 @@
     {:else}<RootView
             node={segment.node}
             inline
-            localized
+            localized="symbolic"
         />{/if}{:else if segment instanceof ValueRef}<strong
         ><ValueView value={segment.value} /></strong
     >{:else if segment instanceof ConceptRef}<ConceptLinkUI link={segment} />

diff --git a/src/components/concepts/TypeView.svelte b/src/components/concepts/TypeView.svelte
@@ -35,7 +35,7 @@
                 concept && (event.key === 'Enter' || event.key === ' ')
                     ? navigate(concept)
                     : undefined}
-            ><RootView node={type} inert inline localized /></span
+            ><RootView node={type} inert inline localized="symbolic" /></span
         >{/each}
 </span>
 

diff --git a/src/components/editor/EvaluateView.svelte b/src/components/editor/EvaluateView.svelte
@@ -62,7 +62,7 @@
             node={nextBind.withoutValue()}
             inline
             elide
-            localized
+            localized="symbolic"
             inert
         />{#if menuPosition}<PlaceholderView
                 position={menuPosition}

diff --git a/src/components/editor/ExpressionPlaceholderView.svelte b/src/components/editor/ExpressionPlaceholderView.svelte
@@ -30,7 +30,7 @@
                     node,
                     $locales,
                     context,
-                    $root
+                    $root,
                 );
         } else placeholder = undefined;
     }
@@ -48,7 +48,12 @@
             />{:else if inferredType && !(inferredType instanceof UnknownType)}<span
                 >•</span
             ><div class:inferred={node.type === undefined && inferredType}
-                ><RootView elide inert localized node={inferredType} /></div
+                ><RootView
+                    elide
+                    inert
+                    localized="symbolic"
+                    node={inferredType}
+                /></div
             >{/if}{#if caret}<PlaceholderView position={node} />{/if}</span
     ></span
 >

diff --git a/src/components/editor/Menu.svelte b/src/components/editor/Menu.svelte
@@ -178,10 +178,13 @@
                     {#if newNode !== undefined}
                         {#if revision.isRemoval()}
                             <strike
-                                ><RootView node={newNode} localized /></strike
+                                ><RootView
+                                    node={newNode}
+                                    localized="symbolic"
+                                /></strike
                             >
                         {:else}
-                            <RootView node={newNode} localized />
+                            <RootView node={newNode} localized="symbolic" />
                         {/if}
                     {:else}
                         <MarkupHTMLView
@@ -232,7 +235,7 @@
                             newNode.statements.length > 1
                                 ? newNode
                                 : newNode}
-                            localized
+                            localized="symbolic"
                         />
                     </div>
                 {/if}

diff --git a/src/components/editor/TokenView.svelte b/src/components/editor/TokenView.svelte
@@ -35,23 +35,39 @@
             ? node.getPlaceholder($root, context, $locales)
             : undefined;
 
+    $: isInCaret =
+        $caret &&
+        node.getTextLength() > 0 &&
+        ($caret.getTokenExcludingSpace() === node ||
+            ($caret.tokenPrior === node && $caret.atBeginningOfTokenSpace()));
+
     // True if the caret is "on" this token.
     $: active =
+        $caret &&
         node.getTextLength() > 0 &&
-        ($caret?.getTokenExcludingSpace() === node ||
-            ($caret?.tokenPrior === node &&
+        ($caret.getTokenExcludingSpace() === node ||
+            ($caret.tokenPrior === node &&
                 $caret.atBeginningOfTokenSpace() &&
                 $caret.tokenIncludingSpace &&
                 $caret.tokenAtHasPrecedingSpace()));
 
     // True if this is the recently added token.
     $: added = $caret?.addition?.contains(node) ?? false;
 
-    // Localize the token's text using the preferred translation.
+    // If requesed, localize the token's text.
     // Don't localize the name if the caret is in the name.
     $: text =
-        context && $root && localize && $localize
-            ? node.localized($locales.getLocales(), $root, context)
+        !isInCaret &&
+        context &&
+        $root &&
+        localize &&
+        ($localize === 'localized' || $localize === 'symbolic')
+            ? node.localized(
+                  $localize === 'symbolic',
+                  $locales.getLocales(),
+                  $root,
+                  context,
+              )
             : node.getText();
 
     // Prepare the text for rendering by replacing spaces with non-breaking spaces

diff --git a/src/components/palette/ContentEditor.svelte b/src/components/palette/ContentEditor.svelte
@@ -27,16 +27,16 @@
                 value instanceof Evaluate &&
                 (value.is(
                     project.shares.output.Phrase,
-                    project.getNodeContext(value)
+                    project.getNodeContext(value),
                 ) ||
                     value.is(
                         project.shares.output.Group,
-                        project.getNodeContext(value)
+                        project.getNodeContext(value),
                     ) ||
                     value.is(
                         project.shares.output.Shape,
-                        project.getNodeContext(value)
-                    ))
+                        project.getNodeContext(value),
+                    )),
         );
 
     function editContent(index: number) {
@@ -82,7 +82,7 @@
                     active={editable}
                     action={() => editContent(index)}>{EDIT_SYMBOL}</Button
                 >
-                <RootView node={content} localized />
+                <RootView node={content} localized="symbolic" />
             </div>
         {/each}
         <div class="add">
@@ -96,7 +96,7 @@
                               project,
                               list,
                               list?.values.length ?? 1 - 1,
-                              'phrase'
+                              'phrase',
                           )
                         : undefined}
                 >+{project.shares.output.Phrase.getNames()[0]}</Button
@@ -111,7 +111,7 @@
                               project,
                               list,
                               list?.values.length ?? 1 - 1,
-                              'group'
+                              'group',
                           )
                         : undefined}
                 >+{project.shares.output.Group.getNames()[0]}</Button
@@ -126,7 +126,7 @@
                               project,
                               list,
                               list?.values.length ?? 1 - 1,
-                              'shape'
+                              'shape',
                           )
                         : undefined}
                 >+{project.shares.output.Shape.getNames()[0]}</Button

diff --git a/src/components/project/Contexts.ts b/src/components/project/Contexts.ts
@@ -25,6 +25,7 @@ import type {
 import type { CaretPosition } from '../../edit/Caret';
 import type LanguageCode from '../../locale/LanguageCode';
 import type Spaces from '@parser/Spaces';
+import type { LocalizedValue } from '@db/LocalizedSetting';
 
 // App related contexts
 
@@ -186,7 +187,7 @@ export function getHidden() {
 
 export const LocalizeSymbol = Symbol('localize');
 export function getLocalize() {
-    return getContext<Writable<boolean> | undefined>(LocalizeSymbol);
+    return getContext<Writable<LocalizedValue> | undefined>(LocalizeSymbol);
 }
 
 export const ConceptPathSymbol = Symbol('palette-path');

diff --git a/src/components/project/ProjectView.svelte b/src/components/project/ProjectView.svelte
@@ -125,6 +125,8 @@
     import { AnimationFactorIcons } from '@db/AnimationFactorSetting';
     import { COPY_SYMBOL } from '@parser/Symbols';
     import CopyButton from './CopyButton.svelte';
+    import { toLocaleString } from '@locale/Locale';
+    import { default as ModeChooser } from '@components/widgets/Mode.svelte';
 
     export let project: Project;
     export let original: Project | undefined = undefined;
@@ -1404,21 +1406,33 @@
                                         toggle={toggleBlocks}
                                         on={$blocks}
                                     />
-                                    <Switch
-                                        onLabel={$locales.getLocale().language}
-                                        onTip={$locales.get(
+                                    <ModeChooser
+                                        labeled={false}
+                                        descriptions={$locales.get(
                                             (l) =>
-                                                l.ui.source.toggle.localized.on,
-                                        )}
-                                        offLabel={withVariationSelector('🌎')}
-                                        offTip={$locales.get(
-                                            (l) =>
-                                                l.ui.source.toggle.localized
-                                                    .off,
+                                                l.ui.dialog.settings.mode
+                                                    .localized,
                                         )}
-                                        toggle={(on) =>
-                                            Settings.setLocalized(on)}
-                                        on={$localized}
+                                        choice={$localized === 'actual'
+                                            ? 0
+                                            : $localized === 'localized'
+                                              ? 1
+                                              : 2}
+                                        select={(choice) =>
+                                            Settings.setLocalized(
+                                                choice === 0
+                                                    ? 'actual'
+                                                    : choice === 1
+                                                      ? 'localized'
+                                                      : 'symbolic',
+                                            )}
+                                        modes={[
+                                            '...',
+                                            toLocaleString(
+                                                $locales.getLocale(),
+                                            ),
+                                            '😀',
+                                        ]}
                                     />
                                     <!-- Make a Button for every navigate command -->
                                     {#each VisibleNavigateCommands as command}<CommandButton
@@ -1648,7 +1662,7 @@
                 <RootView
                     node={$dragged}
                     spaces={project.getSourceOf($dragged)?.spaces}
-                    localized
+                    localized={$localized}
                 />
                 <div class="cursor">🐲</div>
             </div>

diff --git a/src/components/project/RootView.svelte b/src/components/project/RootView.svelte
@@ -25,6 +25,7 @@
     import FormattedLiteral from '../../nodes/FormattedLiteral';
     import type Caret from '@edit/Caret';
     import getPreferredSpaces from '@parser/getPreferredSpaces';
+    import type { LocalizedValue } from '@db/LocalizedSetting';
 
     export let node: Node;
     /** Optional space. To enable preferred space, set flag below. */
@@ -34,7 +35,7 @@
     /** If inline, and true, this will be a maximum width */
     export let elide = false;
     /** If true, hides names and docs not in a selected locale */
-    export let localized = false;
+    export let localized: LocalizedValue = 'symbolic';
     export let caret: Caret | undefined = undefined;
 
     /** Get the root, or make one if it's not a source. */
@@ -58,9 +59,9 @@
     let hidden = writable<Set<Node>>(new Set());
     setContext(HiddenSymbol, hidden);
 
-    let localize = writable<boolean>(localized);
+    let localize = writable<LocalizedValue>(localized ?? 'symbolic');
     setContext(LocalizeSymbol, localize);
-    $: localize.set(localized);
+    $: localize.set(localized ?? 'symbolic');
 
     // Update what's hidden.
     $: {

diff --git a/src/components/widgets/Mode.svelte b/src/components/widgets/Mode.svelte
@@ -8,10 +8,13 @@
     export let choice: number;
     export let select: (choice: number) => void;
     export let active = true;
+    export let labeled = true;
 </script>
 
 <div class="mode">
-    <span class="label" id={descriptions.label}>{descriptions.label}</span>
+    {#if labeled}
+        <span class="label" id={descriptions.label}>{descriptions.label}</span>
+    {/if}
     <div class="group" role="radiogroup" aria-labelledby={descriptions.label}>
         {#each modes as mode, index}
             <!-- We prevent mouse down default to avoid stealing keyboard focus. -->

diff --git a/src/db/LocalizedSetting.ts b/src/db/LocalizedSetting.ts
@@ -1,9 +1,24 @@
 import Setting from './Setting';
 
-export const LocalizedSetting = new Setting<boolean>(
+export type LocalizedValue = 'actual' | 'localized' | 'symbolic';
+
+export const LocalizedSetting = new Setting<LocalizedValue>(
     'localized',
     true,
-    false,
-    () => true,
-    (current, value) => current === value
+    'localized',
+    (value) =>
+        // An old boolean value? Convert to one of the three states.
+        typeof value === 'boolean'
+            ? value
+                ? 'localized'
+                : 'actual'
+            : // A string value? Check if it's one of the three states, and default to localized if not.
+              typeof value === 'string' &&
+                (value === 'actual' ||
+                    value === 'localized' ||
+                    value === 'symbolic')
+              ? undefined
+              : // Some other mystery type? Default to localized.
+                'localized',
+    (current, value) => current === value,
 );
diff --git a/src/db/Setting.ts b/src/db/Setting.ts
@@ -18,7 +18,7 @@ export default class Setting<Type> {
         device: boolean,
         defaultValue: Type,
         validator: (value: unknown) => Type | undefined,
-        equal: (current: Type, value: Type) => boolean
+        equal: (current: Type, value: Type) => boolean,
     ) {
         this.key = key;
         this.device = device;
@@ -39,7 +39,8 @@ export default class Setting<Type> {
         try {
             if (valueString !== null) {
                 const parsed = JSON.parse(valueString);
-                if (this.validator(parsed)) value = parsed;
+                const validation = this.validator(parsed);
+                value = validation;
             }
             if (value === undefined) value = this.defaultValue;
         } catch (_) {