rename app to editor (#1503)
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
GitHub
parent
640bc9de24
commit
735f1c41b7
311 changed files with 8365 additions and 8209 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import {
|
||||
ANIMATION_MEDIUM_MS,
|
||||
App,
|
||||
DEFAULT_BOOKMARK_HEIGHT,
|
||||
DEFAULT_BOOKMARK_WIDTH,
|
||||
Editor,
|
||||
getEmbedInfo,
|
||||
openWindow,
|
||||
TLBookmarkUtil,
|
||||
|
|
@ -11,7 +11,7 @@ import {
|
|||
TLShapePartial,
|
||||
TLTextShape,
|
||||
TLTextUtil,
|
||||
useApp,
|
||||
useEditor,
|
||||
} from '@tldraw/editor'
|
||||
import { approximately, Box2d, TAU, Vec2d } from '@tldraw/primitives'
|
||||
import { compact } from '@tldraw/utils'
|
||||
|
|
@ -52,7 +52,11 @@ export const ActionsContext = React.createContext<ActionsContextType>({})
|
|||
|
||||
/** @public */
|
||||
export type ActionsProviderProps = {
|
||||
overrides?: (app: App, actions: ActionsContextType, helpers: undefined) => ActionsContextType
|
||||
overrides?: (
|
||||
editor: Editor,
|
||||
actions: ActionsContextType,
|
||||
helpers: undefined
|
||||
) => ActionsContextType
|
||||
children: any
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +66,7 @@ function makeActions(actions: ActionItem[]) {
|
|||
|
||||
/** @public */
|
||||
export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||
const app = useApp()
|
||||
const editor = useEditor()
|
||||
|
||||
const { addDialog, clearDialogs } = useDialogs()
|
||||
const { clearToasts } = useToasts()
|
||||
|
|
@ -85,7 +89,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('edit-link', { source })
|
||||
app.mark('edit-link')
|
||||
editor.mark('edit-link')
|
||||
addDialog({ component: EditLinkDialog })
|
||||
},
|
||||
},
|
||||
|
|
@ -117,7 +121,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('undo', { source })
|
||||
app.undo()
|
||||
editor.undo()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -128,7 +132,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('redo', { source })
|
||||
app.redo()
|
||||
editor.redo()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -139,7 +143,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('export-as', { format: 'svg', source })
|
||||
exportAs(app.selectedIds, 'svg')
|
||||
exportAs(editor.selectedIds, 'svg')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -150,7 +154,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('export-as', { format: 'png', source })
|
||||
exportAs(app.selectedIds, 'png')
|
||||
exportAs(editor.selectedIds, 'png')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -161,7 +165,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('export-as', { format: 'json', source })
|
||||
exportAs(app.selectedIds, 'json')
|
||||
exportAs(editor.selectedIds, 'json')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -173,7 +177,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('copy-as', { format: 'svg', source })
|
||||
copyAs(app.selectedIds, 'svg')
|
||||
copyAs(editor.selectedIds, 'svg')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -184,7 +188,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('copy-as', { format: 'png', source })
|
||||
copyAs(app.selectedIds, 'png')
|
||||
copyAs(editor.selectedIds, 'png')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -195,7 +199,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('copy-as', { format: 'json', source })
|
||||
copyAs(app.selectedIds, 'json')
|
||||
copyAs(editor.selectedIds, 'json')
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -204,12 +208,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-auto-size', { source })
|
||||
app.mark()
|
||||
app.updateShapes(
|
||||
app.selectedShapes
|
||||
editor.mark()
|
||||
editor.updateShapes(
|
||||
editor.selectedShapes
|
||||
.filter(
|
||||
(shape): shape is TLTextShape =>
|
||||
app.isShapeOfType(shape, TLTextUtil) && shape.props.autoSize === false
|
||||
editor.isShapeOfType(shape, TLTextUtil) && shape.props.autoSize === false
|
||||
)
|
||||
.map((shape) => {
|
||||
return {
|
||||
|
|
@ -231,14 +235,14 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('open-embed-link', { source })
|
||||
const ids = app.selectedIds
|
||||
const ids = editor.selectedIds
|
||||
const warnMsg = 'No embed shapes selected'
|
||||
if (ids.length !== 1) {
|
||||
console.error(warnMsg)
|
||||
return
|
||||
}
|
||||
const shape = app.getShapeById(ids[0])
|
||||
if (!shape || !app.isShapeOfType(shape, TLEmbedUtil)) {
|
||||
const shape = editor.getShapeById(ids[0])
|
||||
if (!shape || !editor.isShapeOfType(shape, TLEmbedUtil)) {
|
||||
console.error(warnMsg)
|
||||
return
|
||||
}
|
||||
|
|
@ -252,13 +256,13 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('convert-to-bookmark', { source })
|
||||
const ids = app.selectedIds
|
||||
const shapes = ids.map((id) => app.getShapeById(id))
|
||||
const ids = editor.selectedIds
|
||||
const shapes = ids.map((id) => editor.getShapeById(id))
|
||||
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!shape || !app.isShapeOfType(shape, TLEmbedUtil) || !shape.props.url) continue
|
||||
if (!shape || !editor.isShapeOfType(shape, TLEmbedUtil) || !shape.props.url) continue
|
||||
|
||||
const newPos = new Vec2d(shape.x, shape.y)
|
||||
newPos.rot(-shape.rotation)
|
||||
|
|
@ -271,7 +275,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
newPos.rot(shape.rotation)
|
||||
|
||||
createList.push({
|
||||
id: app.createShapeId(),
|
||||
id: editor.createShapeId(),
|
||||
type: 'bookmark',
|
||||
rotation: shape.rotation,
|
||||
x: newPos.x,
|
||||
|
|
@ -284,9 +288,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
deleteList.push(shape.id)
|
||||
}
|
||||
|
||||
app.mark('convert shapes to bookmark')
|
||||
app.deleteShapes(deleteList)
|
||||
app.createShapes(createList)
|
||||
editor.mark('convert shapes to bookmark')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -295,13 +299,13 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('convert-to-embed', { source })
|
||||
const ids = app.selectedIds
|
||||
const shapes = compact(ids.map((id) => app.getShapeById(id)))
|
||||
const ids = editor.selectedIds
|
||||
const shapes = compact(ids.map((id) => editor.getShapeById(id)))
|
||||
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!app.isShapeOfType(shape, TLBookmarkUtil)) continue
|
||||
if (!editor.isShapeOfType(shape, TLBookmarkUtil)) continue
|
||||
|
||||
const { url } = shape.props
|
||||
|
||||
|
|
@ -318,7 +322,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
newPos.rot(shape.rotation)
|
||||
|
||||
createList.push({
|
||||
id: app.createShapeId(),
|
||||
id: editor.createShapeId(),
|
||||
type: 'embed',
|
||||
x: newPos.x,
|
||||
y: newPos.y,
|
||||
|
|
@ -333,9 +337,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
deleteList.push(shape.id)
|
||||
}
|
||||
|
||||
app.mark('convert shapes to embed')
|
||||
app.deleteShapes(deleteList)
|
||||
app.createShapes(createList)
|
||||
editor.mark('convert shapes to embed')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -345,21 +349,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
icon: 'duplicate',
|
||||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
if (app.currentToolId !== 'select') return
|
||||
if (editor.currentToolId !== 'select') return
|
||||
trackEvent('duplicate-shapes', { source })
|
||||
const ids = app.selectedIds
|
||||
const commonBounds = Box2d.Common(compact(ids.map((id) => app.getPageBoundsById(id))))
|
||||
const offset = app.canMoveCamera
|
||||
const ids = editor.selectedIds
|
||||
const commonBounds = Box2d.Common(compact(ids.map((id) => editor.getPageBoundsById(id))))
|
||||
const offset = editor.canMoveCamera
|
||||
? {
|
||||
x: commonBounds.width + 10,
|
||||
y: 0,
|
||||
}
|
||||
: {
|
||||
x: 16 / app.zoomLevel,
|
||||
y: 16 / app.zoomLevel,
|
||||
x: 16 / editor.zoomLevel,
|
||||
y: 16 / editor.zoomLevel,
|
||||
}
|
||||
app.mark('duplicate shapes')
|
||||
app.duplicateShapes(ids, offset)
|
||||
editor.mark('duplicate shapes')
|
||||
editor.duplicateShapes(ids, offset)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -370,8 +374,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('ungroup-shapes', { source })
|
||||
app.mark('ungroup')
|
||||
app.ungroupShapes(app.selectedIds)
|
||||
editor.mark('ungroup')
|
||||
editor.ungroupShapes(editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -382,12 +386,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('group-shapes', { source })
|
||||
if (app.selectedShapes.length === 1 && app.selectedShapes[0].type === 'group') {
|
||||
app.mark('ungroup')
|
||||
app.ungroupShapes(app.selectedIds)
|
||||
if (editor.selectedShapes.length === 1 && editor.selectedShapes[0].type === 'group') {
|
||||
editor.mark('ungroup')
|
||||
editor.ungroupShapes(editor.selectedIds)
|
||||
} else {
|
||||
app.mark('group')
|
||||
app.groupShapes(app.selectedIds)
|
||||
editor.mark('group')
|
||||
editor.groupShapes(editor.selectedIds)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -399,8 +403,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'left', source })
|
||||
app.mark('align left')
|
||||
app.alignShapes('left', app.selectedIds)
|
||||
editor.mark('align left')
|
||||
editor.alignShapes('left', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -412,8 +416,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'center-horizontal', source })
|
||||
app.mark('align center horizontal')
|
||||
app.alignShapes('center-horizontal', app.selectedIds)
|
||||
editor.mark('align center horizontal')
|
||||
editor.alignShapes('center-horizontal', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -424,8 +428,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'right', source })
|
||||
app.mark('align right')
|
||||
app.alignShapes('right', app.selectedIds)
|
||||
editor.mark('align right')
|
||||
editor.alignShapes('right', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -437,8 +441,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'center-vertical', source })
|
||||
app.mark('align center vertical')
|
||||
app.alignShapes('center-vertical', app.selectedIds)
|
||||
editor.mark('align center vertical')
|
||||
editor.alignShapes('center-vertical', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -449,8 +453,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'top', source })
|
||||
app.mark('align top')
|
||||
app.alignShapes('top', app.selectedIds)
|
||||
editor.mark('align top')
|
||||
editor.alignShapes('top', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -461,8 +465,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('align-shapes', { operation: 'bottom', source })
|
||||
app.mark('align bottom')
|
||||
app.alignShapes('bottom', app.selectedIds)
|
||||
editor.mark('align bottom')
|
||||
editor.alignShapes('bottom', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -474,8 +478,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('distribute-shapes', { operation: 'horizontal', source })
|
||||
app.mark('distribute horizontal')
|
||||
app.distributeShapes('horizontal', app.selectedIds)
|
||||
editor.mark('distribute horizontal')
|
||||
editor.distributeShapes('horizontal', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -487,8 +491,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('distribute-shapes', { operation: 'vertical', source })
|
||||
app.mark('distribute vertical')
|
||||
app.distributeShapes('vertical', app.selectedIds)
|
||||
editor.mark('distribute vertical')
|
||||
editor.distributeShapes('vertical', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -499,8 +503,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('stretch-shapes', { operation: 'horizontal', source })
|
||||
app.mark('stretch horizontal')
|
||||
app.stretchShapes('horizontal', app.selectedIds)
|
||||
editor.mark('stretch horizontal')
|
||||
editor.stretchShapes('horizontal', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -511,8 +515,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('stretch-shapes', { operation: 'vertical', source })
|
||||
app.mark('stretch vertical')
|
||||
app.stretchShapes('vertical', app.selectedIds)
|
||||
editor.mark('stretch vertical')
|
||||
editor.stretchShapes('vertical', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -523,8 +527,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('flip-shapes', { operation: 'horizontal', source })
|
||||
app.mark('flip horizontal')
|
||||
app.flipShapes('horizontal', app.selectedIds)
|
||||
editor.mark('flip horizontal')
|
||||
editor.flipShapes('horizontal', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -535,8 +539,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('flip-shapes', { operation: 'vertical', source })
|
||||
app.mark('flip vertical')
|
||||
app.flipShapes('vertical', app.selectedIds)
|
||||
editor.mark('flip vertical')
|
||||
editor.flipShapes('vertical', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -546,8 +550,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('pack-shapes', { source })
|
||||
app.mark('pack')
|
||||
app.packShapes(app.selectedIds)
|
||||
editor.mark('pack')
|
||||
editor.packShapes(editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -558,8 +562,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('stack-shapes', { operation: 'vertical', source })
|
||||
app.mark('stack-vertical')
|
||||
app.stackShapes('vertical', app.selectedIds)
|
||||
editor.mark('stack-vertical')
|
||||
editor.stackShapes('vertical', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -570,8 +574,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('stack-shapes', { operation: 'horizontal', source })
|
||||
app.mark('stack-horizontal')
|
||||
app.stackShapes('horizontal', app.selectedIds)
|
||||
editor.mark('stack-horizontal')
|
||||
editor.stackShapes('horizontal', editor.selectedIds)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -582,8 +586,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('reorder-shapes', { operation: 'toFront', source })
|
||||
app.mark('bring to front')
|
||||
app.bringToFront()
|
||||
editor.mark('bring to front')
|
||||
editor.bringToFront()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -594,8 +598,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('reorder-shapes', { operation: 'forward', source })
|
||||
app.mark('bring forward')
|
||||
app.bringForward()
|
||||
editor.mark('bring forward')
|
||||
editor.bringForward()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -606,8 +610,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('reorder-shapes', { operation: 'backward', source })
|
||||
app.mark('send backward')
|
||||
app.sendBackward()
|
||||
editor.mark('send backward')
|
||||
editor.sendBackward()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -618,8 +622,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('reorder-shapes', { operation: 'toBack', source })
|
||||
app.mark('send to back')
|
||||
app.sendToBack()
|
||||
editor.mark('send to back')
|
||||
editor.sendToBack()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -628,7 +632,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: '$x',
|
||||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
app.mark('cut')
|
||||
editor.mark('cut')
|
||||
cut(source)
|
||||
},
|
||||
},
|
||||
|
|
@ -651,7 +655,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
paste(
|
||||
clipboardItems,
|
||||
source,
|
||||
source === 'context-menu' ? app.inputs.currentPagePoint : undefined
|
||||
source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
|
||||
)
|
||||
})
|
||||
},
|
||||
|
|
@ -663,13 +667,13 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('select-all-shapes', { source })
|
||||
if (app.currentToolId !== 'select') {
|
||||
app.cancel()
|
||||
app.setSelectedTool('select')
|
||||
if (editor.currentToolId !== 'select') {
|
||||
editor.cancel()
|
||||
editor.setSelectedTool('select')
|
||||
}
|
||||
|
||||
app.mark('select all kbd')
|
||||
app.selectAll()
|
||||
editor.mark('select all kbd')
|
||||
editor.selectAll()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -678,8 +682,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('select-none-shapes', { source })
|
||||
app.mark('select none')
|
||||
app.selectNone()
|
||||
editor.mark('select none')
|
||||
editor.selectNone()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -689,10 +693,10 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
icon: 'trash',
|
||||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
if (app.currentToolId !== 'select') return
|
||||
if (editor.currentToolId !== 'select') return
|
||||
trackEvent('delete-shapes', { source })
|
||||
app.mark('delete')
|
||||
app.deleteShapes()
|
||||
editor.mark('delete')
|
||||
editor.deleteShapes()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -701,12 +705,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
icon: 'rotate-cw',
|
||||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
if (app.selectedIds.length === 0) return
|
||||
if (editor.selectedIds.length === 0) return
|
||||
trackEvent('rotate-cw', { source })
|
||||
app.mark('rotate-cw')
|
||||
const offset = app.selectionRotation % (TAU / 2)
|
||||
editor.mark('rotate-cw')
|
||||
const offset = editor.selectionRotation % (TAU / 2)
|
||||
const dontUseOffset = approximately(offset, 0) || approximately(offset, TAU / 2)
|
||||
app.rotateShapesBy(app.selectedIds, TAU / 2 - (dontUseOffset ? 0 : offset))
|
||||
editor.rotateShapesBy(editor.selectedIds, TAU / 2 - (dontUseOffset ? 0 : offset))
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -715,12 +719,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
icon: 'rotate-ccw',
|
||||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
if (app.selectedIds.length === 0) return
|
||||
if (editor.selectedIds.length === 0) return
|
||||
trackEvent('rotate-ccw', { source })
|
||||
app.mark('rotate-ccw')
|
||||
const offset = app.selectionRotation % (TAU / 2)
|
||||
editor.mark('rotate-ccw')
|
||||
const offset = editor.selectionRotation % (TAU / 2)
|
||||
const offsetCloseToZero = approximately(offset, 0)
|
||||
app.rotateShapesBy(app.selectedIds, offsetCloseToZero ? -(TAU / 2) : -offset)
|
||||
editor.rotateShapesBy(editor.selectedIds, offsetCloseToZero ? -(TAU / 2) : -offset)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -730,7 +734,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('zoom-in', { source })
|
||||
app.zoomIn(app.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
editor.zoomIn(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -740,7 +744,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('zoom-out', { source })
|
||||
app.zoomOut(app.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
editor.zoomOut(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -751,7 +755,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('reset-zoom', { source })
|
||||
app.resetZoom(app.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
editor.resetZoom(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS })
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -761,7 +765,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('zoom-to-fit', { source })
|
||||
app.zoomToFit({ duration: ANIMATION_MEDIUM_MS })
|
||||
editor.zoomToFit({ duration: ANIMATION_MEDIUM_MS })
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -771,7 +775,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('zoom-to-selection', { source })
|
||||
app.zoomToSelection({ duration: ANIMATION_MEDIUM_MS })
|
||||
editor.zoomToSelection({ duration: ANIMATION_MEDIUM_MS })
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -781,7 +785,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: false,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-snap-mode', { source })
|
||||
app.setSnapMode(!app.isSnapMode)
|
||||
editor.setSnapMode(!editor.isSnapMode)
|
||||
},
|
||||
checkbox: true,
|
||||
},
|
||||
|
|
@ -793,7 +797,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-dark-mode', { source })
|
||||
app.setDarkMode(!app.isDarkMode)
|
||||
editor.setDarkMode(!editor.isDarkMode)
|
||||
},
|
||||
checkbox: true,
|
||||
},
|
||||
|
|
@ -804,7 +808,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-reduce-motion', { source })
|
||||
app.setAnimationSpeed(app.animationSpeed === 0 ? 1 : 0)
|
||||
editor.setAnimationSpeed(editor.animationSpeed === 0 ? 1 : 0)
|
||||
},
|
||||
checkbox: true,
|
||||
},
|
||||
|
|
@ -816,9 +820,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-transparent', { source })
|
||||
app.updateInstanceState(
|
||||
editor.updateInstanceState(
|
||||
{
|
||||
exportBackground: !app.instanceState.exportBackground,
|
||||
exportBackground: !editor.instanceState.exportBackground,
|
||||
},
|
||||
true
|
||||
)
|
||||
|
|
@ -833,7 +837,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: 'q',
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-tool-lock', { source })
|
||||
app.setToolLocked(!app.isToolLocked)
|
||||
editor.setToolLocked(!editor.isToolLocked)
|
||||
},
|
||||
checkbox: true,
|
||||
},
|
||||
|
|
@ -848,11 +852,11 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
// this needs to be deferred because it causes the menu
|
||||
// UI to unmount which puts us in a dodgy state
|
||||
requestAnimationFrame(() => {
|
||||
app.batch(() => {
|
||||
editor.batch(() => {
|
||||
trackEvent('toggle-focus-mode', { source })
|
||||
clearDialogs()
|
||||
clearToasts()
|
||||
app.setFocusMode(!app.isFocusMode)
|
||||
editor.setFocusMode(!editor.isFocusMode)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
|
@ -865,7 +869,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: "$'",
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-grid-mode', { source })
|
||||
app.setGridMode(!app.isGridMode)
|
||||
editor.setGridMode(!editor.isGridMode)
|
||||
},
|
||||
checkbox: true,
|
||||
},
|
||||
|
|
@ -876,9 +880,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-debug-mode', { source })
|
||||
app.updateInstanceState(
|
||||
editor.updateInstanceState(
|
||||
{
|
||||
isDebugMode: !app.instanceState.isDebugMode,
|
||||
isDebugMode: !editor.instanceState.isDebugMode,
|
||||
},
|
||||
true
|
||||
)
|
||||
|
|
@ -902,7 +906,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('exit-pen-mode', { source })
|
||||
app.setPenMode(false)
|
||||
editor.setPenMode(false)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -912,7 +916,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('stop-following', { source })
|
||||
app.stopFollowingUser()
|
||||
editor.stopFollowingUser()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -922,7 +926,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
trackEvent('zoom-to-content', { source })
|
||||
app.zoomToContent()
|
||||
editor.zoomToContent()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -932,20 +936,20 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: '!$l',
|
||||
onSelect(source) {
|
||||
trackEvent('toggle-lock', { source })
|
||||
app.toggleLock()
|
||||
editor.toggleLock()
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
if (overrides) {
|
||||
return overrides(app, actions, undefined)
|
||||
return overrides(editor, actions, undefined)
|
||||
}
|
||||
|
||||
return actions
|
||||
}, [
|
||||
trackEvent,
|
||||
overrides,
|
||||
app,
|
||||
editor,
|
||||
addDialog,
|
||||
insertMedia,
|
||||
exportAs,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue