qwc2 2025.10.9 → 2025.10.14

package/components/EditUploadField.js

@@ -1,8 +1,320 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import mime from"mime-to-extensions";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{showImageEditor}from"../utils/ImageEditor";import LocaleUtils from"../utils/LocaleUtils";import Icon from"./Icon";import ButtonBar from"./widgets/ButtonBar";import ModalDialog from"./widgets/ModalDialog";import"./style/EditUploadField.css";var EditUploadField=/*#__PURE__*/function(_React$Component){function EditUploadField(props){var _this;_classCallCheck(this,EditUploadField);_this=_callSuper(this,EditUploadField,[props]);_defineProperty(_this,"state",{camera:false,imageData:null,imageFilename:null});_defineProperty(_this,"fileSelected",function(ev){if(ev.target.files[0].type.startsWith("image/")){var reader=new FileReader;reader.readAsDataURL(ev.target.files[0]);reader.onload=function(){_this.setState({imageData:reader.result,imageFilename:ev.target.files[0].name});_this.props.updateFile(_this.props.fieldId,new File([_this.dataUriToBlob(reader.result)],ev.target.files[0].name,{type:ev.target.files[0].type}));_this.props.updateField(_this.props.fieldId,"")}}else{_this.props.updateField(_this.props.fieldId,"");_this.props.updateFile(_this.props.fieldId,ev.target.files[0])}});_defineProperty(_this,"enableCamera",function(){_this.setState({camera:true})});_defineProperty(_this,"disableCamera",function(){_this.disableMediaStream();_this.setState({camera:false})});_defineProperty(_this,"renderCaptureFrame",function(){return/*#__PURE__*/React.createElement(ModalDialog,{icon:"camera",onClose:_this.disableCamera,title:LocaleUtils.tr("editing.takepicture")},/*#__PURE__*/React.createElement("video",{className:"edit-capture-frame",ref:_this.activateMediaStream}),/*#__PURE__*/React.createElement("div",{className:"edit-capture-controls"},/*#__PURE__*/React.createElement(Icon,{icon:"camera",onClick:_this.capturePicture})))});_defineProperty(_this,"capturePicture",function(){if(_this.cameraStream){var width=_this.videoElement.videoWidth;var height=_this.videoElement.videoHeight;var canvas=document.createElement("canvas");canvas.width=width;canvas.height=height;var context=canvas.getContext("2d");context.drawImage(_this.videoElement,0,0,width,height);var imageData=canvas.toDataURL("image/jpeg");_this.setState({imageData:imageData,imageFilename:uuidv4()+".jpg"});_this.props.updateField(_this.props.fieldId,"");_this.props.updateFile(_this.props.fieldId,new File([_this.dataUriToBlob(imageData)],uuidv4()+".jpg",{type:"image/jpeg"}))}_this.disableCamera()});_defineProperty(_this,"imageButtonClicked",function(action){if(action==="Draw"){var fileValue=_this.props.value.startsWith("attachment:")?_this.props.value.replace(/attachment:\/\//,""):"";var fileType=mime.lookup(fileValue);var fileUrl=_this.props.iface.resolveAttachmentUrl(_this.props.dataset,fileValue);var imageData=fileType&&fileType.startsWith("image/")?fileUrl:_this.state.imageData;showImageEditor(imageData,function(newImageData){_this.setState({imageData:newImageData,imageFilename:fileValue.replace(/.*\//,"")});_this.props.updateField(_this.props.fieldId,"");_this.props.updateFile(_this.props.fieldId,new File([_this.dataUriToBlob(newImageData)],uuidv4()+".jpg",{type:"image/jpeg"}))})}else if(action==="Clear"){_this.clearImage()}});_defineProperty(_this,"clearImage",function(){_this.setState({imageData:null,imageFilename:null});_this.props.updateField(_this.props.fieldId,"");_this.props.updateFile(_this.props.fieldId,null)});_defineProperty(_this,"activateMediaStream",function(el){if(_this.state.camera&&!_this.cameraStream){var constraints={video:{width:{ideal:4096},height:{ideal:2160}}};navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream){_this.cameraStream=mediaStream;el.srcObject=mediaStream;el.play();_this.videoElement=el})["catch"](function(err){// eslint-disable-next-line
-console.warn("Unable to access camera: "+err)})}});_defineProperty(_this,"disableMediaStream",function(){if(_this.cameraStream){_this.cameraStream.getTracks()[0].stop();_this.cameraStream=null;_this.videoElement=null}});_defineProperty(_this,"download",function(href,filename){var a=document.createElement("a");a.href=href;a.target="_blank";a.setAttribute("download",filename);a.click()});_defineProperty(_this,"dataUriToBlob",function(dataUri){var parts=dataUri.split(",");var byteString=parts[0].indexOf("base64")>=0?atob(parts[1]):decodeURI(parts[1]);var mimeString=parts[0].split(":")[1].split(";")[0];var ia=new Uint8Array(byteString.length);for(var i=0;i<byteString.length;i++){ia[i]=byteString.charCodeAt(i)}return new Blob([ia],{type:mimeString})});_this.cameraStream=null;_this.videoElement=null;_this.portal=document.createElement("div");document.body.appendChild(_this.portal);return _this}_inherits(EditUploadField,_React$Component);return _createClass(EditUploadField,[{key:"componentWillUnmount",value:function componentWillUnmount(){this.disableMediaStream()}},{key:"render",value:function render(){var _this2=this;var isAttachment=this.props.value.startsWith("attachment:");var fileValue=isAttachment?this.props.value.replace(/attachment:\/\//,""):this.props.value;var fileType=mime.lookup(fileValue);var fileUrl=isAttachment?this.props.iface.resolveAttachmentUrl(this.props.dataset,fileValue):fileValue;var constraints=_objectSpread(_objectSpread({},this.props.constraints),{},{accept:(this.props.constraints.accept||"").split(",").map(function(ext){return mime.lookup(ext)}).join(",")});var mediaSupport="mediaDevices"in navigator&&constraints.accept.split(",").includes("image/jpeg");var imageData=fileType&&fileType.startsWith("image/")?fileUrl:this.state.imageData;if(imageData){if(this.props.showThumbnails){var extension=fileValue?fileValue.replace(/^.*\./,""):"jpg";var imagebuttons=[{key:"Draw",icon:"paint",tooltip:LocaleUtils.tr("editing.paint"),disabled:this.props.disabled},{key:"Clear",icon:"clear",tooltip:LocaleUtils.tr("editing.clearpicture"),disabled:this.props.disabled}];return/*#__PURE__*/React.createElement("span",{className:"edit-upload-field-image"},/*#__PURE__*/React.createElement("img",{onClick:function onClick(){return _this2.download(imageData,_this2.props.fieldId+"."+extension)},src:imageData}),this.state.imageData?/*#__PURE__*/React.createElement("input",{"data-filename":this.state.imageFilename,name:this.props.name,type:"hidden",value:this.state.imageData}):null,!this.props.report&&!this.props.disabled?/*#__PURE__*/React.createElement(ButtonBar,{buttons:imagebuttons,onClick:this.imageButtonClicked,tooltipPos:"top"}):null)}else{var _extension=fileValue?fileValue.replace(/^.*\./,""):"jpg";return/*#__PURE__*/React.createElement("span",{className:"edit-upload-field edit-upload-field-imagelink"+(this.props.disabled?" edit-upload-field-disabled":"")},fileValue?/*#__PURE__*/React.createElement("a",{href:fileUrl,rel:"noreferrer",target:"_blank"},fileValue.replace(/.*\//,"")):/*#__PURE__*/React.createElement("a",{href:"#",onClick:function onClick(ev){_this2.download(imageData,_this2.state.imageFilename);ev.preventDefault()},rel:"noreferrer",target:"_blank"},this.state.imageFilename),/*#__PURE__*/React.createElement("img",{onClick:function onClick(){return _this2.download(imageData,_this2.props.fieldId+"."+_extension)},src:imageData}),this.props.report?null:/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:this.props.disabled?null:this.clearImage}))}}else if(fileValue){return/*#__PURE__*/React.createElement("span",{className:"edit-upload-field edit-upload-field-imagelink"+(this.props.disabled?" edit-upload-field-disabled":"")},/*#__PURE__*/React.createElement("a",{href:fileUrl,rel:"noreferrer",target:"_blank"},fileValue.replace(/.*\//,"")),this.props.report?null:/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:this.props.disabled?null:this.clearImage}))}else if(!this.props.report){return/*#__PURE__*/React.createElement("span",{className:"edit-upload-field-input"+(this.props.disabled?" edit-upload-field-input-disabled":"")},/*#__PURE__*/React.createElement("input",_extends({disabled:this.props.disabled,name:this.props.name,type:"file"},constraints,{onChange:this.fileSelected})),mediaSupport?/*#__PURE__*/React.createElement(Icon,{icon:"camera",onClick:this.props.disabled?null:this.enableCamera}):null,this.state.camera?this.renderCaptureFrame():null)}else{return null}}}])}(React.Component);_defineProperty(EditUploadField,"propTypes",{constraints:PropTypes.object,dataset:PropTypes.string,disabled:PropTypes.bool,fieldId:PropTypes.string,iface:PropTypes.object,name:PropTypes.string,report:PropTypes.bool,showThumbnails:PropTypes.bool,updateField:PropTypes.func,updateFile:PropTypes.func,value:PropTypes.string});_defineProperty(EditUploadField,"defaultProps",{showThumbnails:true,updateFile:function updateFile(){}});export{EditUploadField as default};
+ */
+
+import React from 'react';
+import mime from 'mime-to-extensions';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { showImageEditor } from '../utils/ImageEditor';
+import LocaleUtils from '../utils/LocaleUtils';
+import Icon from './Icon';
+import ButtonBar from './widgets/ButtonBar';
+import ModalDialog from './widgets/ModalDialog';
+import './style/EditUploadField.css';
+var EditUploadField = /*#__PURE__*/function (_React$Component) {
+  function EditUploadField(props) {
+    var _this;
+    _classCallCheck(this, EditUploadField);
+    _this = _callSuper(this, EditUploadField, [props]);
+    _defineProperty(_this, "state", {
+      camera: false,
+      imageData: null,
+      imageFilename: null
+    });
+    _defineProperty(_this, "fileSelected", function (ev) {
+      if (ev.target.files[0].type.startsWith("image/")) {
+        var reader = new FileReader();
+        reader.readAsDataURL(ev.target.files[0]);
+        reader.onload = function () {
+          _this.setState({
+            imageData: reader.result,
+            imageFilename: ev.target.files[0].name
+          });
+          _this.props.updateFile(_this.props.fieldId, new File([_this.dataUriToBlob(reader.result)], ev.target.files[0].name, {
+            type: ev.target.files[0].type
+          }));
+          _this.props.updateField(_this.props.fieldId, '');
+        };
+      } else {
+        _this.props.updateField(_this.props.fieldId, '');
+        _this.props.updateFile(_this.props.fieldId, ev.target.files[0]);
+      }
+    });
+    _defineProperty(_this, "enableCamera", function () {
+      _this.setState({
+        camera: true
+      });
+    });
+    _defineProperty(_this, "disableCamera", function () {
+      _this.disableMediaStream();
+      _this.setState({
+        camera: false
+      });
+    });
+    _defineProperty(_this, "renderCaptureFrame", function () {
+      return /*#__PURE__*/React.createElement(ModalDialog, {
+        icon: "camera",
+        onClose: _this.disableCamera,
+        title: LocaleUtils.tr("editing.takepicture")
+      }, /*#__PURE__*/React.createElement("video", {
+        className: "edit-capture-frame",
+        ref: _this.activateMediaStream
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "edit-capture-controls"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "camera",
+        onClick: _this.capturePicture
+      })));
+    });
+    _defineProperty(_this, "capturePicture", function () {
+      if (_this.cameraStream) {
+        var width = _this.videoElement.videoWidth;
+        var height = _this.videoElement.videoHeight;
+        var canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        var context = canvas.getContext("2d");
+        context.drawImage(_this.videoElement, 0, 0, width, height);
+        var imageData = canvas.toDataURL("image/jpeg");
+        _this.setState({
+          imageData: imageData,
+          imageFilename: uuidv4() + ".jpg"
+        });
+        _this.props.updateField(_this.props.fieldId, '');
+        _this.props.updateFile(_this.props.fieldId, new File([_this.dataUriToBlob(imageData)], uuidv4() + ".jpg", {
+          type: "image/jpeg"
+        }));
+      }
+      _this.disableCamera();
+    });
+    _defineProperty(_this, "imageButtonClicked", function (action) {
+      if (action === "Draw") {
+        var fileValue = _this.props.value.startsWith("attachment:") ? _this.props.value.replace(/attachment:\/\//, '') : "";
+        var fileType = mime.lookup(fileValue);
+        var fileUrl = _this.props.iface.resolveAttachmentUrl(_this.props.dataset, fileValue);
+        var imageData = fileType && fileType.startsWith('image/') ? fileUrl : _this.state.imageData;
+        showImageEditor(imageData, function (newImageData) {
+          _this.setState({
+            imageData: newImageData,
+            imageFilename: fileValue.replace(/.*\//, '')
+          });
+          _this.props.updateField(_this.props.fieldId, '');
+          _this.props.updateFile(_this.props.fieldId, new File([_this.dataUriToBlob(newImageData)], uuidv4() + ".jpg", {
+            type: "image/jpeg"
+          }));
+        });
+      } else if (action === "Clear") {
+        _this.clearImage();
+      }
+    });
+    _defineProperty(_this, "clearImage", function () {
+      _this.setState({
+        imageData: null,
+        imageFilename: null
+      });
+      _this.props.updateField(_this.props.fieldId, '');
+      _this.props.updateFile(_this.props.fieldId, null);
+    });
+    _defineProperty(_this, "activateMediaStream", function (el) {
+      if (_this.state.camera && !_this.cameraStream) {
+        var constraints = {
+          video: {
+            width: {
+              ideal: 4096
+            },
+            height: {
+              ideal: 2160
+            }
+          }
+        };
+        navigator.mediaDevices.getUserMedia(constraints).then(function (mediaStream) {
+          _this.cameraStream = mediaStream;
+          el.srcObject = mediaStream;
+          el.play();
+          _this.videoElement = el;
+        })["catch"](function (err) {
+          // eslint-disable-next-line
+          console.warn("Unable to access camera: " + err);
+        });
+      }
+    });
+    _defineProperty(_this, "disableMediaStream", function () {
+      if (_this.cameraStream) {
+        _this.cameraStream.getTracks()[0].stop();
+        _this.cameraStream = null;
+        _this.videoElement = null;
+      }
+    });
+    _defineProperty(_this, "download", function (href, filename) {
+      var a = document.createElement("a");
+      a.href = href;
+      a.target = "_blank";
+      a.setAttribute("download", filename);
+      a.click();
+    });
+    _defineProperty(_this, "dataUriToBlob", function (dataUri) {
+      var parts = dataUri.split(',');
+      var byteString = parts[0].indexOf('base64') >= 0 ? atob(parts[1]) : decodeURI(parts[1]);
+      var mimeString = parts[0].split(':')[1].split(';')[0];
+      var ia = new Uint8Array(byteString.length);
+      for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+      return new Blob([ia], {
+        type: mimeString
+      });
+    });
+    _this.cameraStream = null;
+    _this.videoElement = null;
+    _this.portal = document.createElement("div");
+    document.body.appendChild(_this.portal);
+    return _this;
+  }
+  _inherits(EditUploadField, _React$Component);
+  return _createClass(EditUploadField, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.disableMediaStream();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isAttachment = this.props.value.startsWith("attachment:");
+      var fileValue = isAttachment ? this.props.value.replace(/attachment:\/\//, '') : this.props.value;
+      var fileType = mime.lookup(fileValue);
+      var fileUrl = isAttachment ? this.props.iface.resolveAttachmentUrl(this.props.dataset, fileValue) : fileValue;
+      var constraints = _objectSpread(_objectSpread({}, this.props.constraints), {}, {
+        accept: (this.props.constraints.accept || "").split(",").map(function (ext) {
+          return mime.lookup(ext);
+        }).join(",")
+      });
+      var mediaSupport = 'mediaDevices' in navigator && constraints.accept.split(",").includes("image/jpeg");
+      var imageData = fileType && fileType.startsWith('image/') ? fileUrl : this.state.imageData;
+      if (imageData) {
+        if (this.props.showThumbnails) {
+          var extension = fileValue ? fileValue.replace(/^.*\./, '') : 'jpg';
+          var imagebuttons = [{
+            key: 'Draw',
+            icon: 'paint',
+            tooltip: LocaleUtils.tr("editing.paint"),
+            disabled: this.props.disabled
+          }, {
+            key: 'Clear',
+            icon: 'clear',
+            tooltip: LocaleUtils.tr("editing.clearpicture"),
+            disabled: this.props.disabled
+          }];
+          return /*#__PURE__*/React.createElement("span", {
+            className: "edit-upload-field-image"
+          }, /*#__PURE__*/React.createElement("img", {
+            onClick: function onClick() {
+              return _this2.download(imageData, _this2.props.fieldId + "." + extension);
+            },
+            src: imageData
+          }), this.state.imageData ? /*#__PURE__*/React.createElement("input", {
+            "data-filename": this.state.imageFilename,
+            name: this.props.name,
+            type: "hidden",
+            value: this.state.imageData
+          }) : null, !this.props.report && !this.props.disabled ? /*#__PURE__*/React.createElement(ButtonBar, {
+            buttons: imagebuttons,
+            onClick: this.imageButtonClicked,
+            tooltipPos: "top"
+          }) : null);
+        } else {
+          var _extension = fileValue ? fileValue.replace(/^.*\./, '') : 'jpg';
+          return /*#__PURE__*/React.createElement("span", {
+            className: "edit-upload-field edit-upload-field-imagelink" + (this.props.disabled ? " edit-upload-field-disabled" : "")
+          }, fileValue ? /*#__PURE__*/React.createElement("a", {
+            href: fileUrl,
+            rel: "noreferrer",
+            target: "_blank"
+          }, fileValue.replace(/.*\//, '')) : /*#__PURE__*/React.createElement("a", {
+            href: "#",
+            onClick: function onClick(ev) {
+              _this2.download(imageData, _this2.state.imageFilename);
+              ev.preventDefault();
+            },
+            rel: "noreferrer",
+            target: "_blank"
+          }, this.state.imageFilename), /*#__PURE__*/React.createElement("img", {
+            onClick: function onClick() {
+              return _this2.download(imageData, _this2.props.fieldId + "." + _extension);
+            },
+            src: imageData
+          }), this.props.report ? null : /*#__PURE__*/React.createElement(Icon, {
+            icon: "clear",
+            onClick: this.props.disabled ? null : this.clearImage
+          }));
+        }
+      } else if (fileValue) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "edit-upload-field edit-upload-field-imagelink" + (this.props.disabled ? " edit-upload-field-disabled" : "")
+        }, /*#__PURE__*/React.createElement("a", {
+          href: fileUrl,
+          rel: "noreferrer",
+          target: "_blank"
+        }, fileValue.replace(/.*\//, '')), this.props.report ? null : /*#__PURE__*/React.createElement(Icon, {
+          icon: "clear",
+          onClick: this.props.disabled ? null : this.clearImage
+        }));
+      } else if (!this.props.report) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "edit-upload-field-input" + (this.props.disabled ? " edit-upload-field-input-disabled" : "")
+        }, /*#__PURE__*/React.createElement("input", _extends({
+          disabled: this.props.disabled,
+          name: this.props.name,
+          type: "file"
+        }, constraints, {
+          onChange: this.fileSelected
+        })), mediaSupport ? /*#__PURE__*/React.createElement(Icon, {
+          icon: "camera",
+          onClick: this.props.disabled ? null : this.enableCamera
+        }) : null, this.state.camera ? this.renderCaptureFrame() : null);
+      } else {
+        return null;
+      }
+    }
+  }]);
+}(React.Component);
+_defineProperty(EditUploadField, "propTypes", {
+  constraints: PropTypes.object,
+  dataset: PropTypes.string,
+  disabled: PropTypes.bool,
+  fieldId: PropTypes.string,
+  iface: PropTypes.object,
+  name: PropTypes.string,
+  report: PropTypes.bool,
+  showThumbnails: PropTypes.bool,
+  updateField: PropTypes.func,
+  updateFile: PropTypes.func,
+  value: PropTypes.string
+});
+_defineProperty(EditUploadField, "defaultProps", {
+  showThumbnails: true,
+  updateFile: function updateFile() {}
+});
+export { EditUploadField as default };

package/components/ExportSelection.js

@@ -1,7 +1,208 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2025 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import PropTypes from"prop-types";import MiscUtils from"../utils/MiscUtils";import"./style/ExportSelection.css";var ExportSelection=/*#__PURE__*/function(_React$Component){function ExportSelection(){var _this;_classCallCheck(this,ExportSelection);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,ExportSelection,[].concat(args));_defineProperty(_this,"state",{x:0,y:0,width:0,height:0,frameRatio:null});_defineProperty(_this,"startMoveSelection",function(ev){if(ev.ctrlKey){return}var startStateX=_this.state.x;var startStateY=_this.state.y;var onMouseMove=function onMouseMove(event){_this.setState({x:startStateX+event.clientX-ev.clientX,y:startStateY+event.clientY-ev.clientY})};ev.view.addEventListener("pointermove",onMouseMove);ev.view.addEventListener("pointerup",function(){ev.view.removeEventListener("pointermove",onMouseMove);_this.props.onFrameChanged(_this.state)},{once:true});MiscUtils.killEvent(ev)});_defineProperty(_this,"startResizeSelection",function(ev,sx,sy){if(ev.ctrlKey){return}var _this$state=_this.state,x=_this$state.x,y=_this$state.y,width=_this$state.width,height=_this$state.height,frameRatio=_this$state.frameRatio;var onMouseMove=function onMouseMove(event){var dx=event.clientX-ev.clientX;var dy=event.clientY-ev.clientY;var newwidth=width+dx*sx;var newheight=height+dy*sy;if(frameRatio){if(sx!==0){newheight=Math.round(newwidth*frameRatio)}else{newwidth=Math.round(newheight/frameRatio)}}var newx=sx<0?x+(width-newwidth):x;var newy=sy<0?y+(height-newheight):y;if(sx===0){newx+=0.5*(width-newwidth)}if(sy===0){newy+=0.5*(height-newheight)}_this.setState({x:newx,y:newy,width:newwidth,height:newheight})};ev.view.addEventListener("pointermove",onMouseMove);ev.view.addEventListener("pointerup",function(){ev.view.removeEventListener("pointermove",onMouseMove);_this.props.onFrameChanged(_this.state)},{once:true});MiscUtils.killEvent(ev)});return _this}_inherits(ExportSelection,_React$Component);return _createClass(ExportSelection,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this2=this;if(this.props.frame!==prevProps.frame){this.setState(_objectSpread({},this.props.frame))}if(this.props.frameRatio!==prevProps.frameRatio){this.setState(function(state){var newheight=_this2.props.frameRatio?Math.round(state.width*_this2.props.frameRatio):state.height;return{frameRatio:_this2.props.frameRatio,y:state.y+0.5*(state.height-newheight),height:newheight}},function(){_this2.props.onFrameChanged(_this2.state)})}}},{key:"render",value:function render(){var _this3=this;var boxStyle={left:this.state.x+"px",top:this.state.y+"px",width:this.state.width+"px",height:this.state.height+"px"};return/*#__PURE__*/React.createElement("div",{className:"export-selection-container"},/*#__PURE__*/React.createElement("div",{className:"export-selection",onContextMenu:MiscUtils.killEvent,onPointerDown:this.startMoveSelection,style:boxStyle},/*#__PURE__*/React.createElement("span",{className:"export-selection-label"},this.state.width+" x "+this.state.height),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-top",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,0,-1)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-bottom",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,0,1)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-left",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,-1,0)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-right",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,1,0)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-topleft",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,-1,-1)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-topright",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,1,-1)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-bottomleft",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,-1,1)}}),/*#__PURE__*/React.createElement("div",{className:"export-selection-resize-bottomright",onPointerDown:function onPointerDown(ev){return _this3.startResizeSelection(ev,1,1)}})))}}])}(React.Component);_defineProperty(ExportSelection,"propTypes",{frame:PropTypes.shape({x:PropTypes.number,y:PropTypes.number,width:PropTypes.number,height:PropTypes.number}),frameRatio:PropTypes.number,mapElement:PropTypes.object,onFrameChanged:PropTypes.func});export{ExportSelection as default};
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MiscUtils from '../utils/MiscUtils';
+import './style/ExportSelection.css';
+var ExportSelection = /*#__PURE__*/function (_React$Component) {
+  function ExportSelection() {
+    var _this;
+    _classCallCheck(this, ExportSelection);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ExportSelection, [].concat(args));
+    _defineProperty(_this, "state", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      frameRatio: null
+    });
+    _defineProperty(_this, "startMoveSelection", function (ev) {
+      if (ev.ctrlKey) {
+        return;
+      }
+      var startStateX = _this.state.x;
+      var startStateY = _this.state.y;
+      var onMouseMove = function onMouseMove(event) {
+        _this.setState({
+          x: startStateX + event.clientX - ev.clientX,
+          y: startStateY + event.clientY - ev.clientY
+        });
+      };
+      ev.view.addEventListener('pointermove', onMouseMove);
+      ev.view.addEventListener('pointerup', function () {
+        ev.view.removeEventListener('pointermove', onMouseMove);
+        _this.props.onFrameChanged(_this.state);
+      }, {
+        once: true
+      });
+      MiscUtils.killEvent(ev);
+    });
+    _defineProperty(_this, "startResizeSelection", function (ev, sx, sy) {
+      if (ev.ctrlKey) {
+        return;
+      }
+      var _this$state = _this.state,
+        x = _this$state.x,
+        y = _this$state.y,
+        width = _this$state.width,
+        height = _this$state.height,
+        frameRatio = _this$state.frameRatio;
+      var onMouseMove = function onMouseMove(event) {
+        var dx = event.clientX - ev.clientX;
+        var dy = event.clientY - ev.clientY;
+        var newwidth = width + dx * sx;
+        var newheight = height + dy * sy;
+        if (frameRatio) {
+          if (sx !== 0) {
+            newheight = Math.round(newwidth * frameRatio);
+          } else {
+            newwidth = Math.round(newheight / frameRatio);
+          }
+        }
+        var newx = sx < 0 ? x + (width - newwidth) : x;
+        var newy = sy < 0 ? y + (height - newheight) : y;
+        if (sx === 0) {
+          newx += 0.5 * (width - newwidth);
+        }
+        if (sy === 0) {
+          newy += 0.5 * (height - newheight);
+        }
+        _this.setState({
+          x: newx,
+          y: newy,
+          width: newwidth,
+          height: newheight
+        });
+      };
+      ev.view.addEventListener('pointermove', onMouseMove);
+      ev.view.addEventListener('pointerup', function () {
+        ev.view.removeEventListener('pointermove', onMouseMove);
+        _this.props.onFrameChanged(_this.state);
+      }, {
+        once: true
+      });
+      MiscUtils.killEvent(ev);
+    });
+    return _this;
+  }
+  _inherits(ExportSelection, _React$Component);
+  return _createClass(ExportSelection, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      if (this.props.frame !== prevProps.frame) {
+        this.setState(_objectSpread({}, this.props.frame));
+      }
+      if (this.props.frameRatio !== prevProps.frameRatio) {
+        this.setState(function (state) {
+          var newheight = _this2.props.frameRatio ? Math.round(state.width * _this2.props.frameRatio) : state.height;
+          return {
+            frameRatio: _this2.props.frameRatio,
+            y: state.y + 0.5 * (state.height - newheight),
+            height: newheight
+          };
+        }, function () {
+          _this2.props.onFrameChanged(_this2.state);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var boxStyle = {
+        left: this.state.x + 'px',
+        top: this.state.y + 'px',
+        width: this.state.width + 'px',
+        height: this.state.height + 'px'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "export-selection",
+        onContextMenu: MiscUtils.killEvent,
+        onPointerDown: this.startMoveSelection,
+        style: boxStyle
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "export-selection-label"
+      }, this.state.width + " x " + this.state.height), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-top",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, 0, -1);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-bottom",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, 0, 1);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-left",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, -1, 0);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-right",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, 1, 0);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-topleft",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, -1, -1);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-topright",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, 1, -1);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-bottomleft",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, -1, 1);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "export-selection-resize-bottomright",
+        onPointerDown: function onPointerDown(ev) {
+          return _this3.startResizeSelection(ev, 1, 1);
+        }
+      })));
+    }
+  }]);
+}(React.Component);
+_defineProperty(ExportSelection, "propTypes", {
+  frame: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number
+  }),
+  frameRatio: PropTypes.number,
+  mapElement: PropTypes.object,
+  onFrameChanged: PropTypes.func
+});
+export { ExportSelection as default };