ide-assi 0.362.0 → 0.364.0

package/dist/bundle.cjs.js

@@ -234969,7 +234969,42 @@ class IdeDiff extends HTMLElement {
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		return;
+
+		console.log("setupScrollSync");
+
+		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
+		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+		}
+
+		let scrollingA = false;
+		let scrollingB = false;
+
+		this._asisScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
+			if (!scrollingB) {
+				scrollingA = true;
+				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
+				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingB = false;
+		};
+
+		this._tobeScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
+			if (!scrollingA) {
+				scrollingB = true;
+				this.#asisEditorView.scrollDOM.scrollTop = this.#tobeEditorView.scrollDOM.scrollTop;
+				this.#asisEditorView.scrollDOM.scrollLeft = this.#tobeEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingA = false;
+		};
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
 	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
@@ -235097,19 +235132,18 @@ class IdeDiff extends HTMLElement {
 
 		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
-
-		let langExtension;
 		switch(language) {
 			case 'javascript':
-				langExtension = javascript();
+				javascript();
 				break;
 			default:
-				langExtension = javascript();
+				javascript();
 		}
 
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		/**
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
@@ -235126,7 +235160,7 @@ class IdeDiff extends HTMLElement {
 				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
 				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
-		});
+		}); */
 
 		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
 		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행

package/dist/bundle.esm.js

@@ -234965,7 +234965,42 @@ class IdeDiff extends HTMLElement {
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		return;
+
+		console.log("setupScrollSync");
+
+		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
+		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+		}
+
+		let scrollingA = false;
+		let scrollingB = false;
+
+		this._asisScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
+			if (!scrollingB) {
+				scrollingA = true;
+				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
+				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingB = false;
+		};
+
+		this._tobeScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
+			if (!scrollingA) {
+				scrollingB = true;
+				this.#asisEditorView.scrollDOM.scrollTop = this.#tobeEditorView.scrollDOM.scrollTop;
+				this.#asisEditorView.scrollDOM.scrollLeft = this.#tobeEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingA = false;
+		};
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
 	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
@@ -235093,19 +235128,18 @@ class IdeDiff extends HTMLElement {
 
 		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
-
-		let langExtension;
 		switch(language) {
 			case 'javascript':
-				langExtension = javascript();
+				javascript();
 				break;
 			default:
-				langExtension = javascript();
+				javascript();
 		}
 
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		/**
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
@@ -235122,7 +235156,7 @@ class IdeDiff extends HTMLElement {
 				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
 				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
-		});
+		}); */
 
 		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
 		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행

package/dist/components/ideDiff.js

@@ -217,7 +217,9 @@ export class IdeDiff extends HTMLElement {
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		return;
+
+		console.log("setupScrollSync");
+
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -391,6 +393,7 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		/**
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
@@ -407,7 +410,7 @@ export class IdeDiff extends HTMLElement {
 				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
 				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
-		});
+		}); */
 
 		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
 		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.362.0",
+  "version": "0.364.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -217,7 +217,9 @@ export class IdeDiff extends HTMLElement {
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		return;
+
+		console.log("setupScrollSync");
+
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -391,6 +393,7 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		/**
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
@@ -407,7 +410,7 @@ export class IdeDiff extends HTMLElement {
 				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
 				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
-		});
+		}); */
 
 		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
 		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행