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);

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

@@ -0,0 +1,33 @@
+import { useQuery } from "@apollo/client";
+import { Modal, Result } from "antd";
+import queryString from "query-string";
+import React from "react";
+import { useLocation } from "react-router";
+import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import DocumentEditor from "./document-editor.component";
+import { useTranslation } from "react-i18next";
+
+export default function DocumentEditorContainer() {
+  //Get the image details for the image to be saved.
+  //Get the document id from the search string.
+  const { documentId } = queryString.parse(useLocation().search);
+  const { t } = useTranslation();
+
+  const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
+    variables: { documentId },
+    skip: !documentId,
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  if (!data.documents_by_pk)
+    return <Result status="404" title={t("general.errors.notfound")} />;
+  return (
+    <div>
+      <DocumentEditor document={data ? data.documents_by_pk : null} />
+    </div>
+  );
+}