WIP Photo Editor

client/src/components/document-editor/document-editor.component.jsx

@@ -0,0 +1,93 @@
+//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);