Skip to content

Fix textWidth cache check and optimize segment style caching #12295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zynviro wants to merge 3 commits into
base: master
Choose a base branch
from
+44 −42
Open

Fix textWidth cache check and optimize segment style caching #12295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5854c81
Change textWidth check to use typeof undefined
Zynviro Sep 2, 2026
a439180
Refactor code for consistent formatting and readability
Zynviro Sep 2, 2026
a9d3bfb
Format code and improve readability in helpers.canvas.ts
Zynviro Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions src/helpers/helpers.canvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import type {
RoundedRect,
TRBLCorners
} from '../types/geometric.js';
import {isArray, isNullOrUndef} from './helpers.core.js';
import {PI, TAU, HALF_PI, QUARTER_PI, TWO_THIRDS_PI, RAD_PER_DEG} from './helpers.math.js';
import { isArray, isNullOrUndef } from './helpers.core.js';
import { PI, TAU, HALF_PI, QUARTER_PI, TWO_THIRDS_PI, RAD_PER_DEG } from './helpers.math.js';

/**
* Converts the given font object into a CSS font string.
Expand All @@ -28,9 +28,9 @@ export function toFontString(font: FontSpec) {
}

return (font.style ? font.style + ' ' : '')
+ (font.weight ? font.weight + ' ' : '')
+ font.size + 'px '
+ font.family;
+ (font.weight ? font.weight + ' ' : '')
+ font.size + 'px '
+ font.family;
}

/**
Expand All @@ -44,7 +44,7 @@ export function _measureText(
string: string
) {
let textWidth = data[string];
if (!textWidth) {
if (typeof textWidth === 'undefined') {
textWidth = data[string] = ctx.measureText(string).width;
gc.push(string);
}
Expand All @@ -65,7 +65,7 @@ export function _longestText(
ctx: CanvasRenderingContext2D,
font: string,
arrayOfThings: Things,
cache?: {data?: Record<string, number>, garbageCollect?: string[], font?: string}
cache?: { data?: Record<string, number>, garbageCollect?: string[], font?: string }
) {
cache = cache || {};
let data = cache.data = cache.data || {};
Expand Down Expand Up @@ -196,7 +196,7 @@ export function drawPointLegend(
ctx.beginPath();

switch (style) {
// Default includes circle
// Default includes circle
default:
if (w) {
ctx.ellipse(x, y, w / 2, radius, 0, 0, TAU);
Expand All @@ -215,13 +215,13 @@ export function drawPointLegend(
ctx.closePath();
break;
case 'rectRounded':
// NOTE: the rounded rect implementation changed to use `arc` instead of
// `quadraticCurveTo` since it generates better results when rect is
// almost a circle. 0.516 (instead of 0.5) produces results with visually
// closer proportion to the previous impl and it is inscribed in the
// circle with `radius`. For more details, see the following PRs:
// https://github.com/chartjs/Chart.js/issues/5597
// https://github.com/chartjs/Chart.js/issues/5858
// NOTE: the rounded rect implementation changed to use `arc` instead of
// `quadraticCurveTo` since it generates better results when rect is
// almost a circle. 0.516 (instead of 0.5) produces results with visually
// closer proportion to the previous impl and it is inscribed in the
// circle with `radius`. For more details, see the following PRs:
// https://github.com/chartjs/Chart.js/issues/5597
// https://github.com/chartjs/Chart.js/issues/5858
cornerRadius = radius * 0.516;
size = radius - cornerRadius;
xOffset = Math.cos(rad + QUARTER_PI) * size;
Expand Down Expand Up @@ -322,7 +322,7 @@ export function _isPointInArea(
margin = margin || 0.5; // margin - default is to match rounded decimals

return !area || (point && point.x > area.left - margin && point.x < area.right + margin &&
point.y > area.top - margin && point.y < area.bottom + margin);
point.y > area.top - margin && point.y < area.bottom + margin);
}

export function clipArea(ctx: CanvasRenderingContext2D, area: TRBL) {
Expand Down Expand Up @@ -499,7 +499,7 @@ export function addRoundedRectPath(
ctx: CanvasRenderingContext2D,
rect: RoundedRect & { radius: TRBLCorners }
) {
const {x, y, w, h, radius} = rect;
const { x, y, w, h, radius } = rect;

// top left arc
ctx.arc(x + radius.topLeft, y + radius.topLeft, radius.topLeft, 1.5 * PI, PI, true);
Expand Down
52 changes: 27 additions & 25 deletions src/helpers/helpers.segment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {_angleBetween, _angleDiff, _isBetween, _normalizeAngle} from './helpers.math.js';
import {createContext} from './helpers.options.js';
import {isPatternOrGradient} from './helpers.color.js';
import { _angleBetween, _angleDiff, _isBetween, _normalizeAngle } from './helpers.math.js';
import { createContext } from './helpers.options.js';
import { isPatternOrGradient } from './helpers.color.js';

/**
* @typedef { import('../elements/element.line.js').default } LineElement
Expand All @@ -23,7 +23,7 @@ function propertyFn(property) {
};
}

function normalizeSegment({start, end, count, loop, style}) {
function normalizeSegment({ start, end, count, loop, style }) {
return {
start: start % count,
end: end % count,
Expand All @@ -33,11 +33,11 @@ function normalizeSegment({start, end, count, loop, style}) {
}

function getSegment(segment, points, bounds) {
const {property, start: startBound, end: endBound} = bounds;
const {between, normalize} = propertyFn(property);
const { property, start: startBound, end: endBound } = bounds;
const { between, normalize } = propertyFn(property);
const count = points.length;
// eslint-disable-next-line prefer-const
let {start, end, loop} = segment;
let { start, end, loop } = segment;
let i, ilen;

if (loop) {
Expand All @@ -57,7 +57,7 @@ function getSegment(segment, points, bounds) {
if (end < start) {
end += count;
}
return {start, end, loop, style: segment.style};
return { start, end, loop, style: segment.style };
}

/**
Expand All @@ -79,10 +79,10 @@ export function _boundSegment(segment, points, bounds) {
return [segment];
}

const {property, start: startBound, end: endBound} = bounds;
const { property, start: startBound, end: endBound } = bounds;
const count = points.length;
const {compare, between, normalize} = propertyFn(property);
const {start, end, loop, style} = getSegment(segment, points, bounds);
const { compare, between, normalize } = propertyFn(property);
const { start, end, loop, style } = getSegment(segment, points, bounds);

const result = [];
let inside = false;
Expand Down Expand Up @@ -114,15 +114,15 @@ export function _boundSegment(segment, points, bounds) {
}

if (subStart !== null && shouldStop()) {
result.push(normalizeSegment({start: subStart, end: i, loop, count, style}));
result.push(normalizeSegment({ start: subStart, end: i, loop, count, style }));
subStart = null;
}
prev = i;
prevValue = value;
}

if (subStart !== null) {
result.push(normalizeSegment({start: subStart, end, loop, count, style}));
result.push(normalizeSegment({ start: subStart, end, loop, count, style }));
}

return result;
Expand Down Expand Up @@ -185,7 +185,7 @@ function findStartAndEnd(points, count, loop, spanGaps) {
// end could be more than count, normalize
end %= count;

return {start, end};
return { start, end };
}

/**
Expand All @@ -207,7 +207,7 @@ function solidSegments(points, start, max, loop) {
if (cur.skip || cur.stop) {
if (!prev.skip) {
loop = false;
result.push({start: start % count, end: (end - 1) % count, loop});
result.push({ start: start % count, end: (end - 1) % count, loop });
// @ts-ignore
start = last = cur.stop ? end : null;
}
Expand All @@ -221,7 +221,7 @@ function solidSegments(points, start, max, loop) {
}

if (last !== null) {
result.push({start: start % count, end: last % count, loop});
result.push({ start: start % count, end: last % count, loop });
}

return result;
Expand All @@ -245,10 +245,10 @@ export function _computeSegments(line, segmentOptions) {
}

const loop = !!line._loop;
const {start, end} = findStartAndEnd(points, count, loop, spanGaps);
const { start, end } = findStartAndEnd(points, count, loop, spanGaps);

if (spanGaps === true) {
return splitByStyles(line, [{start, end, loop}], points, segmentOptions);
return splitByStyles(line, [{ start, end, loop }], points, segmentOptions);
}

const max = end < start ? end + count : end;
Expand Down Expand Up @@ -279,7 +279,7 @@ function splitByStyles(line, segments, points, segmentOptions) {
function doSplitByStyles(line, segments, points, segmentOptions) {
const chartContext = line._chart.getContext();
const baseStyle = readStyle(line.options);
const {_datasetIndex: datasetIndex, options: {spanGaps}} = line;
const { _datasetIndex: datasetIndex, options: { spanGaps } } = line;
const count = points.length;
const result = [];
let prevStyle = baseStyle;
Expand All @@ -300,7 +300,7 @@ function doSplitByStyles(line, segments, points, segmentOptions) {
e += dir;
}
if (s % count !== e % count) {
result.push({start: s % count, end: e % count, loop: l, style: st});
result.push({ start: s % count, end: e % count, loop: l, style: st });
prevStyle = st;
start = e % count;
}
Expand Down Expand Up @@ -350,15 +350,17 @@ function styleChanged(style, prevStyle) {
if (!prevStyle) {
return false;
}
const cache = [];
const replacer = function(key, value) {
const cache = new Map();
const replacer = function (key, value) {
if (!isPatternOrGradient(value)) {
return value;
}
if (!cache.includes(value)) {
cache.push(value);
let index = cache.get(value);
if (index === undefined) {
index = cache.size;
cache.set(value, index);
}
return cache.indexOf(value);
return index;
};
return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
}