space-indicator first draft

src/components/editor/Space.svelte

@@ -5,12 +5,13 @@
     import InsertionPointView from './InsertionPointView.svelte';
     import type { InsertionPoint } from '../../edit/Drag';
     import { EXPLICIT_TAB_TEXT, TAB_TEXT } from '../../parser/Spaces';
+    import {locales, DB, spaceIndicator} from '../../db/Database';
 
     export let token: Token;
     export let space: string;
     export let additional: string;
     export let insertion: InsertionPoint | undefined = undefined;
-
+    
     $: insertionIndex =
         insertion !== undefined
             ? space.split('\n', insertion.line).join('\n').length + 1
@@ -19,20 +20,22 @@
     $: beforeSpaces =
         insertionIndex === undefined
             ? []
-            : render(space.substring(0, insertionIndex), true);
+            : render(space.substring(0, insertionIndex), true, $spaceIndicator);
     // If there's no insertion, just render the space, otherwise render the right side of the insertion.
     $: afterSpaces = render(
         insertionIndex === undefined ? space : space.substring(insertionIndex),
-        true
+        true,
+        $spaceIndicator
     );
 
     $: additionalSpaces =
-        additional.length === 0 ? [] : render(additional, false);
+        additional.length === 0 ? [] : render(additional, false, $spaceIndicator);
 
-    function render(text: string, explicit: boolean): string[] {
+    function render(text: string, explicit: boolean, spaceIndicator:boolean): string[] {
+        console.log('spaceIndicator change', spaceIndicator);
         return (
             explicit
-                ? text.replaceAll(' ', '·').replaceAll('\t', EXPLICIT_TAB_TEXT)
+                ? (spaceIndicator ? text.replaceAll(' ', '·').replaceAll('\t', EXPLICIT_TAB_TEXT):text.replaceAll('\t', EXPLICIT_TAB_TEXT))
                 : text.replaceAll(' ', '\xa0').replaceAll('\t', TAB_TEXT)
         ).split('\n');
     }

src/components/settings/Settings.svelte

@@ -9,6 +9,7 @@
         mic,
         Settings,
         dark,
+        spaceIndicator,
     } from '../../db/Database';
     import Arrangement from '../../db/Arrangement';
     import Options from '../widgets/Options.svelte';
@@ -208,6 +209,19 @@
                 modes={['☼', '☽', '☼/☽']}
             />
         </p>
+        <p
+        ><Mode
+            descriptions={$locales.get(
+                (l) => l.ui.dialog.settings.mode.space,
+            )}
+            choice={$spaceIndicator === false ? 1 : 0}
+            select={(choice) =>
+                Settings.setSpace(
+                    choice === 0 ? true : false,
+                )}
+            modes={['On', 'Off']}
+        />
+    </p>
     </Dialog>
 </div>
 

src/components/widgets/Mode.svelte

@@ -8,6 +8,8 @@
     export let choice: number;
     export let select: (choice: number) => void;
     export let active = true;
+    console.log(descriptions);
+
 </script>
 
 <div class="mode">

src/db/Database.ts

@@ -233,6 +233,7 @@ export const locales = DB.Locales.locales;
 export const writingLayout = Settings.settings.writingLayout.value;
 export const camera = Settings.settings.camera.value;
 export const dark = Settings.settings.dark.value;
+export const spaceIndicator = Settings.settings.space.value;
 export const mic = Settings.settings.mic.value;
 export const blocks = Settings.settings.blocks.value;
 export const localized = Settings.settings.localized.value;

src/db/Setting.ts

@@ -54,6 +54,7 @@ export default class Setting<Type> {
 
     set(database: Database, value: Type) {
         if (this.equal(this.get(), value)) return;
+        console.log('setting value changed, now the value is:', value)
 
         // Save in the store, notifying subscribers about the change.
         this.value.set(value);

src/db/SettingsDatabase.ts

@@ -23,6 +23,7 @@ import { DarkSetting } from './DarkSetting';
 import { doc, getDoc } from 'firebase/firestore';
 import { firestore } from './firebase';
 import { CreatorCollection } from './CreatorDatabase';
+import { SpaceSetting } from './SpaceSetting';
 
 /** The schema of the record written to the creators collection. */
 export type SettingsSchemaV1 = {
@@ -63,6 +64,7 @@ export default class SettingsDatabase {
         blocks: BlocksSetting,
         localized: LocalizedSetting,
         dark: DarkSetting,
+        space: SpaceSetting,
     };
 
     /** A derived store based on animation factor */
@@ -164,10 +166,18 @@ export default class SettingsDatabase {
         this.settings.dark.set(this.database, dark);
     }
 
+    setSpace(space: boolean) {
+        this.settings.space.set(this.database, space);
+    }
+
     getDark() {
         return this.settings.dark.get();
     }
 
+    getSpace() {
+        return this.settings.space.get();
+    }
+
     setBlocks(on: boolean) {
         this.settings.blocks.set(this.database, on);
     }

src/db/SpaceSetting.ts

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

src/locale/UITexts.ts

@@ -572,6 +572,8 @@ type UITexts = {
                 dark: ModeText<[string, string, string]>;
                 /** The writing layout direction */
                 writing: ModeText<[string, string, string]>;
+                /** The space_indicator on/off mode */
+                space: ModeText<[string, string]>;
             };
             options: {
                 /** The label for the microphone drop down */

src/locale/en-US.json

@@ -4158,6 +4158,13 @@
                             "use device setting"
                         ]
                     },
+                    "space": {
+                        "label": "space indicator",
+                        "modes": [
+                            "open",
+                            "closed"
+                        ]
+                    },
                     "writing": {
                         "label": "writing layout",
                         "modes": [

src/routes/+layout.svelte

@@ -8,6 +8,7 @@
     import { locales, DB, animationFactor, dark } from '../db/Database';
     import { browser } from '$app/environment';
     import { getLanguageDirection } from '../locale/LanguageCode';
+    console.log('*****初始值dark', $dark);
 
     /** Expose the translations as context, updating them as necessary */
     $: setContext(LocalesSymbol, $locales);
@@ -58,6 +59,7 @@
 
     /** When dark mode changes, update the body's dark class */
     $: if (browser) {
+        console.log('dark mode changes', $dark)
         if ($dark === true || ($dark === null && prefersDark()))
             document.body.classList.add('dark');
         else document.body.classList.remove('dark');