CornerAnnotation

Source

CornerAnnotation.module.css
.container {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
user-select: none;
z-index: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.row {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: row;
}

.topRow {
composes: row;
align-items: flex-start;
}

.middleRow {
composes: row;
align-items: center;
}

.bottomRow {
composes: row;
align-items: flex-end;
}

.item {
flex: 1;
padding: 5px;
}

.east {
composes: item;
text-align: right;
}

.west {
composes: item;
text-align: left;
}

.north {
composes: item;
text-align: center;
}

.south {
composes: item;
text-align: center;
}

.northEast {
composes: east;
}

.northWest {
composes: west;
}

.southEast {
composes: east;
}

.southWest {
composes: west;
}
index.js
import macro from 'vtk.js/Sources/macro';
import style from 'vtk.js/Sources/Interaction/UI/CornerAnnotation/CornerAnnotation.module.css';

function noOp() {}

const KEY_MAPPING = {
nw: 'northWestContainer',
n: 'northContainer',
ne: 'northEastContainer',
w: 'westContainer',
e: 'eastContainer',
sw: 'southWestContainer',
s: 'southContainer',
se: 'southEastContainer',
};

// ----------------------------------------------------------------------------
// Static helpers
// ----------------------------------------------------------------------------

function get(path, obj, fb = `$\{${path}}`) {
return path
.split('.')
.reduce((res, key) => (res[key] !== undefined ? res[key] : fb), obj);
}

/* from https://gist.github.com/smeijer/6580740a0ff468960a5257108af1384e */
function applyTemplate(template, map, fallback) {
return template.replace(/\${([^{]+)}/g, (match) => {
const path = match.substr(2, match.length - 3).trim();
return get(path, map, fallback);
});
}

// ----------------------------------------------------------------------------
// vtkCornerAnnotation methods
// ----------------------------------------------------------------------------

function vtkCornerAnnotation(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkCornerAnnotation');

// Create instance specific container
if (!model.templates) {
model.templates = {};
}
if (!model.metadata) {
model.metadata = {};
}

model.annotationContainer = document.createElement('div');
model.annotationContainer.setAttribute('class', style.container);
model.annotationContainer.innerHTML = `
<div class="${style.topRow}">
<div class="js-nw ${style.northWest}"></div>
<div class="js-n ${style.north}"></div>
<div class="js-ne ${style.northEast}"></div>
</div>
<div class="${style.middleRow}">
<div class="js-w ${style.west}"></div>
<div class="js-e ${style.east}"></div>
</div>
<div class="${style.bottomRow}">
<div class="js-sw ${style.southWest}"></div>
<div class="js-s ${style.south}"></div>
<div class="js-se ${style.southEast}"></div>
</div>`;

// Extract various containers
model.northWestContainer = model.annotationContainer.querySelector('.js-nw');
model.northContainer = model.annotationContainer.querySelector('.js-n');
model.northEastContainer = model.annotationContainer.querySelector('.js-ne');
model.westContainer = model.annotationContainer.querySelector('.js-w');
model.eastContainer = model.annotationContainer.querySelector('.js-e');
model.southWestContainer = model.annotationContainer.querySelector('.js-sw');
model.southContainer = model.annotationContainer.querySelector('.js-s');
model.southEastContainer = model.annotationContainer.querySelector('.js-se');

// --------------------------------------------------------------------------
// Private methods
// --------------------------------------------------------------------------

function updateAnnotations() {
const keys = Object.keys(model.templates);
let count = keys.length;
while (count--) {
const el = model[KEY_MAPPING[keys[count]]];
const fn = model.templates[keys[count]];
if (el && fn) {
el.innerHTML = fn(model.metadata);
}
}
}

// --------------------------------------------------------------------------

publicAPI.setContainer = (el) => {
if (model.container && model.container !== el) {
model.container.removeChild(model.annotationContainer);
}
if (model.container !== el) {
model.container = el;
if (model.container) {
model.container.appendChild(model.annotationContainer);
publicAPI.resize();
}
publicAPI.modified();
}
};

publicAPI.resize = noOp;

publicAPI.updateTemplates = (templates) => {
model.templates = Object.assign(model.templates, templates);
updateAnnotations();
publicAPI.modified();
};

publicAPI.updateMetadata = (metadata) => {
model.metadata = Object.assign(model.metadata, metadata);
updateAnnotations();
publicAPI.modified();
};
}

// ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------

const DEFAULT_VALUES = {
templates: null,
metadata: null,
};

// ----------------------------------------------------------------------------

export function extend(publicAPI, model, initialValues = {}) {
Object.assign(model, DEFAULT_VALUES, initialValues);

// Object methods
macro.obj(publicAPI, model);
macro.get(publicAPI, model, [
'annotationContainer',
'northWestContainer',
'northContainer',
'northEastContainer',
'westContainer',
'eastContainer',
'southWestContainer',
'southContainer',
'southEastContainer',
'metadata',
]);

// Object specific methods
vtkCornerAnnotation(publicAPI, model);
}

// ----------------------------------------------------------------------------

export const newInstance = macro.newInstance(extend, 'vtkCornerAnnotation');

// ----------------------------------------------------------------------------

export default { newInstance, extend, applyTemplate };