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