New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.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.3 to 1.4.0

demo/if.js
lib/icons.js
lib/toolbar.js
src/icons.js
src/toolbar.js

118

demo/demo.js
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
import {Viewer, ViewerHelper, TOOL_NONE, TOOL_PAN, TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from '../src/index';
import {Viewer, ViewerHelper, Toolbar, TOOL_NONE, TOOL_PAN, TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT} from '../src/index';
import SnakeSVG from './svg/snake';
import If from './if';

@@ -14,3 +14,3 @@ export default class Demo extends React.Component {

let defaultValue = ViewerHelper.getDefaultValue();
defaultValue = ViewerHelper.fitSVGToViewer(defaultValue, 1440, 1440, 400, 400);
defaultValue = ViewerHelper.fitSVGToViewer(defaultValue, 1440, 1440, 500, 500);

@@ -21,11 +21,7 @@ this.state = {value: defaultValue, tool: TOOL_NONE, x: 0, y: 0};

handleChange(event) {
this.setState({value: event.value});
}
handleReset(event) {
this.setState({value: ViewerHelper.fitSVGToViewer(this.state.value, 1440, 1440, 400, 400)})
this.setState({value: ViewerHelper.fitSVGToViewer(this.state.value, 1440, 1440, 500, 500)})
}
handleClick(event) {
debugClick(event) {
console.log('click', event);

@@ -39,92 +35,46 @@ console.log('X', event.x);

handleMouseMove(event) {
this.setState({
x: event.x,
y: event.y
});
}
handleMouseUp(event) {
console.log('up', event.x, event.y);
}
handleMouseDown(event) {
console.log('down', event.x, event.y);
}
handleChangeTool(event) {
this.setState({tool: event.target.value});
}
render() {
return (
<div style={{display: "flex"}}>
<div style={{position: "relative", width: "500px", height: "500px", border: '1px solid black'}}>
{/* col-1 */}
<div style={{width: "50%"}} style={{border:'1px solid black'}}>
<Viewer width={400} height={400}
<Viewer width={500} height={500}
value={this.state.value} tool={this.state.tool}
onChange={event => this.handleChange(event)}
onClick={event => this.handleClick(event)}
onMouseMove={event => this.handleMouseMove(event)}
onMouseUp={event => this.handleMouseUp(event)}
onMouseDown={event => this.handleMouseDown(event)}>
onChange={event => this.setState({value: event.value})} //update state
onClick={event => this.debugClick(event)} //display click on console
onMouseMove={event => this.setState({x: event.x, y: event.y })} //display mouse position on window
onMouseUp={event => console.info('up', event.x, event.y)} //print mouseup on console
onMouseDown={event => console.info('down', event.x, event.y)} //print mousedown on console
>
{SnakeSVG}
</Viewer>
</Viewer>
<Toolbar
style={{position: "absolute", top: "10px", right: "10px"}}
tool={this.state.tool}
onChangeTool={tool => this.setState({tool: tool})} />
</div>
{/* col-2 */}
<div style={{width: "50%", paddingLeft: "20px"}}>
<div style={{paddingLeft: "15px"}}>
<If condition={this.state.tool === TOOL_NONE}>
<strong>SVG Mouse Position</strong> <br/>
x: {Number(this.state.x).toFixed(4)} <br/>
y: {Number(this.state.y).toFixed(4)}
<hr/>
</If>
<ul style={{listStyle: "none", padding:"0px", margin:"0px"}}>
<li><input
type="radio"
value={TOOL_NONE}
checked={this.state.tool === TOOL_NONE}
onChange={event => this.handleChangeTool(event)}/>TOOL: NONE
</li>
<li><input
type="radio"
value={TOOL_PAN}
checked={this.state.tool === TOOL_PAN}
onChange={event => this.handleChangeTool(event)}/>TOOL: PAN
</li>
<li><input
type="radio"
value={TOOL_ZOOM}
checked={this.state.tool === TOOL_ZOOM}
onChange={event => this.handleChangeTool(event)}/>TOOL: ZOOM
<span style={{fontSize: "12px", color:"#555", paddingLeft: "4px"}}>Switch with CTRL or Win/CMD</span>
</li>
<li><input
type="radio"
value={TOOL_ZOOM_IN}
checked={this.state.tool === TOOL_ZOOM_IN}
onChange={event => this.handleChangeTool(event)}/>TOOL: ZOOM IN
</li>
<li><input
type="radio"
value={TOOL_ZOOM_OUT}
checked={this.state.tool === TOOL_ZOOM_OUT}
onChange={event => this.handleChangeTool(event)}/>TOOL: ZOOM OUT
</li>
</ul>
<If condition={this.state.tool === TOOL_ZOOM}>
<strong>Hey!</strong> <br/>
Use CTRL or Win/CMD to switch zoom-in/zoom-out
<hr/>
</If>
<div>
<button onClick={event => this.handleReset(event)}>Reset view</button>
</div>
<strong>Reset pan/zoom state</strong> <br/>
<button onClick={event => this.handleReset(event)}>Reset view</button>
</div>
<div>
Position: {this.state.x},{this.state.y}
</div>
</div>
</div>
);
)
}
}

7

demo/renderer.js
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
import DemoResponsive from './demo-responsive';
ReactDOM.render(

@@ -11,6 +9,1 @@ React.createElement(Demo),

);
ReactDOM.render(
React.createElement(DemoResponsive),
document.getElementById('demo-responsive')
);

12

lib/index.js

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

});
exports.TOOL_ZOOM_OUT = exports.TOOL_ZOOM_IN = exports.TOOL_ZOOM = exports.TOOL_PAN = exports.TOOL_NONE = exports.ViewerResponsive = exports.ViewerHelper = exports.Viewer = undefined;
exports.TOOL_ZOOM_OUT = exports.TOOL_ZOOM_IN = exports.TOOL_ZOOM = exports.TOOL_PAN = exports.TOOL_NONE = exports.Toolbar = exports.ViewerHelper = exports.Viewer = undefined;

