mirror of https://github.com/grafana/grafana
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 commitpull/79949/head3d1dd65d57. * Set yarn lock to main * Revert "Set yarn lock to main" This reverts commit64bc50557e. * 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 commitb026e31d8d. * 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>
Drew Slobodnjak
2 years ago
committed by
GitHub
parent
c598306523
commit
2502fe4d19
|
@ -0,0 +1,37 @@ |
||||
import React from 'react'; |
||||
import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch'; |
||||
|
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
import { Scene } from './scene'; |
||||
|
||||
type SceneTransformWrapperProps = { |
||||
scene: Scene; |
||||
children: React.ReactNode; |
||||
}; |
||||
|
||||
export const SceneTransformWrapper = ({ scene, children: sceneDiv }: SceneTransformWrapperProps) => { |
||||
const onZoom = (zoomPanPinchRef: ReactZoomPanPinchRef) => { |
||||
const scale = zoomPanPinchRef.state.scale; |
||||
if (scene.moveable && scale > 0) { |
||||
scene.moveable.zoom = 1 / scale; |
||||
} |
||||
scene.scale = scale; |
||||
}; |
||||
|
||||
return ( |
||||
<TransformWrapper |
||||
doubleClick={{ mode: 'reset' }} |
||||
ref={scene.transformComponentRef} |
||||
onZoom={onZoom} |
||||
onTransformed={(_, state) => { |
||||
scene.scale = state.scale; |
||||
}} |
||||
limitToBounds={true} |
||||
disabled={!config.featureToggles.canvasPanelPanZoom || !scene.shouldPanZoom} |
||||
panning={{ allowLeftClickPan: false }} |
||||
> |
||||
<TransformComponent>{sceneDiv}</TransformComponent> |
||||
</TransformWrapper> |
||||
); |
||||
}; |
||||
@ -0,0 +1,57 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { StandardEditorProps, GrafanaTheme2 } from '@grafana/data'; |
||||
import { Alert, HorizontalGroup, Icon, VerticalGroup, useStyles2 } from '@grafana/ui'; |
||||
|
||||
const helpUrl = 'https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/'; |
||||
|
||||
export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, unknown>) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<> |
||||
<HorizontalGroup className={styles.hGroup}> |
||||
<Alert |
||||
title="Pan and zoom controls" |
||||
severity="info" |
||||
buttonContent={<Icon name="question-circle" size="xl" />} |
||||
className={styles.alert} |
||||
onRemove={() => { |
||||
const newWindow = window.open(helpUrl, '_blank', 'noopener,noreferrer'); |
||||
if (newWindow) { |
||||
newWindow.opener = null; |
||||
} |
||||
}} |
||||
> |
||||
<VerticalGroup> |
||||
<ul> |
||||
<li> |
||||
Pan: |
||||
<ul> |
||||
<li>Middle mouse</li> |
||||
<li>CTRL + right mouse</li> |
||||
</ul> |
||||
</li> |
||||
<li>Zoom: Scroll wheel</li> |
||||
<li>Reset: Double click</li> |
||||
</ul> |
||||
</VerticalGroup> |
||||
</Alert> |
||||
</HorizontalGroup> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
alert: css({ |
||||
'& div': { padding: '4px', alignItems: 'start' }, |
||||
marginBottom: '0px', |
||||
marginTop: '5px', |
||||
padding: '2px', |
||||
'ul > li': { marginLeft: '10px' }, |
||||
}), |
||||
hGroup: css({ |
||||
'& div': { width: '100%' }, |
||||
}), |
||||
}); |
||||
Loading…
Reference in new issue