upgrades to storybook v6 and react v17 (#187)

* upgrades to storybook v6 and react v17 * fixes build script * code clean * upgrade storybook and react * adds StandardViewer story * removes deprecated knobs * refactors examples to stateless functions, leveraging on hooks * updates docs * fixes constant import * upgrades transformation-matrix
chrvadala · Jan 6, 2021 · 08b9d22 · 08b9d22
1 parent 0a1eee2
commit 08b9d22
Show file tree

Hide file tree

Showing 44 changed files with 8,746 additions and 9,973 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ examples/*/yarn.lock
 build-*
 .cache
 coverage
+.eslintcache
diff --git a/docs/autosizer-viewer.md b/docs/autosizer-viewer.md
@@ -1,27 +1,41 @@
 # React SVG Pan Zoom - Autosizer viewer
 
-**React SVG Pan Zoom** requires the properties `width` and `height` to be set in order to work properly. 
-If you need to automatically adapt the viewer size on the parent size you can use the component [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md).
-This component is able to extract `width` and `height` from the parent box and pass them to a children component. 
+**React SVG Pan Zoom** requires the properties `width` and `height` to be set in order to work properly.
+If you need to automatically adapt the viewer size on the parent size you can use the hook [useWindowSize](https://www.npmjs.com/package/@react-hook/window-size).
+This component is able to extract `width` and `height` from the parent box and pass them to a children component.
 
 ## Example
 ```jsx harmony
-import {AutoSizer} from 'react-virtualized';
+import {useWindowSize} from '@react-hook/window-size'
 
-<div style={{width: "100%", height: "100%"}}>
-    <AutoSizer>
-      {(({width, height}) => width === 0 || height === 0 ? null : (
-        <ReactSVGPanZoom  width={width} height={height}>
-          <svg width={1440} height={1440}>
-            <g>
-              <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
-              <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
-              <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
-              <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
-            </g>
-          </svg>
-        </ReactSVGPanZoom>
-      ))}
-    </AutoSizer>
-  </div>
+export const Resizable = (args) => {
+  const Viewer = useRef(null);
+  const [tool, onChangeTool] = useState(TOOL_NONE)
+  const [value, onChangeValue] = useState(INITIAL_VALUE)
+  const [width, height] = useWindowSize({initialWidth: 400, initialHeight: 400})
+
+  useLayoutEffect(() => {
+    Viewer.current.fitToViewer();
+  }, []);
+
+  return (
+    <div style={{width: "100%", height: "100%"}}>
+      <ReactSVGPanZoom
+        width={width} height={height}
+        ref={Viewer}
+        value={value} onChangeValue={onChangeValue}
+        tool={tool} onChangeTool={onChangeTool}
+      >
+        <svg width={500} height={500}>
+          <g>
+            <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
+            <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
+            <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
+            <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
+          </g>
+        </svg>
+      </ReactSVGPanZoom>
+    </div>
+  )
+}
 ```
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -16,140 +16,114 @@ yarn add react-svg-pan-zoom
 The full source code is available here: [source code](../examples/uncontrolled-component).
 
 ```javascript
-import React from 'react';
+import React, {useRef, useEffect} from 'react';
 import {UncontrolledReactSVGPanZoom} from 'react-svg-pan-zoom';
 
-export default class App extends React.PureComponent {
-
-  Viewer = null
-
-  componentDidMount() {
-    this.Viewer.fitToViewer();
-  }
-
-  render() {
-    return (
-      <div>
-        <button className="btn" onClick={() => this.Viewer.zoomOnViewerCenter(1.1)}>Zoom in</button>
-        <button className="btn" onClick={() => this.Viewer.fitSelection(40, 40, 200, 200)}>Zoom area 200x200</button>
-        <button className="btn" onClick={() => this.Viewer.fitToViewer()}>Fit</button>
-
-        <hr/>
-
-        <UncontrolledReactSVGPanZoom
-          width={500} height={500}
-          ref={Viewer => this.Viewer = Viewer}
-
-          onClick={event => console.log('click', event.x, event.y, event.originalEvent)}
-        >
-          <svg width={617} height={316}> {/* or <svg viewBox="0 0 617 316" */}
-            <g fillOpacity=".5" strokeWidth="4">
-              <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
-              <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
-              <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
-              <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
-            </g>
-          </svg>
-        </UncontrolledReactSVGPanZoom>
-      </div>
-    );
-  }
+
+export default function App() {
+  const Viewer = useRef(null);
+
+  useEffect(() => {
+    Viewer.current.fitToViewer();
+  }, []);
+
+  /* Read all the available methods in the documentation */
+  const _zoomOnViewerCenter = () => Viewer.current.zoomOnViewerCenter(1.1)
+  const _fitSelection = () => Viewer.current.fitSelection(40, 40, 200, 200)
+  const _fitToViewer = () => Viewer.current.fitToViewer()
+
+  return (
+    <div>
+      <h1>UncontrolledReactSVGPanZoom</h1>
+      <hr/>
+
+      <button className="btn" onClick={() => _zoomOnViewerCenter()}>Zoom on center</button>
+      <button className="btn" onClick={() => _fitSelection()}>Zoom area 200x200</button>
+      <button className="btn" onClick={() => _fitToViewer()}>Fit</button>
+      <hr/>
+
+      <UncontrolledReactSVGPanZoom
+        ref={Viewer}
+        width={500} height={500}
+        onZoom={e => console.log('zoom')}
+        onPan={e => console.log('pan')}
+        onClick={event => console.log('click', event.x, event.y, event.originalEvent)}
+      >
+        <svg width={617} height={316}>
+          <g fillOpacity=".5" strokeWidth="4">
+            <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
+            <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
+            <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
+            <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
+          </g>
+        </svg>
+      </UncontrolledReactSVGPanZoom>
+    </div>
+  )
 }
 ```
 
 ## `<ReactSVGPanZoom>`
 The full source code is available here: [source code](../examples/controlled-component).
 
 ```javascript
-import React from 'react';
-import {
-  fitSelection,
-  fitToViewer,
-  INITIAL_VALUE,
-  ReactSVGPanZoom,
-  TOOL_NONE,
-  zoomOnViewerCenter
-} from 'react-svg-pan-zoom';
-
-export default class App extends React.PureComponent {
-
-  state = {tool: TOOL_NONE, value: INITIAL_VALUE}
-  Viewer = null
-
-  componentDidMount() {
-    this.Viewer.fitToViewer();
-  }
-
-  changeTool(nextTool) {
-    this.setState({tool: nextTool})
-  }
-
-  changeValue(nextValue) {
-    this.setState({value: nextValue})
-  }
-
-  fitToViewer_1() {
-    this.setState(state => ({value: fitToViewer(state.value)}))
-  }
-
-  fitToViewer_2() {
-    this.Viewer.fitToViewer()
-  }
-
-  fitSelection_1() {
-    this.setState(state => ({value: fitSelection(state.value, 40, 40, 200, 200)}))
-  }
-
-  fitSelection_2() {
-    this.Viewer.fitSelection(40, 40, 200, 200)
-  }
-
-  zoomOnViewerCenter_1() {
-    this.setState(state => ({value: zoomOnViewerCenter(state.value, 1.1)}))
-  }
-
-  zoomOnViewerCenter_2() {
-    this.Viewer.zoomOnViewerCenter(1.1)
-  }
-
-  render() {
-    return (
-      <div>
-        <button className="btn" onClick={() => this.zoomOnViewerCenter_1()}>Zoom in</button>
-        <button className="btn" onClick={() => this.fitSelection_1()}>Zoom area 200x200</button>
-        <button className="btn" onClick={() => this.fitToViewer_1()}>Fit</button>
-
-        <strong>OR</strong>
-        {/* keep attention in this way onZoom and onPan cb aren't called */}
-        <button className="btn" onClick={() => this.zoomOnViewerCenter_2()}>Zoom in</button>
-        <button className="btn" onClick={() => this.fitSelection_2()}>Zoom area 200x200</button>
-        <button className="btn" onClick={() => this.fitToViewer_2()}>Fit</button>
-
-        <hr/>
-
-        <ReactSVGPanZoom
-          width={500} height={500}
-          ref={Viewer => this.Viewer = Viewer}
-          tool={this.state.tool} onChangeTool={tool => this.changeTool(tool)}
-          value={this.state.value} onChangeValue={value => this.changeValue(value)}
-
-          onZoom={e => console.log('zoom')}
-          onPan={e => console.log('pan')}
-
-          onClick={event => console.log('click', event.x, event.y, event.originalEvent)}
-        >
-          <svg width={617} height={316}> {/* or <svg viewBox="0 0 617 316" */}
-            <g fillOpacity=".5" strokeWidth="4">
-              <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
-              <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
-              <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
-              <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
-            </g>
-          </svg>
-        </ReactSVGPanZoom>
-      </div>
-    );
-  }
+import {useRef, useState, useEffect} from 'react';
+import {INITIAL_VALUE, ReactSVGPanZoom, TOOL_NONE, fitSelection, zoomOnViewerCenter, fitToViewer} from 'react-svg-pan-zoom';
+
+export default function App() {
+  const Viewer = useRef(null);
+  const [tool, setTool] = useState(TOOL_NONE)
+  const [value, setValue] = useState(INITIAL_VALUE)
+
+  useEffect(() => {
+    Viewer.current.fitToViewer();
+  }, []);
+
+  /* Read all the available methods in the documentation */
+  const _zoomOnViewerCenter1 = () => Viewer.current.zoomOnViewerCenter(1.1)
+  const _fitSelection1 = () => Viewer.current.fitSelection(40, 40, 200, 200)
+  const _fitToViewer1 = () => Viewer.current.fitToViewer()
+
+  /* keep attention! handling the state in the following way doesn't fire onZoom and onPam hooks */
+  const _zoomOnViewerCenter2 = () => setValue(zoomOnViewerCenter(value, 1.1))
+  const _fitSelection2 = () => setValue(fitSelection(value, 40, 40, 200, 200))
+  const _fitToViewer2 = () => setValue(fitToViewer(value))
+
+  return (
+    <div>
+      <h1>ReactSVGPanZoom</h1>
+      <hr/>
+
+      <button className="btn" onClick={() => _zoomOnViewerCenter1()}>Zoom on center (mode 1)</button>
+      <button className="btn" onClick={() => _fitSelection1()}>Zoom area 200x200 (mode 1)</button>
+      <button className="btn" onClick={() => _fitToViewer1()}>Fit (mode 1)</button>
+      <hr/>
+
+      <button className="btn" onClick={() => _zoomOnViewerCenter2()}>Zoom on center (mode 2)</button>
+      <button className="btn" onClick={() => _fitSelection2()}>Zoom area 200x200 (mode 2)</button>
+      <button className="btn" onClick={() => _fitToViewer2()}>Fit (mode 2)</button>
+      <hr/>
+
+      <ReactSVGPanZoom
+        ref={Viewer}
+        width={500} height={500}
+        tool={tool} onChangeTool={setTool}
+        value={value} onChangeValue={setValue}
+        onZoom={e => console.log('zoom')}
+        onPan={e => console.log('pan')}
+        onClick={event => console.log('click', event.x, event.y, event.originalEvent)}
+      >
+        <svg width={617} height={316}>
+          <g fillOpacity=".5" strokeWidth="4">
+            <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
+            <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
+            <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
+            <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
+          </g>
+        </svg>
+      </ReactSVGPanZoom>
+    </div>
+  )
 }
 ```
 

diff --git a/examples/controlled-component-advanced-usage/.env b/examples/controlled-component-advanced-usage/.env
diff --git a/examples/controlled-component-advanced-usage/README.md b/examples/controlled-component-advanced-usage/README.md
diff --git a/examples/controlled-component-advanced-usage/package.json b/examples/controlled-component-advanced-usage/package.json
diff --git a/examples/controlled-component-advanced-usage/public/index.html b/examples/controlled-component-advanced-usage/public/index.html
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ examples/*/yarn.lock @@
     build-*
     .cache
     coverage
+    .eslintcache