(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › diagram component for Vue, beta version
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic diagram component for Vue, beta version (Read 1446 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
diagram component for Vue, beta version
Mar 5th, 2020 at 11:13am
Print Post  
We are beta testing a diagram-view component for Vue.js. It renders a MindFusion.Diagramming.Diagram instance assigned to "diagram" prop as its model. At this time the following properties can be set from vue templates too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid. All diagram events can be handled through the v-on directive as well:

Code
Select All
this.diagram = new mf.Diagramming.Diagram();
...
<diagram-view
    id="diagram"
    :diagram="this.diagram"
    :allow-inplace-edit="true"
    :route-links="true"
    :show-grid="true"
    back-brush="lightcyan"
    v-on:node-created="onDiagramNodeCreated"
    v-on:diagram-changed="onDiagramChanged"
/>


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


Several examples are available here (npm run serve):
https://mindfusion.eu/_beta/vue-diagram-samples.zip

Any comments, questions and general feedback are welcome.
« Last Edit: Mar 23rd, 2020 at 7:19am by Slavcho »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: diagram component for Vue, beta version
Reply #1 - Apr 23rd, 2020 at 12:34pm
Print Post  
The helper diagram UI controls are now available as Vue.js 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 :style="{width: '100%'}">
    <diagram-view
        :diagram="this.diagram"
        ...


The new components are available in diagram-library-vue@1.0.0 version on npm. Updated sample project here shows them on last tab page:
https://mindfusion.eu/_beta/vue-diagram-samples.zip
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge