Fixed #463, improving preferred spacing.

wordplaydev · May 14, 2024 · ccfa278 · ccfa278
1 parent 181e81a
commit ccfa278
Show file tree

Hide file tree

Showing 31 changed files with 289 additions and 381 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 -   Reset stage output when locales change.
 -   Signficantly reduced memory usage of edit history
 -   Improved preferred spacing of compound data structures and blocks.
+-   Faster and more correct and stable preferred spacing algorithm.
 
 ## 0.9.4 2024-05-04
 

diff --git a/src/basis/Basis.test.ts b/src/basis/Basis.test.ts
@@ -28,7 +28,13 @@ function checkBasisNodes(node: Node) {
 
     expect(
         unparsables,
-        unparsables.map((unp) => unp.toWordplay()).join(),
+        'Unparsable at: `' +
+            node.toWordplay().substring(0, 30) +
+            '...' +
+            unparsables
+                .map((unp) => unp.unparsables.map((t) => t.toWordplay()).join())
+                .join() +
+            '`',
     ).toHaveLength(0);
 
     // Check for conflicts, ignoring unused binds.

diff --git a/src/components/concepts/CodeView.svelte b/src/components/concepts/CodeView.svelte
@@ -8,6 +8,7 @@
     import type Type from '../../nodes/Type';
     import Spaces from '../../parser/Spaces';
     import ConceptLinkUI from './ConceptLinkUI.svelte';
+    import getPreferredSpaces from '@parser/getPreferredSpaces';
 
     export let node: Node;
     export let concept: Concept | undefined = undefined;
@@ -30,7 +31,7 @@
 
     function copy() {
         // Copy node needs a source to manage spacing, so we make one.
-        copyNode(node, Spaces.withPreferredSpace(node));
+        copyNode(node, getPreferredSpaces(node));
     }
 </script>
 
@@ -46,8 +47,7 @@
             on:keydown={(event) =>
                 event.key === 'c' && (event.ctrlKey || event.metaKey)
                     ? copy()
-                    : undefined}
-            ><RootView {node} {inline} {spaces} preferred={true} /></div
+                    : undefined}><RootView {node} {inline} {spaces} /></div
         >{#if type && concept}&nbsp;<TypeView
                 {type}
                 context={concept.context}

diff --git a/src/components/concepts/ExampleUI.svelte b/src/components/concepts/ExampleUI.svelte
@@ -119,7 +119,6 @@
     .example {
         display: flex;
         flex-direction: column;
-        gap: var(--wordplay-spacing);
     }
 
     .code.inline {

diff --git a/src/components/editor/Editor.svelte b/src/components/editor/Editor.svelte
@@ -1451,10 +1451,7 @@
                 <!-- Show the node's label and type -->
                 {$caret.position.getLabel(
                     $locales,
-                )}{#if caretExpressionType}&nbsp;{TYPE_SYMBOL}&nbsp;{caretExpressionType.toWordplay(
-                        undefined,
-                        $locales.getLocale(),
-                    )}{/if}
+                )}{#if caretExpressionType}&nbsp;{TYPE_SYMBOL}&nbsp;{caretExpressionType.toWordplay()}{/if}
                 <PlaceholderView position={$caret.position} />{/if}</div
         >
     {/key}

diff --git a/src/components/editor/NodeView.svelte b/src/components/editor/NodeView.svelte
@@ -6,6 +6,7 @@
         getEvaluation,
         getHidden,
         getInsertionPoint,
+        getRoot,
         getSpace,
     } from '../project/Contexts';
     import getNodeView from './util/nodeToView';
@@ -21,6 +22,7 @@
     export let small = false;
 
     const evaluation = getEvaluation();
+    const root = getRoot();
 
     $: description =
         node && $evaluation
@@ -54,7 +56,9 @@
     // Get the root's computed spaces store
     let spaces = getSpace();
     // See if this node has any space to render.
-    $: space = node && $spaces ? $spaces.get(node) : undefined;
+    $: firstToken = node?.getFirstLeaf();
+    $: spaceRoot = $root && node ? $root.getSpaceRoot(node) : undefined;
+    $: space = spaceRoot && $spaces ? $spaces.getSpace(spaceRoot) : '';
 
     // Get the hidden context.
     let hidden = getHidden();
@@ -70,9 +74,10 @@
 <!-- Don't render anything if we weren't given a node. -->
 {#if node !== undefined}
     <!-- Render space preceding this node, if any, then either a value view if stepping or the node. -->
-    {#if space && !hide}<Space
-            {...space}
-            insertion={$insertion?.token === space.token
+    {#if !hide && firstToken && spaceRoot === node}<Space
+            token={firstToken}
+            {space}
+            insertion={$insertion?.token === firstToken
                 ? $insertion
                 : undefined}
         />{/if}<div

diff --git a/src/components/editor/Space.svelte b/src/components/editor/Space.svelte
@@ -9,7 +9,6 @@
 
     export let token: Token;
     export let space: string;
-    export let additional: string;
     export let insertion: InsertionPoint | undefined = undefined;
 
     $: insertionIndex =
@@ -28,11 +27,6 @@
         $spaceIndicator,
     );
 
-    $: additionalSpaces =
-        additional.length === 0
-            ? []
-            : render(additional, false, $spaceIndicator);
-
     function render(
         text: string,
         explicit: boolean,
@@ -68,11 +62,7 @@
                 >{#each afterSpaces as s, index}{#if index > 0}<span
                             ><br class="break" /></span
                         >{/if}<span data-uiid="space-text">{s}</span
-                    >{/each}{#each additionalSpaces as s, index}{#if index > 0}<span
-                            ><br class="break" /></span
-                        >{/if}{#if s === ''}&ZeroWidthSpace;{:else}<span
-                            data-uiid="space-text">{s}</span
-                        >{/if}{/each}</span
+                    >{/each}</span
             ></span
         >
     {/key}

diff --git a/src/components/editor/util/Commands.ts b/src/components/editor/util/Commands.ts
@@ -38,6 +38,7 @@ import type Project from '../../../models/Project';
 import interpret from './interpret';
 import { TileKind } from '../../project/Tile';
 import { TAB_SYMBOL } from '@parser/Spaces';
+import getPreferredSpaces from '@parser/getPreferredSpaces';
 
 export type Command = {
     /** The iconographic text symbol to use */
@@ -1188,9 +1189,7 @@ const Commands: Command[] = [
             if (!(context.caret?.position instanceof Node)) return false;
             copyNode(
                 context.caret.position,
-                context.caret.source.spaces.withPreferredSpace(
-                    context.caret.source,
-                ),
+                getPreferredSpaces(context.caret.source),
             );
             return context.caret.delete(context.project, false) ?? true;
         },
@@ -1210,9 +1209,7 @@ const Commands: Command[] = [
             return (
                 copyNode(
                     context.caret.position,
-                    context.caret.source.spaces.withPreferredSpace(
-                        context.caret.source,
-                    ),
+                    getPreferredSpaces(context.caret.source),
                 ) ?? false
             );
         },
@@ -1300,7 +1297,9 @@ const Commands: Command[] = [
             if (caret) {
                 const length = caret.source.code.getLength();
                 const position = caret.getTextPosition(true) ?? 0;
-                const tidySource = caret.source.withPreferredSpace();
+                const tidySource = caret.source.withSpaces(
+                    getPreferredSpaces(caret.source.root, caret.source.spaces),
+                );
                 return [
                     tidySource,
                     caret

diff --git a/src/components/editor/util/interpret.ts b/src/components/editor/util/interpret.ts
@@ -1,18 +1,18 @@
+import getPreferredSpaces from '@parser/getPreferredSpaces';
 import TableLiteral from '../../../nodes/TableLiteral';
-import Spaces from '../../../parser/Spaces';
 
 /** See if this is a kind of text we can convert into something Wordplay formatted. */
 export default function interpret(text: string): string {
     // Does it seem like CSV data? Convert it to a table.
     if (
         /^(('|“|"|”)?[a-zA-Z0-9.%&-() ]*('|"|“|”)?(,|\n|\\Z)\s*){5,}/g.test(
-            text.trim()
+            text.trim(),
         )
     ) {
         const data = parseCSV(text.trim());
 
         const table = TableLiteral.from(data);
-        if (table) return table.toWordplay(Spaces.withPreferredSpace(table));
+        if (table) return table.toWordplay(getPreferredSpaces(table));
     }
 
     return text;
@@ -32,7 +32,7 @@ function parseCSV(data: string, fieldSep = ',', newLine = '\n'): string[][] {
             '\\n])"([^"]*(?:""[^"]*)*)"(?=($|[' +
             fieldSep +
             '\\n]))',
-        'g'
+        'g',
     );
     return data
         .replace(/\r/g, '')
@@ -51,7 +51,7 @@ function parseCSV(data: string, fieldSep = ',', newLine = '\n'): string[][] {
                     cell
                         .replace(nSepRe, newLine)
                         .replace(qSepRe, '"')
-                        .replace(cSepRe, ',')
+                        .replace(cSepRe, ','),
                 );
         });
 }
diff --git a/src/components/project/Contexts.ts b/src/components/project/Contexts.ts
@@ -6,7 +6,6 @@ import type { InsertionPoint } from '../../edit/Drag';
 import type Caret from '../../edit/Caret';
 import type Project from '@models/Project';
 import type Node from '@nodes/Node';
-import type Token from '@nodes/Token';
 import type { Highlights } from '../editor/util/Highlights';
 import type Evaluate from '@nodes/Evaluate';
 import type Step from '@runtime/Step';
@@ -25,6 +24,7 @@ import type {
 } from '../editor/util/Commands';
 import type { CaretPosition } from '../../edit/Caret';
 import type LanguageCode from '../../locale/LanguageCode';
+import type Spaces from '@parser/Spaces';
 
 // App related contexts
 
@@ -70,7 +70,7 @@ export type KeyModifierState = {
 export const KeyModfifierSymbol = Symbol('modifiers');
 export function getKeyboardModifiers() {
     return getContext<Writable<KeyModifierState> | undefined>(
-        KeyModfifierSymbol
+        KeyModfifierSymbol,
     );
 }
 
@@ -118,7 +118,7 @@ export function getCaret() {
 export type EditHandler = (
     edit: Edit | ProjectRevision | undefined,
     idle: IdleKind,
-    focus: boolean
+    focus: boolean,
 ) => void;
 
 /** Various components outside the editor use this to apply edits */
@@ -173,9 +173,7 @@ export function getHighlights() {
 }
 
 export const SpaceSymbol = Symbol('space');
-export type SpaceContext = Writable<
-    Map<Node, { token: Token; space: string; additional: string }>
->;
+export type SpaceContext = Writable<Spaces>;
 export function getSpace() {
     return getContext<SpaceContext>(SpaceSymbol);
 }
@@ -230,7 +228,7 @@ export function getSelectedOutputPaths():
 export function setSelectedOutput(
     paths: SelectedOutputPathsContext,
     project: Project,
-    evaluates: Evaluate[]
+    evaluates: Evaluate[],
 ) {
     // Map each selected output to its replacement, then set the selected output to the replacements.
     paths.set(
@@ -239,7 +237,7 @@ export function setSelectedOutput(
                 source: project.getSourceOf(output),
                 path: project.getRoot(output)?.getPath(output),
             };
-        })
+        }),
     );
 }
 
@@ -268,7 +266,7 @@ export const AnnouncerSymbol = Symbol('announcer');
 export type Announce = (
     id: string,
     language: LanguageCode | undefined,
-    message: string
+    message: string,
 ) => void;
 export function getAnnounce(): Readable<Announce | undefined> {
     return getContext(AnnouncerSymbol);

diff --git a/src/components/project/RootView.svelte b/src/components/project/RootView.svelte
@@ -6,7 +6,6 @@
     import Docs from '@nodes/Docs';
     import Names from '@nodes/Names';
     import type Node from '@nodes/Node';
-    import type Token from '@nodes/Token';
     import Spaces from '@parser/Spaces';
     import NodeView from '@components/editor/NodeView.svelte';
     import {
@@ -25,12 +24,11 @@
     import TextLiteral from '../../nodes/TextLiteral';
     import FormattedLiteral from '../../nodes/FormattedLiteral';
     import type Caret from '@edit/Caret';
+    import getPreferredSpaces from '@parser/getPreferredSpaces';
 
     export let node: Node;
     /** Optional space. To enable preferred space, set flag below. */
     export let spaces: Spaces | undefined = undefined;
-    /** If on, and no space is provided, preferred space is rendered. */
-    export let preferred = false;
     export let inert = false;
     export let inline = false;
     /** If inline, and true, this will be a maximum width */
@@ -48,40 +46,14 @@
     setContext(RootSymbol, rootStore);
 
     // When the spaces change, update the rendered spaces
-    let renderedSpace: SpaceContext = writable(new Map());
+    let renderedSpace: SpaceContext = writable(
+        spaces ?? getPreferredSpaces(node),
+    );
     setContext(SpaceSymbol, renderedSpace);
+    $: renderedSpace.set(spaces ?? getPreferredSpaces(node));
 
     $: if (inert) setContext(CaretSymbol, undefined);
 
-    $: {
-        // Reset the space.
-        const newSpace = new Map();
-
-        // Compute the space for every node
-        for (const n of node.nodes()) {
-            // Get the first leaf of this node.
-            const firstLeaf = n.getFirstLeaf() as Token | undefined;
-            if (firstLeaf === undefined) continue;
-            // Determine if the first leaf is the leaf's space root.
-            if (root.getSpaceRoot(firstLeaf) !== n) continue;
-            // What's the given space?
-            let space = spaces ? spaces.getSpace(firstLeaf) : '';
-
-            let additional =
-                spaces === undefined && preferred
-                    ? Spaces.getPreferredPrecedingSpace(
-                          root,
-                          space,
-                          firstLeaf,
-                          false,
-                      )
-                    : '';
-            newSpace.set(n, { token: firstLeaf, space, additional });
-        }
-
-        renderedSpace.set(newSpace);
-    }
-
     // A set of hidden nodes, such as hidden translations.
     let hidden = writable<Set<Node>>(new Set());
     setContext(HiddenSymbol, hidden);