diff --git a/index.json b/index.json index a78773a..9544442 100644 --- a/index.json +++ b/index.json @@ -118,7 +118,7 @@ }, "image-viewer": { "react": true, - "version": "0.4.0", + "version": "0.5.0", "style": true, "icon": false, "test": true, diff --git a/src/image-viewer/README.md b/src/image-viewer/README.md index 993f385..b131325 100644 --- a/src/image-viewer/README.md +++ b/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 diff --git a/src/image-viewer/index.ts b/src/image-viewer/index.ts index 7958e40..637c833 100644 --- a/src/image-viewer/index.ts +++ b/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 { 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 { }) } private onWheel = (e: any) => { + if (!this.options.zoomOnWheel) { + return + } + e.preventDefault() if (this.isWheeling) { diff --git a/src/image-viewer/package.json b/src/image-viewer/package.json index 35bac29..4135bb6 100644 --- a/src/image-viewer/package.json +++ b/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 diff --git a/src/image-viewer/react.tsx b/src/image-viewer/react.tsx index 2d4d768..1c74cd3 100644 --- a/src/image-viewer/react.tsx +++ b/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 = (props) => { const imageViewer = useRef() 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 (
{ @@ -54,7 +55,7 @@ const def = story( readme, source: __STORY__, ReactComponent() { - const { image, initialCoverage } = createKnobs() + const { image, initialCoverage, zoomOnWheel } = createKnobs() return ( ) }, @@ -83,10 +85,12 @@ function createKnobs() { max: 1, step: 0.1, }) + const zoomOnWheel = boolean('Zoom On Wheel', true) return { image, initialCoverage, + zoomOnWheel, } }