1 (function(global){ 2 3 4 /** 5 * @name Joint.arrows 6 * @namespace Additional ready-to-use arrows. 7 <h3>Creating your own arrows</h3> 8 <p>New arrows can be easily added. Each arrow is a function of one parameter (size) returning an object 9 which describes the arrow. The object has four properties:</p> 10 <ul> 11 <li><i>path</i>: SVG path of arrow shape</li> 12 <li><i>dx</i>: x-axis offset</li> 13 <li><i>dy</i>: y-axis offset</li> 14 <li><i>attrs</i>: SVG path attributes</li> 15 </ul> 16 <p>Let's say you want to create an arrow of a square shape. First of all, you need a SVG path describing 17 the square. Note that the symmetry of the square is along the origin (0, 0). After you have created the path, 18 you need to specify the dx, dy offsets. The offsets tell the Joint library where to start drawing the connection. 19 For our square arrow, they equal to its size. As the last thing, you can set some default path attributes 20 suitable for you arrows. A good practice is to set the fill attribute. Doing so allows you to grab your arrow 21 by mouse wherever inside your arrow shape.</p> 22 <pre> 23 Joint.arrows.square = function(size){ 24 var minusSize = (-size).toString(); 25 size = size.toString(); 26 return { 27 path: ["M", size, size, 28 "L", minusSize, size, 29 "L", minusSize, minusSize, 30 "L", size, minusSize, "z"], 31 dx: size, 32 dy: size, 33 attrs: { 34 stroke: "black", 35 fill: "white" 36 } 37 }; 38 }; 39 Joint({x: 20, y: 20}, {x: 300, y: 30}, { 40 startArrow: { 41 type: "square", 42 size: 10 43 } 44 }); 45 </pre> 46 */ 47 var arrows = global.Joint.arrows; 48 49 /** 50 * Hand arrow. 51 * @name Joint.arrows.hand 52 * @memberOf Joint.arrows 53 * @example 54 Joint({x: 40, y: 40}, {x: 300, y: 70}, { 55 startArrow: { 56 type: "flower" 57 }, 58 endArrow: { 59 type: "hand" 60 } 61 }); 62 */ 63 arrows.hand = function(size){ 64 // size is scale here! 65 size = size ? 1 + (0.1 * size) : 1; 66 return { 67 path: ["M","-15.681352","-5.1927657","C","-15.208304","-5.2925912","-14.311293","-5.5561164","-13.687993","-5.7783788","C","-13.06469","-6.0006406","-12.343434","-6.2537623","-12.085196","-6.3408738","C","-10.972026","-6.7163768","-7.6682017","-8.1305627","-5.9385615","-8.9719142","C","-4.9071402","-9.4736293","-3.9010109","-9.8815423","-3.7027167","-9.8783923","C","-3.5044204","-9.8752373","-2.6780248","-9.5023173","-1.8662751","-9.0496708","C","-0.49317056","-8.2840047","-0.31169266","-8.2208528","0.73932854","-8.142924","L","1.8690327","-8.0591623","L","2.039166","-7.4474021","C","2.1327395","-7.1109323","2.1514594","-6.8205328","2.0807586","-6.8020721","C","2.010064","-6.783614","1.3825264","-6.7940997","0.68622374","-6.8253794","C","-0.66190616","-6.8859445","-1.1814444","-6.8071497","-1.0407498","-6.5634547","C","-0.99301966","-6.4807831","-0.58251196","-6.4431792","-0.12850911","-6.4798929","C","1.2241412","-6.5892761","4.7877672","-6.1187783","8.420785","-5.3511477","C","14.547755","-4.056566","16.233479","-2.9820024","15.666933","-0.73209438","C","15.450654","0.12678873","14.920327","0.61899573","14.057658","0.76150753","C","13.507869","0.85232533","12.818867","0.71394493","9.8149232","-0.090643373","C","7.4172698","-0.73284018","6.1067424","-1.0191399","5.8609814","-0.95442248","C","5.6587992","-0.90118658","4.8309652","-0.89582008","4.0213424","-0.94250688","C","3.0856752","-0.99645868","2.5291546","-0.95219288","2.4940055","-0.82101488","C","2.4635907","-0.70750508","2.4568664","-0.61069078","2.4790596","-0.60585818","C","2.5012534","-0.60103228","2.9422761","-0.59725718","3.4591019","-0.59747878","C","3.9759261","-0.59770008","4.4500472","-0.58505968","4.512693","-0.56939128","C","4.7453841","-0.51117988","4.6195024","0.92436343","4.318067","1.650062","C","3.8772746","2.7112738","2.9836566","3.9064107","2.2797382","4.3761637","C","1.5987482","4.8306065","1.52359","4.9484512","1.8576616","5.0379653","C","1.9860795","5.0723748","2.2155555","4.9678227","2.3676284","4.8056312","C","2.6253563","4.5307504","2.6497332","4.5328675","2.7268401","4.8368824","C","2.8605098","5.3638848","2.3264901","6.4808604","1.6782299","7.0301956","C","1.3498639","7.30845","0.75844624","8.0404548","0.36396655","8.6568609","C","-0.58027706","10.132325","-0.69217806","10.238528","-1.4487256","10.377186","C","-2.2048498","10.515767","-4.6836995","9.9021604","-6.41268","9.1484214","C","-9.9464649","7.6078865","-10.697587","7.3186028","-12.142194","6.9417312","C","-13.020384","6.712621","-14.184145","6.4654454","-14.72833","6.3924328","C","-15.272516","6.3194263","-15.731691","6.241583","-15.748724","6.2194535","C","-15.813855","6.1348086","-16.609132","-4.7586323","-16.562804","-4.9315285","C","-16.551052","-4.9753876","-16.154402","-5.0929474","-15.681351","-5.192769","L","-15.681352","-5.1927657","z","M","11.288619","-1.446424","L","10.957631","-0.2111606","L","11.627189","-0.031753373","C","13.374637","0.43647423","14.580622","0.18262123","15.042031","-0.75056578","C","15.503958","-1.6847955","14.648263","-2.6070187","12.514834","-3.4742549","L","11.634779","-3.8320046","L","11.627191","-3.2568392","C","11.623019","-2.9405087","11.470661","-2.1258178","11.288619","-1.446424","z"], 68 dx: size * 17, 69 dy: size * 17, 70 attrs: { 71 scale: size, 72 fill: "white" 73 } 74 }; 75 }; 76 /** 77 * Flower arrow. 78 * @name Joint.arrows.flower 79 * @memberOf Joint.arrows 80 */ 81 arrows.flower = function(size){ 82 // size is scale here! 83 size = size ? 1 + (0.1 * size) : 1; 84 return { 85 path: ["M","14.407634","0.14101164","C","13.49394","-0.67828198","12.640683","-1.3981484","11.695412","-1.9684748","C","9.0580339","-3.5615387","6.1975385","-4.0965167","3.8809003","-3.2050972","C","-1.0202735","-1.4355585","-2.2650956","-0.75266958","-6.1678175","-0.75266958","L","-6.1678175","-2.0100414","C","-1.8745566","-2.0888183","1.0024122","-3.7090503","1.8649218","-6.1147565","C","2.2734082","-7.1733737","2.0690534","-8.5444386","0.7737959","-9.8037723","C","-0.82956951","-11.36162","-5.2455289","-11.821547","-6.0950803","-7.2474282","C","-5.3751604","-7.7316963","-3.8041596","-7.6860056","-3.2477662","-6.7174716","C","-2.8775009","-5.9772878","-3.0228781","-5.1443269","-3.3412911","-4.7534348","C","-3.7218578","-4.1236184","-4.935379","-3.5168459","-6.1678175","-3.5168459","L","-6.1678175","-5.6886834","L","-8.5890734","-5.6886834","L","-8.5890734","-1.1787104","C","-9.8368017","-1.2379009","-10.838424","-1.918296","-11.394817","-3.1843135","C","-11.92063","-3.0214395","-12.984452","-2.2582108","-12.911997","-1.2099015","C","-14.045721","-1.0028338","-14.687381","-0.80225028","-15.717737","0.14101164","C","-14.687714","1.0836088","-14.046053","1.2744822","-12.911997","1.4815506","C","-12.984786","2.5298263","-11.92063","3.2930879","-11.394817","3.4559626","C","-10.838424","2.1902771","-9.8368017","1.5095164","-8.5890734","1.4503588","L","-8.5890734","5.9603315","L","-6.1678175","5.9603315","L","-6.1678175","3.788495","C","-4.935379","3.788495","-3.7218578","4.3958989","-3.3412911","5.0250837","C","-3.0228781","5.4159757","-2.8775009","6.2482381","-3.2477662","6.9891209","C","-3.8041596","7.9569902","-5.3751604","8.003345","-6.0950803","7.5190778","C","-5.2455353","12.093197","-0.82956631","11.643978","0.7737959","10.08583","C","2.0693864","8.827128","2.2734082","7.4453226","1.8649218","6.3864056","C","1.00208","3.980998","-1.8745566","2.3705098","-6.1678175","2.2920986","L","-6.1678175","1.0243179","C","-2.2650956","1.0243179","-1.0206064","1.7065088","3.8809003","3.4767455","C","6.1975385","4.367168","9.0580339","3.8331873","11.695412","2.2401238","C","12.640683","1.669431","13.493608","0.95964074","14.407634","0.14101164","z"], 86 dx: size * 15, 87 dy: size * 15, 88 attrs: { 89 scale: size, 90 fill: "white" 91 } 92 }; 93 }; 94 /** 95 * Rectangle arrow. 96 * @name Joint.arrows.rect 97 * @memberOf Joint.arrows 98 */ 99 arrows.rect = function(size){ 100 if (!size) { size = 5; } 101 return { 102 path: ["M",(3*size).toString(),size.toString(), 103 "L",(-3*size).toString(),size.toString(), 104 "L",(-3*size).toString(),(-size).toString(), 105 "L", (3*size).toString(), (-size).toString(), "z"], 106 dx: 3*size, 107 dy: 3*size, 108 attrs: { 109 stroke: "black", 110 fill: "white", 111 "stroke-width": 1.0 112 } 113 }; 114 }; 115 116 })(this); 117