Skip to content

Instantly share code, notes, and snippets.

/options.json

Created February 6, 2014 18:31
Show Gist options
  • Save anonymous/8849870 to your computer and use it in GitHub Desktop.
Save anonymous/8849870 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
options.json
{
"libraries": [
"JointJS"
],
"mode": "javascript",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
Raw
water.css
/*! JointJS v0.8.0 - JavaScript diagramming library 2014-01-22
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}
button {
z-index: 1000;
position: relative;
}
#paper {
position: absolute;
top: 0;
bottom: 0;
background: #C7C7C7;
width: 100%;
font-size: 0.77em;
}
Raw
water.html
<button id='read'>Read from JSON</button>
<button id='write'>Write to JSON (modify any code tab for write to actually happen)</button>
<div id='paper'></div>
Raw
water.js
var graph = new joint.dia.Graph;
$('#read').click(function(e) {
livecoding.json.cells && graph.fromJSON(livecoding.json);
});
$('#write').click(function(e) {
livecoding.json = graph.toJSON();
});
var paper = new joint.dia.Paper({
el: $('#paper'),
width: '100%',
height: '99%',
gridSize: 1,
model: graph
});
function createStart(x, y, label) {
var cell = new joint.shapes.fsa.StartState({
position: { x: 50, y: 75 },
attrs: { text : { text: label }}
});
graph.addCell(cell);
return cell;
}
function createState(x, y, label) {
var cell = new joint.shapes.fsa.State({
position: { x: x, y: y },
size: { width: 50, height: 50 },
attrs: { text : { text: label }}
});
graph.addCell(cell);
return cell;
};
function createEvent(source, target, label, vertices) {
var cell = new joint.shapes.fsa.Arrow({
source: { id: source.id },
target: { id: target.id },
labels: [{ position: .5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
vertices: vertices || []
});
graph.addCell(cell);
return cell;
}
var loading = createStart(50, 75, 'loading');
var intro = createState(200, 75, 'intro');
var rent = createState(400, 75, 'rent');
var simulation = createState(400, 200, 'simulation');
var fact = createState(300, 300, 'fact');
var issue = createState(200, 200, 'issue');
var violation = createState(500, 300, 'violation');
var highscores = createState(700, 100, 'highscores');
var yearend = createState(600, 205, 'yearend');
createEvent(loading, intro, 'loaded');
createEvent(intro, rent, 'userInput');
createEvent(rent, simulation, 'userInput');
createEvent(simulation, issue, 'chance');
createEvent(simulation, violation, 'chance');
createEvent(fact, simulation, 'bypass');
createEvent(fact, simulation, 'userInput', [{x: 400, y: 300}]);
createEvent(issue, fact, 'userInput');
createEvent(violation, fact, 'userInput');
createEvent(simulation, yearend, 'time');
createEvent(yearend, rent, 'userInput');
createEvent(yearend, highscores, 'userInput');
createEvent(highscores, intro, 'userInput', [{x: 500, y: 25}]);
Raw
water.json
{
"cells": [
{
"type": "fsa.StartState",
"size": {
"width": 20,
"height": 20
},
"position": {
"x": 50,
"y": 75
},
"angle": 0,
"id": "8736ed6a-7476-4c77-96b3-32bbeabc5c93",
"z": 0,
"attrs": {
"text": {
"text": "loading"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 200,
"y": 75
},
"angle": 0,
"id": "e81c2743-d9a4-4f9e-babf-fecc0526a626",
"z": 1,
"attrs": {
"text": {
"text": "intro"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 390,
"y": 114
},
"angle": 0,
"id": "a9e882a1-9a01-4d0c-9600-6d3f7b94cad1",
"z": 2,
"attrs": {
"text": {
"text": "rent"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 404,
"y": 247
},
"angle": 0,
"id": "a861f5ef-8141-4193-86bd-388b2e821f18",
"z": 3,
"attrs": {
"text": {
"text": "simulation"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 233,
"y": 414
},
"angle": 0,
"id": "9057b4bb-c2b6-4e74-9cd4-e3971e72d7e4",
"z": 4,
"attrs": {
"text": {
"text": "fact"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 200,
"y": 200
},
"angle": 0,
"id": "c3b0ca1e-d822-4ebc-8dcd-d85f0cb312fd",
"z": 5,
"attrs": {
"text": {
"text": "issue"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 559,
"y": 408
},
"angle": 0,
"id": "07a24ad5-29c9-4917-bf61-7d1acc6896e0",
"z": 6,
"attrs": {
"text": {
"text": "violation"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 722,
"y": 169
},
"angle": 0,
"id": "c6713295-e605-4121-a2f5-d9e3718447f3",
"z": 7,
"attrs": {
"text": {
"text": "highscores"
}
}
},
{
"type": "fsa.State",
"size": {
"width": 50,
"height": 50
},
"position": {
"x": 609,
"y": 252
},
"angle": 0,
"id": "4344e3e6-aa57-44f2-99b9-c1d932b524e8",
"z": 8,
"attrs": {
"text": {
"text": "yearend"
}
}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "8736ed6a-7476-4c77-96b3-32bbeabc5c93"
},
"target": {
"id": "e81c2743-d9a4-4f9e-babf-fecc0526a626"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "loaded",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "3010a4bd-43dc-4531-bf2c-c1d958b38032",
"z": 9,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "e81c2743-d9a4-4f9e-babf-fecc0526a626"
},
"target": {
"id": "a9e882a1-9a01-4d0c-9600-6d3f7b94cad1"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "4948bd38-11df-462c-9d32-455b513eb226",
"z": 10,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "a9e882a1-9a01-4d0c-9600-6d3f7b94cad1"
},
"target": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "450c7b1e-a346-4101-8c4f-535b68483589",
"z": 11,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"target": {
"id": "c3b0ca1e-d822-4ebc-8dcd-d85f0cb312fd"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "chance",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "933b7f88-9bcc-4a02-bad0-8834f8c90987",
"z": 12,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"target": {
"id": "07a24ad5-29c9-4917-bf61-7d1acc6896e0"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "chance",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "c89469cc-7d12-4845-8472-04ab4ae4d347",
"z": 13,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "9057b4bb-c2b6-4e74-9cd4-e3971e72d7e4"
},
"target": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "bypass",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "18464267-c713-4715-8963-c64e74d646a4",
"z": 14,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "9057b4bb-c2b6-4e74-9cd4-e3971e72d7e4"
},
"target": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [
{
"x": 400,
"y": 300
}
],
"id": "fb88b0e0-7048-4607-895c-8cb16bd1bebe",
"z": 15,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "c3b0ca1e-d822-4ebc-8dcd-d85f0cb312fd"
},
"target": {
"id": "9057b4bb-c2b6-4e74-9cd4-e3971e72d7e4"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "af954f0a-c988-41b8-9fb4-7514f2dbfc9f",
"z": 16,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "07a24ad5-29c9-4917-bf61-7d1acc6896e0"
},
"target": {
"id": "9057b4bb-c2b6-4e74-9cd4-e3971e72d7e4"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "7aab4e6e-4f2f-4b13-8398-8a55834836b5",
"z": 17,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "a861f5ef-8141-4193-86bd-388b2e821f18"
},
"target": {
"id": "4344e3e6-aa57-44f2-99b9-c1d932b524e8"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "time",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "4457e03d-d0ba-4d76-b1b4-8d70b45b7d1e",
"z": 18,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "4344e3e6-aa57-44f2-99b9-c1d932b524e8"
},
"target": {
"id": "a9e882a1-9a01-4d0c-9600-6d3f7b94cad1"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "9a5fdcc7-1ce8-47ff-a987-da1700b5d22c",
"z": 19,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "4344e3e6-aa57-44f2-99b9-c1d932b524e8"
},
"target": {
"id": "c6713295-e605-4121-a2f5-d9e3718447f3"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [],
"id": "658711bf-d67b-4089-9788-86f0cbcc5854",
"z": 20,
"attrs": {}
},
{
"type": "fsa.Arrow",
"smooth": true,
"source": {
"id": "c6713295-e605-4121-a2f5-d9e3718447f3"
},
"target": {
"id": "e81c2743-d9a4-4f9e-babf-fecc0526a626"
},
"labels": [
{
"position": 0.5,
"attrs": {
"text": {
"text": "userInput",
"font-weight": "bold"
}
}
}
],
"vertices": [
{
"x": 474,
"y": 70
}
],
"id": "ae9ae4b7-7a3c-43fb-8384-baecbdc52300",
"z": 21,
"attrs": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment