aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DiagramBox.tsx85
1 files changed, 52 insertions, 33 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 553d55ac4..1b8290652 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -50,9 +50,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
});
this.mermaidCode = 'asdasdasd';
let docArray: Doc[] = DocListCast(this.Document.data);
- let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle')
+ let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text')
+ mermaidCodeDoc=mermaidCodeDoc.filter(doc=>(doc.text as RichTextField).Text=='mermaidCodeTitle')
if(mermaidCodeDoc[0]){
- this.renderMermaidAsync((mermaidCodeDoc[0].text as RichTextField).Text);
+ if(typeof mermaidCodeDoc[0].title=='string'){
+ console.log(mermaidCodeDoc[0].title)
+ if(mermaidCodeDoc[0].title!=""){
+ this.renderMermaidAsync(mermaidCodeDoc[0].title);
+ }
+ }
}
else{
DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
@@ -64,10 +70,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
}
});
}
- reaction(() => DocListCast(this.Document.data),
- docs=> this.createMermaidCode(),
- {fireImmediately: true}
- )
+ reaction(
+ () => DocListCast(this.Document.data),
+ docs => {
+ console.log("reaction happened")
+ this.createMermaidCode();
+
+ },
+ { fireImmediately: true }
+ );
}
renderMermaid = async (str: string) => {
try {
@@ -146,7 +157,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
}
async createMermaidCode() {
- console.log("i just ran")
let mermaidCode=""
let diagramExists=false
if (this.Document.data instanceof List) {
@@ -159,34 +169,40 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
setTimeout(resolve, 0);
});
await timeoutPromise();
+ lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).forEach(inkView => {
+ const componentView = inkView?.ComponentView;
+ if (componentView) {
+ console.log(componentView.constructor.name, componentView); // Print instance type and object
+ }
+ });
let inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke);
+ console.log(lineArray.length)
+ console.log(inkStrokeArray.length)
if (inkStrokeArray[0]) {
mermaidCode = 'graph LR;';
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: 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;
- 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])) {
+ let inkStrokeXArray = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord => coord.X).map(doc=>doc*inkScaleX);
+ let inkStrokeYArray = (inkingStrokeArray[j] as InkingStroke)?.inkScaledData().inkData.map(coord => coord.Y).map(doc=>doc*inkScaleY);
+ //console.log(inkingStrokeArray.length)
+ //console.log(lineArray.length)
+ let minX: number = Math.min(...inkStrokeXArray);
+ let minY: number = Math.min(...inkStrokeYArray);
+ let startX = inkStrokeXArray[0] - minX + (lineArray[j]?.x as number);
+ let startY = inkStrokeYArray[0] - minY + (lineArray[j]?.y as number);
+ let endX = inkStrokeXArray[inkStrokeXArray.length - 1]- minX + (lineArray[j].x as number);
+ let endY = inkStrokeYArray[inkStrokeYArray.length - 1]- minY + (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') {
+ if (this.isPointInBox(rectangle2, [endX, endY]) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') {
diagramExists=true
mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
- //console.log(mermaidCode)
+
}
}
}
@@ -194,25 +210,28 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
}
}
}
- if(diagramExists){
- DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
- if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
- if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
- let docArray: Doc[] = DocListCast(this.Document.data);
- docArray=docArray.filter(doc => doc.type == 'rich text')
- let mermaidCodeDoc = docArray.filter(doc => (doc.text as RichTextField).Text == 'mermaidCodeTitle')
- if(mermaidCodeDoc[0]){
+ DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
+ if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
+ if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
+ let docArray: Doc[] = DocListCast(this.Document.data);
+ docArray=docArray.filter(doc => doc.type == 'rich text')
+ let mermaidCodeDoc = docArray.filter(doc => (doc.text as RichTextField).Text == 'mermaidCodeTitle')
+ if(mermaidCodeDoc[0]){
+ if(diagramExists){
mermaidCodeDoc[0].title=mermaidCode
}
+ else{
+ mermaidCodeDoc[0].title=""
+ }
}
}
- });
- }
+ }
+ });
let docArray: Doc[] = DocListCast(this._props.Document.data)
- console.log(docArray.length)
//console.log(mermaidCode)
}
+
getTextInBox = (box: Doc, richTextArray: Doc[]): string => {
for (let i = 0; i < richTextArray.length; i++) {
let textDoc = richTextArray[i];