diff --git a/.changeset/selfish-grapes-melt.md b/.changeset/selfish-grapes-melt.md new file mode 100644 index 0000000..04cce2a --- /dev/null +++ b/.changeset/selfish-grapes-melt.md @@ -0,0 +1,5 @@ +--- +"hue-map": minor +--- + +Refactor api to return a palette object which can be formatted later diff --git a/README.md b/README.md index 6133e7a..b3d33ad 100644 --- a/README.md +++ b/README.md @@ -18,21 +18,20 @@ yarn add hue-map ## Usage ```js -import createPalette from 'hue-map' +import { createPalette } from 'hue-map' const myPalette = createPalette({ map: 'viridis', steps: 3, - format: 'cssHex', }) -console.log(myPalette) -// ['#440154FF', '#21908DFF', '#FDE725FF'] +console.log(myPalette.format('cssHex')) +// --> ['#440154FF', '#21908DFF', '#FDE725FF'] ``` ## API -The default export is a function that takes an options object. +The `createPalette` export is a function that takes an options object. ### Options @@ -55,7 +54,7 @@ Visit the [demo page](https://giraugh.github.io/hue-map/) to see a list with exa You can also provide a custom colour map to the `map` option, with a type of `[number, number | RGBA][]`. This is an array of tuples, where each tuple has an index of where that colour appears in the gradient (from 0 to 1), and the colour at that point, as a HEX number or an RGBA tuple. Note that all HEX numbers need to include alpha. ```js -import createPalette from 'hue-map' +import { createPalette } from 'hue-map' // 3 colour points, using HEX values const myHexPalette = createPalette({ diff --git a/lib/index.ts b/lib/index.ts index 9802853..6676e19 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -1,13 +1,28 @@ import maps, { ColorMap, MapKey } from './maps' import { hexColorToRGBA, lerpRGBA, RGBA } from './util' -export type Palette = string[] | RGBA[] | number[] export type ColorMapInput = MapKey | ColorMap export type PaletteFormat = 'float' | 'rgba' | 'cssHex' | 'cssRGBA' | 'number' type CreatePaletteOptions = { map?: ColorMapInput, steps?: number, - format?: PaletteFormat +} + +class Palette { + private readonly colors: RGBA[] + + constructor(colors: RGBA[]) { + this.colors = colors + } + + format(_format: 'cssHex'): string[] + format(_format: 'cssRGBA'): string[] + format(_format: 'number'): number[] + format(_format: 'float'): number[] + format(_format: 'rgba'): RGBA[] + format(format: PaletteFormat) { + return this.colors.map(rgba => convertRGBA(rgba, format)) + } } /** @@ -17,7 +32,7 @@ type CreatePaletteOptions = { * @param {PaletteFormat} options.format The format of the palette colors. * @returns {Palette} The generated palette. */ -export const createPalette = ({ map = 'viridis', steps = 10, format = 'cssHex' }: CreatePaletteOptions = {}): Palette => { +export const createPalette = ({ map = 'viridis', steps = 10 }: CreatePaletteOptions): Palette => { // If passed a map name, index from built-in color maps const colorMap: ColorMap = typeof map === 'string' ? maps[map] : map @@ -57,9 +72,8 @@ export const createPalette = ({ map = 'viridis', steps = 10, format = 'cssHex' } return Array.from({ length: numSteps }, (_, j) => lerpRGBA(fromColor, toColor, j / numSteps)) }) - // Convert to desired format - const colors = colorsRGBA.map(rgba => convertRGBA(rgba, format)) as Palette - return colors + // Return palette object + return new Palette(colorsRGBA) } /**