@@ -13,6 +13,2 @@ var _viewer = require('./viewer');

var _viewerResponsive = require('./viewer-responsive');
var _viewerResponsive2 = _interopRequireDefault(_viewerResponsive);
var _viewerHelper = require('./viewer-helper');

@@ -22,2 +18,6 @@

var _toolbar = require('./toolbar');
var _toolbar2 = _interopRequireDefault(_toolbar);
var _constants = require('./constants');

@@ -29,3 +29,3 @@

exports.ViewerHelper = _viewerHelper2.default;
exports.ViewerResponsive = _viewerResponsive2.default;
exports.Toolbar = _toolbar2.default;
exports.TOOL_NONE = _constants.TOOL_NONE;

@@ -32,0 +32,0 @@ exports.TOOL_PAN = _constants.TOOL_PAN;

2

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

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

60

README.md
# react-svg-pan-zoom
A react component that adds pan and zoom features to SVG
A React component that adds pan and zoom features to SVG
[Live Demo available at http://chrvadala.github.io/react-svg-pan-zoom/](http://chrvadala.github.io/react-svg-pan-zoom/)
[![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)

@@ -10,23 +12,10 @@ ![javascript](https://img.shields.io/badge/javascript-ES6-fbde34.svg)

## Installation
```
npm install --save react-svg-pan-zoom
```
## See SVGPanZoom in action
### online
http://chrvadala.github.io/react-svg-pan-zoom/
### localhost
## Usage
```
git clone https://github.com/chrvadala/react-svg-pan-zoom.git
cd react-svg-pan-zoom
npm install && npm start
npm install --save react-svg-pan-zoom
```
## Usage
### SVGPanZoom Viewer
[A full DEMO is available here](https://github.com/chrvadala/react-svg-pan-zoom/blob/master/demo/demo.js)
```js

@@ -38,3 +27,2 @@ import React from 'react';

class MyComponent extends React.Component {
constructor(props) {

@@ -58,13 +46,10 @@ super(props);

return (
<div>
<Viewer width={400} height={400} value={this.state.value}
tool={this.state.tool} onChange={this.handleChange} onClick={this.handleClick}>
<Viewer width={400} height={400} value={this.state.value}
tool={this.state.tool} onChange={this.handleChange} onClick={this.handleClick}>
<svg width={800} height={800} >
<rect x="30" y="50" width="100" height="70" fill="black"/>
<circle cx="210" cy="120" r="50" fill="blue"/>
</svg>
<svg width={800} height={800} >
<-- put here your SVG content -->
</svg>
</Viewer>
</div>
</Viewer>
);

@@ -101,14 +86,10 @@ }

### SVGPanZoom Responsive
SvgPanZoom requires width and height to work propertly. If you need a responsive component you can use `ViewerResponsive`, a component that extends `Viewer` and detects width and height trought its parent (See [ReactDimension](https://github.com/digidem/react-dimensions) for details).
## Autosize
**React SVG Pan Zoom** requires `width` and `height` to works properly. If you need an autosized component you can get the dimensions of a wrapper element and pass them as properties to the child element through [ReactDimension](https://github.com/digidem/react-dimensions).
~~`import {Viewer, ViewerHelper} from 'react-svg-pan-zoom';`~~
become
`import {ViewerResponsive, ViewerHelper} from 'react-svg-pan-zoom';`
## Build
## Start local demo
```
npm run build
git clone https://github.com/chrvadala/react-svg-pan-zoom.git
cd react-svg-pan-zoom
npm install && npm start
```

@@ -119,7 +100,6 @@

### Author
## Author
- [chrvadala](https://github.com/chrvadala)
### License
## License
MIT

4

src/index.js
import Viewer from './viewer';
import ViewerResponsive from './viewer-responsive';
import ViewerHelper from './viewer-helper';
import Toolbar from './toolbar';
import { TOOL_NONE, TOOL_PAN, TOOL_ZOOM, TOOL_ZOOM_IN, TOOL_ZOOM_OUT }from './constants';

@@ -9,3 +9,3 @@

ViewerHelper,
ViewerResponsive,
Toolbar,
TOOL_NONE,

@@ -12,0 +12,0 @@ TOOL_PAN,

demo/demo-responsive.js
src/viewer-responsive.js
demo/build/index.js

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

demo/index.html

Sorry, the diff of this file is not supported yet

dist/react-svg-pan-zoom.js

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

react-svg-pan-zoom.gif

Sorry, the diff of this file is not supported yet

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