@badskuns/10101-art-image-viewer NPM

10101 Art Image Viewer

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.

Dev mode

Installation

yarn

Start

npm start

Beta publish

npm run beta

Publish

npm publish

Usage

Installation

yarn add @badskuns/10101-art-image-viewer

Usage

import React from 'react';
import ArtImageViewer from '@badskuns/10101-art-image-viewer';

const MyComponent = () => {
  const src = 'https://example.com/image.jpg';
  const containerSize = { width: 800, height: 600 };
  const sourceSize = { width: 1600, height: 1200 };
  const baseFragment = null // any fragment that could be used as data anchestor of fragment
  const data: TokenFragment = [
    { tokenId: 'abc', left: 200, top: 200, width: 100, height: 100, filterColor: '#fff', filterOpacity: 0.3, baseFragment: baseFragment }
  ];

  return (
    <ArtImageViewer
      src={'./image.jpg'}
      containerSize={{width: '100vw', height: '100vh'}}
      sourceSize={{width: 1920, height: 1080}}
      data={data}
      hoverData={null}
      onHover={(fragment) => console.log(fragment)}
      onClick={(fragment) => console.log(fragment)}
      renderLoader={() => <div>Loading...</div>}
      focusData={null}
      freezeData={null}
    />
  );
};

Props

src: string (required) - the source url of the image to display.
containerSize: SizeType (required) - the size of the container element as an object of { width, height }.
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.
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).
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).
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.
onClick: function (optional) - a callback function to be called when a label is clicked. Receives the data object for the label as an argument.
renderLoader: function (optional) - a function that returns a React element to be displayed while the image is loading.
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).
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).

Basic description

This 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. Because of pixi limitations of drawings amount that lead to performance degradation, we split drawing elements in different components and canvas layers

FragmentsToken - main layer responsible for filling blocks with parts of the image FragmentsBackground - responsible to fill viewport on focus FragmentsFill - responsible for filling blocks in different colors based on config FragmentsGrid - responsible for grid drawing around each block HoveredFragment - responsible for drawing animation of fragment hover NavigationControls - responsible for drawing scale and zoom progress bars

EventsWrapper - layer responsible for detecting mouse events and computations of intersections of fragments with mouse coordinates, dynamic logic includes scalable offsets on zoom

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