zoukankan      html  css  js  c++  java
  • Flowable源码分析:Flowable-ui-task模块流程图绘制过程

    本文主要介绍,Flowable task中,从点击“显示流程图”开始,到从后台获取流程图,渲染到页面的过程。

    1. ‘显示流程图’按钮所在页面
    图片名称
    如上图,该页面布局为process-detail.html
    其中‘显示图’按钮对应代码为

          <div class="btn-group pull-right" ng-show="model.processInstance.graphicalNotationDefined">
                <button class="btn" id="processDiagramTrigger" translate="PROCESS.ACTION.SHOW-DIAGRAM" ng-click="showDiagram()"></button>
          </div>
    

    html中的第一行显示其使用的controller为ProcessDetailController,追踪该controller在process.js第39行

    2. 点击事件响应

    在ProcessDetailController中包含点击事件对应函数showDiagram()函数,在process.js第174行

    $scope.showDiagram = function() {
            var modalInstance = _internalCreateModal({
                template: appResourceRoot + 'views/modal/process-instance-graphical.html',
                scope: $scope,
                show: true
            }, $modal, $scope);
    
        };
    

    _internalCreateModal定义了一个弹出窗口,如下图所示:

    图片名称

    该弹出窗口的页面布局对应template: appResourceRoot + 'views/modal/process-instance-graphical.html'html文件
    该文件中第一行显示其使用的是ShowProcessDiagramCtrl controller,追踪这个控制器也在process.js中,位于第184行
    第26行<div id="bpmnModel"/>
    我们最终是将图片绘入这个div中

    3. 绘制图形
    我们进入ShowProcessDiagramCtrl这个controller中,其主要内容位于$timeout()中(第437行)

          jQuery("#bpmnModel").attr('data-model-id', $scope.model.processInstance.id);
          jQuery("#bpmnModel").attr('data-model-type', 'runtime');
    

    这段代码将要显示图的流程实例或流程定义的id传给bpmnModel(即前面定义的那个div),data-model-type定义要显示的是流程实例图还是流程定义图还是其他什么类型的图。

          var viewerUrl = appResourceRoot + "../display/displaymodel.html?version=" + Date.now();  
          var amdDefine = window.define;
          window.define = undefined;
          ResourceService.loadFromHtml(viewerUrl, function () {
               window.define = amdDefine;
          });
    

    这里加载displaymodel.html页面,该页面中主要加载几个js文件,功能为为前面获得的bpmnModel这个div绘制流程图。
    其中
    <script type="text/javascript" src="../display/bpmn-draw.js"></script>为画图工具,为不同的任务节点绘制不同的图案
    <script type="text/javascript" src="../display/displaymodel.js"></script>处理一些逻辑、事件等
    下面对这两个文件进行简单介绍:

    • displaymodel.js
      该文件最后一行_showProcessDiagram();是绘图的入口
      通过url去后台获得绘制图形所需数据,代码如下:
    url: modelUrl + '?nocaching=' + new Date().getTime()
    

    其中modelUrl可跟踪到455行,根据data-model-type(类型,判断是流程实例还是流程定义等)和data-model-id(要显示的流程实例或流程定义的id)来确定。

    得到数据中的elements,即每个节点绘制所需的数据列表。
    后面根据element.tpye调用bpmn-draw.js中的绘制方法画图。

    • bpmn-draw.js
      该文件定义绘制开始节点、任务节点、结束节点等不同种节点的方法,每个方法都包含element参数,即待节点的属性信息。
      绘制不同节点类型的节点形状、高度、颜色等,添加鼠标悬浮点击等事件(在deployment.js中定义)。

    补充
    1) 如果想为节点添加点击事件,可在displaymodel.js的_addHoverLogic方法的topBodyRect.mouseout()方法(311行)后添加:

        topBodyRect.click(function(){
           console.log('function clicked !');
        })
    

    2) 如果想改变或添加节点element的属性,可在displaymodel.js的第580行后面添加:
    element = Object.assign({}, element,{parentId: '123456'});
    (这里涉及的主要知识点为JS对象属性的修改,JS本身不支持对象属性修改,因此使用Object.assign(target, source,source2,...),即后面source...中的内容从后往前整合、重复值覆盖,最终赋值给target返回)。

    刚开始学习,对更深层次内容不太熟悉,相关术语可能不太准确,欢迎大家提出宝贵的意见 > <

    步履不停
  • 相关阅读:
    oracle数据库根据年和月查询出表中 某年某月的数据信息
    分页问题,js之间比较不可以是字符串与字符串比较
    layer.load("试题分析中,可能需要一段时间,请稍后......",0);解析
    编译java程序
    java语言特性
    JDK
    超链接样式属性
    背景样式
    表格合并操作
    表单
  • 原文地址:https://www.cnblogs.com/yuanyunjing/p/13405786.html
Copyright © 2011-2022 走看看