kopia lustrzana https://github.com/Tldraw/Tldraw
114 wiersze
2.8 KiB
TypeScript
114 wiersze
2.8 KiB
TypeScript
import * as React from 'react'
|
|
|
|
/** @public */
|
|
export type TLUiEventSource =
|
|
| 'menu'
|
|
| 'context-menu'
|
|
| 'zoom-menu'
|
|
| 'navigation-zone'
|
|
| 'quick-actions'
|
|
| 'actions-menu'
|
|
| 'kbd'
|
|
| 'debug-panel'
|
|
| 'page-menu'
|
|
| 'share-menu'
|
|
| 'toolbar'
|
|
| 'people-menu'
|
|
| 'dialog'
|
|
| 'help-menu'
|
|
| 'helper-buttons'
|
|
|
|
/** @public */
|
|
export interface TLUiEventMap {
|
|
// Actions
|
|
undo: undefined
|
|
redo: undefined
|
|
'group-shapes': undefined
|
|
'ungroup-shapes': undefined
|
|
'convert-to-embed': undefined
|
|
'convert-to-bookmark': undefined
|
|
'open-embed-link': undefined
|
|
'toggle-auto-size': undefined
|
|
'copy-as': { format: 'svg' | 'png' | 'json' }
|
|
'export-as': { format: 'svg' | 'png' | 'json' }
|
|
'edit-link': undefined
|
|
'insert-embed': undefined
|
|
'insert-media': undefined
|
|
'align-shapes': {
|
|
operation: 'left' | 'center-horizontal' | 'right' | 'top' | 'center-vertical' | 'bottom'
|
|
}
|
|
'duplicate-shapes': undefined
|
|
'pack-shapes': undefined
|
|
'stack-shapes': { operation: 'horizontal' | 'vertical' }
|
|
'flip-shapes': { operation: 'horizontal' | 'vertical' }
|
|
'distribute-shapes': { operation: 'horizontal' | 'vertical' }
|
|
'stretch-shapes': { operation: 'horizontal' | 'vertical' }
|
|
'reorder-shapes': {
|
|
operation: 'toBack' | 'toFront' | 'forward' | 'backward'
|
|
}
|
|
'delete-shapes': undefined
|
|
'select-all-shapes': undefined
|
|
'select-none-shapes': undefined
|
|
'rotate-ccw': undefined
|
|
'rotate-cw': undefined
|
|
'zoom-in': undefined
|
|
'zoom-out': undefined
|
|
'zoom-to-fit': undefined
|
|
'zoom-to-selection': undefined
|
|
'reset-zoom': undefined
|
|
'zoom-into-view': undefined
|
|
'zoom-to-content': undefined
|
|
'open-menu': { id: string }
|
|
'close-menu': { id: string }
|
|
'create-new-project': undefined
|
|
'save-project-to-file': undefined
|
|
'open-file': undefined
|
|
'select-tool': { id: string }
|
|
print: undefined
|
|
copy: undefined
|
|
paste: undefined
|
|
cut: undefined
|
|
'toggle-transparent': undefined
|
|
'toggle-snap-mode': undefined
|
|
'toggle-tool-lock': undefined
|
|
'toggle-grid-mode': undefined
|
|
'toggle-dark-mode': undefined
|
|
'toggle-focus-mode': undefined
|
|
'toggle-debug-mode': undefined
|
|
'exit-pen-mode': undefined
|
|
'stop-following': undefined
|
|
}
|
|
|
|
/** @public */
|
|
export type TLUiEventHandler<T extends keyof TLUiEventMap = keyof TLUiEventMap> = (
|
|
source: string,
|
|
name: T,
|
|
data?: TLUiEventMap[T]
|
|
) => void
|
|
|
|
/** @internal */
|
|
const defaultEventHandler: TLUiEventHandler = () => void null
|
|
|
|
/** @internal */
|
|
export const EventsContext = React.createContext({} as TLUiEventHandler)
|
|
|
|
/** @public */
|
|
export type EventsProviderProps = {
|
|
onEvent?: TLUiEventHandler
|
|
children: any
|
|
}
|
|
|
|
/** @public */
|
|
export function EventsProvider({ onEvent, children }: EventsProviderProps) {
|
|
return (
|
|
<EventsContext.Provider value={onEvent ?? defaultEventHandler}>
|
|
{children}
|
|
</EventsContext.Provider>
|
|
)
|
|
}
|
|
|
|
/** @public */
|
|
export function useEvents(): TLUiEventHandler<keyof TLUiEventMap> {
|
|
return React.useContext(EventsContext)
|
|
}
|