Merge pull request #3941 from epam/3914-add-support-for-opening-struc…

…tures-in-cdx-format-embedded-into-ms-powerpoint

Backmerge: #3914 – Add support for opening structures in CDX format embedded into MS PowerPoint

ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts

@@ -0,0 +1,28 @@
+import { test } from '@playwright/test';
+import {
+  waitForPageInit,
+  selectTopPanelButton,
+  TopPanelButton,
+  openFile,
+  takeEditorScreenshot,
+} from '@utils';
+
+test.describe('PPTX files', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForPageInit(page);
+  });
+
+  test('open pptx file', async ({ page }) => {
+    await selectTopPanelButton(TopPanelButton.Open, page);
+    await openFile('PPTX/pptx-with-chem-draw.pptx', page);
+    await takeEditorScreenshot(page);
+    await page.getByText('Structure 2').click();
+    await takeEditorScreenshot(page);
+  });
+
+  test('open empty pptx file', async ({ page }) => {
+    await selectTopPanelButton(TopPanelButton.Open, page);
+    await openFile('PPTX/pptx-empty.pptx', page);
+    await takeEditorScreenshot(page);
+  });
+});

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",

packages/ketcher-react/src/script/ui/state/server/selectors/index.ts

@@ -0,0 +1,19 @@
+/****************************************************************************
+ * 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.
+ ***************************************************************************/
+
+export const serverSelector = (state) => {
+  return state.options.app.server ? state.server : null;
+};

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) => {
@@ -39,18 +40,52 @@ export function fileOpener(server) {
   });
 }
 
+function arrayBufferToBase64(buffer) {
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
 function throughFileReader(file) {
-  const isCDX = file.name.endsWith('cdx') && !file.name.endsWith('b64cdx');
+  const CDX = 'cdx';
+  const PPTX = 'pptx';
+  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 CDX:
+          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);
+              const sdf = CFB.find(CFB.parse(ole.content), 'CONTENTS');
+              const base64String = arrayBufferToBase64(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 +94,17 @@ function throughFileReader(file) {
     rd.onerror = (event) => {
       reject(event);
     };
-    isCDX ? rd.readAsDataURL(file) : rd.readAsText(file, 'UTF-8');
+    switch (fileType) {
+      case CDX:
+        rd.readAsDataURL(file);
+        break;
+      case PPTX:
+        rd.readAsBinaryString(file);
+        break;
+      default:
+        rd.readAsText(file, 'UTF-8');
+        break;
+    }
   });
 }
 

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

packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less

@@ -0,0 +1,108 @@
+/****************************************************************************
+ * 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: @gray-background-color;
+  padding: 16px 8px;
+  border-radius: 8px;
+  flex: 1;
+  overflow-y: auto;
+
+  > ul {
+    background: @color-background-primary;
+
+    > li {
+      padding: 0.5em;
+
+      &:hover {
+        background: @color-spec-button-primary-hover !important;
+        color: white;
+      }
+    }
+
+    :global(.Mui-selected) {
+      background: @color-button-primary-clicked !important;
+      color: white;
+    }
+  }
+
+  > .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%;
+  }
+}