javascript - How to use SVG Path in mxGraph -
i using mxgrpah create editor toolsbar. has drag , drop, can use create objects in , align.
i have created 1 svg files using photoshop. have use mxgraph project.
here svg file:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 500 500"> <path class="cls-1" d="m135,155h2v406h-2v155zm76-93h2v406h-2v62zm-75,94v-2h288v2h136zm75-94v60h78v2h211z"/> <path class="cls-1" d="m136.293,406.707l1.414-1.414,13,13-1.414,1.414zm-0.973-1.44,1.36,1.466-14,13-1.36-1.466z"/> <path id="shape_4_copy" data-name="shape 4 copy" class="cls-1" d="m212.293,406.707l1.414-1.414,13,13-1.414,1.414zm-0.973-1.44,1.36,1.466-14,13-1.36-1.466z"/> </svg> this html file using mxgraph:
<html> <head> <title>toolbar example mxgraph</title> <!-- sets basepath library if not in same directory --> <script type="text/javascript"> mxbasepath = 'src'; </script> <!-- loads , initializes library --> <script type="text/javascript" src="src/mxclient.js"></script> <!-- example code --> <script type="text/javascript"> // program starts here. creates sample graph in // dom node specified id. function invoked // onload event handler of document (see below). function main() { // checks if browser supported if (!mxclient.isbrowsersupported()) { // displays error message if browser // not supported. mxutils.error('browser not supported!', 200, false); } else { // defines icon creating new connections in connection handler. // automatically disable highlighting of source vertex. mxconnectionhandler.prototype.connectimage = new mximage('images/connector.gif', 16, 16); // creates div toolbar var tbcontainer = document.createelement('div'); tbcontainer.style.position = 'absolute'; tbcontainer.style.overflow = 'hidden'; tbcontainer.style.padding = '2px'; tbcontainer.style.left = '0px'; tbcontainer.style.top = '0px'; tbcontainer.style.width = '80px'; tbcontainer.style.bottom = '0px'; document.body.appendchild(tbcontainer); // creates new toolbar without event processing var toolbar = new mxtoolbar(tbcontainer); toolbar.enabled = false // creates div graph var container = document.createelement('div'); container.style.position = 'absolute'; container.style.overflow = 'hidden'; container.style.left = '80px'; container.style.top = '0px'; container.style.right = '0px'; container.style.bottom = '0px'; container.style.background = 'url("editors/images/grid.gif")'; document.body.appendchild(container); // workaround internet explorer ignoring styles if (mxclient.is_quirks) { document.body.style.overflow = 'hidden'; new mxdivresizer(tbcontainer); new mxdivresizer(container); } // creates model , graph inside container // using fastest rendering available on browser var model = new mxgraphmodel(); var graph = new mxgraph(container, model); // enables new connections in graph graph.setconnectable(false); graph.setmultigraph(false); //enable or disable resizing graph.setcellsresizable(false); // stops editing on enter or escape keypress var keyhandler = new mxkeyhandler(graph); var rubberband = new mxrubberband(graph); var incoming = new object(); incoming[mxconstants.style_shape] = mxconstants.shape_image; incoming[mxconstants.style_perimeter] = mxperimeter.rectangleperimeter; incoming[mxconstants.style_image] = 'svg/incoming.svg'; incoming[mxconstants.style_fontcolor] = '#ffffff'; graph.getstylesheet().putcellstyle('incoming_shape', incoming); var wlbreaker = new object(); wlbreaker[mxconstants.style_shape] = mxconstants.shape_image; wlbreaker[mxconstants.style_perimeter] = mxperimeter.rectangleperimeter; wlbreaker[mxconstants.style_image] = 'svg/wlbreaker.svg'; wlbreaker[mxconstants.style_fontcolor] = '#ffffff'; graph.getstylesheet().putcellstyle('wlbreaker_shape', wlbreaker); var addvertex = function(icon, w, h, style) { var vertex = new mxcell(null, new mxgeometry(0, 0, w, h), style); vertex.setvertex(true); var img = addtoolbaritem(graph, toolbar, vertex, icon); img.enabled = false; graph.getselectionmodel().addlistener(mxevent.change, function() { var tmp = graph.isselectionempty(); mxutils.setopacity(img, (tmp) ? 100 : 20); img.enabled = tmp; }); }; addvertex('svg/incoming.svg', 300, 300, 'incoming_shape'); addvertex('svg/wlbreaker.svg', 300, 300, 'wlbreaker_shape'); //addvertex('editors/images/ellipse.gif', 100, 100, 'shape=ellipse'); //addvertex('editors/images/rhombus.gif', 100, 100, 'shape=rhombus'); // addvertex('editors/images/triangle.gif', 100, 100, 'shape=triangle'); // addvertex('editors/images/cylinder.gif', 100, 100, 'shape=cylinder'); // addvertex('editors/images/actor.gif', 100, 100, 'shape=actor'); } } function addtoolbaritem(graph, toolbar, prototype, image) { // function executed when image dropped on // graph. cell argument points cell under // mousepointer if there one. var funct = function(graph, evt, cell, x, y) { graph.stopediting(true); var vertex = graph.getmodel().clonecell(prototype); vertex.geometry.x = x; vertex.geometry.y = y; graph.addcell(vertex); graph.setselectioncell(vertex); } // creates image used drag icon (preview) var img = toolbar.addmode(null, image, function(evt, cell) { var pt = this.graph.getpointforevent(evt); funct(graph, evt, cell, pt.x, pt.y); }); // disables dragging if element disabled. workaround // wrong event order in ie. following dummy listener // invoked last listener in ie. mxevent.addlistener(img, 'mousedown', function(evt) { // nothing }); // listener called first before other listener // in browsers. mxevent.addlistener(img, 'mousedown', function(evt) { if (img.enabled == false) { mxevent.consume(evt); } }); mxutils.makedraggable(img, graph, funct); return img; } </script> </head> <!-- calls main function after page has loaded. container dynamically created. --> <body onload="main();"> </body> </html> i don't want image. wanted pure svg shapes in editor.
Comments
Post a Comment