diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx index cfcce9e08..912118142 100644 --- a/frontend/app/block/block.tsx +++ b/frontend/app/block/block.tsx @@ -23,7 +23,6 @@ const Block = ({ blockId, onClose }: BlockProps) => { let blockElem: JSX.Element = null; const [blockData, blockDataLoading] = WOS.useWaveObjectValue(WOS.makeORef("block", blockId)); if (!blockId || !blockData) return null; - console.log("blockData: ", blockData); if (blockDataLoading) { blockElem = Loading...; } else if (blockData.view === "term") { @@ -38,7 +37,9 @@ const Block = ({ blockId, onClose }: BlockProps) => { return (
-
Block [{blockId.substring(0, 8)}]
+
+ Block [{blockId.substring(0, 8)}] {blockData.view} +
diff --git a/frontend/app/view/term.tsx b/frontend/app/view/term.tsx index 432822d85..c0f54e53b 100644 --- a/frontend/app/view/term.tsx +++ b/frontend/app/view/term.tsx @@ -8,6 +8,7 @@ import { FitAddon } from "@xterm/addon-fit"; import type { ITheme } from "@xterm/xterm"; import { Terminal } from "@xterm/xterm"; import * as React from "react"; +import { debounce } from "throttle-debounce"; import "./view.less"; import "/public/xterm.css"; @@ -40,6 +41,16 @@ function getThemeFromCSSVars(el: Element): ITheme { return theme; } +function handleResize(fitAddon: FitAddon, blockId: string, term: Terminal) { + const oldRows = term.rows; + const oldCols = term.cols; + fitAddon.fit(); + if (oldRows !== term.rows || oldCols !== term.cols) { + const resizeCommand = { command: "controller:input", termsize: { rows: term.rows, cols: term.cols } }; + BlockService.SendCommand(blockId, resizeCommand); + } +} + type InitialLoadDataType = { loaded: boolean; heldData: Uint8Array[]; @@ -78,16 +89,9 @@ const TerminalView = ({ blockId }: { blockId: string }) => { BlockService.SendCommand(blockId, inputCmd); }); // resize observer + const handleResize_debounced = debounce(50, handleResize); const rszObs = new ResizeObserver(() => { - const oldRows = term.rows; - const oldCols = term.cols; - fitAddon.fit(); - if (oldRows !== term.rows || oldCols !== term.cols) { - BlockService.SendCommand(blockId, { - command: "controller:input", - termsize: { rows: term.rows, cols: term.cols }, - }); - } + handleResize_debounced(fitAddon, blockId, term); }); rszObs.observe(connectElemRef.current); @@ -108,7 +112,7 @@ const TerminalView = ({ blockId }: { blockId: string }) => { rszObs.disconnect(); blockSubject.release(); }; - }, [connectElemRef.current]); + }, []); React.useEffect(() => { if (!termRef.current) { @@ -141,7 +145,7 @@ const TerminalView = ({ blockId }: { blockId: string }) => { initialLoadRef.current.heldData = []; console.log(`terminal loaded file ${loadedBytes} bytes, ${Date.now() - startTs}ms`); }); - }, [termRef.current]); + }, []); return (
diff --git a/frontend/app/view/view.less b/frontend/app/view/view.less index ac948837c..4472921cd 100644 --- a/frontend/app/view/view.less +++ b/frontend/app/view/view.less @@ -23,6 +23,7 @@ flex-grow: 1; min-height: 0; overflow: hidden; + line-height: 1; } } diff --git a/frontend/faraday/lib/TileLayout.tsx b/frontend/faraday/lib/TileLayout.tsx index 9f7e901ff..7a0b4b75d 100644 --- a/frontend/faraday/lib/TileLayout.tsx +++ b/frontend/faraday/lib/TileLayout.tsx @@ -41,7 +41,6 @@ export const TileLayout = ({ layoutTreeStateAtom, className, renderContent, (id: string, ref: RefObject) => { setNodeRefs((prev) => { prev.set(id, ref); - console.log("setRef", id, ref, prev); return prev; }); }, @@ -53,7 +52,6 @@ export const TileLayout = ({ layoutTreeStateAtom, className, renderContent, if (nodeRefs.has(id)) { setNodeRefs((prev) => { prev.delete(id); - console.log("deleteRef", id, prev); return prev; }); } else { @@ -239,7 +237,6 @@ const TileNode = ({ layoutNode, renderContent, transform, onLeafClose }: Til // Register the tile item as a draggable component useEffect(() => { - console.log("set drag", layoutNode); drag(tileNodeRef); dragPreview(tileNodeRef); }, [tileNodeRef]); diff --git a/frontend/faraday/lib/tilelayout.less b/frontend/faraday/lib/tilelayout.less index 9785663dd..7fc7d58ba 100644 --- a/frontend/faraday/lib/tilelayout.less +++ b/frontend/faraday/lib/tilelayout.less @@ -66,7 +66,7 @@ flex: 1 1 auto; max-height: 100%; max-width: 100%; - margin: 5px; + /* margin: 5px; */ } .tile-leaf { diff --git a/package.json b/package.json index f76484669..3fe1f3465 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@storybook/test": "^8.1.4", "@types/node": "^20.12.12", "@types/react": "^18.3.2", + "@types/throttle-debounce": "^5", "@types/uuid": "^9.0.8", "@vitejs/plugin-react": "^4.3.0", "@vitest/coverage-istanbul": "^1.6.0", @@ -65,6 +66,7 @@ "react-markdown": "^9.0.1", "remark-gfm": "^4.0.0", "rxjs": "^7.8.1", + "throttle-debounce": "^5.0.0", "uuid": "^9.0.1" }, "packageManager": "yarn@4.2.1" diff --git a/public/index.html b/public/index.html index 7e2804d93..3e68fbf1c 100644 --- a/public/index.html +++ b/public/index.html @@ -5,11 +5,11 @@ Wails App - - - - - + + + + + diff --git a/yarn.lock b/yarn.lock index 405ce6364..d82202f98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3728,6 +3728,13 @@ __metadata: languageName: node linkType: hard +"@types/throttle-debounce@npm:^5": + version: 5.0.2 + resolution: "@types/throttle-debounce@npm:5.0.2" + checksum: 10c0/526084a7b83edd5c008f193a80c1f6851421d44921e874032d63a598047e17c1a5c97fe99a9dbf806e3d0b49a40d8c4171541a32ea1911d45b5216ddf129d51a + languageName: node + linkType: hard + "@types/unist@npm:*, @types/unist@npm:^3.0.0": version: 3.0.2 resolution: "@types/unist@npm:3.0.2" @@ -11069,6 +11076,7 @@ __metadata: "@tanstack/react-table": "npm:^8.17.3" "@types/node": "npm:^20.12.12" "@types/react": "npm:^18.3.2" + "@types/throttle-debounce": "npm:^5" "@types/uuid": "npm:^9.0.8" "@vitejs/plugin-react": "npm:^4.3.0" "@vitest/coverage-istanbul": "npm:^1.6.0" @@ -11094,6 +11102,7 @@ __metadata: remark-gfm: "npm:^4.0.0" rxjs: "npm:^7.8.1" storybook: "npm:^8.1.4" + throttle-debounce: "npm:^5.0.0" ts-node: "npm:^10.9.2" tslib: "npm:^2.6.2" typescript: "npm:^5.4.5" @@ -11106,6 +11115,13 @@ __metadata: languageName: unknown linkType: soft +"throttle-debounce@npm:^5.0.0": + version: 5.0.0 + resolution: "throttle-debounce@npm:5.0.0" + checksum: 10c0/666d5b73bfa7340c5186b244416ce965cd276e4bc91a12453ff6eddcc62f02a19c6f532305601d90c809dd5acbd45dd6eea5eb43e0a879a0b3d66d0886a4d8d2 + languageName: node + linkType: hard + "through2@npm:^2.0.3": version: 2.0.5 resolution: "through2@npm:2.0.5"