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

#2093 combine s group menus and remove generic s group #2140

Merged
Merged
Show file tree
Hide file tree
Changes from 4 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
6 changes: 0 additions & 6 deletions packages/ketcher-react/src/icons/files/sgroup-data.svg

This file was deleted.

2 changes: 0 additions & 2 deletions packages/ketcher-react/src/icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ import SelectFragmentIcon from './files/select-fragment.svg'
import SelectLassoIcon from './files/select-lasso.svg'
import SelectRectangleIcon from './files/select-rectangle.svg'
import SettingsIcon from './files/settings.svg'
import SgroupDataIcon from './files/sgroup-data.svg'
import SgroupIcon from './files/sgroup.svg'
import ShapeEllipseIcon from './files/shape-ellipse.svg'
import ShapeLineIcon from './files/shape-line.svg'
Expand Down Expand Up @@ -349,7 +348,6 @@ const icons = {
'select-lasso': SelectLassoIcon,
'select-rectangle': SelectRectangleIcon,
settings: SettingsIcon,
'sgroup-data': SgroupDataIcon,
sgroup: SgroupIcon,
'template-0': Template0Icon,
'template-1': Template1Icon,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export type ButtonName =
// left
// sgroup group
| 'sgroup'
| 'sgroup-data'
// reaction
// plus
| 'reaction-plus'
Expand Down
2 changes: 1 addition & 1 deletion packages/ketcher-react/src/script/editor/tool/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,7 @@ class SelectTool {
ci.map === 'sgroupData'
) {
editor.selection(closestToSel(ci))
SGroupTool.sgroupDialog(editor, ci.id, null)
SGroupTool.sgroupDialog(editor, ci.id)
} else if (ci.map === 'texts') {
editor.selection(closestToSel(ci))
const text = molecule.texts.get(ci.id)
Expand Down
16 changes: 6 additions & 10 deletions packages/ketcher-react/src/script/editor/tool/sgroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,11 @@ const searchMaps = [

class SGroupTool {
editor: Editor
type: any
lassoHelper: any
isNotActiveTool: boolean | undefined

constructor(editor, type) {
constructor(editor) {
this.editor = editor
this.type = type
this.lassoHelper = new LassoHelper(1, editor, null)

this.checkSelection()
Expand Down Expand Up @@ -143,7 +141,7 @@ class SGroupTool {
return
}

SGroupTool.sgroupDialog(this.editor, id ?? null, this.type)
SGroupTool.sgroupDialog(this.editor, id ?? null)
this.isNotActiveTool = true
}
}
Expand Down Expand Up @@ -448,7 +446,7 @@ class SGroupTool {
// TODO: handle click on an existing group?
if (id !== null || isAtomsOrBondsSelected) {
this.editor.selection(selection)
SGroupTool.sgroupDialog(this.editor, id, this.type)
SGroupTool.sgroupDialog(this.editor, id)
}
}

Expand All @@ -459,13 +457,11 @@ class SGroupTool {
this.editor.selection(null)
}

static sgroupDialog(editor, id, defaultType) {
static sgroupDialog(editor, id) {
const restruct = editor.render.ctab
const struct = restruct.molecule
const selection = editor.selection() || {}
const sg = id !== null ? struct.sgroups.get(id) : null
const type = sg ? sg.type : defaultType
const eventName = type === 'DAT' ? 'sdataEdit' : 'sgroupEdit'

let attrs
if (sg) {
Expand All @@ -477,8 +473,8 @@ class SGroupTool {
}
}

const res = editor.event[eventName].dispatch({
type,
const res = editor.event.sgroupEdit.dispatch({
type: sg?.type,
attrs
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ type ToolVariant =
| 'select-rectangle'
| 'settings'
| 'sgroup'
| 'sgroup-data'
| 'template-0'
| 'template-1'
| 'template-2'
Expand Down
6 changes: 0 additions & 6 deletions packages/ketcher-react/src/script/ui/action/tools.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,6 @@ const toolActions = {
action: { tool: 'sgroup' },
hidden: (options) => isHidden(options, 'sgroup')
},
'sgroup-data': {
shortcut: 'Mod+g',
title: 'Data S-Group',
action: { tool: 'sgroup', opts: 'DAT' },
hidden: (options) => isHidden(options, 'sgroup-data')
},
arrows: {
hidden: (options) => isHidden(options, 'arrows')
},
Expand Down
21 changes: 18 additions & 3 deletions packages/ketcher-react/src/script/ui/data/convert/structconv.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ import { AtomList, Bond, Elements, StereoLabel } from 'ketcher-core'

import { atom as atomSchema } from '../schema/struct-schema'
import { capitalize } from 'lodash/fp'
import { sdataSchema } from '../schema/sdata-schema'
import {
sdataSchema,
getSdataDefault,
sdataCustomSchema
} from '../schema/sdata-schema'

const DefaultStereoGroupNumber = 1

Expand Down Expand Up @@ -291,7 +295,7 @@ const bondCaptionMap = {
}

export function fromSgroup(ssgroup) {
const type = ssgroup.type || 'GEN'
const type = ssgroup.type || 'DAT'
const { context, fieldName, fieldValue, absolute, attached } = ssgroup.attrs

if (absolute === false && attached === false)
Expand All @@ -304,7 +308,18 @@ export function fromSgroup(ssgroup) {
)
ssgroup.attrs.fieldValue = fieldValue.split('\n')

return Object.assign({ type }, ssgroup.attrs)
const sDataInitValue =
type === 'DAT'
? {
context: context || getSdataDefault(sdataCustomSchema, 'context'),
fieldName:
fieldName || getSdataDefault(sdataCustomSchema, 'fieldName'),
fieldValue:
fieldValue || getSdataDefault(sdataCustomSchema, 'fieldValue')
}
: {}

return Object.assign({ type }, ssgroup.attrs, sDataInitValue)
}

export function toSgroup(sgroup) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ const sData = {

export const sdataCustomSchema = {
key: 'Custom',
title: 'Data',
type: 'object',
properties: {
type: { enum: ['DAT'] },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import { mapOf } from './schema-helper'
import { range } from 'lodash/fp'
import { sdataCustomSchema } from './sdata-schema'

export const atom = {
title: 'Atom',
Expand Down Expand Up @@ -216,12 +217,7 @@ const sgroup = {
required: ['type'],
oneOf: [
{
key: 'GEN',
title: 'Generic',
type: 'object',
properties: {
type: { enum: ['GEN'] }
}
...sdataCustomSchema
},
{
key: 'MUL',
Expand Down
6 changes: 2 additions & 4 deletions packages/ketcher-react/src/script/ui/dialog/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@ import PeriodTable from '../views/modal/components/PeriodTable'
import ExtendedTable from '../views/modal/components/ExtendedTable'
import { RemoveFG } from '../views/modal/components/toolbox/FG/RemoveFG'
import Rgroup from './toolbox/rgroup/rgroup'
import Sdata from './toolbox/sdata'
import Sgroup from './toolbox/sgroup'
import SGroup from './toolbox/sgroup'
import TemplateAttach from './template/template-attach'
import TemplatesDialog from './template/TemplateDialog'
import Text from '../views/modal/components/Text'
Expand Down Expand Up @@ -66,8 +65,7 @@ export default {
removeFG: RemoveFG,
save: Save,
settings: Settings,
sgroup: Sgroup,
sdata: Sdata,
sgroup: SGroup,
text: Text,
confirm: Confirm
} as any
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/****************************************************************************
* 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 { Field } from '../../component/form/form/form'
import { getSelectOptionsFromSchema } from '../../utils'
import Select from '../../component/form/Select'
import { sdataCustomSchema } from '../../data/schema/sdata-schema'

function SDataFieldset({ formState }) {
const { result } = formState
const formSchema = sdataCustomSchema

return (
<fieldset className="sdata">
<Field
name="context"
options={getSelectOptionsFromSchema(formSchema.properties.context)}
component={Select}
/>
<Field name="fieldName" placeholder="Enter name" />
{content(
formSchema,
result.context,
result.fieldName,
result.fieldValue,
result.radiobuttons
)}
</fieldset>
)
}

const content = (schema, context, fieldName, fieldValue, checked) =>
Object.keys(schema.properties)
.filter(
(prop) => prop !== 'type' && prop !== 'context' && prop !== 'fieldName'
)
.map((prop) => {
return prop === 'radiobuttons' ? (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I propose to don't use two nested ternary operators.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Thank you.

<Field
name={prop}
checked={checked}
type="radio"
key={`${context}-${fieldName}-${prop}-radio`}
labelPos={false}
/>
) : prop === 'fieldValue' ? (
<Field
name={prop}
key={`${context}-${fieldName}-${prop}-select`}
placeholder="Enter value"
/>
) : (
<Field
name={prop}
type="textarea"
key={`${context}-${fieldName}-${prop}-select`}
/>
)
})

export default SDataFieldset
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/****************************************************************************
* 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 { Field } from '../../component/form/form/form'
import Select from '../../component/form/Select'
import { sgroupMap as schemes } from '../../data/schema/struct-schema'
import { getSelectOptionsFromSchema } from '../../utils'
import classes from './sgroup.module.less'

function SGroupFieldset({ formState }) {
const { result } = formState

const type = result.type

return (
<fieldset className={type === 'DAT' ? classes.data : 'base'}>
{content(type)}
</fieldset>
)
}

const content = (type) =>
Object.keys(schemes[type].properties)
.filter((prop) => prop !== 'type')
.map((prop) => {
const props = {}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small proposal, may be the following can be better:

if (sGroupProperty === 'connectivity') {
  <Field
    name={prop}
    key={`${type}-${prop}`}
    {...props}
    component={Select}
    options={getSelectOptionsFromSchema(schemes[type].properties[prop])}
  />
}
const propsMapping = {
  name: { maxLength: 15 },
  fieldName: { maxLength: 30 },
  fieldValue: { type: 'textarea' },
  radiobuttons: { type: 'radio' }
}
const props = propsMapping[sGroupProperty] || {}
return <Field name={prop} key={`${type}-${prop}`} {...props} />

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Really good suggestions, thank you so much.

if (prop === 'name') props.maxLength = 15
if (prop === 'fieldName') props.maxLength = 30
if (prop === 'fieldValue') props.type = 'textarea'
if (prop === 'radiobuttons') props.type = 'radio'
if (prop === 'connectivity')
return (
<Field
name={prop}
key={`${type}-${prop}`}
{...props}
component={Select}
options={getSelectOptionsFromSchema(schemes[type].properties[prop])}
/>
)

return <Field name={prop} key={`${type}-${prop}`} {...props} />
})

export default SGroupFieldset
Loading