fix: context bar size

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

@@ -4,7 +4,6 @@ import {
   TLContextBarComponent,
   useApp,
   getContextBarTranslation,
-  useRendererContext,
 } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import type { TextShape, PolygonShape, Shape } from '~lib/shapes'
@@ -12,11 +11,6 @@ import { NumberInput } from '~components/inputs/NumberInput'
 import { ColorInput } from '~components/inputs/ColorInput'
 
 const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets }) => {
-  const {
-    viewport: {
-      camera: { zoom },
-    },
-  } = useRendererContext()
   const app = useApp()
   const rSize = React.useRef<[number, number] | null>(null)
   const rContextBar = React.useRef<HTMLDivElement>(null)
@@ -64,18 +58,9 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets }) => {
     const elm = rContextBar.current
     if (!elm) return
     const size = rSize.current ?? [0, 0]
-    const vpOffsets = {
-      left: offsets.left / zoom,
-      right: offsets.right / zoom,
-      top: offsets.top / zoom,
-      bottom: offsets.bottom / zoom,
-      width: offsets.width / zoom,
-      height: offsets.height / zoom,
-    }
-
-    const [x, y] = getContextBarTranslation(size, { ...vpOffsets, bottom: vpOffsets.bottom - 32 })
+    const [x, y] = getContextBarTranslation(size, { ...offsets, bottom: offsets.bottom - 32 })
     elm.style.setProperty('transform', `translateX(${x}px) translateY(${y}px)`)
-  }, [offsets, zoom])
+  }, [offsets])
 
   if (!app) return null
 

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

@@ -9,13 +9,13 @@ import type { TLSelectionDetailProps } from '~types/component-props'
 import Vec from '@tldraw/vec'
 
 export const SelectionDetail = observer(function SelectionDetail<S extends TLReactShape>({
-  bounds,
+  scaledBounds,
   shapes,
   detail = 'size',
   rotation = 0,
 }: TLSelectionDetailProps<S>) {
   // This is the actual rotation of the bounding box, used to position the detail. Note that when rotating only one shape, the bounds rotation and the rotation shown in the detail will be the same; however, when rotating more than one shape, the bounding box will be axis-aligned, but the detail will show the angle that the bounds has been rotated by.
-  const selectionRotation = shapes.length === 1 ? rotation : bounds.rotation ?? 0
+  const selectionRotation = shapes.length === 1 ? rotation : scaledBounds.rotation ?? 0
   const isFlipped = !(selectionRotation < TAU || selectionRotation > TAU * 3)
   const isLine = shapes.length === 1 && shapes[0].type === 'line'
 
@@ -25,8 +25,10 @@ export const SelectionDetail = observer(function SelectionDetail<S extends TLRea
         className="tl-bounds-detail"
         style={{
           transform: isFlipped
-            ? `rotate(${Math.PI + selectionRotation}rad) translateY(${bounds.height / 2 + 32}px)`
-            : `rotate(${selectionRotation}rad) translateY(${bounds.height / 2 + 24}px)`,
+            ? `rotate(${Math.PI + selectionRotation}rad) translateY(${
+                scaledBounds.height / 2 + 32
+              }px)`
+            : `rotate(${selectionRotation}rad) translateY(${scaledBounds.height / 2 + 24}px)`,
           padding: '2px 3px',
           borderRadius: '1px',
         }}
@@ -37,7 +39,7 @@ export const SelectionDetail = observer(function SelectionDetail<S extends TLRea
               shapes[0].props.handles!.end.point
             ).toFixed()}`
           : detail === 'size'
-          ? `${bounds.width.toFixed()} × ${bounds.height.toFixed()}`
+          ? `${scaledBounds.width.toFixed()} × ${scaledBounds.height.toFixed()}`
           : `∠${GeomUtils.radiansToDegrees(GeomUtils.clampRadians(rotation)).toFixed()}°`}
       </div>
     </HTMLContainer>

tldraw/packages/react/src/hooks/useCounterScaledPosition.tsx

@@ -12,7 +12,8 @@ export function useCounterScaledPosition(
     const elm = ref.current!
     elm.style.transform = `translate(
         calc(${bounds.minX}px - var(--tl-padding)),
-        calc(${bounds.minY}px - var(--tl-padding)))`
+        calc(${bounds.minY}px - var(--tl-padding)))
+        scale(var(--tl-scale))`
   }, [bounds.minX, bounds.minY, rotation, bounds.rotation])
 
   React.useLayoutEffect(() => {