v3.13.0

View on GitHub

The big new feature in this months release is Elbow Arrows! These connectors supplement our existing arrow shape and are well suited to more technical diagramming type use-cases. We’re also been continuing to work on accessibility in tldraw, and there are plenty of other performance improvements too.

Elbow arrows

The arrow shape now supports elbow arrows! Instead of a single straight line or arc, these arrows get from A to B in a series straight lines joined at right angles. Access the new arrow type by selecting the arrow tool, and choosing the new option under the "Line" style.

Accessibility features

We’re continuing to work on accessibility in this release, as we make progress towards WCAG compliance.

  • You can now focus the style panel with the ⌘⏎ keyboard shortcut. (#5827)
  • More icons and handles in the UI now have labels. (#6001)
  • ⌘⇧↓ and ⌘⇧↑ moves the selection in and out of container shapes, like frames and groups. (#5973)
  • You can now tab into embed shapes. (#5958)
  • The toolbars throughout tldraw are now keyboard navigable. (#5872)
  • The shortcuts for rich text editing are shown in the keyboard shortcuts help menu. (#5912)

Breaking changes

  • ShapeUtil.canEditInReadOnly has been renamed to ShapeUtil.canEditInReadonly - note the case-change on “only”. (#6019)

Improvements

  • When editing the link on a shape, link text is now auto-selected for faster editing. (#6072)
  • Pasted text and embeds are now snapped to the grid if it’s enabled. (#6020)
  • Figma embed now also work with selection links. (#6025)
  • When editing an arrow label, we now block off part of the arrow to show where your label will appear. (#6029)
  • Exports of single frames now have the frame background color included in the export. (#5993)
  • Standardised gradient and hover effects for open submenu items are standardised across the UI. (#5974)
  • Frames can now be resized to fit their contents by double-clicking their edges. (#5967)

API additions

  • The text measurement API now accepts arbitrary styles to be applied to the text being measured. (#6014)
  • A new Overlays component lets you add overlays on top of the canvas that still follow the camera. (#5952)
  • RichTextLabel now accepts a hasCustomTabBehavior prop to disable our default tabbing logic where needed. (#5908)

Other improvements

  • Improve performance of a programatically rotating shape when it is selected (#6023)
  • Dragging many shapes at once is now much faster. (#5821)
  • Errors in tldraw no longer prompt users to open an issue on GitHub, as they were getting confused between tldraw and products that use the SDK. (#5947)
  • License keys now support VS Code extensions. (#5940)

Bug fixes

  • Flattened shapes no longer include an opaque background color. (#6043)
  • Screenreader announcements are now only triggered in response to user actions. (#6041)
  • The hand tool no longer takes pan speed into account, so it’s consistent with middle-mouse/spacebar panning. (#6024)
  • Empty lines and list in text now render consistently. (#6013)
  • The escape key now correctly exits the laser tool. (#6015)
  • Offscreen shapes are now selected correctly while brushing. (#6004)
  • ShapeUtil.getGeometry uses shape.meta as part of its cache key, instead of just shape.props. (#5988)
  • Toolbar buttons reflect their active states correctly. (#5981)
  • The control key gets released properly when wheeling. (#5983)
  • Remove jitter from arrows & lines as their size changes in some browsers. (#5975)
  • Long-pressing the enter key no longer enters edit mode. (#5957)
  • Partially bound arrows don’t flicker when you rotate them. (#5951)
  • editor.getSelectedShapes no longer causes re-evaluations unless it actually changed. (#5928)
  • Chains of viewport followers now work as expected. (#5924)

Authors

Prev
Releases
Next
v3.12.0