aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DiagramBox.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2025-06-23 13:26:59 -0400
committerbobzel <zzzman@gmail.com>2025-06-23 13:26:59 -0400
commit35bd9e51f7cef551382025a5459d68eddd8f028b (patch)
tree8edab8e8e283d06bdeba632959fd51e1488c4af5 /src/client/views/nodes/DiagramBox.tsx
parente7a96fa043cfc9c3c426e09bbef42c8df88a45f6 (diff)
fixed invalidations to not trigger creating new refs when ref= was assigned to an anonymous function. fixed scribble erase to not delete everything it overlaps, just things it intersects with or contains. fixed ink to have a Math mode and fixed math recognition myscript calls.
Diffstat (limited to 'src/client/views/nodes/DiagramBox.tsx')
-rw-r--r--src/client/views/nodes/DiagramBox.tsx6
1 files changed, 4 insertions, 2 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 7cfccf0dc..6a31f64ce 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -185,6 +185,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return '( )';
};
+ setRef = (r: HTMLDivElement | null) => this.fixWheelEvents(r, this._props.isContentActive);
+ setDiagramBoxRef = (r: HTMLDivElement | null) => r && this.renderMermaidAsync.call(this, this.removeWords(this.mermaidcode), r);
render() {
return (
<div
@@ -192,7 +194,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
style={{
pointerEvents: this._props.isContentActive() ? undefined : 'none',
}}
- ref={r => this.fixWheelEvents(r, this._props.isContentActive)}>
+ ref={this.setRef}>
<div className="DIYNodeBox-searchbar">
<input type="text" value={this._inputValue} onKeyDown={action(e => e.key === 'Enter' && this.generateMermaidCode())} onChange={action(e => (this._inputValue = e.target.value))} />
<button type="button" onClick={this.generateMermaidCode}>
@@ -208,7 +210,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
) : this._generating ? (
<div className="loading-circle" />
) : (
- <div className="diagramBox" ref={r => r && this.renderMermaidAsync.call(this, this.removeWords(this.mermaidcode), r)}>
+ <div className="diagramBox" ref={this.setDiagramBoxRef}>
{this._errorMessage || 'Type a prompt to generate a diagram'}
</div>
)}