chore: add a manim example

xiaoiver · Jan 16, 2025 · b25e9d1 · b25e9d1
1 parent 1f46dda
commit b25e9d1
Show file tree

Hide file tree

Showing 26 changed files with 1,327 additions and 48 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,5 +1,9 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    '@vue-macros/eslint-config',
+  ],
 
   parser: 'vue-eslint-parser',
   parserOptions: {

diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@types/pngjs": "^6.0.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vue-macros/eslint-config": "^0.7.1",
     "case-police": "^0.5.14",
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "24.3.6",
@@ -85,4 +86,4 @@
       "esbuild": "0.23.1"
     }
   }
-}
+}
diff --git a/packages/core/src/drawcalls/SDF.ts b/packages/core/src/drawcalls/SDF.ts
@@ -203,8 +203,7 @@ export class SDF extends Drawcall {
 
     if (!this.instanced && !this.#uniformBuffer) {
       this.#uniformBuffer = this.device.createBuffer({
-        viewOrSize:
-          Float32Array.BYTES_PER_ELEMENT * (16 + 4 + 4 + 4 + 4 + 4 + 4),
+        viewOrSize: Float32Array.BYTES_PER_ELEMENT * (16 + 4 * 8),
         usage: BufferUsage.UNIFORM,
         hint: BufferFrequencyHint.DYNAMIC,
       });

diff --git a/packages/core/src/drawcalls/ShadowRect.ts b/packages/core/src/drawcalls/ShadowRect.ts
@@ -139,7 +139,7 @@ export class ShadowRect extends Drawcall {
 
     if (!this.instanced && !this.#uniformBuffer) {
       this.#uniformBuffer = this.device.createBuffer({
-        viewOrSize: Float32Array.BYTES_PER_ELEMENT * (16 + 4 + 4 + 4),
+        viewOrSize: Float32Array.BYTES_PER_ELEMENT * (16 + 4 * 4),
         usage: BufferUsage.UNIFORM,
         hint: BufferFrequencyHint.DYNAMIC,
       });

diff --git a/packages/core/src/shaders/sdf.ts b/packages/core/src/shaders/sdf.ts
@@ -371,6 +371,8 @@ void main() {
 
   ${wireframe_frag}
 
+  // outputColor = vec4(1.0, 0.0, 0.0, 1.0);
+
   if (outputColor.a < epsilon)
     discard;
 }

