jbiason
/
Presentations
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

trying to understand jointjs to add some graphics in the presentations

master
Julio Biason 10 years ago
parent
4aeb3ce3be
commit
7472ece132
4 changed files with 84 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      jointjs/joint.min.css
  2. 14
      jointjs/joint.min.js
  3. 8
      jointjs/joint.shapes.fsa.min.js
  4. 53
      jointjs/testjoint.html

9
jointjs/joint.min.css vendored
Unescape View File

@ -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}

14
jointjs/joint.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
jointjs/joint.shapes.fsa.min.js vendored
Unescape View File

@ -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);

53
jointjs/testjoint.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save