diff --git a/packages/ketcher-core/__tests__/domain/serializers/ket/fixtures/toKet.ts b/packages/ketcher-core/__tests__/domain/serializers/ket/fixtures/toKet.ts index 40d47fd36b..95e9a32d3d 100644 --- a/packages/ketcher-core/__tests__/domain/serializers/ket/fixtures/toKet.ts +++ b/packages/ketcher-core/__tests__/domain/serializers/ket/fixtures/toKet.ts @@ -13,6 +13,8 @@ import { Text } from 'domain/entities' +import { getNodeWithInvertedYCoord } from 'domain/serializers/ket/helpers' + const structs = { prepareContent: { atoms: [ @@ -1452,17 +1454,19 @@ const initStruct = (structName) => { break case 'rxnArrows': structData.rxnArrows.forEach((props) => - struct.rxnArrows.add(new RxnArrow(props)) + struct.rxnArrows.add(new RxnArrow(getNodeWithInvertedYCoord(props))) ) break case 'rxnPluses': structData.rxnPluses.forEach((props) => - struct.rxnPluses.add(new RxnPlus(props)) + struct.rxnPluses.add(new RxnPlus(getNodeWithInvertedYCoord(props))) ) break case 'simpleObjects': structData.simpleObjects.forEach((props) => - struct.simpleObjects.add(new SimpleObject(props)) + struct.simpleObjects.add( + new SimpleObject(getNodeWithInvertedYCoord(props)) + ) ) break case 'sgroups': @@ -1478,7 +1482,9 @@ const initStruct = (structName) => { }) break case 'texts': - structData.texts.forEach((props) => struct.texts.add(new Text(props))) + structData.texts.forEach((props) => + struct.texts.add(new Text(getNodeWithInvertedYCoord(props))) + ) break } }) diff --git a/packages/ketcher-core/src/domain/serializers/ket/fromKet/rxnToStruct.ts b/packages/ketcher-core/src/domain/serializers/ket/fromKet/rxnToStruct.ts index 431ef4c0ab..046e5e38e2 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/fromKet/rxnToStruct.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/fromKet/rxnToStruct.ts @@ -15,16 +15,17 @@ ***************************************************************************/ import { RxnArrow, RxnPlus, Struct } from 'domain/entities' +import { getNodeWithInvertedYCoord } from '../helpers' export function rxnToStruct(ketItem: any, struct: Struct): Struct { if (ketItem.type === 'arrow') { - struct.rxnArrows.add(new RxnArrow(ketItem.data)) + struct.rxnArrows.add(new RxnArrow(getNodeWithInvertedYCoord(ketItem.data))) } else { struct.rxnPluses.add( new RxnPlus({ pp: { x: ketItem.location[0], - y: ketItem.location[1], + y: -ketItem.location[1], z: ketItem.location[2] } }) diff --git a/packages/ketcher-core/src/domain/serializers/ket/fromKet/simpleObjectToStruct.ts b/packages/ketcher-core/src/domain/serializers/ket/fromKet/simpleObjectToStruct.ts index bd357fccc7..f4df9da69e 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/fromKet/simpleObjectToStruct.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/fromKet/simpleObjectToStruct.ts @@ -15,11 +15,12 @@ ***************************************************************************/ import { SimpleObject, SimpleObjectMode, Struct, Vec2 } from 'domain/entities' +import { getNodeWithInvertedYCoord } from '../helpers' export function simpleObjectToStruct(ketItem: any, struct: Struct): Struct { const object = ketItem.data.mode === 'circle' ? circleToEllipse(ketItem) : ketItem.data - struct.simpleObjects.add(new SimpleObject(object)) + struct.simpleObjects.add(new SimpleObject(getNodeWithInvertedYCoord(object))) return struct } diff --git a/packages/ketcher-core/src/domain/serializers/ket/fromKet/textToStruct.ts b/packages/ketcher-core/src/domain/serializers/ket/fromKet/textToStruct.ts index 85c03c530f..2326ac503b 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/fromKet/textToStruct.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/fromKet/textToStruct.ts @@ -15,9 +15,10 @@ ***************************************************************************/ import { Struct, Text } from 'domain/entities' +import { getNodeWithInvertedYCoord } from '../helpers' export function textToStruct(ketItem: any, struct: Struct) { - const object = ketItem.data + const object = getNodeWithInvertedYCoord(ketItem.data) struct.texts.add(new Text(object)) return struct diff --git a/packages/ketcher-core/src/domain/serializers/ket/helpers.ts b/packages/ketcher-core/src/domain/serializers/ket/helpers.ts new file mode 100644 index 0000000000..f4c585836e --- /dev/null +++ b/packages/ketcher-core/src/domain/serializers/ket/helpers.ts @@ -0,0 +1,28 @@ +/**************************************************************************** + * Copyright 2022 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 { cloneDeepWith, cloneDeep } from 'lodash' + +const customizer = (value: any) => { + if (typeof value === 'object' && value.y) { + const clonedValue = cloneDeep(value) + clonedValue.y = -clonedValue.y + return clonedValue + } +} + +export const getNodeWithInvertedYCoord = (node: object) => + cloneDeepWith(node, customizer) diff --git a/packages/ketcher-core/src/domain/serializers/ket/toKet/rxnToKet.ts b/packages/ketcher-core/src/domain/serializers/ket/toKet/rxnToKet.ts index 89fc55d5ad..a488b6c330 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/toKet/rxnToKet.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/toKet/rxnToKet.ts @@ -14,10 +14,12 @@ * limitations under the License. ***************************************************************************/ +import { getNodeWithInvertedYCoord } from '../helpers' + export function arrowToKet(arrowNode) { return { type: 'arrow', - data: arrowNode.data + data: getNodeWithInvertedYCoord(arrowNode.data) } } @@ -25,7 +27,7 @@ export function plusToKet(plusNode) { const coord = plusNode.center return { type: 'plus', - location: [coord.x, coord.y, coord.z], + location: [coord.x, -coord.y, coord.z], prop: plusNode.data } } diff --git a/packages/ketcher-core/src/domain/serializers/ket/toKet/simpleObjectToKet.ts b/packages/ketcher-core/src/domain/serializers/ket/toKet/simpleObjectToKet.ts index d55d4c44dd..060328865b 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/toKet/simpleObjectToKet.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/toKet/simpleObjectToKet.ts @@ -14,9 +14,11 @@ * limitations under the License. ***************************************************************************/ +import { getNodeWithInvertedYCoord } from '../helpers' + export function simpleObjectToKet(simpleObjectNode) { return { type: 'simpleObject', - data: simpleObjectNode.data + data: getNodeWithInvertedYCoord(simpleObjectNode.data) } } diff --git a/packages/ketcher-core/src/domain/serializers/ket/toKet/textToKet.ts b/packages/ketcher-core/src/domain/serializers/ket/toKet/textToKet.ts index 38db56d487..fa410f8f6a 100644 --- a/packages/ketcher-core/src/domain/serializers/ket/toKet/textToKet.ts +++ b/packages/ketcher-core/src/domain/serializers/ket/toKet/textToKet.ts @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. ***************************************************************************/ +import { getNodeWithInvertedYCoord } from '../helpers' export function textToKet(textNode) { return { type: 'text', - data: textNode.data + data: getNodeWithInvertedYCoord(textNode.data) } } diff --git a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx index 8a262be551..d3f2ff3534 100644 --- a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx +++ b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx @@ -35,7 +35,6 @@ interface DialogProps { title?: string params: DialogParams buttons?: Array - buttonsTop?: Array className?: string needMargin?: boolean withDivider?: boolean @@ -66,7 +65,6 @@ const Dialog: FC = (props) => { footerContent, className, buttonsNameMap, - buttonsTop, needMargin = true, withDivider = false, focusable = true, @@ -124,7 +122,6 @@ const Dialog: FC = (props) => { > {headerContent || {title}}
- {buttonsTop && buttonsTop.map((button) => button)} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less index 9ef8b1066d..9ac2bc08fe 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less @@ -16,31 +16,35 @@ @import '../../../../../../../style/variables.less'; -.button { - background-color: transparent; - border: none; - color: @color-icon-active; - margin: 0 8px 0 0; - padding: 0; - height: 14px; - - input[type='file'] { - display: none; - } +.headerContent { + display: flex; + gap: 8px; - &:hover { - color: @color-icon-hover; + .title { + padding-right: 4px; } + + .button { + background-color: transparent; + border: none; + color: @color-icon-active; + padding: 0; + font-size: 0; + + input[type='file'] { + display: none; + } - &:disabled { - color: @color-icon-disabled; + &:hover { + color: @color-icon-hover; + } + + &:disabled { + color: @color-icon-disabled; + } } } -.buttonOpen { - margin-left: @margin-left-right; -} - .accordion { fieldset { border: none; diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx index 8cdb7cefde..c2a01e031c 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx @@ -33,12 +33,14 @@ import Accordion from './Accordion' import { StructService } from 'ketcher-core' import SystemFonts from '../../../../../component/form/systemfonts' import classes from './Settings.module.less' -import clsx from 'clsx' import { connect } from 'react-redux' import { getSelectOptionsFromSchema } from '../../../../../utils' import { saveSettings } from '../../../../../state/options' -import settingsSchema from '../../../../../data/schema/options-schema' +import settingsSchema, { + getDefaultOptions +} from '../../../../../data/schema/options-schema' import fieldGroups from './fieldGroups' +import { isEqual } from 'lodash' interface SettingsProps extends BaseProps { initState: any @@ -59,6 +61,54 @@ interface SettingsCallProps extends BaseCallProps { onReset: () => void } +const defaultSettings = getDefaultOptions() + +const HeaderContent = ({ + server, + onOpenFile, + onReset, + formState, + initState +}) => { + const getIsResetDisabled = () => { + if (formState.result.init) return isEqual(defaultSettings, initState) + else return isEqual(defaultSettings, formState.result) + } + + return ( +
+ Settings + + + + + + + +
+ ) +} + type Props = SettingsProps & SettingsCallProps const settingsProps = settingsSchema.properties @@ -236,7 +286,6 @@ const SettingsDialog = (props: Props) => { return ( formState.result} valid={() => formState.valid} @@ -245,35 +294,15 @@ const SettingsDialog = (props: Props) => { buttons={['Cancel', 'OK']} withDivider needMargin={false} - buttonsTop={[ - - - , - - - , - - ]} + onOpenFile={onOpenFile} + onReset={onReset} + formState={formState} + initState={initState} + /> + } >