Cleans up shapes
This commit is contained in:
parent
d66007b142
commit
652681f077
4 changed files with 46 additions and 40 deletions
|
@ -1,11 +1,11 @@
|
|||
import * as React from 'react'
|
||||
import type { IShapeTreeNode, TLBinding, TLPage, TLPageState, TLShape } from '+types'
|
||||
import { Shape as ShapeComponent } from './shape'
|
||||
import { useShapeTree, useHandles, useRenderOnResize, useTLContext } from '../hooks'
|
||||
import type { TLBinding, TLPage, TLPageState, TLShape } from '+types'
|
||||
import { useSelection, useShapeTree, useHandles, useRenderOnResize, useTLContext } from '+hooks'
|
||||
import { Bounds } from './bounds'
|
||||
import { BoundsBg } from './bounds/bounds-bg'
|
||||
import { useSelection } from '../hooks'
|
||||
import { Handles } from './handles'
|
||||
import { ShapeIndicator } from './shape-indicator'
|
||||
import { ShapeNode } from './shape'
|
||||
|
||||
interface PageProps<T extends TLShape> {
|
||||
page: TLPage<T, TLBinding>
|
||||
|
@ -65,38 +65,3 @@ export function Page<T extends TLShape>({
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ShapeIndicator = React.memo(
|
||||
({ shape, variant }: { shape: TLShape; variant: 'selected' | 'hovered' }) => {
|
||||
const { shapeUtils } = useTLContext()
|
||||
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={variant === 'selected' ? 'tl-selected' : 'tl-hovered'} transform={transform}>
|
||||
{shapeUtils[shape.type].renderIndicator(shape)}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
const ShapeNode = React.memo(
|
||||
({ shape, children, isEditing, isDarkMode, isBinding, isCurrentParent }: IShapeTreeNode) => {
|
||||
return (
|
||||
<>
|
||||
<ShapeComponent
|
||||
shape={shape}
|
||||
isEditing={isEditing}
|
||||
isDarkMode={isDarkMode}
|
||||
isBinding={isBinding}
|
||||
isCurrentParent={isCurrentParent}
|
||||
/>
|
||||
{children &&
|
||||
children.map((childNode) => <ShapeNode key={childNode.shape.id} {...childNode} />)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
|
20
packages/core/src/components/shape-indicator.tsx
Normal file
20
packages/core/src/components/shape-indicator.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import * as React from 'react'
|
||||
import type { TLShape } from '+types'
|
||||
import { useTLContext } from '+hooks'
|
||||
|
||||
export const ShapeIndicator = React.memo(
|
||||
({ shape, variant }: { shape: TLShape; variant: 'selected' | 'hovered' }) => {
|
||||
const { shapeUtils } = useTLContext()
|
||||
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={variant === 'selected' ? 'tl-selected' : 'tl-hovered'} transform={transform}>
|
||||
{shapeUtils[shape.type].renderIndicator(shape)}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
)
|
|
@ -1 +1 @@
|
|||
export * from './shape'
|
||||
export * from './shape-node'
|
||||
|
|
21
packages/core/src/components/shape/shape-node.tsx
Normal file
21
packages/core/src/components/shape/shape-node.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import * as React from 'react'
|
||||
import type { IShapeTreeNode } from '+types'
|
||||
import { Shape } from './shape'
|
||||
|
||||
export const ShapeNode = React.memo(
|
||||
({ shape, children, isEditing, isDarkMode, isBinding, isCurrentParent }: IShapeTreeNode) => {
|
||||
return (
|
||||
<>
|
||||
<Shape
|
||||
shape={shape}
|
||||
isEditing={isEditing}
|
||||
isDarkMode={isDarkMode}
|
||||
isBinding={isBinding}
|
||||
isCurrentParent={isCurrentParent}
|
||||
/>
|
||||
{children &&
|
||||
children.map((childNode) => <ShapeNode key={childNode.shape.id} {...childNode} />)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
Loading…
Reference in a new issue