Skip to content

Commit

Permalink
Merge pull request #4076 from epam/4008-design-implementation-is-diff…
Browse files Browse the repository at this point in the history 
…erent-from-the-reference-design

Backmerge: 4008 design implementation is different from the reference design
  • Loading branch information
@captain2b
captain2b authored Feb 13, 2024
2 parents 911c0c5 + 73503fe commit 333d4af
Show file tree
Hide file tree
Showing 11 changed files with 84 additions and 63 deletions.
Binary file modified ...tx-files.spec.ts-snapshots/PPTX-files-open-empty-pptx-file-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...les/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...les/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions ketcher-autotests/tests/test-data/KET/simple-objects-with-changes-expected.ket
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
"mode": "line",
"pos": [
{
"x": -0.16486111111109558,
"y": -1.1111111111111125,
"x": -0.16486111111109203,
"y": -1.1111111111111134,
"z": 0
},
{
"x": 9.835138888888903,
"y": -1.1611111111111114,
"x": 9.835138888888904,
"y": -1.1611111111111123,
"z": 0
}
]
Expand All @@ -29,11 +29,11 @@
"pos": [
{
"x": 14.935138888888904,
"y": -0.11111111111111249,
"y": -0.11111111111111338,
"z": 0
},
{
"x": 23.960138888888906,
"x": 23.960138888888903,
"y": -4.236111111111114,
"z": 0
}
Expand All @@ -46,13 +46,13 @@
"mode": "ellipse",
"pos": [
{
"x": 3.8351388888889044,
"y": -3.8361111111111117,
"x": 3.835138888888906,
"y": -3.836111111111112,
"z": 0
},
{
"x": 12.610138888888901,
"y": -9.611111111111114,
"x": 12.610138888888903,
"y": -9.611111111111112,
"z": 0
}
]
Expand Down
4 changes: 4 additions & 0 deletions packages/ketcher-core/src/domain/entities/struct.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -806,6 +806,10 @@ export class Struct {
item.pos = item.pos.map((p) => p.scaled(scale));
item.position = item.position.scaled(scale);
});

this.simpleObjects.forEach((simpleObjects) => {
simpleObjects.pos = simpleObjects.pos.map((p) => p.scaled(scale));
});
}

rescale() {
Expand Down
8 changes: 5 additions & 3 deletions packages/ketcher-react/src/script/ui/utils/fileOpener.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,11 @@ function throughFileReader(file) {
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);
const sdf = CFB.find(CFB.parse(ole?.content), 'CONTENTS');
const base64String = arrayBufferToBase64(sdf?.content);
if (base64String.startsWith('VmpDRDAxMDAEAw')) {
structures.push(base64String);
}
}
});
content = { structures, isPPTX: true };
Expand Down
5 changes: 5 additions & 0 deletions packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,8 @@
.copyButton {
.button-primary();
}

.loadingContainer > div{
margin: auto;
padding: 1em;
}
16 changes: 13 additions & 3 deletions packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@

import { BaseCallProps, BaseProps } from '../../../modal.types';
import { FC, useEffect, useState } from 'react';
import { Dialog } from '../../../../components';
import { Dialog, LoadingCircles } from '../../../../components';
import classes from './Open.module.less';
import Recognize from '../../process/Recognize/Recognize';
import { fileOpener } from '../../../../../utils/';
import { DialogActionButton } from './components/DialogActionButton';
import { ViewSwitcher } from './components/ViewSwitcher';
import { getFormatMimeTypeByFileName } from 'ketcher-core';

