<polymer-element name="noflo-library" attributes="editor search">
  <script>
    Polymer('noflo-library', {
      search: '',
      editor: null,
      addNode: function (component) {
        var num = 60466176; // 36^5
        num = Math.floor(Math.random() * num);
        var id = component + '_' + num.toString(36);

        // TODO fix with pan
        var pan = this.editor.$.graph.getPan();

        this.editor.graph.addNode(id, component, {
          label: component,
          x: -pan[0] + 334,
          y: -pan[1] + 100
        });
      },
      searchChanged: function () {
        if (!this.search || typeof this.search !== 'string') {
          return;
        }
        if (!this.editor) {
          return;
        }
        Object.keys(this.editor.library).forEach(function (component) {
          if (this.search !== 'show library' && component.toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
            return;
          }
          this.fire('result', {
            label: component,
            icon: this.editor.library[component].icon,
            description: this.editor.library[component].description,
            action: function () {
              this.addNode(component);
            }.bind(this)
          });
        }.bind(this));
      }
    });
  </script>
</polymer-element>

<polymer-element name="noflo-library" attributes="editor search">
  <script>
    Polymer('noflo-library', {
      search: '',
      editor: null,
      addNode: function (component) {
        var num = 60466176; // 36^5
        num = Math.floor(Math.random() * num);
        var id = component + '_' + num.toString(36);

        // TODO fix with pan
        var pan = this.editor.$.graph.getPan();

        this.editor.graph.addNode(id, component, {
          label: component,
          x: -pan[0] + 334,
          y: -pan[1] + 100
        });
      },
      searchChanged: function () {
        if (!this.search || typeof this.search !== 'string') {
          return;
        }
        if (!this.editor) {
          return;
        }
        Object.keys(this.editor.getLibrary()).forEach(function (name) {
          if (this.search !== 'show library' && name.toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
            return;
          }
          var component = this.editor.getComponent(name);
          this.fire('result', {
            label: component.name,
            icon: component.icon || 'cog',
            description: component.description,
            action: function () {
              this.addNode(component.name);
            }.bind(this)
          });
        }.bind(this));
      }
    });
  </script>
</polymer-element>

Update to new the-graph library API
Update to new the-graph library API
