@frameright/image-display-control-web-component - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

custom-elements.json

@@ -19,3 +19,4 @@ {
               "static": true,
-              "default": "new RectangleImageRegion(\n    '<no region>',\n    new PositionInRelativeCoord(0, 0),\n    new SizeInRelativeCoord(1, 1)\n  )"
+              "readonly": true,
+              "default": "new RectangleImageRegion(\n    '<no region>',\n    new PositionInRelativeCoord(0, 0),\n    new SizeInRelativeCoord(1, 1),\n  )"
             },
@@ -521,2 +522,3 @@ {
               "static": true,
+              "readonly": true,
               "default": "0"
@@ -532,2 +534,3 @@ },
               "static": true,
+              "readonly": true,
               "default": "1"
@@ -543,2 +546,3 @@ },
               "static": true,
+              "readonly": true,
               "default": "2"
@@ -554,2 +558,3 @@ },
               "static": true,
+              "readonly": true,
               "default": "3"
@@ -565,2 +570,3 @@ },
               "static": true,
+              "readonly": true,
               "default": "4"
@@ -576,2 +582,3 @@ },
               "static": true,
+              "readonly": true,
               "default": "5"
@@ -578,0 +585,0 @@ },

dist/src/ImageDisplayControl.js

@@ -401,3 +401,5 @@ import { Logger } from './Logger.js';
         this._logger.debug(`Element ratio: ${this._elementSize.getSafeRatio().toFixed(3)}`);
-        this._logger.debug(`Original image ratio: ${this._fittedImageSize.getSafeRatio().toFixed(3)}`);
+        this._logger.debug(`Original image ratio: ${this._fittedImageSize
+            .getSafeRatio()
+            .toFixed(3)}`);
         if (!this.dataset.avoidNoRegion || this.dataset.avoidNoRegion !== 'off') {
@@ -404,0 +406,0 @@ // The original image region is to be avoided. Setting smallestRatioDiff

dist/src/RectangleImageRegion.js

@@ -8,4 +8,3 @@ import { PositionInPixels } from './PositionInPixels.js';
     // applied transformation, in order to zoom in on a region.
-    static getTransformedImageSize(originalImageRegionSize, transformation // current image transformation being applied
-    ) {
+    static getTransformedImageSize(originalImageRegionSize, transformation) {
         return originalImageRegionSize.getScaled(transformation.factor);
@@ -240,4 +239,3 @@ }
     getBoundingBox(currentComponentSize, // component = <img> element
-    originalImageRegionSize, transformation // current image transformation being applied
-    ) {
+    originalImageRegionSize, transformation) {
         const transformedImagePositionInComponent = new PositionInPixels(-transformation.origin.x * transformation.factor, -transformation.origin.y * transformation.factor);
@@ -244,0 +242,0 @@ const transformedImageSize = RectangleImageRegion.getTransformedImageSize(originalImageRegionSize, transformation);

package.json

@@ -26,3 +26,3 @@ {
   },
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "dist/src/index.js",
@@ -51,22 +51,21 @@ "module": "dist/src/index.js",
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^8.0.2",
+    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@open-wc/eslint-config": "^12.0.0",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@web/dev-server": "^0.1.34",
-    "@web/test-runner": "^0.14.0",
-    "concurrently": "^5.3.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@web/dev-server": "^0.3.0",
+    "@web/test-runner": "^0.17.0",
+    "concurrently": "^8.2.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
+    "lint-staged": "^14.0.0",
+    "prettier": "^3.0.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.2",
+    "typescript": "^5.1.6",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@web/rollup-plugin-copy": "^0.3.0",
-    "rollup": "^2.79.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@web/rollup-plugin-copy": "^0.4.0",
+    "rollup": "^3.27.2",
     "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "markdown-toc": "^1.2.0"
@@ -96,7 +95,2 @@ },
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
@@ -103,0 +97,0 @@ "*.ts": [

README.md

 [<img src="https://avatars.githubusercontent.com/u/35964478?s=200&v=4" align="right" width="64" height="64">](https://frameright.io)
 [![npm version](https://img.shields.io/npm/v/@frameright/image-display-control-web-component)](https://www.npmjs.com/package/@frameright/image-display-control-web-component)
-[![validate-on-push](https://github.com/Frameright/image-display-control-web-component/actions/workflows/validate-on-push.yml/badge.svg)](https://github.com/Frameright/image-display-control-web-component/actions/workflows/validate-on-push.yml)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@frameright/image-display-control-web-component)
@@ -29,3 +28,3 @@
 
-&emsp; :sparkles: [Live mobile demo](https://webc.frameright.io)
+&emsp; :sparkles: [Live demo](https://webc.frameright.io)
 
@@ -119,3 +118,3 @@ &emsp; 💻 [CodeSandbox](https://codesandbox.io/s/image-display-control-web-component-6hzmq5)
 
-&emsp; :sparkles: [Live mobile demo](https://webc.frameright.io)
+&emsp; :sparkles: [Live demo](https://webc.frameright.io)
 
@@ -196,3 +195,3 @@ &emsp; 💻 [CodeSandbox](https://codesandbox.io/s/image-display-control-web-component-6hzmq5)
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.1.3/dist/image-display-control.min.js"
+  src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.1.8/dist/image-display-control.min.js"
 ></script>
@@ -254,3 +253,3 @@ ```
 
-&emsp; :sparkles: [Live mobile demo](https://webc.frameright.io)
+&emsp; :sparkles: [Live demo](https://webc.frameright.io)
 
@@ -257,0 +256,0 @@ ### Dependency tree / credits

src/ImageDisplayControl.ts

@@ -39,3 +39,3 @@ import { Logger } from './Logger.js';
     new PositionInRelativeCoord(0, 0),
-    new SizeInRelativeCoord(1, 1)
+    new SizeInRelativeCoord(1, 1),
   );
@@ -137,3 +137,3 @@
         this._sizeObserver = new ResizeObserver(
-          this._resizeCallback.bind(this)
+          this._resizeCallback.bind(this),
         );
@@ -150,3 +150,3 @@ this._sizeObserver.observe(this);
       this._logger.warn(
-        'Component disabled, spurious call to _resizeCallback()'
+        'Component disabled, spurious call to _resizeCallback()',
       );
@@ -161,3 +161,3 @@ return;
       this._logger.warn(
-        'No ResizeObserverEntry, spurious call to _resizeCallback()'
+        'No ResizeObserverEntry, spurious call to _resizeCallback()',
       );
@@ -177,3 +177,3 @@ return;
         entry.contentBoxSize[0].inlineSize,
-        entry.contentBoxSize[0].blockSize
+        entry.contentBoxSize[0].blockSize,
       );
@@ -183,3 +183,3 @@ } else {
         entry.contentRect.width,
-        entry.contentRect.height
+        entry.contentRect.height,
       );
@@ -252,3 +252,3 @@ }
           `position=${rectangleImageRegion.position}, ` +
-          `size=${rectangleImageRegion.size}`
+          `size=${rectangleImageRegion.size}`,
       );
@@ -275,3 +275,3 @@ this._rectangleImageRegions.push(rectangleImageRegion);
       this.naturalWidth,
-      this.naturalHeight
+      this.naturalHeight,
     );
@@ -302,3 +302,3 @@
       this.naturalWidth * fittingFactor,
-      this.naturalHeight * fittingFactor
+      this.naturalHeight * fittingFactor,
     );
@@ -308,3 +308,3 @@
       this._elementSize.getWidth() - this._fittedImageSize.getWidth(),
-      this._elementSize.getHeight() - this._fittedImageSize.getHeight()
+      this._elementSize.getHeight() - this._fittedImageSize.getHeight(),
     );
@@ -314,3 +314,3 @@
     this._logger.debug(
-      `Fitted image margin: ${this._fittedImageBottomRightMargin}`
+      `Fitted image margin: ${this._fittedImageBottomRightMargin}`,
     );
@@ -340,3 +340,3 @@ }
         bestRegion = this._rectangleImageRegions.find(
-          region => region.id === this.dataset.imageRegionId
+          region => region.id === this.dataset.imageRegionId,
         );
@@ -374,3 +374,3 @@ }
         this._fittedImageSize,
-        this._fittedImageBottomRightMargin
+        this._fittedImageBottomRightMargin,
       );
@@ -388,3 +388,3 @@ this._setCssToPanAndZoomToRegion(transformation);
           this._fittedImageSize,
-          transformation
+          transformation,
         ).getWidth();
@@ -401,9 +401,11 @@ this._setDebounceSizesAttribute(neededImageWidth);
     let smallestRatioDiff = this._elementSize.ratioDiffFactor(
-      this._fittedImageSize
+      this._fittedImageSize,
     );
     this._logger.debug(
-      `Element ratio: ${this._elementSize.getSafeRatio().toFixed(3)}`
+      `Element ratio: ${this._elementSize.getSafeRatio().toFixed(3)}`,
     );
     this._logger.debug(
-      `Original image ratio: ${this._fittedImageSize.getSafeRatio().toFixed(3)}`
+      `Original image ratio: ${this._fittedImageSize
+        .getSafeRatio()
+        .toFixed(3)}`,
     );
@@ -423,3 +425,3 @@
         this._logger.debug(
-          `${region.id} region ratio: ${regionSize.getSafeRatio().toFixed(3)}`
+          `${region.id} region ratio: ${regionSize.getSafeRatio().toFixed(3)}`,
         );
@@ -533,3 +535,3 @@ const ratioDiff = this._elementSize.ratioDiffFactor(regionSize);
           this._logger.debug(
-            `Resetting sizes= to ${this._sizesAttributeToRestore}`
+            `Resetting sizes= to ${this._sizesAttributeToRestore}`,
           );
@@ -570,8 +572,8 @@ this.sizes = this._sizesAttributeToRestore;
     this.style.transformOrigin = `${transformation.origin.x.toFixed(
-      3
+      3,
     )}px ${transformation.origin.y.toFixed(3)}px`;
     this.style.transform = `translate(${-transformation.origin.x.toFixed(
-      3
+      3,
     )}px, ${-transformation.origin.y.toFixed(
-      3
+      3,
     )}px) scale(${transformation.factor.toFixed(3)})`;
@@ -629,3 +631,3 @@ this.style.clipPath =
     region: RectangleImageRegion,
-    transformation: Transformation
+    transformation: Transformation,
   ) {
@@ -646,3 +648,3 @@ let overlay = this._debugRegionOverlays.get(region.id);
       this._fittedImageSize,
-      transformation
+      transformation,
     );
@@ -683,3 +685,3 @@ overlay.style.left = `${boundingBox.position.x}px`;
         'CSS `clip-path: inset()` is not supported. ' +
-          'Disabling the web component'
+          'Disabling the web component',
       );
@@ -693,3 +695,3 @@ }
           ' Consider using a polyfill like ' +
-          ' https://github.com/juggle/resize-observer'
+          ' https://github.com/juggle/resize-observer',
       );
@@ -702,3 +704,3 @@ }
         'CSS containment is not supported. Consider using ' +
-          'the `css-contain-fallback=` attribute'
+          'the `css-contain-fallback=` attribute',
       );
@@ -705,0 +707,0 @@ }

src/PositionInPixels.ts

@@ -18,3 +18,3 @@ import { PositionInRelativeCoord } from './PositionInRelativeCoord.js';
       this.x / baseSize.getSafeWidth(),
-      this.y / baseSize.getSafeHeight()
+      this.y / baseSize.getSafeHeight(),
     );
@@ -21,0 +21,0 @@ }

src/RectangleImageRegion.ts

@@ -25,3 +25,3 @@ import { Logger } from './Logger.js';
     originalImageRegionSize: SizeInPixels,
-    transformation: Transformation // current image transformation being applied
+    transformation: Transformation, // current image transformation being applied
   ): SizeInPixels {
@@ -34,3 +34,3 @@ return originalImageRegionSize.getScaled(transformation.factor);
     position?: PositionInRelativeCoord,
-    size?: SizeInRelativeCoord
+    size?: SizeInRelativeCoord,
   ) {
@@ -70,3 +70,3 @@ this.id = id ?? '';
         logger.warn(
-          `Region ${values.id} has missing imageWidth or imageHeight, skipping.`
+          `Region ${values.id} has missing imageWidth or imageHeight, skipping.`,
         );
@@ -78,3 +78,3 @@ this._unknown = true;
         parseFloat(`${values.imageWidth}`),
-        parseFloat(`${values.imageHeight}`)
+        parseFloat(`${values.imageHeight}`),
       );
@@ -90,3 +90,3 @@ }
       logger.warn(
-        `Region ${values.id} has missing x, y, width or height, skipping.`
+        `Region ${values.id} has missing x, y, width or height, skipping.`,
       );
@@ -108,3 +108,3 @@ this._unknown = true;
       logger.warn(
-        `Region ${values.id} has non-numeric x, y, width or height, skipping.`
+        `Region ${values.id} has non-numeric x, y, width or height, skipping.`,
       );
@@ -117,3 +117,3 @@ this._unknown = true;
       logger.warn(
-        `Region ${values.id} has negative/zero x, y, width or height, skipping.`
+        `Region ${values.id} has negative/zero x, y, width or height, skipping.`,
       );
@@ -145,6 +145,6 @@ this._unknown = true;
     originalImageRegionSize: SizeInPixels,
-    bottomRightClipMargins: SizeInPixels
+    bottomRightClipMargins: SizeInPixels,
   ): Transformation {
     const regionPos = this.position.getPositionInPixels(
-      originalImageRegionSize
+      originalImageRegionSize,
     );
@@ -295,3 +295,3 @@ const regionSize = this.size.getSizeInPixels(originalImageRegionSize);
       regionPos.x - xOffset,
-      regionPos.y - yOffset
+      regionPos.y - yOffset,
     );
@@ -307,3 +307,3 @@
         regionXFromRight - xOffset + bottomRightClipMargins.getWidth(),
-        regionYFromBottom - yOffset + bottomRightClipMargins.getHeight()
+        regionYFromBottom - yOffset + bottomRightClipMargins.getHeight(),
       ),
@@ -318,11 +318,11 @@ };
     originalImageRegionSize: SizeInPixels,
-    transformation: Transformation // current image transformation being applied
+    transformation: Transformation, // current image transformation being applied
   ) {
     const transformedImagePositionInComponent = new PositionInPixels(
       -transformation.origin.x * transformation.factor,
-      -transformation.origin.y * transformation.factor
+      -transformation.origin.y * transformation.factor,
     );
     const transformedImageSize = RectangleImageRegion.getTransformedImageSize(
       originalImageRegionSize,
-      transformation
+      transformation,
     );
@@ -338,3 +338,3 @@
         regionPositionInTransformedImage.y +
-          transformedImagePositionInComponent.y
+          transformedImagePositionInComponent.y,
       ),
@@ -341,0 +341,0 @@ size: this.size.getSizeInPixels(transformedImageSize),

src/SizeInPixels.ts

@@ -84,3 +84,3 @@ import { SizeInRelativeCoord } from './SizeInRelativeCoord.js';
       this._width / baseSize.getSafeWidth(),
-      this._height / baseSize.getSafeHeight()
+      this._height / baseSize.getSafeHeight(),
     );
@@ -91,3 +91,3 @@ }
     return `{width=${this._width.toFixed(3)}px, height=${this._height.toFixed(
-      3
+      3,
     )}px}`;
@@ -94,0 +94,0 @@ }

src/SizeInRelativeCoord.ts

@@ -23,3 +23,3 @@ import { SizeInPixels } from './SizeInPixels.js';
     return `{width=${this._width.toFixed(3)}, height=${this._height.toFixed(
-      3
+      3,
     )}}`;
@@ -26,0 +26,0 @@ }

No alert changes

Improved metrics

Dev dependency count

20

decreased by-4.76%

Lines of code

3952

increased by0.23%

Worsened metrics

Total package byte prevSize

267837

decreased by-0.04%

Number of lines in readme file

269

decreased by-0.37%

No dependency changes