ninegrid2 6.1411.0 → 6.1413.0

package/dist/bundle.cjs.js

@@ -28091,8 +28091,23 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				/**
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				*/
+
+				console.log(panel);
+
+				if (panel.classList.contains('sidebar')) {
+					// 드래그가 끝난 시점의 newSize(px)를 그대로 고정값으로 할당
+					// 이렇게 하면 비율(%)이 아니라 딱 그 픽셀만큼만 자리를 차지하게 됩니다.
+					panel.style.flex = `0 0 ${newSize}px`;
+				} else {
+					// 나머지 메인 보드 같은 유연한 패널은 비율(%)로 처리
+					const newFlexBasis = newSize / totalFlexSpace;
+					panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				}
+
 				flexSum += newFlexBasis;
 			});
 

package/dist/bundle.esm.js

@@ -28087,8 +28087,23 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				/**
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				*/
+
+				console.log(panel);
+
+				if (panel.classList.contains('sidebar')) {
+					// 드래그가 끝난 시점의 newSize(px)를 그대로 고정값으로 할당
+					// 이렇게 하면 비율(%)이 아니라 딱 그 픽셀만큼만 자리를 차지하게 됩니다.
+					panel.style.flex = `0 0 ${newSize}px`;
+				} else {
+					// 나머지 메인 보드 같은 유연한 패널은 비율(%)로 처리
+					const newFlexBasis = newSize / totalFlexSpace;
+					panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				}
+
 				flexSum += newFlexBasis;
 			});
 

package/dist/nx/nxEditor.js

@@ -6,7 +6,7 @@ import StarterKit from '@tiptap/starter-kit';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Highlight } from '@tiptap/extension-highlight';
-import { Underline } from '@tiptap/extension-underline';
+//import { Underline } from '@tiptap/extension-underline';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { Image } from '@tiptap/extension-image';
 

package/dist/nx/nxSplitter.js

@@ -167,8 +167,23 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				/**
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				*/
+
+				console.log(panel);
+
+				if (panel.classList.contains('sidebar')) {
+					// 드래그가 끝난 시점의 newSize(px)를 그대로 고정값으로 할당
+					// 이렇게 하면 비율(%)이 아니라 딱 그 픽셀만큼만 자리를 차지하게 됩니다.
+					panel.style.flex = `0 0 ${newSize}px`;
+				} else {
+					// 나머지 메인 보드 같은 유연한 패널은 비율(%)로 처리
+					const newFlexBasis = newSize / totalFlexSpace;
+					panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				}
+
 				flexSum += newFlexBasis;
 			});
 

package/dist/white-board/nineBoard.js

@@ -0,0 +1,74 @@
+import ninegrid from "../index.js";
+
+class NineBoard extends HTMLElement {
+	// Private 필드 선언
+	#isReadable = false;
+	#isWritable = false;
+	#userId = null;
+	#roomId = null;
+
+	#pdfDoc = null;
+	#renderQueue = Promise.resolve();
+	#latestPage = 1;
+	#renderTask = null;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	// 감시할 속성들
+	static get observedAttributes() {
+		return ['readable', 'writable', 'room-id', 'pdf-url', 'current-page', 'user-id'];
+	}
+
+	// 속성 변경 대응
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal === newVal) return;
+
+		switch (name) {
+			case 'readable':
+				this.#isReadable = this.hasAttribute('readable');
+				break;
+			case 'writable':
+				this.#isWritable = this.hasAttribute('writable');
+				this.#updateInteraction();
+				break;
+			case 'current-page':
+				this.#latestPage = Number(newVal);
+				this.#enqueueRender(); // 큐 로직 실행
+				break;
+			case 'user-id':
+				this.#userId = newVal;
+				break;
+			case 'room-id':
+				this.#roomId = newVal;
+				break;
+		}
+	}
+
+	// 내부 전용 메서드도 #으로 보호
+	#updateInteraction() {
+		if (this.#isWritable) {
+			this.style.cursor = 'crosshair';
+			// 이벤트 리스너 등록 로직...
+		} else {
+			this.style.cursor = 'default';
+		}
+	}
+
+	// 외부에서 socket 주입받는 인터페이스
+	set socket(socketInstance) {
+		this._socket = socketInstance; // 소켓 인스턴스는 보통 참조를 위해 보관
+		this.#initSocketListeners();
+	}
+
+	#initSocketListeners() {
+		this._socket.on("draw_data", (data) => {
+			if (!this.#isReadable) return;
+			// 수신 데이터 처리 로직...
+		});
+	}
+}
+
+customElements.define('nine-board', NineBoard);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1411.0",
+  "version": "6.1413.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxEditor.js

@@ -6,7 +6,7 @@ import StarterKit from '@tiptap/starter-kit';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Highlight } from '@tiptap/extension-highlight';
-import { Underline } from '@tiptap/extension-underline';
+//import { Underline } from '@tiptap/extension-underline';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { Image } from '@tiptap/extension-image';
 

package/src/nx/nxSplitter.js

@@ -167,8 +167,23 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				/**
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				*/
+
+				console.log(panel);
+
+				if (panel.classList.contains('sidebar')) {
+					// 드래그가 끝난 시점의 newSize(px)를 그대로 고정값으로 할당
+					// 이렇게 하면 비율(%)이 아니라 딱 그 픽셀만큼만 자리를 차지하게 됩니다.
+					panel.style.flex = `0 0 ${newSize}px`;
+				} else {
+					// 나머지 메인 보드 같은 유연한 패널은 비율(%)로 처리
+					const newFlexBasis = newSize / totalFlexSpace;
+					panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				}
+
 				flexSum += newFlexBasis;
 			});
 

package/src/white-board/nineBoard.js

@@ -0,0 +1,74 @@
+import ninegrid from "../index.js";
+
+class NineBoard extends HTMLElement {
+	// Private 필드 선언
+	#isReadable = false;
+	#isWritable = false;
+	#userId = null;
+	#roomId = null;
+
+	#pdfDoc = null;
+	#renderQueue = Promise.resolve();
+	#latestPage = 1;
+	#renderTask = null;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	// 감시할 속성들
+	static get observedAttributes() {
+		return ['readable', 'writable', 'room-id', 'pdf-url', 'current-page', 'user-id'];
+	}
+
+	// 속성 변경 대응
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal === newVal) return;
+
+		switch (name) {
+			case 'readable':
+				this.#isReadable = this.hasAttribute('readable');
+				break;
+			case 'writable':
+				this.#isWritable = this.hasAttribute('writable');
+				this.#updateInteraction();
+				break;
+			case 'current-page':
+				this.#latestPage = Number(newVal);
+				this.#enqueueRender(); // 큐 로직 실행
+				break;
+			case 'user-id':
+				this.#userId = newVal;
+				break;
+			case 'room-id':
+				this.#roomId = newVal;
+				break;
+		}
+	}
+
+	// 내부 전용 메서드도 #으로 보호
+	#updateInteraction() {
+		if (this.#isWritable) {
+			this.style.cursor = 'crosshair';
+			// 이벤트 리스너 등록 로직...
+		} else {
+			this.style.cursor = 'default';
+		}
+	}
+
+	// 외부에서 socket 주입받는 인터페이스
+	set socket(socketInstance) {
+		this._socket = socketInstance; // 소켓 인스턴스는 보통 참조를 위해 보관
+		this.#initSocketListeners();
+	}
+
+	#initSocketListeners() {
+		this._socket.on("draw_data", (data) => {
+			if (!this.#isReadable) return;
+			// 수신 데이터 처리 로직...
+		});
+	}
+}
+
+customElements.define('nine-board', NineBoard);