使用畫圖工具draw.io的嵌入模式實作uml圖繪制功能的嘗試（2）

使用畫圖工具draw.io的嵌入模式實作uml圖繪制功能的嘗試（1）

使用畫圖工具draw.io的嵌入模式實作uml圖繪制功能的嘗試（3）

JSON協定

在嵌入模式（或用戶端模式）下，draw.io一般使用json來傳遞message（即在url參數中設定

proto = json

）。

P.S.主視窗向編輯器傳輸資訊一般為’action’，編輯器向主視窗傳輸資訊一般為’event’。

使用的json協定如下：

• iframe中的編輯器準備好時，向主視窗發送

  {event: 'init'}

  ，并等待主視窗向iframe發送

  {action: 'load', xml: '...'}

  的加載消息用于初始化編輯器，此消息中的

  xml

  會在編輯器中顯示出來，XML可以是任何受支援的圖像XML格式的表示，如嵌入XML的

  png

  、

  svg

  等。（若傳遞XML+PNG，也可以使用

  xmlpng

  參數）。具體的格式要求見：draw.io嵌入模式如何工作
• 在init時可以在傳遞的消息中添加

  autosave: 1

  來啟動自動儲存。（e.g.:

  {action: 'load', autoload: 1, xml: '...'}

  ）。如果啟用了autosave，編輯器将在

  {event: 'autosave'…}

  中發送目前XML。
• 加載結束後，編輯器會傳回一個

  {event: 'load'...}

  事件，内容為圖像的大小。
• 點選save，會傳回

  {event: 'save', xml: '…'}

  ，

  xml

  中為圖像的XML資訊。
• 點選saveAndExit，如果單擊save和exit，則上述save消息會多一個附加的

  exit: true

  。
• 點選exit，會發送

  {event: 'exit', modified: boolean}

  。
• 主視窗發送

  {action: 'dialog', title: '...', message: '...', button: '...', modified: bool}

  在編輯器中彈出對話框時，通過改變消息中的參數可以改變對話框标題、資訊和按鈕。
• 發送

  {action: 'prompt', title: '...', okKey: '...', defaultValue: '...'}

  在編輯器中彈出提示框。使用者點選确認後，編輯器傳回

  {event: 'prompt', value: '...', message: ...}

  ，傳回傳入消息和對話框中輸入的值。
• 發送

  {action: 'template'}

  ，彈出選擇模闆對話框，通常在不使用加載消息時使用。如果單擊Create，則建立關系圖;如果單擊Cancel，則發送退出消息。可以添加可選參數

  callback: true

  ，如果為true，編輯器傳回

  {event: 'template', xml: '...', blank: '...', name: ...}

  ，将目前模闆和檔案名傳遞回調用方進行驗證。如果選擇了空模闆，

  blank

  值為

  true

  。
• 發送

  {action: 'draft', xml: '...', name: '...', editKey: '...', discardKey: '...', ignore: bool}

  顯示草稿對話框。使用者點選edit或者discard，傳回

  {event: 'draft', error/result: '...', message: ...}

  傳輸傳入消息和edit/discard的結果；如果出現錯誤，将傳回錯誤而不是結果。如果

  ignore

  為真，則傳回一個ignore選項，傳回結果:‘ignore’。
• 發送

  {action: 'status', message: '...', modified: bool}

  在狀态欄中顯示資訊，

  modified

  可選，用于更新是否已修改的狀态；

  messageKey

  可以用來指定消息的資源鍵，而不是消息。
• 發送

  {action: 'spinner'， message: '…， show: bool, enabled: bool}

  以顯示帶有消息的spinner，或者如果

  show

  設定為false，則隐藏目前spinner。
• 發送

  {action: 'export', format: '...'}

  以傳回

  {event: 'export', format: '...', message: ..., data: '...', xml: '...'}

  。

  format

  支援的格式有html(舊的嵌入格式)、html2(新的嵌入格式)、svg(預設格式)、xmlsvg(嵌入XML的svg)、png和xmlpng(嵌入XML的png)，

  data

  參數為給定格式的有效資料URI。png和xmlpng可以使用附加的spin(或spinKey)參數來啟用spinner，并在生成映像時指定消息(或messageKey)。可選的

  xml

  參數可用于指定要導出的圖的xml，以支援所有支援的格式。可選的

  embedImages: false

  可以禁用svg輸出中的嵌入圖像。
• 如果接收到任何未知消息，系統将傳回

  {error: 'unknownMessage'}

  。