Julio Biason
11 years ago
4 changed files with 84 additions and 0 deletions
@ -0,0 +1,9 @@ |
|||||||
|
/*! JointJS v0.9.0 - JavaScript diagramming library 2014-05-13 |
||||||
|
|
||||||
|
|
||||||
|
This Source Code Form is subject to the terms of the Mozilla Public |
||||||
|
License, v. 2.0. If a copy of the MPL was not distributed with this |
||||||
|
file, You can obtain one at http://mozilla.org/MPL/2.0/. |
||||||
|
*/ |
||||||
|
|
||||||
|
.viewport{-webkit-user-select:none;-moz-user-select:none;user-select:none}[magnet=true]:not(.element){cursor:crosshair}[magnet=true]:not(.element):hover{opacity:.7}.element{cursor:move}.element *{vector-effect:non-scaling-stroke;-moz-user-select:none;user-drag:none}.connection-wrap{fill:none;stroke:#000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:0;cursor:move}.connection-wrap:hover{opacity:.4;stroke-opacity:.4}.connection{fill:none;stroke-linejoin:round}.marker-source,.marker-target{vector-effect:non-scaling-stroke}.marker-vertices{opacity:0;cursor:move}.marker-arrowheads{opacity:0;cursor:move;cursor:-webkit-grab;cursor:-moz-grab}.link-tools{opacity:0;cursor:pointer}.link-tools .tool-options{display:none}.link-tools .tool-remove circle{fill:red}.link-tools .tool-remove path{fill:#fff}.link:hover .marker-vertices,.link:hover .marker-arrowheads,.link:hover .link-tools{opacity:1}.marker-vertex{fill:#1ABC9C}.marker-vertex:hover{fill:#34495E;stroke:none}.marker-arrowhead{fill:#1ABC9C}.marker-arrowhead:hover{fill:#F39C12;stroke:none}.marker-vertex-remove{cursor:pointer;opacity:.1;fill:#fff}.marker-vertex-group:hover .marker-vertex-remove{opacity:1}.marker-vertex-remove-area{opacity:.1;cursor:pointer}.marker-vertex-group:hover .marker-vertex-remove-area{opacity:1}text.highlighted{fill:red}.highlighted{outline:2px solid red;opacity:.7 \9}@-moz-document url-prefix(){.highlighted{opacity:.7}}doesnotexist:-o-prefocus,.highlighted{opacity:.7}.TextBlock .fobj body{background-color:transparent;margin:0}.TextBlock .fobj div{text-align:center;vertical-align:middle;display:table-cell;padding:0 5px} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@ |
|||||||
|
/*! JointJS v0.9.0 - JavaScript diagramming library 2014-05-13 |
||||||
|
|
||||||
|
|
||||||
|
This Source Code Form is subject to the terms of the Mozilla Public |
||||||
|
License, v. 2.0. If a copy of the MPL was not distributed with this |
||||||
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/ |
||||||
|
if("object"==typeof exports)var joint={util:require("../src/core").util,shapes:{basic:require("./joint.shapes.basic")},dia:{Element:require("../src/joint.dia.element").Element,Link:require("../src/joint.dia.link").Link}};joint.shapes.fsa={},joint.shapes.fsa.State=joint.shapes.basic.Circle.extend({defaults:joint.util.deepSupplement({type:"fsa.State",attrs:{circle:{"stroke-width":3},text:{"font-weight":"bold"}}},joint.shapes.basic.Circle.prototype.defaults)}),joint.shapes.fsa.StartState=joint.dia.Element.extend({markup:'<g class="rotatable"><g class="scalable"><circle/></g></g>',defaults:joint.util.deepSupplement({type:"fsa.StartState",size:{width:20,height:20},attrs:{circle:{transform:"translate(10, 10)",r:10,fill:"black"}}},joint.dia.Element.prototype.defaults)}),joint.shapes.fsa.EndState=joint.dia.Element.extend({markup:'<g class="rotatable"><g class="scalable"><circle class="outer"/><circle class="inner"/></g></g>',defaults:joint.util.deepSupplement({type:"fsa.EndState",size:{width:20,height:20},attrs:{".outer":{transform:"translate(10, 10)",r:10,fill:"#FFFFFF",stroke:"black"},".inner":{transform:"translate(10, 10)",r:6,fill:"#000000"}}},joint.dia.Element.prototype.defaults)}),joint.shapes.fsa.Arrow=joint.dia.Link.extend({defaults:joint.util.deepSupplement({type:"fsa.Arrow",attrs:{".marker-target":{d:"M 10 0 L 0 5 L 10 10 z"}},smooth:!0},joint.dia.Link.prototype.defaults)}),"object"==typeof exports&&(module.exports=joint.shapes.fsa); |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<link rel='stylesheet' href='joint.min.css'> |
||||||
|
<style> |
||||||
|
body { |
||||||
|
background-color: black; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<div id='graph'></div> |
||||||
|
</body> |
||||||
|
|
||||||
|
<script src='joint.min.js'></script> |
||||||
|
<script src='joint.shapes.fsa.min.js'></script> |
||||||
|
|
||||||
|
<script> |
||||||
|
var graph = new joint.dia.Graph; |
||||||
|
var paper = new joint.dia.Paper({ |
||||||
|
el: $('#graph'), |
||||||
|
width: 800, |
||||||
|
height: 600, |
||||||
|
gridSize: 1, |
||||||
|
model: graph |
||||||
|
}); |
||||||
|
|
||||||
|
var master = new joint.shapes.fsa.State({ |
||||||
|
position: {x: 10, y: 10}, |
||||||
|
size: { width: 80, height: 80 }, |
||||||
|
attrs: { text: { text: 'master' } }, |
||||||
|
rect: { fill: 'white' } |
||||||
|
}); |
||||||
|
graph.addCell(master); |
||||||
|
|
||||||
|
var develop = new joint.shapes.fsa.State({ |
||||||
|
position: { x: 120, y: 60 }, |
||||||
|
size: { width: 80, height: 80 }, |
||||||
|
attrs: { text: { text: 'develop' } } |
||||||
|
}); |
||||||
|
graph.addCell(develop); |
||||||
|
|
||||||
|
var link = new joint.shapes.fsa.Arrow({ |
||||||
|
source: { id: master.id }, |
||||||
|
target: { id: develop }, |
||||||
|
attrs: { rect: { fill: 'white' } } |
||||||
|
}); |
||||||
|
link._opt.attrs.stroke = 'white'; |
||||||
|
graph.addCell(link); |
||||||
|
|
||||||
|
</script> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue