###### tags: `redmine`

Draw io 安裝及redmine 整合
=====================

# 安裝編譯環境

## 安裝 java sdk

### ubuntu
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt-get update
sudo apt-get install openjdk-8-jdk

### CentOS

sudo yum install -y ant java-1.8.0-openjdk-devel

### 測試是否安裝成功 (有顯示版本即可)

java -version


javac -version


## 安裝 Ant

### Ubuntu
sudo apt-get install ant
### CentOS
sudo yum install -y ant
### 測試是否安裝成功 (有顯示版本即可)
ant -version


# 下載 Git Repository

git clone https://github.com/jgraph/draw.io.git --depth=1

:::info
--depth=1 : 只下載最後一個commit。
:::

## 修改 Source code

由於要整合redmine ，需修改draw io 的source code ， 作者 patch 資訊如下:

::: info
https://github.com/mikitex70/redmine_drawio/blob/master/embed2js.patch
:::

### etc/build/build.xml

1. 刪掉 excludes="**/EmbedServlet2.java"

### src/main/java/com/mxgraph/online/EmbedServlet2.java

1. 遮掉 import com.google.appengine.api.utils.SystemProperty;

    //import com.google.appengine.api.utils.SystemProperty;

2. 替換 public EmbedServlet2() , lastModified method

    lastModified = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US).format(new Date());


# 編譯
cd draw.io/etc/build
ant war

# 解壓縮draw io 文件

ant 編譯成功後，預設於 "draw.io/build" 會產生 draw.war 檔

cd draw.io/build
jar -xvf draw.war

::: info

解壓縮後的文件為web server 主要運行的東西，可直接解壓縮至 /var/www/ or /dev/www 相關的目錄，隨你高興，只要nginx 的root path 設對就好。
:::
# 測試

* 若有裝 python，可使用內建 HTTPServer 測試看可否運行。

draw.war 解壓縮後，於剛剛根目錄下執行以下指令:

    python -m SimpleHTTPServer 8000

* 開啟瀏覽器，輸入localhost:8000，測試是否可運行


# Nginx 代理伺服器設定

## 安裝

略...

## 增加 nginx site 設定

cd /etc/nginx/
sudo vim sites-available/drawio

::: info

請自行修改 listen 、server_name 、root 等參數。

* 此範例是將draw.war 解壓縮至draw.io/build 中。
* 監聽的port 為8800。

* Http:

server {
    listen      8800;
    server_name  drawio.test.com;
    charset utf-8;
    root /home/redmine/draw.io/build;
    index index.html index.htm;
    location / {
        root   /home/redmine/draw.io/build;
        index  index.html index.htm;
    }
}

* Https:

:::

## 建立 enabled 連結

sudo ln -s /etc/nginx/sites-available/drawio /etc/nginx/sites-enabled

## 測試 nginx site 設定是否有誤

sudo nginx -t

## 重新啟動 nginx

sudo service nginx restart

or

sudo systemctl restart nginx

## 使用瀏覽器開啟剛剛設定的 port


成功!!

# 安裝redmine draw io plugin

cd redmine/plugins
git clone https://github.com/mikitex70/redmine_drawio.git --depth=1

# 重啟redmine server

重新開啟 redmine service

sudo service redmine restart

## 設定 redmine API


## 設定 Redmine Drawio Plugin

Administration -> Plugins -> Redmine Drawio Plugin -> Configure

修改前:


修改後:


## 功能測試

注意事項:

::: info

1. 操作步驟(以建立 issue 為例):
* Step 1. 點選 Textile 編輯器

* Step 2. 點選 draw io 按鈕 

* Step 3. 輸入name 及選擇圖片格式後按下Insert macro，於編輯視窗內會產生一段程式碼。
* Step 4. 按下  儲存該issue
* Step 5. 進入剛建立的issue，然後於Desciption 欄位中點選以下圖示:
* Step 6. 點選後會跳至 draw io serice page ，編輯完成後，按下右上方的save儲存該圖片。

2. 使用draw io 首次建立該圖片的macro 時，請務必先儲存後再點選 draw io 編輯連結 **(Double clock to start drawing)**

:::

:::warning
* 建立新issue 時，插入draw io macro ，首次建立產生draw io的連結，需要先儲存issue 後再點選 以下圖片進行編輯:

* draw io 編輯連結

* 建立建立新issue

* Wiki 建立 draw io的連結 一樣要先儲存後再編輯draw io，否則會有以下訊息:
:::

## 建議事項

測試發現由於Redmine Drawio Plugin 使用 =={{drawio_attach(test.png)}}== macro, 需要先進行儲存來產生圖檔連結，故建議修改相關檔案(drawio_jstoolbar-xx.js)的錯誤訊息:

:::info
Note:
Drawio 可使用 DMSF plugin 的 webdav功能來處理需首次存檔產生圖檔連結問題，但需使用另一個==macro{{drawio_dmsf(test.png)}}==

此作法圖檔會統一存在DMSF plugin 所設定的 webdav 目錄，不會存在redmine 的預設檔案系統中.

DMSF plugin:
https://github.com/danmunn/redmine_dmsf
:::

example:

redmine_drawio\assets\javascripts\lang\drawio_jstoolbar-zh-tw.js

[修改前]
Drawio.strings['drawio_http_404'     ] = '請確認文件總管模組的 WebDAV 功能已啟用';

[修改後]
Drawio.strings['drawio_http_404'     ] = 'DMSF 套件未安裝，請先按下儲存後再點擊"Double Click To Start drawing"按鈕進行編輯.\n(DMSF module not install,Please press save and then click the "Double Click To Start drawing"button to edit)';

example:

redmine_drawio\assets\javascripts\lang\drawio_jstoolbar-en.js

[修改前]
Drawio.strings['drawio_http_404'     ] = 'Make sure WebDAV capabilities of DMSF module is enabled';

[修改後]
Drawio.strings['drawio_http_404'     ] = 'DMSF 套件未安裝，請先按下儲存後再點擊"Double Click To Start drawing"按鈕進行編輯.\n(DMSF module not install,Please press save and then click the "Double Click To Start drawing"button to edit)';


參考資料:

* https://www.lefer.cn/posts/16902/
* https://github.com/mikitex70/redmine_drawio#using-a-personal-installation-of-drawio
* https://github.com/jgraph/drawio/wiki/Building