1"use strict";(globalThis.webpackChunkwebsite_2=globalThis.webpackChunkwebsite_2||[]).push([[5295],{28453:(e,t,i)=>{i.d(t,{R:()=>h,x:()=>s});var n=i(96540);const r={},o=n.createContext(r);function h(e){const t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:h(e.components),n.createElement(o.Provider,{value:t},e.children)}},45746:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"diagrams/shapes/overview","title":"Shapes","description":"","source":"@site/svelte-docs/diagrams/shapes/overview.mdx","sourceDirName":"diagrams/shapes","slug":"/diagrams/shapes/overview","permalink":"/svelte/docs/diagrams/shapes/overview","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Shapes","sidebar_label":"Drawing shapes"}}');var r=i(74848),o=i(28453),h=i(46087);const s={title:"Shapes",sidebar_label:"Drawing shapes"},a=void 0,l={},d=[...h.toc];function c(e){const{FlavaSetter:t}={...(0,o.R)(),...e.components};return t||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("FlavaSetter",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t,{lib:"svelte"}),"\n","\n",(0,r.jsx)(h.default,{lib:"svelte"})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},46087:(e,t,i)=>{i.r(t),i.d(t,{contentTitle:()=>a,default:()=>c,frontMatter:()=>s,toc:()=>l});var n=i(74848),r=i(28453),o=i(72941),h=i(69638);const s={},a=void 0,l=[{value:"Configuration",id:"configuration",level:2},{value:"Available shape sets",id:"available-shape-sets",level:2},...h.toc,{value:"Custom shape sets",id:"custom-shape-sets",level:2},...o.toc];function d(e){const t={code:"code",h2:"h2",p:"p",strong:"strong",...(0,r.R)(),...e.components},{DiagramExample:i}=t;return i||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("DiagramExample",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Shapes in a Diagram are provided by one or more ",(0,n.jsx)(t.strong,{children:"Shape Sets"}),". A shape set is a collection of named SVG shapes that the Diagram can use to render its nodes and groups."]}),"\n",(0,n.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,n.jsxs)(t.p,{children:["You configure the shapes for a Diagram using the ",(0,n.jsx)(t.code,{children:"shapes"})," option to a diagram. This option accepts either a single ",(0,n.jsx)(t.code,{children:"ShapeSet"})," or an array of ",(0,n.jsx)(t.code,{children:"ShapeSet"})," objects."]}),"\n",(0,n.jsx)(i,{lib:e.lib,renderOptions:{shapes:"%[ FLOWCHART_SHAPES, BASIC_SHAPES ]"},imports:["FLOWCHART_SHAPES","BASIC_SHAPES"]}),"\n",(0,n.jsx)(t.h2,{id:"available-shape-sets",children:"Available shape sets"}),"\n",(0,n.jsx)(h.default,{}),"\n",(0,n.jsx)(t.h2,{id:"custom-shape-sets",children:"Custom shape sets"}),"\n",(0,n.jsx)(o.default,{})]})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},50273:(e,t,i)=>{i.d(t,{A:()=>n});const n={id:"faces",shapes:[{type:"impassive",template:'<g>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/>\n <path d="M {{width/4}} {{height * 0.75}} L {{width * 0.75}} {{height * 0.75}}"/>\n <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width * 0.75}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n </g>'},{type:"pleased",template:'<g>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/> \n<circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n<circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n<path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*7/8}}, {{width*3/4}} {{height*7/8}} {{width*3/4}} {{height*3/4}}"/>\n</g>'},{type:"notpleased",template:'<g>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/> \n<circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n<circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n<path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*5/8}}, {{width*3/4}} {{height*5/8}} {{width*3/4}} {{height*3/4}}"/>\n</g>'}]}},69638:(e,t,i)=>{i.r(t),i.d(t,{contentTitle:()=>l,default:()=>p,frontMatter:()=>a,toc:()=>d});var n=i(74848),r=i(28453),o=i(88694),h=i(75331),s=i(89562);const a={},l=void 0,d=[{value:"Flowchart",id:"flowchart",level:3},{value:"Basic",id:"basic",level:3},{value:"BPMN",id:"bpmn",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["VisuallyJs ships with two shape sets in the ",(0,n.jsx)(t.code,{children:"browser-ui"})," package and a set of BPMN shapes:"]}),"\n",(0,n.jsx)(t.h3,{id:"flowchart",children:"Flowchart"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:'import { FLOWCHART_SHAPES } from "@visuallyjs/browser-ui"\n'})}),"\n",(0,n.jsx)(o.A,{shapeSet:h.eL_}),"\n",(0,n.jsx)(t.hr,{}),"\n",(0,n.jsx)(t.h3,{id:"basic",children:"Basic"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:'import { BASIC_SHAPES } from "@visuallyjs/browser-ui"\n'})}),"\n",(0,n.jsx)(o.A,{shapeSet:h.aWY}),"\n",(0,n.jsx)(t.h3,{id:"bpmn",children:"BPMN"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:'import { BPMN2_SHAPES } from "@visuallyjs/bpmn"\n'})}),"\n",(0,n.jsx)(o.A,{shapeSet:s.Dh}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["These shapes are shipped in the ",(0,n.jsx)(t.code,{children:"@visuallyjs/bpmn"})," library - you'll need to import it."]})})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},72941:(e,t,i)=>{i.r(t),i.d(t,{contentTitle:()=>a,default:()=>c,frontMatter:()=>s,toc:()=>l});var n=i(74848),r=i(28453),o=i(50273),h=i(93230);const s={},a=void 0,l=[];function d(e){const t={code:"code",p:"p",pre:"pre",...(0,r.R)(),...e.components},{InlineExample:i}=t;return i||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("InlineExample",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"It's straightforward to make your own shape set - they consist of an id and then a list of shapes, for each of which you provide SVG."}),"\n",(0,n.jsx)(t.p,{children:"Here we have made a set of faces:"}),"\n",(0,n.jsx)(i,{renderOptions:{useModelForSizes:!0,shapes:{sets:[o.A]},edges:{anchor:"AutoDefault",connector:"Orthogonal",overlays:[{type:"Arrow",options:{location:1}}]},zoomToFit:!0,consumeRightClick:!1},data:{nodes:[{id:"1",left:50,top:50,type:"impassive",width:200,height:200,fill:"white",outline:"black"},{id:"2",left:180,top:450,type:"pleased",width:200,height:200,fill:"white",outline:"black"},{id:"3",left:-80,top:450,type:"notpleased",width:200,height:200,fill:"white",outline:"black"}],edges:[{source:"1",target:"2"},{source:"1",target:"3"}]},viewOptions:{nodes:{default:{jsx:e=>(0,n.jsx)(h.X1,{ctx:e})}}}}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:'const shapes = {\n id:"faces",\n shapes:[\n {\n type:"impassive",\n template:`<g>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/>\n <path d="M {{width/4}} {{height*3/4}} L {{width*3/4}} {{height*3/4}}"/>\n <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n </g>`,\n label:"Impassive"\n },\n {\n type:"pleased",\n template:`<g>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/> \n <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n <path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*7/8}}, {{width*3/4}} {{height*7/8}} {{width*3/4}} {{height*3/4}}"/>\n </g>`,\n label:"Pleased"\n },\n {\n type:"notpleased",\n template:`<g>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="{{(width/2)}}"/> \n <circle cx="{{width/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width*3/4}}" cy="{{height/4}}" r="10"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="10"/>\n <path d="M {{width/4}} {{height*3/4}} C {{width/4}} {{height*5/8}}, {{width*3/4}} {{height*5/8}} {{width * 0.75}} {{height * 0.75}}"/>\n </g>`,\n label:"Not Pleased"\n }\n ]\n}\n'})})]})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},88694:(e,t,i)=>{i.d(t,{A:()=>a});var n=i(96540),r=i(75331),o=i(38193),h=i(74848);function s({shapeLibrary:e,type:t,width:i,height:r}){const o=(0,n.useRef)(null);return(0,n.useEffect)(()=>
1{if(null!=e){const n=e.renderCompiledShape({width:i,height:r,type:t,sw:2});o.current.insertBefore(n,o.current.firstChild)}},[e]),(0,h.jsx)("svg",{ref:o,style:{margin:"0.75rem",overflow:"visible"},viewBox:`0 0 ${i} ${r}`,width:i,height:r,fill:"white",stroke:"black",children:(0,h.jsx)("text",{x:i/2,y:r/2,textAnchor:"middle",fontWeight:"100",fontSize:"12px",stroke:"none",fill:"black",children:t})})}function a({shapeSet:e,title:t,params:i}){const[a,l]=(0,n.useState)(null),d=(0,n.useRef)(!1);return(0,n.useEffect)(()=>{o.A.canUseDOM&&(d.current||(d.current=!0,l(new r.lze(e))))},[]),(0,h.jsx)("div",{title:t,style:{display:"flex",flexWrap:"wrap",width:"100%"},children:e.shapes.map(e=>(0,h.jsx)(s,{shapeLibrary:a,width:120,height:80,type:e.type},e.type))})}},89562:(e,t,i)=>{i.d(t,{Dh:()=>ue});var n=i(75331),r=Object.defineProperty,o=Object.defineProperties,h=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=(e,t,i)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,c=(e,t)=>{for(var i in t||(t={}))a.call(t,i)&&d(e,i,t[i]);if(s)for(var i of s(t))l.call(t,i)&&d(e,i,t[i]);return e},p=(e,t)=>o(e,h(t)),g="parallel",w={id:"businessRule",viewBox:{x:0,y:0,width:32,height:22},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.QC3,atts:{x:2,y:2,width:28,height:20,rx:3}},{tag:n.QC3,atts:{x:2,y:2,width:28,height:6,rx:3,fill:"currentColor"}},{tag:n.f84,atts:{d:"M 12 5 L 12 22 M 2 15 L 30 15",stroke:"currentColor","stroke-width":1.5}}]},u={id:"compensation",viewBox:{x:0,y:0,width:32,height:32},atts:p(c({},{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"}),{fill:"currentColor"}),shapes:[{tag:n.f84,atts:{d:"M 2 16 L 16 6 L 16 26 Z M16 16 L 30 6 L 30 26 Z"}}]},x={id:"conditional",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 6 4 L 26 4 L 26 28 L 6 28 Z M 10 10 L 22 10 M 10 16 L 22 16 M 10 22 L 22 22"}}]},f={id:"envelope-filled",viewBox:{x:0,y:0,width:32,height:22},atts:{fill:"currentColor",stroke:"#FFFFFF","stroke-width":2},shapes:[{tag:n.f84,atts:{d:"M 2 2 L 30 2 L 30 20 L 2 20 Z"}},{tag:n.f84,atts:{d:"M 2 2 L 16 11 L 30 2"}}]},y={id:"envelope-outline",viewBox:{x:0,y:0,width:32,height:22},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 2 2 L 30 2 L 30 20 L 2 20 Z"}},{tag:n.f84,atts:{d:"M 2 2 L 16 11 L 30 2"}}]},m={id:"error",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 20 4 L 10 18 L 16 18 L 12 28 L 22 14 L 16 14 Z",fill:"currentColor"}}]},v={id:"escalation-throw",viewBox:{x:0,y:0,width:32,height:32},atts:p(c({},{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"}),{fill:"currentColor"}),shapes:[{tag:n.f84,atts:{d:"M 16 4 L 28 26 L 16 18 L 4 26 Z"}}]},k=e=>({id:e,viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 18 6 L 28 16 L 18 26"}},{tag:n.f84,atts:{d:"M 4 13 L 24 13 L 28 16 L 24 19 L 4 19 L 4 13"}}]}),j=k("link-filled");j.shapes[1].atts.fill="currentColor";var L=k("link-outline"),b=k("link"),M={id:"loop",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M16 5 a11 11 0 1 1 -11 11 M 5 14 L 1 18 M 5 14 L 9 18"}}]},S={id:"message",viewBox:{x:0,y:0,width:32,height:22},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 2 2 L 30 2 L 30 20 L 2 20 Z"}},{tag:n.f84,atts:{d:"M 2 2 L 16 11 L 30 2"}}]},C={id:g,viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 5 2 V 28 M 16 2 V 28 M 27 2 V 28"}}]},T={id:"plus",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.QC3,atts:{x:8,y:8,width:16,height:16}},{tag:n.f84,atts:{d:"M 16 11 v 10 M 11 16 h 10"}}]},A={id:"script",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 4 4 C 0 16, 4 16, 4 30 L 30 30 C 30 16, 26 16 30 4 L 4 4 Z"}},{tag:n.f84,atts:{d:"M 8 10 L 24 10 M 8 16 L 24 16 M 8 22 L 24 22"}}]},F={id:"sequential",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 2 5 H 28 M 2 16 H 28 M 2 27 H 28"}}]},z="task",B="transaction",E="gateway",q="call-activity",P="subprocess",O="start-event",R="message-start",D="timer-start",Z="conditional-start",H="signal-start",N="end-event",_="message-end",I="escalation-end",W="error-end",G="compensation-end",V="signal-end",Q="terminate-end",J="intermediate-event",Y="message-catch",$="message-throw",U="timer-catch",X="escalation-throw",K="conditional-catch",ee="link-throw",te="link-catch",ie="compensation-throw",ne="signal-catch",re="signal-throw",oe=()=>({viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 16 4 L 28 26 L 4 26 Z"}}]}),he=Object.assign({},oe(),{id:ne}),se=Object.assign({},oe(),{id:re});se.atts.fill="currentColor";var ae={id:"terminate",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 16 6 A 10 10 0 1 1 16 26 A 10 10 0 1 1 16 6 Z",fill:"currentColor"}}]},le={id:"timer",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 16 2 A 14 14 0 1 0 16 30 A 14 14 0 1 0 16 2 Z"}},{tag:n.f84,atts:{d:"M 16 16 L 16 8 M 16 16 L 23 20"}}]},de={id:"user",viewBox:{x:0,y:0,width:32,height:32},atts:{stroke:"currentColor",fill:"none","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},shapes:[{tag:n.f84,atts:{d:"M 16 14 A 5 5 0 1 0 16 4 A 5 5 0 0 0 16 14 Z"}},{tag:n.f84,atts:{d:"M 6 28 v -2 a 10 10 0 0 1 20 0 v 2"}}]},ce=[S,C,F,M,u,(0,n.TqL)(y,"receive"),(0,n.TqL)(f,"send"),le,v,x,b,m,ae,he,se,w,A,de,T,(0,n.TqL)(n.Mk3,"service"),(0,n.TqL)(n.ns0,"exclusive"),(0,n.TqL)(n.t27,g),(0,n.TqL)(n.Nk6,"inclusive"),(0,n.TqL)(f,$),(0,n.TqL)(y,Y),(0,n.TqL)(le,U),(0,n.TqL)(v,X),(0,n.TqL)(x,K),(0,n.TqL)(j,ee),(0,n.TqL)(L,te),(0,n.TqL)(u,ie),(0,n.TqL)(y,R),(0,n.TqL)(le,D),(0,n.TqL)(x,Z),(0,n.TqL)(he,H),(0,n.TqL)(f,_),(0,n.TqL)(v,I),(0,n.TqL)(m,W),(0,n.TqL)(u,G),(0,n.TqL)(se,V),(0,n.TqL)(ae,Q),(0,n.TqL)(T,P),(0,n.TqL)(T,B),(0,n.TqL)(T,q)],pe=ce;var ge={width:40,height:40},we={width:80,height:60}
1,ue={id:"bpmn2",name:"BPMN2",shapes:[{type:O,label:"Start Event",group:"Events",template:'<g>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="{{width/2}}" data-vjs-perimeter="true"/>\n <vjs-include-icon key="eventType" x="0.5" y="0.5" size="0.6" origin="center"/>\n </g>',initialSize:ge},{type:N,label:"End Event",group:"Events",template:'<g>\n<circle cx="{{width/2}}" cy="{{height/2}}" r="{{width/2}}" stroke-width="{{outlineWidth*3}}" data-vjs-perimeter="true"/>\n<vjs-include-icon key="eventType" x="0.5" y="0.5" size="0.6" origin="center"/>\n</g>',initialSize:ge},{type:J,label:"Intermediate Event",group:"Events",template:'<g>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="{{width/2}}" data-vjs-perimeter="true"/>\n <circle cx="{{width/2}}" cy="{{height/2}}" r="{{width * 17 / 40}}"/>\n <vjs-include-icon key="eventType" x="0.5" y="0.5" size="0.6" origin="center"/>\n</g>',initialSize:ge},{type:E,label:"Exclusive Gateway",group:"Gateways",template:'<g>\n <polygon points="{{width/2}},0 {{width}},{{height/2}} {{width/2}},{{height}} 0,{{height/2}}" stroke-linecap="round" stroke-linejoin="round"/>\n <vjs-include-icon key="gatewayType" x="0.5" y="0.5" size="0.4" origin="center"/> \n</g>',payload:{gatewayType:"exclusive"},initialSize:ge,labelPosition:"bottom"},{type:z,label:"Task",group:"Tasks",template:'<g>\n <rect x="0" y="0" width="{{width}}" height="{{height}}" rx="5" data-vjs-perimeter="true"/>\n <vjs-include-icon key="taskType" x="0.05" y="0.05" size="0.25"/>\n <vjs-include-icons key="markers" x="0.5" y="0.75" size="0.15" origin="center"/>\n </g>',payload:{taskType:"",label:"Task"},initialSize:we},{type:B,label:"Transaction",template:'<g>\n <rect x="0" y="0" width="{{width}}" height="{{height}}" rx="5" data-vjs-perimeter="true"/>\n <rect x="{{width * 2 / 40}}" y="{{width * 2 / 40}}" width="{{width * 36 / 40}}" height="{{height * 34 / 40}}" rx="5"/>\n <vjs-bpmn-icon icon-id="plus" x="0.5" y="0.85" size="0.25" origin="center"/>\n </g>',initialSize:we},{type:q,label:"Call Activity",template:'<g><rect x="0" y="0" width="{{width}}" height="{{height}}" rx="5" stroke-width="{{outlineWidth*2}}" data-vjs-perimeter="true"/>\n <vjs-bpmn-icon icon-id="plus" x="0.5" y="0.85" size="0.25" origin="center"/>\n </g>',initialSize:we},{type:P,label:"Subprocess",template:'<g><rect x="0" y="0" width="{{width}}" height="{{height}}" rx="5" stroke-width="{{outlineWidth}}" data-vjs-perimeter="true"/>\n <vjs-bpmn-icon icon-id="plus" x="0.5" y="0.85" size="0.25" origin="center"/>\n </g>',initialSize:we},{type:"group",label:"Group",template:'<g>\n<rect width="{{width}}" height="{{height}}" stroke-width="1.5px" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="10,6,0,6" rx="15" ry="15" fill="none" data-vjs-perimeter="true"/>\n<rect width="{{width}}" height="{{height}}" stroke-width="5px" stroke="transparent" rx="15" ry="15" fill="none"/>\n</g>',initialSize:{width:150,height:150}},{type:"dataObject",label:"Data Object",template:'\n <g>\n <path d="M {{width/6}} {{height/6}} L {{width*7/12}} {{height/6}} L {{width*5/6}} {{height*2/6}} L {{width*5/6}} {{height*5/6}} L {{width/6}} {{height*5/6}} Z" stroke-linejoin="round" data-fill/>\n <path d="M {{width*7/12}} {{height/6}} L {{width*7/12}} {{height*2/6}} L {{width*5/6}} {{height*2/6}}" fill="none"/>\n </g>',initialSize:{width:40,height:60}},{type:"dataStoreReference",label:"Datastore",template:'\n <g>\n <path d="M 0 {{height-(height/5)}} A {{width/2}} {{height/5}} 0 0 0 {{width}} {{height-(height/5)}} L {{width}} {{height/5}} A {{width/2}} {{height/5}} 0 0 0 0 {{(height/5)}} Z" data-fill/>\n <path d="M {{width}} {{height/5}} A {{width/2}} {{height/5}} 0 0 1 0 {{height/5}}" fill="none"/>\n <path d="M {{width}} {{height/ 3}} A {{width/2}} {{height/ 5}} 0 0 1 0 {{height/ 3}}" fill="none"/>\n </g>\n '},{type:"pool",label:"Pool",objectType:"Group",template:'<g>\n <rect width="{{width}}" height="{{height}}" data-vjs-perimeter="true"/>\n <g data-vjs-group-content="true" transform="translate({{headerSize || 30}}, 0)"></g>\n <rect width="{{headerSize || 30}}" height="{{height}}" fill="{{headerFill}}"/>\n <text dominant-baseline="central" text-anchor="middle" x="-{{height/2}}" y="{{headerSize / 2 || 15}}" transform="rotate(270)" fill="{{headerColor || \'#000000\'}}" stroke="none">{{title}}</text>\n </g>',initialSize:{width:600,height:400},payload:{title:"Pool",headerFill:"#FFFFFF",headerColor:"#000000"}},{type:"lane",label:"Lane",objectType:"Group",template:'<g>\n <rect width="{{width}}" height="{{height}}" stroke-width="1.5px" data-vjs-resizable="true" data-vjs-perimeter="true"/>\n <g data-vjs-group-content="true" transform="translate({{headerSize || 30}}, 0)"></g>\n <rect width="{{headerSize || 30}}" height="{{height}}" fill="{{headerFill}}"/>\n <text dominant-baseline="central" text-anchor="middle" x="-{{height/2}}" y="{{headerSize / 2 || 15}}" transform="rotate(270)" fill="{{headerColor || \'#000000\'}}" stroke="none">{{title}}</text>\n</g>',initialSize:{width:570,height:200},payload:{title:"Lane",headerFill:"#FFFFFF",headerColor:"#000000"}}],icons:pe}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.