Skip to content

Commit

Permalink
Merge pull request #3941 from epam/3914-add-support-for-opening-struc…
Browse files Browse the repository at this point in the history
…tures-in-cdx-format-embedded-into-ms-powerpoint

Backmerge: #3914 – Add support for opening structures in CDX format embedded into MS PowerPoint
  • Loading branch information
captain2b authored Jan 26, 2024
2 parents 3b0588d + 0a495c9 commit 34855d1
Show file tree
Hide file tree
Showing 18 changed files with 444 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -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);
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
32 changes: 32 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/ketcher-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
};
63 changes: 54 additions & 9 deletions packages/ketcher-react/src/script/ui/utils/fileOpener.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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);
Expand All @@ -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;
}
});
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const MODAL_STATES = {
idle: 'idle',
textEditor: 'textEditor',
imageRec: 'imageRec',
presentationViewer: 'presentationViewer',
};

const FooterContent = ({ structStr, openHandler, copyHandler, onCancel }) => {
Expand Down Expand Up @@ -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);
Expand All @@ -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');

Expand All @@ -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
Expand Down Expand Up @@ -166,6 +176,7 @@ const Open: FC<Props> = (props) => {
structStr={structStr}
inputHandler={setStructStr}
autoFocus
structList={structList}
/>
</Dialog>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
}
}
Loading

0 comments on commit 34855d1

Please sign in to comment.