【mxGraph】原始碼學習：（2）mxClient

阿新 • • 發佈：2019-02-05

1. mxClient.js檔案

mxClient.js是客戶端的引導機制，此檔案include了執行mxGraph所需的所有原始檔，並載入了其依賴的資原始檔，以及配置了客戶端的語言。

意思就是隻要在需要使用mxGraph的地方用<script>標籤載入mxClient.js即可使用該庫。這是一種非常好的做法，不僅能方便的進行開發，還能提供mxClient的壓縮版本以提升載入速度。

mxClient.js的作用如下：

設定載入相關檔案的全域性變數
設定相關路徑
設定客戶端語言
載入css檔案和js檔案

1.1 控制載入相關檔案

mxClient.js定義了一些用於控制載入相關檔案的全域性變數：

// 用於切換<mxGraph>和<mxEditor>中兩個資原始檔的載入
// 這兩個資原始檔在resource資料夾中，如果應用已經提供則置false，參照GraphEditor
if (typeof(mxLoadResources) == 'undefined') {
    mxLoadResources = true;
}

// 用於指定資原始檔的字尾。預設為.txt
if (typeof(mxResourceExtension) == 'undefined') {
    mxResourceExtension = '.txt';
}

// 用於強制在開發模式下載入JavaScript檔案。預設為undefined 

if (typeof(mxForceIncludes) == 'undefined') {
    mxForceIncludes = false;
}

// 用於在初始化庫時切換載入CSS檔案
if (typeof(mxLoadStylesheets) == 'undefined') {
    mxLoadStylesheets = true;
}

1.2 相關路徑

還需要設定一些路徑，如果沒有指定則使用預設值：

// 所有檔案的基本路徑，不帶斜槓。預設為'.'
// 在載入mxClient庫之前覆蓋此設定，比如mxBasePath='/path/to/core/directory'
if (typeof 
(mxBasePath) != 'undefined' && mxBasePath.length > 0) {
    // 去掉斜槓
    if (mxBasePath.substring(mxBasePath.length - 1) === '/') {
        mxBasePath = mxBasePath.substring(0, mxBasePath.length - 1);
    }

    mxClient.basePath = mxBasePath;
} else {
    mxClient.basePath = '.';
}

// 所有圖片的基本路徑，不帶斜槓。預設為<mxClient.basePath> + '/images'
// 在載入mxClient庫之前覆蓋此設定，比如mxImageBasePath='/path/to/image/directory'
if (typeof(mxImageBasePath) != 'undefined' && mxImageBasePath.length > 0) {
    // 去掉斜槓
    if (mxImageBasePath.substring(mxImageBasePath.length - 1) === '/') {
        mxImageBasePath = mxImageBasePath.substring(0, mxImageBasePath.length - 1);
    }

    mxClient.imageBasePath = mxImageBasePath;
} else {
    mxClient.imageBasePath = mxClient.basePath + '/images';
}

1.3 配置語言

還支援主動設定客戶端的語言，或者檢測瀏覽器的語言以配置其語言：

// 設定客戶端的語言，比如en表示英語，de表示德語。預設是en
// 資原始檔的格式是使用下劃線表示語言，比如graph_zh.txt
// 在載入mxClient庫之前覆蓋此設定，比如mxLanguage='en'
if (typeof(mxLanguage) != 'undefined' && mxLanguage != null) {
    mxClient.language = mxLanguage;
} else {
    // 在GraphEditor中必須設定mxLanguage，介面的語言才更改
    mxLanguage = (mxClient.IS_IE) ? navigator.userLanguage : navigator.language;
    // 中文分簡體和繁體，這裡只設置簡體
    mxLanguage = (mxLanguage === 'zh-CN') ? 'zh' : mxLanguage;
    
    mxClient.language = mxLanguage;
}

// 設定預設語言載入不帶下劃線的資原始檔。預設為en
// 在載入mxClient庫之前覆蓋此設定，比如mxDefaultLanguage='zh'
if (typeof(mxDefaultLanguage) != 'undefined' && mxDefaultLanguage != null) {
    mxClient.defaultLanguage = mxDefaultLanguage;
} else {
    mxClient.defaultLanguage = 'en';
}