diff --git a/packages/core/src/shapes/mixins/Transformable.ts b/packages/core/src/shapes/mixins/Transformable.ts
@@ -34,6 +34,12 @@ export interface ITransformable {
   get position(): ObservablePoint;
   set position(value: IPointData);
 
+  get translateX(): number;
+  set translateX(value: number);
+
+  get translateY(): number;
+  set translateY(value: number);
+
   /**
    * The scale factors of this object along the local coordinate axes.
    *
@@ -42,6 +48,12 @@ export interface ITransformable {
   get scale(): ObservablePoint;
   set scale(value: IPointData);
 
+  get scaleX(): number;
+  set scaleX(value: number);
+
+  get scaleY(): number;
+  set scaleY(value: number);
+
   /**
    * The pivot for the object in radians.
    */
@@ -81,13 +93,41 @@ export function Transformable<TBase extends GConstructor>(Base: TBase) {
       this.transform.position.copyFrom(value);
     }
 
+    get translateX(): number {
+      return this.transform.position.x;
+    }
+    set translateX(value: number) {
+      this.transform.position.x = value;
+    }
+
+    get translateY(): number {
+      return this.transform.position.y;
+    }
+    set translateY(value: number) {
+      this.transform.position.y = value;
+    }
+
     get scale(): ObservablePoint {
       return this.transform.scale;
     }
     set scale(value: IPointData) {
       this.transform.scale.copyFrom(value);
     }
 
+    get scaleX(): number {
+      return this.transform.scale.x;
+    }
+    set scaleX(value: number) {
+      this.transform.scale.x = value;
+    }
+
+    get scaleY(): number {
+      return this.transform.scale.y;
+    }
+    set scaleY(value: number) {
+      this.transform.scale.y = value;
+    }
+
     /**
      * The center of rotation, scaling, and skewing for this display object in its local space. The `position`
      * is the projection of `pivot` in the parent's local space.

diff --git a/packages/core/src/utils/glyph/tiny-sdf.ts b/packages/core/src/utils/glyph/tiny-sdf.ts
@@ -136,15 +136,20 @@ export class TinySDF {
     );
 
     if (w === 0 || h === 0) {
+      const width = w + 2 * this.buffer;
+      const height = h + 2 * this.buffer;
+
+      const len = Math.max(width * height, 0);
+      const data = new Uint8ClampedArray(len * 4);
       return {
-        data: new Uint8Array(0),
-        width: 0,
-        height: 0,
-        glyphWidth: 0,
-        glyphHeight: 0,
-        glyphTop: 0,
-        glyphLeft: 0,
-        glyphAdvance: 0,
+        data,
+        width,
+        height,
+        glyphWidth: w,
+        glyphHeight: h,
+        glyphTop,
+        glyphLeft,
+        glyphAdvance,
       };
     }
 

diff --git a/packages/core/src/utils/serialize.ts b/packages/core/src/utils/serialize.ts
@@ -265,7 +265,8 @@ export function typeofShape(
 }
 
 export async function deserializeNode(data: SerializedNode) {
-  const { type, attributes, children } = data;
+  // @ts-ignore
+  const { type, attributes, children, text } = data;
   let shape: Shape;
   if (type === 'g') {
     shape = new Group();
@@ -277,10 +278,47 @@ export async function deserializeNode(data: SerializedNode) {
     shape = new Rect();
   } else if (type === 'polyline') {
     shape = new Polyline();
+    // @ts-ignore
+  } else if (type === 'line') {
+    shape = new Polyline();
+    attributes.points = [
+      // @ts-ignore
+      [attributes.x1, attributes.y1],
+      // @ts-ignore
+      [attributes.x2, attributes.y2],
+    ];
+    // @ts-ignore
+    delete attributes.x1;
+    // @ts-ignore
+    delete attributes.y1;
+    // @ts-ignore
+    delete attributes.x2;
+    // @ts-ignore
+    delete attributes.y2;
+    // @ts-ignore
+  } else if (type === 'polygon') {
+    shape = new Path();
+    // attributes.points: "0,150 100,150 100,50"
+    // convert to d attribute
+    // @ts-ignore
+    attributes.d = (attributes.points as string)
+      .split(' ')
+      .map((xy, i, points) => {
+        const [x, y] = xy.split(',').map(Number);
+        const command = i === 0 ? 'M' : 'L';
+        if (i === points.length - 1) {
+          return `${command} ${x},${y} Z`;
+        }
+        return `${command} ${x},${y}`;
+      })
+      .join(' ');
+    delete attributes.points;
   } else if (type === 'path') {
     shape = new Path();
   } else if (type === 'text') {
     shape = new Text();
+    // @ts-ignore
+    attributes.content = text;
   } else if (type === 'rough-circle') {
     shape = new RoughCircle();
     // TODO: implement with path
@@ -294,7 +332,7 @@ export async function deserializeNode(data: SerializedNode) {
     shape = new RoughPath();
   }
 
-  const { transform, ...rest } = attributes;
+  let { transform, ...rest } = attributes;
   Object.assign(shape, rest);
 
   // create Image from DataURL
@@ -313,14 +351,16 @@ export async function deserializeNode(data: SerializedNode) {
   }
 
   if (transform) {
+    if (isString(transform)) {
+      transform = parseTransform(transform);
+    }
+
     const { position, scale, skew, rotation, pivot } = transform;
     shape.transform.position.set(position.x, position.y);
     shape.transform.scale.set(scale.x, scale.y);
     shape.transform.skew.set(skew.x, skew.y);
     shape.transform.rotation = rotation;
     shape.transform.pivot.set(pivot.x, pivot.y);
-
-    console.log(shape);
   }
 
   if (children && children.length > 0) {
@@ -879,7 +919,8 @@ export function fromSVGElement(element: SVGElement, uid = 0): SerializedNode {
       attributeName === 'strokeDashoffset' ||
       attributeName === 'fontSize'
     ) {
-      value = Number(value);
+      // remove 'px' suffix
+      value = Number(value.replace('px', ''));
     } else if (attributeName === 'textAnchor') {
       attributeName = 'textAlign';
       if (value === 'middle') {

diff --git a/packages/site/docs/.vitepress/config/en.js b/packages/site/docs/.vitepress/config/en.js
@@ -190,6 +190,14 @@ export const en = defineConfig({
                 text: 'Load web font',
                 link: 'web-font-loader',
               },
+              {
+                text: 'Pythagorean theorem',
+                link: 'pythagorean-theorem',
+              },
+              {
+                text: 'Web Animations API',
+                link: 'web-animations-api',
+              },
             ],
           },
         ],

diff --git a/packages/site/docs/.vitepress/config/zh.js b/packages/site/docs/.vitepress/config/zh.js
@@ -160,6 +160,14 @@ export const zh = defineConfig({
                 text: '加载 Web 字体',
                 link: 'web-font-loader',
               },
+              {
+                text: '勾股定理',
+                link: 'pythagorean-theorem',
+              },
+              {
+                text: 'Web Animations API',
+                link: 'web-animations-api',
+              },
             ],
           },
         ],