chore: deps update & reduce zoom range

tldraw/apps/tldraw-logseq/package.json

@@ -11,28 +11,28 @@
     "dev:vite": "tsup --watch --sourcemap inline"
   },
   "devDependencies": {
-    "@radix-ui/react-icons": "^1.0.3",
+    "@radix-ui/react-icons": "^1.1.1",
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/react": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
-    "@types/node": "^14.14.35",
-    "@types/react": "^16.9.55",
-    "@types/react-dom": "^16.9.9",
+    "@types/node": "^17.0.42",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "autoprefixer": "^10.4.7",
-    "concurrently": "^7.0.0",
-    "esbuild": "^0.13.8",
-    "mobx": "^6.3.7",
-    "mobx-react-lite": "^3.2.2",
-    "perfect-freehand": "^1.0.16",
-    "postcss": "^8.4.13",
-    "react": ">=16.8",
-    "react-dom": "^16.8 || ^17.0",
+    "concurrently": "^7.2.1",
+    "esbuild": "^0.14.43",
+    "mobx": "^6.6.0",
+    "mobx-react-lite": "^3.4.0",
+    "perfect-freehand": "^1.1.0",
+    "postcss": "^8.4.14",
+    "react": ">=18.1.0",
+    "react-dom": "^18.1.0",
     "react-select": "^5.3.2",
     "rimraf": "3.0.2",
-    "shadow-cljs": "^2.18.0",
-    "tsup": "^5.12.7",
-    "typescript": "^4.6.0",
-    "zx": "^6.1.0"
+    "shadow-cljs": "^2.19.3",
+    "tsup": "^6.1.2",
+    "typescript": "^4.7.3",
+    "zx": "^6.2.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

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

@@ -10,7 +10,7 @@ export const Minimap = observer(function Minimap() {
   const app = useApp()
 
   const [whiteboardPreviewManager] = React.useState(() => new PreviewManager(app.serialized))
-  const [preview, setPreview] = React.useState(() => whiteboardPreviewManager.getSvg(app.viewport))
+  const [preview, setPreview] = React.useState(() => whiteboardPreviewManager.generatePreviewJsx(app.viewport))
 
   const [active, setActive] = React.useState(false)
 
@@ -27,9 +27,9 @@ export const Minimap = observer(function Minimap() {
       },
       ({ serialized, viewport }, prev) => {
         if (!deepEqual(prev.serialized, serialized)) {
-          whiteboardPreviewManager.deserialize(serialized)
+          whiteboardPreviewManager.load(serialized)
         }
-        setPreview(whiteboardPreviewManager.getSvg(viewport))
+        setPreview(whiteboardPreviewManager.generatePreviewJsx(viewport))
       }
     )
   }, [app])

tldraw/apps/tldraw-logseq/src/lib/preview-manager.tsx

@@ -17,11 +17,11 @@ export class PreviewManager {
   shapes: Shape[] | undefined
   constructor(serializedApp?: TLDocumentModel<Shape>) {
     if (serializedApp) {
-      this.deserialize(serializedApp)
+      this.load(serializedApp)
     }
   }
 
-  deserialize(snapshot: TLDocumentModel) {
+  load(snapshot: TLDocumentModel) {
     const page = snapshot.pages.find(p => snapshot.currentPageId === p.id)
     this.shapes = page?.shapes.map(s => {
       const ShapeClass = getShapeClass(s.type)
@@ -29,7 +29,7 @@ export class PreviewManager {
     })
   }
 
-  getSvg(viewport?: TLViewport) {
+  generatePreviewJsx(viewport?: TLViewport) {
     const allBounds = [...(this.shapes ?? [])?.map(s => s.getRotatedBounds())]
     const vBounds = viewport?.currentView
     if (vBounds) {
@@ -118,8 +118,8 @@ export class PreviewManager {
     return svgElement
   }
 
-  getExportedSVG() {
-    const svgElement = this.getSvg()
+  exportAsSVG() {
+    const svgElement = this.generatePreviewJsx()
     return svgElement ? ReactDOMServer.renderToString(svgElement) : ''
   }
 }

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

@@ -144,7 +144,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
             border: `${strokeWidth}px solid`,
             borderColor: isActivated ? 'var(--tl-selectStroke)' : 'rgb(52, 52, 52)',
             backgroundColor: '#ffffff',
-            boxShadow: isBinding ? '0px 0px 0 16px var(--tl-binding)' : '',
+            boxShadow: isBinding ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)' : '',
           }}
           {...events}
         >

tldraw/package.json

@@ -36,28 +36,28 @@
     "pretty-quick": "pretty-quick"
   },
   "devDependencies": {
-    "@swc-node/jest": "^1.3.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^15.0.1",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@types/vscode": "^1.59.0",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
-    "eslint": "^7.32.0",
-    "fake-indexeddb": "^3.1.3",
-    "init-package-json": "^2.0.4",
-    "jest": "^27.3.1",
-    "lerna": "^3.22.1",
-    "lint-staged": "^11.2.6",
-    "prettier": "^2.4.1",
-    "prettier-plugin-jsdoc": "^0.3.30",
-    "pretty-quick": "^3.1.2",
+    "@swc-node/jest": "^1.5.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.1",
+    "@types/node": "^17.0.42",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "@types/vscode": "^1.68.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "eslint": "^8.17.0",
+    "fake-indexeddb": "^3.1.8",
+    "init-package-json": "^3.0.2",
+    "jest": "^28.1.1",
+    "lerna": "^5.1.1",
+    "lint-staged": "^13.0.1",
+    "prettier": "^2.6.2",
+    "prettier-plugin-jsdoc": "^0.3.38",
+    "pretty-quick": "^3.1.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tslib": "^2.3.0",
-    "typedoc": "^0.22.3",
-    "typescript": "^4.5.2"
+    "tslib": "^2.4.0",
+    "typedoc": "^0.22.17",
+    "typescript": "^4.7.3"
   }
-}
+}

tldraw/packages/core/package.json

@@ -39,13 +39,13 @@
   "dependencies": {
     "@tldraw/intersect": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
-    "@use-gesture/react": "^10.1.3",
+    "@use-gesture/react": "^10.2.15",
     "fast-copy": "^2.1.3",
     "fast-deep-equal": "^3.1.3",
-    "hotkeys-js": "^3.8.7",
+    "hotkeys-js": "^3.9.4",
     "is-plain-object": "^5.0.0",
-    "mobx": "^6.3.8",
-    "mobx-react-lite": "^3.2.2",
+    "mobx": "^6.6.0",
+    "mobx-react-lite": "^3.4.0",
     "mousetrap": "^1.6.5",
     "nanoid": "^3.1.30",
     "rbush": "^3.0.1"

tldraw/packages/core/src/constants.ts

@@ -13,7 +13,7 @@ export const CARDINAL_DIRECTIONS = ['north', 'east', 'south', 'west'] as const
 
 export const FIT_TO_SCREEN_PADDING = 100
 
-export const BINDING_DISTANCE = 16
+export const BINDING_DISTANCE = 4
 
 export const GRID_SIZE = 8
 

tldraw/packages/core/src/index.ts

@@ -1,3 +1,4 @@
 export * from './types'
 export * from './utils'
 export * from './lib'
+export * from './constants'

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

@@ -8,9 +8,9 @@ export class TLViewport {
     makeObservable(this)
   }
 
-  readonly minZoom = 0.1
-  readonly maxZoom = 8
-  readonly zooms = [0.1, 0.25, 0.5, 1, 2, 4, 8]
+  static readonly minZoom = 0.25
+  static readonly maxZoom = 4
+  static readonly zooms = [0.25, 0.5, 1, 2, 4]
 
   /* ------------------- Properties ------------------- */
 
@@ -84,7 +84,8 @@ export class TLViewport {
   }
 
   zoomIn = (): this => {
-    const { camera, bounds, zooms } = this
+    const zooms = TLViewport.zooms
+    const { camera, bounds } = this
     let zoom: number | undefined
     for (let i = 1; i < zooms.length; i++) {
       const z1 = zooms[i - 1]
@@ -101,7 +102,8 @@ export class TLViewport {
   }
 
   zoomOut = (): this => {
-    const { camera, bounds, zooms } = this
+    const zooms = TLViewport.zooms
+    const { camera, bounds } = this
     let zoom: number | undefined
     for (let i = zooms.length - 1; i > 0; i--) {
       const z1 = zooms[i - 1]
@@ -135,8 +137,11 @@ export class TLViewport {
       (bounds.height - FIT_TO_SCREEN_PADDING) / height
     )
     zoom = Math.min(
-      this.maxZoom,
-      Math.max(this.minZoom, camera.zoom === zoom || camera.zoom < 1 ? Math.min(1, zoom) : zoom)
+      TLViewport.maxZoom,
+      Math.max(
+        TLViewport.minZoom,
+        camera.zoom === zoom || camera.zoom < 1 ? Math.min(1, zoom) : zoom
+      )
     )
     const delta = [
       (bounds.width - width * zoom) / 2 / zoom,

tldraw/packages/react/package.json

@@ -40,11 +40,11 @@
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/intersect": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
-    "@use-gesture/react": "^10.1.3",
-    "hotkeys-js": "^3.8.7",
+    "@use-gesture/react": "^10.2.15",
+    "hotkeys-js": "^3.9.4",
     "is-plain-object": "^5.0.0",
-    "mobx": "^6.3.8",
-    "mobx-react-lite": "^3.2.2",
+    "mobx": "^6.6.0",
+    "mobx-react-lite": "^3.4.0",
     "mousetrap": "^1.6.5",
     "nanoid": "^3.1.30",
     "rbush": "^3.0.1"

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

@@ -3,7 +3,7 @@ import type { Handler, WebKitGestureEvent } from '@use-gesture/core/types'
 import { useGesture } from '@use-gesture/react'
 import * as React from 'react'
 import { useRendererContext } from '~hooks'
-import { TLTargetType } from '@tldraw/core'
+import { TLTargetType, TLViewport } from '@tldraw/core'
 
 type PinchHandler = Handler<
   'pinch',
@@ -93,8 +93,12 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
     target: ref,
     eventOptions: { passive: false },
     pinch: {
-      from: viewport.camera.zoom,
-      scaleBounds: () => ({ from: viewport.camera.zoom, max: 8, min: 0.1 }),
+      from: [viewport.camera.zoom, viewport.camera.zoom],
+      scaleBounds: () => ({
+        from: viewport.camera.zoom,
+        max: TLViewport.maxZoom,
+        min: TLViewport.minZoom,
+      }),
     },
   })
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import type { TLTheme } from '@tldraw/core'
+import { BINDING_DISTANCE, TLTheme } from '@tldraw/core'
 
 const styles = new Map<string, HTMLStyleElement>()
 
@@ -71,7 +71,7 @@ const defaultTheme: TLTheme = {
   brushStroke: 'rgba(0,0,0,.25)',
   selectStroke: 'rgb(66, 133, 244)',
   selectFill: 'rgba(65, 132, 244, 0.05)',
-  binding: 'rgba(65, 55, 55, 0.05)',
+  binding: 'rgba(65, 132, 244, 0.5)',
   background: 'rgb(248, 249, 250)',
   foreground: 'rgb(51, 51, 51)',
   grid: 'rgba(144, 144, 144, .9)',
@@ -117,6 +117,7 @@ const tlcss = css`
     --tl-scale: calc(1 / var(--tl-zoom));
     --tl-padding: 64px;
     --tl-shadow-color: 0deg 0% 0%;
+    --tl-binding-distance: ${BINDING_DISTANCE}px;
     --tl-shadow-elevation-low: 0px 0.4px 0.5px hsl(var(--tl-shadow-color) / 0.04),
       0px 0.6px 0.8px -0.7px hsl(var(--tl-shadow-color) / 0.06),
       0.1px 1.2px 1.5px -1.4px hsl(var(--tl-shadow-color) / 0.08);