mxgraph-editor

A mxGraph editor support 3 types of shapes, svg/image/card.

development

npm install

npm start

install

npm install --save mxgraph-editor

demo

See the detail in ./demo .

start the demo

// start the demo
npm start

code

import Sidebar from './sidebar';
import Toolbar from './toolbar';

import IMAGE_SHAPES from './shape-config/image-shape';
import CARD_SHAPES from './shape-config/card-shape';
import SVG_SHAPES from './shape-config/svg-shape.xml';

import Editor from 'mxgraph-editor';

const editor = new Editor({
    container: '.graph-content',
    clickFunc: this.clickFunc,
    doubleClickFunc: this.doubleClickFunc,
    autoSaveFunc: this.autoSaveFunc,
    cellCreatedFunc: this.cellCreatedFunc,
    deleteFunc: this.deleteFunc,
    valueChangeFunc: this.valueChangeFunc,
    IMAGE_SHAPES,
    CARD_SHAPES,
    SVG_SHAPES
  });

 render() {
    return (
      <div className="editor-container">
        <Layout>
          <Sider width="235" theme="light">
            <Sidebar key="sidebar" graph={this.editor} />
          </Sider>
          <Content>
            <div className="graph-inner-container">
              <Toolbar
                graph={this.editor}
                updateDiagramData={this.updateDiagramData}
              />
              <div className="graph-content" key="graphcontent" />
            </div>
          </Content>
        </Layout>
      </div>
    );
  }

api

|property| description| type| default| |---|---|---|---| |SVG_SHAPES|SVG shapes config|Array|[]| |CARD_SHAPES|card shapes config|Array|[]| |IMAGE_SHAPES|image shapes config|Array|[]| |container|container dom selector|selector| |clickFunc|click event callback|function(cell)| |doubleClickFunc|double click event callback|function(cell)|| |autoSaveFunc|auto save callback|function(xml)| |cellCreatedFunc|cell created callback|function(cell)|| |deleteFunc|cell delete callback|function(e)|| |valueChangeFunc|cell value change callback|function(value)|| |initSidebar|init the sidebar|function(elements)|| |initCustomPort|the custom port, 10x10px|function((picture))|| |zoom|zoom|function(type)，input params：in（zoom in）、out（zoom out）、actual（zoom actual）|| |updateStyle|update style|function(cell, key, value)，input params：cell，key (the key of style)，value (the value of style)|| |groupCells|group cells|function(groupId, labelName)，input params：groupId(group id)，name (group label)|| |ungroupCells|ungroup cells|function(cells)| |getCellsSelected|get all cells selected|function()|| |getGraphXml|get the xml of graph|function()|| |createVertex|create vertex|function(shapeLabel, x, y, width, height, shapeStyle)| |insertEdge|insert edge|function(vertex1, vertex2)|| |getCellById|get cell by id|function(id)|| |getAllCells|get all cells|function()| |refresh|refresh the graph|function()|| |clearSelection|clear the selection in the graph|function()|| |startPanning|start panning|function()|| |stopPanning|stop panning|function()||