View this code at http://livecoding.io/8849899
-
-
Save russellsamora/8849899 to your computer and use it in GitHub Desktop.
created by http://livecoding.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "libraries": [ | |
| "JointJS" | |
| ], | |
| "mode": "javascript", | |
| "layout": "fullscreen mode (vertical)", | |
| "resolution": "reset" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! 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; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cells": [ | |
| { | |
| "type": "fsa.StartState", | |
| "size": { | |
| "width": 20, | |
| "height": 20 | |
| }, | |
| "position": { | |
| "x": 50, | |
| "y": 75 | |
| }, | |
| "angle": 0, | |
| "id": "23e64db7-23d7-48fc-8990-271570da770d", | |
| "z": 0, | |
| "attrs": { | |
| "text": { | |
| "text": "loading" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 200, | |
| "y": 75 | |
| }, | |
| "angle": 0, | |
| "id": "e70bbc9a-098e-4c8a-99d0-ff2c16aab2ae", | |
| "z": 1, | |
| "attrs": { | |
| "text": { | |
| "text": "intro" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 400, | |
| "y": 75 | |
| }, | |
| "angle": 0, | |
| "id": "da4e0773-c26d-4949-b6ac-0ca045dae61a", | |
| "z": 2, | |
| "attrs": { | |
| "text": { | |
| "text": "rent" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 400, | |
| "y": 200 | |
| }, | |
| "angle": 0, | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310", | |
| "z": 3, | |
| "attrs": { | |
| "text": { | |
| "text": "simulation" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 300, | |
| "y": 300 | |
| }, | |
| "angle": 0, | |
| "id": "5505a29c-88c7-4bdd-81e0-c6ebbde2b59e", | |
| "z": 4, | |
| "attrs": { | |
| "text": { | |
| "text": "fact" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 200, | |
| "y": 200 | |
| }, | |
| "angle": 0, | |
| "id": "7ac0598b-7b2b-407f-8ee3-964202a36ea3", | |
| "z": 5, | |
| "attrs": { | |
| "text": { | |
| "text": "issue" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 500, | |
| "y": 300 | |
| }, | |
| "angle": 0, | |
| "id": "4e1ad792-2fa7-4aa0-8a3c-dbe320f80b38", | |
| "z": 6, | |
| "attrs": { | |
| "text": { | |
| "text": "violation" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 712, | |
| "y": 153 | |
| }, | |
| "angle": 0, | |
| "id": "789bb3dd-c563-4e19-8d8c-306e35d67802", | |
| "z": 7, | |
| "attrs": { | |
| "text": { | |
| "text": "highscores" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.State", | |
| "size": { | |
| "width": 50, | |
| "height": 50 | |
| }, | |
| "position": { | |
| "x": 600, | |
| "y": 205 | |
| }, | |
| "angle": 0, | |
| "id": "e7b96720-9e0b-4e38-8ed1-a6e638740f53", | |
| "z": 8, | |
| "attrs": { | |
| "text": { | |
| "text": "yearend" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "23e64db7-23d7-48fc-8990-271570da770d" | |
| }, | |
| "target": { | |
| "id": "e70bbc9a-098e-4c8a-99d0-ff2c16aab2ae" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "loaded", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "ad513e4c-06cb-45eb-9ced-7cefbb586085", | |
| "z": 9, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "e70bbc9a-098e-4c8a-99d0-ff2c16aab2ae" | |
| }, | |
| "target": { | |
| "id": "da4e0773-c26d-4949-b6ac-0ca045dae61a" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "8d5b65a8-5530-423b-9023-ccc302e106f1", | |
| "z": 10, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "da4e0773-c26d-4949-b6ac-0ca045dae61a" | |
| }, | |
| "target": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "804dac34-4ee0-40cf-9220-f09b04f2f984", | |
| "z": 11, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "target": { | |
| "id": "7ac0598b-7b2b-407f-8ee3-964202a36ea3" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "chance", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "5478f50c-f530-40b4-8804-3dc7f0c6c620", | |
| "z": 12, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "target": { | |
| "id": "4e1ad792-2fa7-4aa0-8a3c-dbe320f80b38" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "chance", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "bd7b1752-f3e0-42e1-a463-b6e2acfaf10e", | |
| "z": 13, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "5505a29c-88c7-4bdd-81e0-c6ebbde2b59e" | |
| }, | |
| "target": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "bypass", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "615c99c7-5a14-41ee-b201-d1cf87485fcf", | |
| "z": 14, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "5505a29c-88c7-4bdd-81e0-c6ebbde2b59e" | |
| }, | |
| "target": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [ | |
| { | |
| "x": 400, | |
| "y": 300 | |
| } | |
| ], | |
| "id": "d0f0a785-0934-4303-ba6f-9b458ccf6854", | |
| "z": 15, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "7ac0598b-7b2b-407f-8ee3-964202a36ea3" | |
| }, | |
| "target": { | |
| "id": "5505a29c-88c7-4bdd-81e0-c6ebbde2b59e" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "f5616b42-dfbc-4265-b191-fa1d37c354b7", | |
| "z": 16, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "4e1ad792-2fa7-4aa0-8a3c-dbe320f80b38" | |
| }, | |
| "target": { | |
| "id": "5505a29c-88c7-4bdd-81e0-c6ebbde2b59e" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "79c5f7d2-546b-4a09-86da-17d8968bce32", | |
| "z": 17, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "551735d8-5d7b-4f75-80f7-2409cc85a310" | |
| }, | |
| "target": { | |
| "id": "e7b96720-9e0b-4e38-8ed1-a6e638740f53" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "time", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "4e4f5796-b500-4bad-b9e1-ab9e0e5a180c", | |
| "z": 18, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "e7b96720-9e0b-4e38-8ed1-a6e638740f53" | |
| }, | |
| "target": { | |
| "id": "da4e0773-c26d-4949-b6ac-0ca045dae61a" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "208c58c1-f3e9-480f-b6fc-0a5a68cc2f83", | |
| "z": 19, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "e7b96720-9e0b-4e38-8ed1-a6e638740f53" | |
| }, | |
| "target": { | |
| "id": "789bb3dd-c563-4e19-8d8c-306e35d67802" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [], | |
| "id": "39aa1dd4-e210-4c6e-a114-79a2d813ab84", | |
| "z": 20, | |
| "attrs": {} | |
| }, | |
| { | |
| "type": "fsa.Arrow", | |
| "smooth": true, | |
| "source": { | |
| "id": "789bb3dd-c563-4e19-8d8c-306e35d67802" | |
| }, | |
| "target": { | |
| "id": "e70bbc9a-098e-4c8a-99d0-ff2c16aab2ae" | |
| }, | |
| "labels": [ | |
| { | |
| "position": 0.5, | |
| "attrs": { | |
| "text": { | |
| "text": "userInput", | |
| "font-weight": "bold" | |
| } | |
| } | |
| } | |
| ], | |
| "vertices": [ | |
| { | |
| "x": 500, | |
| "y": 25 | |
| } | |
| ], | |
| "id": "0967178a-96cf-468b-994f-c8881f90c534", | |
| "z": 21, | |
| "attrs": {} | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment