feat: add dev tools for renderer

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -97,8 +97,9 @@ export const App = function App(props: LogseqTldrawProps): JSX.Element {
         {...props}
       >
         <div className="logseq-tldraw logseq-tldraw-wrapper">
-          <AppCanvas components={components} />
-          <AppUI />
+          <AppCanvas components={components}>
+            <AppUI />
+          </AppCanvas>
         </div>
       </AppProvider>
     </LogseqContext.Provider>

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

@@ -3,12 +3,16 @@ import { observer } from 'mobx-react-lite'
 import { ToolBar } from './Toolbar'
 import { StatusBar } from './StatusBar'
 import { PrimaryTools } from './PrimaryTools'
+import { DevTools } from './Devtools'
+
+const isDev = process.env.NODE_ENV === 'development'
 
 export const AppUI = observer(function AppUI() {
   return (
     <>
       {/* <ToolBar /> */}
-      {/* <StatusBar /> */}
+      {isDev && <StatusBar />}
+      {isDev && <DevTools />}
       <PrimaryTools />
     </>
   )

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

@@ -54,12 +54,9 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
 
   React.useLayoutEffect(() => {
     const elm = rContextBar.current
-    if (!elm || rSize.current) return
+    if (!elm) return
     const { offsetWidth, offsetHeight } = elm
     rSize.current = [offsetWidth, offsetHeight]
-    return () => {
-      rSize.current = null
-    }
   })
 
   React.useLayoutEffect(() => {

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

@@ -0,0 +1,66 @@
+import { useRendererContext } from '@tldraw/react'
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const printPoint = (point: number[]) => {
+  return `[${point.map(d => d.toFixed(2)).join(', ')}]`
+}
+
+export const DevTools = observer(() => {
+  const {
+    viewport: {
+      camera: { point, zoom },
+    },
+    inputs,
+  } = useRendererContext()
+
+  const canvasAnchorRef = React.useRef<HTMLElement | null>()
+  const statusbarAnchorRef = React.useRef<HTMLElement | null>()
+
+  React.useEffect(() => {
+    const canvasAnchor = document.getElementById('tl-dev-tools-canvas-anchor')
+    canvasAnchorRef.current = canvasAnchor
+
+    const statusbarAnchor = document.getElementById('tl-statusbar-anchor')
+    statusbarAnchorRef.current = statusbarAnchor
+  }, [])
+
+  const originPoint = canvasAnchorRef.current
+    ? ReactDOM.createPortal(
+        <svg className="tl-renderer-dev-tools tl-grid">
+          <circle cx={point[0] * zoom} cy={point[1] * zoom} r="4" fill="red" />
+        </svg>,
+        canvasAnchorRef.current
+      )
+    : null
+
+  const rendererStatusText = [
+    ['Z', zoom.toFixed(2)],
+    ['MP', printPoint(inputs.currentPoint)],
+    ['MS', printPoint(inputs.currentScreenPoint)],
+    ['VP', printPoint(point)],
+  ]
+    .map(p => p.join(''))
+    .join('|')
+
+  const rendererStatus = statusbarAnchorRef.current
+    ? ReactDOM.createPortal(
+        <div
+          style={{
+            flex: 1,
+          }}
+        >
+          {rendererStatusText}
+        </div>,
+        statusbarAnchorRef.current
+      )
+    : null
+
+  return (
+    <>
+      {originPoint}
+      {rendererStatus}
+    </>
+  )
+})

tldraw/apps/tldraw-logseq/src/components/Devtools/index.ts

@@ -0,0 +1 @@
+export * from './Devtools'

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

@@ -10,6 +10,8 @@ export const StatusBar = observer(function StatusBar() {
   return (
     <div className="statusbar">
       {app.selectedTool.id} | {app.selectedTool.currentState.id}
+      <div style={{ flex: 1 }} />
+      <div id="tl-statusbar-anchor" />
     </div>
   )
 })

tldraw/apps/tldraw-logseq/src/styles.css

@@ -66,6 +66,7 @@
 
 .logseq-tldraw .statusbar {
   position: absolute;
+  font-family: monospace;
   bottom: 0;
   grid-row: 3;
   width: 100%;

tldraw/packages/core/src/lib/TLSettings.ts

@@ -13,7 +13,7 @@ export class TLSettings implements TLSettingsProps {
   }
 
   @observable mode: 'dark' | 'light' = 'light'
-  @observable showGrid = false
+  @observable showGrid = true
   @observable isToolLocked = false
 
   @action update(props: Partial<TLSettingsProps>): void {

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

@@ -214,6 +214,8 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
             shapes={selectedShapes}
           />
         )}
+
+        <div id="tl-dev-tools-canvas-anchor" />
       </div>
       {children}
     </div>

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

@@ -27,9 +27,7 @@ export function useCounterScaledPosition(
 
     elm.style.setProperty('width', `calc(${Math.floor(bounds.width)}px + 64px * 2)`)
     elm.style.setProperty('height', `calc(${Math.floor(bounds.height)}px + 64px * 2)`)
-
-    elm.style.setProperty('z-index', '10003')
-  }, [bounds.width, bounds.height, zoom])
+  }, [bounds.width, bounds.height])
 
   React.useLayoutEffect(() => {
     const elm = ref.current

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

@@ -56,10 +56,10 @@ export function useResizeObserver<T extends HTMLElement>(
     const scrollingAnchor = ref.current ? getNearestScrollableContainer(ref.current) : document
     const debouncedupdateBounds = debounce(updateBounds, 100)
     scrollingAnchor.addEventListener('scroll', debouncedupdateBounds)
-    scrollingAnchor.addEventListener('resize', debouncedupdateBounds)
+    window.addEventListener('resize', debouncedupdateBounds)
     return () => {
       scrollingAnchor.removeEventListener('scroll', debouncedupdateBounds)
-      scrollingAnchor.removeEventListener('resize', debouncedupdateBounds)
+      window.removeEventListener('resize', debouncedupdateBounds)
     }
   }, [])