Sergio1
September 11, 2017, 2:08pm
1
Hi,
Within the loop, I am wanting to use a variable as the Target for the Change Animation. I have an Observable in JS that is updated to change the Physics of a Draggable Panel and the Forcefields around it.
<Panel Width='50' Height='30' Background='White'>
<Draggable Axis='Y'/>
<Released>
<Set this.Background='#333' />
</Released>
<Each Items="{makeAttract}">
<InForceFieldAnimation ForceField="{forcefield}" From="0" To="1">
<Change Target="{theTarget}" Value='100'/>
<Change container.Y='-8'/>
</InForceFieldAnimation>
<EnteredForceField ForceField="{forcefield}">
<Set newText.Value='{value}'/>
</EnteredForceField>
</Each>
</Panel>
var makeAttract = [
{
forcefield: "attract1",
theTarget: "box1.Height",
value:"ONE",
text:"This is some text"
},
{
forcefield: "attract2",
theTarget: "box2.Height",
value:"TWO",
text:"This is some text"
},
{
forcefield: "attract3",
theTarget: "box3.Height,
value:"THREE",
text:"This is some text"
}
];
Thank You
Uldis
September 12, 2017, 7:56am
2
Hi Sergio,
is there a chance we could get a complete reproduction to play with? I have a few ideas to try, but can’t do so without seeing how the rest of the app looks like.
Sergio1
September 12, 2017, 11:41am
3
Hi Uldis,
The concept of this part of the App is to add an item to a list while dragging the Add button into the List as seen in the Screen Capture.
The code is Below.
<App>
<Panel Background="#000">
<JavaScript>
var Observable = require('FuseJS/Observable');
var makeAttract = Observable();
var makeAttract = [
{
forcefield: "attract1",
theTarget: "box1",
value:"ONE",
text:"This is some text"
},
{
forcefield: "attract2",
theTarget: "box2",
value:"TWO",
text:"This is some text"
},
{
forcefield: "attract3",
theTarget: "box3",
value:"THREE",
text:"This is some text"
}
];
module.exports = {
makeAttract: makeAttract
};
</JavaScript>
<Grid Rows="50,1*,50">
<Panel Color="#333" Height="50">
<Text Value="Drag New Item to List" FontSize="22"
Alignment="Center" TextColor="#fff"/>
</Panel>
<Panel>
<Panel Width='50' Height='30' Background='White' Alignment="BottomCenter">
<Draggable Axis='Y'/>
<Text Value="+" Alignment="Center"/>
<Released>
<!--
Once Released, Update the Loop and JSON to include changes
-->
</Released>
<Each Items="{makeAttract}">
<InForceFieldAnimation ForceField="{forcefield}" From="0" To="1">
<Change Target="{theTarget}" Value='100'/>
<Change container.Y='-8'/>
</InForceFieldAnimation>
<EnteredForceField ForceField="{forcefield}">
<Set newText.Value='{value}'/>
</EnteredForceField>
</Each>
<!--
<InForceFieldAnimation ForceField="attract1" From="0" To="1">
<Change box1.Height='100'/>
<Change container.Y='-8'/>
</InForceFieldAnimation>
<EnteredForceField ForceField="attract1">
<Set newText.Value='ONE'/>
</EnteredForceField>
<InForceFieldAnimation ForceField="attract2" From="0" To="1">
<Change box2.Height='100'/>
<Change container.Y='-8'/>
</InForceFieldAnimation>
<EnteredForceField ForceField="attract2">
<Set newText.Value='TWO'/>
</EnteredForceField>
<InForceFieldAnimation ForceField="attract3" From="0" To="1">
<Change box3.Height='100'/>
<Change container.Y='-8'/>
</InForceFieldAnimation>
<EnteredForceField ForceField="attract3">
<Set newText.Value='THREE'/>
</EnteredForceField>
-->
</Panel>
<Panel>
<Text ux:Name='newText' Value='Start' Alignment='BottomCenter' />
</Panel>
<StackPanel Opacity="0">
<Panel Width='50%' Height='50' Background='Green' Opacity='0.25' >
</Panel>
<Panel Width='50%' Height='100' Background='Yellow' Opacity='0.25' >
<PointAttractor ux:Name="attract1" Radius="50" Strength="100" />
</Panel>
<Panel Width='50%' Height='100' Background='Blue' Opacity='0.25' >
<PointAttractor ux:Name="attract2" Radius="50" Strength="100" />
</Panel>
<Panel Width='50%' Height='100' Background='Red' Opacity='0.25' >
<PointAttractor ux:Name="attract3" Radius="50" Strength="100" />
</Panel>
<Panel Width='50%' Height='100' Background='Black' Opacity='0.25' >
</Panel>
</StackPanel>
<StackPanel ux:Name='container' >
<Panel Width='100%' Height='100' Background='Blue'>
</Panel>
<Panel ux:Name='box1' Width='100%' Height='0' Background='Black'>
</Panel>
<Panel Width='100%' Height='100' Background='Red'>
</Panel>
<Panel ux:Name='box2' Width='100%' Height='0' Background='Black'>
</Panel>
<Panel Width='100%' Height='100' Background='Yellow'>
<Pressed>
</Pressed>
</Panel>
<Panel ux:Name='box3' Width='100%' Height='0' Background='Black'>
</Panel>
<Panel Width='100%' Height='100' Background='Green'>
</Panel>
</StackPanel>
</Panel>
<Panel Height="50" Color="#999" Alignment="Bottom">
<Text Value="Click and Drag the White panel to Add to list" TextColor="#fff" Alignment="Center" />
</Panel>
</Grid>
</Panel>
</App>
Sergio1
September 12, 2017, 11:49am
4
Not Sure why the code is not showing correctly.
but it should have the App => Panel => Javascript part in the Beginning
Uldis
September 12, 2017, 2:52pm
5
Alright, this at least explains what you are trying to do.
Having spent a good while with your code, it’s a bit sad to give you a blunt answer to the original question: you can’t .
Frankly, the approach you’ve taken to implement that dragging functionality is not the right one. And I’m afraid currently there isn’t a single straight-forward approach you could take to get this done.
To leave you with something, let me share a bit of a “drag to reorder” code that I’ve been working on recently; it involves the recently introduced IdentityKey property on Each. Maybe this will give you more ideas you could try:
<App>
<Panel Background="#000">
<JavaScript>
var Observable = require('FuseJS/Observable');
var targets = Observable(
{color: "#18f"},
{color: "#f81"},
{color: "#1f8"}
);
var indexed = targets.map(function(item, index) {
return {color: item.color, index: index};
});
var reordering = false;
var lastIndex = null;
function hovering(args) {
if (reordering && (args.data.index != lastIndex)) {
insertPlaceholder(args.data.index);
}
}
function startReorder() {
reordering = true;
insertPlaceholder(targets.length);
}
function stopReorder() {
putPlaceholderInPlace();
reordering = false;
}
function insertPlaceholder(idx) {
lastIndex = idx;
targets.removeWhere(function(x) {
return x.color == "#fff5";
});
targets.insertAt(idx, {color: "#fff5"})
}
function putPlaceholderInPlace() {
var tmp = targets.toArray();
tmp.forEach(function(x) {
if (x.color == "#fff5") x.color = "#fff";
});
targets.replaceAll(tmp);
}
module.exports = {
targets: indexed,
hovering: hovering,
startReorder: startReorder,
stopReorder: stopReorder
};
</JavaScript>
<Grid Rows="50,1*,50">
<Panel />
<Panel HitTestMode="LocalBoundsAndChildren">
<Released>
<Callback Handler="{stopReorder}" />
</Released>
<StackPanel ux:Name="List">
<Each Items="{targets}" IdentityKey="color">
<Panel ux:Name="item" Height="100" Color="{color}">
<WhileHovering>
<Callback Handler="{hovering}" />
</WhileHovering>
<LayoutAnimation>
<Move RelativeTo="PositionChange" Vector="1" Duration="0.16" />
</LayoutAnimation>
</Panel>
</Each>
<Panel Width="50" Height="30" Background="White" Alignment="BottomCenter" Layer="Overlay">
<Pressed>
<Callback Handler="{startReorder}" />
</Pressed>
<Text Value="+" Alignment="Center"/>
</Panel>
</StackPanel>
</Panel>
<Panel />
</Grid>
</Panel>
</App>
Sergio1
September 12, 2017, 3:49pm
6
Thanks again for the response, will look through the code this evening and work from there.
Good to know that i was on the wrong direction and always great to hear that earlier than later, will keep you posted on progress.
Sergio1
September 12, 2017, 7:59pm
7
Been working through the code you sent, I understand your process and concept and so far it seems to be a great foundation to work on, starting to see results with it already.
Thank you.