#3914 Add support for opening structures in CDX format embedded into …

…MS PowerPoint add and integrate new components
epam · Jan 23, 2024 · f8dfa27 · f8dfa27
1 parent 6040973
commit f8dfa27
Show file tree

Hide file tree

Showing 8 changed files with 364 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ketcher-react/package.json b/packages/ketcher-react/package.json
@@ -53,6 +53,7 @@
     "@emotion/styled": "^11.6.0",
     "@mui/material": "^5.2.4",
     "ajv": "^8.10.0",
+    "cfb": "^1.2.2",
     "clsx": "^1.1.1",
     "draft-js": "^0.11.7",
     "draft-js-custom-styles": "^2.1.1",

diff --git a/packages/ketcher-react/src/script/ui/utils/fileOpener.js b/packages/ketcher-react/src/script/ui/utils/fileOpener.js
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
+import * as CFB from 'cfb';
 
 export function fileOpener(server) {
   return new Promise((resolve, reject) => {
@@ -40,17 +41,42 @@ export function fileOpener(server) {
 }
 
 function throughFileReader(file) {
-  const isCDX = file.name.endsWith('cdx') && !file.name.endsWith('b64cdx');
+  let fileType;
+  if (file.name.endsWith('cdx') && !file.name.endsWith('b64cdx')) {
+    fileType = 'cdx';
+  } else if (file.name.endsWith('pptx')) {
+    fileType = 'pptx';
+  }
+
   return new Promise((resolve, reject) => {
     const rd = new FileReader(); // eslint-disable-line no-undef
 
-    rd.onload = () => {
-      let content;
-      if (isCDX) {
-        const base64String = rd.result.split(',').at(-1);
-        content = base64String;
-      } else {
-        content = rd.result;
+    rd.onload = (e) => {
+      let content, structures;
+      let cfb;
+      switch (fileType) {
+        case 'sdx':
+          content = rd.result.split(',').at(-1);
+          break;
+        case 'pptx':
+          cfb = CFB.read(e.target.result, { type: 'binary' });
+          structures = [];
+          cfb.FullPaths.forEach((path) => {
+            if (path.endsWith('.bin')) {
+              const ole = CFB.find(cfb, path);
+              console.log(ole);
+              const sdf = CFB.find(CFB.parse(ole.content), 'CONTENTS');
+              const base64String = btoa(
+                String.fromCharCode(...new Uint8Array(sdf.content)),
+              );
+              structures.push(base64String);
+            }
+          });
+          content = { structures: structures.reverse(), isPPTX: true };
+          break;
+        default:
+          content = rd.result;
+          break;
       }
       if (file.msClose) file.msClose();
       resolve(content);
@@ -59,7 +85,18 @@ function throughFileReader(file) {
     rd.onerror = (event) => {
       reject(event);
     };
-    isCDX ? rd.readAsDataURL(file) : rd.readAsText(file, 'UTF-8');
+
+    switch (fileType) {
+      case 'sdx':
+        rd.readAsDataURL(file);
+        break;
+      case 'pptx':
+        rd.readAsBinaryString(file);
+        break;
+      default:
+        rd.readAsText(file, 'UTF-8');
+        break;
+    }
   });
 }
 

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.tsx
@@ -40,6 +40,7 @@ const MODAL_STATES = {
   idle: 'idle',
   textEditor: 'textEditor',
   imageRec: 'imageRec',
+  presentationViewer: 'presentationViewer',
 };
 
 const FooterContent = ({ structStr, openHandler, copyHandler, onCancel }) => {
@@ -83,6 +84,7 @@ const Open: FC<Props> = (props) => {
   } = props;
 
   const [structStr, setStructStr] = useState<string>('');
+  const [structList, setStructList] = useState<string[]>([]);
   const [fileName, setFileName] = useState<string>('');
   const [opener, setOpener] = useState<any>();
   const [currentState, setCurrentState] = useState(MODAL_STATES.idle);
@@ -97,8 +99,14 @@ const Open: FC<Props> = (props) => {
 
   const onFileLoad = (files) => {
     const onLoad = (fileContent) => {
-      setStructStr(fileContent);
-      setCurrentState(MODAL_STATES.textEditor);
+      if (fileContent.isPPTX) {
+        setStructStr('');
+        setStructList(fileContent.structures);
+        setCurrentState(MODAL_STATES.presentationViewer);
+      } else {
+        setStructStr(fileContent);
+        setCurrentState(MODAL_STATES.textEditor);
+      }
     };
     const onError = () => errorHandler('Error processing file');
 
@@ -125,7 +133,9 @@ const Open: FC<Props> = (props) => {
   };
 
   const withFooterContent =
-    currentState === MODAL_STATES.textEditor && !isAnalyzingFile;
+    (currentState === MODAL_STATES.textEditor ||
+      currentState === MODAL_STATES.presentationViewer) &&
+    !isAnalyzingFile;
 
   // @TODO after refactoring of Recognize modal
   // add Recognize rendering logic into ViewSwitcher component here
@@ -166,6 +176,7 @@ const Open: FC<Props> = (props) => {
         structStr={structStr}
         inputHandler={setStructStr}
         autoFocus
+        structList={structList}
       />
     </Dialog>
   );

diff --git a/...l/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less b/...l/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less
@@ -0,0 +1,97 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+@import '../../../../../../../../../style/variables';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 1em 2em;
+  gap: 1em;
+  width: 60vw;
+  height: 50vh;
+  max-width: 60em;
+  max-height: 30em;
+}
+
+.structuresWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 2em;
+  height: 90%;
+  justify-content: space-between;
+}
+
+.menuListWrapper {
+  background: @color-background-canvas;
+  padding: 2em 1em;
+  border-radius: 8px;
+  flex: 1;
+
+  > ul {
+    background: @color-background-primary;
+
+    > li {
+      padding: 0.5em;
+    }
+  }
+
+  > .header {
+    color: @color-text-secondary;
+    font-size: 1rem;
+    margin-bottom: 1em;
+  }
+}
+
+.fileName {
+  font-weight: 600;
+}
+
+.menuItem {
+  margin: 0.5em 1em;
+}
+
+.centerWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  flex: 2;
+}
+
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid @border-color;
+  border-radius: 8px;
+  padding: 0.5em;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  > img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}