46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import * as React from 'react'
|
|
import { useShapeEvents, useTLContext } from '+hooks'
|
|
import type { IShapeTreeNode } from '+types'
|
|
import { RenderedShape } from './rendered-shape'
|
|
import { EditingTextShape } from './editing-text-shape'
|
|
|
|
export const Shape = React.memo(
|
|
({ shape, isEditing, isBinding, isDarkMode, isCurrentParent }: IShapeTreeNode) => {
|
|
const { shapeUtils } = useTLContext()
|
|
const events = useShapeEvents(shape.id, isCurrentParent)
|
|
const utils = shapeUtils[shape.type]
|
|
|
|
const center = utils.getCenter(shape)
|
|
const rotation = (shape.rotation || 0) * (180 / Math.PI)
|
|
const transform = `rotate(${rotation}, ${center}) translate(${shape.point})`
|
|
|
|
return (
|
|
<g
|
|
className={isCurrentParent ? 'tl-shape-group tl-current-parent' : 'tl-shape-group'}
|
|
id={shape.id}
|
|
transform={transform}
|
|
{...events}
|
|
>
|
|
{isEditing && utils.isEditableText ? (
|
|
<EditingTextShape
|
|
shape={shape}
|
|
isBinding={false}
|
|
isCurrentParent={false}
|
|
isDarkMode={isDarkMode}
|
|
isEditing={true}
|
|
utils={utils}
|
|
/>
|
|
) : (
|
|
<RenderedShape
|
|
shape={shape}
|
|
utils={utils}
|
|
isBinding={isBinding}
|
|
isCurrentParent={isCurrentParent}
|
|
isDarkMode={isDarkMode}
|
|
isEditing={isEditing}
|
|
/>
|
|
)}
|
|
</g>
|
|
)
|
|
}
|
|
)
|