From 7c79e49c3e313a828baf08f1df44c3cf004526c8 Mon Sep 17 00:00:00 2001 From: Konstantin Levin Date: Tue, 17 Jan 2023 04:14:06 +0100 Subject: [PATCH 1/2] #2043: Thumbnail images are not readable in Template Dialog --- .../src/application/render/raphaelRender.js | 14 ++++++++++++-- .../script/ui/dialog/template/TemplateDialog.tsx | 5 +++++ .../script/ui/dialog/template/TemplateTable.tsx | 16 ++++++++++------ .../script/ui/state/saltsAndSolvents/index.ts | 7 ++++++- 4 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/ketcher-core/src/application/render/raphaelRender.js b/packages/ketcher-core/src/application/render/raphaelRender.js index 4bff83e97e..d16fed4f43 100644 --- a/packages/ketcher-core/src/application/render/raphaelRender.js +++ b/packages/ketcher-core/src/application/render/raphaelRender.js @@ -204,7 +204,12 @@ Render.prototype.update = function (force = false, viewSz = null) { .transform(Scale.obj2scaled, this.options) .translate(this.options.offset || new Vec2()) - if (!this.options.autoScale) { + if (this.options.downScale) { + this.ctab.molecule.rescale() + } + + const autoScale = this.options.autoScale || this.options.downScale + if (!autoScale) { const ext = Vec2.UNIT.scaled(sf) const eb = bb.sz().length() > 0 ? bb.extend(ext, ext) : bb const vb = new Box2Abs( @@ -237,7 +242,12 @@ Render.prototype.update = function (force = false, viewSz = null) { let rescale = this.options.rescaleAmount || Math.max(sz1.x / (csz.x - 2 * marg), sz1.y / (csz.y - 2 * marg)) - if (this.options.maxBondLength / rescale > 1.0) rescale = 1.0 + + const forceDownscale = this.options.downScale && rescale < 1 + const isBondsLengthFit = this.options.maxBondLength / rescale > 1 + if (isBondsLengthFit || forceDownscale) { + rescale = 1 + } const sz2 = sz1.add(mv.scaled(2 * rescale)) /* eslint-disable no-mixed-operators */ this.paper.setViewBox( diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx index 1d62e6b5a5..cae69514c9 100644 --- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx +++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx @@ -78,6 +78,7 @@ interface TemplateLibProps { mode: string tab: number saltsAndSolvents: Template[] + renderOptions?: any } interface TemplateLibCallProps { @@ -283,6 +284,7 @@ const TemplateDialog: FC = (props) => { selected={props.selected} onDelete={props.onDelete} onAttach={props.onAttach} + renderOptions={props.renderOptions} /> @@ -303,6 +305,7 @@ const TemplateDialog: FC = (props) => { templates={filteredFG} onSelect={(templ) => select(templ)} selected={props.selected} + renderOptions={props.renderOptions} /> ) : ( @@ -319,6 +322,7 @@ const TemplateDialog: FC = (props) => { templates={filteredSaltsAndSolvents} onSelect={(templ) => select(templ)} selected={props.selected} + renderOptions={props.renderOptions} /> ) : ( @@ -350,6 +354,7 @@ export default connect( (store) => ({ ...omit(['attach'], (store as any).templates), initialTab: (store as any).modal?.prop?.tab || TemplateTabs.TemplateLibrary, + renderOptions: (store as any).editor?.render?.options, functionalGroups: functionalGroupsSelector(store), saltsAndSolvents: saltsAndSolventsSelector(store) }), diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx index 3b3bbc30cc..24ff3eb0ba 100644 --- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx +++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx @@ -19,7 +19,6 @@ import { Struct } from 'ketcher-core' import StructRender from '../../component/structrender' import classes from './TemplateTable.module.less' import { greekify } from '../../utils' -import { useSelector } from 'react-redux' import Icon from 'src/script/ui/component/view/icon' export interface Template { @@ -41,9 +40,9 @@ interface TemplateTableProps { onDelete?: (tmpl: Template) => void onAttach?: (tmpl: Template) => void titleRows?: 1 | 2 + renderOptions?: any } -const getSettingsSelector = (state) => state.options.settings const isSaltOrSolventTemplate = (template) => template.props.group === 'Salts and Solvents' const isFunctionalGroupTemplate = (template) => @@ -71,8 +70,13 @@ const RenderTmpl: FC<{ return ( ) } @@ -84,9 +88,9 @@ const TemplateTable: FC = (props) => { onSelect, onDelete, onAttach, - titleRows = 2 + titleRows = 2, + renderOptions } = props - const options = useSelector((state) => getSettingsSelector(state)) return (
= (props) => { >
{ div.style.height = '100px' div.style.display = 'none' document.body.appendChild(div) - RenderStruct.render(div, struct, { ...settings, autoScaleMargin: 15 }) + RenderStruct.render(div, struct, { + ...settings, + autoScaleMargin: 10, + cachePrefix: 'saltsAndSolvents', + downScale: true + }) div.remove() }) } From 4383cf6f3f953652d2bdcb268afbf0aeb94c0192 Mon Sep 17 00:00:00 2001 From: Konstantin Levin Date: Tue, 17 Jan 2023 19:01:29 +0100 Subject: [PATCH 2/2] #2043: refactor after review --- .../ketcher-core/src/application/render/raphaelRender.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ketcher-core/src/application/render/raphaelRender.js b/packages/ketcher-core/src/application/render/raphaelRender.js index d16fed4f43..2ed35bdda1 100644 --- a/packages/ketcher-core/src/application/render/raphaelRender.js +++ b/packages/ketcher-core/src/application/render/raphaelRender.js @@ -208,8 +208,8 @@ Render.prototype.update = function (force = false, viewSz = null) { this.ctab.molecule.rescale() } - const autoScale = this.options.autoScale || this.options.downScale - if (!autoScale) { + const isAutoScale = this.options.autoScale || this.options.downScale + if (!isAutoScale) { const ext = Vec2.UNIT.scaled(sf) const eb = bb.sz().length() > 0 ? bb.extend(ext, ext) : bb const vb = new Box2Abs( @@ -243,9 +243,9 @@ Render.prototype.update = function (force = false, viewSz = null) { this.options.rescaleAmount || Math.max(sz1.x / (csz.x - 2 * marg), sz1.y / (csz.y - 2 * marg)) - const forceDownscale = this.options.downScale && rescale < 1 + const isForceDownscale = this.options.downScale && rescale < 1 const isBondsLengthFit = this.options.maxBondLength / rescale > 1 - if (isBondsLengthFit || forceDownscale) { + if (isBondsLengthFit || isForceDownscale) { rescale = 1 } const sz2 = sz1.add(mv.scaled(2 * rescale))