1408804183

Build Type

github

Committed by GitHub

Commit Message

Merge 9580b138d into 3463ba860

Pull Request Pull Request #268: Add landing page

Run Details

19 of 269 branches covered (7.06%)

Branch coverage included in aggregate %.

109 of 186 new or added lines in 13 files covered. (58.6%)

235 existing lines in 27 files now uncovered.

1401 of 3186 relevant lines covered (43.97%)

1.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

2.78

/visualizer/src/Canvas/Canvas.js

import Box from '@material-ui/core/Box';
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles } from '@material-ui/core/styles';
import { useSelector } from '@xstate/react';
import React, { useEffect } from 'react';
import { useCanvas, useLabeled, useRaw, useSegment, useSelect } from '../ProjectContext';
import LabeledCanvas from './Labeled/LabeledCanvas';
import OutlineCanvas from './Labeled/OutlineCanvas';
import RawCanvas from './Raw/RawCanvas';
import BrushCanvas from './Tool/BrushCanvas';
import ThresholdCanvas from './Tool/ThresholdCanvas';

const useStyles = makeStyles({
  canvasBox: {
    alignSelf: 'flex-start',
    position: 'absolute',
  },
  canvas: {
    position: 'absolute',
    top: 0,
    left: 0,
    maxHeight: '100%',
    maxWidth: '100%',
  },
});

export const Canvas = () => {
  const raw = useRaw();
  const labeled = useLabeled();
  const select = useSelect();

  const canvas = useCanvas();
  const sx = useSelector(canvas, state => state.context.sx);
  const sy = useSelector(canvas, state => state.context.sy);
  const zoom = useSelector(canvas, state => state.context.zoom);
  const sw = useSelector(canvas, state => state.context.width);
  const sh = useSelector(canvas, state => state.context.height);
  const scale = useSelector(canvas, state => state.context.scale);

  const grab = useSelector(canvas, state => state.matches('pan.grab'));
  const grabbing = useSelector(canvas, state => state.matches('pan.grab.panning'));
  const dragged = useSelector(canvas, state => state.matches('pan.interactive.panOnDrag.dragged'));

  const cursor = grabbing || dragged ? 'grabbing' : grab ? 'grab' : 'crosshair';

  const segment = useSegment();
  const tool = useSelector(segment, state => state.context.tool);

  const styles = useStyles();

  // dynamic canvas border styling based on position
  const padding = 5;
  const topColor = Math.floor(sy) === 0 ? 'white' : 'black';
  const bottomColor = Math.ceil(sy + sh / zoom) === sh ? 'white' : 'black';
  const rightColor = Math.ceil(sx + sw / zoom) === sw ? 'white' : 'black';
  const leftColor = Math.floor(sx) === 0 ? 'white' : 'black';
  const canvasStyles = {
    borderTop: `${padding}px solid ${topColor}`,
    borderBottom: `${padding}px solid ${bottomColor}`,
    borderLeft: `${padding}px solid ${leftColor}`,
    borderRight: `${padding}px solid ${rightColor}`,
    cursor: cursor,
  };

  // prevent scrolling page when over canvas
  useEffect(() => {
    const canvasBox = document.getElementById('canvasBox');
    const wheelListener = e => e.preventDefault();
    const spaceListener = e => {
      if (e.key === ' ') {
        e.preventDefault();
      }
    };
    canvasBox.addEventListener('wheel', wheelListener);
    document.addEventListener('keydown', spaceListener);
    return () => {
      canvasBox.removeEventListener('wheel', wheelListener);
      document.removeEventListener('keydown', spaceListener);
    };
  }, []);

  const handleMouseDown = event => {
    event.preventDefault();
    if (event.shiftKey) {
      select.send({ ...event, type: 'SHIFT_CLICK' });
    } else {
      canvas.send(event);
    }
  };

  return (
    <Box
      id={'canvasBox'}
      className={styles.canvasBox}
      style={canvasStyles}
      boxShadow={10}
      width={scale * sw}
      height={scale * sh}
      onMouseMove={canvas.send}
      onWheel={canvas.send}
      onMouseDown={handleMouseDown}
      onMouseUp={canvas.send}
    >
      {!raw && <CircularProgress style={{ margin: '25%', width: '50%', height: '50%' }} />}
      {raw && <RawCanvas className={styles.canvas} />}
      {labeled && <LabeledCanvas className={styles.canvas} />}
      {labeled && <OutlineCanvas className={styles.canvas} />}
      {tool === 'brush' && <BrushCanvas className={styles.canvas} />}
      {tool === 'threshold' && <ThresholdCanvas className={styles.canvas} />}
    </Box>
  );
};

export default Canvas;

