#4911 - insert image from ket to canvas

packages/ketcher-core/src/application/editor/operations/rasterImage/rasterImageMove.ts

@@ -5,7 +5,7 @@ import { ReStruct } from 'application/render';
 import { Scale } from 'domain/helpers';
 
 export class RasterImageMove extends BaseOperation {
-  constructor(private id: number, private difference: Vec2) {
+  constructor(private id: number, private offset: Vec2) {
     super(OperationType.RASTER_IMAGE_MOVE);
   }
 
@@ -16,16 +16,16 @@ export class RasterImageMove extends BaseOperation {
     if (!item || !renderItem) {
       return;
     }
-    const differenceScaled = Scale.modelToCanvas(
-      this.difference,
+    const scaledOffset = Scale.modelToCanvas(
+      this.offset,
       reStruct.render.options,
     );
 
-    renderItem.move(differenceScaled);
-    item.addPositionOffset(this.difference);
+    renderItem.move(scaledOffset);
+    item.addPositionOffset(this.offset);
   }
 
   invert(): BaseOperation {
-    return new RasterImageMove(this.id, this.difference.negated());
+    return new RasterImageMove(this.id, this.offset.negated());
   }
 }

packages/ketcher-core/src/application/editor/operations/rasterImage/rasterImageUpsertDelete.ts

@@ -32,7 +32,7 @@ export class RasterImageUpsert extends BaseOperation {
     if (!this.id) {
       this.id = struct.rasterImages.newId();
     }
-    const id = this.id!;
+    const id = this.id;
     const item = this.rasterImage.clone();
     struct.rasterImages.set(id, item);
     reStruct.rasterImages.set(id, new ReRasterImage(item));

packages/ketcher-core/src/application/render/restruct/rerasterImage.ts

@@ -18,7 +18,7 @@ export class ReRasterImage extends ReObject {
 
   show(restruct: ReStruct, options: RenderOptions) {
     if (this.element) {
-      return;
+      this.remove();
     }
 
     const render = restruct.render;

packages/ketcher-core/src/domain/entities/rasterImage.ts

@@ -19,20 +19,25 @@ import { Vec2 } from 'domain/entities/vec2';
 
 type Position = [Vec2, Vec2];
 
+export const RASTER_IMAGE_KEY = 'rasterImage';
+
 export class RasterImage extends BaseMicromoleculeEntity {
   constructor(public bitmap: string, public position: [Vec2, Vec2]) {
     super();
   }
 
   clone(): RasterImage {
-    return new RasterImage(this.bitmap, this.position);
+    return new RasterImage(
+      this.bitmap,
+      this.position.map((item) => item) as Position,
+    );
   }
 
   addPositionOffset(offset: Vec2) {
     this.position = this.position.map((item) => item.add(offset)) as Position;
   }
 
-  scaled(scale: number): void {
+  rescalePosition(scale: number): void {
     this.position = this.position.map((item) => item.scaled(scale)) as Position;
   }
 }

packages/ketcher-core/src/domain/entities/struct.ts

@@ -837,7 +837,9 @@ export class Struct {
       simpleObjects.pos = simpleObjects.pos.map((p) => p.scaled(scale));
     });
 
-    this.rasterImages.forEach((rasterImage) => rasterImage.scaled(scale));
+    this.rasterImages.forEach((rasterImage) =>
+      rasterImage.rescalePosition(scale),
+    );
   }
 
   rescale() {

packages/ketcher-core/src/domain/serializers/ket/ketSerializer.ts

@@ -72,6 +72,7 @@ import { MonomerItemType } from 'domain/types';
 import { PolymerBond } from 'domain/entities/PolymerBond';
 import { rasterImageToKet } from 'domain/serializers/ket/toKet/rasterImageToKet';
 import { rasterImageToStruct } from 'domain/serializers/ket/fromKet/rasterImageToStruct';
+import { RASTER_IMAGE_KEY } from 'domain/entities/rasterImage';
 
 function parseNode(node: any, struct: any) {
   const type = node.type;
@@ -106,7 +107,7 @@ function parseNode(node: any, struct: any) {
       textToStruct(node, struct);
       break;
     }
-    case 'rasterImage': {
+    case [RASTER_IMAGE_KEY]: {
       rasterImageToStruct(node, struct);
       break;
     }
@@ -180,7 +181,7 @@ export class KetSerializer implements Serializer<Struct> {
           result.root.nodes.push(textToKet(item));
           break;
         }
-        case 'rasterImage': {
+        case RASTER_IMAGE_KEY: {
           result.root.nodes.push(rasterImageToKet(item));
           break;
         }

packages/ketcher-core/src/domain/serializers/ket/schema.json

@@ -805,9 +805,6 @@
                   },
                   "y": {
                     "type": "number"
-                  },
-                  "z": {
-                    "type": "number"
                   }
                 }
               }

packages/ketcher-core/src/domain/serializers/ket/toKet/prepare.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 import { Pile, Pool, SGroup, Struct, Vec2 } from 'domain/entities';
+import { RASTER_IMAGE_KEY } from 'domain/entities/rasterImage';
 
 type KetNode = {
   type: string;
@@ -99,7 +100,7 @@ export function prepareStructForKet(struct: Struct) {
   struct.rasterImages.forEach((image) => {
     const center: Vec2 = Vec2.centre(image.position[0], image.position[1]);
     ketNodes.push({
-      type: 'rasterImage',
+      type: RASTER_IMAGE_KEY,
       center,
       data: {
         bitmap: image.bitmap,

packages/ketcher-core/src/domain/serializers/ket/toKet/rasterImageToKet.ts

@@ -15,10 +15,11 @@
  ***************************************************************************/
 
 import { getNodeWithInvertedYCoord } from '../helpers';
+import { RASTER_IMAGE_KEY } from 'domain/entities/rasterImage';
 
 export function rasterImageToKet(rasterImageNode) {
   return {
-    type: 'rasterImage',
+    type: RASTER_IMAGE_KEY,
     data: getNodeWithInvertedYCoord(rasterImageNode.data),
     selected: rasterImageNode.selected,
   };