didi / logicflow Goto Github PK
View Code? Open in Web Editor NEWA flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。
Home Page: https://site.logic-flow.cn
License: Apache License 2.0
A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。
Home Page: https://site.logic-flow.cn
License: Apache License 2.0
hi,社区的各位小伙伴:
最近 LogicFlow 收到了一些用户反馈,期望 LogicFlow 能兼容 IE 。
如果在你的使用场景中需要在 IE 中使用 LogicFlow,就在此提交一条评论吧,评论内容包括:
欢迎大家多多反馈交流!
LogicFlow 社区
问题描述
如何在节点上自定义展示多条属性文本?并且支持定位
如何只删除连接线
目前的DndPanel写死了几种自定义节点,不支持自定义节点和选区这种功能在里面显示。
拓展组件 DndPanel
在拖拽到画布时不显示节点,可能是enter事件出了问题。
问题描述
画布没有设置菜单时,也阻止了默认的右击。
期望
画布没有设置菜单是,不阻止默认的右击。
画布设置菜单是,展示菜单,阻止默认的右击。
RT
社区的各位小伙伴:
大家好!
LogicFlow 开源两个多月,star 数成功突破 1k 。但我们深知 LogicFlow 离优秀、成熟的框架还有距离。为了能更好地服务开发者,让大家能更多地参与到 LogicFlow 的开发中来,同时也期望大家能够更多地了解 LogicFlow ,我们决定推出 LogicFlow 征文活动。
来一点写作灵感!文章内容可参考但不限于以下内容:
新手尝鲜:
还记得第一次安装使用 LogicFlow 吗?还记得把 LogicFlow 嵌入到自己的项目中少写代码,不用操作底层图形的兴奋吗?还记得使用 LogicFlow 遇到的问题、当时怎么解决的吗?欢迎分享 LogicFlow 的教程、实践。
源码解析:
LogicFlow 在框架设计和技术选型上花了大量时间,团队成员在设计之初进行了充分的讨论与尝试。如果你对 LogicFlow 中的任意模块有深入了解,或者你想了解其中某个模块的实现,欢迎撰写源码解析类文章输出到社区。在你探究源码过程中,如果发现有设计不合理或者写的不够好的代码,欢迎随时给我们提 PR ,你的 PR一经采纳,我们将为你寄出一份 LogicFlow 周边礼品。
应用案例:
对于一个开源项目来说,在各种业务场景的应用是最能提现它价值的地方。在 LogicFlow 用户群里,经常看到来自不同公司、不同业务的小伙伴在使用过程中提问,何不借此次机会把你的应用场景分享给广大的社区朋友呢?相信你在使用 LogicFlow 过程中一定有独特的方式和业务场景,LogicFlow 非常需要来自于各种业务场景下的应用案例。
基于 LogicFlow 的二次开发:
社区小伙伴 you 基于 LogicFlow 进行了二次开发,设计出了一套低代码平台:http://hello.321zou.com/ 如果你也有自己的想法和实践,欢迎多多分享,期待你和 LogicFlow 擦出不一样的火花。
写一个插件:
看过 揭秘 LogicFlow 的拓展机制 这篇文章的小伙伴,一定知道 LogicFlow 插件化的**。可以写写你设计的插件的背景,为什么要写这样一个插件?插件有什么功能,插件的设计**、实现细节等等。
贡献文档:
我们收到了一些关于 LogicFlow 文档某个章节难理解的反馈,但是现在团队人力有限,在快速迭代的同时,还要处理群里大家的提问、撰写相关技术文档和使用手册。如果你在使用的过程中发现文档描述不够清晰,示例不够通俗易懂,我们真诚希望你来为 LogicFlow 文档贡献,如:大家在 issue 中提出的 LogicFlow 自定义章节写的比较难理解、不好上手,无论是上手指南,还是示例展示,都期望你来提 PR,一经采纳会在文档中标注贡献者 Github 账号友链。
犀利吐槽:
我有一个 idea:
团队内部维护者的创意是有限的,但社区内小伙伴们的创意是无限的,我们希望和你们一起携手共创。不管你是研发还是产品,假如你有一个很好的 idea,你可以通过本次活动来展现你的创意。包括但不仅限于业务背景、需求调研、需求价值、技术选型、结构流程图等等。我有一个 idea 就差程序员了,这次让 LogicFlow 团队来帮你实现这个愿望。只要你敢想,我们就敢做。还等什么,快来展现你的创意吧!
2021 年 4 月 1 日 ~ 2021 年 5 月 31 日
活动结束后的 7 个工作日内完成评选,我们将通过在你的评论下留言 & 用户群公告的方式通知你的文章是否入选,请记得关注你的 Github 和 群消息哦~
欢迎各位小伙伴踊跃参与,将你对 LogicFlow 的理解输出到社区,分享给广大的用户,帮助更多的开发者!
注:本次活动最终解释权归 LogicFlow 官方所有。
目前 LogicFlow 的文档和示例还是有不太完善的地方,大家可以把在使用过程中,遇到的类似 “想实现某个功能但没有相关文档” 的问题记录到该 issue 下,我们会专门对文档和示例做一次优化。
优化建议举例:
问题描述
第一次进入到有默认数据的LogicFlow页,点击节点右键事件触发正常。
然后回退到其他页,再次进入到LogicFlow页,再次点击节点右键事件,就会多触发一次,
... 重复上述动作,每进入到LogicFlow页,右键事件触发次数多增加一次
环境信息描述
至少包含以下部分:
最简复现demo
对首页提供的vue demo,进行了修改,可以复现此bug
https://github.com/tongtie/logicflow_vue_demo.git
感觉是Menu中的click事件多次注册导致。
前端新手,也有可能是vue框架结合Logicflow用的不对,没有写组件销毁啥的导致,请帮忙定位下,谢谢
问题描述
请用简洁的语言描述你遇到的bug,至少包括以下部分,如提供截图请尽量完整:
环境信息描述
至少包含以下部分:
windows10 chrome 89.0.4389.90
最简复现demo
一般来说通过文字和截图的描述我们很难定位到问题,为了帮助我们快速定位问题并修复,请按照以下指南编写并上传最简复现demo:
官方文档示列代码
节点hover状态仅展示锚点,静默模式下没有锚点,缺少标识,可以hover状态支持展示节点外框
问题描述
请用简洁的语言描述你遇到的bug,至少包括以下部分,如提供截图请尽量完整:
@logicflow/extension/lib/style/index.css
才出现环境信息描述
至少包含以下部分:
最简复现demo
一般来说通过文字和截图的描述我们很难定位到问题,为了帮助我们快速定位问题并修复,请按照以下指南编写并上传最简复现demo:
可以反馈下项目中需要的,但是 LogicFlow 目前还不支持的能力。
问题描述
在运行时修改元素样式时,需要在view中根据properties修改,这回产生以下问题:
在拖动到可替换节点上面的时候,这个节点高亮或者拖入节点的颜色。
提供 logicflow.min.js 文件
version:0.2.7
问题描述
目前 grid 样式只能在初始化 LogicFlow 时设置,但不能动态修改。
期望
支持通过 API 动态设置 grid 的类型和样式
场景
节点事件文档不全,例如:node:mouseenter没有
跪求出一个vue版本的
请问分组节点支持吗?可以把基本节点拖进组里,拖拽组的时候组里的基本节点跟随移动,也可以拖拽移出组。
节点外框标识仅支持虚线且样式固定,不支持设置为实线,希望可以把线样式定义放开
问题描述
节点下文本双击编辑,偶然无反应,eg:双击锚点时。
通过配置数据进行连线时,直线不能找到距离最近的两个锚点进行相连。
希望可以在折线双击位置添加文案,不用再都移动文案
使用 Logic Flow 提供的 h 方法来创建 SVG 元素。对于复杂的元素,可不可以支持导入svg文件,不用一个标签一个标签创建。
目前是监听了点击事件去自己实现的,我感觉内部应该有个当前是否有元素被选中,只需要抛出这个事件就行
全局能够知道哪个元素被选中了 和 全局失去了选中
目前logicflow在extension中内置了bpmnElements和bpmnAdapter两个插件,对于bpmn支持存在如下问题:
RT
文本编辑的时候,移动滚轮 编辑的文本框能同时移动或者消失
感谢正在使用和关注 LogicFlow 的开发者,我们会持续投入,让 LogicFlow 项目和社区更加繁荣。
参与LogicFlow问卷,问卷地址:https://wj.qq.com/s2/9588335/2b7b/。我们会每隔一段时间抽出一部分填写问卷的用户,送出LogicFlow纪念T恤。(目前已经送出第一批30名用户)
需求:
两节点相连接时,增加监听事件,编写相应的规则,验证是否可连接。无需自定义节点添加连线规则
问题描述
做一个审批流,希望开始节点只能连接一个其他节点,但是以下代码不符合期望
最简复现demo
lf.register('START', ({ CircleNode, CircleNodeModel }) => {
class StartNodeModel extends CircleNodeModel {
// 开始 0个连入 1个连出
setAttributes() {
this.targetRules.push({
message: '开始节点只能连出',
validate: (source, target) => {
return false;
},
});
this.sourceRules.push({
message: '开始节点只能连出一条分支',
validate: (source, target) => {
console.log('触发source', source, target);
const arr = lf.getEdge({
sourceNodeId: source.id,
});
if (arr.length === 0) {
return true;
} else {
return false;
}
},
});
}
}
return {
view: CircleNode,
model: StartNodeModel,
};
});
bug复现操作
第一次连接处于选中状态的时候,可以对同一个节点连接多次,没有触发sourceRules里面的规则,后续取消选中状态后恢复正常
问题描述
比如我想我的edgeMenu只有删除选项,那么只能通过自定义方式传入进去,如:
const edgeMenu = [ { text: '删除连线', className: 'lf-menu-item', callback(edge) { graphModel.removeEdgeById(edge.id); }, }, ];
但我在自定义配置时,不能获取到graphModel
,所以不能实现对边的操作。
节点类似(但节点可以通过自定义节点模型实现,可以满足这个需求)
期望可以支持两种方式。
edgeMenu
已经支持了删除连线、编辑文本,我只想要显示删除连线。graphModel
, 方便用户自己实现对边或节点的操作。自定义节点:使用 Logic Flow 提供的 h 方法来创建 SVG 元素。对于复杂的元素,可不可以支持导入svg文件,不用一个元素一个元素创建。
version:0.2.*
目前自定义节点成本较高:
期望:
问题描述
目前看文本只能居中。能否增加靠上左右下,或者根据position自定义
version:<=0.2.8
问题描述:
内部使用装饰器时会有 TypeScript 类型报错 ts(2345),例如:
可能原因:
以上图为例,MultipleSelect 继承自 preact 的 Component,其类型自然也由 preact 提供。
装饰器 @observer 的函数参数类型由 mobx-react 提供,具体类型如下:
其中 IReactComponent 是一个联合类型,每一种都由 React 提供:
也就是 preact 提供的类型与 react 提供的类型不能匹配。
选择的过程中,右键弹出浏览器默认菜单,则会出现当前正在绘制的选择框不消失的问题。
问题描述
使用拖拽新增节点在properties下定义了一个data属性,开发环境和打包到生产环境取值方式不一致
环境信息描述
最简复现demo
//增加节点
let obj = {
type: "rect",
text: item.name,
des: item.des,
properties: {
data: JSON.stringify({
task_type: 1
})
}
}
this.lf.dnd.startDrag(obj);
//从节点取值
let nodeObj = this.lf.getProperties(node.id);
let properties = {};
if(nodeObj.data){
// 项目打包需要这样取值
properties = JSON.parse(nodeObj.data);
}else if(nodeObj.__ob__){
// 测试环境需要这样取值
properties = JSON.parse(nodeObj.__ob__.value.data);
}
请问一下可以支持配置泳道的,最好有支持vue的案例,谢谢
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.