From e5533c2b15a5542c62ade82067c5ed2efe65f22e Mon Sep 17 00:00:00 2001
From: Chiyu Liang <532117255@qq.com>
Date: Mon, 21 Aug 2023 14:55:45 +0800
Subject: [PATCH] #2 - Feature: Auto save (#10)

* Decorate tab header

* Prevent re-render on saving the same file

`setViewData(data, false)` will be called by `save()` when we have more than one split/tab holding the same file.

If we only have one split/tab of the file, then `setViewData()` won't be called.

* Auto save

* Delete debug console log

* Revert "Delete debug console log"

This reverts commit b11304bd67f6fc954bb4b549d24c740c161be3c7.

* Revert "Auto save"

This reverts commit 17ecb348195b6e7ddab80400ec91730d0034e4ba.

* Auto save through `onChange()` and `requestSave()`

* Unsubscribe when editor refresh or unmount
---
 src/KetcherReact.tsx | 10 ++++----
 src/ketView.tsx      | 57 +++++++++++++++++++++++++++++++-------------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/KetcherReact.tsx b/src/KetcherReact.tsx
index 1ad4fbb..9133676 100644
--- a/src/KetcherReact.tsx
+++ b/src/KetcherReact.tsx
@@ -7,19 +7,21 @@ const structServiceProvider = new StandaloneStructServiceProvider();
 
 type Props = {
 	data: string;
-	onInit: (ketcher: Ketcher) => void;
+	onInit: (ketcher: Ketcher, subscriber: any) => void;
+	onChange: () => void;
 };
 
-const KetcherReact = ({ data, onInit }: Props) => {
+const KetcherReact = ({ data, onInit, onChange }: Props) => {
 	return (
 		<div className="ketcher-container">
 			<Editor
-				errorHandler={(_message: string) => {}}
+				errorHandler={(_message: string) => { }}
 				staticResourcesUrl="./"
 				structServiceProvider={structServiceProvider}
 				onInit={(ketcher: Ketcher) => {
 					ketcher.setMolecule(data);
-					onInit(ketcher);
+					const subscriber = ketcher.editor.subscribe("change", operations => { onChange() })
+					onInit(ketcher, subscriber);
 				}}
 			/>
 		</div>
diff --git a/src/ketView.tsx b/src/ketView.tsx
index e85b8e5..42acfdf 100644
--- a/src/ketView.tsx
+++ b/src/ketView.tsx
@@ -8,31 +8,45 @@ export const VIEW_TYPE_KET = "ket-view";
 
 export class KetView extends TextFileView {
 	ketcher: Ketcher;
+	subscriber: any;
 
 	getViewData() {
 		return this.data;
 	}
 
-	// If clear is set, then it means we're opening a completely different file.
 	setViewData(data: string, _clear: boolean) {
 		this.data = data;
 
-		ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
-		const container = this.containerEl.children[1];
-		ReactDOM.render(
-			<React.StrictMode>
-				<KetcherReact
-					data={this.data}
-					onInit={(ketcher: Ketcher) => {
-						this.ketcher = ketcher;
-						// https://github.com/epam/ketcher/issues/2250
-						// @ts-ignore
-						global.ketcher = ketcher;
-					}}
-				/>
-			</React.StrictMode>,
-			container
-		);
+		// If clear is set, then it means we're opening a completely different file.
+		if (_clear) {
+			this.ketcher?.editor.unsubscribe("change", this.subscriber);
+			ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+			const container = this.containerEl.children[1];
+			ReactDOM.render(
+				<React.StrictMode>
+					<KetcherReact
+						data={this.data}
+						onInit={(ketcher: Ketcher, subscriber: any) => {
+							this.ketcher = ketcher;
+							// https://github.com/epam/ketcher/issues/2250
+							// @ts-ignore
+							global.ketcher = ketcher;
+							this.subscriber = subscriber;
+						}}
+						onChange={async () => {
+							this.data = await this.ketcher.getKet();
+							this.requestSave();
+						}}
+					/>
+				</React.StrictMode>,
+				container
+			);
+		}
+		// Updates the same file in other tabs/splits after `save()` is called
+		else {
+			this.ketcher.setMolecule(this.data);
+		}
+
 	}
 
 	clear() {}
@@ -41,6 +55,14 @@ export class KetView extends TextFileView {
 		return VIEW_TYPE_KET;
 	}
 
+	getIcon() {
+		return "ketcher";
+	}
+
+	getDisplayText() {
+		return this.file?.basename ?? "ketcher";
+	}
+
 	async onOpen() {
 		this.addAction("save", "Save", async (_eventType) => {
 			try {
@@ -54,6 +76,7 @@ export class KetView extends TextFileView {
 	}
 
 	async onClose() {
+		this.ketcher.editor.unsubscribe("change", this.subscriber);
 		ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
 	}
 }