Unable to pass on modifiers via custom views

Question

Hi I am trying to place co-ordinate axis via views to make it a reusable module but when I add the module I lose all align and origin properties, also I am not able to modify them in my main. What am I missing here.

main.js

define(function(require) {
  var Engine = famous.core.Engine;
  var Modifier = famous.core.Modifier;
  var Transform = famous.core.Transform;
  var StateModifier = famous.modifiers.StateModifier;

  var WireFrameView = require('WireFrameView');

  var cContainerElement;
  var oMainContext;
  var fAngle = 0.0;

  var oWireFrameView = new WireFrameView()

  var oViewRotator = new Modifier({
    align: [.5, .5],
    origin: [.5, .5]
  });


  var oAlignOriginModifier = new StateModifier({
    align: [.5, .5],
    origin: [.5, .5]
  });

  cContainerElement = document.getElementById("FamousContent");
  oMainContext = Engine.createContext(cContainerElement);

  oMainContext.add(oWireFrameView);
  oViewRotator.transformFrom(rotateYY);

  return;
});

WireFrameView.js

define(function(require, exports, module) {
  var PhysicsEngine = famous.physics.PhysicsEngine;
  var View = famous.core.View;
  var Modifier = famous.core.Modifier;
  var Transform = famous.core.Transform;
  var StateModifier = famous.modifiers.StateModifier;
  var Surface = famous.core.Surface;
  var Engine = famous.core.Engine;

  cContainerElement = document.getElementById("FamousContent");
  oMainContext = Engine.createContext(cContainerElement);

  function WireFrameView() {
    View.apply(this, arguments);
    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new StateModifier({
      align: [0.5, 0.5],
      origin: [.5, .5]
    });

    var lightSquare = new Surface({
      size: [100, 100],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new StateModifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    oMainContext.add(alignOriginModifiersq)
      .add(lightSquare);

    var node = oMainContext.add(oAlignOriginModifier);
    node.add(oXAxis);
    node.add(oYAxis);
    node.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;
});

I get my x axis on the top where as I don get any y axis at all, separately it seems to work fine.

talves · Accepted Answer · 2015-04-27T06:11:49.100

You should not have to create a new context in your view, so the view itself (this) will be it's RenderNode.

WireFrameView.js

  function WireFrameView() {
    View.apply(this, arguments);

    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new Modifier({
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var lightSquare = new Surface({
      size: [100, 100],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new StateModifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    this.add(alignOriginModifiersq)
      .add(lightSquare);

    var node = this.add(oAlignOriginModifier);
    node.add(oXAxis);
    node.add(oYAxis);
    node.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;

Also, you need to have sizing on the parent context.

oMainContext = Engine.createContext(cContainerElement);
oMainContext.setSize([500, 500]);

OR if you use the default context (show in example snippet)

oMainContext = Engine.createContext();

Working Example Snippet

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');

  var WireFrameView = require('WireFrameView');

  var cContainerElement;
  var oMainContext;
  var fAngle = 0.0;

  var oWireFrameView = new WireFrameView({
    size: [500, 500]
  });

  var oAlignOriginModifier = new StateModifier({
    align: [0.5, 0.5],
    origin: [0.5, 0.5]
  });

  cContainerElement = document.getElementById("FamousContent");

  //oMainContext = Engine.createContext(cContainerElement);
  //oMainContext.setSize([500, 500]);

  oMainContext = Engine.createContext();

  var yAxis = function() {
      return Transform.rotateY(0.002 * (Date.now() - initialTime));
    };
  var zAxis = function() {
      return Transform.rotateZ(0.002 * (Date.now() - initialTime));
    };
  
  var initialTime = Date.now();
  var centerSpinModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    transform: yAxis
  });

  var ctxNode = oMainContext.add(oAlignOriginModifier);
  ctxNode.add(centerSpinModifier).add(oWireFrameView);
  
});
require(['main']);
define('WireFrameView', function(require, exports, module) {
  var Surface = require('famous/core/Surface');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var View = require('famous/core/View');

  function WireFrameView() {
    View.apply(this, arguments);

    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      classes: ['double-sided'],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      classes: ['double-sided'],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      classes: ['double-sided'],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new Modifier({
      size: this.options.size,
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var lightSquare = new Surface({
      content: 'Square 100,100',
      size: [100, 100],
      classes: ['double-sided'],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new Modifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    this.add(oAlignOriginModifier).add(alignOriginModifiersq)
      .add(lightSquare);

    this.add(oXAxis)
    this.add(oYAxis);
    this.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;
});

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<style>
  .double-sided {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
</style>
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div id="FamousContent"></div>

this is working fine, just two more questions. 1) Why can't I use dot notations, 2) and when I apply rotation it rotates around the top left point despite of realigning. — Shubham Sharma, Apr 24 '15 at 06:23
dot notations? 2) Rotation of a modifier around an axis is dependent on the origin of the surface/view it is targeting. — talves, Apr 24 '15 at 14:24
1) dot notations for famo.us components eg. "famous.physics.PhysicsEngine" 2) can you try rotating the axis I drew round the center of the screen, I tried several permutations and combinations but I am not able to get it rotate about the center. — Shubham Sharma, Apr 27 '15 at 02:41
You can use CommonJS, but I am using AMD (with requirejs) because that is what the `Famo.us Library` is written in and it is easier to use quickly for the code snippets. The code should work the same. — talves, Apr 27 '15 at 03:56
ok, I changed the example to have the origin off the center of the view. I applied a rotation modifier, but any transform you want will work. The issue was that there is sizing needed on the main Modifier in the view or the view assumes it has no size and centers off the origin which happens to be located at [0,0]. — talves, Apr 27 '15 at 06:15

Unable to pass on modifiers via custom views

1 Answers1

WireFrameView.js

Working Example Snippet