@instructure/canvas-rce 5.12.1 → 5.12.2

package/lib/rce/plugins/shared/ImageCropper/Preview.js

@@ -1,148 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React, { useEffect, createRef } from 'react';
-import PropTypes from 'prop-types';
-import formatMessage from '../../../../format-message';
-import { ImageCropperSettingsPropTypes } from './propTypes';
-import { buildSvg } from './svg';
-import { PREVIEW_WIDTH, PREVIEW_HEIGHT, BACKGROUND_SQUARE_SIZE } from './constants';
-import { useMouseWheel } from './useMouseWheel';
-import { useKeyMouseTouchEvents } from './useKeyMouseEvents';
-import checkerboardStyle from '../CheckerboardStyling';
-import { View } from '@instructure/ui-view';
-/**
- * Remove the node contents and append the svg element.
- */
-
-function replaceSvg(svg, node) {
-  if (!node) return;
-
-  while (node.firstChild) {
-    node.removeChild(node.lastChild);
-  }
-
-  node.appendChild(svg);
-}
-
-function getTransformValue(_ref) {
-  let {
-    translateX,
-    translateY,
-    rotation,
-    scaleRatio
-  } = _ref;
-  const values = [];
-  if (translateX !== 0) values.push(`translateX(${translateX}px)`);
-  if (translateY !== 0) values.push(`translateY(${translateY}px)`);
-  if (rotation && rotation % 360 !== 0) values.push(`rotate(${rotation}deg)`);
-  if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);
-  return values.join(' ');
-}
-
-export const Preview = _ref2 => {
-  let {
-    image,
-    settings,
-    dispatch
-  } = _ref2;
-  const previewRef = /*#__PURE__*/createRef();
-  const shapeRef = /*#__PURE__*/createRef();
-  const imgRef = /*#__PURE__*/createRef();
-  const {
-    shape,
-    rotation,
-    scaleRatio,
-    translateX,
-    translateY
-  } = settings;
-  const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
-  const [tempTranslateX, tempTranslateY, onMouseDownCallback, onTouchStartCallback] = useKeyMouseTouchEvents(translateX, translateY, dispatch, imgRef);
-  useEffect(() => {
-    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  useEffect(() => {
-    const svg = buildSvg(shape);
-    replaceSvg(svg, shapeRef.current);
-  });
-  const transformValue = getTransformValue({
-    translateX: tempTranslateX,
-    translateY: tempTranslateY,
-    rotation,
-    scaleRatio: tempScaleRatio
-  });
-
-  function isSafariVersion15OrLesser() {
-    const match = /Version\/(\d+).+Safari/.exec(navigator.userAgent);
-    return match ? parseInt(match[1], 10) < 16 : false;
-  } // Clip is not supported in Safari until v16.
-  // It's needed here to prevent a strange screenreader
-  // behavior that makes the cropper look bad. 'hidden'
-  // suffices when clip is not available, although it's not perfect
-  // TODO: remove when Safari versions >= 16 are more commonplace
-
-
-  const overflow = isSafariVersion15OrLesser() ? 'hidden' : 'clip';
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      justifyContent: 'center',
-      overflow,
-      ...checkerboardStyle(BACKGROUND_SQUARE_SIZE)
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    tabIndex: 0,
-    id: "cropper-preview",
-    ref: previewRef,
-    height: PREVIEW_HEIGHT,
-    width: PREVIEW_WIDTH,
-    position: "relative",
-    focusPosition: "inset",
-    insetInlineStart: "0",
-    insetBlockStart: "0",
-    textAlign: "center",
-    shouldAnimateFocus: false,
-    onWheel: onWheelCallback
-  }, /*#__PURE__*/React.createElement("img", {
-    src: image,
-    ref: imgRef,
-    alt: formatMessage('Image to crop'),
-    style: {
-      height: '100%',
-      objectFit: 'contain',
-      textAlign: 'center',
-      transform: transformValue
-    },
-    onMouseDown: onMouseDownCallback,
-    onTouchStart: onTouchStartCallback
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "cropShapeContainer",
-    ref: shapeRef,
-    style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      pointerEvents: 'none'
-    }
-  })));
-};
-Preview.propTypes = {
-  image: PropTypes.string.isRequired,
-  settings: ImageCropperSettingsPropTypes.isRequired,
-  dispatch: PropTypes.func.isRequired
-};

package/lib/rce/plugins/shared/ImageCropper/constants.js

@@ -1,39 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-export const PREVIEW_BACKGROUND_COLOR = '#394B58';
-export const PREVIEW_WIDTH = 942;
-export const PREVIEW_HEIGHT = 350;
-export const SHAPE_CONTAINER_LENGTH = 350;
-export const GLUE_WIDTH = 296;
-export const MIN_SCALE_RATIO = 1.0;
-export const MAX_SCALE_RATIO = 2.0;
-export const BUTTON_SCALE_STEP = 0.1;
-export const WHEEL_SCALE_STEP = 0.005;
-export const WHEEL_EVENT_DELAY = 100;
-export const KEY_EVENT_DELAY = 200;
-export const KEY_EVENT_ACCELERATION = 3;
-export const BUTTON_ROTATION_DEGREES = 90;
-export const BACKGROUND_SQUARE_SIZE = 16;
-export const DEFAULT_CROPPER_SETTINGS = {
-  shape: 'square',
-  rotation: 0,
-  scaleRatio: MIN_SCALE_RATIO,
-  translateX: 0,
-  translateY: 0,
-  direction: 0
-};

package/lib/rce/plugins/shared/ImageCropper/controls/CustomNumberInput.js

@@ -1,83 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NumberInput } from '@instructure/ui-number-input';
-import { useDebouncedNumericValue } from './useDebouncedNumericValue';
-import formatMessage from '../../../../../format-message';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-export const CustomNumberInput = _ref => {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    placeholder,
-    onChange
-  } = _ref;
-  const [inputValue, digestCurrentValue, digestNewValue, hasError] = useDebouncedNumericValue({
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    onChange
-  });
-
-  const handleChange = (event, newValue) => digestNewValue(newValue.trim());
-
-  const handleBlur = () => digestCurrentValue();
-
-  const handleIncrement = () => onChange(processValueCallback(value + 1));
-
-  const handleDecrement = () => onChange(processValueCallback(value - 1));
-
-  const messages = hasError ? [{
-    text: formatMessage('Invalid entry.'),
-    type: 'error'
-  }] : [];
-  return /*#__PURE__*/React.createElement(NumberInput, {
-    value: inputValue,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onIncrement: handleIncrement,
-    onDecrement: handleDecrement,
-    placeholder: placeholder,
-    showArrows: false,
-    messages: messages,
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, placeholder),
-    interaction: "enabled",
-    width: "4.5rem"
-  });
-};
-CustomNumberInput.propTypes = {
-  value: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-  // Parses a raw string value and returns a number. Ex. "90º" -> 90
-  parseValueCallback: PropTypes.func,
-  // Processes a number and returns a handled number (for example thresholds). Ex. 370 -> 10
-  processValueCallback: PropTypes.func,
-  // Formats a number and returns a formatted string number. Ex. 90 -> "90º"
-  formatValueCallback: PropTypes.func,
-  placeholder: PropTypes.string
-};
-CustomNumberInput.defaultProps = {
-  parseValueCallback: value => value,
-  processValueCallback: value => value,
-  formatValueCallback: value => value,
-  placeholder: ''
-};

package/lib/rce/plugins/shared/ImageCropper/controls/ResetControls.js

@@ -1,38 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Flex } from '@instructure/ui-flex';
-import { Button } from '@instructure/ui-buttons';
-import { IconResetLine } from '@instructure/ui-icons';
-import formatMessage from '../../../../../format-message';
-export const ResetControls = _ref => {
-  let {
-    onReset
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
-    renderIcon: IconResetLine,
-    onClick: onReset
-  }, formatMessage('Reset')));
-};
-ResetControls.propTypes = {
-  onReset: PropTypes.func
-};
-ResetControls.defaultProps = {
-  onReset: () => {}
-};

package/lib/rce/plugins/shared/ImageCropper/controls/RotationControls.js

