CompSciFutures commented 9 years ago

Description

Node#setMountPoint() and Node#setAlign() decrements their respective Z-components by 0.5 every time they are called.

Isolation

Present in 0.6.2
Present in a5d7fd552505c0f2d40c4a86aa0a61950736ff16

Example

Relevant Code Section

    staticNode.setAlign(0.5, 0.5, 10);
    // next line outputs: BEFORE: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":9.5}
    console.log("BEFORE:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))
    var aMountPoint = staticNode.getMountPoint();
    var aAlign = staticNode.getAlign();
    staticNode.setAlign(aAlign[0], aAlign[1]); // note no 3rd (z) component. Problem still occurs
    staticNode.setMountPoint(aMountPoint[0], aMountPoint[1], aMountPoint[2]);
    // next line outputs: AFTER: getMountPoint()= {"0":0,"1":0,"2":-0.5} .getAlign()= {"0":0.5,"1":0.5,"2":9.5}
    console.log("AFTER:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))

Working Example Code

<!-- @see https://github.com/Famous/engine/issues/439 -->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <xxxscript src="http://code.famo.us/famous/0.6.2/famous.min.js"></xxxscript>
    <script src="../FamousBuilds/famous-20150722-a5d7fd552505c0f2d40c4a86aa0a61950736ff16.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;

        }
        body {
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            background-color: black;
            -webkit-perspective: 0;
            perspective: none;
            overflow: hidden;
        }
    </style>
</head>

<body>
<script>
    'use strict';

    console.log(famous);
    //var famous = require('famous');
    var DOMElement = famous.domRenderables.DOMElement;
    var FamousEngine = famous.core.FamousEngine;
    var Position = famous.components.Position;

    var scene = FamousEngine.createScene();
    var staticNode = scene.addChild();
    staticNode.setSizeMode('absolute', 'absolute').setAbsoluteSize(50, 50)

    console.clear();

    staticNode.setAlign(0.5, 0.5, 10);
    console.log("BEFORE:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))
    var aMountPoint = staticNode.getMountPoint();
    var aAlign = staticNode.getAlign();
    staticNode.setAlign(aAlign[0], aAlign[1]); // note no 3rd (z) component. Problem still occurs
    staticNode.setMountPoint(aMountPoint[0], aMountPoint[1], aMountPoint[2]);
    console.log("AFTER:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))
    staticNode.setAlign(aAlign[0], aAlign[1], aAlign[2]);
    staticNode.setMountPoint(aMountPoint[0], aMountPoint[1], aMountPoint[2]);
    console.log("AFTER:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))
    staticNode.setAlign(aAlign[0], aAlign[1], aAlign[2]);
    staticNode.setMountPoint(aMountPoint[0], aMountPoint[1], aMountPoint[2]);
    console.log("AFTER:", "getMountPoint()=", JSON.stringify(staticNode.getMountPoint()), ".getAlign()=", JSON.stringify(staticNode.getAlign()))

    var blueDIV = new DOMElement(staticNode, {
        properties:{
            'background-color':'#49afeb'
        }
    });

    FamousEngine.init();
</script>
</body>
</html>

Ouptut

Actual Console Ouptut

BEFORE: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":9.5}
AFTER: getMountPoint()= {"0":0,"1":0,"2":-0.5} .getAlign()= {"0":0.5,"1":0.5,"2":9.5}
AFTER: getMountPoint()= {"0":0,"1":0,"2":-1} .getAlign()= {"0":0.5,"1":0.5,"2":9}
AFTER: getMountPoint()= {"0":0,"1":0,"2":-1.5} .getAlign()= {"0":0.5,"1":0.5,"2":8.5}

(note component "2" decrements by 0.5 each time)

Expected Console Output

BEFORE: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":10}
AFTER: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":10}
AFTER: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":10}
AFTER: getMountPoint()= {"0":0,"1":0,"2":0} .getAlign()= {"0":0.5,"1":0.5,"2":10}

alexanderGugel commented 9 years ago

Will look into this. This seems rather suspicious to me, since

setAlign needs to be called with values [0, 1], 10 doesn't make sense
Getters don't have side effects (at least they shouldn't)
The references commit can't be the cause, since it's running in a different thread. You can't set the transforms/ offsets from the UI thread. If this is an issue, it's because of something else (maybe a previous change).

That being said, I'm going to look into this, but would ask you to double check if there is something else in your code that mutates the states directly, e.g. the returned offset arrays shouldn't be mutated directly.

CompSciFutures commented 9 years ago

Hi alex, I checked it very closely hence the minmal working example. I'm pretty sure it's real.

NB, I built a wrapper around it to fix that problem but now it appears that the z axis is in the range [-0.5, +0.5] rather than [0, 1]. I have not investigated that too deeply but just started working with that coordinate system instead.

Why I mention it is that this bug might be caused by an attempt to band-aid over a bigger z-axis problem?

Famous / engine

Node#setMountPoint() and Node#setAlign() decrement Z-components by 0.5 #450