topic Re: Actviti Modeler not working on Internet explorer in Alfresco Archive

Actviti Modeler not working on Internet explorer

ani123 — Mon, 22 Jun 2015 07:42:41 GMT

Hello I have installed Activiti Explorer version 5.17. I cannot get the BPMN process modeler to work on Internet Explorer. I can see the BPMN editor, and can draw a BPMN diagram.But when I try to save a Model which has connections I get the following error, on model saveMy question is a) Is Activ

Re: Actviti Modeler not working on Internet explorer

ani123 — Wed, 24 Jun 2015 19:56:52 GMT

Hello
Can anybody comment on this, when you get a chance?
The issue I am seeing is coming from the apache.batik code, when it tries to save a model, which has connections in it.
Any help is appreciated.

Thanks
Ani

Re: Actviti Modeler not working on Internet explorer

jbarrez — Tue, 30 Jun 2015 19:28:13 GMT

a) yes, IE9+

What is the version of IE you are running it on?

Re: Actviti Modeler not working on Internet explorer

ani123 — Tue, 30 Jun 2015 22:06:55 GMT

I am using IE 11. I see the same issues with IE 9 and IE 10 too.

As mentioned, the issue occurs only if there is a transition between two activitieis / event etc. If there are no transitions / sequence flows in the model, the model can be saved.

Thanks for any help. The stack trace does show the org.apcahe.batik throwing an exception. I am not sure if this is related to the
—-> arrow shape in the transition line being drawn.

Excuse me if I am referring to an incorrect example. But several links on IE and SVG, do discuss issues with rendering of transitions, with a triangle/pointer head. One such link is

http://stackoverflow.com/questions/15588478/internet-explorer-10-not-showing-svg-path-d3-js-graph

Though this one is slightly different: It does render the transition properly, but does not save the model.

Any help is appreciated.

Best Regards
Ani

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Thu, 02 Jul 2015 12:38:42 GMT

We are having the same issue. I printed out the svgDOM generated from toolbar-default-actions.js:

<code>
        var svgDOM = DataManager.serialize(svgClone);
</code>

The first few lines of the result for a simple workflow with a start node, human task and end node are:

<code>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsryx="http://oryx-editor.org" id="sid-318ECE9A-6742-4EF0-8124-DBA9D92054EC" width="433" height="159" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg"><defs><marker id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Dstart" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
     undefined
   <path id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Ddefault" display="none" fill="white" stroke="#585858" stroke-width="1" d="M 5 0 L 11 10"/>
</code>

As you can see there is "undefined" just before the path tag so I'm wondering if this is the cause of the issue.

Jim

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Thu, 02 Jul 2015 12:40:30 GMT

Actually there is another "undefined" in the string:

<code>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsryx="http://oryx-editor.org" id="sid-318ECE9A-6742-4EF0-8124-DBA9D92054EC" width="433" height="159" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg"><defs><marker id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Dstart" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
     undefined
   <path id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Ddefault" display="none" fill="white" stroke="#585858" stroke-width="1" d="M 5 0 L 11 10"/>
    </marker><marker id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Dend" refX="15" refY="6" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="12" orient="auto">
     <path id="sid-1A91CA7E-4FB9-492B-BD2A-920C1E872F7Darrowhead" fill="#585858" stroke="#585858" stroke-linejoin="round" stroke-width="2" d="M 0 1 L 15 6 L 0 11 Z"/>
    </marker><marker id="sid-AB86403C-01FA-4E81-94DC-9675EDAD13AEstart" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
     undefined
   <path id="sid-AB86403C-01FA-4E81-94DC-9675EDAD13AEdefault" display="none" fill="white" stroke="#585858" stroke-width="1" d="M 5 0 L 11 10"/>
</code>

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Thu, 02 Jul 2015 12:50:26 GMT

The undefined text is not the issue. I eliminated those from the string and still get the same error.

Re: Actviti Modeler not working on Internet explorer

ani123 — Thu, 02 Jul 2015 15:13:23 GMT

HI Jim
Thanks for your comment. So this does look like an issue with IE .
This is kind of blocking me , we are looking as Activiti as one of the options for process modeling.
Will wait for further comments , and hopefully can have a workaround/ solution.

Best Regards
Ani

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Thu, 02 Jul 2015 16:04:01 GMT

Hi Ani,

This is blocking us too as one of our clients only uses IE (currently IE11). If we find any solution I will post it here.

Jim

Re: Actviti Modeler not working on Internet explorer

ani123 — Thu, 02 Jul 2015 17:04:48 GMT

Thanks Jim
Do you think it is a bug in IE in the way it handles SVG?
Activiti does claim IE 9+ is supported. So this is surprising , that nobody has reported this earlier. Or may be not too many people use Acitiviti on IE.

Regards
Ani

Re: Actviti Modeler not working on Internet explorer

ani123 — Tue, 07 Jul 2015 19:04:05 GMT

HI
Can anyone on the Activiti side please comment on this , when they get a chance.
To summarize:
When we use IE , saving a BPMN process, which has connections/ transitions/ sequence flows between different elements is leading to an apache batik error. The stack trace is shown below. Note that the error does not occur when the BPMN model does not have any transitions ( which is not a common case anyway )

org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
Element type "path" must be followed by either attribute specifications, ">" or
"/>".
at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(XMLAbstra
ctTranscoder.java:136)
at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(SVGAbstra
ctTranscoder.java:156)
at org.activiti.rest.editor.model.ModelSaveRestResource.saveModel(ModelS
aveRestResource.java:79)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.
java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAcces
sorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:483)
at org.springframework.web.method.support.InvocableHandlerMethod.invoke(
InvocableHandlerMethod.java:215)
at org.springframework.web.method.support.InvocableHandlerMethod.invokeF
orRequest(InvocableHandlerMethod.java:132)
at org.springframework.web.servlet.mvc.method.annotation.ServletInvocabl
eHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:104)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingH
andlerAdapter.invokeHandleMethod(RequestMappingHandlerAdapter.java:749)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingH
andlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:689)
at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapt
er.handle(AbstractHandlerMethodAdapter.java:83)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(Dispatch
erServlet.java:938)
at org.springframework.web.servlet.DispatcherServlet.doService(Dispatche
rServlet.java:870)
at org.springframework.web.servlet.FrameworkServlet.processRequest(Frame
workServlet.java:961)
at org.springframework.web.servlet.FrameworkServlet.doPut(FrameworkServl
et.java:874)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:653)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkSer
vlet.java:837)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:731)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:303)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:208)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52
)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:208)
at org.activiti.explorer.servlet.JsonpCallbackFilter.doFilter(JsonpCallb
ackFilter.java:57)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:208)
at org.activiti.explorer.filter.ExplorerFilter.doFilter(ExplorerFilter.j
ava:42)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:208)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV
alve.java:220)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV
alve.java:122)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(Authentica
torBase.java:505)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j
ava:170)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j
ava:103)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:
957)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal
ve.java:116)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav
a:423)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp
11Processor.java:1079)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(
AbstractProtocol.java:620)
at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.doRun(AprEndpo
int.java:2476)
at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.run(AprEndpoin
t.java:2465)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.
java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor
.java:617)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskTh
read.java:61)
at java.lang.Thread.run(Thread.java:745)

Re: Actviti Modeler not working on Internet explorer

vasile_dirla — Tue, 07 Jul 2015 23:22:38 GMT

Hi,
Jim you almost find it…

you arrived to this line:
<java>
var svgDOM = DataManager.serialize(svgClone);
</java>

if you investigate the value of the svgDOM you'll notice a malformed xml node:
<java>
<path id="sid-5CDCB4D9-2A8C-410E-943B-179E08B332E3_1" fill="none"
          marker-end="url("#sid-5CDCB4D9-2A8C-410E-943B-179E08B332E3end")"
         stroke-linejoin="round" stroke-width="2" d="M 306.141 191 L 350.125 191"/>
</java>

