check pull requests for prettier formatting

.github/workflows/prettier.yml

@@ -0,0 +1,13 @@
+name: check formatting
+on:
+  pull_request:
+jobs:
+  fmt-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+      - run: npm install
+      - run: npm run fmt:check

CHANGELOG.md

@@ -1413,7 +1413,6 @@ That changes are private and internal specific. They should not break most of `K
 Differences from last official `KineticJS` release
 
 - Bug Fixes
-
   - `strokeScaleEnabled = false` is disabled for text as I can not find a way to implement this
   - `strokeScaleEnabled = false` for Line now creates a correct hit graph
   - working "this-example" as name for nodes

README.md

@@ -66,7 +66,7 @@ At the current moment `Konva` doesn't work in IE11 directly. To make it work you
 
 # Debugging
 
-The Chrome inspector simply shows the canvas element.  To see the Konva objects and their details, install the konva-dev extension at https://github.com/konvajs/konva-devtool.
+The Chrome inspector simply shows the canvas element. To see the Konva objects and their details, install the konva-dev extension at https://github.com/konvajs/konva-devtool.
 
 # Loading and installing Konva
 

package.json

@@ -35,6 +35,8 @@
     "start": "npm run test:watch",
     "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./lib/index-types.d.ts && npm run rollup",
     "build": "npm run compile && cp ./src/index-types.d.ts ./lib && gulp build && node ./rename-imports.mjs",
+    "fmt": "prettier --write .",
+    "fmt:check": "prettier --check .",
     "test:import": "npm run build  && node ./test/import-test.cjs && node ./test/import-test.mjs",
     "test": "npm run test:browser && npm run test:node && npm run test:import",
     "test:build": "PARCEL_WORKER_BACKEND=process parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
@@ -100,6 +102,7 @@
     "mocha": "10.2.0",
     "mocha-headless-chrome": "^4.0.0",
     "parcel": "2.13.3",
+    "prettier": "^3.6.2",
     "process": "^0.11.10",
     "rollup": "^4.46.2",
     "rollup-plugin-typescript2": "^0.36.0",
@@ -116,7 +119,8 @@
     "html5"
   ],
   "prettier": {
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "es5"
   },
   "bugs": {
     "url": "https://github.com/konvajs/konva/issues"

resources/jsdoc.conf.json

@@ -1,28 +1,28 @@
 {
-    "path" : "ink-docstrap",
-	"tags"      : {
-		"allowUnknownTags" : true
-	},
-	"plugins"   : ["plugins/markdown"],
+  "path": "ink-docstrap",
+  "tags": {
+    "allowUnknownTags": true
+  },
+  "plugins": ["plugins/markdown"],
 
-	"templates" : {
-		"cleverLinks"           : false,
-		"monospaceLinks"        : false,
-		"dateFormat"            : "ddd MMM Do YYYY",
-		"outputSourceFiles"     : true,
-		"outputSourcePath"      : true,
-		"systemName"            : "Konva",
-		"footer"                : "",
-		"copyright"             : "Konva Copyright © 2015 The contributors to the Konva project.",
-		"navType"               : "vertical",
-		"theme"                 : "cosmo",
-		"linenums"              : true,
-		"collapseSymbols"       : false,
-		"inverseNav"            : true,
-		"highlightTutorialCode" : true
-	},
-	"markdown"  : {
-		"parser"   : "gfm",
-		"hardwrap" : true
-	}
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false,
+    "dateFormat": "ddd MMM Do YYYY",
+    "outputSourceFiles": true,
+    "outputSourcePath": true,
+    "systemName": "Konva",
+    "footer": "",
+    "copyright": "Konva Copyright © 2015 The contributors to the Konva project.",
+    "navType": "vertical",
+    "theme": "cosmo",
+    "linenums": true,
+    "collapseSymbols": false,
+    "inverseNav": true,
+    "highlightTutorialCode": true
+  },
+  "markdown": {
+    "parser": "gfm",
+    "hardwrap": true
+  }
 }

src/Container.ts

@@ -30,7 +30,7 @@ export interface ContainerConfig extends NodeConfig {
  * @@containerParams
  */
 export abstract class Container<
-  ChildType extends Node = Node
+  ChildType extends Node = Node,
 > extends Node<ContainerConfig> {
   children: Array<ChildType> = [];
 

src/Factory.ts

@@ -46,12 +46,10 @@ type ValidatorFunc<T> = (val: ExtractGetSet<T>, attr: string) => T;
 /**
  * Extracts the "components" (keys) of a GetSet value. The value must be an object.
  */
-type ExtractComponents<T extends Constructor, U extends Attr<T>> = Value<
-  T,
-  U
-> extends Record<string, any>
-  ? EnforceString<keyof Value<T, U>>[]
-  : never;
+type ExtractComponents<T extends Constructor, U extends Attr<T>> =
+  Value<T, U> extends Record<string, any>
+    ? EnforceString<keyof Value<T, U>>[]
+    : never;
 
 export const Factory = {
   addGetterSetter<T extends Constructor, U extends Attr<T>>(

src/Global.ts

@@ -30,10 +30,10 @@ export const glob: any =
   typeof global !== 'undefined'
     ? global
     : typeof window !== 'undefined'
-    ? window
-    : typeof WorkerGlobalScope !== 'undefined'
-    ? self
-    : {};
+      ? window
+      : typeof WorkerGlobalScope !== 'undefined'
+        ? self
+        : {};
 
 export const Konva = {
   _global: glob,

src/Shape.ts

@@ -188,7 +188,7 @@ function _clearRadialGradientCache(this: Node) {
  *});
  */
 export class Shape<
-  Config extends ShapeConfig = ShapeConfig
+  Config extends ShapeConfig = ShapeConfig,
 > extends Node<Config> {
   _centroid: boolean;
   colorKey: string;

src/Util.ts

@@ -1068,16 +1068,16 @@ export const Util = {
     );
     context.lineTo(xOrigin, yOrigin + topLeft);
     context.arc(
-        xOrigin + topLeft, 
-        yOrigin + topLeft, 
-        topLeft, 
-        Math.PI, 
-        (Math.PI * 3) / 2, 
-        false
+      xOrigin + topLeft,
+      yOrigin + topLeft,
+      topLeft,
+      Math.PI,
+      (Math.PI * 3) / 2,
+      false
     );
   },
   drawRoundedPolygonPath(
-    context: Context, 
+    context: Context,
     points: Vector2d[],
     sides: number,
     radius: number,
@@ -1088,8 +1088,8 @@ export const Util = {
       const prev = points[(i - 1 + sides) % sides];
       const curr = points[i];
       const next = points[(i + 1) % sides];
-      const vec1 = {x: curr.x - prev.x, y: curr.y - prev.y};
-      const vec2 = {x: next.x - curr.x, y: next.y - curr.y};
+      const vec1 = { x: curr.x - prev.x, y: curr.y - prev.y };
+      const vec2 = { x: next.x - curr.x, y: next.y - curr.y };
       const len1 = Math.hypot(vec1.x, vec1.y);
       const len2 = Math.hypot(vec2.x, vec2.y);
       let currCornerRadius;
@@ -1100,9 +1100,10 @@ export const Util = {
       }
       const maxCornerRadius = radius * Math.cos(Math.PI / sides);
       // cornerRadius creates perfect circle at 1/2 radius
-      currCornerRadius = maxCornerRadius * Math.min(1, (currCornerRadius / radius) * 2);
-      const normalVec1 = {x: vec1.x / len1, y: vec1.y / len1};
-      const normalVec2 = {x: vec2.x / len2, y: vec2.y / len2};
+      currCornerRadius =
+        maxCornerRadius * Math.min(1, (currCornerRadius / radius) * 2);
+      const normalVec1 = { x: vec1.x / len1, y: vec1.y / len1 };
+      const normalVec2 = { x: vec2.x / len2, y: vec2.y / len2 };
       const p1 = {
         x: curr.x - normalVec1.x * currCornerRadius,
         y: curr.y - normalVec1.y * currCornerRadius,
@@ -1118,5 +1119,5 @@ export const Util = {
       }
       context.arcTo(curr.x, curr.y, p2.x, p2.y, currCornerRadius);
     }
-  }
+  },
 };

src/filters/Emboss.ts

@@ -31,7 +31,7 @@ export const Emboss: Filter = function (imageData) {
     w = imageData.width,
     h = imageData.height,
     w4 = w * 4;
-  let  dirY = 0,
+  let dirY = 0,
     dirX = 0,
     y = h;
 

src/filters/Enhance.ts

@@ -2,7 +2,13 @@ import { Factory } from '../Factory';
 import { Node, Filter } from '../Node';
 import { getNumberValidator } from '../Validators';
 
-function remap(fromValue: number, fromMin: number, fromMax: number, toMin: number, toMax: number) {
+function remap(
+  fromValue: number,
+  fromMin: number,
+  fromMax: number,
+  toMin: number,
+  toMax: number
+) {
   // Compute the range of the data
   const fromRange = fromMax - fromMin,
     toRange = toMax - toMin;

src/filters/Kaleidoscope.ts

@@ -116,7 +116,8 @@ const FromPolar = function (src, dst, opt) {
       const dx = x - xMid;
       const dy = y - yMid;
       const radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
-      let theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
+      let theta =
+        ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
       theta = (theta * tSize) / 360;
       x1 = Math.floor(theta);
       y1 = Math.floor(radius);

src/filters/Mask.ts

@@ -138,7 +138,17 @@ function dilateMask(mask, sw, sh) {
 }
 
 function smoothEdgeMask(mask, sw: number, sh: number) {
-  const weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
+  const weights = [
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+    1 / 9,
+  ];
   const side = Math.round(Math.sqrt(weights.length));
   const halfSide = Math.floor(side / 2);
 

src/shapes/Line.ts

@@ -97,7 +97,7 @@ export interface LineConfig extends ShapeConfig {
  */
 
 export class Line<
-  Config extends LineConfig = LineConfig
+  Config extends LineConfig = LineConfig,
 > extends Shape<Config> {
   constructor(config?: Config) {
     super(config);

src/shapes/RegularPolygon.ts

@@ -1,7 +1,10 @@
 import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
 import { GetSet, Vector2d } from '../types';
-import { getNumberOrArrayOfNumbersValidator, getNumberValidator } from '../Validators';
+import {
+  getNumberOrArrayOfNumbersValidator,
+  getNumberValidator,
+} from '../Validators';
 import { _registerNode } from '../Global';
 import { Context } from '../Context';
 import { Util } from '../Util';

src/shapes/Text.ts

@@ -416,8 +416,8 @@ export class Text extends Shape<TextConfig> {
     const str = Util._isString(text)
       ? text
       : text === null || text === undefined
-      ? ''
-      : text + '';
+        ? ''
+        : text + '';
     this._setAttr(TEXT, str);
     return this;
   }