From 02e51dac88c8514d1a05860ca14126fcaa0d1876 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 14:49:47 +0200
Subject: [PATCH 1/7] feat(pinner): element-level pin-to-top for display
 objects

pinToTop reparents an object onto a designated pin container and re-syncs
its transform from its original anchor each paint, so it renders on top
while following the anchor's position/scale/animation. State lives on the
stage object so separate easelbone bundles on one stage cooperate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../CatLab/Easelbone/EaselJS/Pinner.js        | 163 ++++++++++++++++++
 .../CatLab/Easelbone/FrontController.js       |  16 +-
 app/scripts/CatLab/Easelbone/Views/Root.js    |  16 +-
 dist/scripts/easelbone.js                     |   5 +-
 package.json                                  |   3 +-
 tools/fixtures/pin-baseline.html              |  80 +++++++++
 tools/pin-test.js                             |  62 +++++++
 7 files changed, 338 insertions(+), 7 deletions(-)
 create mode 100644 app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
 create mode 100644 tools/fixtures/pin-baseline.html
 create mode 100644 tools/pin-test.js

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
new file mode 100644
index 0000000..61122d4
--- /dev/null
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -0,0 +1,163 @@
+define(
+    ['easeljs'],
+    function (createjs) {
+
+        'use strict';
+
+        // Pin state lives on the shared stage object so that separate easelbone
+        // bundles (game + library) rendering onto the SAME stage cooperate: both
+        // read/write stage._pinnedElements and stage._pinContainer, and whichever
+        // RootView owns the tick loop drives the sync for all of them.
+
+        function ensureState(stage) {
+            if (!stage._pinnedElements) {
+                stage._pinnedElements = [];
+            }
+            return stage._pinnedElements;
+        }
+
+        function ensureContainer(stage) {
+            if (stage._pinContainer && stage._pinContainer.getStage() === stage) {
+                return stage._pinContainer;
+            }
+            // Fallback for contexts with no designated pin layer (e.g. a
+            // standalone library portal with no blackout): a last-child
+            // container on the stage.
+            var container = new createjs.Container();
+            stage.addChild(container);
+            stage._pinContainer = container;
+            return container;
+        }
+
+        var Pinner = {
+
+            _props: {},
+
+            setContainer: function (stage, container) {
+                stage._pinContainer = container;
+            },
+
+            pin: function (obj) {
+                var stage = obj.getStage();
+                if (!stage) {
+                    // Not on a stage yet; defer until it is added.
+                    var deferred = function () {
+                        obj.off('added', deferred);
+                        Pinner.pin(obj);
+                    };
+                    obj.on('added', deferred);
+                    return;
+                }
+
+                var anchor = obj.parent;
+                if (!anchor) {
+                    return;
+                }
+
+                ensureState(stage);
+
+                // Re-pin replaces: drop any existing pin on the same anchor so a
+                // re-rendered QR (removeAllChildren + regenerate) never stacks.
+                Pinner._removeByAnchor(stage, anchor);
+
+                var record = {
+                    obj: obj,
+                    anchor: anchor,
+                    localMatrix: obj.getMatrix(),
+                    origRegX: obj.regX,
+                    origRegY: obj.regY
+                };
+
+                ensureContainer(stage).addChild(obj); // reparents out of anchor
+                stage._pinnedElements.push(record);
+
+                // Immediate sync: correctly placed even without a running tick.
+                Pinner._syncRecord(stage, record);
+            },
+
+            unpin: function (obj) {
+                var stage = obj.getStage();
+                var records = stage && stage._pinnedElements;
+                if (!records) {
+                    return;
+                }
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === obj) {
+                        Pinner._restore(records[i]);
+                        records.splice(i, 1);
+                        return;
+                    }
+                }
+            },
+
+            sync: function (stage) {
+                var records = stage._pinnedElements;
+                if (!records || records.length === 0) {
+                    return false;
+                }
+                for (var i = records.length - 1; i >= 0; i--) {
+                    var record = records[i];
+                    // Auto-teardown: anchor removed from the stage.
+                    if (!record.anchor.getStage || record.anchor.getStage() !== stage) {
+                        Pinner._restore(record);
+                        records.splice(i, 1);
+                        continue;
+                    }
+                    Pinner._syncRecord(stage, record);
+                }
+                return records.length > 0;
+            },
+
+            _removeByAnchor: function (stage, anchor) {
+                var records = stage._pinnedElements;
+                for (var i = records.length - 1; i >= 0; i--) {
+                    if (records[i].anchor === anchor) {
+                        Pinner._restore(records[i]);
+                        records.splice(i, 1);
+                    }
+                }
+            },
+
+            _restore: function (record) {
+                if (record.obj.parent) {
+                    record.obj.parent.removeChild(record.obj);
+                }
+                record.obj.regX = record.origRegX;
+                record.obj.regY = record.origRegY;
+            },
+
+            _syncRecord: function (stage, record) {
+                var obj = record.obj;
+                var container = obj.parent;
+                if (!container) {
+                    return;
+                }
+
+                // desired global matrix = anchorConcatenated * capturedLocal
+                var desired = record.anchor.getConcatenatedMatrix()
+                    .appendMatrix(record.localMatrix);
+
+                // Express in the pin container's local space (do not assume the
+                // pin container sits at identity):
+                //   local = containerConcatenated^-1 * desired
+                var local = container.getConcatenatedMatrix().invert()
+                    .appendMatrix(desired);
+
+                var props = local.decompose(Pinner._props);
+                obj.x = props.x;
+                obj.y = props.y;
+                obj.scaleX = props.scaleX;
+                obj.scaleY = props.scaleY;
+                obj.rotation = props.rotation;
+                obj.skewX = props.skewX;
+                obj.skewY = props.skewY;
+                // The captured localMatrix already bakes in the original regX/regY
+                // as translation, so the pinned copy must carry none of its own.
+                obj.regX = 0;
+                obj.regY = 0;
+            }
+        };
+
+        return Pinner;
+    }
+);
diff --git a/app/scripts/CatLab/Easelbone/FrontController.js b/app/scripts/CatLab/Easelbone/FrontController.js
index 47feba5..cf9f555 100644
--- a/app/scripts/CatLab/Easelbone/FrontController.js
+++ b/app/scripts/CatLab/Easelbone/FrontController.js
@@ -31,7 +31,9 @@ define(
         'CatLab/Easelbone/Utilities/GlobalProperties',
         'CatLab/Easelbone/Utilities/MovieClipHelper',
 
-        'CatLab/FakeWebremote/Models/KeyboardUser'
+        'CatLab/FakeWebremote/Models/KeyboardUser',
+
+        'CatLab/Easelbone/EaselJS/Pinner'
     ],
     function (
         Loader,
@@ -65,7 +67,9 @@ define(
         GlobalProperties,
         MovieClipHelper,
 
-        KeyboardUser
+        KeyboardUser,
+
+        Pinner
     ) {
 
         return {
@@ -110,6 +114,14 @@ define(
                 }
             },
 
+            pinToTop: function (displayObject) {
+                return Pinner.pin(displayObject);
+            },
+
+            unpinFromTop: function (displayObject) {
+                return Pinner.unpin(displayObject);
+            },
+
             FakeWebremote: {
                 KeyboardUser: KeyboardUser
             },
diff --git a/app/scripts/CatLab/Easelbone/Views/Root.js b/app/scripts/CatLab/Easelbone/Views/Root.js
index 11a9118..78a52db 100755
--- a/app/scripts/CatLab/Easelbone/Views/Root.js
+++ b/app/scripts/CatLab/Easelbone/Views/Root.js
@@ -4,9 +4,10 @@ define(
         'easeljs',
 
         'CatLab/Easelbone/Views/Layer',
-        'CatLab/Easelbone/Utilities/DirtyFlag'
+        'CatLab/Easelbone/Utilities/DirtyFlag',
+        'CatLab/Easelbone/EaselJS/Pinner'
     ],
-    function (Backbone, createjs, Layer, DirtyFlag) {
+    function (Backbone, createjs, Layer, DirtyFlag, Pinner) {
         var i;
         var layer;
 
@@ -150,6 +151,16 @@ define(
                 return this.layerMap[name];
             },
 
+            /**
+             * Designate the container that pinToTop reparents objects into.
+             * Lets the host control z-order (e.g. above the smiley layer but
+             * below a blackout overlay).
+             * @param container
+             */
+            setPinContainer: function (container) {
+                Pinner.setContainer(this.stage, container);
+            },
+
             /**
              * Set a view on the main layer.
              * @param view
@@ -239,6 +250,7 @@ define(
                     // Direct paints (render/resize) also reset the heartbeat.
                     this._lastPaintTime = createjs.Ticker.getTime();
                 }
+                Pinner.sync(this.stage);
                 this.stage.update();
             },
 
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 4628c45..90bc0b3 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,8 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag"],(function(i,t,e,n){var a;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,a=0;a<this.layers.length;a++)this.layers[a].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(a=0;a<this.layers.length;a++)this.layers[a].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs"],(function(e){"use strict";var n={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(r){var t=r.getStage();if(t){var o=r.parent;if(o){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(t),n._removeByAnchor(t,o);var a={obj:r,anchor:o,localMatrix:r.getMatrix(),origRegX:r.regX,origRegY:r.regY};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(t).addChild(r),t._pinnedElements.push(a),n._syncRecord(t,a)}}else{var i=function(){r.off("added",i),n.pin(r)};r.on("added",i)}},unpin:function(e){var r=e.getStage(),t=r&&r._pinnedElements;if(t)for(var o=0;o<t.length;o++)if(t[o].obj===e)return n._restore(t[o]),void t.splice(o,1)},sync:function(e){var r=e._pinnedElements;if(!r||0===r.length)return!1;for(var t=r.length-1;t>=0;t--){var o=r[t];o.anchor.getStage&&o.anchor.getStage()===e?n._syncRecord(e,o):(n._restore(o),r.splice(t,1))}return r.length>0},_removeByAnchor:function(e,r){for(var t=e._pinnedElements,o=t.length-1;o>=0;o--)t[o].anchor===r&&(n._restore(t[o]),t.splice(o,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.obj.regX=e.origRegX,e.obj.regY=e.origRegY},_syncRecord:function(e,r){var t=r.obj,o=t.parent;if(o){var a=r.anchor.getConcatenatedMatrix().appendMatrix(r.localMatrix),i=o.getConcatenatedMatrix().invert().appendMatrix(a).decompose(n._props);t.x=i.x,t.y=i.y,t.scaleX=i.scaleX,t.scaleY=i.scaleY,t.rotation=i.rotation,t.skewX=i.skewX,t.skewY=i.skewY,t.regX=0,t.regY=0}}};return n}));
+define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
 define("CatLab/Easelbone/Utilities/Path",[],(function(){var t,i=function(t,i){this.start={x:t.x,y:t.y},this.end={x:i.x,y:i.y},this.distance={x:i.x-t.x,y:i.y-t.y},this.orientation=this.distance.x>this.distance.y?"horizontal":"vertical",this.indicatorSize={x:0,y:0}};return i.prototype.getPosition=function(t){return isNaN(t)&&(t=0),{x:this.start.x+(this.distance.x-this.indicatorSize.x)*t,y:this.start.y+(this.distance.y-this.indicatorSize.y)*t}},i.prototype.getValue=function(i,n){return t="horizontal"===this.orientation?(i-this.start.x)/this.distance.x:(n-this.start.y)/this.distance.y,Math.max(0,Math.min(1,t))},i.prototype.position=function(t,i){var n=this.getPosition(i);t.x=n.x,t.y=n.y},i.prototype.setIndicatorSize=function(t,i){this.indicatorSize={x:t,y:i}},i}));
@@ -34,5 +35,5 @@ define("CatLab/FakeWebremote/Models/User",[],(function(){return function(t){var
 define("CatLab/FakeWebremote/Models/Control",[],(function(){return function(t,n){var i,e,r=0,s={},o=t,c=[];this.id=t,this.pushed=function(){return 0===r},this.scale=function(){return r},this.update=function(t){r>0&&0==t&&this.trigger("click"),r=t},this.getLabel=function(){return'<span class="control-label '+e+'">'+o+"</span>"},this.setStaticLabel=function(t,n){return o=t,e=n,this},this.setLabel=function(i,e){return n.emit("button:label",{id:t,label:i}),this},this.click=function(t){return this.on("click",t),this},this.on=function(t,n){return void 0===s[t]&&(s[t]=[]),s[t].push(n),this},this.trigger=function(t){var n=[];if(void 0!==s[t])for(i=0;i<s[t].length;i++)n.push(s[t][i]);for(i=0;i<n.length;i++)try{n[i]()}catch(t){console.log(t)}return this},this.off=function(t){return s[t]=[],this},this.clearEvents=function(){return s={},this},this.addDomElement=function(t){var n=this,i=[];return i.push(t.addEventListener("click",(function(){n.trigger("click")}))),c.push({element:t,listeners:i}),this},this.clearDomElements=function(){for(var t=0;t<c.length;t++)for(var n=0;n<c[t].listeners.length;n++)c[t].element.removeEventListener("click",c[t].listeners[n]);return c=[],this},this.isLocalAuthentication=function(){return!1},this.log=function(t){n.log("["+this.id+"] "+t)}}}));
 define("CatLab/FakeWebremote/Models/ControlUser",["CatLab/FakeWebremote/Models/User","CatLab/FakeWebremote/Models/Control"],(function(t,o){var e=function(t){this.initialize(t)};return(e.prototype=t).setWebcontrol=function(t){this.Webcontrol=t},e.prototype.initialize=function(t){this.controls={},this.currentView=null,this.color="orange",this.colorName="orange",this.tmpid=null,this.active=!1,this.userdata=t,this.profiledata={},this.access_token=null},e.prototype.clearControls=function(){if(null!=this.currentView)for(var t=this.Webcontrol.getViewLabels(this.currentView),o=0;o<t.length;o++)this.control(t[o].id).setStaticLabel(t[o].label,"mobile")},e.prototype.clearEvents=function(){for(this.tmpid in this.controls)this.controls.hasOwnProperty(this.tmpid)&&this.controls[this.tmpid].clearEvents()},e.prototype.trigger=function(t,o){"button:down"==t?this.control(o.id).update(1):"button:up"==t?this.control(o.id).update(0):"user:login"==t?this.login(o):"user:logout"==t&&this.logout(o)},e.prototype.emit=function(t,o){return this.Webcontrol._playerEmit(this,t,o),!0},e.prototype.control=function(t){return void 0===this.controls[t]&&(this.controls[t]=new o(t,this)),this.controls[t]},e.prototype.getId=function(){return this.userdata.id},e.prototype.getName=function(){return"User "+this.getId()},e.prototype.getType=function(){return"mobile"},e.prototype.getIcon=function(){return"fa fa-mobile-phone"},e.prototype.login=function(t){var o=this;this.access_token=t.access_token,this.Webcontrol.getOAuthClient((function(t){t.profile(o.access_token,(function(t){o.profiledata=t.user}))}))},e.prototype.getData=function(){return this.profiledata},e.prototype.logout=function(t){this.profiledata=null,this.access_token=null},e.prototype.setColor=function(t,o){this.color=t,this.colorName=o,this.emit("color:set",{color:t,name:o})},e.prototype.getColor=function(){return this.color},e.prototype.getColorName=function(){return this.colorName},e.prototype.isActive=function(){return this.active},e.prototype.toggleActive=function(){this.active=!this.active,this.setLabel()},e.prototype.setActive=function(t){this.active=t,this.setLabel()},e.prototype.setLabel=function(){1==this.active?this.control("join-game").setLabel("LEAVE"):this.control("join-game").setLabel("JOIN")},e.prototype.setView=function(t){this.currentView=t,this.clearControls(),this.emit("view:set",{id:t})},e.prototype.setUserData=function(t,o){console.log("Setting user data: ",t,o)},e.prototype.isLocalAuthentication=function(){return!0},e.prototype.log=function(t){console.log("[u:"+this.getId()+"] "+t)},e}));
 define("CatLab/FakeWebremote/Models/KeyboardUser",["CatLab/FakeWebremote/Models/ControlUser"],(function(e){var t=function(e){void 0===e&&(e=[{id:"up",label:"↑",key:38},{id:"down",label:"↓",key:40},{id:"right",label:"→",key:39},{id:"left",label:"←",key:37},{id:"a",label:"A",key:65},{id:"b",label:"B",key:66},{id:"x",label:"X",key:88},{id:"y",label:"Y",key:89},{id:"join-game",label:"SPACE",key:32},{id:"start-game",label:"ENTER",key:13}]),this.keys=e,this.initialize({id:"keyboard"});var t,n=this,i=0;function o(o){for(i=0;i<e.length;i++)if(e[i].key==o)return t=n.control(e[i].id);return null}document.addEventListener("keydown",(function(e){(t=o(e.keyCode))&&t.update(1)})),document.addEventListener("keyup",(function(e){(t=o(e.keyCode))&&t.update(0)})),this.clearControls=function(){for(var t=0;t<e.length;t++)this.control(e[t].id).setStaticLabel(e[t].label,"keyboard")},this.getType=function(){return"keyboard"},this.getIcon=function(){return"fa fa-keyboard-o"},this.setView=function(e){return this.clearControls(),this},this.emit=function(e,t){return!1},this.isLocalAuthentication=function(){return!1},this.clearControls()};return(t.prototype=new e).constructor=t,t}));
-define("CatLab/Easelbone/FrontController",["CatLab/Easelbone/Utilities/Loader","CatLab/Easelbone/Views/LoadingView","CatLab/Easelbone/Views/Root","CatLab/Easelbone/Views/Base","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Views/Navigatable","CatLab/Easelbone/Controls/Slider","CatLab/Easelbone/Controls/Checkbox","CatLab/Easelbone/Controls/Button","CatLab/Easelbone/Controls/Selectbox","CatLab/Easelbone/Controls/ScrollBar","CatLab/Easelbone/Controls/ScrollArea","CatLab/Easelbone/Controls/List","CatLab/Easelbone/Controls/FloatContainer","CatLab/Easelbone/Controls/GridFill","CatLab/Easelbone/EaselJS/DisplayObjects/BigText","CatLab/Easelbone/EaselJS/DisplayObjects/EmojiText","CatLab/Easelbone/EaselJS/DisplayObjects/Placeholder","CatLab/Easelbone/EaselJS/DisplayObjects/Background","CatLab/Easelbone/EaselJS/Filters/ColorSwapFilter","CatLab/Easelbone/EaselJS/DisabledButtonHelper","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/FakeWebremote/Models/KeyboardUser"],(function(e,a,l,o,t,s,b,i,r,n,C,E,L,c,d,S,p,F,B,u,w,x,y,g){return{initialize:function(){},setProperties:function(e){x.set(e)},Views:{Root:l,Base:o,Layer:t,Navigatable:s,Loading:a},Controls:{Slider:b,Checkbox:i,Button:r,Selectbox:n,ScrollBar:C,ScrollArea:E,List:L,FloatContainer:c,GridFill:d},EaselJS:{BigText:S,EmojiText:p,Placeholder:F,Fill:B,DisabledButtonHelper:w,Filters:{ColorSwapFilter:u}},FakeWebremote:{KeyboardUser:g},Loader:e,Helpers:{MovieClipHelper:y}}}));
+define("CatLab/Easelbone/FrontController",["CatLab/Easelbone/Utilities/Loader","CatLab/Easelbone/Views/LoadingView","CatLab/Easelbone/Views/Root","CatLab/Easelbone/Views/Base","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Views/Navigatable","CatLab/Easelbone/Controls/Slider","CatLab/Easelbone/Controls/Checkbox","CatLab/Easelbone/Controls/Button","CatLab/Easelbone/Controls/Selectbox","CatLab/Easelbone/Controls/ScrollBar","CatLab/Easelbone/Controls/ScrollArea","CatLab/Easelbone/Controls/List","CatLab/Easelbone/Controls/FloatContainer","CatLab/Easelbone/Controls/GridFill","CatLab/Easelbone/EaselJS/DisplayObjects/BigText","CatLab/Easelbone/EaselJS/DisplayObjects/EmojiText","CatLab/Easelbone/EaselJS/DisplayObjects/Placeholder","CatLab/Easelbone/EaselJS/DisplayObjects/Background","CatLab/Easelbone/EaselJS/Filters/ColorSwapFilter","CatLab/Easelbone/EaselJS/DisabledButtonHelper","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/FakeWebremote/Models/KeyboardUser","CatLab/Easelbone/EaselJS/Pinner"],(function(e,a,o,l,t,s,n,b,i,r,C,E,L,p,c,S,d,u,F,B,w,x,y,J,g){return{initialize:function(){},setProperties:function(e){x.set(e)},Views:{Root:o,Base:l,Layer:t,Navigatable:s,Loading:a},Controls:{Slider:n,Checkbox:b,Button:i,Selectbox:r,ScrollBar:C,ScrollArea:E,List:L,FloatContainer:p,GridFill:c},EaselJS:{BigText:S,EmojiText:d,Placeholder:u,Fill:F,DisabledButtonHelper:w,Filters:{ColorSwapFilter:B}},pinToTop:function(e){return g.pin(e)},unpinFromTop:function(e){return g.unpin(e)},FakeWebremote:{KeyboardUser:J},Loader:e,Helpers:{MovieClipHelper:y}}}));
 define("easelbone",["CatLab/Easelbone/FrontController"],(function(e){return e}));
diff --git a/package.json b/package.json
index b2b9ff7..b8f0092 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "bump" : "grunt bump",
     "bump:minor" : "grunt bump:minor",
     "smoke": "node tools/smoke-test.js",
-    "test:baseline": "node tools/baseline-test.js"
+    "test:baseline": "node tools/baseline-test.js",
+    "test:pin": "node tools/pin-test.js"
   }
 }
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
new file mode 100644
index 0000000..2048f50
--- /dev/null
+++ b/tools/fixtures/pin-baseline.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <title>Pinner baseline fixture</title>
+    <style>body { margin: 0; }</style>
+</head>
+<body>
+<canvas id="canvas" width="400" height="400"></canvas>
+<script src="/app/scripts/vendor/requirejs/require.js"></script>
+<script>
+    // Fixture for tools/pin-test.js.
+    //
+    // Layout (bottom -> top layer order):
+    //   layer 0 (main): black background
+    //   layer 1: RED anchor box (50x50) at (100,100); a GREEN child box is
+    //            added to it, then pinned.
+    //   layer 2: a full-canvas BLUE occluder (simulates the smiley layer).
+    //   pin layer (layer 3): the GREEN box is reparented here by pinToTop.
+    //
+    // If pinning works, the GREEN box paints on TOP of the BLUE occluder at
+    // the anchor's position. Moving the anchor moves the GREEN box.
+    //
+    // window.__ready flips true after first paint.
+    // window.__moveAnchor(dx,dy) shifts the anchor and repaints.
+    require.config({ baseUrl: '/app/scripts/' });
+    require(['main'], function () {
+        require([
+            'easeljs',
+            'CatLab/Easelbone/Views/Root',
+            'CatLab/Easelbone/FrontController'
+        ], function (createjs, RootView, easelbone) {
+            // FrontController returns the easelbone namespace object (the same
+            // object the built bundle exposes as `easelbone`), including
+            // pinToTop / unpinFromTop.
+
+            var root = new RootView({ canvas: document.getElementById('canvas') });
+
+            // layer 1: anchor + green child
+            var anchorLayer = root.nextLayer('anchor');
+            var anchor = new createjs.Container();
+            anchor.x = 100; anchor.y = 100;
+            anchor.setBounds(0, 0, 50, 50);
+            var red = new createjs.Shape();
+            red.graphics.beginFill('#ff0000').drawRect(0, 0, 50, 50);
+            anchor.addChild(red);
+
+            var green = new createjs.Shape();
+            green.graphics.beginFill('#00ff00').drawRect(0, 0, 50, 50);
+            anchor.addChild(green);
+            anchorLayer.container.addChild(anchor);
+
+            // layer 2: full blue occluder
+            var occLayer = root.nextLayer('occluder');
+            var blue = new createjs.Shape();
+            blue.graphics.beginFill('#0000ff').drawRect(0, 0, 400, 400);
+            occLayer.container.addChild(blue);
+
+            // pin layer: above occluder
+            var pinLayer = root.nextLayer('pin');
+            root.setPinContainer(pinLayer.container);
+
+            // main layer background (layer 0)
+            var bg = new createjs.Shape();
+            bg.graphics.beginFill('#000').drawRect(0, 0, 400, 400);
+            root.getLayer('main').container.addChild(bg);
+
+            easelbone.pinToTop(green);
+
+            window.__moveAnchor = function (dx, dy) {
+                anchor.x += dx; anchor.y += dy;
+                root.render();
+            };
+
+            root.render();
+            window.__ready = true;
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/tools/pin-test.js b/tools/pin-test.js
new file mode 100644
index 0000000..8fe4c2e
--- /dev/null
+++ b/tools/pin-test.js
@@ -0,0 +1,62 @@
+/**
+ * Behavioral test for Pinner (pinToTop).
+ *
+ * Renders tools/fixtures/pin-baseline.html headlessly and checks:
+ *  - the pinned GREEN box paints ON TOP of the BLUE occluder at the anchor
+ *  - moving the anchor moves the pinned box with it
+ *
+ * Serves the repository root itself; no external server needed.
+ * Usage: node tools/pin-test.js [port]
+ */
+var spawn = require('child_process').spawn;
+var chromium = require('playwright').chromium;
+
+var FIXTURE = 'tools/fixtures/pin-baseline.html';
+var PORT = parseInt(process.argv[2], 10) || 8125;
+
+function pixel(page, x, y) {
+    return page.evaluate(function (p) {
+        var ctx = document.getElementById('canvas').getContext('2d');
+        var d = ctx.getImageData(p.x, p.y, 1, 1).data;
+        return [d[0], d[1], d[2]];
+    }, { x: x, y: y });
+}
+
+function isGreen(rgb) { return rgb[1] > 150 && rgb[0] < 100 && rgb[2] < 100; }
+
+async function main() {
+    var server = spawn('node', ['node_modules/http-server/bin/http-server', '.', '-p', String(PORT), '-c-1'], { stdio: 'ignore' });
+    await new Promise(function (r) { setTimeout(r, 1500); });
+    var browser = await chromium.launch();
+    var failures = [];
+    try {
+        var page = await browser.newPage();
+        var errors = [];
+        page.on('pageerror', function (e) { errors.push(e.message); });
+        page.on('console', function (m) { if (m.type() === 'error') errors.push(m.text()); });
+        await page.goto('http://localhost:' + PORT + '/' + FIXTURE, { waitUntil: 'load', timeout: 30000 });
+        await page.waitForFunction('window.__ready === true', { timeout: 10000 });
+
+        // Anchor at (100,100), box 50x50 -> center (125,125) should be GREEN
+        // (pinned box on top of the blue occluder).
+        var center = await pixel(page, 125, 125);
+        if (!isGreen(center)) { failures.push('expected GREEN at (125,125), got ' + center); }
+
+        // Move anchor +100,+0 -> old center now blue, new center green.
+        await page.evaluate('window.__moveAnchor(100, 0)');
+        await page.waitForTimeout(200);
+        var oldSpot = await pixel(page, 125, 125);
+        var newSpot = await pixel(page, 225, 125);
+        if (isGreen(oldSpot)) { failures.push('expected GREEN to have LEFT (125,125), still green'); }
+        if (!isGreen(newSpot)) { failures.push('expected GREEN at moved (225,125), got ' + newSpot); }
+
+        if (errors.length) { failures.push('page errors: ' + errors.join('; ')); }
+        await page.close();
+    } finally {
+        await browser.close();
+        server.kill();
+    }
+    if (failures.length) { console.error('FAIL\n' + failures.join('\n')); process.exit(1); }
+    console.log('PASS');
+}
+main();

From 977b350b64c31e9f2f58e78cdf4a0b1f90540b83 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 15:04:40 +0200
Subject: [PATCH 2/7] fix(pinner): idempotent re-pin, dirty invalidation,
 regression tests

pin() previously re-derived the anchor from obj.parent, which is wrong
for an already-pinned object (parent is by then the pin container),
causing a leaked never-torn-down record plus redundant per-frame
matrix work on every re-pin of the same instance. Guard pin() to no-op
when the object is already tracked.

Also mark RootView dirty on successful pin/unpin via DirtyFlag, since
reparenting/removing a child doesn't itself trigger a repaint under
dirtyRendering: true.

Extends the pin-baseline fixture/test with re-pin-replace,
idempotent-re-pin, and anchor-removed auto-teardown coverage; the
idempotent case reproduces FAIL against the pre-fix pin() (2 tracked
records instead of 1) and passes after the fix.
---
 .../CatLab/Easelbone/EaselJS/Pinner.js        | 32 ++++++++++++-
 dist/scripts/easelbone.js                     |  2 +-
 tools/fixtures/pin-baseline.html              | 46 +++++++++++++++++++
 tools/pin-test.js                             | 31 +++++++++++++
 4 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
index 61122d4..308694d 100644
--- a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -1,6 +1,6 @@
 define(
-    ['easeljs'],
-    function (createjs) {
+    ['easeljs', 'CatLab/Easelbone/Utilities/DirtyFlag'],
+    function (createjs, DirtyFlag) {
 
         'use strict';
 
@@ -49,6 +49,15 @@ define(
                     return;
                 }
 
+                // Idempotent: a second pin() on an object that's already
+                // pinned must not re-derive the anchor from obj.parent, since
+                // that's now the pin container, not the original anchor --
+                // which would orphan the real record (wrong key for
+                // _removeByAnchor) and push a bogus, never-torn-down one.
+                if (Pinner._isPinned(stage, obj)) {
+                    return;
+                }
+
                 var anchor = obj.parent;
                 if (!anchor) {
                     return;
@@ -73,6 +82,11 @@ define(
 
                 // Immediate sync: correctly placed even without a running tick.
                 Pinner._syncRecord(stage, record);
+
+                // Reparenting doesn't itself mark the RootView dirty; under
+                // dirtyRendering:true this ensures the pin paints next frame
+                // instead of waiting for an unrelated event or the heartbeat.
+                DirtyFlag.invalidate();
             },
 
             unpin: function (obj) {
@@ -85,11 +99,25 @@ define(
                     if (records[i].obj === obj) {
                         Pinner._restore(records[i]);
                         records.splice(i, 1);
+                        DirtyFlag.invalidate();
                         return;
                     }
                 }
             },
 
+            _isPinned: function (stage, obj) {
+                var records = stage._pinnedElements;
+                if (!records) {
+                    return false;
+                }
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === obj) {
+                        return true;
+                    }
+                }
+                return false;
+            },
+
             sync: function (stage) {
                 var records = stage._pinnedElements;
                 if (!records || records.length === 0) {
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 90bc0b3..47a56ce 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,7 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/EaselJS/Pinner",["easeljs"],(function(e){"use strict";var n={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(r){var t=r.getStage();if(t){var o=r.parent;if(o){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(t),n._removeByAnchor(t,o);var a={obj:r,anchor:o,localMatrix:r.getMatrix(),origRegX:r.regX,origRegY:r.regY};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(t).addChild(r),t._pinnedElements.push(a),n._syncRecord(t,a)}}else{var i=function(){r.off("added",i),n.pin(r)};r.on("added",i)}},unpin:function(e){var r=e.getStage(),t=r&&r._pinnedElements;if(t)for(var o=0;o<t.length;o++)if(t[o].obj===e)return n._restore(t[o]),void t.splice(o,1)},sync:function(e){var r=e._pinnedElements;if(!r||0===r.length)return!1;for(var t=r.length-1;t>=0;t--){var o=r[t];o.anchor.getStage&&o.anchor.getStage()===e?n._syncRecord(e,o):(n._restore(o),r.splice(t,1))}return r.length>0},_removeByAnchor:function(e,r){for(var t=e._pinnedElements,o=t.length-1;o>=0;o--)t[o].anchor===r&&(n._restore(t[o]),t.splice(o,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.obj.regX=e.origRegX,e.obj.regY=e.origRegY},_syncRecord:function(e,r){var t=r.obj,o=t.parent;if(o){var a=r.anchor.getConcatenatedMatrix().appendMatrix(r.localMatrix),i=o.getConcatenatedMatrix().invert().appendMatrix(a).decompose(n._props);t.x=i.x,t.y=i.y,t.scaleX=i.scaleX,t.scaleY=i.scaleY,t.rotation=i.rotation,t.skewX=i.skewX,t.skewY=i.skewY,t.regX=0,t.regY=0}}};return n}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o={obj:t,anchor:a,localMatrix:t.getMatrix(),origRegX:t.regX,origRegY:t.regY};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(t),i._pinnedElements.push(o),r._syncRecord(i,o),n.invalidate()}}}else{var s=function(){t.off("added",s),r.pin(t)};t.on("added",s)}},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.obj.regX=e.origRegX,e.obj.regY=e.origRegY},_syncRecord:function(e,n){var t=n.obj,i=t.parent;if(i){var a=n.anchor.getConcatenatedMatrix().appendMatrix(n.localMatrix),o=i.getConcatenatedMatrix().invert().appendMatrix(a).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY,t.regX=0,t.regY=0}}};return r}));
 define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
index 2048f50..64a24b1 100644
--- a/tools/fixtures/pin-baseline.html
+++ b/tools/fixtures/pin-baseline.html
@@ -22,6 +22,12 @@
     //
     // window.__ready flips true after first paint.
     // window.__moveAnchor(dx,dy) shifts the anchor and repaints.
+    // window.__rePinNewBox() pins a NEW green box to the SAME anchor
+    //   (simulates a re-render that regenerates the pinned content).
+    // window.__pinAgain() calls pinToTop again on the CURRENTLY pinned box
+    //   (idempotent re-pin of the same instance).
+    // window.__pinnedCount() returns stage._pinnedElements.length.
+    // window.__removeAnchor() removes the anchor from its layer (auto-teardown).
     require.config({ baseUrl: '/app/scripts/' });
     require(['main'], function () {
         require([
@@ -45,6 +51,7 @@
             anchor.addChild(red);
 
             var green = new createjs.Shape();
+            green.__id = 1;
             green.graphics.beginFill('#00ff00').drawRect(0, 0, 50, 50);
             anchor.addChild(green);
             anchorLayer.container.addChild(anchor);
@@ -65,12 +72,51 @@
             root.getLayer('main').container.addChild(bg);
 
             easelbone.pinToTop(green);
+            var currentPinned = green;
+            var nextId = 2;
 
             window.__moveAnchor = function (dx, dy) {
                 anchor.x += dx; anchor.y += dy;
                 root.render();
             };
 
+            // Simulates a re-render that regenerates the pinned content: a
+            // brand-new object instance pinned to the SAME anchor. Should
+            // replace (not stack on top of) the previously pinned box.
+            window.__rePinNewBox = function () {
+                var box = new createjs.Shape();
+                box.__id = nextId++;
+                box.graphics.beginFill('#00ff00').drawRect(0, 0, 50, 50);
+                anchor.addChild(box);
+                easelbone.pinToTop(box);
+                currentPinned = box;
+                root.render();
+                return box.__id;
+            };
+
+            // Calls pinToTop again on the object that's already pinned
+            // (same instance) -- must be a no-op, not a second record.
+            window.__pinAgain = function () {
+                easelbone.pinToTop(currentPinned);
+                root.render();
+            };
+
+            window.__pinnedCount = function () {
+                return root.stage._pinnedElements ? root.stage._pinnedElements.length : 0;
+            };
+
+            window.__pinnedRecordId = function () {
+                var records = root.stage._pinnedElements;
+                return (records && records.length) ? records[0].obj.__id : null;
+            };
+
+            // Removes the anchor from the stage entirely; sync() should
+            // auto-teardown the pin on the next render.
+            window.__removeAnchor = function () {
+                anchorLayer.container.removeChild(anchor);
+                root.render();
+            };
+
             root.render();
             window.__ready = true;
         });
diff --git a/tools/pin-test.js b/tools/pin-test.js
index 8fe4c2e..4508d28 100644
--- a/tools/pin-test.js
+++ b/tools/pin-test.js
@@ -50,6 +50,37 @@ async function main() {
         if (isGreen(oldSpot)) { failures.push('expected GREEN to have LEFT (125,125), still green'); }
         if (!isGreen(newSpot)) { failures.push('expected GREEN at moved (225,125), got ' + newSpot); }
 
+        // Anchor is now at (200,100), center (225,125).
+
+        // Re-pin replace: a NEW object instance pinned to the SAME anchor
+        // must replace the old pinned record (no stacking/leak) and render
+        // on top at the anchor.
+        var newId = await page.evaluate('window.__rePinNewBox()');
+        var countAfterRepin = await page.evaluate('window.__pinnedCount()');
+        var recordIdAfterRepin = await page.evaluate('window.__pinnedRecordId()');
+        var repinSpot = await pixel(page, 225, 125);
+        if (countAfterRepin !== 1) { failures.push('re-pin replace: expected 1 tracked record, got ' + countAfterRepin); }
+        if (recordIdAfterRepin !== newId) { failures.push('re-pin replace: expected tracked record to be the NEW box (id ' + newId + '), got ' + recordIdAfterRepin); }
+        if (!isGreen(repinSpot)) { failures.push('re-pin replace: expected GREEN at (225,125), got ' + repinSpot); }
+
+        // Idempotent re-pin: calling pinToTop twice on the SAME
+        // already-pinned object must not create a second record.
+        await page.evaluate('window.__pinAgain()');
+        await page.evaluate('window.__pinAgain()');
+        var countAfterIdempotent = await page.evaluate('window.__pinnedCount()');
+        var idempotentSpot = await pixel(page, 225, 125);
+        if (countAfterIdempotent !== 1) { failures.push('idempotent re-pin: expected 1 tracked record, got ' + countAfterIdempotent); }
+        if (!isGreen(idempotentSpot)) { failures.push('idempotent re-pin: expected GREEN to still render at (225,125), got ' + idempotentSpot); }
+
+        // Auto-teardown: removing the anchor from the stage must drop the
+        // pin on the next render (no more paint, no tracked record).
+        await page.evaluate('window.__removeAnchor()');
+        await page.waitForTimeout(200);
+        var countAfterRemoveAnchor = await page.evaluate('window.__pinnedCount()');
+        var teardownSpot = await pixel(page, 225, 125);
+        if (countAfterRemoveAnchor !== 0) { failures.push('auto-teardown: expected 0 tracked records, got ' + countAfterRemoveAnchor); }
+        if (isGreen(teardownSpot)) { failures.push('auto-teardown: expected GREEN to be gone at (225,125), still green'); }
+
         if (errors.length) { failures.push('page errors: ' + errors.join('; ')); }
         await page.close();
     } finally {

From 0e893a530322811939982a88722d9eb90417b408 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 16:08:03 +0200
Subject: [PATCH 3/7] fix(pinner): wrap pinned objects so bounds-sizing Fills
 render at full size

pinToTop reparented the pinned obj directly into the shared pin
container and rewrote its transform. That broke Fill/Background
objects (e.g. QR codes), which size themselves via
parent.getBounds() -- the plain pin container has no bounds, so the
Fill fell back to a 100x100 default and rendered tiny in the
top-left of its placeholder.

Fix: reparent obj into a per-pin wrapper Container instead. The
wrapper carries the anchor's bounds and is transformed to the
anchor's global position; obj itself (and its own transform/regX/
regY) is left untouched. This reproduces the anchor as obj's parent
exactly (same bounds + same global transform), so Fills size
correctly and non-Fill objects render identically to before.

Record shape is now { obj, anchor, wrapper }. _restore detaches the
wrapper and reattaches obj to its original anchor (if still on
stage), which also makes explicit unpin() put the object back where
it came from instead of leaving it stranded with regX/regY reset.

Added a regression assertion in tools/pin-test.js (via a new
window.__wrapperBounds() fixture hook) proving the wrapper carries
the anchor's [50,50] bounds -- this fails against the pre-fix code
(no wrapper existed) and passes after.
---
 .../CatLab/Easelbone/EaselJS/Pinner.js        | 60 +++++++++----------
 dist/scripts/easelbone.js                     |  2 +-
 tools/fixtures/pin-baseline.html              | 13 ++++
 tools/pin-test.js                             | 10 ++++
 4 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
index 308694d..6ccb9e7 100644
--- a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -69,15 +69,12 @@ define(
                 // re-rendered QR (removeAllChildren + regenerate) never stacks.
                 Pinner._removeByAnchor(stage, anchor);
 
-                var record = {
-                    obj: obj,
-                    anchor: anchor,
-                    localMatrix: obj.getMatrix(),
-                    origRegX: obj.regX,
-                    origRegY: obj.regY
-                };
-
-                ensureContainer(stage).addChild(obj); // reparents out of anchor
+                var wrapper = new createjs.Container();
+                var record = { obj: obj, anchor: anchor, wrapper: wrapper };
+
+                ensureContainer(stage).addChild(wrapper);
+                wrapper.addChild(obj); // reparents obj out of anchor; obj's own transform/regX/regY untouched
+
                 stage._pinnedElements.push(record);
 
                 // Immediate sync: correctly placed even without a running tick.
@@ -150,39 +147,40 @@ define(
                 if (record.obj.parent) {
                     record.obj.parent.removeChild(record.obj);
                 }
-                record.obj.regX = record.origRegX;
-                record.obj.regY = record.origRegY;
+                if (record.wrapper.parent) {
+                    record.wrapper.parent.removeChild(record.wrapper);
+                }
+                if (record.anchor && record.anchor.getStage && record.anchor.getStage()) {
+                    record.anchor.addChild(record.obj);
+                }
             },
 
             _syncRecord: function (stage, record) {
-                var obj = record.obj;
-                var container = obj.parent;
+                var wrapper = record.wrapper;
+                var container = wrapper.parent;
                 if (!container) {
                     return;
                 }
 
-                // desired global matrix = anchorConcatenated * capturedLocal
-                var desired = record.anchor.getConcatenatedMatrix()
-                    .appendMatrix(record.localMatrix);
+                // Carry the anchor's bounds so bounds-sizing children (e.g. Fill) size correctly.
+                var bounds = record.anchor.getBounds();
+                if (bounds) {
+                    wrapper.setBounds(0, 0, bounds.width, bounds.height);
+                }
 
-                // Express in the pin container's local space (do not assume the
-                // pin container sits at identity):
-                //   local = containerConcatenated^-1 * desired
+                // Place the wrapper in the anchor's coordinate space:
+                //   wrapperLocal = pinContainerConcatenated^-1 * anchorConcatenated
                 var local = container.getConcatenatedMatrix().invert()
-                    .appendMatrix(desired);
+                    .appendMatrix(record.anchor.getConcatenatedMatrix());
 
                 var props = local.decompose(Pinner._props);
-                obj.x = props.x;
-                obj.y = props.y;
-                obj.scaleX = props.scaleX;
-                obj.scaleY = props.scaleY;
-                obj.rotation = props.rotation;
-                obj.skewX = props.skewX;
-                obj.skewY = props.skewY;
-                // The captured localMatrix already bakes in the original regX/regY
-                // as translation, so the pinned copy must carry none of its own.
-                obj.regX = 0;
-                obj.regY = 0;
+                wrapper.x = props.x;
+                wrapper.y = props.y;
+                wrapper.scaleX = props.scaleX;
+                wrapper.scaleY = props.scaleY;
+                wrapper.rotation = props.rotation;
+                wrapper.skewX = props.skewX;
+                wrapper.skewY = props.skewY;
             }
         };
 
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 47a56ce..f2c90aa 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,7 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o={obj:t,anchor:a,localMatrix:t.getMatrix(),origRegX:t.regX,origRegY:t.regY};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(t),i._pinnedElements.push(o),r._syncRecord(i,o),n.invalidate()}}}else{var s=function(){t.off("added",s),r.pin(t)};t.on("added",s)}},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.obj.regX=e.origRegX,e.obj.regY=e.origRegY},_syncRecord:function(e,n){var t=n.obj,i=t.parent;if(i){var a=n.anchor.getConcatenatedMatrix().appendMatrix(n.localMatrix),o=i.getConcatenatedMatrix().invert().appendMatrix(a).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY,t.regX=0,t.regY=0}}};return r}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(t){var a=t.getStage();if(a){if(!r._isPinned(a,t)){var i=t.parent;if(i){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(a),r._removeByAnchor(a,i);var o=new e.Container,s={obj:t,anchor:i,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(a).addChild(o),o.addChild(t),a._pinnedElements.push(s),r._syncRecord(a,s),n.invalidate()}}}else{var d=function(){t.off("added",d),r.pin(t)};t.on("added",d)}},unpin:function(e){var t=e.getStage(),a=t&&t._pinnedElements;if(a)for(var i=0;i<a.length;i++)if(a[i].obj===e)return r._restore(a[i]),a.splice(i,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var a=n[t];a.anchor.getStage&&a.anchor.getStage()===e?r._syncRecord(e,a):(r._restore(a),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,a=t.length-1;a>=0;a--)t[a].anchor===n&&(r._restore(t[a]),t.splice(a,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper,a=t.parent;if(a){var i=n.anchor.getBounds();i&&t.setBounds(0,0,i.width,i.height);var o=a.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
 define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
index 64a24b1..b93ec71 100644
--- a/tools/fixtures/pin-baseline.html
+++ b/tools/fixtures/pin-baseline.html
@@ -110,6 +110,19 @@
                 return (records && records.length) ? records[0].obj.__id : null;
             };
 
+            // Returns [width, height] of the pinned record's wrapper bounds,
+            // or null. Proves the wrapper carries the anchor's bounds (so a
+            // bounds-sizing child, e.g. a Fill, would size to the anchor's
+            // dimensions rather than falling back to a 100x100 default).
+            window.__wrapperBounds = function () {
+                var records = root.stage._pinnedElements;
+                if (!records || !records.length || !records[0].wrapper) {
+                    return null;
+                }
+                var b = records[0].wrapper.getBounds();
+                return b ? [b.width, b.height] : null;
+            };
+
             // Removes the anchor from the stage entirely; sync() should
             // auto-teardown the pin on the next render.
             window.__removeAnchor = function () {
diff --git a/tools/pin-test.js b/tools/pin-test.js
index 4508d28..53ae2a4 100644
--- a/tools/pin-test.js
+++ b/tools/pin-test.js
@@ -42,6 +42,16 @@ async function main() {
         var center = await pixel(page, 125, 125);
         if (!isGreen(center)) { failures.push('expected GREEN at (125,125), got ' + center); }
 
+        // Wrapper must carry the anchor's bounds (50x50) so a bounds-sizing
+        // child (e.g. a Fill/QR) sizes itself to the anchor's box instead of
+        // falling back to a 100x100 default. This requires a per-pin wrapper
+        // container -- it fails against pre-fix code that reparents obj
+        // directly into the (bounds-less) pin container.
+        var wrapperBounds = await page.evaluate('window.__wrapperBounds()');
+        if (!wrapperBounds || wrapperBounds[0] !== 50 || wrapperBounds[1] !== 50) {
+            failures.push('expected wrapper bounds [50,50], got ' + JSON.stringify(wrapperBounds));
+        }
+
         // Move anchor +100,+0 -> old center now blue, new center green.
         await page.evaluate('window.__moveAnchor(100, 0)');
         await page.waitForTimeout(200);

From 377f1c763247be54104aae7ba945a68ca493b041 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 16:36:21 +0200
Subject: [PATCH 4/7] fix(pinner): retry deferred pin on ticker until object is
 on a stage

pin() relied on obj's 'added' event when the object wasn't on a stage yet,
but the object is typically addChild'd to its (still-detached) placeholder
BEFORE pinToTop is called -- so 'added' already fired and never fires again
when the placeholder is later attached, silently dropping the pin. Retry on
the ticker until getStage() is truthy. Adds a regression test.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../CatLab/Easelbone/EaselJS/Pinner.js        | 29 +++++++++++++++----
 dist/scripts/easelbone.js                     |  2 +-
 tools/fixtures/pin-baseline.html              | 28 ++++++++++++++++++
 tools/pin-test.js                             | 13 +++++++++
 4 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
index 6ccb9e7..e658a1f 100644
--- a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -37,15 +37,32 @@ define(
                 stage._pinContainer = container;
             },
 
+            // Retry pinning on each tick until obj is attached to a stage.
+            // Gives up after ~5s (300 ticks) so a never-attached object can't
+            // leak a permanent retry loop.
+            _deferPin: function (obj, attempt) {
+                if (obj.getStage()) {
+                    Pinner.pin(obj);
+                    return;
+                }
+                if (attempt >= 300) {
+                    return;
+                }
+                createjs.Ticker.on('tick', function () {
+                    Pinner._deferPin(obj, attempt + 1);
+                }, null, true);
+            },
+
             pin: function (obj) {
                 var stage = obj.getStage();
                 if (!stage) {
-                    // Not on a stage yet; defer until it is added.
-                    var deferred = function () {
-                        obj.off('added', deferred);
-                        Pinner.pin(obj);
-                    };
-                    obj.on('added', deferred);
+                    // Not on a stage yet. We can't rely on obj's 'added'
+                    // event here: obj is typically addChild'd to its
+                    // placeholder BEFORE pinToTop is called, so 'added' has
+                    // already fired and will NOT fire again when an ancestor
+                    // (the placeholder) is later attached to the stage. Retry
+                    // on the ticker until obj is actually on a stage.
+                    Pinner._deferPin(obj, 0);
                     return;
                 }
 
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index f2c90aa..7f090cc 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,7 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},pin:function(t){var a=t.getStage();if(a){if(!r._isPinned(a,t)){var i=t.parent;if(i){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(a),r._removeByAnchor(a,i);var o=new e.Container,s={obj:t,anchor:i,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(a).addChild(o),o.addChild(t),a._pinnedElements.push(s),r._syncRecord(a,s),n.invalidate()}}}else{var d=function(){t.off("added",d),r.pin(t)};t.on("added",d)}},unpin:function(e){var t=e.getStage(),a=t&&t._pinnedElements;if(a)for(var i=0;i<a.length;i++)if(a[i].obj===e)return r._restore(a[i]),a.splice(i,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var a=n[t];a.anchor.getStage&&a.anchor.getStage()===e?r._syncRecord(e,a):(r._restore(a),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,a=t.length-1;a>=0;a--)t[a].anchor===n&&(r._restore(t[a]),t.splice(a,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper,a=t.parent;if(a){var i=n.anchor.getBounds();i&&t.setBounds(0,0,i.width,i.height);var o=a.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},_deferPin:function(n,t){n.getStage()?r.pin(n):t>=300||e.Ticker.on("tick",(function(){r._deferPin(n,t+1)}),null,!0)},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o=new e.Container,s={obj:t,anchor:a,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(o),o.addChild(t),i._pinnedElements.push(s),r._syncRecord(i,s),n.invalidate()}}}else r._deferPin(t,0)},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper,i=t.parent;if(i){var a=n.anchor.getBounds();a&&t.setBounds(0,0,a.width,a.height);var o=i.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
 define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
index b93ec71..726e318 100644
--- a/tools/fixtures/pin-baseline.html
+++ b/tools/fixtures/pin-baseline.html
@@ -130,6 +130,34 @@
                 root.render();
             };
 
+            // Deferral: pin an object whose anchor is NOT yet on the stage.
+            // The object is addChild'd to its anchor (so its 'added' event has
+            // already fired) BEFORE pinToTop is called and BEFORE the anchor is
+            // attached to a layer. pinToTop must retry on the ticker and only
+            // complete once the anchor is on the stage.
+            var deferAnchor = null, deferBox = null;
+            window.__deferSetup = function () {
+                deferAnchor = new createjs.Container();
+                deferAnchor.x = 250; deferAnchor.y = 250;
+                deferAnchor.setBounds(0, 0, 40, 40);
+                deferBox = new createjs.Shape();
+                deferBox.__id = 999;
+                deferBox.graphics.beginFill('#00ff00').drawRect(0, 0, 40, 40);
+                deferAnchor.addChild(deferBox); // 'added' fires here, before pinToTop
+                easelbone.pinToTop(deferBox);   // deferBox.getStage() is null -> must defer
+            };
+            window.__deferAttach = function () {
+                anchorLayer.container.addChild(deferAnchor); // now on the stage
+                root.render();
+            };
+            window.__deferBoxPinned = function () {
+                var records = root.stage._pinnedElements || [];
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === deferBox) { return true; }
+                }
+                return false;
+            };
+
             root.render();
             window.__ready = true;
         });
diff --git a/tools/pin-test.js b/tools/pin-test.js
index 53ae2a4..c6d43c9 100644
--- a/tools/pin-test.js
+++ b/tools/pin-test.js
@@ -91,6 +91,19 @@ async function main() {
         if (countAfterRemoveAnchor !== 0) { failures.push('auto-teardown: expected 0 tracked records, got ' + countAfterRemoveAnchor); }
         if (isGreen(teardownSpot)) { failures.push('auto-teardown: expected GREEN to be gone at (225,125), still green'); }
 
+        // Deferral: pinning an object whose anchor isn't on the stage yet must
+        // retry and complete once the anchor is attached. Regression guard for
+        // the bug where pin() relied on obj's 'added' event, which had already
+        // fired before pinToTop was called and never fired again. Runs after
+        // auto-teardown so its extra record doesn't skew the count above.
+        await page.evaluate('window.__deferSetup()');
+        var pinnedBeforeAttach = await page.evaluate('window.__deferBoxPinned()');
+        if (pinnedBeforeAttach) { failures.push('deferred pin: box should NOT be pinned before its anchor is on the stage'); }
+        await page.evaluate('window.__deferAttach()');
+        await page.waitForTimeout(500);
+        var pinnedAfterAttach = await page.evaluate('window.__deferBoxPinned()');
+        if (!pinnedAfterAttach) { failures.push('deferred pin: box should be pinned after its anchor is attached to the stage'); }
+
         if (errors.length) { failures.push('page errors: ' + errors.join('; ')); }
         await page.close();
     } finally {

From 08aa571356ead2a42f31abc7ce23c5dc5c302434 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 16:48:53 +0200
Subject: [PATCH 5/7] feat(pinner): honor stage._pinsHidden to hide pinned
 overlays

Lets callers hide all pinned overlays (e.g. the portal QR) while a modal is
open over them, restoring on close. Adds a regression test.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/scripts/CatLab/Easelbone/EaselJS/Pinner.js | 5 +++++
 dist/scripts/easelbone.js                      | 2 +-
 tools/fixtures/pin-baseline.html               | 7 +++++++
 tools/pin-test.js                              | 8 ++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
index e658a1f..c9e817c 100644
--- a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -174,6 +174,11 @@ define(
 
             _syncRecord: function (stage, record) {
                 var wrapper = record.wrapper;
+
+                // Callers can hide all pinned overlays (e.g. while a modal is
+                // open over the pinned QR) by setting stage._pinsHidden.
+                wrapper.visible = !stage._pinsHidden;
+
                 var container = wrapper.parent;
                 if (!container) {
                     return;
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 7f090cc..836c74d 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,7 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},_deferPin:function(n,t){n.getStage()?r.pin(n):t>=300||e.Ticker.on("tick",(function(){r._deferPin(n,t+1)}),null,!0)},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o=new e.Container,s={obj:t,anchor:a,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(o),o.addChild(t),i._pinnedElements.push(s),r._syncRecord(i,s),n.invalidate()}}}else r._deferPin(t,0)},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper,i=t.parent;if(i){var a=n.anchor.getBounds();a&&t.setBounds(0,0,a.width,a.height);var o=i.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},_deferPin:function(n,t){n.getStage()?r.pin(n):t>=300||e.Ticker.on("tick",(function(){r._deferPin(n,t+1)}),null,!0)},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o=new e.Container,s={obj:t,anchor:a,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(o),o.addChild(t),i._pinnedElements.push(s),r._syncRecord(i,s),n.invalidate()}}}else r._deferPin(t,0)},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper;t.visible=!e._pinsHidden;var i=t.parent;if(i){var a=n.anchor.getBounds();a&&t.setBounds(0,0,a.width,a.height);var o=i.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
 define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
index 726e318..e7b3bdd 100644
--- a/tools/fixtures/pin-baseline.html
+++ b/tools/fixtures/pin-baseline.html
@@ -80,6 +80,13 @@
                 root.render();
             };
 
+            // Suppression: hide/show all pinned overlays (e.g. while a modal is
+            // open) via the stage flag the Pinner honors.
+            window.__setPinsHidden = function (b) {
+                root.stage._pinsHidden = b;
+                root.render();
+            };
+
             // Simulates a re-render that regenerates the pinned content: a
             // brand-new object instance pinned to the SAME anchor. Should
             // replace (not stack on top of) the previously pinned box.
diff --git a/tools/pin-test.js b/tools/pin-test.js
index c6d43c9..4d6655f 100644
--- a/tools/pin-test.js
+++ b/tools/pin-test.js
@@ -47,6 +47,14 @@ async function main() {
         // falling back to a 100x100 default. This requires a per-pin wrapper
         // container -- it fails against pre-fix code that reparents obj
         // directly into the (bounds-less) pin container.
+        // Suppression: hiding pins makes the pinned wrapper invisible; restoring shows it.
+        await page.evaluate('window.__setPinsHidden(true)');
+        var hiddenSpot = await pixel(page, 125, 125);
+        if (isGreen(hiddenSpot)) { failures.push('pins hidden: expected GREEN hidden at (125,125), still green'); }
+        await page.evaluate('window.__setPinsHidden(false)');
+        var shownSpot = await pixel(page, 125, 125);
+        if (!isGreen(shownSpot)) { failures.push('pins shown: expected GREEN to return at (125,125), got ' + shownSpot); }
+
         var wrapperBounds = await page.evaluate('window.__wrapperBounds()');
         if (!wrapperBounds || wrapperBounds[0] !== 50 || wrapperBounds[1] !== 50) {
             failures.push('expected wrapper bounds [50,50], got ' + JSON.stringify(wrapperBounds));

From 406b8cd85a87b6ae83a987bcfa3193f1ad821c46 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 16:59:48 +0200
Subject: [PATCH 6/7] refactor(pinner): use .stage property instead of
 deprecated getStage()

DisplayObject.getStage() is deprecated and logs a warning on every call;
the per-tick sync/teardown checks spammed thousands of warnings. Use the
non-deprecated .stage getter.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/scripts/CatLab/Easelbone/EaselJS/Pinner.js | 12 ++++++------
 dist/scripts/easelbone.js                      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
index c9e817c..4bb8c7f 100644
--- a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -17,7 +17,7 @@ define(
         }
 
         function ensureContainer(stage) {
-            if (stage._pinContainer && stage._pinContainer.getStage() === stage) {
+            if (stage._pinContainer && stage._pinContainer.stage === stage) {
                 return stage._pinContainer;
             }
             // Fallback for contexts with no designated pin layer (e.g. a
@@ -41,7 +41,7 @@ define(
             // Gives up after ~5s (300 ticks) so a never-attached object can't
             // leak a permanent retry loop.
             _deferPin: function (obj, attempt) {
-                if (obj.getStage()) {
+                if (obj.stage) {
                     Pinner.pin(obj);
                     return;
                 }
@@ -54,7 +54,7 @@ define(
             },
 
             pin: function (obj) {
-                var stage = obj.getStage();
+                var stage = obj.stage;
                 if (!stage) {
                     // Not on a stage yet. We can't rely on obj's 'added'
                     // event here: obj is typically addChild'd to its
@@ -104,7 +104,7 @@ define(
             },
 
             unpin: function (obj) {
-                var stage = obj.getStage();
+                var stage = obj.stage;
                 var records = stage && stage._pinnedElements;
                 if (!records) {
                     return;
@@ -140,7 +140,7 @@ define(
                 for (var i = records.length - 1; i >= 0; i--) {
                     var record = records[i];
                     // Auto-teardown: anchor removed from the stage.
-                    if (!record.anchor.getStage || record.anchor.getStage() !== stage) {
+                    if (record.anchor.stage !== stage) {
                         Pinner._restore(record);
                         records.splice(i, 1);
                         continue;
@@ -167,7 +167,7 @@ define(
                 if (record.wrapper.parent) {
                     record.wrapper.parent.removeChild(record.wrapper);
                 }
-                if (record.anchor && record.anchor.getStage && record.anchor.getStage()) {
+                if (record.anchor && record.anchor.stage) {
                     record.anchor.addChild(record.obj);
                 }
             },
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 836c74d..0325f6e 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,7 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(e,n){"use strict";var r={_props:{},setContainer:function(e,n){e._pinContainer=n},_deferPin:function(n,t){n.getStage()?r.pin(n):t>=300||e.Ticker.on("tick",(function(){r._deferPin(n,t+1)}),null,!0)},pin:function(t){var i=t.getStage();if(i){if(!r._isPinned(i,t)){var a=t.parent;if(a){!function(e){e._pinnedElements||(e._pinnedElements=[]),e._pinnedElements}(i),r._removeByAnchor(i,a);var o=new e.Container,s={obj:t,anchor:a,wrapper:o};(function(n){if(n._pinContainer&&n._pinContainer.getStage()===n)return n._pinContainer;var r=new e.Container;return n.addChild(r),n._pinContainer=r,r})(i).addChild(o),o.addChild(t),i._pinnedElements.push(s),r._syncRecord(i,s),n.invalidate()}}}else r._deferPin(t,0)},unpin:function(e){var t=e.getStage(),i=t&&t._pinnedElements;if(i)for(var a=0;a<i.length;a++)if(i[a].obj===e)return r._restore(i[a]),i.splice(a,1),void n.invalidate()},_isPinned:function(e,n){var r=e._pinnedElements;if(!r)return!1;for(var t=0;t<r.length;t++)if(r[t].obj===n)return!0;return!1},sync:function(e){var n=e._pinnedElements;if(!n||0===n.length)return!1;for(var t=n.length-1;t>=0;t--){var i=n[t];i.anchor.getStage&&i.anchor.getStage()===e?r._syncRecord(e,i):(r._restore(i),n.splice(t,1))}return n.length>0},_removeByAnchor:function(e,n){for(var t=e._pinnedElements,i=t.length-1;i>=0;i--)t[i].anchor===n&&(r._restore(t[i]),t.splice(i,1))},_restore:function(e){e.obj.parent&&e.obj.parent.removeChild(e.obj),e.wrapper.parent&&e.wrapper.parent.removeChild(e.wrapper),e.anchor&&e.anchor.getStage&&e.anchor.getStage()&&e.anchor.addChild(e.obj)},_syncRecord:function(e,n){var t=n.wrapper;t.visible=!e._pinsHidden;var i=t.parent;if(i){var a=n.anchor.getBounds();a&&t.setBounds(0,0,a.width,a.height);var o=i.getConcatenatedMatrix().invert().appendMatrix(n.anchor.getConcatenatedMatrix()).decompose(r._props);t.x=o.x,t.y=o.y,t.scaleX=o.scaleX,t.scaleY=o.scaleY,t.rotation=o.rotation,t.skewX=o.skewX,t.skewY=o.skewY}}};return r}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(n,e){"use strict";var r={_props:{},setContainer:function(n,e){n._pinContainer=e},_deferPin:function(e,i){e.stage?r.pin(e):i>=300||n.Ticker.on("tick",(function(){r._deferPin(e,i+1)}),null,!0)},pin:function(i){var t=i.stage;if(t){if(!r._isPinned(t,i)){var a=i.parent;if(a){!function(n){n._pinnedElements||(n._pinnedElements=[]),n._pinnedElements}(t),r._removeByAnchor(t,a);var o=new n.Container,s={obj:i,anchor:a,wrapper:o};(function(e){if(e._pinContainer&&e._pinContainer.stage===e)return e._pinContainer;var r=new n.Container;return e.addChild(r),e._pinContainer=r,r})(t).addChild(o),o.addChild(i),t._pinnedElements.push(s),r._syncRecord(t,s),e.invalidate()}}}else r._deferPin(i,0)},unpin:function(n){var i=n.stage,t=i&&i._pinnedElements;if(t)for(var a=0;a<t.length;a++)if(t[a].obj===n)return r._restore(t[a]),t.splice(a,1),void e.invalidate()},_isPinned:function(n,e){var r=n._pinnedElements;if(!r)return!1;for(var i=0;i<r.length;i++)if(r[i].obj===e)return!0;return!1},sync:function(n){var e=n._pinnedElements;if(!e||0===e.length)return!1;for(var i=e.length-1;i>=0;i--){var t=e[i];t.anchor.stage===n?r._syncRecord(n,t):(r._restore(t),e.splice(i,1))}return e.length>0},_removeByAnchor:function(n,e){for(var i=n._pinnedElements,t=i.length-1;t>=0;t--)i[t].anchor===e&&(r._restore(i[t]),i.splice(t,1))},_restore:function(n){n.obj.parent&&n.obj.parent.removeChild(n.obj),n.wrapper.parent&&n.wrapper.parent.removeChild(n.wrapper),n.anchor&&n.anchor.stage&&n.anchor.addChild(n.obj)},_syncRecord:function(n,e){var i=e.wrapper;i.visible=!n._pinsHidden;var t=i.parent;if(t){var a=e.anchor.getBounds();a&&i.setBounds(0,0,a.width,a.height);var o=t.getConcatenatedMatrix().invert().appendMatrix(e.anchor.getConcatenatedMatrix()).decompose(r._props);i.x=o.x,i.y=o.y,i.scaleX=o.scaleX,i.scaleY=o.scaleY,i.rotation=o.rotation,i.skewX=o.skewX,i.skewY=o.skewY}}};return r}));
 define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));

From 77f6a5da17d3cc998e571ec9a2fd197e84b18bb1 Mon Sep 17 00:00:00 2001
From: Thijs Van der Schaeghe <thijs@catlab.be>
Date: Tue, 14 Jul 2026 17:20:22 +0200
Subject: [PATCH 7/7] Release v1.2.8

Adds pinToTop (element-level pin-to-top overlays) + stage._pinsHidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 package-lock.json |  4 ++--
 package.json      | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23be03a..e192115 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easelbone",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "easelbone",
-      "version": "1.2.7",
+      "version": "1.2.8",
       "dependencies": {
         "backbone": "^1.*",
         "catlab-easeljs": "^1.0.2",
diff --git a/package.json b/package.json
index b8f0092..1353656 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easelbone",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "main": "dist/scripts/easelbone.js",
   "author": "CatLab Interactive",
   "devDependencies": {
@@ -30,10 +30,10 @@
   },
   "scripts": {
     "update": "node_modules/.bin/bower update",
-    "start" : "grunt",
-    "build" : "grunt",
-    "bump" : "grunt bump",
-    "bump:minor" : "grunt bump:minor",
+    "start": "grunt",
+    "build": "grunt",
+    "bump": "grunt bump",
+    "bump:minor": "grunt bump:minor",
     "smoke": "node tools/smoke-test.js",
     "test:baseline": "node tools/baseline-test.js",
     "test:pin": "node tools/pin-test.js"