From a414ba5f109e3a56fdf28915640ca63f45ffa59d Mon Sep 17 00:00:00 2001 From: Oleksandr Iefymchuk Date: Wed, 20 Dec 2023 17:30:56 +0200 Subject: [PATCH] Always show voxel intensity --- src/engine/Graphics2d.js | 2 ++ src/engine/tools2d/ToolPick.js | 36 ++++++++++++++------- src/ui/DragAndDrop/DragAndDropContainer.jsx | 13 ++++---- src/ui/Header/Header.module.css | 1 - 4 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/engine/Graphics2d.js b/src/engine/Graphics2d.js index 8dd81af..c5b6238 100644 --- a/src/engine/Graphics2d.js +++ b/src/engine/Graphics2d.js @@ -674,6 +674,8 @@ class Graphics2d extends React.Component { const xScr = xContainer; const yScr = yContainer; + this.m_toolPick.onMouseMove(xScr, yScr, store); + if (indexTools2d === Tools2dType.PAINT) { this.m_toolPaint.onMouseMove(xScr, yScr, store); } diff --git a/src/engine/tools2d/ToolPick.js b/src/engine/tools2d/ToolPick.js index d93b51a..bbe09a8 100644 --- a/src/engine/tools2d/ToolPick.js +++ b/src/engine/tools2d/ToolPick.js @@ -23,7 +23,8 @@ class ToolPick { this.m_objGraphics2d = objGra; this.m_wScreen = 0; this.m_hScreen = 0; - this.m_strMessage = ''; + this.m_strMessageOnClick = ''; + this.m_strMessageOnMove = ''; this.m_xMessage = 0; this.m_yMessage = 0; this.m_timeStart = 0; @@ -89,12 +90,11 @@ class ToolPick { return vTex; } - onMouseDown(xScr, yScr, store) { + getMessageText(xScr, yScr, store) { if (this.m_wScreen === 0 || this.m_hScreen === 0) { console.log('ToolPick. onMouseDown. Bad screen size'); return; } - const xRatioImage = xScr / this.m_wScreen; const yRatioImage = yScr / this.m_hScreen; const vTex = this.screenToTexture(xRatioImage, yRatioImage, store); @@ -105,7 +105,7 @@ class ToolPick { const yDim = vol.m_yDim; if (vTex.x < 0 || vTex.y < 0 || vTex.z < 0 || vTex.x >= vol.m_xDim || vTex.y >= vol.m_yDim) { - return; + return 'x: 0 y: 0 z: 0 val: 0'; } /* if (mode2d === Modes2d.SAGGITAL) { @@ -138,20 +138,37 @@ class ToolPick { off = off * FOUR; val = vol.m_dataArray[off]; } + return `x: ${vTex.x.toString()} y: ${vTex.y.toString()} z: ${vTex.z.toString()} val: ${val.toString()}`; + } + onMouseDown(xScr, yScr, store) { + const message = this.getMessageText(xScr, yScr, store); + if (!message) return; + this.m_strMessageOnClick = message; this.m_xMessage = xScr; this.m_yMessage = yScr; - this.m_strMessage = 'x,y,z = ' + vTex.x.toString() + ', ' + vTex.y.toString() + ', ' + vTex.z.toString() + '. val = ' + val.toString(); - // console.log(`ToolPick. onMouseDown. ${this.m_strMessage}`); this.m_timeStart = Date.now(); setTimeout(this.onTimerEnd, 6000); } // end onMouseDown + onMouseMove(xScr, yScr, store) { + const message = this.getMessageText(xScr, yScr, store); + if (!message) return; + this.m_strMessageOnMove = message; + } + onTimerEnd() { this.m_objGraphics2d.forceUpdate(); } render(ctx) { + ctx.fillStyle = 'white'; + const FONT_SZ = 16; + ctx.font = FONT_SZ.toString() + 'px Arial'; + ctx.textBaseline = 'bottom'; + ctx.textAlign = 'left'; + ctx.fillText(this.m_strMessageOnMove, 0, this.m_hScreen); + if (this.m_timeStart === 0) { return; } @@ -162,10 +179,7 @@ class ToolPick { if (timeDelta < TIME_SHOW_MS) { // render message // console.log('ToolPick. Render message on ctx'); - ctx.fillStyle = 'white'; - const FONT_SZ = 16; - ctx.font = FONT_SZ.toString() + 'px Arial'; - const sizeTextRect = ctx.measureText(this.m_strMessage); + const sizeTextRect = ctx.measureText(this.m_strMessageOnClick); // console.log(`ToolPick. draw text. x = ${this.m_xMessage}, szRect = ${sizeTextRect.width}, wScr = ${this.m_wScreen}`); if (this.m_xMessage + sizeTextRect.width < this.m_wScreen) { ctx.textAlign = 'left'; @@ -178,7 +192,7 @@ class ToolPick { ctx.textBaseline = 'bottom'; } - ctx.fillText(this.m_strMessage, this.m_xMessage, this.m_yMessage); + ctx.fillText(this.m_strMessageOnClick, this.m_xMessage, this.m_yMessage); } } } diff --git a/src/ui/DragAndDrop/DragAndDropContainer.jsx b/src/ui/DragAndDrop/DragAndDropContainer.jsx index fc63ce1..adfff67 100644 --- a/src/ui/DragAndDrop/DragAndDropContainer.jsx +++ b/src/ui/DragAndDrop/DragAndDropContainer.jsx @@ -2,16 +2,17 @@ import React, { useState } from 'react'; import css from '../Main.module.css'; export const DragAndDropContainer = ({ children }) => { - const [position, setPosition] = useState({ top: 100, left: 900 }); + const [position, setPosition] = useState({ top: 15, right: 1 }); const [isDragging, setIsDragging] = useState(false); const [offset, setOffset] = useState({ x: 0, y: 0 }); const startDrag = (e) => { if (e.target.tagName.toLowerCase() !== 'span') { + const rect = e.currentTarget.getBoundingClientRect(); setIsDragging(true); setOffset({ - x: e.clientX - position.left, - y: e.clientY - position.top, + x: e.clientX - rect.right, + y: e.clientY - rect.top, }); } }; @@ -24,7 +25,7 @@ export const DragAndDropContainer = ({ children }) => { if (isDragging) { const x = e.clientX - offset.x; const y = e.clientY - offset.y; - setPosition({ left: x, top: y }); + setPosition({ top: (y / window.innerHeight) * 100, right: ((window.innerWidth - x) / window.innerWidth) * 100 }); } }; @@ -36,8 +37,8 @@ export const DragAndDropContainer = ({ children }) => { style={{ opacity: isDragging ? 0.5 : 1, cursor: isDragging ? 'grabbing' : 'grab', - top: position.top, - left: position.left, + top: `${position.top}%`, + right: `${position.right}%`, }} className={css.settings} > diff --git a/src/ui/Header/Header.module.css b/src/ui/Header/Header.module.css index 4637fc3..91492c5 100644 --- a/src/ui/Header/Header.module.css +++ b/src/ui/Header/Header.module.css @@ -2,7 +2,6 @@ display: flex; gap: 5px; width: 95%; - min-width: 432px; justify-content: space-between; z-index: 12; }