diff --git a/types/mapbox__spritezero/index.d.ts b/types/mapbox__spritezero/index.d.ts new file mode 100644 index 0000000000..3f847597dc --- /dev/null +++ b/types/mapbox__spritezero/index.d.ts @@ -0,0 +1,125 @@ +// Type definitions for @mapbox/spritezero 6.3 +// Project: https://github.com/mapbox/spritezero#readme +// Definitions by: Piotr Błażejewicz +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * Small opinionated sprites. + */ + +/** + * Decrease accuracy of floating-point numbers + * in path data keeping a specified number of decimals. + * Smart rounds values like 2.3491 to 2.35 instead of 2.349. + * Doesn't apply "smartness" if the number precision fits already. + * + * Taken from svgo at {@link https://github.com/svg/svgo/blob/72db8eb/plugins/convertPathData.js#L773} + */ +export function strongRound(value: number, precision?: number): number; + +/** + * Parses a SVG document and extracts metadata from its shapes and paths. + */ +export function extractMetadata(img: ImageObject, callback: ExtractCallback): Metadata; + +/** + * Pack a list of images with width and height into a sprite layout. + */ +export function generateLayout( + options: GenerateLayoutOptions, + callback: GenerateLayoutCallback, +): DataLayout | ImgLayout; + +/** + * Validates metadata that is parsed from an SVG metadata + */ +export function validateMetadata(img: ImageSize, metadata: Metadata): null | Error; + +/** + * Generate a PNG image with positioned icons on a sprite. + */ +export function generateImage(layout: ImgLayout, callback: GenerateImageCallback): void; + +export interface ImageObject { + /** A string of the SVG. */ + svg?: Buffer | string; + /** Ratio of a 72dpi screen pixel to the destination pixel density */ + pixelRatio?: number; +} + +export interface ExtractCallback { + (err: Error | null, metadata: Metadata): void; +} + +/** + * A Metadata objects stores information about how an image can be stretched in a non-linear. + * The keys of the Object are the icon ids. The values of the Object are the structured data about each icon + */ +export interface Metadata { + [id: string]: Array; +} + +export interface GenerateLayoutOptions { + imgs: Array<{ + svg: Buffer; + id: string; + }>; + /** Ratio of a 72dpi screen pixel to the destination pixel density */ + pixelRatio: number; + /** If true, generate DataLayout ; if false, generate ImgLayout */ + format: boolean; + /** overrides the max_size in mapnik */ + maxIconSize?: number; + /** filters out icons that mapnik says are too big */ + removeOversizedIcons?: boolean; +} + +export interface GenerateLayoutCallback { + (err: Error | null, layout: DataLayout | ImgLayout): void; +} + +/** + * A DataLayout Object contains all the metadata about the contents of the sprite. + * This data can be exported to a JSON sprite manifest file. + * The keys of the Object are the icon ids. + * The values of the Object are the structured data about each icon. + */ +export interface DataLayout { + [id: string]: StructuredData; +} + +export interface StructuredData { + width: number; + height: number; + pixelRatio: number; + x: number; + y: number; +} + +/** + * A ImgLayout Object contains the array of image items along with dimensions + * and a buffer of image data that can be used for generating the output image + */ +export interface ImgLayout { + width: number; + height: number; + items: ImageItem[]; +} + +export interface ImageItem extends ImageSize { + x: number; + y: number; + buffer: string; +} + +/** + * An image object with width and height . + */ +export interface ImageSize { + width: number; + height: number; +} + +export interface GenerateImageCallback { + (err: Error | null, img: Buffer): void; +} diff --git a/types/mapbox__spritezero/mapbox__spritezero-tests.ts b/types/mapbox__spritezero/mapbox__spritezero-tests.ts new file mode 100644 index 0000000000..f92294f730 --- /dev/null +++ b/types/mapbox__spritezero/mapbox__spritezero-tests.ts @@ -0,0 +1,92 @@ +/// + +import spritezero = require('@mapbox/spritezero'); +import fs = require('fs'); +import glob = require('glob'); +import path = require('path'); + +spritezero.strongRound(2.3491, 2); // $ExpectType number +spritezero.strongRound(2.3491); // $ExpectType number + +const metadata: spritezero.Metadata = { + content: [2, 5, 18, 11], + stretchX: [ + [3, 7], + [14, 18], + ], + stretchY: [[5, 11]], +}; + +const dataLayout: spritezero.DataLayout = { + 'aerialway-12': { + width: 12, + height: 12, + pixelRatio: 1, + x: 133, + y: 282, + }, +}; + +const imgLayout: spritezero.ImgLayout = { + width: 512, + height: 512, + items: [ + { + height: 12, + width: 12, + x: 133, + y: 282, + buffer: '...', + }, + { + height: 12, + width: 12, + x: 133, + y: 282, + buffer: '...', + }, + ], +}; + +// $ExpectType Error | null +spritezero.validateMetadata( + { + width: 512, + height: 512, + }, + { content: [2, 2, 22, 16] }, +); + +spritezero.extractMetadata( + { + svg: fs.readFileSync(`${__dirname}/fixture/svg-metadata/cn-nths-expy-2-affinity.svg`, 'utf-8'), + }, + (err, metadata) => { + if (err) { + console.log(err); + } else { + metadata; // $ExpectType Metadata + } + }, +); + +[1, 2, 4].forEach(pxRatio => { + const svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg'))).map(f => { + return { + svg: fs.readFileSync(f), + id: path.basename(f).replace('.svg', ''), + }; + }); + const pngPath = path.resolve(path.join(__dirname, `output/sprite@${pxRatio}.png`)); + const jsonPath = path.resolve(path.join(__dirname, `output/sprite@${pxRatio}.json`)); + spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, (err, dataLayout) => { + if (err) return; + fs.writeFileSync(jsonPath, JSON.stringify(dataLayout)); + }); + spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, (err, imageLayout) => { + spritezero.generateImage(imageLayout as spritezero.ImgLayout, (err, image) => { + if (err) return; + fs.writeFileSync(pngPath, image); + }); + }); +}); diff --git a/types/mapbox__spritezero/tsconfig.json b/types/mapbox__spritezero/tsconfig.json new file mode 100644 index 0000000000..3825c8fc55 --- /dev/null +++ b/types/mapbox__spritezero/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "paths": { + "@mapbox/spritezero": [ + "mapbox__spritezero" + ] + }, + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "mapbox__spritezero-tests.ts" + ] +} diff --git a/types/mapbox__spritezero/tslint.json b/types/mapbox__spritezero/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/mapbox__spritezero/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }