- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Use Diagramming in Typescript/Angular
Read 47 times

Davaaron   Offline
YaBB Newbies
*
Posts: 2
I Love MindFusion!


   
     
 
Use Diagramming in Typescript/Angular
Jul 12th, 2018 at 5:32pm
 
Hi,

is there anyone who managed to import the 'diagram-library' npm package into an Angular 2+ project?
I added diagram-library to package.json and saved the file which caused an automatic restorage of my npm packages in my node_modules folder.
The diagram-library folder contains some Javascript files (Common, Diagramming) and a typed file (t.ds).

I'd like to take advantage of that typings, that's why I am not including the JavaScript files by the HTML <script> tags.

What I did was the following:
Code (Javascript):
import { MindFusion } from 'diagram-library';

import Diagram = MindFusion.Diagramming.Diagram;
import DiagramLink = MindFusion.Diagramming.DiagramLink;
import ShapeNode = MindFusion.Diagramming.ShapeNode;

import Rect = MindFusion.Drawing.Rect;
import LayeredLayout = MindFusion.Graphs.LayeredLayout;
 



The first line is throwing an error, saying: Quote:
The file ".../jsdiag.t.ds" is not a module
.

I think the problem is that you are not exporting the declared namespace nor any classes?

But I don't know, as I'm pretty new to Angular and Typescript.

How can I solve the issue without losing the advantage of type safety on compile time and word suggestions?

Thanks in advance  Smiley
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 159
Gender: male
MindFusion team


   
     
 
Re: Use Diagramming in Typescript/Angular
Reply #1 - Jul 13th, 2018 at 12:43pm
 
Hi,

Adding a reference path to the typed diagramming file should be enough to resolve the types in the library:
Code (Java):
/// <reference path="node_modules/diagram-library/jsdiag.d.ts" />

import Diagram = MindFusion.Diagramming.Diagram;
import DiagramLink = MindFusion.Diagramming.DiagramLink;
import ShapeNode = MindFusion.Diagramming.ShapeNode;

import Rect = MindFusion.Drawing.Rect;
import LayeredLayout = MindFusion.Graphs.LayeredLayout; 



Also, make sure that the MindFusion.Common.js and MindFusion.Diagramming.js scripts are referenced and loaded by the browser. If you're not using jquery, you should also set the MindFusionImpl StandAlone setting:
Code (HTML):
<script type="text/javascript">MindFusionImpl = "StandAlone"</script>
<script src="node_modules/diagram-library/MindFusion.Common.js"></script>
<script src="node_modules/diagram-library/MindFusion.Diagramming.js"></script> 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Davaaron   Offline
YaBB Newbies
*
Posts: 2
I Love MindFusion!


   
     
 
Re: Use Diagramming in Typescript/Angular
Reply #2 - Jul 13th, 2018 at 3:55pm
 
Hi,

thanks for your quick response. It seems to work now. Every npm package that I have installed yet, could be imported easily by the code shown in the starting post.

 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print