New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  twiglet: Ember.inject.service(),
  appName: 'Ember Twiddle',
  t: Ember.computed('twiglet', function() {
    return this.get('twiglet').getTwiglet();
  }),
});

index.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

list-of-nodes.component.js

import Ember from 'ember';

export default Ember.Component.extend({

  twiglet: Ember.inject.service(),

  node: Ember.Object.create({
    id: 'ben',
    name: 'Ben',
    image: 'B'
  }),

  actions: {
    addNode() {
      this.get('twiglet').addNode({...this.node});
    }
  },
});

list-of-nodes.template.hbs

<p>
  {{input value=node.id placeholder="id"}}
  {{input value=node.name placeholder="name"}}
  {{input value=node.image placeholder="image"}}
  <button {{action "addNode"}}>Add</button>
</p>

{{#each nodes as |node|}}
  <b>ID: </b>{{node.id}}<br>
  <b>Name: </b>{{node.name}}<br>
  <b>Image: </b>{{node.image}}<br><br>
{{/each}}

services.twiglet.js

import Ember from 'ember';

const twiglet = Ember.Object.create({
  nodes: [],
});

export function emberProxyObject (object) {
  const emberObject = Ember.Object.create(object);
  return new Proxy(emberObject, {
    get (target, name) {
      return name in target ? target.get(name) : undefined;
    },
    set (target, name, value) {
      target.set(name, value);
      return true;
    }
  });
}

export default Ember.Service.extend({
  init () {
    twiglet.nodes.pushObject(emberProxyObject({
      id: '_id',
      name: 'name',
      image: '@',
      x: null,
      y: null,
      fx: null,
      fy: null,
    }));
  },

  getTwiglet () {
    return twiglet;
  },

  addNode (node) {
    twiglet.get('nodes').pushObject(emberProxyObject(node));
    twiglet.get('nodes').arrayContentDidChange();
    twiglet.get('nodes').notifyPropertyChange();
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{list-of-nodes nodes=t.nodes}}
<br>
{{twiglet-graph nodes=t.nodes}}
<br>

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}

twiglet-graph.component.js

  import Ember from 'ember'

    export default Ember.Component.extend({
      tagName: 'svg',
      width: 500,
      height: 500,
      margin: 20,
      attributeBindings: ['width', 'height'],

      didRender() {
        this._super(...arguments);
        this.draw();
      },
      
      // Added this to get it to work.
      updateDraw: Ember.observer('nodes.[]', function () {
        this.draw();
      }),
      
      click() {
        alert(`length: ${this.nodes.length}`);
      },

  draw () {
    // Can't figure out how to get d3 into this twiddle so fake draw function here
    const text = document.getElementById(`${this.elementId}-text`);
    if (text) {
      text.innerHTML = 'length: ' + this.nodes.length;
    }
  },
});

twiglet-graph.template.hbs

<text x=250 y=50 id="{{elementId}}-text">loading</text>