论坛首页 Web前端技术论坛

基于JQUERY的WEB在线流程图设计器GOOFLOW 0.6版

浏览 143291 次
精华帖 (11) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-03-07  
怎样在开启area功能之后,也能触发node等相关事件
0 请登录后投票
   发表时间:2014-03-19  
area只是为了区分流程图分类与功能,视觉上好看而设的,其实与NODE不在同一个容器中,所以无所谓哪个结点存在于哪个分区,如果你实在想判断,就通过坐标和宽高来判断吧。
0 请登录后投票
   发表时间:2014-03-19  
dengyulong 写道
当我单击node时能触发onItemFocus事件,为什么单击area时不能触发,怎么样可以再单击area时触发事件?

AREA并不是流程图的数据实体,实际中没有什么用,只有在展示时有助于观察者的理解。AREA并不设置可触发FOCUS事件。
点击AREA左上角的圆按钮,即可变色。
0 请登录后投票
   发表时间:2014-03-19  
sdlddr 写道
dengyulong 写道
当我单击node时能触发onItemFocus事件,为什么单击area时不能触发,怎么样可以再单击area时触发事件?

AREA并不是流程图的数据实体,实际中没有什么用,只有在展示时有助于观察者的理解。AREA并不设置可触发FOCUS事件。
点击AREA左上角的圆按钮,即可变色。

我感觉area可以应用为部门
0 请登录后投票
   发表时间:2014-04-14  
请lz查一下,setName方法是不是有问题,我现在每次调用setName方法,传参是node的时候,最后节点的width和height都会放大2个像素。
gooFlow.js里面setName方法里的this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"});改成this.$nodeDom[id].children("table").css({width:width-4+"px",height:height-4+"px"});就正常了!
0 请登录后投票
   发表时间:2014-04-14  
possible 写道
请lz查一下,setName方法是不是有问题,我现在每次调用setName方法,传参是node的时候,最后节点的width和height都会放大2个像素。
gooFlow.js里面setName方法里的this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"});改成this.$nodeDom[id].children("table").css({width:width-4+"px",height:height-4+"px"});就正常了!

您好,感谢您的保贵意见!我在IE8和CHROME上检查时,没有发现这种问题,估计是浏览器之间细微的不兼容吧。
0 请登录后投票
   发表时间:2014-04-24  
楼主很强大,必需顶一个。
您的代码我已花了三四天时间仔细深入研究。
看这代码风格,楼主是PHP程序员吧。
然后使用jQuery插件模式,也稿另一个版本。主要思想全部从楼主这儿吸收。目前还没实现折线功能,节点文本编辑功能,节点删除功能。
Area功能,我没打算使用。这个,在我们的场景中,并不多见。

不过,楼主,关于节点拖拽问题,以及改变节点尺寸问题。这两个功能的实现,我剥离到了专门的jQuery插件中去。
并且解决了节点过多时,显示不全问题(因为你的画布大小是当前视口大小的两倍,节点太少,看上去没必要。节点太多,又显示不全。这里我使用了自适应模式,重新计算当前节点所需要的最大宽度有高度)。
等完成了,发上来和楼主交流交流。
0 请登录后投票
   发表时间:2014-04-24  
yangsong158 写道
楼主很强大,必需顶一个。
您的代码我已花了三四天时间仔细深入研究。
看这代码风格,楼主是PHP程序员吧。
然后使用jQuery插件模式,也稿另一个版本。主要思想全部从楼主这儿吸收。目前还没实现折线功能,节点文本编辑功能,节点删除功能。
Area功能,我没打算使用。这个,在我们的场景中,并不多见。

不过,楼主,关于节点拖拽问题,以及改变节点尺寸问题。这两个功能的实现,我剥离到了专门的jQuery插件中去。
并且解决了节点过多时,显示不全问题(因为你的画布大小是当前视口大小的两倍,节点太少,看上去没必要。节点太多,又显示不全。这里我使用了自适应模式,重新计算当前节点所需要的最大宽度有高度)。
等完成了,发上来和楼主交流交流。

欢迎交流!不知能否帮我在我的作品基础上,加入你的自适应模式功能?
0 请登录后投票
   发表时间:2014-04-25   最后修改:2014-04-25
sdlddr 写道
yangsong158 写道
楼主很强大,必需顶一个。
您的代码我已花了三四天时间仔细深入研究。
看这代码风格,楼主是PHP程序员吧。
然后使用jQuery插件模式,也稿另一个版本。主要思想全部从楼主这儿吸收。目前还没实现折线功能,节点文本编辑功能,节点删除功能。
Area功能,我没打算使用。这个,在我们的场景中,并不多见。

不过,楼主,关于节点拖拽问题,以及改变节点尺寸问题。这两个功能的实现,我剥离到了专门的jQuery插件中去。
并且解决了节点过多时,显示不全问题(因为你的画布大小是当前视口大小的两倍,节点太少,看上去没必要。节点太多,又显示不全。这里我使用了自适应模式,重新计算当前节点所需要的最大宽度有高度)。
等完成了,发上来和楼主交流交流。

欢迎交流!不知能否帮我在我的作品基础上,加入你的自适应模式功能?


由于我这边代码在实现上,主要在设计思想上使用楼主的思想。不过,代码实现上,我已经按自己的代码风格作出了重构。
就像我说的那样,看上去,楼主像是PHP程序员一样。
而我,多年来一直写JAVA,JS习惯了他们的书写方法。

计算方法我想,楼主应该早就想到了。取最左上角的节点和最右下角节点(取右下角节点要加上宽度及高度计算总和哦)。
根据左上角节点的左上角坐标与右下角节点的右下角节点坐标之间的差值就是画布所需要的最大值。

自动适应问题已经在这个版本的代码中实现了。发上来和您分享交流交流。
当然,这个附件中还包含一些其他的东东(这些是我在工作中对现在公司平台作出的一些扩充),有兴趣的话可以看看。

多说一句。楼主的思维很强大。写那么多代码思维依然清晰。
这点,可能和你不太一样。代码多了,我看上去晕。我不太习惯一个函数方法的代码超过一屏(大多数情况下JAVA以及JS均保持这一习惯)。再复杂的逻辑,其实都是是由多个逻辑块构成。我认为还是根据功能不同,使用不同的方法实现。这样,代码在阅读起来要容易一些。

最后,在画箭头部分,JS操作VML以及SVG,我觉得太麻烦了。我打算使用raphael来实现。这是一个非常强大的东东。正在学习研究中。

当然,后面要是有时间,可以尝试整个流程图插件都用raphael来实现一下。

楼主画箭头那部分功能很强大。刚刚才搞明白,为什么SVG下,你要画两条Path。那个地方做得很巧妙。
我尝试用rapael来划箭头时,遇到了些问题。新画的箭头必需要放在一个div上吧。那么div就要和节点div重合。重合了箭头是没问题了。不过,节点又点不到了。点到了节点,又点不到箭头。其中的原因,我还没有完全搞明白。楼主能否赐教一二?



0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics