开源项目地址：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'),

    source: 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

jsPlumb导航器的更多相关文章

  1. jsPlumb的简单使用

    jsPlumb概述jsPlumb是一个在dom元素之间绘制连接线的javascript框架,它使用svg技术绘制连接线. 基本概念很明显,一个连线主要要解决的问题包括谁和谁连,在哪里连(连接点在哪里) ...

  2. RCP:导航器视图删除操作快捷键失效的解决方案

    导航器视图按下“Delete”的时候,会触发删除节点的操作.如果失效,按以下步骤检查: 1.在要删除的节点上点击右键,确定删除操作是否生效.如果没有生效,则按下列位置 a)检查navigator扩展配 ...

  3. RCP：为指定的导航器添加上下文菜单

    可以参考Eclipse的Help->Help Content下的: Platform Plug-in Developer Guide > Programmer's Guide > P ...

  4. 使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现

    本文实现的方法可以边异步加载数据边绘制拓扑图. 有若干点需要说明一下: 1.  一次性获取所有数据并绘制拓扑图, 请参见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...

  5. 使用jsPlumb制作流程图设计器

    jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术. 项目 ...

  6. jsPlumb插件做一个模仿viso的可拖拉流程图

    前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义拖拉的流程图,并且可以序列化保存在服务器端. 我在这次的实现上面做得比较粗糙,还有分享我在做j ...

  7. jsPlumb 学习笔记

    介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...

  8. jsPlumb

    官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/ 初始化 jsPlumb只有等到DOM初始化完成之后才 ...

  9. 使用 jsPlumb 绘制拓扑图 —— 异步载入与绘制的实现

    本文实现的方法能够边异步载入数据边绘制拓扑图. 有若干点须要说明一下: 1.  一次性获取全部数据并绘制拓扑图. 请參见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...

  10. 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联

    概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...

随机推荐

  1. pycharm的docstring多了一行type

    注释中多了一行:type 设置为Epytext PyCharm 2020.3.5 (Community Edition) def test(param1,param2,param3): "& ...

  2. 事务提交之后再执行某些操作 → 引发对 TransactionSynchronizationManager 的探究

    开心一刻 昨晚,小妹跟我妈聊天 小妹:妈,跟你商量个事,我想换车,资助我点呀 妈:哎呀,你那分扣的攒一堆都够考清华的,还换车资助点,有车开就不错了 小妹:你要是这么逼我,别说哪天我去学人家傍大款啊 妈 ...

  3. @RequestBody中使用@DateTimeFormat报错：JSON parse error: Expected array or string.; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException

    原因分析 根据异常提示:不匹配输入异常,指输入的参数错误,说是只支持String类型和Array数组类型的. @PostMapping("/test") public Dto ge ...

  4. 强化学习从基础到进阶--案例与实践[7.1]：深度确定性策略梯度DDPG算法、双延迟深度确定性策略梯度TD3算法详解项目实战

    强化学习从基础到进阶--案例与实践[7.1]:深度确定性策略梯度DDPG算法.双延迟深度确定性策略梯度TD3算法详解项目实战 1.定义算法 1.1 定义模型 !pip uninstall -y par ...

  5. 19.3 Boost Asio 多线程通信

    多线程服务依赖于两个通用函数,首先boost::bind提供了一个高效的.简单的方法来创建函数对象和函数对象适配器,它的主要功能是提供了一种将函数和它的参数绑定到一起的方法,这种方法可以将具有参数的成 ...

  6. PID 控制在医学麻醉过程血压控制中的应用｜期末课程设计｜PID控制器｜自动控制原理

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...

  7. 优化算法之梯度下降｜Matlab实现梯度下降算法

    题目要求: 使用Matab实现梯度下降法 对于函数: min ⁡ f ( x ) = 2 x 1 2 + 4 x 2 2 − 6 x 1 − 2 x 1 x 2 \min f(x)=2 x_{1}^{ ...

  8. (C语言)每日代码||2023.12.21||C语言预处理命令，#define、#line、__LINE__、__FILE__

    #include <stdio.h> #define AAA 111 void test() { printf("__LINE__ = % d\n", __LINE__ ...

  9. Asp .Net Core 系列：Asp .Net Core 集成 Panda.DynamicWebApi

    目录 简介 Asp .Net Core 集成 Panda.DynamicWebApi 配置 原理 什么是POCO Controller? POCO控制器原理 ControllerFeatureProv ...

  10. IDEA 2024.1：Spring支持增强、GitHub Action支持增强、更新HTTP Client等

    有段时间没有更新IDEA了,早上看到 IntelliJ IDEA 2024.1 EAP 5发布的邮件提示,瞄了一眼,发现真的是越来越强了,其中不少功能对我来说还是非常有用的.也许这些能力对关注DD的小 ...