13547957436

Committed 26 Feb 2025 03:52PM UTC coverage: 75.487% (-0.1%) from 75.625%

Build # 13547957436

Build Type

Pull #6574

github

Committed by

web-flow

Commit Message

Merge 45c6d0a81 into 1c40c2a2c

Pull Request Pull Request #6574: [HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling

Run Details

10908 of 16652 branches covered (65.51%)

Branch coverage included in aggregate %.

228 of 248 new or added lines in 24 files covered. (91.94%)

235 existing lines in 26 files now uncovered.

17008 of 20329 relevant lines covered (83.66%)

397.43 hits per line

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

67.5

/packages/lib-classifier/src/plugins/drawingTools/components/DeleteButton/DeleteButton.js

import PropTypes from 'prop-types'
import { observer } from 'mobx-react'
import styled, { css, withTheme } from 'styled-components'

import useScale from '../../hooks/useScale'

const StyledGroup = styled('g')`
  &:focus {
    ${props => css`outline: solid 4px ${props.focusColor};`}
  }

  &:hover {
    cursor: pointer;
  }
`

function DeleteButton ({ label, mark, onDelete, onDeselect, rotate, theme }) {
  const scale = useScale()
  const focusColor = theme.global.colors[theme.global.colors.focus]
  const RADIUS = (screen.width < 900) ? 11 : 8
  const STROKE_COLOR = 'white'
  const FILL_COLOR = 'black'
  const STROKE_WIDTH = 1.5
  const CROSS_PATH = `
    M ${-1 * RADIUS * 0.7} 0
    L ${RADIUS * 0.7} 0
    M 0 ${-1 * RADIUS * 0.7}
    L 0 ${RADIUS * 0.7}
  `
  const { x, y } = mark.deleteButtonPosition(scale)
  const transform = `
    translate(${x}, ${y})
    rotate(${rotate})
    scale(${1 / scale})
  `
  
  function onKeyDown (event) {
    switch (event.key) {
      case 'Enter':
      case ' ': {
        return onPointerDown(event)
      }
      default: {
        return true
      }
    }
  }

  function onPointerDown (event) {
    event.preventDefault()
    event.stopPropagation()
    onDelete()
    return false
  }

  return (
    <StyledGroup
      aria-label={label}
      focusable
      focusColor={focusColor}
      onBlur={onDeselect}
      onKeyDown={onKeyDown}
      onPointerDown={onPointerDown}
      role='button'
      stroke={STROKE_COLOR}
      strokeWidth={STROKE_WIDTH}
      tabIndex='-1'
      transform={transform}
    >
      <circle
        fill={FILL_COLOR}
        r={RADIUS}
      />
      <path
        d={CROSS_PATH}
        transform='rotate(45)'
      />
    </StyledGroup>
  )
}

DeleteButton.propTypes = {
  label: PropTypes.string.isRequired,
  mark: PropTypes.object.isRequired,
  onDelete: PropTypes.func,
  onDeselect: PropTypes.func,
  rotate: PropTypes.number,
  theme: PropTypes.object
}
DeleteButton.defaultProps = {
  onDelete: () => true,
  onDeselect: () => true,
  rotate: 0,
  theme: {
    global: {
      colors: {}
    }
  }
}

export default withTheme(observer(DeleteButton))
export { DeleteButton }

1	import PropTypes from 'prop-types'	1✔
2	import { observer } from 'mobx-react'	1✔
3	import styled, { css, withTheme } from 'styled-components'	1✔
4
5	import useScale from '../../hooks/useScale'	5✔
6
7	const StyledGroup = styled('g')`	1✔
8	&:focus {
9	${props => css`outline: solid 4px ${props.focusColor};`}	1✔
10	}
11
12	&:hover {
13	cursor: pointer;
14	}
15	`
16
17	function DeleteButton ({ label, mark, onDelete, onDeselect, rotate, theme }) {	1✔
18	const scale = useScale()	1✔
19	const focusColor = theme.global.colors[theme.global.colors.focus]	1✔
20	const RADIUS = (screen.width < 900) ? 11 : 8	1!
21	const STROKE_COLOR = 'white'	1✔
22	const FILL_COLOR = 'black'	1✔
23	const STROKE_WIDTH = 1.5	1✔
24	const CROSS_PATH = `	1✔
25	M ${-1 * RADIUS * 0.7} 0
26	L ${RADIUS * 0.7} 0
27	M 0 ${-1 * RADIUS * 0.7}
28	L 0 ${RADIUS * 0.7}
29	`
30	const { x, y } = mark.deleteButtonPosition(scale)	1✔
31	const transform = `	1✔
32	translate(${x}, ${y})
33	rotate(${rotate})
34	scale(${1 / scale})
35	`
36
37	function onKeyDown (event) {
UNCOV 38	switch (event.key) {	×
39	case 'Enter':
40	case ' ': {
UNCOV 41	return onPointerDown(event)	×
42	}
43	default: {
UNCOV 44	return true	×
45	}
46	}
47	}
48
49	function onPointerDown (event) {
UNCOV 50	event.preventDefault()	×
UNCOV 51	event.stopPropagation()	×
UNCOV 52	onDelete()	×
UNCOV 53	return false	×
54	}
55
56	return (	1✔
57	<StyledGroup
58	aria-label={label}
59	focusable
60	focusColor={focusColor}
61	onBlur={onDeselect}
62	onKeyDown={onKeyDown}
63	onPointerDown={onPointerDown}
64	role='button'
65	stroke={STROKE_COLOR}
66	strokeWidth={STROKE_WIDTH}
67	tabIndex='-1'
68	transform={transform}
69	>
70	<circle
71	fill={FILL_COLOR}
72	r={RADIUS}
73	/>
74	<path
75	d={CROSS_PATH}
76	transform='rotate(45)'
77	/>
78	</StyledGroup>
79	)
80	}
81
82	DeleteButton.propTypes = {	1✔
83	label: PropTypes.string.isRequired,
84	mark: PropTypes.object.isRequired,
85	onDelete: PropTypes.func,
86	onDeselect: PropTypes.func,
87	rotate: PropTypes.number,
88	theme: PropTypes.object
89	}
90	DeleteButton.defaultProps = {	1✔
UNCOV 91	onDelete: () => true,	×
UNCOV 92	onDeselect: () => true,	×
93	rotate: 0,
94	theme: {
95	global: {
96	colors: {}
97	}
98	}
99	}	1✔
100
101	export default withTheme(observer(DeleteButton))
102	export { DeleteButton }

zooniverse / front-end-monorepo / 13547957436

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