sketchmark 2.0.0 → 2.1.1

package/dist/src/types.d.ts

@@ -1,13 +1,35 @@
-export type PrimitiveType = "rect" | "circle" | "ellipse" | "point" | "line" | "arrow" | "arc" | "curve" | "polyline" | "polygon" | "path" | "text" | "image" | "group";
-export type AdvancedThreeType = "cuboid" | "sphere" | "plane" | "line3d" | "text3d" | "light";
-export type VisualElementType = PrimitiveType | AdvancedThreeType;
+export type KernelElementType = "path" | "text" | "image" | "point" | "group";
+export type VisualElementType = KernelElementType;
 export type Align = "left" | "center" | "right";
 export type VAlign = "top" | "middle" | "bottom";
-export type AnchorName = "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 export type Point2 = [number, number];
-export type Point3 = [number, number, number];
-export type Point = Point2 | Point3;
-export type Endpoint = Point | string;
+export type JsonMotionObject = {
+    [key: string]: JsonMotionValue;
+};
+export type JsonMotionValue = number | string | boolean | null | JsonMotionValue[] | JsonMotionObject;
+export type MotionValue = number | string | Point2 | number[] | string[] | JsonMotionObject;
+export type TimelineTrackValue = MotionValue;
+export type TimelineCurve = {
+    type: "graph";
+    points: Point2[];
+} | {
+    type: "cubicBezier";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+} | {
+    type: "hold";
+};
+export type TimelineKeyframeTuple = [number, TimelineTrackValue];
+export interface TimelineKeyframeObject {
+    time: number;
+    value: TimelineTrackValue;
+    in?: TimelineCurve;
+    out?: TimelineCurve;
+    interpolation?: TimelineCurve;
+}
+export type TimelineKeyframe = TimelineKeyframeTuple | TimelineKeyframeObject;
 export type GradientStop = [number, string] | {
     offset: number;
     color: string;
@@ -34,10 +56,14 @@ export type Paint = string | {
     fit?: ImageFit;
     opacity?: number;
 };
-export type ExportFormat = "svg" | "html" | "png" | "jpg" | "mp4" | "webm" | "pdf" | "pptx";
-export type SequenceTransition = "cut" | "fade" | {
-    type: "cut" | "fade";
-    duration?: number;
+export type ClipShape = {
+    type: "path";
+    d: string;
+};
+export type MaskShape = {
+    type: "path";
+    d: string;
+    opacity?: number;
 };
 export interface VisualCanvas {
     width: number;
@@ -45,16 +71,16 @@ export interface VisualCanvas {
     background?: string;
     duration?: number;
     fps?: number;
-    space?: "2d" | "3d";
-    renderer?: "svg" | "three";
 }
-export interface AnimationValue {
-    from?: number | string;
-    to?: number | string;
-    duration?: number;
-    delay?: number;
+export interface TimelineTrack {
+    keyframes: TimelineKeyframe[];
+    curve?: TimelineCurve;
     ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
-    keyframes?: Array<[number, number | string]>;
+}
+export interface ElementTimeline {
+    start?: number;
+    end?: number;
+    tracks?: Record<string, TimelineTrack>;
 }
 export interface ShadowEffect {
     dx: number;
@@ -71,44 +97,9 @@ export interface VisualEffects {
     hueRotate?: number;
     shadow?: ShadowEffect;
 }
-export type ClipShape = {
-    type: "rect";
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    radius?: number;
-} | {
-    type: "circle";
-    cx: number;
-    cy: number;
-    radius: number;
-} | {
-    type: "path";
-    d: string;
-};
-export type MaskShape = {
-    type: "rect";
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    radius?: number;
-    opacity?: number;
-} | {
-    type: "circle";
-    cx: number;
-    cy: number;
-    radius: number;
-    opacity?: number;
-} | {
-    type: "path";
-    d: string;
-    opacity?: number;
-};
 export interface VisualElementBase {
     id?: string;
-    type: VisualElementType | string;
+    type: KernelElementType | string;
     opacity?: number;
     fill?: Paint;
     stroke?: Paint;
@@ -126,77 +117,16 @@ export interface VisualElementBase {
     scale?: number;
     scaleX?: number;
     scaleY?: number;
-    origin?: AnchorName | Point2;
+    origin?: Point2;
     clip?: ClipShape;
     mask?: MaskShape;
-    animate?: Record<string, AnimationValue>;
-    children?: VisualElement[];
-    metadata?: Record<string, unknown>;
-}
-export interface RectElement extends VisualElementBase {
-    type: "rect";
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    radius?: number;
-}
-export interface CircleElement extends VisualElementBase {
-    type: "circle";
-    cx?: number;
-    cy?: number;
-    radius: number;
-    follow?: string;
-    progress?: number | AnimationValue;
-}
-export interface EllipseElement extends VisualElementBase {
-    type: "ellipse";
-    cx: number;
-    cy: number;
-    rx: number;
-    ry: number;
-}
-export interface PointElement extends VisualElementBase {
-    type: "point";
-    x: number;
-    y: number;
-}
-export interface LineElement extends VisualElementBase {
-    type: "line" | "arrow";
-    from: Endpoint;
-    to: Endpoint;
-    label?: string;
-    labelX?: number;
-    labelY?: number;
-}
-export interface ArcElement extends VisualElementBase {
-    type: "arc";
-    cx: number;
-    cy: number;
-    radius: number;
-    startAngle: number;
-    endAngle: number;
-    counterclockwise?: boolean;
-    closed?: boolean;
-}
-export interface CurveElement extends VisualElementBase {
-    type: "curve";
-    from: Endpoint;
-    to: Endpoint;
-    control1: Point2;
-    control2?: Point2;
-}
-export interface PolylineElement extends VisualElementBase {
-    type: "polyline";
-    points: Point2[];
-}
-export interface PolygonElement extends VisualElementBase {
-    type: "polygon";
-    points: Point2[];
+    timeline?: ElementTimeline;
 }
 export interface PathElement extends VisualElementBase {
     type: "path";
     d: string;
+    x?: number;
+    y?: number;
 }
 export interface TextElement extends VisualElementBase {
     type: "text";
@@ -214,7 +144,6 @@ export interface TextElement extends VisualElementBase {
     letterSpacing?: number;
     maxWidth?: number;
     wrap?: boolean;
-    fit?: boolean;
 }
 export interface ImageElement extends VisualElementBase {
     type: "image";
@@ -233,6 +162,11 @@ export interface ImageElement extends VisualElementBase {
         imageHeight: number;
     };
 }
+export interface PointElement extends VisualElementBase {
+    type: "point";
+    x: number;
+    y: number;
+}
 export interface GroupElement extends VisualElementBase {
     type: "group";
     x: number;
@@ -241,168 +175,16 @@ export interface GroupElement extends VisualElementBase {
     height?: number;
     children: VisualElement[];
 }
-export interface CuboidElement extends VisualElementBase {
-    type: "cuboid";
-    position: Point3;
-    size: Point3;
-}
-export interface SphereElement extends VisualElementBase {
-    type: "sphere";
-    position: Point3;
-    radius: number;
-}
-export interface PlaneElement extends VisualElementBase {
-    type: "plane";
-    position: Point3;
-    size: Point2;
-}
-export interface Line3dElement extends VisualElementBase {
-    type: "line3d";
-    from: Point3 | string;
-    to: Point3 | string;
-}
-export interface Text3dElement extends VisualElementBase {
-    type: "text3d";
-    text: string;
-    position: Point3;
-    fontSize?: number;
-}
-export interface LightElement extends VisualElementBase {
-    type: "light";
-    kind?: "ambient" | "directional" | "point";
-    position?: Point3;
-    intensity?: number;
-}
-export type VisualElement = RectElement | CircleElement | EllipseElement | PointElement | LineElement | ArcElement | CurveElement | PolylineElement | PolygonElement | PathElement | TextElement | ImageElement | GroupElement | CuboidElement | SphereElement | PlaneElement | Line3dElement | Text3dElement | LightElement;
-export type Kernel2dType = "group" | "path" | "text" | "image" | "point";
-export type Kernel3dType = "group3d" | "mesh3d" | "line3d" | "text3d" | "point3d" | "light";
-export type KernelElementType = Kernel2dType | Kernel3dType;
-export interface KernelElementBase extends Omit<VisualElementBase, "type" | "children"> {
-    type: KernelElementType;
-    children?: KernelElement[];
-}
-export interface KernelPathElement extends Omit<PathElement, "type" | "children"> {
-    type: "path";
-}
-export interface KernelTextElement extends Omit<TextElement, "type" | "children"> {
-    type: "text";
-}
-export interface KernelImageElement extends Omit<ImageElement, "type" | "children"> {
-    type: "image";
-}
-export interface KernelPointElement extends Omit<PointElement, "type" | "children"> {
-    type: "point";
-}
-export interface KernelGroupElement extends Omit<GroupElement, "type" | "children"> {
-    type: "group";
-    children: KernelElement[];
-}
-export interface KernelPoint3dElement extends KernelElementBase {
-    type: "point3d";
-    position: Point3;
-}
-export interface KernelMesh3dElement extends KernelElementBase {
-    type: "mesh3d";
-    vertices: Point3[];
-    indices: number[];
-    faces?: number[][];
-    position?: Point3;
-    rotationX?: number;
-    rotationY?: number;
-    rotationZ?: number;
-    scaleZ?: number;
-}
-export interface KernelLine3dElement extends Omit<Line3dElement, "type" | "children"> {
-    type: "line3d";
-}
-export interface KernelText3dElement extends Omit<Text3dElement, "type" | "children"> {
-    type: "text3d";
-}
-export interface KernelLightElement extends Omit<LightElement, "type" | "children"> {
-    type: "light";
-}
-export interface KernelGroup3dElement extends KernelElementBase {
-    type: "group3d";
-    position?: Point3;
-    rotationX?: number;
-    rotationY?: number;
-    rotationZ?: number;
-    scaleZ?: number;
-    children: KernelElement[];
-}
-export type KernelElement = KernelPathElement | KernelTextElement | KernelImageElement | KernelPointElement | KernelGroupElement | KernelPoint3dElement | KernelMesh3dElement | KernelLine3dElement | KernelText3dElement | KernelLightElement | KernelGroup3dElement;
-export interface VisualScene {
-    id?: string;
-    canvas?: Partial<VisualCanvas>;
-    elements: VisualElement[];
-    steps?: VisualDeckStep[];
-}
-export interface VisualSequenceClip {
-    scene: string;
-    duration: number;
-    transition?: SequenceTransition;
-}
-export interface VisualSequence {
-    id: string;
-    clips: VisualSequenceClip[];
-    export?: {
-        format?: ExportFormat;
-        fps?: number;
-    };
-}
-export interface VisualDeckStep {
-    id: string;
-    show?: string[];
-    hide?: string[];
-    duration?: number;
-}
-export type VisualPatchOperation = {
-    op: "add";
-    element: VisualElement;
-    index?: number;
-} | {
-    op: "update";
-    id: string;
-    set: Partial<VisualElement>;
-} | {
-    op: "remove";
-    id: string;
-} | {
-    op: "replace";
-    id: string;
-    element: VisualElement;
-} | {
-    op: "move";
-    id: string;
-    x?: number;
-    y?: number;
-    cx?: number;
-    cy?: number;
-} | {
-    op: "reorder";
-    id: string;
-    index: number;
-};
+export type VisualElement = PathElement | TextElement | ImageElement | PointElement | GroupElement;
+export type KernelElement = VisualElement;
 export interface VisualDocument {
     version: 1;
     canvas: VisualCanvas;
     elements?: VisualElement[];
-    scenes?: Record<string, VisualScene>;
-    sequences?: Record<string, VisualSequence>;
-    imports?: Record<string, string>;
-    assets?: Record<string, string>;
-    exports?: Record<string, {
-        format: ExportFormat;
-        sequence?: string;
-        scene?: string;
-    }>;
 }
 export interface ResolvedVisualDocument extends VisualDocument {
     elements: VisualElement[];
 }
-export interface KernelVisualDocument extends Omit<VisualDocument, "elements" | "scenes" | "sequences"> {
-    elements: KernelElement[];
-}
 export interface ValidationIssue {
     path: string;
     code: string;
@@ -423,17 +205,4 @@ export interface ValidationResult {
 export interface RenderOptions {
     time?: number;
     transparent?: boolean;
-    threeRuntime?: string;
-}
-export interface ExportOptions extends RenderOptions {
-    format?: ExportFormat;
-    scene?: string;
-    sequence?: string;
-}
-export interface VisualSymbol {
-    id: string;
-    type: VisualElementType | string;
-    file?: string;
-    scene?: string;
-    path: string;
 }

package/dist/src/utils.d.ts

@@ -1,11 +1,6 @@
-import type { AnchorName, Point2, TextElement, VisualElement } from "./types";
-export declare const CORE_TYPES: Set<string>;
-export declare const THREE_TYPES: Set<string>;
-export declare const COMPOUND_TYPES: Set<string>;
-export declare const ANCHORS: Set<string>;
+import type { Point2, TextElement, VisualElement } from "./types";
 export declare function isFiniteNumber(value: unknown): value is number;
 export declare function isPoint2(value: unknown): value is Point2;
-export declare function isPoint2Array(value: unknown, minLength: number): value is Point2[];
 export declare function clone<T>(value: T): T;
 export interface Box {
     x: number;
@@ -16,10 +11,6 @@ export interface Box {
 export declare function elementBox(element: VisualElement): Box | undefined;
 export declare function pointsBox(points: Point2[] | undefined): Box | undefined;
 export declare function textLines(element: Pick<TextElement, "text" | "lines">): string[];
-export declare function anchorPoint(box: Box, anchor: AnchorName): Point2;
-export declare function parseReference(ref: string): {
-    id: string;
-    anchor: AnchorName;
-};
 export declare function flattenElements(elements: VisualElement[]): VisualElement[];
 export declare function easing(name: string | undefined, t: number): number;
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/src/utils.js

@@ -1,36 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ANCHORS = exports.COMPOUND_TYPES = exports.THREE_TYPES = exports.CORE_TYPES = void 0;
 exports.isFiniteNumber = isFiniteNumber;
 exports.isPoint2 = isPoint2;
-exports.isPoint2Array = isPoint2Array;
 exports.clone = clone;
 exports.elementBox = elementBox;
 exports.pointsBox = pointsBox;
 exports.textLines = textLines;
-exports.anchorPoint = anchorPoint;
-exports.parseReference = parseReference;
 exports.flattenElements = flattenElements;
 exports.easing = easing;
-exports.CORE_TYPES = new Set(["rect", "circle", "ellipse", "point", "line", "arrow", "arc", "curve", "polyline", "polygon", "path", "text", "image", "group"]);
-exports.THREE_TYPES = new Set(["cuboid", "sphere", "plane", "line3d", "text3d", "light"]);
-exports.COMPOUND_TYPES = new Set(["node", "flow", "packet", "callout", "row", "column", "grid"]);
-exports.ANCHORS = new Set(["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"]);
+exports.clamp = clamp;
+const path_sampling_1 = require("./path-sampling");
 function isFiniteNumber(value) {
     return typeof value === "number" && Number.isFinite(value);
 }
 function isPoint2(value) {
-    return Array.isArray(value) && value.length >= 2 && isFiniteNumber(value[0]) && isFiniteNumber(value[1]);
-}
-function isPoint2Array(value, minLength) {
-    return Array.isArray(value) && value.length >= minLength && value.every((point) => isPoint2(point));
+    return Array.isArray(value) && value.length === 2 && isFiniteNumber(value[0]) && isFiniteNumber(value[1]);
 }
 function clone(value) {
+    if (value === undefined)
+        return value;
     return JSON.parse(JSON.stringify(value));
 }
 function elementBox(element) {
     switch (element.type) {
-        case "rect":
         case "image":
         case "group":
             if (isFiniteNumber(element.x) && isFiniteNumber(element.y) && isFiniteNumber(element.width) && isFiniteNumber(element.height)) {
@@ -51,32 +43,9 @@ function elementBox(element) {
             return { x, y, width, height };
         }
         case "point":
-            if (isFiniteNumber(element.x) && isFiniteNumber(element.y)) {
-                return { x: element.x, y: element.y, width: 0, height: 0 };
-            }
-            return undefined;
-        case "circle":
-            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.radius)) {
-                return { x: element.cx - element.radius, y: element.cy - element.radius, width: element.radius * 2, height: element.radius * 2 };
-            }
-            return undefined;
-        case "ellipse":
-            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.rx) && isFiniteNumber(element.ry)) {
-                return { x: element.cx - element.rx, y: element.cy - element.ry, width: element.rx * 2, height: element.ry * 2 };
-            }
-            return undefined;
-        case "arc":
-            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.radius)) {
-                return { x: element.cx - element.radius, y: element.cy - element.radius, width: element.radius * 2, height: element.radius * 2 };
-            }
-            return undefined;
-        case "curve": {
-            const points = [element.from, element.control1, element.control2, element.to].filter(isPoint2);
-            return pointsBox(points);
-        }
-        case "polyline":
-        case "polygon":
-            return pointsBox(element.points);
+            return isFiniteNumber(element.x) && isFiniteNumber(element.y) ? { x: element.x, y: element.y, width: 0, height: 0 } : undefined;
+        case "path":
+            return typeof element.d === "string" ? pointsBox((0, path_sampling_1.samplePath)(element.d)) : undefined;
         default:
             return undefined;
     }
@@ -103,46 +72,17 @@ function textLines(element) {
         return element.lines.map((line) => String(line));
     return String(element.text ?? "").split(/\r?\n/);
 }
-function anchorPoint(box, anchor) {
-    switch (anchor) {
-        case "left":
-            return [box.x, box.y + box.height / 2];
-        case "right":
-            return [box.x + box.width, box.y + box.height / 2];
-        case "top":
-            return [box.x + box.width / 2, box.y];
-        case "bottom":
-            return [box.x + box.width / 2, box.y + box.height];
-        case "top-left":
-            return [box.x, box.y];
-        case "top-right":
-            return [box.x + box.width, box.y];
-        case "bottom-left":
-            return [box.x, box.y + box.height];
-        case "bottom-right":
-            return [box.x + box.width, box.y + box.height];
-        case "center":
-        default:
-            return [box.x + box.width / 2, box.y + box.height / 2];
-    }
-}
-function parseReference(ref) {
-    const [id, rawAnchor] = ref.split(".");
-    const anchor = (rawAnchor || "center");
-    return { id: id || "", anchor: exports.ANCHORS.has(anchor) ? anchor : "center" };
-}
 function flattenElements(elements) {
     const out = [];
     for (const element of elements) {
         out.push(element);
-        if (element.type === "group" && Array.isArray(element.children)) {
+        if (element.type === "group" && Array.isArray(element.children))
             out.push(...flattenElements(element.children));
-        }
     }
     return out;
 }
 function easing(name, t) {
-    const x = Math.max(0, Math.min(1, t));
+    const x = clamp(t, 0, 1);
     switch (name) {
         case "ease-in":
             return x * x;
@@ -155,3 +95,6 @@ function easing(name, t) {
             return x;
     }
 }
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}