Mithriljs uses the same notion of dom mounting as a Samsara context, ie. it needs a dom node to render into. As it turns out it's very easy to use Mithriljs with Samsara. You just mount your Mithriljs object at a Surface exit point to the dom.

But I'd like to know the idiomatic way of getting a Surface's dom element.

Hi, the link for download in the documentation isn't working.

Currently the event handler only registers to upstream events through the on method. There is no subsequent off which would de-register from these upstream events.

On iOS (iPad Pro's) it is possible for the view-port size to change when the user opens a split view application. Currently the Engine doesn't propagate / respond to these changes in the view-port size.

First of all, really great stuff! From a first look at the API and the examples, this looks really interesting!

However, when I run the demos of your website on my mobile phone, the rendering seems to break quite heavily.

These are just two examples – except from the logo, all the demos seem to break in some way or another.

I'm using Chrome on my Motorola Moto X 3rd Gen running Android 5.

But the phone also has some issues rendering box-shadows, as described here – I don't know if that is related somehow.

The EventEmitter incorrectly binds the onceHandler to this instead of this._owner. [I believe] it should be consistent with everything else and bind to this._owner.

Hello David,

Thank you for the great work, it's really inspiring and I hope the project will keep growing.
I was wondering if you plan to move the codebase to ES2015?

That would have the advantages to:

• benefit from all the new primitives brought by the language
• follow an actual specification
• be more concise
• allow for rather strict linting rules (with ESLint?) which might prove useful if the number of contributors grows along with the project.

Moreover, since you are using webpack as a build tool, the refactor would not have to happen at once but could be progressively done.

Hey David,

Very interested in what you've been doing here, and it's great to see that you are still building stuff like this.

I personally love streams as an abstraction, and I was wondering if you considered using straight node.js streams (as per the stream handbook ). There's a really large ecosystem for this kind of thing already, and because a lot of this stuff handles data too.

I think if this system coould allow you to easily wire up data sources into the graph, there could be some really simple abstractions to be made.

Based on this prototype https://github.com/davidkpiano/RxCSS
and this presentation https://www.youtube.com/watch?v=lTCukb6Zn3g

I thought it might be interesting to see how much benefit it will provide if animating stuff by manipulating sheet rules instead of nodes directly. In this talk he is using css variables which are not supported everywhere, though it doesn't matter one can manipulate rules which apply using classes to the elements.

I'm trying to see if there's an option to disable this completely in v2.0?

I'm still using 0.1.3 because scrolling does not work on any of my pages when updating to v2.0

I notice you have View as well as things Layouts all bundled up.

The current structure of the source makes it tougher using webpack/browserify since you don't provide the source in the dist folder where the "main" property points of the npm package. It's nice to have a standalone version for people to drag and drop but you can leave that in the dist folder with the source. If I wanted to do a require('samsarajs/dom/Surface') so I don't bundle up things I don't want using a tool like webpack or browserify I would have to go up a level using '.../' which is something you don't want to see.

I'm pretty sure the best thing you could do is run a regex to convert all of your amd statements to es6 import/export and use the babel-umd transform with destination pointed to /dist so all of the source is packaged in the dist folder and people can choose what they want to use in a fluent manner. Also, I think providing the source files in npm module download right now may be a good thing since webpack 2.0 treeshaking will require the es6 import statements but you would still want to have a umd version for others that aren't there yet. Welcome to why the JavaScript ecosystem is so confusing for new comers right?

People like myself will design other/more manageable way to do a "View" for encapsulating nodes and expressing the render tree. The things we're after here is the core functionality for motion performance using DOM.

I know some of this has been mentioned but this was more for information purposes in case you didn't see the use cases a lot are doing and for others thinking the same thing. Let me know if you need help although I'm currently swamped with real life but I'll do what I can.

I feel a little dump but I though that would be way easy...
However as far as it seem I can't make it work

surface.on('click', function(){
  var surface2 = new Surface({});
  context.add(surface2);  
});

I though something like this would work :p
am I approaching this the wrong way?

See example:
http://codepen.io/daKmoR/pen/GZygpd?editors=0010

I took your dragging example an limited the size of the red surface is limited to 500px.
When moving over the limit the red surface keeps at 500px but the accumulation still counts.
So when again try to scale down, one have first to "walk all the way back" before the red surface will reduce size.
Any idea how to solve this?

http://codepen.io/anon/pen/QjPamX

btw. i try to build http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/ with samara

I don't think is a bug, but I guess it will be useful to be able to add views to context after it has been mounted, I understand that Views have a low-footprint, but if the view is composes of many other views it could take a little linger to calculate layout and size. I wanna be able to render the view only after an action has happen.

If I dispatch a resize event on window, it should work but since the size is the same the engine never emits a resize event,
#L153-L154

This is happening on all my iOS test devices. Running iOS 9.2

Console:

20    356862   log      value >, -3
21    356880   log      value >, -20
22    356907   log      value >, -32
23    356912   log      value >, -45
24    356929   log      value >, -52
25    356957   log      value >, -56
26    356962   log      value >, -59
27    357024   log      value >, -52
28    357029   log      value >, -39
29    357046   log      value >, -18
30    357061   log      value >, -3
31    357090   log      value >, 10
32    357095   log      value >, 23
33    357112   log      value >, 33
34    357140   log      value >, 43
35    357146   log      value >, 52
36    357174   log      value >, 58
37    357178   log      value >, 61
38    357231   log      value >, 61

Code:

    var displacement = new Accumulator( 0, {
        min: -this.xDelta,
        max: this.xDelta
    } )

    displacement.subscribe( this.touch.pluck( 'delta' ) )

    var dragDisplacement = displacement.map( function ( value ) {
        console.log( 'value >', value )
        return Transform.translateX( value );
    } )

    context.add( {
        transform: Transform.translate( [ -this.xDelta, this.wHeight - this.yDelta ] )
    } ).add( {
        transform: dragDisplacement
    } ).add( this.layout )

My android devices work as should.

Seeing the following error in the logs:
_MergedStream.js:37 Uncaught TypeError: stream.on is not a function

Since react 0.14+ it is possible to create custom renders more easily.
I created a POC impl for samsara.js https://github.com/mj-networks/react-samsara-poc. There is also a demo https://github.com/mj-networks/react-samsara-demo1.

Hi,
I just want to know if any version of samsarajs will be able to work in Shadow DOM by creating native nodes of DOM, using createShadowRoot (or by using Polymer JS) for a widget(s) and create "sub-nodes" using Samsara.Surface in those native nodes, with their own render tree.
Will it be an overhead on resources and rendering??
Just asking.

Thank you

What is the reason, if any aside from lack of resources/time, for not attempting to implement something comparable to Famous' Mixed Mode? Will there be any alternatives for building 3D and WebGL apps using Samsara?

Also how about a physics engine? Should it simply be possible to use a 3rd party one in combination with Samsara?

Using the latest master branch I get
ElementOutput.js:150 Uncaught TypeError: Cannot set property 'innerHTML' of undefined

var MySubView = View.extend({
    initialize: function() {
        var container = new ContainerSurface({
            size: [undefined, undefined]
        });

        var background = new Surface({
            content: 'info',
            size:    [undefined, undefined]
        });
        container.add(background);
        this.add(container);
    }
});

var mySubView = new MySubView();
var mySubView2 = new MySubView();

var context = new Context();
context.add(mySubView);
context.add(mySubView2);
context.mount(document.body);

PS: on the release version it works just fine (e.g. http://codepen.io/anon/pen/wGJwjL?editors=0010)
PPS: if there is no ContainerSurface it also works just fine

Sorry, this isn't an issue with Samsara.

But I bumped into some info that may be of interest to you:

• What forces layout / reflow
• FastDom

Usually index dots on Carousel updates at the same time you click on them or in one of the Carousel arrows. In the demo it takes a while until the active dots is highlighted when changing slide. I think fixing this will help make appear the library more stable.

Hi,

Is there any support or plans to support embedding Video or Audio (players) as a node in the tree especially on iOS, so that we can build custom interfaces without being forced to play video using the default video player on iOS and other devices? Thanks in advance.

Within the _DOMOutput.js controller the following is set as the min & max opacity:

var MIN_OPACITY = 0.0001;
var MAX_OPACITY = 0.9999;

Is the purpose of this to enable the click through associated with style.visibility: hidden?

@dmvaldman Hi David, just thought I'd give a heads up for the parallax scroll demo (with the cats): it would be nice if it had drag ability for the scrolling.

I'm in Linux, and the touchpad behaves like a scroll wheel, where the scroll jumps instead of being smooth (Due to the fact that Chrome Linux uses GTK2). Others will also won't see the effect if they have older mice with scroll wheels.

The new homepage looks awesome! 😃

Hello,

Nice plugin.

In Firefox (Ubuntu 14.04, FF v43.0.4), I receive the following error when I view any of your demos: TypeError: document.body is null, app.js : 4362 : 13

Here is a screen shot:

Hi,
I wanna use Samsara in my Meteor project. Is it possible?

?

Say I want to insert a CodeMirror IDE inside a surface, or a JQuery UI (eg. jsTree), or an Ember component, etc...

There doesn't seem to be a documented way to insert content into a Surface except for the content string, which is VERY limiting.

Something along getting the DOM element of the Surface and modifying it when the Surface is initialized is a not a very holistic solution but its good enough for many useful use cases.

Currently when an dom-object is promoted, the css will-change property will only look for transform and opacity. Is it worth while investigating ways to maintain an active "promotion" list? Where the list could contain the values: transform, opacity, and size...

This would allow commitSize to participate in the performance gains associated with will-change. (As opposed to the current where only commitLayout will participate)

I haven't tried this, so I'm unsure what (if any) performance gains would be achieved.

I've noticed that when setting a transition, the translate gets called twice.

this.touch = new MouseInput()
this.x = new Transitionable( 0 )

this.transform = this.x.map( function ( value ) {
    console.log( 'value >', value ) // THIS GETS CALLED TWICE
    return Transform.translateX( value )
} )

this.touch.on( 'start', function ( pay ) {
    this.x.reset( 0 )
}.bind( this ) )

this.touch.on( 'update', function ( pay ) {
    console.log( 'pay.value[ 0 ] >', pay.value[ 0 ] )
    this.x.set( pay.value[ 0 ] )
}.bind( this ) )

this.touch.on( 'end', function ( pay ) {
    this.x.reset( pay.value[ 0 ] )
    this.x.set( 0, {
        duration: 250,
        curve: Curves.outBack
    }, function () {
        this.x.reset( 0 )
    }.bind( this ) )
}.bind( this ) )

context.add( {
    transform: Transform.translateX( -this.xDelta )
} ).add( {
    transform: this.transform
} ).add( this.layout )

console:

2016-01-23 22:32:59.264 sbar.js:110 value > 171
2016-01-23 22:32:59.278 sbar.js:110 value > 171
2016-01-23 22:32:59.281 sbar.js:131 pay.value[ 0 ] > 189
2016-01-23 22:32:59.281 sbar.js:110 value > 189
2016-01-23 22:32:59.294 sbar.js:110 value > 189
2016-01-23 22:32:59.299 sbar.js:131 pay.value[ 0 ] > 210
2016-01-23 22:32:59.299 sbar.js:110 value > 210
2016-01-23 22:32:59.310 sbar.js:110 value > 210
2016-01-23 22:32:59.317 sbar.js:131 pay.value[ 0 ] > 228
2016-01-23 22:32:59.318 sbar.js:110 value > 228
2016-01-23 22:32:59.327 sbar.js:110 value > 228
2016-01-23 22:32:59.331 sbar.js:131 pay.value[ 0 ] > 243
2016-01-23 22:32:59.331 sbar.js:110 value > 243
2016-01-23 22:32:59.344 sbar.js:110 value > 243
2016-01-23 22:32:59.348 sbar.js:131 pay.value[ 0 ] > 250
2016-01-23 22:32:59.348 sbar.js:110 value > 250
2016-01-23 22:32:59.360 sbar.js:110 value > 250
2016-01-23 22:32:59.366 sbar.js:131 pay.value[ 0 ] > 258
2016-01-23 22:32:59.367 sbar.js:110 value > 258
2016-01-23 22:32:59.377 sbar.js:110 value > 258
2016-01-23 22:32:59.383 sbar.js:131 pay.value[ 0 ] > 263

In Qt 4.8/QtWebKit 2.2, both bind() and requestAnimationFrame() fail. I can't verify which version of QtWebKit (or its successor QtWebEngine) start providing bind, but I do know the old Phantom.js also had this problem. I believe Qt5.3 and Phantom2 both support bind, but I don't know when requestAnimationFrame gets supported.

We could either document how to add known good polyfills with <script> elements, or provide working polyfills within Samsara.

I've been playing (read hacking) the Carousel demo. Sometimes the page transitions end up partly "off page". Have you thought about using a PI controller to eliminate the steady state error?

Samsara looks like an interesting idea whose time has certainly come. Over at Cycle.js.org we are making all our interfaces with streams, it's completely natural and very powerful. We use RxJS which gives us tremendous reactive streaming power.

How do you see Samsara fitting into the future of reactive UI's now that all the main frameworks are now on the RxJS bandwagon? I can see Samsara working very well with Cycle.js, where we are exploring the potential of building UI's and interactions with streams.

Hi @dmvaldman,

would you like to join the community efforts over at github.com/infamous/motor? That is a community project where we wish to create a community-led alternative to Famous. We're currently in the state of writing prototypes and then after a while we'll take our ideas and decide on the route we want to take. The prototype that you have here could be a huge help. We want to garner the best ideas into the route that we choose to take. Others that have recently left Famous are excited to join, but are waiting for their non-compete contracts to expire.

These are the channels that we've been having discussions in:

http://gitter.im/infamous/famous-engine (we forked Famous Engine)
http://gitter.im/infamous/motor (but we are more excited to work on our own community-led solution instead)

Join us and share ideas with us! I've sent you an invitation to the infamous group (the name "infamous" and "motor" are subject to change, but it's what we're working with for the time being.)

Is there a specific reason why the debounce delay is set to 200ms? My assumption is that this is an arbitrary amount of time that is used to ensure the changes are fully reflected in the browser.

My understanding is that the resize event isn't fired by the browser until the resize has actually occurred. So I'm not certain that the delay is necessary, and instead of using Timer.debounce(fn, 200) I think Timer.debounceAfter(fn, 1) would be more appropriate.

This link to the reference docs is MIA :(
http://samsarajs.org/reference_docs

SequentialLayout behave unpredicted when it's origin: [0, 1] and when it's added to a align: [0, 1] node.
And direction: SequentialLayout.DIRECTION.Y
Even worse if items hight is set to TRUE.

In direction: SequentialLayout.DIRECTION.X everything is fine and acting as predicted.

var a1 = new Surface({ content: 'alt 1 ', size: [undefined, true], origin: [1, 1] }); var a2 = new Surface({ content: 'alt 2 ', size: [undefined, true], origin: [1, 1] }); var a3 = new Surface({ content: 'alt 3 ', size: [undefined, true], origin: [1, 1] }); var test = new SequentialLayout({ direction: SequentialLayout.DIRECTION.Y, spacing: 3, size: [true, true], origin: [1, 1] }); test.push(a1); test.push(a2); test.push(a3); var context = new Context(); context.add({align: [1, 1]}).add(test); // Mount the context to a DOM node context.mount(document.body);

Hi David,

Please consider deprecating the use of undefined, true, and false in Size options. Why not simply define numerical constants for the special values and export them from an appropriate namespace in the core?

eg.

export const parent = -1;
export const dom = -2;
export const ignore = -3;

eg. use

var fred = new Surface({
size : [Size.parent, 42]
});

This is superior to my mind as:

1. There's no guessing what undefined etc. actually means
2. They use the same underlying storage type (Number), which may help the browser optimize things a little
3. They are way easier to grep

I see a couple of events fire for when an animation ends.

  surface.on('click', function() {
      size.set([0.5, 0.5], {duration: 500}, resetAnim);
  });

  size.on('end', function() {
    // size.set([boxWidth,  boxHeight], {duration: 2000});
    clog('size.end');
  });

If Content comes from a Handlebars template for example, and lets say that Handlebars template contains some reactive data (meteorjs), will that reactive data appear in the Surface without having to write code to re-render? Or will the data automatically stream the content from the handlebars template?

PS: Keep up the excellent work!!!

Can/Should SamsajaJS be integrated with "React Native"?

I just noticed that there is a noticeable hiccup while using Safari browser on this demo while the cube transforms, for Chrome it works fine.

Safari 9.0.2
Chrome 48.....

I have a cordova hook that appends the platform to the body tag in my index.html

When I mount samsara to the body, the classes are overwritten by 'samsara-context'

If I add the classes into the index.html manually, they don't get removed.

The documentation describes many easing transition but only 6 have actually been implemented.

current available easing transitions:

linear
easeIn
easeOut
easeInOut
easeOutBounce
spring

EDIT

Reverting back to 0.0.4 solves this issue.
Trying to use the latest 0.1.3, final project below

I'm trying to make a simple progress indicator with fn.start() fn.stop() and fn.error()

function Prog( context ) {
    this.wWidth = window.innerWidth
    this.halfwWidth = this.wWidth * 0.5
    this.wHeight = window.innerHeight
    this.halfwHeight = this.wHeight * 0.5

    this.index = 501
    this.posX = 0
    this.active = false
    this.err = false
    this.width = this.wWidth * 0.25
    this.height = 5

    this.surf = new Surface( {
        size: [ this.width, this.height ],
        origin: [ 0.5, 0 ],
        properties: {
            background: '#11C1F3'
        }
    } )

    this.x = new Transitionable( 0 )
    this.xTrans = this.x.map( function ( v ) {
        return Transform.translateX( v )
    } )

    this.swap = function () {
        if ( this.active == false || this.err == true ) {
            return
        }

        this.posX = ( this.posX ) ? 0 : this.wWidth
        this.x.set( this.posX, {
            duration: 1000,
            curve: 'easeOutBounce'
        }, function () {
            console.warn( 'end swap' )
            this.swap()
        }.bind( this ) )

    }

    this.done = function () { // THIS DOES NOT STOP ANYTHING
        console.warn( 'done' )
        this.x.halt() // doesnt halt
        this.x.set( 0 ) // doesnt set it to 0
        this.x.reset( 0 ) // doesnt do anything
        this.posX = 0
        this.active = false
        // This only stops when the previous transition from this.swap() has completed
    }

    this.start = function () {
        if ( this.active == true || this.err == true ) {
            return
        }
        console.warn( 'start' )

        this.active = true
        this.swap()
    }

    this.stop = function () {
        if ( this.active == false || this.err == true ) {
            return
        }
        console.warn( 'stop' )

        this.done()
    }

    this.error = function () {
        this.err = true
        // make cool red animation
        this.err = false
    }

    context.add( {
        transform: this.xTrans
    } ).add( this.surf )

}

module.exports = Prog

Am I doing something wrong here? I'm trying to follow the documents as close as possible.

Not sure if I'm doing this correctly here, but:

this.xAccu = new Accumulator( 0, {
    min: -this.width,
    max: this.width
} )
this.xAccu.subscribe( this.input.pluck( 'delta' ) )
this.xAccu.filter( function () {
    return this.touching == true
}.bind( this ) )

I tried returning false and true to see if it did anything but it doesn't.

See my example here with open console:
http://codepen.io/anon/pen/grbNmN?editors=0010

every time event.offsetX === event.clientX there will a console log.

just drag the surface wildly around.

Test in latest Chrome (Version 48.0.2564.116)