improve zoom logic

[abrin]

we’re finding that the zoom in and zoom out logic isn’t working as expected, and that the buttons aren’t able to be initialized properly. Creating a story to try and illustrate this, and add some explicit properties on the zoom to report whether we can zoom in or out manually.

I also added some explicit properties to the zoom event and the scaleInformation to make it clear how to set buttons

[netlify[bot]]

✅ Deploy Preview for canvas-panel-storybook canceled.

Name	Link
🔨 Latest commit	41ef16c3a6273cf1f15e6a1e321852f259ef8567
🔍 Latest deploy log	https://app.netlify.com/sites/canvas-panel-storybook/deploys/6601746256eaf20008a37193

[netlify[bot]]

✅ Deploy Preview for iiif-canvas-panel-demos ready!

Name	Link
🔨 Latest commit	41ef16c3a6273cf1f15e6a1e321852f259ef8567
🔍 Latest deploy log	https://app.netlify.com/sites/iiif-canvas-panel-demos/deploys/66017462b5a1850008966246
😎 Deploy Preview	https://deploy-preview-243--iiif-canvas-panel-demos.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for iiif-canvas-panel ready!

Name	Link
🔨 Latest commit	41ef16c3a6273cf1f15e6a1e321852f259ef8567
🔍 Latest deploy log	https://app.netlify.com/sites/iiif-canvas-panel/deploys/660174cedeedbd00083733c3
😎 Deploy Preview	https://deploy-preview-243--iiif-canvas-panel.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 41ef16c3a6273cf1f15e6a1e321852f259ef8567:

Sandbox	Source
simple-vue	Configuration
vue-3-carousel	Configuration
external-stylesheet-sandbox	Configuration
example-sandbox	Configuration
custom-preset	Configuration
react-choices-example	Configuration
reacting-to-the-user	Configuration
external-annotation-pages	Configuration
virtual-annotation-pages	Configuration
loading-annotation-pages	Configuration
annotation-display-1	Configuration
annotation-display-2	Configuration
choice-example	Configuration
choice-react	Configuration
more-regions-1	Configuration
more-regions-2	Configuration
regions-1	Configuration
regions-2	Configuration
regions-3	Configuration
regions-5	Configuration
regions-6	Configuration
responsive-1	Configuration

[abrin]

I'll work with my team to test this a bit, but I think if this works, this leaves our open issues to just the rotation issue Dan was hitting with the Bayard album images embedded in the canvas!

[abrin]

I think the last thing here is making sure the readiness check is 100% done, I've seen it fire too early still...

[abrin]

@stephenwf , ok I think this is about ready -- pending any comments or recommendations you might have. I've added a 'worldReady' event that fires when _lastGoodScale is set to something that's <1 and not undefined. I've also cleaned up the story to try and make it a bit more useful when debugging (adding actions and more controls). I've also double-checked the events firing are unique. 🤞 this should get the zoom and readiness logic working so we can better bind events, my basic testing in the story seems to show so.

[abrin]

still not seeing the worldReady working 100% of the time, sometimes in storybook it's logging out detail: null in the event, and sometimes in our app when using this build it's firing with a scaleFactor of 1 by polling until we don't see it... but we can work around it anyone doesn't have ideas.

[abrin]

@stephenwf I've fixed a number of other small issues:

• I updated the content state loading for CanvasPanel to use a 'goto' to reflect that the 'target' approach broke changing canvases
• I found some cases with small images where the logic for zooming out wasn't working... I also started using a 'look-ahead' for the zoom out to see if we can better guess if zooming out will work or not.
• I adjusted the stories to be a bit more focused, and try and clean them up to make things easier to copy and adjust
• I added support for more events firing a zoom event to make sure that when a content-state is loaded, buttons can know to update
• I added guards around setContentStateText so we can set null or empty text without errors
• I'm still struggling with getting the logic for 'world-ready' to fire when the runtime logic is ready and get it seen in our app, I added a minor delay which seems to help ensure it only fires after the 'ready' fires... but also initially set it up on a way that doesn't really work in React. Instead I, binding to the first world resize event, which seems to be working

thanks for your patience here and help!

[stephenwf]

Thanks @abrin, I will have a look at this now. Are you happy for me to merge? The CodeSandbox is working again if you wanted to test the package. I can make a release too if required.

Also re: the world ready events - yes, these need looked at on the Atlas side for sure.

[abrin]

I'll run one last check and then let you know. I think we still have open questions on rotation and maybe one or two other things, but 🤞, we're getting close

[abrin]

we're good -- I'm seeing events firing, and can now bind other eventListeners to worldReady really logically.

[abrin]

@stephenwf if it's possible to merge this and give us an updated deploy! I think also -- I probably owe you some updates to the documentation on the zoom event logic and the world-ready event

[stephenwf]

@digirati/canvas-panel-web-components@1.0.61 published now 🎉 thanks again for these bug fixes and improvements!