Merge branch 'main' into sampleMotionBlur

.github/workflows/verify.yml

@@ -19,7 +19,7 @@ jobs:
  with:
  node-version: 18
  cache: npm
- - run: npm ci
+ - run: PUPPETEER_PRODUCT=firefox npm ci
  - uses: actions/cache/save@v3
  with:
  key: ${{ github.run_id }}-node-modules
@@ -187,6 +187,11 @@ jobs:
  packages/player/dist
  packages/vite-plugin/lib
  - run: npm run e2e:test
+ - uses: actions/upload-artifact@v3
+ if: failure()
+ with:
+ name: image-diffs
+ path: packages/e2e/src/__image_snapshots__/__diff_output__
  docs:
  name: Documentation
  needs: build

README.md

@@ -54,26 +54,22 @@ After cloning the repo, run `npm install` in the root of the project to install
 all necessary dependencies. Then run `npx lerna run build` to build all the
 packages.
 
-### Developing Core & 2D
+### Developing Editor
 
-When developing the core, execute both `npm run core:dev` and
-`npm run template:dev`.
+When developing the editor, run the following command:
 
-This will pick up any changes you make to the core package, automatically
-rebuild the `template` project and refresh the page.
-
-Similarly, when developing the 2D package, execute `npm run 2d:dev` and
-`npm run template:dev`.
-
-### Developing UI
+```bash
+npm run template:dev
+```
 
-If you want to develop the UI, first build the template project by running:
-`npm run template:build`. Then execute `npm run ui:dev`.
+It will start a vite server that watches the `core`, `2d`, `ui`, and
+`vite-plugin` packages. The `template` package itself contains a simple Motion
+Canvas project that can be used during development.
 
 ### Developing Player
 
-Like with UI, to develop the player, first build the template:
-`npm run template:build`. Then, start `npm run player:dev`.
+To develop the player, first build the template: `npm run template:build`. Then,
+start `npm run player:dev`.
 
 ## Installing a local version of Motion Canvas in a project
 
@@ -102,6 +98,28 @@ relative path to the package you want to link:
  },
 ```
 
+If you're linking the `ui` package, you'll also need to modify `vite.config.ts`
+to allow vite to load external files:
+
+```ts
+import {defineConfig} from 'vite';
+import motionCanvas from '@motion-canvas/vite-plugin';
+
+export default defineConfig({
+ server: {
+ fs: {
+ // let it load external files
+ strict: false,
+ },
+ },
+ plugins: [motionCanvas()],
+});
+```
+
+This is necessary because the editor styles are loaded using the `/@fs/` prefix
+and since the linked `ui` package is outside the project, vite needs permission
+to access it.
+
 Then run `npm install` in to apply the changes and that's it.
 
 You can use the same technique to test out any custom package you're working on.

packages/2d/src/lib/code/CodeCursor.ts

@@ -6,14 +6,24 @@ import {
  unwrap,
  Vector2,
 } from '@motion-canvas/core';
-import {Code, DrawHooks} from '../components';
+import {Code} from '../components';
 import {CodeFragment, parseCodeFragment} from './CodeFragment';
 import {CodeHighlighter} from './CodeHighlighter';
 import {CodeMetrics} from './CodeMetrics';
 import {CodePoint, CodeRange} from './CodeRange';
 import {CodeScope, isCodeScope} from './CodeScope';
 import {isPointInCodeSelection} from './CodeSelection';
 
+export interface CodeFragmentDrawingInfo {
+ text: string;
+ position: Vector2;
+ characterSize: Vector2;
+ cursor: Vector2;
+ fill: string;
+ time: number;
+ alpha: number;
+}
+
 /**
  * A stateful class for recursively traversing a code scope.
  *
@@ -35,7 +45,9 @@ export class CodeCursor {
  private selection: CodeRange[] = [];
  private selectionProgress: number | null = null;
  private globalProgress: number[] = [];
- private drawHooks = {} as DrawHooks;
+ private fragmentDrawingInfo: CodeFragmentDrawingInfo[] = [];
+ private fontHeight = 0;
+ private verticalOffset = 0;
 
  public constructor(private readonly node: Code) {}
 
@@ -45,8 +57,12 @@ export class CodeCursor {
  * @param context - The context used to measure and draw the code.
  */
  public setupMeasure(context: CanvasRenderingContext2D) {
+ const metrics = context.measureText('X');
+ this.monoWidth = metrics.width;
+ this.fontHeight =
+ metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent;
+ this.verticalOffset = metrics.fontBoundingBoxAscent;
  this.context = context;
- this.monoWidth = context.measureText('X').width;
  this.lineHeight = parseFloat(this.node.styles.lineHeight);
  this.cursor = new Vector2();
  this.beforeCursor = new Vector2();
@@ -65,7 +81,7 @@ export class CodeCursor {
  this.highlighter = this.node.highlighter();
  this.selection = this.node.selection();
  this.selectionProgress = this.node.selectionProgress();
- this.drawHooks = this.node.drawHooks();
+ this.fragmentDrawingInfo = [];
  this.globalProgress = [];
  }
 
@@ -129,7 +145,18 @@ export class CodeCursor {
  public getSize() {
  return {
  x: this.maxWidth * this.monoWidth,
- y: this.cursor.y * this.lineHeight,
+ y: this.cursor.y * this.lineHeight + this.verticalOffset,
+ };
+ }
+
+ /**
+ * Get the drawing information created by the cursor.
+ */
+ public getDrawingInfo() {
+ return {
+ fragments: this.fragmentDrawingInfo,
+ verticalOffset: this.verticalOffset,
+ fontHeight: this.fontHeight,
  };
  }
 
@@ -216,8 +243,6 @@ export class CodeCursor {
 
  const code = progress < 0.5 ? fragment.before : fragment.after;
 
- this.context.save();
- this.context.globalAlpha *= alpha;
  let hasOffset = true;
  let width = 0;
  let stringLength = 0;
@@ -240,8 +265,6 @@ export class CodeCursor {
  continue;
  }
 
- this.context.save();
-
  const beforeHighlight =
  this.caches &&
  this.highlighter?.highlight(this.beforeIndex + i, this.caches.before);
@@ -330,24 +353,29 @@ export class CodeCursor {
  );
  }
 
- this.drawHooks.token(
-  this.context,
- char,
- new Vector2(
+ const measure = this.context.measureText(char);
+ this.fragmentDrawingInfo.push({
+ text: char,
+ position: new Vector2(
  (hasOffset ? offset.x + width : width) * this.monoWidth,
  (offset.y + y) * this.lineHeight,
  ),
- color,
+ cursor: new Vector2(
+ hasOffset ? this.beforeCursor.x + stringLength : stringLength,
+ this.beforeCursor.y + y,
+ ),
+ alpha,
+ characterSize: new Vector2(
+ measure.width / char.length,
+ this.fontHeight,
+ ),
+ fill: color,
  time,
- );
- this.context.restore();
+ });
 
  stringLength += char.length;
- width += Math.round(
- this.context.measureText(char).width / this.monoWidth,
- );
+ width += Math.round(measure.width / this.monoWidth);
  }
- this.context.restore();
  }
 
  private calculateWidth(metrics: CodeMetrics, x = this.cursor.x): number {