PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Update scripts

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

23
components/code-panel/docs-content.ts
View file

@ -14,8 +14,8 @@ const rect = new Rectangle({
point: [100, 100], point: [100, 100],
size: [200, 200], size: [200, 200],
style: { style: {
color: ColorStyle.Blue color: ColorStyle.Blue,
} },
}) })
rect.x = 300 rect.x = 300
@ -59,8 +59,8 @@ const myShape = new Rectangle({
style: { style: {
color: ColorStyle.Blue, color: ColorStyle.Blue,
size: SizeStyle.Large, size: SizeStyle.Large,
dash: DashStyle.Dotted dash: DashStyle.Dotted,
} },
}) })
\`\`\` \`\`\`
@ -73,7 +73,6 @@ myShape.x = 100
myShape.color = ColorStyle.Red myShape.color = ColorStyle.Red
\`\`\` \`\`\`
You can find more information on each shape class by clicking its name in the list above. You can find more information on each shape class by clicking its name in the list above.
## Controls ## Controls
@ -82,12 +81,12 @@ In addition to shapes, you can also use code to create controls.
\`\`\`ts \`\`\`ts
new NumberControl({ new NumberControl({
label: "x", label: 'x',
value: 0 value: 0,
}) })
const myShape = new Rectangle({ const myShape = new Rectangle({
point: [controls.x, 0] point: [controls.x, 0],
}) })
\`\`\` \`\`\`
@ -103,8 +102,8 @@ Each of these controls is a \`class\`. To create the control, use the following
\`\`\`ts \`\`\`ts
const control = new TextControl({ const control = new TextControl({
label: "myLabel", label: 'myLabel',
value: "my value" value: 'my value',
}) })
\`\`\` \`\`\`
@ -112,13 +111,12 @@ Once you've created a control, you can use its value in your code like this:
\`\`\`ts \`\`\`ts
const myShape = new Text({ 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. You can find more information on each control class by clicking its name in the list above.
## Shape Classes ## Shape Classes
... ...
@ -126,5 +124,6 @@ You can find more information on each control class by clicking its name in the
## Control Classes ## Control Classes
... ...
`, `,
} }

2
package.json
View file

@ -8,7 +8,7 @@
"dev": "next dev", "dev": "next dev",
"format": "prettier --write .", "format": "prettier --write .",
"lint": "eslint . --ext ts --ext tsx --ext js", "lint": "eslint . --ext ts --ext tsx --ext js",
"scripts": "node scripts/type-gen && node scripts/docs-gen && prettier --write './components/code-panel/*'", "scripts": "prettier --write './state/code/docs.md' && node scripts/type-gen && node scripts/docs-gen && prettier --write './components/code-panel/*'",
"start": "next start", "start": "next start",
"test-all": "yarn lint && yarn type-check && yarn test", "test-all": "yarn lint && yarn type-check && yarn test",
"test:update": "jest --updateSnapshot", "test:update": "jest --updateSnapshot",

22
state/code/docs.md
View file

@ -5,8 +5,8 @@ const rect = new Rectangle({
point: [100, 100], point: [100, 100],
size: [200, 200], size: [200, 200],
style: { style: {
color: ColorStyle.Blue color: ColorStyle.Blue,
} },
}) })
rect.x = 300 rect.x = 300
@ -50,8 +50,8 @@ const myShape = new Rectangle({
style: { style: {
color: ColorStyle.Blue, color: ColorStyle.Blue,
size: SizeStyle.Large, size: SizeStyle.Large,
dash: DashStyle.Dotted dash: DashStyle.Dotted,
} },
}) })
``` ```
@ -64,7 +64,6 @@ myShape.x = 100
myShape.color = ColorStyle.Red myShape.color = ColorStyle.Red
``` ```
You can find more information on each shape class by clicking its name in the list above. You can find more information on each shape class by clicking its name in the list above.
## Controls ## Controls
@ -73,12 +72,12 @@ In addition to shapes, you can also use code to create controls.
```ts ```ts
new NumberControl({ new NumberControl({
label: "x", label: 'x',
value: 0 value: 0,
}) })
const myShape = new Rectangle({ const myShape = new Rectangle({
point: [controls.x, 0] point: [controls.x, 0],
}) })
``` ```
@ -94,8 +93,8 @@ Each of these controls is a `class`. To create the control, use the following sy
```ts ```ts
const control = new TextControl({ const control = new TextControl({
label: "myLabel", label: 'myLabel',
value: "my value" value: 'my value',
}) })
``` ```
@ -103,13 +102,12 @@ Once you've created a control, you can use its value in your code like this:
```ts ```ts
const myShape = new Text({ 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. You can find more information on each control class by clicking its name in the list above.
## Shape Classes ## Shape Classes
... ...