fix(2d): fix code animations (#998)

motion-canvas · Mar 21, 2024 · f3276ca · f3276ca
1 parent c35d0e0
commit f3276ca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/2d/src/lib/code/extractRange.ts b/packages/2d/src/lib/code/extractRange.ts
@@ -61,9 +61,7 @@ export function extractRange(
         if (fromColumn === currentColumn) {
           index = newFragments.length + 1;
           newFragments.push(resolved.slice(0, i), '');
-        }
-
-        if (char === '\n') {
+        } else if (char === '\n') {
           index = newFragments.length + 1;
           newFragments.push(
             resolved.slice(0, i) + ' '.repeat(fromColumn - currentColumn),
@@ -80,7 +78,14 @@ export function extractRange(
         }
 
         if (char === '\n') {
-          newFragments.push(resolved.slice(i));
+          if (currentColumn < toColumn) {
+            extracted += '\n';
+            if (i + 1 < resolved.length) {
+              newFragments.push(resolved.slice(i + 1));
+            }
+          } else {
+            newFragments.push(resolved.slice(i));
+          }
           found = true;
           break;
         }

diff --git a/packages/2d/src/lib/components/Code.ts b/packages/2d/src/lib/components/Code.ts
@@ -38,6 +38,9 @@ import {DesiredLength} from '../partials';
 import {useScene2D} from '../scenes';
 import {Shape, ShapeProps} from './Shape';
 
+/**
+ * @experimental
+ */
 export interface DrawTokenHook {
   (
     ctx: CanvasRenderingContext2D,
@@ -50,6 +53,8 @@ export interface DrawTokenHook {
 
 /**
  * Describes custom drawing logic used by the Code node.
+ *
+ * @experimental
  */
 export interface DrawHooks {
   /**
@@ -96,8 +101,6 @@ export interface CodeProps extends ShapeProps {
 /**
  * A node for displaying and animating code.
  *
- * @experimental
- *
  * @preview
  * ```tsx editor
  * import {parser} from '@lezer/javascript';
@@ -218,6 +221,8 @@ export class Code extends Shape {
    * @remarks
    * Check out {@link DrawHooks} for available render hooks.
    *
+   * @experimental
+   *
    * @example
    * Make the unselected code blurry and transparent:
    * ```tsx
@@ -394,7 +399,7 @@ export class Code extends Shape {
    *
    * @param point - The point to get the bounding box for.
    */
-  public getPointBbox(point: CodePoint): BBox {
+  public getPointBBox(point: CodePoint): BBox {
     const [line, column] = point;
     const drawingInfo = this.drawingInfo();
     let match: CodeFragmentDrawingInfo | undefined;
@@ -427,12 +432,12 @@ export class Code extends Shape {
    * Return bounding boxes of all characters in the selection.
    *
    * @remarks
-   * The returned bound boxes are in local space of the `Code` node.
+   * The returned bounding boxes are in local space of the `Code` node.
    * Each line of code has a separate bounding box.
    *
    * @param selection - The selection to get the bounding boxes for.
    */
-  public getSelectionBbox(selection: PossibleCodeSelection): BBox[] {
+  public getSelectionBBox(selection: PossibleCodeSelection): BBox[] {
     const size = this.computedSize();
     const range = parseCodeSelection(selection);
     const drawingInfo = this.drawingInfo();