Updates deps, pointerMove event handlers

packages/core/package.json

@@ -29,11 +29,11 @@
   },
   "devDependencies": {
     "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.6",
+    "@types/node": "^16.7.10",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.12.24",
     "eslint": "^7.32.0",
     "react": "^17.0.2",
@@ -41,7 +41,10 @@
     "ts-node": "^10.2.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.21.9",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "lerna": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -49,7 +52,6 @@
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
-    "ismobilejs": "^1.1.1",
     "react-use-gesture": "^9.1.3"
   }
 }

packages/core/src/components/bounds/bounds.tsx

@@ -14,7 +14,7 @@ interface BoundsProps {
 }
 
 export function Bounds({ zoom, bounds, rotation, isLocked }: BoundsProps): JSX.Element {
-  const size = (Utils.isMobile() ? 10 : 8) / zoom // Touch target size
+  const size = (Utils.isMobileSize() ? 10 : 8) / zoom // Touch target size
   const center = Utils.getBoundsCenter(bounds)
 
   return (

packages/core/src/hooks/useBoundsEvents.tsx

@@ -41,8 +41,6 @@ export function useBoundsEvents() {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
-
       if (inputs.pointer && e.pointerId !== inputs.pointer.pointerId) return
 
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {

packages/core/src/hooks/useBoundsHandleEvents.tsx

@@ -42,7 +42,6 @@ export function useBoundsHandleEvents(id: TLBoundsCorner | TLBoundsEdge | 'rotat
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         callbacks.onDragBoundsHandle?.(inputs.pointerMove(e, id), e)
       }

packages/core/src/hooks/useCanvasEvents.tsx

@@ -21,7 +21,6 @@ export function useCanvasEvents() {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         const info = inputs.pointerMove(e, 'canvas')
         callbacks.onDragCanvas?.(info, e)

packages/core/src/hooks/useHandleEvents.tsx

@@ -41,7 +41,6 @@ export function useHandleEvents(id: string) {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         const info = inputs.pointerMove(e, id)
         callbacks.onDragHandle?.(info, e)

packages/core/src/hooks/useSafariFocusOutFix.tsx

@@ -12,7 +12,7 @@ export function useSafariFocusOutFix(): void {
       callbacks.onBlurEditingShape?.()
     }
 
-    if (Utils.isMobile()) {
+    if (Utils.isMobileSafari()) {
       document.addEventListener('focusout', handleFocusOut)
       return () => document.removeEventListener('focusout', handleFocusOut)
     }

packages/core/src/hooks/useShapeEvents.tsx

@@ -66,7 +66,6 @@ export function useShapeEvents(id: string, disable = false) {
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
       if (disable) return
-      e.stopPropagation()
 
       if (inputs.pointer && e.pointerId !== inputs.pointer.pointerId) return
 

packages/core/src/utils/utils.ts

@@ -4,7 +4,6 @@
 /* eslint-disable no-redeclare */
 import type React from 'react'
 import deepmerge from 'deepmerge'
-import isMobilePkg from 'ismobilejs'
 import { TLBezierCurveSegment, TLBounds, TLBoundsCorner, TLBoundsEdge } from '../types'
 import vec from './vec'
 import './polyfills'
@@ -1664,8 +1663,17 @@ left past the initial left edge) then swap points on that axis.
   /*                   Browser and DOM                  */
   /* -------------------------------------------------- */
 
-  static isMobile() {
+  static isMobileSize() {
-    return isMobilePkg().any
+    if (typeof window === 'undefined') return false
+    return window.innerWidth < 768
+  }
+
+  static isMobileSafari() {
+    if (typeof window === 'undefined') return false
+    const ua = window.navigator.userAgent
+    const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i)
+    const webkit = !!ua.match(/WebKit/i)
+    return iOS && webkit && !ua.match(/CriOS/i)
   }
 
   // via https://github.com/bameyrick/throttle-typescript

packages/tldraw/package.json

@@ -28,13 +28,12 @@
     "docs": "typedoc --entryPoints src/index.ts"
   },
   "devDependencies": {
-    "@tldraw/core": "*",
     "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.6",
+    "@types/node": "^16.7.10",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/parser": "^4.30.0",
     "esbuild": "^0.12.24",
     "eslint": "^7.32.0",
     "react": "^17.0.2",
@@ -42,7 +41,10 @@
     "ts-node": "^10.2.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.21.9",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "lerna": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -59,7 +61,6 @@
     "@radix-ui/react-tooltip": "^0.0.20",
     "@stitches/react": "^0.2.3",
     "@tldraw/core": "^0.0.57",
-    "ismobilejs": "^1.1.1",
     "perfect-freehand": "^0.5.3",
     "react-hotkeys-hook": "^3.4.0",
     "rko": "^0.5.19"

packages/tldraw/src/components/context-menu/context-menu.tsx

@@ -125,10 +125,6 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem
     tlstate.redo()
   }, [tlstate])
 
-  if (Utils.isMobile()) {
-    return <>{children}</>
-  }
-
   return (
     <ContextMenuRoot>
       <RadixContextMenu.Trigger>{children}</RadixContextMenu.Trigger>

packages/tldraw/src/components/shared/kbd.tsx

@@ -17,7 +17,6 @@ export function Kbd({
   variant: 'tooltip' | 'menu'
   children: string
 }): JSX.Element | null {
-  if (Utils.isMobile()) return null
   return (
     <StyledKbd variant={variant}>
       {children

packages/tldraw/src/components/style-panel/style-panel.tsx

@@ -49,7 +49,7 @@ export function StylePanel(): JSX.Element {
   )
 }
 
-const showKbds = !Utils.isMobile()
+const showKbds = !Utils.isMobileSize()
 
 const selectedShapesCountSelector = (s: Data) =>
   s.document.pageStates[s.appState.currentPageId].selectedIds.length

packages/www/next.config.js

@@ -1,7 +1,5 @@
-const withTM = require('next-transpile-modules')(['@tldraw/tldraw'])
+module.exports = {
-
-module.exports = withTM({
   reactStrictMode: true,
   webpack5: true,
   symlinks: false,
-})
+}

packages/www/package.json

@@ -20,20 +20,28 @@
   "dependencies": {
     "@stitches/react": "^0.2.3",
     "@tldraw/tldraw": "^0.0.57",
-    "idb": "^6.1.2",
     "next": "^11.1.0",
-    "next-transpile-modules": "^8.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@types/jest": "^27.0.1",
-    "@types/jest": "^26.0.23",
+    "@types/node": "^16.7.10",
-    "@types/node": "^14.14.25",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
-    "eslint": "7.32.0",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "eslint-config-next": "11.0.1",
+    "@typescript-eslint/parser": "^4.30.0",
-    "typescript": "^4.3.5"
+    "esbuild": "^0.12.24",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "ts-node": "^10.2.1",
+    "tslib": "^2.3.1",
+    "typedoc": "^0.21.9",
+    "typescript": "^4.4.2",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "lerna": "^4.0.0"
   }
 }