开源项目地址：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. SqlSugar常见问题汇总

    1.已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭. There is already an open DataReader associated with this ...

  2. 做知识图谱遇到的环境问题合集【spacy、gensim、keras_contrib等】

    1.python:spacy.gensim库的安装遇到问题及bug处理 见: python:spacy.gensim库的安装遇到问题及bug处理_汀.的博客-CSDN博客1.spacySpaCy最新版 ...

  3. LyScript 实现绕过反调试保护

    LyScript插件中内置的方法可实现各类反调试以及屏蔽特定API函数的功能,这类功能在应对病毒等恶意程序时非常有效,例如当程序调用特定API函数时我们可以将其拦截,从而实现保护系统在调试时不被破坏的 ...

  4. C# 实现对网站Get与Post请求

    C# 是一种面向对象的编程语言,提供了强大的Web请求库和API来执行 HTTP GET 和 POST 请求.在C#中,我们可以使用 System.Net 命名空间下的 WebRequest 和 We ...

  5. 学生成绩管理系统｜Python小应用练习

    题目要求 实现学生成绩管理系统 输入学生成绩信息序列,获得成绩从高到低.从低到高.按某一门成绩的排列,相同成绩都按先录入排列在前的规则处理. 数据如下:(数据规则:学生姓名 高数成绩 英语成绩 大物成 ...

  6. mybatis批量插入支持默认值和自定义id生成策略的免写sql插件

    最近做项目时用了免写sql的插件但是发现批量操作不满足现有需求.所以,在原有基础之上扩展了批量的操作支持[支持插入默认值和自定义id生成策略].使用方法如下: 一:在pom文件中引入jar配置 < ...

  7. 同一份代码怎能在不同环境表现不同？记一个可选链因为代码压缩造成的bug

    壹 ❀ 引 某一天,CSM日常找我反馈客户紧急工单,说有一个私有部署客户升级版本后,发现一个功能使用不太正常.因为我们公司客户分为两种,一种是SaaS客户,客户侧使用的版本被动跟随主版本变动,而私有部 ...

  8. idea 报错: Unable to import maven project: See logs for details

    错误再现: idea 工具日志: 1) No implementation for org.apache.maven.model.path.PathTranslator was bound. whil ...

  9. 2023sdut_python实验

    ​ 7-1 sdut-温度转换 n = input() n = float(n) c = 5.0*(n-32.0)/9.0 print("%.2f" %(c)) #其中,c为变量 ...

  10. 【Unity3D】法线贴图和凹凸映射

    1 法线贴图原理 ​ 表面着色器中介绍了使用表面着色器进行法线贴图,实现简单快捷.本文将介绍使用顶点和片元着色器实现法线贴图和凹凸映射,实现更灵活. ​ 本文完整代码资源见→法线贴图和凹凸映射. ​ ...