interface OpenProps {
server: any;
errorHandler: (err: string) => void;
Expand Down Expand Up @@ -88,6 +87,7 @@ const Open: FC<Props> = (props) => {
const [fileName, setFileName] = useState<string>('');
const [opener, setOpener] = useState<any>();
const [currentState, setCurrentState] = useState(MODAL_STATES.idle);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
if (server) {
Expand All @@ -98,6 +98,7 @@ const Open: FC<Props> = (props) => {
}, [server]);

const onFileLoad = (files) => {
setIsLoading(true);
const onLoad = (fileContent) => {
if (fileContent.isPPTX) {
setStructStr('');
Expand All @@ -107,8 +108,12 @@ const Open: FC<Props> = (props) => {
setStructStr(fileContent);
setCurrentState(MODAL_STATES.textEditor);
}
setIsLoading(false);
};
const onError = () => {
setIsLoading(false);
errorHandler('Error processing file');
};
const onError = () => errorHandler('Error processing file');

setFileName(files[0].name);
opener.chosenOpener(files[0]).then(onLoad, onError);
Expand Down Expand Up @@ -178,6 +183,11 @@ const Open: FC<Props> = (props) => {
autoFocus
structList={structList}
/>
{isLoading && (
<div className={classes.loadingContainer}>
<LoadingCircles />
</div>
)}
</Dialog>
);
};
Expand Down
17 changes: 11 additions & 6 deletions ...l/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
.wrapper {
display: flex;
flex-direction: column;
margin: 1em 2em;
padding: 1em 2em;
gap: 1em;
width: 60vw;
height: 50vh;
max-width: 60em;
max-height: 30em;
border-bottom: 1px solid #e1e5ea;
}

.structuresWrapper {
Expand All @@ -35,17 +36,22 @@
}

.menuListWrapper {
background: @gray-background-color;
padding: 16px 8px;
background: @color-background-panel;
padding: 12px 8px;
border-radius: 8px;
flex: 1;
overflow-y: auto;
font-size: 12px;
display: flex;
flex-direction: column;

> ul {
overflow: auto;
background: @color-background-primary;
height: inherit;

> li {
padding: 0.5em;
font-size: 12px !important;

&:hover {
background: @color-spec-button-primary-hover !important;
Expand All @@ -61,7 +67,6 @@

> .header {
color: @color-text-secondary;
font-size: 1rem;
margin-bottom: 1em;
}
}
Expand Down Expand Up @@ -94,7 +99,7 @@
display: flex;
justify-content: center;
align-items: center;
border: solid @border-color;
border: 1px solid @border-color;
border-radius: 8px;
padding: 0.5em;
width: 100%;
Expand Down
76 changes: 35 additions & 41 deletions ...ews/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
***************************************************************************/

import { useCallback, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { MenuList } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
Expand Down Expand Up @@ -59,41 +59,42 @@ export const CDXStructuresViewer = ({
}
}, [inputHandler, itemsMap, selectedIndex]);

const getImages = useCallback(() => {
const itemsList = {};
const getImage = (str, index) => {
setLoading(true);
const promises = structList.map((str) => {
return parseStruct(str, server)
.then((struct) => {
return {
base64struct: str,
struct,
};
})
.catch((error) => {
return {
base64struct: str,
error: error.message || error,
};
});
});
Promise.allSettled(promises).then((values) => {
values.forEach((el, index) => {
if (el.status === 'fulfilled') {
itemsList[index] = el.value;
}
parseStruct(str, server)
.then((struct) => {
const object = {
base64struct: str,
struct,
};
setItemsMap((state) => ({ ...state, [index]: object }));
})
.catch((error) => {
const object = {
base64struct: str,
error: error.message || error,
};
setItemsMap((state) => ({ ...state, [index]: object }));
})
.finally(() => {
setLoading(false);
});
setItemsMap(itemsList);
setLoading(false);
setSelectedIndex(0);
});
}, [server, structList]);
};

useEffect(() => {
getImages();
}, [getImages]);
if (structList[selectedIndex] && !itemsMap[selectedIndex]) {
getImage(structList[selectedIndex], selectedIndex);
}
}, [itemsMap, selectedIndex]);

const renderStructure = (structure: item) => {
if (loading) {
return (
<div className={styles.centerWrapper}>
<LoadingCircles />
</div>
);
}
if (structure?.error) {
return <div>Error: {itemsMap[selectedIndex]?.error}</div>;
}
Expand All @@ -116,20 +117,19 @@ export const CDXStructuresViewer = ({
</div>
);
}
const menuList = Object.values(itemsMap) || [];
return (
<div className={styles.structuresWrapper}>
<div className={styles.menuListWrapper}>
<div className={styles.header}>Select structure</div>
<MenuList>
{menuList.map((value, index) => (
{structList.map((value, index) => (
<MenuItem
key={value.base64struct + index}
key={value + index}
selected={index === selectedIndex}
onClick={() => setSelectedIndex(index)}
>
{`Structure ${index + 1}`}
{value.error && <Icon name="error" />}
{itemsMap[index]?.error && <Icon name="error" />}
</MenuItem>
))}
</MenuList>
Expand All @@ -146,13 +146,7 @@ export const CDXStructuresViewer = ({
<div>
File: <span className={styles.fileName}>{fileName}</span>
</div>
{loading ? (
<div className={styles.centerWrapper}>
<LoadingCircles />
</div>
) : (
renderStructures()
)}
{renderStructures()}
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions packages/ketcher-react/src/style/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
@color-background-canvas: #f2f2f2;
@color-background-canvas-light: #fcfcfc;
@color-background-secondary: #f8feff;
@color-background-panel: #F5F6F7;

// Buttons
@color-button-primary: #005662;
Expand Down

0 comments on commit 333d4af

Please sign in to comment.