├── images └── grid.png ├── index.html ├── app.js ├── LICENSE ├── README.md ├── lib ├── joint.shapes.devs.js ├── joint.css └── jquery.contextmenu.js ├── index.css └── dialogger.js /images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajboni/Talkit/HEAD/images/grid.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dialogger 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var app = module.exports = require('appjs'); 2 | 3 | app.serveFilesFrom(__dirname + '/content'); 4 | 5 | var window = app.createWindow( 6 | { 7 | width : 1280, 8 | height : 720, 9 | icons : __dirname + '/content/icons' 10 | }); 11 | 12 | window.on('create', function() 13 | { 14 | window.frame.show(); 15 | window.frame.center(); 16 | }); 17 | 18 | window.on('ready', function() 19 | { 20 | window.require = require; 21 | window.process = process; 22 | window.module = module; 23 | 24 | function F12(e) { return e.keyIdentifier === 'F12' } 25 | function Command_Option_J(e) { return e.keyCode === 74 && e.metaKey && e.altKey } 26 | 27 | window.addEventListener('keydown', function(e) 28 | { 29 | if (F12(e) || Command_Option_J(e)) 30 | window.frame.openDevTools(); 31 | }); 32 | 33 | window.dispatchEvent(new window.Event('app-ready')); 34 | }); 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 peladovii 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Advertisement 2 | 3 | > Hello! I'm currently working on a similar but more powerful app which supports multiple dialogues with built in scripting, gdds, quest, etc. 4 | > https://drafft.dev 5 | 6 | --- 7 | 8 | # Talkit 9 | 10 | Web Based, Non-Linear Game Dialogue Editor. 11 | 12 | # 13 | 14 | Talkit is a fork of [etodd's](https://github.com/etodd) wonderful [The Poor Man's Dialogue Tree](https://etodd.io/2014/05/16/the-poor-mans-dialogue-tree/) which is currently part of [Lemma](https://github.com/etodd/Lemma) project. 15 | 16 | ## Description 17 | 18 | Talkit is a Non-linear, node based, game dialog editor. 19 | It runs on [jointJS](https://www.jointjs.com/). It exports to JSON with game ready content. 20 | ![alt text](https://i.imgur.com/7lu8NIy.png?1) 21 | 22 | ## Nodes 23 | 24 | ### Text 25 | 26 | Display a message from the specified actor. 27 | Actor: Specify the actor who will say the speech. 28 | Speech: The text the actor will say. 29 | 30 | ### Choice 31 | 32 | Intended to populate the players choices for responses. 33 | Title: The title of the choice. This is useful for cases when the buttons the player would have to chose from 34 | will differ from the actual speech he will say. 35 | Speech: The text the actor will say. 36 | 37 | ### Set 38 | 39 | Sets a variable to a value. Can link to one Text, Node, Set, or Branch. 40 | 41 | ### Branch 42 | 43 | Takes one of several paths based on the value of a variable. Each port can link to one Text, Node, Set, or Branch. 44 | 45 | ### Node 46 | 47 | Does nothing. Can link to one Text, Node, Set, or Branch, or to one or more Choices. 48 | 49 | ## Usage 50 | 51 | Fire up the HTML, make your dialog and export. 52 | You can add ?load="file.json" to the URL to load a graph saved on cache. 53 | Example Output: 54 | 55 | ```javascript 56 | [ 57 | { 58 | type: "Text", 59 | id: "227b6f95-2759-4bda-8364-3bcbcb2cbf4d", 60 | actor: "Detective", 61 | name: "Now tell me Victor.\nWhere were you last night?", 62 | choices: [ 63 | "b24806af-4923-4881-84c8-93426cbe3c19", 64 | "69261cd7-1cfe-4088-8c7c-99f19bc5fb25", 65 | ], 66 | }, 67 | { 68 | type: "Choice", 69 | id: "69261cd7-1cfe-4088-8c7c-99f19bc5fb25", 70 | title: "Honest Answer", 71 | name: "I was at her house.\nBut I dind't saw anything strange.", 72 | next: "6e9f9c69-3efc-447b-ac3a-ade28635b106", 73 | }, 74 | { 75 | type: "Choice", 76 | id: "b24806af-4923-4881-84c8-93426cbe3c19", 77 | title: "Lie", 78 | name: "", 79 | next: "fe9c4ac5-3f5a-4df1-91fe-e45b523017d7", 80 | }, 81 | { 82 | type: "Set", 83 | id: "6e9f9c69-3efc-447b-ac3a-ade28635b106", 84 | variable: "Honest", 85 | value: "true", 86 | next: "fd3067f6-2afc-42e8-a697-2bb5739a8438", 87 | }, 88 | { 89 | type: "Set", 90 | id: "fe9c4ac5-3f5a-4df1-91fe-e45b523017d7", 91 | variable: "Honest", 92 | value: "false", 93 | next: "fd3067f6-2afc-42e8-a697-2bb5739a8438", 94 | }, 95 | { 96 | type: "Text", 97 | id: "fd3067f6-2afc-42e8-a697-2bb5739a8438", 98 | actor: "Detective", 99 | name: "That will be all for now.", 100 | next: null, 101 | }, 102 | ]; 103 | ``` 104 | 105 | ## Not Implemented Yet - `TODO`: 106 | 107 | - Add ?import="file.json" to import a graph from disk. 108 | - Add the ability to make a node a starting node. 109 | - Display the Id of the node on each node. 110 | -------------------------------------------------------------------------------- /lib/joint.shapes.devs.js: -------------------------------------------------------------------------------- 1 | /*! JointJS v0.8.1 - JavaScript diagramming library 2014-02-24 2 | 3 | 4 | This Source Code Form is subject to the terms of the Mozilla Public 5 | License, v. 2.0. If a copy of the MPL was not distributed with this 6 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 7 | */ 8 | if (typeof exports === 'object') { 9 | 10 | var joint = { 11 | util: require('../src/core').util, 12 | shapes: { 13 | basic: require('./joint.shapes.basic') 14 | }, 15 | dia: { 16 | ElementView: require('../src/joint.dia.element').ElementView, 17 | Link: require('../src/joint.dia.link').Link 18 | } 19 | }; 20 | var _ = require('lodash'); 21 | } 22 | 23 | joint.shapes.devs = {}; 24 | 25 | joint.shapes.devs.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, { 26 | 27 | markup: '', 28 | portMarkup: '', 29 | 30 | defaults: joint.util.deepSupplement({ 31 | 32 | type: 'devs.Model', 33 | size: { width: 1, height: 1 }, 34 | 35 | inPorts: [], 36 | outPorts: [], 37 | 38 | attrs: { 39 | '.': { magnet: false }, 40 | rect: { 41 | width: 150, height: 250, 42 | stroke: 'black' 43 | }, 44 | circle: { 45 | r: 10, 46 | stroke: 'black' 47 | }, 48 | text: { 49 | fill: 'black', 50 | 'pointer-events': 'none' 51 | }, 52 | '.label': { text: 'Model', 'ref-x': .3, 'ref-y': .2 }, 53 | '.inPorts text': { x:-15, dy: 4, 'text-anchor': 'end' }, 54 | '.outPorts text':{ x: 15, dy: 4 } 55 | } 56 | 57 | }, joint.shapes.basic.Generic.prototype.defaults), 58 | 59 | getPortAttrs: function(portName, index, total, selector, type) { 60 | 61 | var attrs = {}; 62 | 63 | var portClass = 'port' + index; 64 | var portSelector = selector + '>.' + portClass; 65 | var portTextSelector = portSelector + '>text'; 66 | var portCircleSelector = portSelector + '>circle'; 67 | 68 | attrs[portTextSelector] = { text: portName }; 69 | attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type) , type: type } }; 70 | attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.5) * (1 / total) }; 71 | 72 | if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 0; } 73 | 74 | return attrs; 75 | } 76 | })); 77 | 78 | 79 | joint.shapes.devs.Atomic = joint.shapes.devs.Model.extend({ 80 | 81 | defaults: joint.util.deepSupplement({ 82 | 83 | type: 'devs.Atomic', 84 | size: { width: 80, height: 80 }, 85 | attrs: { 86 | rect: { fill: 'salmon' }, 87 | '.label': { text: 'Atomic' }, 88 | '.inPorts circle': { fill: 'PaleGreen' }, 89 | '.outPorts circle': { fill: 'Tomato' } 90 | } 91 | 92 | }, joint.shapes.devs.Model.prototype.defaults) 93 | 94 | }); 95 | 96 | joint.shapes.devs.Coupled = joint.shapes.devs.Model.extend({ 97 | 98 | defaults: joint.util.deepSupplement({ 99 | 100 | type: 'devs.Coupled', 101 | size: { width: 200, height: 300 }, 102 | attrs: { 103 | rect: { fill: 'seaGreen' }, 104 | '.label': { text: 'Coupled' }, 105 | '.inPorts circle': { fill: 'PaleGreen' }, 106 | '.outPorts circle': { fill: 'Tomato' } 107 | } 108 | 109 | }, joint.shapes.devs.Model.prototype.defaults) 110 | }); 111 | 112 | joint.shapes.devs.Link = joint.dia.Link.extend({ 113 | 114 | defaults: { 115 | type: 'devs.Link', 116 | attrs: { '.connection' : { 'stroke-width' : 2 }} 117 | } 118 | }); 119 | 120 | joint.shapes.devs.ModelView = joint.dia.ElementView.extend(joint.shapes.basic.PortsViewInterface); 121 | joint.shapes.devs.AtomicView = joint.shapes.devs.ModelView; 122 | joint.shapes.devs.CoupledView = joint.shapes.devs.ModelView; 123 | 124 | 125 | if (typeof exports === 'object') { 126 | 127 | module.exports = joint.shapes.devs; 128 | } 129 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | html, body 2 | { 3 | padding: 0px; 4 | color: #fff; 5 | margin: 0px; 6 | font-family: sans-serif; 7 | font-size: small; 8 | background: #7d8ea2; /* Old browsers */ 9 | background: -moz-linear-gradient(top, #7d8ea2 0%, #121413 100%); /* FF3.6+ */ 10 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8ea2), color-stop(100%,#121413)); /* Chrome,Safari4+ */ 11 | background: -webkit-linear-gradient(top, #7d8ea2 0%,#121413 100%); /* Chrome10+,Safari5.1+ */ 12 | background: -o-linear-gradient(top, #7d8ea2 0%,#121413 100%); /* Opera 11.10+ */ 13 | background: -ms-linear-gradient(top, #7d8ea2 0%,#121413 100%); /* IE10+ */ 14 | background: linear-gradient(to bottom, #7d8ea2 0%,#121413 100%); /* W3C */ 15 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d8ea2', endColorstr='#121413',GradientType=0 ); /* IE6-9 */ 16 | overflow: hidden; 17 | } 18 | 19 | #container 20 | { 21 | overflow: scroll; 22 | } 23 | 24 | #paper 25 | { 26 | position: relative; 27 | display: inline-block; 28 | background: transparent; 29 | background-image: url(images/grid.png); 30 | } 31 | 32 | #paper svg 33 | { 34 | background: transparent; 35 | } 36 | 37 | #paper svg .link 38 | { 39 | z-index: 2; 40 | } 41 | 42 | #menu 43 | { 44 | position: absolute; 45 | display: none; 46 | width: 40%; 47 | z-index: 10000; 48 | padding: 8px; 49 | cursor: pointer; 50 | } 51 | 52 | #menu div 53 | { 54 | clear: right; 55 | padding: 4px; 56 | margin-left: 20px; 57 | margin-right: 20px; 58 | border-bottom: 1px solid #ccc; 59 | } 60 | 61 | #menu div:hover 62 | { 63 | background-color: black; 64 | } 65 | 66 | #flash 67 | { 68 | position: absolute; 69 | top: 10px; 70 | left: 10px; 71 | padding: 8px; 72 | font-weight: bold; 73 | display: none; 74 | } 75 | 76 | /* 77 | Editor tools 78 | */ 79 | .marker-target 80 | { 81 | fill: #fff; 82 | stroke-width: 0; 83 | } 84 | 85 | .marker-vertex 86 | { 87 | fill: #fff; 88 | } 89 | 90 | .marker-vertex:hover 91 | { 92 | fill: #000; 93 | stroke: none; 94 | } 95 | 96 | .marker-arrowhead 97 | { 98 | fill: #fff; 99 | stroke: none; 100 | } 101 | 102 | .marker-arrowhead:hover 103 | { 104 | fill: #000; 105 | } 106 | 107 | .link-tools .tool-remove circle 108 | { 109 | fill: #c0392b; 110 | } 111 | 112 | .connection 113 | { 114 | stroke: #fff; 115 | } 116 | 117 | .inPorts circle 118 | { 119 | fill: #c0392b; 120 | stroke-width: 0; 121 | } 122 | 123 | .outPorts circle 124 | { 125 | fill: #8c6; 126 | stroke-width: 0; 127 | } 128 | 129 | /* 130 | Node styles 131 | */ 132 | 133 | .node 134 | { 135 | position: absolute; 136 | background: #666; 137 | /* Make sure events are propagated to the JointJS element so, e.g. dragging works.*/ 138 | pointer-events: none; 139 | -webkit-user-select: none; 140 | padding: 8px; 141 | box-sizing: border-box; 142 | z-index: 2; 143 | } 144 | 145 | .node input[type="text"], button 146 | { 147 | /* Enable interacting with inputs only. */ 148 | pointer-events: auto; 149 | border: none; 150 | box-sizing: border-box; 151 | background-color: #456; 152 | color: #fff; 153 | 154 | } 155 | 156 | 157 | .node input[type="actor"] 158 | { 159 | /* Enable interacting with inputs only. */ 160 | pointer-events: auto; 161 | border: none; 162 | box-sizing: border-box; 163 | background-color: #456; 164 | color: #fff; 165 | width: 50%; 166 | padding: 4px; 167 | margin-right: 10px; 168 | float:right; 169 | 170 | } 171 | 172 | 173 | .node input[type="choice"] 174 | { 175 | /* Enable interacting with inputs only. */ 176 | pointer-events: auto; 177 | border: none; 178 | box-sizing: border-box; 179 | background-color: #456; 180 | color: #fff; 181 | width: 50%; 182 | padding: 4px; 183 | margin-right: 10px; 184 | float:right; 185 | 186 | } 187 | 188 | 189 | .node textarea 190 | { 191 | /* Enable interacting with inputs only. */ 192 | pointer-events: auto; 193 | border: none; 194 | box-sizing: border-box; 195 | background-color: #456; 196 | color: #fff; 197 | 198 | 199 | 200 | } 201 | .node .label 202 | { 203 | color: #ddd; 204 | } 205 | 206 | .node .label.Text 207 | { 208 | color: #8c6; 209 | } 210 | 211 | .node .label.Set 212 | { 213 | color: #acf; 214 | } 215 | 216 | .node .label.Choice 217 | { 218 | color: #dc5; 219 | } 220 | 221 | .node .label.Branch 222 | { 223 | color: #ea6; 224 | } 225 | 226 | button 227 | { 228 | float: right; 229 | border: none; 230 | border-radius: 8px; 231 | font-weight: bold; 232 | width: 16px; 233 | height: 16px; 234 | line-height: 0px; 235 | text-align: middle; 236 | padding: 0; 237 | margin: 0; 238 | cursor: pointer; 239 | } 240 | 241 | button.delete:hover 242 | { 243 | background-color: #c0392b; 244 | } 245 | 246 | .node button.add:hover 247 | { 248 | background-color: #8c6; 249 | } 250 | 251 | .node button.remove:hover 252 | { 253 | background-color: #dc5; 254 | } 255 | 256 | .node input 257 | { 258 | width: 100%; 259 | padding: 4px; 260 | margin-top: 2px; 261 | 262 | } 263 | 264 | 265 | 266 | .node 267 | { 268 | color: #fff; 269 | } 270 | 271 | /* 272 | Context menu 273 | */ 274 | .b-m-mpanel, #menu, #flash 275 | { 276 | background-color: #444; 277 | position: absolute; 278 | z-index: 99997; 279 | -moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5); 280 | -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5); 281 | box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5); 282 | } 283 | 284 | .b-m-split 285 | { 286 | font-size: 0px; 287 | margin: 2px; 288 | border-bottom: 1px solid #777; 289 | } 290 | 291 | .b-m-item, .b-m-ifocus 292 | { 293 | padding: 8px; 294 | line-height: 100%; 295 | } 296 | 297 | span 298 | { 299 | -moz-user-select: none; 300 | -webkit-user-select: none; 301 | -ms-user-select: none; 302 | user-select: none; 303 | cursor: default; 304 | } 305 | 306 | .b-m-ibody 307 | { 308 | overflow: hidden; 309 | text-overflow: ellipsis; 310 | } 311 | 312 | .b-m-ifocus 313 | { 314 | background-color: #000; 315 | } 316 | -------------------------------------------------------------------------------- /lib/joint.css: -------------------------------------------------------------------------------- 1 | /*! JointJS v0.8.1 - JavaScript diagramming library 2014-02-24 2 | 3 | 4 | This Source Code Form is subject to the terms of the Mozilla Public 5 | License, v. 2.0. If a copy of the MPL was not distributed with this 6 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 7 | */ 8 | /* This Source Code Form is subject to the terms of the Mozilla Public 9 | * License, v. 2.0. If a copy of the MPL was not distributed with this 10 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 11 | 12 | 13 | /* 14 | A complete list of SVG properties that can be set through CSS is here: 15 | http://www.w3.org/TR/SVG/styling.html 16 | 17 | Important note: Presentation attributes have a lower precedence over CSS style rules. 18 | */ 19 | 20 | 21 | /* .viewport is a node wrapping all diagram elements in the paper */ 22 | .viewport { 23 | -webkit-user-select: none; 24 | -moz-user-select: none; 25 | user-select: none; 26 | } 27 | 28 | /* .magnet is an element that can be either source or a target of a link */ 29 | /* 30 | .magnet { 31 | fill: black; 32 | fill-opacity: 0; 33 | stroke: black; 34 | stroke-width: 15; 35 | stroke-opacity: 0; 36 | pointer-events: visibleStroke; 37 | cursor: crosshair; 38 | vector-effect: non-scaling-stroke; 39 | } 40 | 41 | .magnet:hover { 42 | stroke-opacity: .5; 43 | } 44 | */ 45 | 46 | [magnet=true]:not(.element) { 47 | cursor: crosshair; 48 | } 49 | [magnet=true]:not(.element):hover { 50 | opacity: .7; 51 | } 52 | 53 | /* 54 | 55 | Elements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class "element basic Rect". 56 | This makes it possible to easilly style elements in CSS and have generic CSS rules applying to 57 | the whole group of elements. Each plugin can provide its own stylesheet. 58 | 59 | */ 60 | 61 | .element { 62 | /* Give the user a hint that he can drag&drop the element. */ 63 | cursor: move; 64 | } 65 | 66 | .element * { 67 | /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */ 68 | vector-effect: non-scaling-stroke; 69 | -moz-user-select: none; 70 | user-drag: none; 71 | } 72 | 73 | 74 | /* 75 | 76 | connection-wrap is a element of the joint.dia.Link that follows the .connection of that link. 77 | In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the 78 | .connection . The advantage of using .connection-wrap is to be able to catch pointer events 79 | in the neighborhood of the .connection . This is especially handy if the .connection is 80 | very thin. 81 | 82 | */ 83 | 84 | .connection-wrap { 85 | fill: none; 86 | stroke: black; 87 | stroke-width: 15; 88 | stroke-linecap: round; 89 | stroke-linejoin: round; 90 | opacity: 0; 91 | cursor: move; 92 | } 93 | .connection-wrap:hover { 94 | opacity: .4; 95 | stroke-opacity: .4; 96 | } 97 | 98 | 99 | .connection { 100 | /* stroke: black; */ 101 | /* stroke width cannot be overriden by attribute? */ 102 | /* stroke-width: 1; */ 103 | fill: none; 104 | stroke-linejoin: round; 105 | } 106 | 107 | .marker-source, .marker-target { 108 | /* Cannot be in CSS otherwise it could not be overruled by attributes. 109 | fill: black; 110 | stroke: black; 111 | */ 112 | /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */ 113 | vector-effect: non-scaling-stroke; 114 | } 115 | 116 | /* 117 | 118 | Vertex markers are `` elements that appear at connection vertex positions. 119 | 120 | */ 121 | 122 | /* element wrapping .marker-vertex-group. */ 123 | .marker-vertices { 124 | opacity: 0; 125 | cursor: move; 126 | } 127 | .marker-arrowheads { 128 | opacity: 0; 129 | cursor: move; 130 | cursor: -webkit-grab; 131 | cursor: -moz-grab; 132 | /* display: none; */ /* setting `display: none` on .marker-arrowheads effectivelly switches of links reconnecting */ 133 | } 134 | .link-tools { 135 | opacity: 0; 136 | cursor: pointer; 137 | } 138 | .link-tools .tool-options { 139 | display: none; /* by default, we don't display link options tool */ 140 | } 141 | .link-tools .tool-remove circle { 142 | fill: red; 143 | } 144 | .link-tools .tool-remove path { 145 | fill: white; 146 | } 147 | .link:hover .marker-vertices, 148 | .link:hover .marker-arrowheads, 149 | .link:hover .link-tools { 150 | opacity: 1; 151 | } 152 | 153 | /* element inside .marker-vertex-group element */ 154 | .marker-vertex { 155 | fill: #1ABC9C; 156 | } 157 | .marker-vertex:hover { 158 | fill: #34495E; 159 | stroke: none; 160 | } 161 | 162 | .marker-arrowhead { 163 | fill: #1ABC9C; 164 | } 165 | .marker-arrowhead:hover { 166 | fill: #F39C12; 167 | stroke: none; 168 | } 169 | 170 | /* element used to remove a vertex */ 171 | .marker-vertex-remove { 172 | cursor: pointer; 173 | opacity: .1; 174 | fill: white; 175 | } 176 | 177 | .marker-vertex-group:hover .marker-vertex-remove { 178 | opacity: 1; 179 | } 180 | 181 | .marker-vertex-remove-area { 182 | opacity: .1; 183 | cursor: pointer; 184 | } 185 | .marker-vertex-group:hover .marker-vertex-remove-area { 186 | opacity: 1; 187 | } 188 | 189 | /* 190 | 191 | /* Cell highlighting - e.g a cell underneath the dragged link get highlighted. 192 | See joint.dia.cell.js highlight(); */ 193 | 194 | /* For some reason, CSS `outline` property does not work on `` elements. */ 195 | text.highlighted { 196 | fill: #FF0000; 197 | } 198 | 199 | .highlighted { 200 | outline: 2px solid #FF0000; /* `outline` doesn't work in Firefox, Opera and IE9+ correctly. */ 201 | opacity: 0.7 \9; /* It targets only IE9. */ 202 | } 203 | 204 | /* 205 | use '@-moz-document url-prefix()' to target all versions if Firefox and nothing else. 206 | See `https://developer.mozilla.org/en-US/docs/Web/CSS/@document`. 207 | */ 208 | @-moz-document url-prefix() { 209 | .highlighted { opacity: 0.7; } /* only for FF */ 210 | } 211 | 212 | /* 213 | `-o-prefocus` is a pseudo-class that allows styles to be targeted for Opera only. 214 | See `http://www.opera.com/docs/specs/presto2.12/css/o-vendor/`. 215 | */ 216 | doesnotexist:-o-prefocus, .highlighted { 217 | opacity: 0.7; 218 | } 219 | 220 | /* 221 | 222 | Example of custom changes (in pure CSS only!): 223 | 224 | Do not show marker vertices at all: .marker-vertices { display: none; } 225 | Do not allow adding new vertices: .connection-wrap { pointer-events: none; } 226 | 227 | */ 228 | 229 | /* foreignObject in joint.shapes.basic.TextBlock */ 230 | .TextBlock .fobj body { 231 | background-color: transparent; 232 | margin: 0px; 233 | } 234 | .TextBlock .fobj div { 235 | text-align: center; 236 | vertical-align: middle; 237 | display: table-cell; 238 | padding: 0px 5px 0px 5px; 239 | } -------------------------------------------------------------------------------- /lib/jquery.contextmenu.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | function returnfalse() { return false; }; 3 | $.fn.contextmenu = function(option) { 4 | option = $.extend({ alias: "cmroot", width: 150 }, option); 5 | var ruleName = null, target = null, 6 | groups = {}, mitems = {}, actions = {}, showGroups = [], 7 | itemTpl = "
$[text]
"; 8 | var gTemplet = $("
").addClass("b-m-mpanel").attr("unselectable", "on").css("display", "none"); 9 | var iTemplet = $("
").addClass("b-m-item").attr("unselectable", "on"); 10 | var sTemplet = $("
").addClass("b-m-split"); 11 | //build group item, which has sub items 12 | var buildGroup = function(obj) { 13 | groups[obj.alias] = this; 14 | this.gidx = obj.alias; 15 | this.id = obj.alias; 16 | if (obj.disable) { 17 | this.disable = obj.disable; 18 | this.className = "b-m-idisable"; 19 | } 20 | $(this).width(obj.width).click(returnfalse).mousedown(returnfalse).appendTo($("body")); 21 | obj = null; 22 | return this; 23 | }; 24 | var buildItem = function(obj) { 25 | var T = this; 26 | T.idx = obj.alias; 27 | T.gidx = obj.gidx; 28 | T.data = obj; 29 | T.innerHTML = itemTpl.replace(/\$\[([^\]]+)\]/g, function() { 30 | return obj[arguments[1]]; 31 | }); 32 | if (obj.id) 33 | T.setAttribute('id', obj.id); 34 | if (obj.disable) { 35 | T.disable = obj.disable; 36 | T.className = "b-m-idisable"; 37 | } 38 | obj.items && (T.group = true); 39 | obj.action && (actions[obj.alias] = obj.action); 40 | mitems[obj.alias] = T; 41 | T = obj = null; 42 | return this; 43 | }; 44 | //add new items 45 | var addItems = function(gidx, items) { 46 | var tmp = null; 47 | for (var i = 0; i < items.length; i++) { 48 | if (items[i].type == "splitLine") { 49 | //split line 50 | tmp = sTemplet.clone()[0]; 51 | } else { 52 | items[i].gidx = gidx; 53 | if (items[i].type == "group") { 54 | //group 55 | buildGroup.apply(gTemplet.clone()[0], [items[i]]); 56 | arguments.callee(items[i].alias, items[i].items); 57 | items[i].type = "arrow"; 58 | tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]); 59 | } else { 60 | //normal item 61 | items[i].type = "ibody"; 62 | tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]); 63 | $(tmp).click(function(e) { 64 | if (!this.disable) { 65 | if ($.isFunction(actions[this.idx])) { 66 | actions[this.idx].call(this, target); 67 | } 68 | hideMenuPane(); 69 | } 70 | return false; 71 | }); 72 | 73 | } //end if 74 | $(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem); 75 | } 76 | groups[gidx].appendChild(tmp); 77 | tmp = items[i] = items[i].items = null; 78 | } //end for 79 | gidx = items = null; 80 | }; 81 | var overItem = function(e) { 82 | //menu item is disabled 83 | if (this.disable) 84 | return false; 85 | hideMenuPane.call(groups[this.gidx]); 86 | //has sub items 87 | if (this.group) { 88 | var pos = $(this).offset(); 89 | var width = $(this).outerWidth(); 90 | showMenuGroup.apply(groups[this.idx], [pos, width]); 91 | } 92 | this.className = "b-m-ifocus"; 93 | return false; 94 | }; 95 | //menu loses focus 96 | var outItem = function(e) { 97 | //disabled item 98 | if (this.disable ) 99 | return false; 100 | if (!this.group) { 101 | //normal item 102 | this.className = "b-m-item"; 103 | } //Endif 104 | return false; 105 | }; 106 | //show menu group at specified position 107 | var reversed = false; 108 | var showMenuGroup = function(pos, width) { 109 | var bwidth = $("body").width(); 110 | var bheight = document.documentElement.clientHeight; 111 | var mwidth = $(this).outerWidth(); 112 | var mheight = $(this).outerHeight(); 113 | var originalPosTop = pos.top; 114 | pos.left = (pos.left + width + mwidth > bwidth) ? (pos.left - mwidth < 0 ? 0 : pos.left - mwidth) : pos.left + width; 115 | pos.top = (pos.top + mheight > bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) < 0 ? 0 : pos.top - mheight + (width > 0 ? 25 : 0)) : pos.top; 116 | var needsReversed = originalPosTop > pos.top; 117 | var $this = $(this); 118 | if (reversed != needsReversed) 119 | $this.children().each(function(i, child) { $this.prepend(child); }); 120 | reversed = needsReversed; 121 | 122 | $(this).css(pos).show(); 123 | showGroups.push(this.gidx); 124 | }; 125 | //to hide menu 126 | var hideMenuPane = function() { 127 | var alias = null; 128 | for (var i = showGroups.length - 1; i >= 0; i--) { 129 | if (showGroups[i] == this.gidx) 130 | break; 131 | alias = showGroups.pop(); 132 | groups[alias].style.display = "none"; 133 | mitems[alias] && (mitems[alias].className = "b-m-item"); 134 | } //Endfor 135 | //CollectGarbage(); 136 | }; 137 | function applyRule(rule) { 138 | if (ruleName && ruleName == rule.name) 139 | return false; 140 | for (var i in mitems) 141 | disable(i, !rule.disable); 142 | for (var i = 0; i < rule.items.length; i++) 143 | disable(rule.items[i], rule.disable); 144 | ruleName = rule.name; 145 | }; 146 | function disable(alias, disabled) { 147 | var item = mitems[alias]; 148 | item.className = (item.disable = item.lastChild.disabled = disabled) ? "b-m-idisable" : "b-m-item"; 149 | }; 150 | 151 | /* to show menu */ 152 | function showMenu(e, menutarget) { 153 | target = menutarget; 154 | showMenuGroup.call(groups.cmroot, { left: e.pageX, top: e.pageY }, 0); 155 | $(document).one('mousedown', hideMenuPane); 156 | } 157 | var $root = $("#" + option.alias); 158 | var root = null; 159 | if ($root.length == 0) { 160 | root = buildGroup.apply(gTemplet.clone()[0], [option]); 161 | root.applyrule = applyRule; 162 | root.showMenu = showMenu; 163 | addItems(option.alias, option.items); 164 | } 165 | else { 166 | root = $root[0]; 167 | } 168 | var me = $(this).each(function() { 169 | return $(this).bind('contextmenu', function(e) { 170 | var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true; 171 | if (bShowContext) { 172 | if (option.onShow && $.isFunction(option.onShow)) { 173 | option.onShow.call(this, root); 174 | } 175 | root.showMenu(e, this); 176 | } 177 | return false; 178 | }); 179 | }); 180 | //to apply rule 181 | if (option.rule) { 182 | applyRule(option.rule); 183 | } 184 | gTemplet = iTemplet = sTemplet = itemTpl = buildGroup = buildItem = null; 185 | addItems = overItem = outItem = null; 186 | //CollectGarbage(); 187 | return me; 188 | } 189 | })(jQuery); -------------------------------------------------------------------------------- /dialogger.js: -------------------------------------------------------------------------------- 1 | function getURLParameter(name) { 2 | return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null 3 | } 4 | 5 | function onError(e) { 6 | console.log('Error', e); 7 | } 8 | 9 | var fs = null; 10 | var loadOnStart = getURLParameter('load'); 11 | var importOnStart = getURLParameter('import'); 12 | 13 | addEventListener('app-ready', function(e) 14 | { 15 | fs = require('fs'); 16 | $('#import').hide(); 17 | $('#export').hide(); 18 | $('#export-game').hide(); 19 | }); 20 | 21 | var graph = new joint.dia.Graph(); 22 | 23 | var defaultLink = new joint.dia.Link( 24 | { 25 | attrs: 26 | { 27 | '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', }, 28 | '.link-tools .tool-remove circle, .marker-vertex': { r: 8 }, 29 | }, 30 | }); 31 | 32 | 33 | defaultLink.set('smooth', true); 34 | 35 | var allowableConnections = 36 | [ 37 | ['dialogue.Text', 'dialogue.Text'], 38 | ['dialogue.Text', 'dialogue.Node'], 39 | ['dialogue.Text', 'dialogue.Choice'], 40 | ['dialogue.Text', 'dialogue.Set'], 41 | ['dialogue.Text', 'dialogue.Branch'], 42 | ['dialogue.Node', 'dialogue.Text'], 43 | ['dialogue.Node', 'dialogue.Node'], 44 | ['dialogue.Node', 'dialogue.Choice'], 45 | ['dialogue.Node', 'dialogue.Set'], 46 | ['dialogue.Node', 'dialogue.Branch'], 47 | ['dialogue.Choice', 'dialogue.Text'], 48 | ['dialogue.Choice', 'dialogue.Node'], 49 | ['dialogue.Choice', 'dialogue.Set'], 50 | ['dialogue.Choice', 'dialogue.Branch'], 51 | ['dialogue.Set', 'dialogue.Text'], 52 | ['dialogue.Set', 'dialogue.Node'], 53 | ['dialogue.Set', 'dialogue.Set'], 54 | ['dialogue.Set', 'dialogue.Branch'], 55 | ['dialogue.Branch', 'dialogue.Text'], 56 | ['dialogue.Branch', 'dialogue.Node'], 57 | ['dialogue.Branch', 'dialogue.Set'], 58 | ['dialogue.Branch', 'dialogue.Branch'], 59 | ]; 60 | 61 | function validateConnection(cellViewS, magnetS, cellViewT, magnetT, end, linkView) 62 | { 63 | // Prevent loop linking 64 | if (magnetS == magnetT) 65 | return false; 66 | 67 | if (cellViewS == cellViewT) 68 | return false; 69 | 70 | // Can't connect to an output port 71 | if (magnetT.attributes.magnet.nodeValue !== 'passive') 72 | return false; 73 | 74 | var sourceType = cellViewS.model.attributes.type; 75 | var targetType = cellViewT.model.attributes.type; 76 | var valid = false; 77 | for (var i = 0; i < allowableConnections.length; i++) 78 | { 79 | var rule = allowableConnections[i]; 80 | if (sourceType == rule[0] && targetType == rule[1]) 81 | { 82 | valid = true; 83 | break; 84 | } 85 | } 86 | if (!valid) 87 | return false; 88 | 89 | return true; 90 | } 91 | 92 | function validateMagnet(cellView, magnet) 93 | { 94 | if (magnet.getAttribute('magnet') === 'passive') 95 | return false; 96 | 97 | // If unlimited connections attribute is null, we can only ever connect to one object 98 | // If it is not null, it is an array of type strings which are allowed to have unlimited connections 99 | var unlimitedConnections = magnet.getAttribute('unlimitedConnections'); 100 | var links = graph.getConnectedLinks(cellView.model); 101 | for (var i = 0; i < links.length; i++) 102 | { 103 | var link = links[i]; 104 | if (link.attributes.source.id === cellView.model.id && link.attributes.source.port === magnet.attributes.port.nodeValue) 105 | { 106 | // This port already has a connection 107 | if (unlimitedConnections && link.attributes.target.id) 108 | { 109 | var targetCell = graph.getCell(link.attributes.target.id); 110 | if (unlimitedConnections.indexOf(targetCell.attributes.type) !== -1) 111 | // It's okay because this target type has unlimited connections 112 | return true; 113 | } 114 | return false; 115 | } 116 | } 117 | 118 | return true; 119 | } 120 | 121 | joint.shapes.dialogue = {}; 122 | 123 | joint.shapes.dialogue.Base = joint.shapes.devs.Model.extend( 124 | { 125 | defaults: joint.util.deepSupplement 126 | ( 127 | { 128 | type: 'dialogue.Base', 129 | size: { width: 250, height: 135 }, 130 | name: '', 131 | attrs: 132 | { 133 | rect: { stroke: 'none', 'fill-opacity': 0 }, 134 | text: { display: 'none' }, 135 | '.inPorts circle': { magnet: 'passive' }, 136 | '.outPorts circle': { magnet: true, }, 137 | }, 138 | }, 139 | joint.shapes.devs.Model.prototype.defaults 140 | ), 141 | }); 142 | joint.shapes.dialogue.BaseView = joint.shapes.devs.ModelView.extend( 143 | { 144 | template: 145 | [ 146 | '
', 147 | '', 148 | '', 149 | '', 150 | '

', 151 | '
', 152 | ].join(''), 153 | 154 | initialize: function() 155 | { 156 | 157 | 158 | _.bindAll(this, 'updateBox'); 159 | joint.shapes.devs.ModelView.prototype.initialize.apply(this, arguments); 160 | 161 | this.$box = $(_.template(this.template)()); 162 | // Prevent paper from handling pointerdown. 163 | this.$box.find('input').on('mousedown click', function (evt) { evt.stopPropagation(); }); 164 | 165 | // Prevent paper from handling pointerdown. 166 | this.$box.find('textarea').on('mousedown click', function (evt) { evt.stopPropagation(); }); 167 | 168 | 169 | // This is an example of reacting on the input change and storing the input data in the cell model. 170 | this.$box.find('input.name').on('input', _.bind(function(evt) 171 | { 172 | this.model.set('name', $(evt.target).val()); 173 | }, this)); 174 | 175 | // This is an example of reacting on the input change and storing the input data in the cell model. 176 | this.$box.find('input.actor').on('input', _.bind(function (evt) { 177 | this.model.set('actor', $(evt.target).val()); 178 | }, this)); 179 | 180 | 181 | // This is an example of reacting on the input change and storing the input data in the cell model. TEXTAREA 182 | this.$box.find('textarea.name').on('input', _.bind(function (evt) { 183 | this.model.set('name', $(evt.target).val()); 184 | }, this)); 185 | 186 | this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model)); 187 | // Update the box position whenever the underlying model changes. 188 | this.model.on('change', this.updateBox, this); 189 | // Remove the box when the model gets removed from the graph. 190 | this.model.on('remove', this.removeBox, this); 191 | 192 | this.updateBox(); 193 | }, 194 | 195 | render: function() 196 | { 197 | joint.shapes.devs.ModelView.prototype.render.apply(this, arguments); 198 | this.paper.$el.prepend(this.$box); 199 | this.updateBox(); 200 | return this; 201 | }, 202 | 203 | updateBox: function() 204 | { 205 | // Set the position and dimension of the box so that it covers the JointJS element. 206 | var bbox = this.model.getBBox(); 207 | 208 | // Example of updating the HTML with a data stored in the cell model. 209 | var nameField = this.$box.find('input.name'); 210 | if (!nameField.is(':focus')) 211 | nameField.val(this.model.get('name')); 212 | 213 | // Example of updating the HTML with a data stored in the cell model. 214 | var actorField = this.$box.find('input.actor'); 215 | if (!actorField.is(':focus')) 216 | actorField.val(this.model.get('actor')); 217 | 218 | // Example of updating the HTML with a data stored in the cell model. 219 | var textAreaField = this.$box.find('textarea.name'); 220 | if (!textAreaField.is(':focus')) 221 | textAreaField.val(this.model.get('name')); 222 | 223 | var label = this.$box.find('.label'); 224 | var type = this.model.get('type').slice('dialogue.'.length); 225 | label.text(type); 226 | label.attr('class', 'label ' + type); 227 | this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' }); 228 | }, 229 | 230 | removeBox: function(evt) 231 | { 232 | this.$box.remove(); 233 | }, 234 | }); 235 | 236 | 237 | joint.shapes.dialogue.ChoiceView = joint.shapes.devs.ModelView.extend( 238 | { 239 | template: 240 | [ 241 | '
', 242 | ' ', 243 | '', 244 | '', 245 | '

', 246 | '
', 247 | 248 | ].join(''), 249 | 250 | initialize: function () { 251 | 252 | 253 | _.bindAll(this, 'updateBox'); 254 | joint.shapes.devs.ModelView.prototype.initialize.apply(this, arguments); 255 | 256 | this.$box = $(_.template(this.template)()); 257 | // Prevent paper from handling pointerdown. 258 | this.$box.find('textarea').on('mousedown click', function (evt) { evt.stopPropagation(); }); 259 | this.$box.find('input').on('mousedown click', function (evt) { evt.stopPropagation(); }); 260 | this.$box.find('idd').on('mousedown click', function (evt) { evt.stopPropagation(); }); 261 | 262 | // This is an example of reacting on the input change and storing the input data in the cell model. 263 | this.$box.find('textarea.name').on('input', _.bind(function (evt) { 264 | this.model.set('name', $(evt.target).val()); 265 | }, this)); 266 | 267 | // This is an example of reacting on the input change and storing the input data in the cell model. 268 | this.$box.find('input.title').on('input', _.bind(function (evt) { 269 | this.model.set('title', $(evt.target).val()); 270 | }, this)); 271 | 272 | this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model)); 273 | // Update the box position whenever the underlying model changes. 274 | this.model.on('change', this.updateBox, this); 275 | // Remove the box when the model gets removed from the graph. 276 | this.model.on('remove', this.removeBox, this); 277 | 278 | this.updateBox(); 279 | }, 280 | 281 | render: function () { 282 | joint.shapes.devs.ModelView.prototype.render.apply(this, arguments); 283 | this.paper.$el.prepend(this.$box); 284 | this.updateBox(); 285 | return this; 286 | }, 287 | 288 | updateBox: function () { 289 | // Set the position and dimension of the box so that it covers the JointJS element. 290 | var bbox = this.model.getBBox(); 291 | // Example of updating the HTML with a data stored in the cell model. 292 | var nameField = this.$box.find('textarea.name'); 293 | if (!nameField.is(':focus')) 294 | nameField.val(this.model.get('name')); 295 | 296 | // Example of updating the HTML with a data stored in the cell model. 297 | var nameField = this.$box.find('input.title'); 298 | if (!nameField.is(':focus')) 299 | nameField.val(this.model.get('title')); 300 | 301 | 302 | var label = this.$box.find('.label'); 303 | var type = this.model.get('type').slice('dialogue.'.length); 304 | label.text(type); 305 | label.attr('class', 'label ' + type); 306 | 307 | 308 | this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' }); 309 | }, 310 | 311 | removeBox: function (evt) { 312 | this.$box.remove(); 313 | }, 314 | }); 315 | 316 | 317 | joint.shapes.dialogue.Node = joint.shapes.devs.Model.extend( 318 | { 319 | defaults: joint.util.deepSupplement 320 | ( 321 | { 322 | type: 'dialogue.Node', 323 | inPorts: ['input'], 324 | outPorts: ['output'], 325 | attrs: 326 | { 327 | '.outPorts circle': { unlimitedConnections: ['dialogue.Choice'], } 328 | }, 329 | }, 330 | joint.shapes.dialogue.Base.prototype.defaults 331 | ), 332 | }); 333 | joint.shapes.dialogue.NodeView = joint.shapes.dialogue.BaseView; 334 | 335 | joint.shapes.dialogue.Text = joint.shapes.devs.Model.extend( 336 | { 337 | defaults: joint.util.deepSupplement 338 | ( 339 | { 340 | type: 'dialogue.Text', 341 | inPorts: ['input'], 342 | outPorts: ['output'], 343 | actor: '', 344 | textarea: 'Start writing', 345 | attrs: 346 | { 347 | 348 | '.outPorts circle': { unlimitedConnections: ['dialogue.Choice'], } 349 | }, 350 | }, 351 | joint.shapes.dialogue.Base.prototype.defaults 352 | ), 353 | }); 354 | joint.shapes.dialogue.TextView = joint.shapes.dialogue.BaseView; 355 | 356 | 357 | joint.shapes.dialogue.Choice = joint.shapes.devs.Model.extend( 358 | { 359 | defaults: joint.util.deepSupplement 360 | ( 361 | { 362 | size: { width: 250, height: 135 }, 363 | type: 'dialogue.Choice', 364 | inPorts: ['input'], 365 | outPorts: ['output'], 366 | title: '', 367 | name: '', 368 | }, 369 | joint.shapes.dialogue.Base.prototype.defaults 370 | ), 371 | }); 372 | joint.shapes.dialogue.ChoiceView = joint.shapes.dialogue.ChoiceView; 373 | 374 | 375 | joint.shapes.dialogue.Branch = joint.shapes.devs.Model.extend( 376 | { 377 | defaults: joint.util.deepSupplement 378 | ( 379 | { 380 | type: 'dialogue.Branch', 381 | size: { width: 200, height: 100, }, 382 | inPorts: ['input'], 383 | outPorts: ['output0'], 384 | values: [], 385 | }, 386 | joint.shapes.dialogue.Base.prototype.defaults 387 | ), 388 | }); 389 | joint.shapes.dialogue.BranchView = joint.shapes.dialogue.BaseView.extend( 390 | { 391 | template: 392 | [ 393 | '
', 394 | '', 395 | '', 396 | '', 397 | '', 398 | '', 399 | '', 400 | '
', 401 | ].join(''), 402 | 403 | initialize: function() 404 | { 405 | joint.shapes.dialogue.BaseView.prototype.initialize.apply(this, arguments); 406 | this.$box.find('.add').on('click', _.bind(this.addPort, this)); 407 | this.$box.find('.remove').on('click', _.bind(this.removePort, this)); 408 | }, 409 | 410 | removePort: function() 411 | { 412 | if (this.model.get('outPorts').length > 1) 413 | { 414 | var outPorts = this.model.get('outPorts').slice(0); 415 | outPorts.pop(); 416 | this.model.set('outPorts', outPorts); 417 | var values = this.model.get('values').slice(0); 418 | values.pop(); 419 | this.model.set('values', values); 420 | this.updateSize(); 421 | } 422 | }, 423 | 424 | addPort: function() 425 | { 426 | var outPorts = this.model.get('outPorts').slice(0); 427 | outPorts.push('output' + outPorts.length.toString()); 428 | this.model.set('outPorts', outPorts); 429 | var values = this.model.get('values').slice(0); 430 | values.push(null); 431 | this.model.set('values', values); 432 | this.updateSize(); 433 | }, 434 | 435 | updateBox: function() 436 | { 437 | joint.shapes.dialogue.BaseView.prototype.updateBox.apply(this, arguments); 438 | var values = this.model.get('values'); 439 | var valueFields = this.$box.find('input.value'); 440 | 441 | // Add value fields if necessary 442 | for (var i = valueFields.length; i < values.length; i++) 443 | { 444 | // Prevent paper from handling pointerdown. 445 | var field = $(''); 446 | field.attr('placeholder', 'Value ' + (i + 1).toString()); 447 | field.attr('index', i); 448 | this.$box.append(field); 449 | field.on('mousedown click', function(evt) { evt.stopPropagation(); }); 450 | 451 | // This is an example of reacting on the input change and storing the input data in the cell model. 452 | field.on('input', _.bind(function(evt) 453 | { 454 | var values = this.model.get('values').slice(0); 455 | values[$(evt.target).attr('index')] = $(evt.target).val(); 456 | this.model.set('values', values); 457 | }, this)); 458 | } 459 | 460 | // Remove value fields if necessary 461 | for (var i = values.length; i < valueFields.length; i++) 462 | $(valueFields[i]).remove(); 463 | 464 | // Update value fields 465 | valueFields = this.$box.find('input.value'); 466 | for (var i = 0; i < valueFields.length; i++) 467 | { 468 | var field = $(valueFields[i]); 469 | if (!field.is(':focus')) 470 | field.val(values[i]); 471 | } 472 | }, 473 | 474 | updateSize: function() 475 | { 476 | var textField = this.$box.find('input.name'); 477 | var height = textField.outerHeight(true); 478 | this.model.set('size', { width: 200, height: 100 + Math.max(0, (this.model.get('outPorts').length - 1) * height) }); 479 | }, 480 | }); 481 | 482 | 483 | joint.shapes.dialogue.Set = joint.shapes.devs.Model.extend( 484 | { 485 | defaults: joint.util.deepSupplement 486 | ( 487 | { 488 | type: 'dialogue.Set', 489 | inPorts: ['input'], 490 | outPorts: ['output'], 491 | size: { width: 200, height: 100, }, 492 | value: '', 493 | }, 494 | joint.shapes.dialogue.Base.prototype.defaults 495 | ), 496 | }); 497 | joint.shapes.dialogue.SetView = joint.shapes.dialogue.BaseView.extend( 498 | { 499 | template: 500 | [ 501 | '
', 502 | '', 503 | '', 504 | '', 505 | '', 506 | '
', 507 | ].join(''), 508 | 509 | initialize: function() 510 | { 511 | joint.shapes.dialogue.BaseView.prototype.initialize.apply(this, arguments); 512 | this.$box.find('input.value').on('input', _.bind(function(evt) 513 | { 514 | this.model.set('value', $(evt.target).val()); 515 | }, this)); 516 | }, 517 | 518 | updateBox: function() 519 | { 520 | joint.shapes.dialogue.BaseView.prototype.updateBox.apply(this, arguments); 521 | var field = this.$box.find('input.value'); 522 | if (!field.is(':focus')) 523 | field.val(this.model.get('value')); 524 | }, 525 | }); 526 | 527 | function gameData() 528 | { 529 | var cells = graph.toJSON().cells; 530 | var nodesByID = {}; 531 | var cellsByID = {}; 532 | var nodes = []; 533 | for (var i = 0; i < cells.length; i++) 534 | { 535 | var cell = cells[i]; 536 | if (cell.type != 'link') 537 | { 538 | var node = 539 | { 540 | type: cell.type.slice('dialogue.'.length), 541 | id: cell.id, 542 | actor: cell.actor, 543 | title: cell.title, 544 | }; 545 | if (node.type == 'Branch') 546 | { 547 | node.variable = cell.name; 548 | node.branches = {}; 549 | for (var j = 0; j < cell.values.length; j++) 550 | { 551 | var branch = cell.values[j]; 552 | node.branches[branch] = null; 553 | } 554 | } 555 | else if (node.type == 'Set') 556 | { 557 | node.variable = cell.name; 558 | node.value = cell.value; 559 | node.next = null; 560 | 561 | } 562 | 563 | else if (node.type == 'Choice') { 564 | node.name = cell.name; 565 | node.title = cell.title; 566 | node.next = null; 567 | 568 | } 569 | else 570 | { 571 | node.actor = cell.actor; 572 | node.name = cell.name; 573 | node.next = null; 574 | } 575 | nodes.push(node); 576 | nodesByID[cell.id] = node; 577 | cellsByID[cell.id] = cell; 578 | } 579 | } 580 | for (var i = 0; i < cells.length; i++) 581 | { 582 | var cell = cells[i]; 583 | if (cell.type == 'link') 584 | { 585 | var source = nodesByID[cell.source.id]; 586 | var target = cell.target ? nodesByID[cell.target.id] : null; 587 | if (source) 588 | { 589 | if (source.type == 'Branch') 590 | { 591 | var portNumber = parseInt(cell.source.port.slice('output'.length)); 592 | var value; 593 | if (portNumber == 0) 594 | value = '_default'; 595 | else 596 | { 597 | var sourceCell = cellsByID[source.id]; 598 | value = sourceCell.values[portNumber - 1]; 599 | } 600 | source.branches[value] = target ? target.id : null; 601 | } 602 | else if ((source.type == 'Text' || source.type == 'Node') && target && target.type == 'Choice') 603 | { 604 | if (!source.choices) 605 | { 606 | source.choices = []; 607 | delete source.next; 608 | } 609 | source.choices.push(target.id); 610 | } 611 | else 612 | source.next = target ? target.id : null; 613 | } 614 | } 615 | } 616 | return nodes; 617 | } 618 | 619 | 620 | var filename = null; 621 | var defaultFilename = 'dialogue.json'; 622 | 623 | function flash(text) 624 | { 625 | var $flash = $('#flash'); 626 | $flash.text(text); 627 | $flash.stop(true, true); 628 | $flash.show(); 629 | $flash.css('opacity', 1.0); 630 | $flash.fadeOut({ duration: 1500 }); 631 | } 632 | 633 | function offerDownload(name, data) 634 | { 635 | var a = $(''); 636 | a.attr('download', name); 637 | a.attr('href', 'data:application/json,' + encodeURIComponent(JSON.stringify(data))); 638 | a.attr('target', '_blank'); 639 | a.hide(); 640 | $('body').append(a); 641 | a[0].click(); 642 | a.remove(); 643 | } 644 | 645 | function promptFilename(callback) 646 | { 647 | if (fs) 648 | { 649 | filename = null; 650 | window.frame.openDialog( 651 | { 652 | type: 'save', 653 | }, function(err, files) 654 | { 655 | if (!err && files.length == 1) 656 | { 657 | filename = files[0]; 658 | callback(filename); 659 | } 660 | }); 661 | } 662 | else 663 | { 664 | filename = prompt('Filename', defaultFilename); 665 | callback(filename); 666 | } 667 | } 668 | 669 | function applyTextFields() 670 | { 671 | $('input[type=text]').blur(); 672 | } 673 | 674 | function save() 675 | { 676 | applyTextFields(); 677 | if (!filename) 678 | promptFilename(doSave); 679 | else 680 | doSave(); 681 | } 682 | 683 | function doSave() 684 | { 685 | if (filename) 686 | { 687 | if (fs) 688 | { 689 | fs.writeFileSync(filename, JSON.stringify(graph), 'utf8'); 690 | fs.writeFileSync(gameFilenameFromNormalFilename(filename), JSON.stringify(gameData()), 'utf8'); 691 | } 692 | else 693 | { 694 | if (!localStorage[filename]) 695 | addFileEntry(filename); 696 | localStorage[filename] = JSON.stringify(graph); 697 | } 698 | flash('Saved ' + filename); 699 | } 700 | } 701 | 702 | function load() 703 | { 704 | if (fs) { 705 | window.frame.openDialog( 706 | { 707 | type: 'open', 708 | multiSelect: false, 709 | }, function (err, files) { 710 | if (!err && files.length == 1) { 711 | graph.clear(); 712 | filename = files[0]; 713 | graph.fromJSON(JSON.parse(fs.readFileSync(filename, 'utf8'))); 714 | } 715 | }); 716 | } 717 | 718 | else { 719 | 720 | $('#menu').show(); 721 | } 722 | } 723 | 724 | function exportFile() 725 | { 726 | if (!fs) 727 | { 728 | applyTextFields(); 729 | offerDownload(filename ? filename : defaultFilename, graph); 730 | } 731 | } 732 | 733 | function gameFilenameFromNormalFilename(f) 734 | { 735 | return f.substring(0, f.length - 2) + 'on'; 736 | } 737 | 738 | function exportGameFile() 739 | { 740 | if (!fs) 741 | { 742 | applyTextFields(); 743 | offerDownload(gameFilenameFromNormalFilename(filename ? filename : defaultFilename), gameData()); 744 | } 745 | } 746 | 747 | function importFile() 748 | { 749 | if (!fs) 750 | $('#file').click(); 751 | } 752 | 753 | function add(constructor) 754 | { 755 | return function() 756 | { 757 | var position = $('#cmroot').position(); 758 | var container = $('#container')[0]; 759 | var element = new constructor( 760 | { 761 | position: { x: position.left + container.scrollLeft, y: position.top + container.scrollTop }, 762 | }); 763 | graph.addCells([element]); 764 | }; 765 | } 766 | 767 | function popUpToClear() 768 | { 769 | if (confirm("Do you really want to clear the current dialog?")) 770 | { 771 | clear(); 772 | } 773 | } 774 | 775 | function clear() 776 | { 777 | graph.clear(); 778 | filename = null; 779 | } 780 | 781 | var paper = new joint.dia.Paper( 782 | { 783 | el: $('#paper'), 784 | width: 16000, 785 | height: 8000, 786 | model: graph, 787 | gridSize: 16, 788 | defaultLink: defaultLink, 789 | validateConnection: validateConnection, 790 | validateMagnet: validateMagnet, 791 | snapLinks: { radius: 75 } 792 | 793 | }); 794 | 795 | var panning = false; 796 | var mousePosition = { x: 0, y: 0 }; 797 | paper.on('blank:pointerdown', function(e, x, y) 798 | { 799 | panning = true; 800 | mousePosition.x = e.pageX; 801 | mousePosition.y = e.pageY; 802 | $('body').css('cursor', 'move'); 803 | applyTextFields(); 804 | }); 805 | paper.on('cell:pointerdown', function(e, x, y) 806 | { 807 | applyTextFields(); 808 | }); 809 | 810 | $('#container').mousemove(function(e) 811 | { 812 | if (panning) 813 | { 814 | var $this = $(this); 815 | $this.scrollLeft($this.scrollLeft() + mousePosition.x - e.pageX); 816 | $this.scrollTop($this.scrollTop() + mousePosition.y - e.pageY); 817 | mousePosition.x = e.pageX; 818 | mousePosition.y = e.pageY; 819 | } 820 | }); 821 | 822 | $('#container').mouseup(function (e) 823 | { 824 | panning = false; 825 | $('body').css('cursor', 'default'); 826 | }); 827 | 828 | function handleFiles(files) 829 | { 830 | filename = files[0].name; 831 | var fileReader = new FileReader(); 832 | fileReader.onload = function(e) 833 | { 834 | graph.clear(); 835 | graph.fromJSON(JSON.parse(e.target.result)); 836 | }; 837 | fileReader.readAsText(files[0]); 838 | } 839 | 840 | $('#file').on('change', function() 841 | { 842 | handleFiles(this.files); 843 | $("#file").val(''); 844 | }); 845 | 846 | $('body').on('dragenter', function(e) 847 | { 848 | e.stopPropagation(); 849 | e.preventDefault(); 850 | }); 851 | 852 | $('body').on('dragexit', function(e) 853 | { 854 | e.stopPropagation(); 855 | e.preventDefault(); 856 | }); 857 | 858 | $('body').on('dragover', function(e) 859 | { 860 | e.stopPropagation(); 861 | e.preventDefault(); 862 | }); 863 | 864 | $('body').on('drop', function(e) 865 | { 866 | e.stopPropagation(); 867 | e.preventDefault(); 868 | handleFiles(e.originalEvent.dataTransfer.files); 869 | }); 870 | 871 | $(window).on('keydown', function(event) 872 | { 873 | // Catch Ctrl-S or key code 19 on Mac (Cmd-S) 874 | if (((event.ctrlKey || event.metaKey) && String.fromCharCode(event.which).toLowerCase() == 's') || event.which == 19) 875 | { 876 | event.stopPropagation(); 877 | event.preventDefault(); 878 | save(); 879 | return false; 880 | } 881 | else if ((event.ctrlKey || event.metaKey) && String.fromCharCode(event.which).toLowerCase() == 'o') 882 | { 883 | event.stopPropagation(); 884 | event.preventDefault(); 885 | load(); 886 | return false; 887 | } 888 | else if ((event.ctrlKey || event.metaKey) && String.fromCharCode(event.which).toLowerCase() == 'e') 889 | { 890 | event.stopPropagation(); 891 | event.preventDefault(); 892 | exportFile(); 893 | return false; 894 | } 895 | return true; 896 | }); 897 | 898 | 899 | 900 | $(window).resize(function() 901 | { 902 | applyTextFields(); 903 | var $window = $(window); 904 | var $container = $('#container'); 905 | $container.height($window.innerHeight()); 906 | $container.width($window.innerWidth()); 907 | var $menu = $('#menu'); 908 | $menu.css('top', Math.max(0, (($window.height() - $menu.outerHeight()) / 2)) + 'px'); 909 | $menu.css('left', Math.max(0, (($window.width() - $menu.outerWidth()) / 2)) + 'px'); 910 | return this; 911 | }); 912 | 913 | function addFileEntry(name) 914 | { 915 | var entry = $('
'); 916 | entry.text(name); 917 | var deleteButton = $(''); 918 | entry.append(deleteButton); 919 | $('#menu').append(entry); 920 | 921 | deleteButton.on('click', function(event) 922 | { 923 | localStorage.removeItem(name); 924 | entry.remove(); 925 | event.stopPropagation(); 926 | }); 927 | 928 | entry.on('click', function(event) 929 | { 930 | graph.clear(); 931 | graph.fromJSON(JSON.parse(localStorage[name])); 932 | filename = name; 933 | $('#menu').hide(); 934 | }); 935 | } 936 | 937 | (function() 938 | { 939 | for (var i = 0; i < localStorage.length; i++) 940 | addFileEntry(localStorage.key(i)); 941 | })(); 942 | 943 | $('#menu button.close').click(function() 944 | { 945 | $('#menu').hide(); 946 | panning = false; 947 | }); 948 | 949 | $(window).trigger('resize'); 950 | 951 | $('#paper').contextmenu( 952 | { 953 | width: 150, 954 | items: 955 | [ 956 | { text: 'Text', alias: '1-1', action: add(joint.shapes.dialogue.Text) }, 957 | { text: 'Choice', alias: '1-2', action: add(joint.shapes.dialogue.Choice) }, 958 | { text: 'Branch', alias: '1-3', action: add(joint.shapes.dialogue.Branch) }, 959 | { text: 'Set', alias: '1-4', action: add(joint.shapes.dialogue.Set) }, 960 | { text: 'Node', alias: '1-5', action: add(joint.shapes.dialogue.Node) }, 961 | { type: 'splitLine' }, 962 | { text: 'Save', alias: '2-1', action: save }, 963 | { text: 'Load', alias: '2-2', action: load }, 964 | { text: 'Import', id: 'import', alias: '2-3', action: importFile }, 965 | { text: 'New', alias: '2-4', action: popUpToClear }, 966 | { text: 'Export', id: 'export', alias: '2-5', action: exportFile }, 967 | { text: 'Export game file', id: 'export-game', alias: '2-6', action: exportGameFile }, 968 | ] 969 | }); 970 | 971 | ///AUTOLOAD IF URL HAS ? WILDCARD 972 | if (loadOnStart != null) { 973 | loadOnStart += '.json'; 974 | console.log(loadOnStart); 975 | graph.clear(); 976 | filename = loadOnStart; 977 | graph.fromJSON(JSON.parse(localStorage[loadOnStart])); 978 | } 979 | --------------------------------------------------------------------------------