tldraw_final_v6_final(old version).docx.pdf (#2998)
Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists as an alias to `tldraw` for folks who are still using that. ### Test Plan - [x] Unit Tests - [ ] End to end tests ### Release Notes - The `@tldraw/tldraw` package has been renamed to `tldraw`. You can keep using the old version if you want though!
This commit is contained in:
parent
ae531da193
commit
a0628f9cb2
206 changed files with 1602 additions and 1263 deletions
|
@ -6,4 +6,4 @@ date: 3/22/2023
|
|||
order: 8
|
||||
---
|
||||
|
||||
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `@tldraw/tldraw` library.
|
||||
See the [tldraw-yjs example](https://github.com/tldraw/tldraw-yjs-example) for an example of how to use yjs with the `tldraw` library.
|
||||
|
|
|
@ -29,7 +29,7 @@ The editor also exposes many _computed_ values which are derived from other reco
|
|||
You can use these properties directly or you can use them in signals.
|
||||
|
||||
```tsx
|
||||
import { track, useEditor } from '@tldraw/tldraw'
|
||||
import { track, useEditor } from 'tldraw'
|
||||
|
||||
export const SelectedShapeIdsCount = track(() => {
|
||||
const editor = useEditor()
|
||||
|
@ -159,7 +159,7 @@ Note that the paths you pass to [Editor#isIn](?) or [Editor#isInAny](?) can be t
|
|||
> If all you're interested in is the state below `root`, there is a convenience method, [Editor#getCurrentToolId](?), that can help with the editor's currently selected tool.
|
||||
|
||||
```tsx
|
||||
import { track, useEditor } from '@tldraw/tldraw'
|
||||
import { track, useEditor } from 'tldraw'
|
||||
|
||||
export const BubbleToolUi = track(() => {
|
||||
const editor = useEditor()
|
||||
|
@ -193,7 +193,7 @@ The editor's user preferences are shared between all instances. See the [TLUserP
|
|||
To create an id for a shape (a [TLShapeId](?)), use the libary's [createShapeId](?) helper.
|
||||
|
||||
```ts
|
||||
import { createShapeId } from '@tldraw/tldraw'
|
||||
import { createShapeId } from 'tldraw'
|
||||
|
||||
createShapeId() // `shape:some-random-uuid`
|
||||
createShapeId('kyle') // `shape:kyle`
|
||||
|
|
|
@ -20,8 +20,8 @@ Persistence in tldraw means storing information about the editor's state to a da
|
|||
Both the `<Tldraw>` or `<TldrawEditor>` components support local persitence and cross-tab synchronization via the `persistenceKey` prop. Passing a value to this prop will persist the contents of the editor locally to the browser's IndexedDb.
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
|
@ -35,8 +35,8 @@ export default function () {
|
|||
Using a `persistenceKey` will synchronize data automatically with any other tldraw component with the same `persistenceKey` prop, even if that component is in a different browser tab.
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
|
|
|
@ -25,7 +25,7 @@ The editor's core shapes are shapes that are built in and always present. At the
|
|||
|
||||
### Default shapes
|
||||
|
||||
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `@tldraw/tldraw` library as [defaultShapeUtils](?).
|
||||
The default shapes are all of the shapes that are included by default in the [Tldraw](?) component, such as the [TLArrowShape](?) or [TLDrawShape](?). They are exported from the `tldraw` library as [defaultShapeUtils](?).
|
||||
|
||||
### Custom shapes
|
||||
|
||||
|
@ -96,7 +96,7 @@ You can create your own custom shapes. In the examples below, we will create a c
|
|||
In tldraw's data model, each shape is represented by a JSON object. Let's first create a type that describes what this object will look like.
|
||||
|
||||
```ts
|
||||
import { TLBaseShape } from '@tldraw/tldraw'
|
||||
import { TLBaseShape } from 'tldraw'
|
||||
|
||||
type CardShape = TLBaseShape<'card', { w: number; h: number }>
|
||||
```
|
||||
|
@ -112,7 +112,7 @@ While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?)
|
|||
Let's create a [ShapeUtil](?) class for the shape.
|
||||
|
||||
```tsx
|
||||
import { HTMLContainer, ShapeUtil } from '@tldraw/tldraw'
|
||||
import { HTMLContainer, ShapeUtil } from 'tldraw'
|
||||
|
||||
class CardShapeUtil extends ShapeUtil<CardShape> {
|
||||
static override type = 'card' as const
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue