@twick/2d 0.14.21 → 0.15.0

package/src/lib/curves/getCircleProfile.ts

@@ -1,86 +0,0 @@
-import {Vector2} from '@twick/core';
-import {ArcSegment} from './ArcSegment';
-import type {CurveProfile} from './CurveProfile';
-import {LineSegment} from './LineSegment';
-import type {Segment} from './Segment';
-
-export function getCircleProfile(
-  size: Vector2,
-  startAngle: number,
-  endAngle: number,
-  closed: boolean,
-  counterclockwise = false,
-): CurveProfile {
-  const profile: CurveProfile = {
-    arcLength: 0,
-    minSin: 1,
-    segments: [],
-  };
-
-  if (endAngle < startAngle) {
-    const loops = Math.floor((startAngle - endAngle) / (Math.PI * 2)) + 1;
-    endAngle += Math.PI * 2 * loops;
-  } else if (endAngle > startAngle + Math.PI * 2) {
-    const loops = Math.floor((endAngle - startAngle) / (Math.PI * 2));
-    endAngle -= Math.PI * 2 * loops;
-  }
-
-  const middleAngle = (startAngle + endAngle) / 2;
-  const from = size.mul(Vector2.fromRadians(startAngle));
-  const to = size.mul(Vector2.fromRadians(endAngle));
-  const middle = size
-    .mul(Vector2.fromRadians(middleAngle))
-    .scale(counterclockwise ? -1 : 1);
-
-  if (closed) {
-    addSegment(profile, new LineSegment(Vector2.zero, from));
-  }
-
-  addArcSegment(
-    profile,
-    size,
-    from,
-    middle,
-    startAngle,
-    middleAngle,
-    counterclockwise,
-  );
-  addArcSegment(
-    profile,
-    size,
-    middle,
-    to,
-    middleAngle,
-    endAngle,
-    counterclockwise,
-  );
-
-  if (closed) {
-    addSegment(profile, new LineSegment(to, Vector2.zero));
-  }
-
-  return profile;
-}
-
-function addSegment(profile: CurveProfile, segment: Segment) {
-  profile.segments.push(segment);
-  profile.arcLength += segment.arcLength;
-}
-
-function addArcSegment(
-  profile: CurveProfile,
-  size: Vector2,
-  from: Vector2,
-  to: Vector2,
-  fromAngle: number,
-  toAngle: number,
-  counterclockwise: boolean,
-) {
-  const small = Math.abs(fromAngle - toAngle) <= 180 ? 1 : 0;
-  const flip = fromAngle > toAngle ? 0 : 1;
-  const counter = counterclockwise ? 0 : 1;
-  addSegment(
-    profile,
-    new ArcSegment(from, size, 0, 0, small ^ counter ^ flip, to),
-  );
-}

package/src/lib/curves/getPathProfile.ts

@@ -1,178 +0,0 @@
-import {Vector2, clamp} from '@twick/core';
-import type {PathCommand} from 'parse-svg-path';
-import parse from 'parse-svg-path';
-import {ArcSegment} from './ArcSegment';
-import {CubicBezierSegment} from './CubicBezierSegment';
-import type {CurveProfile} from './CurveProfile';
-import {LineSegment} from './LineSegment';
-import {QuadBezierSegment} from './QuadBezierSegment';
-import type {Segment} from './Segment';
-
-function addSegmentToProfile(profile: CurveProfile, segment: Segment) {
-  profile.segments.push(segment);
-  profile.arcLength += segment.arcLength;
-}
-
-function getArg(command: PathCommand, argumentIndex: number) {
-  return command[argumentIndex + 1] as number;
-}
-
-function getVector2(command: PathCommand, argumentIndex: number) {
-  return new Vector2(
-    command[argumentIndex + 1] as number,
-    command[argumentIndex + 2] as number,
-  );
-}
-
-function getPoint(
-  command: PathCommand,
-  argumentIndex: number,
-  isRelative: boolean,
-  currentPoint: Vector2,
-) {
-  const point = getVector2(command, argumentIndex);
-  return isRelative ? currentPoint.add(point) : point;
-}
-
-function reflectControlPoint(control: Vector2, currentPoint: Vector2) {
-  return currentPoint.add(currentPoint.sub(control));
-}
-
-function updateMinSin(profile: CurveProfile) {
-  for (let i = 0; i < profile.segments.length; i++) {
-    const segmentA = profile.segments[i];
-    const segmentB = profile.segments[(i + 1) % profile.segments.length];
-
-    // In cubic bezier this equal p2.sub(p3)
-    const startVector = segmentA.getPoint(1).tangent.scale(-1);
-    // In cubic bezier this equal p1.sub(p0)
-    const endVector = segmentB.getPoint(0).tangent;
-    const dot = startVector.dot(endVector);
-
-    const angleBetween = Math.acos(clamp(-1, 1, dot));
-    const angleSin = Math.sin(angleBetween / 2);
-
-    profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
-  }
-}
-
-export function getPathProfile(data: string): CurveProfile {
-  const profile: CurveProfile = {
-    segments: [],
-    arcLength: 0,
-    minSin: 1,
-  };
-
-  const segments = parse(data);
-  let currentPoint = new Vector2(0, 0);
-  let firstPoint: Vector2 | null = null;
-
-  for (const segment of segments) {
-    const command = segment[0].toLowerCase();
-    const isRelative = segment[0] === command;
-
-    if (command === 'm') {
-      currentPoint = getPoint(segment, 0, isRelative, currentPoint);
-      firstPoint = currentPoint;
-    } else if (command === 'l') {
-      const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
-      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
-      currentPoint = nextPoint;
-    } else if (command === 'h') {
-      const x = getArg(segment, 0);
-      const nextPoint = isRelative
-        ? currentPoint.addX(x)
-        : new Vector2(x, currentPoint.y);
-      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
-      currentPoint = nextPoint;
-    } else if (command === 'v') {
-      const y = getArg(segment, 0);
-      const nextPoint = isRelative
-        ? currentPoint.addY(y)
-        : new Vector2(currentPoint.x, y);
-      addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
-      currentPoint = nextPoint;
-    } else if (command === 'q') {
-      const controlPoint = getPoint(segment, 0, isRelative, currentPoint);
-      const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
-      addSegmentToProfile(
-        profile,
-        new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
-      );
-      currentPoint = nextPoint;
-    } else if (command === 't') {
-      const lastSegment = profile.segments.at(-1);
-      const controlPoint =
-        lastSegment instanceof QuadBezierSegment
-          ? reflectControlPoint(lastSegment.p1, currentPoint)
-          : currentPoint;
-
-      const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
-      addSegmentToProfile(
-        profile,
-        new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
-      );
-      currentPoint = nextPoint;
-    } else if (command === 'c') {
-      const startControlPoint = getPoint(segment, 0, isRelative, currentPoint);
-      const endControlPoint = getPoint(segment, 2, isRelative, currentPoint);
-      const nextPoint = getPoint(segment, 4, isRelative, currentPoint);
-      addSegmentToProfile(
-        profile,
-        new CubicBezierSegment(
-          currentPoint,
-          startControlPoint,
-          endControlPoint,
-          nextPoint,
-        ),
-      );
-      currentPoint = nextPoint;
-    } else if (command === 's') {
-      const lastSegment = profile.segments.at(-1);
-      const startControlPoint =
-        lastSegment instanceof CubicBezierSegment
-          ? reflectControlPoint(lastSegment.p2, currentPoint)
-          : currentPoint;
-
-      const endControlPoint = getPoint(segment, 0, isRelative, currentPoint);
-      const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
-      addSegmentToProfile(
-        profile,
-        new CubicBezierSegment(
-          currentPoint,
-          startControlPoint,
-          endControlPoint,
-          nextPoint,
-        ),
-      );
-      currentPoint = nextPoint;
-    } else if (command === 'a') {
-      const radius = getVector2(segment, 0);
-      const angle = getArg(segment, 2);
-      const largeArcFlag = getArg(segment, 3);
-      const sweepFlag = getArg(segment, 4);
-      const nextPoint = getPoint(segment, 5, isRelative, currentPoint);
-      addSegmentToProfile(
-        profile,
-        new ArcSegment(
-          currentPoint,
-          radius,
-          angle,
-          largeArcFlag,
-          sweepFlag,
-          nextPoint,
-        ),
-      );
-      currentPoint = nextPoint;
-    } else if (command === 'z') {
-      if (!firstPoint) continue;
-      if (currentPoint.equals(firstPoint)) continue;
-
-      addSegmentToProfile(profile, new LineSegment(currentPoint, firstPoint));
-      currentPoint = firstPoint;
-    }
-  }
-  updateMinSin(profile);
-
-  return profile;
-}

package/src/lib/curves/getPointAtDistance.ts

@@ -1,21 +0,0 @@
-import {Vector2, clamp} from '@twick/core';
-import type {CurvePoint} from './CurvePoint';
-import type {CurveProfile} from './CurveProfile';
-
-export function getPointAtDistance(
-  profile: CurveProfile,
-  distance: number,
-): CurvePoint {
-  const clamped = clamp(0, profile.arcLength, distance);
-  let length = 0;
-  for (const segment of profile.segments) {
-    const previousLength = length;
-    length += segment.arcLength;
-    if (length >= clamped) {
-      const relative = (clamped - previousLength) / segment.arcLength;
-      return segment.getPoint(clamp(0, 1, relative));
-    }
-  }
-
-  return {position: Vector2.zero, tangent: Vector2.up, normal: Vector2.up};
-}

package/src/lib/curves/getPolylineProfile.test.ts

@@ -1,21 +0,0 @@
-import {Vector2} from '@twick/core';
-import {describe, expect, test} from 'vitest';
-import {getPolylineProfile} from './getPolylineProfile';
-
-describe('getPolylineProfile', () => {
-  test('Correct arc length', () => {
-    const profile = getPolylineProfile(
-      [
-        Vector2.zero,
-        Vector2.zero,
-        new Vector2(100, 0),
-        new Vector2(100, 100),
-        new Vector2(0, 100),
-      ],
-      0,
-      true,
-    );
-
-    expect(profile.arcLength).toBe(400);
-  });
-});

