freesewing/markdown/dev/howtos/code/extend-pattern/en.md

title	for	about
Create a new design based on an existing design	developers	Shows how to create a variation of a pre-existing design

See this example in our source code

• packages/aaron/config/index.js
• packages/aaron/src/index.js
• packages/carlita/src/index.js

Setup

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
• create your new pattern in a clone of the freesewing monorepo

When using npx create-freesewing-pattern

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

npm install --save @freesewing/brian

This will install Brian as a dependency, which you can then access in your pattern (see examples below on how to do that).
This has to be repeated for every new pattern you create.

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.

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.

• First, clone the monorepo (or your fork of it) to your local machine.
• If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the develop-branch of the git-repository: git checkout -b mycoolnewpattern (adjust name accordingly).
• Go to the root and run yarn kickstart. This will take a while, so grab a coffee and come back later.
• Once that is done, edit the file config/descriptions.yaml to include the name and description of your new pattern (take care to start the description with A FreeSewing pattern).
• Create a folder for your new pattern in packages.
• Run yarn reconfigure. This will read the changes in config/descriptions.yaml and create the needed files in your new folder.
• You can now start the actual pattern design work (i.e. editing and adding src and config files for your pattern.
• For dependencies, configure them in config/dependencies.yaml.
• Run yarn reconfigure again, and the magic will make sure that your package.json is updated accordingly.
• You can set yourself as an author in config/exceptions.yaml, and - you guessed it - run yarn reconfigure again.
• To spin up the development environment, you also need to run npm install (or yarn install) in the example-folder of any pattern you want to work on. (This is because the neccessary node_modules-folder is excluded from the git-repository.)

Now you can work on extending existing patterns into something new and exciting. And the best part about using this method is that making a pull request will be much easier once you're done developing your new pattern.

Examples

The example below is from Aaron, which is based on Brian.

Brian has a part called base that is hidden by default. We will use this part as a dependency, and also hide it.

This is what it looks like in the Aaron config file:

  dependencies: {
    front: 'base',
    back: 'front'
  },
  inject: {
    front: 'base',
    back: 'front'
  },
  hide: ['base'],

And here is the code:

import freesewing from '@freesewing/core'
import Brian from '@freesewing/brian'
import plugins from '@freesewing/plugin-bundle'
import config from '../config'
// Parts
import draftBack from './back'
import draftFront from './front'

// Create design
const Pattern = new freesewing.Design(config, plugins)

// Attach draft methods to prototype
Pattern.prototype.draftBase = function(part) {
  // Getting the base part from Brian
  return new Brian(this.settings).draftBase(part)
}
Pattern.prototype.draftFront = part => draftFront(part)
Pattern.prototype.draftBack = part => draftBack(part)

export default Pattern

If you have a lot of parts to inherit, you can create a loop like in this example from Carlita:

// Attach draft methods from Carlton to prototype
for (let m of [
  'draftBack',
  'draftTail',
  'draftTopSleeve',
  'draftUnderSleeve',
  'draftBelt',
  'draftCollarStand',
  'draftCollar',
  'draftCuffFacing',
  'draftPocket',
  'draftPocketFlap',
  'draftPocketLining',
  'draftChestPocketWelt',
  'draftChestPocketBag',
  'draftInnerPocketWelt',
  'draftInnerPocketBag',
  'draftInnerPocketTab'
]) {
  Pattern.prototype[m] = function(part) {
    return new Carlton(this.settings)[m](part)
  }
}