jsPlumb導航器

来源:https://www.cnblogs.com/haoxj/p/18064973
-Advertisement-
Play Games

開源項目地址:https://gitee.com/easyxaf/jsplumb-navigator 前言 jsPlumb可用於連接DOM元素,它不依賴框架,所以與主流框架都可以無縫的集成。但比較遺憾的是社區版中沒有平移、縮放等功能,如果用它來開發工作流等項目,用戶體驗會大打折扣。我的項目是用Bla ...


開源項目地址:https://gitee.com/easyxaf/jsplumb-navigator

前言

jsPlumb可用於連接DOM元素,它不依賴框架,所以與主流框架都可以無縫的集成。但比較遺憾的是社區版中沒有平移、縮放等功能,如果用它來開發工作流等項目,用戶體驗會大打折扣。我的項目是用Blazor開發的,在比較了多款開源流程圖後,最終選擇了jsPlumb,所以需要為其單獨開發一個導航器。

jsPlumb社區版文檔:https://docs.jsplumbtoolkit.com/community/6.x/

演示

思路

這裡用到了兩個名詞,viewport(視口)與canvas(畫布),視口是有大小的,畫布是沒有邊界的,視口是我們觀察畫布的視窗,你可以把視口比作放大鏡,平移可以觀察到畫布的不同位置,遠近可對畫布進行放大或縮小。

在jsPlumb中,需要一個容器(container)承載節點,本項目中畫布(canvas)就是jsPlumb所需要的容器,視口(viewport)就是畫布的父節點。

在有了上面的概念後,就能夠輕鬆的理解源碼中一些變數的命名。

使用

下麵是DOM結構

<body>
  <div id="viewport">
    <div id="canvas"></div>
  </div>
</body>

下麵是CSS樣式

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
}

#canvas {
  position: absolute;
}

上面只是一個示例,id不是必需的,canvas的position需要設置為absolute,並且不要設置canvas的大小,canvas當前的width與height應該都為0,同時overflow為visible,這些都是預設值,無需顯式設置,viewport需要一個大小,並且需要將overflow設置為hidden。

將jsplumb-navigator.js添加到html中,併在初始化完jsplumb後,使用window.createJsPlumbNavigator方法創建一個導航器。

下麵是示例代碼

jsPlumb.ready(() => {
  const canvasEle = document.getElementById('canvas');
  const instance = jsPlumb.newInstance({ container: canvasEle });

  instance.connect({
    source: document.getElementById('node1'),
    target: document.getElementById('node2'),
    anchors: ['Bottom', 'Top']
  });

  window.createJsPlumbNavigator(instance);
});

window.createJsPlumbNavigator方法還可以傳入一個options,用於配置導航器

下麵是options的預設值

const defaultOptions = {
  miniMapWidth: 200,
  miniMapHeight: 150,
  miniMapPosition: 'bottom-right',
  toolbarPosition: 'bottom-left',
  disableMiniMap: false,
  disableToolbar: false,
};

options可以設置miniMap的寬度與高度,toolbar與miniMap的位置,位置有4個,分別為 top-left、top-right、bottom-right、bottom-left,toolbar預設在左下角,miniMap預設在右下角,同時也可以禁用toolbar與miniMap

window.createJsPlumbNavigator方法還會返回一個navigator對象,你可以直接使用navigator對象中提供的方法直接操作導航器

下麵是導出的navigator對象

window.createJsPlumbNavigator = (jsPlumbInstance, options) => {
  const defaultOptions = {
    miniMapWidth: 200,
    miniMapHeight: 150,
    miniMapPosition: 'bottom-right',
    toolbarPosition: 'bottom-left',
    disableMiniMap: false,
    disableToolbar: false,
  };
  const navigator = new Navigator(jsPlumbInstance, { ...defaultOptions, ...options });
  return {
    getZoom: navigator.getCanvasScale.bind(navigator),
    zoomTo: navigator.zoomTo.bind(navigator),
    zoomIn: navigator.zoomIn.bind(navigator),
    zoomOut: navigator.zoomOut.bind(navigator),
    zoomTo100: navigator.zoomTo100.bind(navigator),
    bestFit: navigator.bestFit.bind(navigator),
    fitToViewport: navigator.fitToViewport.bind(navigator),
    getMiniMapVisible: navigator.getMiniMapVisible.bind(navigator),
    showMiniMap: navigator.showMiniMap.bind(navigator),
    hideMiniMap: navigator.hideMiniMap.bind(navigator),
    getToolbarVisible: navigator.getToolbarVisible.bind(navigator),
    showToolbar: navigator.showToolbar.bind(navigator),
    hideToolbar: navigator.hideToolbar.bind(navigator),
    dispose: navigator.dispose.bind(navigator),
  };
};

其中fitToViewport方法是用於將畫布內容完全顯示在視口中,bestFit方法是最佳匹配畫布到視口中,它的縮放範圍是0.5到1,在這個範圍內將畫布顯示在視口中。你可以禁用toolbar後,通過navigator對象中的方法創建自己的toolbar

下麵的示例代碼禁用了toolbar,並將miniMap放置到了右上角,同時將畫布全部顯示在視口中。

const navigator = window.createJsPlumbNavigator(instance, {
  miniMapPosition: 'top-right',
  disableToolbar: true,
});
navigator.fitToViewport();

操作

  • 滑鼠左鍵放在畫布空白處或miniMap中拖放可平移畫布
  • 滑鼠滾軸放在畫布中滾動將上下平移畫布,按下Ctrl鍵將縮放畫布
  • 滑鼠滾軸放在miniMap中滾動將縮放畫布

https://www.cnblogs.com/haoxj/p/18064973


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 二維碼相關(二) 本篇文章繼續講述下如何使用zxing解析二維碼圖片,獲取內容. 1: 創建RGBLuminanceSource對象. 首先獲取二維碼圖片的bitmap對象. Bitmap bitmap = BitmapFactory.decodeResource(getResour ...
  • Android 二維碼相關(一) 本篇文章主要記錄下android下使用zxing來創建二維碼. 1: 導入依賴 api "com.google.zxing:core:3.5.1" 2: 創建二維碼 創建QRCodeWriter對象 QRCodeWriter qrCodeWriter = new Q ...
  • linux 入門(七) 1: 安裝ffmpeg ubuntu下安裝ffmpeg: sudo apt-get install ffmpeg 2: ffmpeg --help ffmpeg version 4.2.7-0ubuntu0.1 Copyright (c) 2000-2022 the FFmp ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、介紹 Decorator,即裝飾器,從名字上很容易讓我們聯想到裝飾者模式 簡單來講,裝飾者模式就是一種在不改變原類和使用繼承的情況下,動態地擴展對象功能的設計理論。 ES6中Decorator功能亦如此,其本質也不是什麼高大上的結構, ...
  • 本文討論了前端架構的重要性,並提出了選擇Vue組件庫時需考慮的因素。重點介紹了ViewDesign這一優秀的Vue組件庫,概述了其特點及如何實現高效前端架構。完整版文章鏈接可在本文結尾處獲取。 ...
  • 在 2023 年的年底,我用 Vite-SSG + Vue3 + Vuetify3 把之前使用 SPA 編寫的官網進行了重構,支持多語言,響應式並且對 SEO 和社交媒體分享十分友好 ...
  • Vue.js 是一個漸進式 JavaScript 框架,適用於構建用戶界面,特別適合開發企業級 Web 應用程式。它具有漸進式設計、虛擬 DOM、響應式數據綁定和組件化等優勢。ViewDesign(原名 iView)是一個基於 Vue.js 的企業級 UI 組件庫,提供全面的組件庫、企業級設計規範、... ...
  • 本文探討了前端發展的新趨勢,以及 Vue.js 生態中 ViewDesign 這一優秀 UI 組件庫的崛起。首先闡述了現代 Web 應用對前端開發提出的新需求,以及 Vue.js 作為漸進式框架在滿足這些需求方面的優勢。接著重點介紹了 ViewDesign 作為基於 Vue.js 的 UI 組件庫的... ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...