Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-svg-pan-zoom

Package Overview
Dependencies
Maintainers
1
Versions
72
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.3.0 to 1.3.1

4

demo/demo-responsive.js

@@ -51,4 +51,4 @@ "use strict";

{/* col-1 */}
<div style={{width: "50%", height: "100%"}}>
<ViewerResponsive style={{border:'1px solid black'}} ref="viewer"
<div style={{width: "50%", height: "100%", border:'1px solid black'}} >
<ViewerResponsive ref="viewer"
value={this.state.value} tool={this.state.tool}

@@ -55,0 +55,0 @@ onChange={event => this.handleChange(event)}

4

demo/demo.js

@@ -61,4 +61,4 @@ "use strict";

{/* col-1 */}
<div style={{width: "50%"}}>
<Viewer width={400} height={400} style={{border:'1px solid black'}}
<div style={{width: "50%"}} style={{border:'1px solid black'}}>
<Viewer width={400} height={400}
value={this.state.value} tool={this.state.tool}

@@ -65,0 +65,0 @@ onChange={event => this.handleChange(event)}

25

lib/viewer-event.js

@@ -26,3 +26,3 @@ 'use strict';

_createClass(ViewerEvent, [{
key: 'x',
key: 'point',
get: function get() {

@@ -32,19 +32,20 @@ if (!this._cachePoint) {

value = this.value;
var x = event.nativeEvent.offsetX,
y = event.nativeEvent.offsetY;
var rect = event.target.getBoundingClientRect();
var x = event.clientX - Math.round(rect.left);
var y = event.clientY - Math.round(rect.top);
this._cachePoint = _viewerHelper2.default.getSVGPoint(value, x, y);
}
return this._cachePoint.x;
return this._cachePoint;
}
}, {
key: 'x',
get: function get() {
return this.point.x;
}
}, {
key: 'y',
get: function get() {
if (!this._cachePoint) {
var event = this.originalEvent,
value = this.value;
var x = event.nativeEvent.offsetX,
y = event.nativeEvent.offsetY;
this._cachePoint = _viewerHelper2.default.getSVGPoint(value, x, y);
}
return this._cachePoint.y;
return this.point.y;
}

@@ -51,0 +52,0 @@ }, {

130

lib/viewer.js

@@ -133,3 +133,3 @@ 'use strict';

if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN, _constants.TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN].indexOf(tool) === -1) return;
if (value.mode !== _constants.MODE_IDLE) return;

@@ -158,3 +158,3 @@

if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN, _constants.TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN].indexOf(tool) === -1) return;
if (value.mode !== _constants.MODE_ZOOMING) return;

@@ -190,5 +190,5 @@

if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN, _constants.TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if (value.mode !== _constants.MODE_ZOOMING) return;
if (value.mode !== _constants.MODE_ZOOMING && tool !== _constants.TOOL_ZOOM_OUT) return;
var selectionMode = abs(startX - endX) > 2 && abs(startY - endY) > 2;
var selectionMode = abs(startX - endX) > 7 && abs(startY - endY) > 7 && tool !== _constants.TOOL_ZOOM_OUT;

