Canvas: Add Pan and Zoom (#76705)

* Canvas: Add Zoom

* Scale selecto components based on zoom state

* Fix pan by reverting to 3.1.0 for zoom-pan

* Update to latest library that fixes pan regression

* Add mini map to canvas pan zoom

* Fix selecto and anchors on hover

* Update naming to be more clear

* Switch back to contentComponent

* Apply transformScale to drag and resize

* Update connection source and target scaling

* Add option to display mini map

* Update yarn lock

* Revert "Update yarn lock"

This reverts commit 3d1dd65d57.

* Set yarn lock to main

* Revert "Set yarn lock to main"

This reverts commit 64bc50557e.

* Update to Yarn 4

* Add react-zoom-pan-pinch

* Update react-zoom-pan checksum

* Revert changes to json files

* Remove last line of api merged

* Remove last lines of all impacted jsons

* Update home json

* Update coordinate calc function to include scale

* Fix types in coordinate calc function

* Fix util calculation for transform

* Fix arrow anchor shift behavior

* Fix scale offset when adding elements during zoom

* Fix drag of selected group during zoom

* Add feature flag for canvas pan zoom

* Revert "Add feature flag for canvas pan zoom"

This reverts commit b026e31d8d.

* Regenerate feature flag after merge

* Apply feature flag to enable pan zoom wrappers

* Add mini map toggle behind feature flag

* Simplify minimap behavior

* Update feature flag registry

* Set minimap to false by default

* fix gen-cue

* Set toggles gen to main

Add blank line to toggle gen csv

* Add canvas pan zoom to csv

* Remove old comment

* Change ref parameter to be more descriptive

* Rename visibleFun to be more descriptive

* Consolidate transformScale transformRef in util

* Remove non-null assertion on connection parentRect

* Consolidate parentRect null coalescing into object

* Remove minimap and change toggle

* Add controls inline help for pan and zoom

* Clean up mouse events

* Pull scale out of ref and isolate transform

* Remove transform ref from scene div

* Fix context menu visible behavior

* Fix connections and update util functions

* Move transform component instance to util

* fix backend test

* minor updates

* Clean up connections / fix minor bug where offset of arrow wasn't being calculated correctly

* missed connection code cleanup

* cleanup scene code a bit more

* actually fix backend test

* move eslint disable line closer to actual issue

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

pkg/services/featuremgmt/registry.go

@@ -1178,6 +1178,14 @@ var (
 			Owner:           identityAccessTeam,
 			Created:         time.Date(2023, time.November, 8, 12, 0, 0, 0, time.UTC),
 		},
+		{
+			Name:         "canvasPanelPanZoom",
+			Description:  "Allow pan and zoom in canvas panel",
+			Stage:        FeatureStageExperimental,
+			FrontendOnly: true,
+			Owner:        grafanaDatavizSquad,
+			Created:      time.Date(2023, time.December, 27, 12, 0, 0, 0, time.UTC),
+		},
 		{
 			Name:         "logsInfiniteScrolling",
 			Description:  "Enables infinite scrolling for the Logs panel in Explore and Dashboards",

pkg/services/featuremgmt/toggles_gen.csv

@@ -139,6 +139,7 @@ dashboardScene,experimental,@grafana/dashboards-squad,2023-11-13,false,false,fal
 panelFilterVariable,experimental,@grafana/dashboards-squad,2023-11-03,false,false,false,true
 pdfTables,privatePreview,@grafana/sharing-squad,2023-11-06,false,false,false,false
 ssoSettingsApi,experimental,@grafana/identity-access-team,2023-11-08,true,false,false,false
+canvasPanelPanZoom,experimental,@grafana/dataviz-squad,2023-12-27,false,false,false,true
 logsInfiniteScrolling,experimental,@grafana/observability-logs,2023-11-09,false,false,false,true
 flameGraphItemCollapsing,experimental,@grafana/observability-traces-and-profiling,2023-11-09,false,false,false,true
 alertingDetailsViewV2,experimental,@grafana/alerting-squad,2023-11-09,false,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -567,6 +567,10 @@ const (
 	// Enables the SSO settings API
 	FlagSsoSettingsApi = "ssoSettingsApi"
 
+	// FlagCanvasPanelPanZoom
+	// Allow pan and zoom in canvas panel
+	FlagCanvasPanelPanZoom = "canvasPanelPanZoom"
+
 	// FlagLogsInfiniteScrolling
 	// Enables infinite scrolling for the Logs panel in Explore and Dashboards
 	FlagLogsInfiniteScrolling = "logsInfiniteScrolling"