diff --git a/src/main.tsx b/src/main.tsx index 3676fec6..88142657 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1781,12 +1781,12 @@ class ScreenWindowView extends React.Component<{screen : Screen}, {}> { } @boundMethod - buildLineComponent(lineProps : LineFactoryProps) { + buildLineComponent(lineProps : LineFactoryProps) : JSX.Element { let {screen} = this.props; let {line, ...restProps} = lineProps; let realLine : LineType = (line as LineType); return ( - + ); } diff --git a/src/types.ts b/src/types.ts index 2ff0e6c6..83a4fba6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -570,7 +570,6 @@ type LineInterface = { } type LineFactoryProps = { - key : string, line : LineInterface, width : number, visible : OV, diff --git a/src/webshare-elems.tsx b/src/webshare-elems.tsx index 9ae20e6f..2b7da130 100644 --- a/src/webshare-elems.tsx +++ b/src/webshare-elems.tsx @@ -382,14 +382,11 @@ class WebLineView extends React.Component<{line : T.WebLine, cmd : T.WebCmd, top } @mobxReact.observer -class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> { +class WebScreenView extends React.Component<{}, {}> { viewRef : React.RefObject = React.createRef(); - linesRef : React.RefObject = React.createRef(); - width : OV = mobx.observable.box(0, {name: "webScreenView-width"}); - rszObs : ResizeObserver; + width : OV = mobx.observable.box(0, {name: "WebScreenView-width"}); handleResize_debounced : (entries : any) => void; - lastSelectedLine : number = 0; - ignoreNextScroll : boolean = false; + rszObs : ResizeObserver; constructor(props : any) { super(props); @@ -398,118 +395,46 @@ class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> { componentDidMount() : void { if (this.viewRef.current != null) { - let linesElem = this.viewRef.current; + let viewElem = this.viewRef.current; this.rszObs = new ResizeObserver(this.handleResize_debounced.bind(this)); - this.rszObs.observe(linesElem); - let width = linesElem.offsetWidth; + this.rszObs.observe(viewElem); + let width = viewElem.offsetWidth; if (width > 0) { mobx.action(() => { this.width.set(width); })(); } } - this.lastSelectedLine = WebShareModel.getSelectedLine(); - } - - getLineElem(lineNum : number) : HTMLElement { - let linesElem = this.linesRef.current; - if (linesElem == null) { - return null; - } - let elem = linesElem.querySelector(sprintf(".line[data-linenum=\"%d\"]", lineNum)); - return elem; - } - - getLineViewInfo(lineNum : number) : {height: number, topOffset: number, botOffset: number, anchorOffset: number} { - let linesElem = this.linesRef.current; - if (linesElem == null) { - return null; - } - let lineElem = this.getLineElem(lineNum); - if (lineElem == null) { - return null; - } - let rtn = { - height: lineElem.offsetHeight, - topOffset: 0, - botOffset: 0, - anchorOffset: 0, - }; - let containerTop = linesElem.scrollTop; - let containerBot = linesElem.scrollTop + linesElem.clientHeight; - let lineTop = lineElem.offsetTop; - let lineBot = lineElem.offsetTop + lineElem.offsetHeight; - if (lineTop < containerTop) { - rtn.topOffset = lineTop - containerTop; - } - else if (lineTop > containerBot) { - rtn.topOffset = lineTop - containerBot; - } - if (lineBot < containerTop) { - rtn.botOffset = lineBot - containerTop; - } - else if (lineBot > containerBot) { - rtn.botOffset = lineBot - containerBot; - } - rtn.anchorOffset = containerBot - lineBot; - return rtn; - } - - updateSelectedLine() : void { - let linesElem = this.linesRef.current; - if (linesElem == null) { - return null; - } - let newLine = WebShareModel.getSelectedLine(); - let lineIdx = WebShareModel.getLineIndex(newLine); - if (lineIdx == -1) { - return; - } - let viewInfo = this.getLineViewInfo(newLine); - if (viewInfo == null) { - return; - } - let numLines = WebShareModel.getNumLines(); - let isFirst = (lineIdx == 0); - let isLast = (lineIdx == numLines-1); - let offsetDelta = (isLast ? 10 : (isFirst ? -10 : 0)); - if (viewInfo.botOffset > 0) { - linesElem.scrollTop = linesElem.scrollTop + viewInfo.botOffset + offsetDelta; - this.ignoreNextScroll = true; - } - else if (viewInfo.topOffset < 0) { - linesElem.scrollTop = linesElem.scrollTop + viewInfo.topOffset + offsetDelta; - this.ignoreNextScroll = true; - } - this.lastSelectedLine = newLine; - } - - componentDidUpdate(prevProps, prevState, snapshot) : void { - if (WebShareModel.getSelectedLine() != this.lastSelectedLine) { - this.updateSelectedLine(); - } } handleResize(entries : any) : void { - let linesElem = this.viewRef.current; - if (linesElem == null) { + let viewElem = this.viewRef.current; + if (viewElem == null) { return; } - let width = linesElem.offsetWidth; - let height = linesElem.offsetHeight; + let width = viewElem.offsetWidth; + let height = viewElem.offsetHeight; if (width != this.width.get()) { WebShareModel.resizeWindow({width: width, height: height}); - console.log("width-update", width); mobx.action(() => { this.width.set(width); })(); } } + @boundMethod + buildLineComponent(lineProps : T.LineFactoryProps) : JSX.Element { + let line : T.WebLine = (lineProps.line as T.WebLine); + let cmd = WebShareModel.getCmdById(lineProps.line.lineid); + return ( + + ); + } + renderEmpty() : any { return (
-
+
@@ -517,46 +442,13 @@ class WebScreenView extends React.Component<{screen : T.WebFullScreen}, {}> { } render() { - let {screen} = this.props; - let lines = screen.lines ?? []; - let cmds = screen.cmds ?? []; - let cmdMap : Record = {}; - for (let i=0; i{dateSepStr}
- lineElements.push(sepElem); - } - let topBorder = (dateSepStr == null) && (idx != 0); - let lineElem = ; - lineElements.push(lineElem); - } return (
-
-
- {lineElements} -
+
); } @@ -590,7 +482,7 @@ class WebShareMain extends React.Component<{}, {}> {
- +
{WebShareModel.errMessage.get()}
diff --git a/src/webshare-model.ts b/src/webshare-model.ts index 9b351f36..df335d79 100644 --- a/src/webshare-model.ts +++ b/src/webshare-model.ts @@ -34,6 +34,7 @@ class WebShareModelClass { renderers : Record = {}; // lineid => RendererModel contentHeightCache : Record = {}; // lineid => height wsControl : WebShareWSControl; + anchor : {anchorLine : number, anchorOffset : number} = {anchorLine: 0, anchorOffset: 0}; constructor() { let urlParams = new URLSearchParams(window.location.search); @@ -57,6 +58,15 @@ class WebShareModelClass { return 0; } + setAnchorFields(anchorLine : number, anchorOffset : number, reason : string) : void { + this.anchor.anchorLine = anchorLine; + this.anchor.anchorOffset = anchorOffset; + } + + getAnchor() : {anchorLine : number, anchorOffset : number} { + return this.anchor; + } + getTermFontSize() : number { return 12; } @@ -343,6 +353,19 @@ class WebShareModelClass { } return fullScreen.lines.length; } + + getCmdById(lineId : string) : T.WebCmd { + let fullScreen = this.screen.get(); + if (fullScreen == null) { + return null; + } + for (let cmd of fullScreen.cmds) { + if (cmd.lineid == lineId) { + return cmd; + } + } + return null; + } } function getTermPtyData(termContext : T.TermContextUnion) : Promise {