PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/packages/editor/api-report.md

2907 lines
97 KiB
Markdown
Raw Normal View History

transfer-out: transfer out
2023-04-25 11:01:25 +00:00
## API Report File for "@tldraw/editor"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { Atom } from '@tldraw/state';
import { atom } from '@tldraw/state';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { Box2d } from '@tldraw/primitives';
import { Box2dModel } from '@tldraw/tlschema';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { Computed } from '@tldraw/state';
import { computed } from '@tldraw/state';
Rename tlstore to store (#1507) This PR renames the `@tldraw/tlstore` package to `@tldraw/store`, mainly to avoid confusion between `TLStore`. Will be doing the same with other packages. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Replace @tldraw/tlstore with @tldraw/store
2023-06-03 08:59:04 +00:00
import { ComputedCache } from '@tldraw/store';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { CubicSpline2d } from '@tldraw/primitives';
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
import { defineMigrations } from '@tldraw/store';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { EASINGS } from '@tldraw/primitives';
import { EmbedDefinition } from '@tldraw/tlschema';
import { EventEmitter } from 'eventemitter3';
import { getHashForString } from '@tldraw/utils';
Rename tlstore to store (#1507) This PR renames the `@tldraw/tlstore` package to `@tldraw/store`, mainly to avoid confusion between `TLStore`. Will be doing the same with other packages. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Replace @tldraw/tlstore with @tldraw/store
2023-06-03 08:59:04 +00:00
import { HistoryEntry } from '@tldraw/store';
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
import { JsonObject } from '@tldraw/utils';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { MatLike } from '@tldraw/primitives';
import { Matrix2d } from '@tldraw/primitives';
import { Matrix2dModel } from '@tldraw/primitives';
Rename tlstore to store (#1507) This PR renames the `@tldraw/tlstore` package to `@tldraw/store`, mainly to avoid confusion between `TLStore`. Will be doing the same with other packages. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Replace @tldraw/tlstore with @tldraw/store
2023-06-03 08:59:04 +00:00
import { Migrations } from '@tldraw/store';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { Polyline2d } from '@tldraw/primitives';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { react } from '@tldraw/state';
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
import { default as React_2 } from 'react';
import * as React_3 from 'react';
Asset improvements (#1557) This PR does the following: - Add `selfHosted.js`, which is a great option for users that wish to self host the assets. Works well for both self hosting from the public folder or via a CDN. - Updates the docs for assets. We now have a dedicated page for assets where all the options are more clearly explained. I also removed the assets explanation from the main docs as the unpkg option should work out of the box and setting up the assets is no longer necessary. - Cleaned up the `refresh-assets` script. We now use common `types.d.ts` file to define our types. All the other options then reuse them. - Pulled out the `formatAssetUrl` into it's own file. It's now static an no longer generated. - `urls.d.ts`, `import.d.ts`, and newly added `selfhosted.d.ts` are now also no longer generated as we can import the types from `types.d.ts`. - You can now pass a subset of `assetUrls` to `<Tldraw />` and it will override the default option with the passed in overrides. This makes it easy to only customizes certain assets (only change the draw font as an example). ### Change Type - [x] `patch` — Bug Fix
2023-06-09 11:43:01 +00:00
import { RecursivePartial } from '@tldraw/utils';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { RotateCorner } from '@tldraw/primitives';
import { SelectionCorner } from '@tldraw/primitives';
import { SelectionEdge } from '@tldraw/primitives';
import { SelectionHandle } from '@tldraw/primitives';
Rename tlstore to store (#1507) This PR renames the `@tldraw/tlstore` package to `@tldraw/store`, mainly to avoid confusion between `TLStore`. Will be doing the same with other packages. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Replace @tldraw/tlstore with @tldraw/store
2023-06-03 08:59:04 +00:00
import { SerializedSchema } from '@tldraw/store';
[improvement] store snapshot types (#1657) This PR improves the types for the Store. - renames `StoreSnapshot` to `SerializedStore`, which is the return type of `Store.serialize` - creates `StoreSnapshot` as a type for the return type of `Store.getSnapshot` / the argument type for `Store.loadSnapshot` - creates `TLStoreSnapshot` as the type used for the `TLStore`. This came out of a session I had with a user. This should prevent needing to import types from `@tldraw/store` directly. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - [dev] Rename `StoreSnapshot` to `SerializedStore` - [dev] Create new `StoreSnapshot` as type related to `getSnapshot`/`loadSnapshot`
2023-06-27 12:25:55 +00:00
import { SerializedStore } from '@tldraw/store';
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
import { ShapeProps } from '@tldraw/tlschema';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { Signal } from '@tldraw/state';
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
import { StoreSchema } from '@tldraw/store';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { StrokePoint } from '@tldraw/primitives';
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
import { StyleProp } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLArrowShape } from '@tldraw/tlschema';
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
import { TLArrowShapeArrowheadStyle } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLAsset } from '@tldraw/tlschema';
import { TLAssetId } from '@tldraw/tlschema';
import { TLAssetPartial } from '@tldraw/tlschema';
import { TLBaseShape } from '@tldraw/tlschema';
import { TLBookmarkAsset } from '@tldraw/tlschema';
import { TLBookmarkShape } from '@tldraw/tlschema';
import { TLCamera } from '@tldraw/tlschema';
import { TLCursor } from '@tldraw/tlschema';
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLDocument } from '@tldraw/tlschema';
import { TLDrawShape } from '@tldraw/tlschema';
import { TLEmbedShape } from '@tldraw/tlschema';
import { TLFrameShape } from '@tldraw/tlschema';
import { TLGeoShape } from '@tldraw/tlschema';
import { TLGroupShape } from '@tldraw/tlschema';
import { TLHandle } from '@tldraw/tlschema';
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
import { TLHighlightShape } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLImageAsset } from '@tldraw/tlschema';
import { TLImageShape } from '@tldraw/tlschema';
import { TLInstance } from '@tldraw/tlschema';
import { TLInstancePageState } from '@tldraw/tlschema';
derived presence state (#1204) This PR adds - A new `TLInstancePresence` record type, to collect info about the presence state in a particular instance of the editor. This will eventually be used to sync presence data instead of sending instance-only state across the wire. - **Record Scopes** `RecordType` now has a `scope` property which can be one of three things: - `document`: the record belongs to the document and should be synced and persisted freely. Currently: `TLDocument`, `TLPage`, `TLShape`, and `TLAsset` - `instance`: the record belongs to a single instance of the store and should not be synced at all. It should not be persisted directly in most cases, but rather compiled into a kind of 'instance configuration' to store alongside the local document data so that when reopening the associated document it can remember some of the previous instance state. Currently: `TLInstance`, `TLInstancePageState`, `TLCamera`, `TLUser`, `TLUserDocument`, `TLUserPresence` - `presence`: the record belongs to a single instance of the store and should not be persisted, but may be synced using the special presence sync protocol. Currently just `TLInstancePresence` This sets us up for the following changes, which are gonna be pretty high-impact in terms of integrating tldraw into existing systems: - Removing `instanceId` as a config option. Each instance gets a randomly generated ID. - We'd replace it with an `instanceConfig` option that has stuff like selectedIds, camera positions, and so on. Then it's up to library users to get and reinstate the instance config at persistence boundaries. - Removing `userId` as config option, and removing the `TLUser` type altogether. - We might need to revisit when doing auth-enabled features like locking shapes, but I suspect that will be separate.
2023-04-27 18:03:19 +00:00
import { TLInstancePresence } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLLineShape } from '@tldraw/tlschema';
import { TLNoteShape } from '@tldraw/tlschema';
import { TLPage } from '@tldraw/tlschema';
import { TLPageId } from '@tldraw/tlschema';
import { TLParentId } from '@tldraw/tlschema';
import { TLRecord } from '@tldraw/tlschema';
import { TLScribble } from '@tldraw/tlschema';
import { TLShape } from '@tldraw/tlschema';
import { TLShapeId } from '@tldraw/tlschema';
import { TLShapePartial } from '@tldraw/tlschema';
import { TLStore } from '@tldraw/tlschema';
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
import { TLStoreProps } from '@tldraw/tlschema';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { TLTextShape } from '@tldraw/tlschema';
import { TLUnknownShape } from '@tldraw/tlschema';
import { TLVideoAsset } from '@tldraw/tlschema';
import { TLVideoShape } from '@tldraw/tlschema';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { track } from '@tldraw/state';
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
import { UnknownRecord } from '@tldraw/store';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { useComputed } from '@tldraw/state';
import { useQuickReactor } from '@tldraw/state';
import { useReactor } from '@tldraw/state';
import { useValue } from '@tldraw/state';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
import { Vec2d } from '@tldraw/primitives';
import { Vec2dModel } from '@tldraw/tlschema';
import { VecLike } from '@tldraw/primitives';
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
import { whyAmIRunning } from '@tldraw/state';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export const ACCEPTED_ASSET_TYPE: string;
// @public (undocumented)
export const ACCEPTED_IMG_TYPE: string[];
// @public (undocumented)
export const ACCEPTED_VID_TYPE: string[];
// @internal (undocumented)
export const ANIMATION_MEDIUM_MS = 320;
// @internal (undocumented)
export const ANIMATION_SHORT_MS = 80;
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const ArrowShape: TLShapeInfo<TLArrowShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
canEdit: () => boolean;
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
canSnap: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLArrowShape): JSX.Element | null;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getBounds(shape: TLArrowShape): Box2d;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getCenter(shape: TLArrowShape): Vec2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLArrowShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
getHandles(shape: TLArrowShape): TLHandle[];
// (undocumented)
getLabelBounds(shape: TLArrowShape): Box2d | null;
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getOutline(shape: TLArrowShape): Vec2d[];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getOutlineWithoutLabel(shape: TLArrowShape): Vec2d[];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
hideResizeHandles: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideRotateHandle: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>;
// (undocumented)
hitTestLineSegment(shape: TLArrowShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLArrowShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLArrowShape): JSX.Element | null;
// (undocumented)
isClosed: () => boolean;
// (undocumented)
get labelBoundsCache(): ComputedCache<Box2d | null, TLArrowShape>;
// (undocumented)
onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLArrowShape>;
// (undocumented)
onHandleChange: TLOnHandleChangeHandler<TLArrowShape>;
// (undocumented)
onResize: TLOnResizeHandler<TLArrowShape>;
// (undocumented)
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;
// (undocumented)
snapPoints(_shape: TLArrowShape): Vec2d[];
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLArrowShape, ctx: SvgExportContext): SVGGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "arrow";
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
2023-06-04 10:38:53 +00:00
}
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { atom }
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export abstract class BaseBoxShapeTool extends StateNode {
// (undocumented)
static children: () => (typeof Idle_4 | typeof Pointing_2)[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
[refactor] reduce dependencies on shape utils in editor (#1693) We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util
2023-07-07 13:56:31 +00:00
abstract shapeType: string;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
}
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends ShapeUtil<Shape> {
// (undocumented)
getBounds(shape: Shape): Box2d;
// (undocumented)
getCenter(shape: Shape): Vec2d;
// (undocumented)
getOutline(shape: Shape): Vec2d[];
// (undocumented)
hitTestLineSegment(shape: Shape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: Shape, point: VecLike): boolean;
// (undocumented)
onResize: TLOnResizeHandler<any>;
}
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
export function blobAsString(blob: Blob): Promise<string>;
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const BookmarkShape: TLShapeInfo<TLBookmarkShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
// (undocumented)
canResize: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLBookmarkShape): JSX.Element;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLBookmarkShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLBookmarkShape): JSX.Element;
// (undocumented)
onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
// (undocumented)
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "bookmark";
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
2023-06-04 10:38:53 +00:00
}
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
Remove on drop override (#1612) This PR removes the `onDropOverride` prop from the canvas, which was a bit of a hack. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] Remove `onDropOverride`
2023-06-18 12:51:19 +00:00
export const Canvas: React_2.MemoExoticComponent<() => JSX.Element>;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
export const checkFlag: (flag: (() => boolean) | boolean | undefined) => boolean | undefined;
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { computed }
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public
export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
// @public (undocumented)
export const coreShapes: readonly [TLShapeInfo<TLGroupShape>, TLShapeInfo<TLEmbedShape>, TLShapeInfo<TLBookmarkShape>, TLShapeInfo<TLImageShape>, TLShapeInfo<TLTextShape>];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
export function correctSpacesToNbsp(input: string): string;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
// @public
export function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
export function createTLStore({ initialData, defaultName, ...rest }: TLStoreOptions): TLStore;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
[fix] yjs presence (#1603) This PR: - updates the yjs example to include user presence - tweaks the `createPresenceStateDerivation` API - fix a "double update" bug caused by re-syncing local changes - fix connection bugs ### Change Type - [x] `minor` — New feature
2023-06-16 15:59:13 +00:00
// @public (undocumented)
export function createTLUser(opts?: {
derivePresenceState?: ((store: TLStore) => Signal<null | TLInstancePresence>) | undefined;
userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
}): TLUser;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
export function dataTransferItemAsString(item: DataTransferItem): Promise<string>;
// @public (undocumented)
export function dataUrlToFile(url: string, filename: string, mimeType: string): Promise<File>;
// @internal (undocumented)
export type DebugFlag<T> = DebugFlagDef<T> & Atom<T>;
// @internal (undocumented)
export const debugFlags: {
preventDefaultLogging: DebugFlag<boolean>;
pointerCaptureLogging: DebugFlag<boolean>;
pointerCaptureTracking: DebugFlag<boolean>;
pointerCaptureTrackingObject: DebugFlag<Map<Element, number>>;
elementRemovalLogging: DebugFlag<boolean>;
debugSvg: DebugFlag<boolean>;
throwToBlob: DebugFlag<boolean>;
logMessages: DebugFlag<never[]>;
resetConnectionEveryPing: DebugFlag<boolean>;
debugCursors: DebugFlag<boolean>;
forceSrgb: DebugFlag<boolean>;
};
// @internal (undocumented)
export const DEFAULT_ANIMATION_OPTIONS: {
duration: number;
easing: (t: number) => number;
};
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export let defaultEditorAssetUrls: TLEditorAssetUrls;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
export function defaultEmptyAs(str: string, dflt: string): string;
// @internal (undocumented)
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
2023-06-04 10:38:53 +00:00
export const DefaultErrorFallback: TLErrorFallbackComponent;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
export const defaultShapes: readonly [TLShapeInfo<TLDrawShape>, TLShapeInfo<TLGeoShape>, TLShapeInfo<TLLineShape>, TLShapeInfo<TLNoteShape>, TLShapeInfo<TLFrameShape>, TLShapeInfo<TLArrowShape>, TLShapeInfo<TLHighlightShape>, TLShapeInfo<TLVideoShape>];
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export const defaultTools: TLStateNodeConstructor[];
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
export { defineMigrations }
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
// @public (undocumented)
export function defineShape<T extends TLUnknownShape>(type: T['type'], opts: Omit<TLShapeInfo<T>, 'type'>): TLShapeInfo<T>;
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @internal (undocumented)
export const DOUBLE_CLICK_DURATION = 450;
// @public (undocumented)
export function downloadDataURLAsFile(dataUrl: string, filename: string): void;
// @internal (undocumented)
export const DRAG_DISTANCE = 4;
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const DrawShape: TLShapeInfo<TLDrawShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
// (undocumented)
component(shape: TLDrawShape): JSX.Element;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
expandSelectionOutlinePx(shape: TLDrawShape): number;
// (undocumented)
getBounds(shape: TLDrawShape): Box2d;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getCenter(shape: TLDrawShape): Vec2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLDrawShape['props'];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getOutline(shape: TLDrawShape): Vec2d[];
// (undocumented)
hideResizeHandles: (shape: TLDrawShape) => boolean;
// (undocumented)
hideRotateHandle: (shape: TLDrawShape) => boolean;
// (undocumented)
hideSelectionBoundsBg: (shape: TLDrawShape) => boolean;
// (undocumented)
hideSelectionBoundsFg: (shape: TLDrawShape) => boolean;
// (undocumented)
hitTestLineSegment(shape: TLDrawShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLDrawShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLDrawShape): JSX.Element;
// (undocumented)
isClosed: (shape: TLDrawShape) => boolean;
// (undocumented)
onResize: TLOnResizeHandler<TLDrawShape>;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLDrawShape, ctx: SvgExportContext): SVGGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "draw";
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
2023-06-04 10:38:53 +00:00
}
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
// @public (undocumented)
export class Editor extends EventEmitter<TLEventMap> {
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
constructor({ store, user, shapes, tools, getContainer }: TLEditorOptions);
[Docs] Change some editor properties to methods (#1553) This PR changes some App properties into methods, to make them consistent with everything else. Closes #1544 Is there any reason why we can't change any of these? eg: ![image](https://github.com/tldraw/tldraw/assets/15892272/24ef843d-9677-4eca-a756-84fc2188ef17) ### Change Type - [x] `documentation` — Changes to the documentation only (will not publish a new version) ### Release Notes - [docs] Fixed some methods that were incorrectly marked as properties.
2023-06-08 10:14:44 +00:00
addOpenMenu(id: string): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
alignShapes(operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top', ids?: TLShapeId[]): this;
get allShapesCommonBounds(): Box2d | null;
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
2023-06-04 10:38:53 +00:00
animateCamera(x: number, y: number, z?: number, opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
animateShapes(partials: (null | TLShapePartial | undefined)[], options?: {
duration?: number;
ease?: (t: number) => number;
}): this;
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
2023-06-04 10:38:53 +00:00
animateToShape(shapeId: TLShapeId, opts?: TLAnimationOptions): this;
(1/2) Timeout collaborator cursors (#1525) This PR adds a timeout to collaborator cursors. It's part 1 of two PRs. The second one is smaller: https://github.com/tldraw/brivate/pull/2053 # What is this? After three seconds of inactivity, collaborator cursors disappear. ![2023-06-08 at 10 42 43 - Moccasin Flamingo](https://github.com/tldraw/tldraw/assets/15892272/93e463aa-0329-4ecb-ada1-4c38b36a655b) If you're following someone, you can always see their cursor. ![2023-06-08 at 10 45 42 - Olive Crayfish](https://github.com/tldraw/tldraw/assets/15892272/11e8d85a-18a8-4976-85c5-d14f3841c296) # Is there anything else? The PR also adds support for the brivate PR: https://github.com/tldraw/brivate/pull/2053 # Admin ### Change Type - [x] `minor` — New Feature ### Test Plan You probably need to test this locally, as we don't do multiplayer previews on this repo yet. 1. Open the same shared project in two browser sessions. 2. Move around the cursor in one session, while able to see it from the other. 3. Stop moving the cursor. 4. Make sure that the cursor disappears on the other session after 3 seconds. 5. Move the cursor again, and make sure it reappears it. 6. Make sure that viewport-following the user makes the cursor show permanently. ### Release Notes - Brought back cursor timeouts. Collaborator cursors now disappear after 3 seconds of inactivity. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:48:47 +00:00
animateToUser(userId: string): void;
[feature] reduce motion (#1485) This PR adds a user preference to reduce motion. When enabled the app will not animate the camera (and perhaps skip other animations in the future). It's actual implementation is as an `animateSpeed` property, so we can also use it to speed up or slow down our animations if that's something we want to do! ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Turn on reduce motion 2. Use minimap / camera features to zoom in / out / etc - [x] Unit Tests ### Release Notes - [editor] Add `reduceMotion` user preference - Add reduce motion option to preferences
2023-05-30 15:22:49 +00:00
get animationSpeed(): number;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
annotateError(error: unknown, { origin, willCrashApp, tags, extras, }: {
origin: string;
willCrashApp: boolean;
tags?: Record<string, boolean | number | string>;
extras?: Record<string, unknown>;
}): void;
get assets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[];
bail(): this;
bailToMark(id: string): this;
batch(fn: () => void): this;
blur(): this;
bringForward(ids?: TLShapeId[]): this;
bringToFront(ids?: TLShapeId[]): this;
get brush(): Box2dModel | null;
get camera(): TLCamera;
[fix] camera culling (#1602) This PR restores camera culling behavior and includes a 500ms forced render while the camera is moving to prevent weird long pan behavior. It: - removes `CameraManager` - adds `cameraState` to editor ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] Adds `Editor.cameraState` - Adds smart culling to make panning and zooming more smooth
2023-06-16 13:02:38 +00:00
get cameraState(): "idle" | "moving";
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
cancel(): this;
cancelDoubleClick(): void;
get canMoveCamera(): boolean;
set canMoveCamera(canMove: boolean);
get canRedo(): boolean;
get canUndo(): boolean;
[firefox] Fix the pointer getting stuck down when you press the control key (#1390) This PR fixes a bug in firefox where the pointer can get stuck down while pressing the control key. It achieves this by taking a previous fix (specifically for `useShapeEvents`), and it applies the fix at a deeper level (within `app.dispatch`). ## Before ![2023-05-16 at 15 33 02 - Crimson Coyote](https://github.com/tldraw/tldraw/assets/15892272/7d4b5bb1-a2e5-400c-9935-fddcc9645e52) ## After ![2023-05-16 at 15 34 03 - Purple Panda](https://github.com/tldraw/tldraw/assets/15892272/34a598b2-bf6d-4847-8ce9-a3d52c418174) ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Use firefox. 2. On the canvas... pointer down (to start a selection box). 3. Control key down. 4. Pointer up. 5. Make sure that that the selection box is gone. ^ Repeat the above for: Pointer down on a shape. Pointer down on a handle. ### Release Notes - [Firefox] Fixed a bug where the pointer could get stuck down when the control key is held down.
2023-05-19 10:35:24 +00:00
// @internal (undocumented)
capturedPointerId: null | number;
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
2023-06-04 10:38:53 +00:00
centerOnPoint(x: number, y: number, opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal
protected _clickManager: ClickManager;
complete(): this;
// @internal (undocumented)
crash(error: unknown): void;
// @internal
get crashingError(): unknown;
createAssets(assets: TLAsset[]): this;
// @internal (undocumented)
createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): {
tags: {
origin: string;
willCrashApp: 'unknown' | boolean;
};
extras: {
activeStateNode?: string;
selectedShapes?: TLUnknownShape[];
editingShape?: TLUnknownShape;
inputs?: Record<string, unknown>;
};
};
createPage(title: string, id?: TLPageId, belowPageIndex?: string): this;
Add optional generic to `updateShapes` / `createShapes` (#1579) This PR adds a generic that we can use with `updateShapes` and `createShapes` in order to type the partials being passed into those methods. By default, the partials are typed as `TLUnknownShape`, which accepts any props. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests ### Release Notes - [editor] adds an optional shape generic to `updateShapes` and `createShapes`
2023-06-13 18:02:17 +00:00
createShapes<T extends TLUnknownShape>(partials: TLShapePartial<T>[], select?: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get croppingId(): null | TLShapeId;
get currentPage(): TLPage;
get currentPageId(): TLPageId;
Tidy up (#1600) This PR is intended to do some housecleaning ahead of our developer release. It: - co-locates code in the `Editor` class, i.e. moving shape-related methods next to other shape-related methods - renames `cullingBounds` and other culling-related names to `renderingBounds` - renames `Editor.getParentPageId` to `Editor.getAncestorPageId` - renames `Editor.shapeIds` to `Editor.currentPageShapeIds` ### Change Type - [x] `major` — api changes
2023-06-16 11:27:47 +00:00
get currentPageShapeIds(): Set<TLShapeId>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get currentToolId(): string;
get cursor(): TLCursor;
deleteAssets(ids: TLAssetId[]): this;
[Docs] Change some editor properties to methods (#1553) This PR changes some App properties into methods, to make them consistent with everything else. Closes #1544 Is there any reason why we can't change any of these? eg: ![image](https://github.com/tldraw/tldraw/assets/15892272/24ef843d-9677-4eca-a756-84fc2188ef17) ### Change Type - [x] `documentation` — Changes to the documentation only (will not publish a new version) ### Release Notes - [docs] Fixed some methods that were incorrectly marked as properties.
2023-06-08 10:14:44 +00:00
deleteOpenMenu(id: string): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
deletePage(id: TLPageId): void;
deleteShapes(ids?: TLShapeId[]): this;
deselect(...ids: TLShapeId[]): this;
get devicePixelRatio(): number;
[Docs] Change some editor properties to methods (#1553) This PR changes some App properties into methods, to make them consistent with everything else. Closes #1544 Is there any reason why we can't change any of these? eg: ![image](https://github.com/tldraw/tldraw/assets/15892272/24ef843d-9677-4eca-a756-84fc2188ef17) ### Change Type - [x] `documentation` — Changes to the documentation only (will not publish a new version) ### Release Notes - [docs] Fixed some methods that were incorrectly marked as properties.
2023-06-08 10:14:44 +00:00
dispatch(info: TLEventInfo): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly disposables: Set<() => void>;
dispose(): void;
distributeShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
get documentSettings(): TLDocument;
Add tsdocs to Editor methods (#1581) This PR does a first-pass of adding tsdocs to the methods of the Editor class. It's a minimal start — just descriptions of them, and their parameters. It makes the Editor docs page a lot more fleshed out though, and easier to quickly scan. There's still a lot more to do! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - [dev] Added initial documentation for the Editor class. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-14 06:40:10 +00:00
duplicatePage(id?: TLPageId, createId?: TLPageId): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
duplicateShapes(ids?: TLShapeId[], offset?: VecLike): this;
get editingId(): null | TLShapeId;
// (undocumented)
get editingShape(): null | TLUnknownShape;
get erasingIds(): TLShapeId[];
get erasingIdsSet(): Set<TLShapeId>;
`ExternalContentManager` for handling external content (files, images, etc) (#1550) This PR improves the editor's APIs around creating assets and files. This allows end user developers to replace behavior that might occur, for example, when pasting images or dragging files onto the canvas. Here, we: - remove `onCreateAssetFromFile` prop - remove `onCreateBookmarkFromUrl` prop - introduce `onEditorReady` prop - introduce `onEditorWillDispose` prop - introduce `ExternalContentManager` The `ExternalContentManager` (ECM) is used in circumstances where we're turning external content (text, images, urls, etc) into assets or shapes. It is designed to allow certain methods to be overwritten by other developers as a kind of weakly supported hack. For example, when a user drags an image onto the canvas, the event handler passes a `TLExternalContent` object to the editor's `putExternalContent` method. This method runs the ECM's handler for this content type. That handler may in turn run other methods, such as `createAssetFromFile` or `createShapesForAssets`, which will lead to the image being created on the canvas. If a developer wanted to change the way that assets are created from files, then they could overwrite that method at runtime. ```ts const handleEditorReady = (editor: Editor) => { editor.externalContentManager.createAssetFromFile = myHandler } function Example() { return <Tldraw onEditorReady={handleEditorReady}/> } ``` If you wanted to go even deeper, you could override the editor's `putExternalContent` method. ```ts const handleEditorReady = (editor: Editor) => { const handleExternalContent = (info: TLExternalContent): Promise<void> => { if (info.type === 'files') { // do something here } else { // do the normal thing editor.externalContentManager.handleContent(info) } } ``` ### Change Type - [x] `major` ### Test Plan 1. Drag images, urls, etc. onto the canvas 2. Use copy and paste for single and multiple files 3. Use bookmark / embed shapes and convert between eachother ### Release Notes - [editor] add `ExternalContentManager` for plopping content onto the canvas - [editor] remove `onCreateAssetFromFile` prop - [editor] remove `onCreateBookmarkFromUrl` prop - [editor] introduce `onEditorReady` prop - [editor] introduce `onEditorWillDispose` prop - [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
// (undocumented)
externalContentManager: PlopManager;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
findAncestor(shape: TLShape, predicate: (parent: TLShape) => boolean): TLShape | undefined;
findCommonAncestor(shapes: TLShape[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined;
flipShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
focus(): this;
get focusLayerId(): TLPageId | TLShapeId;
get focusLayerShape(): TLShape | undefined;
Tidy up (#1600) This PR is intended to do some housecleaning ahead of our developer release. It: - co-locates code in the `Editor` class, i.e. moving shape-related methods next to other shape-related methods - renames `cullingBounds` and other culling-related names to `renderingBounds` - renames `Editor.getParentPageId` to `Editor.getAncestorPageId` - renames `Editor.shapeIds` to `Editor.currentPageShapeIds` ### Change Type - [x] `major` — api changes
2023-06-16 11:27:47 +00:00
getAncestorPageId(shape?: TLShape): TLPageId | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getAncestors(shape: TLShape, acc?: TLShape[]): TLShape[];
getAncestorsById(id: TLShapeId, acc?: TLShape[]): TLShape[];
[refactor] reduce dependencies on shape utils in editor (#1693) We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util
2023-07-07 13:56:31 +00:00
// (undocumented)
getArrowInfo(shape: TLArrowShape): ArrowInfo | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getArrowsBoundTo(shapeId: TLShapeId): {
arrowId: TLShapeId;
handleId: "end" | "start";
}[];
getAssetById(id: TLAssetId): TLAsset | undefined;
getAssetBySrc(src: string): TLBookmarkAsset | TLImageAsset | TLVideoAsset | undefined;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getBounds<T extends TLShape>(shape: T): Box2d;
getBoundsById<T extends TLShape>(id: T['id']): Box2d | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getClipPathById(id: TLShapeId): string | undefined;
getContainer: () => HTMLElement;
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
2023-06-04 10:38:53 +00:00
getContent(ids?: TLShapeId[]): TLContent | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getDeltaInParentSpace(shape: TLShape, delta: VecLike): Vec2d;
getDeltaInShapeSpace(shape: TLShape, delta: VecLike): Vec2d;
getDroppingShape(point: VecLike, droppingShapes?: TLShape[]): TLUnknownShape | undefined;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getHandles<T extends TLShape>(shape: T): TLHandle[] | undefined;
getHandlesById<T extends TLShape>(id: T['id']): TLHandle[] | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getHighestIndexForParent(parentId: TLPageId | TLShapeId): string;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
getInitialMetaForShape(_shape: TLShape): JsonObject;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getMaskedPageBounds(shape: TLShape): Box2d | undefined;
getMaskedPageBoundsById(id: TLShapeId): Box2d | undefined;
getOutermostSelectableShape(shape: TLShape, filter?: (shape: TLShape) => boolean): TLShape;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getOutline<T extends TLShape>(shape: T): Vec2d[];
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getOutlineById(id: TLShapeId): Vec2d[];
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getOutlineSegments<T extends TLShape>(shape: T): Vec2d[][];
getOutlineSegmentsById(id: TLShapeId): Vec2d[][];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getPageBounds(shape: TLShape): Box2d | undefined;
getPageBoundsById(id: TLShapeId): Box2d | undefined;
Add tsdocs to Editor methods (#1581) This PR does a first-pass of adding tsdocs to the methods of the Editor class. It's a minimal start — just descriptions of them, and their parameters. It makes the Editor docs page a lot more fleshed out though, and easier to quickly scan. There's still a lot more to do! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - [dev] Added initial documentation for the Editor class. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-14 06:40:10 +00:00
getPageById(id: TLPageId): TLPage | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getPageCenter(shape: TLShape): null | Vec2d;
getPageCenterById(id: TLShapeId): null | Vec2d;
getPageCorners(shape: TLShape): Vec2d[];
getPageInfoById(id: TLPage['id']): TLPage | undefined;
getPageMaskById(id: TLShapeId): undefined | VecLike[];
getPagePointById(id: TLShapeId): undefined | Vec2d;
getPageRotation(shape: TLShape): number;
getPageRotationById(id: TLShapeId): number;
getPageStateByPageId(id: TLPageId): TLInstancePageState | undefined;
getPageTransform(shape: TLShape): Matrix2d | undefined;
getPageTransformById(id: TLShapeId): Matrix2d | undefined;
[refactor] restore createTLSchema (#1444) This PR restores `createTLSchema`. It also: - removes `TldrawEditorConfig.default` - makes `config` a required property of `<TldrawEditor>`, though it's created automatically in `<Tldraw>`. - makes `config` a required property of `App` - removes `TLShapeType` and replaces the rare usage with `TLShape["type"]` - adds `TLDefaultShape` for a union of our default shapes - makes `TLShape` a union of `TLDefaultShape` and `TLUnknownShape` ### Change Type - [x] `major` — Breaking Change ### Release Notes - [editor] Simplifies custom shape definition - [tldraw] Updates props for <TldrawEditor> component to require a `TldrawEditorConfig`.
2023-05-24 10:48:31 +00:00
getParentIdForNewShapeAtPoint(point: VecLike, shapeType: TLShape['type']): TLPageId | TLShapeId;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getParentShape(shape?: TLShape): TLShape | undefined;
getParentTransform(shape: TLShape): Matrix2d;
getPointInParentSpace(shapeId: TLShapeId, point: VecLike): Vec2d;
getPointInShapeSpace(shape: TLShape, point: VecLike): Vec2d;
[2/3] renderer changes to support "sandwich mode" highlighting (#1418) This diff modifies our canvas/rendering code to support shapes rendering into a "background layer". The background layer isn't a layer in the sense of our own html/svg/indicator layers, but is instead part of the HTML canvas layer and is created by allocating z-indexes to shapes below all others. For most shapes, the background starts at the canvas. If a shape is in a frame, then the frame is treated as the background. ![Kapture 2023-05-19 at 11 38 12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71) Exports now use the `renderingShapes` algorithm which fixed a small bug with exports where opacity wouldn't get correctly propagated down through child shapes. ### The plan 1. initial highlighter shape/tool #1401 2. sandwich rendering for highlighter shapes #1418 **>you are here<** 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan not yet! - [x] Unit Tests ### Release Notes [not yet!]
2023-06-01 15:22:47 +00:00
getShapeAndDescendantIds(ids: TLShapeId[]): Set<TLShapeId>;
getShapeById<T extends TLShape = TLShape>(id: TLParentId): T | undefined;
getShapeIdsInPage(pageId: TLPageId): Set<TLShapeId>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getShapesAtPoint(point: VecLike): TLShape[];
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
// (undocumented)
getShapeStyleIfExists<T>(shape: TLShape, style: StyleProp<T>): T | undefined;
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
2023-06-04 10:38:53 +00:00
getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>;
[refactor] reduce dependencies on shape utils in editor (#1693) We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util
2023-07-07 13:56:31 +00:00
// (undocumented)
getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>;
// (undocumented)
getShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): T;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getSortedChildIds(parentId: TLParentId): TLShapeId[];
getStateDescendant(path: string): StateNode | undefined;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
// @internal (undocumented)
getStyleForNextShape<T>(style: StyleProp<T>): T;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
getSvg(ids?: TLShapeId[], opts?: Partial<{
scale: number;
background: boolean;
padding: number;
darkMode?: boolean | undefined;
preserveAspectRatio: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
}>): Promise<SVGSVGElement | undefined>;
getTransform(shape: TLShape): Matrix2d;
get gridSize(): number;
groupShapes(ids?: TLShapeId[], groupId?: TLShapeId): this;
hasAncestor(shape: TLShape | undefined, ancestorId: TLShapeId): boolean;
get hintingIds(): TLShapeId[];
readonly history: HistoryManager<this>;
get hoveredId(): null | TLShapeId;
get hoveredShape(): null | TLUnknownShape;
inputs: {
originPagePoint: Vec2d;
originScreenPoint: Vec2d;
previousPagePoint: Vec2d;
previousScreenPoint: Vec2d;
currentPagePoint: Vec2d;
currentScreenPoint: Vec2d;
keys: Set<string>;
buttons: Set<number>;
isPen: boolean;
shiftKey: boolean;
ctrlKey: boolean;
altKey: boolean;
isDragging: boolean;
isPointing: boolean;
isPinching: boolean;
isEditing: boolean;
isPanning: boolean;
pointerVelocity: Vec2d;
};
get instanceState(): TLInstance;
interrupt(): this;
Firefox: Fix coarse pointer issue (#1701) This PR fixes the editor sometimes incorrectly assuming that you're using a coarse pointer in firefox. It's not a complete fix — it just avoids some of the bigger issues with it. ie: It disables cursor chat. To avoid the issue, we just assume that you have a fine pointer if you're using firefox on desktop. Eventually, we should do a more complete fix for this. I QA'd this change on: * Mac Firefox (no touch screen) * Windows Firefox (touch screen) * Android Firefox ### Change Type - [x] `patch` — Bug fix [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Use firefox on desktop with a touch screen. 2. Check that you can still use cursor chat (when in a shared project). - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Fixed firefox not being able to use cursor chat when using a touch screen on desktop.
2023-07-04 15:24:20 +00:00
readonly isAndroid: boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get isChangingStyle(): boolean;
set isChangingStyle(v: boolean);
readonly isChromeForIos: boolean;
get isCoarsePointer(): boolean;
set isCoarsePointer(v: boolean);
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
get isDarkMode(): boolean;
Firefox: Fix coarse pointer issue (#1701) This PR fixes the editor sometimes incorrectly assuming that you're using a coarse pointer in firefox. It's not a complete fix — it just avoids some of the bigger issues with it. ie: It disables cursor chat. To avoid the issue, we just assume that you have a fine pointer if you're using firefox on desktop. Eventually, we should do a more complete fix for this. I QA'd this change on: * Mac Firefox (no touch screen) * Windows Firefox (touch screen) * Android Firefox ### Change Type - [x] `patch` — Bug fix [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Use firefox on desktop with a touch screen. 2. Check that you can still use cursor chat (when in a shared project). - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Fixed firefox not being able to use cursor chat when using a touch screen on desktop.
2023-07-04 15:24:20 +00:00
readonly isFirefox: boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get isFocused(): boolean;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
get isFocusMode(): boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get isGridMode(): boolean;
isIn(path: string): boolean;
isInAny(...paths: string[]): boolean;
readonly isIos: boolean;
get isMenuOpen(): boolean;
get isPenMode(): boolean;
isPointInShape(point: VecLike, shape: TLShape): boolean;
get isReadOnly(): boolean;
readonly isSafari: boolean;
isSelected(id: TLShapeId): boolean;
isShapeInPage(shape: TLShape, pageId?: TLPageId): boolean;
[refactor] reduce dependencies on shape utils in editor (#1693) We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util
2023-07-07 13:56:31 +00:00
isShapeOfType<T extends TLUnknownShape>(shape: TLUnknownShape, type: T['type']): shape is T;
Add support for locking shapes (#1447) Add support for locking shapes. How it works right now: - You can lock / unlock shapes from the context menu. - You can also lock shapes with `⇧⌘L` keyboard shortcut. - You cannot select locked shapes: clicking on the shape, double click to edit, select all, brush select,... should not work. - You cannot change props of locked shapes. - You cannot delete locked shapes. - If a shape is grouped or within the frame the same rules apply. - If you delete a group, that contains locked shape it will also delete those shapes. This seems to be what other apps use as well. Solves #1445 ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Insert a shape 2. Right click on it and lock it. 3. Test that you cannot select it, change its properties, delete it. 4. Do the same with locked groups. 5. Do the same with locked frames. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes - Add support for locking shapes. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:13:38 +00:00
isShapeOrAncestorLocked(shape?: TLShape): boolean;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
get isSnapMode(): boolean;
get isToolLocked(): boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
isWithinSelection(id: TLShapeId): boolean;
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
get locale(): string;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
mark(reason?: string, onUndo?: boolean, onRedo?: boolean): string;
moveShapesToPage(ids: TLShapeId[], pageId: TLPageId): this;
nudgeShapes(ids: TLShapeId[], direction: Vec2dModel, major?: boolean, ephemeral?: boolean): this;
[refactor] Remove `TLShapeDef`, `getShapeUtilByType`. (#1432) This PR removes `TLShapeDef` and associated helpers / references. It purposely loosens the configuration and typings to better support customization. ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Use the app! ### Release Notes - [tlschema] Update props of `createTLSchema` - [editor] Update props of `TldrawEditorConfig` - [editor] Remove `App.getShapeUtilByType` - [editor] Update `App.getShapeUtil` to take a type rather than a shape --------- Co-authored-by: alex <alex@dytry.ch>
2023-05-23 12:32:42 +00:00
get onlySelectedShape(): null | TLShape;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
get openMenus(): string[];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
packShapes(ids?: TLShapeId[], padding?: number): this;
get pages(): TLPage[];
get pageState(): TLInstancePageState;
pageToScreen(x: number, y: number, z?: number, camera?: Vec2dModel): {
x: number;
y: number;
z: number;
};
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
2023-06-04 10:38:53 +00:00
pan(dx: number, dy: number, opts?: TLAnimationOptions): this;
panZoomIntoView(ids: TLShapeId[], opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
popFocusLayer(): this;
Add support for project names (#1340) This PR adds some things that we need for the Project Name feature on tldraw.com. It should be reviewed alongside https://github.com/tldraw/tldraw-lite/pull/1814 ## Name Property This PR adds a `name` property to `TLDocument`. We use this to store a project's name. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced"> ## Top Zone This PR adds a `topZone` area of the UI that we can add stuff to, similar to how `shareZone` works. It also adds an example to show where the `topZone` and `shareZone` are: <img width="1511" alt="Screenshot 2023-05-12 at 10 57 40" src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974"> ## Breakpoints This PR change's the UI's breakpoints a little bit. It moves the action bar to the bottom a little bit earlier. (This gives us more space at the top for the project name). ![2023-05-12 at 11 08 26 - Fuchsia Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d) ![2023-05-12 at 13 45 04 - Tan Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6) ## Input Blur This PR adds an `onBlur` parameter to `Input`. This was needed because 'clicking off' the input wasn't firing `onComplete` or `onCancel`. <img width="620" alt="Screenshot 2023-05-09 at 16 12 58" src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf"> ## Create Project Name This PR adds an internal `createProjectName` property to `TldrawEditorConfig`. Similar to `derivePresenceState`, you can pass a custom function to it. It lets you control what gets used as the default project name. We use it to set different names in our local projects compared to shared projects. In the future, when we add more advanced project features, we could handle this better within the UI. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41"> ### Test Plan 1. Gradually reduce the width of the browser window. 2. Check that the actions menu jumps to the bottom before the style panel moves to the bottom. --- 1. In the examples app, open the `/zones` example. 2. Check that there's a 'top zone' at the top. - [ ] Unit Tests - [ ] Webdriver tests ### Release Note - [dev] Added a `topZone` area where you can put stuff. - [dev] Added a `name` property to `TLDocument` - and `app` methods for it. - [dev] Added an internal `createProjectName` config property for controlling the default project name. - [dev] Added an `onBlur` parameter to `Input`. - Moved the actions bar to the bottom on medium-sized screens. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
// @internal (undocumented)
get projectName(): string;
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
2023-06-04 10:38:53 +00:00
putContent(content: TLContent, options?: {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
point?: VecLike;
select?: boolean;
preservePosition?: boolean;
preserveIds?: boolean;
}): this;
`ExternalContentManager` for handling external content (files, images, etc) (#1550) This PR improves the editor's APIs around creating assets and files. This allows end user developers to replace behavior that might occur, for example, when pasting images or dragging files onto the canvas. Here, we: - remove `onCreateAssetFromFile` prop - remove `onCreateBookmarkFromUrl` prop - introduce `onEditorReady` prop - introduce `onEditorWillDispose` prop - introduce `ExternalContentManager` The `ExternalContentManager` (ECM) is used in circumstances where we're turning external content (text, images, urls, etc) into assets or shapes. It is designed to allow certain methods to be overwritten by other developers as a kind of weakly supported hack. For example, when a user drags an image onto the canvas, the event handler passes a `TLExternalContent` object to the editor's `putExternalContent` method. This method runs the ECM's handler for this content type. That handler may in turn run other methods, such as `createAssetFromFile` or `createShapesForAssets`, which will lead to the image being created on the canvas. If a developer wanted to change the way that assets are created from files, then they could overwrite that method at runtime. ```ts const handleEditorReady = (editor: Editor) => { editor.externalContentManager.createAssetFromFile = myHandler } function Example() { return <Tldraw onEditorReady={handleEditorReady}/> } ``` If you wanted to go even deeper, you could override the editor's `putExternalContent` method. ```ts const handleEditorReady = (editor: Editor) => { const handleExternalContent = (info: TLExternalContent): Promise<void> => { if (info.type === 'files') { // do something here } else { // do the normal thing editor.externalContentManager.handleContent(info) } } ``` ### Change Type - [x] `major` ### Test Plan 1. Drag images, urls, etc. onto the canvas 2. Use copy and paste for single and multiple files 3. Use bookmark / embed shapes and convert between eachother ### Release Notes - [editor] add `ExternalContentManager` for plopping content onto the canvas - [editor] remove `onCreateAssetFromFile` prop - [editor] remove `onCreateBookmarkFromUrl` prop - [editor] introduce `onEditorReady` prop - [editor] introduce `onEditorWillDispose` prop - [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
putExternalContent(info: TLExternalContent): Promise<void>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
redo(): this;
renamePage(id: TLPageId, name: string, squashing?: boolean): this;
Tidy up (#1600) This PR is intended to do some housecleaning ahead of our developer release. It: - co-locates code in the `Editor` class, i.e. moving shape-related methods next to other shape-related methods - renames `cullingBounds` and other culling-related names to `renderingBounds` - renames `Editor.getParentPageId` to `Editor.getAncestorPageId` - renames `Editor.shapeIds` to `Editor.currentPageShapeIds` ### Change Type - [x] `major` — api changes
2023-06-16 11:27:47 +00:00
get renderingBounds(): Box2d;
// @internal (undocumented)
readonly _renderingBounds: Atom<Box2d, unknown>;
get renderingBoundsExpanded(): Box2d;
// @internal (undocumented)
readonly _renderingBoundsExpanded: Atom<Box2d, unknown>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get renderingShapes(): {
id: TLShapeId;
index: number;
[2/3] renderer changes to support "sandwich mode" highlighting (#1418) This diff modifies our canvas/rendering code to support shapes rendering into a "background layer". The background layer isn't a layer in the sense of our own html/svg/indicator layers, but is instead part of the HTML canvas layer and is created by allocating z-indexes to shapes below all others. For most shapes, the background starts at the canvas. If a shape is in a frame, then the frame is treated as the background. ![Kapture 2023-05-19 at 11 38 12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71) Exports now use the `renderingShapes` algorithm which fixed a small bug with exports where opacity wouldn't get correctly propagated down through child shapes. ### The plan 1. initial highlighter shape/tool #1401 2. sandwich rendering for highlighter shapes #1418 **>you are here<** 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan not yet! - [x] Unit Tests ### Release Notes [not yet!]
2023-06-01 15:22:47 +00:00
backgroundIndex: number;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
opacity: number;
isCulled: boolean;
isInViewport: boolean;
[2/3] renderer changes to support "sandwich mode" highlighting (#1418) This diff modifies our canvas/rendering code to support shapes rendering into a "background layer". The background layer isn't a layer in the sense of our own html/svg/indicator layers, but is instead part of the HTML canvas layer and is created by allocating z-indexes to shapes below all others. For most shapes, the background starts at the canvas. If a shape is in a frame, then the frame is treated as the background. ![Kapture 2023-05-19 at 11 38 12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71) Exports now use the `renderingShapes` algorithm which fixed a small bug with exports where opacity wouldn't get correctly propagated down through child shapes. ### The plan 1. initial highlighter shape/tool #1401 2. sandwich rendering for highlighter shapes #1418 **>you are here<** 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan not yet! - [x] Unit Tests ### Release Notes [not yet!]
2023-06-01 15:22:47 +00:00
maskedPageBounds: Box2d | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}[];
reparentShapesById(ids: TLShapeId[], parentId: TLParentId, insertIndex?: string): this;
replaceStoreContentsWithRecordsForOtherDocument(records: TLRecord[]): void;
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
2023-06-04 10:38:53 +00:00
resetZoom(point?: Vec2d, opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
resizeShape(id: TLShapeId, scale: VecLike, options?: {
initialBounds?: Box2d;
scaleOrigin?: VecLike;
scaleAxisRotation?: number;
initialShape?: TLShape;
initialPageTransform?: MatLike;
dragHandle?: TLResizeHandle;
mode?: TLResizeMode;
}): this;
readonly root: RootState;
rotateShapesBy(ids: TLShapeId[], delta: number): this;
screenToPage(x: number, y: number, z?: number, camera?: Vec2dModel): {
x: number;
y: number;
z: number;
};
get scribble(): null | TLScribble;
select(...ids: TLShapeId[]): this;
selectAll(): this;
get selectedIds(): TLShapeId[];
get selectedIdsSet(): ReadonlySet<TLShapeId>;
get selectedPageBounds(): Box2d | null;
[refactor] Remove `TLShapeDef`, `getShapeUtilByType`. (#1432) This PR removes `TLShapeDef` and associated helpers / references. It purposely loosens the configuration and typings to better support customization. ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Use the app! ### Release Notes - [tlschema] Update props of `createTLSchema` - [editor] Update props of `TldrawEditorConfig` - [editor] Remove `App.getShapeUtilByType` - [editor] Update `App.getShapeUtil` to take a type rather than a shape --------- Co-authored-by: alex <alex@dytry.ch>
2023-05-23 12:32:42 +00:00
get selectedShapes(): TLShape[];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get selectionBounds(): Box2d | undefined;
get selectionPageCenter(): null | Vec2d;
get selectionRotation(): number;
selectNone(): this;
sendBackward(ids?: TLShapeId[]): this;
sendToBack(ids?: TLShapeId[]): this;
[feature] reduce motion (#1485) This PR adds a user preference to reduce motion. When enabled the app will not animate the camera (and perhaps skip other animations in the future). It's actual implementation is as an `animateSpeed` property, so we can also use it to speed up or slow down our animations if that's something we want to do! ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Turn on reduce motion 2. Use minimap / camera features to zoom in / out / etc - [x] Unit Tests ### Release Notes - [editor] Add `reduceMotion` user preference - Add reduce motion option to preferences
2023-05-30 15:22:49 +00:00
setAnimationSpeed(animationSpeed: number): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setBrush(brush?: Box2dModel | null): this;
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
2023-06-04 10:38:53 +00:00
setCamera(x: number, y: number, z?: number, { stopFollowing }?: TLViewportOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setCroppingId(id: null | TLShapeId): this;
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
2023-06-04 10:38:53 +00:00
setCurrentPageId(pageId: TLPageId, { stopFollowing }?: TLViewportOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setCursor(cursor: Partial<TLCursor>): this;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setDarkMode(isDarkMode: boolean): this;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
setDevicePixelRatio(dpr: number): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setEditingId(id: null | TLShapeId): this;
setErasingIds(ids?: TLShapeId[]): this;
setFocusLayer(next: null | TLShapeId): this;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setFocusMode(isFocusMode: boolean): this;
setGridMode(isGridMode: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setHintingIds(ids: TLShapeId[]): this;
setHoveredId(id?: null | TLShapeId): this;
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
setLocale(locale: string): void;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
setOpacity(opacity: number, ephemeral?: boolean, squashing?: boolean): this;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
setPageState(partial: Partial<TLInstancePageState>, ephemeral?: boolean): void;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setPenMode(isPenMode: boolean): this;
Add support for project names (#1340) This PR adds some things that we need for the Project Name feature on tldraw.com. It should be reviewed alongside https://github.com/tldraw/tldraw-lite/pull/1814 ## Name Property This PR adds a `name` property to `TLDocument`. We use this to store a project's name. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced"> ## Top Zone This PR adds a `topZone` area of the UI that we can add stuff to, similar to how `shareZone` works. It also adds an example to show where the `topZone` and `shareZone` are: <img width="1511" alt="Screenshot 2023-05-12 at 10 57 40" src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974"> ## Breakpoints This PR change's the UI's breakpoints a little bit. It moves the action bar to the bottom a little bit earlier. (This gives us more space at the top for the project name). ![2023-05-12 at 11 08 26 - Fuchsia Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d) ![2023-05-12 at 13 45 04 - Tan Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6) ## Input Blur This PR adds an `onBlur` parameter to `Input`. This was needed because 'clicking off' the input wasn't firing `onComplete` or `onCancel`. <img width="620" alt="Screenshot 2023-05-09 at 16 12 58" src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf"> ## Create Project Name This PR adds an internal `createProjectName` property to `TldrawEditorConfig`. Similar to `derivePresenceState`, you can pass a custom function to it. It lets you control what gets used as the default project name. We use it to set different names in our local projects compared to shared projects. In the future, when we add more advanced project features, we could handle this better within the UI. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41"> ### Test Plan 1. Gradually reduce the width of the browser window. 2. Check that the actions menu jumps to the bottom before the style panel moves to the bottom. --- 1. In the examples app, open the `/zones` example. 2. Check that there's a 'top zone' at the top. - [ ] Unit Tests - [ ] Webdriver tests ### Release Note - [dev] Added a `topZone` area where you can put stuff. - [dev] Added a `name` property to `TLDocument` - and `app` methods for it. - [dev] Added an internal `createProjectName` config property for controlling the default project name. - [dev] Added an `onBlur` parameter to `Input`. - Moved the actions bar to the bottom on medium-sized screens. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
// @internal (undocumented)
setProjectName(name: string): void;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setReadOnly(isReadOnly: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setScribble(scribble?: null | TLScribble): this;
setSelectedIds(ids: TLShapeId[], squashing?: boolean): this;
setSelectedTool(id: string, info?: {}): this;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setSnapMode(isSnapMode: boolean): this;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
setStyle<T>(style: StyleProp<T>, value: T, ephemeral?: boolean, squashing?: boolean): this;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
setToolLocked(isToolLocked: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
setZoomBrush(zoomBrush?: Box2dModel | null): this;
get shapesArray(): TLShape[];
shapeUtils: {
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
2023-06-04 10:38:53 +00:00
readonly [K in string]?: ShapeUtil<TLUnknownShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
};
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
get sharedOpacity(): SharedStyle<number>;
get sharedStyles(): ReadonlySharedStyleMap;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
slideCamera(opts?: {
speed: number;
direction: Vec2d;
friction: number;
speedThreshold?: number | undefined;
[feature] reduce motion (#1485) This PR adds a user preference to reduce motion. When enabled the app will not animate the camera (and perhaps skip other animations in the future). It's actual implementation is as an `animateSpeed` property, so we can also use it to speed up or slow down our animations if that's something we want to do! ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Turn on reduce motion 2. Use minimap / camera features to zoom in / out / etc - [x] Unit Tests ### Release Notes - [editor] Add `reduceMotion` user preference - Add reduce motion option to preferences
2023-05-30 15:22:49 +00:00
}): this | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly snaps: SnapManager;
get sortedShapesArray(): TLShape[];
stackShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[], gap?: number): this;
[Docs] Change some editor properties to methods (#1553) This PR changes some App properties into methods, to make them consistent with everything else. Closes #1544 Is there any reason why we can't change any of these? eg: ![image](https://github.com/tldraw/tldraw/assets/15892272/24ef843d-9677-4eca-a756-84fc2188ef17) ### Change Type - [x] `documentation` — Changes to the documentation only (will not publish a new version) ### Release Notes - [docs] Fixed some methods that were incorrectly marked as properties.
2023-06-08 10:14:44 +00:00
startFollowingUser(userId: string): this | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
stopCameraAnimation(): this;
[Docs] Change some editor properties to methods (#1553) This PR changes some App properties into methods, to make them consistent with everything else. Closes #1544 Is there any reason why we can't change any of these? eg: ![image](https://github.com/tldraw/tldraw/assets/15892272/24ef843d-9677-4eca-a756-84fc2188ef17) ### Change Type - [x] `documentation` — Changes to the documentation only (will not publish a new version) ### Release Notes - [docs] Fixed some methods that were incorrectly marked as properties.
2023-06-08 10:14:44 +00:00
stopFollowingUser(): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly store: TLStore;
stretchShapes(operation: 'horizontal' | 'vertical', ids?: TLShapeId[]): this;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
readonly textMeasure: TextManager;
Add support for locking shapes (#1447) Add support for locking shapes. How it works right now: - You can lock / unlock shapes from the context menu. - You can also lock shapes with `⇧⌘L` keyboard shortcut. - You cannot select locked shapes: clicking on the shape, double click to edit, select all, brush select,... should not work. - You cannot change props of locked shapes. - You cannot delete locked shapes. - If a shape is grouped or within the frame the same rules apply. - If you delete a group, that contains locked shape it will also delete those shapes. This seems to be what other apps use as well. Solves #1445 ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Insert a shape 2. Right click on it and lock it. 3. Test that you cannot select it, change its properties, delete it. 4. Do the same with locked groups. 5. Do the same with locked frames. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes - Add support for locking shapes. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:13:38 +00:00
toggleLock(ids?: TLShapeId[]): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
undo(): HistoryManager<this>;
ungroupShapes(ids?: TLShapeId[]): this;
updateAssets(assets: TLAssetPartial[]): this;
Add support for project names (#1340) This PR adds some things that we need for the Project Name feature on tldraw.com. It should be reviewed alongside https://github.com/tldraw/tldraw-lite/pull/1814 ## Name Property This PR adds a `name` property to `TLDocument`. We use this to store a project's name. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced"> ## Top Zone This PR adds a `topZone` area of the UI that we can add stuff to, similar to how `shareZone` works. It also adds an example to show where the `topZone` and `shareZone` are: <img width="1511" alt="Screenshot 2023-05-12 at 10 57 40" src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974"> ## Breakpoints This PR change's the UI's breakpoints a little bit. It moves the action bar to the bottom a little bit earlier. (This gives us more space at the top for the project name). ![2023-05-12 at 11 08 26 - Fuchsia Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d) ![2023-05-12 at 13 45 04 - Tan Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6) ## Input Blur This PR adds an `onBlur` parameter to `Input`. This was needed because 'clicking off' the input wasn't firing `onComplete` or `onCancel`. <img width="620" alt="Screenshot 2023-05-09 at 16 12 58" src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf"> ## Create Project Name This PR adds an internal `createProjectName` property to `TldrawEditorConfig`. Similar to `derivePresenceState`, you can pass a custom function to it. It lets you control what gets used as the default project name. We use it to set different names in our local projects compared to shared projects. In the future, when we add more advanced project features, we could handle this better within the UI. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41"> ### Test Plan 1. Gradually reduce the width of the browser window. 2. Check that the actions menu jumps to the bottom before the style panel moves to the bottom. --- 1. In the examples app, open the `/zones` example. 2. Check that there's a 'top zone' at the top. - [ ] Unit Tests - [ ] Webdriver tests ### Release Note - [dev] Added a `topZone` area where you can put stuff. - [dev] Added a `name` property to `TLDocument` - and `app` methods for it. - [dev] Added an internal `createProjectName` config property for controlling the default project name. - [dev] Added an `onBlur` parameter to `Input`. - Moved the actions bar to the bottom on medium-sized screens. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
updateDocumentSettings(settings: Partial<TLDocument>): void;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId'>>, ephemeral?: boolean, squashing?: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
updatePage(partial: RequiredKeys<TLPage, 'id'>, squashing?: boolean): this;
Tidy up (#1600) This PR is intended to do some housecleaning ahead of our developer release. It: - co-locates code in the `Editor` class, i.e. moving shape-related methods next to other shape-related methods - renames `cullingBounds` and other culling-related names to `renderingBounds` - renames `Editor.getParentPageId` to `Editor.getAncestorPageId` - renames `Editor.shapeIds` to `Editor.currentPageShapeIds` ### Change Type - [x] `major` — api changes
2023-06-16 11:27:47 +00:00
// @internal
updateRenderingBounds(): this;
Add optional generic to `updateShapes` / `createShapes` (#1579) This PR adds a generic that we can use with `updateShapes` and `createShapes` in order to type the partials being passed into those methods. By default, the partials are typed as `TLUnknownShape`, which accepts any props. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests ### Release Notes - [editor] adds an optional shape generic to `updateShapes` and `createShapes`
2023-06-13 18:02:17 +00:00
updateShapes<T extends TLUnknownShape>(partials: (null | TLShapePartial<T> | undefined)[], squashing?: boolean): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
updateViewportScreenBounds(center?: boolean): this;
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
readonly user: UserPreferencesManager;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get viewportPageBounds(): Box2d;
get viewportPageCenter(): Vec2d;
get viewportScreenBounds(): Box2d;
get viewportScreenCenter(): Vec2d;
visitDescendants(parentId: TLParentId, visitor: (id: TLShapeId) => false | void): void;
get zoomBrush(): Box2dModel | null;
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
2023-06-04 10:38:53 +00:00
zoomIn(point?: Vec2d, opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
get zoomLevel(): number;
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
2023-06-04 10:38:53 +00:00
zoomOut(point?: Vec2d, opts?: TLAnimationOptions): this;
zoomToBounds(x: number, y: number, width: number, height: number, targetZoom?: number, opts?: TLAnimationOptions): this;
[feature] ui events (#1326) This PR updates the editor events: - adds types to the events emitted by the app (by `app.emit`) - removes a few events emitted by the app (e.g. `move-to-page`, `change-camera`) - adds `onEvent` prop to the <TldrawUi> / <Tldraw> components - call the `onEvent` when actions occur or tools are selected - does some superficial cleanup on editor app APIs ### Release Note - Fix layout bug in error dialog - (ui) Add `TLEventMap` for types emitted from editor app - (editor) Update `crash` event emitted from editor app to include error - (editor) Update `change-history` event emitted from editor app - (editor) Remove `change-camera` event from editor app - (editor) Remove `move-to-page` event from editor app - (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi> - (editor) Replace `app.openMenus` plain Set with computed value - (editor) Add `addOpenMenu` method - (editor) Add `removeOpenMenu` method - (editor) Add `setFocusMode` method - (editor) Add `setToolLocked` method - (editor) Add `setSnapMode` method - (editor) Add `isSnapMode` method - (editor) Update `setGridMode` method return type to editor app - (editor) Update `setReadOnly` method return type to editor app - (editor) Update `setPenMode` method return type to editor app - (editor) Update `selectNone` method return type to editor app - (editor) Rename `backToContent` to `zoomToContent` - (editor) Remove `TLReorderOperation` type --------- Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
zoomToContent(): this;
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
2023-06-04 10:38:53 +00:00
zoomToFit(opts?: TLAnimationOptions): this;
zoomToSelection(opts?: TLAnimationOptions): this;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const EmbedShape: TLShapeInfo<TLEmbedShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
// (undocumented)
canEdit: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
canResize: (shape: TLEmbedShape) => boolean;
// (undocumented)
canUnmount: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLEmbedShape): JSX.Element;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLEmbedShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
hideSelectionBoundsBg: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
hideSelectionBoundsFg: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
indicator(shape: TLEmbedShape): JSX.Element;
// (undocumented)
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
// (undocumented)
onResize: TLOnResizeHandler<TLEmbedShape>;
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "embed";
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
2023-06-04 10:38:53 +00:00
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export class ErrorBoundary extends React_3.Component<React_3.PropsWithRef<React_3.PropsWithChildren<TLErrorBoundaryProps>>, TLErrorBoundaryState> {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
componentDidCatch(error: unknown): void;
// (undocumented)
static getDerivedStateFromError(error: Error): {
error: Error;
};
// (undocumented)
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
render(): boolean | JSX.Element | null | number | React_3.ReactFragment | string | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
state: TLErrorBoundaryState;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
export function ErrorScreen({ children }: {
children: any;
}): JSX.Element;
// @public (undocumented)
export const EVENT_NAME_MAP: Record<Exclude<TLEventName, TLPinchEventName>, keyof TLEventHandlers>;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
// @internal (undocumented)
export function extractSessionStateFromLegacySnapshot(store: Record<string, UnknownRecord>): null | TLSessionStateSnapshot;
Feature flags rework (#1474) This diff tweaks our `debugFlags` framework to support setting different default value for different environments, makes it easier to define feature flags, and makes feature flags show up in the debug menu by default. With this change, feature flags will default to being enabled in dev and preview environments, but disabled in production. Specify a feature flag like this: ```ts const featureFlags = { myCoolNewFeature: createFeatureFlag('myCoolNewFeature') } ``` optionally, pass a second value to control its defaults: ```ts const featureFlags = { featureEnabledInProduction: createFeatureFlag('someFeature', { all: true }), customEnabled: createFeatureFlag('otherFeature', {development: true, staging: false, production: false}), } ``` In code, the value can be read using `featureFlags.myFeature.value`. Remember to wrap reading it in a reactive context! ### Change Type - [x] `patch` — Bug Fix ### Test Plan - ### Release Notes [internal only change]
2023-05-30 13:06:15 +00:00
// @internal (undocumented)
export const featureFlags: {
peopleMenu: DebugFlag<boolean>;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
highlighterTool: DebugFlag<boolean>;
Feature flags rework (#1474) This diff tweaks our `debugFlags` framework to support setting different default value for different environments, makes it easier to define feature flags, and makes feature flags show up in the debug menu by default. With this change, feature flags will default to being enabled in dev and preview environments, but disabled in production. Specify a feature flag like this: ```ts const featureFlags = { myCoolNewFeature: createFeatureFlag('myCoolNewFeature') } ``` optionally, pass a second value to control its defaults: ```ts const featureFlags = { featureEnabledInProduction: createFeatureFlag('someFeature', { all: true }), customEnabled: createFeatureFlag('otherFeature', {development: true, staging: false, production: false}), } ``` In code, the value can be read using `featureFlags.myFeature.value`. Remember to wrap reading it in a reactive context! ### Change Type - [x] `patch` — Bug Fix ### Test Plan - ### Release Notes [internal only change]
2023-05-30 13:06:15 +00:00
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public
export function fileToBase64(file: Blob): Promise<string>;
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const FrameShape: TLShapeInfo<TLFrameShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
canDropShapes: (shape: TLFrameShape, _shapes: TLShape[]) => boolean;
// (undocumented)
canEdit: () => boolean;
// (undocumented)
canReceiveNewChildrenOfType: (shape: TLShape, _type: TLShape['type']) => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLFrameShape): JSX.Element;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLFrameShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
indicator(shape: TLFrameShape): JSX.Element;
// (undocumented)
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
// (undocumented)
onDragShapesOver: (frame: TLFrameShape, shapes: TLShape[]) => {
shouldHint: boolean;
};
// (undocumented)
onResizeEnd: TLOnResizeEndHandler<TLFrameShape>;
// (undocumented)
providesBackgroundForChildren(): boolean;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLFrameShape): Promise<SVGElement> | SVGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "frame";
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
2023-06-04 10:38:53 +00:00
}
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const GeoShape: TLShapeInfo<TLGeoShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLGeoShape): JSX.Element;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getBounds(shape: TLGeoShape): Box2d;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getCenter(shape: TLGeoShape): Vec2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLGeoShape['props'];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getOutline(shape: TLGeoShape): Vec2d[];
// (undocumented)
hitTestLineSegment(shape: TLGeoShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLGeoShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLGeoShape): JSX.Element;
// (undocumented)
onBeforeCreate: (shape: TLGeoShape) => {
props: {
growY: number;
Add cloud shape (#1708) ![Kapture 2023-07-04 at 16 36 31](https://github.com/tldraw/tldraw/assets/1242537/bcb19959-ac66-46fa-92ea-50fe4692a96c) ### Change Type - [x] `minor` — New feature [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Make some cloud shapes, try different sizes, colors, fills. 2. Export cloud shapes to images. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Adds a cloud shape.
2023-07-07 15:32:08 +00:00
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
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
2023-06-04 10:38:53 +00:00
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
fill: "none" | "pattern" | "semi" | "solid";
dash: "dashed" | "dotted" | "draw" | "solid";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
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
2023-06-04 10:38:53 +00:00
verticalAlign: "end" | "middle" | "start";
url: string;
w: number;
h: number;
text: string;
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
// (undocumented)
onBeforeUpdate: (prev: TLGeoShape, next: TLGeoShape) => {
props: {
growY: number;
Add cloud shape (#1708) ![Kapture 2023-07-04 at 16 36 31](https://github.com/tldraw/tldraw/assets/1242537/bcb19959-ac66-46fa-92ea-50fe4692a96c) ### Change Type - [x] `minor` — New feature [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Make some cloud shapes, try different sizes, colors, fills. 2. Export cloud shapes to images. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Adds a cloud shape.
2023-07-07 15:32:08 +00:00
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
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
2023-06-04 10:38:53 +00:00
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
fill: "none" | "pattern" | "semi" | "solid";
dash: "dashed" | "dotted" | "draw" | "solid";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
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
2023-06-04 10:38:53 +00:00
verticalAlign: "end" | "middle" | "start";
url: string;
w: number;
h: number;
text: string;
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
// (undocumented)
onDoubleClick: (shape: TLGeoShape) => {
props: {
geo: "check-box";
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | {
props: {
geo: "rectangle";
};
type: "geo";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLGeoShape>;
// (undocumented)
onResize: TLOnResizeHandler<TLGeoShape>;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLGeoShape, ctx: SvgExportContext): SVGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "geo";
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
2023-06-04 10:38:53 +00:00
}
// @public
export function getEmbedInfo(inputUrl: string): TLEmbedResult;
// @public
export function getEmbedInfoUnsafely(inputUrl: string): TLEmbedResult;
// @public
export function getFileMetaData(file: File): Promise<{
isAnimated: boolean;
}>;
update exports for user presence (#1583) This PR updates exports related to user presence, in order to enable external sync solutions that use user presence. ### Change Type - [x] `patch` — Bug fix [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version
2023-06-14 22:08:07 +00:00
// @public (undocumented)
export function getFreshUserPreferences(): TLUserPreferences;
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
2023-06-04 10:38:53 +00:00
export { getHashForString }
// @public
export function getImageSizeFromSrc(dataURL: string): Promise<{
w: number;
h: number;
}>;
// @public
export function getIncrementedName(name: string, others: string[]): string;
// @public
export function getMediaAssetFromFile(file: File): Promise<TLAsset>;
// @internal (undocumented)
export function getPointerInfo(e: PointerEvent | React.PointerEvent, container: HTMLElement): {
point: {
x: number;
y: number;
z: number;
};
shiftKey: boolean;
altKey: boolean;
ctrlKey: boolean;
pointerId: number;
button: number;
isPen: boolean;
};
// @public
export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number): Promise<string>;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
// @public (undocumented)
export function getRotatedBoxShadow(rotation: number): string;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export function getSplineForLineShape(shape: TLLineShape): NonNullable<CubicSpline2d | Polyline2d>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function getSvgAsDataUrl(svg: SVGElement): Promise<string>;
// @public (undocumented)
export function getSvgAsDataUrlSync(node: SVGElement): string;
// @public (undocumented)
export function getSvgAsImage(svg: SVGElement, options: {
type: TLCopyType | TLExportType;
quality: number;
scale: number;
}): Promise<Blob | null>;
// @public (undocumented)
export function getSvgAsString(svg: SVGElement): string;
// @public
export function getSvgPathFromStroke(points: Vec2d[], closed?: boolean): string;
// @public
export function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
// @public (undocumented)
export function getTextBoundingBox(text: SVGTextElement): DOMRect;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public (undocumented)
export function getUserPreferences(): TLUserPreferences;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export const getValidHttpURLList: (url: string) => string[] | undefined;
// @public
export function getVideoSizeFromSrc(src: string): Promise<{
w: number;
h: number;
}>;
// @internal (undocumented)
export const GRID_INCREMENT = 5;
// @public (undocumented)
export const GRID_STEPS: {
min: number;
mid: number;
step: number;
}[];
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const GroupShape: TLShapeInfo<TLGroupShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
// (undocumented)
canBind: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLGroupShape): JSX.Element | null;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getBounds(shape: TLGroupShape): Box2d;
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getCenter(shape: TLGroupShape): Vec2d;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLGroupShape['props'];
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getOutline(shape: TLGroupShape): Vec2d[];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLGroupShape): JSX.Element;
// (undocumented)
onChildrenChange: TLOnChildrenChangeHandler<TLGroupShape>;
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "group";
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
2023-06-04 10:38:53 +00:00
// (undocumented)
type: "group";
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
export const HAND_TOOL_FRICTION = 0.09;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public
export function hardReset({ shouldReload }?: {
shouldReload?: boolean | undefined;
}): Promise<void>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
export function hardResetEditor(): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
export const HASH_PATTERN_ZOOM_NAMES: Record<string, string>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const HighlightShape: TLShapeInfo<TLHighlightShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
backgroundComponent(shape: TLHighlightShape): JSX.Element;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
component(shape: TLHighlightShape): JSX.Element;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
expandSelectionOutlinePx(shape: TLHighlightShape): number;
// (undocumented)
getBounds(shape: TLHighlightShape): Box2d;
// (undocumented)
getCenter(shape: TLHighlightShape): Vec2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLHighlightShape['props'];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getOutline(shape: TLHighlightShape): Vec2d[];
// (undocumented)
hideResizeHandles: (shape: TLHighlightShape) => boolean;
// (undocumented)
hideRotateHandle: (shape: TLHighlightShape) => boolean;
// (undocumented)
hideSelectionBoundsBg: (shape: TLHighlightShape) => boolean;
// (undocumented)
hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean;
// (undocumented)
hitTestLineSegment(shape: TLHighlightShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLHighlightShape, point: VecLike): boolean;
// (undocumented)
indicator(shape: TLHighlightShape): JSX.Element;
// (undocumented)
onResize: TLOnResizeHandler<TLHighlightShape>;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toBackgroundSvg(shape: TLHighlightShape): SVGPathElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLHighlightShape): SVGPathElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "highlight";
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
2023-06-04 10:38:53 +00:00
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX.Element;
// @public (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export type HTMLContainerProps = React_3.HTMLAttributes<HTMLDivElement>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const ImageShape: TLShapeInfo<TLImageShape>;
[improvement] refactor paste to support multi-line text (#1398) This PR refactors our clipboard handlers. It should simplify the way that things work and better handle the difference between how the native API events are handled vs. the browser's clipboard API events. ![Kapture 2023-05-17 at 13 26 34](https://github.com/tldraw/tldraw/assets/23072548/5dedcc25-a1d2-423f-8bc2-415f761b643b) Everything that used to be supported now also still works. In addition, we now have several useful features: ### Multiline text can be pasted into the app When pasting text that contains more than one line, the text is pasted correctly; even if the clipboard also includes HTML data. Previously, we would try to paste HTML data if we found it, because that data might contain tldraw's own content as a comment; but if that failed, we would paste the data as text instead. This led to pasting text that lost lots of information from that text, such as line breaks and indentations. ### Multiline text shapes are aligned correctly When pasting raw text that has more than one line, the text will be left aligned—or right aligned if the text is likely from a RTL language. ![Kapture 2023-05-17 at 13 42 54](https://github.com/tldraw/tldraw/assets/23072548/f705acd5-136c-4144-80da-6e97ff766a58) ### Common minimum indentation is removed from each line ![Kapture 2023-05-17 at 13 56 28](https://github.com/tldraw/tldraw/assets/23072548/d45c95f6-6d28-4c9f-8cd3-8078700ce928) This is something that absolutely every app should implement, but here we go. When multiline text has "common indentation" on each line, which is often the case when pasting text from code, then that indentation is removed from each line. ### Auto wrapping for big pastes When a line has no text breaks but a lot of text, we now set the width of the text shape. ![Kapture 2023-05-17 at 14 00 04](https://github.com/tldraw/tldraw/assets/23072548/0b7f69c3-bcf9-42e9-a1ed-df026f868793) ## How it works A `ClipboardThing` is the common interface for things that we found on the clipboard, native or otherwise. Both `handlePasteFromClipboardApi` and `handlePasteFromEventClipboardData` parse out `ClipboardThing`s and pass them to `handleClipboardThings`. <img width="905" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/fd087539-edbb-4527-b5ff-ca7d7c1726b2"> A `ClipboardResult` is the result of processing a `ClipboardThing`, and usually contains text and other information about that text. We make decisions on what to create based on which `ClipboardResult`s we find. When pasting text, we check to see whether the result would be bigger than the viewport, or if the text is multiline, or if the text is of an RTL language by testing certain common RTL characters. We make some adjustments based on those factors, ensuring that the top-left corner of the text is on screen and reasonably positioned within the viewport if possible. ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Copy and paste shapes 2. Copy and paste text from elsewhere into the app 3. Copy and paste images from elsewhere into the app 4. Try on different browsers ### Release Notes - Improves clipboard logic when pasting text - Adds support for pasting multi-line text - Adds maximum widths when pasting single-line text - Adds support for RTL languages when pasting multi-line or wrapped text - Strips leading indentation when pasting text
2023-05-17 16:32:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
// (undocumented)
canCrop: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLImageShape): JSX.Element;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLImageShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
indicator(shape: TLImageShape): JSX.Element | null;
// (undocumented)
isAspectRatioLocked: () => boolean;
// (undocumented)
onDoubleClick: (shape: TLImageShape) => void;
// (undocumented)
onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape>;
// (undocumented)
toSvg(shape: TLImageShape): Promise<SVGGElement>;
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "image";
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
2023-06-04 10:38:53 +00:00
}
// @public (undocumented)
export const INDENT = " ";
// @public
export function isAnimated(buffer: ArrayBuffer): boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public
export function isGIF(buffer: ArrayBuffer): boolean;
// @public (undocumented)
export const isImage: (ext: string) => boolean;
// @public
export function isSerializable(value: any): boolean;
// @public (undocumented)
export const isSvgText: (text: string) => boolean;
// @public (undocumented)
export const isValidHttpURL: (url: string) => boolean;
[improvement] bookmark shape logic (#1568) This PR extracts some logic from the EditUrlDialog into the bookmark shape util, removing the dependency between the two. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Create a bookmark shape 2. Set its URL to an empty string - [x] Unit Tests
2023-06-12 19:15:58 +00:00
// @public (undocumented)
export function isValidUrl(url: string): boolean;
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const LineShape: TLShapeInfo<TLLineShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class LineShapeUtil extends ShapeUtil<TLLineShape> {
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
// (undocumented)
component(shape: TLLineShape): JSX.Element | undefined;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
getBounds(shape: TLLineShape): Box2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLLineShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
getHandles(shape: TLLineShape): TLHandle[];
// (undocumented)
getOutline(shape: TLLineShape): Vec2d[];
// (undocumented)
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
getOutlineSegments(shape: TLLineShape): Vec2d[][];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
hideResizeHandles: () => boolean;
// (undocumented)
hideRotateHandle: () => boolean;
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
hitTestLineSegment(shape: TLLineShape, A: VecLike, B: VecLike): boolean;
// (undocumented)
hitTestPoint(shape: TLLineShape, point: Vec2d): boolean;
// (undocumented)
indicator(shape: TLLineShape): JSX.Element;
// (undocumented)
isClosed: () => boolean;
// (undocumented)
onHandleChange: TLOnHandleChangeHandler<TLLineShape>;
// (undocumented)
onResize: TLOnResizeHandler<TLLineShape>;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLLineShape): SVGGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "line";
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
2023-06-04 10:38:53 +00:00
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function LoadingScreen({ children }: {
children: any;
}): JSX.Element;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
// @public
export function loadSessionStateSnapshotIntoStore(store: TLStore, snapshot: TLSessionStateSnapshot): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function loopToHtmlElement(elm: Element): HTMLElement;
// @internal (undocumented)
export const MAJOR_NUDGE_FACTOR = 10;
// @public (undocumented)
export function matchEmbedUrl(url: string): {
definition: {
readonly type: "codepen";
readonly title: "Codepen";
readonly hostnames: readonly ["codepen.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 520;
readonly height: 400;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "codesandbox";
readonly title: "CodeSandbox";
readonly hostnames: readonly ["codesandbox.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "excalidraw";
readonly title: "Excalidraw";
readonly hostnames: readonly ["excalidraw.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "felt";
readonly title: "Felt";
readonly hostnames: readonly ["felt.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "figma";
readonly title: "Figma";
readonly hostnames: readonly ["figma.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: true;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "github_gist";
readonly title: "GitHub Gist";
readonly hostnames: readonly ["gist.github.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: true;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_calendar";
readonly title: "Google Calendar";
readonly hostnames: readonly ["calendar.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_maps";
readonly title: "Google Maps";
readonly hostnames: readonly ["google.*"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_slides";
readonly title: "Google Slides";
readonly hostnames: readonly ["docs.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "observable";
readonly title: "Observable";
readonly hostnames: readonly ["observablehq.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: false;
readonly backgroundColor: "#fff";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "replit";
readonly title: "Replit";
readonly hostnames: readonly ["replit.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "scratch";
readonly title: "Scratch";
readonly hostnames: readonly ["scratch.mit.edu"];
readonly width: 520;
readonly height: 400;
readonly doesResize: false;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "spotify";
readonly title: "Spotify";
readonly hostnames: readonly ["open.spotify.com"];
readonly width: 720;
readonly height: 500;
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
} | {
readonly type: "tldraw";
readonly title: "tldraw";
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
} | {
readonly type: "vimeo";
readonly title: "Vimeo";
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly width: 640;
readonly height: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "youtube";
readonly title: "YouTube";
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly width: 800;
readonly height: 450;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
};
url: string;
embedUrl: string;
} | undefined;
// @public (undocumented)
export function matchUrl(url: string): {
definition: {
readonly type: "codepen";
readonly title: "Codepen";
readonly hostnames: readonly ["codepen.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 520;
readonly height: 400;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
readonly toEmbedUrl: (url: string) => string | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "codesandbox";
readonly title: "CodeSandbox";
readonly hostnames: readonly ["codesandbox.io"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "excalidraw";
readonly title: "Excalidraw";
readonly hostnames: readonly ["excalidraw.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "felt";
readonly title: "Felt";
readonly hostnames: readonly ["felt.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "figma";
readonly title: "Figma";
readonly hostnames: readonly ["figma.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: true;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "github_gist";
readonly title: "GitHub Gist";
readonly hostnames: readonly ["gist.github.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: true;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_calendar";
readonly title: "Google Calendar";
readonly hostnames: readonly ["calendar.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_maps";
readonly title: "Google Maps";
readonly hostnames: readonly ["google.*"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "google_slides";
readonly title: "Google Slides";
readonly hostnames: readonly ["docs.google.*"];
readonly width: 720;
readonly height: 500;
readonly minWidth: 460;
readonly minHeight: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "observable";
readonly title: "Observable";
readonly hostnames: readonly ["observablehq.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: false;
readonly backgroundColor: "#fff";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "replit";
readonly title: "Replit";
readonly hostnames: readonly ["replit.com"];
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "scratch";
readonly title: "Scratch";
readonly hostnames: readonly ["scratch.mit.edu"];
readonly width: 520;
readonly height: 400;
readonly doesResize: false;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "spotify";
readonly title: "Spotify";
readonly hostnames: readonly ["open.spotify.com"];
readonly width: 720;
readonly height: 500;
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
} | {
readonly type: "tldraw";
readonly title: "tldraw";
readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
readonly minWidth: 300;
readonly minHeight: 300;
readonly width: 720;
readonly height: 500;
readonly doesResize: true;
readonly canUnmount: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
} | {
readonly type: "vimeo";
readonly title: "Vimeo";
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly width: 640;
readonly height: 360;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
} | {
readonly type: "youtube";
readonly title: "YouTube";
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly width: 800;
readonly height: 450;
readonly doesResize: true;
[improvement] Embed shape cleanup (#1569) This PR does some cleanup around our Embed Shape. It: - removes used `doesResize` and `overridePermissions` props - removes the no-longer-needed `tmpOldUrl` prop - adds a `canUnmount` property to embed definitions, so that some embeds can unmount when desired ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Create embed shapes 2. Migrate old data that includes embed shapes? - [x] Unit Tests ### Release Notes - [editor] Remove unused props for `TLEditorShape` - [editor] Adds `canUnmount` property to embed definitions
2023-06-13 08:27:54 +00:00
readonly canUnmount: false;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly isAspectRatioLocked: true;
readonly toEmbedUrl: (url: string) => string | undefined;
readonly fromEmbedUrl: (url: string) => string | undefined;
};
embedUrl: string;
url: string;
} | undefined;
// @internal (undocumented)
export const MAX_ASSET_HEIGHT = 1000;
// @internal (undocumented)
export const MAX_ASSET_WIDTH = 1000;
// @internal (undocumented)
export const MAX_PAGES = 40;
// @internal (undocumented)
export const MAX_SHAPES_PER_PAGE = 2000;
// @internal (undocumented)
export const MAX_ZOOM = 8;
// @internal (undocumented)
export const MIN_ZOOM = 0.1;
// @internal (undocumented)
export const MINOR_NUDGE_FACTOR = 1;
// @internal (undocumented)
export const MULTI_CLICK_DURATION = 200;
// @public (undocumented)
export function normalizeWheel(event: React.WheelEvent<HTMLElement> | WheelEvent): {
x: number;
y: number;
z: number;
};
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const NoteShape: TLShapeInfo<TLNoteShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLNoteShape): JSX.Element;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getBounds(shape: TLNoteShape): Box2d;
// (undocumented)
getCenter(_shape: TLNoteShape): Vec2d;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLNoteShape['props'];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getHeight(shape: TLNoteShape): number;
// (undocumented)
getOutline(shape: TLNoteShape): Vec2d[];
// (undocumented)
hideResizeHandles: () => boolean;
// (undocumented)
hideSelectionBoundsBg: () => boolean;
// (undocumented)
hideSelectionBoundsFg: () => boolean;
// (undocumented)
indicator(shape: TLNoteShape): JSX.Element;
// (undocumented)
onBeforeCreate: (next: TLNoteShape) => {
props: {
growY: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
[feature] add vertical align to note shape (#1539) This PR adds vertical align to the note shape. ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Try the vertical align prop on note shapes ### Release Notes - Adds vertical align prop to note shapes
2023-06-06 13:27:32 +00:00
verticalAlign: "end" | "middle" | "start";
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
2023-06-04 10:38:53 +00:00
url: string;
text: string;
};
type: "note";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
// (undocumented)
onBeforeUpdate: (prev: TLNoteShape, next: TLNoteShape) => {
props: {
growY: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
[feature] add vertical align to note shape (#1539) This PR adds vertical align to the note shape. ### Change Type - [x] `minor` — New Feature ### Test Plan 1. Try the vertical align prop on note shapes ### Release Notes - Adds vertical align prop to note shapes
2023-06-06 13:27:32 +00:00
verticalAlign: "end" | "middle" | "start";
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
2023-06-04 10:38:53 +00:00
url: string;
text: string;
};
type: "note";
x: number;
y: number;
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLNoteShape, ctx: SvgExportContext): SVGGElement;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "note";
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
2023-06-04 10:38:53 +00:00
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function openWindow(url: string, target?: string): void;
// @internal (undocumented)
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
2023-06-04 10:38:53 +00:00
export function OptionalErrorBoundary({ children, fallback, ...props }: Omit<TLErrorBoundaryProps, 'fallback'> & {
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
fallback: TLErrorFallbackComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}): JSX.Element;
`ExternalContentManager` for handling external content (files, images, etc) (#1550) This PR improves the editor's APIs around creating assets and files. This allows end user developers to replace behavior that might occur, for example, when pasting images or dragging files onto the canvas. Here, we: - remove `onCreateAssetFromFile` prop - remove `onCreateBookmarkFromUrl` prop - introduce `onEditorReady` prop - introduce `onEditorWillDispose` prop - introduce `ExternalContentManager` The `ExternalContentManager` (ECM) is used in circumstances where we're turning external content (text, images, urls, etc) into assets or shapes. It is designed to allow certain methods to be overwritten by other developers as a kind of weakly supported hack. For example, when a user drags an image onto the canvas, the event handler passes a `TLExternalContent` object to the editor's `putExternalContent` method. This method runs the ECM's handler for this content type. That handler may in turn run other methods, such as `createAssetFromFile` or `createShapesForAssets`, which will lead to the image being created on the canvas. If a developer wanted to change the way that assets are created from files, then they could overwrite that method at runtime. ```ts const handleEditorReady = (editor: Editor) => { editor.externalContentManager.createAssetFromFile = myHandler } function Example() { return <Tldraw onEditorReady={handleEditorReady}/> } ``` If you wanted to go even deeper, you could override the editor's `putExternalContent` method. ```ts const handleEditorReady = (editor: Editor) => { const handleExternalContent = (info: TLExternalContent): Promise<void> => { if (info.type === 'files') { // do something here } else { // do the normal thing editor.externalContentManager.handleContent(info) } } ``` ### Change Type - [x] `major` ### Test Plan 1. Drag images, urls, etc. onto the canvas 2. Use copy and paste for single and multiple files 3. Use bookmark / embed shapes and convert between eachother ### Release Notes - [editor] add `ExternalContentManager` for plopping content onto the canvas - [editor] remove `onCreateAssetFromFile` prop - [editor] remove `onCreateBookmarkFromUrl` prop - [editor] introduce `onEditorReady` prop - [editor] introduce `onEditorWillDispose` prop - [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
// @public (undocumented)
export class PlopManager {
constructor(editor: Editor);
createAssetFromFile(_editor: Editor, file: File): Promise<TLAsset>;
createAssetFromUrl(_editor: Editor, url: string): Promise<TLAsset>;
// (undocumented)
createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<void>;
// (undocumented)
editor: Editor;
// (undocumented)
handleContent: (info: TLExternalContent) => Promise<void>;
handleEmbed(editor: Editor, { point, url, embed }: Extract<TLExternalContent, {
type: 'embed';
}>): Promise<void>;
handleFiles(editor: Editor, { point, files }: Extract<TLExternalContent, {
type: 'files';
}>): Promise<void>;
handleSvgText(editor: Editor, { point, text }: Extract<TLExternalContent, {
type: 'svg-text';
}>): Promise<void>;
handleText(editor: Editor, { point, text }: Extract<TLExternalContent, {
type: 'text';
}>): Promise<void>;
handleUrl: (editor: Editor, { point, url }: Extract<TLExternalContent, {
type: 'url';
}>) => Promise<void>;
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export function preventDefault(event: Event | React_2.BaseSyntheticEvent): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { react }
Styles API docs (#1641) Adds some basic API docs for the new styles API. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan -- ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 14:01:02 +00:00
// @public
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
export class ReadonlySharedStyleMap {
// (undocumented)
[Symbol.iterator](): IterableIterator<[StyleProp<unknown>, SharedStyle<unknown>]>;
constructor(entries?: Iterable<[StyleProp<unknown>, SharedStyle<unknown>]>);
// (undocumented)
entries(): IterableIterator<[StyleProp<unknown>, SharedStyle<unknown>]>;
// (undocumented)
equals(other: ReadonlySharedStyleMap): boolean;
// (undocumented)
get<T>(prop: StyleProp<T>): SharedStyle<T> | undefined;
// (undocumented)
getAsKnownValue<T>(prop: StyleProp<T>): T | undefined;
// (undocumented)
keys(): IterableIterator<StyleProp<unknown>>;
Styles API docs (#1641) Adds some basic API docs for the new styles API. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan -- ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 14:01:02 +00:00
// @internal (undocumented)
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
protected map: Map<StyleProp<unknown>, SharedStyle<unknown>>;
// (undocumented)
get size(): number;
// (undocumented)
values(): IterableIterator<SharedStyle<unknown>>;
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function refreshPage(): void;
// @public (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export function releasePointerCapture(element: Element, event: PointerEvent | React_2.PointerEvent<Element>): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
export const REMOVE_SYMBOL: unique symbol;
// @public (undocumented)
export type RequiredKeys<T, K extends keyof T> = Pick<T, K> & Partial<T>;
[improvement] custom shapes example (#1660) This PR fixes an import in the custom shapes example. It also tweaks the example to show how buttons and other interactive content should work. ### Change Type - [x] `documentation`
2023-06-27 14:51:35 +00:00
// @public (undocumented)
export function resizeBox(shape: TLBaseBoxShape, info: {
newPoint: Vec2dModel;
handle: TLResizeHandle;
mode: TLResizeMode;
scaleX: number;
scaleY: number;
initialBounds: Box2d;
initialShape: TLBaseBoxShape;
}, opts?: Partial<{
minWidth: number;
maxWidth: number;
minHeight: number;
maxHeight: number;
}>): {
x: number;
y: number;
props: {
w: number;
h: number;
};
};
// @public (undocumented)
export type ResizeBoxOptions = Partial<{
minWidth: number;
maxWidth: number;
minHeight: number;
maxHeight: number;
}>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
export const RICH_TYPES: Record<string, boolean>;
// @public (undocumented)
export const runtime: {
openWindow: (url: string, target: string) => void;
refreshPage: () => void;
hardReset: () => void;
};
[improvement] export scribble manager (#1671) This PR adds the `ScribbleManager` to the exports from `@tldraw/editor`. ### Change Type - [x] `minor` — New feature ### Release Notes - [@tldraw/tldraw] Export `ScribbleManager`
2023-06-29 14:10:54 +00:00
// @public (undocumented)
export class ScribbleManager implements TLScribble {
constructor(opts: {
onUpdate: (scribble: TLScribble) => void;
onComplete: () => void;
size?: TLScribble['size'];
color?: TLScribble['color'];
opacity?: TLScribble['opacity'];
delay?: TLScribble['delay'];
});
addPoint: (x: number, y: number) => void;
// (undocumented)
color: "accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white";
// (undocumented)
delay: number;
// (undocumented)
delayRemaining: number;
getScribble(): TLScribble;
// (undocumented)
opacity: number;
// (undocumented)
pause: () => void;
// (undocumented)
points: Vec2dModel[];
// (undocumented)
resume: () => void;
// (undocumented)
size: number;
// (undocumented)
state: "active" | "paused" | "starting" | "stopping";
stop: () => void;
// (undocumented)
tick: TLTickEvent;
// (undocumented)
timeoutMs: number;
}
New vite-based examples app (#1226) Right now this examples app looks exactly the same as our old examples app, but there are a couple of tiny differences: - We use `vite` instead of our own esbuild setup for development and bundling - We use `@tldraw/assets` for smart asset hashing instead of copying the assets to a public folder You can use `@tldraw/assets` with vite with a bunch of extra config, but it (plus a bunch of other bundlers) also support a special syntax for specifying asset urls: `new URL('./my/asset.svg', import.meta.url).href`. This approach is more standards-complient, but doesn't work with every bundler just yet. This diff also adds a url-based version of `@tldraw/assets`, although I'd like to tweak the entry point - right now you need to import from `@tldraw/assets/lib/urls`, but i'd like to find a way to get this to `@tldraw/assets/urls` or something at some point. There are a couple other extra fixes in here: - vscode builds were broken, they're fixed now! - there's also a little tweak to the `getBundlerAssetUrls` API to allow passing in a function instead of an object for URL formatting - there are new internal-only functions for injecting asset urls globally instead of passing them in via react props. this means we can get the benefits of cacheable URLs without having to clutter our examples by passing them in
2023-05-05 13:10:36 +00:00
// @internal (undocumented)
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
2023-06-04 10:38:53 +00:00
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
New vite-based examples app (#1226) Right now this examples app looks exactly the same as our old examples app, but there are a couple of tiny differences: - We use `vite` instead of our own esbuild setup for development and bundling - We use `@tldraw/assets` for smart asset hashing instead of copying the assets to a public folder You can use `@tldraw/assets` with vite with a bunch of extra config, but it (plus a bunch of other bundlers) also support a special syntax for specifying asset urls: `new URL('./my/asset.svg', import.meta.url).href`. This approach is more standards-complient, but doesn't work with every bundler just yet. This diff also adds a url-based version of `@tldraw/assets`, although I'd like to tweak the entry point - right now you need to import from `@tldraw/assets/lib/urls`, but i'd like to find a way to get this to `@tldraw/assets/urls` or something at some point. There are a couple other extra fixes in here: - vscode builds were broken, they're fixed now! - there's also a little tweak to the `getBundlerAssetUrls` API to allow passing in a function instead of an object for URL formatting - there are new internal-only functions for injecting asset urls globally instead of passing them in via react props. this means we can get the benefits of cacheable URLs without having to clutter our examples by passing them in
2023-05-05 13:10:36 +00:00
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export function setPointerCapture(element: Element, event: PointerEvent | React_2.PointerEvent<Element>): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function setRuntimeOverrides(input: Partial<typeof runtime>): void;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public (undocumented)
export function setUserPreferences(user: TLUserPreferences): void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
constructor(editor: Editor, type: Shape['type'], styleProps: ReadonlyMap<StyleProp<unknown>, string>);
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
// @internal
backgroundComponent?(shape: Shape): any;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
canBind: <K>(_shape: Shape, _otherShape?: K | undefined) => boolean;
canCrop: TLShapeUtilFlag<Shape>;
canDropShapes(shape: Shape, shapes: TLShape[]): boolean;
canEdit: TLShapeUtilFlag<Shape>;
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
canResize: TLShapeUtilFlag<Shape>;
canScroll: TLShapeUtilFlag<Shape>;
canSnap: TLShapeUtilFlag<Shape>;
canUnmount: TLShapeUtilFlag<Shape>;
center(shape: Shape): Vec2d;
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
abstract component(shape: Shape): any;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
editor: Editor;
// @internal (undocumented)
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
expandSelectionOutlinePx(shape: Shape): number;
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
abstract getBounds(shape: Shape): Box2d;
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getCenter(shape: Shape): Vec2d;
abstract getDefaultProps(): Shape['props'];
getHandles?(shape: Shape): TLHandle[];
getOutline(shape: Shape): Vec2d[];
getOutlineSegments(shape: Shape): Vec2d[][];
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
hideResizeHandles: TLShapeUtilFlag<Shape>;
hideRotateHandle: TLShapeUtilFlag<Shape>;
hideSelectionBoundsBg: TLShapeUtilFlag<Shape>;
hideSelectionBoundsFg: TLShapeUtilFlag<Shape>;
hitTestLineSegment(shape: Shape, A: VecLike, B: VecLike): boolean;
hitTestPoint(shape: Shape, point: VecLike): boolean;
abstract indicator(shape: Shape): any;
isAspectRatioLocked: TLShapeUtilFlag<Shape>;
isClosed: TLShapeUtilFlag<Shape>;
onBeforeCreate?: TLOnBeforeCreateHandler<Shape>;
onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>;
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
2023-06-04 10:38:53 +00:00
// @internal
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
onBindingChange?: TLOnBindingChangeHandler<Shape>;
onChildrenChange?: TLOnChildrenChangeHandler<Shape>;
onClick?: TLOnClickHandler<Shape>;
onDoubleClick?: TLOnDoubleClickHandler<Shape>;
onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>;
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>;
onDragShapesOut?: TLOnDragHandler<Shape>;
onDragShapesOver?: TLOnDragHandler<Shape, {
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
2023-06-04 10:38:53 +00:00
shouldHint: boolean;
}>;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
onDropShapesOver?: TLOnDragHandler<Shape>;
onEditEnd?: TLOnEditEndHandler<Shape>;
onHandleChange?: TLOnHandleChangeHandler<Shape>;
onResize?: TLOnResizeHandler<Shape>;
onResizeEnd?: TLOnResizeEndHandler<Shape>;
onResizeStart?: TLOnResizeStartHandler<Shape>;
onRotate?: TLOnRotateHandler<Shape>;
onRotateEnd?: TLOnRotateEndHandler<Shape>;
onRotateStart?: TLOnRotateStartHandler<Shape>;
onTranslate?: TLOnTranslateHandler<Shape>;
onTranslateEnd?: TLOnTranslateEndHandler<Shape>;
onTranslateStart?: TLOnTranslateStartHandler<Shape>;
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
2023-06-04 10:38:53 +00:00
// @internal
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
providesBackgroundForChildren(shape: Shape): boolean;
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
2023-06-04 10:38:53 +00:00
// (undocumented)
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
setStyleInPartial<T>(style: StyleProp<T>, shape: TLShapePartial<Shape>, value: T): TLShapePartial<Shape>;
snapPoints(shape: Shape): Vec2d[];
// (undocumented)
readonly styleProps: ReadonlyMap<StyleProp<unknown>, string>;
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toBackgroundSvg?(shape: Shape, ctx: SvgExportContext): null | Promise<SVGElement> | SVGElement;
toSvg?(shape: Shape, ctx: SvgExportContext): Promise<SVGElement> | SVGElement;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
// (undocumented)
readonly type: Shape['type'];
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
2023-06-04 10:38:53 +00:00
static type: string;
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
Styles API docs (#1641) Adds some basic API docs for the new styles API. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan -- ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 14:01:02 +00:00
// @public
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
export type SharedStyle<T> = {
readonly type: 'mixed';
} | {
readonly type: 'shared';
readonly value: T;
};
// @internal (undocumented)
export class SharedStyleMap extends ReadonlySharedStyleMap {
// (undocumented)
applyValue<T>(prop: StyleProp<T>, value: T): void;
// (undocumented)
set<T>(prop: StyleProp<T>, value: SharedStyle<T>): void;
}
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export function snapToGrid(n: number, gridSize: number): number;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export abstract class StateNode implements Partial<TLEventHandlers> {
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
constructor(editor: Editor, parent?: StateNode);
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
static children?: () => TLStateNodeConstructor[];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
children?: Record<string, StateNode>;
// (undocumented)
current: Atom<StateNode | undefined>;
// (undocumented)
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
editor: Editor;
// (undocumented)
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
enter(info: any, from: string): void;
// (undocumented)
exit(info: any, from: string): void;
// (undocumented)
handleEvent(info: Exclude<TLEventInfo, TLPinchEventInfo>): void;
// (undocumented)
static id: string;
// (undocumented)
id: string;
// (undocumented)
static initial?: string;
// (undocumented)
initial?: string;
// (undocumented)
isActive: boolean;
// (undocumented)
onCancel?: TLEventHandlers['onCancel'];
// (undocumented)
onComplete?: TLEventHandlers['onComplete'];
// (undocumented)
onDoubleClick?: TLEventHandlers['onDoubleClick'];
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onEnter?: TLEnterEventHandler;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onExit?: TLExitEventHandler;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
onInterrupt?: TLEventHandlers['onInterrupt'];
// (undocumented)
onKeyDown?: TLEventHandlers['onKeyDown'];
// (undocumented)
onKeyRepeat?: TLEventHandlers['onKeyRepeat'];
// (undocumented)
onKeyUp?: TLEventHandlers['onKeyUp'];
// (undocumented)
onMiddleClick?: TLEventHandlers['onMiddleClick'];
// (undocumented)
onPointerDown?: TLEventHandlers['onPointerDown'];
// (undocumented)
onPointerEnter?: TLEventHandlers['onPointerEnter'];
// (undocumented)
onPointerLeave?: TLEventHandlers['onPointerLeave'];
// (undocumented)
onPointerMove?: TLEventHandlers['onPointerMove'];
// (undocumented)
onPointerUp?: TLEventHandlers['onPointerUp'];
// (undocumented)
onQuadrupleClick?: TLEventHandlers['onQuadrupleClick'];
// (undocumented)
onRightClick?: TLEventHandlers['onRightClick'];
// (undocumented)
onTripleClick?: TLEventHandlers['onTripleClick'];
// (undocumented)
onWheel?: TLEventHandlers['onWheel'];
// (undocumented)
parent: StateNode;
// (undocumented)
path: Computed<string>;
// (undocumented)
[refactor] reduce dependencies on shape utils in editor (#1693) We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util
2023-07-07 13:56:31 +00:00
shapeType?: string;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
transition(id: string, info: any): this;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
type: TLStateNodeType;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
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
2023-06-04 10:38:53 +00:00
// @internal (undocumented)
export const SVG_PADDING = 32;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX.Element;
// @public (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export type SVGContainerProps = React_3.HTMLAttributes<SVGElement>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
// @public
export const TAB_ID: string;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const TextShape: TLShapeInfo<TLTextShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
canEdit: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLTextShape): JSX.Element;
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getBounds(shape: TLTextShape): Box2d;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLTextShape['props'];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getMinDimensions(shape: TLTextShape): {
height: number;
width: number;
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
getOutline(shape: TLTextShape): Vec2d[];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
indicator(shape: TLTextShape): JSX.Element;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onBeforeCreate: (shape: TLTextShape) => {
x: number;
y: number;
type: "text";
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
props: {
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
w: number;
text: string;
scale: number;
autoSize: boolean;
};
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onBeforeUpdate: (prev: TLTextShape, next: TLTextShape) => {
x: number;
y: number;
props: {
w: number;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow";
size: "l" | "m" | "s" | "xl";
font: "draw" | "mono" | "sans" | "serif";
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
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
2023-06-04 10:38:53 +00:00
text: string;
scale: number;
autoSize: boolean;
};
type: "text";
rotation: number;
index: string;
parentId: TLParentId;
isLocked: boolean;
hoist opacity out of props (#1526) This change hoists opacity out of props and changes it to a number instead of an enum. The change to a number is to make tldraw more flexible for library consumers who might want more expressivity with opacity than our 5 possible values allow. the tldraw editor will now happily respect any opacity between 0 and 1. The limit to our supported values is enforced only in the UI. I think this is limited enough that it's a reasonable tradeoff between in-app simplicity and giving external developers the flexibility they need. There's a new `opacityForNextShape` property on the instance. This works exactly the same way as propsForNextShape does, except... it's just for opacity. With this, there should be no user-facing changes to how opacity works in tldraw. There are also new `opacity`/`setOpacity` APIs in the editor that work with it/selections similar to how props do. @ds300 do you mind reviewing the migrations here? ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [internal only for now]
2023-06-06 16:15:12 +00:00
opacity: number;
[feature] add `meta` property to records (#1627) This PR adds a `meta` property to shapes and other records. It adds it to: - asset - camera - document - instance - instancePageState - instancePresence - page - pointer - rootShape ## Setting meta This data can generally be added wherever you would normally update the corresponding record. An exception exists for shapes, which can be updated using a partial of the `meta` in the same way that we update shapes with a partial of `props`. ```ts this.updateShapes([{ id: myShape.id, type: "geo", meta: { nemesis: "steve", special: true } ]) ``` ## `Editor.getInitialMetaForShape` The `Editor.getInitialMetaForShape` method is kind of a hack to set the initial meta property for newly created shapes. You can set it externally. Escape hatch! ### Change Type - [x] `minor` — New feature ### Test Plan todo - [ ] Unit Tests (todo) ### Release Notes - todo
2023-06-28 14:24:05 +00:00
meta: JsonObject;
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
2023-06-04 10:38:53 +00:00
id: TLShapeId;
typeName: "shape";
} | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onDoubleClickEdge: (shape: TLTextShape) => {
id: TLShapeId;
type: "text";
props: {
autoSize: boolean;
scale?: undefined;
};
} | {
id: TLShapeId;
type: "text";
props: {
scale: number;
autoSize?: undefined;
};
} | undefined;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onEditEnd: TLOnEditEndHandler<TLTextShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onResize: TLOnResizeHandler<TLTextShape>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
Styles API follow-ups (#1636) tldraw-zero themed follow-ups to the styles API added in #1580. - Removed style related helpers from `ShapeUtil` - `editor.css` no longer includes the tldraw default color palette. Instead, a global `DefaultColorPalette` is defined as part of the color style. If developers wish to cusomise the colors, they can mutate that global. - `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an "svg export context" that can be used to add `<defs>` to the exported SVG element. Converting e.g. fonts to inlined data urls is now the responsibility of the shapes that use them rather than the Editor. - `usePattern` is not longer a core part of the editor. Instead, `ShapeUtil` has a `getCanvasSvgDefs` method for returning react components representing anything a shape needs included in `<defs>` for the canvas. - The shape-specific cleanup logic in `setStyle` has been deleted. It turned out that none of that logic has been running anyway, and instead the relevant logic lives in shape `onBeforeChange` callbacks already. ### Change Type - [x] `minor` — New feature ### Test Plan - [x] Unit Tests - [x] End to end tests ### Release Notes -- --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
toSvg(shape: TLTextShape, ctx: SvgExportContext): SVGGElement;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "text";
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLAnimationOptions = Partial<{
duration: number;
easing: typeof EASINGS.easeInOutCubic;
}>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLBaseBoxShape = TLBaseShape<string, {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
w: number;
h: number;
}>;
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export interface TLBaseEventInfo {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
altKey: boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
ctrlKey: boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
shiftKey: boolean;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
type: UiEventType;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
export type TLCancelEvent = (info: TLCancelEventInfo) => void;
// @public (undocumented)
export type TLCancelEventInfo = {
type: 'misc';
name: 'cancel';
};
// @public (undocumented)
export type TLClickEvent = (info: TLClickEventInfo) => void;
// @public (undocumented)
export type TLClickEventInfo = TLBaseEventInfo & {
type: 'click';
name: TLCLickEventName;
point: VecLike;
pointerId: number;
button: number;
phase: 'down' | 'settle' | 'up';
} & TLPointerEventTarget;
// @public (undocumented)
export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
// @public (undocumented)
export type TLCommand<Name extends string = any, Data = any> = {
type: 'command';
id: string;
data: Data;
name: Name;
preservesRedoStack?: boolean;
};
// @public (undocumented)
export type TLCommandHandler<Data> = {
do: (data: Data) => void;
undo: (data: Data) => void;
redo?: (data: Data) => void;
squash?: (prevData: Data, nextData: Data) => Data;
};
// @public (undocumented)
export type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
// @public (undocumented)
export type TLCompleteEventInfo = {
type: 'misc';
name: 'complete';
};
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export interface TLContent {
// (undocumented)
assets: TLAsset[];
// (undocumented)
rootShapeIds: TLShapeId[];
// (undocumented)
schema: SerializedSchema;
// (undocumented)
shapes: TLShape[];
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLCopyType = 'jpeg' | 'json' | 'png' | 'svg';
// @public (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
Make some missing tsdocs appear on the docs site (#1706) 🚨 Note 🚨 This PR has changed! See my [newer comment](https://github.com/tldraw/tldraw/pull/1706#issuecomment-1623451709) for what the PR does now. This description is kept here to show the original intention of the PR. --- This PR fixes the tsdocs formatting of `TldrawEditorProps`, so that they appears on the docs site. We have docs already written, but they weren't appearing. There are probably others like this too. ![image](https://github.com/tldraw/tldraw/assets/15892272/8d8940b3-983f-48b3-9804-7ac88116ca9d) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Navigate to `/gen/editor/TldrawEditorProps` 2. Make sure that that the parameters are listed out with descriptions. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Docs: Fixed some missing docs for the TldrawEditor component.
2023-07-07 11:50:47 +00:00
// @public
export interface TldrawEditorBaseProps {
Asset improvements (#1557) This PR does the following: - Add `selfHosted.js`, which is a great option for users that wish to self host the assets. Works well for both self hosting from the public folder or via a CDN. - Updates the docs for assets. We now have a dedicated page for assets where all the options are more clearly explained. I also removed the assets explanation from the main docs as the unpkg option should work out of the box and setting up the assets is no longer necessary. - Cleaned up the `refresh-assets` script. We now use common `types.d.ts` file to define our types. All the other options then reuse them. - Pulled out the `formatAssetUrl` into it's own file. It's now static an no longer generated. - `urls.d.ts`, `import.d.ts`, and newly added `selfhosted.d.ts` are now also no longer generated as we can import the types from `types.d.ts`. - You can now pass a subset of `assetUrls` to `<Tldraw />` and it will override the default option with the passed in overrides. This makes it easy to only customizes certain assets (only change the draw font as an example). ### Change Type - [x] `patch` — Bug Fix
2023-06-09 11:43:01 +00:00
assetUrls?: RecursivePartial<TLEditorAssetUrls>;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
autoFocus?: boolean;
Make some missing tsdocs appear on the docs site (#1706) 🚨 Note 🚨 This PR has changed! See my [newer comment](https://github.com/tldraw/tldraw/pull/1706#issuecomment-1623451709) for what the PR does now. This description is kept here to show the original intention of the PR. --- This PR fixes the tsdocs formatting of `TldrawEditorProps`, so that they appears on the docs site. We have docs already written, but they weren't appearing. There are probably others like this too. ![image](https://github.com/tldraw/tldraw/assets/15892272/8d8940b3-983f-48b3-9804-7ac88116ca9d) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Navigate to `/gen/editor/TldrawEditorProps` 2. Make sure that that the parameters are listed out with descriptions. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Docs: Fixed some missing docs for the TldrawEditor component.
2023-07-07 11:50:47 +00:00
children?: any;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
components?: Partial<TLEditorComponents>;
Make some missing tsdocs appear on the docs site (#1706) 🚨 Note 🚨 This PR has changed! See my [newer comment](https://github.com/tldraw/tldraw/pull/1706#issuecomment-1623451709) for what the PR does now. This description is kept here to show the original intention of the PR. --- This PR fixes the tsdocs formatting of `TldrawEditorProps`, so that they appears on the docs site. We have docs already written, but they weren't appearing. There are probably others like this too. ![image](https://github.com/tldraw/tldraw/assets/15892272/8d8940b3-983f-48b3-9804-7ac88116ca9d) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Navigate to `/gen/editor/TldrawEditorProps` 2. Make sure that that the parameters are listed out with descriptions. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Docs: Fixed some missing docs for the TldrawEditor component.
2023-07-07 11:50:47 +00:00
onMount?: TLOnMountHandler;
shapes?: readonly AnyTLShapeInfo[];
tools?: readonly TLStateNodeConstructor[];
}
// @public
export type TldrawEditorProps = TldrawEditorBaseProps & ({
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
2023-06-04 10:38:53 +00:00
store: TLStore | TLStoreWithStatus;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
} | {
store?: undefined;
[improvement] store snapshot types (#1657) This PR improves the types for the Store. - renames `StoreSnapshot` to `SerializedStore`, which is the return type of `Store.serialize` - creates `StoreSnapshot` as a type for the return type of `Store.getSnapshot` / the argument type for `Store.loadSnapshot` - creates `TLStoreSnapshot` as the type used for the `TLStore`. This came out of a session I had with a user. This should prevent needing to import types from `@tldraw/store` directly. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - [dev] Rename `StoreSnapshot` to `SerializedStore` - [dev] Create new `StoreSnapshot` as type related to `getSnapshot`/`loadSnapshot`
2023-06-27 12:25:55 +00:00
initialData?: SerializedStore<TLRecord>;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
persistenceKey?: string;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
sessionId?: string;
Add support for project names (#1340) This PR adds some things that we need for the Project Name feature on tldraw.com. It should be reviewed alongside https://github.com/tldraw/tldraw-lite/pull/1814 ## Name Property This PR adds a `name` property to `TLDocument`. We use this to store a project's name. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced"> ## Top Zone This PR adds a `topZone` area of the UI that we can add stuff to, similar to how `shareZone` works. It also adds an example to show where the `topZone` and `shareZone` are: <img width="1511" alt="Screenshot 2023-05-12 at 10 57 40" src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974"> ## Breakpoints This PR change's the UI's breakpoints a little bit. It moves the action bar to the bottom a little bit earlier. (This gives us more space at the top for the project name). ![2023-05-12 at 11 08 26 - Fuchsia Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d) ![2023-05-12 at 13 45 04 - Tan Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6) ## Input Blur This PR adds an `onBlur` parameter to `Input`. This was needed because 'clicking off' the input wasn't firing `onComplete` or `onCancel`. <img width="620" alt="Screenshot 2023-05-09 at 16 12 58" src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf"> ## Create Project Name This PR adds an internal `createProjectName` property to `TldrawEditorConfig`. Similar to `derivePresenceState`, you can pass a custom function to it. It lets you control what gets used as the default project name. We use it to set different names in our local projects compared to shared projects. In the future, when we add more advanced project features, we could handle this better within the UI. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41"> ### Test Plan 1. Gradually reduce the width of the browser window. 2. Check that the actions menu jumps to the bottom before the style panel moves to the bottom. --- 1. In the examples app, open the `/zones` example. 2. Check that there's a 'top zone' at the top. - [ ] Unit Tests - [ ] Webdriver tests ### Release Note - [dev] Added a `topZone` area where you can put stuff. - [dev] Added a `name` property to `TLDocument` - and `app` methods for it. - [dev] Added an internal `createProjectName` config property for controlling the default project name. - [dev] Added an `onBlur` parameter to `Input`. - Moved the actions bar to the bottom on medium-sized screens. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
defaultName?: string;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
});
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLEditorAssetUrls = {
fonts: {
monospace: string;
serif: string;
sansSerif: string;
draw: string;
};
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export interface TLEditorComponents {
[feature] `check-box` geo shape (#1330) This PR adds a `check-box` geo shape. ![Kapture 2023-05-08 at 15 31 49](https://user-images.githubusercontent.com/23072548/236853749-99ba786f-73a4-4b65-86ca-f2cdac61a903.gif) It also improves some logic around the `onClick` shape util handler and some surprisingly related fixes to point hit testing. ### Test Plan 1. Create a geo shape 2. Set it as a checkbox style 3. *easter egg* double click while holding alt to toggle between check-box and rectangle - [x] Unit Tests ### Release Note - Adds checkbox geo shape.
2023-05-09 13:32:04 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Background: null | TLBackgroundComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Brush: null | TLBrushComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
CollaboratorBrush: null | TLBrushComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
CollaboratorCursor: null | TLCursorComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
CollaboratorHint: null | TLCollaboratorHintComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
CollaboratorScribble: null | TLScribbleComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
CollaboratorShapeIndicator: null | TLShapeIndicatorComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Cursor: null | TLCursorComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
ErrorFallback: TLErrorFallbackComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Grid: null | TLGridComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Handle: null | TLHandleComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Scribble: null | TLScribbleComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
ShapeErrorFallback: TLShapeErrorFallbackComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
ShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallback;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
SnapLine: null | TLSnapLineComponent;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
Spinner: null | TLSpinnerComponent;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
SvgDefs: null | TLSvgDefsComponent;
// (undocumented)
ZoomBrush: null | TLBrushComponent;
}
// @public (undocumented)
export interface TLEditorOptions {
getContainer: () => HTMLElement;
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
shapes: readonly AnyTLShapeInfo[];
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
2023-06-04 10:38:53 +00:00
store: TLStore;
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
tools: readonly TLStateNodeConstructor[];
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
2023-06-04 10:38:53 +00:00
user?: TLUser;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLEmbedResult = {
definition: EmbedDefinition;
url: string;
embedUrl: string;
} | undefined;
// @public (undocumented)
export type TLEnterEventHandler = (info: any, from: string) => void;
// @public (undocumented)
export interface TLErrorBoundaryProps {
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
children: React_3.ReactNode;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
[fix] react component runaways, error boundaries (#1625) This PR fixes a few components that were updating too often. It changes the format of our error boundaries in order to avoid re-rendering them as changed props. ### Change Type - [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
fallback: (props: {
error: unknown;
}) => any;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onError?: ((error: unknown) => void) | null;
}
// @public (undocumented)
export interface TLEventHandlers {
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onCancel: TLCancelEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onComplete: TLCompleteEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onDoubleClick: TLClickEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onInterrupt: TLInterruptEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onKeyDown: TLKeyboardEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onKeyRepeat: TLKeyboardEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onKeyUp: TLKeyboardEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onMiddleClick: TLPointerEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onPointerDown: TLPointerEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onPointerEnter: TLPointerEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onPointerLeave: TLPointerEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onPointerMove: TLPointerEvent;
[2/3] renderer changes to support "sandwich mode" highlighting (#1418) This diff modifies our canvas/rendering code to support shapes rendering into a "background layer". The background layer isn't a layer in the sense of our own html/svg/indicator layers, but is instead part of the HTML canvas layer and is created by allocating z-indexes to shapes below all others. For most shapes, the background starts at the canvas. If a shape is in a frame, then the frame is treated as the background. ![Kapture 2023-05-19 at 11 38 12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71) Exports now use the `renderingShapes` algorithm which fixed a small bug with exports where opacity wouldn't get correctly propagated down through child shapes. ### The plan 1. initial highlighter shape/tool #1401 2. sandwich rendering for highlighter shapes #1418 **>you are here<** 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan not yet! - [x] Unit Tests ### Release Notes [not yet!]
2023-06-01 15:22:47 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onPointerUp: TLPointerEvent;
[2/3] renderer changes to support "sandwich mode" highlighting (#1418) This diff modifies our canvas/rendering code to support shapes rendering into a "background layer". The background layer isn't a layer in the sense of our own html/svg/indicator layers, but is instead part of the HTML canvas layer and is created by allocating z-indexes to shapes below all others. For most shapes, the background starts at the canvas. If a shape is in a frame, then the frame is treated as the background. ![Kapture 2023-05-19 at 11 38 12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71) Exports now use the `renderingShapes` algorithm which fixed a small bug with exports where opacity wouldn't get correctly propagated down through child shapes. ### The plan 1. initial highlighter shape/tool #1401 2. sandwich rendering for highlighter shapes #1418 **>you are here<** 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan not yet! - [x] Unit Tests ### Release Notes [not yet!]
2023-06-01 15:22:47 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onQuadrupleClick: TLClickEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
onRightClick: TLPointerEvent;
// (undocumented)
onTripleClick: TLClickEvent;
// (undocumented)
onWheel: TLWheelEvent;
[1/3] initial highlighter shape/tool (#1401) This diff adds an initial version of the highlighter shape. At this stage, it's a complete copy of the draw tool minus the following features: * Fills * Stroke types * Closed shapes I've created a new shape util (a copy-paste of the draw one with stuff renamed/deleted) but reused the state chart nodes for the draw shape. Currently this new tool looks exactly like the draw tool, but that'll be changing soon! ![Kapture 2023-05-17 at 15 37 33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01) The UI here is extremely WIP. The highlighter tool is behind a feature flag, but once enabled is accessible through the tool bar. There's a first-draft highlighter icon (i didn't spend much time on this, it's not super legible on non-retina displays yet imo), and the tool is bound to the `i` key (any better suggestions? `h` is taken by the hand tool) ### The plan 1. initial highlighter shape/tool #1401 **>you are here<** 2. sandwich rendering for highlighter shapes #1418 3. shape styling - new colours and sizes, lightweight perfect freehand changes ### Change Type - [x] `minor` — New Feature ### Test Plan (not yet) ### Release Notes [internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLEventInfo = TLCancelEventInfo | TLClickEventInfo | TLCompleteEventInfo | TLInterruptEventInfo | TLKeyboardEventInfo | TLPinchEventInfo | TLPointerEventInfo | TLWheelEventInfo;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export interface TLEventMap {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
'change-history': [{
reason: 'bail';
markId?: string;
} | {
reason: 'push' | 'redo' | 'undo';
}];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
'mark-history': [{
id: string;
}];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
'max-shapes': [{
name: string;
pageId: TLPageId;
count: number;
}];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
'stop-camera-animation': [];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
'stop-following': [];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
change: [HistoryEntry<TLRecord>];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
crash: [{
error: unknown;
}];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
event: [TLEventInfo];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
frame: [number];
// (undocumented)
mount: [];
// (undocumented)
tick: [number];
// (undocumented)
update: [];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLEventMapHandler<T extends keyof TLEventMap> = (...args: TLEventMap[T]) => void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLEventName = 'cancel' | 'complete' | 'interrupt' | 'wheel' | TLCLickEventName | TLKeyboardEventName | TLPinchEventName | TLPointerEventName;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLExitEventHandler = (info: any, to: string) => void;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLExportType = 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
`ExternalContentManager` for handling external content (files, images, etc) (#1550) This PR improves the editor's APIs around creating assets and files. This allows end user developers to replace behavior that might occur, for example, when pasting images or dragging files onto the canvas. Here, we: - remove `onCreateAssetFromFile` prop - remove `onCreateBookmarkFromUrl` prop - introduce `onEditorReady` prop - introduce `onEditorWillDispose` prop - introduce `ExternalContentManager` The `ExternalContentManager` (ECM) is used in circumstances where we're turning external content (text, images, urls, etc) into assets or shapes. It is designed to allow certain methods to be overwritten by other developers as a kind of weakly supported hack. For example, when a user drags an image onto the canvas, the event handler passes a `TLExternalContent` object to the editor's `putExternalContent` method. This method runs the ECM's handler for this content type. That handler may in turn run other methods, such as `createAssetFromFile` or `createShapesForAssets`, which will lead to the image being created on the canvas. If a developer wanted to change the way that assets are created from files, then they could overwrite that method at runtime. ```ts const handleEditorReady = (editor: Editor) => { editor.externalContentManager.createAssetFromFile = myHandler } function Example() { return <Tldraw onEditorReady={handleEditorReady}/> } ``` If you wanted to go even deeper, you could override the editor's `putExternalContent` method. ```ts const handleEditorReady = (editor: Editor) => { const handleExternalContent = (info: TLExternalContent): Promise<void> => { if (info.type === 'files') { // do something here } else { // do the normal thing editor.externalContentManager.handleContent(info) } } ``` ### Change Type - [x] `major` ### Test Plan 1. Drag images, urls, etc. onto the canvas 2. Use copy and paste for single and multiple files 3. Use bookmark / embed shapes and convert between eachother ### Release Notes - [editor] add `ExternalContentManager` for plopping content onto the canvas - [editor] remove `onCreateAssetFromFile` prop - [editor] remove `onCreateBookmarkFromUrl` prop - [editor] introduce `onEditorReady` prop - [editor] introduce `onEditorWillDispose` prop - [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
// @public (undocumented)
export type TLExternalContent = {
type: 'embed';
url: string;
point?: VecLike;
embed: EmbedDefinition;
} | {
type: 'files';
files: File[];
point?: VecLike;
ignoreParent: boolean;
} | {
type: 'svg-text';
text: string;
point?: VecLike;
} | {
type: 'text';
point?: VecLike;
text: string;
} | {
type: 'url';
url: string;
point?: VecLike;
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLHistoryEntry = TLCommand | TLHistoryMark;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLHistoryMark = {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
type: 'STOP';
id: string;
onUndo: boolean;
onRedo: boolean;
};
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
// @public (undocumented)
export type TLInterruptEventInfo = {
type: 'misc';
name: 'interrupt';
};
// @public (undocumented)
export type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void;
// @public (undocumented)
export type TLKeyboardEventInfo = TLBaseEventInfo & {
type: 'keyboard';
name: TLKeyboardEventName;
key: string;
code: string;
};
// @public (undocumented)
export type TLKeyboardEventName = 'key_down' | 'key_repeat' | 'key_up';
// @public (undocumented)
export type TLOnBeforeCreateHandler<T extends TLShape> = (next: T) => T | void;
// @public (undocumented)
export type TLOnBeforeUpdateHandler<T extends TLShape> = (prev: T, next: T) => T | void;
// @internal (undocumented)
export type TLOnBindingChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type TLOnChildrenChangeHandler<T extends TLShape> = (shape: T) => TLShapePartial[] | void;
// @public (undocumented)
export type TLOnClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type TLOnDoubleClickHandleHandler<T extends TLShape> = (shape: T, handle: TLHandle) => TLShapePartial<T> | void;
// @public (undocumented)
export type TLOnDoubleClickHandler<T extends TLShape> = (shape: T) => TLShapePartial<T> | void;
// @public (undocumented)
export type TLOnDragHandler<T extends TLShape, R = void> = (shape: T, shapes: TLShape[]) => R;
// @public (undocumented)
export type TLOnEditEndHandler<T extends TLShape> = (shape: T) => void;
// @public (undocumented)
export type TLOnHandleChangeHandler<T extends TLShape> = (shape: T, info: {
handle: TLHandle;
isPrecise: boolean;
}) => TLShapePartial<T> | void;
Make some missing tsdocs appear on the docs site (#1706) 🚨 Note 🚨 This PR has changed! See my [newer comment](https://github.com/tldraw/tldraw/pull/1706#issuecomment-1623451709) for what the PR does now. This description is kept here to show the original intention of the PR. --- This PR fixes the tsdocs formatting of `TldrawEditorProps`, so that they appears on the docs site. We have docs already written, but they weren't appearing. There are probably others like this too. ![image](https://github.com/tldraw/tldraw/assets/15892272/8d8940b3-983f-48b3-9804-7ac88116ca9d) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Navigate to `/gen/editor/TldrawEditorProps` 2. Make sure that that the parameters are listed out with descriptions. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Docs: Fixed some missing docs for the TldrawEditor component.
2023-07-07 11:50:47 +00:00
// @public
export type TLOnMountHandler = (editor: Editor) => (() => void) | undefined | void;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export type TLOnResizeEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
export type TLOnResizeHandler<T extends TLShape> = (shape: T, info: TLResizeInfo<T>) => Omit<TLShapePartial<T>, 'id' | 'type'> | undefined | void;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export type TLOnResizeStartHandler<T extends TLShape> = TLEventStartHandler<T>;
// @public (undocumented)
export type TLOnRotateEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
export type TLOnRotateHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
export type TLOnRotateStartHandler<T extends TLShape> = TLEventStartHandler<T>;
// @public (undocumented)
export type TLOnTranslateEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
export type TLOnTranslateHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
export type TLOnTranslateStartHandler<T extends TLShape> = TLEventStartHandler<T>;
// @public (undocumented)
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
export type TLPinchEvent = (info: TLPinchEventInfo) => void;
// @public (undocumented)
export type TLPinchEventInfo = TLBaseEventInfo & {
type: 'pinch';
name: TLPinchEventName;
point: Vec2dModel;
delta: Vec2dModel;
};
// @public (undocumented)
export type TLPinchEventName = 'pinch_end' | 'pinch_start' | 'pinch';
// @public (undocumented)
export type TLPointerEvent = (info: TLPointerEventInfo) => void;
// @public (undocumented)
export type TLPointerEventInfo = TLBaseEventInfo & {
type: 'pointer';
name: TLPointerEventName;
point: VecLike;
pointerId: number;
button: number;
isPen: boolean;
} & TLPointerEventTarget;
// @public (undocumented)
export type TLPointerEventName = 'middle_click' | 'pointer_down' | 'pointer_enter' | 'pointer_leave' | 'pointer_move' | 'pointer_up' | 'right_click';
// @public (undocumented)
export type TLPointerEventTarget = {
target: 'canvas';
shape?: undefined;
} | {
target: 'handle';
shape: TLShape;
handle: TLHandle;
} | {
target: 'selection';
handle?: TLSelectionHandle;
shape?: undefined;
} | {
target: 'shape';
shape: TLShape;
};
// @public (undocumented)
export type TLResizeHandle = SelectionCorner | SelectionEdge;
add docs for TLShapeUtil (#1215) This PR adds docs for the methods in the TLShapeUtil class. I think that it's a good page to have docs on, as it shows people what's possible with the custom shape API. Currently, our docs are not showing `@param` info for lots of methods, including the ones added in this PR. I'll do fix for that in a follow-up PR, so that it's easier to review. --- Note: Moving forward, we probably want to consider **_where_** these docs are shown, and how we achieve that. For example, do we put the docs for these methods in: * The docs page for the `TLShapeUtil` class? * The docs pages for the handler types, eg: [`OnResizeHandler`](http://localhost:3000/gen/editor/OnResizeHandler-type)? * Both? Right now, I opted for putting them in the the TLShapeUtil class, as it keeps them all in one place, and it's what we already do for some others. We should consider both - what works best for the docs? and what works best for code editors? --- This PR also includes a fix to our pre-commit step that @SomeHats did.
2023-05-05 14:05:25 +00:00
// @public
export type TLResizeInfo<T extends TLShape> = {
[refactor] snapping (#1589) This PR is a refactor / tidy up of some snapping logic. - Fix a bug where the recursive call to `findAdjacentGaps` could lead to a maximum call stack error - Fixed an issue that caused handle snapping to expensively recompute - Fixed a dependency from the snap manager to the line shape ### Change Type - [x] `patch` ### Test Plan Our snap tests are pretty thorough, they should work here. ### Release Notes - [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
newPoint: Vec2d;
add docs for TLShapeUtil (#1215) This PR adds docs for the methods in the TLShapeUtil class. I think that it's a good page to have docs on, as it shows people what's possible with the custom shape API. Currently, our docs are not showing `@param` info for lots of methods, including the ones added in this PR. I'll do fix for that in a follow-up PR, so that it's easier to review. --- Note: Moving forward, we probably want to consider **_where_** these docs are shown, and how we achieve that. For example, do we put the docs for these methods in: * The docs page for the `TLShapeUtil` class? * The docs pages for the handler types, eg: [`OnResizeHandler`](http://localhost:3000/gen/editor/OnResizeHandler-type)? * Both? Right now, I opted for putting them in the the TLShapeUtil class, as it keeps them all in one place, and it's what we already do for some others. We should consider both - what works best for the docs? and what works best for code editors? --- This PR also includes a fix to our pre-commit step that @SomeHats did.
2023-05-05 14:05:25 +00:00
handle: TLResizeHandle;
mode: TLResizeMode;
scaleX: number;
scaleY: number;
initialBounds: Box2d;
initialShape: T;
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public
export type TLResizeMode = 'resize_bounds' | 'scale_shape';
// @public (undocumented)
export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
// @public
export interface TLSessionStateSnapshot {
// (undocumented)
currentPageId: TLPageId;
// (undocumented)
exportBackground: boolean;
// (undocumented)
isDebugMode: boolean;
// (undocumented)
isFocusMode: boolean;
// (undocumented)
isGridMode: boolean;
// (undocumented)
isToolLocked: boolean;
// (undocumented)
pageStates: Array<{
pageId: TLPageId;
camera: {
x: number;
y: number;
z: number;
};
selectedIds: TLShapeId[];
focusLayerId: null | TLShapeId;
}>;
// (undocumented)
version: number;
}
yjs example (#1560) This PR adds a yjs example to the examples app. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Release Notes - [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
// @public (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
export type TLShapeInfo<T extends TLUnknownShape = TLUnknownShape> = {
type: T['type'];
util: TLShapeUtilConstructor<T>;
props?: ShapeProps<T>;
yjs example (#1560) This PR adds a yjs example to the examples app. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Release Notes - [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
migrations?: Migrations;
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends ShapeUtil<T> = ShapeUtil<T>> {
[refactor] Remove `TLShapeDef`, `getShapeUtilByType`. (#1432) This PR removes `TLShapeDef` and associated helpers / references. It purposely loosens the configuration and typings to better support customization. ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Use the app! ### Release Notes - [tlschema] Update props of `createTLSchema` - [editor] Update props of `TldrawEditorConfig` - [editor] Remove `App.getShapeUtilByType` - [editor] Update `App.getShapeUtil` to take a type rather than a shape --------- Co-authored-by: alex <alex@dytry.ch>
2023-05-23 12:32:42 +00:00
// (undocumented)
Styles API (#1580) Removes `propsForNextShape` and replaces it with the new styles API. Changes in here: - New custom style example - `setProp` is now `setStyle` and takes a `StyleProp` instead of a string - `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and `Editor.sharedOpacity` - They return an object that flags mixed vs shared types instead of using null to signal mixed types - `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp` instead of `string` - `StateNode.shapeType` is now the shape util rather than just a string. This lets us pull the styles from the shape type directly. - `color` is no longer a core part of the editor set on the shape parent. Individual child shapes have to use color directly. - `propsForNextShape` is now `stylesForNextShape` - `InstanceRecordType` is created at runtime in the same way `ShapeRecordType` is. This is so it can pull style validators out of shape defs for `stylesForNextShape` - Shape type are now defined by their props rather than having separate validators & type defs ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Big time regression testing around styles! 2. Check UI works as intended for all shape/style/tool combos - [x] Unit Tests - [ ] End to end tests ### Release Notes - --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
new (editor: Editor, type: T['type'], styleProps: ReadonlyMap<StyleProp<unknown>, string>): U;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// (undocumented)
type: T['type'];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
export type TLShapeUtilFlag<T> = (shape: T) => boolean;
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export interface TLStateNodeConstructor {
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
new (editor: Editor, parent?: StateNode): StateNode;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
children?: () => TLStateNodeConstructor[];
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
id: string;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// (undocumented)
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
2023-06-04 10:38:53 +00:00
initial?: string;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
}
yjs example (#1560) This PR adds a yjs example to the examples app. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Release Notes - [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
// @public (undocumented)
export type TLStoreEventInfo = HistoryEntry<TLRecord>;
// @public (undocumented)
export type TLStoreOptions = {
[improvement] store snapshot types (#1657) This PR improves the types for the Store. - renames `StoreSnapshot` to `SerializedStore`, which is the return type of `Store.serialize` - creates `StoreSnapshot` as a type for the return type of `Store.getSnapshot` / the argument type for `Store.loadSnapshot` - creates `TLStoreSnapshot` as the type used for the `TLStore`. This came out of a session I had with a user. This should prevent needing to import types from `@tldraw/store` directly. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - [dev] Rename `StoreSnapshot` to `SerializedStore` - [dev] Create new `StoreSnapshot` as type related to `getSnapshot`/`loadSnapshot`
2023-06-27 12:25:55 +00:00
initialData?: SerializedStore<TLRecord>;
yjs example (#1560) This PR adds a yjs example to the examples app. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Release Notes - [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
defaultName?: string;
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
} & ({
schema: StoreSchema<TLRecord, TLStoreProps>;
} | {
shapes: readonly AnyTLShapeInfo[];
});
yjs example (#1560) This PR adds a yjs example to the examples app. ### Change Type - [x] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Release Notes - [editor] Adds yjs example project
2023-06-09 12:15:06 +00:00
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export type TLStoreWithStatus = {
readonly status: 'error';
readonly store?: undefined;
readonly error: Error;
} | {
readonly status: 'loading';
readonly store?: undefined;
readonly error?: undefined;
} | {
readonly status: 'not-synced';
readonly store: TLStore;
readonly error?: undefined;
} | {
readonly status: 'synced-local';
readonly store: TLStore;
readonly error?: undefined;
} | {
readonly status: 'synced-remote';
readonly connectionStatus: 'offline' | 'online';
readonly store: TLStore;
readonly error?: undefined;
};
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLTickEvent = (elapsed: number) => void;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public
export interface TLUserPreferences {
// (undocumented)
animationSpeed: number;
// (undocumented)
color: string;
// (undocumented)
id: string;
// (undocumented)
isDarkMode: boolean;
// (undocumented)
Independent instance state persistence (#1493) This PR - Removes UserDocumentRecordType - moving isSnapMode to user preferences - moving isGridMode and isPenMode to InstanceRecordType - deleting the other properties which are no longer needed. - Creates a separate pipeline for persisting instance state. Previously the instance state records were stored alongside the document state records, and in order to load the state for a particular instance (in our case, a particular tab) you needed to pass the 'instanceId' prop. This prop ended up totally pervading the public API and people ran into all kinds of issues with it, e.g. using the same instance id in multiple editor instances. There was also an issue whereby it was hard for us to clean up old instance state so the idb table ended up bloating over time. This PR makes it so that rather than passing an instanceId, you load the instance state yourself while creating the store. It provides tools to make that easy. - Undoes the assumption that we might have more than one instance's state in the store. - Like `document`, `instance` now has a singleton id `instance:instance`. - Page state ids and camera ids are no longer random, but rather derive from the page they belong to. This is like having a foreign primary key in SQL databases. It's something i'd love to support fully as part of the RecordType/Store api. Tests to do - [x] Test Migrations - [x] Test Store.listen filtering - [x] Make type sets in Store public and readonly - [x] Test RecordType.createId - [x] Test Instance state snapshot loading/exporting - [x] Manual test File I/O - [x] Manual test Vscode extension with multiple tabs - [x] Audit usages of store.query - [x] Audit usages of changed types: InstanceRecordType, 'instance', InstancePageStateRecordType, 'instance_page_state', 'user_document', 'camera', CameraRecordType, InstancePresenceRecordType, 'instance_presence' - [x] Test user preferences - [x] Manual test isSnapMode and isGridMode and isPenMode - [ ] Test indexedDb functions - [x] Add instanceId stuff back ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
isSnapMode: boolean;
// (undocumented)
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
locale: string;
// (undocumented)
name: string;
}
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLWheelEvent = (info: TLWheelEventInfo) => void;
// @public (undocumented)
export type TLWheelEventInfo = TLBaseEventInfo & {
type: 'wheel';
name: 'wheel';
delta: Vec2dModel;
};
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { track }
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
// @public (undocumented)
export type UiEvent = TLCancelEvent | TLClickEvent | TLCompleteEvent | TLKeyboardEvent | TLPinchEvent | TLPointerEvent;
// @public (undocumented)
export type UiEventType = 'click' | 'keyboard' | 'pinch' | 'pointer' | 'wheel' | 'zoom';
// @public
export function uniqueId(): string;
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { useComputed }
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
export function useContainer(): HTMLDivElement;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
rename app to editor (#1503) This PR renames `App`, `app` and all appy names to `Editor`, `editor`, and editorry names. ### Change Type - [x] `major` — Breaking Change ### Release Notes - Rename `App` to `Editor` and many other things that reference `app` to `editor`.
2023-06-02 15:21:45 +00:00
export const useEditor: () => Editor;
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @internal (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
export function useLocalStore({ persistenceKey, sessionId, ...rest }: {
persistenceKey?: string;
sessionId?: string;
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
2023-06-04 10:38:53 +00:00
} & TLStoreOptions): TLStoreWithStatus;
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
[feat] new LiveCollaborators behind feature flag (#1219) In this PR I'm adding new versions of the `LiveCollaborators` and `Collaborators` components for the ephemeral state work. They are behind a feature flag for now.
2023-05-03 13:48:46 +00:00
// @internal (undocumented)
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
export function usePeerIds(): string[];
[feat] new LiveCollaborators behind feature flag (#1219) In this PR I'm adding new versions of the `LiveCollaborators` and `Collaborators` components for the ephemeral state work. They are behind a feature flag for now.
2023-05-03 13:48:46 +00:00
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function usePrefersReducedMotion(): boolean;
[feat] new LiveCollaborators behind feature flag (#1219) In this PR I'm adding new versions of the `LiveCollaborators` and `Collaborators` components for the ephemeral state work. They are behind a feature flag for now.
2023-05-03 13:48:46 +00:00
// @internal (undocumented)
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
export function usePresence(userId: string): null | TLInstancePresence;
[feat] new LiveCollaborators behind feature flag (#1219) In this PR I'm adding new versions of the `LiveCollaborators` and `Collaborators` components for the ephemeral state work. They are behind a feature flag for now.
2023-05-03 13:48:46 +00:00
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { useQuickReactor }
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
[chore] refactor user preferences (#1435) - Remove TLUser, TLUserPresence - Add first-class support for user preferences that persists across rooms and tabs ### Change Type <!-- 💡 Indicate the type of change your pull request is. --> <!-- 🤷‍♀️ If you're not sure, don't select anything --> <!-- ✂️ Feel free to delete unselected options --> <!-- To select one, put an x in the box: [x] --> - [ ] `patch` — Bug Fix - [ ] `minor` — New Feature - [x] `major` — Breaking Change - [ ] `dependencies` — Dependency Update (publishes a `patch` release, for devDependencies use `internal`) - [ ] `documentation` — Changes to the documentation only (will not publish a new version) - [ ] `tests` — Changes to any testing-related code only (will not publish a new version) - [ ] `internal` — Any other changes that don't affect the published package (will not publish a new version) ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] Webdriver tests ### Release Notes - Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
// @internal (undocumented)
export const USER_COLORS: readonly ["#FF802B", "#EC5E41", "#F2555A", "#F04F88", "#E34BA9", "#BD54C6", "#9D5BD2", "#7B66DC", "#02B1CC", "#11B3A3", "#39B178", "#55B467"];
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { useReactor }
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public (undocumented)
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
2023-06-04 10:38:53 +00:00
export function useTLStore(opts: TLStoreOptions): TLStore;
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { useValue }
shapes folder, move tools into shape defs (#1574) This diff adds a new property to `defineShape`: `tool`. The tool prop allows shapes to bring a tool along with them as part of their definition. E.g. the draw shape isn't much use without the draw tool, so adding the draw shape to your app gives you the draw tool tool. As part of this, i renamed the `shapeutils` folder to just `shapes`, and moved a bunch of shape-specific tools from the tools folder into the shapes folder. This more closely reflects how things will be once we move our default shapes out of core for tldraw-zero. ### Change Type - [x] `patch` — Bug fix ### Test Plan Tested locally ### Release Notes n/a
2023-06-12 15:39:50 +00:00
// @public (undocumented)
export const VideoShape: TLShapeInfo<TLVideoShape>;
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
2023-06-04 10:38:53 +00:00
// @public (undocumented)
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
// (undocumented)
canEdit: () => boolean;
// (undocumented)
Rename `ShapeUtil.render` -> `ShapeUtil.component` (#1609) This PR renames `ShapeUtil.render` to `ShapeUtil.component`. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
component(shape: TLVideoShape): JSX.Element;
// (undocumented)
`ShapeUtil` refactor, `Editor` cleanup (#1611) This PR improves the ergonomics of `ShapeUtil` classes. ### Cached methods First, I've remove the cached methods (such as `bounds`) from the `ShapeUtil` class and lifted this to the `Editor` class. Previously, calling `ShapeUtil.getBounds` would return the un-cached bounds of a shape, while calling `ShapeUtil.bounds` would return the cached bounds of a shape. We also had `Editor.getBounds`, which would call `ShapeUtil.bounds`. It was confusing. The cached methods like `outline` were also marked with "please don't override", which suggested the architecture was just wrong. The only weirdness from this is that utils sometimes reach out to the editor for cached versions of data rather than calling their own cached methods. It's still an easier story to tell than what we had before. ### More defaults We now have three and only three `abstract` methods for a `ShapeUtil`: - `getDefaultProps` (renamed from `defaultProps`) - `getBounds`, - `component` - `indicator` Previously, we also had `getCenter` as an abstract method, though this was usually just the middle of the bounds anyway. ### Editing bounds This PR removes the concept of editingBounds. The viewport will no longer animate to editing shapes. ### Active area manager This PR also removes the active area manager, which was not being used in the way we expected it to be. ### Dpr manager This PR removes the dpr manager and uses a hook instead to update it from React. This is one less runtime browser dependency in the app, one less thing to document. ### Moving things around This PR also continues to try to organize related methods and properties in the editor. ### Change Type - [x] `major` — Breaking change ### Release Notes - [editor] renames `defaultProps` to `getDefaultProps` - [editor] removes `outline`, `outlineSegments`, `handles`, `bounds` - [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
getDefaultProps(): TLVideoShape['props'];
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
2023-06-04 10:38:53 +00:00
// (undocumented)
indicator(shape: TLVideoShape): JSX.Element;
// (undocumented)
isAspectRatioLocked: () => boolean;
// (undocumented)
toSvg(shape: TLVideoShape): SVGGElement;
// (undocumented)
mini `defineShape` API (#1563) Based on #1549, but with a lot of code-structure related changes backed out. Shape schemas are still defined in tlschemas with this diff. Couple differences between this and #1549: - This tightens up the relationship between store schemas and editor schemas a bit - Reduces the number of places we need to remember to include core shapes - Only `<TLdrawEditor />` sets default shapes by default. If you're doing something funky with lower-level APIs, you need to specify `defaultShapes` manually - Replaces `validator` with `props` for shapes ### Change Type - [x] `major` — Breaking Change ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [x] Unit Tests - [ ] Webdriver tests ### Release Notes [dev-facing, notes to come]
2023-06-12 14:04:14 +00:00
static type: "video";
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
2023-06-04 10:38:53 +00:00
}
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export class WeakMapCache<T extends object, K> {
// (undocumented)
access(item: T): K | undefined;
// (undocumented)
bust(): void;
// (undocumented)
get<P extends T>(item: P, cb: (item: P) => K): NonNullable<K>;
// (undocumented)
has(item: T): boolean;
// (undocumented)
invalidate(item: T): void;
// (undocumented)
items: WeakMap<T, K>;
// (undocumented)
set(item: T, value: K): void;
}
Incorporate signia as @tldraw/state (#1620) It tried to get out but we're dragging it back in. This PR brings [signia](https://github.com/tldraw/signia) back into tldraw as @tldraw/state. ### Change Type - [x] major --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
export { whyAmIRunning }
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
export const ZOOMS: number[];
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
2023-06-04 10:38:53 +00:00
export * from "@tldraw/indices";
transfer-out: transfer out
2023-04-25 11:01:25 +00:00
export * from "@tldraw/tlschema";
// (No @packageDocumentation comment for this package)
```
Reference in a new issue Copy permalink