1
0
Fork 0

chore(markdown): Some updates to the dev docs

This commit is contained in:
joostdecock 2022-08-07 18:37:54 +02:00
parent 6e2a0a33d9
commit 37e452af80
5 changed files with 374 additions and 74 deletions

View file

@ -1,7 +1,5 @@
---
title: Create a new design based on an existing design
for: developers
about: Shows how to create a variation of a pre-existing design
---
<Note>
@ -18,28 +16,43 @@ about: Shows how to create a variation of a pre-existing design
To be able to extend existing patterns, you will have to access them on your local machine. There are two ways to do this:
- add needed dependencies when using `npx create-freesewing-pattern`
- add needed dependencies when using `npx @freesewing/new-design`
- create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing)
### When using `npx create-freesewing-pattern`
### When using `npx @freesewing/new-design`
If you want to use existing patterns when creating your new pattern with `npx create-freesewing-pattern`, you have to install the needed dependencies.\
Let's say you want to extend Brian.\
In your freshly created pattern folder, you now have to run
If you want to use one of our blocks, you can simply pick that option when you run `npx @freesewing/new-design`.
Doing so will set everything up for you, so you won't have to worry about a thing.
If you want to extend an existing design, you'll have to do some work yourself.
#### Start from scratch
First step is to spin up the development environment. Pick *from scratch* when prompted:
```bash
npm install --save @freesewing/brian
npx @freesewing/new-design
```
This will install Brian as a dependency, which you can then access in your pattern (see [examples](/howtos/code/extend-pattern/#examples) below on how to do that).\
This has to be repeated for every new pattern you create.
### Install dependencies
Let's assume you want to extend **Simon**. You will first need to install it as a dependency.
We also need to install **Brian** since Simon is based on Brian:
```bash
npm install --save @freesewing/simon @freesewing/brian
```
This will install both Simon and Brian as a dependency, which you can then access in your pattern.
<Tip>
Some packages need more than one dependency. Carlton, for example, is based on Bent, which in turn is based on Brian. You will have to install all dependencies in the way shown above. If something is still missing, error messages will tell you what you still need to install.
If the design you extend relies on a design you did not install, error messages will tell you what you are missing
</Tip>
### Import your dependencies
<Fixme>Complete this documentation</Fixme>
### Using the freesewing monorepo
You can use the power of robots to install the needed dependencies if you work in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing).

View file

@ -0,0 +1,59 @@
---
title: Part.addCut()
---
A part's `addCut()` method allows designers to specify how the part should be cut.
It can also be used to remove cutting information, as an alternative
to [Part.removeCut()](/reference/api/part/removecut).
## Part.addCut() signature when adding cut information
```js
Part.part.addCut(cut=2, material='fabric', identical=false)
```
In this form, this methiod takes three parameters:
| Parameter | type | description | default |
| --------- | ---- | ----------- | ------- |
| `cut` | integer | The amount of times this part should be cut. | `2` |
| `material` | string | The name of the material, typically one of `fabric`, `lining`, `facing`, `interfacing`, `canvas`, or `various` | `fabric` |
| `identical` | boolean | Whether or not parts should be cut identical (true) or mirrored (false). Mirorred is often referred to as _good sides together_ | `false` |
## Part.addCut() signature when removing cut information
```js
Part.part.addCut(false, material='fabric')
```
In this form, this methiod takes two parameters:
| Parameter | type | description | default |
| --------- | ---- | ----------- | ------- |
| `cut` | `boolean` | Pass `false` to remove the cut info for the material passed as the second parameter | `2` |
| `material` | string | The name of the material, typically one of `fabric`, `lining`, `facing`, `interfacing`, `canvas`, or `various` | `fabric` |
## Part.addCut() example
```js
export default function (part) {
// Cut two from fabric with good sides together
part.addCut(2, 'fabric')
// Cut seven from lining, identical
part.addCut(7, 'lining')
// Remove the lining cut info (but keep the fabric info)
part.addCut(false, 'lining')
// You would do more useful stuff before returning
return part
}
```
<Tip>
The part's grain line and whether it should be cut on fold or not will be
set automatically when you call the [grainline](/reference/api/macros/grainline) or
[cutonfold](/reference/api/macros/cutonfold) macro.
</Tip>

View file

@ -0,0 +1,58 @@
---
title: Part.removeCut()
---
A part's `removeCut()` method allows designers to remove cutting information
that was added through [Part.addCut()](/reference/api/part/addcut).
## Part.addCut() signature when adding cut information
```js
Part.part.addCut(cut=2, material='fabric', identical=false)
```
In this form, this methiod takes three parameters:
| Parameter | type | description | default |
| --------- | ---- | ----------- | ------- |
| `cut` | integer | The amount of times this part should be cut. | `2` |
| `material` | string | The name of the material, typically one of `fabric`, `lining`, `facing`, `interfacing`, `canvas`, or `various` | `fabric` |
| `identical` | boolean | Whether or not parts should be cut identical (true) or mirrored (false). Mirorred is often referred to as _good sides together_ | `false` |
## Part.addCut() signature when removing cut information
```js
Part.part.addCut(false, material='fabric')
```
In this form, this methiod takes two parameters:
| Parameter | type | description | default |
| --------- | ---- | ----------- | ------- |
| `cut` | `boolean` | Pass `false` to remove the cut info for the material passed as the second parameter | `2` |
| `material` | string | The name of the material, typically one of `fabric`, `lining`, `facing`, `interfacing`, `canvas`, or `various` | `fabric` |
## Part.addCut() example
```js
export default function (part) {
// Cut two from fabric with good sides together
part.addCut(2, 'fabric')
// Cut seven from lining, identical
part.addCut(7, 'lining')
// Remove the lining cut info (but keep the fabric info)
part.addCut(false, 'lining')
// You would do more useful stuff before returning
return part
}
```
<Tip>
The part's grain line and whether it should be cut on fold or not will be
set automatically when you call the [grainline](/reference/api/macros/grainline) or
[cutonfold](/reference/api/macros/cutonfold) macro.
</Tip>

View file

@ -0,0 +1,47 @@
---
title: Pattern.getCutList()
---
This method will return the cut list, which means the `cut` property of
all parts that were included in the most recent call to `Pattern.draft()`.
This relies on the pattern designers properly setting the cut property
in each part.
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.getCutList() signature
```js
Object pattern.getCutList()
```
## Pattern.getCutList() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
const cutList = pattern.draft().getCutList()
```
## Cut list format
The object returned by `Pattern.getCutList()` is a plain object
with a property for each part that will be included in the pattern's output.
The value of these properties is the `cut` property of the part in question.
<Tip>
Refer to [part.addCut()](/reference/api/part/addcut) for details on the
format of a part's `cut` property
</Tip>

View file

@ -1,55 +1,90 @@
---
title: Getting started on Windows
order: 30
for: developers
icons:
- start
- windows
about: |
You'll learn how to setup Node JS on a Windows system,
as well as initialize the FreeSewing development environment.
goals:
- Install Node JS using nvm
- Chosing a Node version to use
- Initializing the FreeSewing development environment
- Starting the FreeSewing development environment
---
<Comment by='joost'>
### Windows support is community-only
As FreeSewing maintainer, I provide support for FreeSewing developers on Linux,
Mac, and BSD-based operating systems.
I do not provide support for Microsoft Windows. Windows support and
documentation is provioded by the community, if at all.
</Comment>
## Setting up a development environment using Windows Subsystem for Linux (WSL) and Visual Studio Code (VSCode)
If you already have a working WSL environment and VSCode Remote configured you can follow the [getting started on Linux guide](/tutorials/getting-started-linux) or skip ahead to [Setting up the FreeSewing development environment (WSL)](#setting-up-the-freesewing-development-environment-wsl). If not, the following process is very similar but has some differences to avoid quirks specific to this environment.
If you already have a working WSL environment and VSCode Remote configured you
can follow the [getting started on Linux
guide](/tutorials/getting-started-linux) or skip ahead to [Setting up the
FreeSewing development environment
(WSL)](#setting-up-the-freesewing-development-environment-wsl). If not, the
following process is very similar but has some differences to avoid quirks
specific to this environment.
Windows Subsystem for Linux allows you to run a Linux distribution as a development environment, with enough functionality to develop a FreeSewing pattern. While this approach offers some advantages this is not strictly necessary to develop patterns on Windows. If you would prefer a simpler setup process refer to [Setting up a development environment in Windows](#setting-up-a-development-environment-in-windows).
Windows Subsystem for Linux allows you to run a Linux distribution as a
development environment, with enough functionality to develop a FreeSewing
pattern. While this approach offers some advantages this is not strictly
necessary to develop patterns on Windows. If you would prefer a simpler setup
process refer to [Setting up a development environment in
Windows](#setting-up-a-development-environment-in-windows).
Installing and using an IDE is optional, you can skip that step or use a different editor if you'd like. This guide suggests VSCode as it is freely available on multiple platforms and provides enough functionality to build the FreeSewing project.
Installing and using an IDE is optional, you can skip that step or use a
different editor if you'd like. This guide suggests VSCode as it is freely
available on multiple platforms and provides enough functionality to build the
FreeSewing project.
### Install WSL
<Warning>
This guide uses WSL version 2, which requires installing the Hyper-V virtualisation system. If you have another virtualisation system installed (such as VirtualBox or VMWare) you may run into conflicts which require either updating that system to a version which can use the HyperV backend or porting your existing machines to use HyperV.
</Warning>
<Warning> This guide uses WSL version 2, which requires installing the Hyper-V
virtualisation system. If you have another virtualisation system installed (such
as VirtualBox or VMWare) you may run into conflicts which require either
updating that system to a version which can use the HyperV backend or porting
your existing machines to use HyperV. </Warning>
Follow the [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-gb/windows/wsl/install-win10) (requires a recent version of Windows 10).
Follow the [Windows Subsystem for Linux Installation Guide for Windows
10](https://docs.microsoft.com/en-gb/windows/wsl/install-win10) (requires a
recent version of Windows 10).
#### Install NVM
Open a new WSL terminal from the shortcuts created or by searching for "WSL Terminal" in the start menu.
[Install NVM by following the NVM setup guide](https://github.com/nvm-sh/nvm#install--update-script).
Once installed you will need to activate NVM by either following the instructions printed to the screen or opening a new terminal.
Open a new WSL terminal from the shortcuts created or by searching for "WSL
Terminal" in the start menu. [Install NVM by following the NVM setup
guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
you will need to activate NVM by either following the instructions printed to
the screen or opening a new terminal.
#### Install Node (and optionally Yarn)
Now that you have NVM installed, you can install node. The latest version can be installed using `nvm install default`. You can also install a specific version using `nvm install v12.16.1`. For the purposes of debugging it can be useful to have the same version of node installed as the main project uses, which you can then activate using `nvm use <version>`. You can determine what version the FreeSewing project uses by checking [freesewing/freesewing/.node-version](https://github.com/freesewing/freesewing/blob/develop/.node-version).
Now that you have NVM installed, you can install node. The latest version can be
installed using `nvm install default`. You can also install a specific version
using `nvm install v12.16.1`. For the purposes of debugging it can be useful to
have the same version of node installed as the main project uses, which you can
then activate using `nvm use <version>`. You can determine what version the
FreeSewing project uses by checking
[freesewing/freesewing/.node-version](https://github.com/freesewing/freesewing/blob/develop/.node-version).
<Warning>
At the time this guide was written the latest version of node/npm has a bug in the dependency resolution process which causes the freesewing project to fail to build. Use the latest LTS version (currently 14.15.4) or the specific version used by the main project to avoid this issue.
</Warning>
<Warning> At the time this guide was written the latest version of node/npm has
a bug in the dependency resolution process which causes the freesewing project
to fail to build. Use the latest LTS version (currently 14.15.4) or the specific
version used by the main project to avoid this issue. </Warning>
Node comes with the Node Package Manager (npm) by default which can be used to set up the project. The default package manager uses a fairly simplistic aproach to dependency resolution which can make builds take a long time. Yarn is an alternative package manager which makes builds faster, especially for monolithic projects like FreeSewing. If you'd like to install yarn run `npm install yarn -g` (optional).
Node comes with the Node Package Manager (npm) by default which can be used to
set up the project. The default package manager uses a fairly simplistic aproach
to dependency resolution which can make builds take a long time. Yarn is an
alternative package manager which makes builds faster, especially for monolithic
projects like FreeSewing. If you'd like to install yarn run `npm install yarn
-g` (optional).
#### Install and configure Git (recommended)
The create-freesewing-pattern script will attempt to create a git repository as part of the setup. It's not strictly required to have git installed in the WSL environment but you will get errors during the project setup process if it isn't installed or configured correctly. As such it's recommended to have git installed on the WSL environment even if you're going to be using a GUI client from the windows side.
The create-freesewing-pattern script will attempt to create a git repository as
part of the setup. It's not strictly required to have git installed in the WSL
environment but you will get errors during the project setup process if it isn't
installed or configured correctly. As such it's recommended to have git
installed on the WSL environment even if you're going to be using a GUI client
from the windows side.
```bash
sudo apt install git
@ -63,76 +98,164 @@ git config --global user.name "<your display name for your git account>"
<Note>
FreeSewing uses .editorconfig files to enforce a consistent style for the project. VSCode relies on extensions to provide this functionality and due to a design shortcoming it does not respect certain editorconfig options which will break certain files in the freesewing project ([see vscode/65663 for details](https://github.com/microsoft/vscode/issues/65663)). If you use this editor please ensure that your settings.json file is configured to not trim trailing whitespace from markdown files. The following snippet can be added to your settings.json file to add an exemption for this file type:
FreeSewing uses .editorconfig files to enforce a consistent style for the
project. VSCode relies on extensions to provide this functionality and due to a
design shortcoming it does not respect certain editorconfig options which will
break certain files in the freesewing project ([see vscode/65663 for
details](https://github.com/microsoft/vscode/issues/65663)). If you use this
editor please ensure that your settings.json file is configured to not trim
trailing whitespace from markdown files. The following snippet can be added to
your settings.json file to add an exemption for this file type:
```json
"[markdown]": {
"files.trimTrailingWhitespace": false
},
"[markdown]": { "files.trimTrailingWhitespace": false },
```
</Note>
#### Install VSCode Remote
In order to be able to use VSCode's IDE features (such as the built in terminal) and also make use of the node installation we set up in the previous steps you will need to install VSCode Remote so that VSCode can make use of the linux environment. [Follow the getting started guide for VSCode Remote](https://code.visualstudio.com/docs/remote/wsl) (If you've been following this guide you have already done steps 1 and 2, you will only need to install the [remote development extension](https://aka.ms/vscode-remote/download/extension))
In order to be able to use VSCode's IDE features (such as the built in terminal)
and also make use of the node installation we set up in the previous steps you
will need to install VSCode Remote so that VSCode can make use of the linux
environment. [Follow the getting started guide for VSCode
Remote](https://code.visualstudio.com/docs/remote/wsl) (If you've been following
this guide you have already done steps 1 and 2, you will only need to install
the [remote development
extension](https://aka.ms/vscode-remote/download/extension))
### Setting up the FreeSewing development environment (WSL)
If you've chosen to use VSCode as your IDE open VSCode, and inside VSCode open the folder you wish to contain the pattern (e.g. `documents/my-freesewing-patterns`). Ensure VSCode Remote is active then open a terminal (this will automatically set your working directory to the folder open in VSCode) and run `npx create-freesewing-pattern`. If you are using a different IDE or just wish to use a bare terminal then you will need to navigate to the folder and run the same command.
<Warning>
This documentation dates back to the legacy way of setting up our
development environment.
This script will prompt you for certain options. Only "Pattern name" is mandatory, the other prompts are optional and/or suggest sensible defaults. You can change all of these later. It's just to get you started. If you're not sure what to fill in you can stick with the defaults or leave them blank.
Once you have NodeJS up and running, I recommend switching to the
[Mac](getting-started-mac/dev-setup) or
[Linux](/tutorials/getting-started-linux/dev-setup) guide.
</Warning>
If you've chosen to use VSCode as your IDE open VSCode, and inside VSCode open
the folder you wish to contain the pattern (e.g.
`documents/my-freesewing-patterns`). Ensure VSCode Remote is active then open a
terminal (this will automatically set your working directory to the folder open
in VSCode) and run `npx create-freesewing-pattern`. If you are using a different
IDE or just wish to use a bare terminal then you will need to navigate to the
folder and run the same command.
This script will prompt you for certain options. Only "Pattern name" is
mandatory, the other prompts are optional and/or suggest sensible defaults. You
can change all of these later. It's just to get you started. If you're not sure
what to fill in you can stick with the defaults or leave them blank.
- **Language**: Use the arrow keys to chose the language of your choice
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
- **Pattern name**: This will be the name of your pattern, but also the name of
the folder we'll setup for you. If you're just kicking the tires, something
like `test` will do you fine.
- **description**: A description of your pattern. It's not mandatory.
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
- **department**: Use the arrow keys to pick a department like `menswear`, `womenswear` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`.
Choose `pattern` if you're not sure what to pick.
- **department**: Use the arrow keys to pick a department like `menswear`,
`womenswear` or `accessories`. This is is only relevant if you decide to
publish your pattern later. But by that time you will have learned how to
change this.
- **Author**: You can enter your name, or leave this blank for now.
- **GitHub repository**: You can leave this blank for now.
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If
you're not sure, pick `npm`.
### Start the development environment (WSL)
After this process completes you will be ready to run the development environment.
After this process completes you will be ready to run the development
environment.
Navigate to the `example` folder and run `npm start`/`yarn start` to launch the development environment.
Navigate to the `example` folder and run `npm start`/`yarn start` to launch the
development environment.
<Note>
Your browser will not automatically open if you are running the freesewing example application inside the WSL environment. You will need to navigate to the URL shown in your browser manually (your terminal may let you click on the link to open it).
Your browser will not automatically open if you are running the
freesewing example application inside the WSL environment. You will need to
navigate to the URL shown in your browser manually (your terminal may let you
click on the link to open it).
</Note>
## Setting up a development environment in Windows.
### Install NVM
While node can be installed directly on Windows, we strongly recommend using a version manager such as [Node Version Manager for Windows](https://github.com/coreybutler/nvm-windows/releases/latest). That link will take you to the latest release which provides an installer you can download and run. Once nvm-windows is installed you will be able to continue with the rest of this process.
While node can be installed directly on Windows, we strongly recommend using a
version manager such as [Node Version Manager for
Windows](https://github.com/coreybutler/nvm-windows/releases/latest). That link
will take you to the latest release which provides an installer you can download
and run. Once nvm-windows is installed you will be able to continue with the
rest of this process.
### Install node
Open a Powershell terminal or command prompt. Run `nvm ls available` to show versions that can be installed. Choose the appropriate version (you should use the same version as the freesewing project or latest LTS version) then run `nvm install 14.15.4` and `nvm use 14.15.4` (where `14.15.4` is the full version string of the version you wish to use) to activate the newly installed version. You will receive a prompt for elevated permissions and will need to accept it in order to activate the new version of node.
Open a Powershell terminal or command prompt. Run `nvm ls available` to show
versions that can be installed. Choose the appropriate version (you should use
the same version as the freesewing project or latest LTS version) then run `nvm
install 14.15.4` and `nvm use 14.15.4` (where `14.15.4` is the full version
string of the version you wish to use) to activate the newly installed version.
You will receive a prompt for elevated permissions and will need to accept it in
order to activate the new version of node.
<Warning>
At the time this guide was written the latest version of node/npm has a bug in the dependency resolution process which causes the freesewing project to fail to build. Use the latest LTS version (currently 14.15.4) or the specific version used by the main project to avoid this issue.
At the time this guide was written the latest version of node/npm has
a bug in the dependency resolution process which causes the freesewing project
to fail to build. Use the latest LTS version (currently 14.15.4) or the specific
version used by the main project to avoid this issue.
</Warning>
Node comes with the Node Package Manager (npm) by default which can be used to set up the project. The default package manager uses a fairly simplistic aproach to dependency resolution which can make builds take a long time. Yarn is an alternative package manager which makes builds faster, especially for monolithic projects like FreeSewing. If you'd like to install yarn run (`npm install yarn -g`) (optional).
Node comes with the Node Package Manager (npm) by default which can be used to
set up the project. The default package manager uses a fairly simplistic aproach
to dependency resolution which can make builds take a long time. Yarn is an
alternative package manager which makes builds faster, especially for monolithic
projects like FreeSewing. If you'd like to install yarn run (`npm install yarn
-g`) (optional).
### Setting up the FreeSewing development environment
Open a terminal, then navigate to the folder you wish to contain the pattern (e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx create-freesewing-pattern`.
<Warning>
This documentation dates back to the legacy way of setting up our
development environment.
This script will prompt you for certain options. Only "Pattern name" is mandatory, the other prompts are optional and/or suggest sensible defaults. You can change all of these later. It's just to get you started. If you're not sure what to fill in you can stick with the defaults or leave them blank.
Once you have NodeJS up and running, I recommend switching to the
[Mac](getting-started-mac/dev-setup) or
[Linux](/tutorials/getting-started-linux/dev-setup) guide.
</Warning>
Open a terminal, then navigate to the folder you wish to contain the pattern
(e.g. `D:\Documents\my-freesewing-patterns`). Inside this directory run `npx
create-freesewing-pattern`.
This script will prompt you for certain options. Only "Pattern name" is
mandatory, the other prompts are optional and/or suggest sensible defaults. You
can change all of these later. It's just to get you started. If you're not sure
what to fill in you can stick with the defaults or leave them blank.
- **Language**: Use the arrow keys to chose the language of your choice
- **Pattern name**: This will be the name of your pattern, but also the name of the folder we'll setup for you. If you're just kicking the tires, something like `test` will do you fine.
- **Pattern name**: This will be the name of your pattern, but also the name of
the folder we'll setup for you. If you're just kicking the tires, something
like `test` will do you fine.
- **description**: A description of your pattern. It's not mandatory.
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`. Choose `pattern` if you're not sure what to pick.
- **department**: Use the arrow keys to pick a department like `tops`, `bottoms` or `accessories`. This is is only relevant if you decide to publish your pattern later. But by that time you will have learned how to change this.
- **Pattern type**: Use the arrow keys to chose either `block` or `pattern`.
Choose `pattern` if you're not sure what to pick.
- **department**: Use the arrow keys to pick a department like `tops`, `bottoms`
or `accessories`. This is is only relevant if you decide to publish your
pattern later. But by that time you will have learned how to change this.
- **Author**: You can enter your name, or leave this blank for now.
- **GitHub repository**: You can leave this blank for now.
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If you're not sure, pick `npm`.
- **Package manager**: Choose either `npm` or `yarn` as your package manager. If
you're not sure, pick `npm`.
### Start the development environment
After this process completes you will be ready to run the development environment. In the current terminal (or a new window if you prefer) you will need to build the package. Navigate to the folder you created during the previous step (whatever you provided for the "Pattern name" option) and then to the `example` folder inside this folder, then run `npm start` or `yarn start` depending on the build system you chose. This will build the pattern package which is used by the development instance, build the example application, and start a local web server instance so you can test your changes.
After this process completes you will be ready to run the development
environment. In the current terminal (or a new window if you prefer) you will
need to build the package. Navigate to the folder you created during the
previous step (whatever you provided for the "Pattern name" option) and then to
the `example` folder inside this folder, then run `npm start` or `yarn start`
depending on the build system you chose. This will build the pattern package
which is used by the development instance, build the example application, and
start a local web server instance so you can test your changes.