balances dashes for ellipses
This commit is contained in:
parent
03603b5190
commit
f6c08508dc
4 changed files with 85 additions and 26 deletions
|
@ -1,4 +1,4 @@
|
|||
import { uniqueId } from 'utils/utils'
|
||||
import { uniqueId, getPerfectEllipseDashProps } from 'utils/utils'
|
||||
import vec from 'utils/vec'
|
||||
import { DashStyle, EllipseShape, ShapeType } from 'types'
|
||||
import { getShapeUtils } from './index'
|
||||
|
@ -6,11 +6,7 @@ import { boundsContained, getRotatedEllipseBounds } from 'utils/bounds'
|
|||
import { intersectEllipseBounds } from 'utils/intersections'
|
||||
import { pointInEllipse } from 'utils/hitTests'
|
||||
import { ease, getSvgPathFromStroke, rng, translateBounds } from 'utils/utils'
|
||||
import {
|
||||
defaultStyle,
|
||||
getShapeStyle,
|
||||
getStrokeDashArray,
|
||||
} from 'state/shape-styles'
|
||||
import { defaultStyle, getShapeStyle } from 'state/shape-styles'
|
||||
import getStroke from 'perfect-freehand'
|
||||
import { registerShapeUtils } from './register'
|
||||
|
||||
|
@ -43,6 +39,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
render(shape) {
|
||||
const { id, radiusX, radiusY, style } = shape
|
||||
const styles = getShapeStyle(style)
|
||||
const strokeWidth = +styles.strokeWidth
|
||||
|
||||
if (style.dash === DashStyle.Solid) {
|
||||
if (!pathCache.has(shape)) {
|
||||
|
@ -57,8 +54,8 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
id={id}
|
||||
cx={radiusX}
|
||||
cy={radiusY}
|
||||
rx={Math.max(0, radiusX - +styles.strokeWidth / 2)}
|
||||
ry={Math.max(0, radiusY - +styles.strokeWidth / 2)}
|
||||
rx={Math.max(0, radiusX - strokeWidth / 2)}
|
||||
ry={Math.max(0, radiusY - strokeWidth / 2)}
|
||||
stroke="none"
|
||||
/>
|
||||
<path d={path} fill={styles.stroke} />
|
||||
|
@ -66,20 +63,30 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
)
|
||||
}
|
||||
|
||||
const rx = Math.max(0, radiusX - strokeWidth / 2)
|
||||
const ry = Math.max(0, radiusY - strokeWidth / 2)
|
||||
|
||||
const { strokeDasharray, strokeDashoffset } = getPerfectEllipseDashProps(
|
||||
rx,
|
||||
ry,
|
||||
strokeWidth,
|
||||
shape.style.dash === DashStyle.Dotted ? 'dotted' : 'dashed'
|
||||
)
|
||||
|
||||
return (
|
||||
<ellipse
|
||||
id={id}
|
||||
cx={radiusX}
|
||||
cy={radiusY}
|
||||
rx={Math.max(0, radiusX - +styles.strokeWidth / 2)}
|
||||
ry={Math.max(0, radiusY - +styles.strokeWidth / 2)}
|
||||
fill={styles.fill}
|
||||
stroke={styles.stroke}
|
||||
strokeDasharray={getStrokeDashArray(
|
||||
style.dash,
|
||||
+styles.strokeWidth
|
||||
).join(' ')}
|
||||
/>
|
||||
<g id={id}>
|
||||
<ellipse
|
||||
id={id}
|
||||
cx={radiusX}
|
||||
cy={radiusY}
|
||||
rx={rx}
|
||||
ry={ry}
|
||||
fill={styles.fill}
|
||||
stroke={styles.stroke}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
},
|
||||
|
||||
|
|
|
@ -82,6 +82,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
|
|||
style.dash,
|
||||
+styles.strokeWidth
|
||||
).join(' ')}
|
||||
strokeDashoffset={-(size[0] + size[1])}
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -929,12 +929,11 @@ const state = createState({
|
|||
return data.hoveredId === payload.target
|
||||
},
|
||||
pointInSelectionBounds(data, payload: PointerInfo) {
|
||||
if (getSelectedIds(data).size === 0) return false
|
||||
const bounds = getSelectionBounds(data)
|
||||
|
||||
return pointInBounds(
|
||||
screenToWorld(payload.point, data),
|
||||
getSelectionBounds(data)
|
||||
)
|
||||
if (!bounds) return false
|
||||
|
||||
return pointInBounds(screenToWorld(payload.point, data), bounds)
|
||||
},
|
||||
pointHitsShape(data, payload: PointerInfo) {
|
||||
const shape = getShape(data, payload.target)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue