ixfx
Version:
Bundle of ixfx libraries
1,676 lines (1,675 loc) • 92 kB
TypeScript
import { r as RecursivePartial } from "./ts-utility-01VlmgFR.js";
import { v as IStackImmutable } from "./index-CvH8hp8B.js";
import { n as SimpleEventEmitter } from "./index-DzASKzet.js";
import { P as ElementResizeLogic } from "./index-GCS2DCQ7.js";
import { Ct as GridCellSetter, Ft as GridWritable, I as Angle, Jt as PolarRay, Lt as UniformGrid, Mt as GridReadable, N as ArcPositioned, S as CubicBezier, St as GridCellAndValue, bn as Point, bt as GridCell, fn as Rect, gn as RectPositioned, h as EllipsePositioned, ht as Grid, k as Path, ln as CirclePositioned, o as ScaleBy, on as Line, s as Scaler, tn as Triangle, w as QuadraticBezier, xt as GridCellAccessor } from "./index-CWMm4bvc.js";
import { z as RandomSource } from "./index-BtKPbZx1.js";
import { rt as NumberScaler } from "./index-Cw7xYDWk.js";
//#region ../packages/visual/src/drawing.d.ts
declare namespace drawing_d_exports {
export { CanvasContextQuery, ConnectedPointsOptions, DotOpts, DrawingOpts$1 as DrawingOpts, DrawingStack, HorizAlign, LineOpts, RectOpts, StackOp, VertAlign, arc, bezier, circle$1 as circle, connectedPoints, copyToImg, dot, drawingStack, ellipse, getContext, line$1 as line, lineThroughPoints, makeHelper$1 as makeHelper, paths, pointLabels, polarRay, rect, textBlock, textBlockAligned, textHeight, textRect, textWidth, translatePoint, triangle };
}
type CanvasContextQuery = null | string | CanvasRenderingContext2D | HTMLCanvasElement;
/**
* Gets a 2d drawing context from canvas element or query, or throws an error
* @param canvasElementContextOrQuery Canvas element reference or DOM query
* @returns Drawing context.
*/
declare const getContext: (canvasElementContextOrQuery: CanvasContextQuery) => CanvasRenderingContext2D;
/**
* Makes a helper object that wraps together a bunch of drawing functions that all use the same drawing context
* @param ctxOrCanvasEl Drawing context or canvs element reference
* @param canvasBounds Bounds of drawing (optional). Used for limiting `textBlock`
* @returns
*/
declare const makeHelper$1: (ctxOrCanvasEl: CanvasContextQuery, canvasBounds?: Rect) => {
ctx: CanvasRenderingContext2D;
paths(pathsToDraw: Path[] | readonly Path[], opts?: DrawingOpts$1): void;
polarRay(rayToDraw: PolarRay | PolarRay[] | readonly PolarRay[], opts?: DrawingOpts$1): void;
line(lineToDraw: Line | Line[] | readonly Line[], opts?: DrawingOpts$1): void;
rect(rectsToDraw: Rect | Rect[] | RectPositioned | RectPositioned[], opts?: RectOpts): void;
bezier(bezierToDraw: QuadraticBezier | CubicBezier, opts?: DrawingOpts$1): void;
connectedPoints(pointsToDraw: Point[] | readonly Point[], opts?: DrawingOpts$1 & Partial<ConnectedPointsOptions>): void;
pointLabels(pointsToDraw: Point[], opts?: DrawingOpts$1): void;
dot(dotPosition: Point | Point[], opts?: DotOpts): void;
circle(circlesToDraw: CirclePositioned | CirclePositioned[], opts: DrawingOpts$1): void;
arc(arcsToDraw: ArcPositioned | ArcPositioned[], opts: DrawingOpts$1): void;
textBlock(lines: string[], opts: DrawingOpts$1 & {
anchor: Point;
anchorPadding?: number;
bounds?: RectPositioned;
}): void;
};
/**
* Drawing options
*/
type DrawingOpts$1 = {
/**
* Stroke style
*/
readonly strokeStyle?: string;
/**
* Fill style
*/
readonly fillStyle?: string;
/**
* If true, diagnostic helpers will be drawn
*/
readonly debug?: boolean;
};
type LineOpts = {
readonly lineWidth?: number;
readonly lineCap?: CanvasLineCap;
readonly lineJoin?: CanvasLineJoin;
};
/**
* Draws one or more arcs.
* @param ctx
* @param arcs
* @param opts
*/
declare const arc: (ctx: CanvasRenderingContext2D, arcs: ArcPositioned | readonly ArcPositioned[], opts?: DrawingOpts$1) => void;
/**
* A drawing stack operation
*/
type StackOp = (ctx: CanvasRenderingContext2D) => void;
/**
* A drawing stack (immutable)
*/
type DrawingStack = {
/**
* Push a new drawing op
* @param ops Operation to add
* @returns stack with added op
*/
push(...ops: readonly StackOp[]): DrawingStack;
/**
* Pops an operatiomn
* @returns Drawing stack with item popped
*/
pop(): DrawingStack;
/**
* Applies drawing stack
*/
apply(): DrawingStack;
};
/**
* Creates and returns an immutable drawing stack for a context
* @param ctx Context
* @param stk Initial stack operations
* @returns
*/
declare const drawingStack: (ctx: CanvasRenderingContext2D, stk?: IStackImmutable<StackOp>) => DrawingStack;
/**
* Draws a curved line through a set of points
* @param ctx
* @param points
* @param opts
*/
declare const lineThroughPoints: (ctx: CanvasRenderingContext2D, points: readonly Point[], opts?: DrawingOpts$1) => void;
/**
* Draws one or more circles. Will draw outline/fill depending on
* whether `strokeStyle` or `fillStyle` params are present in the drawing options.
*
* ```js
* // Draw a circle with radius of 10 at 0,0
* circle(ctx, {radius:10});
*
* // Draw a circle of radius 10 at 100,100
* circle(ctx, {radius: 10, x: 100, y: 100});
*
* // Draw two blue outlined circles
* circle(ctx, [ {radius: 5}, {radius: 10} ], {strokeStyle:`blue`});
* ```
* @param ctx Drawing context
* @param circlesToDraw Circle(s) to draw
* @param opts Drawing options
*/
declare const circle$1: (ctx: CanvasRenderingContext2D, circlesToDraw: CirclePositioned | readonly CirclePositioned[], opts?: DrawingOpts$1) => void;
/**
* Draws one or more ellipses. Will draw outline/fill depending on
* whether `strokeStyle` or `fillStyle` params are present in the drawing options.
* @param ctx
* @param ellipsesToDraw
* @param opts
*/
declare const ellipse: (ctx: CanvasRenderingContext2D, ellipsesToDraw: EllipsePositioned | EllipsePositioned[] | readonly EllipsePositioned[], opts?: DrawingOpts$1) => void;
/**
* Draws one or more paths.
* supported paths are quadratic beziers and lines.
* @param ctx
* @param pathsToDraw
* @param opts
*/
declare const paths: (ctx: CanvasRenderingContext2D, pathsToDraw: readonly Path[] | Path | Path[], opts?: {
readonly strokeStyle?: string;
readonly debug?: boolean;
}) => void;
type ConnectedPointsOptions = {
readonly lineWidth: number;
readonly loop: boolean;
readonly fillStyle: string;
readonly strokeStyle: string;
};
/**
* Draws a line between all the given points.
* If a fillStyle is specified, it will be filled.
*
* See also:
* * {@link line}: Draw one or more lines
*
* @param ctx
* @param pts
*/
declare const connectedPoints: (ctx: CanvasRenderingContext2D, pts: readonly Point[], opts?: Partial<ConnectedPointsOptions>) => void;
/**
* Draws labels for a set of points
* @param ctx
* @param pts Points to draw
* @param opts
* @param labels Labels for points
*/
declare const pointLabels: (ctx: CanvasRenderingContext2D, pts: readonly Point[], opts?: {
readonly fillStyle?: string;
}, labels?: readonly string[]) => void;
/**
* Returns `point` with the canvas's translation matrix applied
* @param ctx
* @param point
* @returns
*/
declare const translatePoint: (ctx: CanvasRenderingContext2D, point: Point) => Point;
/**
* Creates a new HTML IMG element with a snapshot of the
* canvas. Element will need to be inserted into the document.
*
* ```
* const myCanvas = document.getElementById('someCanvas');
* const el = copyToImg(myCanvas);
* document.getElementById('images').appendChild(el);
* ```
* @param canvasEl
* @returns
*/
declare const copyToImg: (canvasEl: HTMLCanvasElement) => HTMLImageElement;
type DotOpts = DrawingOpts$1 & {
readonly radius?: number;
readonly stroke?: boolean;
readonly filled?: boolean;
readonly strokeWidth?: number;
};
/**
* Draws filled circle(s) at provided point(s)
* @param ctx
* @param pos
* @param opts
*/
declare const dot: (ctx: CanvasRenderingContext2D, pos: Point | (Point | CirclePositioned)[] | CirclePositioned, opts?: DotOpts) => void;
/**
* Draws a cubic or quadratic bezier
* @param ctx
* @param bezierToDraw
* @param opts
*/
declare const bezier: (ctx: CanvasRenderingContext2D, bezierToDraw: QuadraticBezier | CubicBezier, opts?: DrawingOpts$1) => void;
/**
* Draws one or more polar rays.
*
* Each ray is drawn independently, ie it's not assumed rays are connected.
*
* See also:
* * {@link connectedPoints}: Draw a series of connected points
* @param ctx
* @param toDraw
* @param opts
*/
declare const polarRay: (ctx: CanvasRenderingContext2D, toDraw: PolarRay | readonly PolarRay[] | PolarRay[], opts?: LineOpts & DrawingOpts$1) => void;
/**
* Draws one or more lines.
*
* Each line is drawn independently, ie it's not assumed lines are connected.
*
* See also:
* * {@link connectedPoints}: Draw a series of connected points
* @param ctx
* @param toDraw
* @param opts
*/
declare const line$1: (ctx: CanvasRenderingContext2D, toDraw: Line | readonly Line[] | Line[], opts?: LineOpts & DrawingOpts$1) => void;
/**
* Draws one or more triangles
* @param ctx
* @param toDraw
* @param opts
*/
declare const triangle: (ctx: CanvasRenderingContext2D, toDraw: Triangle | readonly Triangle[] | Triangle[], opts?: DrawingOpts$1 & {
readonly filled?: boolean;
}) => void;
type RectOpts = DrawingOpts$1 & Readonly<Partial<{
stroke: boolean;
filled: boolean;
strokeWidth: number;
/**
* If true, diagonals are drawn
*/
crossed: boolean;
}>>;
/**
* Draws one or more rectangles.
*
* @param ctx
* @param toDraw
* @param opts
*/
declare const rect: (ctx: CanvasRenderingContext2D, toDraw: Rect | Rect[] | RectPositioned | RectPositioned[], opts?: RectOpts) => void;
/**
* Returns the width of `text`. Rounds number up to nearest multiple if provided. If
* text is empty or undefined, 0 is returned.
* @param ctx
* @param text
* @param widthMultiple
* @returns
*/
declare const textWidth: (ctx: CanvasRenderingContext2D, text?: string | null, padding?: number, widthMultiple?: number) => number;
declare const textRect: (ctx: CanvasRenderingContext2D, text?: string | null, padding?: number, widthMultiple?: number) => Rect;
declare const textHeight: (ctx: CanvasRenderingContext2D, text?: string | null, padding?: number) => number;
/**
* Draws a block of text. Each array item is considered a line.
* @param ctx
* @param lines
* @param opts
*/
declare const textBlock: (ctx: CanvasRenderingContext2D, lines: readonly string[], opts: DrawingOpts$1 & {
readonly anchor: Point;
readonly align?: `top` | `center`;
readonly anchorPadding?: number;
readonly bounds?: RectPositioned;
}) => void;
type HorizAlign = `left` | `right` | `center`;
type VertAlign = `top` | `center` | `bottom`;
/**
* Draws an aligned text block
*/
declare const textBlockAligned: (ctx: CanvasRenderingContext2D, text: readonly string[] | string, opts: DrawingOpts$1 & {
readonly bounds: RectPositioned;
readonly horiz?: HorizAlign;
readonly vert?: VertAlign;
}) => void;
//#endregion
//#region ../packages/visual/src/colour/types.d.ts
type HslBase = {
/**
* Hue
*/
h: number;
/**
* Saturation
*/
s: number;
/**
* Lightness
*/
l: number;
/**
* Opacity
*/
opacity?: number;
space?: `hsl`;
};
/**
* [YCbCr format](https://en.wikipedia.org/wiki/YCbCr)
*/
type YCbCrBase = {
/**
* Luma
*/
y: number;
/**
* Blue difference
*/
cb: number;
/**
* Red difference
*/
cr: number;
/**
* Opacity
*/
opacity?: number;
space?: `ycbcr`;
};
/**
* Scalar values use 0..1 for each field
*/
type YCbCrScalar = YCbCrBase & {
unit: `scalar`;
};
/**
* Absolute colour use 0..255 for each field
*/
type YCbCr8bit = YCbCrBase & {
unit: `8bit`;
};
/**
* [YCbCr format](https://en.wikipedia.org/wiki/YCbCr).
*
* By default assumes scalar coordinates (0..1) for each field.
* Use '8bit' unit for 0..255 ranged values.
*/
type YCbCr = YCbCrScalar | YCbCr8bit;
type ColourSpaces = `srgb` | `hsl` | `oklch` | `ycbcr`;
/**
* Scalar values use 0..1 for each field
*/
type HslScalar = HslBase & {
unit: `scalar`;
};
/**
* Absolute values use hue:0..360, all other fields 0..100
*/
type HslAbsolute = HslBase & {
unit: `absolute`;
};
/**
* HSL value.
* By default assumes scalar coordinates (0..1) for each field.
* Use 'absolute' unit for hue:0...360, all other fields on 0..100 scale.
*/
type Hsl = HslScalar | HslAbsolute;
/**
* Rgb.
* Units determine how to interperet rgb values.
* 'scalar': 0..1 range for RGB & opacity
* '8bit': 0..255 range for RGB & opacity
*/
type RgbBase = {
r: number;
g: number;
b: number;
opacity?: number;
space?: `srgb`;
};
type RgbScalar = RgbBase & {
unit: `scalar`;
};
/**
* RGB in 0...255 range, including opacity.
*/
type Rgb8Bit = RgbBase & {
unit: `8bit`;
};
/**
* Rgb.
* Units determine how to interperet rgb values.
* 'scalar': 0..1 range for RGB & opacity
* '8bit': 0..255 range for RGB & opacity
*/
type Rgb = RgbScalar | Rgb8Bit;
type LchBase = {
/**
* Lightness/perceived brightnes
*/
l: number;
/**
* Chroma ('amount of colour')
*/
c: number;
/**
* Hue
*/
h: number;
/**
* Opacity on 0..1 scale
*/
opacity?: number;
space: `lch` | `oklch`;
};
type ColourInterpolator<T extends Colour> = (amount: number) => T;
type OkLchBase = LchBase & {
space: `oklch`;
};
/**
* Oklch colour expressed in 0..1 scalar values for LCH & opacity
*/
type OkLchScalar = OkLchBase & {
unit: `scalar`;
};
/**
* Oklch colour expressed with:
* l: 0..1
* c: 0..4
* h: 0..360 degrees
* opacity: 0..1
*/
type OkLchAbsolute = OkLchBase & {
unit: `absolute`;
};
type OkLch = OkLchAbsolute | OkLchScalar;
type Colour = {
opacity?: number;
} & (Hsl | OkLch | Rgb | YCbCr);
/**
* A representation of colour. Eg: `blue`, `rgb(255,0,0)`, `hsl(20,100%,50%)`
*/
type Colourish = Colour | string;
/**
* Options for interpolation
*/
type ColourInterpolationOpts = {
direction: `longer` | `shorter`;
/**
* Space to do calculations in
*/
space: ColourSpaces;
/**
* Destination of calculated colour
*/
destination: ConvertDestinations;
};
type ColourStepOpts = ColourInterpolationOpts & {
/**
* If set, determines total number of steps, including colour stops.
* Use this _or_ `stepsBetween`.
*/
stepsTotal?: number;
/**
* If set, determines number of steps between colour stops.
* Use this _or_ `stepsTotal`.
*/
stepsBetween?: number;
};
type ParsingOptions<T> = Partial<{
scalar: boolean;
ensureSafe: boolean;
/**
* Value to use if input is invalid
*/
fallbackString: string;
/**
* Fallback colour to use if value cannot be parsed
*/
fallbackColour: T;
}>;
type ConvertDestinations = `hsl-scalar` | `hsl-absolute` | `oklch-scalar` | `oklch-absolute` | `srgb-8bit` | `srgb-scalar` | `ycbcr-scalar` | `ycbcr-8bit`;
//#endregion
//#region ../packages/visual/src/canvas-helper.d.ts
type CanvasEvents = {
/**
* Fired when canvas is resized
*/
resize: {
size: Rect;
helper: CanvasHelper;
ctx: CanvasRenderingContext2D;
};
resized: {
size: Rect;
helper: CanvasHelper;
ctx: CanvasRenderingContext2D;
};
/**
* Pointerdown.
*
* Adds logicalX/Y to get logical pixel coordinate
*/
pointerdown: PointerEvent & {
physicalX: number;
physicalY: number;
};
/**
* Pointerup.
*
* Adds logicalX/Y to get logical pixel coordinate
*/
pointerup: PointerEvent & {
physicalX: number;
physicalY: number;
};
/**
* Pointermove
*
* Adds logicalX/Y to get logical pixel coordinate
*/
pointermove: PointerEvent & {
physicalX: number;
physicalY: number;
};
};
/**
* CanvasHelper options
*/
type CanvasHelperOptions = Readonly<{
containerEl?: HTMLElement;
/**
* Automatic canvas resizing logic.
*/
resizeLogic?: ElementResizeLogic;
/**
* By default, the helper emits pointer events from the canvas.
* Set this to _true_ to disable.
*/
disablePointerEvents: boolean;
/**
* By default the display DPI is used for scaling.
* If this is set, this will override.
*/
pixelZoom: number;
/**
* If _true_ (default) canvas is cleared when a resize happens
*/
clearOnResize: boolean;
/**
* If true, it won't add any position CSS
*/
skipCss: boolean;
coordinateScale: ScaleBy;
/**
* Callback when canvas is resized
* @param size
* @returns
*/
onResizing?: (ctx: CanvasRenderingContext2D, size: Rect, helper: CanvasHelper) => void;
onResized?: (ctx: CanvasRenderingContext2D, size: Rect, helper: CanvasHelper) => void;
/**
* Logical width of canvas.
* This is used for establishing the desired aspect ratio.
*/
width: number;
/**
* Logical height of canvas.
* This is used for establishing the desired aspect ratio.
*/
height: number;
/**
* If set, the z-index for this canvas.
* By default, fullscreen canvas will be given -1
*/
zIndex: number;
/**
* Colour space to use. Defaults to sRGB.
*/
colourSpace: PredefinedColorSpace;
/**
* If specified, this function be called in an animation loop.
* @param ctx Drawing context
* @param size Viewport size
* @param helper CanvasHelper instance
* @returns
*/
draw?: (ctx: CanvasRenderingContext2D, size: Rect, helper: CanvasHelper) => void;
}>;
/**
* A wrapper for the CANVAS element that scales the canvas for high-DPI displays
* and helps with resizing.
*
* ```js
* const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both` });
* const { ctx, width, height } = canvas.ctx; // Get drawing context, width & height
* ```
*
* Draw whenever it is resized using the 'resize' event
* ```js
* canvas.addEventListener(`resize`, ({ctx, size}) => {
* // Use ctx...
* });
* ```
*
* Or provide a function when initialising:
* ```js
* const onResize = (ctx, size) => {
* // Do drawing
* }
* const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both`, onResize });
* ```
*
* Automatically draw at animation speeds:
* ```js
* const draw = () => {
* }
* const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both`, draw });
* ```
*/
declare class CanvasHelper extends SimpleEventEmitter<CanvasEvents> {
#private;
readonly el: HTMLCanvasElement;
readonly opts: CanvasHelperOptions;
constructor(domQueryOrEl: Readonly<string | HTMLCanvasElement | undefined | null>, opts?: Partial<CanvasHelperOptions>);
getRectangle(): RectPositioned;
dispose(reason?: string): void;
/**
* Gets the drawable area of the canvas.
* This accounts for scaling due to high-DPI displays etc.
* @returns
*/
getPhysicalSize(): {
width: number;
height: number;
};
/**
* Creates a drawing helper for the canvas.
* If one is already created it is reused.
*/
getDrawHelper(): {
ctx: CanvasRenderingContext2D;
paths(pathsToDraw: Path[] | readonly Path[], opts?: DrawingOpts$1): void;
polarRay(rayToDraw: PolarRay | PolarRay[] | readonly PolarRay[], opts?: DrawingOpts$1): void;
line(lineToDraw: Line | Line[] | readonly Line[], opts?: DrawingOpts$1): void;
rect(rectsToDraw: Rect | Rect[] | RectPositioned | RectPositioned[], opts?: RectOpts): void;
bezier(bezierToDraw: QuadraticBezier | CubicBezier, opts?: DrawingOpts$1): void;
connectedPoints(pointsToDraw: Point[] | readonly Point[], opts?: DrawingOpts$1 & Partial<ConnectedPointsOptions>): void;
pointLabels(pointsToDraw: Point[], opts?: DrawingOpts$1): void;
dot(dotPosition: Point | Point[], opts?: DotOpts): void;
circle(circlesToDraw: CirclePositioned | CirclePositioned[], opts: DrawingOpts$1): void;
arc(arcsToDraw: ArcPositioned | ArcPositioned[], opts: DrawingOpts$1): void;
textBlock(lines: string[], opts: DrawingOpts$1 & {
anchor: Point;
anchorPadding?: number;
bounds?: RectPositioned;
}): void;
};
setLogicalSize(logicalSize: Rect): void;
/**
* Clears the canvas.
*
* Shortcut for:
* `ctx.clearRect(0, 0, this.width, this.height)`
*/
clear(): void;
/**
* Fills the canvas with a given colour.
*
* Shortcut for:
* ```js
* ctx.fillStyle = ``;
* ctx.fillRect(0, 0, this.width, this.height);
* ```
* @param colour Colour
*/
fill(colour?: string): void;
/**
* Gets the drawing context
*/
get ctx(): CanvasRenderingContext2D;
get viewport(): RectPositioned;
/**
* Gets the logical width of the canvas
* See also: {@link height}, {@link size}
*/
get width(): number;
/**
* Gets the logical height of the canvas
* See also: {@link width}, {@link size}
*/
get height(): number;
/**
* Gets the logical size of the canvas
* See also: {@link width}, {@link height}
*/
get size(): Rect;
/**
* Gets the current scaling ratio being used
* to compensate for high-DPI display
*/
get ratio(): number;
/**
* Returns the width or height, whichever is smallest
*/
get dimensionMin(): number;
/**
* Returns the width or height, whichever is largest
*/
get dimensionMax(): number;
drawBounds(strokeStyle?: string): void;
/**
* Returns a Scaler that converts from absolute
* to relative coordinates.
* This is based on the canvas size.
*
* ```js
* // Assuming a canvas of 800x500
* toRelative({ x: 800, y: 600 }); // { x: 1, y: 1 }
* toRelative({ x: 0, y: 0 }); // { x: 0, y: 0 }
* toRelative({ x: 400, y: 300 }); // { x: 0.5, y: 0.5 }
* ```
*/
get toRelative(): Scaler;
/**
* Returns a scaler for points based on width & height
*/
get toAbsoluteFixed(): Scaler;
/**
* Returns a scaler for points based on width & height
*/
get toRelativeFixed(): Scaler;
get logicalCenter(): {
x: number;
y: number;
};
/**
* Returns a Scaler that converts from relative to absolute
* coordinates.
* This is based on the canvas size.
*
* ```js
* // Assuming a canvas of 800x600
* toAbsolute({ x: 1, y: 1 }); // { x: 800, y: 600}
* toAbsolute({ x: 0, y: 0 }); // { x: 0, y: 0}
* toAbsolute({ x: 0.5, y: 0.5 }); // { x: 400, y: 300}
* ```
*/
get toAbsolute(): Scaler;
/**
* Gets the center coordinate of the canvas
*/
get center(): {
x: number;
y: number;
};
/**
* Gets the image data for the canvas.
* Uses the 'physical' canvas size. Eg. A logical size of 400x400 might be
* 536x536 with a high-DPI display.
* @returns
*/
getImageData(): ImageData;
/**
* Returns the canvas frame data as a writable grid.
* When editing, make as many edits as needed before calling
* `flip`, which writes buffer back to the canvas.
* ```js
* const g = helper.getWritableBuffer();
* // Get {r,g,b,opacity} of pixel 10,10
* const pixel = g.get({ x: 10, y: 10 });
*
* // Set a colour to pixel 10,10
* g.set({ r: 0.5, g: 1, b: 0, opacity: 0 }, { x: 10, y: 10 });
*
* // Write buffer to canvas
* g.flip();
* ```
*
* Uses 'physical' size of canvas. Eg with a high-DPI screen, this will
* mean a higher number of rows and columns compared to the logical size.
* @returns
*/
getWritableBuffer(): {
grid: Grid;
get: GridCellAccessor<Rgb8Bit>;
set: GridCellSetter<Rgb>;
flip: () => void;
};
}
//#endregion
//#region ../packages/visual/src/canvas-region.d.ts
type CanvasRegionSpecRelativePositioned = {
relativePositioned: RectPositioned;
scale?: `independent`;
};
type CanvasRegionSpecAbsolutePositioned = {
absPositioned: RectPositioned;
};
type CanvasRegionSpecRelativeSized = {
relativeSize: Rect;
scale?: `independent`;
/**
* Cardinal directions, or 'center' (default)
*/
position: `center` | `n` | `s`;
};
type CanvasRegionSpecMatched = {
match: HTMLElement | string;
};
type CanvasRegionSpec = {
marginPx?: number;
} & (CanvasRegionSpecAbsolutePositioned | CanvasRegionSpecRelativePositioned | CanvasRegionSpecRelativeSized | CanvasRegionSpecMatched);
/**
* Manges the drawing for a region of a canvas
*/
declare class CanvasSource {
#private;
constructor(canvasElementOrQuery: HTMLCanvasElement | string, sizeBasis?: `min` | `max`);
/**
* Set logical size for region
* @param size
* @returns
*/
setLogicalSize(size: Rect): Rect;
/**
* Causes drawing context to be re-created
*/
invalidateContext(): void;
/**
* Convert relative to absolute
* @param pt
* @param kind
* @returns
*/
toAbsPoint(pt: Point, kind?: `independent`): {
x: number;
y: number;
};
/**
* Gets the offset x,y
*/
get offset(): {
x: number;
y: number;
};
/**
* Converts an absolute point to relative
* @param pt
* @param source
* @param kind
* @param clamped
* @returns
*/
toRelPoint(pt: Point, source: `screen` | `source`, kind?: `independent` | `skip`, clamped?: boolean): {
x: number;
y: number;
};
/**
* Converts a rectangle to absolute coordinates
* @param rect
* @param kind
* @returns
*/
toAbsRect(rect: Rect | RectPositioned, kind?: `independent`): {
width: number;
height: number;
x: number;
y: number;
} | {
width: number;
height: number;
};
/**
* Creates a region
*
* Absolute positioned. Uses source coordinates which don't change
* ```js
* source.createRegion({
* absPositioned: { x: 0, y: 0, width: 100, height: 100}
* });
* ```
*
* Relative positioned. Uses coordiantes relative to source dimensions.
* Updated if source changes.
* ```js
* source.createRegion({
* relativePositioned: { x: 0, y:0, width: 1, height: 0.5 },
* scale: `independent`
* });
* ```
*
* Relative sized. Uses size relative to source dimension. By default centers.
* ```js
* source.createRegion({
* relativeSize: { width: 0.5, height: 0.5 }
* position: `center`
* })
* ```
* @param spec
* @returns
*/
createRegion(spec: CanvasRegionSpec): CanvasRegion;
/**
* Clears the region of the canvas
*/
clear(): void;
/**
* Gets - or creates - the drawing context
*/
get context(): CanvasRenderingContext2D;
/**
* Gets a scaler for size
*/
get sizeScaler(): {
abs: NumberScaler;
rel: NumberScaler;
};
/**
* Gets the logical width
*/
get width(): number;
/**
* Gets the logical height
*/
get height(): number;
get element(): HTMLCanvasElement;
}
/**
* Draws on a canvas, constrained to a specific region
*/
declare class CanvasRegion {
#private;
source: CanvasSource;
/**
* Creates, using coordinate in canvas coordinates
*/
constructor(source: CanvasSource, regionCompute: (parent: CanvasSource) => RectPositioned);
/**
* Calls the original `regionCompute` function passed in to the constructor
* to recompute the absolute region
*/
recomputeRegion(): void;
/**
* Converts a region-relative point (0..1) to an absolute
* point, which uses region-relative coordinates.
*
* Eg if the region had an x,y of 100,100, `toAbsRegion({x:0,y:0})`
* will return 0,0.
*
* @param regionRel
* @param scaleBy
* @returns
*/
toAbsRegion(regionRel: Point, scaleBy?: `both`): {
x: number;
y: number;
};
/**
* Returns a copy of `p` offset by the region's x & y
* @param p
* @returns
*/
applyRegionOffset(p: Point): {
x: number;
y: number;
};
/**
* Draws a line from a series of points.
* Assumes region-relative, % coordinates (ie 0..1 scale)
* @param relativePoints Points to connect, in region-relative coordinates
* @param strokeStyle Stroke style
* @param lineWidth Line with
*/
drawConnectedPointsRelative(relativePoints: Point[], strokeStyle: string, lineWidth?: number): void;
/**
* Draws connected points in absolute coordinates,
* however with 0,0 being the top-left of the region.
*
* Thus, this will apply the region offset before drawing.
* @param points Points to draw
* @param strokeStyle Stroke style
* @param lineWidth Line width
*/
drawConnectedPoints(points: Point[], strokeStyle: string, lineWidth?: number): void;
/**
* Fills text at a relative position
* @param text
* @param relPos Relative, meaning 0.5,0.5 is the middle of the region
* @param fillStyle
* @param baseline
* @param align
*/
fillTextRelative(text: string, relPos: Point, fillStyle: string | undefined, font: string, baseline?: CanvasTextBaseline, align?: CanvasTextAlign): void;
/**
* Fills text at a region-relative position
* @param text
* @param point Region relative, meaning 0,0 is top-left of region
* @param fillStyle
* @param baseline
* @param align
*/
fillText(text: string, point: Point, fillStyle: string | undefined, font: string, baseline?: CanvasTextBaseline, align?: CanvasTextAlign): void;
drawCircles(relativeCircles: CirclePositioned[], fillStyle: string, strokeStyle?: string, lineWidth?: number): void;
/**
* Clears the region
*/
clear(): void;
/**
* Fills the region
* @param fillStyle
*/
fill(fillStyle?: string): void;
/**
* For debugging, draws an outline of the bounds
* @param strokeStyle
* @param lineWidth
*/
drawBounds(strokeStyle: string, lineWidth?: number): void;
/**
* Converts a point to a region-relative one.
* @param pt
* @param kind
* @returns
*/
toRelPoint(pt: Point, source?: `screen` | `source`, kind?: `independent`, clamped?: boolean): {
x: number;
y: number;
};
/**
* Converts absolute to region point
* @param pt
* @param source
* @param clamped
* @returns
*/
absToRegionPoint(pt: Point, source: `screen`, clamped: boolean): {
x: number;
y: number;
};
/**
* Get center of region
*/
get center(): Point;
/**
* Gets the drawing context
*/
get context(): CanvasRenderingContext2D;
/**
* SEts the region
*/
set region(value: RectPositioned);
/**
* Gets the region
*/
get region(): RectPositioned;
/**
* Gets the width
*/
get width(): number;
/**
* Gets the height
*/
get height(): number;
/**
* Gets the x offset
*/
get x(): number;
/**
* Gets they y offset
*/
get y(): number;
/**
* Gets the width/height, whichever is smaller
*/
get dimensionMin(): number;
}
//#endregion
//#region ../packages/visual/src/pointer-visualise.d.ts
type Opts = {
readonly touchRadius?: number;
readonly mouseRadius?: number;
readonly trace?: boolean;
readonly hue?: number;
};
/**
* Visualises pointer events within a given element.
*
* ```js
* // Show pointer events for whole document
* pointerVis(document);
* ```
*
* Note you may need to set the following CSS properties on the target element:
*
* ```css
* touch-action: none;
* user-select: none;
* overscroll-behavior: none;
* ```
*
* Options
* * touchRadius/mouseRadius: size of circle for these kinds of pointer events
* * trace: if true, intermediate events are captured and displayed
* @param elOrQuery Element to monitor
* @param options Options
*/
declare const pointerVisualise: (elOrQuery: HTMLElement | string, options?: Opts) => void;
//#endregion
//#region ../packages/visual/src/svg/types.d.ts
type MarkerOpts = StrokeOpts & DrawingOpts & {
readonly id: string;
readonly markerWidth?: number;
readonly markerHeight?: number;
readonly orient?: string;
readonly viewBox?: string;
readonly refX?: number;
readonly refY?: number;
};
/**
* Drawing options for SVG elements
*/
type DrawingOpts = {
/**
* Style for fill. Eg `black`.
* @see [fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
*/
readonly fillStyle?: string;
/**
* Opacity (0..1)
*/
readonly opacity?: number;
/**
* If true, debug helpers are drawn
*/
readonly debug?: boolean;
};
type StrokeOpts = {
/**
* Line cap
* @see [stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)
*/
readonly strokeLineCap?: `butt` | `round` | `square`;
/**
* Width of stroke, eg `2`
* @see [stroke-width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)
*/
readonly strokeWidth?: number;
/**
* Stroke dash pattern, eg `5`
* @see [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
*/
readonly strokeDash?: string;
/**
* Style for lines. Eg `white`.
* @see [stroke](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)
*/
readonly strokeStyle?: string;
};
/**
* Line drawing options
*/
type LineDrawingOpts = DrawingOpts & MarkerDrawingOpts & StrokeOpts;
type CircleDrawingOpts = DrawingOpts & StrokeOpts & MarkerDrawingOpts;
type PathDrawingOpts = DrawingOpts & StrokeOpts & MarkerDrawingOpts;
type MarkerDrawingOpts = {
readonly markerEnd?: MarkerOpts;
readonly markerStart?: MarkerOpts;
readonly markerMid?: MarkerOpts;
};
/**
* Text drawing options
*/
type TextDrawingOpts = StrokeOpts & DrawingOpts & {
readonly anchor?: `start` | `middle` | `end`;
readonly align?: `text-bottom` | `text-top` | `baseline` | `top` | `hanging` | `middle`;
readonly userSelect?: boolean;
};
/**
* Text path drawing options
*/
type TextPathDrawingOpts = TextDrawingOpts & {
readonly method?: `align` | `stretch`;
readonly side?: `left` | `right`;
readonly spacing?: `auto` | `exact`;
readonly startOffset?: number;
readonly textLength?: number;
};
//#endregion
//#region ../packages/visual/src/svg/apply.d.ts
/**
* Applies drawing options to given SVG element.
* Applies: fillStyle
* @param elem Element
* @param opts Drawing options
*/
declare function applyOpts(elem: SVGElement, opts: DrawingOpts): void;
//#endregion
//#region ../packages/visual/src/svg/bounds.d.ts
/**
* Get the bounds of an SVG element (determined by its width/height attribs)
* @param svg
*/
declare function getBounds(svg: SVGElement): Rect;
/**
* Set the bounds of an element, using its width/height attribs.
* @param svg
* @param bounds
*/
declare function setBounds(svg: SVGElement, bounds: Rect): void;
//#endregion
//#region ../packages/visual/src/svg/create.d.ts
/**
* Creates an element of `type` and with `id` (if specified)
* @param type Element type, eg `circle`
* @param id Optional id to assign to element
* @returns Element
*/
declare function createEl<V extends SVGElement>(type: string, id?: string): V;
/**
* Creates and appends a SVG element.
*
* ```js
* // Create a circle
* const circleEl = createOrResolve(parentEl, `SVGCircleElement`);
* ```
*
* If `queryOrExisting` is specified, it is used as a query to find an existing element. If
* query starts with `#`, this will be set as the element id, if created.
*
* ```js
* // Creates an element with id 'myCircle' if it doesn't exist
* const circleEl = createOrResolve(parentEl, `SVGCircleElement`, `#myCircle`);
* ```
* @param parent Parent element
* @param type Type of SVG element
* @param queryOrExisting Query, eg `#id`
*/
declare function createOrResolve<V extends SVGElement>(parent: SVGElement, type: string, queryOrExisting?: string | V, suffix?: string): V;
declare namespace elements_d_exports {
export { circle, circleUpdate, grid$1 as grid, group, groupUpdate, line, lineUpdate, path, pathUpdate, polarRayUpdate, text, textPath, textPathUpdate, textUpdate };
}
/**
* Creates and adds an SVG path element
* @example
* ```js
* const paths = [
* `M300,200`,
* `a25,25 -30 0,1 50, -25 l 50,-25`
* ]
* const pathEl = path(paths, parentEl);
* ```
* @param svgOrArray Path syntax, or array of paths. Can be empty if path data will be added later
* @param parent SVG parent element
* @param opts Options Drawing options
*/
declare function path(svgOrArray: string | readonly string[], parent: SVGElement, opts?: PathDrawingOpts, queryOrExisting?: string | SVGPathElement): SVGPathElement;
declare function pathUpdate(elem: SVGPathElement, opts?: PathDrawingOpts): SVGPathElement;
/**
* Updates an existing `SVGCircleElement` with potentially updated circle data and drawing options
* @param elem Element
* @param circle Circle
* @param opts Drawing options
* @returns SVGCircleElement
*/
declare function circleUpdate(elem: SVGCircleElement, circle: CirclePositioned, opts?: CircleDrawingOpts): SVGCircleElement;
/**
* Creates or reuses a `SVGCircleElement`.
*
* To update an existing element, use `circleUpdate`
* @param circle
* @param parent
* @param opts
* @param queryOrExisting
*/
declare function circle(circle: CirclePositioned, parent: SVGElement, opts?: CircleDrawingOpts, queryOrExisting?: string | SVGCircleElement): SVGCircleElement;
/**
* Creates or resuses a `SVGGElement` (group)
*
* To update an existing elemnet, use `groupUpdate`
* @param children
* @param parent
* @param queryOrExisting
*/
declare function group(children: readonly SVGElement[], parent: SVGElement, queryOrExisting?: string | SVGGElement): SVGGElement;
declare function groupUpdate(elem: SVGGElement, children: readonly SVGElement[]): SVGGElement;
/**
* Creates or reuses a SVGLineElement.
*
* @param line
* @param parent
* @param opts
* @param queryOrExisting
*/
declare function line(line: Line, parent: SVGElement, opts?: LineDrawingOpts, queryOrExisting?: string | SVGLineElement): SVGLineElement;
/**
* Updates a SVGLineElement instance with potentially changed line and drawing data
* @param lineEl
* @param line
* @param opts
*/
declare function lineUpdate(lineEl: SVGLineElement, line: Line, opts?: LineDrawingOpts): SVGLineElement;
declare function polarRayUpdate(lineEl: SVGLineElement, ray: PolarRay, opts?: LineDrawingOpts): SVGLineElement;
/**
* Updates an existing SVGTextPathElement instance with text and drawing options
* @param el
* @param text
* @param opts
*/
declare function textPathUpdate(el: SVGTextPathElement, text?: string, opts?: TextPathDrawingOpts): SVGTextPathElement;
/**
* Creates or reuses a SVGTextPathElement.
* @param pathReference
* @param text
* @param parent
* @param opts
* @param textQueryOrExisting
* @param pathQueryOrExisting
*/
declare function textPath(pathReference: string, text: string, parent: SVGElement, opts?: TextPathDrawingOpts, textQueryOrExisting?: string | SVGTextElement, pathQueryOrExisting?: string | SVGTextPathElement): SVGTextPathElement;
/**
* Updates an existing SVGTextElement instance with position, text and drawing options
* @param el
* @param pos
* @param text
* @param opts
*/
declare function textUpdate(el: SVGTextElement, pos?: Point, text?: string, opts?: TextDrawingOpts): SVGTextElement;
/**
* Creates or reuses a SVGTextElement
* @param text Text
* @param parent
* @param pos Position of text
* @param opts
* @param queryOrExisting
*/
declare function text(text: string, parent: SVGElement, pos?: Point, opts?: TextDrawingOpts, queryOrExisting?: string | SVGTextElement): SVGTextElement;
/**
* Creates a square grid based at a center point, with cells having `spacing` height and width.
*
* It fits in as many cells as it can within `width` and `height`.
*
* Returns a SVG group, consisting of horizontal and vertical lines
* @param parent Parent element
* @param center Center point of grid
* @param spacing Width/height of cells
* @param width How wide grid should be
* @param height How high grid should be
* @param opts
*/
declare function grid$1(parent: SVGElement, center: Point, spacing: number, width: number, height: number, opts?: LineDrawingOpts): SVGGElement;
//#endregion
//#region ../packages/visual/src/svg/geometry.d.ts
/**
* Returns a Line type from an SVGLineElement
* @param el SVG Line Element
*/
declare function lineFromSvgLine(el: SVGLineElement): Line;
declare function polarRayFromSvgLine(el: SVGLineElement, origin: Point): PolarRay;
//#endregion
//#region ../packages/visual/src/svg/helper.d.ts
/**
* Helper to make SVG elements with a common parent.
*
* Create with {@link makeHelper}.
*/
type SvgHelper = {
remove: (queryOrExisting: string | SVGElement) => void;
/**
* Creates a text element
* @param text Text
* @param pos Position
* @param opts Drawing options
* @param queryOrExisting DOM query to look up existing element, or the element instance
*/
text: (text: string, pos: Point, opts?: TextDrawingOpts, queryOrExisting?: string | SVGTextElement) => SVGTextElement;
/**
* Creates text on a path
* @param pathReference Reference to path element
* @param text Text
* @param opts Drawing options
* @param textQueryOrExisting DOM query to look up existing element, or the element instance
* @param pathQueryOrExisting DOM query to look up existing element, or the element instance
*/
textPath: (pathReference: string, text: string, opts?: TextDrawingOpts, textQueryOrExisting?: string | SVGTextElement, pathQueryOrExisting?: string | SVGTextPathElement) => SVGTextPathElement;
/**
* Creates a line
* @param line Line
* @param opts Drawing options
* @param queryOrExisting DOM query to look up existing element, or the element instance
*/
line: (line: Line, opts?: LineDrawingOpts, queryOrExisting?: string | SVGLineElement) => SVGLineElement;
/**
* Creates a circle
* @param circle Circle
* @param opts Drawing options
* @param queryOrExisting DOM query to look up existing element, or the element instance
*/
circle: (circle: CirclePositioned, opts?: CircleDrawingOpts, queryOrExisting?: string | SVGCircleElement) => SVGCircleElement;
group: (children: readonly SVGElement[], queryOrExisting?: string | SVGGElement) => SVGGElement;
/**
* Creates a path
* @param svgString Path description, or empty string
* @param opts Drawing options
* @param queryOrExisting DOM query to look up existing element, or the element instance
*/
path: (svgString: string | readonly string[], opts?: PathDrawingOpts, queryOrExisting?: string | SVGPathElement) => SVGPathElement;
/**
* Creates a grid of horizontal and vertical lines inside of a group
* @param center Grid origin
* @param spacing Cell size
* @param width Width of grid
* @param height Height of grid
* @param opts Drawing options
*/
grid: (center: Point, spacing: number, width: number, height: number, opts?: LineDrawingOpts) => SVGGElement;
/**
* Returns an element if it exists in parent
* @param selectors Eg `#path`
*/
query: <V extends SVGElement>(selectors: string) => V | null;
/**
* Gets/sets the width of the parent
*/
get width(): number;
set width(width: number);
/**
* Gets the parent
*/
get parent(): SVGElement;
/**
* Gets/sets the height of the parent
*/
get height(): number;
set height(height: number);
/**
* Deletes all child elements
*/
clear: () => void;
};
/**
* Creates a {@link SvgHelper} for the creating and management of SVG elements.
* @param parent
* @param parentOpts
*/
declare function makeHelper(parent: SVGElement, parentOpts?: DrawingOpts & StrokeOpts): SvgHelper;
//#endregion
//#region ../packages/visual/src/svg/markers.d.ts
declare function createMarker(id: string, opts: MarkerOpts, childCreator?: () => SVGElement): SVGMarkerElement;
declare function markerPrebuilt(elem: SVGElement | null, opts: MarkerOpts, _context: DrawingOpts): string;
//#endregion
//#region ../packages/visual/src/svg/path.d.ts
/**
* Applies path drawing options to given element
* Applies: markerEnd, markerStart, markerMid
* @param elem Element (presumed path)
* @param opts Options
*/
declare const applyPathOpts: (elem: SVGElement, opts: PathDrawingOpts) => void;
//#endregion
//#region ../packages/visual/src/svg/remove.d.ts
/**
* Removes an SVG element from a parent
* @param parent Parent
* @param queryOrExisting Query or existing element
* @returns
*/
declare const remove: <V extends SVGElement>(parent: SVGElement, queryOrExisting: string | V) => void;
/**
* Removes all children of `parent`, but not `parent` itself.
* @param parent
*/
declare const clear: (parent: SVGElement) => void;
//#endregion
//#region ../packages/visual/src/svg/stroke.d.ts
/**
* Applies drawing options to given SVG element.
* Applies: strokeStyle, strokeWidth, strokeDash, strokeLineCap
* @param elem Element
* @param opts
*/
declare const applyStrokeOpts: (elem: SVGElement, opts: StrokeOpts) => void;
declare namespace index_d_exports$3 {
export { CircleDrawingOpts, DrawingOpts, elements_d_exports as Elements, LineDrawingOpts, MarkerDrawingOpts, MarkerOpts, PathDrawingOpts, StrokeOpts, SvgHelper, TextDrawingOpts, TextPathDrawingOpts, applyOpts, applyPathOpts, applyStrokeOpts, clear, createEl, createMarker, createOrResolve, getBounds, lineFromSvgLine, makeHelper, markerPrebuilt, polarRayFromSvgLine, remove, setBounds };
}
//#endregion
//#region ../packages/visual/src/types.d.ts
type DrawingHelper = ReturnType<typeof makeHelper$1>;
declare namespace convolve_2d_d_exports {
export { CellValueScalar, Kernel, Kernel2dArray, KernelCompute, KernelReduce, boxBlurKernel, convolve, convolveCell, convolveImage, edgeDetectionKernel, gaussianBlur3Kernel, gaussianBlur5Kernel, identityKernel, kernel2dToArray, multiply, rgbReducer, sharpenKernel, unsharpMasking5Kernel };
}
type Kernel<T> = readonly (readonly T[])[];
type CellValueScalar<TCell, TKernel> = GridCellAndValue<TCell> & {
kernel: TKernel;
};
type KernelCompute = <V>(offset: GridCell, value: V) => V;
type KernelReduce<TCell, TKernel> = (values: CellValueScalar<TCell, TKernel>[]) => TCell | undefined;
/**
* Multiply every element of kernel by the same `scalar` value.
* Returns new result, input is unmodified
* @param kernel
* @param scalar
* @returns
*/
declare const multiply: (kernel: Kernel<number>, scalar: number) => Kernel<number>;
declare function convolveCell<TCell, TKernel>(cell: GridCell, kernel: Kernel2dArray<TKernel>, source: GridReadable<TCell>, reduce: KernelReduce<TCell, TKernel>): TCell | undefined;
/**
* Performs kernel-based convolution over `image`.
* @param kernel
* @param image
*/
declare function convolveImage(kernel: Kernel<number>, image: ImageData): Generator<GridCellAndValue<Rgb8Bit>, void, any>;
declare function convolve<TCell, TKernel>(kernel: Kernel<TKernel>, source: GridReadable<TCell>, visitor: Iterable<GridCell>, reduce: KernelReduce<TCell, TKernel>, origin?: GridCell): IterableIterator<GridCellAndValue<TCell>>;
type Kernel2dArray<T> = GridCellAndValue<T>[];
/**
* For a given kernel, returns an array of offsets. These
* consist of a cell offset (eg `{x:-1,y:-1}`) and the value at that kernel position.
* @param kernel
* @param origin
* @returns
*/
declare const kernel2dToArray: <T>(kernel: Kernel<T>, origin?: GridCell) => Kernel2dArray<T>;
declare const rgbReducer: KernelReduce<Rgb8Bit, number>;
declare const identityKernel: number[][];
declare const edgeDetectionKernel: number[][];
declare const sharpenKernel: number[][];
declare const boxBlurKernel: Kernel<number>;
declare const gaussianBlur3Kernel: Kernel<number>;
declare const gaussianBlur5Kernel: Kernel<number>;
declare const unsharpMasking5Kernel: Kernel<number>;
//#endregion
//#region ../node_modules/.pnpm/colorizr@4.0.1/node_modules/colorizr/dist/index.d.mts
type ColorType = 'hex' | 'hsl' | 'oklab' | 'oklch' | 'rgb';
type HEX = `#${string}`;
interface Analysis {
brightnessDifference: number;
colorDifference: number;
compliant: number;
contrast: number;
largeAA: boolean;
largeAAA: boolean;
normalAA: boolean;
normalAAA: boolean;
}
interface HSL {
/** The alpha/opacity value (0-1). */
alpha?: number;
h: number;
l: number;
s: number;
}
interface LAB {
a: number;
/** The alpha/opacity value (0-1). */
alpha?: number;
b: number;
l: number;
}
interface LCH {
/** The alpha/opacity value (0-1). */
alpha?: number;
c: number;
h: number;
l: number;
}
interface RGB {
/** The alpha/opacity value (0-1). */
alpha?: number;
b: number;
g: number;
r: number;
}
interface ColorizrOptions {
/**
* Output color format.
*
* If not specified, the output will use the same format as the input color.
*/
format?: ColorType;
}
declare class Colorizr {
/** The alpha/opacity value (0-1). */
alpha: number;
hex: HEX;
hsl: HSL;
oklab: LAB;
oklch: LCH;
rgb: RGB;
type: ColorType;
constructor(color: string | HSL | LAB | LCH | RGB, options?: ColorizrOptions);
/**
* Get CSS string
*/
get css(): string;
/**
* Get the red value
*/
get red(): number;
/**
* Get the green value
*/
get green(): number;
/**
* Get the blue value
*/
get blue(): number;
/**
* Get the hue value
*/
get hue(): number;
/**
* Get the saturation value
*/
get saturation(): number;
/**
* Get the lightness value
*/
get lightness(): number;
/**
* Get the luminance value
*/
get luminance(): number;
/**
* Get the chroma value
*/
get chroma(): number;
get opacity(): number;
/**
* Get the most readable color (light or dark) for this color as a background.
*/
get readableColor(): string;
private get currentColor();
/**
* Get the brightness difference between this color and another.
*
* @param input - The color to compare against.
* @returns The brightness difference value.
*/
brightnessDifference(input: string): number;
/**
* Get the color difference between this color and another.
*
* @param input - The color to compare against.
* @returns The color difference value.
*/
colorDifference(input: string): number;
/**
* Test 2 colors for WCAG compliance.
*
* @param input - The color to compare against.
* @returns Analysis object with compliance information.
*/
compare(input: string): Analysis;
/**
* Get the contrast ratio between this color and another.
*
* @param input - The color to compare against.
* @returns The contrast ratio.
*/
contrast(input: string): number;
/**
* Format the color to a specific type.
*
* @param type - The color format to co