Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Use Diagramming in Typescript/Angular (Read 3695 times)
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Use Diagramming in Typescript/Angular
Jul 12th, 2018 at 4:32pm
Print Post  
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)
Select All
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Use Diagramming in Typescript/Angular
Reply #1 - Jul 13th, 2018 at 11:43am
Print Post  
Hi,

Adding a reference path to the typed diagramming file should be enough to resolve the types in the library:
Code (Java)
Select All
/// <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)
Select All
<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
  
Back to top
 
IP Logged
 
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Re: Use Diagramming in Typescript/Angular
Reply #2 - Jul 13th, 2018 at 2:55pm
Print Post  
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.

  
Back to top
 
IP Logged
 
AK
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 1
Joined: Oct 23rd, 2018
Re: Use Diagramming in Typescript/Angular
Reply #3 - Oct 23rd, 2018 at 3:31am
Print Post  
I am new in mind fusion, i want to use in Angular 2 , but i am getting below error.
The file ".../jsdiag.t.ds" is not a module

my code here:

import { MindFusion } from 'diagram-library';

import AnchorPattern = MindFusion.Diagramming.AnchorPattern;
import AnchorPoint = MindFusion.Diagramming.AnchorPoint;
import DiagramNode = MindFusion.Diagramming.DiagramNode;
import DiagramLink = MindFusion.Diagramming.DiagramLink;
import ShapeNode = MindFusion.Diagramming.ShapeNode;
import MarkStyle = MindFusion.Diagramming.MarkStyle;
import Style = MindFusion.Diagramming.Style;
import Theme = MindFusion.Diagramming.Theme;
import HandlesStyle = MindFusion.Diagramming.HandlesStyle;
import Events = MindFusion.Diagramming.Events;
import Diagram = MindFusion.Diagramming.Diagram;
import Shape = MindFusion.Diagramming.Shape;
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Use Diagramming in Typescript/Angular
Reply #4 - Oct 23rd, 2018 at 7:24am
Print Post  
Hi,

Did you try the solution, already provided in the thread above?

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Use Diagramming in Typescript/Angular
Reply #5 - Oct 24th, 2018 at 7:34am
Print Post  
Attached to this post is a minimal sample Angular application, that demonstrates how to add the diagram component.

Regards,
Lyubo
  

MinApp.zip ( 95 KB | 148 Downloads )
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint