@shotstack/shotstack-canvas 1.7.2 → 1.8.1

package/dist/entry.web.d.ts

@@ -1,5 +1,6 @@
 import { z } from 'zod';
 import { components } from '@shotstack/schemas';
+export { svgAssetSchema, svgGradientStopSchema, svgLinearGradientFillSchema, svgRadialGradientFillSchema, svgShadowSchema, svgShapeSchema, svgSolidFillSchema, svgStrokeSchema, svgTransformSchema } from '@shotstack/schemas/zod';
 
 declare const CanvasRichTextAssetSchema: z.ZodObject<{
     type: z.ZodLiteral<"rich-text">;
@@ -7,11 +8,11 @@ declare const CanvasRichTextAssetSchema: z.ZodObject<{
     width: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     height: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     font: z.ZodOptional<z.ZodObject<{
-        style: z.ZodOptional<z.ZodEnum<{
-            normal: "normal";
-            italic: "italic";
-            oblique: "oblique";
-        }>>;
+        stroke: z.ZodOptional<z.ZodObject<{
+            width: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+            color: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+            opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        }, z.core.$strip>>;
         family: z.ZodDefault<z.ZodString>;
         size: z.ZodDefault<z.ZodNumber>;
         weight: z.ZodDefault<z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>;
@@ -58,7 +59,7 @@ declare const CanvasRichTextAssetSchema: z.ZodObject<{
         opacity: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strip>>;
     background: z.ZodOptional<z.ZodObject<{
-        borderRadius: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
+        borderRadius: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
         color: z.ZodOptional<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strip>>;
@@ -117,8 +118,146 @@ declare const CanvasRichTextAssetSchema: z.ZodObject<{
     }, z.core.$strip>>>;
 }, z.core.$strict>;
 type CanvasRichTextAsset = z.infer<typeof CanvasRichTextAssetSchema>;
+declare const CanvasSvgAssetSchema: z.ZodObject<{
+    type: z.ZodEnum<{
+        svg: "svg";
+    }>;
+    src: z.ZodOptional<z.ZodString>;
+    shape: z.ZodOptional<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodEnum<{
+            rectangle: "rectangle";
+        }>;
+        width: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        height: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        cornerRadius: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            circle: "circle";
+        }>;
+        radius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            ellipse: "ellipse";
+        }>;
+        radiusX: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        radiusY: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            line: "line";
+        }>;
+        length: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        thickness: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            polygon: "polygon";
+        }>;
+        sides: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        radius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            star: "star";
+        }>;
+        points: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        outerRadius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        innerRadius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            arrow: "arrow";
+        }>;
+        length: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        headWidth: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        headLength: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        shaftWidth: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            heart: "heart";
+        }>;
+        size: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            cross: "cross";
+        }>;
+        width: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        height: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        thickness: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            ring: "ring";
+        }>;
+        outerRadius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+        innerRadius: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            path: "path";
+        }>;
+        d: z.ZodString;
+    }, z.core.$strip>], "type">>;
+    fill: z.ZodOptional<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodEnum<{
+            solid: "solid";
+        }>;
+        color: z.ZodDefault<z.ZodString>;
+        opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            linear: "linear";
+        }>;
+        angle: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        stops: z.ZodArray<z.ZodObject<{
+            offset: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+            color: z.ZodString;
+        }, z.core.$strip>>;
+        opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodEnum<{
+            radial: "radial";
+        }>;
+        stops: z.ZodArray<z.ZodObject<{
+            offset: z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>;
+            color: z.ZodString;
+        }, z.core.$strip>>;
+        opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>], "type">>;
+    stroke: z.ZodOptional<z.ZodObject<{
+        color: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+        width: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        lineCap: z.ZodOptional<z.ZodEnum<{
+            butt: "butt";
+            round: "round";
+            square: "square";
+        }>>;
+        lineJoin: z.ZodOptional<z.ZodEnum<{
+            round: "round";
+            miter: "miter";
+            bevel: "bevel";
+        }>>;
+        dashArray: z.ZodOptional<z.ZodArray<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        dashOffset: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>>;
+    shadow: z.ZodOptional<z.ZodObject<{
+        offsetX: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        offsetY: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        blur: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        color: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+        opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>>;
+    transform: z.ZodOptional<z.ZodObject<{
+        x: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        y: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        rotation: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        scale: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        originX: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+        originY: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    }, z.core.$strip>>;
+    opacity: z.ZodDefault<z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>>;
+    width: z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>;
+    height: z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodCoercedNumber<unknown>>>;
+}, z.core.$strip>;
+type CanvasSvgAsset = z.infer<typeof CanvasSvgAssetSchema>;
 
 type ShotstackRichTextAsset = components["schemas"]["RichTextAsset"];
+type ShotstackSvgAsset = components["schemas"]["SvgAsset"];
 type RGBA = {
     r: number;
     g: number;
@@ -145,6 +284,24 @@ type GradientSpec = {
     }[];
     opacity: number;
 };
+type StrokeSpec = {
+    width: number;
+    color: string;
+    opacity: number;
+    dashArray?: number[];
+    lineCap?: "butt" | "round" | "square";
+    lineJoin?: "miter" | "round" | "bevel";
+};
+type Point2D = {
+    x: number;
+    y: number;
+};
+type BoundingBox = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
 type Glyph = {
     id: number;
     xAdvance: number;
@@ -156,6 +313,7 @@ type Glyph = {
         family: string;
         weight?: string | number;
     };
+    isColorEmoji?: boolean;
 };
 type ShapedLine = {
     glyphs: Glyph[];
@@ -180,12 +338,7 @@ type DrawOp = {
     y: number;
     fill: GradientSpec;
     scale?: number;
-    gradientBBox?: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
+    gradientBBox?: BoundingBox;
     isShadow?: boolean;
 } | {
     op: "StrokePath";
@@ -229,6 +382,54 @@ type DrawOp = {
         opacity: number;
     };
     borderRadius?: number;
+} | {
+    op: "DrawColorEmoji";
+    char: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    fontFamily: string;
+} | {
+    op: "Ellipse";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    fill: GradientSpec;
+    rotation?: number;
+    gradientBBox?: BoundingBox;
+} | {
+    op: "EllipseStroke";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    stroke: StrokeSpec;
+    rotation?: number;
+} | {
+    op: "Polygon";
+    points: Point2D[];
+    fill: GradientSpec;
+    closed?: boolean;
+    gradientBBox?: BoundingBox;
+} | {
+    op: "PolygonStroke";
+    points: Point2D[];
+    stroke: StrokeSpec;
+    closed?: boolean;
+} | {
+    op: "ShapePath";
+    path: string;
+    x: number;
+    y: number;
+    fill: GradientSpec;
+    gradientBBox?: BoundingBox;
+} | {
+    op: "ShapePathStroke";
+    path: string;
+    x: number;
+    y: number;
+    stroke: StrokeSpec;
 };
 type EngineInit = {
     width: number;
@@ -240,7 +441,7 @@ type Renderer = {
     render(ops: DrawOp[]): Promise<void>;
     toPNG?: () => Promise<Buffer>;
 };
-type ValidAsset = CanvasRichTextAsset;
+type ValidAsset = CanvasRichTextAsset | CanvasSvgAsset;
 declare const isShadowFill: (op: DrawOp) => op is Extract<DrawOp, {
     op: "FillPath";
 }> & {
@@ -252,6 +453,199 @@ declare const isGlyphFill: (op: DrawOp) => op is Extract<DrawOp, {
     isShadow?: false;
 };
 
+declare function createWebPainter(canvas: HTMLCanvasElement | OffscreenCanvas): {
+    render(ops: DrawOp[]): Promise<void>;
+};
+
+type ShapeType = "rectangle" | "circle" | "ellipse" | "line" | "triangle" | "polygon" | "star" | "arrow" | "heart" | "cross" | "ring";
+interface RectangleParams {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+}
+interface CircleParams {
+    radius: number;
+}
+interface EllipseParams {
+    radiusX: number;
+    radiusY: number;
+}
+interface LineParams {
+    length: number;
+    thickness: number;
+}
+interface TriangleParams {
+    width: number;
+    height: number;
+}
+interface PolygonParams {
+    sides: number;
+    radius: number;
+}
+interface StarParams {
+    points: number;
+    outerRadius: number;
+    innerRadius: number;
+}
+interface ArrowParams {
+    length: number;
+    headWidth: number;
+    headLength: number;
+    shaftWidth: number;
+}
+interface HeartParams {
+    size: number;
+}
+interface CrossParams {
+    width: number;
+    height: number;
+    thickness: number;
+}
+interface RingParams {
+    outerRadius: number;
+    innerRadius: number;
+}
+type ShapeParams = ({
+    shape: "rectangle";
+} & RectangleParams) | ({
+    shape: "circle";
+} & CircleParams) | ({
+    shape: "ellipse";
+} & EllipseParams) | ({
+    shape: "line";
+} & LineParams) | ({
+    shape: "triangle";
+} & TriangleParams) | ({
+    shape: "polygon";
+} & PolygonParams) | ({
+    shape: "star";
+} & StarParams) | ({
+    shape: "arrow";
+} & ArrowParams) | ({
+    shape: "heart";
+} & HeartParams) | ({
+    shape: "cross";
+} & CrossParams) | ({
+    shape: "ring";
+} & RingParams);
+declare function generateShapePath(params: ShapeParams): string;
+declare function generateRectanglePath(params: RectangleParams): string;
+declare function generateCirclePath(params: CircleParams): string;
+declare function generateEllipsePath(params: EllipseParams): string;
+declare function generateLinePath(params: LineParams): string;
+declare function generateTrianglePath(params: TriangleParams): string;
+declare function generatePolygonPath(params: PolygonParams): string;
+declare function generatePolygonPoints(sides: number, radius: number): Point2D[];
+declare function generateStarPath(params: StarParams): string;
+declare function generateStarPoints(pointCount: number, outerRadius: number, innerRadius: number): Point2D[];
+declare function generateArrowPath(params: ArrowParams): string;
+declare function generateHeartPath(params: HeartParams): string;
+declare function generateCrossPath(params: CrossParams): string;
+declare function generateRingPath(params: RingParams): string;
+declare function pointsToPath(points: Point2D[], closed?: boolean): string;
+declare function reverseWindingOrder(path: string): string;
+declare function computePathBounds(path: string): BoundingBox;
+declare function translatePath(path: string, dx: number, dy: number): string;
+declare function scalePath(path: string, sx: number, sy?: number): string;
+declare function rotatePath(path: string, angleDegrees: number): string;
+declare function centerPath(path: string): string;
+declare function normalizePathToSize(path: string, targetWidth: number, targetHeight: number): string;
+
+type PathCommandType = "M" | "m" | "L" | "l" | "H" | "h" | "V" | "v" | "C" | "c" | "S" | "s" | "Q" | "q" | "T" | "t" | "A" | "a" | "Z" | "z";
+interface MoveToCommand {
+    type: "M";
+    x: number;
+    y: number;
+}
+interface LineToCommand {
+    type: "L";
+    x: number;
+    y: number;
+}
+interface CubicBezierCommand {
+    type: "C";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x: number;
+    y: number;
+}
+interface QuadraticBezierCommand {
+    type: "Q";
+    x1: number;
+    y1: number;
+    x: number;
+    y: number;
+}
+interface ArcCommand {
+    type: "A";
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArcFlag: boolean;
+    sweepFlag: boolean;
+    x: number;
+    y: number;
+}
+interface ClosePathCommand {
+    type: "Z";
+}
+type NormalizedPathCommand = MoveToCommand | LineToCommand | CubicBezierCommand | QuadraticBezierCommand | ClosePathCommand;
+type ParsedPathCommand = MoveToCommand | LineToCommand | CubicBezierCommand | QuadraticBezierCommand | ArcCommand | ClosePathCommand;
+declare function parseSvgPath(pathData: string): ParsedPathCommand[];
+declare function normalizePath(commands: ParsedPathCommand[]): NormalizedPathCommand[];
+declare function commandsToPathString(commands: NormalizedPathCommand[]): string;
+declare function normalizePathString(pathData: string): string;
+declare function arcToCubicBeziers(x1: number, y1: number, rx: number, ry: number, phi: number, largeArc: boolean, sweep: boolean, x2: number, y2: number): CubicBezierCommand[] | LineToCommand[];
+declare function quadraticToCubic(x0: number, y0: number, qx: number, qy: number, x: number, y: number): CubicBezierCommand;
+
+interface SvgImportResult {
+    width: number;
+    height: number;
+    viewBox?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    paths: SvgImportPath[];
+}
+interface SvgImportPath {
+    d: string;
+    fill?: string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    opacity?: number;
+    transform?: string;
+}
+interface ParsedSvgAsset {
+    type: "svg";
+    shape: {
+        type: "path";
+        d: string;
+    };
+    fill?: {
+        type: "solid";
+        color: string;
+        opacity?: number;
+    };
+    stroke?: {
+        color: string;
+        width: number;
+        opacity?: number;
+    };
+    opacity?: number;
+    width?: number;
+    height?: number;
+}
+declare function parseSvgMarkup(svgString: string): SvgImportResult;
+declare function svgToAsset(svgString: string): ParsedSvgAsset | ParsedSvgAsset[];
+declare function svgToSingleAsset(svgString: string): ParsedSvgAsset;
+declare function importSvg(svgString: string): ParsedSvgAsset;
+
 declare function createTextEngine(opts?: {
     width?: number;
     height?: number;
@@ -277,4 +671,4 @@ declare function createTextEngine(opts?: {
     destroy(): void;
 }>;
 
-export { type CanvasRichTextAsset, CanvasRichTextAssetSchema, type DrawOp, type EngineInit, type Glyph, type GradientSpec, type RGBA, type Renderer, type ShapedLine, type ShotstackRichTextAsset, type ValidAsset, createTextEngine, isGlyphFill, isShadowFill };
+export { type ArcCommand, type ArrowParams, type BoundingBox, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CircleParams, type ClosePathCommand, type CrossParams, type CubicBezierCommand, type DrawOp, type EllipseParams, type EngineInit, type Glyph, type GradientSpec, type HeartParams, type LineParams, type LineToCommand, type MoveToCommand, type NormalizedPathCommand, type ParsedPathCommand, type ParsedSvgAsset, type PathCommandType, type Point2D, type PolygonParams, type QuadraticBezierCommand, type RGBA, type RectangleParams, type Renderer, type RingParams, type ShapeParams, type ShapeType, type ShapedLine, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StarParams, type StrokeSpec, type SvgImportPath, type SvgImportResult, type TriangleParams, type ValidAsset, arcToCubicBeziers, centerPath, commandsToPathString, computePathBounds, createTextEngine, createWebPainter, generateArrowPath, generateCirclePath, generateCrossPath, generateEllipsePath, generateHeartPath, generateLinePath, generatePolygonPath, generatePolygonPoints, generateRectanglePath, generateRingPath, generateShapePath, generateStarPath, generateStarPoints, generateTrianglePath, importSvg, isGlyphFill, isShadowFill, normalizePath, normalizePathString, normalizePathToSize, parseSvgMarkup, parseSvgPath, pointsToPath, quadraticToCubic, reverseWindingOrder, rotatePath, scalePath, svgToAsset, svgToSingleAsset, translatePath };