aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DiagramBox.scss11
-rw-r--r--src/client/views/nodes/DiagramBox.tsx102
2 files changed, 83 insertions, 30 deletions
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index d73dd2a97..4bfd4f7cb 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -181,6 +181,17 @@
height:23px;
border-radius: 10px;
}
+ .rightButtons{
+ display:flex;
+ flex-direction: column;
+ button {
+ padding: 5px 10px;
+ width:80px;
+ height:23px;
+ margin:2;
+ border-radius: 10px;
+ }
+ }
}
.loading-circle {
position: absolute;
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index fcf6e580b..6ea574aab 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,7 +1,7 @@
/* eslint-disable prettier/prettier */
/* eslint-disable jsx-a11y/control-has-associated-label */
import mermaid from 'mermaid';
-import { action, makeObservable, observable, reaction } from 'mobx';
+import { action, makeObservable, observable, reaction, computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast } from '../../../fields/Doc';
@@ -70,23 +70,33 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
this.renderMermaidAsync(this.Document.drawingMermaidCode);
}
- this.renderMermaidAsync(this.timeline);
// this is so that ever time a new doc, text node or ink node, is created, this.createMermaidCode will run which will create a save
- // reaction(
- // () => DocListCast(this.Document.data),
- // () => this.lockInkStroke(),
- // { fireImmediately: true }
+ reaction(
+ () => DocListCast(this.Document.data),
+ () => this.lockInkStroke(),
+ { fireImmediately: true }
+ );
+ reaction(
+ () =>
+ DocListCast(this.Document.data)
+ .filter(doc => doc.type === 'rich text')
+ .map(doc => (doc.text as RichTextField).Text),
+ () => this.convertDrawingToMermaidCode(),
+ { fireImmediately: true }
+ );
+ // const rectangleXValues = computed(() =>
+ // DocListCast(this.Document.data)
+ // .filter(doc => doc.title === 'rectangle')
+ // .map(doc => doc.x)
// );
// reaction(
- // () =>
- // DocListCast(this.Document.data)
- // .filter(doc => doc.type === 'rich text')
- // .map(doc => (doc.text as RichTextField).Text),
- // () => this.convertDrawingToMermaidCode(),
+ // () => rectangleXValues.get(),
+ // () => this.lockInkStroke(),
// { fireImmediately: true }
// );
- this.lockInkStroke();
+ // this.lockInkStroke();
}
+
componentDidUpdate = () => {
if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
this.renderMermaidAsync(this.Document.drawingMermaidCode);
@@ -169,7 +179,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.loading = true;
let prompt = '';
prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this.inputValue;
- console.log('there is no text save');
// }
const res = await gptAPICall(prompt, GPTCallType.MERMAID);
this.loading = true;
@@ -259,6 +268,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
}
async lockInkStroke() {
+ console.log("hello")
+ console.log(DocListCast(this.Document.data).filter(doc => doc.title === 'rectangle').map(doc => doc.x))
if (this.Document.data instanceof List) {
const docArray: Doc[] = DocListCast(this.Document.data);
const rectangleArray = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle');
@@ -352,15 +363,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
- if(!inkToDelete.transformed){
- docViewForYourCollection.ComponentView?.removeDocument(inkToDelete)
- docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
- newInkDoc.transformed=false;
-
- }
- const bruh2= DocListCast(this.Document.data).filter(doc => doc.title === 'line' || doc.title === 'stroke').map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke).map(stroke => stroke?.ComponentView);
- console.log(bruh2)
- console.log((bruh2[0] as InkingStroke)?.inkScaledData())
+ // docViewForYourCollection.ComponentView?.removeDocument(inkToDelete)
+ // docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
+
+
+
+ // const bruh2= DocListCast(this.Document.data).filter(doc => doc.title === 'line' || doc.title === 'stroke').map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke).map(stroke => stroke?.ComponentView);
+ // console.log(bruh2)
+ // console.log((bruh2[0] as InkingStroke)?.inkScaledData())
}
}
});
@@ -476,10 +486,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<button className="backButton" type="button" onClick={this.optionButton}>
Back
</button>
- <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} />
- <button className="generateButton" type="button" onClick={this.handleRenderClick}>
- Generate
- </button>
+ <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange}onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+ <div className="rightButtons">
+ <button className="generateButton" type="button" onClick={this.handleRenderClick}>
+ Generate
+ </button>
+ <button className="convertButton" type="button" onClick={this.handleConvertButton}>
+ Edit
+ </button>
+ </div>
</div>
{this.mermaidCode ? (
<div id={'dashDiv' + this.Document.title} className="diagramBox" />
@@ -490,7 +505,27 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
</div>
);
}
-
+ handleConvertButton=()=>{
+ this.Document.menuState = 'mermaidCode';
+ if(typeof this.Document.gptMermaidCode==='string'){
+ this.createInputValue=this.removeFirstEmptyLine(this.Document.gptMermaidCode);
+ console.log(this.Document.gptMermaidCode)
+ this.renderMermaidAsync(this.Document.gptMermaidCode);
+ }
+ }
+ removeFirstEmptyLine(input: string): string {
+ const lines = input.split('\n');
+ let emptyLineRemoved = false;
+ const resultLines = lines.filter(line => {
+ if (!emptyLineRemoved && line.trim() === '') {
+ emptyLineRemoved = true;
+ return false;
+ }
+ return true;
+ });
+ return resultLines.join('\n');
+ }
+
renderMermaidCode(): React.ReactNode {
return (
<div ref={this._dragRef} className="DiagramBox-wrapper">
@@ -522,7 +557,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
</button>
</div>
)}
- <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} />
+ <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor}/>
<div id={'dashDiv' + this.Document.title} className="diagramBox" />
</div>
</div>
@@ -541,14 +576,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
- C -->|Three| F[fa:fa-car Car]`;
+ C -->|Three| F[fa:fa-car Car]`
this.renderMermaidAsync(this.createInputValue);
};
pieButton = () => {
this.createInputValue = `pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
- "Rats" : 15`;
+ "Rats" : 15`
this.renderMermaidAsync(this.createInputValue);
};
timelineButton = () => {
@@ -613,6 +648,13 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.renderMermaidAsync(e.target.value);
}
};
+ removeWhitespace(str: string): string {
+ return str.replace(/\s+/g, '');
+ }
+ autoResize(element: HTMLTextAreaElement): void {
+ element.style.height = '5px';
+ element.style.height = element.scrollHeight + 'px';
+ }
timeline = `gantt
title College Timeline
dateFormat YYYY-MM-DD
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:21:43 +0000