kopia lustrzana https://github.com/Tldraw/Tldraw
Merge dfc5ceae21
into 7442456d85
commit
0b5ad72ed1
|
@ -56,17 +56,18 @@ export default function AfterCreateUpdateShapeExample() {
|
|||
|
||||
// create some shapes to demonstrate the side-effects we added
|
||||
function createDemoShapes(editor: Editor) {
|
||||
editor
|
||||
.createShapes(
|
||||
'there can only be one red shape'.split(' ').map((word, i) => ({
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
y: i * 30,
|
||||
props: {
|
||||
color: i === 5 ? 'red' : 'black',
|
||||
text: word,
|
||||
},
|
||||
}))
|
||||
)
|
||||
.zoomToContent({ duration: 0 })
|
||||
const result = editor.createShapes(
|
||||
'there can only be one red shape'.split(' ').map((word, i) => ({
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
y: i * 30,
|
||||
props: {
|
||||
color: i === 5 ? 'red' : 'black',
|
||||
text: word,
|
||||
},
|
||||
}))
|
||||
)
|
||||
if (result.ok) {
|
||||
editor.zoomToContent({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,25 +24,26 @@ export default function BeforeDeleteShapeExample() {
|
|||
|
||||
// create some shapes to demonstrate the side-effect we added
|
||||
function createDemoShapes(editor: Editor) {
|
||||
editor
|
||||
.createShapes([
|
||||
{
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
props: {
|
||||
text: "Red shapes can't be deleted",
|
||||
color: 'red',
|
||||
},
|
||||
const result = editor.createShapes([
|
||||
{
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
props: {
|
||||
text: "Red shapes can't be deleted",
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
y: 30,
|
||||
props: {
|
||||
text: 'but other shapes can',
|
||||
color: 'black',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createShapeId(),
|
||||
type: 'text',
|
||||
y: 30,
|
||||
props: {
|
||||
text: 'but other shapes can',
|
||||
color: 'black',
|
||||
},
|
||||
])
|
||||
.zoomToContent({ duration: 0 })
|
||||
},
|
||||
])
|
||||
if (result.ok) {
|
||||
editor.zoomToContent({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
|
@ -633,8 +633,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
};
|
||||
};
|
||||
createPage(page: Partial<TLPage>): this;
|
||||
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this;
|
||||
createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): this;
|
||||
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): EditorResult<void, CreateShapeError>;
|
||||
createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): EditorResult<void, CreateShapeError>;
|
||||
deleteAssets(assets: TLAsset[] | TLAssetId[]): this;
|
||||
deleteOpenMenu(id: string): this;
|
||||
deletePage(page: TLPage | TLPageId): this;
|
||||
|
@ -2192,6 +2192,16 @@ export interface TLErrorBoundaryProps {
|
|||
onError?: ((error: unknown) => void) | null;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLErrorEvent = {
|
||||
type: 'max-shapes-reached';
|
||||
value: [{
|
||||
count: number;
|
||||
name: string;
|
||||
pageId: TLPageId;
|
||||
}];
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface TLEventHandlers {
|
||||
// (undocumented)
|
||||
|
@ -2235,12 +2245,6 @@ export type TLEventInfo = TLCancelEventInfo | TLClickEventInfo | TLCompleteEvent
|
|||
|
||||
// @public (undocumented)
|
||||
export interface TLEventMap {
|
||||
// (undocumented)
|
||||
'max-shapes': [{
|
||||
count: number;
|
||||
name: string;
|
||||
pageId: TLPageId;
|
||||
}];
|
||||
// (undocumented)
|
||||
'select-all-text': [{
|
||||
shapeId: TLShapeId;
|
||||
|
@ -2256,6 +2260,8 @@ export interface TLEventMap {
|
|||
error: unknown;
|
||||
}];
|
||||
// (undocumented)
|
||||
error: [TLErrorEvent];
|
||||
// (undocumented)
|
||||
event: [TLEventInfo];
|
||||
// (undocumented)
|
||||
frame: [number];
|
||||
|
|
|
@ -196,7 +196,11 @@ export {
|
|||
type SvgExportDef,
|
||||
} from './lib/editor/types/SvgExportContext'
|
||||
export { type TLContent } from './lib/editor/types/clipboard-types'
|
||||
export { type TLEventMap, type TLEventMapHandler } from './lib/editor/types/emit-types'
|
||||
export {
|
||||
type TLErrorEvent,
|
||||
type TLEventMap,
|
||||
type TLEventMapHandler,
|
||||
} from './lib/editor/types/emit-types'
|
||||
export {
|
||||
EVENT_NAME_MAP,
|
||||
type TLBaseEventInfo,
|
||||
|
|
|
@ -120,6 +120,14 @@ import { getStraightArrowInfo } from './shapes/shared/arrow/straight-arrow'
|
|||
import { RootState } from './tools/RootState'
|
||||
import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
|
||||
import { TLContent } from './types/clipboard-types'
|
||||
import {
|
||||
CreateShapeError,
|
||||
EditorResult,
|
||||
MAX_SHAPES_REACHED_ERROR_ERROR,
|
||||
NOT_ARRAY_OF_SHAPES_ERROR,
|
||||
NO_SHAPES_PROVIDED_ERROR,
|
||||
READONLY_ROOM_ERROR,
|
||||
} from './types/editor-result-types'
|
||||
import { TLEventMap } from './types/emit-types'
|
||||
import {
|
||||
TLEventInfo,
|
||||
|
@ -6223,9 +6231,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this {
|
||||
this.createShapes([shape])
|
||||
return this
|
||||
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>) {
|
||||
return this.createShapes([shape])
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -6242,12 +6249,14 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): this {
|
||||
createShapes<T extends TLUnknownShape>(
|
||||
shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]
|
||||
): EditorResult<void, CreateShapeError> {
|
||||
if (!Array.isArray(shapes)) {
|
||||
throw Error('Editor.createShapes: must provide an array of shapes or shape partials')
|
||||
return EditorResult.error(NOT_ARRAY_OF_SHAPES_ERROR)
|
||||
}
|
||||
if (this.getInstanceState().isReadonly) return this
|
||||
if (shapes.length <= 0) return this
|
||||
if (this.getInstanceState().isReadonly) return EditorResult.error(READONLY_ROOM_ERROR)
|
||||
if (shapes.length <= 0) return EditorResult.error(NO_SHAPES_PROVIDED_ERROR)
|
||||
|
||||
const currentPageShapeIds = this.getCurrentPageShapeIds()
|
||||
|
||||
|
@ -6256,12 +6265,12 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
if (maxShapesReached) {
|
||||
// can't create more shapes than fit on the page
|
||||
alertMaxShapes(this)
|
||||
return this
|
||||
return EditorResult.error(MAX_SHAPES_REACHED_ERROR_ERROR)
|
||||
}
|
||||
|
||||
const focusedGroupId = this.getFocusedGroupId()
|
||||
|
||||
return this.batch(() => {
|
||||
this.batch(() => {
|
||||
// 1. Parents
|
||||
|
||||
// Make sure that each partial will become the child of either the
|
||||
|
@ -6419,6 +6428,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
this.store.put(shapeRecordsToCreate)
|
||||
})
|
||||
return EditorResult.ok()
|
||||
}
|
||||
|
||||
private animatingShapes = new Map<TLShapeId, string>()
|
||||
|
@ -8509,7 +8519,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
|
||||
function alertMaxShapes(editor: Editor, pageId = editor.getCurrentPageId()) {
|
||||
const name = editor.getPage(pageId)!.name
|
||||
editor.emit('max-shapes', { name, pageId, count: MAX_SHAPES_PER_PAGE })
|
||||
editor.emit('error', {
|
||||
type: 'max-shapes-reached',
|
||||
value: [{ name, pageId, count: MAX_SHAPES_PER_PAGE }],
|
||||
})
|
||||
}
|
||||
|
||||
function applyPartialToShape<T extends TLShape>(prev: T, partial?: TLShapePartial<T>): T {
|
||||
|
|
|
@ -28,20 +28,24 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
this.editor
|
||||
.createShapes<TLBaseBoxShape>([
|
||||
{
|
||||
id,
|
||||
type: shapeType,
|
||||
x: originPagePoint.x,
|
||||
y: originPagePoint.y,
|
||||
props: {
|
||||
w: 1,
|
||||
h: 1,
|
||||
},
|
||||
const result = this.editor.createShapes<TLBaseBoxShape>([
|
||||
{
|
||||
id,
|
||||
type: shapeType,
|
||||
x: originPagePoint.x,
|
||||
y: originPagePoint.y,
|
||||
props: {
|
||||
w: 1,
|
||||
h: 1,
|
||||
},
|
||||
])
|
||||
.select(id)
|
||||
},
|
||||
])
|
||||
if (!result.ok) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
|
||||
this.editor.select(id)
|
||||
this.editor.setCurrentTool('select.resizing', {
|
||||
...info,
|
||||
target: 'selection',
|
||||
|
@ -85,7 +89,7 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
this.editor.createShapes<TLBaseBoxShape>([
|
||||
const result = this.editor.createShapes<TLBaseBoxShape>([
|
||||
{
|
||||
id,
|
||||
type: shapeType,
|
||||
|
@ -93,6 +97,10 @@ export class Pointing extends StateNode {
|
|||
y: originPagePoint.y,
|
||||
},
|
||||
])
|
||||
if (!result.ok) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
|
||||
const shape = this.editor.getShape<TLBaseBoxShape>(id)!
|
||||
const { w, h } = this.editor.getShapeUtil(shape).getDefaultProps() as TLBaseBoxShape['props']
|
||||
|
|
|
@ -0,0 +1,57 @@
|
|||
// Result types
|
||||
/** @public */
|
||||
export type Ok = { readonly ok: true }
|
||||
/** @public */
|
||||
export type OkWithValue<T> = { readonly ok: true; readonly value: T }
|
||||
/** @public */
|
||||
export type Error<E> = { readonly ok: false; readonly error: E }
|
||||
|
||||
/** @public */
|
||||
export type EditorResult<T, E> = Error<E> | Ok | OkWithValue<T>
|
||||
|
||||
/** @internal */
|
||||
export const EditorResult = {
|
||||
ok(): Ok {
|
||||
return { ok: true }
|
||||
},
|
||||
okWithValue<T>(value: T): OkWithValue<T> {
|
||||
return { ok: true, value }
|
||||
},
|
||||
error<E>(error: E): Error<E> {
|
||||
return { ok: false, error }
|
||||
},
|
||||
}
|
||||
|
||||
// All errors
|
||||
/** @public */
|
||||
export type TLEditorErrorType = CreateShapeErrorType | (typeof READONLY_ROOM_ERROR)['type']
|
||||
|
||||
// General errors
|
||||
/** @public */
|
||||
export const READONLY_ROOM_ERROR = { type: 'readonly-room' as const, message: 'Room is readonly' }
|
||||
|
||||
// Create shape errors
|
||||
/** @public */
|
||||
export const NOT_ARRAY_OF_SHAPES_ERROR = {
|
||||
type: 'not-array' as const,
|
||||
message: 'Expected an array',
|
||||
}
|
||||
/** @public */
|
||||
export const NO_SHAPES_PROVIDED_ERROR = {
|
||||
type: 'no-shapes-provided' as const,
|
||||
message: 'No shapes provided',
|
||||
}
|
||||
/** @public */
|
||||
export const MAX_SHAPES_REACHED_ERROR_ERROR = {
|
||||
type: 'max-shapes-reached' as const,
|
||||
message: 'Max shapes reached',
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export type CreateShapeErrorType =
|
||||
| (typeof READONLY_ROOM_ERROR)['type']
|
||||
| (typeof NOT_ARRAY_OF_SHAPES_ERROR)['type']
|
||||
| (typeof NO_SHAPES_PROVIDED_ERROR)['type']
|
||||
| (typeof MAX_SHAPES_REACHED_ERROR_ERROR)['type']
|
||||
/** @public */
|
||||
export type CreateShapeError = { type: CreateShapeErrorType; message: string }
|
|
@ -2,11 +2,16 @@ import { HistoryEntry } from '@tldraw/store'
|
|||
import { TLPageId, TLRecord, TLShapeId } from '@tldraw/tlschema'
|
||||
import { TLEventInfo } from './event-types'
|
||||
|
||||
/** @public */
|
||||
export type TLErrorEvent = {
|
||||
type: 'max-shapes-reached'
|
||||
value: [{ name: string; pageId: TLPageId; count: number }]
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export interface TLEventMap {
|
||||
// Lifecycle / Internal
|
||||
mount: []
|
||||
'max-shapes': [{ name: string; pageId: TLPageId; count: number }]
|
||||
change: [HistoryEntry<TLRecord>]
|
||||
update: []
|
||||
crash: [{ error: unknown }]
|
||||
|
@ -16,6 +21,7 @@ export interface TLEventMap {
|
|||
tick: [number]
|
||||
frame: [number]
|
||||
'select-all-text': [{ shapeId: TLShapeId }]
|
||||
error: [TLErrorEvent]
|
||||
}
|
||||
|
||||
/** @public */
|
||||
|
|
|
@ -203,7 +203,10 @@ export function registerDefaultExternalContentHandlers(
|
|||
},
|
||||
}
|
||||
|
||||
editor.createShapes([shapePartial]).select(id)
|
||||
const result = editor.createShapes([shapePartial])
|
||||
if (result.ok) {
|
||||
editor.select(id)
|
||||
}
|
||||
})
|
||||
|
||||
// files
|
||||
|
@ -483,7 +486,10 @@ export async function createShapesForAssets(
|
|||
}
|
||||
|
||||
// Create the shapes
|
||||
editor.createShapes(partials).select(...partials.map((p) => p.id))
|
||||
const result = editor.createShapes(partials)
|
||||
if (!result.ok) return
|
||||
|
||||
editor.select(...partials.map((p) => p.id))
|
||||
|
||||
// Re-position shapes so that the center of the group is at the provided point
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
|
@ -539,7 +545,9 @@ export function createEmptyBookmarkShape(
|
|||
}
|
||||
|
||||
editor.batch(() => {
|
||||
editor.createShapes([partial]).select(partial.id)
|
||||
const result = editor.createShapes([partial])
|
||||
if (!result.ok) return
|
||||
editor.select(partial.id)
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
})
|
||||
|
||||
|
|
|
@ -294,8 +294,8 @@ describe('Other cases when arrow are moved', () => {
|
|||
{ id: ids.box3, type: 'geo', x: 0, y: 300, props: { w: 100, h: 100 } },
|
||||
{ id: ids.box4, type: 'geo', x: 0, y: 600, props: { w: 100, h: 100 } },
|
||||
])
|
||||
.selectAll()
|
||||
.groupShapes(editor.getSelectedShapeIds())
|
||||
|
||||
editor.selectAll().groupShapes(editor.getSelectedShapeIds())
|
||||
|
||||
editor.setCurrentTool('arrow').pointerDown(1000, 1000).pointerMove(50, 350).pointerUp(50, 350)
|
||||
let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
|
||||
|
|
|
@ -26,29 +26,31 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
this.editor
|
||||
.createShapes<TLGeoShape>([
|
||||
{
|
||||
id,
|
||||
type: 'geo',
|
||||
x: originPagePoint.x,
|
||||
y: originPagePoint.y,
|
||||
props: {
|
||||
w: 1,
|
||||
h: 1,
|
||||
geo: this.editor.getStyleForNextShape(GeoShapeGeoStyle),
|
||||
},
|
||||
const result = this.editor.createShapes<TLGeoShape>([
|
||||
{
|
||||
id,
|
||||
type: 'geo',
|
||||
x: originPagePoint.x,
|
||||
y: originPagePoint.y,
|
||||
props: {
|
||||
w: 1,
|
||||
h: 1,
|
||||
geo: this.editor.getStyleForNextShape(GeoShapeGeoStyle),
|
||||
},
|
||||
])
|
||||
.select(id)
|
||||
.setCurrentTool('select.resizing', {
|
||||
...info,
|
||||
target: 'selection',
|
||||
handle: 'bottom_right',
|
||||
isCreating: true,
|
||||
creationCursorOffset: { x: 1, y: 1 },
|
||||
onInteractionEnd: 'geo',
|
||||
})
|
||||
},
|
||||
])
|
||||
if (!result.ok) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
this.editor.select(id).setCurrentTool('select.resizing', {
|
||||
...info,
|
||||
target: 'selection',
|
||||
handle: 'bottom_right',
|
||||
isCreating: true,
|
||||
creationCursorOffset: { x: 1, y: 1 },
|
||||
onInteractionEnd: 'geo',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -73,7 +75,7 @@ export class Pointing extends StateNode {
|
|||
|
||||
this.editor.mark(this.markId)
|
||||
|
||||
this.editor.createShapes<TLGeoShape>([
|
||||
const result = this.editor.createShapes<TLGeoShape>([
|
||||
{
|
||||
id,
|
||||
type: 'geo',
|
||||
|
@ -86,6 +88,10 @@ export class Pointing extends StateNode {
|
|||
},
|
||||
},
|
||||
])
|
||||
if (!result.ok) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
|
||||
const shape = this.editor.getShape<TLGeoShape>(id)!
|
||||
if (!shape) return
|
||||
|
|
|
@ -190,8 +190,8 @@ describe('Grid placement helpers', () => {
|
|||
})
|
||||
|
||||
it('Falls into a sticky pit when empty', () => {
|
||||
editor.createShape({ type: 'note', x: 0, y: 0 })
|
||||
editor
|
||||
.createShape({ type: 'note', x: 0, y: 0 })
|
||||
.setCurrentTool('note')
|
||||
.pointerMove(324, 104)
|
||||
.click()
|
||||
|
@ -204,9 +204,9 @@ describe('Grid placement helpers', () => {
|
|||
})
|
||||
|
||||
it('Does not create a new sticky note in a sticky pit if a note is already there', () => {
|
||||
editor.createShape({ type: 'note', x: 0, y: 0 })
|
||||
editor.createShape({ type: 'note', x: 330, y: 8 }) // make a shape kinda there already!
|
||||
editor
|
||||
.createShape({ type: 'note', x: 0, y: 0 })
|
||||
.createShape({ type: 'note', x: 330, y: 8 }) // make a shape kinda there already!
|
||||
.setCurrentTool('note')
|
||||
.pointerMove(300, 104)
|
||||
.click()
|
||||
|
@ -241,7 +241,8 @@ describe('Grid placement helpers', () => {
|
|||
})
|
||||
|
||||
it('Falls into correct pit below notes with growY', () => {
|
||||
editor.createShape({ type: 'note', x: 0, y: 0 }).updateShape({
|
||||
editor.createShape({ type: 'note', x: 0, y: 0 })
|
||||
editor.updateShape({
|
||||
...editor.getLastCreatedShape(),
|
||||
props: { growY: 100 },
|
||||
})
|
||||
|
|
|
@ -40,7 +40,12 @@ export class Pointing extends StateNode {
|
|||
if (offset) {
|
||||
center.sub(offset)
|
||||
}
|
||||
this.shape = createSticky(this.editor, id, center)
|
||||
const result = createSticky(this.editor, id, center)
|
||||
if (!result) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
this.shape = result
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -53,7 +58,12 @@ export class Pointing extends StateNode {
|
|||
if (offset) {
|
||||
center.sub(offset)
|
||||
}
|
||||
this.shape = createSticky(this.editor, id, center)
|
||||
const result = createSticky(this.editor, id, center)
|
||||
if (!result) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
this.shape = result
|
||||
}
|
||||
|
||||
this.editor.setCurrentTool('select.translating', {
|
||||
|
@ -123,14 +133,17 @@ export function getNotePitOffset(editor: Editor, center: Vec) {
|
|||
}
|
||||
|
||||
export function createSticky(editor: Editor, id: TLShapeId, center: Vec) {
|
||||
editor
|
||||
.createShape({
|
||||
id,
|
||||
type: 'note',
|
||||
x: center.x,
|
||||
y: center.y,
|
||||
})
|
||||
.select(id)
|
||||
const result = editor.createShape({
|
||||
id,
|
||||
type: 'note',
|
||||
x: center.x,
|
||||
y: center.y,
|
||||
})
|
||||
if (!result.ok) {
|
||||
return null
|
||||
}
|
||||
|
||||
editor.select(id)
|
||||
|
||||
const shape = editor.getShape<TLNoteShape>(id)!
|
||||
const bounds = editor.getShapeGeometry(shape).bounds
|
||||
|
|
|
@ -78,21 +78,24 @@ export class Pointing extends StateNode {
|
|||
this.editor.mark('creating text shape')
|
||||
const id = createShapeId()
|
||||
const { x, y } = this.editor.inputs.currentPagePoint
|
||||
this.editor
|
||||
.createShapes([
|
||||
{
|
||||
id,
|
||||
type: 'text',
|
||||
x,
|
||||
y,
|
||||
props: {
|
||||
text: '',
|
||||
autoSize: true,
|
||||
},
|
||||
const result = this.editor.createShapes([
|
||||
{
|
||||
id,
|
||||
type: 'text',
|
||||
x,
|
||||
y,
|
||||
props: {
|
||||
text: '',
|
||||
autoSize: true,
|
||||
},
|
||||
])
|
||||
.select(id)
|
||||
},
|
||||
])
|
||||
if (!result.ok) {
|
||||
this.cancel()
|
||||
return
|
||||
}
|
||||
|
||||
this.editor.select(id)
|
||||
this.editor.setEditingShape(id)
|
||||
this.editor.setCurrentTool('select')
|
||||
this.editor.root.getCurrent()?.transition('editing_shape')
|
||||
|
|
|
@ -295,6 +295,7 @@ function createNShapes(editor: Editor, n: number) {
|
|||
}
|
||||
|
||||
editor.batch(() => {
|
||||
editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))
|
||||
editor.createShapes(shapesToCreate)
|
||||
editor.setSelectedShapes(shapesToCreate.map((s) => s.id))
|
||||
})
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useEditor } from '@tldraw/editor'
|
||||
import { TLErrorEvent, useEditor } from '@tldraw/editor'
|
||||
import { useEffect } from 'react'
|
||||
import { useToasts } from '../context/toasts'
|
||||
|
||||
|
@ -8,7 +8,9 @@ export function useEditorEvents() {
|
|||
const { addToast } = useToasts()
|
||||
|
||||
useEffect(() => {
|
||||
function handleMaxShapes({ name, count }: { name: string; pageId: string; count: number }) {
|
||||
function handleMaxShapes(error: TLErrorEvent) {
|
||||
if (error.type !== 'max-shapes-reached') return
|
||||
const [{ name, count }] = error.value
|
||||
addToast({
|
||||
title: 'Maximum Shapes Reached',
|
||||
description: `You've reached the maximum number of shapes allowed on ${name} (${count}). Please delete some shapes or move to a different page to continue.`,
|
||||
|
@ -16,9 +18,9 @@ export function useEditorEvents() {
|
|||
})
|
||||
}
|
||||
|
||||
editor.addListener('max-shapes', handleMaxShapes)
|
||||
editor.addListener('error', handleMaxShapes)
|
||||
return () => {
|
||||
editor.removeListener('max-shapes', handleMaxShapes)
|
||||
editor.removeListener('error', handleMaxShapes)
|
||||
}
|
||||
}, [editor, addToast])
|
||||
}
|
||||
|
|
|
@ -292,6 +292,7 @@ describe('When double clicking a shape', () => {
|
|||
.deleteShapes(editor.getSelectedShapeIds())
|
||||
.selectNone()
|
||||
.createShapes([{ id: createShapeId(), type: 'geo' }])
|
||||
editor
|
||||
.doubleClick(50, 50, { target: 'shape', shape: editor.getCurrentPageShapes()[0] })
|
||||
.expectToBeIn('select.editing_shape')
|
||||
})
|
||||
|
@ -305,9 +306,7 @@ describe('When pressing enter on a selected shape', () => {
|
|||
.deleteShapes(editor.getSelectedShapeIds())
|
||||
.selectNone()
|
||||
.createShapes([{ id, type: 'geo' }])
|
||||
.select(id)
|
||||
.keyUp('Enter')
|
||||
.expectToBeIn('select.editing_shape')
|
||||
editor.select(id).keyUp('Enter').expectToBeIn('select.editing_shape')
|
||||
})
|
||||
})
|
||||
|
||||
|
@ -336,8 +335,7 @@ describe('When double clicking the selection edge', () => {
|
|||
.deleteShapes(editor.getSelectedShapeIds())
|
||||
.selectNone()
|
||||
.createShapes([{ id, type: 'text', x: 100, y: 100, props: { scale: 2, text: 'hello' } }])
|
||||
.select(id)
|
||||
.doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
editor.select(id).doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
|
||||
editor.expectShapeToMatch({ id, props: { scale: 1 } })
|
||||
})
|
||||
|
@ -355,8 +353,7 @@ describe('When double clicking the selection edge', () => {
|
|||
props: { scale: 2, autoSize: false, w: 200, text: 'hello' },
|
||||
},
|
||||
])
|
||||
.select(id)
|
||||
.doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
editor.select(id).doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
|
||||
editor.expectShapeToMatch({ id, props: { scale: 2, autoSize: true } })
|
||||
|
||||
|
@ -378,6 +375,7 @@ describe('When double clicking the selection edge', () => {
|
|||
props: { scale: 2, autoSize: false, w: 200, text: 'hello' },
|
||||
},
|
||||
])
|
||||
editor
|
||||
.select(id)
|
||||
.doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
.doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
|
@ -402,7 +400,7 @@ describe('When double clicking the selection edge', () => {
|
|||
type: 'geo',
|
||||
},
|
||||
])
|
||||
.select(id)
|
||||
editor.select(id)
|
||||
expect(editor.getEditingShapeId()).toBe(null)
|
||||
|
||||
editor.doubleClick(100, 100, { target: 'selection', handle: 'left' })
|
||||
|
@ -565,8 +563,8 @@ describe('When in readonly mode', () => {
|
|||
|
||||
// This should be end to end, the problem is the blur handler of the react component
|
||||
it('goes into pointing canvas', () => {
|
||||
editor.createShape({ type: 'note' })
|
||||
editor
|
||||
.createShape({ type: 'note' })
|
||||
.pointerMove(50, 50)
|
||||
.doubleClick()
|
||||
.expectToBeIn('select.editing_shape')
|
||||
|
|
|
@ -9,13 +9,15 @@ beforeEach(() => {
|
|||
|
||||
it('Sets shape meta by default to an empty object', () => {
|
||||
const id = createShapeId()
|
||||
editor.createShapes([{ id, type: 'geo' }]).select(id)
|
||||
editor.createShapes([{ id, type: 'geo' }])
|
||||
editor.select(id)
|
||||
expect(editor.getOnlySelectedShape()!.meta).toStrictEqual({})
|
||||
})
|
||||
|
||||
it('Sets shape meta', () => {
|
||||
editor.getInitialMetaForShape = (shape) => ({ firstThreeCharactersOfId: shape.id.slice(0, 3) })
|
||||
const id = createShapeId()
|
||||
editor.createShapes([{ id, type: 'geo' }]).select(id)
|
||||
editor.createShapes([{ id, type: 'geo' }])
|
||||
editor.select(id)
|
||||
expect(editor.getOnlySelectedShape()!.meta).toStrictEqual({ firstThreeCharactersOfId: 'sha' })
|
||||
})
|
||||
|
|
|
@ -182,7 +182,8 @@ describe('When duplicating shapes that include arrows', () => {
|
|||
})
|
||||
|
||||
it('Preserves the same selection bounds', () => {
|
||||
editor.selectAll().deleteShapes(editor.getSelectedShapeIds()).createShapes(shapes).selectAll()
|
||||
editor.selectAll().deleteShapes(editor.getSelectedShapeIds()).createShapes(shapes)
|
||||
editor.selectAll()
|
||||
|
||||
const boundsBefore = editor.getSelectionRotatedPageBounds()!
|
||||
editor.duplicateShapes(editor.getSelectedShapeIds())
|
||||
|
@ -190,16 +191,13 @@ describe('When duplicating shapes that include arrows', () => {
|
|||
})
|
||||
|
||||
it('Preserves the same selection bounds when only duplicating the arrows', () => {
|
||||
editor
|
||||
.selectAll()
|
||||
.deleteShapes(editor.getSelectedShapeIds())
|
||||
.createShapes(shapes)
|
||||
.select(
|
||||
...editor
|
||||
.getCurrentPageShapes()
|
||||
.filter((s) => editor.isShapeOfType<TLArrowShape>(s, 'arrow'))
|
||||
.map((s) => s.id)
|
||||
)
|
||||
editor.selectAll().deleteShapes(editor.getSelectedShapeIds()).createShapes(shapes)
|
||||
editor.select(
|
||||
...editor
|
||||
.getCurrentPageShapes()
|
||||
.filter((s) => editor.isShapeOfType<TLArrowShape>(s, 'arrow'))
|
||||
.map((s) => s.id)
|
||||
)
|
||||
|
||||
const boundsBefore = editor.getSelectionRotatedPageBounds()!
|
||||
editor.duplicateShapes(editor.getSelectedShapeIds())
|
||||
|
|
|
@ -177,6 +177,7 @@ describe('frame shapes', () => {
|
|||
editor
|
||||
// Create a frame
|
||||
.createShapes([{ id: frameId, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } }])
|
||||
editor
|
||||
.select(frameId)
|
||||
// Rotate it by PI/2
|
||||
.rotateSelection(Math.PI / 2)
|
||||
|
|
|
@ -395,7 +395,7 @@ describe('When pasting into frames...', () => {
|
|||
y: 500,
|
||||
},
|
||||
])
|
||||
.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 })
|
||||
editor.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 })
|
||||
|
||||
// put frame2 inside frame1
|
||||
editor.reparentShapes([ids.frame2], ids.frame1)
|
||||
|
@ -455,20 +455,19 @@ describe('When pasting into frames...', () => {
|
|||
editor.deleteShapes(editor.getSelectedShapeIds())
|
||||
|
||||
// create a big frame away from the origin, the size of the viewport
|
||||
editor
|
||||
.createShapes([
|
||||
{
|
||||
id: ids.frame1,
|
||||
type: 'frame',
|
||||
x: editor.getViewportScreenBounds().w,
|
||||
y: editor.getViewportScreenBounds().h,
|
||||
props: {
|
||||
w: editor.getViewportScreenBounds().w,
|
||||
h: editor.getViewportScreenBounds().h,
|
||||
},
|
||||
editor.createShapes([
|
||||
{
|
||||
id: ids.frame1,
|
||||
type: 'frame',
|
||||
x: editor.getViewportScreenBounds().w,
|
||||
y: editor.getViewportScreenBounds().h,
|
||||
props: {
|
||||
w: editor.getViewportScreenBounds().w,
|
||||
h: editor.getViewportScreenBounds().h,
|
||||
},
|
||||
])
|
||||
.selectAll()
|
||||
},
|
||||
])
|
||||
editor.selectAll()
|
||||
// rotate the frame for hard mode
|
||||
editor.rotateSelection(45)
|
||||
// center on the center of the frame
|
||||
|
|
|
@ -912,7 +912,7 @@ describe('When resizing a shape with children', () => {
|
|||
},
|
||||
},
|
||||
])
|
||||
.select(ids.boxB, ids.lineA)
|
||||
editor.select(ids.boxB, ids.lineA)
|
||||
|
||||
editor
|
||||
.pointerDown(10, 10, {
|
||||
|
|
|
@ -680,26 +680,25 @@ describe('when a frame has multiple children', () => {
|
|||
let box1: TLGeoShape
|
||||
let box2: TLGeoShape
|
||||
beforeEach(() => {
|
||||
editor
|
||||
.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
|
||||
.createShape<TLGeoShape>({
|
||||
id: ids.box1,
|
||||
parentId: ids.frame1,
|
||||
type: 'geo',
|
||||
x: 25,
|
||||
y: 25,
|
||||
})
|
||||
.createShape<TLGeoShape>({
|
||||
id: ids.box2,
|
||||
parentId: ids.frame1,
|
||||
type: 'geo',
|
||||
x: 50,
|
||||
y: 50,
|
||||
props: {
|
||||
w: 80,
|
||||
h: 80,
|
||||
},
|
||||
})
|
||||
editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
|
||||
editor.createShape<TLGeoShape>({
|
||||
id: ids.box1,
|
||||
parentId: ids.frame1,
|
||||
type: 'geo',
|
||||
x: 25,
|
||||
y: 25,
|
||||
})
|
||||
editor.createShape<TLGeoShape>({
|
||||
id: ids.box2,
|
||||
parentId: ids.frame1,
|
||||
type: 'geo',
|
||||
x: 50,
|
||||
y: 50,
|
||||
props: {
|
||||
w: 80,
|
||||
h: 80,
|
||||
},
|
||||
})
|
||||
box1 = editor.getShape<TLGeoShape>(ids.box1)!
|
||||
box2 = editor.getShape<TLGeoShape>(ids.box2)!
|
||||
})
|
||||
|
@ -1132,13 +1131,12 @@ describe('Selects inside of groups', () => {
|
|||
|
||||
describe('when selecting behind selection', () => {
|
||||
beforeEach(() => {
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 100, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box2, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 200, y: 0 },
|
||||
])
|
||||
.select(ids.box2, ids.box3)
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 100, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box2, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 200, y: 0 },
|
||||
])
|
||||
editor.select(ids.box2, ids.box3)
|
||||
})
|
||||
|
||||
it('does not select on pointer down, only on pointer up', () => {
|
||||
|
@ -1165,13 +1163,12 @@ describe('when selecting behind selection', () => {
|
|||
|
||||
describe('when shift+selecting', () => {
|
||||
beforeEach(() => {
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
])
|
||||
.select(ids.box1)
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
])
|
||||
editor.select(ids.box1)
|
||||
})
|
||||
|
||||
it('adds solid shape to selection on pointer down', () => {
|
||||
|
@ -1281,15 +1278,13 @@ describe('when shift+selecting', () => {
|
|||
|
||||
describe('when shift+selecting a group', () => {
|
||||
beforeEach(() => {
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
])
|
||||
.groupShapes([ids.box2, ids.box3], ids.group1)
|
||||
.select(ids.box1)
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
])
|
||||
editor.groupShapes([ids.box2, ids.box3], ids.group1).select(ids.box1)
|
||||
})
|
||||
|
||||
it('does not add group to selection when pointing empty space in the group', () => {
|
||||
|
@ -1362,14 +1357,14 @@ describe('when shift+selecting a group', () => {
|
|||
|
||||
describe('When children / descendants of a group are selected', () => {
|
||||
beforeEach(() => {
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
{ id: ids.box5, type: 'geo', x: 800, y: 0 },
|
||||
])
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
{ id: ids.box5, type: 'geo', x: 800, y: 0 },
|
||||
])
|
||||
.groupShapes([ids.box1, ids.box2], ids.group1)
|
||||
.groupShapes([ids.box3, ids.box4], ids.group2)
|
||||
.groupShapes([ids.group1, ids.group2], ids.group3)
|
||||
|
@ -1437,14 +1432,14 @@ describe('When children / descendants of a group are selected', () => {
|
|||
|
||||
describe('When pressing the enter key with groups selected', () => {
|
||||
beforeEach(() => {
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
{ id: ids.box5, type: 'geo', x: 800, y: 0 },
|
||||
])
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0, props: { fill: 'solid' } },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 0 },
|
||||
{ id: ids.box5, type: 'geo', x: 800, y: 0 },
|
||||
])
|
||||
.groupShapes([ids.box1, ids.box2], ids.group1)
|
||||
.groupShapes([ids.box3, ids.box4], ids.group2)
|
||||
})
|
||||
|
@ -1545,14 +1540,13 @@ describe('When double clicking an editable shape', () => {
|
|||
describe('shift brushes to add to the selection', () => {
|
||||
beforeEach(() => {
|
||||
editor.user.updateUserPreferences({ isWrapMode: false })
|
||||
editor
|
||||
.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0 },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 200 },
|
||||
])
|
||||
.groupShapes([ids.box3, ids.box4], ids.group1)
|
||||
editor.createShapes([
|
||||
{ id: ids.box1, type: 'geo', x: 0, y: 0 },
|
||||
{ id: ids.box2, type: 'geo', x: 200, y: 0 },
|
||||
{ id: ids.box3, type: 'geo', x: 400, y: 0 },
|
||||
{ id: ids.box4, type: 'geo', x: 600, y: 200 },
|
||||
])
|
||||
editor.groupShapes([ids.box3, ids.box4], ids.group1)
|
||||
})
|
||||
|
||||
it('does not select when brushing into margin', () => {
|
||||
|
|
|
@ -1954,9 +1954,9 @@ const defaultPitLocations = [
|
|||
|
||||
describe('Note shape grid helper positions / pits', () => {
|
||||
it('Snaps to pits', () => {
|
||||
editor.createShape({ type: 'note' })
|
||||
editor.createShape({ type: 'note', x: 500, y: 500 })
|
||||
editor
|
||||
.createShape({ type: 'note' })
|
||||
.createShape({ type: 'note', x: 500, y: 500 })
|
||||
.pointerMove(600, 600)
|
||||
// start translating
|
||||
.pointerDown()
|
||||
|
@ -1971,9 +1971,9 @@ describe('Note shape grid helper positions / pits', () => {
|
|||
})
|
||||
|
||||
it('Does not snap to pit if shape has a different rotation', () => {
|
||||
editor.createShape({ type: 'note', rotation: 0.001 })
|
||||
editor.createShape({ type: 'note', x: 500, y: 500 })
|
||||
editor
|
||||
.createShape({ type: 'note', rotation: 0.001 })
|
||||
.createShape({ type: 'note', x: 500, y: 500 })
|
||||
.pointerMove(600, 600)
|
||||
// start translating
|
||||
.pointerDown()
|
||||
|
@ -1989,9 +1989,9 @@ describe('Note shape grid helper positions / pits', () => {
|
|||
})
|
||||
|
||||
it('Snaps to pit if shape has the same rotation', () => {
|
||||
editor.createShape({ type: 'note', rotation: 0.001 })
|
||||
editor.createShape({ type: 'note', x: 500, y: 500, rotation: 0.001 })
|
||||
editor
|
||||
.createShape({ type: 'note', rotation: 0.001 })
|
||||
.createShape({ type: 'note', x: 500, y: 500, rotation: 0.001 })
|
||||
.pointerMove(600, 600)
|
||||
// start translating
|
||||
.pointerDown()
|
||||
|
@ -2008,9 +2008,9 @@ describe('Note shape grid helper positions / pits', () => {
|
|||
})
|
||||
|
||||
it('Snaps correctly to the top when the translating shape has growY', () => {
|
||||
editor.createShape({ type: 'note' })
|
||||
editor.createShape({ type: 'note', x: 500, y: 500 })
|
||||
editor
|
||||
.createShape({ type: 'note' })
|
||||
.createShape({ type: 'note', x: 500, y: 500 })
|
||||
.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
|
||||
.pointerMove(600, 600)
|
||||
// start translating
|
||||
|
@ -2028,10 +2028,10 @@ describe('Note shape grid helper positions / pits', () => {
|
|||
})
|
||||
|
||||
it('Snaps correctly to the bottom when the not-translating shape has growY', () => {
|
||||
editor.createShape({ type: 'note' })
|
||||
editor.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
|
||||
editor.createShape({ type: 'note', x: 500, y: 500 })
|
||||
editor
|
||||
.createShape({ type: 'note' })
|
||||
.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
|
||||
.createShape({ type: 'note', x: 500, y: 500 })
|
||||
.pointerMove(600, 600)
|
||||
// start translating
|
||||
.pointerDown()
|
||||
|
|
Ładowanie…
Reference in New Issue