Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EPMUII-8073-Zoom-in/out-improvements #174

Merged
merged 1 commit into from
Nov 13, 2023
Merged

EPMUII-8073-Zoom-in/out-improvements #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions public/sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
152 changes: 85 additions & 67 deletions src/engine/Graphics2d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,6 @@ class Graphics2d extends React.Component {
let wScreen = 0,
hScreen = 0;

const xPos = store.render2dxPos;
const yPos = store.render2dyPos;
const zoom = store.render2dZoom;

if (mode2d === Modes2d.TRANSVERSE) {
// calc screen rect based on physics volume slice size (z slice)
const xyRratio = pbox.x / pbox.y;
Expand Down Expand Up @@ -218,17 +214,15 @@ class Graphics2d extends React.Component {
let zSlice = Math.floor(zDim * sliceRatio);
zSlice = zSlice < zDim ? zSlice : zDim - 1;
const zOff = zSlice * xyDim;
const xStep = (zoom * xDim) / wScreen;
const yStep = (zoom * yDim) / hScreen;
const xStep = xDim / wScreen;
const yStep = yDim / hScreen;
let j = 0;
let ay = yPos * yDim;
if (vol.m_bytesPerVoxel === ONE) {
for (let y = 0; y < hScreen; y++, ay += yStep) {
const ySrc = Math.floor(ay);
for (let y = 0; y < hScreen; y++) {
const ySrc = Math.floor(y * yStep);
const yOff = ySrc * xDim;
let ax = xPos * xDim;
for (let x = 0; x < wScreen; x++, ax += xStep) {
const xSrc = Math.floor(ax);
for (let x = 0; x < wScreen; x++) {
const xSrc = Math.floor(x * xStep);
const val = dataSrc[zOff + yOff + xSrc];
dataDst[j + 0] = val;
dataDst[j + 1] = val;
Expand All @@ -238,12 +232,11 @@ class Graphics2d extends React.Component {
} // for (x)
} // for (y)
} else if (vol.m_bytesPerVoxel === FOUR) {
for (let y = 0; y < hScreen; y++, ay += yStep) {
const ySrc = Math.floor(ay);
for (let y = 0; y < hScreen; y++) {
const ySrc = Math.floor(y * yStep);
const yOff = ySrc * xDim;
let ax = xPos * xDim;
for (let x = 0; x < wScreen; x++, ax += xStep) {
const xSrc = Math.floor(ax);
for (let x = 0; x < wScreen; x++) {
const xSrc = Math.floor(x * xStep);
const val = dataSrc[(zOff + yOff + xSrc) * FOUR + OFF_3];
const val4 = val * FOUR;
const rCol = roiPal256[val4 + 0];
Expand Down Expand Up @@ -305,17 +298,15 @@ class Graphics2d extends React.Component {
let xSlice = Math.floor(xDim * sliceRatio);
xSlice = xSlice < xDim ? xSlice : xDim - 1;

const yStep = (zoom * yDim) / wScreen;
const zStep = (zoom * zDim) / hScreen;
const yStep = yDim / wScreen;
const zStep = zDim / hScreen;
let j = 0;
let az = yPos * zDim;
if (vol.m_bytesPerVoxel === ONE) {
for (let y = 0; y < hScreen; y++, az += zStep) {
const zSrc = Math.floor(az);
for (let y = 0; y < hScreen; y++) {
const zSrc = Math.floor(y * zStep);
const zOff = zSrc * xDim * yDim;
let ay = xPos * yDim;
for (let x = 0; x < wScreen; x++, ay += yStep) {
const ySrc = Math.floor(ay);
for (let x = 0; x < wScreen; x++) {
const ySrc = Math.floor(x * yStep);
const yOff = ySrc * xDim;
const val = dataSrc[zOff + yOff + xSlice];

Expand All @@ -328,12 +319,11 @@ class Graphics2d extends React.Component {
} // for (x)
} // for (y)
} else if (vol.m_bytesPerVoxel === FOUR) {
for (let y = 0; y < hScreen; y++, az += zStep) {
const zSrc = Math.floor(az);
for (let y = 0; y < hScreen; y++) {
const zSrc = Math.floor(y * zStep);
const zOff = zSrc * xDim * yDim;
let ay = xPos * yDim;
for (let x = 0; x < wScreen; x++, ay += yStep) {
const ySrc = Math.floor(ay);
for (let x = 0; x < wScreen; x++) {
const ySrc = Math.floor(x * yStep);
const yOff = ySrc * xDim;
const val = dataSrc[(zOff + yOff + xSlice) * FOUR + OFF_3];
const val4 = val * FOUR;
Expand Down Expand Up @@ -398,17 +388,15 @@ class Graphics2d extends React.Component {
ySlice = ySlice < yDim ? ySlice : yDim - 1;
const yOff = ySlice * xDim;

const xStep = (zoom * xDim) / wScreen;
const zStep = (zoom * zDim) / hScreen;
const xStep = xDim / wScreen;
const zStep = zDim / hScreen;
let j = 0;
let az = yPos * zDim;
if (vol.m_bytesPerVoxel === ONE) {
for (let y = 0; y < hScreen; y++, az += zStep) {
const zSrc = Math.floor(az);
for (let y = 0; y < hScreen; y++) {
const zSrc = Math.floor(y * zStep);
const zOff = zSrc * xDim * yDim;
let ax = xPos * xDim;
for (let x = 0; x < wScreen; x++, ax += xStep) {
const xSrc = Math.floor(ax);
for (let x = 0; x < wScreen; x++) {
const xSrc = Math.floor(x * xStep);
const val = dataSrc[zOff + yOff + xSrc];

dataDst[j + 0] = val;
Expand All @@ -420,12 +408,11 @@ class Graphics2d extends React.Component {
} // for (x)
} // for (y)
} else if (vol.m_bytesPerVoxel === FOUR) {
for (let y = 0; y < hScreen; y++, az += zStep) {
const zSrc = Math.floor(az);
for (let y = 0; y < hScreen; y++) {
const zSrc = Math.floor(y * zStep);
const zOff = zSrc * xDim * yDim;
let ax = xPos * xDim;
for (let x = 0; x < wScreen; x++, ax += xStep) {
const xSrc = Math.floor(ax);
for (let x = 0; x < wScreen; x++) {
const xSrc = Math.floor(x * xStep);
const val = dataSrc[(zOff + yOff + xSrc) * FOUR + OFF_3];
const val4 = val * FOUR;
const rCol = roiPal256[val4 + 0];
Expand Down Expand Up @@ -461,20 +448,26 @@ class Graphics2d extends React.Component {
}

renderReadyImage() {
const objCanvas = this.m_mount.current;
const ctx = objCanvas.getContext('2d');
const store = this.props;
const zoom = store.render2dZoom;
const xPos = store.render2dxPos;
const yPos = store.render2dyPos;
const canvasWidth = objCanvas.width;
const canvasHeight = objCanvas.height;
const newImgWidth = canvasWidth / zoom;
const newImgHeight = canvasHeight / zoom;

if (!this.m_isMounted) {
return;
}

const objCanvas = this.m_mount.current;
if (objCanvas === null) {
return;
}
const ctx = objCanvas.getContext('2d');
// prepare canvas
this.fillBackground(ctx);

const store = this.props;

const volSet = store.volumeSet;
if (volSet.getNumVolumes() === 0) {
return;
Expand All @@ -491,35 +484,60 @@ class Graphics2d extends React.Component {
const h = this.m_toolPick.m_hScreen;
this.segm2d.render(ctx, w, h, this.imgData);
} else {
ctx.putImageData(this.imgData, 0, 0);
createImageBitmap(this.imgData)
.then((imageBitmap) => {
ctx.drawImage(imageBitmap, xPos, yPos, canvasWidth, canvasHeight, 0, 0, newImgWidth, newImgHeight);
})
.then(() => {
this.m_toolPick.render(ctx);
this.m_toolDistance.render(ctx, store);
this.m_toolAngle.render(ctx, store);
this.m_toolArea.render(ctx, store);
this.m_toolRect.render(ctx, store);
this.m_toolText.render(ctx, store);
this.m_toolEdit.render(ctx, store);
this.m_toolDelete.render(ctx, store);
});
}

// render all tools
this.m_toolPick.render(ctx);
this.m_toolDistance.render(ctx, store);
this.m_toolAngle.render(ctx, store);
this.m_toolArea.render(ctx, store);
this.m_toolRect.render(ctx, store);
this.m_toolText.render(ctx, store);
this.m_toolEdit.render(ctx, store);
this.m_toolDelete.render(ctx, store);
}

onMouseWheel(evt) {
const objCanvas = this.m_mount.current;
const canvasRect = objCanvas.getBoundingClientRect();
let xPosNew;
let yPosNew;
const store = this.props;
const zoom = store.render2dZoom;
const step = evt.deltaY * 2 ** -10;
let newZoom = zoom + step;

const zoom = store.render2dZoom;
let zoomNew = zoom + step;
let xPosNew = store.render2dxPos - ((step / 4) * evt.clientX) / evt.clientY;
let yPosNew = store.render2dyPos - ((step / 4) * evt.clientY) / evt.clientX;
if (step < 0) {
const mouseX = (evt.clientX - canvasRect.left) * zoom + store.render2dxPos;
const mouseY = (evt.clientY - canvasRect.top) * zoom + store.render2dyPos;
xPosNew = mouseX - (mouseX - store.render2dxPos) * (newZoom / zoom);
yPosNew = mouseY - (mouseY - store.render2dyPos) * (newZoom / zoom);
} else {
const initialX = canvasRect.width * zoom + store.render2dxPos;
const initialY = canvasRect.height * zoom + store.render2dyPos;
xPosNew = initialX - (initialX - store.render2dxPos) * (newZoom / zoom);
yPosNew = initialY - (initialY - store.render2dyPos) * (newZoom / zoom);
}

console.log(`onMouseWheel.evt = ${xPosNew}, ${yPosNew}`);
// console.log(`onMouseWheel. zoom.puml = ${zoom.puml} zoomNew = ${zoomNew}, xyPos = ${xPosNew},${yPosNew}`);
if (Math.abs(zoomNew) > 1 || Math.abs(zoomNew) < 0.02 || xPosNew < 0 || yPosNew < 0 || xPosNew > 1 || yPosNew > 1) {
if (xPosNew < 0) {
xPosNew = 0;
}
if (yPosNew < 0) {
yPosNew = 0;
}
if (newZoom > 1) {
newZoom = 1;
xPosNew = 0;
yPosNew = 0;
}
if (newZoom < 0.1) {
return;
}
store.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: zoomNew });
store.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: newZoom });
store.dispatch({ type: StoreActionType.SET_2D_X_POS, render2dxPos: xPosNew });
store.dispatch({ type: StoreActionType.SET_2D_Y_POS, render2dyPos: yPosNew });

Expand Down
12 changes: 8 additions & 4 deletions src/engine/tools2d/ToolDistance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,11 @@ class ToolDistance {
const xDim = vol.m_xDim;
const yDim = vol.m_yDim;
const zDim = vol.m_zDim;
const objCanvas = store.graphics2d.m_mount.current;
const canvasRect = objCanvas.getBoundingClientRect();
const zoom = store.render2dZoom;
const xPos = store.render2dxPos;
const yPos = store.render2dyPos;
const xPos = store.render2dxPos / canvasRect.width;
const yPos = store.render2dyPos / canvasRect.height;

const vTex = {
x: 0.0,
Expand Down Expand Up @@ -148,9 +150,11 @@ class ToolDistance {
const xDim = vol.m_xDim;
const yDim = vol.m_yDim;
const zDim = vol.m_zDim;
const objCanvas = store.graphics2d.m_mount.current;
const canvasRect = objCanvas.getBoundingClientRect();
const zoom = store.render2dZoom;
const xPos = store.render2dxPos;
const yPos = store.render2dyPos;
const xPos = store.render2dxPos / canvasRect.width;
const yPos = store.render2dyPos / canvasRect.height;
if (mode2d === Modes2d.TRANSVERSE) {
// z const
vScr.x = (xTex / xDim - xPos) / zoom;
Expand Down
6 changes: 4 additions & 2 deletions src/engine/tools2d/ToolPick.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,11 @@ class ToolPick {
const xDim = vol.m_xDim;
const yDim = vol.m_yDim;
const zDim = vol.m_zDim;
const objCanvas = store.graphics2d.m_mount.current;
const canvasRect = objCanvas.getBoundingClientRect();
const zoom = store.render2dZoom;
const xPos = store.render2dxPos;
const yPos = store.render2dyPos;
const xPos = store.render2dxPos / canvasRect.width;
const yPos = store.render2dyPos / canvasRect.height;
if (mode2d === Modes2d.TRANSVERSE) {
// z: const
vTex.x = Math.floor((xPos + xScr * zoom) * xDim);
Expand Down
9 changes: 5 additions & 4 deletions src/engine/tools2d/ToolTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ const Tools2dType = {
EDIT: 6,
DELETE: 7,
CLEAR: 8,
ZOOM: 9,
ZOOM_100: 10,
FILTER: 11,
NONE: 12,
ZOOM_IN: 9,
ZOOM_OUT: 10,
ZOOM_100: 11,
FILTER: 12,
NONE: 13,
};
export default Tools2dType;
Loading
Loading