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
|
||||
|
||||
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
|
||||
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`.
|
||||
|
||||
```design/src/bib.mjs
|
||||
function draftBib({ part }) {
|
||||
|
||||
return part
|
||||
}
|
||||
|
||||
export const bib = {
|
||||
name: 'tutorial.bib',
|
||||
draft: draftBib,[],
|
||||
draft: draftBib,
|
||||
from: false,
|
||||
hide: {
|
||||
self: false,
|
||||
|
|
|
@ -31,7 +31,7 @@ function draftBib({ part }) {
|
|||
export const bib = {
|
||||
|
||||
name: 'tutorial.bib',
|
||||
draft: draftBib,[],
|
||||
draft: draftBib,
|
||||
from: false,
|
||||
hide: {
|
||||
self: false,
|
||||
|
|
|
@ -3,8 +3,8 @@ title: Avoiding overlap
|
|||
order: 220
|
||||
---
|
||||
|
||||
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
|
||||
While we've only drawn the end of one strap, it's pretty obvious they overlap,
|
||||
which makes it impossible to cut out, so we're going to have to address
|
||||
that.
|
||||
|
||||
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.
|
||||
|
||||
<Example tutorial caption="It is looking pretty wonky now, but we'll deal with that next">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
|
|
@ -22,7 +22,7 @@ is *truthy*.
|
|||
|
||||
To access the setting, we can destructure it:
|
||||
|
||||
```mjs
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
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
|
||||
our snippets:
|
||||
|
||||
```mjs
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
//hightlight-start
|
||||
Snippet,
|
||||
//highlight-end
|
||||
paths,
|
||||
points,
|
||||
// highlight-start
|
||||
snippets,
|
||||
// highlight-end
|
||||
measurements,
|
||||
options,
|
||||
macro,
|
||||
complete,
|
||||
// highlight-start
|
||||
Snippet,
|
||||
snippets,
|
||||
// highlight-end
|
||||
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:
|
||||
|
||||
<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({
|
||||
Path,
|
||||
Point,
|
||||
Snippet,
|
||||
paths,
|
||||
points,
|
||||
snippets,
|
||||
measurements,
|
||||
options,
|
||||
macro,
|
||||
// highlight-start
|
||||
complete,
|
||||
snippets,
|
||||
Snippet,
|
||||
// highlight-end
|
||||
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:
|
||||
|
||||
<Example tutorial caption="A hidden path is not shown">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -68,7 +68,7 @@ Let's add some more points, and then construct the complete path for the neck
|
|||
opening.
|
||||
|
||||
<Example tutorial caption="Our completed neck opening">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
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.
|
||||
|
||||
<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({
|
||||
Path,
|
||||
Point,
|
||||
|
|
|
@ -4,12 +4,52 @@ order: 150
|
|||
---
|
||||
|
||||
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
|
||||
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
|
||||
}
|
||||
```
|
||||
|
|
|
@ -15,7 +15,7 @@ path. As it happens, that is the default behaviour, so we merely have to remove
|
|||
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?">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
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">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
|
|
@ -8,7 +8,7 @@ going to make sure it is. Here's how we'll make sure the neck opening is _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({
|
||||
Path,
|
||||
Point,
|
||||
|
|
|
@ -17,7 +17,7 @@ and approachable code base.
|
|||
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`.
|
||||
|
||||
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
|
||||
function draftBib ({
|
||||
|
|
|
@ -43,7 +43,7 @@ Refer to [the list of macros](/reference/macros/) for more details.
|
|||
</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">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
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.
|
||||
|
||||
<Example tutorial caption="The shape our bib is now completed">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
@ -217,7 +217,6 @@ function draftBib({
|
|||
.close()
|
||||
.addClass("fabric")
|
||||
|
||||
|
||||
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">
|
||||
```js
|
||||
```design/src/bib.mjs
|
||||
function draftBib({
|
||||
Path,
|
||||
Point,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue