Skip to content

🐛Fix links not rendering for unopened xircuits tab #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MFA-X-AI merged 1 commit into from
Sep 2, 2022
Merged

🐛Fix links not rendering for unopened xircuits tab #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions src/components/XircuitsApp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export class XircuitsApplication {
return this.diagramEngine;
}

public customDeserializeModel = (modelContext: any) => {
public customDeserializeModel = (modelContext: any, initialRender?: boolean) => {

if (modelContext == null) {
// When context empty, just return
Expand Down Expand Up @@ -92,7 +92,6 @@ export class XircuitsApplication {
const sourceNode = tempModel.getNode(link.source);
const targetNode = tempModel.getNode(link.target);
const linkPoints = link.points;
const points = [];

const sourcePort = sourceNode.getPortFromID(link.sourcePort);
const sourcePortName = sourcePort.getOptions()['name'];
Expand All @@ -103,7 +102,6 @@ export class XircuitsApplication {
newLink = newTriangleLink;
}
}
newLink.setSourcePort(sourcePort);

const targetPort = targetNode.getPortFromID(link.targetPort);
const targetPortName = targetPort.getOptions()['name'];
Expand All @@ -114,14 +112,27 @@ export class XircuitsApplication {
newLink = newTriangleLink;
}
}
newLink.setTargetPort(targetPort);

// Set points on link if exist
const points = [];
linkPoints.map((point)=> {
points.push(new PointModel({ id:point.id, link: link, position: new Point(point.x, point.y) }));
})
newLink.setPoints(points);

newLink.setSourcePort(sourcePort);
newLink.setTargetPort(targetPort);
newLink.setSelected(link.selected);

if (initialRender) {
// When initial rendering of xircuits,
// delay the rendering of points.
setTimeout(() => {
newLink.setPoints(points);
}, 10)
}
else {
newLink.setPoints(points);
}
tempModel.addLink(newLink);
}
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/xircuitBodyWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
import { DefaultLinkModel, LinkModel } from '@projectstorm/react-diagrams';
import { LinkModel } from '@projectstorm/react-diagrams';
import { NodeModel } from "@projectstorm/react-diagrams-core/src/entities/node/NodeModel";
import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
import { ILabShell, JupyterFrontEnd } from '@jupyterlab/application';
Expand Down Expand Up @@ -180,6 +180,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
const [currentIndex, setCurrentIndex] = useState<number>(-1);
const [runType, setRunType] = useState<string>("run");
const [runTypesCfg, setRunTypesCfg] = useState<string>("");
const initialRender = useRef(true);
const xircuitLogger = new Log(app);
const contextRef = useRef(context);
const notInitialRender = useRef(false);
Expand Down Expand Up @@ -214,7 +215,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
try {
if (notInitialRender.current) {
const model: any = currentContext.model.toJSON();
let deserializedModel = xircuitsApp.customDeserializeModel(model);
let deserializedModel = xircuitsApp.customDeserializeModel(model, initialRender.current);
deserializedModel.registerListener({
// Detect changes when node is dropped or deleted
nodesUpdated: () => {
Expand Down Expand Up @@ -254,6 +255,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
}
})
xircuitsApp.getDiagramEngine().setModel(deserializedModel);
initialRender.current = false;
} else {
// Clear undo history when first time rendering
notInitialRender.current = true;
Expand Down