Storage Extension

Storing GoJS model data in cloud storage is an excellent way to save, load, create, and delete diagram data files without worrying about local system concerns. Interfacing with popular cloud storage services is made easy with the GoCloudStorage library.

The GoCloudStorage library is not pre-packaged with GoJS. You can find the GoCloudStorage library here.

The GoCloudStorage class system lets developers easily store their GoJS diagram model data to popular cloud storage services. The GoCloudStorage class itself is an abstract class, never to be instantiated. Instead, its subclasses are used, each interfacing with a different cloud storage service. Currently, the GoCloudStorage system supports Dropbox, Google Drive, Microsoft OneDrive, and Local Storage. Class names are:

GoCloudStorage Subclass Construction

This section provides a description of how to create an instance of a specific GoCloudStorage subclass, GoGoogleDrive. Due to the variable nature of cloud storage service APIs, GoCloudStorage subclass constructor parameters and behavior vary. It is recommended you read the full documentation for any GoCloudStorage subclass you wish to use.

First, ensure you have a script tag with the path to your gcs.js library. All GoCloudStorage subclasses are defined in the namespace gcs.

Note: To use any GoCloudStorage subclass (except for GoLocalStorage), you must also include a script tag referencing the storage service provider JS library. For each subclass, these could be something like:

Here is a valid constructor call for GoGoogleDrive. 


  // Create a valid GoGoogleDrive instance
  var ggd = new gcs.GoGoogleDrive(
    diagrams, // managedDiagrams parameter
    "16225356139-n64vtg7konuetna3of3mfcaj2iffhgmg.apps.googleusercontent.com", // clientId parameter
    "AIzaSydBje3lBL67MMVKw467_pvuRg7_XMVGf18", // pickerApiKey parameter
    defaultModel, // defaultModel parameter
    "../projects/storage/goCloudStorageIcons/" // iconsRelativeDirectory parameter
    );

Note: All client ID's / API keys on this page are fabricated, and for example purposes only.

What are all these parameters? We'll step through them, one by one.

Managed Diagrams

The first parameter passed to the GoGoogleDrive constructor is something called diagrams. This is the parameter known to all GoCloudStorage subclasses as managedDiagrams. It is either an Array of GoJS Diagrams or a single GoJS Diagram that this instance of GoCloudStorage (in this case, GoGoogleDrive) will manage data storage for. This parameter is required.

Client ID

The second parameter passed to the GoGoogleDrive constructor is a long string. This is the clientId parameter, required by all GoCloudStorage subclasses (except GoLocalStorage). This ID tells the cloud storage provider (in this case, Google) and the user what application is asking to manipulate stored file data (in this case, Google Drive file data).

This is usually given by the cloud storage provider's developer console or similar. You will need to register an application with the storage provider (in this case, Google) to obtain this ID. Read more below at Obtaining Client IDs.

Google Picker API Key

This is a GoGoogleDrive-specific parameter. Some GoCloudStorage subclasses require parameters that others do not. Again, it is recommended you read the full documentation for any GoCloudStorage subclass you wish to use.

GoGoogleDrive requires this key to allow for the familiar, Google Drive file picker interface during graphical file manipulation. Read more about this special parameter in the full GoGoogleDrive.pickerApiKey documentation.

Default Model

It is the default model data assigned to newly created diagrams with calls to create. Generally, this value is obtained with a call to Diagram.model.toJson().

This is an optional parameter for all GoCloudStorage subclasses. If no value is supplied during construction, this defaults to a new GraphLinksModel.

Icons Relative Directory

To use commands that call a GoCloudStorage subclass' custom ui, you must specify the directory in which the icons for storage services reside, relative to the directory your application page is. This is provided by the optional iconsRelativeDirectory parameter. The default value is "../goCloudStorageIcons/".

Exactly what the UI looks like varies between GoCloudStorage subclasses, though it certainly contains references to storage service icons. Without providing this parameter, it's likely the space where these images go will appear blank.

Please refer to the full documentation for details on class-specific UIs.

Obtaining Client IDs

All GoCloudStorage subclasses (except GoLocalStorage) require a client ID as a parameter during construction. This lets the storage service provider (i.e. Google, Dropbox...) and the user know the identity of the application trying to manipulate their remote filesystems. Therefore, obtaining a client ID for the storage service you wish to use is a requirement to using the corresponding GoCloudStorage subclass.

The process for this varies from service to service, though the general steps are the same.

  1. Register an account

    2. If you do not already have an account with the storage service provider, make one.

  2. Register a web application

    3. This step varies most from service to service. Create and register an application with the storage service provider.

  3. Locate your new application's Client ID

    4. Your newly registered application has a Client ID -- a long string like the one we saw in GoCloudStorage Subclass Construction. Use this string as the clientId parameter for your instance of GoCloudStorage.

These storage-specific pages can help walk you through the process of creating / registering an application with their service.

Saving / Loading Data

Now that you have a working instance of a GoCloudStorage subclass, let's start saving and loading GoJS Diagram model data. We will continue with our GoGoogleDrive example from GoCloudStorage Subclass Construction, referring to our specific GoGoogleDrive instance as ggd.

We can save the model data of ggd.managedDiagrams to Google Drive in a variety of ways.

Save vs. Save With UI

All GoCloudStorage subclasses have the functions save() and saveWithUI(). What's the difference?

saveWithUI() shows the ui element of the invoking instance of GoCloudStorage, letting the user graphically specify a file name and/or save location.

save() is more nuanced. There are three cases. Let's return to our GoGoogleDrive example and explore them.

  1. Saving With a Specified Path

    2. A call to ggd.save(<valid path string>) will save to that specific path in Google Drive, without showing any UI.

    Note: What constitutes a valid path string parameter varies from service to service. See documentation for more details.

  2. Saving With a Valid Current Diagram File

    3. If no path is supplied, but ggd has a valid currentDiagramFile (a representation of the file from Google Drive ggd has currently open, and whose contents are loaded in ggd.managedDiagrams' models), then the diagram file content at the path in Google Drive corresponding to ggd.currentDiagramFile.path is updated with the model contents of ggd.managedDiagrams.

  3. Saving With Neither

    4. If no path is supplied and ggd.currentDiagramFile is not valid, ggd.saveWithUI() is called, prompting the user for a save name / location.

Loading

Loading file data is more straightforward.

load(<valid path string>) loads file contents from the cloud storage service and into each of managedDiagrams' models. No UI appears.
Example: ggd.load('ahjdhe^3n4dlKd4r')

loadWithUI() displays the ui and lets the user graphically choose which file to load.
Example: ggd.loadWithUI()

Note 1: The file being loaded must have been saved to storage from a page with GoJS Diagrams whose DIV IDs correspond with the DIV IDs of managedDiagrams. Otherwise, it will not be clear to the GoCloudStorage subclass where to load model data to.
Note 2: Model data loaded into managedDiagrams from storage must be processed appropriately within the application containing the invoking instance of GoCloudStorage (via node / link templates or some other method). The GoCloudStorage class system does not store any information other than model data.

Creating / Removing Data

Creating Files

Continuing with our GoGoogleDrive example, how would you create a new file in storage to save ggd.managedDiagrams to? Call the create function.

create() sets each of ggd.managedDiagrams to ggd.defaultModel (assigned at construction, back in GoCloudStorage Subclass Construction). If ggd.isAutoSaving is true, you will be prompted to save your newly refreshed managedDiagrams to Google Drive via an automatic call to saveWithUI().

Optionally, the create function can accept a path parameter, just as the save() and load() functions described in Saving / Loading Data. If supplied, once each of ggd.managedDiagrams is reset to defaultModel, their model data is saved to the given path in Google Drive, and no UI appears.

Removing Files

To remove a file from Google Drive, simply call ggd.remove(<some valid path string>). The file at the given path in Google Drive will be removed, without showing any UI.

To remove a file from Google Drive with the ui element, call ggd.removeWithUI().

Go Cloud Storage Manager

What if you wanted to be able to save / load the diagrams on your page to / from many different cloud storage services? Say, Google Drive and Microsoft OneDrive? Or Microsoft OneDrive, Dropbox, and Google Drive? Or any combination of the currently supported GoCloudStorage subclasses? That's what the Go Cloud Storage Manager is for.

Constructing the GoCloudStorageManager

Observe the standard GoCloudStorageManager construction process: 


        // Construct the CloudStorage subclasses you wish to manage
        gls = new gcs.GoLocalStorage(myDiagram, defaultModel);
        god = new gcs.GoOneDrive(myDiagram, 'f9b171a6-a12e-48c1-b86c-814ed40fcdd1', defaultModel);
        ggd = new gcs.GoGoogleDrive(myDiagram, '16225373139-n24vtg7konuetna3ofbmfcaj2infhgmg.apps.googleusercontent.com',
            'AIzaSyDBj43lBLpYMMVKw4aN_pvuRg7_XMVGf18', defaultModel);
        gdb = new gcs.GoDropBox(myDiagram, '3sm2ko6q7u1gbix', defaultModel);
        storages = [gls, god, ggd, gdb];

        // Create the GoCloudStorageManager instance
        storageManager = new gcs.GoCloudStorageManager(storages, "../projects/storage/goCloudStorageIcons/");
Despite all that code, there are only two parameters GoCloudStorageManager takes.

Using the GoCloudStorageManager

The UI the appears after calling selectStorageService()

First, set the GoCloudStorage subclass you want to use at the moment. This is done through a UI, which is brought up with a call to storageManager.selectStorageService(). storageManager.currentStorageService is set to the GoCloudStorage subclass managing the storage service selected in the resultant UI.

The GoCloudStorageManager assumes a desire for mainly graphical manipulation of data, so calls to save(), load(), create(), and remove() do not take any parameters and all launch the proper ui for storageManager.currentStorageService (set by the the previous step).

You may want to update your page display or perform some other actions based on the saving / loading / removal / creation of data using GoCloudStorageManager. All GoCloudStorageManager core methods (save(), load(), create(), and remove()) return Promises that resolve with a DiagramFile, representing the recently saved / loaded / created / removed file. With this data, you may update your page display or perform any other action upon Promise resolution. Such as: 


        // resolving the Promise returned after the Load action
        storageManager.load().then(fileData => {
            // the fileData is a DiagramFile object
            alert(fileData.name + " (file ID " + fileData.id + ") loaded from path " + fileData.path);
        });
Note: There are three guaranteed fields in any DiagramFile object: the name, id, and path of the represented file.

GoJS