Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading