Open source Workflow engine Web designer Activiti Modeler 5.17.0 compatibility with IE11

First, the source code download

　　Activiti Official website: http://activiti.org/

Github:https://github.com/activiti/activiti

Official online download is Lib library files, documents and website sample, recommend using MAVEN management project, can not download library files, direct download source code, github source code is already 5.18.0, but the official has not released, from the following URL to find 5.17.0 source The code download link can be downloaded: https://github.com/Activiti/Activiti/releases, size 20.1M. The following directories are extracted:

Second, import eclipse

Officially provided a web demonstration project called Activiti-explorer.war, can be deployed directly into Tomcat run, in the source folder under the Moudules, there is a Activiti-webapps-explorer2 folder, which is Activiti-exp Lorer.war project directory, the project using MAVEN management, not familiar with the recommendations of MAVEN first study.

Select Import->exit maven projects in Eclipse, select the Activiti-wepapps-explorer2 directory, Import Pom.xml, wait for the project to build automatically, there will be a few errors after completion, are XML format errors, do not affect the operation. I am a Web project that is deployed in JDK1.8,TOMCAT8.

Under Chrome, use the Kermit:kermit login system, select the process--and process design workspace--Create a new model, and discover that the Web Designer is not open, and that it might be a path setup problem in the code, which is not a problem we want to solve. Simple processing, right-click Project in Eclipse, Properties--web project Setting--context root, name changed to Activiti-explorer, Redeploy the project (delete the project in Server--tomcat8, rerun the deployment), log in, create a new model, open the models designer:

Third, IE test

Test the Web Process designer in Ie11, and find the following bugs initially:

1. Internal Error errors on webpage

Later to be ported to their own projects, will not use these web source, this is not the main contradiction, open IE compatibility settings, add localhost can.

2. Use path after model save error

Modeler Graphing uses SVG (Scalable vector graphics), related tutorials: http://www.w3school.com.cn/svg/, if the arrow (the path element in SVG) is used in IE, the model save is unsuccessful, prompting the error " Unexpected error:could not save model, the hint in eclipse: the element type "path" must be followed by the property specification ">" or "/>". . In IE F12 open debug mode, compared with chrome found that the path in modeler.html in the Marker-start and Marker-end attribute values are more quotes, resulting in the Save path error.

Ie:

URL ("#sid -7278f570-b74e-4ee6-a21a-52a3b3bf3c26end") url ("#sid -7278f570-b74e-4ee6-a21a-52a3b3bf3c26start")

<Pathxmlns= "Http://www.w3.org/2000/svg"ID= "Sid-7278f570-b74e-4ee6-a21a-52a3b3bf3c26_1"Fill= "None"Marker-end= "url (&quot; #sid -7278f570-b74e-4ee6-a21a-52a3b3bf3c26end&quot;)"Marker-start= "url (&quot; #sid -7278f570-b74e-4ee6-a21a-52a3b3bf3c26start&quot;)"Stroke= "#585858"Stroke-linecap= "Round"Stroke-linejoin= "Round"Stroke-width= "2"D= "M 355.391 135 L 399.375 135" />

Chrome:

<PathID= "Sid-cb6f9dd4-d150-4072-8ef6-75b5ae54e9bf_1"D= "M210.609375 135l254.15625 135"Stroke= "#585858"Fill= "None"Stroke-width= "2"Stroke-linecap= "Round"Stroke-linejoin= "Round"Marker-start= "url (#sid-cb6f9dd4-d150-4072-8ef6-75b5ae54e9bfstart)"Marker-end= "url (#sid-cb6f9dd4-d150-4072-8ef6-75b5ae54e9bfend)"></Path>

Further trace discovery, in Oryx.debug.js, has the following code:

                    Markerurl = Markerurl.strip ();                     = Markerurl.replace (/^url\ (#/, ");                                         var  This . Getvalidmarkerid (Markerurl);                    Path.setattributens (null, "Marker-start", "url (#" + Markerstartid + ")");                                        Markersbythispath.push (this. _markers[markerstartid]);

The Setattributens function in Chrome does not have special handling for URLs (), whereas in IE the characters in the URL () are wrapped in quotation marks, y! After you set the breakpoint to redraw a path, the quotation marks cannot be deleted (NodeValue cannot be changed to no quotation marks) and the value set to URL (AAAA) will automatically become the URL ("AAAA")! Setattributens Address: http://www.w3school.com.cn/xmldom/met_element_setattributens.asp

And this JS obviously also has to consider this situation, replace takes into account ie, but save why not consider AH.

Getvalidmarkerid:function(markerurl) {if(Markerurl.indexof ("url (\" # ") >= 0) {            //Fix for IE9, additional quotes is added to the <id            varRawid = Markerurl.replace (/^url\ (\ "#/," "). Replace (/\" \) $/, "); return  This. ID +Rawid; } Else{Markerurl= Markerurl.replace (/^url\ (#/, "); return  This. Id.concat (Markerurl.replace (/\) $/, ")); }    },

The simplest way to do this is to replace the string with the following function in Toolbar-default-actions.js:

$scope. Save =function(successcallback) {if(! $scope. savedialog.name | | $scope. saveDialog.name.length = = 0) {            return; }        //Indicator Spinner Image$scope. Status ={loading:true        }; Modelmetadata.name=$scope. Savedialog.name; Modelmetadata.description=$scope. savedialog.description; varJSON =$scope. Editor.getjson (); JSON=json.stringify (JSON); varSelection =$scope. editor.getselection ();                $scope. Editor.setselection ([]); //Get the serialized SVG image source        varSvgclone = $scope. Editor.getcanvas (). Getsvgrepresentation (true);        $scope. editor.setselection (selection); if($scope. Editor.getcanvas (). properties["oryx-showstripableelements"] = = =false) {            varStripoutarray = JQuery (Svgclone). Find (". Stripable-element");  for(vari = stripoutarray.length-1; I >= 0; i--) {stripoutarray[i].remove (); }        }        //Remove all forced stripable elements        varStripoutarray = JQuery (Svgclone). Find (". Stripable-element-force");  for(vari = stripoutarray.length-1; I >= 0; i--) {stripoutarray[i].remove (); }        //Parse dom to string        varSvgdom =datamanager.serialize (Svgclone); varparams ={Json_xml:json, svg_xml:svgdom, Name: $scope. Savedialog.name, Descript        Ion: $scope. savedialog.description}; //Update$http ({method: ' PUT ', Data:params, ignoreerrors:true, headers: {' Accept ': ' Application/json ',                      ' Content-type ': ' application/x-www-form-urlencoded; Charset=utf-8 '}, Transformrequest:function(obj) {varstr = [];  for(varPinchobj) {Str.push (encodeURIComponent (p)+ "=" +encodeURIComponent (obj[p])); }                returnStr.join ("&"); }, url:kisbpm. Url.putmodel (Modelmetadata.modelid)}). Success (function(data, status, headers, config) {$scope. editor.handleevents ({Type:oryx. CONFIG.                Event_saved}); $scope. Modeldata.name=$scope. Savedialog.name; $scope. modeldata.lastupdated=data.lastupdated; $scope. status.loading=false;                $scope. $hide (); //Fire event to all listening                varSaveEvent ={Type:KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED, model:params, ModelId:modelMetaData.modelId, EventType:' Update-model '                };                KISBPM.eventBus.dispatch (KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED, saveevent); //Reset State$scope. Error =undefined; $scope. status.loading=false; //Execute any callback                if(successcallback) {successcallback (); }}). Error (function(data, status, headers, config) {$scope. Error= {}; Console.log (' Something went wrong when updating the process model: ' +json.stringify (data)); $scope. status.loading=false;    }); };

We remove the quotes from the svgdom and then IE clears the cache (restart?). ), Maven rebuild (ALT+F5, may also need to change name), tomcat Delete Project , redeploy run, save success!

  // Parse dom to string        var svgdom = datamanager.serialize (svgclone);         = Svgdom.replace (/marker-start= "url\ (" #/g, "marker-start=\" url (# "). Replace (/start" \) "/g," start\ ");         = Svgdom.replace (/marker-mid= "url\ (" #/g, "marker-mid=\" url (# "). Replace (/mid" \) "/g," mid\ ");         = Svgdom.replace (/marker-end= "url\ (" #/g, "marker-end=\" url (# "). Replace (/end" \) "/g," end\ ");        

3. Save and then click Edit Model, still show the pre-save model diagram

The initial diagnosis is that IE caches json, and you can see the JSON cache under directory C:\users\{your name}\appdata\local\microsoft\windows\temporary Internet files. Only in the future of the project to call JSON when the cache can be set, where you can clear IE cache or restart IE, not the main contradiction, but special modifications.

4. In some cases, the arrow of path disappears

Case one: Edit the model and click on the blank space of the drawing panel when nothing is done;

Scenario two: After using the shortcut to generate the model (that is, except start using drag and drop, the other components through the parent component of the lower right corner of the click to generate), when nothing is done, click on the blank space of the drawing panel;

This is only a display problem, and if you drag any component or click on path, the arrow will revert to its appearance. This is the UI rendering problem, perhaps due to the rendering order or transparency, this problem wants to solve the need to be very familiar with the SVG drawing, but I do not understand AH. Another idea is to move a node so that the page is re-rendered, such as moving the start to the left 10 and then to the right by 10.

Open source Workflow engine Web designer Activiti Modeler 5.17.0 compatibility with IE11