diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-can-be-added-to-d6840-nd-can-be-selected-and-moved-to-another-image-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-can-be-added-to-d6840-nd-can-be-selected-and-moved-to-another-image-2-chromium-linux.png index 6508da3234..087bb7e05c 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-can-be-added-to-d6840-nd-can-be-selected-and-moved-to-another-image-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-can-be-added-to-d6840-nd-can-be-selected-and-moved-to-another-image-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-PNG-SVG-w-190dc--images-after-scaling-of-them-and-then-opened-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-PNG-SVG-w-190dc--images-after-scaling-of-them-and-then-opened-2-chromium-linux.png index 949e478c6d..665bf13a9c 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-PNG-SVG-w-190dc--images-after-scaling-of-them-and-then-opened-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-PNG-SVG-w-190dc--images-after-scaling-of-them-and-then-opened-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-06723-ing-Rectangle-Selection-in-Add-Image-mode-1-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-06723-ing-Rectangle-Selection-in-Add-Image-mode-1-chromium-linux.png index 8458a951a3..7bb5bea0e1 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-06723-ing-Rectangle-Selection-in-Add-Image-mode-1-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-06723-ing-Rectangle-Selection-in-Add-Image-mode-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-b715b-d-using-Lasso-Selection-in-Add-Image-mode-1-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-b715b-d-using-Lasso-Selection-in-Add-Image-mode-1-chromium-linux.png index 8458a951a3..7bb5bea0e1 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-b715b-d-using-Lasso-Selection-in-Add-Image-mode-1-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-b715b-d-using-Lasso-Selection-in-Add-Image-mode-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-dcf01-sing-Fragment-Selection-in-Add-Image-mode-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-dcf01-sing-Fragment-Selection-in-Add-Image-mode-2-chromium-linux.png index b7a46c61be..6d40fe19f8 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-dcf01-sing-Fragment-Selection-in-Add-Image-mode-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-images-of-formats-PNG-dcf01-sing-Fragment-Selection-in-Add-Image-mode-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--1cda0-ther-and-separately-to-other-places-on-Canvas-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--1cda0-ther-and-separately-to-other-places-on-Canvas-2-chromium-linux.png index 24e2c96735..7aba3271e2 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--1cda0-ther-and-separately-to-other-places-on-Canvas-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--1cda0-ther-and-separately-to-other-places-on-Canvas-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--7089e-ther-and-separately-to-other-places-on-Canvas-3-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--7089e-ther-and-separately-to-other-places-on-Canvas-3-chromium-linux.png index 59dd414cbc..da2b28e71c 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--7089e-ther-and-separately-to-other-places-on-Canvas-3-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--7089e-ther-and-separately-to-other-places-on-Canvas-3-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--d663d--and-moved-together-to-other-places-on-Canvas-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--d663d--and-moved-together-to-other-places-on-Canvas-2-chromium-linux.png index de60910236..039b8fe30f 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--d663d--and-moved-together-to-other-places-on-Canvas-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-loaded-from-ket-file--d663d--and-moved-together-to-other-places-on-Canvas-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-PNG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-PNG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png index 949e478c6d..665bf13a9c 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-PNG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-PNG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-1-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-1-chromium-linux.png index b7a46c61be..6d40fe19f8 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-1-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png index d63e05c293..c05c6f7801 100644 Binary files a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Image-files/image-files.spec.ts-snapshots/Image-files-Verify-that-scaling-actions-of-image-SVG-on-Canvas-can-be-Undo-Redo-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-6c98c--and-its-size-can-be-changed-for-each-of-them-2-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-6c98c--and-its-size-can-be-changed-for-each-of-them-2-chromium-linux.png index 21896bbe52..a283a7fa7c 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-6c98c--and-its-size-can-be-changed-for-each-of-them-2-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-6c98c--and-its-size-can-be-changed-for-each-of-them-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-dff7a-ed-Arrow-after-that-they-can-be-saved-to-KET-2-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-dff7a-ed-Arrow-after-that-they-can-be-saved-to-KET-2-chromium-linux.png index c5db9f53a2..86e19b4a3d 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-dff7a-ed-Arrow-after-that-they-can-be-saved-to-KET-2-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Load-from-KET-3-differ-dff7a-ed-Arrow-after-that-they-can-be-saved-to-KET-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--512ac--Tailed-Arrows-after-adding-removing-of-tails-3-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--512ac--Tailed-Arrows-after-adding-removing-of-tails-3-chromium-linux.png index d9a066fba2..b0b9db074d 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--512ac--Tailed-Arrows-after-adding-removing-of-tails-3-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--512ac--Tailed-Arrows-after-adding-removing-of-tails-3-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--92c26-e-length-1-4-after-adding-removing-of-tails-4-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--92c26-e-length-1-4-after-adding-removing-of-tails-4-chromium-linux.png index db919ff90d..685c218aac 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--92c26-e-length-1-4-after-adding-removing-of-tails-4-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--92c26-e-length-1-4-after-adding-removing-of-tails-4-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--9ceec--elements-after-moving-changing-size-of-heads-2-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--9ceec--elements-after-moving-changing-size-of-heads-2-chromium-linux.png index 21896bbe52..a283a7fa7c 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--9ceec--elements-after-moving-changing-size-of-heads-2-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--9ceec--elements-after-moving-changing-size-of-heads-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--a46e0-with-two-tails-after-adding-removing-of-tails-3-chromium-linux.png b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--a46e0-with-two-tails-after-adding-removing-of-tails-3-chromium-linux.png index 36700ac615..191e740847 100644 Binary files a/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--a46e0-with-two-tails-after-adding-removing-of-tails-3-chromium-linux.png and b/ketcher-autotests/tests/Reactions/Reaction-tools/Multi-Tailed-Arrow-Tool/multi-tailed-arrow-tool.spec.ts-snapshots/Multi-Tailed-Arrow-Tool-Verify-that-Undo-Redo--a46e0-with-two-tails-after-adding-removing-of-tails-3-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Selection-Hover/simple-object-selection-and-hover.spec.ts-snapshots/Selection-and-hover-for-simple-objects-Hover-highlight-appears-immediately-for-simple-objects-1-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Selection-Hover/simple-object-selection-and-hover.spec.ts-snapshots/Selection-and-hover-for-simple-objects-Hover-highlight-appears-immediately-for-simple-objects-1-chromium-linux.png index 393cb37742..fe5be9262e 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Selection-Hover/simple-object-selection-and-hover.spec.ts-snapshots/Selection-and-hover-for-simple-objects-Hover-highlight-appears-immediately-for-simple-objects-1-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Selection-Hover/simple-object-selection-and-hover.spec.ts-snapshots/Selection-and-hover-for-simple-objects-Hover-highlight-appears-immediately-for-simple-objects-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Simple-Objects/simple-objects-draw-ellipse.spec.ts-snapshots/Draw-Ellipse-Simple-Objects---Draw-a-Ellipse---draw-and-highlightt-elllipse-1-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Simple-Objects/simple-objects-draw-ellipse.spec.ts-snapshots/Draw-Ellipse-Simple-Objects---Draw-a-Ellipse---draw-and-highlightt-elllipse-1-chromium-linux.png index 393cb37742..fe5be9262e 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Simple-Objects/simple-objects-draw-ellipse.spec.ts-snapshots/Draw-Ellipse-Simple-Objects---Draw-a-Ellipse---draw-and-highlightt-elllipse-1-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Simple-Objects/simple-objects-draw-ellipse.spec.ts-snapshots/Draw-Ellipse-Simple-Objects---Draw-a-Ellipse---draw-and-highlightt-elllipse-1-chromium-linux.png differ diff --git a/packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts b/packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts index 1bc9f4d242..d9120a0d52 100644 --- a/packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts +++ b/packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts @@ -59,7 +59,7 @@ it('should get hover path and style for simple objects correctly', () => { const render = new Render(document as unknown as HTMLElement, option); const paths = reSimpleObject.hoverPath(render); expect( - paths.filter((path) => path.path.attrs.fill === '#fff')?.length, + paths.filter((path) => path.path.attrs.stroke === '#CCFFDD')?.length, ).toBeGreaterThanOrEqual(1); }); }); diff --git a/packages/ketcher-core/src/application/editor/operations/image/imageResize.ts b/packages/ketcher-core/src/application/editor/operations/image/imageResize.ts index 89a46c3336..b3fc5541cc 100644 --- a/packages/ketcher-core/src/application/editor/operations/image/imageResize.ts +++ b/packages/ketcher-core/src/application/editor/operations/image/imageResize.ts @@ -64,8 +64,9 @@ export class ImageResize extends BaseOperation { } item.resize(topLeftPosition, bottomRightPosition); + const next = renderItem.visel.paths[0].next; reStruct.clearVisel(renderItem.visel); - renderItem.show(reStruct, reStruct.render.options); + renderItem.show(reStruct, reStruct.render.options, next); } invert(): BaseOperation { diff --git a/packages/ketcher-core/src/application/editor/operations/multitailArrow/multitailArrowAddRemoveTail.ts b/packages/ketcher-core/src/application/editor/operations/multitailArrow/multitailArrowAddRemoveTail.ts index f3667da22c..eea90946c5 100644 --- a/packages/ketcher-core/src/application/editor/operations/multitailArrow/multitailArrowAddRemoveTail.ts +++ b/packages/ketcher-core/src/application/editor/operations/multitailArrow/multitailArrowAddRemoveTail.ts @@ -2,9 +2,14 @@ import { BaseOperation } from 'application/editor/operations/base'; import { OperationType } from 'application/editor'; import { ReStruct } from 'application/render'; +import { FixedPrecisionCoordinates } from 'domain/entities'; export class MultitailArrowAddTail extends BaseOperation { - constructor(private itemId: number, private tailId?: number) { + constructor( + private itemId: number, + private tailId?: number, + private coordinate?: FixedPrecisionCoordinates, + ) { super(OperationType.MULTITAIL_ARROW_ADD_TAIL); } @@ -15,8 +20,7 @@ export class MultitailArrowAddTail extends BaseOperation { if (!reMultitailArrow || !multitailArrow) { return; } - - this.tailId = multitailArrow.addTail(this.tailId); + this.tailId = multitailArrow.addTail(this.tailId, this.coordinate); BaseOperation.invalidateItem(reStruct, 'multitailArrows', this.itemId, 1); } @@ -26,6 +30,7 @@ export class MultitailArrowAddTail extends BaseOperation { } export class MultitailArrowRemoveTail extends BaseOperation { + private coordinate?: FixedPrecisionCoordinates; constructor(private itemId: number, private tailId: number) { super(OperationType.MULTITAIL_ARROW_REMOVE_TAIL); } @@ -33,8 +38,9 @@ export class MultitailArrowRemoveTail extends BaseOperation { execute(reStruct: ReStruct) { const reMultitailArrow = reStruct.multitailArrows.get(this.itemId); const multitailArrow = reStruct.molecule.multitailArrows.get(this.itemId); + this.coordinate = multitailArrow?.getTailCoordinate(this.tailId); - if (!reMultitailArrow || !multitailArrow) { + if (!reMultitailArrow || !multitailArrow || !this.coordinate) { return; } @@ -43,6 +49,6 @@ export class MultitailArrowRemoveTail extends BaseOperation { } invert(): BaseOperation { - return new MultitailArrowAddTail(this.itemId, this.tailId); + return new MultitailArrowAddTail(this.itemId, this.tailId, this.coordinate); } } diff --git a/packages/ketcher-core/src/application/render/options.ts b/packages/ketcher-core/src/application/render/options.ts index d373c5af08..d24e5ebfd7 100644 --- a/packages/ketcher-core/src/application/render/options.ts +++ b/packages/ketcher-core/src/application/render/options.ts @@ -101,6 +101,11 @@ function defaultOptions(renderOptions: RenderOptions): RenderOptions { fill: '#CCFFDD', 'stroke-width': (0.6 * scaleFactorMicro) / 20, }, + innerHoverStyle: { + stroke: '#CCFFDD', + fill: 'none', + 'stroke-width': (4.6 * scaleFactorMicro) / 20, + }, sgroupBracketStyle: { stroke: 'darkgray', 'stroke-width': (0.5 * scaleFactorMicro) / 20, diff --git a/packages/ketcher-core/src/application/render/render.types.ts b/packages/ketcher-core/src/application/render/render.types.ts index 5d85b4be1f..e40696e8ed 100644 --- a/packages/ketcher-core/src/application/render/render.types.ts +++ b/packages/ketcher-core/src/application/render/render.types.ts @@ -77,6 +77,7 @@ export type RenderOptions = { bondSnappingStyle: RenderOptionStyles; selectionStyle: RenderOptionStyles; hoverStyle: RenderOptionStyles; + innerHoverStyle: RenderOptionStyles; movingStyle: RenderOptionStyles; sgroupBracketStyle: RenderOptionStyles; lassoStyle: RenderOptionStyles; diff --git a/packages/ketcher-core/src/application/render/restruct/generalEnumTypes.ts b/packages/ketcher-core/src/application/render/restruct/generalEnumTypes.ts index 71e9f8c4ec..95cf106e5d 100644 --- a/packages/ketcher-core/src/application/render/restruct/generalEnumTypes.ts +++ b/packages/ketcher-core/src/application/render/restruct/generalEnumTypes.ts @@ -20,9 +20,10 @@ */ export enum LayerMap { background = 'background', + images = 'images', selectionPlate = 'selectionPlate', + selectionPoints = 'selectionPoints', hovering = 'hovering', - images = 'images', atom = 'atom', bondSkeleton = 'bondSkeleton', warnings = 'warnings', diff --git a/packages/ketcher-core/src/application/render/restruct/reImage.ts b/packages/ketcher-core/src/application/render/restruct/reImage.ts index a3825c1fac..4285da4f8e 100644 --- a/packages/ketcher-core/src/application/render/restruct/reImage.ts +++ b/packages/ketcher-core/src/application/render/restruct/reImage.ts @@ -162,46 +162,63 @@ export class ReImage extends ReObject { this.selectionPointsSet.push(element); }); reStruct.addReObjectPath( - LayerMap.selectionPlate, + LayerMap.selectionPoints, this.visel, this.selectionPointsSet, ); } - show(restruct: ReStruct, renderOptions: RenderOptions) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + show(restruct: ReStruct, renderOptions: RenderOptions, nextPath?: any) { const scaledTopLeftWithOffset = this.getScaledPointWithOffset( this.image.getTopLeftPosition(), renderOptions, ); const dimensions = this.getDimensions(renderOptions); - restruct.addReObjectPath( - LayerMap.images, - this.visel, - restruct.render.paper.image( - this.image.bitmap, - scaledTopLeftWithOffset.x, - scaledTopLeftWithOffset.y, - dimensions.x, - dimensions.y, - ), + const image = restruct.render.paper.image( + this.image.bitmap, + scaledTopLeftWithOffset.x, + scaledTopLeftWithOffset.y, + dimensions.x, + dimensions.y, ); + restruct.addReObjectPath(LayerMap.images, this.visel, image); + + if (nextPath) { + image.insertBefore(nextPath); + } } drawHover(render: Render) { const offset = this.getScale(render.options) * (1 + REFERENCE_POINT_LINE_WIDTH_MULTIPLIER); + const STROKE_WIDTH = 0.6; + const FILL_WIDTH = 2 * offset - STROKE_WIDTH; const { topLeftPosition, bottomRightPosition } = this.getSelectionReferencePositions(render.options); const outerBorderOffset = new Vec2(offset, offset); const topLeftCorner = topLeftPosition.sub(outerBorderOffset); - const dimensions = bottomRightPosition - .sub(topLeftPosition) - .add(outerBorderOffset.scaled(2)); - const paths = render.paper - .rect(topLeftCorner.x, topLeftCorner.y, dimensions.x, dimensions.y) - .attr({ ...render.options.hoverStyle, fill: '#fff' }); + const dimensions = bottomRightPosition.sub(topLeftPosition); + const dimensionsWithBorders = dimensions.add(outerBorderOffset.scaled(2)); + + const paths = [ + render.paper + .rect( + topLeftCorner.x, + topLeftCorner.y, + dimensionsWithBorders.x, + dimensionsWithBorders.y, + ) + .attr({ ...render.options.hoverStyle, fill: 'none' }), + render.paper + .rect(topLeftPosition.x, topLeftPosition.y, dimensions.x, dimensions.y) + .attr({ + ...render.options.innerHoverStyle, + 'stroke-width': FILL_WIDTH, + }), + ]; render.ctab.addReObjectPath(LayerMap.hovering, this.visel, paths); diff --git a/packages/ketcher-core/src/application/render/restruct/reobject.ts b/packages/ketcher-core/src/application/render/restruct/reobject.ts index d9923c063b..42b71ff5ff 100644 --- a/packages/ketcher-core/src/application/render/restruct/reobject.ts +++ b/packages/ketcher-core/src/application/render/restruct/reobject.ts @@ -19,6 +19,7 @@ import ReStruct from './restruct'; import { Render } from '../raphaelRender'; import { Scale } from 'domain/helpers'; import Visel from './visel'; +import { IMAGE_KEY } from 'domain/constants'; class ReObject { public visel: Visel; @@ -33,7 +34,7 @@ class ReObject { changeSelectionStyle(options: any) { const { hoverStyle } = options; - if (this.visel.type === 'simpleObject') { + if (['simpleObject', IMAGE_KEY].includes(this.visel.type)) { this.hovering?.attr({ 'fill-opacity': this.selected ? 1 : 0, }); diff --git a/packages/ketcher-core/src/application/render/restruct/resimpleObject.ts b/packages/ketcher-core/src/application/render/restruct/resimpleObject.ts index c1437aa864..8304ccd24e 100644 --- a/packages/ketcher-core/src/application/render/restruct/resimpleObject.ts +++ b/packages/ketcher-core/src/application/render/restruct/resimpleObject.ts @@ -191,15 +191,11 @@ class ReSimpleObject extends ReObject { return refPoints; } - getHoverPathStyle( - path: any, - render: Render, - isOuterShapeOfHoverPath: boolean, - ) { - if (isOuterShapeOfHoverPath) { - return path.attr(render.options.hoverStyle); + getFigureHoverPath(path: any, render: Render, isBorder = true) { + if (isBorder) { + return path.attr({ ...render.options.hoverStyle, fill: 'none' }); } else { - return path.attr({ ...render.options.hoverStyle, fill: '#fff' }); + return path.attr(render.options.innerHoverStyle); } } @@ -214,33 +210,47 @@ class ReSimpleObject extends ReObject { const paths: Array = []; // TODO: It seems that inheritance will be the better approach here + const lineOffset = scaleFactor / 8; switch (this.item.mode) { case SimpleObjectMode.ellipse: { const rad = Vec2.diff(point[1], point[0]); const rx = rad.x / 2; const ry = rad.y / 2; - const outerEllipse = render.paper.ellipse( - tfx(point[0].x + rx), - tfx(point[0].y + ry), - tfx(Math.abs(rx) + scaleFactor / 8), - tfx(Math.abs(ry) + scaleFactor / 8), + const centerX = tfx(point[0].x + rx); + const centerY = tfx(point[0].y + ry); + const outerBorderEllipse = render.paper.ellipse( + centerX, + centerY, + tfx(Math.abs(rx) + lineOffset), + tfx(Math.abs(ry) + lineOffset), ); paths.push({ - path: this.getHoverPathStyle(outerEllipse, render, true), + path: this.getFigureHoverPath(outerBorderEllipse, render), + stylesApplied: true, + }); + + const fillEllipse = render.paper.ellipse( + centerX, + centerY, + tfx(Math.abs(rx)), + tfx(Math.abs(ry)), + ); + paths.push({ + path: this.getFigureHoverPath(fillEllipse, render, false), stylesApplied: true, }); if ( Math.abs(rx) - scaleFactor / 8 > 0 && Math.abs(ry) - scaleFactor / 8 > 0 ) { - const innerEllipse = render.paper.ellipse( - tfx(point[0].x + rx), - tfx(point[0].y + ry), - tfx(Math.abs(rx) - scaleFactor / 8), - tfx(Math.abs(ry) - scaleFactor / 8), + const innerBorderEllipse = render.paper.ellipse( + centerX, + centerY, + tfx(Math.abs(rx) - lineOffset), + tfx(Math.abs(ry) - lineOffset), ); paths.push({ - path: this.getHoverPathStyle(innerEllipse, render, false), + path: this.getFigureHoverPath(innerBorderEllipse, render), stylesApplied: true, }); } @@ -248,50 +258,40 @@ class ReSimpleObject extends ReObject { } case SimpleObjectMode.rectangle: { - const outerRect = render.paper.rect( - tfx(Math.min(point[0].x, point[1].x) - scaleFactor / 8), - tfx(Math.min(point[0].y, point[1].y) - scaleFactor / 8), - tfx( - Math.max(point[0].x, point[1].x) - - Math.min(point[0].x, point[1].x) + - scaleFactor / 4, - ), - tfx( - Math.max(point[0].y, point[1].y) - - Math.min(point[0].y, point[1].y) + - scaleFactor / 4, - ), + const leftX = Math.min(point[0].x, point[1].x); + const topY = Math.min(point[0].y, point[1].y); + const rightX = Math.max(point[0].x, point[1].x) - leftX; + const bottomY = Math.max(point[0].y, point[1].y) - topY; + + const outerBorderRect = render.paper.rect( + tfx(leftX - lineOffset), + tfx(topY - lineOffset), + tfx(rightX + 2 * lineOffset), + tfx(bottomY + 2 * lineOffset), ); paths.push({ - path: this.getHoverPathStyle(outerRect, render, true), + path: this.getFigureHoverPath(outerBorderRect, render), stylesApplied: true, }); - if ( - Math.max(point[0].x, point[1].x) - - Math.min(point[0].x, point[1].x) - - scaleFactor / 4 > - 0 && - Math.max(point[0].y, point[1].y) - - Math.min(point[0].y, point[1].y) - - scaleFactor / 4 > - 0 - ) { + const fillRect = render.paper.rect( + tfx(leftX), + tfx(topY), + tfx(rightX), + tfx(bottomY), + ); + paths.push({ + path: this.getFigureHoverPath(fillRect, render, false), + stylesApplied: true, + }); + if (rightX - 2 * lineOffset > 0 && bottomY - 2 * lineOffset > 0) { const innerRect = render.paper.rect( - tfx(Math.min(point[0].x, point[1].x) + scaleFactor / 8), - tfx(Math.min(point[0].y, point[1].y) + scaleFactor / 8), - tfx( - Math.max(point[0].x, point[1].x) - - Math.min(point[0].x, point[1].x) - - scaleFactor / 4, - ), - tfx( - Math.max(point[0].y, point[1].y) - - Math.min(point[0].y, point[1].y) - - scaleFactor / 4, - ), + tfx(leftX + lineOffset), + tfx(topY + lineOffset), + tfx(rightX - 2 * lineOffset), + tfx(bottomY - 2 * lineOffset), ); paths.push({ - path: this.getHoverPathStyle(innerRect, render, false), + path: this.getFigureHoverPath(innerRect, render), stylesApplied: true, }); } @@ -342,7 +342,7 @@ class ReSimpleObject extends ReObject { p0.y - ((k * scaleFactor) / 8) * Math.cos(angle), ); paths.push({ - path: this.getHoverPathStyle(render.paper.path(poly), render, true), + path: render.paper.path(poly).attr(render.options.hoverStyle), stylesApplied: true, }); break; @@ -390,7 +390,7 @@ class ReSimpleObject extends ReObject { ); }); restruct.addReObjectPath( - LayerMap.selectionPlate, + LayerMap.selectionPoints, this.visel, this.selectionPointsSet, ); diff --git a/packages/ketcher-core/src/application/render/restruct/restruct.ts b/packages/ketcher-core/src/application/render/restruct/restruct.ts index bc696f597a..620adfaec2 100644 --- a/packages/ketcher-core/src/application/render/restruct/restruct.ts +++ b/packages/ketcher-core/src/application/render/restruct/restruct.ts @@ -84,7 +84,7 @@ class ReStruct { public multitailArrows = new Map(); private initialized = false; - private layers: Array = []; + private layers: Record = {} as Record; public connectedComponents: Pool = new Pool(); private ccFragmentType: Pool = new Pool(); private structChanged = false; @@ -789,7 +789,6 @@ class ReStruct { } this.showItemSelection(item, selected); - item.selectionPlate?.toBack(); }); } }); diff --git a/packages/ketcher-core/src/domain/entities/index.ts b/packages/ketcher-core/src/domain/entities/index.ts index 5d7f191fa8..e97692bb57 100644 --- a/packages/ketcher-core/src/domain/entities/index.ts +++ b/packages/ketcher-core/src/domain/entities/index.ts @@ -17,6 +17,7 @@ export * from './atom'; export * from './atomList'; export * from './bond'; +export * from './fixedPrecision'; export * from './fragment'; export * from './functionalGroup'; export * from './halfBond'; diff --git a/packages/ketcher-core/src/domain/entities/multitailArrow.ts b/packages/ketcher-core/src/domain/entities/multitailArrow.ts index cae98c39ce..76aaa38d9f 100644 --- a/packages/ketcher-core/src/domain/entities/multitailArrow.ts +++ b/packages/ketcher-core/src/domain/entities/multitailArrow.ts @@ -3,7 +3,7 @@ import { Vec2 } from 'domain/entities/vec2'; import { Pool } from 'domain/entities/pool'; import { getNodeWithInvertedYCoord, KetFileNode } from 'domain/serializers'; import { MULTITAIL_ARROW_SERIALIZE_KEY } from 'domain/constants'; -import { FixedPrecisionCoordinates } from 'domain/entities/fixedPrecision'; +import { FixedPrecisionCoordinates } from 'domain/entities'; export type Line = [Vec2, Vec2]; @@ -365,7 +365,16 @@ export class MultitailArrow extends BaseMicromoleculeEntity { ); } - addTail(id?: number): number { + getTailCoordinate(id: number): FixedPrecisionCoordinates | undefined { + return this.tailsYOffset.get(id); + } + + addTail(id?: number, coordinate?: FixedPrecisionCoordinates): number { + // Coordinate can only be present for undo\redo + if (typeof id === 'number' && coordinate) { + this.tailsYOffset.set(id, coordinate); + return id; + } const { center, distance } = this.getTailsMaxDistance(); if (!MultitailArrow.canAddTail(distance)) { throw new Error('Cannot add tail because no minimal distance found'); diff --git a/packages/ketcher-react/src/script/ui/state/editor/index.js b/packages/ketcher-react/src/script/ui/state/editor/index.js index ca47b2090b..7149d2f9d4 100644 --- a/packages/ketcher-react/src/script/ui/state/editor/index.js +++ b/packages/ketcher-react/src/script/ui/state/editor/index.js @@ -49,7 +49,7 @@ export default function initEditor(dispatch, getState) { // eslint-disable-line no-shadow const state = global.currentState; const activeTool = state.actionState.activeTool.tool; - if (activeTool === 'select') return; + if (activeTool === 'select' && !force) return; const selectMode = state.toolbar.visibleTools.select; const resetOption = state.options.settings.resetToSelect; if (resetOption === true || resetOption === activeTool || force === true)