react-invivo-data-visualizer
There are some components for viewing points on the plane.
Install
npm install react-invivo-data-visualizer --save
Usage
That is all you can import from this package:
import ImageLayer PointLayer Slicer formPlanarWithThreeDimensional View UIntArraySharper RoiToolbox utils constants from "react-invivo-data-visualizer";
ImageLayer & PointLayer
ImageLayer & PointLayer are simple canvas layers which take Uint8ClampedArray.
<PointLayer = = = =/> <ImageLayer = = = = =/>
Props
Prop | ImageLayer | PointLayer | Type | Default | Description |
---|---|---|---|---|---|
className | + | + | string | "" | string with classNames you want to add. All layers have absolute position by default. |
zIndex | + | + | number | z-index for current layer | |
size | + | + | object | Object with width and height numbers: { width: 60, height: 160 } | |
dataArray | + | UInt8ClampedArray | Array for creating ImageData object and putting it to the canvas. MDN link | ||
src | + | string | "" | src for tag | |
alt | + | string | "" | alt for tag |
UIntArraySharper
UIntArraySharper class for converting your array with 2d points into UInt8ClampedArray.
constructor():
dataWidth and dataHeight - original data dimensions. width and height - required data dimensions. Attention! width:dataWidth should be equal to height:dataHeight
pointArray structure:
[ ... { x, y, color: { r: (0-255), g: (0-255), b: (0-255), a: (0-255) } }, ... ]
x, y - coordinates in original dimension; r(red), g(green), b(blue), a(alpha) in range of 0-255.
radius is integer value which isn't scaling.
//Empty shapervar shaper = dataWidth dataHeight width height; // Shaper with filled pointsvar shaper = dataWidth dataHeight width height pointArray; // Shaper with filled circles by pointsvar shaper = dataWidth dataHeight width height pointArray radius;
fillScaledPoints(points):
Takes array with points in original sizes. Scale and draw it.
fillCirclesByPoints(points, radius):
Takes array with points in original sizes. Draw radial-gradient circles by points.
shaper; shaper;
getData():
Just return a UInt8ClampedArray
View
View component is a wrapper for several canvas layers.
View passes prop size
to all children, also gives them z-index
.
onClick method provide: browser display coordinates - current element inner coordinates; data coordinates - coodinates of original dimension.
{ const x: x1 y: y1 = browserDisplayCoords; const x: x2 y: y2 = dataCoords;};...<View = = => <ImageLayer = /> // the lowest z-index ... <ImageLayer = /> <PointLayer = /> ... <PointLayer = /> // the highest z-index</View>;
Slicer
Slicer component enables to display three-dimensional arrays of points.
formPlanarWithThreeDimensional()
function split 3 dimensional array into three two-dimensional arrays:
Coronal, Sagittal, Transverse views, - and return three UInt8ClampedArray objects.
onClick provides click coordinates of original dimension.
coronal, sagittal, transverse are arrays with layer components info:
- component name;
- props to pass.
{ const x y = dataCoords;}; { ... const coronal sagittal transverse = ; const vivoPlot = coronal: component: PointLayer props: dataArray: coronal component: ImageLayer props: src: image1 component: ImageLayer props: src: image2 sagittal: component: PointLayer props: dataArray: sagittal transverse: component: PointLayer props: dataArray: transverse ; return <Slicer = = = = = = = />};
RoiToolbox
RoiToolbox component is simple toolbox with radius value and 3 states:
ERASE
FILL
VOID
Provide color in rgba object format where all arguments values in range from 0 to 255.
{ const roiToolbox: value radius = state console }; return <RoiToolbox = = = = />;
License
MIT © spartanez17