PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Updates deps, pointerMove event handlers

Browse source
This commit is contained in:
Steve Ruiz 2021-09-04 11:32:33 +01:00
parent 9c64996bd8
commit 87ffff5097
16 changed files with 2124 additions and 552 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/core/package.json
View file

@ -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/parser": "^4.29.3",
"@typescript-eslint/eslint-plugin": "^4.30.0",
"@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"
}
}
}

2
packages/core/src/components/bounds/bounds.tsx
View file

@ -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 (

2
packages/core/src/hooks/useBoundsEvents.tsx
View file

@ -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)) {

1
packages/core/src/hooks/useBoundsHandleEvents.tsx
View file

@ -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)
}

1
packages/core/src/hooks/useCanvasEvents.tsx
View file

@ -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)

1
packages/core/src/hooks/useHandleEvents.tsx
View file

@ -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)

2
packages/core/src/hooks/useSafariFocusOutFix.tsx
View file

@ -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)
}

1
packages/core/src/hooks/useShapeEvents.tsx
View file

@ -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

14
packages/core/src/utils/utils.ts
View file

@ -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() {
return isMobilePkg().any
static isMobileSize() {
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

15
packages/tldraw/package.json
View file

@ -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/parser": "^4.29.3",
"@typescript-eslint/eslint-plugin": "^4.30.0",
"@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,9 +61,8 @@
"@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"
}
}
}

4
packages/tldraw/src/components/context-menu/context-menu.tsx
View file

@ -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>

1
packages/tldraw/src/components/shared/kbd.tsx
View file

@ -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

2
packages/tldraw/src/components/style-panel/style-panel.tsx
View file

@ -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

6
packages/www/next.config.js
View file

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

26
packages/www/package.json
View file

@ -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": "^26.0.23",
"@types/node": "^14.14.25",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.10",
"@types/react": "^17.0.16",
"@types/react-dom": "^17.0.9",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"typescript": "^4.3.5"
"@typescript-eslint/eslint-plugin": "^4.30.0",
"@typescript-eslint/parser": "^4.30.0",
"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"
}
}
}

2584
yarn.lock
View file

File diff suppressed because it is too large Load diff