Spec editing in the component editor

mghamry · Apr 25, 2015 · 929c77d · 929c77d
1 parent 0ff3a16
commit 929c77d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/elements/noflo-component-editor.html b/elements/noflo-component-editor.html
@@ -152,6 +152,8 @@ <h1>Tests</h1>
   <script>
     Polymer('noflo-component-editor', {
       component: null,
+      spec: null,
+      project: null,
       width: null,
       height: null,
       codeEditor: null,
@@ -165,6 +167,16 @@ <h1>Tests</h1>
           this.style.display = 'none';
           return;
         }
+
+        this.spec = null;
+        if (this.project) {
+          this.project.specs.forEach(function (spec) {
+            if (spec.name === this.component.name) {
+              this.spec = spec;
+            }
+          }.bind(this));
+        }
+
         this.style.display = 'block';
         this.$.code_editor.innerHTML = '';
 
@@ -179,16 +191,20 @@ <h1>Tests</h1>
           this.component.changed = true;
           this.fire('changed', this.component);
         }.bind(this));
-
+        this.setSize();
+      },
+      specChanged: function () {
         this.$.tests_editor.innerHTML = '';
-        testOptions = this.getMirrorOptions(this.component, this.component.tests);
+        if (!this.spec) {
+          return;
+        }
+        testOptions = this.getMirrorOptions(this.spec, this.spec.code);
         this.testsEditor = CodeMirror(this.$.tests_editor, testOptions);
         this.testsEditor.on('change', function () {
-          this.component.tests = this.testsEditor.getValue();
-          this.component.changed = true;
-          this.fire('changed', this.component);
+          this.spec.code = this.testsEditor.getValue();
+          this.spec.changed = true;
+          this.fire('specschanged', this.spec);
         }.bind(this));
-
         this.setSize();
       },
       widthChanged: function () {

diff --git a/elements/noflo-main.html b/elements/noflo-main.html
@@ -420,7 +420,8 @@ <h2>{{ label }}</h2>
           name: repo,
           repo: repo,
           graphs: [],
-          components: []
+          components: [],
+          specs: []
         };
         this.fire('downloadProject', {
           project: project,
@@ -714,6 +715,9 @@ <h2>{{ label }}</h2>
           if (!project.components) {
             project.components = [];
           }
+          if (!project.specs) {
+            project.specs = [];
+          }
           if (graph.properties.project !== project.id) {
             return;
           }

diff --git a/elements/noflo-new-project.html b/elements/noflo-new-project.html
@@ -74,7 +74,8 @@ <h1>Create new project</h1>
           name: this.name,
           type: this.type,
           graphs: [],
-          components: []
+          components: [],
+          specs: []
         });
         this.close();
       },

diff --git a/elements/noflo-ui.html b/elements/noflo-ui.html
@@ -151,6 +151,9 @@
           event.detail.components.forEach(function (component) {
             this.fire('project:delete:component', component);
           }.bind(this));
+          event.detail.specs.forEach(function (spec) {
+            this.fire('project:delete:spec', spec);
+          }.bind(this));
           this.fire('project:delete:project', event.detail);
           this.$.main.projects.splice(this.$.main.projects.indexOf(event.detail), 1);
           this.$.main.localProjects.splice(this.$.main.localProjects.indexOf(event.detail), 1);
@@ -163,13 +166,19 @@
           event.detail.components.forEach(function (component) {
             this.fire('project:delete:component', component);
           }.bind(this));
+          event.detail.specs.forEach(function (spec) {
+            this.fire('project:delete:spec', spec);
+          }.bind(this));
           this.fire('project:delete:project', event.detail);
           this.$.main.projects.splice(this.$.main.projects.indexOf(event.detail), 1);
           this.$.main.localProjects.splice(this.$.main.localProjects.indexOf(event.detail), 1);
         }.bind(this));
         this.$.componenteditor.addEventListener('changed', function (event) {
           this.fire('project:save:component', event.detail);
         }.bind(this));
+        this.$.componenteditor.addEventListener('specschanged', function (event) {
+          this.fire('project:save:spec', event.detail);
+        }.bind(this));
         this.$.search.addEventListener('search:library', function (event) {
           this.fire('context:search_library', event.detail);
         }.bind(this));
@@ -366,6 +375,7 @@
         this.$.project.component = this.ctx.component;
         this.$.project.project = this.ctx.project;
         this.$.componenteditor.component = this.ctx.component;
+        this.$.componenteditor.project = this.ctx.project;
         this.$.search.component = this.ctx.component;
         this.$.search.project = this.ctx.project;
         this.$.runtime.runtimes = this.ctx.compatibleRuntimes;