feat: conic gradient (#888)

* feat: conic gradient * feat: unit test for conic gradient * refactor: removed conic gradient from svg * chore: empty row in between test-suites
qlik-oss · Jan 15, 2025 · 3078e41 · 3078e41
1 parent 78a5fd2
commit 3078e41
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/packages/picasso.js/src/core/scene-graph/display-objects/gradient-item.js b/packages/picasso.js/src/core/scene-graph/display-objects/gradient-item.js
@@ -6,7 +6,7 @@ import NodeContainer from '../node-container';
  * @typedef {object} GradientNode
  * @property {string} type
  * @property {object[]} stops
- * @property {string} [stops[].type=linearGradient] - radialGradient|linearGradient
+ * @property {string} [stops[].type=linearGradient] - radialGradient|linearGradient|conicGradient
  * @property {string} stops[].color - {@link https://www.w3.org/TR/SVG/types.html#DataTypeColor}
  * @property {string} [stops[].opacity=1] - {@link https://www.w3.org/TR/css-color-4/#propdef-opacity}
  * @property {number} stops[].offset - {@link https://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute}

diff --git a/packages/picasso.js/src/core/scene-graph/display-objects/index.js b/packages/picasso.js/src/core/scene-graph/display-objects/index.js
@@ -21,6 +21,7 @@ reg.add('container', container);
 reg.add('defs', container);
 reg.add('linearGradient', gradientItem);
 reg.add('radialGradient', gradientItem);
+reg.add('conicGradient', gradientItem);
 reg.add('stop', gradientItem);
 reg.add('pattern', patternItem);
 

diff --git a/packages/picasso.js/src/web/renderer/canvas-renderer/__tests__/canvas-gradient.spec.js b/packages/picasso.js/src/web/renderer/canvas-renderer/__tests__/canvas-gradient.spec.js
@@ -58,6 +58,27 @@ describe('canvas-gradient', () => {
     });
   });
 
+  describe('conic', () => {
+    it('should create a conic gradient node', () => {
+      shape = {
+        fill: {
+          type: 'gradient',
+          orientation: 'conic',
+          startAngle: Math.PI / 2,
+          x: 0,
+          y: 0,
+          stops: [
+            { offset: 0, color: 'red', opacity: 0 },
+            { offset: 1, color: 'green' },
+          ],
+        },
+      };
+      const fill = createCanvasGradient(canvascontext(), shape, shape.fill);
+      expect(fill).to.be.a('function');
+      expect(fill()).to.be.equal('dummyGradient-conic');
+    });
+  });
+
   describe('linear', () => {
     it('should create linear gradients properly', () => {
       shape = dummyRectObject('linear');

diff --git a/packages/picasso.js/src/web/renderer/canvas-renderer/canvas-gradient.js b/packages/picasso.js/src/web/renderer/canvas-renderer/canvas-gradient.js
@@ -10,7 +10,6 @@ import { degreesToPoints } from '../../../core/math/angles';
  */
 export default function createCanvasGradient(g, node, gradient) {
   const { orientation, degree, stops = [] } = gradient;
-
   let newGradient = null;
 
   if (orientation === 'radial') {
@@ -24,6 +23,11 @@ export default function createCanvasGradient(g, node, gradient) {
       bounds.y + bounds.height / 2,
       Math.max(bounds.width, bounds.height) / 2
     );
+  } else if (orientation === 'conic') {
+    const startAngle = gradient.startAngle || 0;
+    const centerOffsetX = gradient.x || 0;
+    const centerOffsetY = gradient.y || 0;
+    newGradient = g.createConicGradient(startAngle, centerOffsetX, centerOffsetY);
   } else {
     const points = degreesToPoints(degree);
     ['x1', 'x2', 'y1', 'y2'].forEach((c) => {

diff --git a/packages/test-utils/mocks/canvas-context.js b/packages/test-utils/mocks/canvas-context.js
@@ -38,6 +38,7 @@ function canvascontext(contextType = '2d') {
   if (contextType === '2d') {
     item.createRadialGradient = gradientFactory('radial');
     item.createLinearGradient = gradientFactory('linear');
+    item.createConicGradient = gradientFactory('conic');
   }
 
   return item;