react-svg-pan-zoom - npm Package Compare versions

Comparing version 3.7.1 to 3.8.0

build-commonjs/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.INITIAL_VALUE = exports.ALIGN_BOTTOM = exports.ALIGN_TOP = exports.ALIGN_RIGHT = exports.ALIGN_LEFT = exports.ALIGN_CENTER = exports.ACTION_PAN = exports.ACTION_ZOOM = exports.POSITION_LEFT = exports.POSITION_BOTTOM = exports.POSITION_RIGHT = exports.POSITION_TOP = exports.POSITION_NONE = exports.TOOL_ZOOM_OUT = exports.TOOL_ZOOM_IN = exports.TOOL_PAN = exports.TOOL_NONE = exports.TOOL_AUTO = exports.MODE_ZOOMING = exports.MODE_PANNING = exports.MODE_IDLE = void 0;
+exports.INITIAL_VALUE = exports.ALIGN_COVER = exports.ALIGN_BOTTOM = exports.ALIGN_TOP = exports.ALIGN_RIGHT = exports.ALIGN_LEFT = exports.ALIGN_CENTER = exports.ACTION_PAN = exports.ACTION_ZOOM = exports.POSITION_LEFT = exports.POSITION_BOTTOM = exports.POSITION_RIGHT = exports.POSITION_TOP = exports.POSITION_NONE = exports.TOOL_ZOOM_OUT = exports.TOOL_ZOOM_IN = exports.TOOL_PAN = exports.TOOL_NONE = exports.TOOL_AUTO = exports.MODE_ZOOMING = exports.MODE_PANNING = exports.MODE_IDLE = void 0;
 var MODE_IDLE = 'idle';
@@ -48,3 +48,5 @@ exports.MODE_IDLE = MODE_IDLE;
 exports.ALIGN_BOTTOM = ALIGN_BOTTOM;
+var ALIGN_COVER = 'cover';
+exports.ALIGN_COVER = ALIGN_COVER;
 var INITIAL_VALUE = {};
 exports.INITIAL_VALUE = INITIAL_VALUE;

build-commonjs/features/zoom.js

@@ -125,7 +125,6 @@ "use strict";
   var translateX = -SVGMinX * scaleX;
-  var translateY = -SVGMinY * scaleY; // after fitting, SVG and the viewer will match in width (1) or in height (2)
+  var translateY = -SVGMinY * scaleY; // after fitting, SVG and the viewer will match in width (1) or in height (2) or SVG will cover the container with preserving aspect ratio (0)
 
   if (scaleX < scaleY) {
-    //(1) match in width, meaning scaled SVGHeight <= viewerHeight
-    var remainderY = viewerHeight - scaleX * SVGHeight;
+    var remainderY = viewerHeight - scaleX * SVGHeight; //(1) match in width, meaning scaled SVGHeight <= viewerHeight
 
@@ -145,2 +144,11 @@ switch (SVGAlignY) {
 
+      case _constants.ALIGN_COVER:
+        scaleMatrix = (0, _transformationMatrix.scale)(scaleY, scaleY); // (0) we must now match to short edge, in this case - height
+
+        var remainderX = viewerWidth - scaleY * SVGWidth; // calculate remainder in the other scale
+
+        translateX = SVGMinX + Math.round(remainderX / 2); // center by the long edge
+
+        break;
+
       default: //no op
@@ -150,5 +158,5 @@
   } else {
-    //(2) match in height, meaning scaled SVGWidth <= viewerWidth
-    var remainderX = viewerWidth - scaleY * SVGWidth;
+    var _remainderX = viewerWidth - scaleY * SVGWidth; //(2) match in height, meaning scaled SVGWidth <= viewerWidth
 
+
     switch (SVGAlignX) {
@@ -160,9 +168,19 @@ case _constants.ALIGN_LEFT:
       case _constants.ALIGN_CENTER:
-        translateX = Math.round(remainderX / 2) - SVGMinX * scaleLevel;
+        translateX = Math.round(_remainderX / 2) - SVGMinX * scaleLevel;
         break;
 
       case _constants.ALIGN_RIGHT:
-        translateX = remainderX - SVGMinX * scaleLevel;
+        translateX = _remainderX - SVGMinX * scaleLevel;
         break;
 
+      case _constants.ALIGN_COVER:
+        scaleMatrix = (0, _transformationMatrix.scale)(scaleX, scaleX); // (0) we must now match to short edge, in this case - width
+
+        var _remainderY = viewerHeight - scaleX * SVGHeight; // calculate remainder in the other scale
+
+
+        translateY = SVGMinY + Math.round(_remainderY / 2); // center by the long edge
+
+        break;
+
       default: //no op
@@ -169,0 +187,0 @@

build-commonjs/ui-toolbar/toolbar-button.js

@@ -87,3 +87,3 @@ "use strict";
         margin: [_constants.POSITION_TOP, _constants.POSITION_BOTTOM].indexOf(this.props.toolbarPosition) >= 0 ? "2px 1px" : "1px 2px",
-        color: this.props.active || this.state.hover ? '#1CA6FC' : '#FFF',
+        color: this.props.active || this.state.hover ? this.props.activeColor : '#FFF',
         transition: "color 200ms ease",
@@ -131,4 +131,5 @@ background: "none",
   toolbarPosition: _propTypes.default.string.isRequired,
+  activeColor: _propTypes.default.string.isRequired,
   onClick: _propTypes.default.func.isRequired,
   active: _propTypes.default.bool.isRequired
 };

build-commonjs/ui-toolbar/toolbar.js

@@ -35,2 +35,3 @@ "use strict";
       onChangeTool = _ref.onChangeTool,
+      activeToolColor = _ref.activeToolColor,
       position = _ref.position,
@@ -74,2 +75,3 @@ SVGAlignX = _ref.SVGAlignX,
     active: tool === _constants.TOOL_NONE,
+    activeColor: activeToolColor,
     name: "unselect-tools",
@@ -83,2 +85,3 @@ title: "Selection",
     active: tool === _constants.TOOL_PAN,
+    activeColor: activeToolColor,
     name: "select-tool-pan",
@@ -92,2 +95,3 @@ title: "Pan",
     active: tool === _constants.TOOL_ZOOM_IN,
+    activeColor: activeToolColor,
     name: "select-tool-zoom-in",
@@ -101,2 +105,3 @@ title: "Zoom in",
     active: tool === _constants.TOOL_ZOOM_OUT,
+    activeColor: activeToolColor,
     name: "select-tool-zoom-out",
@@ -110,2 +115,3 @@ title: "Zoom out",
     active: false,
+    activeColor: activeToolColor,
     name: "fit-to-viewer",
@@ -127,3 +133,4 @@ title: "Fit to viewer",
   SVGAlignX: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_LEFT, _constants.ALIGN_RIGHT]),
-  SVGAlignY: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_TOP, _constants.ALIGN_BOTTOM])
+  SVGAlignY: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_TOP, _constants.ALIGN_BOTTOM]),
+  activeToolColor: _propTypes.default.string
 };
@@ -133,3 +140,4 @@ Toolbar.defaultProps = {
   SVGAlignX: _constants.ALIGN_LEFT,
-  SVGAlignY: _constants.ALIGN_TOP
+  SVGAlignY: _constants.ALIGN_TOP,
+  activeToolColor: '#1CA6FC'
 };

build-commonjs/viewer.js

@@ -653,3 +653,4 @@ "use strict";
     SVGAlignX: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_LEFT, _constants.ALIGN_RIGHT]),
-    SVGAlignY: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_TOP, _constants.ALIGN_BOTTOM])
+    SVGAlignY: _propTypes.default.oneOf([_constants.ALIGN_CENTER, _constants.ALIGN_TOP, _constants.ALIGN_BOTTOM]),
+    activeToolColor: _propTypes.default.string
   }),
