One DisplayObject appearing in two places on the stage

Questions
1

Suppose I have a container object which may or may not have been added to the stage.

I need to create a "visual reference" to that container -- meaning, it shows the image of the original (container), but I can add many of them to the stage or other elements, transform them individually, and they would update live. E.g. If my container has a button, then whichever "reference" I hover above -- this button would appear to highlight everywhere, and pressing any of them it would fire its callback.

What would be the easiest strategy to implement that in current ZIM? Besides, I think that would make for a good proposal for a new ZIM component

2

Here is an example

Concept is to cache the interactive object and make Bitmap copies. Then swap the copies with the original any time the copy is rolled over - and update the cache any time the interaction happens - or all the time in a Ticker if the interaction is animated or complicated.

3

Thanks a lot! Didn't think of swapping before.
Here I modified this example a bit - now each copy resides in a container that takes all transformations on itself, that way we only need to swap original and bitmap without caring about specific properties that might change

// Given F, S, W, H or frame, stage, stageW, stageH

DRAGALL = true;

const colors = series(red, orange, yellow, pink);

const original = new Container(304,304); // borders go half outside bounds - awkward for caching
new Rectangle(original.width-4, original.height-4, white, dark, 2, 30).center(original);
const button = new Button().center(original).tap(()=>{F.color=colors(); S.update();});
original.cache();

const origCont = new Container(original.width, original.height)
// may as well not be on stage
    .center().alp(.7).drag(); 
original.cache().addTo(origCont);

// make copies whenever you want
interval(1, ()=>{
    
    // do these for each we make
    const copy = new Container(original.width, original.height)
        .drag()
        .loc(rand(W-original.width),rand(height-original.height))
        .reg(CENTER,CENTER,true)
        .sca(rand(.5, 1))
        .ske(rand(30.0))
        .rot(rand(0, 180));
    const img = new Bitmap(original).addTo(copy)
        .on("mouseover", swap);
    // end do this for each we make 
    
    S.update();
}, 5);


function swap(e) {
    const c1 = original.parent;
    const c2 = e.target.parent;
    original.removeFrom(c1).addTo(c2);
    e.target.removeFrom(c2).addTo(c1);
    //S.update();
}

// need to update the cache when original changes 
Ticker.add(update);
function update() {
    original.updateCache();
    S.update();
}
2 Likes