New Twiddle

components.box-container.js

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Component.extend({
  // Public Properties
  width: 550,
  height: 550,
  
  boxCount: 10000,
  
  boxWidth: 20,
  boxHeight: 20,
  
  // Ember Component Definition,
  attributeBindings: ['width', 'height'],
  tagName: 'svg',

  // Actions
  actions: {
  	onActivate: function (box) {
      this.set('_activeBox', box);
    },
    
    onDeactivate: function () {
      this.set('_activeBox', null);
    }
  },
  
  mouseMove: function (ev) {
    const activeBox = this.get('_activeBox');
    if (activeBox) {
      const delta = this._getMouseDelta(ev.clientX, ev.clientY);
      activeBox.set('x', activeBox.get('x') + delta.dx);
      activeBox.set('y', activeBox.get('y') + delta.dy);
    }
  },
  
  mouseUp: function () {
    this.set('_lastPositionX', undefined);
    this.set('_lastPositionY', undefined);
  },

  // Private Properties
  _activeBox: null,
  
  _boxes: computed('boxCount', function () {
    const boxCount = this.get('boxCount');
    let result = [];
    for (let i = 0; i < boxCount; i++) {
      result.push(createObject(getRandomInt(0, 500), getRandomInt(0, 500)));
    }
    return result;
  }),
  
  _currentPosition: computed(function () {
    return this.element.getBoundingClientRect();
  }),
  
  _getMouseDelta: function (x, y) {
    let lastX = this.getWithDefault('_lastPositionX', x);
    let lastY = this.getWithDefault('_lastPositionY', y);

    this.set('_lastPositionX', x);
    this.set('_lastPositionY', y);
    
    return {
    	dx: x - lastX,
      dy: y - lastY
    };
  }
});

function createObject(x, y) {
	return Ember.Object.create({ x, y });
}

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

components.box-element.js

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Component.extend({
  // Public Events
  'on-activate': null,
  'on-deactivate': null,

  // Public Properties
  box: null,

  width: 20,
  height: 20,
  
  // Ember Component Definition,
  tagName: 'g',
  
  mouseDown: function(ev) {
    this.set('_isActiveBox', true);
    this.sendAction('on-activate', this.get('box'));
  },
  
  mouseUp: function () {
    this.set('_isActiveBox', false);
    this.sendAction('on-deactivate');
  }
});

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 as |box|}}
	{{box-element
      box=box
      on-activate='onActivate'
      on-deactivate='onDeactivate'}}
{{/each}}

templates.components.box-element.hbs

<rect height={{height}}
	stroke="black"
  strokeWidth="1"
  width={{width}}
  x={{box.x}}
  y={{box.y}}
  fill="{{if _isActiveBox '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/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}