@@ -656,0 +657,0 @@

build-es/constants.js

@@ -21,2 +21,3 @@ export var MODE_IDLE = 'idle';
 export var ALIGN_BOTTOM = 'bottom';
+export var ALIGN_COVER = 'cover';
 export var INITIAL_VALUE = {};

build-es/features/zoom.js

@@ -8,3 +8,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import { fromObject, scale, transform, translate } from 'transformation-matrix';
-import { ACTION_ZOOM, MODE_IDLE, MODE_ZOOMING, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM } from '../constants';
+import { ACTION_ZOOM, MODE_IDLE, MODE_ZOOMING, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM, ALIGN_COVER } from '../constants';
 import { decompose, getSVGPoint, set } from './common';
@@ -101,7 +101,6 @@ import calculateBox from '../utils/calculateBox';
   var translateX = -SVGMinX * scaleX;
-  var translateY = -SVGMinY * scaleY; // after fitting, SVG and the viewer will match in width (1) or in height (2)
+  var translateY = -SVGMinY * scaleY; // after fitting, SVG and the viewer will match in width (1) or in height (2) or SVG will cover the container with preserving aspect ratio (0)
 
   if (scaleX < scaleY) {
-    //(1) match in width, meaning scaled SVGHeight <= viewerHeight
-    var remainderY = viewerHeight - scaleX * SVGHeight;
+    var remainderY = viewerHeight - scaleX * SVGHeight; //(1) match in width, meaning scaled SVGHeight <= viewerHeight
 
@@ -121,2 +120,11 @@ switch (SVGAlignY) {
 
+      case ALIGN_COVER:
+        scaleMatrix = scale(scaleY, scaleY); // (0) we must now match to short edge, in this case - height
+
+        var remainderX = viewerWidth - scaleY * SVGWidth; // calculate remainder in the other scale
+
+        translateX = SVGMinX + Math.round(remainderX / 2); // center by the long edge
+
+        break;
+
       default: //no op
@@ -126,5 +134,5 @@
   } else {
-    //(2) match in height, meaning scaled SVGWidth <= viewerWidth
-    var remainderX = viewerWidth - scaleY * SVGWidth;
+    var _remainderX = viewerWidth - scaleY * SVGWidth; //(2) match in height, meaning scaled SVGWidth <= viewerWidth
 
+
     switch (SVGAlignX) {
@@ -136,9 +144,19 @@ case ALIGN_LEFT:
       case ALIGN_CENTER:
-        translateX = Math.round(remainderX / 2) - SVGMinX * scaleLevel;
+        translateX = Math.round(_remainderX / 2) - SVGMinX * scaleLevel;
         break;
 
       case ALIGN_RIGHT:
-        translateX = remainderX - SVGMinX * scaleLevel;
+        translateX = _remainderX - SVGMinX * scaleLevel;
         break;
 
+      case ALIGN_COVER:
+        scaleMatrix = scale(scaleX, scaleX); // (0) we must now match to short edge, in this case - width
+
+        var _remainderY = viewerHeight - scaleX * SVGHeight; // calculate remainder in the other scale
+
+
+        translateY = SVGMinY + Math.round(_remainderY / 2); // center by the long edge
+
+        break;
+
       default: //no op
@@ -145,0 +163,0 @@

build-es/ui-toolbar/toolbar-button.js

@@ -76,3 +76,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         margin: [POSITION_TOP, POSITION_BOTTOM].indexOf(this.props.toolbarPosition) >= 0 ? "2px 1px" : "1px 2px",
-        color: this.props.active || this.state.hover ? '#1CA6FC' : '#FFF',
+        color: this.props.active || this.state.hover ? this.props.activeColor : '#FFF',
         transition: "color 200ms ease",
@@ -120,4 +120,5 @@ background: "none",
   toolbarPosition: PropTypes.string.isRequired,
+  activeColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   active: PropTypes.bool.isRequired
 };

build-es/ui-toolbar/toolbar.js

@@ -16,2 +16,3 @@ import React from 'react';
       onChangeTool = _ref.onChangeTool,
+      activeToolColor = _ref.activeToolColor,
       position = _ref.position,
@@ -55,2 +56,3 @@ SVGAlignX = _ref.SVGAlignX,
     active: tool === TOOL_NONE,
+    activeColor: activeToolColor,
     name: "unselect-tools",
@@ -64,2 +66,3 @@ title: "Selection",
     active: tool === TOOL_PAN,
+    activeColor: activeToolColor,
     name: "select-tool-pan",
@@ -73,2 +76,3 @@ title: "Pan",
     active: tool === TOOL_ZOOM_IN,
+    activeColor: activeToolColor,
     name: "select-tool-zoom-in",
@@ -82,2 +86,3 @@ title: "Zoom in",
     active: tool === TOOL_ZOOM_OUT,
+    activeColor: activeToolColor,
     name: "select-tool-zoom-out",
@@ -91,2 +96,3 @@ title: "Zoom out",
     active: false,
+    activeColor: activeToolColor,
     name: "fit-to-viewer",
@@ -107,3 +113,4 @@ title: "Fit to viewer",
   SVGAlignX: PropTypes.oneOf([ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT]),
-  SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM])
+  SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+  activeToolColor: PropTypes.string
 };
