#4911 - insert image from ket to canvas

packages/ketcher-core/src/application/editor/actions/fragment.ts

@@ -28,6 +28,7 @@ import {
   SGroupDataMove,
   SimpleObjectMove,
   TextMove,
+  RasterImageMove,
 } from '../operations';
 import { Pile, RGroup, Vec2 } from 'domain/entities';
 import { fromRGroupFragment, fromUpdateIfThen } from './rgroup';
@@ -127,6 +128,12 @@ export function fromMultipleMove(restruct, lists, d: Vec2) {
     });
   }
 
+  if (lists.rasterImages) {
+    lists.rasterImages.forEach((rasterImage) => {
+      action.addOp(new RasterImageMove(rasterImage, d));
+    });
+  }
+
   return action.perform(restruct);
 }
 

packages/ketcher-core/src/application/editor/actions/paste.ts

@@ -28,6 +28,7 @@ import {
   FragmentSetProperties,
   BondAttr,
   AtomAttr,
+  RasterImageUpsert,
 } from '../operations';
 import { fromRGroupAttrs, fromUpdateIfThen } from './rgroup';
 
@@ -36,6 +37,7 @@ import { SGroup, Struct, Vec2 } from 'domain/entities';
 import { fromSgroupAddition } from './sgroup';
 import { fromRGroupAttachmentPointAddition } from './rgroupAttachmentPoint';
 import { MonomerMicromolecule } from 'domain/entities/monomerMicromolecule';
+import { RasterImage } from 'domain/entities/rasterImage';
 
 export function fromPaste(
   restruct,
@@ -188,6 +190,13 @@ export function fromPaste(
     );
   });
 
+  pstruct.rasterImages.forEach((rasterImage: RasterImage) => {
+    const clonedImage = rasterImage.clone();
+    clonedImage.addPositionOffset(offset);
+
+    action.addOp(new RasterImageUpsert(clonedImage).perform(restruct));
+  });
+
   pstruct.rgroups.forEach((rg, rgid) => {
     rg.frags.forEach((__frag, frid) => {
       action.addOp(

packages/ketcher-core/src/application/editor/operations/OperationType.ts

@@ -82,6 +82,9 @@ export const OperationType = Object.freeze({
   DRAWING_ENTITY_SELECT: 'Select drawing entity',
   DRAWING_ENTITY_HOVER: 'Hover drawing entity',
   SHOW_POLYMER_BOND_INFORMATION: 'Show polymer bond information',
+  RASTER_IMAGE_UPSERT: 'Upsert raster image',
+  RASTER_IMAGE_DELETE: 'Delete raster image',
+  RASTER_IMAGE_MOVE: 'Move raster image',
 });
 
 export enum OperationPriority {

packages/ketcher-core/src/application/editor/operations/base.ts

@@ -127,16 +127,16 @@ class BaseOperation {
 
   protected static invalidateItem(
     restruct: ReStruct,
-    map,
+    mapName: keyof typeof ReStruct.maps,
     id: number,
     level?: any,
   ) {
-    if (map === 'atoms') {
+    if (mapName === 'atoms') {
       BaseOperation.invalidateAtom(restruct, id, level);
       return;
     }
 
-    if (map === 'bonds') {
+    if (mapName === 'bonds') {
       BaseOperation.invalidateBond(restruct, id);
 
       if (level > 0) {
@@ -145,7 +145,7 @@ class BaseOperation {
       return;
     }
 
-    restruct.markItem(map, id, level);
+    restruct.markItem(mapName, id, level);
   }
 
   protected static invalidateEnhancedFlag(

packages/ketcher-core/src/application/editor/operations/index.ts

@@ -26,6 +26,7 @@ export * from './FragmentStereoFlag';
 export * from './calcimplicitH';
 export * from './LoopMove';
 export * from './OperationType';
+export * from './rasterImage';
 export * from './rgroup';
 export * from './rgroupAttachmentPoint';
 export * from './rxn';

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

@@ -0,0 +1,2 @@
+export * from './rasterImageUpsertDelete';
+export * from './rasterImageMove';

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

@@ -0,0 +1,31 @@
+import { BaseOperation } from 'application/editor/operations/base';
+import { Vec2 } from 'domain/entities';
+import { OperationType } from 'application/editor';
+import { ReStruct } from 'application/render';
+import { Scale } from 'domain/helpers';
+
+export class RasterImageMove extends BaseOperation {
+  constructor(private id: number, private difference: Vec2) {
+    super(OperationType.RASTER_IMAGE_MOVE);
+  }
+
+  execute(reStruct: ReStruct) {
+    const renderItem = reStruct.rasterImages.get(this.id);
+    const item = reStruct.molecule.rasterImages.get(this.id);
+
+    if (!item || !renderItem) {
+      return;
+    }
+    const differenceScaled = Scale.modelToCanvas(
+      this.difference,
+      reStruct.render.options,
+    );
+
+    renderItem.move(differenceScaled);
+    item.addPositionOffset(this.difference);
+  }
+
+  invert(): BaseOperation {
+    return new RasterImageMove(this.id, this.difference.negated());
+  }
+}

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

@@ -0,0 +1,70 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { BaseOperation } from 'application/editor/operations/base';
+import { OperationType } from 'application/editor';
+import { RasterImage } from 'domain/entities/rasterImage';
+import { ReStruct } from 'application/render';
+import { ReRasterImage } from 'application/render/restruct/rerasterImage';
+
+export class RasterImageUpsert extends BaseOperation {
+  constructor(private readonly rasterImage: RasterImage, private id?: number) {
+    super(OperationType.RASTER_IMAGE_UPSERT);
+  }
+
+  execute(reStruct: ReStruct) {
+    const struct = reStruct.molecule;
+
+    if (!this.id) {
+      this.id = struct.rasterImages.newId();
+    }
+    const id = this.id!;
+    const item = this.rasterImage.clone();
+    struct.rasterImages.set(id, item);
+    reStruct.rasterImages.set(id, new ReRasterImage(item));
+
+    BaseOperation.invalidateItem(reStruct, 'rasterImages', id, 1);
+  }
+
+  invert(): BaseOperation {
+    return new RasterImageDelete(this.id!);
+  }
+}
+
+export class RasterImageDelete extends BaseOperation {
+  private rasterImage?: RasterImage;
+  constructor(private id: number) {
+    super(OperationType.RASTER_IMAGE_DELETE);
+  }
+
+  execute(reStruct: ReStruct) {
+    const reRasterImage = reStruct.rasterImages.get(this.id);
+
+    if (!reRasterImage) {
+      return;
+    }
+
+    reRasterImage.remove();
+    reStruct.markItemRemoved();
+    reStruct.rasterImages.delete(this.id);
+    reStruct.molecule.rasterImages.delete(this.id);
+  }
+
+  invert(): BaseOperation {
+    return new RasterImageUpsert(this.rasterImage!, this.id);
+  }
+}

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

@@ -0,0 +1,53 @@
+import { ReObject, ReStruct } from 'application/render/restruct';
+import { RasterImage } from 'domain/entities/rasterImage';
+import { RenderOptions } from 'application/render/render.types';
+import { Scale } from 'domain/helpers';
+import { RaphaelElement } from 'raphael';
+import { Vec2 } from 'domain/entities';
+
+export class ReRasterImage extends ReObject {
+  private element?: RaphaelElement;
+
+  static isSelectable(): boolean {
+    return true;
+  }
+
+  constructor(private item: RasterImage) {
+    super('image');
+  }
+
+  show(restruct: ReStruct, options: RenderOptions) {
+    if (this.element) {
+      return;
+    }
+
+    const render = restruct.render;
+    const [topLeft, bottomRight] = this.item.position;
+    const scaledTopLeft = Scale.modelToCanvas(topLeft, options);
+    const scaledBottomRight = Scale.modelToCanvas(bottomRight, options);
+    const topLeftWithOffset = scaledTopLeft.add(options.offset);
+
+    const width = scaledBottomRight.x - scaledTopLeft.x;
+    const height = scaledBottomRight.y - scaledTopLeft.y;
+
+    this.element = render.paper.image(
+      this.item.bitmap,
+      topLeftWithOffset.x,
+      topLeftWithOffset.y,
+      width,
+      height,
+    );
+  }
+
+  remove() {
+    if (this.element) {
+      this.element.remove();
+    }
+  }
+
+  move(diff: Vec2) {
+    if (this.element) {
+      this.element.translate(diff.x, diff.y);
+    }
+  }
+}

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

@@ -41,9 +41,10 @@ import { Render } from '../raphaelRender';
 import Visel from './visel';
 import util from '../util';
 import { ReRGroupAttachmentPoint } from './rergroupAttachmentPoint';
+import { ReRasterImage } from 'application/render/restruct/rerasterImage';
 
 class ReStruct {
-  public static maps = {
+  public static readonly maps = {
     atoms: ReAtom,
     bonds: ReBond,
     rxnPluses: ReRxnPlus,
@@ -57,6 +58,7 @@ class ReStruct {
     reloops: ReLoop,
     simpleObjects: ReSimpleObject,
     texts: ReText,
+    rasterImages: ReRasterImage,
   } as const;
 
   public render: Render;
@@ -74,20 +76,23 @@ class ReStruct {
   public sgroupData: Map<number, ReDataSGroupData> = new Map();
   public enhancedFlags: Map<number, ReEnhancedFlag> = new Map();
   private simpleObjects: Map<number, ReSimpleObject> = new Map();
+  public rasterImages: Map<number, ReRasterImage> = new Map();
   public texts: Map<number, ReText> = new Map();
   private initialized = false;
   private layers: Array<any> = [];
   public connectedComponents: Pool = new Pool();
   private ccFragmentType: Pool = new Pool();
   private structChanged = false;
 
+  // TWIMC, Those maps are accessed via dynamic names, using static maps field + 'Changed' string
   private atomsChanged: Map<number, 1> = new Map();
   private simpleObjectsChanged: Map<number, ReSimpleObject> = new Map();
   private rxnArrowsChanged: Map<number, ReRxnArrow> = new Map();
   private rxnPlusesChanged: Map<number, ReRxnPlus> = new Map();
   private enhancedFlagsChanged: Map<number, ReEnhancedFlag> = new Map();
   private bondsChanged: Map<number, ReEnhancedFlag> = new Map();
   private textsChanged: Map<number, ReText> = new Map();
+  private rasterImagesChanged: Map<number, ReRasterImage> = new Map();
   private snappingBonds: number[] = [];
 
   constructor(
@@ -155,6 +160,9 @@ class ReStruct {
         this.sgroupData.set(id, new ReDataSGroupData(item));
       }
     });
+    molecule.rasterImages.forEach((item, id) => {
+      this.rasterImages.set(id, new ReRasterImage(item));
+    });
   }
 
   get visibleRGroupAttachmentPoints() {
@@ -514,6 +522,7 @@ class ReStruct {
     this.showEnhancedFlags();
     this.showSimpleObjects();
     this.showTexts();
+    this.showImages();
     this.clearMarks();
 
     return true;
@@ -712,6 +721,16 @@ class ReStruct {
     });
   }
 
+  showImages() {
+    const options = this.render.options;
+    this.rasterImagesChanged.forEach((_, id) => {
+      const image = this.rasterImages.get(id);
+      if (image) {
+        image.show(this, options);
+      }
+    });
+  }
+
   setSelection(selection?) {
     const atoms: { selected: boolean; sgroup: number }[] = [];
 

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

@@ -0,0 +1,38 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { BaseMicromoleculeEntity } from 'domain/entities/BaseMicromoleculeEntity';
+import { Vec2 } from 'domain/entities/vec2';
+
+type Position = [Vec2, Vec2];
+
+export class RasterImage extends BaseMicromoleculeEntity {
+  constructor(public bitmap: string, public position: [Vec2, Vec2]) {
+    super();
+  }
+
+  clone(): RasterImage {
+    return new RasterImage(this.bitmap, this.position);
+  }
+
+  addPositionOffset(offset: Vec2) {
+    this.position = this.position.map((item) => item.add(offset)) as Position;
+  }
+
+  scaled(scale: number): void {
+    this.position = this.position.map((item) => item.scaled(scale)) as Position;
+  }
+}