@techie_doubts/tui.chart.2026 4.6.1

package/README.md

@@ -0,0 +1,165 @@
+# ![Toast UI Chart](https://user-images.githubusercontent.com/35218826/37320160-c4d6dec4-26b5-11e8-9a91-79bb2b882410.png)
+
+> 🍞📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library
+
+[![npm](https://img.shields.io/npm/v/@techie_doubts/tui.chart.2026.svg)](https://www.npmjs.com/package/@techie_doubts/tui.chart.2026)
+
+## 🚩 Table of Contents
+
+- [Toast UI Chart](#)
+  - [🚩 Table of Contents](#-table-of-contents)
+  - [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
+  - [💾 Install](#-install)
+    - [Via Package Manager](#via-package-manager)
+      - [npm](#npm)
+    - [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)
+    - [Download Source Files](#download-source-files)
+  - [🔨 Usage](#-usage)
+    - [HTML](#html)
+    - [JavaScript](#javascript)
+      - [Load](#load)
+
+## Collect statistics on the use of open source
+
+TOAST UI Chart applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Chart is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` option when creating charts.
+
+```js
+const options = {
+  // ...
+  usageStatistics: false,
+};
+
+toastui.Chart.barChart({ el, data, options });
+```
+
+## 💾 Install
+
+The TOAST UI products can be installed by using the package manager or downloading the source directly.
+However, we highly recommend using the package manager.
+
+### Via Package Manager
+
+The TOAST UI products are registered in [npm](https://www.npmjs.com/) package manager.
+Install by using the commands provided by a package manager.
+When using npm, be sure [Node.js](https://nodejs.org) is installed in the environment.
+
+#### npm
+
+```sh
+$ npm install --save @techie_doubts/tui.chart.2026 # Latest version
+$ npm install --save @techie_doubts/tui.chart.2026@<version> # Specific version
+```
+
+### Via Contents Delivery Network (CDN)
+
+The TOAST UI Chart is available over a CDN.
+
+- You can use cdn as below.
+
+```html
+<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/td-chart.min.css" />
+<script src="https://uicdn.toast.com/chart/latest/td-chart.min.js"></script>
+```
+
+- Within the download you'll find the following directories
+
+```
+- uicdn.toast.com/
+  ├─ chart/
+  │  ├─ latest
+  │  │  ├─ td-chart.js
+  │  │  ├─ td-chart.min.js
+  │  │  ├─ td-chart.css
+  │  │  ├─ td-chart.min.css
+  │  ├─ v4.0.0/
+```
+
+### Download Source Files
+
+- [Download all sources for each version](https://github.com/nhn/tui.chart/releases)
+
+## 🔨 Usage
+
+### HTML
+
+Add the container element where TOAST UI Chart will be created.
+
+```html
+<div id="chart"></div>
+```
+
+### JavaScript
+
+#### Load
+
+The TOAST UI Chart can be used by creating an instance with the constructor function. To access the constructor function, import the module using one of the three following methods depending on your environment.
+
+```js
+/* namespace */
+const chart = toastui.Chart;
+
+/* CommonJS in Node.js */
+const chart = require('@techie_doubts/tui.chart.2026');
+
+/* ES6 in Node.js */
+import Chart from '@techie_doubts/tui.chart.2026';
+import { LineChart } from '@techie_doubts/tui.chart.2026';
+```
+
+[In Webpack 4, when importing package modules, the parts that are defined in the module field have higher priority than the parts defined in the main field](https://webpack.js.org/configuration/resolve/#resolvemainfields). To use the Webpack 4 with the `require` syntax to import `@techie_doubts/tui.chart.2026`, the ESM file defined in the `module` field will be loaded, and the file will be transpiled to be compatible with the `require` syntax. In order to use the **bundle file for UMD**, the user must personally load and use the `@techie_doubts/tui.chart.2026/dist/td-chart.js` or `@techie_doubts/tui.chart.2026/dist/td-chart.min.js`.
+
+```js
+const Chart = require('@techie_doubts/tui.chart.2026/dist/td-chart.min.js'); // loading the bundle file for UMD
+```
+
+Webpack 5 supports the `exports` field. The entry point can be determined by the `exports` field defined in the package. Furthermore, the necessary chart can be loaded through a sub-path, as presented below.
+
+```js
+const Chart = require('@techie_doubts/tui.chart.2026');  // ./dist/td-chart.js
+
+import { BarChart } from '@techie_doubts/tui.chart.2026';  // ./dist/esm/index.js
+
+import BarChart from '@techie_doubts/tui.chart.2026/bar';
+import ColumnChart from '@techie_doubts/tui.chart.2026/column';
+import LineChart from '@techie_doubts/tui.chart.2026/line';
+import AreaChart from '@techie_doubts/tui.chart.2026/area';
+import LineAreaChart from '@techie_doubts/tui.chart.2026/lineArea';
+import ColumnLineChart from '@techie_doubts/tui.chart.2026/columnLine';
+import BulletChart from '@techie_doubts/tui.chart.2026/bullet';
+import BoxPlotChart from '@techie_doubts/tui.chart.2026/boxPlot';
+import TreemapChart from '@techie_doubts/tui.chart.2026/treemap';
+import HeatmapChart from '@techie_doubts/tui.chart.2026/heatmap';
+import ScatterChart from '@techie_doubts/tui.chart.2026/scatter';
+import LineScatterChart from '@techie_doubts/tui.chart.2026/lineScatter';
+import BubbleChart from '@techie_doubts/tui.chart.2026/bubble';
+import PieChart from '@techie_doubts/tui.chart.2026/pie';
+import NestedPieChart from '@techie_doubts/tui.chart.2026/nestedPie';
+import RadarChart from '@techie_doubts/tui.chart.2026/radar';
+```
+
+Constructor function needs three parameters: el, data, options
+
+- el: Wrapper HTML element that will contain the chart as a child.
+- data: Numerical data the chart will be based on.
+- options: Functional options including legend, alignment, and tooltip formatter.
+
+```js
+const el = document.getElementById('chart');
+const data = {
+  categories: [
+    //...
+  ],
+  series: [
+    // ...
+  ],
+};
+const options = {
+  chart: { width: 700, height: 400 },
+};
+
+chart.barChart({ el, data, options });
+// or
+new BarChart({ el, data, options });
+```
+
+Refer to [details](https://nhn.github.io/tui.chart/latest) for additional information.

package/dist/esm/animator.d.ts

@@ -0,0 +1,32 @@
+import Chart from "./charts/chart";
+import { Options } from "../types/store/store";
+declare type Anim = {
+    chart: Chart<Options>;
+    duration: number;
+    requester: Chart<Options>;
+    onCompleted: Function;
+    onFrame: (delta: any) => void;
+    start: number | null;
+    completed: boolean;
+    current: number | null;
+};
+export default class Animator {
+    anims: Anim[];
+    state: string;
+    requestId: number | null;
+    firstRendering: boolean;
+    add({ chart, duration, requester, onCompleted, onFrame, }: {
+        chart: Chart<Options>;
+        duration: number;
+        requester: Chart<Options>;
+        onCompleted: Function;
+        onFrame?: (delta: number) => void;
+    }): void;
+    reset(): void;
+    start(): void;
+    runFrame(): void;
+    runAnims(timestamp: number): void;
+    next(timestamp: number): void;
+    cancelAnimFrame(): void;
+}
+export {};

package/dist/esm/animator.js

@@ -0,0 +1,102 @@
+import { isNull } from "./helpers/utils";
+export default class Animator {
+    constructor() {
+        this.anims = [];
+        this.state = 'IDLE';
+        this.requestId = null;
+        this.firstRendering = true;
+    }
+    add({ chart, duration, requester, onCompleted = () => { }, onFrame = (delta) => {
+        if (!this.firstRendering) {
+            chart.update(delta);
+        }
+        if (this.firstRendering) {
+            chart.initUpdate(delta);
+            if (delta === 1) {
+                this.firstRendering = false;
+            }
+        }
+    }, }) {
+        if (this.anims.length) {
+            this.reset();
+        }
+        if (this.state === 'IDLE') {
+            this.anims.push({
+                chart,
+                requester,
+                duration,
+                onFrame,
+                onCompleted,
+                start: null,
+                current: null,
+                completed: false,
+            });
+            this.start();
+        }
+    }
+    reset() {
+        this.anims.forEach((anim) => {
+            anim.current = 1;
+            anim.onFrame(anim.current);
+            anim.completed = true;
+        });
+        this.anims = [];
+        this.cancelAnimFrame();
+        this.state = 'IDLE';
+        this.requestId = null;
+    }
+    start() {
+        if (this.anims.length) {
+            this.state = 'RUNNING';
+            this.runFrame();
+        }
+    }
+    runFrame() {
+        this.requestId = window.requestAnimationFrame((timestamp) => {
+            this.runAnims(timestamp);
+        });
+    }
+    runAnims(timestamp) {
+        this.next(timestamp);
+        if (this.anims.length) {
+            this.runFrame();
+        }
+        else {
+            this.state = 'IDLE';
+            this.requestId = null;
+        }
+    }
+    next(timestamp) {
+        this.anims.forEach((anim) => {
+            if (isNull(anim.start)) {
+                anim.start = timestamp;
+            }
+            Object.defineProperty(anim.chart, '___animId___', {
+                value: timestamp,
+                enumerable: false,
+                writable: false,
+                configurable: true,
+            });
+            anim.current = anim.duration ? Math.min((timestamp - anim.start) / anim.duration, 1) : 1;
+            anim.onFrame(anim.current);
+            anim.completed = anim.current === 1;
+        });
+        this.anims.forEach((anim) => {
+            if (anim.chart.___animId___ === timestamp) {
+                anim.chart.draw();
+                delete anim.chart.___animId___;
+            }
+            if (anim.completed) {
+                this.cancelAnimFrame();
+                anim.onCompleted();
+                anim.chart.eventBus.emit('animationCompleted', anim.requester);
+            }
+        });
+        this.anims = this.anims.filter((anim) => !anim.completed);
+    }
+    cancelAnimFrame() {
+        if (this.requestId) {
+            window.cancelAnimationFrame(this.requestId);
+        }
+    }
+}

package/dist/esm/brushes/axis.d.ts

@@ -0,0 +1,3 @@
+import { TickModel } from "../../types/components/axis";
+export declare const TICK_SIZE = 5;
+export declare function tick(ctx: CanvasRenderingContext2D, tickModel: TickModel): void;

package/dist/esm/brushes/axis.js

@@ -0,0 +1,21 @@
+import { line } from "./basic";
+export const TICK_SIZE = 5;
+export function tick(ctx, tickModel) {
+    const { x, y, isYAxis, tickSize = TICK_SIZE, strokeStyle, lineWidth } = tickModel;
+    const lineModel = {
+        type: 'line',
+        x,
+        y,
+        x2: x,
+        y2: y,
+        strokeStyle,
+        lineWidth,
+    };
+    if (isYAxis) {
+        lineModel.x2 += tickSize;
+    }
+    else {
+        lineModel.y2 += tickSize;
+    }
+    line(ctx, lineModel);
+}

package/dist/esm/brushes/basic.d.ts

@@ -0,0 +1,9 @@
+import { ClipRectAreaModel, PathRectModel, CircleModel, RectModel } from "../../types/components/series";
+import { LineModel } from "../../types/components/axis";
+import { ArcModel } from "../../types/components/radialAxis";
+export declare function clipRectArea(ctx: CanvasRenderingContext2D, clipRectAreaModel: ClipRectAreaModel): void;
+export declare function pathRect(ctx: CanvasRenderingContext2D, pathRectModel: PathRectModel): void;
+export declare function circle(ctx: CanvasRenderingContext2D, circleModel: CircleModel): void;
+export declare function line(ctx: CanvasRenderingContext2D, lineModel: LineModel): void;
+export declare function rect(ctx: CanvasRenderingContext2D, model: RectModel): void;
+export declare function arc(ctx: CanvasRenderingContext2D, arcModel: ArcModel): void;

package/dist/esm/brushes/basic.js

@@ -0,0 +1,95 @@
+import { makeStyleObj, setLineDash, fillStyle, strokeWithOptions } from "../helpers/style";
+import { calculateDegreeToRadian } from "../helpers/sector";
+const circleStyle = {
+    default: {
+        strokeStyle: '#ffffff',
+        lineWidth: 2,
+    },
+    plot: {
+        lineWidth: 1,
+        strokeStyle: 'rgba(0, 0, 0, 0.05)',
+    },
+};
+const rectStyle = {
+    shadow: {
+        shadowColor: 'rgba(0, 0, 0, 0.3)',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2,
+        shadowBlur: 6,
+    },
+};
+export function clipRectArea(ctx, clipRectAreaModel) {
+    const { x, y, width, height } = clipRectAreaModel;
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+}
+export function pathRect(ctx, pathRectModel) {
+    const { x, y, width, height, radius = 0, stroke: strokeStyle = 'black', fill = '', lineWidth = 1, } = pathRectModel;
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    if (fill) {
+        fillStyle(ctx, fill);
+    }
+    strokeWithOptions(ctx, { lineWidth, strokeStyle });
+}
+export function circle(ctx, circleModel) {
+    const { x, y, style, radius, color, angle = { start: 0, end: Math.PI * 2 }, borderWidth: lineWidth, borderColor: strokeStyle, } = circleModel;
+    ctx.beginPath();
+    if (style) {
+        const styleObj = makeStyleObj(style, circleStyle);
+        Object.keys(styleObj).forEach((key) => {
+            ctx[key] = styleObj[key];
+        });
+    }
+    ctx.arc(x, y, radius, angle.start, angle.end, true);
+    strokeWithOptions(ctx, { lineWidth, strokeStyle });
+    fillStyle(ctx, color);
+    ctx.closePath();
+}
+export function line(ctx, lineModel) {
+    const { x, y, x2, y2, strokeStyle, lineWidth, dashSegments } = lineModel;
+    ctx.beginPath();
+    if (dashSegments) {
+        setLineDash(ctx, dashSegments);
+    }
+    ctx.moveTo(x, y);
+    ctx.lineTo(x2, y2);
+    strokeWithOptions(ctx, { strokeStyle, lineWidth });
+    ctx.closePath();
+}
+export function rect(ctx, model) {
+    const { x, y, width, height, style, thickness = 0, color, borderColor = '#ffffff' } = model;
+    ctx.beginPath();
+    if (style) {
+        const styleObj = makeStyleObj(style, rectStyle);
+        Object.keys(styleObj).forEach((key) => {
+            ctx[key] = styleObj[key];
+        });
+    }
+    if (thickness) {
+        ctx.fillStyle = borderColor;
+        ctx.fillRect(x - thickness, y - thickness, width + thickness * 2, height + thickness * 2);
+        ctx.shadowColor = 'rgba(0, 0, 0, 0)'; // reset shadow color
+    }
+    ctx.rect(x, y, width, height);
+    fillStyle(ctx, color);
+}
+export function arc(ctx, arcModel) {
+    const { x, y, angle: { start, end }, borderWidth: lineWidth, borderColor: strokeStyle, drawingStartAngle, radius, clockwise = true, } = arcModel;
+    ctx.beginPath();
+    const startRadian = calculateDegreeToRadian(start, drawingStartAngle);
+    const endRadian = calculateDegreeToRadian(end, drawingStartAngle);
+    ctx.arc(x, y, radius, startRadian, endRadian, !clockwise);
+    strokeWithOptions(ctx, { lineWidth, strokeStyle });
+    ctx.closePath();
+}

package/dist/esm/brushes/boxPlot.d.ts

@@ -0,0 +1,2 @@
+import { BoxPlotModel } from "../../types/components/series";
+export declare function boxPlot(ctx: CanvasRenderingContext2D, model: BoxPlotModel): void;

package/dist/esm/brushes/boxPlot.js

@@ -0,0 +1,22 @@
+import { line, rect } from "./basic";
+export function boxPlot(ctx, model) {
+    const { rect: rectModel, upperWhisker, lowerWhisker, median, minimum, maximum } = model;
+    if (minimum) {
+        line(ctx, Object.assign({ type: 'line' }, minimum));
+    }
+    if (lowerWhisker) {
+        line(ctx, Object.assign({ type: 'line' }, lowerWhisker));
+    }
+    if (rectModel) {
+        rect(ctx, Object.assign({ type: 'rect' }, rectModel));
+    }
+    if (upperWhisker) {
+        line(ctx, Object.assign({ type: 'line' }, upperWhisker));
+    }
+    if (maximum) {
+        line(ctx, Object.assign({ type: 'line' }, maximum));
+    }
+    if (median) {
+        line(ctx, Object.assign({ type: 'line' }, median));
+    }
+}

package/dist/esm/brushes/circleLegend.d.ts

@@ -0,0 +1,2 @@
+import { CircleLegendModel } from "../../types/components/circleLegend";
+export declare function circleLegend(ctx: CanvasRenderingContext2D, circleLegendModel: CircleLegendModel): void;

package/dist/esm/brushes/circleLegend.js

@@ -0,0 +1,26 @@
+import { circle } from "./basic";
+import { label } from "./label";
+export function circleLegend(ctx, circleLegendModel) {
+    const { x, y, radius, value } = circleLegendModel;
+    const ratioArray = [1, 0.5, 0.25];
+    ratioArray.forEach((ratio, idx) => {
+        const circleRadius = ratio * radius;
+        const circleY = y + (idx ? (1 - ratio) * radius : 0);
+        circle(ctx, {
+            type: 'circle',
+            x,
+            y: circleY,
+            radius: circleRadius,
+            color: '#fff',
+            seriesIndex: 0,
+            style: ['default', { strokeStyle: '#888', lineWidth: 1 }],
+        });
+        label(ctx, {
+            type: 'label',
+            x,
+            y: circleY - circleRadius,
+            text: String(value * ratio),
+            style: ['default', { textAlign: 'center', textBaseline: 'bottom' }],
+        });
+    });
+}

package/dist/esm/brushes/dataLabel.d.ts

@@ -0,0 +1,6 @@
+import { DataLabelModel } from "../../types/components/dataLabels";
+import { Point } from "../../types/options";
+import { ArrowTheme, ArrowDirection } from "../../types/theme";
+export declare function dataLabel(ctx: CanvasRenderingContext2D, model: DataLabelModel): void;
+export declare function drawBubbleLabel(ctx: CanvasRenderingContext2D, model: DataLabelModel): void;
+export declare function getBubbleArrowPoints(direction: ArrowDirection, { x, y }: Point, arrowPointTheme: ArrowTheme): Point[];

package/dist/esm/brushes/dataLabel.js

@@ -0,0 +1,176 @@
+import { label, bubbleLabel } from "./label";
+import { getTextHeight, getTextWidth } from "../helpers/calculator";
+import { line } from "./basic";
+import { getFont } from "../helpers/style";
+import { pick, includes } from "../helpers/utils";
+export function dataLabel(ctx, model) {
+    var _a;
+    const { x, y, text, textAlign, textBaseline, opacity, callout, theme, radian } = model;
+    const { color, textBubble } = theme;
+    const font = getFont(theme);
+    const textStyle = { textAlign, textBaseline, font, fillStyle: color };
+    const textStrokeStyle = getTextStrokeStyle(theme);
+    if (callout) {
+        const { theme: { lineWidth, lineColor }, } = callout;
+        line(ctx, Object.assign(Object.assign({ type: 'line' }, pick(callout, 'x', 'y', 'x2', 'y2')), { strokeStyle: lineColor, lineWidth }));
+    }
+    if ((_a = textBubble) === null || _a === void 0 ? void 0 : _a.visible) {
+        drawBubbleLabel(ctx, model);
+        return;
+    }
+    label(ctx, {
+        type: 'label',
+        x,
+        y,
+        text,
+        style: [textStyle],
+        stroke: [textStrokeStyle],
+        opacity,
+        radian,
+    });
+}
+export function drawBubbleLabel(ctx, model) {
+    const { text, theme, radian = 0 } = model;
+    const { color, textStrokeColor } = theme;
+    const font = getFont(theme);
+    const bubbleRect = getBubbleRect(model);
+    const { x, y, width, height } = bubbleRect;
+    bubbleLabel(ctx, {
+        type: 'bubbleLabel',
+        radian,
+        rotationPosition: { x: model.x, y: model.y },
+        bubble: bubbleRect,
+        label: {
+            x: x + width / 2,
+            y: y + height / 2,
+            text,
+            style: [{ font, fillStyle: color, textAlign: 'center', textBaseline: 'middle' }],
+            strokeStyle: textStrokeColor,
+        },
+    });
+}
+export function getBubbleArrowPoints(direction, { x, y }, arrowPointTheme) {
+    const width = arrowPointTheme.width;
+    const height = arrowPointTheme.height;
+    let points = [];
+    if (direction === 'top') {
+        points = [
+            { x: x - width / 2, y: y + height },
+            { x, y },
+            { x: x + width / 2, y: y + height },
+        ];
+    }
+    else if (direction === 'bottom') {
+        points = [
+            { x: x + width / 2, y: y - height },
+            { x, y },
+            { x: x - width / 2, y: y - height },
+        ];
+    }
+    else if (direction === 'right') {
+        points = [
+            { x: x - height, y: y - width / 2 },
+            { x, y },
+            { x: x - height, y: y + width / 2 },
+        ];
+    }
+    else if (direction === 'left') {
+        points = [
+            { x: x + height, y: y + width / 2 },
+            { x, y },
+            { x: x + height, y: y - width / 2 },
+        ];
+    }
+    return points;
+}
+function getBubbleRect(model) {
+    const { text, theme, textAlign, textBaseline } = model;
+    const font = getFont(theme);
+    const { arrow, paddingX, paddingY, borderRadius, borderColor, borderWidth, backgroundColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowColor, } = theme.textBubble;
+    const labelWidth = getTextWidth(text, font);
+    const width = labelWidth + paddingX * 2;
+    const height = getTextHeight(text, font) + paddingY * 2;
+    let { x, y } = model;
+    if (textAlign === 'center') {
+        x -= width / 2;
+    }
+    else if (includes(['right', 'end'], textAlign)) {
+        x -= width;
+    }
+    if (textBaseline === 'middle') {
+        y -= height / 2;
+    }
+    else if (textBaseline === 'bottom') {
+        y -= height;
+    }
+    const rect = { x, y, width, height };
+    return Object.assign(Object.assign(Object.assign({}, rect), { radius: borderRadius, lineWidth: borderWidth, fill: backgroundColor, strokeStyle: borderColor, style: [
+            {
+                shadowBlur,
+                shadowOffsetX,
+                shadowOffsetY,
+                shadowColor,
+            },
+        ] }), getArrowInfo(rect, textAlign, textBaseline, arrow));
+}
+function getArrowInfo(rect, textAlign, textBaseline, theme) {
+    var _a, _b;
+    if (!((_a = theme) === null || _a === void 0 ? void 0 : _a.visible)) {
+        return null;
+    }
+    const arrowHeight = theme.height;
+    const { width, height } = rect;
+    const direction = (_b = theme.direction, (_b !== null && _b !== void 0 ? _b : getArrowDirection(textAlign, textBaseline)));
+    let { x: boxX, y: boxY } = rect;
+    let { x: pointX, y: pointY } = rect;
+    if (direction === 'top') {
+        boxY += arrowHeight;
+    }
+    else if (direction === 'bottom') {
+        boxY -= arrowHeight;
+        pointY += height;
+    }
+    else if (direction === 'right') {
+        boxX -= arrowHeight;
+        pointX += width;
+    }
+    else if (direction === 'left') {
+        boxX += arrowHeight;
+    }
+    if (textAlign === 'center') {
+        pointX = rect.x + width / 2;
+    }
+    else if (textBaseline === 'middle') {
+        pointY = rect.y + height / 2;
+    }
+    return {
+        direction,
+        points: getBubbleArrowPoints(direction, { x: pointX, y: pointY }, theme),
+        x: boxX,
+        y: boxY,
+    };
+}
+function getArrowDirection(textAlign, textBaseline) {
+    let direction = 'top';
+    if (textAlign === 'center' && textBaseline === 'top') {
+        direction = 'top';
+    }
+    else if (textAlign === 'center' && textBaseline === 'bottom') {
+        direction = 'bottom';
+    }
+    else if (textBaseline === 'middle' && textAlign === 'right') {
+        direction = 'right';
+    }
+    else if (textBaseline === 'middle' && textAlign === 'left') {
+        direction = 'left';
+    }
+    return direction;
+}
+function getTextStrokeStyle(theme) {
+    const { textStrokeColor } = theme;
+    const textStrokeStyle = pick(theme, 'lineWidth', 'shadowColor', 'shadowBlur');
+    if (textStrokeColor) {
+        textStrokeStyle.strokeStyle = textStrokeColor;
+    }
+    return textStrokeStyle;
+}

package/dist/esm/brushes/exportMenu.d.ts

@@ -0,0 +1,2 @@
+import { ExportMenuButtonModel } from "../../types/components/exportMenu";
+export declare function exportMenuButton(ctx: CanvasRenderingContext2D, exportMenuButtonModel: ExportMenuButtonModel): void;