Custom views do not support the transfer of modifiers

Question

Custom views do not support the transfer of modifiers

Hey there, I'm currently working on implementing a coordinate axis using views to create a reusable module. However, when I integrate the module, I end up losing all alignment and origin properties, and I am unable to modify them in my main code. Can you help me figure out what I might be missing?

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've managed to display the x-axis at the top, but strangely the y-axis is not showing up at all. The components seem to work fine independently.

javascript requirejs famo.us

Answer 1

Answer №1

In your view, there is no need to create a new context separately; the view itself (this) will act as its own 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;

Additionally, ensure that the parent context has sizing defined.

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

OR utilize the default context (as shown in the example snippet below)

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>

Answer 2

In your view, there is no need to create a new context separately; the view itself (this) will act as its own 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;

Additionally, ensure that the parent context has sizing defined.

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

OR utilize the default context (as shown in the example snippet below)

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>

Custom views do not support the transfer of modifiers

Answer №1

WireFrameView.js

Working Example Snippet

Similar questions

How can I use JQuery to save values from a for loop?

What is the way to add particular elements to a fresh array while using map function?

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

determine which specific button triggered the validation process

Having Trouble Rendering EJS Files in HTML: What Am I Doing Wrong?

Step-by-step guide on implementing a border-bottom for an active link

ContextBridge in Electron fails to return a valid response

Easily done! Using JavaScript to generate a blinking cursor on a table

Making an Ajax request from within an iframe using the easyXDM framework

What is the method for accessing appendTo() in the Document Object Model (

Is there a way to reach my vue instance while inside a v-for iteration?

How can we tailor a function in NextJS to display specific content according to the link provided?

What is the best way to extract information from a table that has been populated by a backend function?

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

Verify if there are multiple elements sharing the same class and initiate a certain action

What is the process for incorporating a third-party library into Angular 6?

Utilizing Formik for Validation with Native Base Input Fields

Generating a multidimensional associative array based on user inputs from a form

Side-bar Grid React

Siblings mousedown event propagation