Explicit code localization switch.

CHANGELOG.md

@@ -5,6 +5,8 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 
 ## 0.9.1
 
+This version includes many other changes made prior to this log was created.
+
 ## Added
 
 -   New change password form on profile.
@@ -13,6 +15,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 
 -   Improved design of username and password login [#272](https://github.com/wordplaydev/wordplay/issues/272), [#273](https://github.com/wordplaydev/wordplay/issues/273)
 -   Converted blocks toggle to a keyboard/mouse switch.
+-   Explicit switch control over localization of editor, instead of automatic.
 
 ## Fixed
 

src/components/editor/Editor.svelte

@@ -86,6 +86,7 @@
     import Adjust from './Adjust.svelte';
     import EditorHelp from './EditorHelp.svelte';
     import Emoji from '@components/app/Emoji.svelte';
+    import { localized } from '../../db/Database';
 
     const SHOW_OUTPUT_IN_PALETTE = false;
 
@@ -1448,7 +1449,12 @@
         on:focusout={() => (focused = false)}
     />
     <!-- Render the program -->
-    <RootView node={program} spaces={source.spaces} localized />
+    <RootView
+        node={program}
+        spaces={source.spaces}
+        localized={$localized}
+        caret={$caret}
+    />
     <!-- Render highlights above the code -->
     {#each outlines as outline}
         <Highlight {...outline} types={outline.types} above={true} />

src/components/editor/util/Commands.ts

@@ -30,7 +30,7 @@ import type Evaluator from '@runtime/Evaluator';
 import FunctionDefinition from '@nodes/FunctionDefinition';
 import ExpressionPlaceholder from '@nodes/ExpressionPlaceholder';
 import Names from '@nodes/Names';
-import type { Database } from '@db/Database';
+import { Settings, type Database } from '@db/Database';
 import type Locale from '@locale/Locale';
 import Sym from '../../../nodes/Sym';
 import type Project from '../../../models/Project';
@@ -90,7 +90,7 @@ export type CommandContext = {
     database: Database;
     dragging: boolean;
     toggleMenu?: () => void;
-    toggleBlocks?: () => void;
+    toggleBlocks?: (on: boolean) => void;
     setFullscreen?: (on: boolean) => void;
     focusOrCycleTile?: (content?: TileKind) => void;
     resetInputs?: () => void;
@@ -575,7 +575,7 @@ export const ToggleBlocks: Command = {
     key: 'Enter',
     execute: ({ toggleBlocks }) => {
         if (toggleBlocks) {
-            toggleBlocks();
+            toggleBlocks(!Settings.getBlocks());
             return true;
         }
         return false;

src/components/project/ProjectView.svelte

@@ -83,6 +83,7 @@
         Projects,
         writingLayout,
         blocks,
+        localized,
         Creators,
     } from '../../db/Database';
     import Arrangement from '../../db/Arrangement';
@@ -781,8 +782,8 @@
             };
     });
 
-    function toggleBlocks() {
-        Settings.setBlocks(!$blocks);
+    function toggleBlocks(on: boolean) {
+        Settings.setBlocks(on);
     }
 
     function getTileView(tileID: string) {
@@ -1360,6 +1361,21 @@
                                         toggle={toggleBlocks}
                                         on={$blocks}
                                     />
+                                    <Switch
+                                        onLabel={$locales.getLocale().language}
+                                        onTip={$locales.get(
+                                            (l) =>
+                                                l.ui.source.toggle.localized.on
+                                        )}
+                                        offLabel={withVariationSelector('🌎')}
+                                        offTip={$locales.get(
+                                            (l) =>
+                                                l.ui.source.toggle.localized.off
+                                        )}
+                                        toggle={(on) =>
+                                            Settings.setLocalized(on)}
+                                        on={$localized}
+                                    />
                                     <!-- Make a Button for every modify command -->
                                     {#each VisibleModifyCommands as command}<CommandButton
                                             {command}

src/components/project/RootView.svelte

@@ -15,7 +15,6 @@
         SpaceSymbol,
         type SpaceContext,
         CaretSymbol,
-        getEditor,
         LocalizeSymbol,
     } from './Contexts';
     import Root from '@nodes/Root';
@@ -25,6 +24,7 @@
     import { locales } from '../../db/Database';
     import TextLiteral from '../../nodes/TextLiteral';
     import FormattedLiteral from '../../nodes/FormattedLiteral';
+    import type Caret from '@edit/Caret';
 
     export let node: Node;
     /** Optional space; if not provided, all nodes are rendered with preferred space. */
@@ -35,6 +35,7 @@
     export let elide = false;
     /** If true, hides names and docs not in a selected locale */
     export let localized = false;
+    export let caret: Caret | undefined = undefined;
 
     /** Get the root, or make one if it's not a source. */
     $: root = node instanceof Source ? node.root : new Root(node);
@@ -80,17 +81,15 @@
         renderedSpace.set(newSpace);
     }
 
-    let editor = getEditor();
-
     // A set of hidden nodes, such as hidden translations.
     let hidden = writable<Set<Node>>(new Set());
     setContext(HiddenSymbol, hidden);
 
     let localize = writable<boolean>(localized);
     setContext(LocalizeSymbol, localize);
-    $: localize.set(localized && ($editor === undefined || !$editor.focused));
+    $: localize.set(localized);
 
-    // When the caret changes, the update what's hidden.
+    // Update what's hidden.
     $: {
         const newHidden = new Set<Node>();
 
@@ -106,42 +105,50 @@
                         n instanceof TextLiteral ||
                         n instanceof FormattedLiteral
                 )) {
-                // Get all the names or docs
+                // Get the language tags on the nodes.
                 const tags = tagged.getTags();
-                // If at least one is visible, hide all those not in a preferred language.
-                if (
-                    $locales
-                        .getLanguages()
-                        .some((lang) =>
-                            tags.some((l) => l.getLanguage() === lang)
-                        )
-                ) {
-                    let first = false;
-                    for (const nameOrDoc of tags) {
-                        const selectedLocale = $locales
+
+                // Is this caret inside this node?
+                const inside =
+                    caret === undefined ? false : caret.isIn(tagged, true);
+
+                // If the caret is not inside the node, decide whether to hide.
+                if (!inside) {
+                    // If at least one is visible, hide all those not in a preferred language.
+                    if (
+                        $locales
                             .getLanguages()
-                            .some((t) => t === nameOrDoc.getLanguage());
-                        // Not a selected language and not in the node and has a language? Hide it.
-                        if (!selectedLocale && nameOrDoc.language)
-                            newHidden.add(nameOrDoc);
-                        // Is the selected language and inert? Hide the language tag.
-                        else if (selectedLocale && nameOrDoc.language)
-                            newHidden.add(nameOrDoc.language);
-                        // Not first? Hide the separator.
-                        if (!first) {
-                            first = true;
-                            if (
-                                nameOrDoc instanceof Name &&
-                                nameOrDoc.separator
+                            .some((lang) =>
+                                tags.some((l) => l.getLanguage() === lang)
                             )
-                                newHidden.add(nameOrDoc.separator);
+                    ) {
+                        let first = false;
+                        for (const nameOrDoc of tags) {
+                            const selectedLocale = $locales
+                                .getLanguages()
+                                .some((t) => t === nameOrDoc.getLanguage());
+                            // Not a selected language and not in the node and has a language? Hide it.
+                            if (!selectedLocale && nameOrDoc.language)
+                                newHidden.add(nameOrDoc);
+                            // Is the selected language and inert? Hide the language tag.
+                            else if (selectedLocale && nameOrDoc.language)
+                                newHidden.add(nameOrDoc.language);
+                            // Not first? Hide the separator.
+                            if (!first) {
+                                first = true;
+                                if (
+                                    nameOrDoc instanceof Name &&
+                                    nameOrDoc.separator
+                                )
+                                    newHidden.add(nameOrDoc.separator);
+                            }
                         }
                     }
-                }
-                // Otherwise, hide all but the first.
-                else {
-                    for (const nameOrDoc of tags.slice(1))
-                        newHidden.add(nameOrDoc);
+                    // Otherwise, hide all but the first name
+                    else {
+                        for (const nameOrDoc of tags.slice(1))
+                            newHidden.add(nameOrDoc);
+                    }
                 }
 
                 // If this is a doc and we're not in a program, hide it unconditionally.

src/db/Database.ts

@@ -222,6 +222,7 @@ export const camera = Settings.settings.camera.value;
 export const dark = Settings.settings.dark.value;
 export const mic = Settings.settings.mic.value;
 export const blocks = Settings.settings.blocks.value;
+export const localized = Settings.settings.localized.value;
 export const status = DB.Status;
 export const editableProjects = Projects.allEditableProjects;
 export const archivedProjects = Projects.allArchivedProjects;

src/db/LocalizedSetting.ts

@@ -0,0 +1,9 @@
+import Setting from './Setting';
+
+export const LocalizedSetting = new Setting<boolean>(
+    'localized',
+    true,
+    false,
+    () => true,
+    (current, value) => current === value
+);

src/db/SettingsDatabase.ts

@@ -18,6 +18,7 @@ import type { WritingLayout } from '../locale/Scripts';
 import type Progress from '../tutorial/Progress';
 import Layout from '../components/project/Layout';
 import { BlocksSetting } from './BlocksSetting';
+import { LocalizedSetting } from './LocalizedSetting';
 import { DarkSetting } from './DarkSetting';
 import { doc, getDoc } from 'firebase/firestore';
 import { firestore } from './firebase';
@@ -60,6 +61,7 @@ export default class SettingsDatabase {
         camera: CameraSetting,
         mic: MicSetting,
         blocks: BlocksSetting,
+        localized: LocalizedSetting,
         dark: DarkSetting,
     };
 
@@ -170,6 +172,18 @@ export default class SettingsDatabase {
         this.settings.blocks.set(this.database, on);
     }
 
+    getBlocks() {
+        return this.settings.blocks.get();
+    }
+
+    getLocalized() {
+        return this.settings.localized.get();
+    }
+
+    setLocalized(on: boolean) {
+        this.settings.localized.set(this.database, on);
+    }
+
     /** To serialize to a database */
     toObject(): SettingsSchema {
         // Get the config, but delete all device-specific configs.

src/locale/UITexts.ts

@@ -174,6 +174,8 @@ type UITexts = {
             blocks: ToggleText;
             /** The glyph chooser expand/collapse toggle */
             glyphs: ToggleText;
+            /** The localized on/off toggle */
+            localized: ToggleText;
         };
         button: {
             /** Output preview button for selecting output for display in output tile */

src/locale/en-US.json

@@ -3817,6 +3817,10 @@
                     "on": "hide block backgrounds",
                     "off": "show block backgrounds"
                 },
+                "localized": {
+                    "on": "show localized text",
+                    "off": "show all text"
+                },
                 "glyphs": {
                     "on": "collapse the matching glyphs",
                     "off": "expand the matching glyphs"

static/locales/es-MX/es-MX.json

@@ -3881,6 +3881,10 @@
                     "on": "esconder los fondos de los bloques",
                     "off": "mostrar los fondos de los bloques"
                 },
+                "localized": {
+                    "on": "$?",
+                    "off": "$?"
+                },
                 "glyphs": {
                     "on": "colapsar los glifos coincidentes",
                     "off": "expandir los glifos coincidentes"

static/locales/example/example.json

@@ -2159,6 +2159,10 @@
                     "on": "$?",
                     "off": "$?"
                 },
+                "localized": {
+                    "on": "$?",
+                    "off": "$?"
+                },
                 "glyphs": {
                     "on": "$?",
                     "off": "$?"

static/locales/zh-CN/zh-CN.json

@@ -3702,6 +3702,10 @@
                     "on": "隐藏块背景",
                     "off": "显示块背景"
                 },
+                "localized": {
+                    "on": "$?",
+                    "off": "$?"
+                },
                 "glyphs": {
                     "on": "折叠匹配的字形",
                     "off": "展开匹配的字形"

static/schemas/Locale.json

@@ -9932,11 +9932,16 @@
                     "glyphs": {
                       "$ref": "#/definitions/ToggleText",
                       "description": "The glyph chooser expand/collapse toggle"
+                    },
+                    "localized": {
+                      "$ref": "#/definitions/ToggleText",
+                      "description": "The localized on/off toggle"
                     }
                   },
                   "required": [
                     "blocks",
-                    "glyphs"
+                    "glyphs",
+                    "localized"
                   ],
                   "type": "object"
                 }