diagram = AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]); diagram.setAllowInplaceEdit(true); diagram.setAlignToGrid(true); diagram.setAutoScroll(true); diagram.setRouteLinks(true); diagram.setShowGrid(false); diagram.setUndoEnabled(true); diagram.setRoundedLinks(true); diagram.setBounds(new Rect(0, 0, 1000, 1000)); diagram.setBehavior(Behavior.DrawLinks); diagram.LinkTextStyle = MindFusion.Diagramming.LinkTextStyle.OverLongestSegment; diagram.addEventListener(Events.nodeCreated, onNodeCreated); diagram.addEventListener(Events.linkCreating, onLinkCreating); diagram.addEventListener(Events.linkCreated, onLinkCreated); diagram.addEventListener(Events.nodeClicked, onNodeClicked); diagram.addEventListener(Events.nodeDeselected, onNodeDeselected); diagram.addEventListener(Events.nodeTextEdited, onTextEdited); diagram.addEventListener(Events.nodeDeleting, onNodeDeleting); diagram.addEventListener(Events.linkDeleted, onLinkDeleting); diagram.addEventListener(Events.linkTextEdited, onLinkTextEdited); diagram.addEventListener(Events.createEditControl, onCreateEditor); diagram.addEventListener(Events.linkDoubleClicked, onLinkDoubleClicked); diagram.addEventListener(Events.linkSelected, onLinkSelected); diagram.addEventListener(Events.linkModified, onLinkModified); diagram.addEventListener(Events.nodeDoubleClicked, onNodeDoubleClicked); diagram.addEventListener(Events.clicked, onClicked); diagram.get_element().oncontextmenu = function () { return false; } createAnchorPoints(); // create an NodeListView component that wraps the "nodeList" canvas nodeList = AbstractionLayer.createControl(NodeListView, null, null, null, $('#nodeList')[0]); nodeList.setTargetView($("diagram")[0]); initNodeList(nodeList, diagram); // overview.setDiagram(diagram); overview = AbstractionLayer.createControl(Overview, null, null, null, $("#overview")[0]); overview.setDiagram(diagram); // create an ZoomControl component that wraps the "zoomer" canvas var zoomer = MindFusion.Controls.ZoomControl.create($("#zoomer")[0]); zoomer.setTarget(diagram); function initNodeList(nodeList, diagram) { // add some nodes to the NodeListView var shapes = ["Rectangle", "Decision", "RoundRect", "Terminator", "Start"]; var tooltip = [" informs user how to perform an action. Can only click next ", " asks a user a question and allows them to answer yes or no ", " asks the user a question and provides muultple ways to answer it ", " allows the user to go to another project or website under the control of the flowchart creator ", " Title Page and start of the flowchart "] var names = ["Action", "Decision", "Select", "Link", "Start"]; // nodeList.setDefaultNodeSize(100); for (var i = 0; i < shapes.length; ++i) { node = new MindFusion.Diagramming.ShapeNode(diagram); // node.setText(names[i]); node.setTooltip(tooltip[i]); node.setShape(shapes[i]); node.setFont(new Font("sans-serif", 5, true, false)); node.setBrush(brush2); if (shapes[i] === "Rectangle") { node.setAnchorPattern(action); } if (shapes[i] === "Decision") { node.setAnchorPattern(action); } if (shapes[i] === "RoundRect") { node.setAnchorPattern(select); } if (shapes[i] === "Terminator") { node.setAnchorPattern(end); } if (shapes[i] === "Start") { node.setAnchorPattern(action); } nodeList.addNode(node, names[i]); } nodeList.addEventListener(Events.nodeSelected, onShapeSelected); } function onShapeSelected(sender, e) { var selectedNode = e.getNode(); if (selectedNode) diagram.setDefaultShape(selectedNode.getShape()); } function onDelete() { diagram.startCompositeOperation(); for (var i = diagram.getSelection().items.length - 1; i >= 0; i--) { diagram.removeItem(diagram.getSelection().items[i]); } diagram.commitCompositeOperation(); } function onUndo() { diagram.undo(); } function onRedo() { diagram.redo(); }