1	import Box from '@material-ui/core/Box';
2	import CircularProgress from '@material-ui/core/CircularProgress';
3	import { makeStyles } from '@material-ui/core/styles';
4	import { useSelector } from '@xstate/react';
5	import React, { useEffect } from 'react';
6	import { useCanvas, useLabeled, useRaw, useSegment, useSelect } from '../ProjectContext';
7	import LabeledCanvas from './Labeled/LabeledCanvas';
8	import OutlineCanvas from './Labeled/OutlineCanvas';
9	import RawCanvas from './Raw/RawCanvas';
10	import BrushCanvas from './Tool/BrushCanvas';
11	import ThresholdCanvas from './Tool/ThresholdCanvas';
12
13	const useStyles = makeStyles({	4✔
14	canvasBox: {
15	alignSelf: 'flex-start',
16	position: 'absolute',
17	},
18	canvas: {
19	position: 'absolute',
20	top: 0,
21	left: 0,
22	maxHeight: '100%',
23	maxWidth: '100%',
24	},
25	});
26
27	export const Canvas = () => {	4✔
UNCOV 28	const raw = useRaw();	×
UNCOV 29	const labeled = useLabeled();	×
UNCOV 30	const select = useSelect();	×
31
UNCOV 32	const canvas = useCanvas();	×
UNCOV 33	const sx = useSelector(canvas, state => state.context.sx);	×
UNCOV 34	const sy = useSelector(canvas, state => state.context.sy);	×
UNCOV 35	const zoom = useSelector(canvas, state => state.context.zoom);	×
UNCOV 36	const sw = useSelector(canvas, state => state.context.width);	×
UNCOV 37	const sh = useSelector(canvas, state => state.context.height);	×
UNCOV 38	const scale = useSelector(canvas, state => state.context.scale);	×
39
UNCOV 40	const grab = useSelector(canvas, state => state.matches('pan.grab'));	×
UNCOV 41	const grabbing = useSelector(canvas, state => state.matches('pan.grab.panning'));	×
UNCOV 42	const dragged = useSelector(canvas, state => state.matches('pan.interactive.panOnDrag.dragged'));	×
43
UNCOV 44	const cursor = grabbing \|\| dragged ? 'grabbing' : grab ? 'grab' : 'crosshair';	×
45
UNCOV 46	const segment = useSegment();	×
UNCOV 47	const tool = useSelector(segment, state => state.context.tool);	×
48
UNCOV 49	const styles = useStyles();	×
50
51	// dynamic canvas border styling based on position
UNCOV 52	const padding = 5;	×
UNCOV 53	const topColor = Math.floor(sy) === 0 ? 'white' : 'black';	×
UNCOV 54	const bottomColor = Math.ceil(sy + sh / zoom) === sh ? 'white' : 'black';	×
UNCOV 55	const rightColor = Math.ceil(sx + sw / zoom) === sw ? 'white' : 'black';	×
UNCOV 56	const leftColor = Math.floor(sx) === 0 ? 'white' : 'black';	×
UNCOV 57	const canvasStyles = {	×
58	borderTop: `${padding}px solid ${topColor}`,
59	borderBottom: `${padding}px solid ${bottomColor}`,
60	borderLeft: `${padding}px solid ${leftColor}`,
61	borderRight: `${padding}px solid ${rightColor}`,
62	cursor: cursor,
63	};
64
65	// prevent scrolling page when over canvas
UNCOV 66	useEffect(() => {	×
UNCOV 67	const canvasBox = document.getElementById('canvasBox');	×
UNCOV 68	const wheelListener = e => e.preventDefault();	×
UNCOV 69	const spaceListener = e => {	×
70	if (e.key === ' ') {	×
71	e.preventDefault();	×
72	}
73	};
UNCOV 74	canvasBox.addEventListener('wheel', wheelListener);	×
UNCOV 75	document.addEventListener('keydown', spaceListener);	×
UNCOV 76	return () => {	×
UNCOV 77	canvasBox.removeEventListener('wheel', wheelListener);	×
UNCOV 78	document.removeEventListener('keydown', spaceListener);	×
79	};
80	}, []);
81
UNCOV 82	const handleMouseDown = event => {	×
83	event.preventDefault();	×
84	if (event.shiftKey) {	×
85	select.send({ ...event, type: 'SHIFT_CLICK' });	×
86	} else {
87	canvas.send(event);	×
88	}
89	};
90
UNCOV 91	return (	×
92	<Box
93	id={'canvasBox'}
94	className={styles.canvasBox}
95	style={canvasStyles}
96	boxShadow={10}
97	width={scale * sw}
98	height={scale * sh}
99	onMouseMove={canvas.send}
100	onWheel={canvas.send}
101	onMouseDown={handleMouseDown}
102	onMouseUp={canvas.send}
103	>
104	{!raw && <CircularProgress style={{ margin: '25%', width: '50%', height: '50%' }} />}	×
105	{raw && <RawCanvas className={styles.canvas} />}	×
106	{labeled && <LabeledCanvas className={styles.canvas} />}	×
107	{labeled && <OutlineCanvas className={styles.canvas} />}	×
108	{tool === 'brush' && <BrushCanvas className={styles.canvas} />}	×
109	{tool === 'threshold' && <ThresholdCanvas className={styles.canvas} />}	×
110	</Box>
111	);
112	};
113
114	export default Canvas;

vanvalenlab / deepcell-label / 1408804183

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous