@antv/infographic 0.0.1-beta.1

package/lib/renderer/palettes/built-in.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spectral = exports.antv = void 0;
+const registry_1 = require("./registry");
+exports.antv = [
+    '#1783FF',
+    '#00C9C9',
+    '#F0884D',
+    '#D580FF',
+    '#7863FF',
+    '#60C42D',
+    '#BD8F24',
+    '#FF80CA',
+    '#2491B3',
+    '#17C76F',
+    '#70CAF8',
+];
+(0, registry_1.registerPalette)('antv', exports.antv);
+const spectral = (_, index, count) => {
+    const colors = [
+        ['#fc8d59', '#ffffbf', '#99d594'],
+        ['#d7191c', '#fdae61', '#abdda4', '#2b83ba'],
+        ['#d7191c', '#fdae61', '#ffffbf', '#abdda4', '#2b83ba'],
+        ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd'],
+        [
+            '#d53e4f',
+            '#fc8d59',
+            '#fee08b',
+            '#ffffbf',
+            '#e6f598',
+            '#99d594',
+            '#3288bd',
+        ],
+        [
+            '#d53e4f',
+            '#f46d43',
+            '#fdae61',
+            '#fee08b',
+            '#e6f598',
+            '#abdda4',
+            '#66c2a5',
+            '#3288bd',
+        ],
+        [
+            '#d53e4f',
+            '#f46d43',
+            '#fdae61',
+            '#fee08b',
+            '#ffffbf',
+            '#e6f598',
+            '#abdda4',
+            '#66c2a5',
+            '#3288bd',
+        ],
+        [
+            '#9e0142',
+            '#d53e4f',
+            '#f46d43',
+            '#fdae61',
+            '#fee08b',
+            '#e6f598',
+            '#abdda4',
+            '#66c2a5',
+            '#3288bd',
+            '#5e4fa2',
+        ],
+        [
+            '#9e0142',
+            '#d53e4f',
+            '#f46d43',
+            '#fdae61',
+            '#fee08b',
+            '#ffffbf',
+            '#e6f598',
+            '#abdda4',
+            '#66c2a5',
+            '#3288bd',
+            '#5e4fa2',
+        ],
+    ];
+    const size = Math.min(Math.max(count, 3), 11);
+    return colors[size - 3][index % size];
+};
+exports.spectral = spectral;
+(0, registry_1.registerPalette)('spectral', exports.spectral);

package/lib/renderer/palettes/index.d.ts

@@ -0,0 +1,5 @@
+import './built-in';
+import { getPalette, registerPalette } from './registry';
+export type { Palette } from './types';
+export { getPaletteColor } from './utils';
+export { getPalette, registerPalette };

