1 (function(global){ // BEGIN CLOSURE 2 3 var Joint = global.Joint, 4 Element = Joint.dia.Element, 5 point = Joint.point; 6 7 /** 8 * @name Joint.dia.fsa 9 * @namespace Holds functionality related to FSA diagrams. 10 */ 11 var fsa = Joint.dia.fsa = {}; 12 13 /** 14 * Predefined arrow. You are free to use this arrow as the option parameter to joint method. 15 * @name arrow 16 * @memberOf Joint.dia.fsa 17 * @example 18 * var arrow = Joint.dia.fsa.arrow; 19 * s1.joint(s2, (arrow.label = "anEvent", arrow)); 20 */ 21 fsa.arrow = { 22 startArrow: {type: "none"}, 23 endArrow: {type: "basic", size: 5}, 24 attrs: {"stroke-dasharray": "none"} 25 }; 26 27 /** 28 * Finite state machine state. 29 * @name State.create 30 * @methodOf Joint.dia.fsa 31 * @param {Object} properties 32 * @param {Object} properties.position Position of the State (e.g. {x: 50, y: 100}). 33 * @param {Number} [properties.radius] Radius of the circle of the state. 34 * @param {String} [properties.label] The name of the state. 35 * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the state circle origin. 36 * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the state circle origin. 37 * @param {Object} [properties.attrs] SVG attributes of the appearance of the state. 38 * @example 39 var s1 = Joint.dia.fsa.State.create({ 40 position: {x: 120, y: 70}, 41 label: "state 1", 42 radius: 40, 43 attrs: { 44 stroke: "blue", 45 fill: "yellow" 46 } 47 }); 48 */ 49 fsa.State = Element.extend({ 50 object: "State", 51 module: "fsa", 52 init: function(properties){ 53 // options 54 var p = Joint.DeepSupplement(this.properties, properties, { 55 position: point(0,0), 56 radius: 30, 57 label: 'State', 58 labelOffsetX: 30/2, 59 labelOffsetY: 30/2 + 8, 60 attrs: { fill: 'white' } 61 }); 62 // wrapper 63 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs)); 64 // inner 65 this.addInner(this.getLabelElement()); 66 }, 67 getLabelElement: function(){ 68 var 69 p = this.properties, 70 bb = this.wrapper.getBBox(), 71 t = this.paper.text(bb.x, bb.y, p.label), 72 tbb = t.getBBox(); 73 t.translate(bb.x - tbb.x + p.labelOffsetX, 74 bb.y - tbb.y + p.labelOffsetY); 75 return t; 76 } 77 }); 78 79 /** 80 * Finite state machine start state. 81 * @name StartState.create 82 * @methodOf Joint.dia.fsa 83 * @param {Object} properties 84 * @param {Object} properties.position Position of the start state (e.g. {x: 50, y: 100}). 85 * @param {Number} [properties.radius] Radius of the circle of the start state. 86 * @param {Object} [properties.attrs] SVG attributes of the appearance of the start state. 87 * @example 88 var s0 = Joint.dia.fsa.StartState.create({ 89 position: {x: 120, y: 70}, 90 radius: 15, 91 attrs: { 92 stroke: "blue", 93 fill: "yellow" 94 } 95 }); 96 */ 97 fsa.StartState = Element.extend({ 98 object: "StartState", 99 module: "fsa", 100 init: function(properties){ 101 // options 102 var p = Joint.DeepSupplement(this.properties, properties, { 103 position: point(0,0), 104 radius: 10, 105 attrs: { fill: 'black' } 106 }); 107 // wrapper 108 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs)); 109 } 110 }); 111 112 /** 113 * Finite state machine end state. 114 * @name EndState.create 115 * @methodOf Joint.dia.fsa 116 * @param {Object} properties 117 * @param {Object} properties.position Position of the end state (e.g. {x: 50, y: 100}). 118 * @param {Number} [properties.radius] Radius of the circle of the end state. 119 * @param {Number} [properties.innerRadius] Radius of the inner circle of the end state. 120 * @param {Object} [properties.attrs] SVG attributes of the appearance of the end state. 121 * @param {Object} [properties.innerAttrs] SVG attributes of the appearance of the inner circle of the end state. 122 * @example 123 var s0 = Joint.dia.fsa.EndState.create({ 124 position: {x: 120, y: 70}, 125 radius: 15, 126 innerRadius: 8, 127 attrs: { 128 stroke: "blue", 129 fill: "yellow" 130 }, 131 innerAttrs: { 132 fill: "red" 133 } 134 }); 135 */ 136 fsa.EndState = Element.extend({ 137 object: "EndState", 138 module: "fsa", 139 init: function(properties){ 140 // options 141 var p = Joint.DeepSupplement(this.properties, properties, { 142 position: point(0,0), 143 radius: 10, 144 innerRadius: (properties.radius && (properties.radius / 2)) || 5, 145 attrs: { fill: 'white' }, 146 innerAttrs: { fill: 'black' } 147 }); 148 // wrapper 149 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs)); 150 // inner 151 this.addInner(this.paper.circle(p.position.x, p.position.y, p.innerRadius).attr(p.innerAttrs)); 152 }, 153 zoom: function(){ 154 this.inner[0].scale.apply(this.inner[0], arguments); 155 } 156 }); 157 158 })(this); // END CLOSURE 159