117 lines
2.5 KiB
Markdown
117 lines
2.5 KiB
Markdown
Welcome to the documentation for tldraw's code editor. You can use the code editor to create shapes using JavaScript or TypeScript code.
|
|
|
|
```ts
|
|
const rect = new Rectangle({
|
|
point: [100, 100],
|
|
size: [200, 200],
|
|
style: {
|
|
color: ColorStyle.Blue,
|
|
},
|
|
})
|
|
|
|
rect.x = 300
|
|
```
|
|
|
|
To run your code, press **Command + S**.
|
|
|
|
Your new shapes will appear on the canvas. You can interact with code-created shapes just like any other shape: you can move the shape, change its style, delete it, etc.
|
|
|
|
Each time you run your code, any existing code-created shapes will be replaced by your new code-created shapes. If you want to keep your code-created shapes, select the shapes that you want to keep, press **Command + D** to duplicate them, and move them off to the side.
|
|
|
|
## Shapes
|
|
|
|
You can use the code editor to create any of the regular shapes:
|
|
|
|
- Draw
|
|
- Rectangle
|
|
- Ellipse
|
|
- Arrow
|
|
- Text
|
|
|
|
You can also create shapes that can _only_ be created with code:
|
|
|
|
- Dot
|
|
- Ray
|
|
- Line
|
|
- Polyline
|
|
|
|
Each of these shapes is a `class`. To create the shape, use the following syntax:
|
|
|
|
```ts
|
|
const myShape = new Rectangle()
|
|
```
|
|
|
|
You can also create a shape with custom properties like this:
|
|
|
|
```ts
|
|
const myShape = new Rectangle({
|
|
point: [100, 100],
|
|
size: [200, 200],
|
|
style: {
|
|
color: ColorStyle.Blue,
|
|
size: SizeStyle.Large,
|
|
dash: DashStyle.Dotted,
|
|
},
|
|
})
|
|
```
|
|
|
|
Once you've created a shape, you can set its properties like this:
|
|
|
|
```ts
|
|
const myShape = new Rectangle()
|
|
|
|
myShape.x = 100
|
|
myShape.color = ColorStyle.Red
|
|
```
|
|
|
|
You can find more information on each shape class by clicking its name in the list above.
|
|
|
|
## Controls
|
|
|
|
In addition to shapes, you can also use code to create controls.
|
|
|
|
```ts
|
|
new NumberControl({
|
|
label: 'x',
|
|
value: 0,
|
|
})
|
|
|
|
const myShape = new Rectangle({
|
|
point: [controls.x, 0],
|
|
})
|
|
```
|
|
|
|
Once you've created a control, the app's will display a panel where you can edit the control's value. As you edit the value, your code will run again with the control's new value.
|
|
|
|
There are two kinds of controls:
|
|
|
|
- NumberControl
|
|
- VectorControl
|
|
- TextControl
|
|
|
|
Each of these controls is a `class`. To create the control, use the following syntax:
|
|
|
|
```ts
|
|
const control = new TextControl({
|
|
label: 'myLabel',
|
|
value: 'my value',
|
|
})
|
|
```
|
|
|
|
Once you've created a control, you can use its value in your code like this:
|
|
|
|
```ts
|
|
const myShape = new Text({
|
|
text: controls.myLabel,
|
|
})
|
|
```
|
|
|
|
You can find more information on each control class by clicking its name in the list above.
|
|
|
|
## Shape Classes
|
|
|
|
...
|
|
|
|
## Control Classes
|
|
|
|
...
|