GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

將GoJS模型數據存儲在云存儲中是保存，加載，創建和刪除圖表數據文件的絕佳方法，而無需擔心本地系統問題。GoCloudStorage庫使與流行的云存儲服務的連接變得容易。

GoCloudStorage庫未與GoJS預先打包在一起。您可以在此處找到GoCloudStorage庫。

GoCloudStorage類系統使開發人員可以輕松地將其GoJS圖表模型數據存儲到流行的云存儲服務。該 GoCloudStorage類本身是一個抽象類，永遠不會被實例化。而是使用其子類，每個子類與不同的云存儲服務接口。當前，GoCloudStorage系統支持Dropbox，Google Drive，Microsoft OneDrive和本地存儲。類名是：

• GoDropBox
• GoGoogleDrive
• GoOneDrive
• GoLocalStorage

本節描述如何創建特定GoCloudStorage子類GoGoogleDrive的實例。由于云存儲服務API的可變性，GoCloudStorage子類構造函數的參數和行為會有所不同。建議您閱讀要使用的任何GoCloudStorage子類的完整 文檔。

首先，確保您有一個script帶有gcs.js庫路徑的標簽。所有GoCloudStorage子類都在名稱空間中定義gcs。

注意：要使用任何GoCloudStorage子類（除GoLocalStorage），您還必須包括一個script標簽引用存儲服務提供商JS庫。對于每個子類，它們可能類似于：

• GoDropBox：https: //unpkg.com/dropbox@2.5.13/dist/DropboxTeam-sdk.min.js
• GoGoogleDrive：https: //apis.google.com/js/api.js
• GoOneDrive：https: //js.live.net/v7.2/OneDrive.js

  //創建一個有效的GoGoogleDrive實例
  var ggd = new gcs.GoGoogleDrive（
    圖，// managedDiagrams參數
    “ 16225356139-n64vtg7konuetna3of3mfcaj2iffhgmg.apps.googleusercontent.com”，// clientId參數
    “ AIzaSydBje3lBL67MMVKw467_pvuRg7_XMVGf18”，// pickerApiKey參數
    defaultModel，// defaultModel參數
    “ ../projects/storage/goCloudStorageIcons/” // iconsRelativeDirectory參數
    ）;

這些參數是什么？我們將一步一步地解決它們。

托管圖

傳遞給GoGoogleDrive構造函數的第一個參數稱為diagrams。這是所有GoCloudStorage子類都知道的參數managedDiagrams。GoCloudStorage實例（在本例中為GoGoogleDrive）將為其管理數據存儲的是GoJS圖數組或單個GoJS圖。此參數是必需的。

客戶編號

傳遞給GoGoogleDrive構造函數的第二個參數是一個長字符串。這是所有GoCloudStorage子類（GoLocalStorage除外）必需的參數 。該ID告訴云存儲提供商（在這種情況下為Google）和用戶，哪個應用程序要求操作存儲的文件數據（在這種情況下為Google Drive文件數據）。

這通常是由云存儲提供商的開發人員控制臺或類似人員提供的。您將需要在存儲提供商（在這種情況下為Google）中注冊應用程序以獲得此ID。在獲取客戶ID的下面閱讀更多內容。

Google Picker API密鑰

這是GoGoogleDrive特定的參數。一些GoCloudStorage子類需要其他參數不需要的參數。同樣，建議您閱讀要使用的任何GoCloudStorage子類的完整文檔。

GoGoogleDrive需要此鍵，以允許在圖形文件操作期間使用熟悉的Google Drive文件選擇器界面。在完整的GoGoogleDrive.pickerApiKey文檔中閱讀有關此特殊參數的更多信息。

默認型號

它是通過調用分配給新創建的圖的默認模型數據 create。通常，此值是通過調用 Diagram.model.toJson（）獲得的。

這是所有GoCloudStorage子類的可選參數。如果在構造過程中未提供任何值，則默認為新的GraphLinksModel。

圖標相對目錄

要使用調用GoCloudStorage子類的custom的命令，ui必須相對于應用程序頁面所在的目錄指定存儲服務圖標所在的目錄。這是由可選iconsRelativeDirectory參數提供的。默認值為“ ../goCloudStorageIcons/”。

UI的確切外觀在GoCloudStorage子類之間有所不同，盡管它當然包含對存儲服務圖標的引用。如果不提供此參數，則這些圖像所在的空間很可能會顯得空白。

獲取客戶端ID

在構造期間， 所有GoCloudStorage子類（GoLocalStorage除外）都需要客戶端ID作為參數。這使存儲服務提供商（例如Google，Dropbox ...）和用戶知道嘗試操縱其遠程文件系統的應用程序的身份。因此，獲得要使用的存儲服務的客戶端ID是使用相應的GoCloudStorage子類的要求。

服務的過程因服務而異，盡管一般步驟相同。1.注冊帳號

如果您還沒有存儲服務提供商的帳戶，請注冊一個。

2.注冊一個Web應用程序

此步驟因服務而異。在存儲服務提供商處創建并注冊應用程序。

3.找到新應用程序的客戶ID
您新注冊的應用程序具有一個Client ID-一個長字符串，類似于我們在GoCloudStorage子類構造中看到的字符串。使用此字符串作為clientId您的GoCloudStorage實例的參數。

這些特定于存儲的頁面可以幫助您逐步完成使用其服務創建/注冊應用程序的過程。

• GoGoogleDrive
• Microsoft OneDrive（圖形）
• 投寄箱

現在您有了GoCloudStorage子類的工作實例，讓我們開始保存和加載GoJS Diagram模型數據。我們將繼續使用GoCloudStorage子類構造中的GoGoogleDrive示例，將特定的GoGoogleDrive實例稱為 ggd。

我們可以ggd.managedDiagrams通過多種方式將模型數據保存到Google云端硬盤。

保存與使用UI保存

所有GoCloudStorage子類均具有save()和的功能saveWithUI()。有什么不同？

saveWithUI()顯示了GoCloudStorage調用實例的ui元素，讓用戶以圖形方式指定文件名和/或保存位置。

save()更細微。有三種情況。讓我們回到我們的GoGoogleDrive示例并進行探索。1.指定路徑保存

呼叫ggd.save(<valid path string>)將保存到Google云端硬盤中的特定路徑，而不會顯示任何用戶界面。
注意：構成有效路徑字符串參數的內容因服務而異。有關更多詳細信息，請參見 文檔。

2.使用有效的當前圖表文件進行保存
如果未提供任何路徑，但是路徑ggd有效currentDiagramFile （ggd當前已打開Google Drive文件的表示，并且其內容已加載到ggd.managedDiagrams'模型中），則Google Drive中ggd.currentDiagramFile.path與之相對應的路徑中的圖表文件內容將使用的模型內容 ggd.managedDiagrams。

3.都不存

如果未提供任何路徑且該路徑ggd.currentDiagramFile無效，ggd.saveWithUI()則會調用，提示用戶輸入保存名稱/位置。

載入中

加載文件數據更為簡單。

load(<valid path string>)從云存儲服務將文件內容加載到每個managedDiagrams模型中。沒有UI出現。 
范例：ggd.load('ahjdhe^3n4dlKd4r')

loadWithUI()顯示 用戶界面，并允許用戶以圖形方式選擇要加載的文件。 
范例：ggd.loadWithUI()

注1：所加載的文件必須已經從帶有GoJS圖的頁面保存到存儲中，該圖的DIV ID與的DIV ID相對應 managedDiagrams。否則，GoCloudStorage子類將模型數據加載到哪個位置尚不清楚。 
注2：managedDiagrams從存儲中加載的模型數據必須在包含GoCloudStorage調用實例的應用程序中進行適當處理（通過節點/鏈接模板或其他方法）。GoCloudStorage類系統除模型數據外不存儲任何其他信息。

創建/刪除數據

創建文件
繼續我們的GoGoogleDrive示例，您將如何在存儲中創建一個新文件以保存ggd.managedDiagrams到？調用該create函數。

create()將每個設置ggd.managedDiagrams為ggd.defaultModel（在構造時分配，回到 GoCloudStorage子類構造中）。如果 ggd.isAutoSaving為true，則會managedDiagrams通過自動調用提示您將新刷新的內容保存到Google云端硬盤saveWithUI()。
（可選）該create函數可以接受路徑參數，就像保存/加載數據中描述的save()和load()函數一樣 。如果提供，則每個重置為后，其模型數據將保存到Google云端硬盤中的給定路徑，并且不會出現用戶界面。 ggd.managedDiagramsdefaultModel

刪除文件
要從Google云端硬盤中刪除文件，只需調用ggd.remove(<some valid path string>)。Google云端硬盤中給定路徑上的文件將被刪除，而不會顯示任何用戶界面。
要使用ui元素從Google云端硬盤中刪除文件，請調用ggd.removeWithUI()。

前往Cloud Storage Manager

如果您希望能夠將頁面上的圖保存到許多不同的云存儲服務或從中加載，該怎么辦？說，Google云端硬盤和Microsoft OneDrive？還是Microsoft OneDrive，Dropbox和Google云端硬盤？或當前支持的GoCloudStorage子類的任意組合？這就是 Go Cloud Storage Manager的用途。

構造GoCloudStorageManager
遵守標準的GoCloudStorageManager構造過程：

        //構造您要管理的CloudStorage子類
        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）;
        存儲空間= [gls，上帝，ggd，gdb]；

        //創建GoCloudStorageManager實例
        storageManager =新的gcs.GoCloudStorageManager（storages，“ ../projects/storage/goCloudStorageIcons/”）;   

儲物柜

第一個參數，storages是一個數組或集GoCloudStorage子類。這告訴GoCloudStorageManager實例，storageManager正在管理哪些存儲服務以及這些服務如何管理其圖。

圖標相對目錄

第二個參數是一個字符串，對應于iconsRelativeDirectoryGoCloudStorageManager的 屬性。這類似于GoCloudStorage子類構造中iconsRelativeDirectory討論的內容。唯一的區別是GoCloudStorageManager將此屬性應用于每個GoCloudStorage子類的iconsRelativeDirectory屬性。此參數是可選的，但不提供此參數可能意味著ui中應該有存儲服務圖標的空白。

使用GoCloudStorageManager

您可能需要基于使用GoCloudStorageManager保存/加載/刪除/創建數據來更新頁面顯示或執行一些其他操作。所有GoCloudStorageManager核心方法（save()，load()，create()和remove()）回報承諾，決心用DiagramFile，表示最近保存/載入/創建/移除文件。使用此數據，您可以在Promise分辨率下更新頁面顯示或執行任何其他操作。如：

        //解決Load動作后返回的Promise
        storageManager.load（）。then（function（fileData）{
            // fileData是一個DiagramFile對象
            alert（fileData.name +“（文件ID” + fileData.id +“）從路徑” + fileData.path加載）;
        }）;