Switch mouse->pointer, remove some logging.
This commit is contained in:
parent
43fba05875
commit
d7dcbbd318
64
src/App.js
64
src/App.js
@ -26,7 +26,6 @@ const Sidebar = (props) => {
|
||||
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 = "";
|
||||
@ -111,6 +110,7 @@ const Sidebar = (props) => {
|
||||
</aside>;
|
||||
}
|
||||
|
||||
const ELEMENT_WIDTH = 384;
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -122,11 +122,11 @@ class App extends React.Component {
|
||||
isFrozen: false,
|
||||
isMouseDown: false,
|
||||
isZoomed: true,
|
||||
zoomFactor: 2,
|
||||
zoomFactor: 4,
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
offsetX: -1.5*ELEMENT_WIDTH,
|
||||
offsetY: -1.5*ELEMENT_WIDTH,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
@ -139,7 +139,6 @@ class App extends React.Component {
|
||||
fetchTracerData() {
|
||||
this.setState({...this.state, isFetching: true})
|
||||
const max = (acc, cur) => Math.max(acc, cur);
|
||||
// console.log(array1.reduce(max));
|
||||
fetch(DATA_URL)
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
@ -155,7 +154,6 @@ class App extends React.Component {
|
||||
let curBinary = this.state.binary;
|
||||
let curBinaryMax = this.state.binaryMax;
|
||||
let binaryMax = result.reduce(max);
|
||||
console.log(`${md.name} ${binaryMax}`);
|
||||
this.setState({
|
||||
binary: {
|
||||
[md.name]: result,
|
||||
@ -194,27 +192,14 @@ class App extends React.Component {
|
||||
let sidebarContent = <h1>Loading</h1>;
|
||||
if (data !== null) {
|
||||
let {timestamp, renderTimeSeconds, imageMetadata, scene} = data;
|
||||
const mouseClick = (e) => {
|
||||
console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
|
||||
this.setState({isFrozen: !this.state.isFrozen});
|
||||
};
|
||||
const mouseEnter = (e) => {
|
||||
if (isFrozen) {
|
||||
return;
|
||||
}
|
||||
this.setState({isZoomed: true});
|
||||
};
|
||||
const mouseDown = (e) => {
|
||||
this.setState({isMouseDown: true});
|
||||
};
|
||||
const mouseUp = (e) => {
|
||||
this.setState({isMouseDown: false});
|
||||
};
|
||||
const mouseLeave = (e) => {
|
||||
if (isFrozen) {
|
||||
return;
|
||||
}
|
||||
this.setState({isZoomed: false});
|
||||
this.setState({isMouseDown: false});
|
||||
};
|
||||
const onZoom = (e) => this.setState({
|
||||
zoomFactor: Number(e.target.value)
|
||||
@ -222,7 +207,7 @@ class App extends React.Component {
|
||||
|
||||
images = imageMetadata.map((metadata) => {
|
||||
let {name, ratio, image, size} = metadata;
|
||||
let width = 384;
|
||||
let width = ELEMENT_WIDTH;
|
||||
let height = (ratio * width).toFixed();
|
||||
let url = ROOT + image + '?t=' + timestamp;
|
||||
|
||||
@ -233,15 +218,24 @@ class App extends React.Component {
|
||||
let maxY = 0;//height * zoomFactor - height;
|
||||
offsetX = Math.max(minX, Math.min(maxX, offsetX));
|
||||
offsetY = Math.max(minY, Math.min(maxY, offsetY));
|
||||
console.log('minX', minX, 'minY', minY);
|
||||
console.log('maxX', maxX, 'maxY', maxY);
|
||||
console.log('offsetX', offsetX, 'offsetY', offsetY);
|
||||
this.setState({
|
||||
offsetX: offsetX,
|
||||
offsetY: offsetY});
|
||||
this.setState({offsetX, offsetY});
|
||||
};
|
||||
|
||||
const mouseMove = (e) => {
|
||||
const pointerDown = (e) => {
|
||||
// TODO(wathiede): figure out how to grab a ref and
|
||||
// setPointerCapture on that.
|
||||
//this.setPointerCapture(e.pointerId);
|
||||
this.setState({isMouseDown: true});
|
||||
};
|
||||
|
||||
const pointerUp = (e) => {
|
||||
// TODO(wathiede): figure out how to grab a ref and
|
||||
// releasePointerCapture on that.
|
||||
//this.releasePointerCapture(e.pointerId);
|
||||
this.setState({isMouseDown: false});
|
||||
};
|
||||
|
||||
const pointerMove = (e) => {
|
||||
if (isMouseDown) {
|
||||
offsetX += e.movementX;
|
||||
offsetY += e.movementY;
|
||||
@ -261,6 +255,8 @@ class App extends React.Component {
|
||||
};
|
||||
|
||||
const mouseScroll = (e) => {
|
||||
let localOffsetX = this.state.offsetX;
|
||||
let localOffsetY = this.state.offsetY;
|
||||
let delta = parseFloat(-e.deltaY/100.0);
|
||||
let zoomFactor = delta + this.state.zoomFactor;
|
||||
if (zoomFactor < 1) { zoomFactor = 1; }
|
||||
@ -271,6 +267,7 @@ class App extends React.Component {
|
||||
zoomFactor: zoomFactor,
|
||||
isZoomed: true
|
||||
});
|
||||
|
||||
clamp(offsetX, offsetY);
|
||||
};
|
||||
let style = {
|
||||
@ -279,16 +276,15 @@ class App extends React.Component {
|
||||
imageRendering: isZoomed ? 'pixelated' : 'auto',
|
||||
backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
|
||||
backgroundPosition: isZoomed ? offsetX + 'px ' + offsetY + 'px' : 'center center',
|
||||
//backgroundPosition: isZoomed ? 100*offsetX + '% ' + 100*offsetY + '%' : 'center center',
|
||||
};
|
||||
console.log('offset', offsetX, offsetY);
|
||||
return (
|
||||
<div key={name}
|
||||
//onClick={mouseClick}
|
||||
onMouseDown={mouseDown}
|
||||
onMouseUp={mouseUp}
|
||||
onMouseMove={mouseMove}
|
||||
onPointerDown={pointerDown}
|
||||
onPointerUp={pointerUp}
|
||||
onPointerMove={pointerMove}
|
||||
//onMouseEnter={mouseEnter}
|
||||
//onMouseLeave={mouseLeave}
|
||||
onMouseLeave={mouseLeave}
|
||||
onWheel={mouseScroll}
|
||||
className="frame"
|
||||
style={{backgroundImage: 'url("' + url + '")', ...style}}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user