release(image-viewer): v0.5.0

index.json

@@ -118,7 +118,7 @@
   },
   "image-viewer": {
     "react": true,
-    "version": "0.4.0",
+    "version": "0.5.0",
     "style": true,
     "icon": false,
     "test": true,

src/image-viewer/README.md

@@ -39,6 +39,7 @@ imageViewer.zoom(0.1)
 
 * image(string): Image src.
 * initialCoverage(number): Initial coverage.
+* zoomOnWheel(boolean): Enable to zoom the image by mouse wheel.
 
 ## Api
 

src/image-viewer/index.ts

@@ -15,6 +15,8 @@ export interface IOptions extends IComponentOptions {
   image: string
   /** Initial coverage. */
   initialCoverage?: number
+  /** Enable to zoom the image by mouse wheel. */
+  zoomOnWheel?: boolean
 }
 
 interface IImageData {
@@ -68,6 +70,7 @@ export default class ImageViewer extends Component<IOptions> {
     super(container, { compName: 'image-viewer' })
     this.initOptions(options, {
       initialCoverage: 0.9,
+      zoomOnWheel: true,
     })
 
     this.resizeSensor = new ResizeSensor(container)
@@ -254,6 +257,10 @@ export default class ImageViewer extends Component<IOptions> {
     })
   }
   private onWheel = (e: any) => {
+    if (!this.options.zoomOnWheel) {
+      return
+    }
+
     e.preventDefault()
 
     if (this.isWheeling) {

src/image-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-viewer",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Single image viewer",
   "luna": {
     "react": true

src/image-viewer/react.tsx

@@ -1,9 +1,8 @@
 import { CSSProperties, FC, useEffect, useRef } from 'react'
-import ImageViewer from './index'
+import ImageViewer, { IOptions } from './index'
+import each from 'licia/each'
 
-interface IImageViewerProps {
-  image: string
-  initialCoverage?: number
+interface IImageViewerProps extends IOptions {
   style?: CSSProperties
   className?: string
   onCreate?: (imageViewer: ImageViewer) => void
@@ -14,21 +13,24 @@ const LunaImageViewer: FC<IImageViewerProps> = (props) => {
   const imageViewer = useRef<ImageViewer>()
 
   useEffect(() => {
-    const { image, initialCoverage } = props
+    const { image, initialCoverage, zoomOnWheel } = props
     imageViewer.current = new ImageViewer(imageViewerRef.current!, {
       image,
       initialCoverage,
+      zoomOnWheel,
     })
     props.onCreate && props.onCreate(imageViewer.current)
 
     return () => imageViewer.current?.destroy()
   }, [])
 
-  useEffect(() => {
-    if (imageViewer.current) {
-      imageViewer.current.setOption('image', props.image)
-    }
-  }, [props.image])
+  each(['image', 'zoomOnWheel'], (key: keyof IOptions) => {
+    useEffect(() => {
+      if (imageViewer.current) {
+        imageViewer.current.setOption(key, props[key])
+      }
+    }, [props[key]])
+  })
 
   return (
     <div

src/image-viewer/story.js

@@ -3,7 +3,7 @@ import ImageViewer from 'luna-image-viewer.js'
 import readme from './README.md'
 import story from '../share/story'
 import $ from 'licia/$'
-import { text, number, button } from '@storybook/addon-knobs'
+import { text, number, button, boolean } from '@storybook/addon-knobs'
 import LunaImageViewer from './react'
 
 const def = story(
@@ -16,11 +16,12 @@ const def = story(
       margin: '0 auto',
     })
 
-    const { image, initialCoverage } = createKnobs()
+    const { image, initialCoverage, zoomOnWheel } = createKnobs()
 
     const imageViewer = new ImageViewer(container, {
       image,
       initialCoverage,
+      zoomOnWheel,
     })
 
     button('Reset', () => {
@@ -54,7 +55,7 @@ const def = story(
     readme,
     source: __STORY__,
     ReactComponent() {
-      const { image, initialCoverage } = createKnobs()
+      const { image, initialCoverage, zoomOnWheel } = createKnobs()
 
       return (
         <LunaImageViewer
@@ -69,6 +70,7 @@ const def = story(
           }}
           image={image}
           initialCoverage={initialCoverage}
+          zoomOnWheel={zoomOnWheel}
         />
       )
     },
@@ -83,10 +85,12 @@ function createKnobs() {
     max: 1,
     step: 0.1,
   })
+  const zoomOnWheel = boolean('Zoom On Wheel', true)
 
   return {
     image,
     initialCoverage,
+    zoomOnWheel,
   }
 }