aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DiagramBox.tsx77
1 files changed, 46 insertions, 31 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 5254a4fe0..27f9d2a86 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -18,6 +18,7 @@ import { line } from 'd3';
import { InkingStroke } from '../InkingStroke';
import { DocumentManager } from '../../util/DocumentManager';
import { C } from '@fullcalendar/core/internal-common';
+import { Docs } from '../../documents/Documents';
@observer
export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -26,11 +27,10 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
}
private _ref: React.RefObject<HTMLDivElement> = React.createRef();
private _dragRef = React.createRef<HTMLDivElement>();
- private chartContent: string;
+ private chartContent: string="graph L;";
constructor(props: FieldViewProps) {
super(props);
makeObservable(this);
- this.chartContent = 'flowchart LR;A-->B:::wide;B-->C:::wide; B-->D[hello];';
}
@observable inputValue = '';
@@ -41,16 +41,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
@action handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.inputValue = e.target.value;
};
- componentDidMount() {
+ async componentDidMount() {
+ console.log(this.chartContent)
this._props.setContentViewBox?.(this);
mermaid.initialize({
securityLevel: 'loose',
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
});
- this.renderMermaidAsync.call(this, this.chartContent);
- this.mermaidCode = this.chartContent;
- this.chartContent= this.createMermaidCode();
+ this.mermaidCode = "asdasdasd";
+ if(this.chartContent!="graph LR;"){
+ this.chartContent=await this.createMermaidCode()
+ //console.log(this.chartContent)
+ }
+ this.renderMermaidAsync(this.chartContent)
+ this.testInkingStroke()
}
renderMermaid = async (str: string) => {
try {
@@ -112,66 +117,76 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
isValidCode = (html: string) => {
return true;
};
+ testInkingStroke=()=>{
+ if (this.Document.data instanceof List) {
+ let docArray: Doc[] = DocListCast(this.Document.data);
+ let lineArray = docArray.filter(doc => doc.title == 'line' || doc.title == 'stroke');
+ setTimeout(() => {
+ let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+ .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
+ console.log(inkStrokeArray)
+ });
+ }
+ }
removeWords(inputStr: string) {
inputStr = inputStr.replace('```mermaid', '');
return inputStr.replace('```', '');
}
- createMermaidCode() {
+ async createMermaidCode() {
let mermaidCode = 'graph LR;';
if (this.Document.data instanceof List) {
let docArray: Doc[] = DocListCast(this.Document.data);
let rectangleArray = docArray.filter(doc => doc.title == 'rectangle' || doc.title == 'circle');
let lineArray = docArray.filter(doc => doc.title == 'line' || doc.title == 'stroke');
let textArray = docArray.filter(doc => doc.type == 'rich text');
- setTimeout(() => {
- let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
- .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
- console.log(inkStrokeArray.length)
+ const timeoutPromise = () => new Promise(resolve => {
+ setTimeout(resolve, 0);
+ });
+ await timeoutPromise();
+ let inkStrokeArray=lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+ .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
+ if(inkStrokeArray[0]){
let inkingStrokeArray=inkStrokeArray.map(stroke=>stroke?.ComponentView)
for (let i = 0; i < rectangleArray.length; i++) {
const rectangle = rectangleArray[i];
for (let j = 0; j < lineArray.length; j++) {
let inkStrokeXArray=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord=>coord.X)
let inkStrokeYArray=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord=>coord.Y)
- let minX=Math.min(...inkStrokeXArray)
- let minY=Math.min(...inkStrokeYArray)
+ let minX:number=Math.min(...inkStrokeXArray)
+ let minY:number=Math.min(...inkStrokeYArray)
let inkScaleX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleX
let inkScaleY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkScaleY
let StartX:number=0
let StartY:number=0
let EndX:number=0
let EndY:number=0
- if(typeof docArray[j].x==='number'&&typeof docArray[j].y==='number'&&typeof (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j]==='number'){
- StartX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].X*inkScaleX-minX*inkScaleX
- StartY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].Y*inkScaleY-minY*inkScaleY+lineArray[j]?.y
- EndX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].X*inkScaleX-minX*inkScaleX+docArray[j].x
- EndY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].Y*inkScaleY-minY*inkScaleY+docArray[j].y
- }
- console.log((inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData)
- console.log((inkingStrokeArray[j] as InkingStroke)?.inkScaledData())
- console.log(EndX)
- console.log(EndY)
- console.log(docArray[j].title)
- console.log(docArray[j].x)
- console.log(docArray[j].y)
- console.log(docArray[j].width)
- console.log(docArray[j].height)
+ StartX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].X*inkScaleX-minX*inkScaleX+(lineArray[j]?.x as number)
+ StartY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[j].Y*inkScaleY-minY*inkScaleY+(lineArray[j]?.y as number)
+ EndX=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].X*inkScaleX-minX*inkScaleX+(lineArray[j].x as number)
+ EndY=(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData[(inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.length-1].Y*inkScaleY-minY*inkScaleY+(lineArray[j].y as number)
if (this.isPointInBox(rectangle, [StartX,StartY])) {
for (let k = 0; k < rectangleArray.length; k++) {
const rectangle2 = rectangleArray[k];
if (this.isPointInBox(rectangle2, [EndX,EndY]) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') {
+
mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+ //console.log(mermaidCode)
}
}
}
}
}
- });
+ }
+
}
- //console.log(mermaidCode);
- return mermaidCode;
+ console.log(this)
+ this.addDocument(Docs.Create.TextDocument("asd", { title:"hellotitle", x: 0, y: 0 }));
+ let docArray: Doc[] = DocListCast(this.Document.data);
+ console.log(docArray.length)
+ //console.log(mermaidCode)
+ return mermaidCode
};
getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 20:11:30 +0000