Skip to content

Commit

Permalink
Grid internal size in microns
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcus-oscarsson
marcus-oscarsson committed May 4, 2018
1 parent f1b73a8 commit f2850ec
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 42 deletions.
85 changes: 54 additions & 31 deletions mxcube3/ui/components/SampleView/DrawGridPlugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ function _GridData() {
cellVSpace: 0, cellHSpace: 0,
numCols: 0, numRows: 0,
cellCountFun: null, selected: false,
id: null, result: null };
id: null, result: null,
pixelsPerMMX: 1, pixelsPerMMY: 1, scale: 1};
}


Expand Down Expand Up @@ -79,9 +80,9 @@ export default class DrawGridPlugin {
* @param {float} cellWidth
* @param {float} cellHeight
*/
setCellSize(cellWidth, cellHeight, scale) {
this.gridData.cellWidth = cellWidth * scale;
this.gridData.cellHeight = cellHeight * scale;
setCellSize(cellWidth, cellHeight) {
this.gridData.cellWidth = cellWidth;
this.gridData.cellHeight = cellHeight;
}


Expand All @@ -94,15 +95,15 @@ export default class DrawGridPlugin {
* @param {float} hSpace - horizontal space
* @param {float} VSpace - vertical space
*/
setCellSpace(gd, snapToGrid, hSpace, vSpace, scale) {
setCellSpace(gd, snapToGrid, hSpace, vSpace) {
const gridData = { ...gd };

if (vSpace !== null && !isNaN(vSpace)) { gridData.cellVSpace = vSpace * scale; }
if (hSpace !== null && !isNaN(hSpace)) { gridData.cellHSpace = hSpace * scale; }
if (vSpace !== null && !isNaN(vSpace)) { gridData.cellVSpace = vSpace; }
if (hSpace !== null && !isNaN(hSpace)) { gridData.cellHSpace = hSpace; }

if (snapToGrid) {
const cellTW = gridData.cellWidth + gridData.cellHSpace * scale;
const cellTH = gridData.cellHeight + gridData.cellVSpace * scale;
const cellTW = gridData.cellWidth + gridData.cellHSpace;
const cellTH = gridData.cellHeight + gridData.cellVSpace;

gridData.width = gridData.numCols * cellTW;
gridData.height = gridData.numRows * cellTH;
Expand All @@ -111,6 +112,30 @@ export default class DrawGridPlugin {
return gridData;
}

setScale(scale) {
this.gridData.scale = scale;
}

setPixelsPerMM(pixelsPerMM) {
this.gridData.pixelsPerMMX = pixelsPerMM[0];
this.gridData.pixelsPerMMY = pixelsPerMM[1];
}

getCellWidth(gd) {
return (gd.cellWidth / 1000) * gd.scale * gd.pixelsPerMMX;
}

getCellHeight(gd) {
return (gd.cellHeight / 1000) * gd.scale * gd.pixelsPerMMY;
}

getCellVSpace(gd) {
return (gd.cellVSpace / 1000) * gd.pixelsPerMMX * gd.scale * 2;
}

getCellHSpace(gd) {
return (gd.cellHSpace / 1000) * gd.pixelsPerMMY * gd.scale * 2;
}

/**
* Sets cell spacing for current grid
Expand Down Expand Up @@ -152,7 +177,7 @@ export default class DrawGridPlugin {
* @param {boolean} snapToGrid - True if grid is defined by whole cells,
* false if fractions of a cell is allowed
*/
startDrawing(options, canvas, scale, snapToGrid = true) {
startDrawing(options, canvas, snapToGrid = true) {
if (!canvas.getActiveObject() && !this.drawing) {
this.snapToGrid = snapToGrid;
this.drawing = true;
Expand All @@ -175,8 +200,8 @@ export default class DrawGridPlugin {
const validPosition = x > left && y > top;
const draw = this.drawing && validPosition;

const cellTW = this.gridData.cellWidth + this.gridData.cellHSpace * 2;
const cellTH = this.gridData.cellHeight + this.gridData.cellVSpace * 2;
const cellTW = this.getCellWidth(this.gridData) + this.getCellHSpace(this.gridData);
const cellTH = this.getCellHeight(this.gridData) + this.getCellVSpace(this.gridData);

let width = Math.abs(x - left);
let height = Math.abs(y - top);
Expand Down Expand Up @@ -208,6 +233,8 @@ export default class DrawGridPlugin {
repaint(canvas) {
const shape = this.shapeFromGridData(this.gridData);

canvas.add(this.mouseOverGridLabel);

if (this.shapeGroup) {
canvas.remove(this.shapeGroup);
}
Expand Down Expand Up @@ -273,21 +300,23 @@ export default class DrawGridPlugin {
* @param {GridData} gd
* @return {Object} {shapeGroup, gridData}
*/
shapeFromGridData(gd, scale = 1) {
shapeFromGridData(gd) {
const gridData = { ...gd };
let [left, top] = gd.screenCoord;

left = left * scale;
top = top * scale;
if (!this.drawing) {
left = left * gd.scale;
top = top * gd.scale;
}

const shapes = [];
const cellWidth = gridData.cellWidth * scale;
const cellHeight = gridData.cellHeight * scale;
const cellHSpace = gridData.cellHSpace * scale;
const cellVSpace = gridData.cellVSpace * scale;
const cellWidth = this.getCellWidth(gridData);
const cellHeight = this.getCellHeight(gridData);
const cellHSpace = this.getCellHSpace(gridData);
const cellVSpace = this.getCellVSpace(gridData);

const cellTW = cellWidth + (cellHSpace * 2);
const cellTH = cellHeight + (cellVSpace * 2);
const cellTW = cellWidth + cellHSpace;
const cellTH = cellHeight + cellVSpace;

const height = cellTH * gridData.numRows;
const width = cellTW * gridData.numCols;
Expand Down Expand Up @@ -327,8 +356,8 @@ export default class DrawGridPlugin {
gridData.numRows, gridData.numCols);

shapes.push(new fabric.Ellipse({
left: left + cellHSpace + cellTW * nw,
top: top + cellVSpace + cellTH * nh,
left: left + cellHSpace / 2 + cellTW * nw,
top: top + cellVSpace / 2 + cellTH * nh,
width: cellWidth,
height: cellHeight,
fill: fillingMatrix[nw][nh],
Expand All @@ -351,8 +380,8 @@ export default class DrawGridPlugin {

if (this.include_cell_labels) {
shapes.push(new fabric.Text(cellCount, {
left: left + cellHSpace + (cellTW) * nw + cellWidth / 2,
top: top + cellVSpace + (cellTH) * nh + cellHeight / 2,
left: left + cellHSpace / 2 + (cellTW) * nw + cellWidth / 2,
top: top + cellVSpace / 2 + (cellTH) * nh + cellHeight / 2,
originX: 'center',
originY: 'center',
fill: 'rgba(0, 0, 200, 1)',
Expand Down Expand Up @@ -507,12 +536,6 @@ export default class DrawGridPlugin {
saveGrid(_gd, scale = 1) {
const gd = { ..._gd };

gd.cellHeight = gd.cellHeight / scale;
gd.cellWidth = gd.cellWidth / scale;
gd.cellHSpace = gd.cellHSpace / scale;
gd.cellVSpace = gd.cellVSpace / scale;
gd.width = gd.width / scale;
gd.height = gd.height / scale;
gd.screenCoord[0] = gd.screenCoord[0] / scale;
gd.screenCoord[1] = gd.screenCoord[1] / scale;

Expand Down
22 changes: 11 additions & 11 deletions mxcube3/ui/components/SampleView/SampleImage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,7 @@ export default class SampleImage extends React.Component {
if (options.e.buttons > 0) {
this.drawGridPlugin.update(this.canvas,
options.e.layerX,
options.e.layerY,
this.props.imageRatio
options.e.layerY
);
}

Expand Down Expand Up @@ -207,9 +206,7 @@ export default class SampleImage extends React.Component {
const gridData = this.selectedGrid();

if (gridData) {
const pixelValue = ((value / 1000) * (this.props.pixelsPerMm[0]));
const gd = this.drawGridPlugin.setCellSpace(gridData, true, gridData.cellHSpace, pixelValue,
this.props.imageRatio);
const gd = this.drawGridPlugin.setCellSpace(gridData, true, gridData.cellHSpace, value);
this.props.sampleActions.sendUpdateShapes([gd]);
} else if (this.props.drawGrid) {
this.drawGridPlugin.setCurrentCellSpace(null, value, this.props.imageRatio);
Expand All @@ -222,11 +219,9 @@ export default class SampleImage extends React.Component {
if (isNaN(value)) { value = ''; }

const gridData = this.selectedGrid();
const pixelValue = ((value / 1000) * (this.props.pixelsPerMm[1]));

if (gridData) {
const gd = this.drawGridPlugin.setCellSpace(gridData, true, pixelValue, gridData.cellVSpace,
this.props.imageRatio);
const gd = this.drawGridPlugin.setCellSpace(gridData, true, value, gridData.cellVSpace);
this.props.sampleActions.sendUpdateShapes([gd]);
} else if (this.props.drawGrid) {
this.drawGridPlugin.setCurrentCellSpace(value, null, this.props.imageRatio);
Expand Down Expand Up @@ -482,7 +477,7 @@ export default class SampleImage extends React.Component {
} else if (measureDistance) {
sampleActions.addDistancePoint(option.e.layerX / imageRatio, option.e.layerY / imageRatio);
} else if (this.props.drawGrid) {
this.drawGridPlugin.startDrawing(option, this.canvas, imageRatio);
this.drawGridPlugin.startDrawing(option, this.canvas);
}
}

Expand Down Expand Up @@ -524,8 +519,10 @@ export default class SampleImage extends React.Component {
}

configureGrid() {
const cellSizeX = this.props.beamSize.x * this.props.pixelsPerMm[0];
const cellSizeY = this.props.beamSize.y * this.props.pixelsPerMm[1];
const cellSizeX = this.props.beamSize.x * 1000;
const cellSizeY = this.props.beamSize.y * 1000;
this.drawGridPlugin.setScale(this.props.imageRatio);
this.drawGridPlugin.setPixelsPerMM(this.props.pixelsPerMm);
this.drawGridPlugin.setCellSize(cellSizeX, cellSizeY, this.props.imageRatio);
this.drawGridPlugin.setCellCounting(this.props.cellCounting);

Expand Down Expand Up @@ -755,6 +752,9 @@ export default class SampleImage extends React.Component {
// Grids already defined (drawn)
Object.values(grids).forEach((gd) => {
const gridData = { ...gd };
gridData.scale = imageRatio;
gridData.pixelsPerMMX = pixelsPerMm[0];
gridData.pixelsPerMMY = pixelsPerMm[1];
fabricSelectables.push(this.drawGridPlugin.shapeFromGridData(
gridData, imageRatio).shapeGroup);
});
Expand Down

0 comments on commit f2850ec

Please sign in to comment.