13252430262

Committed 10 Feb 2025 11:21PM UTC coverage: 75.594% (+1.5%) from 74.088%

Build # 13252430262

Build Type

push

github

Committed by

web-flow

Commit Message

refactor(classifier): use native browser SVG scaling for drawing tools (#6066)

* refactor: use native browser SVG scaling for drawing tools

- remove manual scaling code from `strokeWidth` for all the SVG drawing marks. To be honest, it has never worked very well.
- add `vector-effect="non-scaling-stroke"` to all the SVG drawing marks. This will make the displayed stroke width independent of the scaling of the SVG element, at all zoom levels.
- style marks with `:focus-visible` so that the focus ring is only shown for keyboard interactions.

* Update transcription and freehand Lines

- Use SVG presentation attributes for line styles.
- Specify a stroke width of 2px.

* Update packages/lib-classifier/src/plugins/drawingTools/experimental/components/FreehandLine/FreehandLine.js

Co-authored-by: Delilah C. <23665803+goplayoutside3@users.noreply.github.com>

* Update Mark

- remove redundant `scale` prop.
- adjust stroke width.

* Style freehand lines with CSS

* Use medium outlines for focus rings

* Bump the default mark stroke widths to 3/6px

* Style drawn marks with CSS

* Add non-scaling-stroke to Circle and Rectangle elements

* Remove scale from guides and crosshairSpace

* Fix Circle delete button position per zoom

---------

Co-authored-by: Delilah C. <23665803+goplayoutside3@users.noreply.github.com>
Co-authored-by: Mark Bouslog <mcbouslog@gmail.com>
Co-authored-by: Mark Bouslog <mark@zooniverse.org>

Run Details

10802 of 16462 branches covered (65.62%)

Branch coverage included in aggregate %.

12 of 14 new or added lines in 8 files covered. (85.71%)

10 existing lines in 4 files now uncovered.

16910 of 20197 relevant lines covered (83.73%)

396.84 hits per line

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

89.09

/packages/lib-react-components/src/Media/components/Text/Text.js

import { Box } from 'grommet'
import styled, { css, useTheme } from 'styled-components'

import { propTypes, defaultProps } from '../../helpers/mediaPropTypes'
import { useTextData } from '../../../hooks'

const StyledBox = styled(Box)`
  ${props => props.maxHeight && css`max-height: ${props.maxHeight}px;`}
  ${props => props.maxWidth && css`max-width: ${props.maxWidth}px;`}
`

const StyledPre = styled.pre`
  white-space: pre-wrap;
  color: ${props => props.theme.dark ? 'white' : 'black'};
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  @font-face {
    font-family: 'Anonymous Pro';
    font-style: normal;
    font-weight: 400;
    src:
      local('Anonymous Pro'),
      local('Anonymous Pro-Regular'),
      url(https://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHls29QP-4Ks.woff2) 
      format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  overflow-y: scroll;
`

export default function Text({
  alt = defaultProps.alt,
  controls = defaultProps.controls,
  flex = defaultProps.flex,
  height = '200',
  src = defaultProps.src,
  width = defaultProps.width,
  ...rest
}) {
  const theme = useTheme()
  const { data, error, loading } = useTextData(src)
  let content = null

  if (loading) {
    content = null
  }

  if (error) {
    content = <p>{error.message}</p>
  }

  if (data) {
    content = data
  }

  return (
    <StyledBox
      a11yTitle={alt}
      flex={flex}
      forwardedAs='section'
      height='100%'
      maxWidth={width}
      maxHeight={height}
      pad={{ horizontal: 'xsmall', top: 'xsmall', bottom: 'medium' }}
      width='100%'
      {...rest}
    >
      <StyledPre
        tabIndex='0'
        theme={theme}
      >
        {content}
      </StyledPre>
    </StyledBox>
  )
}

Text.propTypes = {
  ...propTypes
}

1	import { Box } from 'grommet'	1✔
2	import styled, { css, useTheme } from 'styled-components'	1✔
3
4	import { propTypes, defaultProps } from '../../helpers/mediaPropTypes'	1✔
5	import { useTextData } from '../../../hooks'	421✔
6
7	const StyledBox = styled(Box)`	1✔
8	${props => props.maxHeight && css`max-height: ${props.maxHeight}px;`}	7✔
9	${props => props.maxWidth && css`max-width: ${props.maxWidth}px;`}	7✔
10	`
11
12	const StyledPre = styled.pre`	1✔
13	white-space: pre-wrap;
14	color: ${props => props.theme.dark ? 'white' : 'black'};	7!
15	font-family: 'Anonymous Pro', monospace;
16	font-weight: 400;
17	@font-face {
18	font-family: 'Anonymous Pro';
19	font-style: normal;
20	font-weight: 400;
21	src:
22	local('Anonymous Pro'),
23	local('Anonymous Pro-Regular'),
24	url(https://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHls29QP-4Ks.woff2)
25	format('woff2');
26	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
27	}
28	overflow-y: scroll;
29	`
30
31	export default function Text({
32	alt = defaultProps.alt,	7✔
33	controls = defaultProps.controls,	7✔
34	flex = defaultProps.flex,	7✔
35	height = '200',	7✔
36	src = defaultProps.src,	7!
37	width = defaultProps.width,	7✔
38	...rest	7✔
39	}) {	7✔
40	const theme = useTheme()	7✔
41	const { data, error, loading } = useTextData(src)	7✔
42	let content = null	7✔
43
44	if (loading) {	7✔
45	content = null	7✔
46	}
47
48	if (error) {	7!
49	content = <p>{error.message}</p>	×
50	}
51
52	if (data) {	7!
UNCOV 53	content = data	×
54	}
55
56	return (	7✔
57	<StyledBox
58	a11yTitle={alt}
59	flex={flex}
60	forwardedAs='section'
61	height='100%'
62	maxWidth={width}
63	maxHeight={height}
64	pad={{ horizontal: 'xsmall', top: 'xsmall', bottom: 'medium' }}
65	width='100%'
66	{...rest}
67	>
68	<StyledPre
69	tabIndex='0'
70	theme={theme}
71	>
72	{content}
73	</StyledPre>
74	</StyledBox>
75	)
76	}
77
78	Text.propTypes = {	1✔
79	...propTypes
80	}

zooniverse / front-end-monorepo / 13252430262

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