// 設定支援的所有語言。預設語言不用新增到列表中
// 在載入mxClient庫之前覆蓋此設定，比如mxLanguages=['de','it','fr']
if (typeof(mxLanguages) != 'undefined' && mxLanguages != null) {
    mxClient.languages = mxLanguages;
}

1.4 載入cs和js檔案

開發環境中，將所有程式碼分成了不同的包便於開發，還需要將它們集中在同一個檔案即mxClient.js中，這樣可以在HTML通過匯入一個檔案而匯入整個庫：

// 匯入所有樣式和名稱空間
if (mxLoadStylesheets) {
    mxClient.link('stylesheet', mxClient.basePath + '/css/common.css');
}

// 為舊的IE瀏覽器新增所需的名稱空間，樣式表和記憶體處理
if (mxClient.IS_VML) {
	// 如果支援SVG則使用SVG
    if (mxClient.IS_SVG) {
        mxClient.IS_VML = false;
    } else {
        // 允許支援IE8的standards模式，這需要所有VML屬性可以直接賦值，比如node.attr=value
        // 不能使用setAttribute
        if (document.documentMode == 8) {
            document.namespaces.add(mxClient.VML_PREFIX, 'urn:schemas-microsoft-com:vml', '#default#VML');
            document.namespaces.add(mxClient.OFFICE_PREFIX, 'urn:schemas-microsoft-com:office:office', '#default#VML');
        } else {
            document.namespaces.add(mxClient.VML_PREFIX, 'urn:schemas-microsoft-com:vml');
            document.namespaces.add(mxClient.OFFICE_PREFIX, 'urn:schemas-microsoft-com:office:office');
        }

        // IE中有限數量樣式表的解決方法（在標準模式下不起作用）
        if (mxClient.IS_QUIRKS && document.styleSheets.length >= 30) {
            (function () {
                var node = document.createElement('style');
                node.type = 'text/css';
                node.styleSheet.cssText = mxClient.VML_PREFIX + '\\:*{behavior:url(#default#VML)}' +
                    mxClient.OFFICE_PREFIX + '\\:*{behavior:url(#default#VML)}';
                document.getElementsByTagName('head')[0].appendChild(node);
            })();
        } else {
            document.createStyleSheet().cssText = mxClient.VML_PREFIX + '\\:*{behavior:url(#default#VML)}' +
                mxClient.OFFICE_PREFIX + '\\:*{behavior:url(#default#VML)}';
        }

        if (mxLoadStylesheets) {
            mxClient.link('stylesheet', mxClient.basePath + '/css/explorer.css');
        }
    }
}

// 如果通過CommonJS載入指令碼，不要將<script>標記寫入頁面以獲取依賴項。這些已經包含在編譯版本中
if (mxForceIncludes || !(typeof module === 'object' && module.exports != null)) {
// PREPROCESSOR-REMOVE-END
    mxClient.include(mxClient.basePath + '/js/util/mxLog.js');
    mxClient.include(mxClient.basePath + '/js/util/mxObjectIdentity.js');
    mxClient.include(mxClient.basePath + '/js/util/mxDictionary.js');
    mxClient.include(mxClient.basePath + '/js/util/mxResources.js');
    ...
    mxClient.include(mxClient.basePath + '/js/io/mxDefaultKeyHandlerCodec.js');
    mxClient.include(mxClient.basePath + '/js/io/mxDefaultToolbarCodec.js');
    mxClient.include(mxClient.basePath + '/js/io/mxDefaultPopupMenuCodec.js');
    mxClient.include(mxClient.basePath + '/js/io/mxEditorCodec.js');
// PREPROCESSOR-REMOVE-START
}

2. mxClient類

mxClient在mxClient.js檔案中是作為一個類定義的，主要的作用如下：

說明當前mxGraph的版本號
標識客戶端的瀏覽器和作業系統
定義檢查瀏覽器是否支援的函式
定義載入css檔案、js檔案和依賴資源的函式
儲存一些配置相關的變數，比如語言、路徑等

2.1 版本號

版本號說明了mxGraph庫的當前版本，格式是主版本.次版本.編譯號，如下所示：

VERSION: '3.9.9'

2.2 標識瀏覽器

標識瀏覽器的變數如下表所示：

// IE瀏覽器
IS_IE: navigator.userAgent.indexOf('MSIE') >= 0,
IS_IE6: navigator.userAgent.indexOf('MSIE 6') >= 0,
IS_IE11: !!navigator.userAgent.match(/Trident\/7\./),
// 如果是IE瀏覽器，標識是否是Quirks模式
IS_QUIRKS: navigator.userAgent.indexOf('MSIE') >= 0 && 
	(document.documentMode == null || document.documentMode == 5),
// IE11的enterprise模式（IE8的standards模式）
IS_EM: 'spellcheck' in document.createElement('textarea') && 
	document.documentMode == 8,
// Edge瀏覽器
IS_EDGE: !!navigator.userAgent.match(/Edge\//),
// VML名稱空間中結點的字首，預設為v
VML_PREFIX: 'v',
// VML office命令空間中結點的字首，預設為o
OFFICE_PREFIX: 'o',

// Netscape瀏覽器（包括Firefox瀏覽器）
IS_NS: navigator.userAgent.indexOf('Mozilla/') >= 0 &&
    navigator.userAgent.indexOf('MSIE') < 0 &&
    navigator.userAgent.indexOf('Edge/') < 0,

// Opera瀏覽器
IS_OP: navigator.userAgent.indexOf('Opera/') >= 0 ||
    navigator.userAgent.indexOf('OPR/') >= 0,
// 如果-o-transform可用作CSS樣式，則為True，即基於具有2.5或更高版本的Presto引擎的Opera瀏覽器。
IS_OT: navigator.userAgent.indexOf('Presto/') >= 0 &&
    navigator.userAgent.indexOf('Presto/2.4.') < 0 &&
    navigator.userAgent.indexOf('Presto/2.3.') < 0 &&
    navigator.userAgent.indexOf('Presto/2.2.') < 0 &&
    navigator.userAgent.indexOf('Presto/2.1.') < 0 &&
    navigator.userAgent.indexOf('Presto/2.0.') < 0 &&
    navigator.userAgent.indexOf('Presto/1.') < 0,

// Safari瀏覽器
IS_SF: navigator.userAgent.indexOf('AppleWebKit/') >= 0 &&
    navigator.userAgent.indexOf('Chrome/') < 0 &&
    navigator.userAgent.indexOf('Edge/') < 0,

// Google Chrome瀏覽器
IS_GC: navigator.userAgent.indexOf('Chrome/') >= 0 &&
    navigator.userAgent.indexOf('Edge/') < 0,

// Chrome App
IS_CHROMEAPP: window.chrome != null && 
	chrome.app != null && 
	chrome.app.runtime != null,

// Firefox瀏覽器
IS_FF: navigator.userAgent.indexOf('Firefox/') >= 0,
// 如果-moz-transform可用作CSS樣式，則為True。
// 所有基於Firefox的瀏覽器都是3或者等於3的情況，例如Camino，Iceweasel，Seamonkey和Iceape。
IS_MT: (navigator.userAgent.indexOf('Firefox/') >= 0 &&
        navigator.userAgent.indexOf('Firefox/1.') < 0 &&
        navigator.userAgent.indexOf('Firefox/2.') < 0) ||
    (navigator.userAgent.indexOf('Iceweasel/') >= 0 &&
        navigator.userAgent.indexOf('Iceweasel/1.') < 0 &&
        navigator.userAgent.indexOf('Iceweasel/2.') < 0) ||
    (navigator.userAgent.indexOf('SeaMonkey/') >= 0 &&
        navigator.userAgent.indexOf('SeaMonkey/1.') < 0) ||
    (navigator.userAgent.indexOf('Iceape/') >= 0 &&
        navigator.userAgent.indexOf('Iceape/1.') < 0),

// 瀏覽器是否支援SVG
IS_SVG: navigator.userAgent.indexOf('Firefox/') >= 0 || // FF and Camino
    navigator.userAgent.indexOf('Iceweasel/') >= 0 || // Firefox on Debian
    navigator.userAgent.indexOf('Seamonkey/') >= 0 || // Firefox-based
    navigator.userAgent.indexOf('Iceape/') >= 0 || // Seamonkey on Debian
    navigator.userAgent.indexOf('Galeon/') >= 0 || // Gnome Browser (old)
    navigator.userAgent.indexOf('Epiphany/') >= 0 || // Gnome Browser (new)
    navigator.userAgent.indexOf('AppleWebKit/') >= 0 || // Safari/Google Chrome
    navigator.userAgent.indexOf('Gecko/') >= 0 || // Netscape/Gecko
    navigator.userAgent.indexOf('Opera/') >= 0 || // Opera
    (document.documentMode != null && document.documentMode >= 9), // IE9+

// 如果foreignObject支援不可用，則為True。 這是Opera，較舊的基於SVG的瀏覽器和所有版本的IE的情況。
NO_FO: !document.createElementNS || 
	document.createElementNS('http://www.w3.org/2000/svg','foreignObject') != 
	'[object SVGForeignObjectElement]' || 
    navigator.userAgent.indexOf('Opera/') >= 0,

// 瀏覽器是否支援VML
IS_VML: navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER',

2.3 標識系統

標識系統的變數如下所示：

// iPad、iPhone和iPod平臺
IS_IOS: (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false),

// Windows系統
IS_WIN: navigator.appVersion.indexOf('Win') > 0,

// Mac系統
IS_MAC: navigator.appVersion.indexOf('Mac') > 0,

// 如果此裝置支援touchstart/-move/-end事件，
// 啟用觸控的裝置上的Apple iOS，Android，Chromebook和Chrome瀏覽器，則為True。
IS_TOUCH: 'ontouchstart' in document.documentElement,

// 如果此裝置支援Microsoft指標事件，則為True（在Mac上始終為false）。
IS_POINTER: window.PointerEvent != null && !(navigator.appVersion.indexOf('Mac') > 0),

// 是否是本地執行（如果文件位置不以http：//或https：//開頭，則為True）。
IS_LOCAL: document.location.href.indexOf('http://') < 0 &&
    document.location.href.indexOf('https://') < 0,

2.4 瀏覽器支援

檢查瀏覽器是否支援VML或者SVG，因為mxGraph的cell可以用VML或者SVG在畫出來，所以必須要瀏覽器支援其中一種語言：

isBrowserSupported: function () {
    return mxClient.IS_VML || mxClient.IS_SVG;
},

2.5 載入檔案

mxClient類中定義了三個函式用於載入css檔案、js檔案和資原始檔。

載入css檔案到HTML的head中，link標籤的charset固定為UTF-8，type固定為text/css：

/**
 * rel：link標籤的rel屬性
 * href：link標籤的href屬性，相對路徑
 * doc：可選的link標籤所屬的document
 */
link: function (rel, href, doc) {
	// 使用指定的document。如果未指定，則使用當前頁面的document
    doc = doc || document;

    // 如果是IE6則直接在head中新增link標籤
    if (mxClient.IS_IE6) {
        doc.write('<link rel="' + rel + '" href="' + href + '" charset="UTF-8" type="text/css"/>');
    } else {
        var link = doc.createElement('link');

        link.setAttribute('rel', rel);
        link.setAttribute('href', href);
        link.setAttribute('charset', 'UTF-8');
        link.setAttribute('type', 'text/css');

        var head = doc.getElementsByTagName('head')[0];
        head.appendChild(link);
    }
}

載入js檔案到HTML的head中，這個函式只在開發環境中使用，因為在生成環境中使用的是mxClient.min.js，如下所示：

/**
 * src：script標籤的src屬性，相對路徑
 */
include: function (src) {
    document.write('<script src="' + src + '"></script>');
}

如果mxLoadResources全域性變數為false，則使用該函式載入mxClient的依賴資源：

/**
 * fn：在所有資原始檔載入之後呼叫的函式
 * lan：可選的傳遞給<mxResources.add>的引數
 */
loadResources: function (fn, lan) {
	// 待載入的資原始檔數
    var pending = mxClient.defaultBundles.length;

	// 如果沒有需要載入的資原始檔，則直接呼叫fn
    function callback() {
        if (--pending === 0) {
            fn();
        }
    }

	// 使用<mxResources.add>載入資原始檔
    for (var i = 0; i < mxClient.defaultBundles.length; i++) {
        mxResources.add(mxClient.defaultBundles[i], lan, callback);
    }
}

【mxGraph】原始碼學習：（2）mxClient

1. mxClient.js檔案 mxClient.js是客戶端的引導機制，此檔案include了執行mxGraph所需的所有原始檔，並載入了其依賴的資原始檔，以及配置了客戶端的語言。意思就是隻要在需要使用mxGraph的地方用<script>標籤

【mxGraph】原始碼學習：（5）mxGraph

由於mxGraph原始檔有一萬多行，且涉及很多其它原始檔，所以重點在於瞭解mxGraph的作用、結構以及定義了哪些方法 1. 概覽 1.1 作用 mxGraph繼承自mxEventSource以實現基於Web的圖形元件的功能性方面。要啟用平移和連線，使用se

【mxGraph】原始碼學習：（7）mxCell

1. 概覽 mxCell是graph model的元素。它們表示graph中的group、vertex和edge的狀態。對於自定義屬性，建議使用XML節點作為cell的值。以下程式碼可用於建立具有XML節點的cell作為值： var doc = mxUtils

【mxGraph】原始碼學習：（6）mxGraphModel

1. 概覽 mxGraphModel繼承自mxEventSource以實現graph model。graph model是負責儲存graph資料結構的包裝器。graph model充當事務包裝器，其中包含所有更改的事件通知，而cell包含用於更新實際資料結構的原

【原創】VBA學習筆記（2）--例項，VBA刪除表中的空行

Sub 巨集1迴圈內刪列() '資料不規範，有的空行是4，有的是6，有的是1就不好處理了 For i = 15 To 100 Step 2 Rows(i).Delete Shift:=xlUp &nb

【原創】pygame學習筆記（2）----pie遊戲（需優化）

測試程式碼情況（1）做到了弧形可以按出來（2）數字的顯示正確（3）出的一些低階錯誤 temp:\\pygame2.txt 這樣的錯誤， temp\\pygame2.txt 導致這樣的錯誤，

【機器人學】機器人開源專案KDL原始碼學習：（8）KDL的精髓

首先說一下我的心得： 1. 我認為KDL的精髓是Spatial Vector，結合C++等面向物件的語言可以寫出較好的軟體。 2. 直接閱讀KDL程式碼不適合初學者學習機械臂動力學。 3. 要學習機械臂動力學的話應首先閱讀使用3維向量推導公式的文獻，也就是線速度和角速度獨立分析

【機器人學】機器人開源專案KDL原始碼學習：（4）機械臂逆動力學的牛頓尤拉演算法

機械臂的逆動力學問題可以認為是：已知機械臂各個連桿的關節的運動（關節位移、關節速度和關節加速度），求產生這個加速度響應所需要的力/力矩。KDL提供了兩個求解逆動力學的求解器，其中一個是牛頓尤拉法，這個方法是最簡單和高效的方法。牛頓尤拉法演算法可以分為三個步驟： step1：

【機器人學】機器人開源專案KDL原始碼學習：（6）笛卡爾空間軌跡規劃、圓弧過渡、姿態插值、梯形速度、pathlength

本文的內容是對另一篇文章（連結）的補充，對Trajectory_example.cpp涉及到的原理作一些簡單的講解，主要內容是：（1）機器人路徑規劃圓弧過渡的原理；（2）機器人路徑規劃梯形波的原理；（3）機器人末端姿態插值的方法（角-軸）；（4）KDL

【機器人學】機器人開源專案KDL原始碼學習：（7）examples中的CMakeList.txt檔案解讀

通過學習KDL開源專案的程式碼可以學習CMake構建程式的知識，現簡單介紹一下orocos_kinematics_dynamics-master\orocos_kinematics_dynamics-master\orocos_kdl\examples\CMakeList.txt檔案的指令。

【機器人學】機器人開源專案KDL原始碼學習：（5）KDL如何求解幾何雅克比矩陣

這篇文章試圖說清楚兩件事：1. 幾何雅克比矩陣的本質；2. KDL如何求解機械臂的幾何雅克比矩陣。一、幾何雅克比矩陣的本質機械臂的關節空間的速度可以對映到執行器末端在操作空間的速度，這種對映可以通過一個矩陣來描述，就是幾何雅克比矩陣，瞭解雅克比矩陣需要了解這種對映關係的本質，這

【機器人學】機器人開源專案KDL原始碼學習：（3）機器人操作空間路徑規劃(Path Planning)和軌跡規劃（Trajectory Planning）示例

很多同學會把路徑規劃(Path Planning)和軌跡規劃（Trajectory Planning）這兩個概念混淆，路徑規劃只是表示了機械臂末端在操作空間中的幾何資訊，比如從工作臺的一端（A點）沿直線移動到另一端（B點）。而軌跡規劃則加上了時間律，比如它要完成的任務是從A點開始到B點結束，中間

Android自己定義組件系列【5】——進階實踐（2）

col fonts tle 適配 pack tom ica void log 上一篇《Android自己定義組件系列【5】——進階實踐（1）》中對任老師的《可下拉的PinnedHeaderExpandableListView的實現》前一部分進行了實現，這一篇我們來看看Ex

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度時間網站開發 clas jetbrains 常用目錄學習資料簡介安裝Node.js npm簡介開發工具 Sublime Node.js開發環境配置擴展：安裝多版本管理器學習資料　　1.深入淺出Node.j

【原創】Hibernate自動生成（2）

成了 OS class 項目重構 alt index AS url 改名本實戰是博主初次學習Java，分析WCP源碼時，學習HibernateTools部分的實戰，由於初次接觸，難免錯誤，僅供參考，希望批評指正。開發環境： Eclipse Version: Photo

【ADNI】資料預處理（2）獲取 subject slices

ADNI Series 1、【ADNI】資料預處理（1）SPM，CAT12 2、【ADNI】資料預處理（2）獲取 subject slices 3、【ADNI】資料預處理（3）CNNs 4、【ADNI】資料預處理（4）Get top k slices according to CNN

【原創】python學習筆記（10）--《笨辦法學python》字串處理

字串基本操作（1）字串+字串（2）字串*數字（3）字串+str（其他） # -*- coding:utf-8 -*- print ("test1") name1="alice" name2="bob" name_new=name1+name2 print

【整理】python學習筆記（5）-- pygame庫的函式和方法整理

PYGAME的方法和官方文件查詢官方文件 http://www.pygame.org/docs/ 模組簡介 pygame.BufferProxy An array protocol view

【原創】pygame學習筆記（4）----一個打飛機遊戲

根據資料學習，程式碼是在資料的基礎上，重新打的，有部分修改。轉載資料來源：-will https://www.cnblogs.com/wuzhanpeng/p/4261015.html http://eyehere.net/2011/python-pygame-n

【原創】pygame學習筆記（3）--triviagame答題遊戲

一容易出錯的地方 def _init_(self,name,score) 要記住， __init__ 前後都是兩個下劃線，而不只是1個下劃線二程式碼測試顯示效果正常了，可以玩了現在題目會迴圈玩 # -*- coding:utf

【mxGraph】原始碼學習：（2）mxClient

1. mxClient.js檔案

1.1 控制載入相關檔案

1.2 相關路徑

1.3 配置語言

1.4 載入cs和js檔案

2. mxClient類

2.1 版本號

2.2 標識瀏覽器

2.3 標識系統

2.4 瀏覽器支援

2.5 載入檔案

相關推薦