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

[perf] Reinstate render throttling (#3160)

Browse source 
Follow up to #3129 

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK

- [x] `improvement` — Improving existing features



### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.
This commit is contained in:
David Sheldrick 2024-03-15 16:18:23 +00:00 • committed by GitHub
parent 79d6058d3c
commit 8e23a253fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 140 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

40
packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
View file

@ -1,4 +1,4 @@
import { react, track, useQuickReactor, useValue } from '@tldraw/state'
import { react, track, useLayoutReaction, useValue } from '@tldraw/state'
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
import classNames from 'classnames'
@ -41,30 +41,26 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
useGestureEvents(rCanvas)
useFixSafariDoubleTapZoomPencilEvents(rCanvas)
useQuickReactor(
'position layers',
() => {
const htmlElm = rHtmlLayer.current
if (!htmlElm) return
const htmlElm2 = rHtmlLayer2.current
if (!htmlElm2) return
useLayoutReaction('position layers', () => {
const htmlElm = rHtmlLayer.current
if (!htmlElm) return
const htmlElm2 = rHtmlLayer2.current
if (!htmlElm2) return
const { x, y, z } = editor.getCamera()
const { x, y, z } = editor.getCamera()
// Because the html container has a width/height of 1px, we
// need to create a small offset when zoomed to ensure that
// the html container and svg container are lined up exactly.
const offset =
z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
// Because the html container has a width/height of 1px, we
// need to create a small offset when zoomed to ensure that
// the html container and svg container are lined up exactly.
const offset =
z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
x + offset
)}px,${toDomPrecision(y + offset)}px)`
htmlElm.style.setProperty('transform', transform)
htmlElm2.style.setProperty('transform', transform)
},
[editor]
)
const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
x + offset
)}px,${toDomPrecision(y + offset)}px)`
htmlElm.style.setProperty('transform', transform)
htmlElm2.style.setProperty('transform', transform)
})
const events = useCanvasEvents()