cnhis-design-vue 3.1.6 → 3.1.7-beta.3

package/es/packages/bpmn-workflow/src/custom/customModeler/customBpmn/BpmnRenderer2.mjs

@@ -1 +1,1427 @@
-import t from"../../../../../../node_modules/inherits/inherits.mjs";import{assign as e,forEach as i,isObject as n}from"../../../../../../node_modules/min-dash/dist/index.esm.mjs";import r from"../../../../../../node_modules/diagram-js/lib/draw/BaseRenderer.mjs";import{isExpanded as a,isEventSubProcess as o}from"bpmn-js/lib/util/DiUtil";import{getLabel as l}from"bpmn-js/lib/features/label-editing/LabelUtil";import{is as c}from"bpmn-js/lib/util/ModelUtil";import{createLine as s}from"../../../../../../node_modules/diagram-js/lib/util/RenderUtil.mjs";import{getCirclePath as h,getRoundRectPath as d,getDiamondPath as m,getRectPath as f,getFillColor as p,getStrokeColor as u,getSemantic as k,getLabelColor as g,getDi as b,isCollection as y,isThrowEvent as S,isTypedEvent as E}from"bpmn-js/lib/draw/BpmnRenderUtil";import{query as v}from"../../../../../../node_modules/min-dom/dist/index.esm.mjs";import{attr as x,create as w,append as W,classes as A}from"../../../../../../node_modules/tiny-svg/dist/index.esm.mjs";import{rotate as T,transform as P,translate as D}from"../../../../../../node_modules/diagram-js/lib/util/SvgTransformUtil.mjs";import L from"../../../../../../node_modules/ids/dist/index.esm.mjs";var _=new L;function F(t,c,h,d,m,f,L){r.call(this,c,L);var F=t&&t.defaultFillColor,M=t&&t.defaultStrokeColor,R=t&&t.defaultLabelColor,O=_.next(),N={},H=h.computeStyle;function C(t,i){var n=e({fill:"black",strokeWidth:1,strokeLinecap:"round",strokeDasharray:"none"},i.attrs),r=i.ref||{x:0,y:0},a=i.scale||1;"none"===n.strokeDasharray&&(n.strokeDasharray=[1e4,1]);var o=w("marker");x(i.element,n),W(o,i.element),x(o,{id:t,viewBox:"0 0 20 20",refX:r.x,refY:r.y,markerWidth:20*a,markerHeight:20*a,orient:"auto"});var l=v("defs",m._svg);l||(l=w("defs"),W(m._svg,l)),W(l,o),N[t]=o}function I(t){return t.replace(/[^0-9a-zA-z]+/g,"_")}function j(t,e,i){var n=t+"-"+I(e)+"-"+I(i)+"-"+O;return N[n]||function(t,e,i,n){if("sequenceflow-end"===e){var r=w("path");x(r,{d:"M 1 5 L 11 10 L 1 15 Z"}),C(t,{element:r,ref:{x:11,y:10},scale:.5,attrs:{fill:n,stroke:n}})}if("messageflow-start"===e){var a=w("circle");x(a,{cx:6,cy:6,r:3.5}),C(t,{element:a,attrs:{fill:i,stroke:n},ref:{x:6,y:6}})}if("messageflow-end"===e){var o=w("path");x(o,{d:"m 1 5 l 0 -3 l 7 3 l -7 3 z"}),C(t,{element:o,attrs:{fill:i,stroke:n,strokeLinecap:"butt"},ref:{x:8.5,y:5}})}if("association-start"===e){var l=w("path");x(l,{d:"M 11 5 L 1 10 L 11 15"}),C(t,{element:l,attrs:{fill:"none",stroke:n,strokeWidth:1.5},ref:{x:1,y:10},scale:.5})}if("association-end"===e){var c=w("path");x(c,{d:"M 1 5 L 11 10 L 1 15"}),C(t,{element:c,attrs:{fill:"none",stroke:n,strokeWidth:1.5},ref:{x:12,y:10},scale:.5})}if("conditional-flow-marker"===e){var s=w("path");x(s,{d:"M 0 10 L 8 6 L 16 10 L 8 14 Z"}),C(t,{element:s,attrs:{fill:i,stroke:n},ref:{x:-1,y:10},scale:.5})}if("conditional-default-flow-marker"===e){var h=w("path");x(h,{d:"M 6 4 L 10 16"}),C(t,{element:h,attrs:{stroke:n},ref:{x:0,y:10},scale:.5})}}(n,t,e,i),"url(#"+n+")"}function G(t,e,i,r,a){n(r)&&(a=r,r=0),r=r||0,"none"===(a=H(a,{stroke:"black",strokeWidth:2,fill:"white"})).fill&&delete a.fillOpacity;var o=e/2,l=i/2,c=w("circle");return x(c,{cx:o,cy:l,r:Math.round((e+i)/4-r)}),x(c,a),W(t,c),c}function B(t,e,i,r,a,o){n(a)&&(o=a,a=0),a=a||0,o=H(o,{stroke:"black",strokeWidth:2,fill:"white"});var l=w("rect");return x(l,{x:a,y:a,width:e-2*a,height:i-2*a,rx:r,ry:r}),x(l,o),W(t,l),l}function U(t,e,i){i=H(i,["no-fill"],{stroke:"black",strokeWidth:2,fill:"none"});var n=s(e,i);return W(t,n),n}function K(t,e,i){i=H(i,["no-fill"],{strokeWidth:2,stroke:"black"});var n=w("path");return x(n,{d:e}),x(n,i),W(t,n),n}function V(t,i,n,r){return K(i,n,e({"data-marker":t},r))}function q(t){return function(e,i){return Q[t](e,i)}}function Y(t){return Q[t]}function $(t,e){var i=k(t),n=S(i);return i.eventDefinitions&&i.eventDefinitions.length>1?i.parallelMultiple?Y("bpmn:ParallelMultipleEventDefinition")(e,t,n):Y("bpmn:MultipleEventDefinition")(e,t,n):E(i,"bpmn:MessageEventDefinition")?Y("bpmn:MessageEventDefinition")(e,t,n):E(i,"bpmn:TimerEventDefinition")?Y("bpmn:TimerEventDefinition")(e,t,n):E(i,"bpmn:ConditionalEventDefinition")?Y("bpmn:ConditionalEventDefinition")(e,t):E(i,"bpmn:SignalEventDefinition")?Y("bpmn:SignalEventDefinition")(e,t,n):E(i,"bpmn:EscalationEventDefinition")?Y("bpmn:EscalationEventDefinition")(e,t,n):E(i,"bpmn:LinkEventDefinition")?Y("bpmn:LinkEventDefinition")(e,t,n):E(i,"bpmn:ErrorEventDefinition")?Y("bpmn:ErrorEventDefinition")(e,t,n):E(i,"bpmn:CancelEventDefinition")?Y("bpmn:CancelEventDefinition")(e,t,n):E(i,"bpmn:CompensateEventDefinition")?Y("bpmn:CompensateEventDefinition")(e,t,n):E(i,"bpmn:TerminateEventDefinition")?Y("bpmn:TerminateEventDefinition")(e,t,n):null}function z(t,i,n){n=e({size:{width:100}},n);var r=f.createText(i||"",n);return A(r).add("djs-label"),W(t,r),r}function X(t,e,i){return z(t,k(e).name,{box:e,align:i,padding:5,style:{fill:g(e,R,M)}})}function J(t,e,i){var n=z(t,e,{box:{height:30,width:i.height},align:"center-middle",style:{fill:g(i,R,M)}}),r=-1*i.height;P(n,0,-r,270)}function Z(t){for(var e=t.waypoints,i="m  "+e[0].x+","+e[0].y,n=1;n<e.length;n++)i+="L"+e[n].x+","+e[n].y+" ";return i}var Q=this.handlers={"bpmn:Event":function(t,e,i){return"fillOpacity"in i||(i.fillOpacity=.95),G(t,e.width,e.height,i)},"bpmn:StartEvent":function(t,e){var i={fill:p(e,F),stroke:u(e,M)};k(e).isInterrupting||(i={strokeDasharray:"6",strokeLinecap:"round",fill:p(e,F),stroke:u(e,M)});var n=Y("bpmn:Event")(t,e,i);return $(e,t),n},"bpmn:MessageEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_MESSAGE",{xScaleFactor:.9,yScaleFactor:.9,containerWidth:e.width,containerHeight:e.height,position:{mx:.235,my:.315}}),{strokeWidth:1,fill:i?u(e,M):p(e,F),stroke:i?p(e,F):u(e,M)})},"bpmn:TimerEventDefinition":function(t,e){var i=G(t,e.width,e.height,.2*e.height,{strokeWidth:2,fill:p(e,F),stroke:u(e,M)});K(t,d.getScaledPath("EVENT_TIMER_WH",{xScaleFactor:.75,yScaleFactor:.75,containerWidth:e.width,containerHeight:e.height,position:{mx:.5,my:.5}}),{strokeWidth:2,strokeLinecap:"square",stroke:u(e,M)});for(var n=0;n<12;n++){var r=d.getScaledPath("EVENT_TIMER_LINE",{xScaleFactor:.75,yScaleFactor:.75,containerWidth:e.width,containerHeight:e.height,position:{mx:.5,my:.5}}),a=e.width/2;K(t,r,{strokeWidth:1,strokeLinecap:"square",transform:"rotate("+30*n+","+e.height/2+","+a+")",stroke:u(e,M)})}return i},"bpmn:EscalationEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_ESCALATION",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.5,my:.2}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)})},"bpmn:ConditionalEventDefinition":function(t,e){return K(t,d.getScaledPath("EVENT_CONDITIONAL",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.5,my:.222}}),{strokeWidth:1,stroke:u(e,M)})},"bpmn:LinkEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_LINK",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.57,my:.263}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)})},"bpmn:ErrorEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_ERROR",{xScaleFactor:1.1,yScaleFactor:1.1,containerWidth:e.width,containerHeight:e.height,position:{mx:.2,my:.722}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)})},"bpmn:CancelEventDefinition":function(t,e,i){var n=K(t,d.getScaledPath("EVENT_CANCEL_45",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.638,my:-.055}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)});return T(n,45),n},"bpmn:CompensateEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_COMPENSATION",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.22,my:.5}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)})},"bpmn:SignalEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_SIGNAL",{xScaleFactor:.9,yScaleFactor:.9,containerWidth:e.width,containerHeight:e.height,position:{mx:.5,my:.2}}),{strokeWidth:1,fill:i?u(e,M):"none",stroke:u(e,M)})},"bpmn:MultipleEventDefinition":function(t,e,i){return K(t,d.getScaledPath("EVENT_MULTIPLE",{xScaleFactor:1.1,yScaleFactor:1.1,containerWidth:e.width,containerHeight:e.height,position:{mx:.222,my:.36}}),{strokeWidth:1,fill:i?u(e,M):"none"})},"bpmn:ParallelMultipleEventDefinition":function(t,e){return K(t,d.getScaledPath("EVENT_PARALLEL_MULTIPLE",{xScaleFactor:1.2,yScaleFactor:1.2,containerWidth:e.width,containerHeight:e.height,position:{mx:.458,my:.194}}),{strokeWidth:1,fill:u(e,M),stroke:u(e,M)})},"bpmn:EndEvent":function(t,e){var i=Y("bpmn:Event")(t,e,{strokeWidth:4,fill:p(e,F),stroke:u(e,M)});return $(e,t),i},"bpmn:TerminateEventDefinition":function(t,e){return G(t,e.width,e.height,8,{strokeWidth:4,fill:u(e,M),stroke:u(e,M)})},"bpmn:IntermediateEvent":function(t,e){var i=Y("bpmn:Event")(t,e,{strokeWidth:1,fill:p(e,F),stroke:u(e,M)});return G(t,e.width,e.height,3,{strokeWidth:1,fill:p(e,"none"),stroke:u(e,M)}),$(e,t),i},"bpmn:IntermediateCatchEvent":q("bpmn:IntermediateEvent"),"bpmn:IntermediateThrowEvent":q("bpmn:IntermediateEvent"),"bpmn:Activity":function(t,e,i){return"fillOpacity"in(i=i||{})||(i.fillOpacity=.95),B(t,e.width,e.height,10,i)},"bpmn:Task":function(t,e){var i={fill:p(e,F),stroke:u(e,M)},n=Y("bpmn:Activity")(t,e,i);return X(t,e,"center-middle"),tt(t,e),n},"bpmn:ServiceTask":function(t,e){return Y("bpmn:Task")(t,e)},"bpmn:UserTask":function(t,e){return Y("bpmn:Task")(t,e)},"bpmn:ManualTask":function(t,e){var i=Y("bpmn:Task")(t,e);return K(t,d.getScaledPath("TASK_TYPE_MANUAL",{abspos:{x:17,y:15}}),{strokeWidth:.5,fill:p(e,F),stroke:u(e,M)}),i},"bpmn:SendTask":function(t,e){var i=Y("bpmn:Task")(t,e);return K(t,d.getScaledPath("TASK_TYPE_SEND",{xScaleFactor:1,yScaleFactor:1,containerWidth:21,containerHeight:14,position:{mx:.285,my:.357}}),{strokeWidth:1,fill:u(e,M),stroke:p(e,F)}),i},"bpmn:ReceiveTask":function(t,e){var i,n=k(e),r=Y("bpmn:Task")(t,e);return n.instantiate?(G(t,28,28,4.4,{strokeWidth:1}),i=d.getScaledPath("TASK_TYPE_INSTANTIATING_SEND",{abspos:{x:7.77,y:9.52}})):i=d.getScaledPath("TASK_TYPE_SEND",{xScaleFactor:.9,yScaleFactor:.9,containerWidth:21,containerHeight:14,position:{mx:.3,my:.4}}),K(t,i,{strokeWidth:1,fill:p(e,F),stroke:u(e,M)}),r},"bpmn:ScriptTask":function(t,e){return Y("bpmn:Task")(t,e)},"bpmn:BusinessRuleTask":function(t,e){var i=Y("bpmn:Task")(t,e),n=K(t,d.getScaledPath("TASK_TYPE_BUSINESS_RULE_HEADER",{abspos:{x:8,y:8}}));x(n,{strokeWidth:1,fill:p(e,"#aaaaaa"),stroke:u(e,M)});var r=K(t,d.getScaledPath("TASK_TYPE_BUSINESS_RULE_MAIN",{abspos:{x:8,y:8}}));return x(r,{strokeWidth:1,stroke:u(e,M)}),i},"bpmn:SubProcess":function(t,i,n){n=e({fill:p(i,F),stroke:u(i,M)},n);var r=Y("bpmn:Activity")(t,i,n),l=a(i);return o(i)&&x(r,{strokeDasharray:"1,2"}),X(t,i,l?"center-top":"center-middle"),l?tt(t,i):tt(t,i,["SubProcessMarker"]),r},"bpmn:AdHocSubProcess":function(t,e){return Y("bpmn:SubProcess")(t,e)},"bpmn:Transaction":function(t,e){var i=Y("bpmn:SubProcess")(t,e),n=h.style(["no-fill","no-events"],{stroke:u(e,M)});return B(t,e.width,e.height,8,3,n),i},"bpmn:CallActivity":function(t,e){return Y("bpmn:SubProcess")(t,e,{strokeWidth:5})},"bpmn:Participant":function(t,e){var i={fillOpacity:.95,fill:p(e,F),stroke:u(e,M)},n=Y("bpmn:Lane")(t,e,i);a(e)?(U(t,[{x:30,y:0},{x:30,y:e.height}],{stroke:u(e,M)}),J(t,k(e).name,e)):z(t,k(e).name,{box:e,align:"center-middle",style:{fill:g(e,R,M)}});return!!k(e).participantMultiplicity&&Y("ParticipantMultiplicityMarker")(t,e),n},"bpmn:Lane":function(t,i,n){var r=B(t,i.width,i.height,0,e({fill:p(i,F),fillOpacity:.35,stroke:u(i,M)},n)),a=k(i);"bpmn:Lane"===a.$type&&J(t,a.name,i);return r},"bpmn:InclusiveGateway":function(t,e){var i=Y("bpmn:Gateway")(t,e);return G(t,e.width,e.height,.24*e.height,{strokeWidth:2.5,fill:p(e,F),stroke:u(e,M)}),i},"bpmn:ExclusiveGateway":function(t,e){var i=Y("bpmn:Gateway")(t,e),n=d.getScaledPath("GATEWAY_EXCLUSIVE",{xScaleFactor:.4,yScaleFactor:.4,containerWidth:e.width,containerHeight:e.height,position:{mx:.32,my:.3}});return b(e).isMarkerVisible&&K(t,n,{strokeWidth:1,fill:u(e,M),stroke:u(e,M)}),i},"bpmn:ComplexGateway":function(t,e){var i=Y("bpmn:Gateway")(t,e);return K(t,d.getScaledPath("GATEWAY_COMPLEX",{xScaleFactor:.5,yScaleFactor:.5,containerWidth:e.width,containerHeight:e.height,position:{mx:.46,my:.26}}),{strokeWidth:1,fill:u(e,M),stroke:u(e,M)}),i},"bpmn:ParallelGateway":function(t,e){var i=Y("bpmn:Gateway")(t,e);return K(t,d.getScaledPath("GATEWAY_PARALLEL",{xScaleFactor:.6,yScaleFactor:.6,containerWidth:e.width,containerHeight:e.height,position:{mx:.46,my:.2}}),{strokeWidth:1,fill:u(e,M),stroke:u(e,M)}),i},"bpmn:EventBasedGateway":function(t,e){var i=k(e),n=Y("bpmn:Gateway")(t,e);G(t,e.width,e.height,.2*e.height,{strokeWidth:1,fill:"none",stroke:u(e,M)});var r,a,o=i.eventGatewayType,l=!!i.instantiate;if("Parallel"===o){var c=d.getScaledPath("GATEWAY_PARALLEL",{xScaleFactor:.4,yScaleFactor:.4,containerWidth:e.width,containerHeight:e.height,position:{mx:.474,my:.296}}),s=K(t,c);x(s,{strokeWidth:1,fill:"none"})}else if("Exclusive"===o){if(!l){var h=G(t,e.width,e.height,.26*e.height);x(h,{strokeWidth:1,fill:"none",stroke:u(e,M)})}r=d.getScaledPath("GATEWAY_EVENT_BASED",{xScaleFactor:.18,yScaleFactor:.18,containerWidth:e.width,containerHeight:e.height,position:{mx:.36,my:.44}}),a={strokeWidth:2,fill:p(e,"none"),stroke:u(e,M)},K(t,r,a)}return n},"bpmn:Gateway":function(t,e){var i={fill:p(e,F),fillOpacity:.95,stroke:u(e,M)};return function(t,e,i,n){var r=e/2,a=i/2,o=[{x:r,y:0},{x:e,y:a},{x:r,y:i},{x:0,y:a}].map((function(t){return t.x+","+t.y})).join(" ");n=H(n,{stroke:"black",strokeWidth:2,fill:"white"});var l=w("polygon");return x(l,{points:o}),x(l,n),W(t,l),l}(t,e.width,e.height,i)},"bpmn:SequenceFlow":function(t,e){var i,n=Z(e),r=p(e,F),a=u(e,M),o=K(t,n,{strokeLinejoin:"round",markerEnd:j("sequenceflow-end",r,a),stroke:u(e,M)}),l=k(e);return e.source&&(i=e.source.businessObject,l.conditionExpression&&i.$instanceOf("bpmn:Activity")&&x(o,{markerStart:j("conditional-flow-marker",r,a)}),i.default&&(i.$instanceOf("bpmn:Gateway")||i.$instanceOf("bpmn:Activity"))&&i.default===l&&x(o,{markerStart:j("conditional-default-flow-marker",r,a)})),o},"bpmn:Association":function(t,i,n){var r=k(i),a=p(i,F),o=u(i,M);return n=e({strokeDasharray:"0.5, 5",strokeLinecap:"round",strokeLinejoin:"round",stroke:u(i,M)},n||{}),"One"!==r.associationDirection&&"Both"!==r.associationDirection||(n.markerEnd=j("association-end",a,o)),"Both"===r.associationDirection&&(n.markerStart=j("association-start",a,o)),U(t,i.waypoints,n)},"bpmn:DataInputAssociation":function(t,e){var i=p(e,F),n=u(e,M);return Y("bpmn:Association")(t,e,{markerEnd:j("association-end",i,n)})},"bpmn:DataOutputAssociation":function(t,e){var i=p(e,F),n=u(e,M);return Y("bpmn:Association")(t,e,{markerEnd:j("association-end",i,n)})},"bpmn:MessageFlow":function(t,e){var i=k(e),n=b(e),r=p(e,F),a=u(e,M),o=K(t,Z(e),{markerEnd:j("messageflow-end",r,a),markerStart:j("messageflow-start",r,a),strokeDasharray:"10, 12",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5px",stroke:u(e,M)});if(i.messageRef){var l=o.getPointAtLength(o.getTotalLength()/2),c=d.getScaledPath("MESSAGE_FLOW_MARKER",{abspos:{x:l.x,y:l.y}}),s={strokeWidth:1};"initiating"===n.messageVisibleKind?(s.fill="white",s.stroke="black"):(s.fill="#888",s.stroke="white");var h=K(t,c,s),m=z(t,i.messageRef.name,{align:"center-top",fitBox:!0,style:{fill:u(e,R,M)}}),f=h.getBBox(),g=m.getBBox(),y=l.x-g.width/2,S=l.y+f.height/2+10;P(m,y,S,0)}return o},"bpmn:DataObject":function(t,e){var i=K(t,d.getScaledPath("DATA_OBJECT_PATH",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.474,my:.296}}),{fill:p(e,F),fillOpacity:.95,stroke:u(e,M)}),n=k(e);return y(n)&&function(t,e){var i=(e.height-18)/e.height,n=d.getScaledPath("DATA_OBJECT_COLLECTION_PATH",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:.33,my:i}});K(t,n,{strokeWidth:2})}(t,e),i},"bpmn:DataObjectReference":q("bpmn:DataObject"),"bpmn:DataInput":function(t,e){var i=d.getRawPath("DATA_ARROW"),n=Y("bpmn:DataObject")(t,e);return K(t,i,{strokeWidth:1}),n},"bpmn:DataOutput":function(t,e){var i=d.getRawPath("DATA_ARROW"),n=Y("bpmn:DataObject")(t,e);return K(t,i,{strokeWidth:1,fill:"black"}),n},"bpmn:DataStoreReference":function(t,e){return K(t,d.getScaledPath("DATA_STORE",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:0,my:.133}}),{strokeWidth:2,fill:p(e,F),fillOpacity:.95,stroke:u(e,M)})},"bpmn:BoundaryEvent":function(t,i){var n=k(i).cancelActivity,r={strokeWidth:1,fill:p(i,F),stroke:u(i,M)};n||(r.strokeDasharray="6",r.strokeLinecap="round");var a=e({},r,{fillOpacity:1}),o=e({},r,{fill:"none"}),l=Y("bpmn:Event")(t,i,a);return G(t,i.width,i.height,3,o),$(i,t),l},"bpmn:Group":function(t,e){return B(t,e.width,e.height,10,{stroke:u(e,M),strokeWidth:1,strokeDasharray:"8,3,1,3",fill:"none",pointerEvents:"none"})},label:function(t,i){return function(t,i){var n={width:90,height:30,x:i.width/2+i.x,y:i.height/2+i.y};return z(t,l(i),{box:n,fitBox:!0,style:e({},f.getExternalStyle(),{fill:g(i,R,M)})})}(t,i)},"bpmn:TextAnnotation":function(t,e){var i=B(t,e.width,e.height,0,0,{fill:"none",stroke:"none"});return K(t,d.getScaledPath("TEXT_ANNOTATION",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:0,my:0}}),{stroke:u(e,M)}),z(t,k(e).text||"",{box:e,align:"left-top",padding:5,style:{fill:g(e,R,M)}}),i},ParticipantMultiplicityMarker:function(t,e){V("participant-multiplicity",t,d.getScaledPath("MARKER_PARALLEL",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:e.width/2/e.width,my:(e.height-15)/e.height}}),{strokeWidth:2,fill:p(e,F),stroke:u(e,M)})},SubProcessMarker:function(t,e){var i=B(t,14,14,0,{strokeWidth:1,fill:p(e,F),stroke:u(e,M)});D(i,e.width/2-7.5,e.height-20),V("sub-process",t,d.getScaledPath("MARKER_SUB_PROCESS",{xScaleFactor:1.5,yScaleFactor:1.5,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2-7.5)/e.width,my:(e.height-20)/e.height}}),{fill:p(e,F),stroke:u(e,M)})},ParallelMarker:function(t,e,i){V("parallel",t,d.getScaledPath("MARKER_PARALLEL",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2+i.parallel)/e.width,my:(e.height-20)/e.height}}),{fill:p(e,F),stroke:u(e,M)})},SequentialMarker:function(t,e,i){V("sequential",t,d.getScaledPath("MARKER_SEQUENTIAL",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2+i.seq)/e.width,my:(e.height-19)/e.height}}),{fill:p(e,F),stroke:u(e,M)})},CompensationMarker:function(t,e,i){V("compensation",t,d.getScaledPath("MARKER_COMPENSATION",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2+i.compensation)/e.width,my:(e.height-13)/e.height}}),{strokeWidth:1,fill:p(e,F),stroke:u(e,M)})},LoopMarker:function(t,e,i){V("loop",t,d.getScaledPath("MARKER_LOOP",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2+i.loop)/e.width,my:(e.height-7)/e.height}}),{strokeWidth:1,fill:p(e,F),stroke:u(e,M),strokeLinecap:"round",strokeMiterlimit:.5})},AdhocMarker:function(t,e,i){V("adhoc",t,d.getScaledPath("MARKER_ADHOC",{xScaleFactor:1,yScaleFactor:1,containerWidth:e.width,containerHeight:e.height,position:{mx:(e.width/2+i.adhoc)/e.width,my:(e.height-15)/e.height}}),{strokeWidth:1,fill:u(e,M),stroke:u(e,M)})}};function tt(t,e,n){var r,a=k(e),o=n&&-1!==n.indexOf("SubProcessMarker");r=o?{seq:-21,parallel:-22,compensation:-42,loop:-18,adhoc:10}:{seq:-3,parallel:-6,compensation:-27,loop:0,adhoc:10},i(n,(function(i){Y(i)(t,e,r)})),a.isForCompensation&&Y("CompensationMarker")(t,e,r),"bpmn:AdHocSubProcess"===a.$type&&Y("AdhocMarker")(t,e,r);var l=a.loopCharacteristics,c=l&&l.isSequential;l&&(void 0===c&&Y("LoopMarker")(t,e,r),!1===c&&Y("ParallelMarker")(t,e,r),!0===c&&Y("SequentialMarker")(t,e,r))}this._drawPath=K}t(F,r),F.$inject=["config.bpmnRenderer","eventBus","styles","pathMap","canvas","textRenderer"],F.prototype.canRender=function(t){return c(t,"bpmn:BaseElement")},F.prototype.drawShape=function(t,e){var i=e.type;return(0,this.handlers[i])(t,e)},F.prototype.drawConnection=function(t,e){var i=e.type;return(0,this.handlers[i])(t,e)},F.prototype.getShapePath=function(t){return c(t,"bpmn:Event")?h(t):c(t,"bpmn:Activity")?d(t,10):c(t,"bpmn:Gateway")?m(t):f(t)};export{F as default};
+import inherits from '../../../../../../node_modules/inherits/inherits.mjs';
+import { assign, forEach, isObject } from '../../../../../../node_modules/min-dash/dist/index.esm.mjs';
+import BaseRenderer from '../../../../../../node_modules/diagram-js/lib/draw/BaseRenderer.mjs';
+import { isExpanded, isEventSubProcess } from 'bpmn-js/lib/util/DiUtil';
+import { getLabel } from 'bpmn-js/lib/features/label-editing/LabelUtil';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+import { createLine } from '../../../../../../node_modules/diagram-js/lib/util/RenderUtil.mjs';
+import { getCirclePath, getRoundRectPath, getDiamondPath, getRectPath, getFillColor, getStrokeColor, getSemantic, getLabelColor, getDi, isCollection, isThrowEvent, isTypedEvent } from 'bpmn-js/lib/draw/BpmnRenderUtil';
+import { query } from '../../../../../../node_modules/min-dom/dist/index.esm.mjs';
+import { attr, create, append, classes } from '../../../../../../node_modules/tiny-svg/dist/index.esm.mjs';
+import { rotate, transform, translate } from '../../../../../../node_modules/diagram-js/lib/util/SvgTransformUtil.mjs';
+import Ids from '../../../../../../node_modules/ids/dist/index.esm.mjs';
+
+var RENDERER_IDS = new Ids();
+var TASK_BORDER_RADIUS = 10;
+var INNER_OUTER_DIST = 3;
+var DEFAULT_FILL_OPACITY = 0.95, HIGH_FILL_OPACITY = 0.35;
+var ELEMENT_LABEL_DISTANCE = 10;
+function BpmnRenderer(config, eventBus, styles, pathMap, canvas, textRenderer, priority) {
+  BaseRenderer.call(this, eventBus, priority);
+  var defaultFillColor = config && config.defaultFillColor, defaultStrokeColor = config && config.defaultStrokeColor, defaultLabelColor = config && config.defaultLabelColor;
+  var rendererId = RENDERER_IDS.next();
+  var markers = {};
+  var computeStyle = styles.computeStyle;
+  function addMarker(id, options) {
+    var attrs = assign({
+      fill: "black",
+      strokeWidth: 1,
+      strokeLinecap: "round",
+      strokeDasharray: "none"
+    }, options.attrs);
+    var ref = options.ref || { x: 0, y: 0 };
+    var scale = options.scale || 1;
+    if (attrs.strokeDasharray === "none") {
+      attrs.strokeDasharray = [1e4, 1];
+    }
+    var marker2 = create("marker");
+    attr(options.element, attrs);
+    append(marker2, options.element);
+    attr(marker2, {
+      id,
+      viewBox: "0 0 20 20",
+      refX: ref.x,
+      refY: ref.y,
+      markerWidth: 20 * scale,
+      markerHeight: 20 * scale,
+      orient: "auto"
+    });
+    var defs = query("defs", canvas._svg);
+    if (!defs) {
+      defs = create("defs");
+      append(canvas._svg, defs);
+    }
+    append(defs, marker2);
+    markers[id] = marker2;
+  }
+  function colorEscape(str) {
+    return str.replace(/[^0-9a-zA-z]+/g, "_");
+  }
+  function marker(type, fill, stroke) {
+    var id = type + "-" + colorEscape(fill) + "-" + colorEscape(stroke) + "-" + rendererId;
+    if (!markers[id]) {
+      createMarker(id, type, fill, stroke);
+    }
+    return "url(#" + id + ")";
+  }
+  function createMarker(id, type, fill, stroke) {
+    if (type === "sequenceflow-end") {
+      var sequenceflowEnd = create("path");
+      attr(sequenceflowEnd, { d: "M 1 5 L 11 10 L 1 15 Z" });
+      addMarker(id, {
+        element: sequenceflowEnd,
+        ref: { x: 11, y: 10 },
+        scale: 0.5,
+        attrs: {
+          fill: stroke,
+          stroke
+        }
+      });
+    }
+    if (type === "messageflow-start") {
+      var messageflowStart = create("circle");
+      attr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+      addMarker(id, {
+        element: messageflowStart,
+        attrs: {
+          fill,
+          stroke
+        },
+        ref: { x: 6, y: 6 }
+      });
+    }
+    if (type === "messageflow-end") {
+      var messageflowEnd = create("path");
+      attr(messageflowEnd, { d: "m 1 5 l 0 -3 l 7 3 l -7 3 z" });
+      addMarker(id, {
+        element: messageflowEnd,
+        attrs: {
+          fill,
+          stroke,
+          strokeLinecap: "butt"
+        },
+        ref: { x: 8.5, y: 5 }
+      });
+    }
+    if (type === "association-start") {
+      var associationStart = create("path");
+      attr(associationStart, { d: "M 11 5 L 1 10 L 11 15" });
+      addMarker(id, {
+        element: associationStart,
+        attrs: {
+          fill: "none",
+          stroke,
+          strokeWidth: 1.5
+        },
+        ref: { x: 1, y: 10 },
+        scale: 0.5
+      });
+    }
+    if (type === "association-end") {
+      var associationEnd = create("path");
+      attr(associationEnd, { d: "M 1 5 L 11 10 L 1 15" });
+      addMarker(id, {
+        element: associationEnd,
+        attrs: {
+          fill: "none",
+          stroke,
+          strokeWidth: 1.5
+        },
+        ref: { x: 12, y: 10 },
+        scale: 0.5
+      });
+    }
+    if (type === "conditional-flow-marker") {
+      var conditionalflowMarker = create("path");
+      attr(conditionalflowMarker, { d: "M 0 10 L 8 6 L 16 10 L 8 14 Z" });
+      addMarker(id, {
+        element: conditionalflowMarker,
+        attrs: {
+          fill,
+          stroke
+        },
+        ref: { x: -1, y: 10 },
+        scale: 0.5
+      });
+    }
+    if (type === "conditional-default-flow-marker") {
+      var conditionaldefaultflowMarker = create("path");
+      attr(conditionaldefaultflowMarker, { d: "M 6 4 L 10 16" });
+      addMarker(id, {
+        element: conditionaldefaultflowMarker,
+        attrs: {
+          stroke
+        },
+        ref: { x: 0, y: 10 },
+        scale: 0.5
+      });
+    }
+  }
+  function drawCircle(parentGfx, width, height, offset, attrs) {
+    if (isObject(offset)) {
+      attrs = offset;
+      offset = 0;
+    }
+    offset = offset || 0;
+    attrs = computeStyle(attrs, {
+      stroke: "black",
+      strokeWidth: 2,
+      fill: "white"
+    });
+    if (attrs.fill === "none") {
+      delete attrs.fillOpacity;
+    }
+    var cx = width / 2, cy = height / 2;
+    var circle = create("circle");
+    attr(circle, {
+      cx,
+      cy,
+      r: Math.round((width + height) / 4 - offset)
+    });
+    attr(circle, attrs);
+    append(parentGfx, circle);
+    return circle;
+  }
+  function drawRect(parentGfx, width, height, r, offset, attrs) {
+    if (isObject(offset)) {
+      attrs = offset;
+      offset = 0;
+    }
+    offset = offset || 0;
+    attrs = computeStyle(attrs, {
+      stroke: "black",
+      strokeWidth: 2,
+      fill: "white"
+    });
+    var rect = create("rect");
+    attr(rect, {
+      x: offset,
+      y: offset,
+      width: width - offset * 2,
+      height: height - offset * 2,
+      rx: r,
+      ry: r
+    });
+    attr(rect, attrs);
+    append(parentGfx, rect);
+    return rect;
+  }
+  function drawDiamond(parentGfx, width, height, attrs) {
+    var x_2 = width / 2;
+    var y_2 = height / 2;
+    var points = [
+      { x: x_2, y: 0 },
+      { x: width, y: y_2 },
+      { x: x_2, y: height },
+      { x: 0, y: y_2 }
+    ];
+    var pointsString = points.map(function(point) {
+      return point.x + "," + point.y;
+    }).join(" ");
+    attrs = computeStyle(attrs, {
+      stroke: "black",
+      strokeWidth: 2,
+      fill: "white"
+    });
+    var polygon = create("polygon");
+    attr(polygon, {
+      points: pointsString
+    });
+    attr(polygon, attrs);
+    append(parentGfx, polygon);
+    return polygon;
+  }
+  function drawLine(parentGfx, waypoints, attrs) {
+    attrs = computeStyle(attrs, ["no-fill"], {
+      stroke: "black",
+      strokeWidth: 2,
+      fill: "none"
+    });
+    var line = createLine(waypoints, attrs);
+    append(parentGfx, line);
+    return line;
+  }
+  function drawPath(parentGfx, d, attrs) {
+    attrs = computeStyle(attrs, ["no-fill"], {
+      strokeWidth: 2,
+      stroke: "black"
+    });
+    var path = create("path");
+    attr(path, { d });
+    attr(path, attrs);
+    append(parentGfx, path);
+    return path;
+  }
+  function drawMarker(type, parentGfx, path, attrs) {
+    return drawPath(parentGfx, path, assign({ "data-marker": type }, attrs));
+  }
+  function as(type) {
+    return function(parentGfx, element) {
+      return handlers[type](parentGfx, element);
+    };
+  }
+  function renderer(type) {
+    return handlers[type];
+  }
+  function renderEventContent(element, parentGfx) {
+    var event = getSemantic(element);
+    var isThrowing = isThrowEvent(event);
+    if (event.eventDefinitions && event.eventDefinitions.length > 1) {
+      if (event.parallelMultiple) {
+        return renderer("bpmn:ParallelMultipleEventDefinition")(parentGfx, element, isThrowing);
+      } else {
+        return renderer("bpmn:MultipleEventDefinition")(parentGfx, element, isThrowing);
+      }
+    }
+    if (isTypedEvent(event, "bpmn:MessageEventDefinition")) {
+      return renderer("bpmn:MessageEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:TimerEventDefinition")) {
+      return renderer("bpmn:TimerEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:ConditionalEventDefinition")) {
+      return renderer("bpmn:ConditionalEventDefinition")(parentGfx, element);
+    }
+    if (isTypedEvent(event, "bpmn:SignalEventDefinition")) {
+      return renderer("bpmn:SignalEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:EscalationEventDefinition")) {
+      return renderer("bpmn:EscalationEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:LinkEventDefinition")) {
+      return renderer("bpmn:LinkEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:ErrorEventDefinition")) {
+      return renderer("bpmn:ErrorEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:CancelEventDefinition")) {
+      return renderer("bpmn:CancelEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:CompensateEventDefinition")) {
+      return renderer("bpmn:CompensateEventDefinition")(parentGfx, element, isThrowing);
+    }
+    if (isTypedEvent(event, "bpmn:TerminateEventDefinition")) {
+      return renderer("bpmn:TerminateEventDefinition")(parentGfx, element, isThrowing);
+    }
+    return null;
+  }
+  function renderLabel(parentGfx, label, options) {
+    options = assign({
+      size: {
+        width: 100
+      }
+    }, options);
+    var text = textRenderer.createText(label || "", options);
+    classes(text).add("djs-label");
+    append(parentGfx, text);
+    return text;
+  }
+  function renderEmbeddedLabel(parentGfx, element, align) {
+    var semantic = getSemantic(element);
+    return renderLabel(parentGfx, semantic.name, {
+      box: element,
+      align,
+      padding: 5,
+      style: {
+        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+      }
+    });
+  }
+  function renderExternalLabel(parentGfx, element) {
+    var box = {
+      width: 90,
+      height: 30,
+      x: element.width / 2 + element.x,
+      y: element.height / 2 + element.y
+    };
+    return renderLabel(parentGfx, getLabel(element), {
+      box,
+      fitBox: true,
+      style: assign({}, textRenderer.getExternalStyle(), {
+        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+      })
+    });
+  }
+  function renderLaneLabel(parentGfx, text, element) {
+    var textBox = renderLabel(parentGfx, text, {
+      box: {
+        height: 30,
+        width: element.height
+      },
+      align: "center-middle",
+      style: {
+        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+      }
+    });
+    var top = -1 * element.height;
+    transform(textBox, 0, -top, 270);
+  }
+  function createPathFromConnection(connection) {
+    var waypoints = connection.waypoints;
+    var pathData = "m  " + waypoints[0].x + "," + waypoints[0].y;
+    for (var i = 1; i < waypoints.length; i++) {
+      pathData += "L" + waypoints[i].x + "," + waypoints[i].y + " ";
+    }
+    return pathData;
+  }
+  var handlers = this.handlers = {
+    "bpmn:Event": function(parentGfx, element, attrs) {
+      if (!("fillOpacity" in attrs)) {
+        attrs.fillOpacity = DEFAULT_FILL_OPACITY;
+      }
+      return drawCircle(parentGfx, element.width, element.height, attrs);
+    },
+    "bpmn:StartEvent": function(parentGfx, element) {
+      var attrs = {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      var semantic = getSemantic(element);
+      if (!semantic.isInterrupting) {
+        attrs = {
+          strokeDasharray: "6",
+          strokeLinecap: "round",
+          fill: getFillColor(element, defaultFillColor),
+          stroke: getStrokeColor(element, defaultStrokeColor)
+        };
+      }
+      var circle = renderer("bpmn:Event")(parentGfx, element, attrs);
+      renderEventContent(element, parentGfx);
+      return circle;
+    },
+    "bpmn:MessageEventDefinition": function(parentGfx, element, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_MESSAGE", {
+        xScaleFactor: 0.9,
+        yScaleFactor: 0.9,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.235,
+          my: 0.315
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
+      var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
+      var messagePath = drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke
+      });
+      return messagePath;
+    },
+    "bpmn:TimerEventDefinition": function(parentGfx, element) {
+      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      var pathData = pathMap.getScaledPath("EVENT_TIMER_WH", {
+        xScaleFactor: 0.75,
+        yScaleFactor: 0.75,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.5,
+          my: 0.5
+        }
+      });
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 2,
+        strokeLinecap: "square",
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      for (var i = 0; i < 12; i++) {
+        var linePathData = pathMap.getScaledPath("EVENT_TIMER_LINE", {
+          xScaleFactor: 0.75,
+          yScaleFactor: 0.75,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.5,
+            my: 0.5
+          }
+        });
+        var width = element.width / 2;
+        var height = element.height / 2;
+        drawPath(parentGfx, linePathData, {
+          strokeWidth: 1,
+          strokeLinecap: "square",
+          transform: "rotate(" + i * 30 + "," + height + "," + width + ")",
+          stroke: getStrokeColor(element, defaultStrokeColor)
+        });
+      }
+      return circle;
+    },
+    "bpmn:EscalationEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_ESCALATION", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.5,
+          my: 0.2
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:ConditionalEventDefinition": function(parentGfx, event) {
+      var pathData = pathMap.getScaledPath("EVENT_CONDITIONAL", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.5,
+          my: 0.222
+        }
+      });
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:LinkEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_LINK", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.57,
+          my: 0.263
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:ErrorEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_ERROR", {
+        xScaleFactor: 1.1,
+        yScaleFactor: 1.1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.2,
+          my: 0.722
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:CancelEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_CANCEL_45", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.638,
+          my: -0.055
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      var path = drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+      rotate(path, 45);
+      return path;
+    },
+    "bpmn:CompensateEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_COMPENSATION", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.22,
+          my: 0.5
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:SignalEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_SIGNAL", {
+        xScaleFactor: 0.9,
+        yScaleFactor: 0.9,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.5,
+          my: 0.2
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:MultipleEventDefinition": function(parentGfx, event, isThrowing) {
+      var pathData = pathMap.getScaledPath("EVENT_MULTIPLE", {
+        xScaleFactor: 1.1,
+        yScaleFactor: 1.1,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.222,
+          my: 0.36
+        }
+      });
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : "none";
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill
+      });
+    },
+    "bpmn:ParallelMultipleEventDefinition": function(parentGfx, event) {
+      var pathData = pathMap.getScaledPath("EVENT_PARALLEL_MULTIPLE", {
+        xScaleFactor: 1.2,
+        yScaleFactor: 1.2,
+        containerWidth: event.width,
+        containerHeight: event.height,
+        position: {
+          mx: 0.458,
+          my: 0.194
+        }
+      });
+      return drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill: getStrokeColor(event, defaultStrokeColor),
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      });
+    },
+    "bpmn:EndEvent": function(parentGfx, element) {
+      var circle = renderer("bpmn:Event")(parentGfx, element, {
+        strokeWidth: 4,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      renderEventContent(element, parentGfx);
+      return circle;
+    },
+    "bpmn:TerminateEventDefinition": function(parentGfx, element) {
+      var circle = drawCircle(parentGfx, element.width, element.height, 8, {
+        strokeWidth: 4,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return circle;
+    },
+    "bpmn:IntermediateEvent": function(parentGfx, element) {
+      var outer = renderer("bpmn:Event")(parentGfx, element, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+        strokeWidth: 1,
+        fill: getFillColor(element, "none"),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      renderEventContent(element, parentGfx);
+      return outer;
+    },
+    "bpmn:IntermediateCatchEvent": as("bpmn:IntermediateEvent"),
+    "bpmn:IntermediateThrowEvent": as("bpmn:IntermediateEvent"),
+    "bpmn:Activity": function(parentGfx, element, attrs) {
+      attrs = attrs || {};
+      if (!("fillOpacity" in attrs)) {
+        attrs.fillOpacity = DEFAULT_FILL_OPACITY;
+      }
+      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
+    },
+    "bpmn:Task": function(parentGfx, element) {
+      var attrs = {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      var rect = renderer("bpmn:Activity")(parentGfx, element, attrs);
+      renderEmbeddedLabel(parentGfx, element, "center-middle");
+      attachTaskMarkers(parentGfx, element);
+      return rect;
+    },
+    "bpmn:ServiceTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      return task;
+    },
+    "bpmn:UserTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      return task;
+    },
+    "bpmn:ManualTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      var pathData = pathMap.getScaledPath("TASK_TYPE_MANUAL", {
+        abspos: {
+          x: 17,
+          y: 15
+        }
+      });
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 0.5,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return task;
+    },
+    "bpmn:SendTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      var pathData = pathMap.getScaledPath("TASK_TYPE_SEND", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: 21,
+        containerHeight: 14,
+        position: {
+          mx: 0.285,
+          my: 0.357
+        }
+      });
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getFillColor(element, defaultFillColor)
+      });
+      return task;
+    },
+    "bpmn:ReceiveTask": function(parentGfx, element) {
+      var semantic = getSemantic(element);
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      var pathData;
+      if (semantic.instantiate) {
+        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+        pathData = pathMap.getScaledPath("TASK_TYPE_INSTANTIATING_SEND", {
+          abspos: {
+            x: 7.77,
+            y: 9.52
+          }
+        });
+      } else {
+        pathData = pathMap.getScaledPath("TASK_TYPE_SEND", {
+          xScaleFactor: 0.9,
+          yScaleFactor: 0.9,
+          containerWidth: 21,
+          containerHeight: 14,
+          position: {
+            mx: 0.3,
+            my: 0.4
+          }
+        });
+      }
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return task;
+    },
+    "bpmn:ScriptTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      return task;
+    },
+    "bpmn:BusinessRuleTask": function(parentGfx, element) {
+      var task = renderer("bpmn:Task")(parentGfx, element);
+      var headerPathData = pathMap.getScaledPath("TASK_TYPE_BUSINESS_RULE_HEADER", {
+        abspos: {
+          x: 8,
+          y: 8
+        }
+      });
+      var businessHeaderPath = drawPath(parentGfx, headerPathData);
+      attr(businessHeaderPath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, "#aaaaaa"),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      var headerData = pathMap.getScaledPath("TASK_TYPE_BUSINESS_RULE_MAIN", {
+        abspos: {
+          x: 8,
+          y: 8
+        }
+      });
+      var businessPath = drawPath(parentGfx, headerData);
+      attr(businessPath, {
+        strokeWidth: 1,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return task;
+    },
+    "bpmn:SubProcess": function(parentGfx, element, attrs) {
+      attrs = assign({
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs);
+      var rect = renderer("bpmn:Activity")(parentGfx, element, attrs);
+      var expanded = isExpanded(element);
+      if (isEventSubProcess(element)) {
+        attr(rect, {
+          strokeDasharray: "1,2"
+        });
+      }
+      renderEmbeddedLabel(parentGfx, element, expanded ? "center-top" : "center-middle");
+      if (expanded) {
+        attachTaskMarkers(parentGfx, element);
+      } else {
+        attachTaskMarkers(parentGfx, element, ["SubProcessMarker"]);
+      }
+      return rect;
+    },
+    "bpmn:AdHocSubProcess": function(parentGfx, element) {
+      return renderer("bpmn:SubProcess")(parentGfx, element);
+    },
+    "bpmn:Transaction": function(parentGfx, element) {
+      var outer = renderer("bpmn:SubProcess")(parentGfx, element);
+      var innerAttrs = styles.style(["no-fill", "no-events"], {
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
+      return outer;
+    },
+    "bpmn:CallActivity": function(parentGfx, element) {
+      return renderer("bpmn:SubProcess")(parentGfx, element, {
+        strokeWidth: 5
+      });
+    },
+    "bpmn:Participant": function(parentGfx, element) {
+      var attrs = {
+        fillOpacity: DEFAULT_FILL_OPACITY,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      var lane = renderer("bpmn:Lane")(parentGfx, element, attrs);
+      var expandedPool = isExpanded(element);
+      if (expandedPool) {
+        drawLine(parentGfx, [
+          { x: 30, y: 0 },
+          { x: 30, y: element.height }
+        ], {
+          stroke: getStrokeColor(element, defaultStrokeColor)
+        });
+        var text = getSemantic(element).name;
+        renderLaneLabel(parentGfx, text, element);
+      } else {
+        var text2 = getSemantic(element).name;
+        renderLabel(parentGfx, text2, {
+          box: element,
+          align: "center-middle",
+          style: {
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+          }
+        });
+      }
+      var participantMultiplicity = !!getSemantic(element).participantMultiplicity;
+      if (participantMultiplicity) {
+        renderer("ParticipantMultiplicityMarker")(parentGfx, element);
+      }
+      return lane;
+    },
+    "bpmn:Lane": function(parentGfx, element, attrs) {
+      var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: HIGH_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs));
+      var semantic = getSemantic(element);
+      if (semantic.$type === "bpmn:Lane") {
+        var text = semantic.name;
+        renderLaneLabel(parentGfx, text, element);
+      }
+      return rect;
+    },
+    "bpmn:InclusiveGateway": function(parentGfx, element) {
+      var diamond = renderer("bpmn:Gateway")(parentGfx, element);
+      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+        strokeWidth: 2.5,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return diamond;
+    },
+    "bpmn:ExclusiveGateway": function(parentGfx, element) {
+      var diamond = renderer("bpmn:Gateway")(parentGfx, element);
+      var pathData = pathMap.getScaledPath("GATEWAY_EXCLUSIVE", {
+        xScaleFactor: 0.4,
+        yScaleFactor: 0.4,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.32,
+          my: 0.3
+        }
+      });
+      if (getDi(element).isMarkerVisible) {
+        drawPath(parentGfx, pathData, {
+          strokeWidth: 1,
+          fill: getStrokeColor(element, defaultStrokeColor),
+          stroke: getStrokeColor(element, defaultStrokeColor)
+        });
+      }
+      return diamond;
+    },
+    "bpmn:ComplexGateway": function(parentGfx, element) {
+      var diamond = renderer("bpmn:Gateway")(parentGfx, element);
+      var pathData = pathMap.getScaledPath("GATEWAY_COMPLEX", {
+        xScaleFactor: 0.5,
+        yScaleFactor: 0.5,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.46,
+          my: 0.26
+        }
+      });
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return diamond;
+    },
+    "bpmn:ParallelGateway": function(parentGfx, element) {
+      var diamond = renderer("bpmn:Gateway")(parentGfx, element);
+      var pathData = pathMap.getScaledPath("GATEWAY_PARALLEL", {
+        xScaleFactor: 0.6,
+        yScaleFactor: 0.6,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.46,
+          my: 0.2
+        }
+      });
+      drawPath(parentGfx, pathData, {
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return diamond;
+    },
+    "bpmn:EventBasedGateway": function(parentGfx, element) {
+      var semantic = getSemantic(element);
+      var diamond = renderer("bpmn:Gateway")(parentGfx, element);
+      drawCircle(parentGfx, element.width, element.height, element.height * 0.2, {
+        strokeWidth: 1,
+        fill: "none",
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      var type = semantic.eventGatewayType;
+      var instantiate = !!semantic.instantiate;
+      function drawEvent() {
+        var pathData2 = pathMap.getScaledPath("GATEWAY_EVENT_BASED", {
+          xScaleFactor: 0.18,
+          yScaleFactor: 0.18,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.36,
+            my: 0.44
+          }
+        });
+        var attrs = {
+          strokeWidth: 2,
+          fill: getFillColor(element, "none"),
+          stroke: getStrokeColor(element, defaultStrokeColor)
+        };
+        drawPath(parentGfx, pathData2, attrs);
+      }
+      if (type === "Parallel") {
+        var pathData = pathMap.getScaledPath("GATEWAY_PARALLEL", {
+          xScaleFactor: 0.4,
+          yScaleFactor: 0.4,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.474,
+            my: 0.296
+          }
+        });
+        var parallelPath = drawPath(parentGfx, pathData);
+        attr(parallelPath, {
+          strokeWidth: 1,
+          fill: "none"
+        });
+      } else if (type === "Exclusive") {
+        if (!instantiate) {
+          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
+          attr(innerCircle, {
+            strokeWidth: 1,
+            fill: "none",
+            stroke: getStrokeColor(element, defaultStrokeColor)
+          });
+        }
+        drawEvent();
+      }
+      return diamond;
+    },
+    "bpmn:Gateway": function(parentGfx, element) {
+      var attrs = {
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: DEFAULT_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      return drawDiamond(parentGfx, element.width, element.height, attrs);
+    },
+    "bpmn:SequenceFlow": function(parentGfx, element) {
+      var pathData = createPathFromConnection(element);
+      var fill = getFillColor(element, defaultFillColor), stroke = getStrokeColor(element, defaultStrokeColor);
+      var attrs = {
+        strokeLinejoin: "round",
+        markerEnd: marker("sequenceflow-end", fill, stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      var path = drawPath(parentGfx, pathData, attrs);
+      var sequenceFlow = getSemantic(element);
+      var source;
+      if (element.source) {
+        source = element.source.businessObject;
+        if (sequenceFlow.conditionExpression && source.$instanceOf("bpmn:Activity")) {
+          attr(path, {
+            markerStart: marker("conditional-flow-marker", fill, stroke)
+          });
+        }
+        if (source.default && (source.$instanceOf("bpmn:Gateway") || source.$instanceOf("bpmn:Activity")) && source.default === sequenceFlow) {
+          attr(path, {
+            markerStart: marker("conditional-default-flow-marker", fill, stroke)
+          });
+        }
+      }
+      return path;
+    },
+    "bpmn:Association": function(parentGfx, element, attrs) {
+      var semantic = getSemantic(element);
+      var fill = getFillColor(element, defaultFillColor), stroke = getStrokeColor(element, defaultStrokeColor);
+      attrs = assign({
+        strokeDasharray: "0.5, 5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs || {});
+      if (semantic.associationDirection === "One" || semantic.associationDirection === "Both") {
+        attrs.markerEnd = marker("association-end", fill, stroke);
+      }
+      if (semantic.associationDirection === "Both") {
+        attrs.markerStart = marker("association-start", fill, stroke);
+      }
+      return drawLine(parentGfx, element.waypoints, attrs);
+    },
+    "bpmn:DataInputAssociation": function(parentGfx, element) {
+      var fill = getFillColor(element, defaultFillColor), stroke = getStrokeColor(element, defaultStrokeColor);
+      return renderer("bpmn:Association")(parentGfx, element, {
+        markerEnd: marker("association-end", fill, stroke)
+      });
+    },
+    "bpmn:DataOutputAssociation": function(parentGfx, element) {
+      var fill = getFillColor(element, defaultFillColor), stroke = getStrokeColor(element, defaultStrokeColor);
+      return renderer("bpmn:Association")(parentGfx, element, {
+        markerEnd: marker("association-end", fill, stroke)
+      });
+    },
+    "bpmn:MessageFlow": function(parentGfx, element) {
+      var semantic = getSemantic(element), di = getDi(element);
+      var fill = getFillColor(element, defaultFillColor), stroke = getStrokeColor(element, defaultStrokeColor);
+      var pathData = createPathFromConnection(element);
+      var attrs = {
+        markerEnd: marker("messageflow-end", fill, stroke),
+        markerStart: marker("messageflow-start", fill, stroke),
+        strokeDasharray: "10, 12",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5px",
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      var path = drawPath(parentGfx, pathData, attrs);
+      if (semantic.messageRef) {
+        var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
+        var markerPathData = pathMap.getScaledPath("MESSAGE_FLOW_MARKER", {
+          abspos: {
+            x: midPoint.x,
+            y: midPoint.y
+          }
+        });
+        var messageAttrs = { strokeWidth: 1 };
+        if (di.messageVisibleKind === "initiating") {
+          messageAttrs.fill = "white";
+          messageAttrs.stroke = "black";
+        } else {
+          messageAttrs.fill = "#888";
+          messageAttrs.stroke = "white";
+        }
+        var message = drawPath(parentGfx, markerPathData, messageAttrs);
+        var labelText = semantic.messageRef.name;
+        var label = renderLabel(parentGfx, labelText, {
+          align: "center-top",
+          fitBox: true,
+          style: {
+            fill: getStrokeColor(element, defaultLabelColor, defaultStrokeColor)
+          }
+        });
+        var messageBounds = message.getBBox(), labelBounds = label.getBBox();
+        var translateX = midPoint.x - labelBounds.width / 2, translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;
+        transform(label, translateX, translateY, 0);
+      }
+      return path;
+    },
+    "bpmn:DataObject": function(parentGfx, element) {
+      var pathData = pathMap.getScaledPath("DATA_OBJECT_PATH", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.474,
+          my: 0.296
+        }
+      });
+      var elementObject = drawPath(parentGfx, pathData, {
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: DEFAULT_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      var semantic = getSemantic(element);
+      if (isCollection(semantic)) {
+        renderDataItemCollection(parentGfx, element);
+      }
+      return elementObject;
+    },
+    "bpmn:DataObjectReference": as("bpmn:DataObject"),
+    "bpmn:DataInput": function(parentGfx, element) {
+      var arrowPathData = pathMap.getRawPath("DATA_ARROW");
+      var elementObject = renderer("bpmn:DataObject")(parentGfx, element);
+      drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+      return elementObject;
+    },
+    "bpmn:DataOutput": function(parentGfx, element) {
+      var arrowPathData = pathMap.getRawPath("DATA_ARROW");
+      var elementObject = renderer("bpmn:DataObject")(parentGfx, element);
+      drawPath(parentGfx, arrowPathData, {
+        strokeWidth: 1,
+        fill: "black"
+      });
+      return elementObject;
+    },
+    "bpmn:DataStoreReference": function(parentGfx, element) {
+      var DATA_STORE_PATH = pathMap.getScaledPath("DATA_STORE", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0,
+          my: 0.133
+        }
+      });
+      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: DEFAULT_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      return elementStore;
+    },
+    "bpmn:BoundaryEvent": function(parentGfx, element) {
+      var semantic = getSemantic(element), cancel = semantic.cancelActivity;
+      var attrs = {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      if (!cancel) {
+        attrs.strokeDasharray = "6";
+        attrs.strokeLinecap = "round";
+      }
+      var outerAttrs = assign({}, attrs, {
+        fillOpacity: 1
+      });
+      var innerAttrs = assign({}, attrs, {
+        fill: "none"
+      });
+      var outer = renderer("bpmn:Event")(parentGfx, element, outerAttrs);
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
+      renderEventContent(element, parentGfx);
+      return outer;
+    },
+    "bpmn:Group": function(parentGfx, element) {
+      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+        stroke: getStrokeColor(element, defaultStrokeColor),
+        strokeWidth: 1,
+        strokeDasharray: "8,3,1,3",
+        fill: "none",
+        pointerEvents: "none"
+      });
+      return group;
+    },
+    label: function(parentGfx, element) {
+      return renderExternalLabel(parentGfx, element);
+    },
+    "bpmn:TextAnnotation": function(parentGfx, element) {
+      var style = {
+        fill: "none",
+        stroke: "none"
+      };
+      var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
+      var textPathData = pathMap.getScaledPath("TEXT_ANNOTATION", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0,
+          my: 0
+        }
+      });
+      drawPath(parentGfx, textPathData, {
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      var text = getSemantic(element).text || "";
+      renderLabel(parentGfx, text, {
+        box: element,
+        align: "left-top",
+        padding: 5,
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+        }
+      });
+      return textElement;
+    },
+    ParticipantMultiplicityMarker: function(parentGfx, element) {
+      var markerPath = pathMap.getScaledPath("MARKER_PARALLEL", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: element.width / 2 / element.width,
+          my: (element.height - 15) / element.height
+        }
+      });
+      drawMarker("participant-multiplicity", parentGfx, markerPath, {
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    },
+    SubProcessMarker: function(parentGfx, element) {
+      var markerRect = drawRect(parentGfx, 14, 14, 0, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+      translate(markerRect, element.width / 2 - 7.5, element.height - 20);
+      var markerPath = pathMap.getScaledPath("MARKER_SUB_PROCESS", {
+        xScaleFactor: 1.5,
+        yScaleFactor: 1.5,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 - 7.5) / element.width,
+          my: (element.height - 20) / element.height
+        }
+      });
+      drawMarker("sub-process", parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    },
+    ParallelMarker: function(parentGfx, element, position) {
+      var markerPath = pathMap.getScaledPath("MARKER_PARALLEL", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 + position.parallel) / element.width,
+          my: (element.height - 20) / element.height
+        }
+      });
+      drawMarker("parallel", parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    },
+    SequentialMarker: function(parentGfx, element, position) {
+      var markerPath = pathMap.getScaledPath("MARKER_SEQUENTIAL", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 + position.seq) / element.width,
+          my: (element.height - 19) / element.height
+        }
+      });
+      drawMarker("sequential", parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    },
+    CompensationMarker: function(parentGfx, element, position) {
+      var markerMath = pathMap.getScaledPath("MARKER_COMPENSATION", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 + position.compensation) / element.width,
+          my: (element.height - 13) / element.height
+        }
+      });
+      drawMarker("compensation", parentGfx, markerMath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    },
+    LoopMarker: function(parentGfx, element, position) {
+      var markerPath = pathMap.getScaledPath("MARKER_LOOP", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 + position.loop) / element.width,
+          my: (element.height - 7) / element.height
+        }
+      });
+      drawMarker("loop", parentGfx, markerPath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor),
+        strokeLinecap: "round",
+        strokeMiterlimit: 0.5
+      });
+    },
+    AdhocMarker: function(parentGfx, element, position) {
+      var markerPath = pathMap.getScaledPath("MARKER_ADHOC", {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 + position.adhoc) / element.width,
+          my: (element.height - 15) / element.height
+        }
+      });
+      drawMarker("adhoc", parentGfx, markerPath, {
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
+    }
+  };
+  function attachTaskMarkers(parentGfx, element, taskMarkers) {
+    var obj = getSemantic(element);
+    var subprocess = taskMarkers && taskMarkers.indexOf("SubProcessMarker") !== -1;
+    var position;
+    if (subprocess) {
+      position = {
+        seq: -21,
+        parallel: -22,
+        compensation: -42,
+        loop: -18,
+        adhoc: 10
+      };
+    } else {
+      position = {
+        seq: -3,
+        parallel: -6,
+        compensation: -27,
+        loop: 0,
+        adhoc: 10
+      };
+    }
+    forEach(taskMarkers, function(marker2) {
+      renderer(marker2)(parentGfx, element, position);
+    });
+    if (obj.isForCompensation) {
+      renderer("CompensationMarker")(parentGfx, element, position);
+    }
+    if (obj.$type === "bpmn:AdHocSubProcess") {
+      renderer("AdhocMarker")(parentGfx, element, position);
+    }
+    var loopCharacteristics = obj.loopCharacteristics, isSequential = loopCharacteristics && loopCharacteristics.isSequential;
+    if (loopCharacteristics) {
+      if (isSequential === void 0) {
+        renderer("LoopMarker")(parentGfx, element, position);
+      }
+      if (isSequential === false) {
+        renderer("ParallelMarker")(parentGfx, element, position);
+      }
+      if (isSequential === true) {
+        renderer("SequentialMarker")(parentGfx, element, position);
+      }
+    }
+  }
+  function renderDataItemCollection(parentGfx, element) {
+    var yPosition = (element.height - 18) / element.height;
+    var pathData = pathMap.getScaledPath("DATA_OBJECT_COLLECTION_PATH", {
+      xScaleFactor: 1,
+      yScaleFactor: 1,
+      containerWidth: element.width,
+      containerHeight: element.height,
+      position: {
+        mx: 0.33,
+        my: yPosition
+      }
+    });
+    drawPath(parentGfx, pathData, {
+      strokeWidth: 2
+    });
+  }
+  this._drawPath = drawPath;
+}
+inherits(BpmnRenderer, BaseRenderer);
+BpmnRenderer.$inject = [
+  "config.bpmnRenderer",
+  "eventBus",
+  "styles",
+  "pathMap",
+  "canvas",
+  "textRenderer"
+];
+BpmnRenderer.prototype.canRender = function(element) {
+  return is(element, "bpmn:BaseElement");
+};
+BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
+  var type = element.type;
+  var h = this.handlers[type];
+  return h(parentGfx, element);
+};
+BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
+  var type = element.type;
+  var h = this.handlers[type];
+  return h(parentGfx, element);
+};
+BpmnRenderer.prototype.getShapePath = function(element) {
+  if (is(element, "bpmn:Event")) {
+    return getCirclePath(element);
+  }
+  if (is(element, "bpmn:Activity")) {
+    return getRoundRectPath(element, TASK_BORDER_RADIUS);
+  }
+  if (is(element, "bpmn:Gateway")) {
+    return getDiamondPath(element);
+  }
+  return getRectPath(element);
+};
+
+export { BpmnRenderer as default };