feat(2d): improve Code node (#989)

motion-canvas · Mar 11, 2024 · 6e7aaf0 · 6e7aaf0
1 parent f7e53ec
commit 6e7aaf0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/packages/2d/src/lib/code/CodeCursor.ts b/packages/2d/src/lib/code/CodeCursor.ts
@@ -193,7 +193,10 @@ export class CodeCursor {
         const mirrored = Math.abs(progress - 0.5) * 2;
         alpha = clampRemap(1, 1 - timingOffset, 1, 0, mirrored);
 
-        const scale = progress < 0.5 ? 4 : -4;
+        const isBigger =
+          fragment.after.newRows > fragment.before.newRows ? 1 : -1;
+        const isBefore = progress < 0.5 ? 1 : -1;
+        const scale = isBigger * isBefore * 4;
         offsetY = map(
           Math.abs(fragment.after.newRows - fragment.before.newRows) / scale,
           0,
@@ -307,7 +310,10 @@ export class CodeCursor {
           }
 
           skipAhead++;
-        } while (skipAhead < highlight.skipAhead);
+        } while (
+          skipAhead < highlight.skipAhead &&
+          code.content.charAt(i + skipAhead) !== '\n'
+        );
 
         if (skipAhead > 1) {
           char = code.content.slice(i, i + skipAhead);

diff --git a/packages/2d/src/lib/code/CodeSignal.ts b/packages/2d/src/lib/code/CodeSignal.ts
@@ -76,7 +76,7 @@ export class CodeSignalContext<TOwner>
   private readonly progress = createSignal(0);
 
   public constructor(
-    initial: PossibleCodeScope,
+    initial: SignalValue<PossibleCodeScope>,
     owner: TOwner,
     private readonly highlighter?: SignalValue<CodeHighlighter>,
     private readonly dialect?: SignalValue<string>,

diff --git a/packages/2d/src/lib/code/LezerHighlighter.ts b/packages/2d/src/lib/code/LezerHighlighter.ts
@@ -8,7 +8,7 @@ import {defaultTokenize} from './CodeTokenizer';
 interface LezerCache {
   tree: Tree;
   code: string;
-  colorLookup: Map<number, string>;
+  colorLookup: Map<string, string>;
 }
 
 export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
@@ -46,7 +46,7 @@ export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
       return null;
     }
 
-    const colorLookup = new Map<number, string>();
+    const colorLookup = new Map<string, string>();
     const tree = parser.parse(code);
     highlightTree(tree, this.style, (from, to, classes) => {
       const color = this.classLookup.get(classes);
@@ -126,14 +126,7 @@ export class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
     return tokens;
   }
 
-  private getNodeId(node: SyntaxNode): number {
-    if (!node.parent) {
-      return -1;
-    }
-
-    // NOTE: They don't want us to know about this property.
-    // We need a way to persistently identify nodes and this seems to work.
-    // Perhaps it could break if the tree is edited? But we don't do that. Yet.
-    return (node as any).index;
+  private getNodeId(node: SyntaxNode): string {
+    return `${node.from}:${node.to}`;
   }
 }
diff --git a/packages/2d/src/lib/components/Code.ts b/packages/2d/src/lib/components/Code.ts
@@ -146,7 +146,7 @@ export class Code extends Shape {
    * @param dialect - Custom dialect to use.
    */
   public static createSignal(
-    initial: PossibleCodeScope,
+    initial: SignalValue<PossibleCodeScope>,
     highlighter?: SignalValue<CodeHighlighter>,
     dialect?: SignalValue<string>,
   ): CodeSignal<void> {
@@ -338,7 +338,9 @@ export class Code extends Shape {
    *
    * @param initial - The initial code.
    */
-  public createSignal(initial: PossibleCodeScope): CodeSignal<this> {
+  public createSignal(
+    initial: SignalValue<PossibleCodeScope>,
+  ): CodeSignal<this> {
     return new CodeSignalContext<this>(
       initial,
       this,