UNPKG

qwc2

Version:

QGIS Web Client

https//qwc-services.github.io/

qgis/qwc2

8 lines • 12.5 kB
1
2
3
4
5
6
7
8
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{v1 as uuidv1}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:uuidv1()+".jpg"});_this.props.updateField(_this.props.fieldId,"");_this.props.updateFile(_this.props.fieldId,new File([_this.dataUriToBlob(imageData)],uuidv1()+".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)],uuidv1()+".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};