improve zooming and scrolling

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.08.30.C";
+    readonly BUILD = "Build 26.08.30.D";
 
     translations: Translations;
 

src/ViewModel/Global/fileTransferViewModel.ts

@@ -54,7 +54,7 @@ export default class FileTransferViewModel extends Context {
     exportKey: React.State<string> = new React.State("");
     exportKeyConfirmation: React.State<string> = new React.State("");
 
-    importedFile: React.State<File|undefined> = new React.State(undefined);
+    importedFile: React.State<File | undefined> = new React.State(undefined);
     importedFileString: React.State<string> = new React.State("");
     importKey: React.State<string> = new React.State("");
     isImportKeyCorrect: React.State<boolean> = new React.State(true);
@@ -71,21 +71,20 @@ export default class FileTransferViewModel extends Context {
             this.receivingTransferChannel.value == "" ||
             this.receivingTransferKey.value == "",
     );
-    
+
     cannotExport: React.State<boolean> = React.createProxyState(
         [this.exportKey, this.exportKeyConfirmation],
         () =>
-            this.exportKey.value == "" ||  this.exportKey.value != this.exportKeyConfirmation.value
+            this.exportKey.value == "" ||
+            this.exportKey.value != this.exportKeyConfirmation.value,
     );
     cannotImport: React.State<boolean> = React.createProxyState(
         [this.importedFile],
-        () =>
-            this.importedFile.value == undefined
+        () => this.importedFile.value == undefined,
     );
     cannotDecryptImport: React.State<boolean> = React.createProxyState(
         [this.importKey],
-        () =>
-            this.importKey.value == "" 
+        () => this.importKey.value == "",
     );
 
     // handlers
@@ -136,142 +135,149 @@ export default class FileTransferViewModel extends Context {
     };
 
     downloadFile = async (): Promise<void> => {
-	const date = new Date().toISOString().split("T")[0];
+        const date = new Date().toISOString().split("T")[0];
 
-	const backup: Blob = await this.coreViewModel.fileTransferModel.generateBackup(this.selectedPaths.value.values(), this.exportKey.value);
-	const anchor = document.createElement("a");
-	anchor.href = window.URL.createObjectURL(backup); 
-	anchor.download = `comms-${date}.bak`;
-	anchor.click();
-    }
+        const backup: Blob =
+            await this.coreViewModel.fileTransferModel.generateBackup(
+                this.selectedPaths.value.values(),
+                this.exportKey.value,
+            );
+        const anchor = document.createElement("a");
+        anchor.href = window.URL.createObjectURL(backup);
+        anchor.download = `comms-${date}.bak`;
+        anchor.click();
+    };
 
     updateImportSelection = (): void => {
-	const input = document.getElementById("file-transfer-input");
-	if (!input) return;
-	if (!(input instanceof HTMLInputElement)) return;
+        const input = document.getElementById("file-transfer-input");
+        if (!input) return;
+        if (!(input instanceof HTMLInputElement)) return;
 
-	const file = input.files[0];
-	this.importedFile.value = file;
-    }
+        const file = input.files[0];
+        this.importedFile.value = file;
+    };
 
     importFile = (): void => {
-	const file = this.importedFile.value;
-	if (!file) return;
+        const file = this.importedFile.value;
+        if (!file) return;
 
-	const reader = new FileReader();
-	reader.readAsText(file, "utf8");
-	reader.onload = () => {
-	    const result = reader.result;
-	    this.importedFileString.value = result.toString();
-	    this.showImportDecryptDataModal();
-	}
-    }
+        const reader = new FileReader();
+        reader.readAsText(file, "utf8");
+        reader.onload = () => {
+            const result = reader.result;
+            this.importedFileString.value = result.toString();
+            this.showImportDecryptDataModal();
+        };
+    };
 
     decryptImport = async (): Promise<void> => {
-	const fileString = this.importedFileString.value;
-	const key = this.importKey.value;
-	if (!fileString || !key) return;
+        const fileString = this.importedFileString.value;
+        const key = this.importKey.value;
+        if (!fileString || !key) return;
 
-	this.cannotDecryptImport.value = true;
-	try {
-	    await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
-	    window.location.reload();
-	} catch (e) {
-	    console.error(e);
-	    this.isImportKeyCorrect.value = false;
-	    this.cannotDecryptImport.value = false;
-	}
-    }
+        this.cannotDecryptImport.value = true;
+        try {
+            await this.coreViewModel.fileTransferModel.handleBackupFile(
+                fileString,
+                key,
+            );
+            window.location.reload();
+        } catch (e) {
+            console.error(e);
+            this.isImportKeyCorrect.value = false;
+            this.cannotDecryptImport.value = false;
+        }
+    };
 
     // view
     showDirectionSelectionModal = (): void => {
-	this.coreViewModel.context = this;
-	this.presentedModal.value = FileTransferModals.DirectionSelection;
-	this.getOptions();
+        this.coreViewModel.context = this;
+        this.presentedModal.value = FileTransferModals.DirectionSelection;
+        this.getOptions();
     };
 
     showFileSelectionModal = (): void => {
-	this.presentedModal.value = FileTransferModals.FileSelection;
+        this.presentedModal.value = FileTransferModals.FileSelection;
     };
 
     showTransferDataModal = (): void => {
-	this.presentedModal.value = FileTransferModals.TransferDataDisplay;
-	this.getTransferData();
-	this.coreViewModel.fileTransferModel.prepareToSend();
+        this.presentedModal.value = FileTransferModals.TransferDataDisplay;
+        this.getTransferData();
+        this.coreViewModel.fileTransferModel.prepareToSend();
     };
 
     initiateTransfer = (): void => {
-	this.presentedModal.value = FileTransferModals.TransferDisplay;
-	this.didNotFinishSending.value = true;
-	this.filePathsSent.clear();
+        this.presentedModal.value = FileTransferModals.TransferDisplay;
+        this.didNotFinishSending.value = true;
+        this.filePathsSent.clear();
 
-	this.coreViewModel.fileTransferModel.sendFiles(
-	    this.selectedPaths.value.values(),
-	    (path: string) => {
-		this.filePathsSent.add(path);
-	    },
-	);
+        this.coreViewModel.fileTransferModel.sendFiles(
+            this.selectedPaths.value.values(),
+            (path: string) => {
+                this.filePathsSent.add(path);
+            },
+        );
 
-	this.didNotFinishSending.value = false;
+        this.didNotFinishSending.value = false;
     };
 
     showTransferDataInputModal = (): void => {
-	this.presentedModal.value = FileTransferModals.TransferDataInput;
+        this.presentedModal.value = FileTransferModals.TransferDataInput;
     };
 
     showExportSelectionModal = (): void => {
-	this.presentedModal.value = FileTransferModals.ExportFileSelection;
+        this.presentedModal.value = FileTransferModals.ExportFileSelection;
     };
 
     showExportModal = (): void => {
-	this.presentedModal.value = FileTransferModals.Export;
+        this.presentedModal.value = FileTransferModals.Export;
     };
 
     showImportModal = (): void => {
-	this.presentedModal.value = FileTransferModals.ImportSelection;
+        this.presentedModal.value = FileTransferModals.ImportSelection;
     };
 
     showImportDecryptDataModal = (): void => {
-	this.presentedModal.value = FileTransferModals.ImportDecryptData;
+        this.presentedModal.value = FileTransferModals.ImportDecryptData;
     };
 
     prepareReceivingData = (): void => {
-	if (this.cannotPrepareToReceive.value == true) return;
-	this.presentedModal.value = FileTransferModals.ReceptionDisplay;
-	this.filePathsReceived.clear();
+        if (this.cannotPrepareToReceive.value == true) return;
+        this.presentedModal.value = FileTransferModals.ReceptionDisplay;
+        this.filePathsReceived.clear();
 
-	const transferData: TransferData = {
-	    channel: this.receivingTransferChannel.value,
-	    key: this.receivingTransferKey.value,
-	};
-	this.coreViewModel.fileTransferModel.prepareToReceive(transferData);
+        const transferData: TransferData = {
+            channel: this.receivingTransferChannel.value,
+            key: this.receivingTransferKey.value,
+        };
+        this.coreViewModel.fileTransferModel.prepareToReceive(transferData);
     };
 
     // exit
     close = (): void => {
-	this.coreViewModel.closeContext(this.contextId);
+        this.coreViewModel.closeContext(this.contextId);
     };
 
     handleContextClose = (): void => {
-	this.presentedModal.value = undefined;
+        this.presentedModal.value = undefined;
     };
 
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
-	super("file-transfer");
+        super("file-transfer");
 
