PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improves performance issue caused by @radix-ui/use-direction

Browse source
This commit is contained in:
Steve Ruiz 2021-06-27 20:19:57 +01:00
parent 1e8cba347d
commit 9f16f886ea
11 changed files with 60 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/canvas/context-menu/context-menu.tsx
View file

@ -96,7 +96,7 @@ export default function ContextMenu({
const hasThreeOrMore = selectedShapeIds.length > 2
return (
<_ContextMenu.Root>
<_ContextMenu.Root dir="ltr">
<_ContextMenu.Trigger>{children}</_ContextMenu.Trigger>
<StyledContent ref={rContent} isMobile={isMobile()}>
{selectedShapeIds.length ? (
@ -342,7 +342,7 @@ function SubMenu({
children: React.ReactNode
}) {
return (
<_ContextMenu.Root>
<_ContextMenu.Root dir="ltr">
<_ContextMenu.TriggerItem
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}
@ -367,7 +367,7 @@ function AlignDistributeSubMenu({
hasThreeOrMore: boolean
}) {
return (
<_ContextMenu.Root>
<_ContextMenu.Root dir="ltr">
<_ContextMenu.TriggerItem
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}
@ -451,7 +451,7 @@ function MoveToPageMenu() {
if (sorted.length === 0) return null
return (
<_ContextMenu.Root>
<_ContextMenu.Root dir="ltr">
<_ContextMenu.TriggerItem
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}

16
components/canvas/shape.tsx
View file

@ -3,8 +3,8 @@ import { useSelector } from 'state'
import styled from 'styles'
import { getShapeUtils } from 'state/shape-utils'
import { getPage, getSelectedIds, isMobile } from 'utils'
import { Shape as _Shape } from 'types'
import useShapeEvents from 'hooks/useShapeEvents'
import { Shape as _Shape } from 'types'
import vec from 'utils/vec'
import { getShapeStyle } from 'state/shape-styles'
@ -83,7 +83,7 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps): JSX.Element {
as="use"
href={'#' + id}
strokeWidth={+style.strokeWidth + 5}
variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
variant={shapeUtils.canStyleFill ? 'filled' : 'hollow'}
/>
)}
</>
@ -93,13 +93,7 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps): JSX.Element {
(isForeignObject ? (
shapeUtils.render(shape, { isEditing, ref: rFocusable })
) : (
<RealShape
isParent={isParent}
id={id}
shape={shape}
style={style}
isEditing={isEditing}
/>
<RealShape id={id} isParent={isParent} shape={shape} />
))}
{isParent &&
@ -117,10 +111,8 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps): JSX.Element {
interface RealShapeProps {
id: string
style: Partial<React.SVGProps<SVGUseElement>>
isParent: boolean
shape: _Shape
isEditing: boolean
isParent: boolean
}
const RealShape = memo(function RealShape({ id, isParent }: RealShapeProps) {