github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[7.3] [Canvas] Fixes fit to window scale calculation (#41294) (#41385)

Browse source 
* Fixed calculation for fit to window zoom scale

* Fixed ts errors
This commit is contained in:
Catherine Liu 2019-07-17 11:11:38 -07:00 • committed by GitHub
parent 90a0c0ce41
commit c04cf23fe8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
View file

@ -11,6 +11,8 @@ import { Dispatch } from 'redux';
import { getZoomScale } from '../../../state/selectors/app';
import {
getWorkpadBoundingBox,
getWorkpadWidth,
getWorkpadHeight,
// @ts-ignore unconverted local file
} from '../../../state/selectors/workpad';
// @ts-ignore unconverted local file
@ -22,10 +24,14 @@ interface State {
transient: { zoomScale: number };
}
const mapStateToProps = (state: State) => ({
zoomScale: getZoomScale(state),
boundingBox: getWorkpadBoundingBox(state),
});
const mapStateToProps = (state: State) => {
return {
zoomScale: getZoomScale(state),
boundingBox: getWorkpadBoundingBox(state),
workpadWidth: getWorkpadWidth(state),
workpadHeight: getWorkpadHeight(state),
};
};
const mapDispatchToProps = (dispatch: Dispatch) => ({
setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),

28
x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
View file

@ -30,6 +30,14 @@ export interface Props {
* minimum bounding box for the workpad
*/
boundingBox: { left: number; right: number; top: number; bottom: number };
/**
* width of the workpad page
*/
workpadWidth: number;
/**
* height of the workpad page
*/
workpadHeight: number;
/**
* handler to set the workpad zoom level to a specific value
*/
@ -63,23 +71,29 @@ export class WorkpadZoom extends PureComponent<Props> {
top: PropTypes.number.isRequired,
bottom: PropTypes.number.isRequired,
}),
workpadWidth: PropTypes.number.isRequired,
workpadHeight: PropTypes.number.isRequired,
};
_fitToWindow = () => {
const { boundingBox, setZoomScale } = this.props;
const { boundingBox, setZoomScale, workpadWidth, workpadHeight } = this.props;
const canvasLayoutContent = document.querySelector(
`#${CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR}`
) as HTMLElement;
const layoutWidth = canvasLayoutContent.clientWidth;
const layoutHeight = canvasLayoutContent.clientHeight;
const offsetLeft = boundingBox.left;
const offsetTop = boundingBox.top;
const offsetRight = boundingBox.right - workpadWidth;
const offsetBottom = boundingBox.bottom - workpadHeight;
const boundingWidth =
Math.max(layoutWidth, boundingBox.right) -
Math.min(0, boundingBox.left) +
WORKPAD_CANVAS_BUFFER * 2;
workpadWidth +
Math.max(Math.abs(offsetLeft), Math.abs(offsetRight)) * 2 +
WORKPAD_CANVAS_BUFFER;
const boundingHeight =
Math.max(layoutHeight, boundingBox.bottom) -
Math.min(0, boundingBox.top) +
WORKPAD_CANVAS_BUFFER * 2;
workpadHeight +
Math.max(Math.abs(offsetTop), Math.abs(offsetBottom)) * 2 +
WORKPAD_CANVAS_BUFFER;
const xScale = layoutWidth / boundingWidth;
const yScale = layoutHeight / boundingHeight;