首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于jsplumb构建的流程设计器

项目背景 最近在准备开发工作流引擎相关模块,完成表结构设计后开始着手流程设计器的技术选型,调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发,保证定制化的便捷性,相关效果图及项目地址如下...我们需要以下基础功能来配合相关接口进行工作流相关设计数据的保存/修改 活动的添加/删除/移动 变迁的添加/删除 活动/变迁数据的全部读取 根据json渲染活动与变迁 相关引入依赖如下表所示 名称 功能 jsplumb.js...设计器主要依赖,用于绘制相关图形与动态操作实现 jquery.js jsplumb依赖的库 jquery-ui.js jsplumb依赖的库,进行拖拽绑定 contextMenu.js 实现右击菜单...,通过jsPlumb.draggable方法的stop方法注册实现 jsPlumb.draggable(id, { containment: 'parent',...方法进行变迁的删除,默认只删除变迁不删除连接的活动 function deleteConnect(id) { var connects = jsPlumb.getAllConnections()

46120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    推荐这几个流程图设计器web开发方案

    logicFlow 3.开源流程设计器web开发方案 3.1 Jsplumb ❝官方介绍:jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。...Jsplumb jsPlumb是比较早期的一个绘图组件,历史悠久,7年前就开源了,可以用来开发流程图设计器,但是它需要依赖jquery才能使用,因为其本身是基于DOM连线的一个库,核心主要包括以下几个模块...推荐阅读: jsplumb 中文基础教程[6] vue中使用jsplumb基本教程[7] 3.2.Antv G6 ❝官方介绍:G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅...] 3.4 LogicFLow ❝LogicFLow算是最新的流程设计器web方案,官方介绍:LogicFlow脱胎于滴滴技术团队在客服业务下的实践,是由滴滴智能中台体验平台研发的一款流程可视化的前端框架...与第一节提到的jsplumb不同的是,logicflow考虑到在基于DOM操作繁琐的前提,最资源消耗也比较大,而选择MVVM框架的理念,引入 Virtual DOM 来解决某些场景下的更新效率,也在一定程度上弥补

    3.6K10

    推荐这几个流程图设计器web开发方案

    3.开源流程设计器web开发方案 3.1 Jsplumb 官方介绍:jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。...jsPlumb是比较早期的一个绘图组件,历史悠久,7年前就开源了,可以用来开发流程图设计器,但是它需要依赖jquery才能使用,因为其本身是基于DOM连线的一个库,核心主要包括以下几个模块 ?...推荐阅读: jsplumb 中文基础教程 vue中使用jsplumb基本教程 3.2.Antv G6 官方介绍:G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅...3.4 LogicFLow LogicFLow算是最新的流程设计器web方案,官方介绍:LogicFlow脱胎于滴滴技术团队在客服业务下的实践,是由滴滴智能中台体验平台研发的一款流程可视化的前端框架...与第一节提到的jsplumb不同的是,logicflow考虑到在基于DOM操作繁琐的前提,最资源消耗也比较大,而选择MVVM框架的理念,引入 Virtual DOM 来解决某些场景下的更新效率,也在一定程度上弥补

    3.6K10

    如何查看jsplumb.js的API文档(YUIdoc的基本使用)

    www.github.com/dashnowords/blogs 博客园地址:《大史住在大前端》原创博文目录 华为云社区地址:【你要的前端打怪升级指南】 一.问题描述 最近向一些同事推荐了网页中实现流程图绘制的工具库jsplumb.js...但是在后来很多人反馈说找不到API文档,github官方仓库中的API文档链接失效了,jsplumb.js官网也找不到。 二....处理方法 其实API文档就放在官方代码仓中,只是需要一些小小的加工,具体步骤如下: 1.先从官方代码仓https://github.com/jsplumb/jsplumb 将master分支的工程拉取到本地...如果你开发的是一个工具库,需要生成完备的API文档,为了不影响源码阅读和开发,可以像jsplumb.js那样将注释语句单独写在一个文件中,因为是一个自动化工具,也没什么太多可讲的,有需要的朋友直接浏览一下官网就可以很容易地使用了

    2.1K00

    Python面试简历分享。

    django搭建后台,前端通过拖拽数据处理功能的操作,将数据/数据处理流程/建模方法等数据传到后端,后端根据传过来的参数,结合第一阶段编写好的方法对数据进行处理建模,并将结果返回前端进行相关图表展示,前端框架涉及...jsplumb(流程图)、datatable.js(表格)、echarts.js(图表)、d3.js(架构图),后端相关技术主要有django框架、Pandas、numpy、sklearn常见数据处理与分析库...供需求方对数据有直观的了解 职责:python工程师 编写爬虫程序,想出反反爬策略,数据清洗可视化 项目概况: 1、需要爬取的数据经过分析,考虑到数据量较多,采用scrapy-redis进行爬取,因为该框架实现

    3K42

    Laravel框架_php laravel框架

    laravel框架 一、laravel简介 laravel是一套优雅简介的PHP开发框架,受欢迎程度非常之高,功能强大,工具齐全; https://www.jianshu.com/p/206592c78113...二、简单介绍 1、laravel是基于mvc模式的php框架,m——模型层,v——视图层,c——控制器层;以下为laravel框架的目录文件,框出来的文件目录将在后续中用到: 2、什么是MVC的开发思想...app是应用的核心代码文件目录,以后的代码基本都在这里完成;   app/Http/Controller目录是应用的控制器文件;   routes.php是框架的路由文件,负责路由分配和映射;   ...Http下的类文件,比如上面目录中的User.php、Menu.php文件是应用的模型文件;   config目录是所有应用的配置文件目录;   public是框架的入口文件及静态资源文件目录;

    3.7K20

    框架分析(11)-测试框架

    框架分析(11)-测试框架 主要对目前市面上常见的框架进行分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步。...集成测试框架 Selenium可以与其他测试框架进行集成,如TestNG和JUnit等。这使得开发人员可以更好地组织和管理测试用例,实现更复杂的测试流程。...总结 Selenium框架具有多语言支持、多浏览器支持、元素定位、页面操作、等待机制、浏览器控制、测试报告、并行执行和集成测试框架等特性。...缺点 难以测试外部依赖 JUnit框架主要用于测试Java类的内部逻辑,对于依赖外部资源或环境的测试,需要使用模拟框架或其他工具进行处理。...不支持并发测试 JUnit框架默认是单线程执行测试用例,不支持并发测试。对于需要并发测试的场景,需要使用其他工具或框架

    22220

    【Android 逆向】Frida 框架 ( Frida 框架使用环境 | Frida 框架作用 | Frida 框架模块 )

    文章目录 一、Frida 框架使用环境 二、Frida 框架作用 三、Frida 框架模块 一、Frida 框架使用环境 ---- Frida 官网 : https://frida.re/ Frida...源码 : https://github.com/frida Frida 框架使用环境 : JDK 8 : 具体的版本是 java version “1.8.0_144” ; Python...3.75 版本 : https://download.csdn.net/download/han1202012/35909355 Apktool : 最新版本即可 ; 二、Frida 框架作用...---- Frida 框架作用 : 函数拦截 : 拦截到函数后 , 可以分析函数的参数 , 返回值 , 得到被拦截函数的处理逻辑 ; 分析逻辑 : 拦截函数 , 数据 , 分析函数之间的承接关系 ,...整体分析应用逻辑 ; 分析数据 : 分析 字符串 , 整数 , 浮点数 数据 , 找出 字符串拼接规律 , 加密逻辑 , 接口访问规律 ; 三、Frida 框架模块 ---- Frida 框架中 , 使用

    3.3K11

    Android精通之OrmLite数据库框架,Picasso框架,Okio框架,OKHttp框架

    标题图 OrmLite基础知识 什么是OrmLite框架,在我没用这个框架时,不知道它有多好,用了才知道很方便哦,为了提供开发效率,Android开发者需要懂得运行多种框架进行开发。...对于OrmLite框架是一种很轻量级的数据库操作框架,它的底层是由反射机制实现的。...OrmLite框架 来认识一下OrmLite的官网:http://ormlite.com/releases/ 展示 ?...接下来你会看到 @DatabaseField(columnName = "name") 这你就被奇怪了,这大概是OrmLite的框架的特性吧~ 在OrmLiteSqlite中,你会编写一个数据库帮助类,...并重写两个方法: onCreate()和onUpgrade() 在OrmLite框架中: OrmLite使用注解 自己创建一个实体类对应类 @中代表数据表(表名=“值为表名的名称,字段列的名称”)

    1.2K30

    框架

    一、了解什么叫框架 所谓框架是一个指定了规则的半成品,已经对基础的代码进行了封装并提供相应的API,开发者在使用框架时直接调用封装好的API,可以省去很多代码的编写,从而提高工作效率和开发速度。...所以针对各个方向各种语言实现的框架也就应运而生,如: Android 网络框架:AsyncHttpClient、Volley、OKhttp、Retrofit 图片加载框架:Picasso、Glide、ImageLoader...单元测试框架: Junit、TestNG、Unittest 自动化测试框架:Appium/Selenium、Airtest、Mocaca 前端框架:Vue、Angluar 后端框架:Flask、Express...所以多了解一些业界知名框架对测试的视野扩展还是很有利的。 那什么是网络框架? 从名字我们可以看出来,网络框架主要是网络请求,对请求构造、连接、请求、响应处理、http缓存等方面进行专项处理。...如果是非定制的第三方框架,可能你还要了解一些框架本身的特点,比如Volley框架对短而小的请求支持比较好,但对于数据较大的请求支持就不太好,类似上传文件这样的接口就要重点关注了。

    83810
    领券