package/lib/renderer/palettes/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerPalette = exports.getPalette = exports.getPaletteColor = void 0;
+require("./built-in");
+const registry_1 = require("./registry");
+Object.defineProperty(exports, "getPalette", { enumerable: true, get: function () { return registry_1.getPalette; } });
+Object.defineProperty(exports, "registerPalette", { enumerable: true, get: function () { return registry_1.registerPalette; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getPaletteColor", { enumerable: true, get: function () { return utils_1.getPaletteColor; } });

package/lib/renderer/palettes/registry.d.ts

@@ -0,0 +1,3 @@
+import type { Palette } from './types';
+export declare function registerPalette(name: string, palette: Palette): void;
+export declare function getPalette(type: string): Palette | undefined;

package/lib/renderer/palettes/registry.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerPalette = registerPalette;
+exports.getPalette = getPalette;
+const PALETTE_REGISTRY = new Map();
+function registerPalette(name, palette) {
+    PALETTE_REGISTRY.set(name, palette);
+}
+function getPalette(type) {
+    return PALETTE_REGISTRY.get(type);
+}

package/lib/renderer/palettes/types.d.ts

@@ -0,0 +1 @@
+export type Palette = string | string[] | ((ratio: number, index: number, count: number) => string);

package/lib/renderer/palettes/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/renderer/palettes/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Palette } from './types';
+export declare const getPaletteColor: (args: (string | Palette) | undefined, indexes: number[], total?: number) => string | undefined;

package/lib/renderer/palettes/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaletteColor = void 0;
+const registry_1 = require("./registry");
+const getPaletteColor = (args = [], indexes, total) => {
+    const palette = typeof args === 'string' ? (0, registry_1.getPalette)(args) || [] : args;
+    const index = indexes[0] ?? 0;
+    if (typeof palette === 'function') {
+        const ratio = total ? index / total : 0;
+        return palette(ratio, index, total ?? 0);
+    }
+    if (Array.isArray(palette)) {
+        if (palette.length === 0)
+            return;
+        return palette[index % palette.length];
+    }
+};
+exports.getPaletteColor = getPaletteColor;

package/lib/renderer/renderer.d.ts

@@ -0,0 +1,11 @@
+import type { ParsedInfographicOptions } from '../options';
+import type { IRenderer } from './types';
+export declare class Renderer implements IRenderer {
+    private options;
+    private template;
+    private rendered;
+    constructor(options: ParsedInfographicOptions, template: SVGSVGElement);
+    getOptions(): ParsedInfographicOptions;
+    getSVG(): SVGSVGElement;
+    render(): SVGSVGElement;
+}

package/lib/renderer/renderer.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Renderer = void 0;
+const utils_1 = require("../utils");
+const composites_1 = require("./composites");
+const fonts_1 = require("./fonts");
+const palettes_1 = require("./palettes");
+const upsert = (original, modified) => {
+    if (original === modified)
+        return;
+    if (!modified)
+        original.remove();
+    else
+        original.replaceWith(modified);
+};
+class Renderer {
+    constructor(options, template) {
+        this.options = options;
+        this.template = template;
+        this.rendered = false;
+    }
+    getOptions() {
+        return this.options;
+    }
+    getSVG() {
+        return this.template;
+    }
+    render() {
+        const svg = this.getSVG();
+        if (this.rendered)
+            return svg;
+        renderTemplate(svg, this.options);
+        svg.style.visibility = 'hidden';
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node === svg || node.contains(svg)) {
+                        // post render
+                        setView(this.template, this.options);
+                        (0, fonts_1.loadFonts)(this.template);
+                        // disconnect observer
+                        observer.disconnect();
+                        svg.style.visibility = '';
+                    }
+                });
+            });
+        });
+        observer.observe(document, {
+            childList: true,
+            subtree: true,
+        });
+        this.rendered = true;
+        return svg;
+    }
+}
+exports.Renderer = Renderer;
+function renderTemplate(svg, options) {
+    fill(svg, options);
+    setSVG(svg, options);
+    const { themeConfig } = options;
+    (0, composites_1.renderBackground)(svg, themeConfig?.colorBg);
+}
+function fill(svg, options) {
+    const { themeConfig, data } = options;
+    const traverse = (element) => {
+        if ((0, utils_1.isSVG)(element)) {
+            (0, composites_1.renderSVG)(svg, options);
+            return Array.from(element.children).forEach((child) => {
+                traverse(child);
+            });
+        }
+        const id = element.id || '';
+        if ((0, utils_1.isTitle)(element)) {
+            const modified = (0, composites_1.renderText)(element, data.title || '', Object.assign({}, themeConfig.base?.text, themeConfig.title));
+            return upsert(element, modified);
+        }
+        if ((0, utils_1.isDesc)(element)) {
+            const modified = (0, composites_1.renderText)(element, data.desc || '', Object.assign({}, themeConfig.base?.text, themeConfig.desc));
+            return upsert(element, modified);
+        }
+        if ((0, utils_1.isIllus)(element)) {
+            const modified = (0, composites_1.renderIllus)(svg, element, data.illus?.[id]);
+            return upsert(element, modified);
+        }
+        if ((0, utils_1.isShapeGroup)(element)) {
+            return Array.from(element.children).forEach((child) => {
+                (0, composites_1.renderShape)(svg, child, options);
+            });
+        }
+        if ((0, utils_1.isShape)(element)) {
+            const modified = (0, composites_1.renderShape)(svg, element, options);
+            return upsert(element, modified);
+        }
+        if ((0, utils_1.isBtnsGroup)(element)) {
+            return (0, composites_1.renderButtonsGroup)(svg, element);
+        }
+        if ((0, utils_1.isItemElement)(element)) {
+            const [, , itemType] = id.split('-');
+            const indexes = (0, utils_1.getItemIndexes)(id);
+            const primaryColor = (0, palettes_1.getPaletteColor)(themeConfig.palette, (0, utils_1.getItemIndexes)(id), data.items.length);
+            if ((0, utils_1.isItemLabel)(element) || (0, utils_1.isItemDesc)(element) || (0, utils_1.isItemValue)(element)) {
+                const modified = (0, composites_1.renderItemText)(itemType, element, options, primaryColor);
+                return upsert(element, modified);
+            }
+            if ((0, utils_1.isItemIllus)(element)) {
+                const modified = (0, composites_1.renderIllus)(svg, element, (0, utils_1.getDatumByIndexes)(data, indexes)?.illus);
+                return upsert(element, modified);
+            }
+            if ((0, utils_1.isItemIconGroup)(element)) {
+                element.setAttribute('data-element-type', "icon-group" /* ElementTypeEnum.IconGroup */);
+            }
+            if ((0, utils_1.isItemIcon)(element)) {
+                const modified = (0, composites_1.renderItemIcon)(svg, element, (0, utils_1.getDatumByIndexes)(data, indexes)?.icon, options);
+                return upsert(element, modified);
+            }
+            if ((0, utils_1.isItemShapesGroup)(element)) {
+                return Array.from(element.children).forEach((child) => {
+                    (0, composites_1.renderItemShape)(svg, child, options, primaryColor);
+                });
+            }
+            if ((0, utils_1.isItemShape)(element)) {
+                const modified = (0, composites_1.renderItemShape)(svg, element, options, primaryColor);
+                return upsert(element, modified);
+            }
+        }
+        if ((0, utils_1.isText)(element)) {
+            return (0, composites_1.renderStaticText)(element, options);
+        }
+        if (!(0, utils_1.isGroup)(element)) {
+            return (0, composites_1.renderStaticShape)(element, options);
+        }
+        Array.from(element.children).forEach((child) => {
+            traverse(child);
+        });
+    };
+    traverse(svg);
+}
+function setSVG(svg, options) {
+    const { width, height } = options;
+    const { style = {}, attributes = {}, id, className } = options.svg || {};
+    if (id)
+        svg.id = id;
+    if (className)
+        svg.classList.add(className);
+    if (width !== undefined) {
+        svg.setAttribute('width', typeof width === 'number' ? `${width}px` : width);
+    }
+    if (height !== undefined) {
+        svg.setAttribute('height', typeof height === 'number' ? `${height}px` : height);
+    }
+    Object.assign(svg.style, style);
+    (0, utils_1.setAttributes)(svg, attributes);
+}
+function setView(svg, options) {
+    const { padding = 20, viewBox } = options;
+    if (viewBox) {
+        svg.setAttribute('viewBox', viewBox);
+    }
+    else if (padding !== undefined) {
+        setSVGPadding(svg, (0, utils_1.parsePadding)(padding));
+    }
+}
+function setSVGPadding(svg, padding, options = {}) {
+    const { preserveAspectRatio = false } = options;
+    if (!svg.isConnected)
+        return false;
+    try {
+        const bbox = svg.getBBox();
+        // 检查包围盒是否有效
+        if (bbox.width === 0 || bbox.height === 0) {
+            return false;
+        }
+        const [widthBaseVal, heightBaseVal] = (0, utils_1.getSizeBaseVal)(svg);
+        const svgWidth = widthBaseVal || svg.clientWidth || 0;
+        const svgHeight = heightBaseVal || svg.clientHeight || 0;
+        const parentElement = svg.parentElement;
+        const effectiveWidth = svgWidth || (parentElement ? parentElement.clientWidth : 300);
+        const effectiveHeight = svgHeight || (parentElement ? parentElement.clientHeight : 150);
+        let viewBoxPadding;
+        if (effectiveWidth > 0 && effectiveHeight > 0) {
+            const scaleX = bbox.width / effectiveWidth;
+            const scaleY = bbox.height / effectiveHeight;
+            if (preserveAspectRatio) {
+                const scale = Math.max(scaleX, scaleY);
+                viewBoxPadding = padding.map((p) => p * scale);
+            }
+            else {
+                viewBoxPadding = [
+                    padding[0] * scaleY,
+                    padding[1] * scaleX,
+                    padding[2] * scaleY,
+                    padding[3] * scaleX,
+                ];
+            }
+        }
+        else {
+            viewBoxPadding = [...padding];
+        }
+        const newViewBox = [
+            bbox.x - viewBoxPadding[3],
+            bbox.y - viewBoxPadding[0],
+            bbox.width + viewBoxPadding[1] + viewBoxPadding[3],
+            bbox.height + viewBoxPadding[0] + viewBoxPadding[2],
+        ].join(' ');
+        svg.setAttribute('viewBox', newViewBox);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/lib/renderer/stylize/gradient.d.ts

@@ -0,0 +1,2 @@
+import type { GradientConfig } from '../types';
+export declare function applyGradientStyle(node: SVGElement, svg: SVGSVGElement, config: GradientConfig, attr: 'fill' | 'stroke'): void;

package/lib/renderer/stylize/gradient.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyGradientStyle = applyGradientStyle;
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+function applyGradientStyle(node, svg, config, attr) {
+    const currentColor = node.getAttribute(attr);
+    const actualConfig = inferGradientConfig(currentColor, config);
+    const { type, colors = [] } = actualConfig;
+    const size = colors.length - 1;
+    const stops = colors.map((color, index) => {
+        if (typeof color === 'string') {
+            return (0, utils_1.createElement)('stop', {
+                offset: `${index / size}`,
+                'stop-color': color,
+            });
+        }
+        else {
+            return (0, utils_1.createElement)('stop', {
+                offset: `${color.offset}`,
+                'stop-color': color.color,
+            });
+        }
+    });
+    const id = getGradientId(config);
+    if (type === 'linear-gradient') {
+        const { angle = 0 } = actualConfig;
+        const [[x1, y1], [x2, y2]] = angleToUnitVector(angle);
+        const linearGradient = (0, utils_1.createElement)('linearGradient', {
+            id,
+            x1,
+            y1,
+            x2,
+            y2,
+        });
+        stops.forEach((stop) => linearGradient.appendChild(stop));
+        upsertGradient(svg, id, linearGradient);
+    }
+    else if (type === 'radial-gradient') {
+        const radialGradient = (0, utils_1.createElement)('radialGradient', {
+            id,
+        });
+        stops.forEach((stop) => radialGradient.appendChild(stop));
+        upsertGradient(svg, id, radialGradient);
+    }
+    const fill = node.getAttribute('fill');
+    const stroke = node.getAttribute('stroke');
+    if ((0, utils_1.hasColor)(fill))
+        node.setAttribute('fill', `url(#${id})`);
+    if ((0, utils_1.hasColor)(stroke))
+        node.setAttribute('stroke', `url(#${id})`);
+}
+function upsertGradient(svg, id, gradient) {
+    const defs = (0, utils_1.getOrCreateDefs)(svg);
+    gradient.setAttribute('id', id);
+    const exist = defs.querySelector(`#${id}`);
+    if (exist)
+        exist.replaceWith(gradient);
+    else
+        defs.appendChild(gradient);
+}
+function inferGradientConfig(currentColor, config) {
+    if (config.colors?.length || !currentColor)
+        return config;
+    const tc = (0, tinycolor2_1.default)(currentColor);
+    const inferConfig = { ...config };
+    inferConfig.colors = tc.isDark()
+        ? [currentColor, tc.lighten(20).toHexString()]
+        : [tc.darken(20).toHexString(), currentColor];
+    if (!('angle' in config) && inferConfig.type === 'linear-gradient') {
+        inferConfig.angle = 225;
+    }
+    return inferConfig;
+}
+function getGradientId(config) {
+    const { type, colors = [] } = config;
+    const colorId = (0, utils_2.getSafetyId)(colors
+        .map((color) => {
+        if (typeof color === 'string')
+            return color;
+        return `${color.color}_${color.offset}`;
+    })
+        .join('-'));
+    if (type === 'linear-gradient') {
+        const { angle = 0 } = config;
+        return `${type}-${colorId}-${angle}`;
+    }
+    return `${type}-${colorId}`;
+}
+/**
+ * 将角度转为单位向量（屏幕坐标系）
+ * 0 度为 x 轴正方向
+ * 90 度为 y 轴正方向
+ * 返回 x1,y1,x2,y2 供 <linearGradient> 使用
+ */
+function angleToUnitVector(angle) {
+    const radians = (Math.PI / 180) * angle;
+    const x = Math.cos(radians);
+    const y = Math.sin(radians);
+    return [
+        [0.5 - x / 2, 0.5 - y / 2], // 起点
+        [0.5 + x / 2, 0.5 + y / 2], // 终点
+    ];
+}

package/lib/renderer/stylize/index.d.ts

@@ -0,0 +1,3 @@
+export { applyGradientStyle } from './gradient';
+export { applyPatternStyle } from './pattern';
+export { applyRoughStyle } from './rough';

package/lib/renderer/stylize/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyRoughStyle = exports.applyPatternStyle = exports.applyGradientStyle = void 0;
+var gradient_1 = require("./gradient");
+Object.defineProperty(exports, "applyGradientStyle", { enumerable: true, get: function () { return gradient_1.applyGradientStyle; } });
+var pattern_1 = require("./pattern");
+Object.defineProperty(exports, "applyPatternStyle", { enumerable: true, get: function () { return pattern_1.applyPatternStyle; } });
+var rough_1 = require("./rough");
+Object.defineProperty(exports, "applyRoughStyle", { enumerable: true, get: function () { return rough_1.applyRoughStyle; } });

package/lib/renderer/stylize/pattern.d.ts

@@ -0,0 +1,3 @@
+import type { PatternConfig, PatternGenerator } from '../types';
+export declare function registerPattern(name: string, generator: PatternGenerator): void;
+export declare function applyPatternStyle(node: SVGElement, svg: SVGSVGElement, config: PatternConfig): void;

package/lib/renderer/stylize/pattern.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerPattern = registerPattern;
+exports.applyPatternStyle = applyPatternStyle;
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+const builtInPatterns = __importStar(require("./patterns"));
+const PATTERNS = new Map();
+function registerPattern(name, generator) {
+    if (PATTERNS.has(name))
+        console.warn(`Pattern ${name} will be overwritten`);
+    PATTERNS.set(name, generator);
+}
+for (const [name, generator] of Object.entries(builtInPatterns)) {
+    registerPattern(name, generator);
+}
+function applyPatternStyle(node, svg, config) {
+    const { pattern, ...restConfig } = config;
+    const generator = PATTERNS.get(pattern);
+    if (!generator) {
+        return console.warn(`Pattern ${pattern} not found`);
+    }
+    const { fill, stroke } = (0, utils_1.getAttributes)(node, ['fill', 'stroke']);
+    const style = {
+        backgroundColor: (0, tinycolor2_1.default)('#fff').toHexString(),
+        foregroundColor: getColorDistance(fill || 'white', '#fff') >
+            getColorDistance(stroke || 'white', '#fff')
+            ? fill
+            : stroke,
+        ...restConfig,
+    };
+    const id = getPatternId({ ...config, ...style });
+    upsertPattern(svg, id, generator(style));
+    if ((0, utils_1.hasColor)(fill)) {
+        node.setAttribute('fill', `url(#${id})`);
+        if (!node.getAttribute('stroke') && fill) {
+            node.setAttribute('stroke', fill);
+        }
+    }
+}
+function upsertPattern(svg, id, pattern) {
+    const defs = (0, utils_1.getOrCreateDefs)(svg);
+    pattern.setAttribute('id', id);
+    const exist = defs.querySelector(`pattern#${id}`);
+    if (exist)
+        exist.replaceWith(pattern);
+    else
+        defs.appendChild(pattern);
+}
+function getPatternId(config) {
+    const { pattern, foregroundColor = 'unset', backgroundColor = 'unset', scale = 'unset', } = config;
+    return (0, utils_2.getSafetyId)(`pattern-${pattern}-${foregroundColor}-${backgroundColor}-${scale}`);
+}
+function getColorDistance(a, b) {
+    const _a = (0, tinycolor2_1.default)(a).toRgb();
+    const _b = (0, tinycolor2_1.default)(b).toRgb();
+    return Math.sqrt(Math.pow(_b.r - _a.r, 2) +
+        Math.pow(_b.g - _a.g, 2) +
+        Math.pow(_b.b - _a.b, 2));
+}

package/lib/renderer/stylize/patterns/diamond.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const diamond: PatternGenerator;

package/lib/renderer/stylize/patterns/diamond.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.diamond = void 0;
+const utils_1 = require("../../../utils");
+const diamond = ({ scale = 0.5, backgroundColor, foregroundColor, }) => {
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-diamond',
+        width: '20',
+        height: '20',
+        patternTransform: `scale(${scale})`,
+        patternUnits: 'userSpaceOnUse',
+    });
+    const rect = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    const path = (0, utils_1.createElement)('path', {
+        d: 'M0,0 L20,20 M20,0 L0,20',
+        stroke: foregroundColor,
+        'stroke-width': '1',
+    });
+    pattern.appendChild(rect);
+    pattern.appendChild(path);
+    return pattern;
+};
+exports.diamond = diamond;

package/lib/renderer/stylize/patterns/dot.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const dot: PatternGenerator;

package/lib/renderer/stylize/patterns/dot.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dot = void 0;
+const utils_1 = require("../../../utils");
+const dot = ({ scale = 1, backgroundColor, foregroundColor, }) => {
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-dot',
+        width: '20',
+        height: '20',
+        patternTransform: `scale(${scale})`,
+        patternUnits: 'userSpaceOnUse',
+    });
+    const rect = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    const circle1 = (0, utils_1.createElement)('circle', {
+        cx: '5',
+        cy: '5',
+        r: '3',
+        fill: foregroundColor,
+    });
+    const circle2 = (0, utils_1.createElement)('circle', {
+        cx: '15',
+        cy: '15',
+        r: '3',
+        fill: foregroundColor,
+    });
+    pattern.appendChild(rect);
+    pattern.appendChild(circle1);
+    pattern.appendChild(circle2);
+    return pattern;
+};
+exports.dot = dot;