Did you notice the marker-end value ? it contains double quotes character (") and this will fail when the xml will be parsed by any XML parser (Batik transformer in our case)

The SVG editor when serializing a node is doing it like that:
<java>
attributes.each(function(attribute) {
    result += ' ' + attribute.nodeName + '="' + attribute.nodeValue + '"';
                         });
</java>
See: datamanager.js @ line: 420 in "serialize" function.

As you can see the serialized value of a attribute is obtained by simply concatenating the nodeName and the nodeValue but the node value is enclosed between double quotes (") and in this case any double quotes in the attribute value will make the xml invalid.

So, my suggestion is to change this function so it will parse the nodeValue before concatenating it and just replace all the double quotes with space when is used in a reference value like that i.e. "url(<value>)", or just simply replace all the double quotes with single quotes in any attribute value (this way will resolve the problem for all the attributes.)

This was the fix I did when I investigated the issue:
<java>
attributes.each(function(attribute) {
    var str = attribute.nodeValue;
                                // will just remove the " character from the reference values of an attribute
                                // so attr="url("#likn")" will become: attr="url(#link)"
                                // exactly like the other browsers do in this case.
    str = str.replace(/^url$\"#/, 'url(#').replace(/\"$$/, ')');
    result += ' ' + attribute.nodeName + '="' + str + '"';
                         });
</java>

This is caused by the fact that in IE if you create dynamically a DOM element with an attribute having a reference value it will add automatically these double quotes.

Hope this will help you.

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Wed, 08 Jul 2015 10:09:29 GMT

Thank you so much for the reply with the fix! I will certainly give this a try and let the forum know the result.

Jim

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Wed, 08 Jul 2015 12:19:01 GMT

Unfortunately the fix did not work. I see no stencil set or diagram when I open a model. We are using the editor-app that is in activiti-explorer.war file in the Activititi 5.17.0 distribution. From what I can tell the code in question is in the file oryx.debug.js at line 964. I do not see a datamanager.js file although I see it in the github activiti-webapp-explorer2 code.

Regards,
Jim

Re: Actviti Modeler not working on Internet explorer

vasile_dirla — Wed, 08 Jul 2015 12:28:39 GMT

if you want to do it fast, just change it in the oryx.debug.js (it's exactly the same)
The other approach needs to download the sources from github, do the change in the datamanager.js file and rebuild the oryx.debug.js file using the build.xml script.

If you are interested only in patching your current application you could fix it by replacing it directly in the javascript file which is loaded by your application. (probably oryx.debug.js as i can understand from your comment)

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Wed, 08 Jul 2015 12:48:46 GMT

I put the fix back in and restarted everything and it is now working in IE11 for a simple model.

Many thanks!

Re: Actviti Modeler not working on Internet explorer

ani123 — Wed, 08 Jul 2015 14:51:40 GMT

HI
Thanks for the fix.
Jim, I am seeing exactly seeing the same issue that you mention in the earlier comment.
I too was wondering how I do not see the datamanager.js in the distribution, so did change Oryx.debug.js

With the fix, the apache batik error is not seen any more, on saving the model.
But I still do not see any diagram or stencil/ palette once the model is saved.
I did restart tomcat etc, and still the same issue.

Was wondering how you resolved the issue in your environment.
Thanks a lot to both of you for your time and sharing your thoughts. Really appreciate it.

Best Regards
Ani

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Wed, 08 Jul 2015 15:54:28 GMT

We are dynamically loading the stencil set as we have several different ones based on the logged in user. One strange issue I had was editing a model in IE and saving it and then re-opening it and the original model was displayed. Opening the same model in Chrome showed the edited version. I exited IE and restarted and then it displayed the edited model. Not sure what happened there unless something was cached. I need to do some more testing on that.

Anyway, we don't have a problem with the stencilset pallets.

Jim

Re: Actviti Modeler not working on Internet explorer

ani123 — Wed, 08 Jul 2015 16:07:03 GMT

Hi Jim
Sorry I think I was not correct in my earlier comment about the stencil set.
What I am seeing is

a) With the fix the model is saved, no errors

b) However the model diagram itself is not seen any more after it is saved.
Click on the mode; press 'save and close the editor'
The model workspace page appears. When you select the model on the left, the right hand side pane is supposed to show you the diagram, but that is empty

Also I click on the same model in the model workspace page, and press the Edit button I see an empty diagram in the editor

So I am wondering how the diagram is lost. Is this some issue with rendering the saved diagram or

Or may be it has not been saved ?

I am not able to attach any screen shots , which would have explained what I mean.
Thanks a lot for all your comments. Really appreciated

Best Regards
Ani

Re: Actviti Modeler not working on Internet explorer

jrnorrisjr — Thu, 09 Jul 2015 10:39:00 GMT

Sorry Ani but I don't have any idea what is happening in your case. I'd suggest using the rest api to get the data (json and png) from Activiti for a model created in IE and Chrome/Firefox and comparing them. You can do that with Postman in Chrome. Since you are not seeing a diagram I expect there is no png data in the Activiti db for the model so it didn't actually get created. You might also check if there is anything else showing up in the tomcat logs indicating that some other error(s) happened. I don't know what debugging level Activiti is set for but I'd figure out how to set it to DEBUG if it isn't to get more logging info.

Jim