Skip to content

Commit

Permalink
Enable applying of gradients and pattern on line segments (#11217)
Browse files Browse the repository at this point in the history
* Enable applying of gradients and pattern on line segments

* add test case

* improve replacer
  • Loading branch information
stockiNail authored Apr 27, 2023
1 parent aec1c6d commit ee7e928
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 1 deletion.
16 changes: 15 additions & 1 deletion src/helpers/helpers.segment.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
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 Down Expand Up @@ -346,5 +347,18 @@ function readStyle(options) {
}

function styleChanged(style, prevStyle) {
return prevStyle && JSON.stringify(style) !== JSON.stringify(prevStyle);
if (!prevStyle) {
return false;
}
const cache = [];
const replacer = function(key, value) {
if (!isPatternOrGradient(value)) {
return value;
}
if (!cache.includes(value)) {
cache.push(value);
}
return cache.indexOf(value);
};
return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
}
34 changes: 34 additions & 0 deletions test/fixtures/controller.line/segments/gradient.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const getGradient = (context) => {
const {chart, p0, p1} = context;
const ctx = chart.ctx;
const {x: x0} = p0.getProps(['x'], true);
const {x: x1} = p1.getProps(['x'], true);
const gradient = ctx.createLinearGradient(x0, 0, x1, 0);
gradient.addColorStop(0, p0.options.backgroundColor);
gradient.addColorStop(1, p1.options.backgroundColor);
return gradient;
};

module.exports = {
config: {
type: 'line',
data: {
datasets: [{
data: [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 4}, {x: 5, y: 5}, {x: 6, y: 6}],
pointBackgroundColor: ['red', 'yellow', 'green', 'green', 'blue', 'pink', 'blue'],
pointBorderWidth: 0,
pointRadius: 10,
borderWidth: 5,
segment: {
borderColor: getGradient,
}
}]
},
options: {
scales: {
x: {type: 'linear', display: false},
y: {display: false}
}
}
}
};
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ee7e928

Please sign in to comment.