Multi-page with Fabric

[tt2166]

Hi there,
I'm trying to build a app that needs to support multi-page, something like PowerPoint/Keynote. Fabric is a single page, just wondering if anyone successfully found a way to implement multi-page? Love to hear a recommendations on approach. I'm building on with Next JS. Thanks :)

[DocAmz]

Implementing multiple pages support

Introduction

I will walk you through the steps to implement multiple pages support.
This Method is based on my experience and may not be the best solution for your project. You can adapt it to your needs.

Stacks to implement multiple pages support :

• Next.js
• React
• TypeScript
• State management Mobx & mobx-react but you can use Redux or any other state management library

Prerequisites

Before you begin, ensure you have the following:

• A working development environment with NextJS fabricJS 6+ installed

Steps

1. Define a save file format

I chose to work with JSON files, but you can choose any format that suits your needs.
You will need to save and restore the objects your own way. It means you will need to save the objects' properties and restore them when loading the file.

Document will be our main array, and it will contain the pages.

type PageRecord = {
  objects: FabricObject[];
  ...otherProperties
};

2. Document & Page instances

Document instance will be responsible for managing the gobal state of the document, and Page instance will be responsible for managing the state of the current instanciated page.

example of Document instance (using MobX):

class DocumentInstance {
  public Document: PageRecord[] = [];

  constructor() {
    makeAutoObservable(this); // mobx
  }

  setDocument(document: PageRecord[]) {
    this.Document = document;
  }

  getDocument() {
    return toJS(this.Document); // toJS is a mobx function to convert the observable object to a plain object
  }

  setDocumentPage(pageIndex: number, page: PageRecord) {
    this.Document[pageIndex] = page;
  }

  getDocumentPage(pageIndex: number) {
    return toJS(this.Document[pageIndex]);
  }
}

export default new DocumentInstance();

example of Page instance (using MobX):

class PageInstance {
  page: PageRecord | null = null;
  pageIndex: number = 0;

  constructor() {
    makeAutoObservable(this); // mobx
  }

  setPage(page: PageRecord) {
    this.page = page;
  }

  setPageIndex(pageIndex: number) {
    this.pageIndex = pageIndex;
  }

  getPage(): PageRecord {
    return toJS(this.page); // toJS is a mobx function to convert the observable object to a plain object
  }

  getPageIndex(): number {
    return this.pageIndex;
  }
}

export default new PageInstance();

3. Update the pages & document instances

Update the page instance with the document instance to be able to switch between pages.

class PageInstance {
  page: PageRecord | null = null;
  pageIndex: number = 0;

  constructor() {
    makeAutoObservable(this); // mobx
  }

  // ... previous methods

  /**
   * Update the DOCUMENT instance with the page instance
   * [DOCUMENT] <- [PAGE]
   * @returns void
   */
  updatePageInstance(): void {
    this.page = documentInstance.getDocumentPage(this.pageIndex);
  }

    /**
   * Update the page instance with the DOCUMENT instance
   * [PAGE] <- [DOCUMENT]
   * @returns void
   */
  updateDocumentInstance(): void {s
    documentInstance.setDocumentPage(this.pageIndex, this.page);
  }

}

4. Save the canvas state to the page instance

You will need to save the canvas state to the page instance when switching between pages.
Im using a SaveService to save the canvas state to the page instance.

class SaveService {

  private canvas: fabric.Canvas
  private page:   PageRecord

  constructor() {
    this.canvas = EditorStore.canvas // fabric canvas instance
    this.page   = PageInstance.getPage()
  }

  async saveCanvasState(): Promise<void> {
    let canvasToPage = this.canvas.toObject(propertiesToInclude)
    if(canvasToPage.length === 0) return
    this.page.objects = canvasToPage

    try {
      await this.savePage()
    } catch (error) {
      console.error(error)
    }
  }

