Permalink
Browse files

Formula -> Script, add CodeMirror

  • Loading branch information...
pboyer committed Jun 14, 2015
1 parent 9df7277 commit 7d86ec3c84cca6ee17c533fbb5364edf0a70e882
View
@@ -14,6 +14,7 @@
<link rel="stylesheet" href="bower_components/jquery.ui/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/bootstrap.css">
+ <link rel="stylesheet" href="bower_components/CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="styles/main.css">
<!-- /build -->
@@ -363,12 +364,12 @@ <h1>Flood requires WebGL!</h1>
</script>
- <script type="text/template" id="node-formula-template">
-
- <a href="#" class="add-input"> + </a>
- <a href="#" class="remove-input" style="padding-left: 10px; padding-right: 10px"> - </a>
- <input type="text" class="formula-text-input" placeholder="Custom formula" value="<%= extra.script %>">
-
+ <script type="text/template" id="node-script-template">
+ <div class="script-add-remove-ports">
+ <a href="#" class="add-input"> + </a>
+ <a href="#" class="remove-input" style="padding-left: 10px; padding-right: 10px"> - </a>
+ </div>
+ <textarea type="text" class="script-text-input" placeholder="Custom formula"><%= extra.script %></textarea>
</script>
<script type="text/template" id="node-input-template">
View
@@ -99,8 +99,20 @@ require.config({
deps: [
],
exports: 'almond'
+ },
+ CodeMirror: {
+ exports: 'CodeMirror'
+ },
+ CodeMirrorJs: {
+ deps: [ 'CodeMirror'],
+ exports: 'CodeMirrorJs'
}
},
+ packages: [{
+ name: "codemirror",
+ location: "../bower_components/CodeMirror/",
+ main: "lib/codemirror"
+ }],
paths: {
// backbone collections
@@ -160,13 +172,13 @@ require.config({
LoginView: 'views/LoginView',
WorkspaceBrowserElementView: 'views/WorkspaceBrowserElementView',
WorkspaceBrowserView: 'views/WorkspaceBrowserView',
-
+
// node backbone views
NodeViewTypes: 'views/NodeViews/NodeViews',
BaseNodeView: 'views/NodeViews/Base',
WatchNodeView: 'views/NodeViews/Watch',
NumNodeView: 'views/NodeViews/Num',
- FormulaView: 'views/NodeViews/Formula',
+ ScriptView: 'views/NodeViews/Script',
InputView: 'views/NodeViews/Input',
OutputView: 'views/NodeViews/Output',
CustomNodeView: 'views/NodeViews/CustomNode',
@@ -180,6 +192,7 @@ require.config({
scheme: 'lib/flood/scheme',
// bower
+
Hammer: '../bower_components/hammerjs/hammer',
almond: '../bower_components/almond/almond',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
@@ -42,9 +42,8 @@ define(['backbone', 'jqueryuidraggable', 'bootstrap', 'Hammer'], function(Backbo
this.listenTo(this.model, 'change:selected', this.colorSelected);
this.listenTo(this.model, 'change:visible', this.render);
this.listenTo(this.model, 'change:isEvaluating', this.colorEvaluating);
-
- this.model.on('evalFailed', this.onEvalFailed, this );
- this.model.on('evalBegin', this.onEvalBegin, this );
+ this.listenTo(this.model, 'evalFailed', this.onEvalFailed );
+ this.listenTo(this.model, 'evalBegin', this.onEvalBegin );
this.makeDraggable();
this.$workspace_canvas = $('#workspace_canvas');
@@ -537,4 +536,4 @@ define(['backbone', 'jqueryuidraggable', 'bootstrap', 'Hammer'], function(Backbo
});
-});
+});
@@ -1,5 +1,5 @@
-define(['BaseNodeView', 'WatchNodeView', 'NumNodeView', 'ThreeCSGNodeView', 'FormulaView', 'OutputView', 'InputView','CustomNodeView'],
- function(BaseNodeView, WatchNodeView, NumNodeView, ThreeCSGNodeView, FormulaView, OutputView, InputView, CustomNodeView){
+define(['BaseNodeView', 'WatchNodeView', 'NumNodeView', 'ThreeCSGNodeView', 'ScriptView', 'OutputView', 'InputView','CustomNodeView'],
+ function(BaseNodeView, WatchNodeView, NumNodeView, ThreeCSGNodeView, ScriptView, OutputView, InputView, CustomNodeView){
var nodeViewTypes = {};
@@ -8,10 +8,10 @@ define(['BaseNodeView', 'WatchNodeView', 'NumNodeView', 'ThreeCSGNodeView', 'For
nodeViewTypes.Number = NumNodeView;
nodeViewTypes.CustomNode = CustomNodeView;
- nodeViewTypes.Script = FormulaView;
+ nodeViewTypes.Script = ScriptView;
nodeViewTypes.Input = InputView;
nodeViewTypes.Output = OutputView;
return nodeViewTypes;
-});
+});
@@ -1,4 +1,4 @@
-define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD'], function(Backbone, _, $, BaseNodeView, FLOOD) {
+define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD', 'codemirror', 'codemirror/mode/javascript/javascript'], function(Backbone, _, $, BaseNodeView, FLOOD, CodeMirror) {
return BaseNodeView.extend({
@@ -7,7 +7,7 @@ define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD'], function(B
this.model.on('change:extra', this.onChangedExtra, this);
},
- innerTemplate : _.template( $('#node-formula-template').html() ),
+ innerTemplate : _.template( $('#node-script-template').html() ),
getCustomContents: function() {
@@ -63,28 +63,30 @@ define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD'], function(B
},
renderNode: function() {
+ BaseNodeView.prototype.renderNode.apply(this, arguments);
- BaseNodeView.prototype.renderNode.apply(this, arguments);
-
- this.input = this.$el.find('.formula-text-input');
+ var ta = this.$el.find('.script-text-input');
+ var cm = CodeMirror.fromTextArea(ta[0], { mode: "javascript" });
var that = this;
- this.input.focus(function(e){
+ cm.on("focus",function(e){
that.selectable = false;
that.model.set('selected', false);
- e.stopPropagation();
});
- this.input.blur(function(){
+ cm.on("change", function(){
+ setTimeout(function(x){ that.renderPorts() }, 0);
+ });
- var ex = JSON.parse( JSON.stringify( that.model.get('extra') ) );
- if ( ex.script === that.input.val() ) return;
+ cm.on("blur",function(){
+ var ex = JSON.parse( JSON.stringify( that.model.get('extra') ) );
+ if ( ex.script === cm.getValue() ) return;
- ex.script = that.input.val();
+ ex.script = cm.getValue();
that.model.workspace.setNodeProperty({property: "extra", _id: that.model.get('_id'), newValue: ex });
- that.selectable = true;
+ that.selectable = true;
});
this.$el.find('.add-input').click(function(){ that.addInput.call(that); });
@@ -99,7 +101,7 @@ define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD'], function(B
var ex = this.model.get('extra');
var exCopy = JSON.parse( JSON.stringify( ex ) );
-
+
exCopy.numInputs = numInputs;
this.model.workspace.setNodeProperty({property: "extra", _id: this.model.get('_id'), newValue: exCopy, oldValue: ex });
},
@@ -132,4 +134,4 @@ define(['backbone', 'underscore', 'jquery', 'BaseNodeView', 'FLOOD'], function(B
});
-});
+});
View
@@ -238,8 +238,9 @@ input[type="button"].btn-block {
font-size: 10px;
}
-.formula-text-input {
- min-width: 200px;
+.CodeMirror {
+ height: auto;
+ border: 1px solid rgba(0,0,0,0.2);
}
.workspace-runner-status {
@@ -488,6 +489,10 @@ input[type="button"].btn-block {
font-weight: bold;
}
+.script-add-remove-ports {
+ float: left;
+}
+
#feedback-failure-message {
display: none;
padding: 10px;
@@ -1181,7 +1186,6 @@ input[type="button"].btn-block {
color: #555;
font-weight: bold;
display: inline-block;
- text-align: center;
float: left;
padding: 5px 10px 14px 5px;
}
View
@@ -19,7 +19,8 @@
"components-font-awesome": "4.3.0",
"hammerjs": "~2.0.4",
"fastclick": "~1.0.3",
- "FileSaver": "eliGrey/FileSaver.js"
+ "FileSaver": "eliGrey/FileSaver.js",
+ "CodeMirror": "~5.3.0"
},
"devDependencies": {}
}

0 comments on commit 7d86ec3

Please sign in to comment.