diff --git a/src/imagerenderer.tsx b/src/imagerenderer.tsx index 3cb4bdc15..ec6063ee3 100644 --- a/src/imagerenderer.tsx +++ b/src/imagerenderer.tsx @@ -29,8 +29,30 @@ type CV = mobx.IComputedValue; // @mobxReact.observer -class SimpleImageRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts}, {}> { +class SimpleImageRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}, {}> { objUrl : string = null; + imageRef : React.RefObject = React.createRef(); + imageLoaded : OV = mobx.observable.box(false, {name: "imageLoaded"}); + + componentDidMount() { + let img = this.imageRef.current; + if (img == null) { + return; + } + if (img.complete) { + this.setImageLoaded(); + return; + } + img.onload = () => { + this.setImageLoaded(); + }; + } + + setImageLoaded() { + mobx.action(() => { + this.imageLoaded.set(true); + })(); + } componentWillUnmount() { if (this.objUrl != null) { @@ -44,9 +66,13 @@ class SimpleImageRenderer extends React.Component<{data : Blob, context : Render this.objUrl = URL.createObjectURL(dataBlob); } let opts = this.props.opts; + let forceHeight : number = null; + if (!this.imageLoaded.get() && this.props.savedHeight >= 0) { + forceHeight = this.props.savedHeight; + } return ( -
- +
+
); } diff --git a/src/markdownrenderer.tsx b/src/markdownrenderer.tsx index d5c57461c..58fd9a9d4 100644 --- a/src/markdownrenderer.tsx +++ b/src/markdownrenderer.tsx @@ -27,7 +27,7 @@ function CodeRenderer(props : any) : any { } @mobxReact.observer -class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts}, {}> { +class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}, {}> { markdownText : OV = mobx.observable.box(null, {name: "markdownText"}); componentDidMount() { @@ -38,9 +38,10 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren })(); }); } + render() { if (this.markdownText.get() == null) { - return null; + return
} let markdownComponents = { a: LinkRenderer, @@ -54,8 +55,10 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren }; let markdownText = this.markdownText.get(); return ( -
- +
+
+ +
); } diff --git a/src/sh2.less b/src/sh2.less index 9f292d484..3593d4703 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -2947,6 +2947,9 @@ input[type=checkbox] { .simple-image-renderer { padding: 10px; + img { + display: block; + } } .markdown { @@ -3003,7 +3006,7 @@ input[type=checkbox] { } } -.markdown-renderer.markdown { +.markdown-renderer .markdown { padding: 5px; line-height: 1.5; diff --git a/src/simplerenderer.tsx b/src/simplerenderer.tsx index fd65936f3..5f9b3af6d 100644 --- a/src/simplerenderer.tsx +++ b/src/simplerenderer.tsx @@ -7,6 +7,7 @@ import {If, For, When, Otherwise, Choose} from "tsx-control-statements/component import type {RendererModelInitializeParams, TermOptsType, RendererContext, RendererOpts, SimpleBlobRendererComponent, RendererModelContainerApi, RendererPluginType, PtyDataType, RendererModel, RendererOptsUpdate, LineType} from "./types"; import {GlobalModel, LineContainerModel, getPtyData, Cmd} from "./model"; import {PtyDataBuffer} from "./ptydata"; +import {debounce, throttle} from "throttle-debounce"; type OV = mobx.IObservableValue; type CV = mobx.IComputedValue; @@ -20,8 +21,10 @@ class SimpleBlobRendererModel { loading : OV; loadError : OV = mobx.observable.box(null, {name: "renderer-loadError"}); ptyData : PtyDataType; + updateHeight_debounced : (newHeight : number) => void constructor() { + this.updateHeight_debounced = debounce(1000, this.updateHeight.bind(this)); } initialize(params : RendererModelInitializeParams) : void { @@ -52,7 +55,6 @@ class SimpleBlobRendererModel { if (this.savedHeight != newHeight) { this.savedHeight = newHeight; this.api.saveHeight(newHeight); - console.log("saveheight", sprintf("[%d]", this.context.lineNum), newHeight); } } @@ -155,13 +157,15 @@ class SimpleBlobRenderer extends React.Component<{lcm : LineContainerModel, line } handleResize(entries : ResizeObserverEntry[]) : void { - console.log("simplerender resize", sprintf("[%d]", this.model.context.lineNum), entries); + if (this.model.loading.get()) { + return; + } if (this.props.onHeightChange) { this.props.onHeightChange(); } if (!this.model.loading.get() && this.wrapperDivRef.current != null) { let height = this.wrapperDivRef.current.offsetHeight; - this.model.updateHeight(height); + this.model.updateHeight_debounced(height); } } @@ -204,7 +208,7 @@ class SimpleBlobRenderer extends React.Component<{lcm : LineContainerModel, line let dataBlob = new Blob([model.ptyData.data]); return (
- +
); } diff --git a/src/types.ts b/src/types.ts index 99c3cf2df..3f142649f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -401,8 +401,8 @@ type RendererModel = { receiveData : (pos : number, data : Uint8Array, reason? : string) => void, }; -type SimpleBlobRendererComponent = React.ComponentType<{data : Blob, context : RendererContext, opts : RendererOpts}>; -type SimpleJsonRendererComponent = React.ComponentType<{data : any, context : RendererContext, opts : RendererOpts}>; +type SimpleBlobRendererComponent = React.ComponentType<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}>; +type SimpleJsonRendererComponent = React.ComponentType<{data : any, context : RendererContext, opts : RendererOpts, savedHeight : number}>; type FullRendererComponent = React.ComponentType<{model : any}>; type WindowSize = {