2021-05-28 16:25:43 +00:00
|
|
|
import { getShapeUtils } from 'lib/shape-utils'
|
2021-06-02 11:50:34 +00:00
|
|
|
import { memo } from 'react'
|
2021-05-28 16:25:43 +00:00
|
|
|
import { useSelector } from 'state'
|
2021-06-03 12:06:39 +00:00
|
|
|
import { deepCompareArrays, getCurrentCamera, getPage } from 'utils/utils'
|
2021-06-05 06:36:39 +00:00
|
|
|
import { DotCircle, Handle } from './misc'
|
2021-05-28 13:08:51 +00:00
|
|
|
|
|
|
|
export default function Defs() {
|
2021-06-03 12:06:39 +00:00
|
|
|
const zoom = useSelector((s) => getCurrentCamera(s.data).zoom)
|
2021-06-02 11:50:34 +00:00
|
|
|
|
2021-05-28 13:08:51 +00:00
|
|
|
const currentPageShapeIds = useSelector(({ data }) => {
|
|
|
|
return Object.values(getPage(data).shapes)
|
2021-06-15 11:58:51 +00:00
|
|
|
.filter(Boolean)
|
|
|
|
.filter((shape) => !getShapeUtils(shape).isForeignObject)
|
2021-05-28 13:08:51 +00:00
|
|
|
.sort((a, b) => a.childIndex - b.childIndex)
|
|
|
|
.map((shape) => shape.id)
|
|
|
|
}, deepCompareArrays)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<defs>
|
|
|
|
{currentPageShapeIds.map((id) => (
|
|
|
|
<Def key={id} id={id} />
|
|
|
|
))}
|
2021-06-05 06:36:39 +00:00
|
|
|
<DotCircle id="dot" r={4} />
|
|
|
|
<Handle id="handle" r={4} />
|
2021-06-02 11:50:34 +00:00
|
|
|
<filter id="expand">
|
|
|
|
<feMorphology operator="dilate" radius={2 / zoom} />
|
|
|
|
</filter>
|
2021-05-28 13:08:51 +00:00
|
|
|
</defs>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-06-03 21:23:16 +00:00
|
|
|
const Def = memo(function Def({ id }: { id: string }) {
|
2021-06-06 07:33:30 +00:00
|
|
|
const shape = useSelector((s) => getPage(s.data).shapes[id])
|
2021-06-15 11:58:51 +00:00
|
|
|
|
2021-05-28 16:25:43 +00:00
|
|
|
if (!shape) return null
|
2021-06-15 11:58:51 +00:00
|
|
|
return getShapeUtils(shape).render(shape, { isEditing: false })
|
2021-06-02 11:50:34 +00:00
|
|
|
})
|