1190 - Tapestry 3.0 - Zoomable interface

[legendword]

Changes

For testing: Edit node levels in the node modal, above the node title.

• Drop shadow on nodes and lines.
• Darkened node color on lower levels.
• Zoom in using one of the following methods: Ctrl + Scroll (Windows & macOS), Cmd + Scroll (macOS), pinch scroll (macOS trackpad & mobile), double click.
• Nodes become further apart from each other while increasing in size when zooming in.
• Pan view by dragging on empty space. The user should not be able to pan too far away from the Tapestry --- the precise amount they can pan to each side is the border of the Tapestry nodes plus a margin of the radius of the currently largest node.
• Nodes are hidden based on scale and depth. Depth determines how many levels down the user can see. As the user zooms in, the "current level" will be changed and more nodes will be visible based on the depth. The nodes at the visible boundary is styled as a "grandchild" node, similar to how it used to show.
• The depth slider now functions to change the depth (how many levels down the user can see). The minimum depth is 1 and the maximum depth is (maxLevel - 1).
• Buttons on a node are hidden if node is too small (mainly for authoring).
• Click on a node to zoom in on that node such that the node is the default size (*default size = size of Level 1 node at initial scale) and also pan the view towards that node. If the user has manually zoomed in, then clicking on a node will zoom in further than the normal amount.
• Minimap is shown on the bottom right and can be toggled on / off. It shows the nodes (with their colors), links, and the current view position. Dragging the view box or clicking anywhere on the minimap will pan the view to the desired position.
• The minimap also displays depth cues including node size and shadow.
• (1249 - Tapestry 3.0 - Use halo to indicate selected node rather than size change #1250) Adds a solid blue halo around the selected node.
  • The halo is "outside" the progress bar, but "inside" the outline from a draft/review node. The halo should fade in, and animate smoothly when the node radius changes, at the same rate as the node.
  • The halo has a width of 10% of the node radius.

Bug fixes & other changes:

• Fixed a bug where depth slider is hidden for a user that is not logged in.
• Removed event listeners on $root when component is about to be destroyed to avoid redundant event listeners that are added via this.$root.$on.

Screenshot

Issue Linkage

Closes #1190
Closes #1263

PR Dependency

Depends on: #1220

Automated Testing

TBD

[Bitajkr]

• The mini-map isn't always visible, such that I need to scroll down to see the mini-map. Whereas, the mini-map should be visible to the user during the entire time when they're navigating the tapestry. https://test.tapestry-tool.com/1190-zoomable-interface/tapestry/testing-zoomable-interface-september-12-2022/#/nodes/16?scale=6.77&x=2677.5767&y=6487.0388

Screen.Recording.2022-09-12.at.3.22.47.PM.mov

[Bitajkr]

• When I tried adding the 6th level (as seen in the image below), the node was positioned in a very random, far position. https://test.tapestry-tool.com/1190-zoomable-interface/tapestry/testing-zoomable-interface-september-12-2022/#/nodes/16?scale=6.77&x=2677.5767&y=6487.0388

[Bitajkr]

• It's quite hard to see the progress bar for some of the deeper nodes as the colour for the progress bar and background is the same. https://test.tapestry-tool.com/1190-zoomable-interface/tapestry/testing-zoomable-interface-september-12-2022/#/nodes/16?scale=6.77&x=2677.5767&y=6487.0388

[Bitajkr]

• My level 7 node has no shadows no matter how much I zoom in: https://test.tapestry-tool.com/1190-zoomable-interface/tapestry/testing-zoomable-interface-september-12-2022/#/nodes/16?scale=6.77&x=2677.5767&y=6487.0388

[cypress]

---

Test summary

99 • 0 • 0 • 0 • 1

---

Run details

Project	tapestry-wp
Status	Passed
Commit	72e173f
Started	Jan 4, 2023 9:57 PM
Ended	Jan 4, 2023 10:02 PM
Duration	04:29 💡
OS	Linux Ubuntu - 22.04
Browser	Chrome 108

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/comments.spec.js		1
1	Comments > should not be able to see the Comments section for a draft node

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard