Saving graphics

We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase. We will also extend the editor functionality.

Saving graphics#

We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase.

Update Firebase Reframe components#

Saving a graphic via details page is technically an update event, since the graphic node already exists in Firebase. Updating a Firebase object includes making a call to the update method with a node and keys to edit. Our graphic currently has two keys: name and created-at.

update function overwrites or creates new key-value pairs, ie if we pass name to the update function, the existing name will be overwritten. But if we pass a non-existent field like fabric-json, a new key-value pair will be created.

Event handler#

We have so far dispatched an event before writing a handler. But we'll create the handler first in this case, because we don't have a UI yet:

update handler is similar to the delete handler. We set the loading indicator and request to call the :firebase/delete effect. The :on-success and :on-error events are dispatched in response to the SDK call. Notice how we pass the graphic-id and new-graphic map as the :on-success handler. This is required to update the app-db when the Firebase update call is successful.

In the on-success handler, we take the freshly-saved graphic and update the value of fabric-json in app-db. This is passed to the editor component as init-state.

Effect handler#

The :firebase/update effect handler calls update on the given node and dispatches on-success and on-error events respectively:

Loading subscription#

We need the ::updating-graphic? flag to show a loading indicator:

Connect editor to Reframe state#

The editor component has two dependencies on the Reframe state: 1. it needs to save the current graphic to Firebase 2. it needs to render the already saved graphic to Canvas

To tackle this, we need to update the app.pages.graphics.detail/page component and make this data available to the editor:

We made two changes to the page component. We added a subscription to updating-graphic? and passed in three extra props:

  • update flag

  • function to save the graphic (dispatches the :a.d.f/update-graphic event)

  • initial state of the graphic canvas. Notice the :fabric-json key - we don't have it yet, but we'll store the JSON representation of the canvas under this key.

We have passed all the required props to the editor. Let's now modify it with the ability to save data.

Saving Fabric canvas to Firebase#

fabric.Canvas ships with a toJSON method. This method converts the canvas into a JS object which can be saved in a database and used to re-create the canvas later. We'll create a toolbar component to house the save button. We'll also add the functionality to save the canvas as svg or png:

 

This page is a preview of Tinycanva: Clojure for React Developers

No discussions yet