Save/Load image to/from KET file to canvas

[yauhen-karmyzau]

As a User, I want the ability to save and load images to and from a KET file so that I can store or retrieve my image-enhanced chemical structures in a consistent and reusable format.

Acceptance Criteria:

1. A KET structure should be defined to save image data. This structure should accommodate all necessary image details:

• Image in base64 format;
• The X and Y positions of an image on the canvas;
• Scaling is out of scope;
• Z-order must be included to object properties, however, Z-positioning is out of scope.

2. The application should be able to draw an image on the canvas if image data exists in the loaded KET file.
3. The application should be able to handle multiple images in a single KET file, allowing for complex diagrams with multiple visual aids.
4. If the same image is used multiple times in a diagram, each instance of the image should be saved separately in the KET file.
5. Image scaling is out of scope for this user story. The application should preserve the original size of the image as it was at the time of saving.
6. The X and Y positions of an image on the canvas should be saved in the KET file and used to position the image correctly when loading from the KET file.
7. All images should be placed at the top layer on the canvas when loaded from a KET file.
8. A user should be able to save the current state of the canvas, including any inserted images, to a KET file. This can be achieved through a 'Save Structure' function.
9. The saved KET file should accurately represent the state of the canvas at the time of saving, including the placement, size, and orientation of all elements and images.
10. When a KET file is loaded, the canvas should be updated to reflect the state saved in the file, including the placement, size, and orientation of all elements and images.

[ivanmaslow]

Some points to fix are discovered during exploratory testing on nightly env:

• When the user saves pictures to .ket file with elements and/or structures, pictures are multiplied in .ket file (the size of file is increased);
• Position of the image should be represented in .ket file using coordinates of center, height and width of image, now we have the different approach:
  
• Newly added shapes and arrows are on the top layer, not the picture:
  
• Validations for negative cases for corrupted .ket file;

[ivanmaslow]

Points from the previous testing iteration are fixed.
Exploratory testing on the nightly environment is finished, points below are covered, tests are prepared:

• Images position on canvas is defined in .ket format using coordinates of the center, half size of image (must be > 0):
  ;
• Only images from allowed list can be added: BMP, GIF, ICO, JPEG, JPG, PNG, WEBP, SVG
• Images of all allowed formats with/without different entities (elements, structures, bonds, chains, groups, reactions, shapes, text) can be saved together to .ket file with the correct coordinates of images and sizes of files, after that loaded from .ket file and added to Canvas with the correct positions and layer levels (images are on the top layer in order of adding):
  
• Images of all allowed formats can be copied from .ket format and added to Canvas with the correct positions and layer levels by "Add to Canvas", "Open as New Project" and clipboard options;
• Added to Canvas Images of all allowed formats are not presented on the Canvas after switching to Macro mode and presented after returning to Micro
• Images of all allowed formats can be zoomed in/out (20, 400, 100) before/after adding to Canvas
• Action of adding to Canvas images of all allowed formats together (BMP, GIF, ICO, JPEG, JPG, PNG, WEBP, SVG) can be Undo/Redo
• The .ket file with a corrupted data (wrong field name, wrong image type, not issues with base64, empty image) can't be added to Canvas, and an error message is displayed:
  

Remaining open points:

• Testing related to small/big images and small/big quantity of images;
• Update warning messages when the user tries to add not allowed format - "Unsupported image type", when the user tries to add image less than 16 px - "Image should be at least 16x16 pixels"
• Negative cases when base64 is corrupted and the image can't be displayed - low priority;
• Warning when the user tries to save to inappropriate formats will be implemented later - task number TBD;

[yauhen-karmyzau]

Warning when the user tries to save to inappropriate formats will be implemented later - task number TBD;

#5105 was created

[ivanmaslow]

Change requests:

• Images should be displayed not in front, however, in back.
• Due to Indigo limitations, currently, we can save static image with PNG and SVG only, so the list of supported formats should be limited to these ones.

[haditariq]

ket2-image.txt

I try to use attached file in (.ket) format. It passes the validation but doesn't display any image on the canvas.

[yauhen-karmyzau]

ket2-image.txt

I try to use attached file in (.ket) format. It passes the validation but doesn't display any image on the canvas.

This feature will be released in scope of Ketcher 2.24.0-rc.1 and it has some dependencies to #4897

[ivanmaslow]

New exploratory testing iteration after implementation of change requests on the Nightly env (4902 [Version 2.23.0-rc.1] Build at 2024-07-12; 10:06:35) is completed, points below are covered, tests are updated:

• Images position on canvas is defined in .ket format using coordinates of the center, half size of image (must be > 0):
  
• Only images from the allowed list can be added: PNG, SVG
• Images of allowed formats with/without different entities (elements, structures, bonds, chains, groups, reactions, shapes, text) can be saved together to .ket file with the correct coordinates of images and sizes of files, after that loaded from .ket file and added to Canvas with the correct positions and layer levels (images are at the top layer in order of adding to other images and at the bottom layer to other elements):
  
• Images of allowed formats can be copied from .ket format and added to Canvas with the correct positions and layer levels by "Add to Canvas", "Open as New Project" and clipboard options;
• Added to Canvas Images of allowed formats are not presented on the Canvas after switching to Macro mode and are presented after returning to Micro;
• Images of allowed formats can be zoomed in/out (20, 400, 100) before/after adding to Canvas;
• The action of adding to Canvas images of allowed formats together can be Undo/Redo;
• Testing of cases when there are many images and structures together;
• The .ket file with a corrupted data (wrong field name, wrong image type, issues with base64, length of bitmap, empty image) can't be added to Canvas, and an error message is displayed:
  ;
• Appropriate error messages are updated: When the user tries to add not allowed format - "Unsupported image type", when the user tries to add image less than 16 px - "Image should be at least 16x16 pixels";

Remaining open defects have low priority and will be fixed later:

• Loaded images change level layers after Undo/Redo #5118
• Empty image is added to Canvas from .ket file when image is corrupted #5146
• Application crashes in Google Chrome when pasting from clipboard .ket data with a large image  #5147
  One more not related issue was found:
• Saved Ellipse and Line Shapes in CDX, CDXML, Base 64 CDX formats are not correctly displayed after opening Indigo#2047

[ivanmaslow]

The data structure of the image in .ket will be changed - #5172, epam/Indigo#2168

[Zhirnoff]

Tested.

Desktop:

• OS: Windows 11
• Browser Chrome
• Version 124.0.6367.79 (Official Build) (64-bit)

Ketcher version
[Version 2.24.0-rc.1]
Indigo version
[Version 1.23.0-rc.1]