@tldraw/editor 3.8.0-canary.dfac53c137bb → 3.8.0-canary.e6516a26404a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +48 -151
- package/dist-cjs/index.js +8 -11
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -1
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
- package/dist-cjs/lib/config/TLSessionStateSnapshot.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +16 -27
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
- package/dist-cjs/lib/editor/managers/TextManager.js +0 -1
- package/dist-cjs/lib/editor/managers/TextManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
- package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
- package/dist-cjs/lib/hooks/useDocumentEvents.js +3 -1
- package/dist-cjs/lib/hooks/useDocumentEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +0 -4
- package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +3 -3
- package/dist-cjs/lib/options.js +1 -3
- package/dist-cjs/lib/options.js.map +2 -2
- package/dist-cjs/lib/utils/dom.js +0 -6
- package/dist-cjs/lib/utils/dom.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +48 -151
- package/dist-esm/index.mjs +1 -5
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +1 -1
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
- package/dist-esm/lib/config/TLSessionStateSnapshot.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +16 -27
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/TextManager.mjs +0 -1
- package/dist-esm/lib/editor/managers/TextManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
- package/dist-esm/lib/hooks/useDocumentEvents.mjs +4 -2
- package/dist-esm/lib/hooks/useDocumentEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +0 -4
- package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +3 -3
- package/dist-esm/lib/options.mjs +1 -3
- package/dist-esm/lib/options.mjs.map +2 -2
- package/dist-esm/lib/utils/dom.mjs +0 -6
- package/dist-esm/lib/utils/dom.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +1 -2
- package/package.json +20 -20
- package/src/index.ts +1 -16
- package/src/lib/components/default-components/DefaultCanvas.tsx +1 -1
- package/src/lib/config/TLSessionStateSnapshot.ts +1 -3
- package/src/lib/editor/Editor.ts +32 -59
- package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +4 -4
- package/src/lib/editor/managers/TextManager.ts +0 -1
- package/src/lib/editor/shapes/ShapeUtil.ts +1 -30
- package/src/lib/editor/types/emit-types.ts +0 -1
- package/src/lib/editor/types/external-content.ts +50 -90
- package/src/lib/exports/StyleEmbedder.ts +1 -1
- package/src/lib/hooks/useDocumentEvents.ts +11 -2
- package/src/lib/hooks/usePassThroughWheelEvents.ts +0 -7
- package/src/lib/options.ts +0 -11
- package/src/lib/utils/dom.ts +0 -12
- package/src/version.ts +3 -3
- package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js +0 -66
- package/dist-cjs/lib/editor/shapes/shared/resizeScaled.js.map +0 -7
- package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs +0 -46
- package/dist-esm/lib/editor/shapes/shared/resizeScaled.mjs.map +0 -7
- package/src/lib/editor/shapes/shared/resizeScaled.ts +0 -61
package/src/lib/editor/Editor.ts
CHANGED
|
@@ -155,7 +155,7 @@ import {
|
|
|
155
155
|
TLPointerEventInfo,
|
|
156
156
|
TLWheelEventInfo,
|
|
157
157
|
} from './types/event-types'
|
|
158
|
-
import {
|
|
158
|
+
import { TLExternalAssetContent, TLExternalContent } from './types/external-content'
|
|
159
159
|
import { TLHistoryBatchOptions } from './types/history-types'
|
|
160
160
|
import {
|
|
161
161
|
OptionalKeys,
|
|
@@ -929,21 +929,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
929
929
|
return shapeUtil
|
|
930
930
|
}
|
|
931
931
|
|
|
932
|
-
/**
|
|
933
|
-
* Returns true if the editor has a shape util for the given shape / shape type.
|
|
934
|
-
*
|
|
935
|
-
* @param shape - A shape, shape partial, or shape type.
|
|
936
|
-
*/
|
|
937
|
-
hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean
|
|
938
|
-
hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean
|
|
939
|
-
hasShapeUtil<T extends ShapeUtil>(
|
|
940
|
-
type: T extends ShapeUtil<infer R> ? R['type'] : string
|
|
941
|
-
): boolean
|
|
942
|
-
hasShapeUtil(arg: string | { type: string }): boolean {
|
|
943
|
-
const type = typeof arg === 'string' ? arg : arg.type
|
|
944
|
-
return hasOwnProperty(this.shapeUtils, type)
|
|
945
|
-
}
|
|
946
|
-
|
|
947
932
|
/* ------------------- Binding Utils ------------------ */
|
|
948
933
|
/**
|
|
949
934
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
|
@@ -1400,8 +1385,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
1400
1385
|
*
|
|
1401
1386
|
* @example
|
|
1402
1387
|
* ```ts
|
|
1403
|
-
*
|
|
1404
|
-
*
|
|
1388
|
+
* state.getStateDescendant('select')
|
|
1389
|
+
* state.getStateDescendant('select.brushing')
|
|
1405
1390
|
* ```
|
|
1406
1391
|
*
|
|
1407
1392
|
* @param path - The descendant's path of state ids, separated by periods.
|
|
@@ -1681,7 +1666,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
1681
1666
|
* @public
|
|
1682
1667
|
*/
|
|
1683
1668
|
isAncestorSelected(shape: TLShape | TLShapeId): boolean {
|
|
1684
|
-
const id = typeof shape === 'string' ? shape :
|
|
1669
|
+
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
|
1685
1670
|
const _shape = this.getShape(id)
|
|
1686
1671
|
if (!_shape) return false
|
|
1687
1672
|
const selectedShapeIds = this.getSelectedShapeIds()
|
|
@@ -1938,7 +1923,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
1938
1923
|
* @public
|
|
1939
1924
|
*/
|
|
1940
1925
|
setFocusedGroup(shape: TLShapeId | TLGroupShape | null): this {
|
|
1941
|
-
const id = typeof shape === 'string' ? shape :
|
|
1926
|
+
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
|
1942
1927
|
|
|
1943
1928
|
if (id !== null) {
|
|
1944
1929
|
const shape = this.getShape(id)
|
|
@@ -2021,7 +2006,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
2021
2006
|
* @public
|
|
2022
2007
|
*/
|
|
2023
2008
|
setEditingShape(shape: TLShapeId | TLShape | null): this {
|
|
2024
|
-
const id = typeof shape === 'string' ? shape :
|
|
2009
|
+
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
|
2025
2010
|
if (id !== this.getEditingShapeId()) {
|
|
2026
2011
|
if (id) {
|
|
2027
2012
|
const shape = this.getShape(id)
|
|
@@ -2082,7 +2067,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
2082
2067
|
* @public
|
|
2083
2068
|
*/
|
|
2084
2069
|
setHoveredShape(shape: TLShapeId | TLShape | null): this {
|
|
2085
|
-
const id = typeof shape === 'string' ? shape :
|
|
2070
|
+
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
|
2086
2071
|
if (id === this.getHoveredShapeId()) return this
|
|
2087
2072
|
this.run(
|
|
2088
2073
|
() => {
|
|
@@ -2231,7 +2216,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
2231
2216
|
* @public
|
|
2232
2217
|
*/
|
|
2233
2218
|
setCroppingShape(shape: TLShapeId | TLShape | null): this {
|
|
2234
|
-
const id = typeof shape === 'string' ? shape :
|
|
2219
|
+
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
|
2235
2220
|
if (id !== this.getCroppingShapeId()) {
|
|
2236
2221
|
this.run(
|
|
2237
2222
|
() => {
|
|
@@ -6775,8 +6760,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
6775
6760
|
}
|
|
6776
6761
|
}
|
|
6777
6762
|
|
|
6778
|
-
let didResize = false
|
|
6779
|
-
|
|
6780
6763
|
if (util.onResize && util.canResize(initialShape)) {
|
|
6781
6764
|
// get the model changes from the shape util
|
|
6782
6765
|
const newPagePoint = this._scalePagePoint(
|
|
@@ -6815,30 +6798,24 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
6815
6798
|
)
|
|
6816
6799
|
}
|
|
6817
6800
|
|
|
6818
|
-
const resizedShape = util.onResize(
|
|
6819
|
-
{ ...initialShape, x, y },
|
|
6820
|
-
{
|
|
6821
|
-
newPoint: newLocalPoint,
|
|
6822
|
-
handle: opts.dragHandle ?? 'bottom_right',
|
|
6823
|
-
// don't set isSingle to true for children
|
|
6824
|
-
mode: opts.mode ?? 'scale_shape',
|
|
6825
|
-
scaleX: myScale.x,
|
|
6826
|
-
scaleY: myScale.y,
|
|
6827
|
-
initialBounds,
|
|
6828
|
-
initialShape,
|
|
6829
|
-
}
|
|
6830
|
-
)
|
|
6831
|
-
|
|
6832
|
-
if (resizedShape) {
|
|
6833
|
-
didResize = true
|
|
6834
|
-
}
|
|
6835
|
-
|
|
6836
6801
|
workingShape = applyPartialToRecordWithProps(workingShape, {
|
|
6837
6802
|
id,
|
|
6838
6803
|
type: initialShape.type as any,
|
|
6839
6804
|
x: newLocalPoint.x,
|
|
6840
6805
|
y: newLocalPoint.y,
|
|
6841
|
-
...
|
|
6806
|
+
...util.onResize(
|
|
6807
|
+
{ ...initialShape, x, y },
|
|
6808
|
+
{
|
|
6809
|
+
newPoint: newLocalPoint,
|
|
6810
|
+
handle: opts.dragHandle ?? 'bottom_right',
|
|
6811
|
+
// don't set isSingle to true for children
|
|
6812
|
+
mode: opts.mode ?? 'scale_shape',
|
|
6813
|
+
scaleX: myScale.x,
|
|
6814
|
+
scaleY: myScale.y,
|
|
6815
|
+
initialBounds,
|
|
6816
|
+
initialShape,
|
|
6817
|
+
}
|
|
6818
|
+
),
|
|
6842
6819
|
})
|
|
6843
6820
|
|
|
6844
6821
|
if (!opts.skipStartAndEndCallbacks) {
|
|
@@ -6849,11 +6826,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
6849
6826
|
}
|
|
6850
6827
|
|
|
6851
6828
|
this.updateShapes([workingShape])
|
|
6852
|
-
}
|
|
6853
|
-
|
|
6854
|
-
if (!didResize) {
|
|
6855
|
-
// reposition shape (rather than resizing it) based on where its resized center would be
|
|
6856
|
-
|
|
6829
|
+
} else {
|
|
6857
6830
|
const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center)
|
|
6858
6831
|
// get the model changes from the shape util
|
|
6859
6832
|
const newPageCenter = this._scalePagePoint(
|
|
@@ -7975,8 +7948,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
7975
7948
|
|
|
7976
7949
|
/** @internal */
|
|
7977
7950
|
externalAssetContentHandlers: {
|
|
7978
|
-
[K in
|
|
7979
|
-
[Key in K]:
|
|
7951
|
+
[K in TLExternalAssetContent['type']]: {
|
|
7952
|
+
[Key in K]:
|
|
7953
|
+
| null
|
|
7954
|
+
| ((info: TLExternalAssetContent & { type: Key }) => Promise<TLAsset | undefined>)
|
|
7980
7955
|
}[K]
|
|
7981
7956
|
} = {
|
|
7982
7957
|
file: null,
|
|
@@ -8005,9 +7980,9 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
8005
7980
|
*
|
|
8006
7981
|
* @public
|
|
8007
7982
|
*/
|
|
8008
|
-
registerExternalAssetHandler<T extends
|
|
7983
|
+
registerExternalAssetHandler<T extends TLExternalAssetContent['type']>(
|
|
8009
7984
|
type: T,
|
|
8010
|
-
handler: null | ((info:
|
|
7985
|
+
handler: null | ((info: TLExternalAssetContent & { type: T }) => Promise<TLAsset>)
|
|
8011
7986
|
): this {
|
|
8012
7987
|
this.externalAssetContentHandlers[type] = handler as any
|
|
8013
7988
|
return this
|
|
@@ -8075,11 +8050,11 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
8075
8050
|
* @param info - Info about the external content.
|
|
8076
8051
|
* @returns The asset.
|
|
8077
8052
|
*/
|
|
8078
|
-
async getAssetForExternalContent(info:
|
|
8053
|
+
async getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined> {
|
|
8079
8054
|
return await this.externalAssetContentHandlers[info.type]?.(info as any)
|
|
8080
8055
|
}
|
|
8081
8056
|
|
|
8082
|
-
hasExternalAssetHandler(type:
|
|
8057
|
+
hasExternalAssetHandler(type: TLExternalAssetContent['type']): boolean {
|
|
8083
8058
|
return !!this.externalAssetContentHandlers[type]
|
|
8084
8059
|
}
|
|
8085
8060
|
|
|
@@ -8801,8 +8776,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
8801
8776
|
// If our pointer moved only because we're following some other user, then don't
|
|
8802
8777
|
// update our last activity timestamp; otherwise, update it to the current timestamp.
|
|
8803
8778
|
info.type === 'pointer' && info.pointerId === INTERNAL_POINTER_IDS.CAMERA_MOVE
|
|
8804
|
-
?
|
|
8805
|
-
this._tickManager.now
|
|
8779
|
+
? this.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ??
|
|
8780
|
+
this._tickManager.now
|
|
8806
8781
|
: this._tickManager.now,
|
|
8807
8782
|
meta: {},
|
|
8808
8783
|
},
|
|
@@ -9367,8 +9342,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|
|
9367
9342
|
// todo: replace with new readonly mode?
|
|
9368
9343
|
if (this.getCrashingError()) return this
|
|
9369
9344
|
|
|
9370
|
-
this.emit('before-event', info)
|
|
9371
|
-
|
|
9372
9345
|
const { inputs } = this
|
|
9373
9346
|
const { type } = info
|
|
9374
9347
|
|
|
@@ -390,8 +390,8 @@ export class BoundsSnaps {
|
|
|
390
390
|
|
|
391
391
|
// at the same time, calculate how far we need to nudge the shape to 'snap' to the target point(s)
|
|
392
392
|
const nudge = new Vec(
|
|
393
|
-
lockedAxis === 'x' ? 0 :
|
|
394
|
-
lockedAxis === 'y' ? 0 :
|
|
393
|
+
lockedAxis === 'x' ? 0 : nearestSnapsX[0]?.nudge ?? 0,
|
|
394
|
+
lockedAxis === 'y' ? 0 : nearestSnapsY[0]?.nudge ?? 0
|
|
395
395
|
)
|
|
396
396
|
|
|
397
397
|
// ok we've figured out how much the box should be nudged, now let's find all the snap points
|
|
@@ -504,8 +504,8 @@ export class BoundsSnaps {
|
|
|
504
504
|
|
|
505
505
|
// at the same time, calculate how far we need to nudge the shape to 'snap' to the target point(s)
|
|
506
506
|
const nudge = new Vec(
|
|
507
|
-
isXLocked ? 0 :
|
|
508
|
-
isYLocked ? 0 :
|
|
507
|
+
isXLocked ? 0 : nearestSnapsX[0]?.nudge ?? 0,
|
|
508
|
+
isYLocked ? 0 : nearestSnapsY[0]?.nudge ?? 0
|
|
509
509
|
)
|
|
510
510
|
|
|
511
511
|
if (isAspectRatioLocked && isSelectionCorner(handle) && nudge.len() !== 0) {
|
|
@@ -230,7 +230,6 @@ export class TextManager {
|
|
|
230
230
|
elm.style.setProperty('font-weight', opts.fontWeight)
|
|
231
231
|
elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
|
|
232
232
|
elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
|
|
233
|
-
elm.style.setProperty('font-style', opts.fontStyle)
|
|
234
233
|
|
|
235
234
|
const shouldTruncateToFirstLine =
|
|
236
235
|
opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
|
|
@@ -5,12 +5,11 @@ import {
|
|
|
5
5
|
TLHandle,
|
|
6
6
|
TLPropsMigrations,
|
|
7
7
|
TLShape,
|
|
8
|
-
TLShapeCrop,
|
|
9
8
|
TLShapePartial,
|
|
10
9
|
TLUnknownShape,
|
|
11
10
|
} from '@tldraw/tlschema'
|
|
12
11
|
import { ReactElement } from 'react'
|
|
13
|
-
import { Box
|
|
12
|
+
import { Box } from '../../primitives/Box'
|
|
14
13
|
import { Vec } from '../../primitives/Vec'
|
|
15
14
|
import { Geometry2d } from '../../primitives/geometry/Geometry2d'
|
|
16
15
|
import type { Editor } from '../Editor'
|
|
@@ -420,19 +419,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
420
419
|
*/
|
|
421
420
|
onBeforeUpdate?(prev: Shape, next: Shape): Shape | void
|
|
422
421
|
|
|
423
|
-
/**
|
|
424
|
-
* A callback called when a shape changes from a crop.
|
|
425
|
-
*
|
|
426
|
-
* @param shape - The shape at the start of the crop.
|
|
427
|
-
* @param info - Info about the crop.
|
|
428
|
-
* @returns A change to apply to the shape, or void.
|
|
429
|
-
* @public
|
|
430
|
-
*/
|
|
431
|
-
onCrop?(
|
|
432
|
-
shape: Shape,
|
|
433
|
-
info: TLCropInfo<Shape>
|
|
434
|
-
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
|
|
435
|
-
|
|
436
422
|
/**
|
|
437
423
|
* A callback called when some other shapes are dragged over this one.
|
|
438
424
|
*
|
|
@@ -630,21 +616,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
|
|
630
616
|
onEditEnd?(shape: Shape): void
|
|
631
617
|
}
|
|
632
618
|
|
|
633
|
-
/**
|
|
634
|
-
* Info about a crop.
|
|
635
|
-
* @param handle - The handle being dragged.
|
|
636
|
-
* @param change - The distance the handle is moved.
|
|
637
|
-
* @param initialShape - The shape at the start of the resize.
|
|
638
|
-
* @public
|
|
639
|
-
*/
|
|
640
|
-
export interface TLCropInfo<T extends TLShape> {
|
|
641
|
-
handle: SelectionHandle
|
|
642
|
-
change: Vec
|
|
643
|
-
crop: TLShapeCrop
|
|
644
|
-
uncroppedSize: { w: number; h: number }
|
|
645
|
-
initialShape: T
|
|
646
|
-
}
|
|
647
|
-
|
|
648
619
|
/**
|
|
649
620
|
* The type of resize.
|
|
650
621
|
*
|
|
@@ -2,97 +2,57 @@ import { TLAssetId } from '@tldraw/tlschema'
|
|
|
2
2
|
import { VecLike } from '../../primitives/Vec'
|
|
3
3
|
import { TLContent } from './clipboard-types'
|
|
4
4
|
|
|
5
|
-
/** @public */
|
|
6
|
-
export interface TLTldrawExternalContentSource {
|
|
7
|
-
type: 'tldraw'
|
|
8
|
-
data: TLContent
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/** @public */
|
|
12
|
-
export interface TLExcalidrawExternalContentSource {
|
|
13
|
-
type: 'excalidraw'
|
|
14
|
-
data: any
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/** @public */
|
|
18
|
-
export interface TLTextExternalContentSource {
|
|
19
|
-
type: 'text'
|
|
20
|
-
data: string
|
|
21
|
-
subtype: 'json' | 'html' | 'text' | 'url'
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/** @public */
|
|
25
|
-
export interface TLErrorExternalContentSource {
|
|
26
|
-
type: 'error'
|
|
27
|
-
data: string | null
|
|
28
|
-
reason: string
|
|
29
|
-
}
|
|
30
|
-
|
|
31
5
|
/** @public */
|
|
32
6
|
export type TLExternalContentSource =
|
|
33
|
-
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
7
|
+
| {
|
|
8
|
+
type: 'tldraw'
|
|
9
|
+
data: TLContent
|
|
10
|
+
}
|
|
11
|
+
| {
|
|
12
|
+
type: 'excalidraw'
|
|
13
|
+
data: any
|
|
14
|
+
}
|
|
15
|
+
| {
|
|
16
|
+
type: 'text'
|
|
17
|
+
data: string
|
|
18
|
+
subtype: 'json' | 'html' | 'text' | 'url'
|
|
19
|
+
}
|
|
20
|
+
| {
|
|
21
|
+
type: 'error'
|
|
22
|
+
data: string | null
|
|
23
|
+
reason: string
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/** @public */
|
|
27
|
+
export type TLExternalContent<EmbedDefinition> = {
|
|
40
28
|
sources?: TLExternalContentSource[]
|
|
41
29
|
point?: VecLike
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
type: 'embed'
|
|
72
|
-
url: string
|
|
73
|
-
embed: EmbedDefinition
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/** @public */
|
|
77
|
-
export type TLExternalContent<EmbedDefinition> =
|
|
78
|
-
| TLTextExternalContent
|
|
79
|
-
| TLFilesExternalContent
|
|
80
|
-
| TLUrlExternalContent
|
|
81
|
-
| TLSvgTextExternalContent
|
|
82
|
-
| TLEmbedExternalContent<EmbedDefinition>
|
|
83
|
-
|
|
84
|
-
/** @public */
|
|
85
|
-
export interface TLFileExternalAsset {
|
|
86
|
-
type: 'file'
|
|
87
|
-
file: File
|
|
88
|
-
assetId?: TLAssetId
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/** @public */
|
|
92
|
-
export interface TLUrlExternalAsset {
|
|
93
|
-
type: 'url'
|
|
94
|
-
url: string
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/** @public */
|
|
98
|
-
export type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset
|
|
30
|
+
} & (
|
|
31
|
+
| {
|
|
32
|
+
type: 'text'
|
|
33
|
+
text: string
|
|
34
|
+
}
|
|
35
|
+
| {
|
|
36
|
+
type: 'files'
|
|
37
|
+
files: File[]
|
|
38
|
+
ignoreParent: boolean
|
|
39
|
+
}
|
|
40
|
+
| {
|
|
41
|
+
type: 'url'
|
|
42
|
+
url: string
|
|
43
|
+
}
|
|
44
|
+
| {
|
|
45
|
+
type: 'svg-text'
|
|
46
|
+
text: string
|
|
47
|
+
}
|
|
48
|
+
| {
|
|
49
|
+
type: 'embed'
|
|
50
|
+
url: string
|
|
51
|
+
embed: EmbedDefinition
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
/** @public */
|
|
56
|
+
export type TLExternalAssetContent =
|
|
57
|
+
| { type: 'file'; file: File; assetId?: TLAssetId }
|
|
58
|
+
| { type: 'url'; url: string }
|
|
@@ -54,7 +54,7 @@ export class StyleEmbedder {
|
|
|
54
54
|
: NO_STYLES
|
|
55
55
|
|
|
56
56
|
const parentStyles = shouldSkipInheritedParentStyles
|
|
57
|
-
?
|
|
57
|
+
? this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES
|
|
58
58
|
: NO_STYLES
|
|
59
59
|
|
|
60
60
|
const info: ElementStyleInfo = {
|
|
@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
|
|
|
2
2
|
import { useEffect } from 'react'
|
|
3
3
|
import { Editor } from '../editor/Editor'
|
|
4
4
|
import { TLKeyboardEventInfo } from '../editor/types/event-types'
|
|
5
|
-
import {
|
|
5
|
+
import { preventDefault, stopEventPropagation } from '../utils/dom'
|
|
6
6
|
import { isAccelKey } from '../utils/keyboard'
|
|
7
7
|
import { useContainer } from './useContainer'
|
|
8
8
|
import { useEditor } from './useEditor'
|
|
@@ -274,6 +274,15 @@ export function useDocumentEvents() {
|
|
|
274
274
|
}, [editor, container, isAppFocused])
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
+
const INPUTS = ['input', 'select', 'button', 'textarea']
|
|
278
|
+
|
|
277
279
|
function areShortcutsDisabled(editor: Editor) {
|
|
278
|
-
|
|
280
|
+
const { activeElement } = document
|
|
281
|
+
|
|
282
|
+
return (
|
|
283
|
+
editor.menus.hasOpenMenus() ||
|
|
284
|
+
(activeElement &&
|
|
285
|
+
(activeElement.getAttribute('contenteditable') ||
|
|
286
|
+
INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1))
|
|
287
|
+
)
|
|
279
288
|
}
|
|
@@ -11,13 +11,6 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
|
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
function onWheel(e: WheelEvent) {
|
|
13
13
|
if ((e as any).isSpecialRedispatchedEvent) return
|
|
14
|
-
|
|
15
|
-
// if the element is scrollable, don't redispatch the event
|
|
16
|
-
const elm = ref.current
|
|
17
|
-
if (elm && elm.scrollHeight > elm.clientHeight) {
|
|
18
|
-
return
|
|
19
|
-
}
|
|
20
|
-
|
|
21
14
|
preventDefault(e)
|
|
22
15
|
const cvs = container.querySelector('.tl-canvas')
|
|
23
16
|
if (!cvs) return
|
package/src/lib/options.ts
CHANGED
|
@@ -66,15 +66,6 @@ export interface TldrawOptions {
|
|
|
66
66
|
* external context providers. By default, this is `React.Fragment`.
|
|
67
67
|
*/
|
|
68
68
|
readonly exportProvider: ComponentType<{ children: React.ReactNode }>
|
|
69
|
-
/**
|
|
70
|
-
* How should the note shape resize? By default it does not resize (except automatically based on its text content),
|
|
71
|
-
* but you can set it to be user-resizable using scale.
|
|
72
|
-
*/
|
|
73
|
-
readonly noteShapeResizeMode: 'none' | 'scale'
|
|
74
|
-
/**
|
|
75
|
-
* By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
|
|
76
|
-
*/
|
|
77
|
-
readonly enableToolbarKeyboardShortcuts: boolean
|
|
78
69
|
}
|
|
79
70
|
|
|
80
71
|
/** @public */
|
|
@@ -120,6 +111,4 @@ export const defaultTldrawOptions = {
|
|
|
120
111
|
actionShortcutsLocation: 'swap',
|
|
121
112
|
createTextOnCanvasDoubleClick: true,
|
|
122
113
|
exportProvider: Fragment,
|
|
123
|
-
noteShapeResizeMode: 'none',
|
|
124
|
-
enableToolbarKeyboardShortcuts: true,
|
|
125
114
|
} as const satisfies TldrawOptions
|
package/src/lib/utils/dom.ts
CHANGED
|
@@ -90,15 +90,3 @@ export const setStyleProperty = (
|
|
|
90
90
|
if (!elm) return
|
|
91
91
|
elm.style.setProperty(property, value as string)
|
|
92
92
|
}
|
|
93
|
-
|
|
94
|
-
const INPUTS = ['input', 'select', 'button', 'textarea']
|
|
95
|
-
|
|
96
|
-
/** @internal */
|
|
97
|
-
export function activeElementShouldCaptureKeys() {
|
|
98
|
-
const { activeElement } = document
|
|
99
|
-
return !!(
|
|
100
|
-
activeElement &&
|
|
101
|
-
(activeElement.getAttribute('contenteditable') ||
|
|
102
|
-
INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
|
|
103
|
-
)
|
|
104
|
-
}
|
package/src/version.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// This file is automatically generated by internal/scripts/refresh-assets.ts.
|
|
2
2
|
// Do not edit manually. Or do, I'm a comment, not a cop.
|
|
3
3
|
|
|
4
|
-
export const version = '3.8.0-canary.
|
|
4
|
+
export const version = '3.8.0-canary.e6516a26404a'
|
|
5
5
|
export const publishDates = {
|
|
6
6
|
major: '2024-09-13T14:36:29.063Z',
|
|
7
|
-
minor: '2025-
|
|
8
|
-
patch: '2025-
|
|
7
|
+
minor: '2025-01-25T11:57:40.313Z',
|
|
8
|
+
patch: '2025-01-25T11:57:40.313Z',
|
|
9
9
|
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var resizeScaled_exports = {};
|
|
20
|
-
__export(resizeScaled_exports, {
|
|
21
|
-
resizeScaled: () => resizeScaled
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(resizeScaled_exports);
|
|
24
|
-
var import_utils = require("@tldraw/utils");
|
|
25
|
-
var import_Vec = require("../../../primitives/Vec");
|
|
26
|
-
function resizeScaled(shape, { initialBounds, scaleX, scaleY, newPoint, handle }) {
|
|
27
|
-
let scaleDelta;
|
|
28
|
-
switch (handle) {
|
|
29
|
-
case "bottom_left":
|
|
30
|
-
case "bottom_right":
|
|
31
|
-
case "top_left":
|
|
32
|
-
case "top_right": {
|
|
33
|
-
scaleDelta = Math.max(0.01, Math.max(Math.abs(scaleX), Math.abs(scaleY)));
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
|
-
case "left":
|
|
37
|
-
case "right": {
|
|
38
|
-
scaleDelta = Math.max(0.01, Math.abs(scaleX));
|
|
39
|
-
break;
|
|
40
|
-
}
|
|
41
|
-
case "bottom":
|
|
42
|
-
case "top": {
|
|
43
|
-
scaleDelta = Math.max(0.01, Math.abs(scaleY));
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
default: {
|
|
47
|
-
throw (0, import_utils.exhaustiveSwitchError)(handle);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
const offset = new import_Vec.Vec(0, 0);
|
|
51
|
-
if (scaleX < 0) {
|
|
52
|
-
offset.x = -(initialBounds.width * scaleDelta);
|
|
53
|
-
}
|
|
54
|
-
if (scaleY < 0) {
|
|
55
|
-
offset.y = -(initialBounds.height * scaleDelta);
|
|
56
|
-
}
|
|
57
|
-
const { x, y } = import_Vec.Vec.Add(newPoint, offset.rot(shape.rotation));
|
|
58
|
-
return {
|
|
59
|
-
x,
|
|
60
|
-
y,
|
|
61
|
-
props: {
|
|
62
|
-
scale: scaleDelta * shape.props.scale
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
//# sourceMappingURL=resizeScaled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/lib/editor/shapes/shared/resizeScaled.ts"],
|
|
4
|
-
"sourcesContent": ["import { TLBaseShape } from '@tldraw/tlschema'\nimport { exhaustiveSwitchError } from '@tldraw/utils'\nimport { Vec } from '../../../primitives/Vec'\nimport { TLResizeInfo } from '../ShapeUtil'\n\n/**\n * Resize a shape that has a scale prop.\n *\n * @param shape - The shape to resize\n * @param info - The resize info\n *\n * @public */\nexport function resizeScaled(\n\tshape: TLBaseShape<any, { scale: number }>,\n\t{ initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>\n) {\n\tlet scaleDelta: number\n\tswitch (handle) {\n\t\tcase 'bottom_left':\n\t\tcase 'bottom_right':\n\t\tcase 'top_left':\n\t\tcase 'top_right': {\n\t\t\tscaleDelta = Math.max(0.01, Math.max(Math.abs(scaleX), Math.abs(scaleY)))\n\t\t\tbreak\n\t\t}\n\t\tcase 'left':\n\t\tcase 'right': {\n\t\t\tscaleDelta = Math.max(0.01, Math.abs(scaleX))\n\t\t\tbreak\n\t\t}\n\t\tcase 'bottom':\n\t\tcase 'top': {\n\t\t\tscaleDelta = Math.max(0.01, Math.abs(scaleY))\n\t\t\tbreak\n\t\t}\n\t\tdefault: {\n\t\t\tthrow exhaustiveSwitchError(handle)\n\t\t}\n\t}\n\n\t// Compute the offset (if flipped X or flipped Y)\n\tconst offset = new Vec(0, 0)\n\n\tif (scaleX < 0) {\n\t\toffset.x = -(initialBounds.width * scaleDelta)\n\t}\n\tif (scaleY < 0) {\n\t\toffset.y = -(initialBounds.height * scaleDelta)\n\t}\n\n\t// Apply the offset to the new point\n\tconst { x, y } = Vec.Add(newPoint, offset.rot(shape.rotation))\n\n\treturn {\n\t\tx,\n\t\ty,\n\t\tprops: {\n\t\t\tscale: scaleDelta * shape.props.scale,\n\t\t},\n\t}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAsC;AACtC,iBAAoB;AAUb,SAAS,aACf,OACA,EAAE,eAAe,QAAQ,QAAQ,UAAU,OAAO,GACjD;AACD,MAAI;AACJ,UAAQ,QAAQ;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,aAAa;AACjB,mBAAa,KAAK,IAAI,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC;AACxE;AAAA,IACD;AAAA,IACA,KAAK;AAAA,IACL,KAAK,SAAS;AACb,mBAAa,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,CAAC;AAC5C;AAAA,IACD;AAAA,IACA,KAAK;AAAA,IACL,KAAK,OAAO;AACX,mBAAa,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,CAAC;AAC5C;AAAA,IACD;AAAA,IACA,SAAS;AACR,gBAAM,oCAAsB,MAAM;AAAA,IACnC;AAAA,EACD;AAGA,QAAM,SAAS,IAAI,eAAI,GAAG,CAAC;AAE3B,MAAI,SAAS,GAAG;AACf,WAAO,IAAI,EAAE,cAAc,QAAQ;AAAA,EACpC;AACA,MAAI,SAAS,GAAG;AACf,WAAO,IAAI,EAAE,cAAc,SAAS;AAAA,EACrC;AAGA,QAAM,EAAE,GAAG,EAAE,IAAI,eAAI,IAAI,UAAU,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE7D,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,OAAO,aAAa,MAAM,MAAM;AAAA,IACjC;AAAA,EACD;AACD;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|