Hello guys,
I’m starting with PointAttractor and ForceFields.
My goal at this moment is to build a dynamic grid and to drag & drop a rectangle to some cell.
Until here I was able to do it, but I want to take it a little further but I don’t know how to achieve my goals (or even if it’s possible).
The code I have (and it’s ready to copy, paste and run):
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
//to dynamically draw the grid
var nrColumns = Observable(4);
var nrRows = Observable(4);
//to get the width and height of the cell
var cellWidth = Observable();
var cellHeight = Observable();
function panelPlaced(args){
cellWidth.value = args.width;
cellHeight.value = args.height;
}
//for data on each cell
var cells = Observable();
for(var i = 0 ; i < nrRows.value ; i++){
for(var j = 0 ; j < nrColumns.value ; j++){
cells.add({x: i , y : j});
}
}
module.exports = {
nrColumns : nrColumns,
nrRows : nrRows,
cells : cells,
panelPlaced : panelPlaced,
cellWidth : cellWidth,
cellHeight : cellHeight
}
</JavaScript>
<DockPanel>
<!-- Class for the rectangles to be dragged -->
<Panel ux:Class="Rect" Width="{cellWidth}" Height="{cellHeight}" X="0" Y="0">
<Rectangle>
<SolidColor Color="Red" />
<Stroke Width="1" Color="Black" />
</Rectangle>
<Draggable/>
</Panel>
<!-- The dynamic grid -->
<Panel>
<Grid RowCount="{nrRows}" ColumnCount="{nrColumns}" DefaultRow="1*" DefaultColumn="1*">
<Each Items="{cells}">
<Panel Placed="{panelPlaced}">
<Rectangle Row="{x}" Column="{y}">
<Text Value="{x,y}" Alignment="Center"/>
<Stroke Width="1" Color="Black" />
</Rectangle>
<PointAttractor ux:Name="cellAttract" Radius="{cellWidth}" Strength="250" Exclusive="True"/>
</Panel>
</Each>
</Grid>
</Panel>
<Rect/>
</DockPanel>
</App>
So, my goal is to initialize the rectangle (or rectangles) in some cell, for example the cell marked as (1,1) and other rectangle on (2,3).
And when I drag either the rectangle to other cell, I want to be able to get the information about that cell, for example if I drag a rectangle from cell (1,1) to cell (3,2), I want to know that the rectangle is now on the cell (3,2).
Can someone spread some lights on this? Is possible to get/set the “coordinates” of the rectangle based on the grid?
Thanks in advance!