Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic diagram component for Angular, beta version (Read 3505 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
diagram component for Angular, beta version
Mar 30th, 2020 at 5:30pm
Print Post  
We are beta testing a DiagramView component for Angular (diagram-view selector). It renders a MindFusion.Diagramming.Diagram instance assigned to "diagram" prop as its model. At this time the following properties can be set from angular templates too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid. All diagram events can be handled through event binding syntax as well:

Code
Select All
// app.module.ts
import {AngularDiagram} from 'diagram-library-angular';

// app.component.html
...
<diagram-view
    [id] = "'diagram_id'"
    [diagram] = "diagram"
    [allowInplaceEdit] = "true"
    [Enabled] = "true"
    [RoundedLinks] = "true"
    [RouteLinks] = "true"
    [ShowGrid] = "true"
    [BackBrush] = "'blue'"
    [DefaulShape] = "'Actor'"
    [AutoResize]  = "autoResize"
    [Behavior] = "behavior"
    (onNodeCreated) = "nodeCreated($event)"
    (onNodeTextEdited) = "textEdited($event)"
    (onNodeDoubleClicked) = "nodeDoubleClicked($event)"
    (onLinkClicked) = "linkClicked($event)" >
</diagram-view>

// app.component.ts
import * as Common from "mindfusion-common";
import * as MindFusion from 'diagram-library';
import AutoResize = MindFusion.Diagramming.AutoResize;
import Behavior = MindFusion.Diagramming.Behavior;
import Diagram = MindFusion.Diagramming.Diagram;
...
// declare properties
autoResize = AutoResize.None;
behavior = Behavior.DrawShapes;
diagram : Diagram;
...
// instantiate a Diagram model
this.diagram = new Diagram();
 



If anyone is interested in trying this out, please install the library from npm:
Code
Select All
npm i diagram-library-angular 



Several examples are available here,  run npm install + npm start to compile and serve them:
https://mindfusion.eu/_beta/angular-diagram-samples.zip

Any comments, questions and general feedback are welcome.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: diagram component for Angular, beta version
Reply #1 - Apr 24th, 2020 at 1:43pm
Print Post  
The helper diagram UI controls are now available as Angular components too:

Overview
The Overview component provides following props: id, diagram, enabled, backColor, dimColor, scaleFactor, scaleMode, allowZoom, autoScrollAmount

NodeListView
NodeListView provides following props: id, enabled, iconSize, defaultNodeSize, padding, orientation, tooltipDelay, shapeLibraryLocation, nodes, captions. It raises nodeSelected event when a node is selected in the view. The addNode(node, caption) method can be used to add nodes from code-behind, while nodes and captions props can be set to arrays of nodes and their captions.

ZoomControl
ZoomContro provides following props: id, diagram, enabled, cornerRadius, padding, snapToZoomStep, tickPosition, showLabel, textColor, shadowColor, innerColor, borderColor, activeColor, fill, backColor, scrollStep, zoomStep, maxZoomFactor, minZoomFactor, zoomFactor.

Ruler
Ruler provides following props: id, unit, enableGuides, projectRotatedBounds, negatedY, negatedX, verticalScaleVisible, horizontalScaleVisible, pointerColor, textColor, guideColor, projectionColor, backColor, foreColor. The Ruler should be set as the parent component of DiagramView:

Code
Select All
<ruler>
    <diagram-view [diagram]="diagram" ... />
</ruler> 



The new components are available in diagram-library-angular@1.0.1 version on npm. Updated sample project here shows them on last tab page:
https://mindfusion.eu/_beta/angular-diagram-samples.zip
  
Back to top
 
IP Logged
 
southernangel
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 1
Joined: Apr 29th, 2020
Re: diagram component for Angular, beta version
Reply #2 - Apr 29th, 2020 at 4:32pm
Print Post  
I'm trying to get this going in a project of mine to replicate a wpf design app but can't seem to get the nodeviewlist displaying anything at all.  The sample app works but the same code doesn't when embedded in my project.
No errors just nothing displayed
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: diagram component for Angular, beta version
Reply #3 - Apr 30th, 2020 at 8:43am
Print Post  
If there are no errors in browser console, try adding a breakpoint to the init code where you populate the node list to see if it ever executes. If you attach a test project showing the problem, our developer will investigate.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: diagram component for Angular, beta version
Reply #4 - May 13th, 2020 at 6:48am
Print Post  
Hi Slavcho,

Good to know you have released beta version for angular. May I know when the final version will be released?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: diagram component for Angular, beta version
Reply #5 - May 13th, 2020 at 7:21am
Print Post  
Hi,

When we hear from a few brave people who try the beta version Wink

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: diagram component for Angular, beta version
Reply #6 - May 13th, 2020 at 7:35am
Print Post  
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: diagram component for Angular, beta version
Reply #7 - May 13th, 2020 at 8:43am
Print Post  
Hi,

The Angular DiagramView just renders the container div you'd usually create to allow scrolling diagram's canvas, and adds some event binding syntax for easier event handling. The same Diagram and DiagramItem-derived classes from core diagramming library are used as model classes for DiagramView, so your code based on them should not require changes.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint