apps/docs/content/releases/v2.2.0.mdx
This release introduces the bindings system, camera constraints, and configurable options—major features that unlock new types of applications you can build with tldraw.
Bindings allow you to create relationships between shapes. Our default arrow shapes are a great example: each end of the arrow can bind to another shape. When that shape moves, so does the arrow.
Before this change, arrows were hard-coded into the library. Now, with the bindings system, you can create arrows, constraint systems, visual programming environments, and much more.
Check out the bindings guide for more information. (#3780) (#3797) (#3800) (#3871)
You can now limit the camera to a fixed area of the canvas. This is useful for creating experiences that don't quite fit the "infinite canvas" paradigm: document annotators, image editors, slideshow creators, and more.
See the camera constraints guide for more information. (#3747) (#3814)
You can now override many options which were previously hard-coded constants. Pass an options prop into the tldraw component to change the maximum number of pages, grid steps, or other previously hard-coded values.
See TldrawOptions for details. (#3900)
The history system has been significantly reworked:
History options simplified: squashing, ephemeral, and preserveRedoStack flags have been consolidated. Use editor.history.ignore(fn) or editor.history.batch(fn, {history: 'record-preserveRedoStack'}) instead.
Automatic recording: Everything that touches the store is now recorded in undo/redo (unless part of mergeRemoteChanges). Use editor.history.ignore(fn) for changes you don't want recorded.
Side effects captured: Changes in side-effects are now captured by undo/redo. Wrap in editor.history.ignore for the old behavior.
canBind now accepts an options object instead of just the shape. See TLShapeUtilCanBindOpts.editor.sideEffects.registerBatchCompleteHandler replaced with editor.sideEffects.registerOperationCompleteHandler. (#3748)editor.getArrowInfo(shape) replaced with getArrowInfo(editor, shape).editor.getArrowsBoundTo(shape) removed—use editor.getBindingsToShape(shape, 'arrow') instead.start and end properties are now always points. Use getArrowBindings(editor, shape) to check for bindings.ShapeProps → RecordProps, ShapePropsType → RecordPropsType, TLShapePropsMigrations → TLPropsMigrations, SchemaShapeInfo → SchemaPropsInfo.editor.blur method. (#3875)createTLStore. (#3886)getSnapshot and loadSnapshot for easier document persistence. See State Snapshots. (#3811)select option to Editor.groupShapes and Editor.ungroupShapes. (#3690)InFrontOfTheCanvas now has access to the editor's UI context. (#3782)useEditor and other context-based hooks now throw an error when used out-of-context. (#3750)defaultShapeSchemas for custom multiplayer implementations. (#3613).tldr files. (#3689)ArrowBindingUtil public. (#3958)editor.getSnapshot() and editor.loadSnapshot() methods. (#3958)Tldraw was used with React strict mode. (#4004)