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
Show stats 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) {

1
components/code-panel/code-panel.tsx
View file

@ -130,6 +130,7 @@ export default function CodePanel(): JSX.Element {
return (
<Panel.Root
dir="ltr"
bp={{ '@initial': 'mobile', '@sm': 'small' }}
data-bp-desktop
ref={rContainer}

1
components/controls-panel/controls-panel.tsx
View file

@ -18,6 +18,7 @@ export default function ControlPanel(): JSX.Element {
return (
<Panel.Root
dir="ltr"
data-bp-desktop
ref={rContainer}
isOpen={isOpen}

5
components/page-panel/page-panel.tsx
View file

@ -29,6 +29,7 @@ export default function PagePanel(): JSX.Element {
return (
<DropdownMenu.Root
dir="ltr"
open={isOpen}
onOpenChange={(isOpen) => {
if (rIsOpen.current !== isOpen) {
@ -36,7 +37,7 @@ export default function PagePanel(): JSX.Element {
}
}}
>
<PanelRoot>
<PanelRoot dir="ltr">
<DropdownMenu.Trigger
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}
@ -55,7 +56,7 @@ export default function PagePanel(): JSX.Element {
}}
>
{sorted.map(({ id, name }) => (
<ContextMenu.Root key={id}>
<ContextMenu.Root dir="ltr" key={id}>
<ContextMenu.Trigger>
<StyledRadioItem
key={id}

2
components/style-panel/color-picker.tsx
View file

@ -12,7 +12,7 @@ interface Props {
export default function ColorPicker({ color, onChange }: Props): JSX.Element {
return (
<DropdownMenu.Root>
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}

1
components/style-panel/is-filled-picker.tsx
View file

@ -15,6 +15,7 @@ export default function IsFilledPicker({
}: Props): JSX.Element {
return (
<Checkbox.Root
dir="ltr"
as={RowButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}
checked={isFilled}

2
components/style-panel/quick-color-select.tsx
View file

@ -10,7 +10,7 @@ export default function QuickColorSelect(): JSX.Element {
const color = useSelector((s) => s.values.selectedStyle.color)
return (
<DropdownMenu.Root>
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger
as={IconButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}

2
components/style-panel/quick-dash-select.tsx
View file

@ -21,7 +21,7 @@ export default function QuickdashSelect(): JSX.Element {
const dash = useSelector((s) => s.values.selectedStyle.dash)
return (
<DropdownMenu.Root>
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger
as={IconButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}

2
components/style-panel/quick-size-select.tsx
View file

@ -16,7 +16,7 @@ export default function QuickSizeSelect(): JSX.Element {
const size = useSelector((s) => s.values.selectedStyle.size)
return (
<DropdownMenu.Root>
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger
as={IconButton}
bp={{ '@initial': 'mobile', '@sm': 'small' }}

71
components/style-panel/style-panel.tsx
View file

@ -36,12 +36,28 @@ import QuickSizeSelect from './quick-size-select'
import QuickdashSelect from './quick-dash-select'
import Tooltip from 'components/tooltip'
const breakpoints = { '@initial': 'mobile', '@sm': 'small' } as any
const handleStylePanelOpen = () => state.send('TOGGLED_STYLE_PANEL_OPEN')
const handleColorChange = (color) => state.send('CHANGED_STYLE', { color })
const handleRotateCcw = () => () => state.send('ROTATED_CCW')
const handleIsFilledChange = (dash) => state.send('CHANGED_STYLE', { dash })
const handleDuplicate = () => state.send('DUPLICATED')
const handleHide = () => state.send('TOGGLED_SHAPE_HIDE')
const handleLock = () => state.send('TOGGLED_SHAPE_LOCK')
const handleAspectLock = () => state.send('TOGGLED_SHAPE_ASPECT_LOCK')
const handleMoveToBack = () => state.send('MOVED', { type: MoveType.ToBack })
const handleMoveBackward = () =>
state.send('MOVED', { type: MoveType.Backward })
const handleMoveForward = () => state.send('MOVED', { type: MoveType.Forward })
const handleMoveToFront = () => state.send('MOVED', { type: MoveType.ToFront })
const handleDelete = () => state.send('DELETED')
export default function StylePanel(): JSX.Element {
const rContainer = useRef<HTMLDivElement>(null)
const isOpen = useSelector((s) => s.data.settings.isStyleOpen)
return (
<StylePanelRoot ref={rContainer} isOpen={isOpen}>
<StylePanelRoot dir="ltr" ref={rContainer} isOpen={isOpen}>
{isOpen ? (
<SelectedShapeStyles />
) : (
@ -50,10 +66,10 @@ export default function StylePanel(): JSX.Element {
<QuickSizeSelect />
<QuickdashSelect />
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
title="Style"
size="small"
onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
onClick={handleStylePanelOpen}
>
<Tooltip label="More">
<ChevronDown />
@ -99,21 +115,18 @@ function SelectedShapeStyles(): JSX.Element {
<Panel.Header side="right">
<h3>Style</h3>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
size="small"
onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
onClick={handleStylePanelOpen}
>
<X />
</IconButton>
</Panel.Header>
<Content>
<ColorPicker
color={commonStyle.color}
onChange={(color) => state.send('CHANGED_STYLE', { color })}
/>
<ColorPicker color={commonStyle.color} onChange={handleColorChange} />
<IsFilledPicker
isFilled={commonStyle.isFilled}
onChange={(isFilled) => state.send('CHANGED_STYLE', { isFilled })}
onChange={handleIsFilledChange}
/>
<Row>
<label htmlFor="size">Size</label>
@ -125,10 +138,10 @@ function SelectedShapeStyles(): JSX.Element {
</Row>
<ButtonsRow>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('DUPLICATED')}
onClick={handleDuplicate}
>
<Tooltip label="Duplicate">
<CopyIcon />
@ -138,7 +151,7 @@ function SelectedShapeStyles(): JSX.Element {
<IconButton
disabled={!hasSelection}
size="small"
onClick={() => state.send('ROTATED_CCW')}
onClick={handleRotateCcw}
>
<Tooltip label="Rotate">
<RotateCounterClockwiseIcon />
@ -146,10 +159,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_HIDE')}
onClick={handleHide}
>
<Tooltip label="Toogle Hidden">
{isAllHidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
@ -157,10 +170,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_LOCK')}
onClick={handleLock}
>
<Tooltip label="Toogle Locked">
{isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
@ -168,10 +181,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_ASPECT_LOCK')}
onClick={handleAspectLock}
>
<Tooltip label="Toogle Aspect Ratio Lock">
{isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
@ -180,10 +193,10 @@ function SelectedShapeStyles(): JSX.Element {
</ButtonsRow>
<ButtonsRow>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('MOVED', { type: MoveType.ToBack })}
onClick={handleMoveToBack}
>
<Tooltip label="Move to Back">
<PinBottomIcon />
@ -191,10 +204,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('MOVED', { type: MoveType.Backward })}
onClick={handleMoveBackward}
>
<Tooltip label="Move Backward">
<ArrowDownIcon />
@ -202,10 +215,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('MOVED', { type: MoveType.Forward })}
onClick={handleMoveForward}
>
<Tooltip label="Move Forward">
<ArrowUpIcon />
@ -213,10 +226,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('MOVED', { type: MoveType.ToFront })}
onClick={handleMoveToFront}
>
<Tooltip label="More to Front">
<PinTopIcon />
@ -224,10 +237,10 @@ function SelectedShapeStyles(): JSX.Element {
</IconButton>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
bp={breakpoints}
disabled={!hasSelection}
size="small"
onClick={() => state.send('DELETED')}
onClick={handleDelete}
>
<Tooltip label="Delete">
<Trash2 size="15" />