kepler.gl/dist/src/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("/Users/ihordykhta/Desktop/unfolded/kepler.gl/node_modules/react"));
var _styledComponents = _interopRequireDefault(require("/Users/ihordykhta/Desktop/unfolded/kepler.gl/node_modules/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  width: 100%;\n  height: 100%;\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    max-width: 400px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .preview-image-container {\n    position: relative;\n    width: 100%;\n    height: 0;\n    padding-bottom: var(--aspect-ratio);\n    max-height: 400px;\n  }\n\n  .preview-image-placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\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    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: 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$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;

  // Calculate aspect ratio percentage for padding-bottom trick
  var aspectRatio = imageW && imageH ? imageH / imageW * 100 : 75; // default to 4:3 if no dimensions

  return /*#__PURE__*/_react["default"].createElement(StyledImagePreview, {
    style: {
      '--aspect-ratio': "".concat(aspectRatio, "%")
    }
  }, showDimension ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "dimension"
  }, imageW, " pixel x ", imageH, " pixel") : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "preview-image"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "preview-image-container"
  }, 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,
    alt: "Map preview"
  }))));
};
var _default = exports["default"] = ImagePreview;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9zdHlsZWRDb21wb25lbnRzIiwiX2xvYWRpbmdTcGlubmVyIiwiX3RlbXBsYXRlT2JqZWN0IiwiU3R5bGVkSW1hZ2VQcmV2aWV3Iiwic3R5bGVkIiwiZGl2IiwiYXR0cnMiLCJjbGFzc05hbWUiLCJfdGFnZ2VkVGVtcGxhdGVMaXRlcmFsMiIsInByb3BzIiwidGhlbWUiLCJlcnJvckNvbG9yIiwiSW1hZ2VQcmV2aWV3IiwiX3JlZiIsImV4cG9ydEltYWdlIiwiX3JlZiRzaG93RGltZW5zaW9uIiwic2hvd0RpbWVuc2lvbiIsIl9yZWYyIiwiZXJyb3IiLCJpbWFnZURhdGFVcmkiLCJwcm9jZXNzaW5nIiwiX3JlZjIkaW1hZ2VTaXplIiwiaW1hZ2VTaXplIiwiX3JlZjIkaW1hZ2VTaXplMiIsIl9yZWYyJGltYWdlU2l6ZTIkaW1hZyIsImltYWdlVyIsIl9yZWYyJGltYWdlU2l6ZTIkaW1hZzIiLCJpbWFnZUgiLCJhc3BlY3RSYXRpbyIsImNyZWF0ZUVsZW1lbnQiLCJzdHlsZSIsImNvbmNhdCIsIm1lc3NhZ2UiLCJzcmMiLCJhbHQiLCJfZGVmYXVsdCIsImV4cG9ydHMiXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zcmMvY29tbW9uL2ltYWdlLXByZXZpZXcudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8vIFNQRFgtTGljZW5zZS1JZGVudGlmaWVyOiBNSVRcbi8vIENvcHlyaWdodCBjb250cmlidXRvcnMgdG8gdGhlIGtlcGxlci5nbCBwcm9qZWN0XG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ3N0eWxlZC1jb21wb25lbnRzJztcbmltcG9ydCBMb2FkaW5nU3Bpbm5lciBmcm9tICcuL2xvYWRpbmctc3Bpbm5lcic7XG5pbXBvcnQge0V4cG9ydEltYWdlfSBmcm9tICdAa2VwbGVyLmdsL3R5cGVzJztcblxuY29uc3QgU3R5bGVkSW1hZ2VQcmV2aWV3ID0gc3R5bGVkLmRpdi5hdHRycyh7XG4gIGNsYXNzTmFtZTogJ2ltYWdlLXByZXZpZXcnXG59KWBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZmxleDogMTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG5cbiAgLmRpbWVuc2lvbixcbiAgLmluc3RydWN0aW9uIHtcbiAgICBwYWRkaW5nOiA4cHggMHB4O1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2Uge1xuICAgIGJhY2tncm91bmQ6ICNlMmUyZTI7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgIGJveC1zaGFkb3c6IDAgOHB4IDE2cHggMCByZ2JhKDAsIDAsIDAsIDAuMTgpO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogNDAwcHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gIH1cblxuICAucHJldmlldy1pbWFnZS1jb250YWluZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDA7XG4gICAgcGFkZGluZy1ib3R0b206IHZhcigtLWFzcGVjdC1yYXRpbyk7XG4gICAgbWF4LWhlaWdodDogNDAwcHg7XG4gIH1cblxuICAucHJldmlldy1pbWFnZS1wbGFjZWhvbGRlciB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBvYmplY3QtZml0OiBjb250YWluO1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2Utc3Bpbm5lciB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGxlZnQ6IGNhbGMoNTAlIC0gMjVweCk7XG4gICAgdG9wOiBjYWxjKDUwJSAtIDI1cHgpO1xuICB9XG5cbiAgLnByZXZpZXctaW1hZ2UtLWVycm9yIHtcbiAgICBmb250LXNpemU6IDEycHg7XG4gICAgcGFkZGluZzogMTJweDtcbiAgICBjb2xvcjogJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5lcnJvckNvbG9yfTtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZVByZXZpZXdQcm9wcyB7XG4gIGV4cG9ydEltYWdlPzogRXhwb3J0SW1hZ2U7XG4gIHdpZHRoPzogbnVtYmVyO1xuICBzaG93RGltZW5zaW9uPzogYm9vbGVhbjtcbn1cblxuLyoqXG4gKiBAcGFyYW0ge29iamVjdH0gcHJvcHNcbiAqIEBwYXJhbSB7RXhwb3J0SW1hZ2V9IFtwcm9wcy5leHBvcnRJbWFnZV1cbiAqIEBwYXJhbSB7bnVtYmVyfSBbcHJvcHMud2lkdGhdXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtwcm9wcy5zaG93RGltZW5zaW9uXVxuICovXG5jb25zdCBJbWFnZVByZXZpZXcgPSAoe2V4cG9ydEltYWdlLCBzaG93RGltZW5zaW9uID0gZmFsc2V9OiBJbWFnZVByZXZpZXdQcm9wcykgPT4ge1xuICBjb25zdCB7XG4gICAgZXJyb3IsXG4gICAgaW1hZ2VEYXRhVXJpLFxuICAgIHByb2Nlc3NpbmcsXG4gICAgaW1hZ2VTaXplOiB7aW1hZ2VXID0gMCwgaW1hZ2VIID0gMH0gPSB7fVxuICB9ID0gZXhwb3J0SW1hZ2UgfHwge307XG5cbiAgLy8gQ2FsY3VsYXRlIGFzcGVjdCByYXRpbyBwZXJjZW50YWdlIGZvciBwYWRkaW5nLWJvdHRvbSB0cmlja1xuICBjb25zdCBhc3BlY3RSYXRpbyA9IGltYWdlVyAmJiBpbWFnZUggPyAoaW1hZ2VIIC8gaW1hZ2VXKSAqIDEwMCA6IDc1OyAvLyBkZWZhdWx0IHRvIDQ6MyBpZiBubyBkaW1lbnNpb25zXG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSW1hZ2VQcmV2aWV3IHN0eWxlPXt7Jy0tYXNwZWN0LXJhdGlvJzogYCR7YXNwZWN0UmF0aW99JWB9IGFzIFJlYWN0LkNTU1Byb3BlcnRpZXN9PlxuICAgICAge3Nob3dEaW1lbnNpb24gPyAoXG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZGltZW5zaW9uXCI+XG4gICAgICAgICAge2ltYWdlV30gcGl4ZWwgeCB7aW1hZ2VIfSBwaXhlbFxuICAgICAgICA8L2Rpdj5cbiAgICAgICkgOiBudWxsfVxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJwcmV2aWV3LWltYWdlXCI+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicHJldmlldy1pbWFnZS1jb250YWluZXJcIj5cbiAgICAgICAgICB7cHJvY2Vzc2luZyA/IChcbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwicHJldmlldy1pbWFnZS1zcGlubmVyXCI+XG4gICAgICAgICAgICAgIDxMb2FkaW5nU3Bpbm5lciAvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgKSA6IGVycm9yID8gKFxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJwcmV2aWV3LWltYWdlLS1lcnJvclwiPlxuICAgICAgICAgICAgICA8c3Bhbj57ZXJyb3IubWVzc2FnZSB8fCAnR2VuZXJhdGUgbWFwIGltYWdlIGZhaWxlZCEnfTwvc3Bhbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8aW1nIGNsYXNzTmFtZT1cInByZXZpZXctaW1hZ2UtcGxhY2Vob2xkZXJcIiBzcmM9e2ltYWdlRGF0YVVyaX0gYWx0PVwiTWFwIHByZXZpZXdcIiAvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9TdHlsZWRJbWFnZVByZXZpZXc+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJbWFnZVByZXZpZXc7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBR0EsSUFBQUEsTUFBQSxHQUFBQyxzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQUMsaUJBQUEsR0FBQUYsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFFLGVBQUEsR0FBQUgsc0JBQUEsQ0FBQUMsT0FBQTtBQUErQyxJQUFBRyxlQUFBLEVBTC9DO0FBQ0E7QUFPQSxJQUFNQyxrQkFBa0IsR0FBR0MsNEJBQU0sQ0FBQ0MsR0FBRyxDQUFDQyxLQUFLLENBQUM7RUFDMUNDLFNBQVMsRUFBRTtBQUNiLENBQUMsQ0FBQyxDQUFBTCxlQUFBLEtBQUFBLGVBQUEsT0FBQU0sdUJBQUEsMm9DQWtEVyxVQUFBQyxLQUFLO0VBQUEsT0FBSUEsS0FBSyxDQUFDQyxLQUFLLENBQUNDLFVBQVU7QUFBQSxFQVczQztBQVFEO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLElBQU1DLFlBQVksR0FBRyxTQUFmQSxZQUFZQSxDQUFBQyxJQUFBLEVBQWdFO0VBQUEsSUFBM0RDLFdBQVcsR0FBQUQsSUFBQSxDQUFYQyxXQUFXO0lBQUFDLGtCQUFBLEdBQUFGLElBQUEsQ0FBRUcsYUFBYTtJQUFiQSxhQUFhLEdBQUFELGtCQUFBLGNBQUcsS0FBSyxHQUFBQSxrQkFBQTtFQUN2RCxJQUFBRSxLQUFBLEdBS0lILFdBQVcsSUFBSSxDQUFDLENBQUM7SUFKbkJJLEtBQUssR0FBQUQsS0FBQSxDQUFMQyxLQUFLO0lBQ0xDLFlBQVksR0FBQUYsS0FBQSxDQUFaRSxZQUFZO0lBQ1pDLFVBQVUsR0FBQUgsS0FBQSxDQUFWRyxVQUFVO0lBQUFDLGVBQUEsR0FBQUosS0FBQSxDQUNWSyxTQUFTO0lBQUFDLGdCQUFBLEdBQUFGLGVBQUEsY0FBNkIsQ0FBQyxDQUFDLEdBQUFBLGVBQUE7SUFBQUcscUJBQUEsR0FBQUQsZ0JBQUEsQ0FBNUJFLE1BQU07SUFBTkEsTUFBTSxHQUFBRCxxQkFBQSxjQUFHLENBQUMsR0FBQUEscUJBQUE7SUFBQUUsc0JBQUEsR0FBQUgsZ0JBQUEsQ0FBRUksTUFBTTtJQUFOQSxNQUFNLEdBQUFELHNCQUFBLGNBQUcsQ0FBQyxHQUFBQSxzQkFBQTs7RUFHcEM7RUFDQSxJQUFNRSxXQUFXLEdBQUdILE1BQU0sSUFBSUUsTUFBTSxHQUFJQSxNQUFNLEdBQUdGLE1BQU0sR0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUM7O0VBRXJFLG9CQUNFNUIsTUFBQSxZQUFBZ0MsYUFBQSxDQUFDMUIsa0JBQWtCO0lBQUMyQixLQUFLLEVBQUU7TUFBQyxnQkFBZ0IsS0FBQUMsTUFBQSxDQUFLSCxXQUFXO0lBQUc7RUFBeUIsR0FDckZaLGFBQWEsZ0JBQ1puQixNQUFBLFlBQUFnQyxhQUFBO0lBQUt0QixTQUFTLEVBQUM7RUFBVyxHQUN2QmtCLE1BQU0sRUFBQyxXQUFTLEVBQUNFLE1BQU0sRUFBQyxRQUN0QixDQUFDLEdBQ0osSUFBSSxlQUNSOUIsTUFBQSxZQUFBZ0MsYUFBQTtJQUFLdEIsU0FBUyxFQUFDO0VBQWUsZ0JBQzVCVixNQUFBLFlBQUFnQyxhQUFBO0lBQUt0QixTQUFTLEVBQUM7RUFBeUIsR0FDckNhLFVBQVUsZ0JBQ1R2QixNQUFBLFlBQUFnQyxhQUFBO0lBQUt0QixTQUFTLEVBQUM7RUFBdUIsZ0JBQ3BDVixNQUFBLFlBQUFnQyxhQUFBLENBQUM1QixlQUFBLFdBQWMsTUFBRSxDQUNkLENBQUMsR0FDSmlCLEtBQUssZ0JBQ1ByQixNQUFBLFlBQUFnQyxhQUFBO0lBQUt0QixTQUFTLEVBQUM7RUFBc0IsZ0JBQ25DVixNQUFBLFlBQUFnQyxhQUFBLGVBQU9YLEtBQUssQ0FBQ2MsT0FBTyxJQUFJLDRCQUFtQyxDQUN4RCxDQUFDLGdCQUVObkMsTUFBQSxZQUFBZ0MsYUFBQTtJQUFLdEIsU0FBUyxFQUFDLDJCQUEyQjtJQUFDMEIsR0FBRyxFQUFFZCxZQUFhO0lBQUNlLEdBQUcsRUFBQztFQUFhLENBQUUsQ0FFaEYsQ0FDRixDQUNhLENBQUM7QUFFekIsQ0FBQztBQUFDLElBQUFDLFFBQUEsR0FBQUMsT0FBQSxjQUVheEIsWUFBWSIsImlnbm9yZUxpc3QiOltdfQ==