Insert image to canvas via "Add image" tool, Select, Move and Scale the image

[yauhen-karmyzau]

As a User, I want to be able to insert, select, scale and move images on the canvas so that I can enhance my chemical structure diagrams with relevant visuals and adjust them to fit my needs.

Acceptance Criteria:

1. A user should be able to add an image using a dedicated 'Add Image' button located at the side panel with the static tools. The application should support at least the PNG image format and, if feasible, other commonly used image formats like JPEG, GIF, and SVG.

2. An image should be placed on the canvas on the click event under the mouse pointer.
3. A user should be able to select an image by clicking on it with the selection and "Add Image" tools. The selected image should be visibly highlighted or outlined and the Scale functionality must be visible.
4. A user should be able to scale (enlarge or reduce) a selected image using a dedicated 'Scale' option. The application should provide real-time feedback as the user scales an image.
5. A user should be able to move a selected image around the canvas.
6. After the image is inserted, moved or scaled, the user should be able to undo/redo his actions. The new size and position of the image must be saveable to supported formats (KET).
7. If a user tries to upload an unsupported image format, they should be shown an error message. Moving and rotating images are out of scope for this user story.

TBD: Design of the image selection and UI elements for scaling.

#4897 (comment)

Ketcher is not support file insert from the system clipboard. This functionality may be implemented in scope of separate issue.

[yauhen-karmyzau]

Drag-n-Drop is out of scope! New feature need to be created.

[vanoprenko]

It doesn't make a lot of sense to deal with SVG as with raster. Let's either exclude it from scope (add with a separate ticket) or support as a vector.

[daniil-sloboda]

In case some images are not working due to size\format they are out of scope

[yauhen-karmyzau]

"stick to the mouse" - if too complex - out of scope.

[yauhen-karmyzau]

Team Agreement:
We can implement the same behaviour as for other "static tools:

1. A User selects Insert image tool, the tool in the sidebar becomes active.
2. A User clicks on the canvas and the system "select a file" window appears.
3. When an image is uploaded , it appears at the place of the click.
4. The tool in the sidebar becomes inactive when a User selects another tool. (Do we have any other scenarios?)

[yauhen-karmyzau]

Missed AC:

• A User should be able to switch to Macro mode and back.
• Images shouldn’t be visible in Micro.

[ivanmaslow]

Missed AC:

• User can zoom in and zoom out the canvas with an inserted image, while image is displayed according to the zoom and does not change its position;
• Image can be selected using selection tools: rectangle, lasso, fragment:
  
• Image can be deleted using "Erase", "Clear Canvas" (Ctrl + Del) tools and buttons - Delete and Backspace;
• User can Undo/Redo actions with images;
• User can Copy/Cut/Delete images on the Canvas;

[ivanmaslow]

Points below are discovered during exploratory testing on 08.07.24, need to be fixed:

• User can't add the same picture several times using 'Add image' option
• Need to update tooltip from 'Add image' to 'Add Image';
• We are going to add white list for allowed formats (bmp, gif, jpeg, jpg, png, svg, webp);

[yauhen-karmyzau]

Ketcher is not support file insert from the system clipboard. This functionality may be implemented in scope of separate issue.

[ivanmaslow]

Points from the previous comment are fixed.
Points below are detected during exploratory testing on the nightly environment, need to be fixed:

• When images are loaded from .ket file they can't be selected;
• Can't delete the image;
• Problem with selection on the intersection of 2 images.

[ivanmaslow]

Points from the previous comment are fixed.
Points below are detected during exploratory testing on the nightly environment, need to be fixed:

• Copy/Paste actions don't work for Images
• Adding of structures are affected;
• When the image is selected, white frame is displayed near green selection frame;
• Left corner of selection is rounded;
• Images change level layers after Undo/Redo will be fixed separately - Loaded images change level layers after Undo/Redo #5118
• Selection frame is displayed not proper for overlapped images will be fixed separately -Selection frame is displayed improperly for overlapped images #5097

[yauhen-karmyzau]

Change requests:

1. Images should be displayed not in front, however, in back.
2. 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 this ones.

[ivanmaslow]

Points from the previous comment except #5118 and #5097 are fixed.
New exploratory testing iteration after change request is completed on the Nightly env (4902 [Version 2.23.0-rc.1] Build at 2024-07-12; 10:06:35), points below are covered, tests are updated:

• Allowed formats are PNG and SVG, in the case of other formats the error is displayed:
  

• Image with size less than 16 pixels can't be added to Canvas using "Add Image" button and error message is displayed - "Image should be at least 16x16 pixels"

• "Add Image" button is on the left panel with tooltip:
  

• Images of allowed formats can be added to different selected places on Canvas (with previously added elements) one by one using "Add Image" button and they can be saved together to .ket file with the correct coordinates of images and sizes of files. Selected by user place on Canvas for image is the center of inserted image:
  

• Images of allowed formats can be added to different selected places on Canvas (with previously added elements) one by one using "Add Image" button and they can be selected and moved to other places on Canvas with appropriate layer level (including partial and complete overlap of elements);

• If the image is selected then a green selection frame is displayed and the image can be scaled vertically, horizontally and diagonally using appropriate cursors:

• Images of allowed formats after adding to Canvas using "Add Image" button supports the following actions:
  ->Zoom in/out (20, 400, 100);
  ->Deletion using "Clear Canvas" (or Ctrl+Delete) and "Erase" (or Delete, Backspace buttons);
  ->Copy-Paste, Cut-Paste;
  ->Undo/Redo of any action with image moving, scaling, deleting, or copying;

• Images of allowed formats with elements can be saved to template and added to Canvas with correct position and layer level;

Remaining open defects have high priority and will be fixed in scope of next releases:

• Selection frame is displayed improperly for overlapped images #5097;
• Image changes the layer to top after scaling actions #5148;
• Preview: Undo/Redo actions don't work for last deleted image (SVG or PNG) after Undo its deletion #5174;
  Some detected defects not related to changes:
• "Process is not defined" error is displayed in console after Clearing Canvas in Macro Mode with the element with an attachment point and switching to Micro #5170
• Simple Objects are duplicated after saving in Macro mode #5169
• Elements changes their positions after switching from Micro to Macro and back #5168
• Only elements are moving with the cursor while adding User Template to the Canvas #5149
• Rectangle Selection doesn't highlighted correctly in case of selection several elements #5226

[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]