Demo

https://user-images.githubusercontent.com/1435457/169442632-62b8e967-6a4f-4c9f-a00f-c17cb436ad8f.mp4

Usage

1. Installation

   npm install @9am/img-tissue

2. ESM

   // HTML
   <img-tissue src="/url.png"></img-tissue>

   import { register } from '@9am/img-tissue'
   register({})

   or try it with skypack without installation

   import { register } from 'https://cdn.skypack.dev/@9am/img-tissue'
   register({})

3. Zoom

   // js
   const tissue = document.querySelector('img-tissue')
   tissue.zoomIn({ clientX: 0, clientY: 0, duration: 300 })
   tissue.zoomOut({ clientX: 0, clientY: 0, duration: 300 })

API

1. < img-tissue > attributes

   |Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |src|{String}|Required|The image URL| |title|{String}|''|For screen readers| |column|{Number}|4|Split area into {column} vertically| |row|{Number}|4|Split area into {row} horizontally|

2. < img-tissue > methods

   |Name|Params|Type|Default|Description| |:--:|:----:|:--:|:-----:|:----------| |zoomIn({ clientX, clientY, duration })||{Function}||ZoomIn the image to target position| |zoomOut({ clientX, clientY, duration })||{Function}||ZoomOut the image to ||clientX|{Number}|Required|X position on the client viewport| ||clientY|{Number}|Required|Y position on the client viewport| ||duration|{Number}|Required|Duration of the animation(ms)|

3. register options

   |Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |tagName|{String}|img-tissue|Change tag name of the web component|

Development

1. Install dependencies

   npm install

2. Start dev server

   npm run dev

3. Put images under ./demo/img, replace image URL in index.html

4. Open localhost:3000 in the browser

Testing

TBD

License

MIT