@@ -1,89 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { IconButton } from '@instructure/ui-buttons';
-import { IconRotateLeftLine, IconRotateRightLine } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { CustomNumberInput } from './CustomNumberInput';
-import { calculateRotation, getNearestRectAngle } from './utils';
-import { BUTTON_ROTATION_DEGREES } from '../constants';
-import formatMessage from '../../../../../format-message';
-
-const parseRotationText = value => {
-  // Matches a positive/negative integer/decimal followed by "º" symbol
-  const matches = value.match(/([-|+]?\d+(?:\.\d+)?)º?/);
-
-  if (!matches) {
-    return null;
-  }
-
-  const result = parseInt(matches[1], 10);
-
-  if (Number.isNaN(result)) {
-    return null;
-  }
-
-  return result;
-};
-
-const formatRotationText = value => `${value}º`;
-
-export const RotationControls = _ref => {
-  let {
-    rotation,
-    onChange
-  } = _ref;
-
-  const rotateLeftCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, true) - BUTTON_ROTATION_DEGREES));
-
-  const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
-
-  return /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 medium 0 0",
-    title: formatMessage('Rotation'),
-    role: "toolbar",
-    tabindex: -1
-  }, /*#__PURE__*/React.createElement(View, {
-    display: "inline-block",
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(CustomNumberInput, {
-    value: rotation,
-    parseValueCallback: parseRotationText,
-    formatValueCallback: formatRotationText,
-    processValueCallback: calculateRotation,
-    placeholder: formatMessage('Rotation'),
-    onChange: value => onChange(value)
-  })), /*#__PURE__*/React.createElement(IconButton, {
-    margin: "0 small 0 0",
-    onClick: rotateLeftCallback,
-    screenReaderLabel: formatMessage('Rotate image -90 degrees')
-  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null)), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: rotateRightCallback,
-    screenReaderLabel: formatMessage('Rotate image 90 degrees')
-  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null)));
-};
-RotationControls.propTypes = {
-  rotation: PropTypes.number,
-  onChange: PropTypes.func
-};
-RotationControls.defaultProps = {
-  rotation: 0,
-  onChange: () => {}
-};

package/lib/rce/plugins/shared/ImageCropper/controls/ShapeControls.js

@@ -1,82 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Flex } from '@instructure/ui-flex';
-import formatMessage from '../../../../../format-message';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { ZoomControls } from './ZoomControls';
-import { Shape } from '../shape';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-const SHAPE_OPTIONS = [{
-  id: Shape.Square,
-  label: formatMessage('Square')
-}, {
-  id: Shape.Circle,
-  label: formatMessage('Circle')
-}, {
-  id: Shape.Triangle,
-  label: formatMessage('Triangle')
-}, {
-  id: Shape.Diamond,
-  label: formatMessage('Diamond')
-}, {
-  id: Shape.Pentagon,
-  label: formatMessage('Pentagon')
-}, {
-  id: Shape.Hexagon,
-  label: formatMessage('Hexagon')
-}, {
-  id: Shape.Octagon,
-  label: formatMessage('Octagon')
-}, {
-  id: Shape.Star,
-  label: formatMessage('Star')
-}];
-export const ShapeControls = _ref => {
-  let {
-    shape,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 medium 0 0"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    isInline: true,
-    value: shape,
-    onChange: (event, _ref2) => {
-      let {
-        id
-      } = _ref2;
-      return onChange(id);
-    },
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Select crop shape')),
-    "data-testid": "shape-select-dropdown"
-  }, SHAPE_OPTIONS.map(option => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    key: option.id,
-    id: option.id,
-    value: option.id
-  }, option.label))));
-};
-ShapeControls.propTypes = {
-  shape: PropTypes.string,
-  onChange: PropTypes.func
-};
-ZoomControls.defaultProps = {
-  shape: 'square',
-  onChange: () => {}
-};

package/lib/rce/plugins/shared/ImageCropper/controls/ZoomControls.js

