Wait three animation frames before creating content in diagram widget…

…, otherwise the fit-to-screen action is applied too early
mulesoft-labs · May 25, 2018 · 6dc4ed5 · 6dc4ed5
1 parent 9627b1f
commit 6dc4ed5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/depgraph-navigator/src/browser/graph/graph-layout.ts b/depgraph-navigator/src/browser/graph/graph-layout.ts
@@ -31,7 +31,10 @@ export class ElkGraphLayout implements IModelLayoutEngine {
         this.elk = elkFactory();
     }
 
-    layout(graph: SGraphSchema, index?: SModelIndex<SModelElementSchema>): Promise<SGraphSchema> {
+    layout(graph: SGraphSchema, index?: SModelIndex<SModelElementSchema>): SGraphSchema | Promise<SGraphSchema> {
+        if (graph.type !== 'graph') {
+            return graph;
+        }
         if (!index) {
             index = new SModelIndex();
             index.add(graph);

diff --git a/depgraph-navigator/src/browser/graph/model-source.ts b/depgraph-navigator/src/browser/graph/model-source.ts
@@ -42,8 +42,8 @@ export class DepGraphModelSource extends LocalModelSource {
         registry.register(SelectAllCommand.KIND, this);
     }
 
-    start(): Promise<void> {
-        return this.setModel(this.graphGenerator.graph);
+    start(): void {
+        this.currentRoot = this.graphGenerator.graph;
     }
 
     select(elementIds: string[]): Promise<void> {

diff --git a/depgraph-navigator/src/browser/widget/diagram-manager.ts b/depgraph-navigator/src/browser/widget/diagram-manager.ts
@@ -39,28 +39,44 @@ export class DepGraphDiagramManager extends DiagramManagerImpl {
         return widget;
     }
 
-    protected createModel(uri: URI, modelSource: DepGraphModelSource): void {
-        this.fileSystem.resolveContent(uri.toString()).then(({stat, content}) => {
-            const pck = JSON.parse(content);
-            const generator = modelSource.graphGenerator as NodeModulesGraphGenerator;
-            generator.startUri = uri;
-            const node = generator.generateNode(pck.name, pck.version);
-            node.description = pck.description;
-            node.resolved = true;
-            if (pck.dependencies)
-                generator.addDependencies(node, pck.dependencies);
-            if (pck.optionalDependencies)
-                generator.addDependencies(node, pck.optionalDependencies, true);
-            if (pck.peerDependencies)
-                generator.addDependencies(node, pck.peerDependencies, true);
-            modelSource.updateModel().then(() => {
-                modelSource.center([node.id]);
-            });
-        });
+    protected async createModel(uri: URI, modelSource: DepGraphModelSource): Promise<void> {
+        // Workaround for https://github.com/theia-ide/sprotty/issues/218
+        await animationFrames(3);
+
+        const { content } = await this.fileSystem.resolveContent(uri.toString());
+        const pck = JSON.parse(content);
+        const generator = modelSource.graphGenerator as NodeModulesGraphGenerator;
+        generator.startUri = uri;
+        const node = generator.generateNode(pck.name, pck.version);
+        node.description = pck.description;
+        node.resolved = true;
+        if (pck.dependencies)
+            generator.addDependencies(node, pck.dependencies);
+        if (pck.optionalDependencies)
+            generator.addDependencies(node, pck.optionalDependencies, true);
+        if (pck.peerDependencies)
+            generator.addDependencies(node, pck.peerDependencies, true);
+        await modelSource.updateModel();
+        modelSource.center([node.id]);
     }
 
     get diagramWidgetFactory(): DiagramWidgetFactory {
         return this._diagramWidgetFactory;
     }
 
 }
+
+function animationFrames(number: number): Promise<void> {
+    if (number < 0) {
+        throw new Error('Illegal argument: ' + number);
+    }
+    return new Promise(resolve => {
+        function recurse(n: number): void {
+            if (n === 0)
+                resolve();
+            else
+                window.requestAnimationFrame(() => recurse(n - 1));
+        }
+        recurse(number);
+    });
+}