figureone 0.15.10 → 1.0.0

package/types/js/tools/morph.d.ts

@@ -0,0 +1,651 @@
+import type { TypeColor } from './types';
+import { Point } from './g2';
+import type { TypeParsablePoint } from './g2';
+import type { TypeHAlign, TypeVAlign } from '../figure/Equation/EquationForm';
+declare function getPixels(data: Uint8ClampedArray, imageWidth: number, imageHeight: number, filter: (color: TypeColor, position: [number, number]) => boolean): {
+    max: number[];
+    min: number[];
+    pixels: number[][];
+    pixelColors: number[][];
+};
+/**
+ * @property {Image} [image]
+ * @property {number | null} [num] maximum number of shapes to return -
+ * `null` defaults to the number of pixels (or filtered pixels if a filter is
+ * used) (`null`)
+ * @property {'repeatOpaqueOnly' | 'lastOpaque' | 'repeat'} [excess] if
+ * num is greater than the number of pixels, then either `'repeat'` the
+ * shapes from all the pixels again, repeat the shapes from only the opaque
+ * pixels `'repeatOpaqueOnly'` or put all execess shapes on the `'lastOpaque'`
+ * pixel. Note, repeating pixels that are semitransparent will effectively put
+ * multiple pixels on top of each other, reducing the transparency of the pixel
+ * (`'repeatOpaqueOnly'`).
+ * @property {function(TypeColor, [number, number]) => boolean} [filter]
+ * filter function with pixel color and pixel position input parameters. Return
+ * `true` to keep pixel. Pixel position is (0, 0) in top left corner and
+ * (pixelsWidth, pixelsHeight) in the bottom right (`() => true`)
+ * @property {'raster' | 'random'} [distribution] Returned shapes are randomly
+ * distributed throughout shape (`'random'`) or rasterized in order from top
+ * left to bottom right of image (or filtered image) (`random`)
+ * @property {number | null} [width] width to map image pixels to. Width is
+ * between center of most left to most right pixels
+ * @property {number | null} [height] height to map image pixels to. Height is
+ * between center of most bottom to most top pixels
+ * @property {number} [size] shape size to map pixel to. Final points will
+ * have a width of `width + size` center of points are used to determine
+ * `width` and `height`. Default shape is a square, and default size
+ * (if left undefined) is the size needed to make adjacent square shapes
+ * touch
+ * @property {TypeParsablePoint} [position] position to place shapes at
+ * @property {TypeHAlign} [xAlign] align shapes horizontally around `position`
+ * @property {TypeVAlign} [yAlign] align shapes vertically around `position`
+ * @property {'image' | 'filteredImage'} [align] `image` will align the shapes
+ * as if there were no pixels filtered out. `filteredImage` will align to only
+ * the shapes that exist.
+ * @property {number} [dither] Add a random offset to each shape to create a
+ * dither effect
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @property {function(TypeColor, number): Array<number>} [makeColors]
+ * use this function to customze color mapping. The function takes as input the
+ * pixel's color, and the number of vertices that need to be colored. It
+ * outputs an array of colors for each vertex - i.e.:
+ * [r1, b1, g1, a1, r2, g2, b, a2, ...]
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_ImageToShapes = {
+    image: HTMLImageElement;
+    maxPoints?: number | null;
+    xAlign?: TypeHAlign;
+    yAlign?: TypeVAlign;
+    align?: 'image' | 'filteredImage';
+    distribution?: 'raster' | 'random';
+    filter?: 'none' | Array<number>;
+    position?: TypeParsablePoint;
+    dither?: number;
+    width?: number | null;
+    height?: number | null;
+    size?: number;
+    excess?: 'repeatOpaqueOnly' | 'lastOpaque' | 'repeat';
+    makeColors?: (color: TypeColor, num: number) => Array<number>;
+    shape?: number | ((center: Point, size: number) => Array<number>);
+};
+/**
+ * `imageToShapes` maps the pixels of an image to shapes that will be
+ * used to draw those pixels.
+ *
+ * ![](./apiassets/imagetoshapes.gif)
+ *
+ * ![](./apiassets/imagetoshapes1.gif)
+ *
+ * All pixels in an image can be made shapes, or a `filter` function can be used
+ * to only use desired pixels.
+ *
+ * The shapes can be rasterized in order (raster from top left to bottom
+ * right) or be in a random order.
+ *
+ * The image pixel centers are mapped to some `width` and `height` and aligned
+ * to a position relative to either all pixels in the original image, or just
+ * the filtered pixels. The shapes are centered on the pixel centers.
+ *
+ * This method is useful for including images in morphing effects. It should
+ * not be used to simply show an image (use a texture with some
+ * FigureElementPrimitive for this).
+ *
+ * @param {OBJ_ImageToShapes} options
+ * @return {[Array<number>, Array<number>]} [vertices, colors]
+ *
+ * @example
+ * const { imageToShapes, rectangleCloudShapes } = Fig.morph;
+ *
+ * const image = new Image();
+ * image.src = './logo.png';
+ * image.onload = () => {
+ *   const [logo, logoColors] = imageToShapes({
+ *     image,
+ *     width: 0.7,
+ *     height: 0.7,
+ *     filter: c => c[3] > 0,
+ *   });
+ *
+ *   const cloud = rectangleCloudShapes({
+ *     width: 2,
+ *     height: 2,
+ *     num: logo.length / 2 / 6,
+ *   });
+ *
+ *   const m = figure.add({
+ *     make: 'morph',
+ *     points: [cloud, logo],
+ *     color: [logoColors, logoColors],
+ *   });
+ *
+ *   m.animations.new()
+ *     .delay(1)
+ *     .morph({ start: 0, target: 1, duration: 2 })
+ *     .start();
+ * };
+ *
+ * @example
+ * const { imageToShapes } = Fig.morph;
+ *
+ * const micImage = new Image();
+ * micImage.src = './mic.png';
+ * const headphonesImage = new Image();
+ * headphonesImage.src = './headphones.png';
+ *
+ * let index = 0;
+ * const loaded = () => {
+ *   index += 1;
+ *   if (index < 2) {
+ *     return;
+ *   }
+ *
+ *   const [mic, micColors] = imageToShapes({
+ *     image: micImage,
+ *     width: 0.7,
+ *     filter: c => c[3] > 0,
+ *   });
+ *
+ *   const [headphones, headphoneColors] = imageToShapes({
+ *     image: headphonesImage,
+ *     width: 0.7,
+ *     filter: c => c[3] > 0,
+ *     num: mic.length / 6 / 2,
+ *   });
+ *
+ *   const m = figure.add({
+ *     make: 'morph',
+ *     points: [mic, headphones],
+ *     color: [micColors, headphoneColors],
+ *   });
+ *
+ *   m.animations.new()
+ *     .delay(1)
+ *     .morph({ start: 0, target: 1, duration: 2 })
+ *     .start();
+ * };
+ *
+ * micImage.onload = loaded.bind(this);
+ * headphonesImage.onload = loaded.bind(this);
+ * @group Morphing
+ */
+declare function imageToShapes(options: OBJ_ImageToShapes): number[][];
+/**
+ * Options obect for {@link polylineToShapes} that evenly distributes shapes
+ * along a line
+ *
+ * @property {Array<TypeParsablePoint>} points array of points representing a
+ * polyline where each point is a corner in the line
+ * @property {number} num number of shapes to distribute along line
+ * @property {boolean} close `true` closes the polyline
+ * @property {number} size size of shape
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @property {function(number, Point, number, number, number): Array<number>} makeColors
+ * function that creates colors for each vertex of the shape.
+ * Function input parameters are the number of shape vertices to be colored,
+ * the center point coordinate, the previous polyline point index, the
+ * cumulative length from the start of the polyline, and the percentLength from
+ * the start of the polyline. The function must return a single array
+ * containing all vertex colors.
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_PolylineToShapes = {
+    points: Array<TypeParsablePoint>;
+    num?: number;
+    close?: boolean;
+    size?: number;
+    shape?: number | ((center: Point, size: number) => Array<number>);
+    makeColors?: (num: number, center: Point, cumDist: number, percentDist: number, index: number) => Array<number>;
+};
+/**
+ * `polylineToShapes` distributes a number of shapes equally along a polyline.
+ *
+ * ![](./apiassets/polylinetoshapes.gif)
+ *
+ * ![](./apiassets/polylinetoshapes2.gif)
+ *
+ * ![](./apiassets/polylinetoshapes3.gif)
+ *
+ * The polyline is defined by an array of points, where each point is a corner
+ * in the polyline
+ *
+ * The start and ends of the polyline each have a centered shape
+ *
+ * The polyline can be closed or open.
+ *
+ * This method is useful for morphing between shapes.
+ *
+ * @param {OBJ_PolylineToShapes} options
+ * @return {[Array<number>, Array<number>]} [vertices, colors]
+ *
+ * @example
+ * const { polylineToShapes, getPolygonCorners } = Fig.morph;
+ *
+ * const [square] = polylineToShapes({
+ *   points: [[0.5, 0], [0, 0.5], [-0.5, 0], [0, -0.5]],
+ *   num: 50,
+ *   size: 0.03,
+ *   close: true,
+ * });
+ *
+ *
+ * const [circle] = polylineToShapes({
+ *   points: getPolygonCorners({ radius: 0.5, sides: 30 }),
+ *   num: 50,
+ *   size: 0.03,
+ *   close: true,
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [square, circle],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start:0, target: 1, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * const { polylineToShapes, getPolygonCorners } = Fig.morph;
+ *
+ * const [square] = polylineToShapes({
+ *   points: [[-0.5, 0], [0.5, 0]],
+ *   num: 500,
+ *   size: 0.02,
+ *   shape: 'hex',
+ * });
+ *
+ * const [circle] = polylineToShapes({
+ *   points: getPolygonCorners({ radius: 0.5, sides: 6, rotation: Math.PI / 2 }),
+ *   num: 500,
+ *   size: 0.02,
+ *   close: true,
+ *   shape: 'hex',
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [square, circle],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start:0, target: 1, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * const { polylineToShapes, getPolygonCorners } = Fig.morph;
+ *
+ * const [square] = polylineToShapes({
+ *   points: getPolygonCorners({ radius: 0.5, sides: 4, rotation: Math.PI / 4 }),
+ *   num: 500,
+ *   close: true,
+ * });
+ *
+ * const [circle] = polylineToShapes({
+ *   points: getPolygonCorners({ radius: 0.25, sides: 100, rotation: Math.PI / 4 }),
+ *   num: 500,
+ *   close: true,
+ * });
+ *
+ * for (let i = 0; i < 10; i += 1) {
+ *   const m = figure.add({
+ *     make: 'morph',
+ *     points: [square, circle],
+ *     position: [0.2 - i / 30, 0.2 - i / 30],
+ *     color: [1 - i / 10, 0, i / 10, 1],
+ *   });
+ *
+ *   m.animations.new()
+ *     .delay(2 - i / 10)
+ *     .morph({ start: 0, target: 1, duration: 2 })
+ *     .delay(2)
+ *     .morph({ start: 1, target: 0, duration: 2 })
+ *     .start();
+ * }
+ * @group Morphing
+ */
+declare function polylineToShapes(options: OBJ_PolylineToShapes): number[][];
+/**
+ * Options obect for {@link pointsToShapes} that creates a shape at each point
+ *
+ * @property {Array<TypeParsablePoint>} points array of points to create shapes
+ * at
+ * @property {number} size size of shape
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @property {function(number, Point): Array<number>} makeColors
+ * function that creates colors for each vertex of the shape.
+ * Function input parameters are the number of shape vertices to be colored,
+ * and the position of the shape. The function must return a single array
+ * containing all vertex colors.
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_PointsToShapes = {
+    points: Array<TypeParsablePoint>;
+    size?: number;
+    shape?: number | ((center: Point, size: number) => Array<number>);
+    makeColors?: (num: number, center: Point, cumDist: number, percentDist: number, index: number) => Array<number>;
+};
+/**
+ * `pointsToShapes` creates shapes at each point input.
+ *
+ * ![](./apiassets/pointstoshapes.gif)
+ *
+ * This method is useful for morphing between shapes.
+ *
+ * @param {OBJ_PointsToShapes} options
+ * @return {[Array<number>, Array<number>]} [vertices, colors]
+ *
+ * @example
+ * const { pointsToShapes } = Fig.morph;
+ *
+ * const xValues = Fig.range(-0.8, 0.8, 0.001);
+ * const sinc = (xIn, a, b, c) => {
+ *   const x = (xIn + c) === 0 ? 0.00001 : xIn + c;
+ *   return a * Math.sin(b * x) / (b * x);
+ * };
+ *
+ * const [trace1] = pointsToShapes({
+ *   points: xValues.map(x => [x, sinc(x, 0.5, 20, 0)]),
+ *   shape: 'hex',
+ * });
+ *
+ * const [trace2] = pointsToShapes({
+ *   points: xValues.map(x => [x, 0.4 * Math.sin(x * 2 * Math.PI / 0.5)]),
+ *   shape: 'hex',
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [trace1, trace2],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start: 0, target: 1, duration: 2 })
+ *   .start();
+ * @group Morphing
+ */
+declare function pointsToShapes(options: OBJ_PointsToShapes): number[][];
+/**
+ * Options object for `polyline` in morph tools.
+ *
+ * @property {Array<TypeParsablePoint>} points points that define the polyline
+ * @property {number | null} [num] split the polyline into `num` equal
+ * segments. Use `null` or leave undefined to not split the polyline
+ * @property {boolean} [close] `true` to close the polyline
+ * @property {number} [width] width of the polyline
+ * @property {boolean} [simple] `false` fills corners.
+ * @interface
+ * @group Misc Morphing
+ */
+export type OBJ_MorphPolyline = {
+    points: Array<TypeParsablePoint>;
+    num?: number;
+    close?: boolean;
+    width?: number;
+    simple?: boolean;
+};
+/**
+ * Creates triangles to the width of a polyline.
+ *
+ * A polyline is defined by a series of points.
+ *
+ * The polyline can either be converted directly to triangles that create
+ * its width (`num` undefined), or split into `num` equal segments first.
+ *
+ * `simple` polylines are rectangles formed between two points in a polyline
+ * or segmented polyline. When there are bends in the line, gaps will form on
+ * the outside border. These gaps will become more visible as the line gets
+ * thicker.
+ *
+ * When `simple = false`, each corner has an additional two triangles to fill
+ * in the gaps.
+ *
+ * The final number of vertices depends on `simple`, `num` and `close`. Each
+ * line segment as 6 vertices. Each corner fill has 6 vertices. If `num` is
+ * `undefined` or `null` then the total number of line segments will be
+ * `points.length` + 1.
+ *
+ * This method is useful for morphing between lines, but is of limited use. If
+ * the line segments gradient change quadrants, then the line thicknesses will
+ * change during morphing. Especially for thick lines, it will often be better
+ * to use `polylineToShapes`.
+ *
+ * @group Misc Morphing
+ */
+declare function polyline(options: OBJ_MorphPolyline): number[];
+/**
+ * Options object to calculate vertices of a polygon
+ *
+ * @property {number} [radius] radius of polygon (`1`)
+ * @property {number} [sides] number of polygon sides (`4`)
+ * @property {TypeParsablePoint} [position] center position of polygon (`[0, 0]`)
+ * @property {number} [rotation] polygon rotation (first vertex will be along
+ * the positive x axis) (`0`)
+ * @property {1 | -1} [direction] 1 is CCW, -1 is CW (`1`)
+ * @interface
+ * @group Misc Morphing
+ */
+export type OBJ_GetPolygonCorners = {
+    radius?: number;
+    sides?: number;
+    position?: TypeParsablePoint;
+    rotation?: number;
+    direction?: 1 | -1;
+};
+/**
+ * Calculate vertices of a polygon
+ *
+ * @param {OBJ_GetPolygonCorners} options
+ * @return {Array<Point>} Array of vertices
+ * tuples
+ * @group Misc Morphing
+ */
+declare function getPolygonCorners(options: OBJ_GetPolygonCorners): Point[];
+/**
+ * Options object to generate shapes at random positions within a polygon.
+ *
+ * @property {number} [num] number of shapes to generate (`10`)
+ * @property {number} [size] size of each shape (`0.01`)
+ * @property {number} [radius] radius of polygon (`1`)
+ * @property {number} [sides] number of polygon sides (`4`)
+ * @property {TypeParsablePoint} [position] center position of polygon (`[0, 0]`)
+ * @property {number} [rotation] polygon rotation (first vertex will be along
+ * the positive x axis) (`0`)
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_PolygonCloudShapes = {
+    radius?: number;
+    sides?: number;
+    position?: TypeParsablePoint;
+    rotation?: number;
+    num?: number;
+    size?: number;
+    shape?: number | ((center: Point, size: number) => Array<number>);
+};
+/**
+ * Generate random points within a polygon.
+ *
+ * ![](./apiassets/polygoncloudshapes.gif)
+ *
+ * @param {OBJ_PolygonCloudShapes} polygonCloudPoints
+ * @return {Array<number>} array of interlaced x and y coordinates of vertices
+ *
+ * @example
+ * const { polygonCloudShapes } = Fig.morph;
+ *
+ * const cloud1 = polygonCloudShapes({
+ *   num: 2000,
+ *   radius: 0.5,
+ *   sides: 5,
+ * });
+ *
+ * const cloud2 = polygonCloudShapes({
+ *   num: 2000,
+ *   radius: 0.5,
+ *   sides: 100,
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [cloud1, cloud2],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start: 0, target: 1, duration: 2 })
+ *   .start();
+ * @group Morphing
+ */
+declare function polygonCloudShapes(options: OBJ_PolygonCloudShapes): number[];
+/**
+ * Options object to generate shapes at random positions within a circle.
+ *
+ * @property {number} [num] number of shapes to generate (`10`)
+ * @property {number} [pointSize] size of each shape (`0.01`)
+ * @property {number} [radius] radius of circle (`1`)
+ * @property {TypeParsablePoint} [position] center position of circle (`[0, 0]`)
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_CircleCloudShapes = {
+    radius?: number;
+    position?: TypeParsablePoint;
+    num?: number;
+    shape?: ((position: [number, number], size: number) => Array<number>);
+    size?: number;
+};
+/**
+ * Generate random points within a circle.
+ *
+ * ![](./apiassets/circlecloudshapes.gif)
+ *
+ * @param {OBJ_CircleCloudShapes} options
+ * @return {Array<number>} array of interlaced x and y coordinates of vertices
+ *
+ * @example
+ * const { circleCloudShapes } = Fig.morph;
+ *
+ * const cloud1 = circleCloudShapes({
+ *   num: 2000,
+ *   radius: 2,
+ * });
+ *
+ * const cloud2 = circleCloudShapes({
+ *   num: 2000,
+ *   radius: 0.5,
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [cloud1, cloud2],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start: 0, target: 1, duration: 2 })
+ *   .start();
+ * @group Morphing
+ */
+declare function circleCloudShapes(options: OBJ_CircleCloudShapes): number[];
+/**
+ * Options object to generate shapes at random positions within a rectangle.
+ *
+ * @property {number} [maxPoints] number of shapes to generate (`10`)
+ * @property {number} [pointSize] size of each shape (`0.01`)
+ * @property {number} [width] width of rectangle (`1`)
+ * @property {number} [height] height of rectangle (`1`)
+ * @property {TypeParsablePoint} [position] center position of rectangle (`[0, 0]`)
+ * @property {function(Point, number): Array<number> | number} [shape]
+ * By default a square of two triangles is created (six vertices). Use a
+ * `number` to create a regular polygon with `number` sides. Use a custom
+ * function to make a custom shape. The function takes as input the [x, y]
+ * position of the point to build the shape around, and `size`. It outputs an
+ * array of interlaced x and y coordinates of triangle vertices - i.e.:
+ * [x1, y1, x2, y2, x3, y3, ....]
+ * @interface
+ * @group Morphing
+ */
+export type OBJ_RectangleCloudShapes = {
+    width?: number;
+    height?: number;
+    position?: TypeParsablePoint;
+    num?: number;
+    shape?: ((position: [number, number], size: number) => Array<number>);
+    size?: number;
+};
+/**
+ * Generate random points within a rectangle.
+ *
+ * ![](./apiassets/rectanglecloudshapes.gif)
+ *
+ * @param {OBJ_RectangleCloudShapes} options
+ * @return {Array<number>} array of interlaced x and y coordinates of vertices
+ *
+ * @example
+ * const { rectangleCloudShapes } = Fig.morph;
+ *
+ * const cloud1 = rectangleCloudShapes({
+ *   num: 1000,
+ *   width: 0.5,
+ *   height: 0.5,
+ *   position: [-0.5, 0],
+ * });
+ *
+ * const cloud2 = rectangleCloudShapes({
+ *   num: 1000,
+ *   width: 0.7,
+ *   height: 0.7,
+ * });
+ *
+ * const m = figure.add({
+ *   make: 'morph',
+ *   points: [cloud1, cloud2],
+ *   color: [1, 0, 0, 1],
+ * });
+ *
+ * m.animations.new()
+ *   .morph({ start: 0, target: 1, duration: 2 })
+ *   .start();
+ * @group Morphing
+ */
+declare function rectangleCloudShapes(options: OBJ_RectangleCloudShapes): number[];
+export { polyline, pointsToShapes, polylineToShapes, imageToShapes, getPixels, getPolygonCorners, polygonCloudShapes, circleCloudShapes, rectangleCloudShapes, };

package/types/js/tools/styleSheets.d.ts

@@ -0,0 +1,3 @@
+import { getCSSVariables, getDefinedCSSVariables, searchObject } from './getCssVariables';
+import getCSSColors from './getCssColors';
+export { getCSSVariables, getDefinedCSSVariables, searchObject, getCSSColors, };