feat: add dev tools for renderer

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'