94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
//import "tui-image-editor/dist/tui-image-editor.css";
|
|
import { Spin } from "antd";
|
|
import * as markerjs2 from "markerjs2";
|
|
import React, { useEffect, useRef } from "react";
|
|
import { useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
selectBodyshop,
|
|
selectCurrentUser,
|
|
} from "../../redux/user/user.selectors";
|
|
import { handleUpload } from "../documents-upload/documents-upload.utility";
|
|
import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
|
|
export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
|
|
const imgRef = useRef(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const markerArea = useRef(null);
|
|
const triggerUpload = async (dataUrl) => {
|
|
setLoading(true);
|
|
handleUpload(
|
|
{
|
|
filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
|
|
file: await b64toBlob(dataUrl),
|
|
onSuccess: () => setLoading(false),
|
|
onError: () => setLoading(false),
|
|
},
|
|
{
|
|
bodyshop: bodyshop,
|
|
uploaded_by: currentUser.email,
|
|
jobId: document.jobid,
|
|
//billId: billId,
|
|
tagsArray: ["edited"],
|
|
//callback: callbackAfterUpload,
|
|
}
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (imgRef.current !== null) {
|
|
// create a marker.js MarkerArea
|
|
markerArea.current = new markerjs2.MarkerArea(imgRef.current);
|
|
// attach an event handler to assign annotated image back to our image element
|
|
markerArea.current.addCloseEventListener((closeEvent) => {
|
|
console.log("Close Event", closeEvent);
|
|
});
|
|
|
|
markerArea.current.addRenderEventListener((dataUrl) => {
|
|
triggerUpload(dataUrl);
|
|
});
|
|
// launch marker.js
|
|
|
|
markerArea.current.renderAtNaturalSize = true;
|
|
markerArea.current.renderImageType = "image/jpeg";
|
|
markerArea.current.renderImageQuality = 1;
|
|
//markerArea.current.settings.displayMode = "inline";
|
|
markerArea.current.show();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [imgRef.current, triggerUpload]);
|
|
|
|
async function b64toBlob(url) {
|
|
const res = await fetch(url);
|
|
return await res.blob();
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Spin spinning={loading}>
|
|
<img
|
|
ref={imgRef}
|
|
src={GenerateSrcUrl(document)}
|
|
alt="sample"
|
|
crossOrigin="anonymous"
|
|
style={{ maxWidth: "90vw", maxHeight: "90vh" }}
|
|
/>
|
|
</Spin>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(DocumentEditorComponent);
|