2021-05-28 16:25:43 +00:00
|
|
|
import React, { useRef, memo } from 'react'
|
|
|
|
import { useSelector } from 'state'
|
2021-05-28 14:37:23 +00:00
|
|
|
import styled from 'styles'
|
|
|
|
import { getShapeUtils } from 'lib/shape-utils'
|
|
|
|
import { getPage } from 'utils/utils'
|
2021-06-01 21:49:32 +00:00
|
|
|
import { DashStyle, ShapeStyles } from 'types'
|
2021-05-28 16:25:43 +00:00
|
|
|
import useShapeEvents from 'hooks/useShapeEvents'
|
2021-06-02 11:50:34 +00:00
|
|
|
import { getShapeStyle } from 'lib/shape-styles'
|
2021-05-28 14:37:23 +00:00
|
|
|
|
|
|
|
function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
|
2021-06-02 11:50:34 +00:00
|
|
|
const isSelected = useSelector((s) => s.values.selectedIds.has(id))
|
2021-05-14 21:05:21 +00:00
|
|
|
|
2021-05-22 15:45:24 +00:00
|
|
|
const shape = useSelector(({ data }) => getPage(data).shapes[id])
|
2021-05-09 21:22:25 +00:00
|
|
|
|
2021-05-28 13:08:51 +00:00
|
|
|
const rGroup = useRef<SVGGElement>(null)
|
|
|
|
|
2021-05-28 16:25:43 +00:00
|
|
|
const events = useShapeEvents(id, rGroup)
|
2021-05-14 22:56:41 +00:00
|
|
|
|
2021-05-15 21:04:28 +00:00
|
|
|
// This is a problem with deleted shapes. The hooks in this component
|
|
|
|
// may sometimes run before the hook in the Page component, which means
|
|
|
|
// a deleted shape will still be pulled here before the page component
|
|
|
|
// detects the change and pulls this component.
|
|
|
|
if (!shape) return null
|
|
|
|
|
2021-05-28 20:30:27 +00:00
|
|
|
const center = getShapeUtils(shape).getCenter(shape)
|
2021-06-02 11:50:34 +00:00
|
|
|
|
2021-05-28 16:25:43 +00:00
|
|
|
const transform = `
|
2021-05-28 20:30:27 +00:00
|
|
|
rotate(${shape.rotation * (180 / Math.PI)}, ${center})
|
2021-05-31 19:13:43 +00:00
|
|
|
translate(${shape.point})
|
|
|
|
`
|
2021-05-28 16:25:43 +00:00
|
|
|
|
2021-06-02 11:50:34 +00:00
|
|
|
const style = getShapeStyle(shape.style)
|
|
|
|
|
2021-05-12 21:11:17 +00:00
|
|
|
return (
|
2021-06-02 11:50:34 +00:00
|
|
|
<StyledGroup ref={rGroup} isSelected={isSelected} transform={transform}>
|
2021-05-28 21:05:40 +00:00
|
|
|
{isSelecting && (
|
|
|
|
<HoverIndicator
|
|
|
|
as="use"
|
|
|
|
href={'#' + id}
|
2021-06-02 11:50:34 +00:00
|
|
|
strokeWidth={+style.strokeWidth + 4}
|
|
|
|
variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
|
2021-06-01 21:49:32 +00:00
|
|
|
{...events}
|
2021-05-28 21:05:40 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-06-02 11:50:34 +00:00
|
|
|
{!shape.isHidden && <RealShape id={id} style={style} />}
|
2021-05-12 21:11:17 +00:00
|
|
|
</StyledGroup>
|
|
|
|
)
|
2021-05-09 21:22:25 +00:00
|
|
|
}
|
|
|
|
|
2021-06-02 11:50:34 +00:00
|
|
|
const RealShape = memo(
|
|
|
|
({ id, style }: { id: string; style: ReturnType<typeof getShapeStyle> }) => {
|
|
|
|
return <StyledShape as="use" href={'#' + id} {...style} />
|
|
|
|
}
|
|
|
|
)
|
2021-06-01 21:49:32 +00:00
|
|
|
|
|
|
|
const StyledShape = styled('path', {
|
|
|
|
strokeLinecap: 'round',
|
|
|
|
strokeLinejoin: 'round',
|
2021-06-02 11:50:34 +00:00
|
|
|
pointerEvents: 'none',
|
2021-06-01 21:49:32 +00:00
|
|
|
})
|
2021-05-15 17:11:08 +00:00
|
|
|
|
2021-05-28 14:37:23 +00:00
|
|
|
const HoverIndicator = styled('path', {
|
2021-06-02 11:50:34 +00:00
|
|
|
stroke: '$selected',
|
2021-05-28 14:37:23 +00:00
|
|
|
strokeLinecap: 'round',
|
|
|
|
strokeLinejoin: 'round',
|
|
|
|
transform: 'all .2s',
|
2021-06-02 11:50:34 +00:00
|
|
|
fill: 'transparent',
|
|
|
|
filter: 'url(#expand)',
|
2021-06-01 21:49:32 +00:00
|
|
|
variants: {
|
|
|
|
variant: {
|
|
|
|
hollow: {
|
|
|
|
pointerEvents: 'stroke',
|
|
|
|
},
|
|
|
|
filled: {
|
|
|
|
pointerEvents: 'all',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-05-12 21:11:17 +00:00
|
|
|
})
|
|
|
|
|
2021-05-28 14:37:23 +00:00
|
|
|
const StyledGroup = styled('g', {
|
2021-05-12 21:11:17 +00:00
|
|
|
[`& ${HoverIndicator}`]: {
|
2021-05-28 14:37:23 +00:00
|
|
|
opacity: '0',
|
2021-05-12 21:11:17 +00:00
|
|
|
},
|
|
|
|
variants: {
|
|
|
|
isSelected: {
|
2021-06-02 11:50:34 +00:00
|
|
|
true: {
|
2021-05-14 22:56:41 +00:00
|
|
|
[`& ${HoverIndicator}`]: {
|
2021-06-02 11:50:34 +00:00
|
|
|
opacity: '0.2',
|
2021-05-12 21:11:17 +00:00
|
|
|
},
|
2021-06-02 11:50:34 +00:00
|
|
|
[`&:hover ${HoverIndicator}`]: {
|
|
|
|
opacity: '0.3',
|
|
|
|
},
|
|
|
|
[`&:active ${HoverIndicator}`]: {
|
|
|
|
opacity: '0.3',
|
2021-05-15 13:02:13 +00:00
|
|
|
},
|
|
|
|
},
|
2021-06-02 11:50:34 +00:00
|
|
|
false: {
|
2021-05-15 13:02:13 +00:00
|
|
|
[`& ${HoverIndicator}`]: {
|
2021-06-02 11:50:34 +00:00
|
|
|
opacity: '0',
|
|
|
|
},
|
|
|
|
[`&:hover ${HoverIndicator}`]: {
|
|
|
|
opacity: '0.16',
|
2021-05-15 13:02:13 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-06-02 11:50:34 +00:00
|
|
|
},
|
2021-05-12 21:11:17 +00:00
|
|
|
})
|
|
|
|
|
2021-05-31 19:13:43 +00:00
|
|
|
function Label({ text }: { text: string }) {
|
|
|
|
return (
|
|
|
|
<text
|
|
|
|
y={4}
|
|
|
|
x={4}
|
|
|
|
fontSize={18}
|
|
|
|
fill="black"
|
|
|
|
stroke="none"
|
|
|
|
alignmentBaseline="text-before-edge"
|
|
|
|
pointerEvents="none"
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</text>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-28 14:37:23 +00:00
|
|
|
export { HoverIndicator }
|
2021-05-12 21:11:17 +00:00
|
|
|
|
2021-05-09 21:22:25 +00:00
|
|
|
export default memo(Shape)
|