vendredi 23 janvier 2015

Ember : Retrieve fixtures from attributes

I'm currently developing an application with ember cli where I want to draw shapes with svg and store them with the fixture adapter. The svg shapes are made of views to directly interact with them. The fact is that when I click on a shape I want to know on which one in my store I clicked, to then move them by dragging the mouse and update their coordinates.


Here is my view :



var click=false; // flag to indicate when shape has been clicked
var clickX, clickY; // stores cursor location upon first click
var moveX=0, moveY=0; // keeps track of overall transformation
var lastMoveX=0, lastMoveY=0;

export default Ember.View.extend({
tagName: "rect",
attributeBindings: ['x','y','width','height','stroke','stroke-width','fill'],
width: "100",
height: "150",
stroke: "black",
fill: "white",

mouseDown: function(evt){
var svg= Ember.$("svg");
evt.preventDefault();
click=true;
clickX = evt.pageX - svg.offset().left;
clickY = evt.pageY - svg.offset().top;
},

mouseMove: function(evt){
evt.preventDefault();
if(click){
moveX= lastMoveX + (evt.pageX - clickX);
moveY= lastMoveY + (evt.pageY - clickY);
var x=Ember.$(evt.target).attr("x");
var y=Ember.$(evt.target).attr("y");
this.store.find('element',{'x':x, 'y':y}).then(function(element){
element.set('x',moveX);
element.set('y',moveY);
element.save();
});
}
},

mouseUp: function(evt){
click=false;
lastMoveX = moveX;
lastMoveY = moveY;
},

mouseLeave: function(evt){
click=false;
lastMoveX = moveX;
lastMoveY = moveY;
}
});


My model :



import DS from 'ember-data';

export default DS.Model.extend({
text: DS.attr('string'),
x: DS.attr('number'),
y: DS.attr('number'),
graph: DS.belongsTo('graph')
}).reopenClass({
FIXTURES: []
});


In order to update my fixture I had to implement the queryFixtures function like this :



import DS from 'ember-data';
import Ember from 'ember';
import App from '../app';

export default DS.FixtureAdapter.extend({
queryFixtures: function (fixtures, query, type) {
if(type == App.Element ){
var x= Ember.keys(query)[0];
var y= Ember.keys(query)[1];
var fixturesSorted = fixtures.filterBy(x,query[x]);
return fixtures.filterBy(x,query[x]);
}
}
});


The problem is that I only get an undefined from this function. Maybe I implemented it wrong. But even if I put a console.log(fixtures) in this function, I've got nothing related to my models whereas they are displayed in my ember inspector.


Anyone with an idea ? Thanks !





Aucun commentaire:

Enregistrer un commentaire