{"_id":"@10101art/image-viewer","name":"@10101art/image-viewer","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@10101art/image-viewer","version":"1.0.4","source":"src/index.ts","main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","targets":{"app":{}},"scripts":{"start":"parcel demo/index.html --target app","watch":"parcel watch","build":"rm -rf dist && parcel build","format":"prettier --write ./src","test":"jest","prepublishOnly":"npm version $VERSION_ARG && npm run build","beta":"VERSION_ARG='prerelease --preid=next' npm publish --tag beta","ts-check":"tsc"},"devDependencies":{"@babel/preset-typescript":"^7.21.4","@parcel/babel-preset-env":"^2.8.3","@parcel/packager-ts":"2.8.3","@parcel/transformer-typescript-types":"2.8.3","@parcel/validator-typescript":"^2.8.3","@types/jest":"^29.5.0","@types/react":"^18.0.34","@types/react-dom":"^18.0.11","buffer":"^5.5.0","crypto-browserify":"^3.12.0","events":"^3.1.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","leva":"^0.9.34","parcel":"^2.8.3","prettier":"2.8.7","process":"^0.11.10","punycode":"^1.4.1","querystring-es3":"^0.2.1","react":"^18.2.0","react-dom":"^18.2.0","stream-browserify":"^3.0.0","typescript":">=3.0.0"},"peerDependencies":{"react":"^18","react-dom":"^18"},"dependencies":{"@pixi/react":"^7.0.3","@tweenjs/tween.js":"^19.0.0","lodash.debounce":"^4.0.8","pixi-viewport":"^5.0.1","pixi.js":"^7.2.4"},"_id":"@10101art/image-viewer@1.0.4","gitHead":"b64abf29f0182cf1fc68e70e96a141842ace2a59","description":"The \"10101-art-image-viewer\" library is a simple and lightweight tool for displaying images with zooming and panning functionality. The library is designed to be easy to use and customizable, with a minimal API and no external dependencies.","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-P7s24T8EhUa2aqfLK7EE/0E1IZQSRMQ+EmOiVrAEtp6PuDYG5XWfxmAghOcKvKVlVgE72WleSej4+UxWe3Me4A==","shasum":"5c3c5c4cfa061a60e71d2117f5a2ea5ff306f611","tarball":"https://registry.npmjs.org/@10101art/image-viewer/-/image-viewer-1.0.4.tgz","fileCount":13,"unpackedSize":16226352,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAxAltVFNFjnZys3l+oraFeVK/55iFPSGiywdKoVl6dwAiEAmqAox+JSpsB5iAiTL6G07cvfbL51gIh+eSxX8dv2ESo="}]},"_npmUser":{"name":"golubev_ds","email":"golubev.rocket@gmail.com"},"directories":{},"maintainers":[{"name":"golubev_ds","email":"golubev.rocket@gmail.com"},{"name":"lailune","email":"admin@twister-vl.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/image-viewer_1.0.4_1748249746477_0.7744517731578655"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-26T08:55:46.364Z","1.0.4":"2025-05-26T08:55:46.713Z","modified":"2025-05-26T08:55:46.964Z"},"maintainers":[{"name":"golubev_ds","email":"golubev.rocket@gmail.com"},{"name":"lailune","email":"admin@twister-vl.ru"}],"description":"The \"10101-art-image-viewer\" library is a simple and lightweight tool for displaying images with zooming and panning functionality. The library is designed to be easy to use and customizable, with a minimal API and no external dependencies.","readme":"# 10101 Art Image Viewer\n\nThe \"10101-art-image-viewer\" library is a simple and lightweight tool for displaying images with zooming and panning functionality. The library is designed to be easy to use and customizable, with a minimal API and no external dependencies.\n\n\n# Dev mode\n\n## Installation\n\n```bash\nyarn\n```\n\n## Start\n```bash\nnpm start\n```\n\n## Beta publish\n```bash\nnpm run beta\n```\n\n## Publish\n```bash\nnpm publish\n```\n\n# Usage\n\n## Installation\n\n```bash\nyarn add @badskuns/10101-art-image-viewer\n```\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport ArtImageViewer from '@badskuns/10101-art-image-viewer';\n\nconst MyComponent = () => {\n  const src = 'https://example.com/image.jpg';\n  const containerSize = { width: 800, height: 600 };\n  const sourceSize = { width: 1600, height: 1200 };\n  const baseFragment = null // any fragment that could be used as data anchestor of fragment\n  const data: TokenFragment = [\n    { tokenId: 'abc', left: 200, top: 200, width: 100, height: 100, filterColor: '#fff', filterOpacity: 0.3, baseFragment: baseFragment }\n  ];\n\n  return (\n    <ArtImageViewer\n      src={'./image.jpg'}\n      containerSize={{width: '100vw', height: '100vh'}}\n      sourceSize={{width: 1920, height: 1080}}\n      data={data}\n      hoverData={null}\n      onHover={(fragment) => console.log(fragment)}\n      onClick={(fragment) => console.log(fragment)}\n      renderLoader={() => <div>Loading...</div>}\n      focusData={null}\n      freezeData={null}\n    />\n  );\n};\n```\n\n## Props\n\n- `src`: string (required) - the source url of the image to display.\n- `containerSize`: `SizeType` (required) - the size of the container element as an object of `{ width, height }`.\n- `sourceSize`: `SizeType` (required) - the size of the original image as an object of `{ width, height }` to recompute initial coordinates. Exist because downloaded image has different size from source image coordinates received.\n- `data`: `TokenFragment<>[]` (optional) - an array of objects representing labels to display on the image on hover or focus. Each object should have the properties `label` (string) and `position` (array of `[x, y]` coordinates).\n- `hoverData`: `ImageViewerMouseEvent` (optional) - an object representing the label to display on hover. Should have the properties `label` (string) and `position` (array of `[x, y]` coordinates).\n- `onHover`: function (optional) - a callback function to be called when the mouse is hovering over a label. Receives the data object for the label as an argument.\n- `onClick`: function (optional) - a callback function to be called when a label is clicked. Receives the data object for the label as an argument.\n- `renderLoader`: function (optional) - a function that returns a React element to be displayed while the image is loading.\n- `focusData`: `ImageViewerMouseEvent` (optional) - an object representing the label to display on focus. Should have the properties `label` (string) and `position` (array of `[x, y]` coordinates).\n- `freezeData`: `ImageViewerMouseEvent` (optional) - an object representing the label to display when the image is frozen. Should have the properties `label` (string) and `position` (array of `[x, y]` coordinates).\n\n# Basic description\nThis project was crated to resolve html dom limitations in rendering of thousands of elements. We are using canvas and canvas wrapper library pixi to render block elements.\nBecause of pixi limitations of drawings amount that lead to performance degradation, we split drawing elements in different components and canvas layers\n\n``FragmentsToken`` - main layer responsible for filling blocks with parts of the image\n``FragmentsBackground`` - responsible to fill viewport on focus\n``FragmentsFill`` - responsible for filling blocks in different colors based on config\n``FragmentsGrid`` - responsible for grid drawing around each block\n``HoveredFragment`` - responsible for drawing animation of fragment hover\n``NavigationControls`` - responsible for drawing scale and zoom progress bars \n\n``EventsWrapper`` - layer responsible for detecting mouse events and computations of intersections of fragments with mouse coordinates, dynamic logic includes scalable offsets on zoom  \n\n`useZoomAnimationDraw` - one of the most important parts of the logic. It's responsible for positioning and calculations for all fragments of viewport and provide logic of scaling and offsetting blocks during zoom \n\n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md","_rev":"1-772daa9365ce1c71d4e8af7eb9f705c5"}