wip: performance enhancements

tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx

@@ -30,7 +30,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
     if (!elm) return
     const size = rSize.current ?? [0, 0]
     const [x, y] = getContextBarTranslation(size, offsets)
-    elm.style.setProperty('transform', `translateX(${x}px) translateY(${y}px)`)
+    elm.style.transform = `translateX(${x}px) translateY(${y}px)`
   }, [offsets])
 
   if (!app) return null

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -140,7 +140,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     return this.props.blockType === 'B' ? this.props.compact : this.props.collapsed
   }
 
-  @action setCollapsed = async (collapsed: boolean) => {
+  @action toggleCollapsed = async () => {
+    const collapsed = !this.collapsed
     if (this.props.blockType === 'B') {
       this.update({ compact: collapsed })
       this.canResize[1] = !collapsed
@@ -311,6 +312,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         <div
           className="absolute inset-0 tl-logseq-cp-container-bg"
           style={{
+            textRendering: app.viewport.camera.zoom < 0.5 ? 'optimizeSpeed' : 'auto',
             background:
               fill && fill !== 'var(--ls-secondary-background-color)'
                 ? `var(--ls-highlight-color-${fill})`
@@ -509,7 +511,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                 active={!!this.collapsed}
                 style={{ opacity: isSelected ? 1 : 0 }}
                 icon={this.props.blockType === 'B' ? 'block' : 'page'}
-                onClick={() => this.setCollapsed(!this.collapsed)}
+                onClick={this.toggleCollapsed}
                 otherIcon={'whiteboard-element'}
               />
             </>

tldraw/packages/react/src/components/HTMLLayer/HTMLLayer.tsx

@@ -2,6 +2,7 @@ import { autorun } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { useRendererContext } from '../../hooks'
+import { useApp } from '@tldraw/react'
 
 interface HTMLLayerProps {
   children: React.ReactNode
@@ -9,26 +10,32 @@ interface HTMLLayerProps {
 
 export const HTMLLayer = observer(function HTMLLayer({ children }: HTMLLayerProps) {
   const rLayer = React.useRef<HTMLDivElement>(null)
+  const app = useApp()
 
   const { viewport } = useRendererContext()
+  const layer = rLayer.current
+
+  const { zoom, point } = viewport.camera
 
   React.useEffect(
-    () =>
-      autorun(() => {
-        const layer = rLayer.current
+    () => {
         if (!layer) return
 
-        const { zoom, point } = viewport.camera
-        layer.style.setProperty(
-          'transform',
-          `scale(${zoom}) translate3d(${point[0]}px, ${point[1]}px, 0)`
-        )
-      }),
-    []
+        let transform = 'scale('
+        transform += zoom
+        transform += ') translateX('
+        transform += point[0]
+        transform += 'px) translateY('
+        transform += point[1]
+        transform += 'px)'
+
+        layer.style.transform = transform
+      },
+    [zoom, point, layer]
   )
 
   return (
-    <div ref={rLayer} className="tl-absolute tl-layer">
+    <div ref={rLayer} className="tl-absolute tl-layer" style={{willChange: 'transform',  textRendering: viewport.camera.zoom < 0.5 ? 'optimizeSpeed' : 'auto'}}>
       {children}
     </div>
   )

tldraw/packages/react/src/components/SVGLayer/SVGLayer.tsx

@@ -19,16 +19,21 @@ export const SVGLayer = observer(function SVGLayer({ children }: SVGLayerProps)
         if (!group) return
 
         const { zoom, point } = viewport.camera
-        group.style.setProperty(
-          'transform',
-          `scale(${zoom}) translateX(${point[0]}px) translateY(${point[1]}px)`
-        )
+        let transform = 'scale('
+        transform += zoom
+        transform += ') translateX('
+        transform += point[0]
+        transform += 'px) translateY('
+        transform += point[1]
+        transform += 'px)'
+
+        group.style.transform = transform
       }),
     []
   )
 
   return (
-    <svg className="tl-absolute tl-overlay" pointerEvents="none">
+    <svg className="tl-absolute tl-overlay" pointerEvents="none" style={{shapeRendering: 'optimizeSpeed', textRendering: viewport.camera.zoom < 0.5 ? 'optimizeSpeed' : 'auto'}}>
       <g ref={rGroup} pointerEvents="none">
         {children}
       </g>

tldraw/packages/react/src/components/ui/DirectionIndicator/DirectionIndicator.tsx

@@ -28,10 +28,7 @@ export const DirectionIndicator = observer(function DirectionIndicator<
       const int = intersectRayLineSegment(center, direction, A, B)
       if (!int.didIntersect) continue
       const point = int.points[0]
-      elm.style.setProperty(
-        'transform',
-        `translate(${point[0] - 6}px,${point[1] - 6}px) rotate(${Vec.toAngle(direction)}rad)`
-      )
+      elm.style.transform = `translate(${point[0] - 6}px,${point[1] - 6}px) rotate(${Vec.toAngle(direction)}rad)`
     }
   }, [direction, bounds])
   return (

tldraw/packages/react/src/hooks/useCursor.ts

@@ -1,6 +1,8 @@
 import { GeomUtils, TLCursor } from '@tldraw/core'
+import { useApp } from './useApp'
 import * as React from 'react'
 
+
 function getCursorCss(svg: string, r: number, f = false) {
   return (
     `url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'><g fill='none' style='transform-origin:center center' transform='rotate(${r})${
@@ -43,9 +45,11 @@ const CURSORS: Record<TLCursor, (r: number, f?: boolean) => string> = {
 }
 
 export function useCursor(ref: React.RefObject<HTMLDivElement>, cursor: TLCursor, rotation = 0) {
+  const app = useApp()
+
   React.useEffect(() => {
     const elm = ref.current
-    if (!elm) return
+    if (!elm || app.currentState.id === 'move') return
     elm.style.setProperty('--tl-cursor', CURSORS[cursor](GeomUtils.radiansToDegrees(rotation)))
   }, [cursor, rotation])
 }