New Twiddle

app.js

import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,
  customEvents: {
    // remove support for mouseenter / mouseleave events
    mouseenter: null,
    mouseleave: null,
    mousemove: null,
    mousedown: null,
    mouseup: null,
    focus: null,
    blur: null,
    focusin: null,
    focusout: null,
    click: null,
    dragstart: null,
    drag: null,
    dragenter: null,
    dragleave: null,
    dragover: null,
    dragend: null,
    drop: null
  }
});

loadInitializers(App, config.modulePrefix);

export default App;

components.box-container.js

import Ember from 'ember';

const {
  Component,
  computed,
  getProperties,
  setProperties,
  set,
  run
} = Ember;

let guid = 0;
function createObject(x, y) {
  return {
    _id: guid++,
    isActive: false,
    x,
    y
  };
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

export default Component.extend({
  // Public Properties
  width: 550,
  height: 550,
  
  boxCount: 10000,
  
  // Ember Component Definition,
  attributeBindings: ['width', 'height'],
  tagName: 'svg',
    
  _boxes: computed('boxCount', function () {
    const boxCount = this.get('boxCount');
    
    let result = new Array(boxCount);
    
    for (let i = 0; i < boxCount; i++) {
      result[i] = createObject(getRandomInt(0, 500), getRandomInt(0, 500));
    }

    return result;
  }),
  
  trackActiveBox(e) {
    const box = this._activeBox;
    
    if (box) {
      const delta = this._getMouseDelta(e.clientX, e.clientY);
      
      let { x, y } = getProperties(box, 'x', 'y');
      setProperties(box,
        {
          x: x + delta.dx,
          y: y + delta.dy
        });
    }
  },
  
  _getMouseDelta(x, y) {
    let lastX = this._lastPositionX !== null ? this._lastPositionX : x;
    let lastY = this._lastPositionY !== null ? this._lastPositionY : y;

    this._lastPositionX = x;
    this._lastPositionY = y;
    
    return {
    	dx: x - lastX,
      dy: y - lastY
    };
  },
  
  actions: {
  	onActivate(box) {
      this._activeBox = box;
      set(box, 'isActive', true);
    },
  },
  
  didInsertElement() {
    document.body.addEventListener('mouseup', this._cachedDeactivateHandler, true);
    this.element.addEventListener('mousemove', this._cachedTrackHandler, true);
  },
  
  willDestroyElement() {
    document.body.removeEventListener('mouseup', this._cachedDectivateHandler, true);
    this.element.removeEventListener('mousemove', this._cachedTrackHandler, true);
  },
  
  init() {
    this._super();
    this._activeBox = null;
    this._lastPositionX = null;
    this._lastPositionY = null;
    this._cachedTrackHandler = (e) => {
      this.trackActiveBox(e);
    };
    this._cachedDeactivateHandler = () => {
      const box = this._activeBox;
      this._lastPositionX = null;
      this._lastPositionY = null;

      if (box) {
        run.join(() => {
          set(box, 'isActive', false);     
          this._activeBox = null; 
        });
      }
    };
  }
});

components.box-element.js

import Ember from 'ember';

const {
  Component,
  computed,
  run
} = Ember;

export default Component.extend({
  // Public Events
  activateBox: null,

  // Public Properties
  box: null,

  width: 20,
  height: 20,
  
  // Ember Component Definition,
  tagName: 'g',
  
  didInsertElement() {
    this.element.addEventListener('mousedown', this._cachedActivateHandler, true);
  },
  
  willDestroyElement() {
      this.element.removeEventListener('mousedown', this._cachedActivateHandler, true);
  },
  
  init() {
    this._super();
    this._cachedActivateHandler = (e) => {  
      run.join(() => {
        this.sendAction('activateBox', e);
      });
    };
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

{{box-container}}

templates.components.box-container.hbs

{{#each _boxes key="_id" as |box|}}
	{{box-element
    box=box
    activateBox=(action 'onActivate' box)}}
{{/each}}

templates.components.box-element.hbs

<rect height={{height}}
	stroke="black"
  strokeWidth="1"
  width={{width}}
  x={{box.x}}
  y={{box.y}}
  fill="{{if box.isActive 'red' 'transparent'}}">
</rect>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js",
    "ember": "canary",
    "ember-template-compiler": "canary",
    "ember-testing": "canary"
  },
  "addons": {}
}