@@ -113,3 +120,4 @@ Toolbar.defaultProps = {
   SVGAlignX: ALIGN_LEFT,
-  SVGAlignY: ALIGN_TOP
+  SVGAlignY: ALIGN_TOP,
+  activeToolColor: '#1CA6FC'
 };

build-es/viewer.js

@@ -649,3 +649,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
     SVGAlignX: PropTypes.oneOf([ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT]),
-    SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM])
+    SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+    activeToolColor: PropTypes.string
   }),
@@ -652,0 +653,0 @@

build-storybook/asset-manifest.json

 {
   "files": {
-    "main.js": "/react-svg-pan-zoom/main.178b16ab73a73017075d.bundle.js",
-    "main.js.map": "/react-svg-pan-zoom/main.178b16ab73a73017075d.bundle.js.map",
-    "runtime~main.js": "/react-svg-pan-zoom/runtime~main.178b16ab73a73017075d.bundle.js",
-    "runtime~main.js.map": "/react-svg-pan-zoom/runtime~main.178b16ab73a73017075d.bundle.js.map",
-    "vendors~main.js": "/react-svg-pan-zoom/vendors~main.178b16ab73a73017075d.bundle.js",
-    "vendors~main.js.map": "/react-svg-pan-zoom/vendors~main.178b16ab73a73017075d.bundle.js.map",
+    "main.js": "/react-svg-pan-zoom/main.f2739cd3fb0cb488e7eb.bundle.js",
+    "main.js.map": "/react-svg-pan-zoom/main.f2739cd3fb0cb488e7eb.bundle.js.map",
+    "runtime~main.js": "/react-svg-pan-zoom/runtime~main.f2739cd3fb0cb488e7eb.bundle.js",
+    "runtime~main.js.map": "/react-svg-pan-zoom/runtime~main.f2739cd3fb0cb488e7eb.bundle.js.map",
+    "vendors~main.js": "/react-svg-pan-zoom/vendors~main.f2739cd3fb0cb488e7eb.bundle.js",
+    "vendors~main.js.map": "/react-svg-pan-zoom/vendors~main.f2739cd3fb0cb488e7eb.bundle.js.map",
     "iframe.html": "/react-svg-pan-zoom/iframe.html",
-    "precache-manifest.50bb9a5e1e0a9c5f8816e037d0822b60.js": "/react-svg-pan-zoom/precache-manifest.50bb9a5e1e0a9c5f8816e037d0822b60.js",
+    "precache-manifest.ff1066567a650a973820085663df9db4.js": "/react-svg-pan-zoom/precache-manifest.ff1066567a650a973820085663df9db4.js",
     "service-worker.js": "/react-svg-pan-zoom/service-worker.js"
   },
   "entrypoints": [
-    "runtime~main.178b16ab73a73017075d.bundle.js",
-    "vendors~main.178b16ab73a73017075d.bundle.js",
-    "main.178b16ab73a73017075d.bundle.js"
+    "runtime~main.f2739cd3fb0cb488e7eb.bundle.js",
+    "vendors~main.f2739cd3fb0cb488e7eb.bundle.js",
+    "main.f2739cd3fb0cb488e7eb.bundle.js"
   ]
 }

