wathiede/tracerviewer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Color picker sorta working again.

Browse Source
This commit is contained in:
Bill Thiede 2019-10-27 13:25:41 -07:00
parent c2aef6df5b
commit 43fba05875
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -8,7 +8,8 @@
"react": "^16.10.2",
"react-bulma-components": "3.1.3",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0"
"react-scripts": "3.2.0",
"transformation-matrix": "^2.1.1"
},
"scripts": {
"start": "react-scripts start",

25
src/App.js
View File

@ -15,7 +15,7 @@ const MAX_ZOOM_FACTOR = 32;
const Sidebar = (props) => {
let {
renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, x, y,
renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, mouseX, mouseY,
onZoom,
} = props;
let samples = imageMetadata.map((md) => {
@ -23,9 +23,10 @@ const Sidebar = (props) => {
if (pix === undefined) { return <p key={md.name}>Loading...</p>; }
let max = binaryMax[md.name];
let [w, h] = md.size;
let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
let xOff = mouseX; // Math.min(w, Math.max(0, Math.round(x*w)));
let yOff = mouseY; // Math.min(h, Math.max(0, Math.round(y*h)));
let v = pix[xOff+yOff*w];
//console.log(`xOff ${xOff} yOff ${yOff} v ${v}`);
let color = "#fff";
let rgb = "";
let value = "";
@ -121,7 +122,7 @@ class App extends React.Component {
isFrozen: false,
isMouseDown: false,
isZoomed: true,
zoomFactor: 4,
zoomFactor: 2,
mouseX: 0,
mouseY: 0,
offsetX: 0,
@ -220,7 +221,7 @@ class App extends React.Component {
});
images = imageMetadata.map((metadata) => {
let {name, ratio, image} = metadata;
let {name, ratio, image, size} = metadata;
let width = 384;
let height = (ratio * width).toFixed();
let url = ROOT + image + '?t=' + timestamp;
@ -248,9 +249,13 @@ class App extends React.Component {
} else {
let rect = e.currentTarget.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
this.setState({mouseX: x/width, mouseY: y/height});
let screenX = e.clientX - rect.left;
let screenY = e.clientY - rect.top;
let viewW = size[0] / zoomFactor;
let viewH = size[1] / zoomFactor;
let xOff = (-offsetX*size[0])/(zoomFactor * width) + (screenX / width) * viewW;
let yOff = (-offsetY*size[1])/(zoomFactor * height) + (screenY / height) * viewH;
this.setState({mouseX: Math.round(xOff), mouseY: Math.round(yOff)});
}
e.preventDefault();
};
@ -281,7 +286,6 @@ class App extends React.Component {
//onClick={mouseClick}
onMouseDown={mouseDown}
onMouseUp={mouseUp}
//onMouseMove={mouseMove}
onMouseMove={mouseMove}
//onMouseEnter={mouseEnter}
//onMouseLeave={mouseLeave}
@ -307,7 +311,8 @@ class App extends React.Component {
renderTimeSeconds={renderTimeSeconds}
imageMetadata={imageMetadata}
zoomFactor={zoomFactor}
x={mouseX} y={mouseY}
mouseX={mouseX}
mouseY={mouseY}
binary={binary}
binaryMax={binaryMax}
onZoom={onZoom} />;

4
yarn.lock
View File

@ -8268,6 +8268,10 @@ tr46@^1.0.1:
dependencies:
punycode "^2.1.0"
transformation-matrix@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/transformation-matrix/-/transformation-matrix-2.1.1.tgz#50c1cf4049ac9a2c778eda62bb404e158723657d"
ts-pnp@1.1.4, ts-pnp@^1.1.2:
version "1.1.4"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"