@dicebear/core 5.0.4 → 5.1.1

package/lib/core.js

@@ -3,12 +3,15 @@ import { merge as mergeOptions } from './utils/options.js';
 import { create as createPrng } from './utils/prng.js';
 import * as license from './utils/license.js';
 import { toFormat } from '@dicebear/converter';
+import { getBackgroundColors } from './utils/color.js';
 export function createAvatar(style, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     options = mergeOptions(style, options);
     const prng = createPrng(options.seed);
     const result = style.create({ prng: prng, options });
-    const backgroundColor = prng.pick((_a = options.backgroundColor) !== null && _a !== void 0 ? _a : []);
+    const { primary: primaryBackgroundColor, secondary: secondaryBackgroundColor, } = getBackgroundColors(prng, (_a = options.backgroundColor) !== null && _a !== void 0 ? _a : []);
+    const backgroundType = prng.pick((_b = options.backgroundType) !== null && _b !== void 0 ? _b : [], 'solid');
+    const backgroundRotation = prng.pick((_c = options.backgroundRotation) !== null && _c !== void 0 ? _c : [], 0);
     if (options.size) {
         result.attributes.width = options.size.toString();
         result.attributes.height = options.size.toString();
@@ -25,26 +28,40 @@ export function createAvatar(style, options = {}) {
     if (options.translateX || options.translateY) {
         result.body = svgUtils.addTranslate(result, options.translateX, options.translateY);
     }
-    if (backgroundColor && backgroundColor !== 'transparent') {
-        result.body = svgUtils.addBackgroundColor(result, backgroundColor);
+    if (primaryBackgroundColor !== 'transparent' &&
+        secondaryBackgroundColor !== 'transparent') {
+        result.body = svgUtils.addBackground(result, primaryBackgroundColor, secondaryBackgroundColor, backgroundType, backgroundRotation);
     }
     if (options.radius || options.clip) {
-        result.body = svgUtils.addViewboxMask(result, (_b = options.radius) !== null && _b !== void 0 ? _b : 0);
+        result.body = svgUtils.addViewboxMask(result, (_d = options.radius) !== null && _d !== void 0 ? _d : 0);
     }
     // Reduces the occurrence of ID collisions when rendering multiple avatars on one HTML page.
     result.body = svgUtils.randomizeIds(result, prng.seed);
     const attributes = svgUtils.createAttrString(result);
     const metadata = license.xml(style);
     const exif = license.exif(style);
-    const avatar = `<svg ${attributes}>${metadata}${result.body}</svg>`;
+    const svg = `<svg ${attributes}>${metadata}${result.body}</svg>`;
     return {
-        toString: () => avatar,
-        ...toFormat(avatar, 'svg'),
+        toString: () => svg,
+        toJson: () => {
+            var _a;
+            return ({
+                svg: svg,
+                extra: {
+                    primaryBackgroundColor,
+                    secondaryBackgroundColor,
+                    backgroundType,
+                    backgroundRotation,
+                    ...(_a = result.extra) === null || _a === void 0 ? void 0 : _a.call(result),
+                },
+            });
+        },
+        ...toFormat(svg, 'svg'),
         png: ({ includeExif = false } = {}) => {
-            return toFormat(avatar, 'png', includeExif ? exif : undefined);
+            return toFormat(svg, 'png', includeExif ? exif : undefined);
         },
         jpeg: ({ includeExif = false } = {}) => {
-            return toFormat(avatar, 'jpeg', includeExif ? exif : undefined);
+            return toFormat(svg, 'jpeg', includeExif ? exif : undefined);
         },
     };
 }

package/lib/schema.js

@@ -38,6 +38,27 @@ export const schema = {
                 pattern: '^(transparent|[a-fA-F0-9]{6})$',
             },
         },
+        backgroundType: {
+            type: 'array',
+            items: {
+                type: 'string',
+                enum: ['solid', 'gradientLinear'],
+            },
+            default: ['solid'],
+        },
+        backgroundRotation: {
+            type: 'array',
+            items: {
+                type: 'integer',
+                minimum: 0,
+                maximum: 360,
+            },
+            default: [
+                0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150,
+                160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
+                300, 310, 320, 330, 340, 350,
+            ],
+        },
         translateX: {
             type: 'integer',
             minimum: -100,

package/lib/types.d.ts

@@ -7,7 +7,12 @@ export interface Result extends ConverterResult {
     png(options?: ResultConvertOptions): ConverterResult;
     jpeg(options?: ResultConvertOptions): ConverterResult;
     toString(): string;
+    toJson(): {
+        svg: string;
+        extra: Record<string, unknown>;
+    };
 }
+export type BackgroundType = 'solid' | 'gradientLinear';
 export interface Options {
     seed?: string;
     flip?: boolean;
@@ -16,6 +21,8 @@ export interface Options {
     radius?: number;
     size?: number;
     backgroundColor?: string[];
+    backgroundType?: BackgroundType[];
+    backgroundRotation?: number[];
     translateX?: number;
     translateY?: number;
     clip?: boolean;
@@ -29,7 +36,9 @@ export interface Prng {
     next(): void;
     bool(likelihood?: number): boolean;
     integer(min: number, max: number): number;
+    pick<T>(arr: T[], fallback: T): T;
     pick<T>(arr: T[]): T | undefined;
+    shuffle<T>(arr: T[]): T[];
     string(length: number, characters?: string): string;
 }
 export type StyleSchema = JSONSchema7;
@@ -46,6 +55,7 @@ export interface StyleCreateResultAttributes {
 export interface StyleCreateResult {
     attributes: StyleCreateResultAttributes;
     body: string;
+    extra?: () => Record<string, unknown>;
 }
 export interface StyleMeta {
     title?: string;

package/lib/utils/color.d.ts

@@ -0,0 +1,6 @@
+import { Prng } from '../types';
+export declare function convertColor(color: string): string;
+export declare function getBackgroundColors(prng: Prng, backgroundColor: string[]): {
+    primary: string;
+    secondary: string;
+};

package/lib/utils/color.js

@@ -0,0 +1,24 @@
+export function convertColor(color) {
+    return 'transparent' === color ? color : `#${color}`;
+}
+export function getBackgroundColors(prng, backgroundColor) {
+    var _a;
+    let shuffledBackgroundColors;
+    if (backgroundColor.length <= 2) {
+        // A function call should in any case make an identical number of calls to the PRNG.
+        prng.next();
+        shuffledBackgroundColors = backgroundColor;
+    }
+    else {
+        shuffledBackgroundColors = prng.shuffle(backgroundColor);
+    }
+    if (shuffledBackgroundColors.length === 0) {
+        shuffledBackgroundColors = ['transparent'];
+    }
+    const primary = shuffledBackgroundColors[0];
+    const secondary = (_a = shuffledBackgroundColors[1]) !== null && _a !== void 0 ? _a : shuffledBackgroundColors[0];
+    return {
+        primary: convertColor(primary),
+        secondary: convertColor(secondary),
+    };
+}

package/lib/utils/prng.js

@@ -31,17 +31,27 @@ export function create(seed = '') {
         integer(min, max) {
             return integer(min, max);
         },
-        pick(arr) {
+        pick(arr, fallback) {
+            var _a;
             if (arr.length === 0) {
                 next();
                 return undefined;
             }
-            return arr[integer(0, arr.length - 1)];
+            return (_a = arr[integer(0, arr.length - 1)]) !== null && _a !== void 0 ? _a : fallback;
+        },
+        shuffle(arr) {
+            // Each method call should call the `next` function only once.
+            // Therefore, we use a separate instance of the PRNG here.
+            const internalPrng = create(next().toString());
+            return arr.sort(() => internalPrng.integer(-1, 1));
         },
         string(length, characters = 'abcdefghijklmnopqrstuvwxyz1234567890') {
+            // Each method call should call the `next` function only once.
+            // Therefore, we use a separate instance of the PRNG here.
+            const internalPrng = create(next().toString());
             let str = '';
             for (let i = 0; i < length; i++) {
-                str += characters[integer(0, characters.length - 1)];
+                str += characters[internalPrng.integer(0, characters.length - 1)];
             }
             return str;
         },

package/lib/utils/svg.d.ts

@@ -1,11 +1,11 @@
-import type { StyleCreateResult } from '../types.js';
+import type { BackgroundType, StyleCreateResult } from '../types.js';
 export declare function getViewBox(result: StyleCreateResult): {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-export declare function addBackgroundColor(result: StyleCreateResult, backgroundColor: string): string;
+export declare function addBackground(result: StyleCreateResult, primaryColor: string, secondaryColor: string, type: BackgroundType, rotation: number): string;
 export declare function addScale(result: StyleCreateResult, scale: number): string;
 export declare function addTranslate(result: StyleCreateResult, x?: number, y?: number): string;
 export declare function addRotate(result: StyleCreateResult, rotate: number): string;

package/lib/utils/svg.js

@@ -13,9 +13,22 @@ export function getViewBox(result) {
         height,
     };
 }
-export function addBackgroundColor(result, backgroundColor) {
+export function addBackground(result, primaryColor, secondaryColor, type, rotation) {
     let { width, height, x, y } = getViewBox(result);
-    return `<rect fill="#${backgroundColor}" width="${width}" height="${height}" x="${x}" y="${y}" />${result.body}`;
+    const solidBackground = `<rect fill="#${primaryColor}" width="${width}" height="${height}" x="${x}" y="${y}" />`;
+    switch (type) {
+        case 'solid':
+            return solidBackground + result.body;
+        case 'gradientLinear':
+            return (`<rect fill="url(#backgroundLinear)" width="${width}" height="${height}" x="${x}" y="${y}" />` +
+                `<defs>` +
+                `<linearGradient id="backgroundLinear" gradientTransform="rotate(${rotation} 0.5 0.5)">` +
+                `<stop stop-color="${primaryColor}"/>` +
+                `<stop offset="1" stop-color="${secondaryColor}"/>` +
+                `</linearGradient>` +
+                `</defs>` +
+                result.body);
+    }
 }
 export function addScale(result, scale) {
     let { width, height, x, y } = getViewBox(result);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dicebear/core",
-  "version": "5.0.4",
+  "version": "5.1.1",
   "description": "An avatar library for designers and developers.",
   "keywords": [
     "avatar",
@@ -32,7 +32,7 @@
     "test": "uvu tests"
   },
   "dependencies": {
-    "@dicebear/converter": "^5.0.4"
+    "@dicebear/converter": "^5.1.1"
   },
   "devDependencies": {
     "@tsconfig/recommended": "^1.0.1",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0158d13ad3760498a3622ca8bda8420929acc6dc"
+  "gitHead": "0c544971431b02f8783598b4f821a6341b9fff0a"
 }