origin doesn't work

[Qvatra]

I have containerSurface with Imagesurface inside. I want to resize my container and to keep my image in the center. for this i using modifier align and origin. The problem is that origin doesn't work for some reason.

The code pen implementation is here: http://codepen.io/Qvatra/pen/MYOYpz

Is there any workaround?

[michaelobriena]

What browsers are you seeing this on?

[Qvatra]

on Crome.... IE and firefox give also wrong results: image not in a center even before i start modifying..

[michaelobriena]

This looks to not be an origin bug. I think there are two bugs at play, one our our end in ImageSurface and one on Firefox's end.

In your example, if you swapped the ImageSurface with

var img = new Surface({
    size: [true, undefined],
    content: 'adfadf',
    properties: {
        backgroundColor: 'yellow'
    }
});

everything will work as expected. We will look into the issues with ImageSurface

If you load your example in firefox, the first time you load the app, it behaves differently then every other time. It looks like they are doing some strange stuff but we will look into this once we solve to bug in ImageSurface to ensure it is not our fault.

[MylesBorins]

@michaelobriena any movement on this?

[neeharik]

The translation when scaling happens when the order of the transforms is reversed. So this can be a workaround, try it in your codepen link:

var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var ImageSurface = famous.surfaces.ImageSurface;
var ContainerSurface = famous.surfaces.ContainerSurface;
var View = famous.core.View;
var Entity = famous.core.Entity;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var Transitionable = famous.transitions.Transitionable;
var TransitionableTransform = famous.transitions.TransitionableTransform;
var Easing = famous.transitions.Easing;
var Scrollview = famous.views.Scrollview;

var togle = false;

var mainCtx = Engine.createContext();
//mainCtx.setPerspective(1000);

var mainNode = new View({
  //size:[200,200]
});
var rootModifier1 = new StateModifier({
  size:[200,200],
  align: [0.88, 0.5],  
  origin: [0.5, 0.5]
})

var rootModifier2 = new StateModifier({
  size:[200,200],
  align: [0.5, 0.5],  
  origin: [0.5, 0.5]
})
var cont = new ContainerSurface({
    properties: {background: 'red'}
});
var mod = new StateModifier({
  align: [0.5, 0.5],  
  origin: [0.5, 0.5]
});
var img = new ImageSurface({
  //content: 'http://www.clker.com/cliparts/N/V/c/R/f/z/glossy-black-circle-button-th.png',
  //content: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ23Gzmb4KjWL2CxZXM81lySS4YTdK0rYgj7AToJqK2KuJR8K6U',
  content: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbGYiXmH4bP2zLiyn8HGufqQWaUX4f_TGgntNvgSYuNi8fd9SRX27CAzpp',
  //size: [undefined, true],
  size: [true, undefined]
});
cont.add(mod).add(rootModifier1).add(img);

mainNode.add(rootModifier2).add(cont);
mainCtx.add(mainNode);

Engine.on('click', function(){
  if(!togle){
    rootModifier1.setSize([40,40], {duration: 1000});
    rootModifier2.setSize([40,40], {duration: 1000});
  } else {
    rootModifier1.setSize([200,200], {duration: 1000});
    rootModifier2.setSize([200,200], {duration: 1000});
  }
  togle = !togle;
})

[Qvatra]

well this could be a workaround only if you already know your img size. In my case imgs are loaded dynamically so your align: [0.88, 0.5] would be every time different. Try other images that are commented. However I think your code could be modified to using align: [0.5, 0.88] if imgW>imgH. I will try

UPDATE: here codepen version: http://codepen.io/Qvatra/pen/LEeejK?editors=001 It can not be used as general workaround as it also dependent on container proportion in this case it's 200 / 200 = 1

[neeharik]

The workaround was only to maintain the alignment defined, which in the previous case was changing with size.

[michaelobriena]

I have not had time to really look into this fully. You can try

var img = new Surface({
    size: [true, undefined],
    content: '<img src=' + myImgSourceURL + /'>',
});

Which may work. The other thing you can try is

var myImgEl = document.createElement('img');
myImgEl.onload = function() {
  mySurface.setContent(myImgEl)
};

myImgEl.src = <url>

[MylesBorins]

We are no longer actively maintaining this repo and as such we will not be fixing this.

Thanks you for taking the time to discuss the issue, we hope you will bring the same drive an spirit to the famous engine, which can be found at --> http://github.com/famous/engine