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

rename app to editor (#1503)

Browse source 
This PR renames `App`, `app` and all appy names to `Editor`, `editor`,
and editorry names.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Rename `App` to `Editor` and many other things that reference `app` to
`editor`.
This commit is contained in:
Steve Ruiz 2023-06-02 16:21:45 +01:00 • committed by GitHub
parent 640bc9de24
commit 735f1c41b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
311 changed files with 8365 additions and 8209 deletions
Download patch file Download diff file Expand all files Collapse all files

62
packages/editor/src/lib/hooks/useDocumentEvents.ts
View file

@ -2,14 +2,14 @@ import { useEffect } from 'react'
import { useValue } from 'signia-react'
import { TLKeyboardEventInfo, TLPointerEventInfo } from '../app/types/event-types'
import { preventDefault } from '../utils/dom'
import { useApp } from './useApp'
import { useContainer } from './useContainer'
import { useEditor } from './useEditor'
export function useDocumentEvents() {
const app = useApp()
const editor = useEditor()
const container = useContainer()
const isAppFocused = useValue('isFocused', () => app.isFocused, [app])
const isAppFocused = useValue('isFocused', () => editor.isFocused, [editor])
useEffect(() => {
if (!isAppFocused) return
@ -17,7 +17,7 @@ export function useDocumentEvents() {
const handleKeyDown = (e: KeyboardEvent) => {
if (
e.altKey &&
(app.isIn('zoom') || !app.root.path.value.endsWith('.idle')) &&
(editor.isIn('zoom') || !editor.root.path.value.endsWith('.idle')) &&
!isFocusingInput()
) {
// On windows the alt key opens the menu bar.
@ -52,7 +52,7 @@ export function useDocumentEvents() {
break
}
case 'Tab': {
if (isFocusingInput() || app.isMenuOpen) {
if (isFocusingInput() || editor.isMenuOpen) {
return
}
break
@ -60,12 +60,12 @@ export function useDocumentEvents() {
case ',': {
if (!isFocusingInput()) {
preventDefault(e)
if (!app.inputs.keys.has('Comma')) {
const { x, y, z } = app.inputs.currentScreenPoint
if (!editor.inputs.keys.has('Comma')) {
const { x, y, z } = editor.inputs.currentScreenPoint
const {
pageState: { hoveredId },
} = app
app.inputs.keys.add('Comma')
} = editor
editor.inputs.keys.add('Comma')
const info: TLPointerEventInfo = {
type: 'pointer',
@ -76,28 +76,28 @@ export function useDocumentEvents() {
ctrlKey: e.metaKey || e.ctrlKey,
pointerId: 0,
button: 0,
isPen: app.isPenMode,
isPen: editor.isPenMode,
...(hoveredId
? {
target: 'shape',
shape: app.getShapeById(hoveredId)!,
shape: editor.getShapeById(hoveredId)!,
}
: {
target: 'canvas',
}),
}
app.dispatch(info)
editor.dispatch(info)
return
}
}
break
}
case 'Escape': {
if (!app.inputs.keys.has('Escape')) {
app.inputs.keys.add('Escape')
if (!editor.inputs.keys.has('Escape')) {
editor.inputs.keys.add('Escape')
app.cancel()
editor.cancel()
// Pressing escape will focus the document.body,
// which will cause the app to lose focus, which
// will break additional shortcuts. We need to
@ -108,7 +108,7 @@ export function useDocumentEvents() {
return
}
default: {
if (isFocusingInput() || app.isMenuOpen) {
if (isFocusingInput() || editor.isMenuOpen) {
return
}
}
@ -116,7 +116,7 @@ export function useDocumentEvents() {
const info: TLKeyboardEventInfo = {
type: 'keyboard',
name: app.inputs.keys.has(e.code) ? 'key_repeat' : 'key_down',
name: editor.inputs.keys.has(e.code) ? 'key_repeat' : 'key_down',
key: e.key,
code: e.code,
shiftKey: e.shiftKey,
@ -124,27 +124,27 @@ export function useDocumentEvents() {
ctrlKey: e.metaKey || e.ctrlKey,
}
app.dispatch(info)
editor.dispatch(info)
}
const handleKeyUp = (e: KeyboardEvent) => {
if ((e as any).isKilled) return
;(e as any).isKilled = true
if (isFocusingInput() || app.isMenuOpen) {
if (isFocusingInput() || editor.isMenuOpen) {
return
}
// Use the , key to send pointer events
if (e.key === ',') {
if (document.activeElement?.ELEMENT_NODE) preventDefault(e)
if (app.inputs.keys.has(e.code)) {
const { x, y, z } = app.inputs.currentScreenPoint
if (editor.inputs.keys.has(e.code)) {
const { x, y, z } = editor.inputs.currentScreenPoint
const {
pageState: { hoveredId },
} = app
} = editor
app.inputs.keys.delete(e.code)
editor.inputs.keys.delete(e.code)
const info: TLPointerEventInfo = {
type: 'pointer',
@ -155,17 +155,17 @@ export function useDocumentEvents() {
ctrlKey: e.metaKey || e.ctrlKey,
pointerId: 0,
button: 0,
isPen: app.isPenMode,
isPen: editor.isPenMode,
...(hoveredId
? {
target: 'shape',
shape: app.getShapeById(hoveredId)!,
shape: editor.getShapeById(hoveredId)!,
}
: {
target: 'canvas',
}),
}
app.dispatch(info)
editor.dispatch(info)
return
}
}
@ -180,7 +180,7 @@ export function useDocumentEvents() {
ctrlKey: e.metaKey || e.ctrlKey,
}
app.dispatch(info)
editor.dispatch(info)
}
function handleTouchStart(e: TouchEvent) {
@ -196,7 +196,7 @@ export function useDocumentEvents() {
// touchstart event in that case.
if (
touchXPosition - touchXRadius < 10 ||
touchXPosition + touchXRadius > app.viewportScreenBounds.width - 10
touchXPosition + touchXRadius > editor.viewportScreenBounds.width - 10
) {
if ((e.target as HTMLElement)?.tagName === 'BUTTON') {
// Force a click before bailing
@ -216,11 +216,11 @@ export function useDocumentEvents() {
}
function handleBlur() {
app.complete()
editor.complete()
}
function handleFocus() {
app.updateViewportScreenBounds()
editor.updateViewportScreenBounds()
}
container.addEventListener('touchstart', handleTouchStart, { passive: false })
@ -250,7 +250,7 @@ export function useDocumentEvents() {
window.removeEventListener('blur', handleBlur)
window.removeEventListener('focus', handleFocus)
}
}, [app, container, isAppFocused])
}, [editor, container, isAppFocused])
}
const INPUTS = ['input', 'select', 'button', 'textarea']