From f2850eccfddf78a0ce8c491500dbb6758410e312 Mon Sep 17 00:00:00 2001 From: Marcus Oskarsson Date: Fri, 4 May 2018 08:57:57 +0200 Subject: [PATCH] Grid internal size in microns --- .../components/SampleView/DrawGridPlugin.js | 85 ++++++++++++------- .../ui/components/SampleView/SampleImage.jsx | 22 ++--- 2 files changed, 65 insertions(+), 42 deletions(-) diff --git a/mxcube3/ui/components/SampleView/DrawGridPlugin.js b/mxcube3/ui/components/SampleView/DrawGridPlugin.js index 8990bc47d..cef2a4fe4 100644 --- a/mxcube3/ui/components/SampleView/DrawGridPlugin.js +++ b/mxcube3/ui/components/SampleView/DrawGridPlugin.js @@ -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}; } @@ -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; } @@ -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; @@ -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 @@ -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; @@ -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); @@ -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); } @@ -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; @@ -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], @@ -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)', @@ -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; diff --git a/mxcube3/ui/components/SampleView/SampleImage.jsx b/mxcube3/ui/components/SampleView/SampleImage.jsx index 12008990f..30d04db75 100644 --- a/mxcube3/ui/components/SampleView/SampleImage.jsx +++ b/mxcube3/ui/components/SampleView/SampleImage.jsx @@ -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 ); } @@ -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); @@ -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); @@ -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); } } @@ -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); @@ -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); });