fabric 5.3.0 → 6.0.0-beta1

package/dist/src/shapes/Textbox.d.ts

@@ -0,0 +1,170 @@
+import { TClassProperties } from '../typedefs';
+import { IText } from './IText/IText';
+/**
+ * Textbox class, based on IText, allows the user to resize the text rectangle
+ * and wraps lines automatically. Textboxes have their Y scaling locked, the
+ * user can only change width. Height is adjusted automatically based on the
+ * wrapping of lines.
+ */
+export declare class Textbox extends IText {
+    /**
+     * Minimum width of textbox, in pixels.
+     * @type Number
+     * @default
+     */
+    minWidth: number;
+    /**
+     * Minimum calculated width of a textbox, in pixels.
+     * fixed to 2 so that an empty textbox cannot go to 0
+     * and is still selectable without text.
+     * @type Number
+     * @default
+     */
+    dynamicMinWidth: number;
+    /**
+     * Use this boolean property in order to split strings that have no white space concept.
+     * this is a cheap way to help with chinese/japanese
+     * @type Boolean
+     * @since 2.6.0
+     */
+    splitByGrapheme: boolean;
+    /**
+     * Unlike superclass's version of this function, Textbox does not update
+     * its width.
+     * @private
+     * @override
+     */
+    initDimensions(): void;
+    /**
+     * Generate an object that translates the style object so that it is
+     * broken up by visual lines (new lines and automatic wrapping).
+     * The original text styles object is broken up by actual lines (new lines only),
+     * which is only sufficient for Text / IText
+     * @private
+     */
+    _generateStyleMap(textInfo: any): {};
+    /**
+     * Returns true if object has a style property or has it on a specified line
+     * @param {Number} lineIndex
+     * @return {Boolean}
+     */
+    styleHas(property: any, lineIndex: number): boolean;
+    /**
+     * Returns true if object has no styling or no styling in a line
+     * @param {Number} lineIndex , lineIndex is on wrapped lines.
+     * @return {Boolean}
+     */
+    isEmptyStyles(lineIndex: number): boolean;
+    /**
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @private
+     */
+    _getStyleDeclaration(lineIndex: number, charIndex: number): import("./Text/StyledText").TextStyleDeclaration | null;
+    /**
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @param {Object} style
+     * @private
+     */
+    _setStyleDeclaration(lineIndex: number, charIndex: number, style: object): void;
+    /**
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @private
+     */
+    _deleteStyleDeclaration(lineIndex: number, charIndex: number): void;
+    /**
+     * probably broken need a fix
+     * Returns the real style line that correspond to the wrapped lineIndex line
+     * Used just to verify if the line does exist or not.
+     * @param {Number} lineIndex
+     * @returns {Boolean} if the line exists or not
+     * @private
+     */
+    _getLineStyle(lineIndex: number): boolean;
+    /**
+     * Set the line style to an empty object so that is initialized
+     * @param {Number} lineIndex
+     * @param {Object} style
+     * @private
+     */
+    _setLineStyle(lineIndex: number): void;
+    /**
+     * Wraps text using the 'width' property of Textbox. First this function
+     * splits text on newlines, so we preserve newlines entered by the user.
+     * Then it wraps each line using the width of the Textbox by calling
+     * _wrapLine().
+     * @param {Array} lines The string array of text that is split into lines
+     * @param {Number} desiredWidth width you want to wrap to
+     * @returns {Array} Array of lines
+     */
+    _wrapText(lines: Array<any>, desiredWidth: number): Array<any>;
+    /**
+     * Helper function to measure a string of text, given its lineIndex and charIndex offset
+     * It gets called when charBounds are not available yet.
+     * Override if necessary
+     * Use with {@link Textbox#wordSplit}
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {String} text
+     * @param {number} lineIndex
+     * @param {number} charOffset
+     * @returns {number}
+     */
+    _measureWord(word: any, lineIndex: number, charOffset?: number): number;
+    /**
+     * Override this method to customize word splitting
+     * Use with {@link Textbox#_measureWord}
+     * @param {string} value
+     * @returns {string[]} array of words
+     */
+    wordSplit(value: string): string[];
+    /**
+     * Wraps a line of text using the width of the Textbox and a context.
+     * @param {Array} line The grapheme array that represent the line
+     * @param {Number} lineIndex
+     * @param {Number} desiredWidth width you want to wrap the line to
+     * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+     * @returns {Array} Array of line(s) into which the given text is wrapped
+     * to.
+     */
+    _wrapLine(_line: any, lineIndex: number, desiredWidth: number, reservedSpace?: number): Array<any>;
+    /**
+     * Detect if the text line is ended with an hard break
+     * text and itext do not have wrapping, return false
+     * @param {Number} lineIndex text to split
+     * @return {Boolean}
+     */
+    isEndOfWrapping(lineIndex: number): boolean;
+    /**
+     * Detect if a line has a linebreak and so we need to account for it when moving
+     * and counting style.
+     * @return Number
+     */
+    missingNewlineOffset(lineIndex: any): 1 | 0;
+    /**
+     * Gets lines of text to render in the Textbox. This function calculates
+     * text wrapping on the fly every time it is called.
+     * @param {String} text text to split
+     * @returns {Array} Array of lines in the Textbox.
+     * @override
+     */
+    _splitTextIntoLines(text: string): {
+        _unwrappedLines: string[][];
+        lines: string[];
+        graphemeText: string[];
+        graphemeLines: string[][];
+    };
+    getMinWidth(): number;
+    _removeExtraneousStyles(): void;
+    /**
+     * Returns object representation of an instance
+     * @method toObject
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} object representation of an instance
+     */
+    toObject(propertiesToInclude: Array<any>): object;
+}
+export declare const textboxDefaultValues: Partial<TClassProperties<Textbox>>;
+//# sourceMappingURL=Textbox.d.ts.map

package/dist/src/shapes/Triangle.d.ts

@@ -0,0 +1,17 @@
+import { TClassProperties } from '../typedefs';
+import { FabricObject } from './Object/FabricObject';
+export declare class Triangle extends FabricObject {
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _render(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Returns svg representation of an instance
+     * @return {Array} an array of strings with the specific svg representation
+     * of the instance
+     */
+    _toSVG(): string[];
+}
+export declare const triangleDefaultValues: Partial<TClassProperties<Triangle>>;
+//# sourceMappingURL=Triangle.d.ts.map

package/dist/src/typedefs.d.ts

@@ -0,0 +1,93 @@
+import { BaseFabricObject } from './EventTypeDefs';
+import type { Gradient } from './gradient/Gradient';
+import type { Pattern } from './Pattern';
+import type { Point } from './Point';
+interface NominalTag<T> {
+    nominalTag?: T;
+}
+type Nominal<Type, Tag> = NominalTag<Tag> & Type;
+type TNonFunctionPropertyNames<T> = {
+    [K in keyof T]: T[K] extends Function ? never : K;
+}[keyof T];
+export type TClassProperties<T> = Pick<T, TNonFunctionPropertyNames<T>>;
+export type Constructor<T = object> = new (...args: any[]) => T;
+declare const enum Degree {
+}
+declare const enum Radian {
+}
+export type TDegree = Nominal<number, Degree>;
+export type TRadian = Nominal<number, Radian>;
+export type TAxis = 'x' | 'y';
+export type TAxisKey<T extends string> = `${T}${Capitalize<TAxis>}`;
+export type TFiller = Gradient<'linear'> | Gradient<'radial'> | Pattern;
+export type TSize = {
+    width: number;
+    height: number;
+};
+export type TBBox = {
+    left: number;
+    top: number;
+} & TSize;
+export type Percent = `${number}%`;
+export declare const enum ImageFormat {
+    jpeg = "jpeg",
+    jpg = "jpeg",
+    png = "png"
+}
+export declare const enum SVGElementName {
+    linearGradient = "linearGradient",
+    radialGradient = "radialGradient",
+    stop = "stop"
+}
+export declare const enum SupportedSVGUnit {
+    mm = "mm",
+    cm = "cm",
+    in = "in",
+    pt = "pt",
+    pc = "pc",
+    em = "em"
+}
+export type TMat2D = [number, number, number, number, number, number];
+/**
+ * SVG path commands
+ */
+export type PathData = (string | number)[][];
+/**
+ * An invalid keyword and an empty string will be handled as the `anonymous` keyword.
+ * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
+ */
+export type TCrossOrigin = '' | 'anonymous' | 'use-credentials' | null;
+export type TOriginX = 'center' | 'left' | 'right' | number;
+export type TOriginY = 'center' | 'top' | 'bottom' | number;
+export type TCornerPoint = {
+    tl: Point;
+    tr: Point;
+    bl: Point;
+    br: Point;
+};
+export type TSVGReviver = (markup: string) => string;
+export type TValidToObjectMethod = 'toDatalessObject' | 'toObject';
+export type TCacheCanvasDimensions = {
+    width: number;
+    height: number;
+    zoomX: number;
+    zoomY: number;
+    x: number;
+    y: number;
+};
+export type TToCanvasElementOptions = {
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    filter?: (object: BaseFabricObject) => boolean;
+};
+export type TDataUrlOptions = TToCanvasElementOptions & {
+    multiplier: number;
+    format?: ImageFormat;
+    quality?: number;
+    enableRetinaScaling?: boolean;
+};
+export type AssertKeys<T, K extends keyof T> = T & Record<K, NonNullable<T[K]>>;
+export {};
+//# sourceMappingURL=typedefs.d.ts.map

package/dist/src/util/animation/AnimationBase.d.ts

@@ -0,0 +1,54 @@
+import { AnimationState, TBaseAnimationOptions, TEasingFunction } from './types';
+export declare abstract class AnimationBase<T extends number | number[] = number | number[]> {
+    readonly startValue: T;
+    readonly endValue: T;
+    readonly duration: number;
+    readonly delay: number;
+    protected readonly byValue: T;
+    protected readonly easing: TEasingFunction<T>;
+    private readonly _onStart;
+    private readonly _onChange;
+    private readonly _onComplete;
+    private readonly _abort;
+    /**
+     * Used to register the animation to a target object
+     * so that it can be cancelled within the object context
+     */
+    readonly target?: unknown;
+    private _state;
+    /**
+     * Time %, or the ratio of `timeElapsed / duration`
+     * @see tick
+     */
+    durationProgress: number;
+    /**
+     * Value %, or the ratio of `(currentValue - startValue) / (endValue - startValue)`
+     */
+    valueProgress: number;
+    /**
+     * Current value
+     */
+    value: T;
+    /**
+     * Animation start time ms
+     */
+    private startTime;
+    constructor({ startValue, byValue, duration, delay, easing, onStart, onChange, onComplete, abort, target, }: TBaseAnimationOptions<T>);
+    get state(): AnimationState;
+    isDone(): boolean;
+    /**
+     * Calculate the current value based on the easing parameters
+     * @param timeElapsed in ms
+     * @protected
+     */
+    protected abstract calculate(timeElapsed: number): {
+        value: T;
+        valueProgress: number;
+    };
+    start(): void;
+    private tick;
+    private register;
+    private unregister;
+    abort(): void;
+}
+//# sourceMappingURL=AnimationBase.d.ts.map

package/dist/src/util/animation/AnimationFrameProvider.d.ts

@@ -0,0 +1,8 @@
+/**
+ * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
+ * @param {Function} callback Callback to invoke
+ */
+export declare function requestAnimFrame(callback: FrameRequestCallback): number;
+export declare function cancelAnimFrame(handle: number): void;
+//# sourceMappingURL=AnimationFrameProvider.d.ts.map

package/dist/src/util/animation/AnimationRegistry.d.ts

@@ -0,0 +1,29 @@
+import type { Canvas } from '../../canvas/Canvas';
+import type { AnimationBase } from './AnimationBase';
+/**
+ * Array holding all running animations
+ */
+declare class AnimationRegistry extends Array<AnimationBase> {
+    /**
+     * Remove a single animation using an animation context
+     * @param {AnimationBase} context
+     */
+    remove(context: AnimationBase): void;
+    /**
+     * Cancel all running animations on the next frame
+     */
+    cancelAll(): AnimationBase<number | number[]>[];
+    /**
+     * Cancel all running animations attached to a Canvas on the next frame
+     * @param {Canvas} canvas
+     */
+    cancelByCanvas(canvas: Canvas): AnimationBase<number | number[]>[];
+    /**
+     * Cancel all running animations for target on the next frame
+     * @param target
+     */
+    cancelByTarget(target: AnimationBase['target']): AnimationBase<number | number[]>[];
+}
+export declare const runningAnimations: AnimationRegistry;
+export {};
+//# sourceMappingURL=AnimationRegistry.d.ts.map

package/dist/src/util/animation/ArrayAnimation.d.ts

@@ -0,0 +1,10 @@
+import { AnimationBase } from './AnimationBase';
+import { ArrayAnimationOptions } from './types';
+export declare class ArrayAnimation extends AnimationBase<number[]> {
+    constructor({ startValue, endValue, ...options }: ArrayAnimationOptions);
+    protected calculate(timeElapsed: number): {
+        value: number[];
+        valueProgress: number;
+    };
+}
+//# sourceMappingURL=ArrayAnimation.d.ts.map

package/dist/src/util/animation/ColorAnimation.d.ts

@@ -0,0 +1,11 @@
+import { TRGBAColorSource } from '../../color/Color';
+import { AnimationBase } from './AnimationBase';
+import type { ColorAnimationOptions } from './types';
+export declare class ColorAnimation extends AnimationBase<TRGBAColorSource> {
+    constructor({ startValue, endValue, easing, onChange, onComplete, abort, ...options }: ColorAnimationOptions);
+    protected calculate(timeElapsed: number): {
+        value: TRGBAColorSource;
+        valueProgress: number;
+    };
+}
+//# sourceMappingURL=ColorAnimation.d.ts.map

package/dist/src/util/animation/ValueAnimation.d.ts

@@ -0,0 +1,10 @@
+import { AnimationBase } from './AnimationBase';
+import { ValueAnimationOptions } from './types';
+export declare class ValueAnimation extends AnimationBase<number> {
+    constructor({ startValue, endValue, ...otherOptions }: ValueAnimationOptions);
+    protected calculate(timeElapsed: number): {
+        value: number;
+        valueProgress: number;
+    };
+}
+//# sourceMappingURL=ValueAnimation.d.ts.map

package/dist/src/util/animation/animate.d.ts

@@ -0,0 +1,37 @@
+import { ValueAnimation } from './ValueAnimation';
+import { ArrayAnimation } from './ArrayAnimation';
+import { ColorAnimation } from './ColorAnimation';
+import { ValueAnimationOptions, ArrayAnimationOptions, ColorAnimationOptions } from './types';
+import { TColorArg } from '../../color/Color';
+export type TAnimation<T extends number | number[] | TColorArg> = T extends TColorArg ? ColorAnimation : T extends number[] ? ArrayAnimation : ValueAnimation;
+/**
+ * Changes value(s) from startValue to endValue within a certain period of time,
+ * invoking callbacks as the value(s) change.
+ *
+ * @example
+ * animate({
+ *   startValue: 1,
+ *   endValue: 0,
+ *   onChange: (v) => {
+ *     obj.set('opacity', v);
+ *     // since we are running in a requested frame we should call `renderAll` and not `requestRenderAll`
+ *     canvas.renderAll();
+ *   }
+ * });
+ *
+ * @example Using lists:
+ * animate({
+ *   startValue: [1, 2, 3],
+ *   endValue: [2, 4, 6],
+ *   onChange: ([x, y, zoom]) => {
+ *     canvas.zoomToPoint(new Point(x, y), zoom);
+ *     canvas.renderAll();
+ *   }
+ * });
+ *
+ */
+export declare function animate(options: ArrayAnimationOptions): ArrayAnimation;
+export declare function animate(options: ValueAnimationOptions): ValueAnimation;
+export declare function animate<T extends ValueAnimationOptions | ArrayAnimationOptions>(options: T): T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation;
+export declare function animateColor(options: ColorAnimationOptions): ColorAnimation;
+//# sourceMappingURL=animate.d.ts.map

package/dist/src/util/animation/easing.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Easing functions
+ * @see {@link http://gizma.com/easing/ Easing Equations by Robert Penner}
+ */
+import { TEasingFunction } from './types';
+/**
+ * Default sinusoidal easing
+ */
+export declare const defaultEasing: TEasingFunction;
+/**
+ * Cubic easing in
+ */
+export declare const easeInCubic: TEasingFunction;
+/**
+ * Cubic easing out
+ */
+export declare const easeOutCubic: TEasingFunction;
+/**
+ * Cubic easing in and out
+ */
+export declare const easeInOutCubic: TEasingFunction;
+/**
+ * Quartic easing in
+ */
+export declare const easeInQuart: TEasingFunction;
+/**
+ * Quartic easing out
+ */
+export declare const easeOutQuart: TEasingFunction;
+/**
+ * Quartic easing in and out
+ */
+export declare const easeInOutQuart: TEasingFunction;
+/**
+ * Quintic easing in
+ */
+export declare const easeInQuint: TEasingFunction;
+/**
+ * Quintic easing out
+ */
+export declare const easeOutQuint: TEasingFunction;
+/**
+ * Quintic easing in and out
+ */
+export declare const easeInOutQuint: TEasingFunction;
+/**
+ * Sinusoidal easing in
+ */
+export declare const easeInSine: TEasingFunction;
+/**
+ * Sinusoidal easing out
+ */
+export declare const easeOutSine: TEasingFunction;
+/**
+ * Sinusoidal easing in and out
+ */
+export declare const easeInOutSine: TEasingFunction;
+/**
+ * Exponential easing in
+ */
+export declare const easeInExpo: TEasingFunction;
+/**
+ * Exponential easing out
+ */
+export declare const easeOutExpo: TEasingFunction;
+/**
+ * Exponential easing in and out
+ */
+export declare const easeInOutExpo: TEasingFunction;
+/**
+ * Circular easing in
+ */
+export declare const easeInCirc: TEasingFunction;
+/**
+ * Circular easing out
+ */
+export declare const easeOutCirc: TEasingFunction;
+/**
+ * Circular easing in and out
+ */
+export declare const easeInOutCirc: TEasingFunction;
+/**
+ * Elastic easing in
+ */
+export declare const easeInElastic: TEasingFunction;
+/**
+ * Elastic easing out
+ */
+export declare const easeOutElastic: TEasingFunction;
+/**
+ * Elastic easing in and out
+ */
+export declare const easeInOutElastic: TEasingFunction;
+/**
+ * Backwards easing in
+ */
+export declare const easeInBack: TEasingFunction;
+/**
+ * Backwards easing out
+ */
+export declare const easeOutBack: TEasingFunction;
+/**
+ * Backwards easing in and out
+ */
+export declare const easeInOutBack: TEasingFunction;
+/**
+ * Bouncing easing out
+ */
+export declare const easeOutBounce: TEasingFunction;
+/**
+ * Bouncing easing in
+ */
+export declare const easeInBounce: TEasingFunction;
+/**
+ * Bouncing easing in and out
+ */
+export declare const easeInOutBounce: TEasingFunction;
+/**
+ * Quadratic easing in
+ */
+export declare const easeInQuad: TEasingFunction;
+/**
+ * Quadratic easing out
+ */
+export declare const easeOutQuad: TEasingFunction;
+/**
+ * Quadratic easing in and out
+ */
+export declare const easeInOutQuad: TEasingFunction;
+//# sourceMappingURL=easing.d.ts.map

package/dist/src/util/animation/types.d.ts

@@ -0,0 +1,87 @@
+import { TColorArg } from '../../color/Color';
+export type AnimationState = 'pending' | 'running' | 'completed' | 'aborted';
+/**
+ * Callback called every frame
+ * @param {number | number[]} value current value of the animation.
+ * @param {number} valueProgress ∈ [0, 1], the current animation progress reflected on value, normalized.
+ * 0 is the starting value and 1 is the ending value.
+ * @param {number} durationProgress ∈ [0, 1], the current animation duration normalized to 1.
+ */
+export type TOnAnimationChangeCallback<T, R = void> = (value: T, valueProgress: number, durationProgress: number) => R;
+/**
+ * Called on each step to determine if animation should abort
+ * @returns truthy if animation should abort
+ */
+export type TAbortCallback<T> = TOnAnimationChangeCallback<T, boolean>;
+/**
+ * An easing function used to calculate the current value
+ * @see {@link AnimationBase['calculate']}
+ *
+ * @param timeElapsed ms elapsed since start
+ * @param startValue
+ * @param byValue
+ * @param duration in ms
+ * @returns next value
+ */
+export type TEasingFunction<T = unknown> = T extends number[] ? (timeElapsed: number, startValue: number, byValue: number, duration: number, index: number) => number : (timeElapsed: number, startValue: number, byValue: number, duration: number) => number;
+export type TAnimationBaseOptions<T> = {
+    /**
+     * Duration of the animation in ms
+     * @default 500
+     */
+    duration: number;
+    /**
+     * Delay to start the animation in ms
+     * @default 0
+     */
+    delay: number;
+    /**
+     * Easing function
+     * @default {defaultEasing}
+     */
+    easing: TEasingFunction<T>;
+    /**
+     * The object this animation is being performed on
+     */
+    target: unknown;
+};
+export type TAnimationCallbacks<T> = {
+    /**
+     * Called when the animation starts
+     */
+    onStart: VoidFunction;
+    /**
+     * Called at each frame of the animation
+     */
+    onChange: TOnAnimationChangeCallback<T>;
+    /**
+     * Called after the last frame of the animation
+     */
+    onComplete: TOnAnimationChangeCallback<T>;
+    /**
+     * Function called at each frame.
+     * If it returns true, abort
+     */
+    abort: TAbortCallback<T>;
+};
+export type TBaseAnimationOptions<T, TCallback = T, TEasing = T> = Partial<TAnimationBaseOptions<TEasing> & TAnimationCallbacks<TCallback>> & {
+    startValue: T;
+    byValue: T;
+};
+export type TAnimationOptions<T, TCallback = T, TEasing = T> = Partial<TAnimationBaseOptions<TEasing> & TAnimationCallbacks<TCallback> & {
+    /**
+     * Starting value(s)
+     * @default 0
+     */
+    startValue: T;
+    /**
+     * Ending value(s)
+     * @default 100
+     */
+    endValue: T;
+}>;
+export type ValueAnimationOptions = TAnimationOptions<number>;
+export type ArrayAnimationOptions = TAnimationOptions<number[]>;
+export type ColorAnimationOptions = TAnimationOptions<TColorArg, string, number[]>;
+export type AnimationOptions<T extends number | number[] | TColorArg> = T extends TColorArg ? ColorAnimationOptions : T extends number[] ? ArrayAnimationOptions : ValueAnimationOptions;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/util/applyMixins.d.ts

@@ -0,0 +1,8 @@
+import { Constructor } from '../typedefs';
+/***
+ * https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern
+ */
+export declare function applyMixins<T extends Constructor, S extends Constructor>(derivedCtor: T, constructors: S[]): T & {
+    prototype: InstanceType<T & S>;
+};
+//# sourceMappingURL=applyMixins.d.ts.map

package/dist/src/util/class_registry.d.ts

@@ -0,0 +1,14 @@
+export declare const JSON = "json";
+export declare const SVG = "svg";
+export declare class ClassRegistry {
+    [JSON]: Map<string, any>;
+    [SVG]: Map<string, any>;
+    constructor();
+    getClass(classType: string): any;
+    setClass(classConstructor: any, classType?: string): void;
+    getSVGClass(SVGTagName: string): any;
+    setSVGClass(classConstructor: any, SVGTagName?: string): void;
+}
+declare const classRegistry: ClassRegistry;
+export { classRegistry };
+//# sourceMappingURL=class_registry.d.ts.map