[EmberJS] Trianglify Component

component.js

/* global Trianglify */

import Ember from 'ember';

import ResizeAware from 'ember-resize/mixins/resize-aware';

export default Ember.Component.extend(ResizeAware, {
    logTag: '[component:trianglifed-background]',
    tagName: 'div',
    classNames: ['trianglifed-background'],

    didInsertElement() {
        console.log('asfhgasfghlasgh');
        this._super(...arguments);

        Ember.run.scheduleOnce('afterRender', this, () => {
            let windowDimensions = this.$()[0].getClientRects()[0];
            this.generate(windowDimensions.width, windowDimensions.height);
        });
    },

    debouncedDidResize(width, height, evt) {
        this.generate(width, height);
    },

    generate(width, height) {
        Ember.Logger.debug(`${this.get('logTag')} Generating Background`, width, height);
        let pattern = Trianglify({
          width: width,
          height: height,
          cell_size: 69,
          palette: Trianglify.colorbrewer
        });

        pattern.canvas(this.$('canvas')[0]);
    }
});