How To Save And Load

In order to explain how to save an load your designs within your application, we go through examples with:

• simple component based on the default template's.
• multi-version component that includes new changes in its API.

Simple Component

To explain how and where to add the needed functions (check here), we take start from a simple component with some properties . Then we would add the two mentioned functions, and we would have something like the following:

class MyComponent {
  private properties: {
    length: number
    width: number
  }

  constructor({ width = 100, length = 200 } = {}) {
    this.properties = { width, length }
  }

  generateApiStruct () {
    const apiStructToSave = {
      properties: this.properties,
    }
    return apiStructToSave
  }

  static fromApiStruct (apiStructSaved) {
    const { width, length } = apiStructSaved.properties
    const newComponent = new MyComponent({ width, length })
    return newComponent
  }

  configure() { ... }
  update() { }
  getProperty ()) { ... }
  setProperties () { ... }
  getSketch() { ... }
  getModel() { ... }
  }
}

Multi-Version Component

Now, imagine that the shape of the component model changes according to a new parameter shapeType, so it can be square or circle . But what happens when we try to load an old project with an outdated component from the database that didn't have that parameter shapeType. For this, we need to handle the version of the information we send/get from the database. So the up-to-date component would look like this:

class MyComponent {
  private properties: {
    length: number
    width: number
  }
  private shapeType: string

  constructor(shapeType, { width = 100, length = 200 } = {}) {
    this.properties = { width, length }
    this.shapeType = 'square'
  }

  generateApiStruct () {
    const apiStructToSave = {
      version: 2,
      properties: this.properties,
      shapeType: this.shapeType
    }
    return apiStructToSave
  }

  static fromApiStruct (apiStructSaved) {
    const newApiStruct = apiStructSaved
    if (apiStructSaved.version === undefined || apiStructSaved.version < 2) { 
      newApiStruct.shapeType = 'square'
      newApiStruct.version = 2
    }

    const { width, length } = newApiStruct.properties
    const shapeType = newApiStruct.shapeType
    const newComponent = new MyComponent(shapeType, { width, length })
    return newComponent
  }

  configure() { ... }
  update() { }
  getProperty ()) { ... }
  setProperties () { ... }
  getSketch() { ... }
  getModel() { ... }
  }
}

Notice that upgrading the version of your component keeps track of the new changes in the component and it is very easy to know what happened in previous versions.

Updating the component with a new version becomes easier then. For this, we would just need to:

• increase the version number in generateApiStruct() , from 2 to 3 .
• add a new if statement in fromApiStruct() as if (apiStructSaved.version < 3) { /* do something */ }