MultiLayoutRenderer

Source

Layouts.js
/* eslint-disable */
export default {
'2x2': function(center, spacing, width, height) {
return [
[spacing, spacing, center[0] - 1.5 * spacing, center[1] - 1.5 * spacing],
[
center[0] + 0.5 * spacing,
spacing,
width - center[0] - 1.5 * spacing,
center[1] - 1.5 * spacing,
],
[
spacing,
center[1] + 0.5 * spacing,
center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
[
center[0] + 0.5 * spacing,
center[1] + 0.5 * spacing,
width - center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
'1x1': function(center, spacing, width, height) {
return [[spacing, spacing, width - 2 * spacing, height - 2 * spacing]];
},
'1x2': function(center, spacing, width, height) {
return [
[spacing, spacing, width - 2 * spacing, center[1] - 1.5 * spacing],
[
spacing,
center[1] + 0.5 * spacing,
width - 2 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
'2x1': function(center, spacing, width, height) {
return [
[spacing, spacing, center[0] - 1.5 * spacing, height - 2 * spacing],
[
center[0] + 0.5 * spacing,
spacing,
width - center[0] - 1.5 * spacing,
height - 2 * spacing,
],
];
},
'3xT': function(center, spacing, width, height) {
return [
[spacing, spacing, width - 2 * spacing, center[1] - 1.5 * spacing],
[
spacing,
center[1] + 0.5 * spacing,
center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
[
center[0] + 0.5 * spacing,
center[1] + 0.5 * spacing,
width - center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
'3xL': function(center, spacing, width, height) {
return [
[spacing, spacing, center[0] - 1.5 * spacing, height - 2 * spacing],
[
center[0] + 0.5 * spacing,
spacing,
width - center[0] - 1.5 * spacing,
center[1] - 1.5 * spacing,
],
[
center[0] + 0.5 * spacing,
center[1] + 0.5 * spacing,
width - center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
'3xR': function(center, spacing, width, height) {
return [
[spacing, spacing, center[0] - 1.5 * spacing, center[1] - 1.5 * spacing],
[
center[0] + 0.5 * spacing,
spacing,
width - center[0] - 1.5 * spacing,
height - 2 * spacing,
],
[
spacing,
center[1] + 0.5 * spacing,
center[0] - 1.5 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
'3xB': function(center, spacing, width, height) {
return [
[spacing, spacing, center[0] - 1.5 * spacing, center[1] - 1.5 * spacing],
[
center[0] + 0.5 * spacing,
spacing,
width - center[0] - 1.5 * spacing,
center[1] - 1.5 * spacing,
],
[
spacing,
center[1] + 0.5 * spacing,
width - 2 * spacing,
height - center[1] - 1.5 * spacing,
],
];
},
};
/* eslint-enable */
index.js
import React from 'react';
import PropTypes from 'prop-types';
import Monologue from 'monologue.js';

import layoutFunctions from './Layouts';
import sizeHelper from '../../../Common/Misc/SizeHelper';
import MouseHandler from '../../../Interaction/Core/MouseHandler';

const layoutNames = Object.keys(layoutFunctions);
const ACTIVE_VIEWPORT_CHANGE = 'multiview-viewport-active-change';
const LAYOUT_CHANGE = 'multiview-layout-change';

function getLayouts() {
return layoutNames;
}

/**
* This React component expect the following input properties:
*/
export default class MultiViewRenderer extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 200,
height: 200,
};

// static
this.getLayouts = getLayouts;

// Bind callback
this.onActiveViewportChange = this.onActiveViewportChange.bind(this);
this.onLayoutChange = this.onLayoutChange.bind(this);
this.getActiveLayout = this.getActiveLayout.bind(this);
this.setLayout = this.setLayout.bind(this);
this.setRenderMethod = this.setRenderMethod.bind(this);
this.getRenderMethods = this.getRenderMethods.bind(this);
this.getActiveRenderMethod = this.getActiveRenderMethod.bind(this);
this.getViewPort = this.getViewPort.bind(this);
this.updateDimensions = this.updateDimensions.bind(this);
this.dragCallback = this.dragCallback.bind(this);
this.clickCallback = this.clickCallback.bind(this);
this.zoomCallback = this.zoomCallback.bind(this);
this.drawViewport = this.drawViewport.bind(this);
this.drawViewportByName = this.drawViewportByName.bind(this);
this.drawLayout = this.drawLayout.bind(this);
}

componentWillMount() {
const drawViewportByName = this.drawViewportByName;

this.dragCenter = false;
this.dragInViewport = null;
this.center = [0.5, 0.5];
this.layout = this.props.layout || '3xT';
this.viewports = [];

function drawCallback(data, envelope) {
this.dataToDraw = data;
drawViewportByName(this.name);
}

// Init viewports from props
Object.keys(this.props.renderers).forEach((name) => {
const item = this.props.renderers[name];
const imageBuilder = item.builder;
const painter = item.painter;

// Renderer is an ImageBuilder
if (imageBuilder) {
imageBuilder.onImageReady(drawCallback).context(item);
}
// Renderer is a Painter
if (painter) {
painter.onPainterReady(drawCallback).context(item);
}

this.viewports.push({
name,
active: false,
});
});

// Listen to window resize
this.sizeSubscription = sizeHelper.onSizeChange(this.updateDimensions);

// Make sure we monitor window size if it is not already the case
sizeHelper.startListening();
}

componentDidMount() {
this.updateDimensions();

// Attach mouse listener
this.mouseHandler = new MouseHandler(this.canvasRenderer);

this.mouseHandler.attach({
drag: this.dragCallback,
click: this.clickCallback,
zoom: this.zoomCallback,
});
}

componentDidUpdate(nextProps, nextState) {
this.drawLayout();
}

componentWillUnmount() {
this.off();

// Free mouseHandler
if (this.mouseHandler) {
this.mouseHandler.destroy();
this.mouseHandler = null;
}

// Remove window listener
if (this.sizeSubscription) {
this.sizeSubscription.unsubscribe();
this.sizeSubscription = null;
}
}

onActiveViewportChange(callback) {
return this.on(ACTIVE_VIEWPORT_CHANGE, callback);
}

onLayoutChange(callback) {
return this.on(LAYOUT_CHANGE, callback);
}

getActiveLayout() {
return this.layout;
}

setLayout(name) {
this.layout = name;
this.drawLayout();
this.emit(LAYOUT_CHANGE, name);
}

setRenderMethod(name) {
this.viewports.forEach((viewport) => {
if (viewport.active) {
viewport.name = name;
this.emit(ACTIVE_VIEWPORT_CHANGE, viewport);
}
});
this.drawViewportByName(null);
}

getRenderMethods() {
return Object.keys(this.props.renderers);
}

getActiveRenderMethod() {
let name = 'No render method';
this.viewports.forEach((viewport) => {
if (viewport.active) {
name = viewport.name;
}
});
return name;
}

getViewPort(event) {
let count = this.viewports.length;
const x = event.relative.x;
const y = event.relative.y;

while (count) {
count -= 1;
const area =
this.viewports[count].activeArea || this.viewports[count].region;
if (
x >= area[0] &&
y >= area[1] &&
x <= area[0] + area[2] &&
y <= area[1] + area[3]
) {
return this.viewports[count];
}
}

return null;
}

updateDimensions() {
const el = this.canvasRenderer.parentNode;
const elSize = sizeHelper.getSize(el);

if (
el &&
(this.state.width !== elSize.clientWidth ||
this.state.height !== elSize.clientHeight)
) {
this.setState({
width: elSize.clientWidth,
height: elSize.clientHeight,
});
return true;
}
return false;
}

dragCallback(event, envelope) {
const viewport = this.getViewPort(event);

if ((viewport || this.dragInViewport) && !this.dragCenter) {
this.dragInViewport = this.dragInViewport || viewport;

// Forward event to viewport event handler
const renderer = this.props.renderers[this.dragInViewport.name];
const imageBuilder = renderer.builder;
const listeners = imageBuilder ? imageBuilder.getListeners() : null; // FIXME ?

if (listeners && listeners.drag) {
// Update relative information
event.activeArea = this.dragInViewport.activeArea;

// Forward event
listeners.drag(event, envelope);
}
} else {
this.dragCenter = true;

// Update center and redraw
this.center[0] = event.relative.x / this.state.width;
this.center[1] = event.relative.y / this.state.height;
this.drawLayout();
}

if (event.isFinal) {
this.dragCenter = false;
this.dragInViewport = null;
}
}

clickCallback(event, envelope) {
// Reset any previous drag state
this.dragCenter = false;
this.dragInViewport = null;

const viewport = this.getViewPort(event);

if (viewport) {
this.viewports.forEach((item) => {
item.active = false;
});
viewport.active = true;

// Forward event to viewport event handler
const renderer = this.props.renderers[viewport.name];
const imageBuilder = renderer.builder;
const listeners = imageBuilder ? imageBuilder.getListeners() : null; // FIXME ?

if (listeners && listeners.click) {
// Update relative information
event.activeArea = viewport.activeArea;

// Forward event
listeners.click(event, envelope);
}

// Let's other know that the active viewport has changed
this.emit(ACTIVE_VIEWPORT_CHANGE, viewport);
}

// Redraw the outline with the appropriate color for active
this.drawLayout();
}

zoomCallback(event, envelope) {
const viewport = this.getViewPort(event);

if (viewport) {
// Forward event to viewport event handler
const renderer = this.props.renderers[viewport.name];
const imageBuilder = renderer.builder;
const listeners = imageBuilder ? imageBuilder.getListeners() : null;

if (listeners && listeners.zoom) {
// Update relative information
event.activeArea = viewport.activeArea;

// Forward event
listeners.zoom(event, envelope);
}
}
}

drawViewport(viewport) {
const renderer = this.props.renderers[viewport.name];
const region = viewport.region;
const ctx = this.canvasRenderer
? this.canvasRenderer.getContext('2d')
: null;

if (
!ctx ||
!renderer ||
(renderer.builder && !renderer.dataToDraw) ||
(renderer.painter && !renderer.painter.isReady())
) {
return;
}

if (renderer.painter) {
const location = {
x: region[0] + 2,
y: region[1] + 2,
width: region[2] - 4,
height: region[3] - 4,
};
viewport.activeArea = [].concat(viewport.region);
renderer.painter.paint(ctx, location);
} else {
// Assume Image builder
const dataToDraw = this.props.renderers[viewport.name].dataToDraw;
const w = region[2] - 2;
const h = region[3] - 2;
const iw = dataToDraw.outputSize[0];
const ih = dataToDraw.outputSize[1];
const zoomLevel = Math.min(w / iw, h / ih);

ctx.clearRect(region[0] + 1, region[1] + 1, region[2] - 2, region[3] - 2);

const tw = Math.floor(iw * zoomLevel) - 2;
const th = Math.floor(ih * zoomLevel) - 2;
const tx = 1 + region[0] + (w * 0.5 - tw / 2);
const ty = 1 + region[1] + (h * 0.5 - th / 2);

try {
ctx.drawImage(
dataToDraw.canvas,
dataToDraw.area[0],
dataToDraw.area[1],
dataToDraw.area[2],
dataToDraw.area[3], // Source image [Location,Size]
tx,
ty,
tw,
th
); // Target drawing [Location,Size]

// Draw cross hair if any
if (dataToDraw.crosshair) {
const scale = [tw / dataToDraw.area[2], th / dataToDraw.area[3]];
const translate = [tx, ty];

ctx.beginPath();

ctx.moveTo(translate[0] + scale[0] * dataToDraw.crosshair[0], ty);
ctx.lineTo(
translate[0] + scale[0] * dataToDraw.crosshair[0],
ty + th
);

ctx.moveTo(tx, translate[1] + scale[1] * dataToDraw.crosshair[1]);
ctx.lineTo(
tx + tw,
translate[1] + scale[1] * dataToDraw.crosshair[1]
);

ctx.strokeStyle = this.props.crosshairColor;
ctx.lineWidth = 1;
ctx.stroke();
}

viewport.activeArea = [tx, ty, tw, th];
} catch (err) {
console.log('Error in MultiLayoutRenderer::drawViewport', err);
}
}
}

drawViewportByName(name) {
const renderer = name ? this.props.renderers[name] : null;

// Update image builder if any
if (renderer && renderer.builder && !renderer.dataToDraw) {
renderer.builder.update();
return;
}

this.viewports.forEach((viewport) => {
if (viewport.name === name || name === null) {
this.drawViewport(viewport);
}
});
}

drawLayout() {
const ctx = this.canvasRenderer.getContext('2d');
const width = this.state.width;
const height = this.state.height;
const centerPx = [this.center[0] * width, this.center[1] * height];
const spacing = this.props.spacing;
const regions = layoutFunctions[this.layout](
centerPx,
spacing,
width,
height
);
const viewports = this.viewports;
const numberOfRegions = regions.length;

ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.clearRect(0, 0, width, height);

for (let i = 0; i < numberOfRegions; ++i) {
const region = regions.shift();
if (i < viewports.length) {
viewports[i].region = region;
} else {
viewports.push({
name: this.getRenderMethods()[0],
region,
active: false,
});
}
ctx.beginPath();
ctx.strokeStyle = viewports[i].active
? this.props.activeColor
: this.props.borderColor;
ctx.rect(...region);
ctx.stroke();
}

// Remove the unused viewports
while (viewports.length > numberOfRegions) {
viewports.pop();
}

this.drawViewportByName(null);
}

render() {
return (
<canvas
className="CanvasMultiImageRenderer"
ref={(c) => {
this.canvasRenderer = c;
}}
width={this.state.width}
height={this.state.height}
/>
);
}
}

MultiViewRenderer.propTypes = {
activeColor: PropTypes.string,
borderColor: PropTypes.string,
crosshairColor: PropTypes.string,
layout: PropTypes.string,
renderers: PropTypes.object,
spacing: PropTypes.number,
};

MultiViewRenderer.defaultProps = {
spacing: 10,
borderColor: '#000000',
activeColor: '#0000FF',
crosshairColor: '#000000',
renderers: {},
layout: '3xT',
};

// Add Observer pattern to the class using Monologue.js
Monologue.mixInto(MultiViewRenderer);