manim-web 0.2.0

package/dist/integrations/vue.d.ts

@@ -0,0 +1,249 @@
+import { Ref, PropType } from 'vue';
+import { Scene, SceneOptions } from '../core/Scene';
+import { Mobject, UpdaterFunction } from '../core/Mobject';
+import { Animation } from '../animation/Animation';
+export * from '../index';
+/**
+ * Composable to create and manage a ManimWeb scene.
+ * Creates a Scene instance when the container element is mounted.
+ *
+ * @param containerRef - A Vue ref to the container HTMLElement
+ * @param options - Optional SceneOptions for configuring the scene
+ * @returns An object with the scene ref and isReady flag
+ *
+ * @example
+ * ```typescript
+ * const containerRef = ref<HTMLElement | null>(null);
+ * const { scene, isReady } = useScene(containerRef, { backgroundColor: '#1a1a2e' });
+ * ```
+ */
+export declare function useScene(containerRef: Ref<HTMLElement | null>, options?: SceneOptions): {
+    scene: import('vue').ShallowRef<Scene | null, Scene | null>;
+    isReady: Ref<boolean, boolean>;
+};
+/**
+ * Composable to manage a mobject within a scene.
+ * Automatically adds the mobject to the scene when the scene is ready,
+ * and removes it when unmounted.
+ *
+ * @param scene - A Vue ref to the Scene (from useScene)
+ * @param createMobject - Factory function to create the mobject
+ * @returns A shallow ref to the mobject
+ *
+ * @example
+ * ```typescript
+ * const { scene } = useScene(containerRef);
+ * const circle = useMobject(scene, () => new Circle({ radius: 1 }));
+ * ```
+ */
+export declare function useMobject<T extends Mobject>(scene: Ref<Scene | null>, createMobject: () => T): Ref<T | null>;
+/**
+ * Composable for playing animations on a scene.
+ * Provides convenient wrappers around Scene.play() and Scene.playAll().
+ *
+ * @param scene - A Vue ref to the Scene (from useScene)
+ * @returns An object with play, playAll, and isPlaying
+ *
+ * @example
+ * ```typescript
+ * const { scene } = useScene(containerRef);
+ * const { play, playAll, isPlaying } = useAnimation(scene);
+ *
+ * // Play animations sequentially
+ * await play(new FadeIn(circle), new FadeOut(square));
+ *
+ * // Play animations in parallel
+ * await playAll(new FadeIn(circle), new FadeIn(square));
+ * ```
+ */
+export declare function useAnimation(scene: Ref<Scene | null>): {
+    play: (...animations: Animation[]) => Promise<void>;
+    playAll: (...animations: Animation[]) => Promise<void>;
+    isPlaying: Ref<boolean, boolean>;
+};
+/**
+ * Composable to attach an updater function to a mobject.
+ * The updater is automatically added when the mobject is available
+ * and removed when the component unmounts.
+ *
+ * @param mobject - A Vue ref to the Mobject (from useMobject)
+ * @param updater - Function called every frame with (mobject, dt)
+ *
+ * @example
+ * ```typescript
+ * const circle = useMobject(scene, () => new Circle({ radius: 1 }));
+ *
+ * useUpdater(circle, (m, dt) => {
+ *   m.rotate(dt); // Rotate the circle over time
+ * });
+ * ```
+ */
+export declare function useUpdater(mobject: Ref<Mobject | null>, updater: UpdaterFunction): void;
+/**
+ * ManimScene component.
+ * A wrapper component that creates a Scene and provides it to child components.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ManimScene
+ *     :width="800"
+ *     :height="450"
+ *     background-color="#1a1a2e"
+ *     @ready="onSceneReady"
+ *   />
+ * </template>
+ *
+ * <script setup>
+ * import { ManimScene, Circle, FadeIn } from 'manimweb/vue';
+ *
+ * const onSceneReady = async (scene) => {
+ *   const circle = new Circle({ radius: 1, color: '#ff0000' });
+ *   scene.add(circle);
+ *   await scene.play(new FadeIn(circle));
+ * };
+ * </script>
+ * ```
+ */
+export declare const ManimScene: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Canvas width in pixels.
+     * @default 800
+     */
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Canvas height in pixels.
+     * @default 450
+     */
+    height: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Background color as CSS color string.
+     * @default '#1a1a2e'
+     */
+    backgroundColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    /**
+     * Frame width in world units (Manim standard is 14).
+     * @default 14
+     */
+    frameWidth: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Frame height in world units (Manim standard is 8).
+     * @default 8
+     */
+    frameHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /**
+     * Emitted when the scene is ready to use.
+     * @param scene - The Scene instance
+     */
+    ready: (scene: Scene) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Canvas width in pixels.
+     * @default 800
+     */
+    width: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Canvas height in pixels.
+     * @default 450
+     */
+    height: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Background color as CSS color string.
+     * @default '#1a1a2e'
+     */
+    backgroundColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    /**
+     * Frame width in world units (Manim standard is 14).
+     * @default 14
+     */
+    frameWidth: {
+        type: PropType<number>;
+        default: number;
+    };
+    /**
+     * Frame height in world units (Manim standard is 8).
+     * @default 8
+     */
+    frameHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{
+    onReady?: ((scene: Scene) => any) | undefined;
+}>, {
+    width: number;
+    height: number;
+    backgroundColor: string;
+    frameWidth: number;
+    frameHeight: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * Composable to inject the scene from a parent ManimScene component.
+ * Use this in child components that need access to the scene.
+ *
+ * @returns A Vue ref to the Scene (may be null if no parent ManimScene)
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useInjectedScene, Circle, FadeIn } from 'manimweb/vue';
+ *
+ * const scene = useInjectedScene();
+ *
+ * // Use the scene when it becomes available
+ * watch(scene, async (s) => {
+ *   if (!s) return;
+ *   const circle = new Circle({ radius: 1 });
+ *   s.add(circle);
+ *   await s.play(new FadeIn(circle));
+ * });
+ * </script>
+ * ```
+ */
+export declare function useInjectedScene(): Ref<Scene | null>;
+/**
+ * Vue 3 plugin for ManimWeb.
+ * Currently a no-op, but can be extended to add global configuration.
+ *
+ * @example
+ * ```typescript
+ * import { createApp } from 'vue';
+ * import { ManimWebPlugin } from 'manimweb/vue';
+ *
+ * const app = createApp(App);
+ * app.use(ManimWebPlugin);
+ * ```
+ */
+export declare const ManimWebPlugin: {
+    install(_app: {
+        provide: (key: symbol, value: unknown) => void;
+    }): void;
+};
+//# sourceMappingURL=vue.d.ts.map

package/dist/integrations/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/integrations/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,GAAG,EACR,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,cAAc,UAAU,CAAC;AAEzB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CACtB,YAAY,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,EACrC,OAAO,CAAC,EAAE,YAAY;;;EAqCvB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,EAC1C,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EACxB,aAAa,EAAE,MAAM,CAAC,GACrB,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CA8Bf;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC;0BAOhB,SAAS,EAAE,KAAG,OAAO,CAAC,IAAI,CAAC;6BAcxB,SAAS,EAAE,KAAG,OAAO,CAAC,IAAI,CAAC;;EAelE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAC5B,OAAO,EAAE,eAAe,GACvB,IAAI,CAmBN;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU;IAInB;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;IAMlC;;;OAGG;mBACY,KAAK;;IA/CpB;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;OAGG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;;;4EAgDpC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAGpD;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;kBACX;QAAE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,GAAG,IAAI;CAIxE,CAAC"}