[trianglify]: fix trianglify types

types/trianglify/index.d.ts

@@ -1,42 +1,100 @@
+import { type Color, mix, type Scale } from "chroma-js";
+
+declare function trianglify(opts?: trianglify.Options): trianglify.PatternInterface;
+
 declare namespace trianglify {
+    interface ColorFunctionInput {
+        xPercent: number;
+        yPercent: number;
+        xScale: Scale<Color>;
+        yScale: Scale<Color>;
+        opts: number[][];
+        random?: () => number | undefined;
+    }
+
+    type ColorFunction = (args: ColorFunctionInput) => ReturnType<typeof mix>;
+    type Points = Array<[number, number]>;
+
     interface Options {
         /** Width of pattern */
-        width?: number | undefined;
+        width?: number;
         /** Height of pattern */
-        height?: number | undefined;
+        height?: number;
         /** Size of the cells used to generate a randomized grid */
-        cell_size?: number | undefined;
+        cellSize?: number;
         /** how much to randomize the grid */
-        variance?: number | undefined;
+        variance?: number;
         /** Seed for the RNG */
         seed?: number | string | null | undefined;
         /** X color stops */
-        x_colors?: false | string | string[] | undefined;
+        xColors?: string[];
         /** Y color stops */
-        y_colors?: false | string | string[] | undefined;
+        yColors?: string[];
         /** Color space used for gradient construction & interpolation */
-        color_space?: string | undefined;
+        colorSpace?: "rgb" | "hsl" | "hsv" | "hsi" | "lab" | "oklab" | "lch" | "oklch" | "hcl" | "lrgb" | undefined;
         /** Color function f(x, y) that returns a color specification that is consumable by chroma-js */
-        color_function?: ((x: number, y: number) => string) | null | undefined;
+        colorFunction?: ColorFunction;
         /** Width of stroke. Defaults to 1.51 to fix an issue with canvas antialiasing. */
-        stroke_width?: number | undefined;
-        /** An array of [x,y] coordinates to trianglulate. Defaults to undefined, and points are generated. */
-        points?: number[] | undefined;
+        strokeWidth?: number;
+        /** An array of [x,y] coordinates to triangulate. Defaults to `undefined`, and points are generated. */
+        points?: Points | undefined;
+        /** A boolean value to tell if trianglify should render the triangles or not. Defaults to `true` */
+        fill?: boolean;
+        /** The array of color combinations to pick from when using random for the `xColors` or `yColors`. */
+        palette?: Record<string, string[]> | Color;
     }
 
+    type RequiredOptions = Required<Options>;
+
     interface SVGOptions {
-        includeNamespace: boolean;
+        includeNamespace?: boolean;
+        coordinateDecimals?: number;
     }
 
-    interface Pattern {
-        opts: Options;
-        polys: any;
-        svg(opts?: SVGOptions): SVGElement;
-        canvas(canvas?: HTMLCanvasElement): HTMLCanvasElement;
-        png(): string;
+    interface CanvasOptions {
+        scaling?: "auto" | false;
+        applyCssScaling?: boolean;
     }
-}
 
-declare function Trianglify(opts?: trianglify.Options): trianglify.Pattern;
+    type Polys = Array<{
+        vertexIndices: number[];
+        centroid: {
+            x: number;
+            y: number;
+        };
+        color: Color;
+    }>;
+
+    interface PatternInterface {
+        points: Points;
+        polys: Polys;
+        opts: RequiredOptions;
+        toSVG(element?: SVGElement, opts?: SVGOptions): SVGElement;
+        toCanvas(canvas?: HTMLCanvasElement, opts?: CanvasOptions): HTMLCanvasElement;
+    }
+
+    class Pattern implements PatternInterface {
+        constructor(points: Points, polys: Polys, opts: RequiredOptions);
+        points: Points;
+        polys: Polys;
+        opts: RequiredOptions;
+        toSVG(element?: SVGElement, opts?: SVGOptions): SVGElement;
+        toCanvas(canvas?: HTMLCanvasElement, opts?: CanvasOptions): HTMLCanvasElement;
+    }
+
+    const defaultOptions: RequiredOptions;
+
+    const colorFunctions: {
+        interpolateLinear(n: number): ColorFunction;
+        sparkle(n: number): ColorFunction;
+        shadows(n: number): ColorFunction;
+    };
+
+    const utils: {
+        mix: typeof mix;
+        colorbrewer: Record<string, string[]>;
+    };
+}
 
-export = Trianglify;
+export as namespace trianglify;
+export = trianglify;

types/trianglify/package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/trianglify",
-    "version": "1.2.9999",
+    "version": "4.1.9999",
     "projects": [
         "https://github.com/qrohlf/trianglify"
     ],
@@ -12,6 +12,13 @@
         {
             "name": "Daniel Perez Alvarez",
             "githubUsername": "unindented"
+        },
+        {
+            "name": "Fernando Daciuk",
+            "githubUsername": "fdaciuk"
         }
-    ]
+    ],
+    "dependencies": {
+        "@types/chroma-js": "^2.4.9999"
+    }
 }

types/trianglify/trianglify-tests.ts

@@ -1,18 +1,18 @@
-import Trianglify = require("trianglify");
+import trianglify from "trianglify";
 
-const pattern = Trianglify({
+const pattern = trianglify({
     width: 1920,
     height: 1080,
-    cell_size: 75,
+    cellSize: 75,
     variance: 0.75,
     seed: "someseed",
-    x_colors: ["#2c2541", "#2c2541"],
-    y_colors: ["#6441a4", "#000000"],
-    color_space: "lab",
-    color_function: null,
-    stroke_width: 1.51,
+    xColors: ["#2c2541", "#2c2541"],
+    yColors: ["#6441a4", "#000000"],
+    colorSpace: "lab",
+    strokeWidth: 1.51,
 });
 
-const svg = pattern.svg({ includeNamespace: true });
+const svgVirtual = document.createElement("svg") as unknown as SVGElement;
+const svg = pattern.toSVG(svgVirtual, { includeNamespace: true });
 const result = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" + svg.outerHTML;
 console.log(result);

types/trianglify/tsconfig.json

@@ -9,6 +9,7 @@
         "noImplicitThis": true,
         "strictNullChecks": true,
         "strictFunctionTypes": true,
+        "exactOptionalPropertyTypes": true,
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true