Socket
Socket
Sign inDemoInstall

anypalette

Package Overview
Dependencies
0
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.5.2 to 0.6.0

build/anypalette-0.6.0.js

39

CHANGELOG.md

@@ -12,3 +12,3 @@ # Changelog

[Unreleased]: https://github.com/1j01/anypalette.js/compare/v0.5.0...HEAD
[Unreleased]: https://github.com/1j01/anypalette.js/compare/v0.6.0...HEAD
## [Unreleased]

@@ -21,6 +21,41 @@ <details>

Nothing here yet!
Nothing here yet.
</details>
[0.6.0]: https://github.com/1j01/anypalette.js/compare/v0.5.2...v0.6.0
## [0.6.0] - 2021-01-27
### Changed
- Duplicate colors are included by default now. To get unique colors only, use `AnyPalette.uniqueColors(palette)`
- `color.is(colorB)` is now `Color.is(colorA, colorB)` and does a comparison based on component values instead of the string representation.
### Removed
- `palette.withDuplicates`: Duplicate colors are included by default now.
- (undocumented and silly) `RandomPalette`, `RandomColor`, `gimmeAPalette`
- (undocumented) `palette.loader`, `matchedLoaderFileExtensions`
### Added
- **Support for saving files!**
Use `var fileContent = AnyPalette.writePalette(palette, AnyPalette.formats.GIMP_PALETTE)` to save a GPL file. Many formats are supported.
- `AnyPalette.uniqueColors(palette)`: Use this to get a version of a palette with only unique colors.
Note: `numberOfColumns` on the returned palette is undefined, because the geometry doesn't necessarily apply if some colors are removed.
`name` is however copied over.
- `Color` objects now have `red`, `green`, `blue` properties. The range is `[0,1]`, not `[0,255]`, and they are available even if the input format is HSL or another colorspace.
- Alpha support (translucent colors). `color.alpha` exists only if alpha is defined for a color. This is used for choosing between string representations.
- `loadPalette` callback now gets extra parameters for getting info about the format the file was parsed as.
- You can now pass an `ArrayBuffer` or Node.js `Buffer` as input to `AnyPalette.loadPalette({data}, callback)`. This is preferred over binary strings because it supports Unicode (UTF-8) encoded string names (and it's generally more modern).
- `palette.name` and `palette.description` are now available, for some palette formats.
- Adobe Color Swatch (`.aco`) read and write support
- Adobe Swatch Exchange (`.ase`) read and write support
- sK1 Palette (`.skp`) read and write support
- StarOffice/OpenOffice/LibreOffice palettes (`.soc`) read and write support
### Fixed
- Unicode (UTF-8) is now supported in text-based formats (for color names etc.), **except** when passing in a binary string.
- Dropping of last two colors when reading RIFF `.pal` palette
- Dropping of first color when reading Skencil `.spl` palette
### Deprecated
- Binary string support. Use `ArrayBuffer` or another input type instead.
[0.5.2]: https://github.com/1j01/anypalette.js/compare/v0.5.1...v0.5.2

@@ -27,0 +62,0 @@ ## [0.5.2] - 2021-01-15

51

package.json
{
"name": "anypalette",
"version": "0.5.2",
"version": "0.6.0",
"author": "Isaiah Odhner <isaiahodhner@gmail.com>",
"description": "Load many color palette formats",
"description": "Read and write many color palette formats",
"keywords": [

@@ -34,4 +34,23 @@ "palette",

"color-book",
"color-palette",
"starcraft",
"wpe",
"psppalette",
"skp",
"sk1",
"sketch",
"skencil",
"aco",
"ase",
"act",
"acb",
"adobe",
"photoshop",
"kolourpaint",
"mtpaint",
"kde",
"theme",
"themepack",
"css-colors",
"binary",
"reader",

@@ -42,2 +61,17 @@ "read",

"parser",
"writer",
"save",
"saver",
"convert",
"converter",
"converting",
"conversion",
"transcode",
"transcoder",
"transcoding",
"transform",
"transformer",
"transforming",
"transformation",
"file",
"format",

@@ -49,2 +83,3 @@ "formats",

"license": "MIT",
"homepage": "https://1j01.github.io/anypalette.js/",
"repository": {

@@ -57,5 +92,5 @@ "type": "git",

},
"main": "build/anypalette.js",
"main": "build/anypalette-0.6.0.js",
"files": [
"build/anypalette.js"
"build/anypalette-0.6.0.js"
],

@@ -65,2 +100,4 @@ "scripts": {

"test": "coffee tests/test.coffee",
"preversion": "gulp --require coffeescript/register npm-preversion",
"version": "gulp --require coffeescript/register npm-version",
"build": "gulp --require coffeescript/register build",

@@ -74,8 +111,12 @@ "watch": "gulp --require coffeescript/register"

"concurrently": "^5.3.0",
"css.escape": "^1.5.1",
"glob": "^7.1.6",
"gulp": "^4.0.2",
"jdataview": "^2.5.0",
"licensify": "^3.1.3",
"live-server": "^1.2.1",
"mkdirp": "^1.0.4",
"vinyl-source-stream": "^2.0.0"
"vinyl-source-stream": "^2.0.0",
"xml-js": "^1.6.11"
}
}

235

README.md
# AnyPalette.js
# <img src="anypalette-logo.png" height="32" alt=""> AnyPalette.js
There are a LOT of different types of palette files.
Like, way too many.
But we can solve this.
ONE LIBRARY SHALL RULE THEM ALL
```
One library to rule them all,
one library to find them,
One library to load them all
and in the browser bind them.
```
[Let's load some palettes](https://1j01.github.io/anypalette.js/demo)
[Check out the demo!](https://1j01.github.io/anypalette.js/demo)

@@ -24,20 +31,26 @@

|-------------------|-----------------------------------|-----------------------------------------------------------------------------------|:-------:|:-------:|
| .pal | [RIFF] Palette | [MS Paint] for Windows 95 and Windows NT 4.0 | ✅ | Planned |
| .gpl | [GIMP][Gimp] Palette | [Gimp], [Inkscape], [Krita], [KolourPaint], [Scribus], [CinePaint], [MyPaint] | ✅ | Planned |
| .txt | [Paint.NET] Palette | [Paint.NET] | ✅ | Planned |
| .act | Adobe Color Table | Adobe [Photoshop] and [Illustrator] | ✅ | Planned |
| .pal, .psppalette | [Paint Shop Pro] Palette | [Paint Shop Pro][] (Jasc Software / Corel) | ✅ | Planned |
| .hpl | [Homesite] Palette | Allaire [Homesite] / Macromedia [ColdFusion] | ✅ | |
| .cs | ColorSchemer | ColorSchemer Studio | ✅* | Planned |
| .pal | [Starcraft] Palette | [Starcraft] | ✅ | |
| .wpe | [Starcraft] Terrain Palette | [Starcraft] | ✅ | |
| .sketchpalette | [Sketch] Palette | [Sketch] | ✅ | Planned |
| .spl | [Skencil] Palette | [Skencil] (formerly called Sketch) | ✅ | |
| .colors | KolourPaint Color Collection | [KolourPaint] | ✅ | |
| .pal | [RIFF] Palette | [MS Paint] for Windows 95 and Windows NT 4.0 | ✅ | ✅ |
| .gpl | [GIMP][Gimp] Palette | [Gimp], [Inkscape], [Krita], [KolourPaint], [Scribus], [CinePaint], [MyPaint] | ✅ | ✅ |
| .aco | Adobe Color Swatch | Adobe [Photoshop] | ✅ | ✅ |
| .ase | Adobe Swatch Exchange | Adobe [Photoshop], [InDesign], and [Illustrator] | ✅ | ✅ |
| .txt | [Paint.NET] Palette | [Paint.NET] | ✅ | ✅ |
| .act | Adobe Color Table | Adobe [Photoshop] and [Illustrator] | ✅\* | ✅ |
| .pal, .psppalette | [Paint Shop Pro] Palette | [Paint Shop Pro] (Jasc Software / Corel) | ✅ | ✅ |
| .hpl | [Homesite] Palette | Allaire [Homesite] / Macromedia [ColdFusion] | ✅ | ✅ |
| .cs | ColorSchemer | ColorSchemer Studio | ✅\* | |
| .pal | [Starcraft] Palette | [Starcraft] | ✅ | ✅ |
| .wpe | [Starcraft] Terrain Palette | [Starcraft] | ✅ | ✅ |
| .sketchpalette | [Sketch] Palette | [Sketch] | ✅ | ✅ |
| .spl | [Skencil] Palette | [Skencil] (formerly called Sketch) | ✅ | ✅ |
| .soc | StarOffice Colors | [StarOffice], [OpenOffice], [LibreOffice] | ✅ | ✅ |
| .colors | KolourPaint Color Collection | [KolourPaint] | ✅ | ✅ |
| .colors | Plasma Desktop Color Scheme | [KDE] Plasma Desktop | ✅ | |
| .theme | Windows Theme | [Windows] Desktop | ✅ | |
| .themepack | Windows Theme | [Windows] Desktop | ✅ | |
| .css, .scss, .styl| Cascading StyleSheets | Web browsers / web pages | ✅ | ✅ |
| .html, .svg, .js | any text files with CSS colors | Web browsers / web pages | ✅ | |
\*The ColorSchemer file parser is only enabled when the file extension is `.cs`,
provided by passing a `File` object, or `options.fileName`, or `options.fileExt`, or `options.filePath`
\*The ColorSchemer file parser is only enabled when the file extension is known to be `.cs`,
provided by passing a `File` object, or `options.fileName`, or `options.fileExt`, or `options.filePath`.
The Adobe Color Table loader is only enabled when the file extension is known to be `.act` OR the file is exactly 768 or 772 bytes long.

@@ -48,8 +61,7 @@ UNSUPPORTED palette formats (for now):

|-------------------|-----------------------------------|-----------------------------------------------------------------------------------|:-------:|:-------:|
| .gpa | [Gpick] Palette | [Gpick] | Planned | |
| .aco | Adobe Color Swatches | Adobe [Photoshop] | Planned | Planned |
| .ase | Adobe Swatch Exchange | Adobe [Photoshop], [InDesign], and [Illustrator] | Planned | Planned |
| .acbl | Adobe Color Book Library / Legacy | Adobe [InDesign] and [Illustrator] | Planned | Planned |
| .soc | StarOffice Colors | [StarOffice], [OpenOffice], [LibreOffice] | Planned | Planned |
| .gpa | [Gpick] Palette | [Gpick] | | |
| .acb | Adobe Color Book | Adobe [InDesign] and [Illustrator] | ✅\*\* | |
| .acbl | Adobe Color Book Library / Legacy | Adobe [InDesign] and [Illustrator] (?) | | |
\*\*None of the color spaces are supported (CMYK, CIELAB, CIEXYZ). The code is mostly all there! But I think probably *ICC profiles* are needed for correct-looking colors.

@@ -97,16 +109,18 @@ [RIFF]: https://en.wikipedia.org/wiki/Resource_Interchange_File_Format

For Node.js / Webpack / Parcel / Rollup / Browserify:
```
For Node.js / Webpack / Parcel / Rollup / Browserify, install with:
```sh
npm i anypalette --save
# or
yarn add anypalette
```
Then access the library with:
```javascript
```js
const AnyPalette = require("anypalette");
```
**Alternatively**, download [`build/anypalette.js`](build/anypalette.js) and include it as a script:
**Alternatively**, download [`build/anypalette-0.6.0.js`](build/anypalette-0.6.0.js) and include it as a script:
```html
<script src="anypalette.js"></script>
<script src="anypalette-0.6.0.js"></script>
```

@@ -126,22 +140,57 @@

Knowing the file extension means AnyPalette.js can often pick the correct palette loader right away, which can improve the load speed, and also some loaders won't load except via their specific file extension because they can't determine if the file is actually in that format or not (for raw data formats without headers).
Load a palette from a palette file.
You can pass in the file data in a few different ways.
Knowing the file extension means AnyPalette.js can often pick the correct palette loader right away, which can improve the load speed, and also a few loaders are only enabled if their specific file extension matches because they can't determine if the file is actually in that format or not (for raw data formats without headers).
- `options.file` - the palette file to load, as a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)
- `options.data` - the palette file data to load, as a binary string (**not** an ArrayBuffer/TypedArray/DataView)
- `options.data` - the palette file data to load, as a binary string or [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or Node.js [`Buffer`](https://nodejs.org/api/buffer.html#buffer_class_buffer) or [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) (but **not** any other `TypedArray` or `DataView`). In the case of a binary string, Unicode names for colors do not work, so an `ArrayBuffer` is preferred.
- `options.filePath` - a path to a palette file, for Node.js usage
- `options.fileName` (optional) - the file name, if you have it, including the file extension - can be obtained from `options.file` or `options.filePath`
- `options.fileExt` (optional) - the file extension, if you have it, *excluding* the dot, e.g. `"pal"` - can be obtained from `options.fileName` or `options.file` or `options.filePath`
- `callback(error, palette)` (required) - called when palette loading is finished, either with an error (in the first argument) or a `Palette` (in the second)
- `options.fileName` (optional) - the file name, if you have it, including the file extension - can be obtained automatically from `options.file` or `options.filePath`
- `options.fileExt` (optional) - the file extension, if you have it, *excluding* the dot, e.g. `"pal"` - can be obtained automatically from `options.fileName` or `options.file` or `options.filePath`
- `callback(error, palette, formatUsed, matchedFileExtension)` (required) - called when palette loading is finished, either with an error (in the first argument) or with the remaining arguments in the case of success:
- `palette`: a [`Palette`](#class-palette-extends-array)
- `formatUsed`: a [`Format`](#class-format) object representing the file format, or more generic loader, that was used to parse the palette
- `matchedFileExtension`: whether the format matched one of the file extensions its known for (Boolean)
Note: the callback is asynchronous to allow for file loading, but all the palette parsing is currently synchronous.
> **Note**: The callback is actually executed synchronously if you pass data directly. It's in an asynchronous style to allow for file loading, but all the palette parsing is currently synchronous. TODO: `setImmediate` at least.
### `AnyPalette.loadPalette(file, callback)`
Shortcut to load from a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) - equivalent to passing `{file: file}` for `options`.
Shortcut to load from a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object, equivalent to passing `{file: file}` for `options`.
### `AnyPalette.loadPalette(filePath, callback)`
Shortcut to load from a file path in Node.js - equivalent to passing `{filePath: filePath}` for `options`.
Shortcut to load from a file path in Node.js, equivalent to passing `{filePath: filePath}` for `options`.
### `AnyPalette.writePalette(palette, format)`
Returns string (for text-based formats) or `ArrayBuffer` (for binary formats) of the content of a file, in the given [`Format`](#class-format).
To save a palette as a GPL file, sending a download in a browser:
```js
var format = AnyPalette.formats.GIMP_PALETTE;
var file_content = AnyPalette.writePalette(palette, format);
var file = new File([file_content], "Saved Colors.gpl");
var url = URL.createObjectURL(file);
var a = document.createElement("a");
a.href = url;
a.download = file.name;
document.body.appendChild(a);
a.click(); // Note: this must happen during a user gesture to work
document.body.removeChild(a);
```
If you don't know what format to export as, use `GIMP_PALETTE` (`.gpl`), as it's supported by a wide range of software.
#### `AnyPalette.uniqueColors(palette)`
Some palette formats are commonly made variable size by just leaving unused slots a certain color
such as `#000` or `#00F`.
You can get a [`Palette`](#class-palette-extends-array) with only unique colors like so:
```js
var withoutDuplicates = AnyPalette.uniqueColors(palette);
```
### class `Palette` extends `Array`

@@ -152,3 +201,3 @@

Stores a list of Colors, with some additional data.
Stores a list of [`Color`](#class-color)s, and some metadata.

@@ -158,19 +207,22 @@ Because `Palette` is a subclass of `Array`, you can use `forEach`, `map`, `join` and other methods,

#### `palette.withDuplicates`
> **Note**: I think this was a bad design decision because `map` unintuitively returns an instance of the subclass `Palette`, and `Palette` is only intended to hold `Color`s.
I plan to change it to simply use a `colors` field.
I could make it an array-*like* object, but that might introduce other confusions. I don't know, jQuery does it. And a bunch of browser-native objects are array-like instead of proper arrays. Maybe that's the way to go.
Some palette formats are commonly made variable size by just leaving unused slots a certain color
such as `#000` or `#00F`.
So by default, duplicates are removed.
You can get all duplicates with `palette.withDuplicates` (which is another `Palette`)
#### `palette.numberOfColumns`
`palette.numberOfColumns` may contain a number of columns for the palette to fit into (with the number of rows being implicit).
You should ignore an `numberOfColumns` of zero, and may want to ignore this property entirely.
You should ignore a `numberOfColumns` of zero or `undefined`, and MAY want to ignore this property entirely.
Inkscape, for example, ignores the number of columns specified in a palette.
Currently only GIMP palettes will have this specified, but geometry guessing is planned.
#### `palette.name`
You should use `palette.withDuplicates` (and `palette.withDuplicates.numberOfColumns`) to work with file-specified geometry.
`palette.name` may contain a name for the palette (as a string), or else `undefined`.
This is **not** populated with the filename, it's only available for palette formats that allow defining a name *within* the file.
#### `palette.description`
`palette.description` may contain a description for the palette (as a string), or else `undefined`.
### class `Color`

@@ -181,6 +233,6 @@

`Color` has a `toString` method that returns a CSS color.
You can therefore pass a Color object directly to an element's style or a canvas's context.
`Color` has a `toString` method that returns a CSS color, which means you can
pass a Color object directly to an element's style or a canvas's context.
```javascript
```js
var color = palette[0];

@@ -191,18 +243,64 @@ div.style.background = color;

See [Using JavaScript's 'toString' Method](http://adripofjavascript.com/blog/drips/using-javascripts-tostring-method.html), which incidentally uses a `Color` class as an example.
See [*Using JavaScript's 'toString' Method*](http://adripofjavascript.com/blog/drips/using-javascripts-tostring-method.html), which incidentally uses a `Color` class as an example.
`Color` objects also have `r`, `g`, `b` properties, **OR** `h`, `s`, `l`, depending on how they were loaded
In some cases you may need to call `toString()` explicitly to get a string, for example:
Also for some palette formats, such as `.gpl` files, a `Color` may have a `name` (it's either a string or undefined)
```js
var shortenedColorString = color.toString().replace(/\s/g, "");
```
`Color` objects also have `red`, `green`, `blue` properties, and **depending on how they were loaded**, might have `hue`, `saturation`, `lightness`, and/or `alpha`.
## Todo
#### `color.name`
* Save palettes to different formats. [jBinary](https://github.com/jDataView/jBinary) may be helpful.
`color.name` may contain a name for the color (as a string), or else `undefined`.
Not all palette formats support named colors.
### `Color.is(colorA, colorB, epsilon=0.0001)`
Determines whether two colors are equal in value, or nearly equal.
```js
var firstTwoColorsExactlyEqual = AnyPalette.Color.is(palette[0], palette[1], 0);
var firstTwoColorsBasicallyEqual = AnyPalette.Color.is(palette[0], palette[1], 0.001);
var firstTwoColorsSimilar = AnyPalette.Color.is(palette[0], palette[1], 20);
```
> **Note**: If you want to find perceptually similar colors, it's better to use CIELAB color space instead of RGB.
This function compares in RGB space and is really only meant for finding duplicates.
### class `Format`
This class represents a loader and/or writer.
- `name`: A friendly name for the format, e.g. `"Paint Shop Pro palette"`
- `fileExtensions`: An array of associated file extensions, without the dot, e.g. `["pal", "psppalette"]`
- `fileExtensionsPretty`: A textual representation of the file extensions, including the dots, e.g. `".pal, .psppalette"`
- `readFromText`: This exists on text-based readers. Don't use it directly, use `AnyPalette.loadPalette` instead.
- `read`: This exists on binary readers. Don't use it directly, use `AnyPalette.loadPalette` instead.
- `write`: This exists on writers. Don't use it directly, use `AnyPalette.writePalette` instead.
### `AnyPalette.formats`
This is an object that contains [`Format`](#class-format) objects, keyed by format IDs.
To get an array of formats:
```js
const formats = Object.values(AnyPalette.formats);
```
To get just writers:
```js
const writeFormats = Object.values(AnyPalette.formats).filter((format)=> format.write);
```
To get just readers:
```js
const readFormats = Object.values(AnyPalette.formats).filter((format)=> format.read || format.readFromText);
```
## Todo
* Load *all the palettes!*
* Adobe Color files (`.aco`) used in Photoshop
* Adobe Swatch Exchange (`.ase`) used in Photoshop, Illustrator and InDesign
* Magica Voxel Palette (`.png`) - see [MagicaVoxelPalettes](https://github.com/mattperrin/MagicaVoxelPalettes) for examples

@@ -221,16 +319,11 @@ * macOS Color Palette (`.clr`)

* sK1 (`.skpx` / `.skp`)
* StarOffice / OpenOffice.org / LibreOffice (`.soc`)
* Guess palette geometries
* Guess palette geometries?
* More stuff (I have an external TODO list)
* Load from a Buffer in Node.js, maybe even a Stream (altho streaming would mostly involve collecting it into a buffer),
and from an ArrayBuffer in the browser
## Contributing
<!-- See CONTRIBUTING.md -->
### Development Setup

@@ -252,9 +345,7 @@

Run `npm test` to update a `regression-data` folder, and then view any changes with git.
If the changes are good/positive, that's good! Commit the changes along with the source code.
If the changes are bad/negative, try to fix the regression.
If all the files are deleted, not just changed, make sure to run `git submodule update --init`
- If the changes are good/positive, great! Commit the changes along with the source code, or in a separate "Accept" commit.
- If the changes are bad/negative, try to fix the regression.
- `*.out.2.*` files are for files that are saved differently when loading a saved file. Ideally we want none of these.
- If many files are deleted, check the console output. There are some test cases where it will exit early.
Don't commit `build/anypalette.js` until cutting a release
(to reduce noise and avoid conflicts when reverting and such).
Update [CHANGELOG.md](CHANGELOG.md)'s [Unreleased] section with any notable changes,

@@ -270,5 +361,7 @@ following the [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) format.

In [CHANGELOG.md](CHANGELOG.md), replace the [Unreleased] section with the next version number
(TODO: use [update-changelog](https://github.com/ukatama/update-changelog) (altho it doesn't support links to commit ranges; [this does, but it's for a different ecosystem](https://github.com/pajapro/fastlane-plugin-changelog)), and update the build within `npm version`)
- In [CHANGELOG.md](CHANGELOG.md), replace the [Unreleased] section with the next version.
- Make sure all the numbers are right. There's five version numbers and a date to update.
(TODO: use [update-changelog](https://github.com/ukatama/update-changelog) (altho it doesn't support links to commit ranges... [this does, but it's for a different ecosystem](https://github.com/pajapro/fastlane-plugin-changelog)))
npm run build

@@ -278,4 +371,4 @@ npm test

git add -A && git commit -m "Update for release"
npm version minor # or major or patch
npm version minor # or major or patch or a specific version number
git push --follow-tags # better than --tags!
npm publish
build/anypalette.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc