@canvas-commons/2d 0.2.0

package/src/lib/curves/getRectProfile.ts

@@ -0,0 +1,138 @@
+import {BBox, Spacing, Vector2} from '@canvas-commons/core';
+import {adjustRectRadius} from '../utils';
+import {CircleSegment} from './CircleSegment';
+import {CubicBezierSegment} from './CubicBezierSegment';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+import {Segment} from './Segment';
+
+export function getRectProfile(
+  rect: BBox,
+  radius: Spacing,
+  smoothCorners: boolean,
+  cornerSharpness: number,
+): CurveProfile {
+  const profile: CurveProfile = {
+    arcLength: 0,
+    segments: [],
+    minSin: 1,
+  };
+
+  const topLeft = adjustRectRadius(radius.top, radius.right, radius.left, rect);
+  const topRight = adjustRectRadius(
+    radius.right,
+    radius.top,
+    radius.bottom,
+    rect,
+  );
+  const bottomRight = adjustRectRadius(
+    radius.bottom,
+    radius.left,
+    radius.right,
+    rect,
+  );
+  const bottomLeft = adjustRectRadius(
+    radius.left,
+    radius.bottom,
+    radius.top,
+    rect,
+  );
+
+  let from = new Vector2(rect.left + topLeft, rect.top);
+  let to = new Vector2(rect.right - topRight, rect.top);
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.right, rect.top + topRight);
+  to = new Vector2(rect.right, rect.bottom - bottomRight);
+  if (topRight > 0) {
+    addCornerSegment(
+      profile,
+      from.addX(-topRight),
+      topRight,
+      Vector2.down,
+      Vector2.right,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.right - bottomRight, rect.bottom);
+  to = new Vector2(rect.left + bottomLeft, rect.bottom);
+  if (bottomRight > 0) {
+    addCornerSegment(
+      profile,
+      from.addY(-bottomRight),
+      bottomRight,
+      Vector2.right,
+      Vector2.up,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.left, rect.bottom - bottomLeft);
+  to = new Vector2(rect.left, rect.top + topLeft);
+  if (bottomLeft > 0) {
+    addCornerSegment(
+      profile,
+      from.addX(bottomLeft),
+      bottomLeft,
+      Vector2.up,
+      Vector2.left,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+  addSegment(profile, new LineSegment(from, to));
+
+  from = new Vector2(rect.left + topLeft, rect.top);
+  if (topLeft > 0) {
+    addCornerSegment(
+      profile,
+      from.addY(topLeft),
+      topLeft,
+      Vector2.left,
+      Vector2.down,
+      smoothCorners,
+      cornerSharpness,
+    );
+  }
+
+  return profile;
+}
+
+function addSegment(profile: CurveProfile, segment: Segment) {
+  profile.segments.push(segment);
+  profile.arcLength += segment.arcLength;
+}
+
+function addCornerSegment(
+  profile: CurveProfile,
+  center: Vector2,
+  radius: number,
+  fromNormal: Vector2,
+  toNormal: Vector2,
+  smooth: boolean,
+  sharpness: number,
+) {
+  const from = center.add(fromNormal.scale(radius));
+  const to = center.add(toNormal.scale(radius));
+  if (smooth) {
+    addSegment(
+      profile,
+      new CubicBezierSegment(
+        from,
+        from.add(toNormal.scale(sharpness * radius)),
+        to.add(fromNormal.scale(sharpness * radius)),
+        to,
+      ),
+    );
+  } else {
+    addSegment(
+      profile,
+      new CircleSegment(center, radius, fromNormal, toNormal, false),
+    );
+  }
+}

package/src/lib/curves/index.ts

@@ -0,0 +1,16 @@
+export * from './CircleSegment';
+export * from './CubicBezierSegment';
+export * from './CurveDrawingInfo';
+export * from './CurvePoint';
+export * from './CurveProfile';
+export * from './getBezierSplineProfile';
+export * from './getCircleProfile';
+export * from './getPointAtDistance';
+export * from './getPolylineProfile';
+export * from './getRectProfile';
+export * from './KnotInfo';
+export * from './LineSegment';
+export * from './Polynomial';
+export * from './Polynomial2D';
+export * from './QuadBezierSegment';
+export * from './Segment';

package/src/lib/decorators/canvasStyleSignal.ts

@@ -0,0 +1,15 @@
+import {Color, Signal} from '@canvas-commons/core';
+import type {CanvasStyle, PossibleCanvasStyle} from '../partials';
+import {canvasStyleParser} from '../utils';
+import {initial, interpolation, parser, signal} from './signal';
+
+export type CanvasStyleSignal<T> = Signal<PossibleCanvasStyle, CanvasStyle, T>;
+
+export function canvasStyleSignal(): PropertyDecorator {
+  return (target, key) => {
+    signal()(target, key);
+    parser(canvasStyleParser)(target, key);
+    interpolation(Color.lerp)(target, key);
+    initial(null)(target, key);
+  };
+}

package/src/lib/decorators/colorSignal.ts

@@ -0,0 +1,9 @@
+import {Color} from '@canvas-commons/core';
+import {signal, wrapper} from './signal';
+
+export function colorSignal(): PropertyDecorator {
+  return (target, key) => {
+    signal()(target, key);
+    wrapper(Color)(target, key);
+  };
+}

package/src/lib/decorators/compound.ts

@@ -0,0 +1,85 @@
+import {
+  CompoundSignalContext,
+  SignalContext,
+  deepLerp,
+  map,
+  modify,
+  useLogger,
+} from '@canvas-commons/core';
+import {makeSignalExtensions} from '../utils/makeSignalExtensions';
+import {addInitializer} from './initializers';
+import {getPropertyMetaOrCreate} from './signal';
+
+/**
+ * Create a compound property decorator.
+ *
+ * @remarks
+ * This decorator turns a given property into a signal consisting of one or more
+ * nested signals.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@compound({x: 'scaleX', y: 'scaleY'})
+ *   public declare readonly scale: Signal<Vector2, this>;
+ *
+ *   public setScale() {
+ *     this.scale({x: 7, y: 3});
+ *     // same as:
+ *     this.scale.x(7).scale.y(3);
+ *   }
+ * }
+ * ```
+ *
+ * @param entries - A record mapping the property in the compound object to the
+ *                  corresponding property on the owner node.
+ */
+export function compound<
+  TSetterValue,
+  TValue extends TSetterValue,
+  TKeys extends keyof TValue = keyof TValue,
+  TOwner = void,
+>(
+  entries: Record<string, string>,
+  klass: typeof CompoundSignalContext<
+    TSetterValue,
+    TValue,
+    TKeys,
+    TOwner
+  > = CompoundSignalContext,
+): PropertyDecorator {
+  return (target, key) => {
+    const meta = getPropertyMetaOrCreate<any>(target, key);
+    meta.compound = true;
+    meta.compoundEntries = Object.entries(entries);
+
+    addInitializer(target, (instance: any) => {
+      if (!meta.parser) {
+        useLogger().error(`Missing parser decorator for "${key.toString()}"`);
+        return;
+      }
+
+      const initial = meta.default;
+      const parser = meta.parser.bind(instance);
+      const signalContext = new klass(
+        meta.compoundEntries.map(([key, property]) => {
+          const signal = new SignalContext(
+            modify(initial, value => parser(value)[key]),
+            <any>map,
+            instance,
+            undefined,
+            makeSignalExtensions(undefined, instance, property),
+          ).toSignal();
+          return [key as TKeys, signal];
+        }),
+        parser,
+        initial,
+        meta.interpolationFunction ?? deepLerp,
+        instance,
+        makeSignalExtensions(meta, instance, <string>key),
+      );
+
+      instance[key] = signalContext.toSignal();
+    });
+  };
+}

package/src/lib/decorators/computed.ts

@@ -0,0 +1,18 @@
+import {createComputed} from '@canvas-commons/core';
+import {addInitializer} from './initializers';
+
+/**
+ * Create a computed method decorator.
+ *
+ * @remarks
+ * This decorator turns the given method into a computed value.
+ * See {@link createComputed} for more information.
+ */
+export function computed(): MethodDecorator {
+  return (target: any, key) => {
+    addInitializer(target, (instance: any) => {
+      const method = Object.getPrototypeOf(instance)[key];
+      instance[key] = createComputed(method.bind(instance), instance);
+    });
+  };
+}

package/src/lib/decorators/defaultStyle.ts

@@ -0,0 +1,15 @@
+import {capitalize} from '@canvas-commons/core';
+import {Layout} from '../components';
+
+export function defaultStyle<T>(initial?: T): PropertyDecorator {
+  return (target: any, key) => {
+    target[`getDefault${capitalize(<string>key)}`] = function (this: Layout) {
+      const parent = this.parentTransform();
+      if (parent && this.layout() !== false) {
+        return (parent as any)[key]();
+      }
+
+      return initial;
+    };
+  };
+}

package/src/lib/decorators/filtersSignal.ts

@@ -0,0 +1,133 @@
+import {
+  Signal,
+  SignalContext,
+  SignalValue,
+  SimpleSignal,
+  ThreadGenerator,
+  TimingFunction,
+  all,
+  deepLerp,
+  easeInOutCubic,
+  unwrap,
+} from '@canvas-commons/core';
+import {FILTERS, Filter, FilterName} from '../partials';
+import {addInitializer} from './initializers';
+import {getPropertyMetaOrCreate} from './signal';
+
+export type FiltersSignal<TOwner> = Signal<
+  Filter[],
+  Filter[],
+  TOwner,
+  FiltersSignalContext<TOwner>
+> & {
+  [K in FilterName]: SimpleSignal<number, TOwner>;
+};
+
+export class FiltersSignalContext<TOwner> extends SignalContext<
+  Filter[],
+  Filter[],
+  TOwner
+> {
+  public constructor(initial: Filter[], owner: TOwner) {
+    super(initial, deepLerp, owner);
+
+    for (const filter in FILTERS) {
+      const props = FILTERS[filter];
+      Object.defineProperty(this.invokable, filter, {
+        value: (
+          newValue?: SignalValue<number>,
+          duration?: number,
+          timingFunction: TimingFunction = easeInOutCubic,
+        ) => {
+          if (newValue === undefined) {
+            return (
+              this.get()
+                ?.find(filter => filter.name === props.name)
+                ?.value() ??
+              props.default ??
+              0
+            );
+          }
+
+          let instance = this.get()?.find(filter => filter.name === props.name);
+          if (!instance) {
+            instance = new Filter(props);
+            this.set([...this.get(), instance]);
+          }
+
+          if (duration === undefined) {
+            instance.value(newValue);
+            return this.owner;
+          }
+
+          return instance.value(newValue, duration, timingFunction);
+        },
+      });
+    }
+  }
+
+  public override *tweener(
+    value: SignalValue<Filter[]>,
+    duration: number,
+    timingFunction: TimingFunction,
+  ): ThreadGenerator {
+    const from = this.get();
+    const to = unwrap(value);
+
+    if (areFiltersCompatible(from, to)) {
+      yield* all(
+        ...from.map((filter, i) =>
+          filter.value(to[i].value(), duration, timingFunction),
+        ),
+      );
+      this.set(to);
+      return;
+    }
+
+    for (const filter of to) {
+      filter.value(filter.default);
+    }
+
+    const toValues = to.map(filter => filter.value.context.raw());
+    const partialDuration =
+      from.length > 0 && to.length > 0 ? duration / 2 : duration;
+    if (from.length > 0) {
+      yield* all(
+        ...from.map(filter =>
+          filter.value(filter.default, partialDuration, timingFunction),
+        ),
+      );
+    }
+    this.set(to);
+    if (to.length > 0) {
+      yield* all(
+        ...to.map((filter, index) =>
+          filter.value(toValues[index]!, partialDuration, timingFunction),
+        ),
+      );
+    }
+  }
+}
+
+export function filtersSignal(): PropertyDecorator {
+  return (target: any, key) => {
+    const meta = getPropertyMetaOrCreate<Filter[]>(target, key);
+    addInitializer(target, (instance: any) => {
+      instance[key] = new FiltersSignalContext(
+        meta.default ?? [],
+        instance,
+      ).toSignal();
+    });
+  };
+}
+
+function areFiltersCompatible(a: Filter[], b: Filter[]) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].name !== b[i].name) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/lib/decorators/index.ts

@@ -0,0 +1,10 @@
+export * from './canvasStyleSignal';
+export * from './colorSignal';
+export * from './compound';
+export * from './computed';
+export * from './defaultStyle';
+export * from './filtersSignal';
+export * from './initializers';
+export * from './nodeName';
+export * from './signal';
+export * from './vector2Signal';

package/src/lib/decorators/initializers.ts

@@ -0,0 +1,32 @@
+const INITIALIZERS = Symbol.for('@canvas-commons/2d/decorators/initializers');
+
+export type Initializer<T> = (instance: T, context?: any) => void;
+
+export function addInitializer<T>(target: any, initializer: Initializer<T>) {
+  if (!target[INITIALIZERS]) {
+    target[INITIALIZERS] = [];
+  } else if (
+    // if one of the prototypes has initializers
+    target[INITIALIZERS] &&
+    // and it's not the target object itself
+    !Object.prototype.hasOwnProperty.call(target, INITIALIZERS)
+  ) {
+    const base = Object.getPrototypeOf(target);
+    target[INITIALIZERS] = [...base[INITIALIZERS]];
+  }
+
+  target[INITIALIZERS].push(initializer);
+}
+
+export function initialize(target: any, context?: any) {
+  if (target[INITIALIZERS]) {
+    try {
+      target[INITIALIZERS].forEach((initializer: Initializer<any>) =>
+        initializer(target, context),
+      );
+    } catch (e: any) {
+      e.inspect ??= target.key;
+      throw e;
+    }
+  }
+}

package/src/lib/decorators/nodeName.ts

@@ -0,0 +1,13 @@
+/**
+ * @internal
+ */
+export const NODE_NAME = Symbol.for('@canvas-commons/2d/nodeName');
+
+/**
+ * @internal
+ */
+export function nodeName(name: string) {
+  return function (target: any) {
+    target.prototype[NODE_NAME] = name;
+  };
+}

package/src/lib/decorators/signal.test.ts

@@ -0,0 +1,89 @@
+import {DEFAULT, SimpleSignal} from '@canvas-commons/core';
+import {beforeEach, describe, expect, test, vi} from 'vitest';
+import {initial, initializeSignals, parser, signal} from './signal';
+
+interface OwnerProps {
+  integer?: number;
+  custom?: number;
+}
+
+class Owner {
+  @initial(2.2)
+  @parser((value: number) => Math.round(value))
+  @signal()
+  declare public readonly integer: SimpleSignal<number>;
+
+  @initial(0)
+  @signal()
+  declare public readonly custom: SimpleSignal<number>;
+  public getCustom() {
+    return 4;
+  }
+  public setCustom() {
+    // do nothing
+  }
+
+  public constructor(props: OwnerProps = {}) {
+    initializeSignals(this, props);
+  }
+}
+
+const GetterMock = vi.spyOn(Owner.prototype, 'getCustom');
+const SetterMock = vi.spyOn(Owner.prototype, 'setCustom');
+
+describe('signal', () => {
+  beforeEach(() => {
+    GetterMock.mockClear();
+    SetterMock.mockClear();
+  });
+
+  test('Has initial value', () => {
+    const instance = new Owner();
+
+    expect(instance.integer()).toBe(2);
+    expect(instance.integer.isInitial()).toBe(true);
+  });
+
+  test('Overrides the value', () => {
+    const instance = new Owner({integer: 4});
+
+    expect(instance.integer()).toBe(4);
+    expect(instance.integer.isInitial()).toBe(false);
+  });
+
+  test('Resets the value to default', () => {
+    const instance = new Owner({integer: 4});
+    instance.integer(DEFAULT);
+
+    expect(instance.integer()).toBe(2);
+    expect(instance.integer.isInitial()).toBe(true);
+  });
+
+  test('Parses the value', () => {
+    const instance = new Owner();
+    instance.integer(2.7);
+
+    expect(instance.integer()).toBe(3);
+  });
+
+  test('Uses the custom getter', () => {
+    const instance = new Owner();
+    const value = instance.custom();
+
+    expect(value).toBe(4);
+    expect(GetterMock).toBeCalledTimes(1);
+  });
+
+  test('Calls the setter with the initial value', () => {
+    new Owner();
+
+    expect(SetterMock).toBeCalledWith(0);
+  });
+
+  test('Uses the setter', () => {
+    const instance = new Owner({custom: 1});
+    instance.custom(2);
+
+    expect(SetterMock).toBeCalledTimes(3);
+  });
+});