aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DiagramBox.scss128
-rw-r--r--src/client/views/nodes/DiagramBox.tsx96
2 files changed, 127 insertions, 97 deletions
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 64b0e6c0e..1b6efe01d 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -8,11 +8,12 @@
justify-content: center;
flex-direction: column;
height:100%;
+ padding:20px;
+ padding-right:40px;
button{
- font-size:10px;
- margin:5px;
+ font-size:15px;
height:100%;
- width:30%;
+ width:100%;
border: none;
border-radius: 5px;
cursor: pointer;
@@ -23,6 +24,7 @@
button:hover {
background-color: #0056b3;
}
+
}
.DiagramBox-wrapper {
width: 100%;
@@ -31,43 +33,58 @@
flex-direction: column;
align-items: center;
justify-content: center;
- .backButton{
- position: absolute;
- top:0;
- left:0;
- }
- .search-bar {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- width: 100%;
- padding: 10px;
-
- textarea {
- flex: 1;
- height: 5px;
- margin-right: 10px;
- min-height: 20px;
- resize:none;
- overflow: hidden;
- }
-
- button {
- padding: 5px 10px;
- width:80px;
- height:30px;
- border-radius: 10px;
- }
- }
-
.content {
- flex: 1;
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
+ padding:10px;
width:100%;
height:100%;
+ .topbar{
+ .backButtonDrawing{
+ padding: 5px 10px;
+ height:23px;
+ border-radius: 10px;
+ text-align: center;
+ padding:0;
+ width:50px;
+ font-size:10px;
+ position:absolute;
+ top:10px;
+ left:10px;
+ }
+ p{
+ margin-left:60px
+ }
+ }
+ .search-bar {
+ .backButton{
+ text-align: center;
+ padding:0;
+ width:50px;
+ font-size:10px;
+
+ }
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ textarea {
+ flex: 1;
+ height: 5px;
+ min-height: 20px;
+ resize:none;
+ overflow: hidden;
+ }
+ button {
+ padding: 5px 10px;
+ width:80px;
+ height:23px;
+ border-radius: 10px;
+ }
+ }
.diagramBox{
flex: 1;
display: flex;
@@ -76,28 +93,27 @@
svg{
max-width: none !important;
}
- }
- }
-
- .loading-circle {
- position: absolute;
- display:flex;
- align-items: center;
- justify-content: center;
- width: 50px;
- height: 50px;
- border-radius: 50%;
- border: 3px solid #ccc;
- border-top-color: #333;
- animation: spin 1s infinite linear;
- }
-
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
+ .loading-circle {
+ position: absolute;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: 3px solid #ccc;
+ border-top-color: #333;
+ animation: spin 1s infinite linear;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
}
}
}
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index a294ed75c..220c43ead 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -45,6 +45,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
this.inputValue = e.target.value;
+ console.log(e.target.value);
};
async componentDidMount() {
this._props.setContentViewBox?.(this);
@@ -55,9 +56,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'cardinal' },
gantt: { useMaxWidth: true, useWidth: 2000 },
});
+ if (!this.Document.testValue) {
+ this.Document.height = 500;
+ this.Document.width = 500;
+ }
+ this.Document.testValue = 'a';
this.mermaidCode = 'a';
- if (typeof this.Document.mermaidCode === 'string') {
- this.renderMermaidAsync(this.Document.mermaidCode);
+ if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
+ this.renderMermaidAsync(this.Document.drawingMermaidCode);
}
console.log(this.Document.title);
// this.renderMermaidAsync(this.timeline);
@@ -77,8 +83,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
);
}
componentDidUpdate = () => {
- if (typeof this.Document.mermaidCode === 'string' && this.Document.menuState === 'drawing') {
- this.renderMermaidAsync(this.Document.mermaidCode);
+ if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
+ this.renderMermaidAsync(this.Document.drawingMermaidCode);
+ }
+ if (typeof this.Document.gptMermaidCode === 'string' && this.Document.menuState === 'gpt') {
+ this.renderMermaidAsync(this.Document.gptMermaidCode);
}
};
switchRenderDiv() {
@@ -128,7 +137,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
@action handleRenderClick = () => {
this.mermaidCode = '';
- this.generateMermaidCode();
+ if (this.inputValue) {
+ this.generateMermaidCode();
+ }
};
@action async generateMermaidCode() {
console.log('Generating Mermaid Code');
@@ -155,6 +166,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
}
this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode));
+ this.Document.gptMermaidCode = this.removeWords(this.mermaidCode);
this.loading = false;
}
isValidCode = (html: string) => true;
@@ -224,9 +236,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
// this will save the text
if (diagramExists) {
- this.Document.mermaidCode = mermaidCode;
+ this.Document.drawingMermaidCode = mermaidCode;
} else {
- this.Document.mermaidCode = '';
+ this.Document.drawingMermaidCode = '';
}
}
}
@@ -283,27 +295,28 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return (
<div className="buttonCollections">
<button type="button" onClick={this.drawingButton}>
- Drawing
+ Drawing - Create diagram from ink drawing
</button>
<button type="button" onClick={this.gptButton}>
- GPT
+ GPT - Generate diagram with AI prompt
</button>
<button type="button" onClick={this.mermaidButton}>
- Mermaid Code
+ Mermaid Editor - Create diagram with mermaid code
</button>
</div>
);
}
- renderDrawing (): React.ReactNode {
+ renderDrawing(): React.ReactNode {
+ console.log(this.Document.mermaidCode);
return (
<div ref={this._dragRef} className="DiagramBox-wrapper">
- <button type="button" className="backButton" onClick={this.optionButton}>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
- </svg>
- </button>
<div className="content">
+ <div className="topBar">
+ <button className="backButtonDrawing" type="button" onClick={this.optionButton}>
+ Back
+ </button>
+ {!this.Document.mermaidCode && <p>Click the red pen icon to flip onto the collection side and draw a diagram with ink</p>}
+ </div>
<div id={'dashDiv' + this.Document.title} className="diagramBox" />
</div>
</div>
@@ -313,24 +326,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
renderGpt(): React.ReactNode {
return (
<div ref={this._dragRef} className="DiagramBox-wrapper">
- <button type="button" className="backButton" onClick={this.optionButton}>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
- </svg>
- </button>
- <div className="search-bar">
- <textarea value={this.inputValue} onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
- <button type="button" onClick={this.handleRenderClick}>
- Generate
- </button>
- </div>
<div className="content">
- {this.mermaidCode ? (
- <div id={'dashDiv' + this.Document.title} className="diagramBox" />
- ) : (
- <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div>
- )}
+ <div className="search-bar">
+ <button className="backButton" type="button" onClick={this.optionButton}>
+ Back
+ </button>
+ <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+ <button className="generateButton" type="button" onClick={this.handleRenderClick}>
+ Generate
+ </button>
+ </div>
+ <div id={'dashDiv' + this.Document.title} className="diagramBox" />
</div>
</div>
);
@@ -339,15 +345,23 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
renderMermaidCode(): React.ReactNode {
return (
<div ref={this._dragRef} className="DiagramBox-wrapper">
- <button className="backButton" type="button" onClick={this.optionButton}>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
- </svg>
- </button>
+ <div className="content">
+ <div className="search-bar">
+ <button className="backButton" type="button" onClick={this.optionButton}>
+ Back
+ </button>
+ <textarea placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+ </div>
+ <div id={'dashDiv' + this.Document.title} className="diagramBox" />
+ </div>
</div>
);
}
+ handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+ if (typeof e.target.value === 'string') {
+ this.renderMermaidAsync(e.target.value);
+ }
+ };
timeline = `gantt
title College Timeline
dateFormat YYYY-MM-DD
@@ -385,5 +399,5 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
layout: { view: DiagramBox, dataField: 'dadta' },
- options: { _height: 300, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' },
+ options: { _height: 700, _width: 700, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' },
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:53:39 +0000