-	this.coreViewModel.fileTransferModel.fileHandlerManager.setHandler(
-	    "file-transfer-view-model",
-	    this.handleReceivedFile,
-	);
+        this.coreViewModel.fileTransferModel.fileHandlerManager.setHandler(
+            "file-transfer-view-model",
+            this.handleReceivedFile,
+        );
 
-	this.coreViewModel.fileTransferModel.readyToSendHandlerManager.setHandler(
-	    "file-transfer-view-model",
-	    () => this.initiateTransfer(),
-	);
+        this.coreViewModel.fileTransferModel.readyToSendHandlerManager.setHandler(
+            "file-transfer-view-model",
+            () => this.initiateTransfer(),
+        );
 
-	// keystrokes
-	this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 }
 
@@ -283,18 +289,18 @@ export interface FileTransferOption {
 export enum FileTransferModals {
     DirectionSelection,
 
-	// sending
-	FileSelection,
-	TransferDataDisplay,
-	TransferDisplay,
+    // sending
+    FileSelection,
+    TransferDataDisplay,
+    TransferDisplay,
 
-	// receiving
-	TransferDataInput,
-	ReceptionDisplay,
+    // receiving
+    TransferDataInput,
+    ReceptionDisplay,
 
-	// export
-	ExportFileSelection,
-	Export,
-	ImportSelection,
-	ImportDecryptData,
+    // export
+    ExportFileSelection,
+    Export,
+    ImportSelection,
+    ImportDecryptData,
 }