Merge branch 'master' of github.com:qlik-oss/picasso.js into gqm/allo…

…w-padding-functions-4

.circleci/config.yml

@@ -6,7 +6,7 @@ defaults: &defaults
   working_directory: ~/picassojs
   # Available images https://hub.docker.com/r/circleci/node/tags/
   docker:
-    - image: cimg/node:lts-browsers
+    - image: cimg/node:current-browsers
 
 jobs:
   install:

package.json

@@ -28,14 +28,14 @@
     "node": ">=18"
   },
   "devDependencies": {
-    "@babel/cli": "7.25.9",
-    "@babel/core": "7.26.0",
-    "@babel/eslint-parser": "7.25.9",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.7",
+    "@babel/eslint-parser": "7.26.5",
     "@babel/plugin-transform-react-jsx": "7.25.9",
-    "@babel/preset-env": "7.26.0",
-    "@babel/preset-react": "7.25.9",
-    "@commitlint/cli": "19.6.0",
-    "@commitlint/config-conventional": "19.6.0",
+    "@babel/preset-env": "7.26.7",
+    "@babel/preset-react": "7.26.3",
+    "@commitlint/cli": "19.7.1",
+    "@commitlint/config-conventional": "19.7.1",
     "@rollup/plugin-terser": "0.4.4",
     "babel-plugin-istanbul": "7.0.0",
     "chai": "4.5.0",
@@ -46,27 +46,27 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-prettier": "5.2.3",
     "extend": "3.0.2",
     "globby": "14.0.2",
     "husky": "9.1.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
-    "jest-puppeteer": "10.1.4",
+    "jest-puppeteer": "11.0.0",
     "jsdom": "25.0.1",
     "lerna": "8.1.9",
-    "prettier": "3.4.1",
+    "prettier": "3.4.2",
     "pretty-quick": "4.0.0",
-    "puppeteer": "23.9.0",
+    "puppeteer": "23.11.1",
     "rollup": "2.79.2",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-serve": "1.1.1",
     "sinon": "19.0.2",
     "sinon-chai": "4.0.0",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
   },
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "packageManager": "pnpm@9.15.5+sha512.845196026aab1cc3f098a0474b64dfbab2afe7a1b4e91dd86895d8e4aa32a7a6d03049e2d0ad770bbe4de023a7122fb68c1a1d6e0d033c7076085f9d5d4800d4"
 }

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}

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);
 

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');

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) => {

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;