kepler.gl/src/components/dist/common/image-preview.js

kepler.gl is a webgl based application to visualize large scale location data in the browser

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _loadingSpinner = _interopRequireDefault(require("./loading-spinner"));
var _templateObject; // SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project
var StyledImagePreview = _styledComponents["default"].div.attrs({
  className: 'image-preview'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  padding: 30px;\n\n  .dimension,\n  .instruction {\n    padding: 8px 0px;\n  }\n\n  .preview-image {\n    background: #e2e2e2;\n    border-radius: 4px;\n    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.18);\n    width: 100%;\n    position: relative;\n  }\n\n  .preview-image-placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .preview-image-spinner {\n    position: absolute;\n    left: calc(50% - 25px);\n    top: calc(50% - 25px);\n  }\n\n  .preview-image--error {\n    font-size: 12px;\n    padding: 12px;\n    color: ", ";\n    text-align: center;\n  }\n"])), function (props) {
  return props.theme.errorColor;
});
/**
 * @param {object} props
 * @param {ExportImage} [props.exportImage]
 * @param {number} [props.width]
 * @param {boolean} [props.showDimension]
 */
var ImagePreview = function ImagePreview(_ref) {
  var exportImage = _ref.exportImage,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 400 : _ref$width,
    _ref$showDimension = _ref.showDimension,
    showDimension = _ref$showDimension === void 0 ? false : _ref$showDimension;
  var _ref2 = exportImage || {},
    error = _ref2.error,
    imageDataUri = _ref2.imageDataUri,
    processing = _ref2.processing,
    _ref2$imageSize = _ref2.imageSize,
    _ref2$imageSize2 = _ref2$imageSize === void 0 ? {} : _ref2$imageSize,
    _ref2$imageSize2$imag = _ref2$imageSize2.imageW,
    imageW = _ref2$imageSize2$imag === void 0 ? 0 : _ref2$imageSize2$imag,
    _ref2$imageSize2$imag2 = _ref2$imageSize2.imageH,
    imageH = _ref2$imageSize2$imag2 === void 0 ? 0 : _ref2$imageSize2$imag2;
  var imageStyle = {
    width: "".concat(width, "px"),
    height: "".concat(imageH / (imageW || 1) * width, "px")
  };
  return /*#__PURE__*/_react["default"].createElement(StyledImagePreview, null, showDimension ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "dimension"
  }, imageW, " pixel x ", imageH, " pixel") : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "preview-image",
    style: imageStyle
  }, processing ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "preview-image-spinner"
  }, /*#__PURE__*/_react["default"].createElement(_loadingSpinner["default"], null)) : error ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "preview-image--error"
  }, /*#__PURE__*/_react["default"].createElement("span", null, error.message || 'Generate map image failed!')) : /*#__PURE__*/_react["default"].createElement("img", {
    className: "preview-image-placeholder",
    src: imageDataUri
  })));
};
var _default = exports["default"] = ImagePreview;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9zdHlsZWRDb21wb25lbnRzIiwiX2xvYWRpbmdTcGlubmVyIiwiX3RlbXBsYXRlT2JqZWN0IiwiU3R5bGVkSW1hZ2VQcmV2aWV3Iiwic3R5bGVkIiwiZGl2IiwiYXR0cnMiLCJjbGFzc05hbWUiLCJfdGFnZ2VkVGVtcGxhdGVMaXRlcmFsMiIsInByb3BzIiwidGhlbWUiLCJlcnJvckNvbG9yIiwiSW1hZ2VQcmV2aWV3IiwiX3JlZiIsImV4cG9ydEltYWdlIiwiX3JlZiR3aWR0aCIsIndpZHRoIiwiX3JlZiRzaG93RGltZW5zaW9uIiwic2hvd0RpbWVuc2lvbiIsIl9yZWYyIiwiZXJyb3IiLCJpbWFnZURhdGFVcmkiLCJwcm9jZXNzaW5nIiwiX3JlZjIkaW1hZ2VTaXplIiwiaW1hZ2VTaXplIiwiX3JlZjIkaW1hZ2VTaXplMiIsIl9yZWYyJGltYWdlU2l6ZTIkaW1hZyIsImltYWdlVyIsIl9yZWYyJGltYWdlU2l6ZTIkaW1hZzIiLCJpbWFnZUgiLCJpbWFnZVN0eWxlIiwiY29uY2F0IiwiaGVpZ2h0IiwiY3JlYXRlRWxlbWVudCIsInN0eWxlIiwibWVzc2FnZSIsInNyYyIsIl9kZWZhdWx0IiwiZXhwb3J0cyJdLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21tb24vaW1hZ2UtcHJldmlldy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLy8gU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IE1JVFxuLy8gQ29weXJpZ2h0IGNvbnRyaWJ1dG9ycyB0byB0aGUga2VwbGVyLmdsIHByb2plY3RcblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IExvYWRpbmdTcGlubmVyIGZyb20gJy4vbG9hZGluZy1zcGlubmVyJztcbmltcG9ydCB7RXhwb3J0SW1hZ2V9IGZyb20gJ0BrZXBsZXIuZ2wvY29uc3RhbnRzJztcblxuY29uc3QgU3R5bGVkSW1hZ2VQcmV2aWV3ID0gc3R5bGVkLmRpdi5hdHRycyh7XG4gIGNsYXNzTmFtZTogJ2ltYWdlLXByZXZpZXcnXG59KWBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZmxleDogMTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDMwcHg7XG5cbiAgLmRpbWVuc2lvbixcbiAgLmluc3RydWN0aW9uIHtcbiAgICBwYWRkaW5nOiA4cHggMHB4O1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2Uge1xuICAgIGJhY2tncm91bmQ6ICNlMmUyZTI7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgIGJveC1zaGFkb3c6IDAgOHB4IDE2cHggMCByZ2JhKDAsIDAsIDAsIDAuMTgpO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuXG4gIC5wcmV2aWV3LWltYWdlLXBsYWNlaG9sZGVyIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2Utc3Bpbm5lciB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGxlZnQ6IGNhbGMoNTAlIC0gMjVweCk7XG4gICAgdG9wOiBjYWxjKDUwJSAtIDI1cHgpO1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2UtLWVycm9yIHtcbiAgICBmb250LXNpemU6IDEycHg7XG4gICAgcGFkZGluZzogMTJweDtcbiAgICBjb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5lcnJvckNvbG9yfTtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZVByZXZpZXdQcm9wcyB7XG4gIGV4cG9ydEltYWdlPzogRXhwb3J0SW1hZ2U7XG4gIHdpZHRoPzogbnVtYmVyO1xuICBzaG93RGltZW5zaW9uPzogZmFsc2U7XG59XG5cbi8qKlxuICogQHBhcmFtIHtvYmplY3R9IHByb3BzXG4gKiBAcGFyYW0ge0V4cG9ydEltYWdlfSBbcHJvcHMuZXhwb3J0SW1hZ2VdXG4gKiBAcGFyYW0ge251bWJlcn0gW3Byb3BzLndpZHRoXVxuICogQHBhcmFtIHtib29sZWFufSBbcHJvcHMuc2hvd0RpbWVuc2lvbl1cbiAqL1xuY29uc3QgSW1hZ2VQcmV2aWV3ID0gKHtleHBvcnRJbWFnZSwgd2lkdGggPSA0MDAsIHNob3dEaW1lbnNpb24gPSBmYWxzZX06IEltYWdlUHJldmlld1Byb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBlcnJvcixcbiAgICBpbWFnZURhdGFVcmksXG4gICAgcHJvY2Vzc2luZyxcbiAgICBpbWFnZVNpemU6IHtpbWFnZVcgPSAwLCBpbWFnZUggPSAwfSA9IHt9XG4gIH0gPSBleHBvcnRJbWFnZSB8fCB7fTtcblxuICBjb25zdCBpbWFnZVN0eWxlID0ge1xuICAgIHdpZHRoOiBgJHt3aWR0aH1weGAsXG4gICAgaGVpZ2h0OiBgJHsoaW1hZ2VIIC8gKGltYWdlVyB8fCAxKSkgKiB3aWR0aH1weGBcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVByZXZpZXc+XG4gICAgICB7c2hvd0RpbWVuc2lvbiA/IChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJkaW1lbnNpb25cIj5cbiAgICAgICAgICB7aW1hZ2VXfSBwaXhlbCB4IHtpbWFnZUh9IHBpeGVsXG4gICAgICAgIDwvZGl2PlxuICAgICAgKSA6IG51bGx9XG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cInByZXZpZXctaW1hZ2VcIiBzdHlsZT17aW1hZ2VTdHlsZX0+XG4gICAgICAgIHtwcm9jZXNzaW5nID8gKFxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicHJldmlldy1pbWFnZS1zcGlubmVyXCI+XG4gICAgICAgICAgICA8TG9hZGluZ1NwaW5uZXIgLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKSA6IGVycm9yID8gKFxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicHJldmlldy1pbWFnZS0tZXJyb3JcIj5cbiAgICAgICAgICAgIDxzcGFuPntlcnJvci5tZXNzYWdlIHx8ICdHZW5lcmF0ZSBtYXAgaW1hZ2UgZmFpbGVkISd9PC9zcGFuPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApIDogKFxuICAgICAgICAgIDxpbWcgY2xhc3NOYW1lPVwicHJldmlldy1pbWFnZS1wbGFjZWhvbGRlclwiIHNyYz17aW1hZ2VEYXRhVXJpfSAvPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgPC9TdHlsZWRJbWFnZVByZXZpZXc+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJbWFnZVByZXZpZXc7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBR0EsSUFBQUEsTUFBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUMsaUJBQUEsR0FBQUYsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFFLGVBQUEsR0FBQUgsc0JBQUEsQ0FBQUMsT0FBQTtBQUErQyxJQUFBRyxlQUFBLEVBTC9DO0FBQ0E7QUFPQSxJQUFNQyxrQkFBa0IsR0FBR0MsNEJBQU0sQ0FBQ0MsR0FBRyxDQUFDQyxLQUFLLENBQUM7RUFDMUNDLFNBQVMsRUFBRTtBQUNiLENBQUMsQ0FBQyxDQUFBTCxlQUFBLEtBQUFBLGVBQUEsT0FBQU0sdUJBQUEsNnVCQXNDVyxVQUFBQyxLQUFLO0VBQUEsT0FBSUEsS0FBSyxDQUFDQyxLQUFLLENBQUNDLFVBQVU7QUFBQSxFQUczQztBQVFEO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLElBQU1DLFlBQVksR0FBRyxTQUFmQSxZQUFZQSxDQUFBQyxJQUFBLEVBQTZFO0VBQUEsSUFBeEVDLFdBQVcsR0FBQUQsSUFBQSxDQUFYQyxXQUFXO0lBQUFDLFVBQUEsR0FBQUYsSUFBQSxDQUFFRyxLQUFLO0lBQUxBLEtBQUssR0FBQUQsVUFBQSxjQUFHLEdBQUcsR0FBQUEsVUFBQTtJQUFBRSxrQkFBQSxHQUFBSixJQUFBLENBQUVLLGFBQWE7SUFBYkEsYUFBYSxHQUFBRCxrQkFBQSxjQUFHLEtBQUssR0FBQUEsa0JBQUE7RUFDcEUsSUFBQUUsS0FBQSxHQUtJTCxXQUFXLElBQUksQ0FBQyxDQUFDO0lBSm5CTSxLQUFLLEdBQUFELEtBQUEsQ0FBTEMsS0FBSztJQUNMQyxZQUFZLEdBQUFGLEtBQUEsQ0FBWkUsWUFBWTtJQUNaQyxVQUFVLEdBQUFILEtBQUEsQ0FBVkcsVUFBVTtJQUFBQyxlQUFBLEdBQUFKLEtBQUEsQ0FDVkssU0FBUztJQUFBQyxnQkFBQSxHQUFBRixlQUFBLGNBQTZCLENBQUMsQ0FBQyxHQUFBQSxlQUFBO0lBQUFHLHFCQUFBLEdBQUFELGdCQUFBLENBQTVCRSxNQUFNO0lBQU5BLE1BQU0sR0FBQUQscUJBQUEsY0FBRyxDQUFDLEdBQUFBLHFCQUFBO0lBQUFFLHNCQUFBLEdBQUFILGdCQUFBLENBQUVJLE1BQU07SUFBTkEsTUFBTSxHQUFBRCxzQkFBQSxjQUFHLENBQUMsR0FBQUEsc0JBQUE7RUFHcEMsSUFBTUUsVUFBVSxHQUFHO0lBQ2pCZCxLQUFLLEtBQUFlLE1BQUEsQ0FBS2YsS0FBSyxPQUFJO0lBQ25CZ0IsTUFBTSxLQUFBRCxNQUFBLENBQU1GLE1BQU0sSUFBSUYsTUFBTSxJQUFJLENBQUMsQ0FBQyxHQUFJWCxLQUFLO0VBQzdDLENBQUM7RUFFRCxvQkFDRW5CLE1BQUEsWUFBQW9DLGFBQUEsQ0FBQzlCLGtCQUFrQixRQUNoQmUsYUFBYSxnQkFDWnJCLE1BQUEsWUFBQW9DLGFBQUE7SUFBSzFCLFNBQVMsRUFBQztFQUFXLEdBQ3ZCb0IsTUFBTSxFQUFDLFdBQVMsRUFBQ0UsTUFBTSxFQUFDLFFBQ3RCLENBQUMsR0FDSixJQUFJLGVBQ1JoQyxNQUFBLFlBQUFvQyxhQUFBO0lBQUsxQixTQUFTLEVBQUMsZUFBZTtJQUFDMkIsS0FBSyxFQUFFSjtFQUFXLEdBQzlDUixVQUFVLGdCQUNUekIsTUFBQSxZQUFBb0MsYUFBQTtJQUFLMUIsU0FBUyxFQUFDO0VBQXVCLGdCQUNwQ1YsTUFBQSxZQUFBb0MsYUFBQSxDQUFDaEMsZUFBQSxXQUFjLE1BQUUsQ0FDZCxDQUFDLEdBQ0ptQixLQUFLLGdCQUNQdkIsTUFBQSxZQUFBb0MsYUFBQTtJQUFLMUIsU0FBUyxFQUFDO0VBQXNCLGdCQUNuQ1YsTUFBQSxZQUFBb0MsYUFBQSxlQUFPYixLQUFLLENBQUNlLE9BQU8sSUFBSSw0QkFBbUMsQ0FDeEQsQ0FBQyxnQkFFTnRDLE1BQUEsWUFBQW9DLGFBQUE7SUFBSzFCLFNBQVMsRUFBQywyQkFBMkI7SUFBQzZCLEdBQUcsRUFBRWY7RUFBYSxDQUFFLENBRTlELENBQ2EsQ0FBQztBQUV6QixDQUFDO0FBQUMsSUFBQWdCLFFBQUEsR0FBQUMsT0FBQSxjQUVhMUIsWUFBWSIsImlnbm9yZUxpc3QiOltdfQ==