@@ -209,4 +209,4 @@ var nextValue = void 0;

}, {
key: 'handleClick',
value: function handleClick(event) {
key: 'handleEvent',
value: function handleEvent(event) {
var _props7 = this.props;

@@ -216,89 +216,24 @@ var value = _props7.value;

var onClick = _props7.onClick;
var children = _props7.children;
var onMouseUp = _props7.onMouseUp;
var onMouseMove = _props7.onMouseMove;
var onMouseDown = _props7.onMouseDown;
var SVGWidth = children.props.width,
SVGHeight = children.props.height;
var eventsHandler = { click: onClick, mousemove: onMouseMove, mouseup: onMouseUp, mousedown: onMouseDown };
if (tool !== _constants.TOOL_NONE) return;
if (!onClick) return;
var onEventHandler = eventsHandler[event.type];
if (!onEventHandler) return;
var viewerEvent = new _viewerEvent2.default(event, value);
if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
event.target = this.refs.svg;
onClick(viewerEvent);
onEventHandler(new _viewerEvent2.default(event, value));
}
}, {
key: 'handleMouseUp',
value: function handleMouseUp(event) {
key: 'handleSpecialKeyChange',
value: function handleSpecialKeyChange(event) {
var _props8 = this.props;
var value = _props8.value;
var tool = _props8.tool;
var onMouseUp = _props8.onMouseUp;
var children = _props8.children;
var specialKeys = _props8.specialKeys;
var onChange = _props8.onChange;
var x = event.offsetX,
y = event.offsetY;
var SVGWidth = children.props.width,
SVGHeight = children.props.height;
if (tool !== _constants.TOOL_NONE) return;
if (!onMouseUp) return;
var viewerEvent = new _viewerEvent2.default(event, value);
if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseUp(viewerEvent);
}
}, {
key: 'handleMouseDown',
value: function handleMouseDown(event) {
var _props9 = this.props;
var value = _props9.value;
var tool = _props9.tool;
var onMouseDown = _props9.onMouseDown;
var children = _props9.children;
var x = event.offsetX,
y = event.offsetY;
var SVGWidth = children.props.width,
SVGHeight = children.props.height;
if (tool !== _constants.TOOL_NONE) return;
if (!onMouseDown) return;
var viewerEvent = new _viewerEvent2.default(event, value);
if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseDown(viewerEvent);
}
}, {
key: 'handleMouseMove',
value: function handleMouseMove(event) {
var _props10 = this.props;
var value = _props10.value;
var tool = _props10.tool;
var onMouseMove = _props10.onMouseMove;
var children = _props10.children;
var x = event.offsetX,
y = event.offsetY;
var SVGWidth = children.props.width,
SVGHeight = children.props.height;
if (tool !== _constants.TOOL_NONE) return;
if (!onMouseMove) return;
var viewerEvent = new _viewerEvent2.default(event, value);
if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseMove(viewerEvent);
}
}, {
key: 'handleSpecialKeyChange',
value: function handleSpecialKeyChange(event) {
var _props11 = this.props;
var value = _props11.value;
var specialKeys = _props11.specialKeys;
var onChange = _props11.onChange;
var key = event.which;

@@ -340,3 +275,3 @@ var active = event.type === "keydown";

var style = {};
var gStyle = { pointerEvents: "none" };
var gStyle = tool === _constants.TOOL_NONE ? {} : { pointerEvents: "none" };
if (tool === _constants.TOOL_PAN) style.cursor = (0, _cursor2.default)(mode === _constants.MODE_PANNING ? 'grabbing' : 'grab');

@@ -377,12 +312,9 @@ if ([_constants.TOOL_ZOOM, _constants.TOOL_ZOOM_IN, _constants.TOOL_ZOOM_OUT].indexOf(tool) >= 0) {

onMouseDown: function onMouseDown(event) {
_this2.handleMouseDown(event);_this2.handleStartPan(event);_this2.handleStartZoom(event);
_this2.handleStartPan(event);_this2.handleStartZoom(event);
},
onMouseMove: function onMouseMove(event) {
_this2.handleMouseMove(event);_this2.handleUpdatePan(event);_this2.handleUpdateZoom(event);
_this2.handleUpdatePan(event);_this2.handleUpdateZoom(event);
},
onMouseUp: function onMouseUp(event) {
_this2.handleMouseUp(event);_this2.handleStopPan(event);_this2.handleStopZoom(event);
},
onClick: function onClick(event) {
return _this2.handleClick(event);
_this2.handleStopPan(event);_this2.handleStopZoom(event);
}

@@ -400,3 +332,19 @@ },

'g',
{ ref: 'originalSvg', transform: matrixStr, style: gStyle },
{
ref: 'originalSVG',
transform: matrixStr,
style: gStyle,
onMouseDown: function onMouseDown(event) {
return _this2.handleEvent(event);
},
onMouseMove: function onMouseMove(event) {
return _this2.handleEvent(event);
},
onMouseUp: function onMouseUp(event) {
return _this2.handleEvent(event);
},
onClick: function onClick(event) {
return _this2.handleEvent(event);
}
},
_react2.default.createElement('rect', {

@@ -403,0 +351,0 @@ fill: this.props.SVGBackground,

2

package.json
{
"name": "react-svg-pan-zoom",
"version": "1.3.0",
"version": "1.3.1",
"description": "A React component that adds pan and zoom features to SVG",

@@ -5,0 +5,0 @@ "main": "./lib/index.js",

5

README.md
# react-svg-pan-zoom
A react component that adds pan and zoom features to SVG
[![npm](https://img.shields.io/npm/v/react-svg-pan-zoom.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-svg-pan-zoom)
![javascript](https://img.shields.io/badge/javascript-ES6-fbde34.svg)
![react-version](https://img.shields.io/badge/react%20version-15.0.0%20or%20later-61dafb.svg)
## Installation

@@ -89,2 +93,3 @@ ```

- `SyntheticEvent originalEvent` - The original React event
- `object` - coordinate {x,y} of the event mapped to SVG coordinates
- `number x` - x coordinate of the event mapped to SVG coordinates

@@ -91,0 +96,0 @@ - `number y` - y coordinate of the event mapped to SVG coordinates

21

src/viewer-event.js

@@ -10,18 +10,21 @@ import ViewerHelper from './viewer-helper';

get x() {
get point() {
if (!this._cachePoint) {
let event = this.originalEvent, value = this.value;
let x = event.nativeEvent.offsetX, y = event.nativeEvent.offsetY;
let rect = event.target.getBoundingClientRect();
let x = event.clientX - Math.round(rect.left);
let y = event.clientY - Math.round(rect.top);
this._cachePoint = ViewerHelper.getSVGPoint(value, x, y);
}
return this._cachePoint.x;
return this._cachePoint;
}
get x() {
return this.point.x;
}
get y() {
if (!this._cachePoint) {
let event = this.originalEvent, value = this.value;
let x = event.nativeEvent.offsetX, y = event.nativeEvent.offsetY;
this._cachePoint = ViewerHelper.getSVGPoint(value, x, y);
}
return this._cachePoint.y;
return this.point.y;
}

@@ -28,0 +31,0 @@

89

src/viewer.js

@@ -24,3 +24,3 @@ import React from 'react';

shouldComponentUpdate(nextProps){
shouldComponentUpdate(nextProps) {
return nextProps !== this.props;

@@ -79,3 +79,3 @@ }

if ([TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if ([TOOL_ZOOM, TOOL_ZOOM_IN].indexOf(tool) === -1) return;
if (value.mode !== MODE_IDLE) return;

@@ -96,3 +96,3 @@

if ([TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if ([TOOL_ZOOM, TOOL_ZOOM_IN].indexOf(tool) === -1) return;
if (value.mode !== MODE_ZOOMING) return;

@@ -118,5 +118,5 @@

if ([TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT].indexOf(tool) === -1) return;
if (value.mode !== MODE_ZOOMING) return;
if (value.mode !== MODE_ZOOMING && tool !== TOOL_ZOOM_OUT) return;
let selectionMode = abs(startX - endX) > 2 && abs(startY - endY) > 2;
let selectionMode = abs(startX - endX) > 7 && abs(startY - endY) > 7 && tool !== TOOL_ZOOM_OUT;

@@ -137,57 +137,15 @@ let nextValue;

handleClick(event) {
let {value, tool, onClick, children} = this.props;
let SVGWidth = children.props.width, SVGHeight = children.props.height;
handleEvent(event){
let {value, tool, onClick, onMouseUp, onMouseMove, onMouseDown} = this.props;
let eventsHandler = {click: onClick, mousemove: onMouseMove, mouseup: onMouseUp, mousedown: onMouseDown};
if (tool !== TOOL_NONE) return;
if (!onClick) return;
let onEventHandler = eventsHandler[event.type];
if(!onEventHandler) return;
let viewerEvent = new ViewerEvent(event, value);
if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
event.target = this.refs.svg;
onClick(viewerEvent);
onEventHandler(new ViewerEvent(event, value));
}
handleMouseUp(event) {
let {value, tool, onMouseUp, children} = this.props;
let x = event.offsetX, y = event.offsetY;
let SVGWidth = children.props.width, SVGHeight = children.props.height;
if (tool !== TOOL_NONE) return;
if (!onMouseUp) return;
let viewerEvent = new ViewerEvent(event, value);
if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseUp(viewerEvent);
}
handleMouseDown(event) {
let {value, tool, onMouseDown, children} = this.props;
let x = event.offsetX, y = event.offsetY;
let SVGWidth = children.props.width, SVGHeight = children.props.height;
if (tool !== TOOL_NONE) return;
if (!onMouseDown) return;
let viewerEvent = new ViewerEvent(event, value);
if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseDown(viewerEvent);
}
handleMouseMove(event) {
let {value, tool, onMouseMove, children} = this.props;
let x = event.offsetX, y = event.offsetY;
let SVGWidth = children.props.width, SVGHeight = children.props.height;
if (tool !== TOOL_NONE) return;
if (!onMouseMove) return;
let viewerEvent = new ViewerEvent(event, value);
if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
onMouseMove(viewerEvent);
}
handleSpecialKeyChange(event) {

@@ -222,5 +180,5 @@ let {value, specialKeys, onChange} = this.props;

let style = {};
let gStyle = {pointerEvents: "none"};
let gStyle = tool === TOOL_NONE ? {} : {pointerEvents: "none"};
if (tool === TOOL_PAN) style.cursor = cursor(mode === MODE_PANNING ? 'grabbing' : 'grab');
if([TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT].indexOf(tool) >= 0) {
if ([TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT].indexOf(tool) >= 0) {
let needZoomIn = (tool === TOOL_ZOOM_IN) || (tool === TOOL_ZOOM && !specialKeyEnabled);

@@ -255,6 +213,5 @@ style.cursor = cursor(needZoomIn ? 'zoom-in' : 'zoom-out');

style={Object.assign(style, this.props.style)}
onMouseDown={ event => {this.handleMouseDown(event); this.handleStartPan(event); this.handleStartZoom(event)} }
onMouseMove={ event => {this.handleMouseMove(event); this.handleUpdatePan(event); this.handleUpdateZoom(event)} }
onMouseUp={ event => {this.handleMouseUp(event); this.handleStopPan(event); this.handleStopZoom(event)} }
onClick={event => this.handleClick(event)}
onMouseDown={ event => { this.handleStartPan(event); this.handleStartZoom(event)} }
onMouseMove={ event => { this.handleUpdatePan(event); this.handleUpdateZoom(event)} }
onMouseUp={ event => { this.handleStopPan(event); this.handleStopZoom(event)} }
>

@@ -271,3 +228,11 @@

<g ref="originalSvg" transform={matrixStr} style={gStyle}>
<g
ref="originalSVG"
transform={matrixStr}
style={gStyle}
onMouseDown={ event => this.handleEvent(event)}
onMouseMove={event => this.handleEvent(event)}
onMouseUp={event => this.handleEvent(event)}
onClick={event => this.handleEvent(event)}
>
<rect

@@ -279,3 +244,3 @@ fill={this.props.SVGBackground}

height={originalSVG.props.height}/>
<g ref="content">
<g ref="content" >
{originalSVG.props.children}

@@ -282,0 +247,0 @@ </g>

demo/build/index.js

Sorry, the diff of this file is too big to display

dist/react-svg-pan-zoom.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc