some js formatting tweaks to tutorial
This commit is contained in:
parent
ba4b77cb42
commit
a89867e4c6
14 changed files with 169 additions and 131 deletions
|
@ -16,22 +16,21 @@ So let's add it as a required measurement.
|
||||||
|
|
||||||
## Adding required measurements
|
## Adding required measurements
|
||||||
|
|
||||||
In our `bib.mjs` file, on the `bib` object, there is a key called
|
In our `design/src/bib.mjs` file, on the `bib` object, there is a key called
|
||||||
`measurements` (line 121) that will hold a list (an array) of all required measurements
|
`measurements` (line 121) that will hold a list (an array) of all required measurements
|
||||||
for this part.
|
for this part.
|
||||||
|
|
||||||
We are going to use *the official name* of the measurement. For head
|
We are going to use [*the official name* of the measurement](/reference/measurements). For head
|
||||||
circumference, that name is `head`.
|
circumference, that name is `head`.
|
||||||
|
|
||||||
```design/src/bib.mjs
|
```design/src/bib.mjs
|
||||||
function draftBib({ part }) {
|
function draftBib({ part }) {
|
||||||
|
|
||||||
return part
|
return part
|
||||||
}
|
}
|
||||||
|
|
||||||
export const bib = {
|
export const bib = {
|
||||||
name: 'tutorial.bib',
|
name: 'tutorial.bib',
|
||||||
draft: draftBib,[],
|
draft: draftBib,
|
||||||
from: false,
|
from: false,
|
||||||
hide: {
|
hide: {
|
||||||
self: false,
|
self: false,
|
||||||
|
|
|
@ -31,7 +31,7 @@ function draftBib({ part }) {
|
||||||
export const bib = {
|
export const bib = {
|
||||||
|
|
||||||
name: 'tutorial.bib',
|
name: 'tutorial.bib',
|
||||||
draft: draftBib,[],
|
draft: draftBib,
|
||||||
from: false,
|
from: false,
|
||||||
hide: {
|
hide: {
|
||||||
self: false,
|
self: false,
|
||||||
|
|
|
@ -3,8 +3,8 @@ title: Avoiding overlap
|
||||||
order: 220
|
order: 220
|
||||||
---
|
---
|
||||||
|
|
||||||
While we've only drawn the end of one strap, it's pretty obvious they overlap.
|
While we've only drawn the end of one strap, it's pretty obvious they overlap,
|
||||||
Which is a big no-no in sewing patterns, so we're going to have to address
|
which makes it impossible to cut out, so we're going to have to address
|
||||||
that.
|
that.
|
||||||
|
|
||||||
Specifically, we're going to rotate our strap out of the way until it no longer overlaps.
|
Specifically, we're going to rotate our strap out of the way until it no longer overlaps.
|
||||||
|
@ -14,7 +14,7 @@ to rotate.
|
||||||
Once we have our list of points to rotate, we can rotate them. How far? Until the strap no longer overlaps.
|
Once we have our list of points to rotate, we can rotate them. How far? Until the strap no longer overlaps.
|
||||||
|
|
||||||
<Example tutorial caption="It is looking pretty wonky now, but we'll deal with that next">
|
<Example tutorial caption="It is looking pretty wonky now, but we'll deal with that next">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -22,7 +22,7 @@ is *truthy*.
|
||||||
|
|
||||||
To access the setting, we can destructure it:
|
To access the setting, we can destructure it:
|
||||||
|
|
||||||
```mjs
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
@ -58,20 +58,22 @@ To use them, much like points and paths, we need to destructure both
|
||||||
the `Snippet` constructor as well as the `snippets` object to hold
|
the `Snippet` constructor as well as the `snippets` object to hold
|
||||||
our snippets:
|
our snippets:
|
||||||
|
|
||||||
```mjs
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
//hightlight-start
|
||||||
|
Snippet,
|
||||||
|
//highlight-end
|
||||||
paths,
|
paths,
|
||||||
points,
|
points,
|
||||||
|
// highlight-start
|
||||||
|
snippets,
|
||||||
|
// highlight-end
|
||||||
measurements,
|
measurements,
|
||||||
options,
|
options,
|
||||||
macro,
|
macro,
|
||||||
complete,
|
complete,
|
||||||
// highlight-start
|
|
||||||
Snippet,
|
|
||||||
snippets,
|
|
||||||
// highlight-end
|
|
||||||
part,
|
part,
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
|
@ -97,20 +99,18 @@ You can find all possible snippets in [our documentation](/reference/api/snippet
|
||||||
Let's put this and few other things together to complete our design:
|
Let's put this and few other things together to complete our design:
|
||||||
|
|
||||||
<Example tutorial caption="Almost done. But there's one more thing the user can ask for: a **paperless** pattern">
|
<Example tutorial caption="Almost done. But there's one more thing the user can ask for: a **paperless** pattern">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
Snippet,
|
||||||
paths,
|
paths,
|
||||||
points,
|
points,
|
||||||
|
snippets,
|
||||||
measurements,
|
measurements,
|
||||||
options,
|
options,
|
||||||
macro,
|
macro,
|
||||||
// highlight-start
|
|
||||||
complete,
|
complete,
|
||||||
snippets,
|
|
||||||
Snippet,
|
|
||||||
// highlight-end
|
|
||||||
part,
|
part,
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ as it is, and simply chose to not show it.
|
||||||
To accomplish this, we'll call the `hide()` method on our path:
|
To accomplish this, we'll call the `hide()` method on our path:
|
||||||
|
|
||||||
<Example tutorial caption="A hidden path is not shown">
|
<Example tutorial caption="A hidden path is not shown">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
@ -68,7 +68,7 @@ Let's add some more points, and then construct the complete path for the neck
|
||||||
opening.
|
opening.
|
||||||
|
|
||||||
<Example tutorial caption="Our completed neck opening">
|
<Example tutorial caption="Our completed neck opening">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -27,7 +27,7 @@ Like our neck opening, we've only drawn half since we can simply copy the
|
||||||
points to the other side.
|
points to the other side.
|
||||||
|
|
||||||
<Example tutorial caption="Now the straps overlap. Which doesn't work for a pattern as it would make it impossible to cut it out of a single piece of fabric. So let's deal with the overlap next.">
|
<Example tutorial caption="Now the straps overlap. Which doesn't work for a pattern as it would make it impossible to cut it out of a single piece of fabric. So let's deal with the overlap next.">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -4,12 +4,52 @@ order: 150
|
||||||
---
|
---
|
||||||
|
|
||||||
Time to turn our attention to the draft method of our part.
|
Time to turn our attention to the draft method of our part.
|
||||||
Inside our `design/src/bib.js` file, this is what it currently looks like:
|
Inside our `design/src/bib.mjs` file, this is what it currently looks like:
|
||||||
|
|
||||||
```design/src/bib.mjs
|
```design/src/bib.mjs
|
||||||
function draftBib({ part
|
function draftBib ({
|
||||||
|
// Uncomment below to destructure what you need
|
||||||
|
/*
|
||||||
|
* Content constructors
|
||||||
|
*/
|
||||||
|
//Path, // A Path constructor to create new paths
|
||||||
|
//Point, // A Point constructor to create new points
|
||||||
|
//Snippet, // A Snippet constructor to create new snippets
|
||||||
|
/*
|
||||||
|
* Content constainers
|
||||||
|
*/
|
||||||
|
//paths, // Add a Path to your part by adding it to this object
|
||||||
|
//points, // Add a Points to your part by adding it to this object
|
||||||
|
//snippets, // Add a Snippet to your part by adding it to this object
|
||||||
|
/*
|
||||||
|
* Access to settings
|
||||||
|
*/
|
||||||
|
//absoluteOptions, // Access to settings.absoluteOptions
|
||||||
|
//complete, // Access to settings.complete
|
||||||
|
//measurements, // Access to settings.measurements
|
||||||
|
//options, // Access to settings.options
|
||||||
|
//paperless, // Access to settings.paperless
|
||||||
|
//sa, // Access to settings.sa
|
||||||
|
//scale, // Access to settings.scale
|
||||||
|
/*
|
||||||
|
* Access to utilities
|
||||||
|
*/
|
||||||
|
//getId, //See the getId documentation
|
||||||
|
//hide, //See the hide documentation
|
||||||
|
//log, //See the logging documentation
|
||||||
|
//macro, //See the macros documentation
|
||||||
|
//setHidden, //See the setHidden documentation
|
||||||
|
//store, //See the store documentation
|
||||||
|
//unhide, //See the unhide documentation
|
||||||
|
//units, //See the units documentation
|
||||||
|
///utils, //See the utils documentation
|
||||||
|
/*
|
||||||
|
* Return value
|
||||||
|
*/
|
||||||
|
part, // Your draft method must return this
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
|
// Work your magic here
|
||||||
return part
|
return part
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
@ -15,7 +15,7 @@ path. As it happens, that is the default behaviour, so we merely have to remove
|
||||||
it's `hidden: false` property.
|
it's `hidden: false` property.
|
||||||
|
|
||||||
<Example tutorial caption="It is starting to look good. But this sharp corners at the bottom don't exactly say baby, do they?">
|
<Example tutorial caption="It is starting to look good. But this sharp corners at the bottom don't exactly say baby, do they?">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -21,7 +21,7 @@ At the end of this tutorial, we will have created this pattern:
|
||||||
|
|
||||||
|
|
||||||
<Example tutorial="1" previewFirst="1" caption="Our end result">
|
<Example tutorial="1" previewFirst="1" caption="Our end result">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -8,7 +8,7 @@ going to make sure it is. Here's how we'll make sure the neck opening is _just
|
||||||
right_:
|
right_:
|
||||||
|
|
||||||
<Example tutorial caption="It might look the same as before, but now it's just right">
|
<Example tutorial caption="It might look the same as before, but now it's just right">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -17,7 +17,7 @@ and approachable code base.
|
||||||
The previous step has already set everything up for us. Our design's main file
|
The previous step has already set everything up for us. Our design's main file
|
||||||
lives in `design/src/index.mjs`, and our part lives in `design/src/bib.mjs`.
|
lives in `design/src/index.mjs`, and our part lives in `design/src/bib.mjs`.
|
||||||
|
|
||||||
This `bib.mjs` is where we'll do all our work. The file includes a basic guide on how to use it. We removed it for clarity in our example. It currently looks like this:
|
This `bib.mjs` is where we'll do all our work. The file includes a comments to guide you on how to use it. We removed those for clarity in our example. It currently looks like this:
|
||||||
|
|
||||||
```design/src/bib.mjs
|
```design/src/bib.mjs
|
||||||
function draftBib ({
|
function draftBib ({
|
||||||
|
|
|
@ -43,7 +43,7 @@ Refer to [the list of macros](/reference/macros/) for more details.
|
||||||
</Note>
|
</Note>
|
||||||
|
|
||||||
<Example tutorial paperless caption="Making our pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
|
<Example tutorial paperless caption="Making our pattern paperless is the icing on the cake. Time to wrap up, go over what we've learned, and give some pointers on where to go from here">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
|
@ -9,7 +9,7 @@ With our corners rounded, we should also update our path.
|
||||||
Fortunately, we merely have to update the start of it.
|
Fortunately, we merely have to update the start of it.
|
||||||
|
|
||||||
<Example tutorial caption="The shape our bib is now completed">
|
<Example tutorial caption="The shape our bib is now completed">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
@ -217,7 +217,6 @@ function draftBib({
|
||||||
.close()
|
.close()
|
||||||
.addClass("fabric")
|
.addClass("fabric")
|
||||||
|
|
||||||
|
|
||||||
return part
|
return part
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
@ -17,7 +17,7 @@ As always, [the API docs](/reference/api/point/) have all the details.
|
||||||
|
|
||||||
|
|
||||||
<Example tutorial caption="All of a sudden, things are starting to look like a bib">
|
<Example tutorial caption="All of a sudden, things are starting to look like a bib">
|
||||||
```js
|
```design/src/bib.mjs
|
||||||
function draftBib({
|
function draftBib({
|
||||||
Path,
|
Path,
|
||||||
Point,
|
Point,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue