Renaming types, shape utils, tools (#1513)
This PR renames all exported types to include the `TL` prefix. It also removes the `TL` prefix from things that are not types, including: - shape utils (e.g. `TLArrowUtil` becomes `ArrowShapeUtil`) - tools (e.g. `TLArrowTool` becomes `ArrowShapeTool`, `TLSelectTool` becomes `SelectTool`) ### Change Type - [x] `major` — Breaking Change ### Release Notes - Renaming of types, shape utils, tools
This commit is contained in:
Steve Ruiz
GitHub
parent
10bb677035
commit
0f89309604
175 changed files with 1804 additions and 1921 deletions
9
apps/examples/src/3-custom-config/CardShapeTool.ts
Normal file
9
apps/examples/src/3-custom-config/CardShapeTool.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { BaseBoxShapeTool } from '@tldraw/tldraw'
|
||||
|
||||
// Extending the base box shape tool gives us a lot of functionality for free.
|
||||
export class CardShapeTool extends BaseBoxShapeTool {
|
||||
static override id = 'card'
|
||||
static override initial = 'idle'
|
||||
|
||||
override shapeType = 'card'
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { HTMLContainer, TLBoxUtil } from '@tldraw/tldraw'
|
||||
import { BaseBoxShapeUtil, HTMLContainer } from '@tldraw/tldraw'
|
||||
import { CardShape } from './CardShape'
|
||||
|
||||
export class CardUtil extends TLBoxUtil<CardShape> {
|
||||
export class CardShapeUtil extends BaseBoxShapeUtil<CardShape> {
|
||||
// Id — the shape util's id
|
||||
static override type = 'card' as const
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// Tool
|
||||
// ----
|
||||
// Because the card tool can be just a rectangle, we can extend the
|
||||
|
||||
import { TLBoxTool } from '@tldraw/tldraw'
|
||||
|
||||
// TLBoxTool class. This gives us a lot of functionality for free.
|
||||
export class CardTool extends TLBoxTool {
|
||||
static override id = 'card'
|
||||
static override initial = 'idle'
|
||||
|
||||
override shapeType = 'card'
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/editor.css'
|
||||
import '@tldraw/tldraw/ui.css'
|
||||
import { CardTool } from './CardTool'
|
||||
import { CardUtil } from './CardUtil'
|
||||
import { CardShapeTool } from './CardShapeTool'
|
||||
import { CardShapeUtil } from './CardShapeUtil'
|
||||
|
||||
const shapes = { card: { util: CardUtil } }
|
||||
const tools = [CardTool]
|
||||
const shapes = { card: { util: CardShapeUtil } }
|
||||
const tools = [CardShapeTool]
|
||||
|
||||
export default function CustomConfigExample() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { createShapeId, Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/editor.css'
|
||||
import '@tldraw/tldraw/ui.css'
|
||||
import { ErrorUtil } from './ErrorUtil'
|
||||
import { ErrorShapeUtil } from './ErrorShapeUtil'
|
||||
|
||||
const shapes = {
|
||||
error: {
|
||||
util: ErrorUtil, // a custom shape that will always error
|
||||
util: ErrorShapeUtil, // a custom shape that will always error
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { TLBoxUtil } from '@tldraw/tldraw'
|
||||
import { BaseBoxShapeUtil } from '@tldraw/tldraw'
|
||||
import { ErrorShape } from './ErrorShape'
|
||||
|
||||
export class ErrorUtil extends TLBoxUtil<ErrorShape> {
|
||||
export class ErrorShapeUtil extends BaseBoxShapeUtil<ErrorShape> {
|
||||
static override type = 'error'
|
||||
override type = 'error' as const
|
||||
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,16 +1,8 @@
|
|||
// Important! don't move this tlschema re-export to lib/index.ts, doing so causes esbuild to produce
|
||||
// incorrect output. https://github.com/evanw/esbuild/issues/1737
|
||||
|
||||
export {
|
||||
getIndexAbove,
|
||||
getIndexBelow,
|
||||
getIndexBetween,
|
||||
getIndices,
|
||||
getIndicesAbove,
|
||||
getIndicesBelow,
|
||||
getIndicesBetween,
|
||||
sortByIndex,
|
||||
} from '@tldraw/indices'
|
||||
// eslint-disable-next-line local/no-export-star
|
||||
export * from '@tldraw/indices'
|
||||
// eslint-disable-next-line local/no-export-star
|
||||
export * from '@tldraw/tlschema'
|
||||
export { getHashForString } from '@tldraw/utils'
|
||||
|
|
@ -20,56 +12,53 @@ export {
|
|||
TldrawEditor,
|
||||
type TldrawEditorProps,
|
||||
} from './lib/TldrawEditor'
|
||||
export { Editor, type TLAnimationOptions, type TLEditorOptions } from './lib/app/Editor'
|
||||
export { ArrowShapeUtil } from './lib/app/shapeutils/ArrowShapeUtil/ArrowShapeUtil'
|
||||
export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/app/shapeutils/BaseBoxShapeUtil'
|
||||
export { BookmarkShapeUtil } from './lib/app/shapeutils/BookmarkShapeUtil/BookmarkShapeUtil'
|
||||
export { DrawShapeUtil } from './lib/app/shapeutils/DrawShapeUtil/DrawShapeUtil'
|
||||
export { EmbedShapeUtil } from './lib/app/shapeutils/EmbedShapeUtil/EmbedShapeUtil'
|
||||
export { FrameShapeUtil } from './lib/app/shapeutils/FrameShapeUtil/FrameShapeUtil'
|
||||
export { GeoShapeUtil } from './lib/app/shapeutils/GeoShapeUtil/GeoShapeUtil'
|
||||
export { GroupShapeUtil } from './lib/app/shapeutils/GroupShapeUtil/GroupShapeUtil'
|
||||
export { HighlightShapeUtil } from './lib/app/shapeutils/HighlightShapeUtil/HighlightShapeUtil'
|
||||
export { ImageShapeUtil } from './lib/app/shapeutils/ImageShapeUtil/ImageShapeUtil'
|
||||
export {
|
||||
Editor,
|
||||
isShapeWithHandles,
|
||||
type AnimationOptions,
|
||||
type AppOptions,
|
||||
type TLChange,
|
||||
} from './lib/app/Editor'
|
||||
export { TLArrowUtil } from './lib/app/shapeutils/TLArrowUtil/TLArrowUtil'
|
||||
export { TLBookmarkUtil } from './lib/app/shapeutils/TLBookmarkUtil/TLBookmarkUtil'
|
||||
export { TLBoxUtil } from './lib/app/shapeutils/TLBoxUtil'
|
||||
export { TLDrawUtil } from './lib/app/shapeutils/TLDrawUtil/TLDrawUtil'
|
||||
export { TLEmbedUtil } from './lib/app/shapeutils/TLEmbedUtil/TLEmbedUtil'
|
||||
export { TLFrameUtil } from './lib/app/shapeutils/TLFrameUtil/TLFrameUtil'
|
||||
export { TLGeoUtil } from './lib/app/shapeutils/TLGeoUtil/TLGeoUtil'
|
||||
export { TLGroupUtil } from './lib/app/shapeutils/TLGroupUtil/TLGroupUtil'
|
||||
export { TLHighlightUtil } from './lib/app/shapeutils/TLHighlightUtil/TLHighlightUtil'
|
||||
export { TLImageUtil } from './lib/app/shapeutils/TLImageUtil/TLImageUtil'
|
||||
export { TLLineUtil, getSplineForLineShape } from './lib/app/shapeutils/TLLineUtil/TLLineUtil'
|
||||
export { TLNoteUtil } from './lib/app/shapeutils/TLNoteUtil/TLNoteUtil'
|
||||
LineShapeUtil,
|
||||
getSplineForLineShape,
|
||||
} from './lib/app/shapeutils/LineShapeUtil/LineShapeUtil'
|
||||
export { NoteShapeUtil } from './lib/app/shapeutils/NoteShapeUtil/NoteShapeUtil'
|
||||
export {
|
||||
TLShapeUtil,
|
||||
type OnBeforeCreateHandler,
|
||||
type OnBeforeUpdateHandler,
|
||||
type OnBindingChangeHandler,
|
||||
type OnChildrenChangeHandler,
|
||||
type OnClickHandler,
|
||||
type OnDoubleClickHandleHandler,
|
||||
type OnDoubleClickHandler,
|
||||
type OnDragHandler,
|
||||
type OnEditEndHandler,
|
||||
type OnHandleChangeHandler,
|
||||
type OnResizeEndHandler,
|
||||
type OnResizeHandler,
|
||||
type OnResizeStartHandler,
|
||||
type OnRotateEndHandler,
|
||||
type OnRotateHandler,
|
||||
type OnRotateStartHandler,
|
||||
type OnTranslateEndHandler,
|
||||
type OnTranslateHandler,
|
||||
type OnTranslateStartHandler,
|
||||
ShapeUtil,
|
||||
type TLOnBeforeCreateHandler,
|
||||
type TLOnBeforeUpdateHandler,
|
||||
type TLOnBindingChangeHandler,
|
||||
type TLOnChildrenChangeHandler,
|
||||
type TLOnClickHandler,
|
||||
type TLOnDoubleClickHandleHandler,
|
||||
type TLOnDoubleClickHandler,
|
||||
type TLOnDragHandler,
|
||||
type TLOnEditEndHandler,
|
||||
type TLOnHandleChangeHandler,
|
||||
type TLOnResizeEndHandler,
|
||||
type TLOnResizeHandler,
|
||||
type TLOnResizeStartHandler,
|
||||
type TLOnRotateEndHandler,
|
||||
type TLOnRotateHandler,
|
||||
type TLOnRotateStartHandler,
|
||||
type TLOnTranslateEndHandler,
|
||||
type TLOnTranslateHandler,
|
||||
type TLOnTranslateStartHandler,
|
||||
type TLResizeInfo,
|
||||
type TLResizeMode,
|
||||
type TLShapeUtilConstructor,
|
||||
type TLShapeUtilFlag,
|
||||
} from './lib/app/shapeutils/TLShapeUtil'
|
||||
export { INDENT, TLTextUtil } from './lib/app/shapeutils/TLTextUtil/TLTextUtil'
|
||||
export { TLVideoUtil } from './lib/app/shapeutils/TLVideoUtil/TLVideoUtil'
|
||||
export { StateNode, type StateNodeConstructor } from './lib/app/statechart/StateNode'
|
||||
export { TLBoxTool, type TLBoxLike } from './lib/app/statechart/TLBoxTool/TLBoxTool'
|
||||
export { type ClipboardPayload, type TLClipboardModel } from './lib/app/types/clipboard-types'
|
||||
} from './lib/app/shapeutils/ShapeUtil'
|
||||
export { INDENT, TextShapeUtil } from './lib/app/shapeutils/TextShapeUtil/TextShapeUtil'
|
||||
export { VideoShapeUtil } from './lib/app/shapeutils/VideoShapeUtil/VideoShapeUtil'
|
||||
export { BaseBoxShapeTool } from './lib/app/tools/BaseBoxShapeTool/BaseBoxShapeTool'
|
||||
export { StateNode, type TLStateNodeConstructor } from './lib/app/tools/StateNode'
|
||||
export { type TLContent } from './lib/app/types/clipboard-types'
|
||||
export { type TLEventMap, type TLEventMapHandler } from './lib/app/types/emit-types'
|
||||
export {
|
||||
EVENT_NAME_MAP,
|
||||
|
|
@ -81,9 +70,11 @@ export {
|
|||
type TLClickEventInfo,
|
||||
type TLCompleteEvent,
|
||||
type TLCompleteEventInfo,
|
||||
type TLEnterEventHandler,
|
||||
type TLEventHandlers,
|
||||
type TLEventInfo,
|
||||
type TLEventName,
|
||||
type TLExitEventHandler,
|
||||
type TLInterruptEvent,
|
||||
type TLInterruptEventInfo,
|
||||
type TLKeyboardEvent,
|
||||
|
|
@ -99,30 +90,28 @@ export {
|
|||
type TLTickEvent,
|
||||
type TLWheelEvent,
|
||||
type TLWheelEventInfo,
|
||||
type UiEnterHandler,
|
||||
type UiEvent,
|
||||
type UiEventType,
|
||||
type UiExitHandler,
|
||||
} from './lib/app/types/event-types'
|
||||
export {
|
||||
type TLCommand,
|
||||
type TLCommandHandler,
|
||||
type TLHistoryEntry,
|
||||
type TLMark,
|
||||
type TLHistoryMark,
|
||||
} from './lib/app/types/history-types'
|
||||
export { type RequiredKeys, type TLEasingType } from './lib/app/types/misc-types'
|
||||
export { type RequiredKeys } from './lib/app/types/misc-types'
|
||||
export { type TLResizeHandle, type TLSelectionHandle } from './lib/app/types/selection-types'
|
||||
export {
|
||||
defaultEditorAssetUrls,
|
||||
setDefaultEditorAssetUrls,
|
||||
type EditorAssetUrls,
|
||||
type TLEditorAssetUrls,
|
||||
} from './lib/assetUrls'
|
||||
export { Canvas } from './lib/components/Canvas'
|
||||
export { DefaultErrorFallback } from './lib/components/DefaultErrorFallback'
|
||||
export {
|
||||
ErrorBoundary,
|
||||
OptionalErrorBoundary,
|
||||
type ErrorBoundaryProps,
|
||||
type TLErrorBoundaryProps,
|
||||
} from './lib/components/ErrorBoundary'
|
||||
export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
|
||||
export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
|
||||
|
|
@ -227,7 +216,7 @@ export {
|
|||
getEmbedInfoUnsafely,
|
||||
matchEmbedUrl,
|
||||
matchUrl,
|
||||
type EmbedResult,
|
||||
type TLEmbedResult,
|
||||
} from './lib/utils/embeds'
|
||||
export {
|
||||
downloadDataURLAsFile,
|
||||
|
|
@ -245,11 +234,6 @@ export { hardResetEditor } from './lib/utils/hard-reset'
|
|||
export { isAnimated, isGIF } from './lib/utils/is-gif-animated'
|
||||
export { setPropsForNextShape } from './lib/utils/props-for-next-shape'
|
||||
export { refreshPage } from './lib/utils/refresh-page'
|
||||
export {
|
||||
applyRotationToSnapshotShapes,
|
||||
getRotationSnapshot,
|
||||
type RotationSnapshot,
|
||||
} from './lib/utils/rotation'
|
||||
export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
|
||||
export {
|
||||
blobAsString,
|
||||
|
|
@ -258,7 +242,7 @@ export {
|
|||
defaultEmptyAs,
|
||||
} from './lib/utils/string'
|
||||
export { getPointerInfo, getSvgPathFromStroke, getSvgPathFromStrokePoints } from './lib/utils/svg'
|
||||
export { type StoreWithStatus } from './lib/utils/sync/StoreWithStatus'
|
||||
export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
|
||||
export { hardReset } from './lib/utils/sync/hardReset'
|
||||
export { TAB_ID } from './lib/utils/sync/persistence-constants'
|
||||
export { openWindow } from './lib/utils/window-open'
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { TLAsset, TLInstanceId, TLRecord, TLStore } from '@tldraw/tlschema'
|
|||
import { annotateError } from '@tldraw/utils'
|
||||
import React, { memo, useCallback, useLayoutEffect, useState, useSyncExternalStore } from 'react'
|
||||
import { Editor } from './app/Editor'
|
||||
import { StateNodeConstructor } from './app/statechart/StateNode'
|
||||
import { EditorAssetUrls, defaultEditorAssetUrls } from './assetUrls'
|
||||
import { TLStateNodeConstructor } from './app/tools/StateNode'
|
||||
import { TLEditorAssetUrls, defaultEditorAssetUrls } from './assetUrls'
|
||||
import { DefaultErrorFallback } from './components/DefaultErrorFallback'
|
||||
import { OptionalErrorBoundary } from './components/ErrorBoundary'
|
||||
import { ShapeInfo } from './config/createTLStore'
|
||||
import { TLShapeInfo } from './config/createTLStore'
|
||||
import { ContainerProvider, useContainer } from './hooks/useContainer'
|
||||
import { useCursor } from './hooks/useCursor'
|
||||
import { useDarkMode } from './hooks/useDarkMode'
|
||||
|
|
@ -23,7 +23,7 @@ import { useLocalStore } from './hooks/useLocalStore'
|
|||
import { usePreloadAssets } from './hooks/usePreloadAssets'
|
||||
import { useSafariFocusOutFix } from './hooks/useSafariFocusOutFix'
|
||||
import { useZoomCss } from './hooks/useZoomCss'
|
||||
import { StoreWithStatus } from './utils/sync/StoreWithStatus'
|
||||
import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
|
||||
import { TAB_ID } from './utils/sync/persistence-constants'
|
||||
|
||||
/** @public */
|
||||
|
|
@ -32,15 +32,15 @@ export type TldrawEditorProps = {
|
|||
/**
|
||||
* An array of shape utils to use in the editor.
|
||||
*/
|
||||
shapes?: Record<string, ShapeInfo>
|
||||
shapes?: Record<string, TLShapeInfo>
|
||||
/**
|
||||
* An array of tools to use in the editor.
|
||||
*/
|
||||
tools?: StateNodeConstructor[]
|
||||
tools?: TLStateNodeConstructor[]
|
||||
/**
|
||||
* Urls for where to find fonts and other assets.
|
||||
*/
|
||||
assetUrls?: EditorAssetUrls
|
||||
assetUrls?: TLEditorAssetUrls
|
||||
/**
|
||||
* Whether to automatically focus the editor when it mounts.
|
||||
*/
|
||||
|
|
@ -102,7 +102,7 @@ export type TldrawEditorProps = {
|
|||
* The Store instance to use for keeping the editor's data. This may be prepopulated, e.g. by loading
|
||||
* from a server or database.
|
||||
*/
|
||||
store: TLStore | StoreWithStatus
|
||||
store: TLStore | TLStoreWithStatus
|
||||
}
|
||||
| {
|
||||
store?: undefined
|
||||
|
|
@ -190,7 +190,7 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
|
|||
store,
|
||||
assetUrls,
|
||||
...rest
|
||||
}: TldrawEditorProps & { store: StoreWithStatus }) {
|
||||
}: TldrawEditorProps & { store: TLStoreWithStatus }) {
|
||||
const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(
|
||||
assetUrls ?? defaultEditorAssetUrls
|
||||
)
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
intersectPolygonPolygon,
|
||||
pointInPolygon,
|
||||
} from '@tldraw/primitives'
|
||||
import { ComputedCache, HistoryEntry, RecordType, UnknownRecord } from '@tldraw/store'
|
||||
import { ComputedCache, RecordType } from '@tldraw/store'
|
||||
import {
|
||||
Box2dModel,
|
||||
CameraRecordType,
|
||||
|
|
@ -77,7 +77,7 @@ import {
|
|||
import { EventEmitter } from 'eventemitter3'
|
||||
import { nanoid } from 'nanoid'
|
||||
import { EMPTY_ARRAY, atom, computed, transact } from 'signia'
|
||||
import { ShapeInfo } from '../config/createTLStore'
|
||||
import { TLShapeInfo } from '../config/createTLStore'
|
||||
import { TLUser, createTLUser } from '../config/createTLUser'
|
||||
import { coreShapes, defaultShapes } from '../config/defaultShapes'
|
||||
import { defaultTools } from '../config/defaultTools'
|
||||
|
|
@ -122,43 +122,40 @@ import { SnapManager } from './managers/SnapManager'
|
|||
import { TextManager } from './managers/TextManager'
|
||||
import { TickManager } from './managers/TickManager'
|
||||
import { UserPreferencesManager } from './managers/UserPreferencesManager'
|
||||
import { TLArrowUtil } from './shapeutils/TLArrowUtil/TLArrowUtil'
|
||||
import { getCurvedArrowInfo } from './shapeutils/TLArrowUtil/arrow/curved-arrow'
|
||||
import { ArrowShapeUtil } from './shapeutils/ArrowShapeUtil/ArrowShapeUtil'
|
||||
import { getCurvedArrowInfo } from './shapeutils/ArrowShapeUtil/arrow/curved-arrow'
|
||||
import {
|
||||
getArrowTerminalsInArrowSpace,
|
||||
getIsArrowStraight,
|
||||
} from './shapeutils/TLArrowUtil/arrow/shared'
|
||||
import { getStraightArrowInfo } from './shapeutils/TLArrowUtil/arrow/straight-arrow'
|
||||
import { TLFrameUtil } from './shapeutils/TLFrameUtil/TLFrameUtil'
|
||||
import { TLGroupUtil } from './shapeutils/TLGroupUtil/TLGroupUtil'
|
||||
import { TLResizeMode, TLShapeUtil } from './shapeutils/TLShapeUtil'
|
||||
import { TLTextUtil } from './shapeutils/TLTextUtil/TLTextUtil'
|
||||
} from './shapeutils/ArrowShapeUtil/arrow/shared'
|
||||
import { getStraightArrowInfo } from './shapeutils/ArrowShapeUtil/arrow/straight-arrow'
|
||||
import { FrameShapeUtil } from './shapeutils/FrameShapeUtil/FrameShapeUtil'
|
||||
import { GroupShapeUtil } from './shapeutils/GroupShapeUtil/GroupShapeUtil'
|
||||
import { ShapeUtil, TLResizeMode } from './shapeutils/ShapeUtil'
|
||||
import { TextShapeUtil } from './shapeutils/TextShapeUtil/TextShapeUtil'
|
||||
import { TLExportColors } from './shapeutils/shared/TLExportColors'
|
||||
import { RootState } from './statechart/RootState'
|
||||
import { StateNode, StateNodeConstructor } from './statechart/StateNode'
|
||||
import { TLClipboardModel } from './types/clipboard-types'
|
||||
import { RootState } from './tools/RootState'
|
||||
import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
|
||||
import { TLContent } from './types/clipboard-types'
|
||||
import { TLEventMap } from './types/emit-types'
|
||||
import { TLEventInfo, TLPinchEventInfo, TLPointerEventInfo } from './types/event-types'
|
||||
import { RequiredKeys } from './types/misc-types'
|
||||
import { TLResizeHandle } from './types/selection-types'
|
||||
|
||||
/** @public */
|
||||
export type TLChange<T extends UnknownRecord = any> = HistoryEntry<T>
|
||||
|
||||
/** @public */
|
||||
export type AnimationOptions = Partial<{
|
||||
export type TLAnimationOptions = Partial<{
|
||||
duration: number
|
||||
easing: typeof EASINGS.easeInOutCubic
|
||||
}>
|
||||
|
||||
/** @public */
|
||||
export type ViewportOptions = Partial<{
|
||||
export type TLViewportOptions = Partial<{
|
||||
/** Whether to animate the viewport change or not. Defaults to true. */
|
||||
stopFollowing: boolean
|
||||
}>
|
||||
|
||||
/** @public */
|
||||
export interface AppOptions {
|
||||
export interface TLEditorOptions {
|
||||
/**
|
||||
* The Store instance to use for keeping the app's data. This may be prepopulated, e.g. by loading
|
||||
* from a server or database.
|
||||
|
|
@ -167,11 +164,11 @@ export interface AppOptions {
|
|||
/**
|
||||
* An array of shapes to use in the editor. These will be used to create and manage shapes in the editor.
|
||||
*/
|
||||
shapes?: Record<string, ShapeInfo>
|
||||
shapes?: Record<string, TLShapeInfo>
|
||||
/**
|
||||
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
||||
*/
|
||||
tools?: StateNodeConstructor[]
|
||||
tools?: TLStateNodeConstructor[]
|
||||
/**
|
||||
* A user defined externally to replace the default user.
|
||||
*/
|
||||
|
|
@ -183,11 +180,6 @@ export interface AppOptions {
|
|||
getContainer: () => HTMLElement
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export function isShapeWithHandles(shape: TLShape) {
|
||||
return shape.type === 'arrow' || shape.type === 'line' || shape.type === 'draw'
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export class Editor extends EventEmitter<TLEventMap> {
|
||||
constructor({
|
||||
|
|
@ -196,7 +188,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
tools = defaultTools,
|
||||
shapes = defaultShapes,
|
||||
getContainer,
|
||||
}: AppOptions) {
|
||||
}: TLEditorOptions) {
|
||||
super()
|
||||
|
||||
this.store = store
|
||||
|
|
@ -276,7 +268,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
this._updateDepth--
|
||||
}
|
||||
this.store.onAfterCreate = (record) => {
|
||||
if (record.typeName === 'shape' && this.isShapeOfType(record, TLArrowUtil)) {
|
||||
if (record.typeName === 'shape' && this.isShapeOfType(record, ArrowShapeUtil)) {
|
||||
this._arrowDidUpdate(record)
|
||||
}
|
||||
}
|
||||
|
|
@ -286,7 +278,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
this.disposables.add(
|
||||
this.store.listen((changes) => {
|
||||
this.emit('change', changes as TLChange)
|
||||
this.emit('change', changes)
|
||||
})
|
||||
)
|
||||
|
||||
|
|
@ -948,7 +940,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
shapeUtils: { readonly [K in string]?: TLShapeUtil<TLUnknownShape> }
|
||||
shapeUtils: { readonly [K in string]?: ShapeUtil<TLUnknownShape> }
|
||||
|
||||
/**
|
||||
* Get a shape util by its definition.
|
||||
|
|
@ -956,13 +948,13 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @example
|
||||
*
|
||||
* ```ts
|
||||
* editor.getShapeUtil(TLArrowUtil)
|
||||
* editor.getShapeUtil(ArrowShapeUtil)
|
||||
* ```
|
||||
*
|
||||
* @param util - The shape util.
|
||||
* @public
|
||||
*/
|
||||
getShapeUtil<C extends { new (...args: any[]): TLShapeUtil<any>; type: string }>(
|
||||
getShapeUtil<C extends { new (...args: any[]): ShapeUtil<any>; type: string }>(
|
||||
util: C
|
||||
): InstanceType<C>
|
||||
/**
|
||||
|
|
@ -972,18 +964,18 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* ```ts
|
||||
* const util = editor.getShapeUtil(myShape)
|
||||
* const util = editor.getShapeUtil<TLArrowUtil>(myShape)
|
||||
* const util = editor.getShapeUtil(TLArrowUtil)
|
||||
* const util = editor.getShapeUtil<ArrowShapeUtil>(myShape)
|
||||
* const util = editor.getShapeUtil(ArrowShapeUtil)
|
||||
* ```
|
||||
*
|
||||
* @param shape - A shape or shape partial.
|
||||
* @public
|
||||
*/
|
||||
getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): TLShapeUtil<S>
|
||||
getShapeUtil<T extends TLShapeUtil>({
|
||||
getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>
|
||||
getShapeUtil<T extends ShapeUtil>({
|
||||
type,
|
||||
}: {
|
||||
type: T extends TLShapeUtil<infer R> ? R['type'] : string
|
||||
type: T extends ShapeUtil<infer R> ? R['type'] : string
|
||||
}): T {
|
||||
return this.shapeUtils[type] as T
|
||||
}
|
||||
|
|
@ -1422,7 +1414,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
/** @internal */
|
||||
private _shapeDidChange(prev: TLShape, next: TLShape) {
|
||||
if (this.isShapeOfType(next, TLArrowUtil)) {
|
||||
if (this.isShapeOfType(next, ArrowShapeUtil)) {
|
||||
this._arrowDidUpdate(next)
|
||||
}
|
||||
|
||||
|
|
@ -3204,7 +3196,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @example
|
||||
*
|
||||
* ```ts
|
||||
* const isArrowShape = isShapeOfType(someShape, TLArrowUtil)
|
||||
* const isArrowShape = isShapeOfType(someShape, ArrowShapeUtil)
|
||||
* ```
|
||||
*
|
||||
* @param util - the TLShapeUtil constructor to test against
|
||||
|
|
@ -3214,7 +3206,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*/
|
||||
isShapeOfType<T extends TLUnknownShape>(
|
||||
shape: TLUnknownShape,
|
||||
util: { new (...args: any): TLShapeUtil<T>; type: string }
|
||||
util: { new (...args: any): ShapeUtil<T>; type: string }
|
||||
): shape is T {
|
||||
return shape.type === util.type
|
||||
}
|
||||
|
|
@ -4145,7 +4137,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
})
|
||||
}
|
||||
|
||||
getContent(ids: TLShapeId[] = this.selectedIds): TLClipboardModel | undefined {
|
||||
getContent(ids: TLShapeId[] = this.selectedIds): TLContent | undefined {
|
||||
if (!ids) return
|
||||
if (ids.length === 0) return
|
||||
|
||||
|
|
@ -4169,14 +4161,14 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
shape = structuredClone(shape) as typeof shape
|
||||
|
||||
if (this.isShapeOfType(shape, TLArrowUtil)) {
|
||||
if (this.isShapeOfType(shape, ArrowShapeUtil)) {
|
||||
const startBindingId =
|
||||
shape.props.start.type === 'binding' ? shape.props.start.boundShapeId : undefined
|
||||
|
||||
const endBindingId =
|
||||
shape.props.end.type === 'binding' ? shape.props.end.boundShapeId : undefined
|
||||
|
||||
const info = this.getShapeUtil(TLArrowUtil).getArrowInfo(shape)
|
||||
const info = this.getShapeUtil(ArrowShapeUtil).getArrowInfo(shape)
|
||||
|
||||
if (shape.props.start.type === 'binding') {
|
||||
if (!shapes.some((s) => s.id === startBindingId)) {
|
||||
|
|
@ -4281,7 +4273,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
/* --------------------- Commands --------------------- */
|
||||
|
||||
putContent(
|
||||
content: TLClipboardModel,
|
||||
content: TLContent,
|
||||
options: {
|
||||
point?: VecLike
|
||||
select?: boolean
|
||||
|
|
@ -4352,8 +4344,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
if (rootShapeIds.length === 1) {
|
||||
const rootShape = shapes.find((s) => s.id === rootShapeIds[0])!
|
||||
if (
|
||||
this.isShapeOfType(parent, TLFrameUtil) &&
|
||||
this.isShapeOfType(rootShape, TLFrameUtil) &&
|
||||
this.isShapeOfType(parent, FrameShapeUtil) &&
|
||||
this.isShapeOfType(rootShape, FrameShapeUtil) &&
|
||||
rootShape.props.w === parent?.props.w &&
|
||||
rootShape.props.h === parent?.props.h
|
||||
) {
|
||||
|
|
@ -4409,7 +4401,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
index = getIndexAbove(index)
|
||||
}
|
||||
|
||||
if (this.isShapeOfType(newShape, TLArrowUtil)) {
|
||||
if (this.isShapeOfType(newShape, ArrowShapeUtil)) {
|
||||
if (newShape.props.start.type === 'binding') {
|
||||
const mappedId = idMap.get(newShape.props.start.boundShapeId)
|
||||
newShape.props.start = mappedId
|
||||
|
|
@ -4564,7 +4556,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
while (
|
||||
this.getShapesAtPoint(point).some(
|
||||
(shape) =>
|
||||
this.isShapeOfType(shape, TLFrameUtil) &&
|
||||
this.isShapeOfType(shape, FrameShapeUtil) &&
|
||||
shape.props.w === onlyRoot.props.w &&
|
||||
shape.props.h === onlyRoot.props.h
|
||||
)
|
||||
|
|
@ -6382,7 +6374,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
const shapes = compact(ids.map((id) => this.getShapeById(id))).filter((shape) => {
|
||||
if (!shape) return false
|
||||
|
||||
if (this.isShapeOfType(shape, TLArrowUtil)) {
|
||||
if (this.isShapeOfType(shape, ArrowShapeUtil)) {
|
||||
if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
||||
return false
|
||||
}
|
||||
|
|
@ -6514,7 +6506,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
.filter((shape) => {
|
||||
if (!shape) return false
|
||||
|
||||
if (this.isShapeOfType(shape, TLArrowUtil)) {
|
||||
if (this.isShapeOfType(shape, ArrowShapeUtil)) {
|
||||
if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
||||
return false
|
||||
}
|
||||
|
|
@ -7340,7 +7332,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param options - Options for setting the current page.
|
||||
* @public
|
||||
*/
|
||||
setCurrentPageId(pageId: TLPageId, { stopFollowing = true }: ViewportOptions = {}): this {
|
||||
setCurrentPageId(pageId: TLPageId, { stopFollowing = true }: TLViewportOptions = {}): this {
|
||||
this._setCurrentPageId(pageId, { stopFollowing })
|
||||
return this
|
||||
}
|
||||
|
|
@ -7348,7 +7340,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
/** @internal */
|
||||
private _setCurrentPageId = this.history.createCommand(
|
||||
'setCurrentPage',
|
||||
(pageId: TLPageId, { stopFollowing = true }: ViewportOptions = {}) => {
|
||||
(pageId: TLPageId, { stopFollowing = true }: TLViewportOptions = {}) => {
|
||||
if (!this.store.has(pageId)) {
|
||||
console.error("Tried to set the current page id to a page that doesn't exist.")
|
||||
return
|
||||
|
|
@ -7721,8 +7713,11 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
let newShape: TLShape = deepCopy(shape)
|
||||
|
||||
if (this.isShapeOfType(shape, TLArrowUtil) && this.isShapeOfType(newShape, TLArrowUtil)) {
|
||||
const info = this.getShapeUtil(TLArrowUtil).getArrowInfo(shape)
|
||||
if (
|
||||
this.isShapeOfType(shape, ArrowShapeUtil) &&
|
||||
this.isShapeOfType(newShape, ArrowShapeUtil)
|
||||
) {
|
||||
const info = this.getShapeUtil(ArrowShapeUtil).getArrowInfo(shape)
|
||||
let newStartShapeId: TLShapeId | undefined = undefined
|
||||
let newEndShapeId: TLShapeId | undefined = undefined
|
||||
|
||||
|
|
@ -7944,7 +7939,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
if (boundsA.width !== boundsB.width) {
|
||||
didChange = true
|
||||
|
||||
if (this.isShapeOfType(shape, TLTextUtil)) {
|
||||
if (this.isShapeOfType(shape, TextShapeUtil)) {
|
||||
switch (shape.props.align) {
|
||||
case 'middle': {
|
||||
change.x = currentShape.x + (boundsA.width - boundsB.width) / 2
|
||||
|
|
@ -8044,7 +8039,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
x: number,
|
||||
y: number,
|
||||
z = this.camera.z,
|
||||
{ stopFollowing = true }: ViewportOptions = {}
|
||||
{ stopFollowing = true }: TLViewportOptions = {}
|
||||
) {
|
||||
this.stopCameraAnimation()
|
||||
if (stopFollowing && this.instanceState.followingUserId) {
|
||||
|
|
@ -8080,7 +8075,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
x: number,
|
||||
y: number,
|
||||
z = this.camera.z,
|
||||
opts: AnimationOptions = DEFAULT_ANIMATION_OPTIONS
|
||||
opts: TLAnimationOptions = DEFAULT_ANIMATION_OPTIONS
|
||||
) {
|
||||
x = Number.isNaN(x) ? 0 : x
|
||||
y = Number.isNaN(y) ? 0 : y
|
||||
|
|
@ -8112,7 +8107,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
centerOnPoint(x: number, y: number, opts?: AnimationOptions): this {
|
||||
centerOnPoint(x: number, y: number, opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const {
|
||||
|
|
@ -8161,7 +8156,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
zoomToFit(opts?: AnimationOptions): this {
|
||||
zoomToFit(opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const ids = [...this.shapeIds]
|
||||
|
|
@ -8191,7 +8186,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
resetZoom(point = this.viewportScreenCenter, opts?: AnimationOptions): this {
|
||||
resetZoom(point = this.viewportScreenCenter, opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const { x: cx, y: cy, z: cz } = this.camera
|
||||
|
|
@ -8219,7 +8214,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
zoomIn(point = this.viewportScreenCenter, opts?: AnimationOptions): this {
|
||||
zoomIn(point = this.viewportScreenCenter, opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const { x: cx, y: cy, z: cz } = this.camera
|
||||
|
|
@ -8263,7 +8258,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
zoomOut(point = this.viewportScreenCenter, opts?: AnimationOptions): this {
|
||||
zoomOut(point = this.viewportScreenCenter, opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const { x: cx, y: cy, z: cz } = this.camera
|
||||
|
|
@ -8306,7 +8301,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
zoomToSelection(opts?: AnimationOptions): this {
|
||||
zoomToSelection(opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const ids = this.selectedIds
|
||||
|
|
@ -8334,7 +8329,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param opts - The options for an animation.
|
||||
* @public
|
||||
*/
|
||||
panZoomIntoView(ids: TLShapeId[], opts?: AnimationOptions): this {
|
||||
panZoomIntoView(ids: TLShapeId[], opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
if (ids.length <= 0) return this
|
||||
|
|
@ -8423,7 +8418,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
width: number,
|
||||
height: number,
|
||||
targetZoom?: number,
|
||||
opts?: AnimationOptions
|
||||
opts?: TLAnimationOptions
|
||||
): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
|
|
@ -8476,7 +8471,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @param dy - The amount to pan on the y axis.
|
||||
* @param opts - The animation options
|
||||
*/
|
||||
pan(dx: number, dy: number, opts?: AnimationOptions): this {
|
||||
pan(dx: number, dy: number, opts?: TLAnimationOptions): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const { camera } = this
|
||||
|
|
@ -8556,7 +8551,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
}
|
||||
|
||||
/** @internal */
|
||||
private _animateToViewport(targetViewportPage: Box2d, opts = {} as AnimationOptions) {
|
||||
private _animateToViewport(targetViewportPage: Box2d, opts = {} as TLAnimationOptions) {
|
||||
const { duration = 0, easing = EASINGS.easeInOutCubic } = opts
|
||||
const { animationSpeed, viewportPageBounds } = this
|
||||
|
||||
|
|
@ -8776,7 +8771,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
return this
|
||||
}
|
||||
|
||||
animateToShape(shapeId: TLShapeId, opts: AnimationOptions = DEFAULT_ANIMATION_OPTIONS): this {
|
||||
animateToShape(shapeId: TLShapeId, opts: TLAnimationOptions = DEFAULT_ANIMATION_OPTIONS): this {
|
||||
if (!this.canMoveCamera) return this
|
||||
|
||||
const activeArea = getActiveAreaScreenSpace(this)
|
||||
|
|
@ -9026,7 +9021,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
const groups: TLGroupShape[] = []
|
||||
|
||||
shapes.forEach((shape) => {
|
||||
if (this.isShapeOfType(shape, TLGroupUtil)) {
|
||||
if (this.isShapeOfType(shape, GroupShapeUtil)) {
|
||||
groups.push(shape)
|
||||
} else {
|
||||
idsToSelect.add(shape.id)
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { compact, dedupe, deepCopy } from '@tldraw/utils'
|
|||
import { atom, computed, EMPTY_ARRAY } from 'signia'
|
||||
import { uniqueId } from '../../utils/data'
|
||||
import type { Editor } from '../Editor'
|
||||
import { getSplineForLineShape, TLLineUtil } from '../shapeutils/TLLineUtil/TLLineUtil'
|
||||
import { getSplineForLineShape, LineShapeUtil } from '../shapeutils/LineShapeUtil/LineShapeUtil'
|
||||
|
||||
export type PointsSnapLine = {
|
||||
id: string
|
||||
|
|
@ -495,7 +495,7 @@ export class SnapManager {
|
|||
// and then pass them to the snap function as 'additionalOutlines'
|
||||
|
||||
// First, let's find which handle we're dragging
|
||||
const util = this.editor.getShapeUtil(TLLineUtil)
|
||||
const util = this.editor.getShapeUtil(LineShapeUtil)
|
||||
const handles = util.handles(line).sort(sortByIndex)
|
||||
if (handles.length < 3) return { nudge: new Vec2d(0, 0) }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Box2dModel, TLAlignType } from '@tldraw/tlschema'
|
||||
import { uniqueId } from '../../utils/data'
|
||||
import { Editor } from '../Editor'
|
||||
import { TextHelpers } from '../shapeutils/TLTextUtil/TextHelpers'
|
||||
import { TextHelpers } from '../shapeutils/TextShapeUtil/TextHelpers'
|
||||
|
||||
const textAlignmentsForLtr = {
|
||||
start: 'left',
|
||||
|
|
@ -12,9 +12,9 @@ const textAlignmentsForLtr = {
|
|||
'end-legacy': 'right',
|
||||
}
|
||||
|
||||
type OverflowMode = 'wrap' | 'truncate-ellipsis' | 'truncate-clip'
|
||||
type MeasureTextSpanOpts = {
|
||||
overflow: OverflowMode
|
||||
type TLOverflowMode = 'wrap' | 'truncate-ellipsis' | 'truncate-clip'
|
||||
type TLMeasureTextSpanOpts = {
|
||||
overflow: TLOverflowMode
|
||||
width: number
|
||||
height: number
|
||||
padding: number
|
||||
|
|
@ -183,7 +183,7 @@ export class TextManager {
|
|||
*/
|
||||
measureTextSpans(
|
||||
textToMeasure: string,
|
||||
opts: MeasureTextSpanOpts
|
||||
opts: TLMeasureTextSpanOpts
|
||||
): { text: string; box: Box2dModel }[] {
|
||||
const shouldTruncateToFirstLine =
|
||||
opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { TAU } from '@tldraw/primitives'
|
|||
import { TLArrowShape, TLArrowTerminal, TLShapeId, createShapeId } from '@tldraw/tlschema'
|
||||
import { assert } from '@tldraw/utils'
|
||||
import { TestEditor } from '../../../test/TestEditor'
|
||||
import { TLArrowUtil } from './TLArrowUtil'
|
||||
import { ArrowShapeUtil } from './ArrowShapeUtil'
|
||||
|
||||
let editor: TestEditor
|
||||
|
||||
|
|
@ -299,7 +299,7 @@ describe('Other cases when arrow are moved', () => {
|
|||
|
||||
editor.setSelectedTool('arrow').pointerDown(1000, 1000).pointerMove(50, 350).pointerUp(50, 350)
|
||||
let arrow = editor.shapesArray[editor.shapesArray.length - 1]
|
||||
assert(editor.isShapeOfType(arrow, TLArrowUtil))
|
||||
assert(editor.isShapeOfType(arrow, ArrowShapeUtil))
|
||||
assert(arrow.props.end.type === 'binding')
|
||||
expect(arrow.props.end.boundShapeId).toBe(ids.box3)
|
||||
|
||||
|
|
@ -308,7 +308,7 @@ describe('Other cases when arrow are moved', () => {
|
|||
|
||||
// arrow should still be bound to box3
|
||||
arrow = editor.getShapeById(arrow.id)!
|
||||
assert(editor.isShapeOfType(arrow, TLArrowUtil))
|
||||
assert(editor.isShapeOfType(arrow, ArrowShapeUtil))
|
||||
assert(arrow.props.end.type === 'binding')
|
||||
expect(arrow.props.end.boundShapeId).toBe(ids.box3)
|
||||
})
|
||||
|
|
@ -26,18 +26,18 @@ import * as React from 'react'
|
|||
import { computed, EMPTY_ARRAY } from 'signia'
|
||||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { ARROW_LABEL_FONT_SIZES, FONT_FAMILIES, TEXT_PROPS } from '../../../constants'
|
||||
import {
|
||||
ShapeUtil,
|
||||
TLOnEditEndHandler,
|
||||
TLOnHandleChangeHandler,
|
||||
TLOnResizeHandler,
|
||||
TLOnTranslateStartHandler,
|
||||
TLShapeUtilFlag,
|
||||
} from '../ShapeUtil'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { getPerfectDashProps } from '../shared/getPerfectDashProps'
|
||||
import { getShapeFillSvg, ShapeFill } from '../shared/ShapeFill'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import {
|
||||
OnEditEndHandler,
|
||||
OnHandleChangeHandler,
|
||||
OnResizeHandler,
|
||||
OnTranslateStartHandler,
|
||||
TLShapeUtil,
|
||||
TLShapeUtilFlag,
|
||||
} from '../TLShapeUtil'
|
||||
import { ArrowInfo } from './arrow/arrow-types'
|
||||
import { getArrowheadPathForType } from './arrow/arrowheads'
|
||||
import {
|
||||
|
|
@ -56,7 +56,7 @@ import { ArrowTextLabel } from './components/ArrowTextLabel'
|
|||
let globalRenderIndex = 0
|
||||
|
||||
/** @public */
|
||||
export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
|
||||
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||
static override type = 'arrow'
|
||||
|
||||
override canEdit = () => true
|
||||
|
|
@ -245,7 +245,7 @@ export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
|
|||
]
|
||||
}
|
||||
|
||||
onHandleChange: OnHandleChangeHandler<TLArrowShape> = (shape, { handle, isPrecise }) => {
|
||||
onHandleChange: TLOnHandleChangeHandler<TLArrowShape> = (shape, { handle, isPrecise }) => {
|
||||
const next = deepCopy(shape)
|
||||
|
||||
switch (handle.id) {
|
||||
|
|
@ -376,7 +376,7 @@ export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
|
|||
return next
|
||||
}
|
||||
|
||||
onTranslateStart: OnTranslateStartHandler<TLArrowShape> = (shape) => {
|
||||
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape> = (shape) => {
|
||||
let startBinding: TLShapeId | null =
|
||||
shape.props.start.type === 'binding' ? shape.props.start.boundShapeId : null
|
||||
let endBinding: TLShapeId | null =
|
||||
|
|
@ -416,7 +416,7 @@ export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
|
|||
}
|
||||
}
|
||||
|
||||
onResize: OnResizeHandler<TLArrowShape> = (shape, info) => {
|
||||
onResize: TLOnResizeHandler<TLArrowShape> = (shape, info) => {
|
||||
const { scaleX, scaleY } = info
|
||||
|
||||
const terminals = getArrowTerminalsInArrowSpace(this.editor, shape)
|
||||
|
|
@ -900,7 +900,7 @@ export class TLArrowUtil extends TLShapeUtil<TLArrowShape> {
|
|||
return this.getLabelBounds(shape) ?? new Box2d()
|
||||
}
|
||||
|
||||
onEditEnd: OnEditEndHandler<TLArrowShape> = (shape) => {
|
||||
onEditEnd: TLOnEditEndHandler<TLArrowShape> = (shape) => {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { Matrix2d, Vec2d } from '@tldraw/primitives'
|
||||
import { TLArrowShape, TLArrowTerminal, TLShape } from '@tldraw/tlschema'
|
||||
import { Editor } from '../../../Editor'
|
||||
import { TLShapeUtil } from '../../TLShapeUtil'
|
||||
import { ShapeUtil } from '../../ShapeUtil'
|
||||
|
||||
export function getIsArrowStraight(shape: TLArrowShape) {
|
||||
return Math.abs(shape.props.bend) < 8 // snap to +-8px
|
||||
|
|
@ -9,7 +9,7 @@ export function getIsArrowStraight(shape: TLArrowShape) {
|
|||
|
||||
export type BoundShapeInfo<T extends TLShape = TLShape> = {
|
||||
shape: T
|
||||
util: TLShapeUtil<T>
|
||||
util: ShapeUtil<T>
|
||||
didIntersect: boolean
|
||||
isExact: boolean
|
||||
transform: Matrix2d
|
||||
|
|
@ -3,7 +3,7 @@ import { TLArrowShape, TLShapeId } from '@tldraw/tlschema'
|
|||
import * as React from 'react'
|
||||
import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../../../constants'
|
||||
import { stopEventPropagation } from '../../../../utils/dom'
|
||||
import { TextHelpers } from '../../TLTextUtil/TextHelpers'
|
||||
import { TextHelpers } from '../../TextShapeUtil/TextHelpers'
|
||||
import { useEditableText } from '../../shared/useEditableText'
|
||||
|
||||
export const ArrowTextLabel = React.memo(function ArrowTextLabel({
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
import { Box2d, linesIntersect, pointInPolygon, Vec2d, VecLike } from '@tldraw/primitives'
|
||||
import { TLBoxLike } from '../statechart/TLBoxTool/TLBoxTool'
|
||||
import { TLBaseShape } from '@tldraw/tlschema'
|
||||
import { ShapeUtil, TLOnResizeHandler } from './ShapeUtil'
|
||||
import { resizeBox } from './shared/resizeBox'
|
||||
import { OnResizeHandler, TLShapeUtil } from './TLShapeUtil'
|
||||
|
||||
/** @public */
|
||||
export abstract class TLBoxUtil<Shape extends TLBoxLike> extends TLShapeUtil<Shape> {
|
||||
export type TLBaseBoxShape = TLBaseShape<string, { w: number; h: number }>
|
||||
|
||||
/** @public */
|
||||
export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends ShapeUtil<Shape> {
|
||||
override getBounds(shape: Shape) {
|
||||
return new Box2d(0, 0, shape.props.w, shape.props.h)
|
||||
}
|
||||
|
|
@ -33,7 +36,7 @@ export abstract class TLBoxUtil<Shape extends TLBoxLike> extends TLShapeUtil<Sha
|
|||
return false
|
||||
}
|
||||
|
||||
onResize: OnResizeHandler<any> = (shape, info) => {
|
||||
onResize: TLOnResizeHandler<any> = (shape, info) => {
|
||||
return resizeBox(shape, info)
|
||||
}
|
||||
}
|
||||
|
|
@ -12,12 +12,12 @@ import {
|
|||
stopEventPropagation,
|
||||
truncateStringWithEllipsis,
|
||||
} from '../../../utils/dom'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { OnBeforeCreateHandler, OnBeforeUpdateHandler } from '../TLShapeUtil'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { TLOnBeforeCreateHandler, TLOnBeforeUpdateHandler } from '../ShapeUtil'
|
||||
import { HyperlinkButton } from '../shared/HyperlinkButton'
|
||||
|
||||
/** @public */
|
||||
export class TLBookmarkUtil extends TLBoxUtil<TLBookmarkShape> {
|
||||
export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
|
||||
static override type = 'bookmark'
|
||||
|
||||
override canResize = () => false
|
||||
|
|
@ -104,11 +104,11 @@ export class TLBookmarkUtil extends TLBoxUtil<TLBookmarkShape> {
|
|||
)
|
||||
}
|
||||
|
||||
override onBeforeCreate?: OnBeforeCreateHandler<TLBookmarkShape> = (shape) => {
|
||||
override onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape> = (shape) => {
|
||||
this.updateBookmarkAsset(shape)
|
||||
}
|
||||
|
||||
override onBeforeUpdate?: OnBeforeUpdateHandler<TLBookmarkShape> = (prev, shape) => {
|
||||
override onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape> = (prev, shape) => {
|
||||
if (prev.props.url !== shape.props.url) {
|
||||
this.updateBookmarkAsset(shape)
|
||||
}
|
||||
|
|
@ -13,14 +13,14 @@ import { TLDrawShape, TLDrawShapeSegment } from '@tldraw/tlschema'
|
|||
import { last, rng } from '@tldraw/utils'
|
||||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { getSvgPathFromStroke, getSvgPathFromStrokePoints } from '../../../utils/svg'
|
||||
import { ShapeUtil, TLOnResizeHandler } from '../ShapeUtil'
|
||||
import { getShapeFillSvg, ShapeFill } from '../shared/ShapeFill'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { useForceSolid } from '../shared/useForceSolid'
|
||||
import { OnResizeHandler, TLShapeUtil } from '../TLShapeUtil'
|
||||
import { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'
|
||||
|
||||
/** @public */
|
||||
export class TLDrawUtil extends TLShapeUtil<TLDrawShape> {
|
||||
export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
|
||||
static override type = 'draw'
|
||||
|
||||
hideResizeHandles = (shape: TLDrawShape) => getIsDot(shape)
|
||||
|
|
@ -269,7 +269,7 @@ export class TLDrawUtil extends TLShapeUtil<TLDrawShape> {
|
|||
return foregroundPath
|
||||
}
|
||||
|
||||
override onResize: OnResizeHandler<TLDrawShape> = (shape, info) => {
|
||||
override onResize: TLOnResizeHandler<TLDrawShape> = (shape, info) => {
|
||||
const { scaleX, scaleY } = info
|
||||
|
||||
const newSegments: TLDrawShapeSegment[] = []
|
||||
|
|
@ -14,8 +14,8 @@ import { ROTATING_SHADOWS } from '../../../constants'
|
|||
import { useIsEditing } from '../../../hooks/useIsEditing'
|
||||
import { rotateBoxShadow } from '../../../utils/dom'
|
||||
import { getEmbedInfo, getEmbedInfoUnsafely } from '../../../utils/embeds'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { OnResizeHandler, TLShapeUtilFlag } from '../TLShapeUtil'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { TLOnResizeHandler, TLShapeUtilFlag } from '../ShapeUtil'
|
||||
import { resizeBox } from '../shared/resizeBox'
|
||||
|
||||
const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
|
||||
|
|
@ -26,7 +26,7 @@ const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
|
|||
}
|
||||
|
||||
/** @public */
|
||||
export class TLEmbedUtil extends TLBoxUtil<TLEmbedShape> {
|
||||
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
|
||||
static override type = 'embed'
|
||||
|
||||
override canUnmount: TLShapeUtilFlag<TLEmbedShape> = () => false
|
||||
|
|
@ -55,7 +55,7 @@ export class TLEmbedUtil extends TLBoxUtil<TLEmbedShape> {
|
|||
return embedInfo?.definition.isAspectRatioLocked ?? false
|
||||
}
|
||||
|
||||
onResize: OnResizeHandler<TLEmbedShape> = (shape, info) => {
|
||||
onResize: TLOnResizeHandler<TLEmbedShape> = (shape, info) => {
|
||||
const isAspectRatioLocked = this.isAspectRatioLocked(shape)
|
||||
const embedInfo = getEmbedInfo(shape.props.url)
|
||||
let minWidth = embedInfo?.definition.minWidth ?? 200
|
||||
|
|
@ -3,14 +3,14 @@ import { TLFrameShape, TLShape, TLShapeId } from '@tldraw/tlschema'
|
|||
import { last } from '@tldraw/utils'
|
||||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { defaultEmptyAs } from '../../../utils/string'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { TLOnResizeEndHandler } from '../ShapeUtil'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { OnResizeEndHandler } from '../TLShapeUtil'
|
||||
import { FrameHeading } from './components/FrameHeading'
|
||||
|
||||
/** @public */
|
||||
export class TLFrameUtil extends TLBoxUtil<TLFrameShape> {
|
||||
export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
||||
static override type = 'frame'
|
||||
|
||||
override canBind = () => true
|
||||
|
|
@ -190,7 +190,7 @@ export class TLFrameUtil extends TLBoxUtil<TLFrameShape> {
|
|||
}
|
||||
}
|
||||
|
||||
override onResizeEnd: OnResizeEndHandler<TLFrameShape> = (shape) => {
|
||||
override onResizeEnd: TLOnResizeEndHandler<TLFrameShape> = (shape) => {
|
||||
const bounds = this.editor.getPageBounds(shape)!
|
||||
const children = this.editor.getSortedChildIds(shape.id)
|
||||
|
||||
|
|
@ -17,13 +17,13 @@ import { SVGContainer } from '../../../components/SVGContainer'
|
|||
import { FONT_FAMILIES, LABEL_FONT_SIZES, TEXT_PROPS } from '../../../constants'
|
||||
import { getLegacyOffsetX } from '../../../utils/legacy'
|
||||
import { Editor } from '../../Editor'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { TLOnEditEndHandler, TLOnResizeHandler } from '../ShapeUtil'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { HyperlinkButton } from '../shared/HyperlinkButton'
|
||||
import { TextLabel } from '../shared/TextLabel'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { useForceSolid } from '../shared/useForceSolid'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { OnEditEndHandler, OnResizeHandler } from '../TLShapeUtil'
|
||||
import { DashStyleEllipse, DashStyleEllipseSvg } from './components/DashStyleEllipse'
|
||||
import { DashStyleOval, DashStyleOvalSvg } from './components/DashStyleOval'
|
||||
import { DashStylePolygon, DashStylePolygonSvg } from './components/DashStylePolygon'
|
||||
|
|
@ -41,7 +41,7 @@ const LABEL_PADDING = 16
|
|||
const MIN_SIZE_WITH_LABEL = 17 * 3
|
||||
|
||||
/** @public */
|
||||
export class TLGeoUtil extends TLBoxUtil<TLGeoShape> {
|
||||
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
||||
static override type = 'geo'
|
||||
|
||||
canEdit = () => true
|
||||
|
|
@ -312,7 +312,7 @@ export class TLGeoUtil extends TLBoxUtil<TLGeoShape> {
|
|||
}
|
||||
}
|
||||
|
||||
onEditEnd: OnEditEndHandler<TLGeoShape> = (shape) => {
|
||||
onEditEnd: TLOnEditEndHandler<TLGeoShape> = (shape) => {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
|
|
@ -686,7 +686,7 @@ export class TLGeoUtil extends TLBoxUtil<TLGeoShape> {
|
|||
return svgElm
|
||||
}
|
||||
|
||||
onResize: OnResizeHandler<TLGeoShape> = (
|
||||
onResize: TLOnResizeHandler<TLGeoShape> = (
|
||||
shape,
|
||||
{ initialBounds, handle, newPoint, scaleX, scaleY }
|
||||
) => {
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { Box2d, Matrix2d } from '@tldraw/primitives'
|
||||
import { TLGroupShape, Vec2dModel } from '@tldraw/tlschema'
|
||||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { OnChildrenChangeHandler, TLShapeUtil } from '../TLShapeUtil'
|
||||
import { ShapeUtil, TLOnChildrenChangeHandler } from '../ShapeUtil'
|
||||
import { DashedOutlineBox } from '../shared/DashedOutlineBox'
|
||||
|
||||
/** @public */
|
||||
export class TLGroupUtil extends TLShapeUtil<TLGroupShape> {
|
||||
export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
||||
static override type = 'group'
|
||||
|
||||
type = 'group' as const
|
||||
|
|
@ -87,7 +87,7 @@ export class TLGroupUtil extends TLShapeUtil<TLGroupShape> {
|
|||
return <DashedOutlineBox className="" bounds={bounds} zoomLevel={zoomLevel} />
|
||||
}
|
||||
|
||||
onChildrenChange: OnChildrenChangeHandler<TLGroupShape> = (group) => {
|
||||
onChildrenChange: TLOnChildrenChangeHandler<TLGroupShape> = (group) => {
|
||||
const children = this.editor.getSortedChildIds(group.id)
|
||||
if (children.length === 0) {
|
||||
if (this.editor.pageState.focusLayerId === group.id) {
|
||||
|
|
@ -13,17 +13,17 @@ import { last, rng } from '@tldraw/utils'
|
|||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { FONT_SIZES } from '../../../constants'
|
||||
import { getSvgPathFromStroke, getSvgPathFromStrokePoints } from '../../../utils/svg'
|
||||
import { getHighlightFreehandSettings, getPointsFromSegments } from '../DrawShapeUtil/getPath'
|
||||
import { ShapeUtil, TLOnResizeHandler } from '../ShapeUtil'
|
||||
import { ShapeFill } from '../shared/ShapeFill'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { useForceSolid } from '../shared/useForceSolid'
|
||||
import { getHighlightFreehandSettings, getPointsFromSegments } from '../TLDrawUtil/getPath'
|
||||
import { OnResizeHandler, TLShapeUtil } from '../TLShapeUtil'
|
||||
|
||||
const OVERLAY_OPACITY = 0.35
|
||||
const UNDERLAY_OPACITY = 0.82
|
||||
|
||||
/** @public */
|
||||
export class TLHighlightUtil extends TLShapeUtil<TLHighlightShape> {
|
||||
export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
|
||||
static type = 'highlight'
|
||||
|
||||
hideResizeHandles = (shape: TLHighlightShape) => getIsDot(shape)
|
||||
|
|
@ -162,7 +162,7 @@ export class TLHighlightUtil extends TLShapeUtil<TLHighlightShape> {
|
|||
return highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, colors)
|
||||
}
|
||||
|
||||
override onResize: OnResizeHandler<TLHighlightShape> = (shape, info) => {
|
||||
override onResize: TLOnResizeHandler<TLHighlightShape> = (shape, info) => {
|
||||
const { scaleX, scaleY } = info
|
||||
|
||||
const newSegments: TLDrawShapeSegment[] = []
|
||||
|
|
@ -0,0 +1 @@
|
|||
export {}
|
||||
|
|
@ -8,8 +8,8 @@ import { DefaultSpinner } from '../../../components/DefaultSpinner'
|
|||
import { HTMLContainer } from '../../../components/HTMLContainer'
|
||||
import { useIsCropping } from '../../../hooks/useIsCropping'
|
||||
import { usePrefersReducedMotion } from '../../../utils/dom'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { OnDoubleClickHandler } from '../TLShapeUtil'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { TLOnDoubleClickHandler } from '../ShapeUtil'
|
||||
import { HyperlinkButton } from '../shared/HyperlinkButton'
|
||||
|
||||
const loadImage = async (url: string): Promise<HTMLImageElement> => {
|
||||
|
|
@ -48,7 +48,7 @@ async function getDataURIFromURL(url: string): Promise<string> {
|
|||
}
|
||||
|
||||
/** @public */
|
||||
export class TLImageUtil extends TLBoxUtil<TLImageShape> {
|
||||
export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
|
||||
static override type = 'image'
|
||||
|
||||
override isAspectRatioLocked = () => true
|
||||
|
|
@ -225,7 +225,7 @@ export class TLImageUtil extends TLBoxUtil<TLImageShape> {
|
|||
])
|
||||
}
|
||||
|
||||
onDoubleClickEdge: OnDoubleClickHandler<TLImageShape> = (shape) => {
|
||||
onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape> = (shape) => {
|
||||
const props = shape.props
|
||||
if (!props) return
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ import { TLHandle, TLLineShape } from '@tldraw/tlschema'
|
|||
import { deepCopy } from '@tldraw/utils'
|
||||
import { SVGContainer } from '../../../components/SVGContainer'
|
||||
import { WeakMapCache } from '../../../utils/WeakMapCache'
|
||||
import { OnHandleChangeHandler, OnResizeHandler, TLShapeUtil } from '../TLShapeUtil'
|
||||
import { ShapeUtil, TLOnHandleChangeHandler, TLOnResizeHandler } from '../ShapeUtil'
|
||||
import { ShapeFill } from '../shared/ShapeFill'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { getPerfectDashProps } from '../shared/getPerfectDashProps'
|
||||
|
|
@ -25,7 +25,7 @@ const splinesCache = new WeakMapCache<TLLineShape['props'], CubicSpline2d | Poly
|
|||
const handlesCache = new WeakMapCache<TLLineShape['props'], TLHandle[]>()
|
||||
|
||||
/** @public */
|
||||
export class TLLineUtil extends TLShapeUtil<TLLineShape> {
|
||||
export class LineShapeUtil extends ShapeUtil<TLLineShape> {
|
||||
static override type = 'line'
|
||||
|
||||
override hideResizeHandles = () => true
|
||||
|
|
@ -107,7 +107,7 @@ export class TLLineUtil extends TLShapeUtil<TLLineShape> {
|
|||
|
||||
// Events
|
||||
|
||||
onResize: OnResizeHandler<TLLineShape> = (shape, info) => {
|
||||
onResize: TLOnResizeHandler<TLLineShape> = (shape, info) => {
|
||||
const { scaleX, scaleY } = info
|
||||
|
||||
const handles = deepCopy(shape.props.handles)
|
||||
|
|
@ -124,7 +124,7 @@ export class TLLineUtil extends TLShapeUtil<TLLineShape> {
|
|||
}
|
||||
}
|
||||
|
||||
onHandleChange: OnHandleChangeHandler<TLLineShape> = (shape, { handle }) => {
|
||||
onHandleChange: TLOnHandleChangeHandler<TLLineShape> = (shape, { handle }) => {
|
||||
const next = deepCopy(shape)
|
||||
|
||||
switch (handle.id) {
|
||||
|
|
@ -3,16 +3,16 @@ import { TLNoteShape } from '@tldraw/tlschema'
|
|||
import { FONT_FAMILIES, LABEL_FONT_SIZES, TEXT_PROPS } from '../../../constants'
|
||||
import { getLegacyOffsetX } from '../../../utils/legacy'
|
||||
import { Editor } from '../../Editor'
|
||||
import { ShapeUtil, TLOnEditEndHandler } from '../ShapeUtil'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { HyperlinkButton } from '../shared/HyperlinkButton'
|
||||
import { TextLabel } from '../shared/TextLabel'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { OnEditEndHandler, TLShapeUtil } from '../TLShapeUtil'
|
||||
|
||||
const NOTE_SIZE = 200
|
||||
|
||||
/** @public */
|
||||
export class TLNoteUtil extends TLShapeUtil<TLNoteShape> {
|
||||
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
|
||||
static override type = 'note'
|
||||
|
||||
canEdit = () => true
|
||||
|
|
@ -181,7 +181,7 @@ export class TLNoteUtil extends TLShapeUtil<TLNoteShape> {
|
|||
return getGrowY(this.editor, next, prev.props.growY)
|
||||
}
|
||||
|
||||
onEditEnd: OnEditEndHandler<TLNoteShape> = (shape) => {
|
||||
onEditEnd: TLOnEditEndHandler<TLNoteShape> = (shape) => {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
|
|
@ -21,9 +21,9 @@ const transforms = new WeakMapCache<TLShape, Matrix2d>()
|
|||
/** @public */
|
||||
export interface TLShapeUtilConstructor<
|
||||
T extends TLUnknownShape,
|
||||
ShapeUtil extends TLShapeUtil<T> = TLShapeUtil<T>
|
||||
U extends ShapeUtil<T> = ShapeUtil<T>
|
||||
> {
|
||||
new (editor: Editor, type: T['type']): ShapeUtil
|
||||
new (editor: Editor, type: T['type']): U
|
||||
type: T['type']
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ export interface TLShapeUtilConstructor<
|
|||
export type TLShapeUtilFlag<T> = (shape: T) => boolean
|
||||
|
||||
/** @public */
|
||||
export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
||||
export abstract class ShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
||||
constructor(public editor: Editor, public readonly type: T['type']) {}
|
||||
|
||||
static type: string
|
||||
|
|
@ -430,7 +430,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns The next shape or void.
|
||||
* @public
|
||||
*/
|
||||
onBeforeCreate?: OnBeforeCreateHandler<T>
|
||||
onBeforeCreate?: TLOnBeforeCreateHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called just before a shape is updated. This method provides a last chance to modify
|
||||
|
|
@ -451,7 +451,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns The next shape or void.
|
||||
* @public
|
||||
*/
|
||||
onBeforeUpdate?: OnBeforeUpdateHandler<T>
|
||||
onBeforeUpdate?: TLOnBeforeUpdateHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when some other shapes are dragged over this one.
|
||||
|
|
@ -469,7 +469,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns An object specifying whether the shape should hint that it can receive the dragged shapes.
|
||||
* @public
|
||||
*/
|
||||
onDragShapesOver?: OnDragHandler<T, { shouldHint: boolean }>
|
||||
onDragShapesOver?: TLOnDragHandler<T, { shouldHint: boolean }>
|
||||
|
||||
/**
|
||||
* A callback called when some other shapes are dragged out of this one.
|
||||
|
|
@ -478,7 +478,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @param shapes - The shapes that are being dragged out.
|
||||
* @public
|
||||
*/
|
||||
onDragShapesOut?: OnDragHandler<T>
|
||||
onDragShapesOut?: TLOnDragHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when some other shapes are dropped over this one.
|
||||
|
|
@ -487,7 +487,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @param shapes - The shapes that are being dropped over this one.
|
||||
* @public
|
||||
*/
|
||||
onDropShapesOver?: OnDragHandler<T>
|
||||
onDropShapesOver?: TLOnDragHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape starts being resized.
|
||||
|
|
@ -496,7 +496,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onResizeStart?: OnResizeStartHandler<T>
|
||||
onResizeStart?: TLOnResizeStartHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape changes from a resize.
|
||||
|
|
@ -506,7 +506,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onResize?: OnResizeHandler<T>
|
||||
onResize?: TLOnResizeHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape finishes resizing.
|
||||
|
|
@ -516,7 +516,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onResizeEnd?: OnResizeEndHandler<T>
|
||||
onResizeEnd?: TLOnResizeEndHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape starts being translated.
|
||||
|
|
@ -525,7 +525,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onTranslateStart?: OnTranslateStartHandler<T>
|
||||
onTranslateStart?: TLOnTranslateStartHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape changes from a translation.
|
||||
|
|
@ -535,7 +535,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onTranslate?: OnTranslateHandler<T>
|
||||
onTranslate?: TLOnTranslateHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape finishes translating.
|
||||
|
|
@ -545,7 +545,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onTranslateEnd?: OnTranslateEndHandler<T>
|
||||
onTranslateEnd?: TLOnTranslateEndHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape starts being rotated.
|
||||
|
|
@ -554,7 +554,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onRotateStart?: OnRotateStartHandler<T>
|
||||
onRotateStart?: TLOnRotateStartHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape changes from a rotation.
|
||||
|
|
@ -564,7 +564,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onRotate?: OnRotateHandler<T>
|
||||
onRotate?: TLOnRotateHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape finishes rotating.
|
||||
|
|
@ -574,7 +574,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onRotateEnd?: OnRotateEndHandler<T>
|
||||
onRotateEnd?: TLOnRotateEndHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape's handle changes.
|
||||
|
|
@ -584,14 +584,14 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onHandleChange?: OnHandleChangeHandler<T>
|
||||
onHandleChange?: TLOnHandleChangeHandler<T>
|
||||
|
||||
/**
|
||||
* Not currently used.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
onBindingChange?: OnBindingChangeHandler<T>
|
||||
onBindingChange?: TLOnBindingChangeHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape's children change.
|
||||
|
|
@ -600,7 +600,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns An array of shape updates, or void.
|
||||
* @public
|
||||
*/
|
||||
onChildrenChange?: OnChildrenChangeHandler<T>
|
||||
onChildrenChange?: TLOnChildrenChangeHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape's handle is double clicked.
|
||||
|
|
@ -610,7 +610,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onDoubleClickHandle?: OnDoubleClickHandleHandler<T>
|
||||
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape's edge is double clicked.
|
||||
|
|
@ -619,7 +619,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onDoubleClickEdge?: OnDoubleClickHandler<T>
|
||||
onDoubleClickEdge?: TLOnDoubleClickHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape is double clicked.
|
||||
|
|
@ -628,7 +628,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onDoubleClick?: OnDoubleClickHandler<T>
|
||||
onDoubleClick?: TLOnDoubleClickHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape is clicked.
|
||||
|
|
@ -637,7 +637,7 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @returns A change to apply to the shape, or void.
|
||||
* @public
|
||||
*/
|
||||
onClick?: OnClickHandler<T>
|
||||
onClick?: TLOnClickHandler<T>
|
||||
|
||||
/**
|
||||
* A callback called when a shape finishes being editing.
|
||||
|
|
@ -645,25 +645,25 @@ export abstract class TLShapeUtil<T extends TLUnknownShape = TLUnknownShape> {
|
|||
* @param shape - The shape.
|
||||
* @public
|
||||
*/
|
||||
onEditEnd?: OnEditEndHandler<T>
|
||||
onEditEnd?: TLOnEditEndHandler<T>
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export type OnBeforeCreateHandler<T extends TLShape> = (next: T) => T | void
|
||||
export type TLOnBeforeCreateHandler<T extends TLShape> = (next: T) => T | void
|
||||
/** @public */
|
||||
export type OnBeforeUpdateHandler<T extends TLShape> = (prev: T, next: T) => T | void
|
||||
export type TLOnBeforeUpdateHandler<T extends TLShape> = (prev: T, next: T) => T | void
|
||||
/** @public */
|
||||
export type OnTranslateStartHandler<T extends TLShape> = EventStartHandler<T>
|
||||
export type TLOnTranslateStartHandler<T extends TLShape> = TLEventStartHandler<T>
|
||||
/** @public */
|
||||
export type OnTranslateHandler<T extends TLShape> = EventChangeHandler<T>
|
||||
export type TLOnTranslateHandler<T extends TLShape> = TLEventChangeHandler<T>
|
||||
/** @public */
|
||||
export type OnTranslateEndHandler<T extends TLShape> = EventChangeHandler<T>
|
||||
export type TLOnTranslateEndHandler<T extends TLShape> = TLEventChangeHandler<T>
|
||||
/** @public */
|
||||
export type OnRotateStartHandler<T extends TLShape> = EventStartHandler<T>
|
||||
export type TLOnRotateStartHandler<T extends TLShape> = TLEventStartHandler<T>
|
||||
/** @public */
|
||||
export type OnRotateHandler<T extends TLShape> = EventChangeHandler<T>
|
||||
export type TLOnRotateHandler<T extends TLShape> = TLEventChangeHandler<T>
|
||||
/** @public */
|
||||
export type OnRotateEndHandler<T extends TLShape> = EventChangeHandler<T>
|
||||
export type TLOnRotateEndHandler<T extends TLShape> = TLEventChangeHandler<T>
|
||||
|
||||
/**
|
||||
* The type of resize.
|
||||
|
|
@ -700,30 +700,30 @@ export type TLResizeInfo<T extends TLShape> = {
|
|||
}
|
||||
|
||||
/** @public */
|
||||
export type OnResizeHandler<T extends TLShape> = (
|
||||
export type TLOnResizeHandler<T extends TLShape> = (
|
||||
shape: T,
|
||||
info: TLResizeInfo<T>
|
||||
) => Partial<TLShapePartial<T>> | undefined | void
|
||||
|
||||
/** @public */
|
||||
export type OnResizeStartHandler<T extends TLShape> = EventStartHandler<T>
|
||||
export type TLOnResizeStartHandler<T extends TLShape> = TLEventStartHandler<T>
|
||||
|
||||
/** @public */
|
||||
export type OnResizeEndHandler<T extends TLShape> = EventChangeHandler<T>
|
||||
export type TLOnResizeEndHandler<T extends TLShape> = TLEventChangeHandler<T>
|
||||
|
||||
/* -------------------- Dragging -------------------- */
|
||||
|
||||
/** @public */
|
||||
export type OnDragHandler<T extends TLShape, R = void> = (shape: T, shapes: TLShape[]) => R
|
||||
export type TLOnDragHandler<T extends TLShape, R = void> = (shape: T, shapes: TLShape[]) => R
|
||||
|
||||
/** @internal */
|
||||
export type OnBindingChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
export type TLOnBindingChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
|
||||
/** @public */
|
||||
export type OnChildrenChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial[] | void
|
||||
export type TLOnChildrenChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial[] | void
|
||||
|
||||
/** @public */
|
||||
export type OnHandleChangeHandler<T extends TLShape> = (
|
||||
export type TLOnHandleChangeHandler<T extends TLShape> = (
|
||||
shape: T,
|
||||
info: {
|
||||
handle: TLHandle
|
||||
|
|
@ -732,16 +732,16 @@ export type OnHandleChangeHandler<T extends TLShape> = (
|
|||
) => TLShapePartial<T> | void
|
||||
|
||||
/** @public */
|
||||
export type OnClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
export type TLOnClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
/** @public */
|
||||
export type OnEditEndHandler<T extends TLShape> = (shape: T) => void
|
||||
export type TLOnEditEndHandler<T extends TLShape> = (shape: T) => void
|
||||
/** @public */
|
||||
export type OnDoubleClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
export type TLOnDoubleClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
/** @public */
|
||||
export type OnDoubleClickHandleHandler<T extends TLShape> = (
|
||||
export type TLOnDoubleClickHandleHandler<T extends TLShape> = (
|
||||
shape: T,
|
||||
handle: TLHandle
|
||||
) => TLShapePartial<T> | void
|
||||
|
||||
type EventStartHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
type EventChangeHandler<T extends TLShape> = (initial: T, current: T) => TLShapePartial<T> | void
|
||||
type TLEventStartHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void
|
||||
type TLEventChangeHandler<T extends TLShape> = (initial: T, current: T) => TLShapePartial<T> | void
|
||||
|
|
@ -6,18 +6,18 @@ import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../../../constants'
|
|||
import { stopEventPropagation } from '../../../utils/dom'
|
||||
import { WeakMapCache } from '../../../utils/WeakMapCache'
|
||||
import { Editor } from '../../Editor'
|
||||
import { ShapeUtil, TLOnEditEndHandler, TLOnResizeHandler, TLShapeUtilFlag } from '../ShapeUtil'
|
||||
import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
|
||||
import { resizeScaled } from '../shared/resizeScaled'
|
||||
import { TLExportColors } from '../shared/TLExportColors'
|
||||
import { useEditableText } from '../shared/useEditableText'
|
||||
import { OnEditEndHandler, OnResizeHandler, TLShapeUtil, TLShapeUtilFlag } from '../TLShapeUtil'
|
||||
|
||||
export { INDENT } from './TextHelpers'
|
||||
|
||||
const sizeCache = new WeakMapCache<TLTextShape['props'], { height: number; width: number }>()
|
||||
|
||||
/** @public */
|
||||
export class TLTextUtil extends TLShapeUtil<TLTextShape> {
|
||||
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
||||
static override type = 'text'
|
||||
|
||||
canEdit = () => true
|
||||
|
|
@ -201,7 +201,7 @@ export class TLTextUtil extends TLShapeUtil<TLTextShape> {
|
|||
return groupEl
|
||||
}
|
||||
|
||||
onResize: OnResizeHandler<TLTextShape> = (shape, info) => {
|
||||
onResize: TLOnResizeHandler<TLTextShape> = (shape, info) => {
|
||||
const { initialBounds, initialShape, scaleX, handle } = info
|
||||
|
||||
if (info.mode === 'scale_shape' || (handle !== 'right' && handle !== 'left')) {
|
||||
|
|
@ -256,7 +256,7 @@ export class TLTextUtil extends TLShapeUtil<TLTextShape> {
|
|||
}
|
||||
}
|
||||
|
||||
onEditEnd: OnEditEndHandler<TLTextShape> = (shape) => {
|
||||
onEditEnd: TLOnEditEndHandler<TLTextShape> = (shape) => {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
|
|
@ -6,11 +6,11 @@ import { DefaultSpinner } from '../../../components/DefaultSpinner'
|
|||
import { HTMLContainer } from '../../../components/HTMLContainer'
|
||||
import { useIsEditing } from '../../../hooks/useIsEditing'
|
||||
import { usePrefersReducedMotion } from '../../../utils/dom'
|
||||
import { TLBoxUtil } from '../TLBoxUtil'
|
||||
import { BaseBoxShapeUtil } from '../BaseBoxShapeUtil'
|
||||
import { HyperlinkButton } from '../shared/HyperlinkButton'
|
||||
|
||||
/** @public */
|
||||
export class TLVideoUtil extends TLBoxUtil<TLVideoShape> {
|
||||
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
|
||||
static override type = 'video'
|
||||
|
||||
override canEdit = () => true
|
||||
|
|
@ -63,7 +63,7 @@ function serializeVideo(id: string): string {
|
|||
|
||||
const TLVideoUtilComponent = track(function TLVideoUtilComponent(props: {
|
||||
shape: TLVideoShape
|
||||
videoUtil: TLVideoUtil
|
||||
videoUtil: VideoShapeUtil
|
||||
}) {
|
||||
const { shape, videoUtil } = props
|
||||
const showControls = videoUtil.editor.getBounds(shape).w * videoUtil.editor.zoomLevel >= 110
|
||||
|
|
@ -10,7 +10,7 @@ import React from 'react'
|
|||
import { LABEL_FONT_SIZES, TEXT_PROPS } from '../../../constants'
|
||||
import { stopEventPropagation } from '../../../utils/dom'
|
||||
import { isLegacyAlign } from '../../../utils/legacy'
|
||||
import { TextHelpers } from '../TLTextUtil/TextHelpers'
|
||||
import { TextHelpers } from '../TextShapeUtil/TextHelpers'
|
||||
import { useEditableText } from './useEditableText'
|
||||
|
||||
export const TextLabel = React.memo(function TextLabel<
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Box2d, Vec2d } from '@tldraw/primitives'
|
||||
import { Vec2dModel } from '@tldraw/tlschema'
|
||||
import { TLBoxLike } from '../../statechart/TLBoxTool/TLBoxTool'
|
||||
import { TLResizeHandle } from '../../types/selection-types'
|
||||
import { TLResizeMode } from '../TLShapeUtil'
|
||||
import { TLBaseBoxShape } from '../BaseBoxShapeUtil'
|
||||
import { TLResizeMode } from '../ShapeUtil'
|
||||
|
||||
export type ResizeBoxOptions = Partial<{
|
||||
minWidth: number
|
||||
|
|
@ -12,7 +12,7 @@ export type ResizeBoxOptions = Partial<{
|
|||
}>
|
||||
|
||||
export const resizeBox = (
|
||||
shape: TLBoxLike,
|
||||
shape: TLBaseBoxShape,
|
||||
info: {
|
||||
newPoint: Vec2dModel
|
||||
handle: TLResizeHandle
|
||||
|
|
@ -20,7 +20,7 @@ export const resizeBox = (
|
|||
scaleX: number
|
||||
scaleY: number
|
||||
initialBounds: Box2d
|
||||
initialShape: TLBoxLike
|
||||
initialShape: TLBaseBoxShape
|
||||
},
|
||||
opts = {} as ResizeBoxOptions
|
||||
) => {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
|
|||
import { useValue } from 'signia-react'
|
||||
import { useEditor } from '../../../hooks/useEditor'
|
||||
import { preventDefault, stopEventPropagation } from '../../../utils/dom'
|
||||
import { INDENT, TextHelpers } from '../TLTextUtil/TextHelpers'
|
||||
import { INDENT, TextHelpers } from '../TextShapeUtil/TextHelpers'
|
||||
|
||||
export function useEditableText<T extends Extract<TLShape, { props: { text: string } }>>(
|
||||
id: T['id'],
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { StateNode } from '../StateNode'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLArrowTool extends StateNode {
|
||||
export class ArrowShapeTool extends StateNode {
|
||||
static override id = 'arrow'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing]
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { createShapeId, TLArrowShape } from '@tldraw/tlschema'
|
||||
import { TLArrowUtil } from '../../../shapeutils/TLArrowUtil/TLArrowUtil'
|
||||
import { ArrowShapeUtil } from '../../../shapeutils/ArrowShapeUtil/ArrowShapeUtil'
|
||||
import { TLEventHandlers } from '../../../types/event-types'
|
||||
import { StateNode } from '../../StateNode'
|
||||
import { TLArrowTool } from '../TLArrowTool'
|
||||
import { ArrowShapeTool } from '../ArrowShapeTool'
|
||||
|
||||
export class Pointing extends StateNode {
|
||||
static override id = 'pointing'
|
||||
|
|
@ -31,7 +31,7 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.didTimeout = false
|
||||
|
||||
const shapeType = (this.parent as TLArrowTool).shapeType
|
||||
const shapeType = (this.parent as ArrowShapeTool).shapeType
|
||||
|
||||
this.editor.mark('creating')
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ export class Pointing extends StateNode {
|
|||
},
|
||||
])
|
||||
|
||||
const util = this.editor.getShapeUtil(TLArrowUtil)
|
||||
const util = this.editor.getShapeUtil(ArrowShapeUtil)
|
||||
const shape = this.editor.getShapeById<TLArrowShape>(id)
|
||||
if (!shape) return
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ export class Pointing extends StateNode {
|
|||
}
|
||||
|
||||
if (!this.didTimeout) {
|
||||
const util = this.editor.getShapeUtil(TLArrowUtil)
|
||||
const util = this.editor.getShapeUtil(ArrowShapeUtil)
|
||||
const shape = this.editor.getShapeById<TLArrowShape>(this.shape.id)
|
||||
|
||||
if (!shape) return
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
import { TLStyleType } from '@tldraw/tlschema'
|
||||
import { StateNode } from '../StateNode'
|
||||
|
||||
import { TLBaseShape, TLStyleType } from '@tldraw/tlschema'
|
||||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
/** @public */
|
||||
export type TLBoxLike = TLBaseShape<string, { w: number; h: number }>
|
||||
|
||||
/** @public */
|
||||
export abstract class TLBoxTool extends StateNode {
|
||||
export abstract class BaseBoxShapeTool extends StateNode {
|
||||
static override id = 'box'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing]
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import { Vec2d } from '@tldraw/primitives'
|
||||
import { createShapeId } from '@tldraw/tlschema'
|
||||
import { TLBaseBoxShape } from '../../../shapeutils/BaseBoxShapeUtil'
|
||||
import { TLEventHandlers } from '../../../types/event-types'
|
||||
import { StateNode } from '../../StateNode'
|
||||
import { TLBoxLike, TLBoxTool } from '../TLBoxTool'
|
||||
import { BaseBoxShapeTool } from '../BaseBoxShapeTool'
|
||||
|
||||
export class Pointing extends StateNode {
|
||||
static override id = 'pointing'
|
||||
|
|
@ -20,7 +21,7 @@ export class Pointing extends StateNode {
|
|||
if (this.editor.inputs.isDragging) {
|
||||
const { originPagePoint } = this.editor.inputs
|
||||
|
||||
const shapeType = (this.parent as TLBoxTool)!.shapeType as TLBoxLike['type']
|
||||
const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']
|
||||
|
||||
const id = createShapeId()
|
||||
|
||||
|
|
@ -76,7 +77,7 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
const shapeType = (this.parent as TLBoxTool)!.shapeType as TLBoxLike['type']
|
||||
const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']
|
||||
|
||||
const id = createShapeId()
|
||||
|
||||
|
|
@ -91,8 +92,8 @@ export class Pointing extends StateNode {
|
|||
},
|
||||
])
|
||||
|
||||
const shape = this.editor.getShapeById<TLBoxLike>(id)!
|
||||
const { w, h } = this.editor.getShapeUtil(shape).defaultProps() as TLBoxLike['props']
|
||||
const shape = this.editor.getShapeById<TLBaseBoxShape>(id)!
|
||||
const { w, h } = this.editor.getShapeUtil(shape).defaultProps() as TLBaseBoxShape['props']
|
||||
const delta = this.editor.getDeltaInParentSpace(shape, new Vec2d(w / 2, h / 2))
|
||||
|
||||
this.editor.updateShapes([
|
||||
|
|
@ -4,7 +4,7 @@ import { StateNode } from '../StateNode'
|
|||
import { Drawing } from './children/Drawing'
|
||||
import { Idle } from './children/Idle'
|
||||
|
||||
export class TLDrawTool extends StateNode {
|
||||
export class DrawShapeTool extends StateNode {
|
||||
static override id = 'draw'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Drawing]
|
||||
|
|
@ -10,10 +10,10 @@ import {
|
|||
import { last, structuredClone } from '@tldraw/utils'
|
||||
import { DRAG_DISTANCE } from '../../../../constants'
|
||||
import { uniqueId } from '../../../../utils/data'
|
||||
import { TLDrawUtil } from '../../../shapeutils/TLDrawUtil/TLDrawUtil'
|
||||
import { DrawShapeUtil } from '../../../shapeutils/DrawShapeUtil/DrawShapeUtil'
|
||||
import { TLEventHandlers, TLPointerEventInfo } from '../../../types/event-types'
|
||||
|
||||
import { TLHighlightUtil } from '../../../shapeutils/TLHighlightUtil/TLHighlightUtil'
|
||||
import { HighlightShapeUtil } from '../../../shapeutils/HighlightShapeUtil/HighlightShapeUtil'
|
||||
import { StateNode } from '../../StateNode'
|
||||
|
||||
type DrawableShape = TLDrawShape | TLHighlightShape
|
||||
|
|
@ -29,8 +29,8 @@ export class Drawing extends StateNode {
|
|||
|
||||
util =
|
||||
this.shapeType === 'highlight'
|
||||
? this.editor.getShapeUtil(TLHighlightUtil)
|
||||
: this.editor.getShapeUtil(TLDrawUtil)
|
||||
? this.editor.getShapeUtil(HighlightShapeUtil)
|
||||
: this.editor.getShapeUtil(DrawShapeUtil)
|
||||
|
||||
isPen = false
|
||||
|
||||
|
|
@ -4,7 +4,7 @@ import { Erasing } from './children/Erasing'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLEraserTool extends StateNode {
|
||||
export class EraserShapeTool extends StateNode {
|
||||
static override id = 'eraser'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing, Erasing]
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { TLStyleType } from '@tldraw/tlschema'
|
||||
import { TLBoxTool } from '../TLBoxTool/TLBoxTool'
|
||||
import { BaseBoxShapeTool } from '../BaseBoxShapeTool/BaseBoxShapeTool'
|
||||
|
||||
export class TLFrameTool extends TLBoxTool {
|
||||
export class FrameShapeTool extends BaseBoxShapeTool {
|
||||
static override id = 'frame'
|
||||
static initial = 'idle'
|
||||
|
||||
|
|
@ -4,7 +4,7 @@ import { TLStyleType } from '@tldraw/tlschema'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLGeoTool extends StateNode {
|
||||
export class GeoShapeTool extends StateNode {
|
||||
static override id = 'geo'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing]
|
||||
|
|
@ -6,7 +6,7 @@ import { Dragging } from './children/Dragging'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLHandTool extends StateNode {
|
||||
export class HandTool extends StateNode {
|
||||
static override id = 'hand'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing, Dragging]
|
||||
|
|
@ -2,10 +2,10 @@ import { TLStyleType } from '@tldraw/tlschema'
|
|||
import { StateNode } from '../StateNode'
|
||||
|
||||
// shared custody
|
||||
import { Drawing } from '../TLDrawTool/children/Drawing'
|
||||
import { Idle } from '../TLDrawTool/children/Idle'
|
||||
import { Drawing } from '../DrawShapeTool/children/Drawing'
|
||||
import { Idle } from '../DrawShapeTool/children/Idle'
|
||||
|
||||
export class TLHighlightTool extends StateNode {
|
||||
export class HighlightShapeTool extends StateNode {
|
||||
static override id = 'highlight'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Drawing]
|
||||
|
|
@ -3,7 +3,7 @@ import { StateNode } from '../StateNode'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Lasering } from './children/Lasering'
|
||||
|
||||
export class TLLaserTool extends StateNode {
|
||||
export class LaserTool extends StateNode {
|
||||
static override id = 'laser'
|
||||
|
||||
static initial = 'idle'
|
||||
|
|
@ -4,7 +4,7 @@ import { StateNode } from '../StateNode'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLLineTool extends StateNode {
|
||||
export class LineShapeTool extends StateNode {
|
||||
static override id = 'line'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing]
|
||||
|
|
@ -4,7 +4,7 @@ import { TLHandle, TLLineShape, TLShapeId, createShapeId } from '@tldraw/tlschem
|
|||
import { last, structuredClone } from '@tldraw/utils'
|
||||
import { TLEventHandlers, TLInterruptEvent } from '../../../types/event-types'
|
||||
import { StateNode } from '../../StateNode'
|
||||
import { TLLineTool } from '../TLLineTool'
|
||||
import { LineShapeTool } from '../LineShapeTool'
|
||||
|
||||
export class Pointing extends StateNode {
|
||||
static override id = 'pointing'
|
||||
|
|
@ -82,7 +82,7 @@ export class Pointing extends StateNode {
|
|||
this.editor.createShapes([
|
||||
{
|
||||
id,
|
||||
type: (this.parent as TLLineTool).shapeType,
|
||||
type: (this.parent as LineShapeTool).shapeType,
|
||||
x: currentPagePoint.x,
|
||||
y: currentPagePoint.y,
|
||||
},
|
||||
|
|
@ -3,7 +3,7 @@ import { StateNode } from '../StateNode'
|
|||
import { Idle } from './children/Idle'
|
||||
import { Pointing } from './children/Pointing'
|
||||
|
||||
export class TLNoteTool extends StateNode {
|
||||
export class NoteShapeTool extends StateNode {
|
||||
static override id = 'note'
|
||||
static initial = 'idle'
|
||||
static children = () => [Idle, Pointing]
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { TLNoteShape, createShapeId } from '@tldraw/tlschema'
|
||||
import { TLNoteUtil } from '../../../shapeutils/TLNoteUtil/TLNoteUtil'
|
||||
import { NoteShapeUtil } from '../../../shapeutils/NoteShapeUtil/NoteShapeUtil'
|
||||
import { TLEventHandlers, TLInterruptEvent, TLPointerEventInfo } from '../../../types/event-types'
|
||||
import { StateNode } from '../../StateNode'
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ export class Pointing extends StateNode {
|
|||
true
|
||||
)
|
||||
|
||||
const util = this.editor.getShapeUtil(TLNoteUtil)
|
||||
const util = this.editor.getShapeUtil(NoteShapeUtil)
|
||||
const shape = this.editor.getShapeById<TLNoteShape>(id)!
|
||||
const bounds = util.bounds(shape)
|
||||
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { TLEventHandlers } from '../types/event-types'
|
||||
import { SelectTool } from './SelectTool/SelectTool'
|
||||
import { StateNode } from './StateNode'
|
||||
import { TLSelectTool } from './TLSelectTool/TLSelectTool'
|
||||
import { TLZoomTool } from './TLZoomTool/TLZoomTool'
|
||||
import { ZoomTool } from './ZoomTool/ZoomTool'
|
||||
|
||||
export class RootState extends StateNode {
|
||||
static override id = 'root'
|
||||
static initial = 'select'
|
||||
static children = () => [TLSelectTool, TLZoomTool]
|
||||
static children = () => [SelectTool, ZoomTool]
|
||||
|
||||
onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {
|
||||
switch (info.code) {
|
||||
|
|
@ -19,7 +19,7 @@ import { Rotating } from './children/Rotating'
|
|||
import { ScribbleBrushing } from './children/ScribbleBrushing'
|
||||
import { Translating } from './children/Translating'
|
||||
|
||||
export class TLSelectTool extends StateNode {
|
||||
export class SelectTool extends StateNode {
|
||||
static override id = 'select'
|
||||
static initial = 'idle'
|
||||
static children = () => [
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
VecLike,
|
||||
} from '@tldraw/primitives'
|
||||
import { TLPageId, TLShape, TLShapeId } from '@tldraw/tlschema'
|
||||
import { TLShapeUtil } from '../../../shapeutils/TLShapeUtil'
|
||||
import { ShapeUtil } from '../../../shapeutils/ShapeUtil'
|
||||
import {
|
||||
TLCancelEvent,
|
||||
TLEventHandlers,
|
||||
|
|
@ -103,7 +103,7 @@ export class Brushing extends StateNode {
|
|||
let A: VecLike,
|
||||
B: VecLike,
|
||||
shape: TLShape,
|
||||
util: TLShapeUtil<TLShape>,
|
||||
util: ShapeUtil<TLShape>,
|
||||
pageBounds: Box2d | undefined,
|
||||
pageTransform: Matrix2d | undefined,
|
||||
localCorners: VecLike[]
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Vec2d } from '@tldraw/primitives'
|
||||
import { TLEventHandlers, UiExitHandler } from '../../../../../types/event-types'
|
||||
import { TLEventHandlers, TLExitEventHandler } from '../../../../../types/event-types'
|
||||
import { StateNode } from '../../../../StateNode'
|
||||
import { ShapeWithCrop, getTranslateCroppedImageChange } from './crop_helpers'
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ export class Idle extends StateNode {
|
|||
}
|
||||
}
|
||||
|
||||
onExit: UiExitHandler = () => {
|
||||
onExit: TLExitEventHandler = () => {
|
||||
this.editor.setCursor({ type: 'default' })
|
||||
|
||||
this.editor.off('change-history', this.cleanupCroppingState)
|
||||
|
|
@ -8,8 +8,12 @@ import {
|
|||
} from '@tldraw/tlschema'
|
||||
import { deepCopy } from '@tldraw/utils'
|
||||
import { MIN_CROP_SIZE } from '../../../../constants'
|
||||
import { TLImageUtil } from '../../../shapeutils/TLImageUtil/TLImageUtil'
|
||||
import { TLEventHandlers, TLPointerEventInfo, UiEnterHandler } from '../../../types/event-types'
|
||||
import { ImageShapeUtil } from '../../../shapeutils/ImageShapeUtil/ImageShapeUtil'
|
||||
import {
|
||||
TLEnterEventHandler,
|
||||
TLEventHandlers,
|
||||
TLPointerEventInfo,
|
||||
} from '../../../types/event-types'
|
||||
import { StateNode } from '../../StateNode'
|
||||
import { CursorTypeMap } from './PointingResizeHandle'
|
||||
|
||||
|
|
@ -28,7 +32,7 @@ export class Cropping extends StateNode {
|
|||
|
||||
private snapshot = {} as any as Snapshot
|
||||
|
||||
onEnter: UiEnterHandler = (
|
||||
onEnter: TLEnterEventHandler = (
|
||||
info: TLPointerEventInfo & {
|
||||
target: 'selection'
|
||||
handle: SelectionHandle
|
||||
|
|
@ -77,7 +81,7 @@ export class Cropping extends StateNode {
|
|||
const { shape, cursorHandleOffset } = this.snapshot
|
||||
|
||||
if (!shape) return
|
||||
const util = this.editor.getShapeUtil(TLImageUtil)
|
||||
const util = this.editor.getShapeUtil(ImageShapeUtil)
|
||||
if (!util) return
|
||||
|
||||
const props = shape.props as TLImageShapeProps
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue