From db9dc66e9877f1afc99d9d9b4630cfa79c6aaf84 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 21 Jan 2023 13:16:24 +0400
Subject: [PATCH] Move ComponentImageView to TS

---
 src/asset_manager/index.ts                    |  1 +
 ...nentImageView.js => ComponentImageView.ts} | 26 ++++++++++++-------
 src/dom_components/view/ComponentView.ts      |  2 +-
 3 files changed, 19 insertions(+), 10 deletions(-)
 rename src/dom_components/view/{ComponentImageView.js => ComponentImageView.ts} (82%)

diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts
index ee643f415..be1b81c2b 100644
--- a/src/asset_manager/index.ts
+++ b/src/asset_manager/index.ts
@@ -91,6 +91,7 @@ type OpenOptions = {
   select?: (asset: Asset, complete: boolean) => void;
   types?: string[];
   accept?: string;
+  target?: any;
 };
 
 export default class AssetManager extends ItemManagerModule<AssetManagerConfig, Assets> {
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.ts
similarity index 82%
rename from src/dom_components/view/ComponentImageView.js
rename to src/dom_components/view/ComponentImageView.ts
index 3ddcd3629..21e8ceedd 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.ts
@@ -1,10 +1,16 @@
 import { isString } from 'underscore';
+import ComponentImage from '../model/ComponentImage';
 import ComponentView from './ComponentView';
 
 export default class ComponentImageView extends ComponentView {
+  classEmpty!: string;
+  model!: ComponentImage;
+  el!: HTMLImageElement;
+
   tagName() {
     return 'img';
   }
+
   events() {
     return {
       dblclick: 'onActive',
@@ -15,8 +21,8 @@ export default class ComponentImageView extends ComponentView {
     };
   }
 
-  initialize(o) {
-    ComponentView.prototype.initialize.apply(this, arguments);
+  initialize(props: any) {
+    super.initialize(props);
     this.listenTo(this.model, 'change:src', this.updateSrc);
     this.classEmpty = `${this.ppfx}plh-image`;
     this.fetchFile();
@@ -32,7 +38,7 @@ export default class ComponentImageView extends ComponentView {
 
     if (file && em) {
       const fu = em.get('AssetManager').FileUploader();
-      fu?.uploadFile({ dataTransfer: { files: [file] } }, res => {
+      fu?.uploadFile({ dataTransfer: { files: [file] } }, (res: any) => {
         const obj = res && res.data && res.data[0];
         const src = obj && (isString(obj) ? obj : obj.src);
         src && model.set({ src });
@@ -64,10 +70,10 @@ export default class ComponentImageView extends ComponentView {
    * @param  {Object}  e  Event
    * @private
    * */
-  onActive(ev) {
-    ev && ev.stopPropagation();
+  onActive(ev: Event) {
+    ev?.stopPropagation();
     const { em, model } = this;
-    const am = em && em.get('AssetManager');
+    const am = em?.Assets;
 
     if (am && model.get('editable')) {
       am.open({
@@ -83,8 +89,10 @@ export default class ComponentImageView extends ComponentView {
   }
 
   onError() {
-    const fallback = this.model.getSrcResult({ fallback: 1 });
-    if (fallback) this.el.src = fallback;
+    const fallback = this.model.getSrcResult({ fallback: true });
+    if (fallback) {
+      this.el.src = fallback;
+    }
   }
 
   onLoad() {
@@ -92,7 +100,7 @@ export default class ComponentImageView extends ComponentView {
     this.em.trigger('change:canvasOffset');
   }
 
-  noDrag(ev) {
+  noDrag(ev: Event) {
     ev.preventDefault();
     return false;
   }
diff --git a/src/dom_components/view/ComponentView.ts b/src/dom_components/view/ComponentView.ts
index ca4e9566a..8fe12c4ff 100644
--- a/src/dom_components/view/ComponentView.ts
+++ b/src/dom_components/view/ComponentView.ts
@@ -117,7 +117,7 @@ export default class ComponentView extends View<Component> {
   /**
    * Callback executed when the `active` event is triggered on component
    */
-  onActive() {}
+  onActive(ev: Event) {}
 
   /**
    * Callback executed when the `disable` event is triggered on component