<!DOCTYPE HTML> <html> <head> <base href="../"> <title>WiseMapping - Editor </title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <!--[if lt IE 9]> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <![endif]--> <link rel="stylesheet/less" type="text/css" href="css/editor.less"/> <script type='text/javascript' src='js/core.js'></script> <script type='text/javascript' src='js/less.js'></script> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <script type="text/javascript"> var mapId = 'welcome'; $(document).on('loadcomplete', function(resource) { var options = loadDesignerOptions(); var designer = buildDesigner(options); // Load map from XML file persisted on disk... var persistence = mindplot.PersistenceManager.getInstance(); var mindmap = mindmap = persistence.load(mapId); designer.loadMap(mindmap); }); $(document).on('loadcomplete', function(resource) { $("dragImageNode").addEvent('mousedown', function(event) { event.preventDefault(); // Create a image node ... var mindmap = designer.getMindmap(); var node = mindmap.createNode(); node.setImageSize(80, 43); node.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}"); node.setImageUrl("images/logo-small.png"); node.setShapeType(mindplot.model.TopicShape.IMAGE); designer.addDraggedNode(event, node); }); $("dragTextNode").addEvent('mousedown', function(event) { event.preventDefault(); // Create a image node ... var mindmap = designer.getMindmap(); var node = mindmap.createNode(); node.setText("Node Text !!!!"); node.setMetadata("{'media':'test'}"); node.setShapeType(mindplot.model.TopicShape.RECTANGLE); // Add link ... var link = node.createFeature(mindplot.TopicFeature.Link.id, {url:"http://www.wisemapping.com"}); node.addFeature(link); // Add Note ... var note = node.createFeature(mindplot.TopicFeature.Note.id, {text:"This is a note"}); node.addFeature(note); designer.addDraggedNode(event, node); }); designer.addEvent(mindplot.TopicEvent.EDIT, function(event) { var node = event.model; console.log("Event: edit"); console.log("Node Id:" + node.getId()); console.log("Node Metadata:" + node.getMetadata()); console.log("Is Read Only:" + event.readOnly); }); designer.addEvent(mindplot.TopicEvent.CLICK, function(event) { var node = event.model; console.log("Event: click"); console.log("Node Id:" + node.getId()); console.log("Node Metadata:" + node.getMetadata()); console.log("Is Read Only:" + event.readOnly); }); }); </script> <style> #dragPanel { border: 2px black solid; position: absolute; background: gray; width: 100px; height: 300px; z-index: 100; padding: 5px; border-radius: 15px; top: 150px; left: 10px; text-align: center; } #dragPanel .textNode { background-color: #E0E5EF; height: 20px; width: 80px; border: 3px #023BB9 solid; padding: 4px; cursor: move } </style> </head> <body> <div id="header"> <div id="headerInfo"> <div id="headerActions"></div> <div id="headerLogo"></div> <div id="headerMapTitle">Title: <span>Welcome</span></div> </div> <div id="toolbar"> <div id="editTab" class="tabContent"> <div id="persist" class="buttonContainer"> <div id="save" class="buttonOn"> <img src="images/save.png"/> </div> <div id="discard" class="buttonOn"> <img src="images/discard.png"/> </div> <div id="export" class="buttonOn"> <img src="images/export.png"/> </div> </div> <div id="edit" class="buttonContainer"> <div id="undoEdition" class="buttonOn"> <img src="images/undo.png"/> </div> <div id="redoEdition" class="buttonOn"> <img src="images/redo.png"/> </div> </div> <div id="zoom" class="buttonContainer"> <div id="zoomIn" class="buttonOn"> <img src="images/zoom-in.png"/> </div> <div id="zoomOut" class="buttonOn"> <img src="images/zoom-out.png"/> </div> </div> <div id="node" class="buttonContainer"> <div id="topicShape" class="buttonExtOn"> <img src="images/topic-shape.png"/> </div> <div id="addTopic" class="buttonOn"> <img src="images/topic-add.png"/> </div> <div id="deleteTopic" class="buttonOn"> <img src="images/topic-delete.png"/> </div> <div id="topicBorder" class="buttonExtOn"> <img src="images/topic-border.png"/> </div> <div id="topicColor" class="buttonExtOn"> <img src="images/topic-color.png"/> </div> <div id="topicIcon" class="buttonExtOn"> <img src="images/topic-icon.png"/> </div> <div id="topicNote" class="buttonOn"> <img src="images/topic-note.png"/> </div> <div id="topicLink" class="buttonOn"> <img src="images/topic-link.png"/> </div> <div id="topicRelation" class="buttonOn"> <img src="images/topic-relation.png"/> </div> </div> <div id="font" class="buttonContainer"> <div id="fontFamily" class="buttonExtOn"> <img src="images/font-type.png"/> </div> <div id="fontSize" class="buttonExtOn"> <img src="images/font-size.png"/> </div> <div id="fontBold" class="buttonOn"> <img src="images/font-bold.png"/> </div> <div id="fontItalic" class="buttonOn"> <img src="images/font-italic.png"/> </div> <div id="fontColor" class="buttonExtOn" style="padding-top:4px"> <img src="images/font-color.png"/> </div> </div> </div> </div> <div id="headerNotifier"></div> <div id="footer"> <div id="footerLogo"></div> </div> </div> <div id="dragPanel"> <div id="dragImageNode" style="cursor: move"> <img src="images/logo-small.png"/> </div> <div id="dragTextNode" class="textNode">Text Node !!</div> </div> <div id="mindplot" onselectstart="return false;"></div> <script type="text/javascript" src="js/editor.js"></script> </body> </html>