@@ -1,111 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import { IconButton } from '@instructure/ui-buttons';
-import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { calculateScaleRatio, calculateScalePercentage } from './utils';
-import round from '../../round';
-import { MAX_SCALE_RATIO, MIN_SCALE_RATIO, BUTTON_SCALE_STEP } from '../constants';
-import formatMessage from '../../../../../format-message';
-import PropTypes from 'prop-types';
-import { CustomNumberInput } from './CustomNumberInput';
-import { showFlashAlert } from '../../../../../common/FlashAlert';
-import { debounce } from '@instructure/debounce';
-
-const parseZoomText = value => {
-  // Matches a positive/negative integer/decimal followed by %" symbol
-  const matches = value.match(/([-|+]?\d+(?:\.\d+)?)%?/);
-
-  if (!matches) {
-    return null;
-  }
-
-  const result = parseInt(matches[1], 10);
-
-  if (Number.isNaN(result)) {
-    return null;
-  }
-
-  return result;
-};
-
-const formatZoomText = value => `${value}%`;
-
-const debouncedAlert = debounce(showFlashAlert, 1000);
-export const ZoomControls = _ref => {
-  let {
-    scaleRatio,
-    onChange
-  } = _ref;
-
-  const onZoomChange = value => {
-    const message = {
-      message: `${round(value * 100)}% Zoom`,
-      type: 'info',
-      srOnly: true
-    };
-    debouncedAlert(message);
-    onChange(value);
-  };
-
-  const zoomOutCallback = () => {
-    const newScaleRatio = calculateScaleRatio(scaleRatio - BUTTON_SCALE_STEP);
-    onZoomChange(newScaleRatio);
-  };
-
-  const zoomInCallback = () => {
-    const newScaleRatio = calculateScaleRatio(scaleRatio + BUTTON_SCALE_STEP);
-    onZoomChange(newScaleRatio);
-  };
-
-  return /*#__PURE__*/React.createElement(Flex.Item, {
-    title: formatMessage('Zoom'),
-    role: "toolbar",
-    tabindex: -1
-  }, /*#__PURE__*/React.createElement(View, {
-    display: "inline-block",
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(CustomNumberInput, {
-    value: round(scaleRatio * 100),
-    parseValueCallback: parseZoomText,
-    formatValueCallback: formatZoomText,
-    processValueCallback: calculateScalePercentage,
-    placeholder: formatMessage('Zoom'),
-    onChange: value => onZoomChange(round(value / 100))
-  })), /*#__PURE__*/React.createElement(IconButton, {
-    margin: "0 small 0 0",
-    onClick: zoomOutCallback,
-    interaction: scaleRatio > MIN_SCALE_RATIO ? 'enabled' : 'disabled',
-    screenReaderLabel: formatMessage('Zoom out image')
-  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null)), /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "zoom-in-button",
-    onClick: zoomInCallback,
-    interaction: scaleRatio < MAX_SCALE_RATIO ? 'enabled' : 'disabled',
-    screenReaderLabel: formatMessage('Zoom in image')
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
-};
-ZoomControls.propTypes = {
-  scaleRatio: PropTypes.number,
-  onChange: PropTypes.func
-};
-ZoomControls.defaultProps = {
-  scaleRatio: MIN_SCALE_RATIO,
-  onChange: () => {}
-};

package/lib/rce/plugins/shared/ImageCropper/controls/index.js

@@ -1,61 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React from 'react';
-import { Flex } from '@instructure/ui-flex';
-import { actions } from '../reducers/imageCropper';
-import { ZoomControls } from './ZoomControls';
-import { RotationControls } from './RotationControls';
-import { ShapeControls } from './ShapeControls';
-import { ResetControls } from './ResetControls';
-export const Controls = _ref => {
-  let {
-    settings,
-    dispatch
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex, {
-    id: "imageCropperControls",
-    direction: "row",
-    margin: "x-small",
-    alignItems: "start",
-    role: "group"
-  }, /*#__PURE__*/React.createElement(ShapeControls, {
-    shape: settings.shape,
-    onChange: shape => dispatch({
-      type: actions.SET_SHAPE,
-      payload: shape
-    })
-  }), /*#__PURE__*/React.createElement(RotationControls, {
-    rotation: settings.rotation,
-    onChange: rotation => dispatch({
-      type: actions.SET_ROTATION,
-      payload: rotation
-    })
-  }), /*#__PURE__*/React.createElement(ZoomControls, {
-    scaleRatio: settings.scaleRatio,
-    onChange: scaleRatio => dispatch({
-      type: actions.SET_SCALE_RATIO,
-      payload: scaleRatio
-    })
-  }), /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true
-  }), /*#__PURE__*/React.createElement(ResetControls, {
-    onReset: () => dispatch({
-      type: actions.RESET_SETTINGS
-    })
-  }));
-};