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