OHIF-155: tools: textBox anchor (center)

This commit is contained in:
Leonardo Campos 2017-02-23 01:18:32 -03:00
parent dd7c47bdb7
commit e7cd285f9c
5 changed files with 66 additions and 16 deletions

View File

@ -28,7 +28,7 @@ OHIF.cornerstone.pixelToPage = (element, position) => {
return result;
};
OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
OHIF.cornerstone.repositionTextBox = (eventData, measurementData, config) => {
// Stop here if it's not a measurement creating
if (!measurementData.isCreating) {
return;
@ -126,6 +126,37 @@ OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
};
};
function getTextBoxOffset(config, cornerAxis, toolAxis, boxSize) {
config = config || {};
const centering = config.centering || {};
const centerX = !!centering.x;
const centerY = !!centering.y;
const halfBoxSizeX = boxSize.x / 2;
const halfBoxSizeY = boxSize.y / 2;
const offset = {
x: [],
y: []
}
if(cornerAxis === 'x') {
const offsetY = centerY ? 0 : halfBoxSizeY;
offset.x[-1] = centerX ? halfBoxSizeX : 0;
offset.x[1] = centerX ? -halfBoxSizeX : -boxSize.x;
offset.y[-1] = offsetY;
offset.y[1] = offsetY;
} else {
const offsetX = centerX ? 0 : halfBoxSizeX;
offset.x[-1] = offsetX;
offset.x[1] = offsetX;
offset.y[-1] = centerY ? halfBoxSizeY : 0;
offset.y[1] = centerY ? -halfBoxSizeY : -boxSize.y;
}
return offset;
}
const handles = measurementData.handles;
const textBox = handles.textBox;
@ -202,13 +233,11 @@ OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
const boxSize = getTextBoxSizeInPixels(element, bounds);
textBox[cornerAxis] = cornerAxisPosition;
textBox[toolAxis] = tool[toolAxis] - (boxSize[toolAxis] / 2);
textBox[toolAxis] = tool[toolAxis];
// Adjust the text box position reducing its size from the corner axis
const isDirectionPositive = directions[cornerAxis] > 0;
if ((foundPlace && !isDirectionPositive) || (!foundPlace && isDirectionPositive)) {
textBox[cornerAxis] -= boxSize[cornerAxis];
}
const textBoxOffset = getTextBoxOffset(config, cornerAxis, toolAxis, boxSize);
textBox[cornerAxis] += textBoxOffset[cornerAxis][directions[cornerAxis]];
// Preventing the text box from partially going outside the canvas area
const topLeft = cornerstone.pixelToCanvas(element, textBox);

View File

@ -7,12 +7,15 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
var toolType = 'bidirectional';
const shadowConfig = Viewerbase.toolManager.getToolDefaultStates().shadowConfig;
const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
const shadowConfig = toolDefaultStates.shadowConfig;
const textBoxConfig = toolDefaultStates.textBoxConfig;
var configuration = {
getMeasurementLocationCallback: getMeasurementLocationCallback,
changeMeasurementLocationCallback: changeMeasurementLocationCallback,
...shadowConfig
...shadowConfig,
textBox: textBoxConfig
};
// Used to cancel tool placement
@ -1018,11 +1021,11 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
var boundingBox = cornerstoneTools.drawTextBox(context,
textLines,
canvasTextLocation.x, canvasTextLocation.y, color);
canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
data.handles.textBox.boundingBox = boundingBox;
OHIF.cornerstone.repositionTextBox(eventData, data);
OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox);
// Draw linked line as dashed
var link = {

View File

@ -7,7 +7,9 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
const toolType = 'nonTarget';
const shadowConfig = Viewerbase.toolManager.getToolDefaultStates().shadowConfig;
const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
const shadowConfig = toolDefaultStates.shadowConfig;
const textBoxConfig = toolDefaultStates.textBoxConfig;
const configuration = {
getMeasurementLocationCallback: getMeasurementLocationCallback,
@ -15,7 +17,9 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
drawHandles: false,
drawHandlesOnHover: true,
arrowFirst: true,
...shadowConfig
textBox: textBoxConfig,
...shadowConfig,
};
// Used to cancel tool placement
@ -253,10 +257,11 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
// Draw the text
if (data.measurementNumber) {
var boundingBox = cornerstoneTools.drawTextBox(context, `Non-Target ${data.measurementNumber}`, canvasTextLocation.x, canvasTextLocation.y, color);
var textLine = `Non-Target ${data.measurementNumber}`;
var boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
data.handles.textBox.boundingBox = boundingBox;
OHIF.cornerstone.repositionTextBox(eventData, data);
OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox);
// Draw linked line as dashed
var link = {

View File

@ -1,3 +1,5 @@
import { Viewerbase } from 'meteor/ohif:viewerbase';
(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
'use strict';
@ -12,12 +14,16 @@
"toolResponse": "EX"
}];
const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
const textBoxConfig = toolDefaultStates.textBoxConfig;
var configuration = {
getMeasurementLocationCallback: getMeasurementLocationCallback,
changeMeasurementLocationCallback: changeMeasurementLocationCallback,
drawHandles: false,
drawHandlesOnHover: false,
arrowFirst: true
arrowFirst: true,
textBox: textBoxConfig
};
// Used to cancel tool placement
@ -290,7 +296,8 @@
context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
context.stroke();
var boundingBox = cornerstoneTools.drawTextBox(context, `Target ${data.measurementNumber}`, canvasTextLocation.x, canvasTextLocation.y, color);
var textLine = `Target ${data.measurementNumber}`;
var boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
data.handles.textBox.boundingBox = boundingBox;
}

View File

@ -38,6 +38,12 @@ let toolDefaultStates = {
shadowColor: '#000000',
shadowOffsetX: 0,
shadowOffsetY: 0
},
textBoxConfig: {
centering: {
x: true,
y: true
}
}
};