package/src/lib/curves/getPolylineProfile.ts

@@ -1,89 +0,0 @@
-import type {Vector2} from '@twick/core';
-import {clamp} from '@twick/core';
-import {CircleSegment} from './CircleSegment';
-import type {CurveProfile} from './CurveProfile';
-import {LineSegment} from './LineSegment';
-
-export function getPolylineProfile(
-  points: readonly Vector2[],
-  radius: number,
-  closed: boolean,
-): CurveProfile {
-  const profile: CurveProfile = {
-    arcLength: 0,
-    segments: [],
-    minSin: 1,
-  };
-
-  if (points.length === 0) {
-    return profile;
-  }
-
-  if (closed) {
-    const middle = points[0].add(points[points.length - 1]).scale(0.5);
-    points = [middle, ...points, middle];
-  }
-
-  let last = points[0];
-  for (let i = 2; i < points.length; i++) {
-    const start = points[i - 2];
-    const center = points[i - 1];
-    const end = points[i];
-
-    const centerToStart = start.sub(center);
-    const centerToEnd = end.sub(center);
-    const startVector = centerToStart.normalized.safe;
-    const endVector = centerToEnd.normalized.safe;
-    const angleBetween = Math.acos(clamp(-1, 1, startVector.dot(endVector)));
-    const angleTan = Math.tan(angleBetween / 2);
-    const angleSin = Math.sin(angleBetween / 2);
-
-    const safeRadius = Math.min(
-      radius,
-      angleTan * centerToStart.magnitude * (i === 2 ? 1 : 0.5),
-      angleTan * centerToEnd.magnitude * (i === points.length - 1 ? 1 : 0.5),
-    );
-
-    const circleOffsetDistance = angleSin === 0 ? 0 : safeRadius / angleSin;
-    const pointOffsetDistance = angleTan === 0 ? 0 : safeRadius / angleTan;
-    const circleDistance = startVector
-      .add(endVector)
-      .scale(1 / 2)
-      .normalized.safe.scale(circleOffsetDistance)
-      .add(center);
-
-    const counter = startVector.perpendicular.dot(endVector) < 0;
-    const line = new LineSegment(
-      last,
-      center.add(startVector.scale(pointOffsetDistance)),
-    );
-    const circle = new CircleSegment(
-      circleDistance,
-      safeRadius,
-      startVector.perpendicular.scale(counter ? 1 : -1),
-      endVector.perpendicular.scale(counter ? -1 : 1),
-      counter,
-    );
-
-    if (line.arcLength > 0) {
-      profile.segments.push(line);
-      profile.arcLength += line.arcLength;
-    }
-    if (circle.arcLength > 0) {
-      profile.segments.push(circle);
-      profile.arcLength += circle.arcLength;
-    }
-
-    profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
-
-    last = center.add(endVector.scale(pointOffsetDistance));
-  }
-
-  const line = new LineSegment(last, points[points.length - 1]);
-  if (line.arcLength > 0) {
-    profile.segments.push(line);
-    profile.arcLength += line.arcLength;
-  }
-
-  return profile;
-}

package/src/lib/curves/getRectProfile.ts

@@ -1,139 +0,0 @@
-import type {BBox, Spacing} from '@twick/core';
-import {Vector2} from '@twick/core';
-import {adjustRectRadius} from '../utils';
-import {CircleSegment} from './CircleSegment';
-import {CubicBezierSegment} from './CubicBezierSegment';
-import type {CurveProfile} from './CurveProfile';
-import {LineSegment} from './LineSegment';
-import type {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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-import type {Signal} from '@twick/core';
-import {Color} from '@twick/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

@@ -1,9 +0,0 @@
-import {Color} from '@twick/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

@@ -1,72 +0,0 @@
-import {
-  CompoundSignalContext,
-  SignalContext,
-  deepLerp,
-  map,
-  modify,
-  useLogger,
-} from '@twick/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(entries: Record<string, string>): 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 CompoundSignalContext(
-        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, signal];
-        }),
-        parser,
-        initial,
-        meta.interpolationFunction ?? deepLerp,
-        instance,
-        makeSignalExtensions(meta, instance, <string>key),
-      );
-
-      instance[key] = signalContext.toSignal();
-    });
-  };
-}

package/src/lib/decorators/computed.ts

@@ -1,18 +0,0 @@
-import {createComputed} from '@twick/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

@@ -1,18 +0,0 @@
-import {capitalize} from '@twick/core';
-import type {Layout} from '../components';
-
-export function defaultStyle<T>(
-  styleName: string,
-  parse: (value: string) => T = value => value as T,
-): PropertyDecorator {
-  return (target: any, key) => {
-    target[`getDefault${capitalize(<string>key)}`] = function (this: Layout) {
-      this.requestLayoutUpdate();
-      const old = (<any>this.element.style)[styleName];
-      (<any>this.element.style)[styleName] = '';
-      const ret = parse.call(this, this.styles.getPropertyValue(styleName));
-      (<any>this.element.style)[styleName] = old;
-      return ret;
-    };
-  };
-}