Update scripts

This commit is contained in:
Steve Ruiz 2021-06-27 14:55:48 +01:00
parent 3f4f5e73ae
commit a9a8629ad2
3 changed files with 35 additions and 38 deletions

View file

@ -9,19 +9,19 @@ export default {
content: `
Welcome to the documentation for tldraw's code editor. You can use the code editor to create shapes using JavaScript or TypeScript code.
\`\`\`ts
\`\`\`ts
const rect = new Rectangle({
point: [100, 100],
size: [200, 200],
style: {
color: ColorStyle.Blue
}
color: ColorStyle.Blue,
},
})
rect.x = 300
\`\`\`
To run your code, press **Command + S**.
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.
@ -46,34 +46,33 @@ You can also create shapes that can _only_ be created with code:
Each of these shapes is a \`class\`. To create the shape, use the following syntax:
\`\`\`ts
\`\`\`ts
const myShape = new Rectangle()
\`\`\`
You can also create a shape with custom properties like this:
\`\`\`ts
\`\`\`ts
const myShape = new Rectangle({
point: [100, 100],
size: [200, 200],
style: {
color: ColorStyle.Blue,
size: SizeStyle.Large,
dash: DashStyle.Dotted
}
dash: DashStyle.Dotted,
},
})
\`\`\`
Once you've created a shape, you can set its properties like this:
\`\`\`ts
\`\`\`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
@ -82,12 +81,12 @@ In addition to shapes, you can also use code to create controls.
\`\`\`ts
new NumberControl({
label: "x",
value: 0
label: 'x',
value: 0,
})
const myShape = new Rectangle({
point: [controls.x, 0]
point: [controls.x, 0],
})
\`\`\`
@ -101,10 +100,10 @@ There are two kinds of controls:
Each of these controls is a \`class\`. To create the control, use the following syntax:
\`\`\`ts
\`\`\`ts
const control = new TextControl({
label: "myLabel",
value: "my value"
label: 'myLabel',
value: 'my value',
})
\`\`\`
@ -112,13 +111,12 @@ Once you've created a control, you can use its value in your code like this:
\`\`\`ts
const myShape = new Text({
text: controls.myLabel
text: controls.myLabel,
})
\`\`\`
You can find more information on each control class by clicking its name in the list above.
## Shape Classes
...
@ -126,5 +124,6 @@ You can find more information on each control class by clicking its name in the
## Control Classes
...
`,
}