1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
|
import mermaid from 'mermaid';
import { action, computed, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast } from '../../../fields/Doc';
import { RichTextField } from '../../../fields/RichTextField';
import { Cast, DocCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
import { Gestures } from '../../../pen-gestures/GestureTypes';
import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
import { DocumentType } from '../../documents/DocumentTypes';
import { Docs } from '../../documents/Documents';
import { DocumentManager } from '../../util/DocumentManager';
import { LinkManager } from '../../util/LinkManager';
import { undoable } from '../../util/UndoManager';
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { InkingStroke } from '../InkingStroke';
import './DiagramBox.scss';
import { FieldView, FieldViewProps } from './FieldView';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { Tooltip } from '@mui/material';
/**
* this is a class for the diagram box doc type that can be found in the tools section of the side bar
*/
@observer
export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(DiagramBox, fieldKey);
}
static isPointInBox = (box: Doc, pt: number[]): boolean => {
if (typeof pt[0] === 'number' && typeof box.x === 'number' && typeof box.y === 'number' && typeof pt[1] === 'number') {
return pt[0] < box.x + NumCast(box.width) && pt[0] > box.x && pt[1] > box.y && pt[1] < box.y + NumCast(box.height);
}
return false;
};
_boxRef: HTMLDivElement | null = null;
constructor(props: FieldViewProps) {
super(props);
makeObservable(this);
}
@observable _showCode = false;
@observable _inputValue = '';
@observable _generating = false;
@observable _errorMessage = '';
@computed get mermaidcode() {
return StrCast(this.Document.$text, RTFCast(this.Document.$text)?.Text);
}
componentDidMount() {
this._props.setContentViewBox?.(this);
mermaid.initialize({
securityLevel: 'loose',
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
});
// when a new doc/text/ink/shape is created in the freeform view, this generates the corresponding mermaid diagram code
reaction(
() => DocListCast(this.Document.data),
docArray => docArray.length && this.convertDrawingToMermaidCode(docArray),
{ fireImmediately: true }
);
}
/**
* helper method for renderMermaidAsync
* @param str string containing the mermaid code
* @returns
*/
renderMermaid = (str: string) => {
try {
return mermaid.render('graph' + Date.now(), str);
} catch {
return { svg: '', bindFunctions: undefined };
}
};
/**
* will update the div containing the mermaid diagram to render the new mermaidCode
*/
renderMermaidAsync = async (mermaidCode: string, dashDiv: HTMLDivElement) => {
try {
const { svg, bindFunctions } = await this.renderMermaid(mermaidCode);
dashDiv.innerHTML = svg;
bindFunctions?.(dashDiv);
} catch (error) {
console.error('Error rendering Mermaid:', error);
}
};
setMermaidCode = undoable((res: string) => {
this.Document.$text = new RichTextField(
JSON.stringify({
doc: {
type: 'doc',
content: [
{
type: 'code_block',
content: [
{ type: 'text', text: `^@mermaids\n` },
{ type: 'text', text: this.removeWords(res) },
],
},
],
},
selection: { type: 'text', anchor: 1, head: 1 },
}),
res
);
}, 'set mermaid code');
/**
* will generate mermaid code with GPT based on what the user requested
*/
generateMermaidCode = action(() => {
this._generating = true;
const prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this._inputValue;
gptAPICall(prompt, GPTCallType.MERMAID).then(
action(res => {
this._generating = false;
if (res === 'Error connecting with API.') {
this._errorMessage = 'GPT call failed; please try again.';
}
// If GPT call succeeded, set mermaid code on Doc which will trigger a rendering if _showCode is false
else if (res && this.isValidCode(res)) {
this.setMermaidCode(res);
this._errorMessage = '';
} else {
this._errorMessage = 'GPT call succeeded but invalid html; please try again.';
}
})
);
});
isValidCode = (html: string) => (html ? true : false);
removeWords = (inputStrIn: string) => inputStrIn.replace('```mermaid', '').replace(`^@mermaids`, '').replace('```', '').replace(/^"/, '').replace(/"$/, '');
// method to convert the drawings on collection node side the mermaid code
convertDrawingToMermaidCode = async (docArray: Doc[]) => {
const rectangleArray = docArray.filter(doc => doc.title === Gestures.Rectangle || doc.title === Gestures.Circle);
const lineArray = docArray.filter(doc => doc.title === Gestures.Line || doc.title === Gestures.Stroke);
const textArray = docArray.filter(doc => doc.type === DocumentType.RTF);
await new Promise(resolve => setTimeout(resolve));
const inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke);
if (inkStrokeArray[0] && inkStrokeArray.length === lineArray.length) {
let mermaidCode = `graph TD \n`;
const inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView as InkingStroke).filter(stroke => stroke);
for (const rectangle of rectangleArray) {
for (const inkStroke of inkingStrokeArray) {
const inkData = inkStroke.inkScaledData();
const { inkScaleX, inkScaleY } = inkData;
const inkStrokeXArray = inkData.inkData.map(coord => coord.X * inkScaleX);
const inkStrokeYArray = inkData.inkData.map(coord => coord.Y * inkScaleY);
// need to minX and minY to since the inkStroke.x and.y is not relative to the doc. so I have to do some calcluations
const offX = Math.min(...inkStrokeXArray) - NumCast(inkStroke.Document.x);
const offY = Math.min(...inkStrokeYArray) - NumCast(inkStroke.Document.y);
const startX = inkStrokeXArray[0] - offX;
const startY = inkStrokeYArray[0] - offY;
const endX = inkStrokeXArray.lastElement() - offX;
const endY = inkStrokeYArray.lastElement() - offY;
if (DiagramBox.isPointInBox(rectangle, [startX, startY])) {
for (const rectangle2 of rectangleArray) {
if (DiagramBox.isPointInBox(rectangle2, [endX, endY])) {
const linkedDocs = LinkManager.Instance.getAllRelatedLinks(inkStroke.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, inkStroke.Document)));
const linkedDocText = Cast(linkedDocs[0]?.text, RichTextField, null)?.Text;
const linkText = linkedDocText ? `|${linkedDocText}|` : '';
mermaidCode += ' ' + Math.abs(NumCast(rectangle.x)) + this.getTextInBox(rectangle, textArray) + '-->' + linkText + Math.abs(NumCast(rectangle2.x)) + this.getTextInBox(rectangle2, textArray) + `\n`;
}
}
}
}
this.setMermaidCode(mermaidCode);
}
}
};
getTextInBox = (box: Doc, richTextArray: Doc[]) => {
for (const textDoc of richTextArray) {
if (DiagramBox.isPointInBox(box, [NumCast(textDoc.x), NumCast(textDoc.y)])) {
switch (box.title) {
case Gestures.Rectangle: return '(' + ((textDoc.text as RichTextField)?.Text ?? '') + ')';
case Gestures.Circle: return '((' + ((textDoc.text as RichTextField)?.Text ?? '') + '))';
default:
} // prettier-ignore
}
}
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
className="DIYNodeBox"
style={{
pointerEvents: this._props.isContentActive() ? undefined : 'none',
}}
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}>
Gen
</button>
<Tooltip title="show diagram code">
<input type="checkbox" onClick={action(() => (this._showCode = !this._showCode))} />
</Tooltip>
</div>
<div className="DIYNodeBox-content">
{this._showCode ? (
<FormattedTextBox {...this._props} fieldKey="text" />
) : this._generating ? (
<div className="loading-circle" />
) : (
<div className="diagramBox" ref={this.setDiagramBoxRef}>
{this._errorMessage || 'Type a prompt to generate a diagram'}
</div>
)}
</div>
</div>
);
}
}
Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
layout: { view: DiagramBox, dataField: 'data' },
options: {
_height: 300, //
_layout_fitWidth: true,
_layout_nativeDimEditable: true,
_layout_reflowVertical: true,
_layout_reflowHorizontal: true,
waitForDoubleClickToClick: 'never',
systemIcon: 'BsGlobe',
},
});
|
