I am developing an Application with mxGraph that implements the mxEditor with config files.

I have defined custom shapes using templates. It allows me to generate custom XML. But I need to do the same with conectors. May I create templates for edges an use it when I set the editor in connect mode instead of the default edge style ?

Currently I'm changing the style of the default edge style, but I need to generate my custom XML to recognize diferent flow types in the diagrams.

asked 15 Dec '11, 03:52

Juan%20David's gravatar image

Juan David
1015
accept rate: 0%

edited 06 Aug '12, 05:31

David's gravatar image

David
4.9k21831


I've finally found the answer about connectors. It only requires knowledge about the editor class, and a some common sense. The main objective is define two type of connector objects. The first for the main flow and the second for messages flow.

First, I defined my own templates for edges in the xml config section. I'm using the wfeditor-commons.xml file in the examples section:

<Array as="templates">
.
.
.
  <add as="defaultFlow">
    <DefaultFlow label="*" description="">
      <mxCell edge="1" >
        <mxGeometry as="geometry" relative="1"/>
      </mxCell>
    </DefaultFlow>
   </add>

  <add as="messageFlow">
    <MessageFlow label="Subject: *" description="">
      <mxCell edge="1" style="dashed=1">
        <mxGeometry as="geometry" relative="1"/>
      </mxCell>
    </MessageFlow>
  </add>
.
.
</Array>

and add the buttons in the toolbar config file (wftoolbar-commons.xml)

<mxDefaultToolbar>
  <add as="Default Flow" mode="connect" icon="/i/bitsoft/libraries/mxgraph/javascript/examples/editors/images/connect.gif"><![CDATA[\r\n        function (editor)
    {
      if (editor.defaultEdge != null)
      {
        **editor.defaultEdge = editor.templates["defaultFlow"];**
      }
    }
   ]]></add>

    <add as="Message Flow" mode="connect" icon="/i/bitsoft/libraries/mxgraph/javascript/examples/editors/images/straight.gif"><![CDATA[
      function (editor)
      {
        if (editor.defaultEdge != null)
        {
               **editor.defaultEdge = editor.templates["messageFlow"];**
        }
      }
  ]]></add>
</mxDefaultToolbar>
link

answered 23 Dec '11, 07:24

Juan%20David's gravatar image

Juan David
1015
accept rate: 0%

edited 06 Aug '12, 08:57

David's gravatar image

David
4.9k21831

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×228
×100
×50
×39
×1

Asked: 15 Dec '11, 03:52

Seen: 3,237 times

Last updated: 06 Aug '12, 08:57