@canvas-commons/2d 0.2.0

package/src/lib/decorators/vector2Signal.ts

@@ -0,0 +1,35 @@
+import {
+  PossibleVector2,
+  Signal,
+  Vector2,
+  Vector2SignalContext,
+} from '@canvas-commons/core';
+import type {Length} from '../partials';
+import {compound} from './compound';
+import {wrapper} from './signal';
+
+export type Vector2LengthSignal<TOwner> = Signal<
+  PossibleVector2<Length>,
+  Vector2,
+  TOwner
+> & {
+  x: Signal<Length, number, TOwner>;
+  y: Signal<Length, number, TOwner>;
+};
+
+export function vector2Signal(
+  prefix?: string | Record<string, string>,
+): PropertyDecorator {
+  return (target, key) => {
+    compound(
+      typeof prefix === 'object'
+        ? prefix
+        : {
+            x: prefix ? `${prefix}X` : 'x',
+            y: prefix ? `${prefix}Y` : 'y',
+          },
+      Vector2SignalContext,
+    )(target, key);
+    wrapper(Vector2)(target, key);
+  };
+}

package/src/lib/globals.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/// <reference types="@canvas-commons/core/project" />

package/src/lib/index.ts

@@ -0,0 +1,9 @@
+export * from './code';
+export * from './components';
+export * from './curves';
+export * from './decorators';
+export * from './jsx-runtime';
+export * from './morphers';
+export * from './partials';
+export * from './scenes';
+export * from './utils';

package/src/lib/jsx-dev-runtime.ts

@@ -0,0 +1,2 @@
+import {Fragment, jsx} from './jsx-runtime';
+export {Fragment, jsx as jsxDEV};

package/src/lib/jsx-runtime.ts

@@ -0,0 +1,45 @@
+import type {
+  ComponentChildren,
+  FunctionComponent,
+  JSXProps,
+  Node,
+  NodeConstructor,
+} from './components';
+
+export namespace JSX {
+  export type Element = Node;
+  export type ElementClass = Node;
+  export interface ElementChildrenAttribute {
+    children: any;
+  }
+}
+
+function isClassComponent(
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  fn: Function,
+): fn is new (...args: unknown[]) => unknown {
+  return !!fn.prototype?.isClass;
+}
+
+export const Fragment = Symbol.for('@canvas-commons/2d/fragment');
+export function jsx(
+  type: NodeConstructor | FunctionComponent | typeof Fragment,
+  config: JSXProps,
+  key?: any,
+): ComponentChildren {
+  const {ref, children, ...rest} = config;
+  const flatChildren = Array.isArray(children) ? children.flat() : children;
+
+  if (type === Fragment) {
+    return flatChildren;
+  }
+
+  if (isClassComponent(type)) {
+    const node = new type({...rest, children: flatChildren, key});
+    ref?.(node);
+    return node;
+  } else {
+    return type({...rest, ref, children: flatChildren, key});
+  }
+}
+export {jsx as jsxs};

package/src/lib/morphers/PathMorpher.ts

@@ -0,0 +1,8 @@
+export interface PathMorpherInterpolator {
+  (progress: number): string;
+}
+
+export interface PathMorpher {
+  createInterpolator(fromPath: string, toPath: string): PathMorpherInterpolator;
+  dispose?(): void;
+}

package/src/lib/morphers/defaultMorpher.ts

@@ -0,0 +1,43 @@
+import {CurveProfile} from '../curves/CurveProfile';
+import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
+import {getPathProfile} from '../curves/getPathProfile';
+import {PathMorpher} from './PathMorpher';
+
+function curveProfileToPath(profile: CurveProfile): string {
+  const parts: string[] = [];
+  let lastEnd: {x: number; y: number} | null = null;
+
+  for (const segment of profile.segments) {
+    const start = segment.getPoint(0).position;
+    const end = segment.getPoint(1).position;
+
+    if (!lastEnd || start.x !== lastEnd.x || start.y !== lastEnd.y) {
+      parts.push(`M${start.x},${start.y}`);
+    }
+    parts.push(`L${end.x},${end.y}`);
+    lastEnd = end;
+  }
+
+  return parts.join('');
+}
+
+/**
+ * Create a path morpher that uses the Kute.js-inspired polygon interpolation
+ * algorithm. Paths are sampled into polygons, point counts are equalized, and
+ * corresponding points are linearly interpolated.
+ */
+export function defaultMorpher(): PathMorpher {
+  return {
+    createInterpolator(fromPath: string, toPath: string) {
+      const fromProfile = getPathProfile(fromPath);
+      const toProfile = getPathProfile(toPath);
+      const interpolator = createCurveProfileLerp(fromProfile, toProfile);
+
+      return (progress: number): string => {
+        if (progress <= 0) return fromPath;
+        if (progress >= 1) return toPath;
+        return curveProfileToPath(interpolator(progress));
+      };
+    },
+  };
+}

package/src/lib/morphers/index.ts

@@ -0,0 +1,4 @@
+export {defaultMorpher} from './defaultMorpher';
+export {manimMorpher} from './manimMorpher';
+export type {ManimMorpherOptions} from './manimMorpher';
+export type {PathMorpher, PathMorpherInterpolator} from './PathMorpher';