  private async savePage(): Promise<void> {
    try {
      await new Promise( (resolve, reject) => {
        try {
          // update the page instance with the new page object
          PageInstance.setPage(this.page)
          resolve('page instance updated')
        } catch (error) {
          reject(error)
        }
      })
    } catch (error) {
      console.error('error while updating page instance', error)
    }
    try {
      await new Promise( (resolve, reject) => {
        try {
          // update the document instance with the new page instance
          PageInstance.updateDocumentInstance()
          resolve('model instance updated')
        } catch (error) {
          reject(error)
        }
      })
    } catch (error) {
      console.error('error while updating model instance', error)
    }
  }
}

you will need to call saveCanvasState() each time you want to perform save the canvas state into the Document.

5. Display and switch between pages

You will need to display the pages and switch between them.

1 - Map trough the document instance to display the pages

We will use observer from mobx-react to observe the changes in the document instance.

const Pages = observer(() => {
  const document = documentInstance.getDocument()

  return (
    <div>
      {document.map((page, index) => (
        <Page key={index} page={page} pageIndex={index} onPageSelect={handleChangePage} />
      ))}
    </div>
  )
})

2 - Change the page instance when switching between pages

  const handleChangePage = (pageIndex: number) => {
    const saveService = new SaveService()
    const renderService = new RenderService() // service to render the canvas

    saveService.saveCanvasState() // save the current canvas state to the current page instance

    PageInstance.updateDocumentInstance() // update the document instance with the current page instance

    PageInstance.setPageIndex(pageIndex) // set the new page index

    PageInstance.updatePageInstance() // update the page instance with the new page instance

    renderService.render() // render the new page instance
  }

6. Render the canvas

You will need to render the canvas when switching between pages.

class RenderService {

  private canvas: fabric.Canvas
  private page:   PageRecord
  private pageIndex: number

  constructor() {
    this.canvas = EditorStore.canvas // fabric canvas instance
    this.page   = PageInstance.getPage()
    this.pageIndex = PageInstance.getPageIndex()
  }

  async render(): Promise<void> {
    this.canvas.clear()
    this.renderWorkspace()
    try {
      await this.renderPageObjects(this.page)
    } catch (error) {
      console.error(error)
    }
    this.canvas.renderAll()
  }

  private renderWorkspace(): void {
    // build my worspace (not the subject of this example)
  }

  private async renderPageObjects(page: PageRecord): Promise<void> {
    const renderedObjectIds = new Set<string>()
    const objectBuilder = new ObjectBuilder() // not the subject of this example

    for (const obj of page.objects) {
      if (renderedObjectIds.has(obj.id)) {
        continue
      }
      try {
        await objectBuilder.makeObject(obj) // build the object from JSON
        renderedObjectIds.add(obj.id)
      } catch (error) {
        console.error(error)
      }
    }
  }
}

7. Initialize the document instance

You will need to initialize the document instance when the application starts.
there will be 2 cases:

1. When the application starts for the first time (No document saved)
2. When the application starts with a saved document

const createDocument = (nb_pages: number) => {
  const pageBuilder = new PageBuilder() // not the subject of this example

  let document = []
  let page: Partial<PageRecord> = {} // build the first page

  for (let i = 0; i < nb_page; i++) {
    page = pageBuilder.buildPage()
    document.push(page as PageRecord)
  }

  return document
}

const loadDocument = (document: PageRecord[], index) => {

    documentInstance.setModel([]) // initialize the document instance

    documentInstance.setModel(document) // set the document instance with the new document

    PageInstance.setPageIndex(index) // set the page index
    PageInstance.setPageInstance(document[index]) // set the page instance
    PageInstance.updatePageInstance() // update the page instance with the new page instance
}

Conclusion

By following these steps, you can successfully implement multiple pages support in your project. You can adapt this method to your needs and use any state management library you prefer. I hope this guide was helpful to you.

Say me if you have any questions or suggestions.
Have a nice day!

[tt2166]

Amazing, big thank you sir! I will give this a go. ❤️

[tt2166]

@DocAmz This worked beautifully! Can't thank you enough.

[DocAmz]

@tt2166 Have fun on your project 😎