build-storybook/service-worker.js

@@ -17,3 +17,3 @@ /**
 importScripts(
-  "precache-manifest.50bb9a5e1e0a9c5f8816e037d0822b60.js"
+  "precache-manifest.ff1066567a650a973820085663df9db4.js"
 );
@@ -20,0 +20,0 @@

package.json

 {
   "author": "chrvadala",
   "name": "react-svg-pan-zoom",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "A React component that adds pan and zoom features to SVG",
@@ -57,8 +57,8 @@ "main": "./build-commonjs/index.js",
     "prop-types": "^15.7.2",
-    "transformation-matrix": "^2.1.0"
+    "transformation-matrix": "^2.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/runtime": "^7.7.6",
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/runtime": "^7.7.7",
     "@storybook/addon-actions": "5.2.8",
@@ -70,3 +70,3 @@ "@storybook/addon-knobs": "5.2.8",
     "@storybook/theming": "^5.2.8",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.0.25",
     "babel-loader": "^8.0.6",
@@ -85,3 +85,3 @@ "coveralls": "^3.0.9",
     "remarkable": "^2.0.0",
-    "webpack": "^4.41.2",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.9"
@@ -88,0 +88,0 @@ },

README.md

@@ -84,2 +84,3 @@ # react-svg-pan-zoom
 - **v3.7** - Adds some more unit tests, upgrades deps
+- **v3.8** - Adds cover option on `fitToViewer` method [#167](https://github.com/chrvadala/react-svg-pan-zoom/pull/167), adds `activeToolColor` property [#168](https://github.com/chrvadala/react-svg-pan-zoom/pull/168), upgrades deps
 
@@ -111,1 +112,3 @@ ## Some projects using react-svg-pan-zoom
 - [UnHumbleBen](https://github.com/UnHumbleBen)
+- [wolasss](https://github.com/wolasss)
+- [leweohlsen](https://github.com/leweohlsen)

src/constants.js

@@ -25,3 +25,4 @@ export const MODE_IDLE = 'idle';
 export const ALIGN_BOTTOM = 'bottom';
+export const ALIGN_COVER = 'cover';
 
 export const INITIAL_VALUE = {}

src/features/zoom.js

@@ -5,3 +5,3 @@ import {fromObject, scale, transform, translate} from 'transformation-matrix';
   ACTION_ZOOM, MODE_IDLE, MODE_ZOOMING,
-  ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM
+  ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM, ALIGN_COVER
 } from '../constants';
@@ -105,3 +105,3 @@ import {decompose, getSVGPoint, set} from './common';
 
-  const scaleMatrix = scale(scaleLevel, scaleLevel);
+  let scaleMatrix = scale(scaleLevel, scaleLevel);
 
@@ -111,6 +111,7 @@ let translateX = -SVGMinX * scaleX;
 
-  // after fitting, SVG and the viewer will match in width (1) or in height (2)
-  if (scaleX < scaleY) {
+ // after fitting, SVG and the viewer will match in width (1) or in height (2) or SVG will cover the container with preserving aspect ratio (0)
+ if (scaleX < scaleY) {
+    let remainderY = viewerHeight - scaleX * SVGHeight;
+
     //(1) match in width, meaning scaled SVGHeight <= viewerHeight
-    let remainderY = viewerHeight - scaleX * SVGHeight;
     switch(SVGAlignY) {
@@ -129,2 +130,9 @@ case ALIGN_TOP:
 
+      case ALIGN_COVER:
+        scaleMatrix = scale(scaleY, scaleY); // (0) we must now match to short edge, in this case - height
+        let remainderX = viewerWidth - scaleY * SVGWidth; // calculate remainder in the other scale
+
+        translateX = SVGMinX + Math.round(remainderX / 2); // center by the long edge
+      break;
+
       default:
@@ -134,4 +142,5 @@ //no op
   } else {
+    let remainderX = viewerWidth - scaleY * SVGWidth;
+
     //(2) match in height, meaning scaled SVGWidth <= viewerWidth
-    let remainderX = viewerWidth - scaleY * SVGWidth;
     switch(SVGAlignX) {
@@ -150,2 +159,9 @@ case ALIGN_LEFT:
 
+      case ALIGN_COVER:
+        scaleMatrix = scale(scaleX, scaleX); // (0) we must now match to short edge, in this case - width
+        let remainderY = viewerHeight - scaleX * SVGHeight; // calculate remainder in the other scale
+
+        translateY = SVGMinY + Math.round(remainderY / 2); // center by the long edge
+      break;
+
       default:
@@ -157,2 +173,3 @@ //no op
   const translationMatrix = translate(translateX, translateY);
+
   const matrix = transform(
@@ -159,0 +176,0 @@ translationMatrix, //2

src/ui-toolbar/toolbar-button.jsx

@@ -38,3 +38,3 @@ import React from 'react';
       margin: [POSITION_TOP, POSITION_BOTTOM].indexOf(this.props.toolbarPosition) >= 0 ? "2px 1px" : "1px 2px",
-      color: this.props.active || this.state.hover ? '#1CA6FC' : '#FFF',
+      color: this.props.active || this.state.hover ? this.props.activeColor : '#FFF',
       transition: "color 200ms ease",
@@ -76,4 +76,5 @@ background: "none",
   toolbarPosition: PropTypes.string.isRequired,
+  activeColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   active: PropTypes.bool.isRequired
 };

src/ui-toolbar/toolbar.jsx

@@ -17,3 +17,3 @@ import React from 'react';
 
-export default function Toolbar({tool, value, onChangeValue, onChangeTool, position, SVGAlignX, SVGAlignY}) {
+export default function Toolbar({tool, value, onChangeValue, onChangeTool, activeToolColor, position, SVGAlignX, SVGAlignY}) {
 
@@ -56,2 +56,3 @@ let handleChangeTool = (event, tool) => {
         active={tool === TOOL_NONE}
+        activeColor={activeToolColor}
         name="unselect-tools"
@@ -66,2 +67,3 @@ title="Selection"
         active={tool === TOOL_PAN}
+        activeColor={activeToolColor}
         name="select-tool-pan"
@@ -76,2 +78,3 @@ title="Pan"
         active={tool === TOOL_ZOOM_IN}
+        activeColor={activeToolColor}
         name="select-tool-zoom-in"
@@ -86,2 +89,3 @@ title="Zoom in"
         active={tool === TOOL_ZOOM_OUT}
+        activeColor={activeToolColor}
         name="select-tool-zoom-out"
@@ -96,2 +100,3 @@ title="Zoom out"
         active={false}
+        activeColor={activeToolColor}
         name="fit-to-viewer"
@@ -116,2 +121,3 @@ title="Fit to viewer"
   SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+  activeToolColor: PropTypes.string
 };
@@ -122,3 +128,4 @@
   SVGAlignX: ALIGN_LEFT,
-  SVGAlignY: ALIGN_TOP
+  SVGAlignY: ALIGN_TOP,
+  activeToolColor: '#1CA6FC'
 };

src/viewer.js

@@ -600,2 +600,3 @@ import React from 'react';
     SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+    activeToolColor: PropTypes.string,
   }),
@@ -602,0 +603,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5280540

increased by0.21%

Lines of code

24440

increased by0.35%

Number of lines in readme file

113

increased by2.73%

Dependency changes

• Updatedtransformation-matrix@^2.2.0