Why is this curve closed?

Bug Reports
1

I try to create animated lines and tried this sample:

<App Background="#232323">
    <JavaScript>
        var Observable = require( "FuseJS/Observable" )
        
        var max = 4
        var items = Observable()
        exports.items = items

        for (var i = 0; i <= max; ++i) {
            items.add( Observable( { x: 0, y: 0 } ) )
        }

        exports.next = function() {
            items.getAt(0).value = { x: 0, y: 0 } ;
            items.getAt(1).value = { x: 1, y: 0 } ;
            items.getAt(2).value = { x: 1, y: 1 } ;
        }
    </JavaScript> 
    <AttractorConfig ux:Global="lineAnim" Duration="2" Type="Elastic" Unit="Normalized"/>
    <Curve StrokeWidth="2.5" StrokeColor="#000" HitTestMode="LocalBounds" Clicked="{next}" Margin="50" Style="Straight" Close="None">
        <DropShadow Size="6" Spread="0.5" Color="#FFF5" Distance="0"/>
        <Each Items="{items}">
            <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
        </Each>
    </Curve>
</App>

And was wondering why this curve is closed although the Close property of the Curve tag is set to None?

2

That’s so because you have 5 curve points in your Observable list. The values of the last 2 points are (0,0), so it closes the Curve.

Changing the code to this makes the Curve to stay open (and changing Close to Overlap makes the Curve close):

<App Background="#232323">
    <JavaScript>
        var Observable = require( "FuseJS/Observable" )

        var max = 2;
        exports.items = Observable();

        for (var i = 0; i <= max; ++i) {
            exports.items.add(Observable({ x: 0, y: 0 }));
        }

        exports.next = function() {
            exports.items.getAt(0).value = { x: 0, y: 0 } ;
            exports.items.getAt(1).value = { x: 1, y: 0 } ;
            exports.items.getAt(2).value = { x: 1, y: 1 } ;
        }
    </JavaScript> 
    <AttractorConfig ux:Global="lineAnim" Duration="2" Type="Elastic" Unit="Normalized"/>
    <Curve StrokeWidth="2.5" StrokeColor="#000" HitTestMode="LocalBounds" Clicked="{next}" Margin="50" Style="Straight" Close="None">
        <Each Items="{items}">
            <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
        </Each>
    </Curve>
</App>
3

Sorry, I don’t get it. Why do I have 5 points? I initialize 3 points and then set their values?

4 
var max = 4
for (var i = 0; i <= max; ++i) {
    exports.items.add(Observable({ x: 0, y: 0 }));
}

i == 0, 1, 2, 3, 4 == 5 items.

5

Sorry, to blind this morning… I was looking to your corrected code :open_mouth: