It seems like I haven't blogged for a long time ! I want to change my job recently (ps: Despite the company's insistence on , Put forward some unconventional retention “ The system ”,But I've really given up ) , Found some time ago to do Hadoop, and Spark Colleagues often come to ask questions about network topology , Because I was really busy at that time , There's no time to help with the analysis , sorry !

I've sorted out the simple ones before Demo But not in detail   be based on Web Achieve online drawing Topology [GraphEditor]

First of all, here are the main points to be detailed :( I use the graph to show directly ~) ( Of course, this one UI The module was changed later ~ The point is not here )        [ Keep on record : Follow up documentation ]

Show the topology

Secondly, some code added later , I think since I use the network topology , Later plasticity should be very strong , Some of them are added by the follow-up demand !

Get down to business , After looking at some simple flow charts , I think we all know the basic use of it , And later shaping value

Some simple uses like : Make big data Hadoop,Spark Yes, the relationship between servers , And the description of the relationship flow chart ; The relationship and flow chart of load cluster management of large enterprises , security management ,OA Business people manage ..... The indispensable material of many things !

The main JQ Code module :

Some of the constants above are properties !

Used to bind some menu information

Edit save

( Main documents :mxClient.js , Editor.js ,Graph.js,Shapes.js,EditorUi.js,Actions.js,Menus.js,Sidebar.js,               Toolbar.js,Dialogs.js,jscolor.js )

The core file code is as follows :

EditorUi.js

 /**
*$id:Action .JS,V 2015-3-23
*$author Dana , Li$
*/
/**
* Build a new graphic editor
* Editor management Implementation method management
*/
EditorUi = function(editor, container)
{
this.editor = editor || new Editor();
this.container = container || document.body;
var graph = editor.graph;
// Disable scroll bar
this.container.style.overflow = 'hidden'; var textEditing = mxUtils.bind(this, function(evt)
{
if (evt == null)
{
evt = window.event;
} if (this.isSelectionAllowed(evt))
{
return true;
} return graph.isEditing() || this.dialog != null;
}); // Disable text selection instead of editing. No dialog box is visible
if (this.container == document.body)
{
document.onselectstart = textEditing;
document.onmousedown = textEditing;
} // When editing using the built-in context menu
if (mxClient.IS_IE && document.documentMode != 9)
{
mxEvent.addListener(this.container, 'contextmenu', textEditing);
}
else
{
this.container.oncontextmenu = textEditing;
} // Image pre fetches Sub menu
new Image().src = mxPopupMenu.prototype.submenuImage; // Prefetch connection image
if (mxConnectionHandler.prototype.connectImage != null)
{
new Image().src = mxConnectionHandler.prototype.connectImage.src;
} // Create a user interface
this.actions = new Actions(this);
this.menus = new Menus(this);
this.createDivs();
this.refresh();
this.createUi(); //contains the given the inside main Drawing review team
graph.init(this.diagramContainer);
graph.refresh(); // Make container scroll bar and set cursor style
graph.container.setAttribute('tabindex', '0');
graph.container.style.overflow = (touchStyle) ? 'hidden' : 'auto';
graph.container.style.cursor = 'default';
graph.container.style.backgroundImage = 'url(' + IMAGE_PATH + '/grid.gif)';
graph.container.focus(); // Keep the graphics container focused on mouse down
var graphFireMouseEvent = graph.fireMouseEvent;
graph.fireMouseEvent = function(evtName, me, sender)
{
if (evtName == mxEvent.MOUSE_DOWN)
{
this.container.focus();
} graphFireMouseEvent.apply(this, arguments);
}; // Automatically expand the configuration as the mouse passes by
graph.panningHandler.autoExpand = true; // For the context menu
graph.panningHandler.factoryMethod = mxUtils.bind(this, function(menu, cell, evt)
{
this.menus.createPopupMenu(menu, cell, evt);
}); // Initialize the profile
editor.outline.init(this.outlineContainer); // The hidden menu
var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
mxEvent.addListener(document, md, mxUtils.bind(this, function(evt)
{
graph.panningHandler.hideMenu();
})); // Added gesture operation ( The zoom )
if (mxClient.IS_TOUCH)
{
mxEvent.addListener(graph.container, 'gesturechange',
mxUtils.bind(this, function(evt)
{
graph.view.getDrawPane().setAttribute('transform', 'scale(' + evt.scale + ')');
graph.view.getOverlayPane().style.visibility = 'hidden';
})
); mxEvent.addListener(graph.container, 'gestureend',
mxUtils.bind(this, function(evt)
{
graph.view.getDrawPane().removeAttribute('transform');
graph.zoomToCenter = true;
graph.zoom(evt.scale);
graph.view.getOverlayPane().style.visibility = 'visible';
})
);
} // Create handler for key events
var keyHandler = this.createKeyHandler(editor); // Getter for key handler
this.getKeyHandler = function()
{
return keyHandler;
}; // Shows dialog if changes are lost
window.onbeforeunload = function()
{
if (editor.modified)
{
//return mxResources.get('allChangesLost');
}
}; // Updates the editor UI after the window has been resized
mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
{
this.refresh();
graph.sizeDidChange();
this.editor.outline.update(false);
this.editor.outline.outline.sizeDidChange();
})); // Updates action and menu states
this.init();
this.open();
}; /**
* Specifies the size of the split bar.
*/
EditorUi.prototype.splitSize = (mxClient.IS_TOUCH) ? 16 : 8; /**
* Specifies the height of the menubar. Default is 34.
*/
EditorUi.prototype.menubarHeight = 34; /**
* Specifies the height of the toolbar. Default is 46.
*/
EditorUi.prototype.toolbarHeight = 46; /**
* Specifies the height of the footer. Default is 28.
*/
EditorUi.prototype.footerHeight = 28; /**
* Specifies the position of the horizontal split bar. Default is 190.
*/
EditorUi.prototype.hsplitPosition = 190; /**
* Specifies the position of the vertical split bar. Default is 190.
*/
EditorUi.prototype.vsplitPosition = 190; /**
* Installs the listeners to update the action states.
*/
EditorUi.prototype.init = function()
{
// Updates action states
this.addUndoListener();
this.addSelectionListener(); // Overrides clipboard to update paste action state
var paste = this.actions.get('paste'); var updatePaste = function()
{
paste.setEnabled(!mxClipboard.isEmpty());
}; var mxClipboardCut = mxClipboard.cut;
mxClipboard.cut = function()
{
mxClipboardCut.apply(this, arguments);
updatePaste();
}; var mxClipboardCopy = mxClipboard.copy;
mxClipboard.copy = function()
{
mxClipboardCopy.apply(this, arguments);
updatePaste();
};
}; /**
* Hook for allowing selection and context menu for certain events.
*/
EditorUi.prototype.isSelectionAllowed = function(evt)
{
return false;
}; /**
* Opens the current diagram via the window.opener if one exists.
*/
EditorUi.prototype.open = function()
{
// Cross-domain window access is not allowed in FF, so if we
// were opened from another domain then this will fail.
try
{
if (window.opener != null && window.opener.openFile != null)
{
window.opener.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
{
try
{
var doc = mxUtils.parseXml(xml);
this.editor.setGraphXml(doc.documentElement);
this.editor.modified = false;
this.editor.undoManager.clear(); if (filename != null)
{
this.editor.filename = filename;
}
}
catch (e)
{
mxUtils.alert(mxResources.get('invalidOrMissingFile') + ': ' + e.message);
}
}));
}
}
catch(e)
{
// ignore
}
}; /**
* Save the current graph in the given file name .
*/
EditorUi.prototype.save = function()
{
var xml = mxUtils.getXml(this.editor.getGraphXml());
// Firefox
//if (navigator.userAgent.indexOf('Firefox') >= 0){
//}
xml="<mxGraphModel grid=\"0\" guides=\"1\" tooltips=\"1\" connect=\"1\" fold=\"1\" page=\"0\" pageScale=\"1\" pageWidth=\"826\" pageHeight=\"1169\">"+xml+"</mxGraphModel>" // take xml Save the code to the server file
$.post($("#path").val()+"/SaveToXmlServlet",{"tp":$("#mapTp").val(),"xml":xml,"type":"set"},function(text){
if(text=="0"){
alert(" Save failed !");
}
});
}; /**
* Returns a copy of the editor that has no state URL.
*/
EditorUi.prototype.getUrl = function(pathname)
{
var href = (pathname != null) ? pathname : window.location.pathname;
var parms = (pathname.indexOf('?') > 0) ? 1 : 0; // Removes template URL parameter for new blank diagram
for (var key in urlParams)
{
if (parms == 0)
{
href += '?';
}
else
{
href += '&';
} href += key + '=' + urlParams[key];
parms++;
} return href;
}; /**
* Revocation of updates / The state of the redo item .
*/
EditorUi.prototype.addUndoListener = function()
{
var undo = this.actions.get('undo');
var redo = this.actions.get('redo'); var undoMgr = this.editor.undoManager; var undoListener = function()
{
undo.setEnabled(undoMgr.canUndo());
redo.setEnabled(undoMgr.canRedo());
}; undoMgr.addListener(mxEvent.ADD, undoListener);
undoMgr.addListener(mxEvent.UNDO, undoListener);
undoMgr.addListener(mxEvent.REDO, undoListener);
undoMgr.addListener(mxEvent.CLEAR, undoListener); // Updates the button states once
undoListener();
}; /**
* Updates the states of the given toolbar items based on the selection.
*/
EditorUi.prototype.addSelectionListener = function()
{
var selectionListener = mxUtils.bind(this, function()
{
var graph = this.editor.graph;
var selected = !graph.isSelectionEmpty();
var vertexSelected = false;
var edgeSelected = false; var cells = graph.getSelectionCells(); if (cells != null)
{
for (var i = 0; i < cells.length; i++)
{
var cell = cells[i]; if (graph.getModel().isEdge(cell))
{
edgeSelected = true;
} if (graph.getModel().isVertex(cell))
{
vertexSelected = true;
} if (edgeSelected && vertexSelected)
{
break;
}
}
} // Update action status
var actions = ['cut', 'copy', 'delete', 'duplicate', 'bold', 'italic', 'style', 'fillColor',
'gradientColor', 'underline', 'fontColor', 'strokeColor', 'backgroundColor',
'borderColor', 'toFront', 'toBack', 'dashed', 'rounded', 'shadow', 'rotate',
'autosize']; for (var i = 0; i < actions.length; i++)
{
this.actions.get(actions[i]).setEnabled(selected);
} this.actions.get('rotation').setEnabled(vertexSelected);
this.actions.get('group').setEnabled(graph.getSelectionCount() > 1);
this.actions.get('ungroup').setEnabled(graph.getSelectionCount() == 1 &&
graph.getModel().getChildCount(graph.getSelectionCell()) > 0);
var oneVertexSelected = vertexSelected && graph.getSelectionCount() == 1;
this.actions.get('removeFromGroup').setEnabled(oneVertexSelected &&
graph.getModel().isVertex(graph.getModel().getParent(graph.getSelectionCell()))); // Update menu status
var menus = ['fontFamily', 'fontSize', 'alignment', 'position', 'text', 'format',
'arrange', 'linewidth', 'spacing', 'gradient']; for (var i = 0; i < menus.length; i++)
{
this.menus.get(menus[i]).setEnabled(selected);
} menus = ['line', 'lineend', 'linestart']; for (var i = 0; i < menus.length; i++)
{
this.menus.get(menus[i]).setEnabled(edgeSelected);
} this.actions.get('setAsDefaultEdge').setEnabled(edgeSelected); this.menus.get('align').setEnabled(graph.getSelectionCount() > 1);
this.menus.get('direction').setEnabled(vertexSelected || (edgeSelected &&
graph.isLoop(graph.view.getState(graph.getSelectionCell()))));
this.menus.get('navigation').setEnabled(graph.foldingEnabled && ((graph.view.currentRoot != null) ||
(graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell()))));
this.actions.get('home').setEnabled(graph.view.currentRoot != null);
this.actions.get('exitGroup').setEnabled(graph.view.currentRoot != null);
var groupEnabled = graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell());
this.actions.get('enterGroup').setEnabled(groupEnabled);
this.actions.get('expand').setEnabled(groupEnabled);
this.actions.get('collapse').setEnabled(groupEnabled);
this.actions.get('editLink').setEnabled(graph.getSelectionCount() == 1);
this.actions.get('openLink').setEnabled(graph.getSelectionCount() == 1 &&
graph.getLinkForCell(graph.getSelectionCell()) != null);
}); this.editor.graph.getSelectionModel().addListener(mxEvent.CHANGE, selectionListener);
selectionListener();
}; /**
* Refreshes the viewport.
*/
EditorUi.prototype.refresh = function()
{
var quirks = mxClient.IS_IE && (document.documentMode == null || document.documentMode == 5);
var w = this.container.clientWidth;
var h = this.container.clientHeight; if (this.container == document.body)
{
w = document.body.clientWidth || document.documentElement.clientWidth;
h = (quirks) ? document.body.clientHeight || document.documentElement.clientHeight : document.documentElement.clientHeight;
} var effHsplitPosition = Math.max(0, Math.min(this.hsplitPosition, w - this.splitSize - 20));
var effVsplitPosition = Math.max(0, Math.min(this.vsplitPosition, h - this.menubarHeight - this.toolbarHeight - this.footerHeight - this.splitSize - 1)); this.menubarContainer.style.height = this.menubarHeight + 'px';
this.toolbarContainer.style.top = this.menubarHeight + 'px';
this.toolbarContainer.style.height = this.toolbarHeight + 'px';
this.sidebarContainer.style.top = (this.menubarHeight + this.toolbarHeight) + 'px';
this.sidebarContainer.style.width = effHsplitPosition + 'px';
this.outlineContainer.style.width = effHsplitPosition + 'px';
this.outlineContainer.style.height = effVsplitPosition + 'px';
this.outlineContainer.style.bottom = this.footerHeight + 'px';
this.diagramContainer.style.left = (effHsplitPosition + this.splitSize) + 'px';
this.diagramContainer.style.top = this.sidebarContainer.style.top;
this.footerContainer.style.height = this.footerHeight + 'px';
this.hsplit.style.top = this.sidebarContainer.style.top;
this.hsplit.style.bottom = this.outlineContainer.style.bottom;
this.hsplit.style.left = effHsplitPosition + 'px';
this.vsplit.style.width = this.sidebarContainer.style.width;
this.vsplit.style.bottom = (effVsplitPosition + this.footerHeight) + 'px'; if (quirks)
{
this.menubarContainer.style.width = w + 'px';
this.toolbarContainer.style.width = this.menubarContainer.style.width;
var sidebarHeight = (h - effVsplitPosition - this.splitSize - this.footerHeight - this.menubarHeight - this.toolbarHeight);
this.sidebarContainer.style.height = sidebarHeight + 'px';
this.diagramContainer.style.width = (w - effHsplitPosition - this.splitSize) + 'px';
var diagramHeight = (h - this.footerHeight - this.menubarHeight - this.toolbarHeight);
this.diagramContainer.style.height = diagramHeight + 'px';
this.footerContainer.style.width = this.menubarContainer.style.width;
this.hsplit.style.height = diagramHeight + 'px';
}
else
{
this.sidebarContainer.style.bottom = (effVsplitPosition + this.splitSize + this.footerHeight) + 'px';
this.diagramContainer.style.bottom = this.outlineContainer.style.bottom;
}
}; /**
* Creates the required containers.
*/
EditorUi.prototype.createDivs = function()
{
this.menubarContainer = this.createDiv('geMenubarContainer');
this.toolbarContainer = this.createDiv('geToolbarContainer');
this.sidebarContainer = this.createDiv('geSidebarContainer');
this.outlineContainer = this.createDiv('geOutlineContainer');
this.diagramContainer = this.createDiv('geDiagramContainer');
this.footerContainer = this.createDiv('geFooterContainer');
this.hsplit = this.createDiv('geHsplit');
this.vsplit = this.createDiv('geVsplit'); // Sets static style for containers
this.menubarContainer.style.top = '0px';
this.menubarContainer.style.left = '0px';
this.menubarContainer.style.right = '0px';
this.toolbarContainer.style.left = '0px';
this.toolbarContainer.style.right = '0px';
this.sidebarContainer.style.left = '0px';
this.outlineContainer.style.left = '0px';
this.diagramContainer.style.right = '0px';
this.footerContainer.style.left = '0px';
this.footerContainer.style.right = '0px';
this.footerContainer.style.bottom = '0px';
this.vsplit.style.left = '0px';
this.vsplit.style.height = this.splitSize + 'px';
this.hsplit.style.width = this.splitSize + 'px';
}; /**
* Creates the required containers.
*/
EditorUi.prototype.createUi = function()
{
// Creates menubar
this.menubar = this.menus.createMenubar(this.createDiv('geMenubar'));
this.menubarContainer.appendChild(this.menubar.container); // Creates toolbar
this.toolbar = this.createToolbar(this.createDiv('geToolbar'));
this.toolbarContainer.appendChild(this.toolbar.container); // Creates the sidebar
this.sidebar = this.createSidebar(this.sidebarContainer); // Creates the footer
this.footerContainer.appendChild(this.createFooter()); // Adds status bar in menubar
this.statusContainer = this.createStatusContainer(); // Connects the status bar to the editor status
this.editor.addListener('statusChanged', mxUtils.bind(this, function()
{
this.setStatusText(this.editor.getStatus());
})); this.setStatusText(this.editor.getStatus());
this.menubar.container.appendChild(this.statusContainer); // Inserts into DOM
this.container.appendChild(this.menubarContainer);
this.container.appendChild(this.toolbarContainer);
this.container.appendChild(this.sidebarContainer);
this.container.appendChild(this.outlineContainer);
this.container.appendChild(this.diagramContainer);
this.container.appendChild(this.footerContainer);
this.container.appendChild(this.hsplit);
this.container.appendChild(this.vsplit); // HSplit
this.addSplitHandler(this.hsplit, true, 0, mxUtils.bind(this, function(value)
{
this.hsplitPosition = value;
this.refresh();
this.editor.graph.sizeDidChange();
this.editor.outline.update(false);
this.editor.outline.outline.sizeDidChange();
})); // VSplit
this.addSplitHandler(this.vsplit, false, this.footerHeight, mxUtils.bind(this, function(value)
{
this.vsplitPosition = value;
this.refresh();
this.editor.outline.update(false);
this.editor.outline.outline.sizeDidChange();
}));
}; /**
* Creates a new toolbar for the given container.
*/
EditorUi.prototype.createStatusContainer = function()
{
var container = document.createElement('a');
container.className = 'geItem geStatus'; return container;
}; /**
* Creates a new toolbar for the given container.
*/
EditorUi.prototype.setStatusText = function(value)
{
this.statusContainer.innerHTML = value;
}; /**
* Creates a new toolbar for the given container.
*/
EditorUi.prototype.createToolbar = function(container)
{
return new Toolbar(this, container);
}; /**
* Creates a new sidebar for the given container.
*/
EditorUi.prototype.createSidebar = function(container)
{
return new Sidebar(this, container);
}; /**
* Creates and returns a new footer.
*/
EditorUi.prototype.createFooter = function()
{
return this.createDiv('geFooter');
}; /**
* Creates the actual toolbar for the toolbar container.
*/
EditorUi.prototype.createDiv = function(classname)
{
var elt = document.createElement('div');
elt.className = classname; return elt;
}; /**
* Updates the states of the given undo/redo items.
*/
EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange)
{
var start = null;
var initial = null; function getValue()
{
return parseInt(((horizontal) ? elt.style.left : elt.style.bottom));
} var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove';
var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; mxEvent.addListener(elt, md, function(evt)
{
start = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
initial = getValue();
mxEvent.consume(evt);
}); function moveHandler(evt)
{
if (start != null)
{
var pt = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
onChange(Math.max(0, initial + ((horizontal) ? (pt.x - start.x) : (start.y - pt.y)) - dx));
mxEvent.consume(evt);
}
} mxEvent.addListener(document, mm, moveHandler); mxEvent.addListener(document, mu, function(evt)
{
moveHandler(evt);
start = null;
initial = null;
});
}; /**
* Displays a print dialog.
*/
EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose)
{
this.hideDialog();
this.dialog = new Dialog(this, elt, w, (mxClient.IS_VML) ? h - 12 : h, modal, closable, onClose);
}; /**
* Displays a print dialog.
*/
EditorUi.prototype.hideDialog = function()
{
if (this.dialog != null)
{
this.dialog.close();
this.dialog = null;
this.editor.graph.container.focus();
}
}; /**
* Adds the label menu items to the given menu and parent.
*/
EditorUi.prototype.openFile = function()
{
// Closes dialog after open
window.openFile = new OpenFile(mxUtils.bind(this, function()
{
this.hideDialog();
})); // Removes openFile if dialog is closed
this.showDialog(new OpenDialog(this).container, 300, 180, true, true, function()
{
window.openFile = null;
});
}; /**
* Adds the label menu items to the given menu and parent.
*/
EditorUi.prototype.saveFile = function(forceDialog)
{
if (!forceDialog && this.editor.filename != null)
{
this.save(this.editor.getOrCreateFilename());
}
else
{
this.showDialog(new SaveDialog(this).container, 300, 100, true, true);
}
}; /**
* Executes the given layout.
*/
EditorUi.prototype.executeLayout = function(layout, animate, ignoreChildCount)
{
var graph = this.editor.graph;
var cell = graph.getSelectionCell(); graph.getModel().beginUpdate();
try
{
layout.execute(graph.getDefaultParent(), cell);
}
catch (e)
{
throw e;
}
finally
{
// Animates the changes in the graph model except
// for Camino, where animation is too slow
if (animate && navigator.userAgent.indexOf('Camino') < 0)
{
// New API for animating graph layout results asynchronously
var morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
{
graph.getModel().endUpdate();
})); morph.startAnimation();
}
else
{
graph.getModel().endUpdate();
}
}
}; /**
* Creates the keyboard event handler for the current graph and history.
*/
EditorUi.prototype.createKeyHandler = function(editor)
{
var graph = this.editor.graph;
var keyHandler = new mxKeyHandler(graph); // Routes command-key to control-key on Mac
keyHandler.isControlDown = function(evt)
{
return mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey);
}; // Helper function to move cells with the cursor keys
function nudge(keyCode)
{
if (!graph.isSelectionEmpty())
{
var dx = 0;
var dy = 0; if (keyCode == 37)
{
dx = -1;
}
else if (keyCode == 38)
{
dy = -1;
}
else if (keyCode == 39)
{
dx = 1;
}
else if (keyCode == 40)
{
dy = 1;
} graph.moveCells(graph.getSelectionCells(), dx, dy);
graph.scrollCellVisible(graph.getSelectionCell());
}
}; // Binds keystrokes to actions
var bindAction = mxUtils.bind(this, function(code, control, key, shift)
{
var action = this.actions.get(key); if (action != null)
{
var f = function()
{
if (action.enabled)
{
action.funct();
}
}; if (control)
{
if (shift)
{
keyHandler.bindControlShiftKey(code, f);
}
else
{
keyHandler.bindControlKey(code, f);
}
}
else
{
if (shift)
{
keyHandler.bindShiftKey(code, f);
}
else
{
keyHandler.bindKey(code, f);
}
}
}
}); var ui = this;
var keyHandleEscape = keyHandler.escape;
keyHandler.escape = function(evt)
{
ui.hideDialog();
keyHandleEscape.apply(this, arguments);
}; // Ignores enter keystroke. Remove this line if you want the
// enter keystroke to stop editing.
keyHandler.enter = function() {};
keyHandler.bindKey(8, function() { graph.foldCells(true); }); // Backspace
keyHandler.bindKey(13, function() { graph.foldCells(false); }); // Enter
keyHandler.bindKey(33, function() { graph.exitGroup(); }); // Page Up
keyHandler.bindKey(34, function() { graph.enterGroup(); }); // Page Down
keyHandler.bindKey(36, function() { graph.home(); }); // Home
keyHandler.bindKey(35, function() { graph.refresh(); }); // End
keyHandler.bindKey(37, function() { nudge(37); }); // Left arrow
keyHandler.bindKey(38, function() { nudge(38); }); // Up arrow
keyHandler.bindKey(39, function() { nudge(39); }); // Right arrow
keyHandler.bindKey(40, function() { nudge(40); }); // Down arrow
keyHandler.bindKey(113, function() { graph.startEditingAtCell(); });
bindAction(46, false, 'delete'); // Delete
bindAction(82, true, 'rotate'); // Ctrl+R
bindAction(83, true, 'save'); // Ctrl+S
bindAction(83, true, 'saveAs', true); // Ctrl+Shift+S
bindAction(107, false, 'zoomIn'); // Add
bindAction(109, false, 'zoomOut'); // Subtract
bindAction(65, true, 'selectAll'); // Ctrl+A
bindAction(86, true, 'selectVertices', true); // Ctrl+Shift+V
bindAction(69, true, 'selectEdges', true); // Ctrl+Shift+E
bindAction(69, true, 'export'); // Ctrl+Shift+E
bindAction(66, true, 'toBack'); // Ctrl+B
bindAction(70, true, 'toFront'); // Ctrl+F
bindAction(68, true, 'duplicate'); // Ctrl+D
bindAction(90, true, 'undo'); // Ctrl+Z
bindAction(89, true, 'redo'); // Ctrl+Y
bindAction(88, true, 'cut'); // Ctrl+X
bindAction(67, true, 'copy'); // Ctrl+C
bindAction(81, true, 'connect'); // Ctrl+Q
bindAction(86, true, 'paste'); // Ctrl+V
bindAction(71, true, 'group'); // Ctrl+G
bindAction(71, true, 'grid', true); // Ctrl+Shift+G
bindAction(85, true, 'ungroup'); // Ctrl+U
bindAction(112, false, 'about'); // F1 return keyHandler;
};

Here is how to save the topology after the graphical operation Xml file , Easy to visit again , Or load the original information when viewing !

Such as operation function :

Corresponding through the above EditorUi.js In file EditorUi.prototype.save = function() control , I was through a Servlet To preserve XML file

 package com.visec.systemConfig;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.RandomAccessFile;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* <p>Title: The network topology is saved </p>
* <p>Description: Save the network topology to the corresponding xml In file as well as Read the network topology map corresponding to xml file </p>
* <p>Copyright: Copyright (c) 2015</p>
* <p>Company: XXX Technology </p>
* @author Li Shangzhi
* @version 3.0
*/
public class SaveToXmlServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
String type = request.getParameter("type");
String tp = request.getParameter("tp");
StringBuffer result = new StringBuffer("");
String xmlPath=new String("");
String strPath = this.getClass().getResource("/").toString();
xmlPath = ("qsy".equals(tp))?"network_map/network_qsy.xml":("dzj".equals(tp))?"network_map/network_dzj.xml":("zdw".equals(tp))?"network_map/network_zdw.xml":"network_map/network_sp.xml";
String osName = System.getProperties().getProperty("os.name");
if(osName.toLowerCase().indexOf("windows")>-1){
strPath=strPath.substring(6)+xmlPath;
}else{
strPath=strPath.substring(5)+xmlPath;
}
File file = new File(strPath);
if(file.isFile()){// Determine whether the path is a file
if("set".equals(type.toLowerCase())){// file save
String xml = request.getParameter("xml");
if(xml==null||"".equals(xml)){
result.append("0");
}else{
RandomAccessFile randomAccessFile = new RandomAccessFile(strPath, "rw");
randomAccessFile.seek(0);
randomAccessFile.setLength(0);
randomAccessFile.write(xml.getBytes());
randomAccessFile.close();
result.append("1");
}
}else if("get".equals(type.toLowerCase())){// Get file information
// Start reading
BufferedReader reader = new BufferedReader(new FileReader(new File(strPath)));
String tempString = null;
// Read in one line at a time , Until read in null End of file
while ((tempString = reader.readLine()) != null){
result.append(tempString);
}
reader.close();
}
}else{
System.out.println(strPath+" Can't find !");
result.append("0");
}
PrintWriter out = response.getWriter();
out.write(result.toString());
out.flush();
out.close();
} }

When we visit the edit page again , That is to load the previous corresponding XML file

Main documents ( Actions.js And above Servlet in get Method )

Servlet Omit here ( The source code has been provided in the above )

Actions.js Source code

 /**
*$id:Action .JS,V 2015-3-23
*$author Dana , Li$
*/
/**
* Structure for a given UI Object of operation .
* Edit function method management
*/
function Actions(editorUi)
{
this.editorUi = editorUi;
this.actions = new Object();
this.init();
};
/**
* Add the default function
*/
Actions.prototype.init = function()
{
var ui = this.editorUi;
var editor = ui.editor;
var graph = editor.graph;
graph.cellsMovable=!0; // Set immobile
graph.cellsDisconnectable=!0; // Set edges not to be edited
graph.cellsResizable=!0; // Settings cannot be changed in size
$.post($("#path").val()+"/SaveToXmlServlet",{"tp":$("#mapTp").val(),"type":"get"},function(text){
if(text=="0"){
alert(" Topology XML File load failed !");
}else{
// Save Topology XML Template file
//example:
//<mxGraphModel grid="0" guides="1" tooltips="1" connect="1" fold="1" page="0" pageScale="1" pageWidth="826" pageHeight="1169">
// <root>
// <mxCell id="0"/>
// <mxCell id="1" parent="0"/>
// <mxCell id="2" value=" Test the gateway [ The inner end ] Communications :192.168.0.199 Business : 192.168.1.199" style="image;image=stencils/clipart/pic3.png" vertex="1" remark="142588842925033" parent="1">
// <mxGeometry x="236" y="139" width="80" height="80" as="geometry"/>
// </mxCell>
// </root>
//</mxGraphModel>
var xml = text;
var doc = mxUtils.parseXml(xml);
var model = new mxGraphModel();
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, model);
var children = model.getChildren(model.getChildAt(model.getRoot(), 0));
graph.setSelectionCells(editor.graph.importCells(children));
}
}); // File operations
this.addAction('new', function() { window.open(ui.getUrl());});
this.addAction('open', function()
{
window.openNew = true;
window.openKey = 'open';
ui.openFile();
}); this.addAction('import', function()
{
window.openNew = false;
window.openKey = 'import'; // Close the dialog box and open
window.openFile = new OpenFile(mxUtils.bind(this, function()
{
ui.hideDialog();
})); window.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
{
try
{
var doc = mxUtils.parseXml(xml);
var model = new mxGraphModel();
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, model); var children = model.getChildren(model.getChildAt(model.getRoot(), 0));
editor.graph.setSelectionCells(editor.graph.importCells(children));
}
catch (e)
{
mxUtils.alert(mxResources.get('invalidOrMissingFile') + ': ' + e.message);
}
})); // If the delete open file dialog box closes
ui.showDialog(new OpenDialog(this).container, 300, 180, true, true, function()
{
window.openFile = null;
});
});
this.addAction('save', function() { ui.save(); }, null, null, 'Ctrl+S'); //this.addAction('saveAs', function() { ui.saveFile(true); }, null, null, 'Ctrl+Shift-S');
//this.addAction('export', function() { ui.showDialog(new ExportDialog(ui).container, 300, 200, true, true); }, null, null, 'Ctrl+E');
//this.put('editFile', new Action(mxResources.get('edit'), mxUtils.bind(this, function()
//{
//this.editorUi.showDialog(new EditFileDialog(ui).container, 620, 420, true, true);
//})));
this.addAction('pageSetup', function() { ui.showDialog(new PageSetupDialog(ui).container, 300, 200, true, true); }); // Print
this.addAction('print', function() { ui.showDialog(new PrintDialog(ui).container, 300, 200, true, true); }, null, 'sprite-print', 'Ctrl+P'); this.addAction('preview', function() { mxUtils.show(graph, null, 10, 10); }); // Edit operation
this.addAction('undo', function() { editor.undoManager.undo(); }, null, 'sprite-undo', 'Ctrl+Z');
this.addAction('redo', function() { editor.undoManager.redo(); }, null, 'sprite-redo', 'Ctrl+Y');
this.addAction('cut', function() { mxClipboard.cut(graph); }, null, 'sprite-cut', 'Ctrl+X');
this.addAction('copy', function() { mxClipboard.copy(graph); }, null, 'sprite-copy', 'Ctrl+C');
this.addAction('paste', function() { mxClipboard.paste(graph); }, false, 'sprite-paste', 'Ctrl+V');
this.addAction('delete', function() { graph.removeCells(); }, null, null, 'Delete');
this.addAction('duplicate', function()
{
var s = graph.gridSize;
graph.setSelectionCells(graph.moveCells(graph.getSelectionCells(), s, s, true));
}, null, null, 'Ctrl+D');
this.addAction('selectVertices', function() { graph.selectVertices(); }, null, null, 'Ctrl+Shift+V');
this.addAction('selectEdges', function() { graph.selectEdges(); }, null, null, 'Ctrl+Shift+E');
this.addAction('selectAll', function() { graph.selectAll(); }, null, null, 'Ctrl+A'); // Navigation operations
this.addAction('home', function() { graph.home(); }, null, null, 'Home');
this.addAction('exitGroup', function() { graph.exitGroup(); }, null, null, 'Page Up');
this.addAction('enterGroup', function() { graph.enterGroup(); }, null, null, 'Page Down');
this.addAction('expand', function() { graph.foldCells(false); }, null, null, 'Enter');
this.addAction('collapse', function() { graph.foldCells(true); }, null, null, 'Backspace'); // Arrange actions
this.addAction('toFront', function() { graph.orderCells(false); }, null, null, 'Ctrl+F');
this.addAction('toBack', function() { graph.orderCells(true); }, null, null, 'Ctrl+B');
this.addAction('group', function() { graph.setSelectionCell(graph.groupCells(null, 0)); }, null, null, 'Ctrl+G');
this.addAction('ungroup', function() { graph.setSelectionCells(graph.ungroupCells()); }, null, null, 'Ctrl+U');
this.addAction('removeFromGroup', function() { graph.removeCellsFromParent(); });
this.addAction('editLink', function()
{
var cell = graph.getSelectionCell();
var link = graph.getLinkForCell(cell); if (link == null)
{
link = '';
} link = mxUtils.prompt(mxResources.get('enterValue'), link); if (link != null)
{
graph.setLinkForCell(cell, link);
}
});
this.addAction('openLink', function()
{
var cell = graph.getSelectionCell();
var link = graph.getLinkForCell(cell); if (link != null)
{
window.open(link);
}
});
this.addAction('autosize', function()
{
var cells = graph.getSelectionCells(); if (cells != null)
{
graph.getModel().beginUpdate();
try
{
for (var i = 0; i < cells.length; i++)
{
var cell = cells[i]; if (graph.getModel().getChildCount(cell))
{
graph.updateGroupBounds([cell], 20);
}
else
{
graph.updateCellSize(cell);
}
}
}
finally
{
graph.getModel().endUpdate();
}
}
});
this.addAction('rotation', function()
{
var value = '0';
var state = graph.getView().getState(graph.getSelectionCell()); if (state != null)
{
value = state.style[mxConstants.STYLE_ROTATION] || value;
} value = mxUtils.prompt(mxResources.get('enterValue') + ' (' +
mxResources.get('rotation') + ' 0-360)', value); if (value != null)
{
graph.setCellStyles(mxConstants.STYLE_ROTATION, value);
}
});
this.addAction('rotate', function()
{
var cells = graph.getSelectionCells(); if (cells != null)
{
graph.getModel().beginUpdate();
try
{
for (var i = 0; i < cells.length; i++)
{
var cell = cells[i]; if (graph.getModel().isVertex(cell) && graph.getModel().getChildCount(cell) == 0)
{
var geo = graph.getCellGeometry(cell); if (geo != null)
{
// The geometry and position of the rotation
geo = geo.clone();
geo.x += geo.width / 2 - geo.height / 2;
geo.y += geo.height / 2 - geo.width / 2;
var tmp = geo.width;
geo.width = geo.height;
geo.height = tmp;
graph.getModel().setGeometry(cell, geo); // Direction and progress 90 Degree reading
var state = graph.view.getState(cell); if (state != null)
{
var dir = state.style[mxConstants.STYLE_DIRECTION] || 'east'/*default*/; if (dir == 'east')
{
dir = 'south';
}
else if (dir == 'south')
{
dir = 'west';
}
else if (dir == 'west')
{
dir = 'north';
}
else if (dir == 'north')
{
dir = 'east';
} graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
}
}
}
}
}
finally
{
graph.getModel().endUpdate();
}
}
}, null, null, 'Ctrl+R'); // View operation
this.addAction('actualSize', function()
{
graph.zoomTo(1);
});
this.addAction('zoomIn', function() { graph.zoomIn(); }, null, null, 'Add');
this.addAction('zoomOut', function() { graph.zoomOut(); }, null, null, 'Subtract');
this.addAction('fitWindow', function() { graph.fit(); }); this.addAction('fitPage', mxUtils.bind(this, function()
{
if (!graph.pageVisible)
{
this.get('pageView').funct();
} var fmt = graph.pageFormat;
var ps = graph.pageScale;
var cw = graph.container.clientWidth - 20;
var ch = graph.container.clientHeight - 20; var scale = Math.floor(100 * Math.min(cw / fmt.width / ps, ch / fmt.height / ps)) / 100;
graph.zoomTo(scale); graph.container.scrollLeft = Math.round(graph.view.translate.x * scale - Math.max(10, (graph.container.clientWidth - fmt.width * ps * scale) / 2));
graph.container.scrollTop = Math.round(graph.view.translate.y * scale - Math.max(10, (graph.container.clientHeight - fmt.height * ps * scale) / 2));
}));
this.addAction('fitPageWidth', mxUtils.bind(this, function()
{
if (!graph.pageVisible)
{
this.get('pageView').funct();
} var fmt = graph.pageFormat;
var ps = graph.pageScale;
var cw = graph.container.clientWidth - 20; var scale = Math.floor(100 * cw / fmt.width / ps) / 100;
graph.zoomTo(scale); graph.container.scrollLeft = Math.round(graph.view.translate.x * scale - Math.max(10, (graph.container.clientWidth - fmt.width * ps * scale) / 2));
graph.container.scrollTop = Math.round(graph.view.translate.y * scale - Math.max(10, (graph.container.clientHeight - fmt.height * ps * scale) / 2));
}));
this.put('customZoom', new Action(mxResources.get('custom'), function()
{
var value = mxUtils.prompt(mxResources.get('enterValue') + ' (%)', parseInt(graph.getView().getScale() * 100)); if (value != null && value.length > 0 && !isNaN(parseInt(value)))
{
graph.zoomTo(parseInt(value) / 100);
}
})); // Choose action
var action = null;
action = this.addAction('grid', function()
{
graph.setGridEnabled(!graph.isGridEnabled());
editor.updateGraphComponents();
}, null, null, 'Ctrl+Shift+G');
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.isGridEnabled(); });
action = this.addAction('guides', function() { graph.graphHandler.guidesEnabled = !graph.graphHandler.guidesEnabled; });
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.graphHandler.guidesEnabled; });
action = this.addAction('tooltips', function()
{
graph.tooltipHandler.setEnabled(!graph.tooltipHandler.isEnabled());
});
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.tooltipHandler.isEnabled(); });
action = this.addAction('navigation', function()
{
graph.foldingEnabled = !graph.foldingEnabled;
graph.view.revalidate();
});
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.foldingEnabled; });
action = this.addAction('scrollbars', function()
{
graph.scrollbars = !graph.scrollbars;
editor.updateGraphComponents(); if (!graph.scrollbars)
{
var t = graph.view.translate;
graph.view.setTranslate(t.x - graph.container.scrollLeft / graph.view.scale, t.y - graph.container.scrollTop / graph.view.scale);
graph.container.scrollLeft = 0;
graph.container.scrollTop = 0;
graph.sizeDidChange();
}
else
{
var dx = graph.view.translate.x;
var dy = graph.view.translate.y; graph.view.translate.x = 0;
graph.view.translate.y = 0;
graph.sizeDidChange();
graph.container.scrollLeft -= Math.round(dx * graph.view.scale);
graph.container.scrollTop -= Math.round(dy * graph.view.scale);
}
}, !mxClient.IS_TOUCH);
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.container.style.overflow == 'auto'; });
action = this.addAction('pageView', mxUtils.bind(this, function()
{
graph.pageVisible = !graph.pageVisible;
graph.pageBreaksVisible = graph.pageVisible;
graph.preferPageSize = graph.pageBreaksVisible;
graph.view.validate();
graph.sizeDidChange(); editor.updateGraphComponents();
editor.outline.update(); if (mxUtils.hasScrollbars(graph.container))
{
if (graph.pageVisible)
{
graph.container.scrollLeft -= 20;
graph.container.scrollTop -= 20;
}
else
{
graph.container.scrollLeft += 20;
graph.container.scrollTop += 20;
}
}
}));
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.pageVisible; });
this.put('pageBackgroundColor', new Action(mxResources.get('backgroundColor'), function()
{
var apply = function(color)
{
graph.background = color;
editor.updateGraphComponents();
}; var cd = new ColorDialog(ui, graph.background || 'none', apply);
ui.showDialog(cd.container, 220, 360, true, false); if (!mxClient.IS_TOUCH)
{
cd.colorInput.focus();
}
}));
action = this.addAction('connect', function()
{
graph.setConnectable(!graph.connectionHandler.isEnabled());
}, null, null, 'Ctrl+Q');
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.connectionHandler.isEnabled(); }); // Helping behavior
this.addAction('help', function()
{
var ext = ''; if (mxResources.isLanguageSupported(mxClient.language))
{
ext = '_' + mxClient.language;
} window.open(RESOURCES_PATH + '/help' + ext + '.html');
});
this.put('about', new Action(mxResources.get('about') + ' Graph Editor', function()
{
ui.showDialog(new AboutDialog(ui).container, 320, 280, true, true);
}, null, null, 'F1')); // Font style action
var toggleFontStyle = mxUtils.bind(this, function(key, style)
{
this.addAction(key, function()
{
graph.toggleCellStyleFlags(mxConstants.STYLE_FONTSTYLE, style);
});
}); toggleFontStyle('bold', mxConstants.FONT_BOLD);
toggleFontStyle('italic', mxConstants.FONT_ITALIC);
toggleFontStyle('underline', mxConstants.FONT_UNDERLINE); // Color action
this.addAction('fontColor', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR); });
this.addAction('strokeColor', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); });
this.addAction('fillColor', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); });
this.addAction('gradientColor', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); });
this.addAction('backgroundColor', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR); });
this.addAction('borderColor', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); }); // The behavior of the format
this.addAction('shadow', function() { graph.toggleCellStyles(mxConstants.STYLE_SHADOW); });
this.addAction('dashed', function() { graph.toggleCellStyles(mxConstants.STYLE_DASHED); });
this.addAction('rounded', function() { graph.toggleCellStyles(mxConstants.STYLE_ROUNDED); });
this.addAction('style', function()
{
var cells = graph.getSelectionCells(); if (cells != null && cells.length > 0)
{
var model = graph.getModel();
var style = mxUtils.prompt(mxResources.get('enterValue')+ ' (' + mxResources.get('style') + ')',
model.getStyle(cells[0]) || ''); if (style != null)
{
graph.setCellStyle(style, cells);
}
}
});
this.addAction('setAsDefaultEdge', function()
{
var cell = graph.getSelectionCell(); if (cell != null && graph.getModel().isEdge(cell))
{
// Take a snapshot of the cell at the time of the call
var proto = graph.getModel().cloneCells([cell])[0]; // Delete input / exitxy style
var style = proto.getStyle();
style = mxUtils.setStyle(style, mxConstants.STYLE_ENTRY_X, '');
style = mxUtils.setStyle(style, mxConstants.STYLE_ENTRY_Y, '');
style = mxUtils.setStyle(style, mxConstants.STYLE_EXIT_X, '');
style = mxUtils.setStyle(style, mxConstants.STYLE_EXIT_Y, '');
proto.setStyle(style); // Connect preview with edge template
graph.connectionHandler.createEdgeState = function(me)
{
return graph.view.createState(proto);
}; // Create a new connection edge template
graph.connectionHandler.factoryMethod = function()
{
return graph.cloneCells([proto])[0];
};
}
});
this.addAction('image', function()
{
function updateImage(value, w, h)
{
var select = null;
var cells = graph.getSelectionCells(); graph.getModel().beginUpdate();
try
{
// No cell selected
if (cells.length == 0)
{
var gs = graph.getGridSize();
cells = [graph.insertVertex(graph.getDefaultParent(), null, '', gs, gs, w, h)];
select = cells;
} graph.setCellStyles(mxConstants.STYLE_IMAGE, value, cells);
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'image', cells); if (graph.getSelectionCount() == 1)
{
if (w != null && h != null)
{
var cell = cells[0];
var geo = graph.getModel().getGeometry(cell); if (geo != null)
{
geo = geo.clone();
geo.width = w;
geo.height = h;
graph.getModel().setGeometry(cell, geo);
}
}
}
}
finally
{
graph.getModel().endUpdate();
} if (select != null)
{
graph.setSelectionCells(select);
graph.scrollCellToVisible(select[0]);
}
}; var value = '';
var state = graph.getView().getState(graph.getSelectionCell()); if (state != null)
{
value = state.style[mxConstants.STYLE_IMAGE] || value;
} value = mxUtils.prompt(mxResources.get('enterValue') + ' (' + mxResources.get('url') + ')', value); if (value != null)
{
if (value.length > 0)
{
var img = new Image(); img.onload = function()
{
updateImage(value, img.width, img.height);
};
img.onerror = function()
{
mxUtils.alert(mxResources.get('fileNotFound'));
};
img.src = value;
}
}
});
}; /**
* Registers are used for a given name .
*/
Actions.prototype.addAction = function(key, funct, enabled, iconCls, shortcut)
{
return this.put(key, new Action(mxResources.get(key), funct, enabled, iconCls, shortcut));
}; /**
* Registers are used for a given name .
*/
Actions.prototype.put = function(name, action)
{
this.actions[name] = action; return action;
}; /**
* Returns an action with a given name or null if no such action exists .
*/
Actions.prototype.get = function(name)
{
return this.actions[name];
}; /**
* A new active construction for a given parameter .
*/
function Action(label, funct, enabled, iconCls, shortcut)
{
mxEventSource.call(this);
this.label = label;
this.funct = funct;
this.enabled = (enabled != null) ? enabled : true;
this.iconCls = iconCls;
this.shortcut = shortcut;
}; // Action inherits mxeventsource
mxUtils.extend(Action, mxEventSource); Action.prototype.setEnabled = function(value)
{
if (this.enabled != value)
{
this.enabled = value;
this.fireEvent(new mxEventObject('stateChanged'));
}
}; /**
* Set action enabled status statechanged event .
*/
Action.prototype.setToggleAction = function(value)
{
this.toggleAction = value;
}; /**
* Set action enabled status statechanged event .
*/
Action.prototype.setSelectedCallback = function(funct)
{
this.selectedCallback = funct;
}; /**
* Set action enabled status statechanged event .
*/
Action.prototype.isSelected = function()
{
return this.selectedCallback();
};

The toolbar ~Sidebar.js

Such as : Icon A District , Icon B Area control

Source code :

 /**
*$id:Action .JS,V 2015-3-23
*$author Dana , Li$
*/
/**
* Construcs a new sidebar for the given editor.
*/
function Sidebar(editorUi, container)
{
this.editorUi = editorUi;
this.container = container;
this.palettes = new Object();
this.showTooltips = true;
this.graph = new Graph(document.createElement('div'), null, null, this.editorUi.editor.graph.getStylesheet());
this.graph.foldingEnabled = false;
this.graph.autoScroll = false;
this.graph.setTooltips(false);
this.graph.setConnectable(false);
this.graph.resetViewOnRootChange = false;
this.graph.view.setTranslate(this.thumbBorder, this.thumbBorder);
this.graph.setEnabled(false); // Workaround for VML rendering in IE8 standards mode where the container must be in the DOM
// so that VML references can be restored via document.getElementById in mxShape.init.
if (document.documentMode == 8)
{
document.body.appendChild(this.graph.container);
} // Workaround for no rendering in 0 coordinate in FF 10
if (this.shiftThumbs)
{
this.graph.view.canvas.setAttribute('transform', 'translate(1, 1)');
} if (!mxClient.IS_TOUCH)
{
mxEvent.addListener(document, 'mouseup', mxUtils.bind(this, function()
{
this.showTooltips = true;
})); // Enables tooltips after scroll
mxEvent.addListener(container, 'scroll', mxUtils.bind(this, function()
{
this.showTooltips = true;
})); mxEvent.addListener(document, 'mousedown', mxUtils.bind(this, function()
{
this.showTooltips = false;
this.hideTooltip();
})); mxEvent.addListener(document, 'mousemove', mxUtils.bind(this, function(evt)
{
var src = mxEvent.getSource(evt); while (src != null)
{
if (src == this.currentElt)
{
return;
} src = src.parentNode;
} this.hideTooltip();
})); // Handles mouse leaving the window
mxEvent.addListener(document, 'mouseout', mxUtils.bind(this, function(evt)
{
if (evt.toElement == null && evt.relatedTarget == null)
{
this.hideTooltip();
}
}));
} this.init(); // Image pre fetches Tips
new Image().src = IMAGE_PATH + '/tooltip.png';
}; /**
* Add all toolbars to the sidebar .
*/
Sidebar.prototype.init = function()
{
var dir = STENCIL_PATH; //this.addGeneralPalette(true);
//this.addUmlPalette(true);
//this.addBpmnPalette(dir, false);
//this.addStencilPalette('flowchart', 'Flowchart', dir + '/flowchart.xml',';fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
//this.addStencilPalette('basic', mxResources.get('basic'), dir + '/basic.xml',';fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
//this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',';fillColor=#ffffff;strokeColor=#000000;strokeWidth=2'); this.addImagePalette('clipart', mxResources.get('clipart'), dir + '/clipart/', '_128x128.png',
[ 'colud', 'Firewall_02', 'Server_Tower', 'serverDB', 'serverAuth',
'serverPrint', 'serverEmail', 'serverDisk', 'Router_Icon', 'routerFirewall', 'route1', 'atm', 'police',
'accessServer','SIP', 'sipProxy', 'ITP', 'CA', '3U', 'ipv6Route',
'3layer', 'pbx', 'IDS', 'actionCheck', 'gateWayVPN', 'server1','server2','normalServer','IPSAN','H3Cswitch']); this.addImagePalette('clipartB', mxResources.get('clipartB'), dir + '/clipart/', '.png',
[ 'pic1','pic2','pic3','pic4','pic5','pic6','pic7','pic8','pic9','pic10','pic11','pic12','pic13','pic14','pic15']); }; /**
* Specifies that the tool tip should be visible . The default is true .
*/
Sidebar.prototype.enableTooltips = !mxClient.IS_TOUCH; /**
* Put the thumbnail 1 Pixels .
*/
Sidebar.prototype.shiftThumbs = mxClient.IS_SVG || document.documentMode == 8; /**
* Specifies the delay of the tool tip . The default is 16 Pixels .
*/
Sidebar.prototype.tooltipBorder = 16; /**
* Specifies the delay of the tool tip . The default is 2 Pixels .
*/
Sidebar.prototype.thumbBorder = 2; /**
* Specifies the delay for the tooltip. Default is 300 ms.
*/
Sidebar.prototype.tooltipDelay = 300; /**
* Specifies if edges should be used as templates if clicked. Default is true.
*/
Sidebar.prototype.installEdges = true; /**
* Specifies the URL of the gear image.
*/
Sidebar.prototype.gearImage = STENCIL_PATH + '/clipart/Gear_128x128.png'; /**
* Specifies the width of the thumbnails.
*/
Sidebar.prototype.thumbWidth = 26; /**
* Specifies the height of the thumbnails.
*/
Sidebar.prototype.thumbHeight = 26; /**
* Adds all palettes to the sidebar.
*/
Sidebar.prototype.showTooltip = function(elt, cells)
{
if (this.enableTooltips && this.showTooltips)
{
if (this.currentElt != elt)
{
if (this.thread != null)
{
window.clearTimeout(this.thread);
this.thread = null;
} var show = mxUtils.bind(this, function()
{
// Workaround for off-screen text rendering in IE
var old = mxText.prototype.getTableSize; if (this.graph.dialect != mxConstants.DIALECT_SVG)
{
mxText.prototype.getTableSize = function(table)
{
var oldParent = table.parentNode; document.body.appendChild(table);
var size = new mxRectangle(0, 0, table.offsetWidth, table.offsetHeight);
oldParent.appendChild(table); return size;
};
} // Lazy creation of the DOM nodes and graph instance
if (this.tooltip == null)
{
this.tooltip = document.createElement('div');
this.tooltip.className = 'geSidebarTooltip';
document.body.appendChild(this.tooltip); this.graph2 = new Graph(this.tooltip, null, null, this.editorUi.editor.graph.getStylesheet());
this.graph2.view.setTranslate(this.tooltipBorder, this.tooltipBorder);
this.graph2.resetViewOnRootChange = false;
this.graph2.foldingEnabled = false;
this.graph2.autoScroll = false;
this.graph2.setTooltips(false);
this.graph2.setConnectable(false);
this.graph2.setEnabled(false); this.tooltipImage = mxUtils.createImage(IMAGE_PATH + '/tooltip.png');
this.tooltipImage.style.position = 'absolute';
this.tooltipImage.style.width = '14px';
this.tooltipImage.style.height = '27px'; document.body.appendChild(this.tooltipImage);
} this.graph2.model.clear();
this.graph2.addCells(cells); var bounds = this.graph2.getGraphBounds();
var width = bounds.x + bounds.width + this.tooltipBorder;
var height = bounds.y + bounds.height + this.tooltipBorder; if (mxClient.IS_QUIRKS)
{
width += 4;
height += 4;
} this.tooltip.style.display = 'block';
this.tooltip.style.overflow = 'visible';
this.tooltipImage.style.visibility = 'visible';
this.tooltip.style.width = width + 'px';
this.tooltip.style.height = height + 'px'; var left = this.container.clientWidth + this.editorUi.splitSize + 3;
var top = Math.max(0, (this.container.offsetTop + elt.offsetTop - this.container.scrollTop - height / 2 + 16)); // Workaround for ignored position CSS style in IE9
// (changes to relative without the following line)
this.tooltip.style.position = 'absolute';
this.tooltip.style.left = left + 'px';
this.tooltip.style.top = top + 'px';
this.tooltipImage.style.left = (left - 13) + 'px';
this.tooltipImage.style.top = (top + height / 2 - 13) + 'px'; mxText.prototype.getTableSize = old;
}); if (this.tooltip != null && this.tooltip.style.display != 'none')
{
show();
}
else
{
this.thread = window.setTimeout(show, this.tooltipDelay);
} this.currentElt = elt;
}
}
}; /**
* Hides the current tooltip.
*/
Sidebar.prototype.hideTooltip = function()
{
if (this.thread != null)
{
window.clearTimeout(this.thread);
this.thread = null;
} if (this.tooltip != null)
{
this.tooltip.style.display = 'none';
this.tooltipImage.style.visibility = 'hidden';
this.currentElt = null;
}
}; /**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addGeneralPalette = function(expand)
{
this.addPalette('general', mxResources.get('general'), expand || true, mxUtils.bind(this, function(content)
{
content.appendChild(this.createVertexTemplate('swimlane', 200, 200, 'Container'));
content.appendChild(this.createVertexTemplate('swimlane;horizontal=0', 200, 200, 'Pool'));
content.appendChild(this.createVertexTemplate('text', 40, 26, 'Text'));
content.appendChild(this.createVertexTemplate('icon;image=' + this.gearImage, 60, 60, 'Image'));
content.appendChild(this.createVertexTemplate('label;image=' + this.gearImage, 140, 60, 'Label'));
content.appendChild(this.createVertexTemplate(null, 120, 60));
content.appendChild(this.createVertexTemplate('rounded=1', 120, 60));
content.appendChild(this.createVertexTemplate('ellipse', 80, 80));
content.appendChild(this.createVertexTemplate('ellipse;shape=doubleEllipse', 80, 80));
content.appendChild(this.createVertexTemplate('triangle', 60, 80));
content.appendChild(this.createVertexTemplate('rhombus', 80, 80));
content.appendChild(this.createVertexTemplate('shape=hexagon', 120, 80));
content.appendChild(this.createVertexTemplate('shape=actor;verticalLabelPosition=bottom;verticalAlign=top', 40, 60));
content.appendChild(this.createVertexTemplate('ellipse;shape=cloud', 120, 80));
content.appendChild(this.createVertexTemplate('shape=cylinder', 60, 80));
content.appendChild(this.createVertexTemplate('line', 160, 10));
content.appendChild(this.createVertexTemplate('line;direction=south', 10, 160));
content.appendChild(this.createVertexTemplate('shape=xor', 60, 80));
content.appendChild(this.createVertexTemplate('shape=or', 60, 80));
content.appendChild(this.createVertexTemplate('shape=step', 120, 80));
content.appendChild(this.createVertexTemplate('shape=tape', 120, 100));
content.appendChild(this.createVertexTemplate('shape=cube', 120, 80));
content.appendChild(this.createVertexTemplate('shape=note', 80, 100));
content.appendChild(this.createVertexTemplate('shape=folder', 120, 120));
content.appendChild(this.createVertexTemplate('shape=card', 60, 80));
content.appendChild(this.createVertexTemplate('shape=plus', 20, 20)); content.appendChild(this.createEdgeTemplate('edgeStyle=none;endArrow=none;', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=none', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=elbowEdgeStyle;elbow=horizontal', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=elbowEdgeStyle;elbow=vertical', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=entityRelationEdgeStyle', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=segmentEdgeStyle', 100, 100));
content.appendChild(this.createEdgeTemplate('edgeStyle=orthogonalEdgeStyle', 100, 100));
content.appendChild(this.createEdgeTemplate('shape=link', 100, 100));
content.appendChild(this.createEdgeTemplate('arrow', 100, 100));
}));
}; /**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addUmlPalette = function(expand)
{
this.addPalette('uml', 'UML', expand || false, mxUtils.bind(this, function(content)
{
content.appendChild(this.createVertexTemplate('', 110, 50, 'Object')); var classCell = new mxCell('<p style="margin:0px;margin-top:4px;text-align:center;">' +
'<b>Class</b></p>' +
'<hr/><div style="height:2px;"></div><hr/>', new mxGeometry(0, 0, 140, 60),
'verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1');
classCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([classCell], 140, 60)); var classCell = new mxCell('<p style="margin:0px;margin-top:4px;text-align:center;">' +
'<b>Class</b></p>' +
'<hr/><p style="margin:0px;margin-left:4px;">+ field: Type</p><hr/>' +
'<p style="margin:0px;margin-left:4px;">+ method(): Type</p>', new mxGeometry(0, 0, 160, 90),
'verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1');
classCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([classCell], 160, 90)); var classCell = new mxCell('<p style="margin:0px;margin-top:4px;text-align:center;">' +
'<i>&lt;&lt;Interface&gt;&gt;</i><br/><b>Interface</b></p>' +
'<hr/><p style="margin:0px;margin-left:4px;">+ field1: Type<br/>' +
'+ field2: Type</p>' +
'<hr/><p style="margin:0px;margin-left:4px;">' +
'+ method1(Type): Type<br/>' +
'+ method2(Type, Type): Type</p>', new mxGeometry(0, 0, 190, 140),
'verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1');
classCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([classCell], 190, 140)); var classCell = new mxCell('Module', new mxGeometry(0, 0, 120, 60),
'shape=component;align=left;spacingLeft=36');
classCell.vertex = true; content.appendChild(this.createVertexTemplateFromCells([classCell], 120, 60)); var classCell = new mxCell('&lt;&lt;component&gt;&gt;<br/><b>Component</b>', new mxGeometry(0, 0, 180, 90),
'overflow=fill;html=1');
classCell.vertex = true;
var classCell1 = new mxCell('', new mxGeometry(1, 0, 20, 20), 'shape=component;jettyWidth=8;jettyHeight=4;');
classCell1.vertex = true;
classCell1.connectable = false;
classCell1.geometry.relative = true;
classCell1.geometry.offset = new mxPoint(-30, 10);
classCell.insert(classCell1); content.appendChild(this.createVertexTemplateFromCells([classCell], 180, 90)); var classCell = new mxCell('<p style="margin:0px;margin-top:6px;text-align:center;"><b>Component</b></p>' +
'<hr/><p style="margin:0px;margin-left:8px;">+ Attribute1: Type<br/>+ Attribute2: Type</p>', new mxGeometry(0, 0, 180, 90),
'verticalAlign=top;align=left;overflow=fill;html=1');
classCell.vertex = true;
var classCell1 = new mxCell('', new mxGeometry(1, 0, 20, 20), 'shape=component;jettyWidth=8;jettyHeight=4;');
classCell1.vertex = true;
classCell1.connectable = false;
classCell1.geometry.relative = true;
classCell1.geometry.offset = new mxPoint(-23, 3);
classCell.insert(classCell1); content.appendChild(this.createVertexTemplateFromCells([classCell], 180, 90)); content.appendChild(this.createVertexTemplate('shape=lollipop;direction=south;', 30, 10)); var cardCell = new mxCell('Block', new mxGeometry(0, 0, 180, 120),
'verticalAlign=top;align=left;spacingTop=8;spacingLeft=2;spacingRight=12;shape=cube;size=10;direction=south;fontStyle=4;');
cardCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([cardCell], 180, 120)); content.appendChild(this.createVertexTemplate('shape=folder;fontStyle=1;spacingTop=10;tabWidth=40;tabHeight=14;tabPosition=left;', 70, 50,
'package')); var classCell = new mxCell('<p style="margin:0px;margin-top:4px;text-align:center;text-decoration:underline;">' +
'<b>Object:Type</b></p><hr/>' +
'<p style="margin:0px;margin-left:8px;">field1 = value1<br/>field2 = value2<br>field3 = value3</p>',
new mxGeometry(0, 0, 160, 90),
'verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1');
classCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([classCell], 160, 90)); var tableCell = new mxCell('<table cellpadding="5" style="font-size:9pt;border:none;border-collapse:collapse;width:100%;">' +
'<tr><td colspan="2" style="border:1px solid gray;background:#e4e4e4;">Tablename</td></tr>' +
'<tr><td style="border:1px solid gray;">PK</td><td style="border:1px solid gray;">uniqueId</td></tr>' +
'<tr><td style="border:1px solid gray;">FK1</td><td style="border:1px solid gray;">foreignKey</td></tr>' +
'<tr><td style="border:1px solid gray;"></td><td style="border:1px solid gray;">fieldname</td></tr>' +
'</table>', new mxGeometry(0, 0, 180, 99), 'verticalAlign=top;align=left;overflow=fill;html=1');
tableCell.vertex = true;
content.appendChild(this.createVertexTemplateFromCells([tableCell], 180, 99)); content.appendChild(this.createVertexTemplate('shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top', 40, 80, 'Actor'));
content.appendChild(this.createVertexTemplate('ellipse', 140, 70, 'Use Case')); var cardCell = new mxCell('', new mxGeometry(0, 0, 30, 30),
'ellipse;shape=startState;fillColor=#000000;strokeColor=#ff0000;');
cardCell.vertex = true; var assoc2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;verticalAlign=bottom;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc2.geometry.setTerminalPoint(new mxPoint(15, 70), false);
assoc2.edge = true; cardCell.insertEdge(assoc2, true); content.appendChild(this.createVertexTemplateFromCells([cardCell, assoc2], 30, 30)); var cardCell = new mxCell('Activity', new mxGeometry(0, 0, 120, 40),
'rounded=1;arcSize=40;fillColor=#ffffc0;strokeColor=#ff0000;');
cardCell.vertex = true; var assoc2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;verticalAlign=bottom;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc2.geometry.setTerminalPoint(new mxPoint(60, 80), false);
assoc2.edge = true; cardCell.insertEdge(assoc2, true); content.appendChild(this.createVertexTemplateFromCells([cardCell, assoc2], 120, 40)); var cardCell = new mxCell('<div style="margin-top:8px;"><b>Composite State</b><hr/>Subtitle</div>', new mxGeometry(0, 0, 160, 60),
'rounded=1;arcSize=40;overflow=fill;html=1;verticalAlign=top;fillColor=#ffffc0;strokeColor=#ff0000;');
cardCell.vertex = true; var assoc2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;verticalAlign=bottom;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc2.geometry.setTerminalPoint(new mxPoint(80, 100), false);
assoc2.edge = true; cardCell.insertEdge(assoc2, true); content.appendChild(this.createVertexTemplateFromCells([cardCell, assoc2], 160, 60)); var cardCell = new mxCell('Condition', new mxGeometry(0, 0, 80, 40),
'rhombus;fillColor=#ffffc0;strokeColor=#ff0000;');
cardCell.vertex = true; var assoc1 = new mxCell('no', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;align=left;verticalAlign=bottom;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc1.geometry.setTerminalPoint(new mxPoint(120, 20), false);
assoc1.geometry.relative = true;
assoc1.geometry.x = -1;
assoc1.edge = true; cardCell.insertEdge(assoc1, true); var assoc2 = new mxCell('yes', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;align=left;verticalAlign=top;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc2.geometry.setTerminalPoint(new mxPoint(40, 80), false);
assoc2.geometry.relative = true;
assoc2.geometry.x = -1;
assoc2.edge = true; cardCell.insertEdge(assoc2, true); content.appendChild(this.createVertexTemplateFromCells([cardCell, assoc1, assoc2], 80, 40)); var cardCell = new mxCell('', new mxGeometry(0, 0, 200, 10),
'shape=line;strokeWidth=6;strokeColor=#ff0000;');
cardCell.vertex = true; var assoc2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;verticalAlign=bottom;endArrow=open;endSize=8;strokeColor=#ff0000;');
assoc2.geometry.setTerminalPoint(new mxPoint(100, 50), false);
assoc2.edge = true; cardCell.insertEdge(assoc2, true); content.appendChild(this.createVertexTemplateFromCells([cardCell, assoc2], 200, 10)); content.appendChild(this.createVertexTemplate('ellipse;shape=endState;fillColor=#000000;strokeColor=#ff0000', 30, 30)); var classCell1 = new mxCell(':Object', new mxGeometry(0, 0, 100, 50));
classCell1.vertex = true; var classCell2 = new mxCell('', new mxGeometry(40, 50, 20, 240), 'shape=line;direction=north;dashed=1');
classCell2.vertex = true; content.appendChild(this.createVertexTemplateFromCells([classCell1, classCell2], 100, 290)); var classCell1 = new mxCell('', new mxGeometry(100, 0, 20, 70));
classCell1.vertex = true; var assoc1 = new mxCell('invoke', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;verticalAlign=bottom;endArrow=block;');
assoc1.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc1.edge = true; classCell1.insertEdge(assoc1, false); content.appendChild(this.createVertexTemplateFromCells([classCell1, assoc1], 120, 70)); var classCell1 = new mxCell('', new mxGeometry(100, 0, 20, 70));
classCell1.vertex = true; var assoc1 = new mxCell('invoke', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;verticalAlign=bottom;endArrow=block;');
assoc1.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc1.edge = true; classCell1.insertEdge(assoc1, false); var assoc2 = new mxCell('return', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;verticalAlign=bottom;dashed=1;endArrow=open;endSize=8;');
assoc2.geometry.setTerminalPoint(new mxPoint(0, 70), false);
assoc2.edge = true; classCell1.insertEdge(assoc2, true); var assoc3 = new mxCell('invoke', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;align=left;endArrow=open;');
assoc3.edge = true; classCell1.insertEdge(assoc3, true);
classCell1.insertEdge(assoc3, false); content.appendChild(this.createVertexTemplateFromCells([classCell1, assoc1, assoc2, assoc3], 120, 70)); var assoc = new mxCell('name', new mxGeometry(0, 0, 0, 0), 'endArrow=block;endFill=1;edgeStyle=orthogonalEdgeStyle;align=left;verticalAlign=top;');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.geometry.relative = true;
assoc.geometry.x = -1;
assoc.edge = true; var sourceLabel = new mxCell('1', new mxGeometry(-1, 0, 0, 0), 'resizable=0;align=left;verticalAlign=bottom;labelBackgroundColor=#ffffff;fontSize=10');
sourceLabel.geometry.relative = true;
sourceLabel.setConnectable(false);
sourceLabel.vertex = true;
assoc.insert(sourceLabel); content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('', new mxGeometry(0, 0, 0, 0), 'endArrow=none;edgeStyle=orthogonalEdgeStyle;');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; var sourceLabel = new mxCell('parent', new mxGeometry(-1, 0, 0, 0), 'resizable=0;align=left;verticalAlign=bottom;labelBackgroundColor=#ffffff;fontSize=10');
sourceLabel.geometry.relative = true;
sourceLabel.setConnectable(false);
sourceLabel.vertex = true;
assoc.insert(sourceLabel); var targetLabel = new mxCell('child', new mxGeometry(1, 0, 0, 0), 'resizable=0;align=right;verticalAlign=bottom;labelBackgroundColor=#ffffff;fontSize=10');
targetLabel.geometry.relative = true;
targetLabel.setConnectable(false);
targetLabel.vertex = true;
assoc.insert(targetLabel); content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('1', new mxGeometry(0, 0, 0, 0), 'endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;align=left;verticalAlign=bottom;');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.geometry.relative = true;
assoc.geometry.x = -1;
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('Relation', new mxGeometry(0, 0, 0, 0), 'endArrow=open;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; var sourceLabel = new mxCell('0..n', new mxGeometry(-1, 0, 0, 0), 'resizable=0;align=left;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10');
sourceLabel.geometry.relative = true;
sourceLabel.setConnectable(false);
sourceLabel.vertex = true;
assoc.insert(sourceLabel); var targetLabel = new mxCell('1', new mxGeometry(1, 0, 0, 0), 'resizable=0;align=right;verticalAlign=top;labelBackgroundColor=#ffffff;fontSize=10');
targetLabel.geometry.relative = true;
targetLabel.setConnectable(false);
targetLabel.vertex = true;
assoc.insert(targetLabel); content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('Use', new mxGeometry(0, 0, 0, 0), 'endArrow=open;endSize=12;dashed=1');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('Extends', new mxGeometry(0, 0, 0, 0), 'endArrow=block;endSize=16;endFill=0;dashed=1');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('', new mxGeometry(0, 0, 0, 0), 'endArrow=block;startArrow=block;endFill=1;startFill=1');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0));
}));
}; /**
* Adds the BPMN library to the sidebar.
*/
Sidebar.prototype.addBpmnPalette = function(dir, expand)
{
this.addStencilPalette('bpmn', 'BPMN', dir + '/bpmn.xml',
';fillColor=#ffffff;strokeColor=#000000;perimeter=ellipsePerimeter;',
['Cancel', 'Error', 'Link', 'Message', 'Compensation', 'Multiple', 'Rule', 'Timer'],
function(content)
{
content.appendChild(this.createVertexTemplate('swimlane;horizontal=0;', 300, 160, 'Pool')); var classCell = new mxCell('Process', new mxGeometry(0, 0, 140, 60),
'rounded=1');
classCell.vertex = true;
var classCell1 = new mxCell('', new mxGeometry(1, 1, 30, 30), 'shape=mxgraph.bpmn.timer_start;perimeter=ellipsePerimeter;');
classCell1.vertex = true;
classCell1.geometry.relative = true;
classCell1.geometry.offset = new mxPoint(-40, -15);
classCell.insert(classCell1); content.appendChild(this.createVertexTemplateFromCells([classCell], 140, 60)); var classCell = new mxCell('Process', new mxGeometry(0, 0, 140, 60),
'rounded=1');
classCell.vertex = true;
var classCell1 = new mxCell('', new mxGeometry(0.5, 1, 12, 12), 'shape=plus');
classCell1.vertex = true;
classCell1.connectable = false;
classCell1.geometry.relative = true;
classCell1.geometry.offset = new mxPoint(-6, -12);
classCell.insert(classCell1); content.appendChild(this.createVertexTemplateFromCells([classCell], 140, 60)); var classCell = new mxCell('Process', new mxGeometry(0, 0, 140, 60),
'rounded=1');
classCell.vertex = true;
var classCell1 = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message');
classCell1.vertex = true;
classCell1.connectable = false;
classCell1.geometry.relative = true;
classCell1.geometry.offset = new mxPoint(5, 5);
classCell.insert(classCell1); content.appendChild(this.createVertexTemplateFromCells([classCell], 140, 60)); var classCell = new mxCell('', new mxGeometry(0, 0, 60, 40), 'shape=message');
classCell.vertex = true; content.appendChild(this.createEdgeTemplateFromCells([classCell], 60, 40)); var assoc = new mxCell('Sequence', new mxGeometry(0, 0, 0, 0), 'endArrow=block;endFill=1;endSize=6');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('Default', new mxGeometry(0, 0, 0, 0), 'startArrow=dash;startSize=8;endArrow=block;endFill=1;endSize=6');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('Conditional', new mxGeometry(0, 0, 0, 0), 'startArrow=diamondThin;startFill=0;startSize=14;endArrow=block;endFill=1;endSize=6');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; var sourceLabel = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message');
sourceLabel.geometry.relative = true;
sourceLabel.setConnectable(false);
sourceLabel.vertex = true;
sourceLabel.geometry.offset = new mxPoint(-10, -7);
assoc.insert(sourceLabel); content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0)); var assoc = new mxCell('', new mxGeometry(0, 0, 0, 0), 'shape=link');
assoc.geometry.setTerminalPoint(new mxPoint(0, 0), true);
assoc.geometry.setTerminalPoint(new mxPoint(160, 0), false);
assoc.edge = true; content.appendChild(this.createEdgeTemplateFromCells([assoc], 160, 0));
}, 0.5);
}; /**
* Creates and returns the given title element.
*/
Sidebar.prototype.createTitle = function(label)
{
var elt = document.createElement('a');
elt.setAttribute('href', 'javascript:void(0);');
elt.className = 'geTitle';
mxUtils.write(elt, label); return elt;
}; /**
* Creates a thumbnail for the given cells.
*/
Sidebar.prototype.createThumb = function(cells, width, height, parent)
{
// Workaround for off-screen text rendering in IE
var old = mxText.prototype.getTableSize; if (this.graph.dialect != mxConstants.DIALECT_SVG)
{
mxText.prototype.getTableSize = function(table)
{
var oldParent = table.parentNode; document.body.appendChild(table);
var size = new mxRectangle(0, 0, table.offsetWidth, table.offsetHeight);
oldParent.appendChild(table); return size;
};
} var prev = mxImageShape.prototype.preserveImageAspect;
mxImageShape.prototype.preserveImageAspect = false; this.graph.view.rendering = false;
this.graph.view.setScale(1);
this.graph.addCells(cells);
var bounds = this.graph.getGraphBounds(); var corr = (this.shiftThumbs) ? this.thumbBorder + 1 : this.thumbBorder;
var s = Math.min((width - 1) / (bounds.x + bounds.width + corr),
(height - 1) / (bounds.y + bounds.height + corr));
this.graph.view.setScale(s);
this.graph.view.rendering = true;
this.graph.refresh();
mxImageShape.prototype.preserveImageAspect = prev; bounds = this.graph.getGraphBounds();
var dx = Math.max(0, Math.floor((width - bounds.width) / 2));
var dy = Math.max(0, Math.floor((height - bounds.height) / 2)); var node = null; // For supporting HTML labels in IE9 standards mode the container is cloned instead
if (this.graph.dialect == mxConstants.DIALECT_SVG && !mxClient.IS_IE)
{
node = this.graph.view.getCanvas().ownerSVGElement.cloneNode(true);
}
// Workaround for VML rendering in IE8 standards mode
else if (document.documentMode == 8)
{
node = this.graph.container.cloneNode(false);
node.innerHTML = this.graph.container.innerHTML;
}
else
{
node = this.graph.container.cloneNode(true);
} this.graph.getModel().clear(); // Outer dimension is (32, 32)
var dd = (this.shiftThumbs) ? 2 : 3;
node.style.position = 'relative';
node.style.overflow = 'visible';
node.style.cursor = 'pointer';
node.style.left = (dx + dd) + 'px';
node.style.top = (dy + dd) + 'px';
node.style.width = width + 'px';
node.style.height = height + 'px'; parent.appendChild(node);
mxText.prototype.getTableSize = old;
}; /**
* Creates and returns a new palette item for the given image.
*/
Sidebar.prototype.createItem = function(cells)
{
var elt = document.createElement('a');
elt.setAttribute('href', 'javascript:void(0);');
elt.className = 'geItem'; // Blocks default click action
mxEvent.addListener(elt, 'click', function(evt)
{
mxEvent.consume(evt);
}); this.createThumb(cells, this.thumbWidth, this.thumbHeight, elt); return elt;
}; /**
* Creates a drop handler for inserting the given cells.
*/
Sidebar.prototype.createDropHandler = function(cells, allowSplit)
{
return function(graph, evt, target, x, y)
{
cells = graph.getImportableCells(cells); if (cells.length > 0)
{
var validDropTarget = (target != null) ?
graph.isValidDropTarget(target, cells, evt) : false;
var select = null; if (target != null && !validDropTarget)
{
target = null;
} // Splits the target edge or inserts into target group
if (allowSplit && graph.isSplitEnabled() && graph.isSplitTarget(target, cells, evt))
{
graph.splitEdge(target, cells, null, x, y);
select = cells;
}
else if (cells.length > 0)
{
select = graph.importCells(cells, x, y, target);
} if (select != null && select.length > 0)
{
graph.scrollCellToVisible(select[0]);
graph.setSelectionCells(select);
}
}
};
}; /**
* Creates and returns a preview element for the given width and height.
*/
Sidebar.prototype.createDragPreview = function(width, height)
{
var elt = document.createElement('div');
elt.style.border = '1px dashed black';
elt.style.width = width + 'px';
elt.style.height = height + 'px'; return elt;
}; /**
* Creates a drag source for the given element.
*/
Sidebar.prototype.createDragSource = function(elt, dropHandler, preview)
{
var dragSource = mxUtils.makeDraggable(elt, this.editorUi.editor.graph, dropHandler,
preview, 0, 0, this.editorUi.editor.graph.autoscroll, true, true); // Allows drop into cell only if target is a valid root
dragSource.getDropTarget = function(graph, x, y)
{
var target = mxDragSource.prototype.getDropTarget.apply(this, arguments); if (!graph.isValidRoot(target))
{
target = null;
} return target;
}; return dragSource;
}; /**
* Adds a handler for inserting the cell with a single click.
*/
Sidebar.prototype.addClickHandler = function(elt, ds)
{
var graph = this.editorUi.editor.graph;
var first = null; var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
mxEvent.addListener(elt, md, function(evt)
{
first = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
}); var oldMouseUp = ds.mouseUp;
ds.mouseUp = function(evt)
{
if (!mxEvent.isPopupTrigger(evt) && this.currentGraph == null && first != null)
{
var tol = graph.tolerance; if (Math.abs(first.x - mxEvent.getClientX(evt)) <= tol &&
Math.abs(first.y - mxEvent.getClientY(evt)) <= tol)
{
var gs = graph.getGridSize();
ds.drop(graph, evt, null, gs, gs);
}
} oldMouseUp.apply(this, arguments);
first = null;
};
}; /**
* Creates a drop handler for inserting the given cells.
*/
Sidebar.prototype.createVertexTemplate = function(style, width, height, value)
{
var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0, width, height), style)];
cells[0].vertex = true; return this.createVertexTemplateFromCells(cells, width, height);
}; /**
* Creates a drop handler for inserting the given cells.
*/
Sidebar.prototype.createVertexTemplateFromCells = function(cells, width, height)
{
var elt = this.createItem(cells);
var ds = this.createDragSource(elt, this.createDropHandler(cells, true), this.createDragPreview(width, height));
this.addClickHandler(elt, ds); // Uses guides for vertices only if enabled in graph
ds.isGuidesEnabled = mxUtils.bind(this, function()
{
return this.editorUi.editor.graph.graphHandler.guidesEnabled;
}); // Shows a tooltip with the rendered cell
if (!touchStyle)
{
mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt)
{
this.showTooltip(elt, cells);
}));
} return elt;
}; /**
* Creates a drop handler for inserting the given cells.
*/
Sidebar.prototype.createEdgeTemplate = function(style, width, height, value)
{
var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0, width, height), style)];
cells[0].geometry.setTerminalPoint(new mxPoint(0, height), true);
cells[0].geometry.setTerminalPoint(new mxPoint(width, 0), false);
cells[0].edge = true; return this.createEdgeTemplateFromCells(cells, width, height);
}; /**
* Creates a drop handler for inserting the given cells.
*/
Sidebar.prototype.createEdgeTemplateFromCells = function(cells, width, height)
{
var elt = this.createItem(cells);
this.createDragSource(elt, this.createDropHandler(cells, false), this.createDragPreview(width, height)); // Installs the default edge
var graph = this.editorUi.editor.graph;
mxEvent.addListener(elt, 'click', mxUtils.bind(this, function(evt)
{
if (this.installEdges)
{
// Uses edge template for connect preview
graph.connectionHandler.createEdgeState = function(me)
{
return graph.view.createState(cells[0]);
}; // Creates new connections from edge template
graph.connectionHandler.factoryMethod = function()
{
return graph.cloneCells([cells[0]])[0];
};
} // Highlights the entry for 200ms
elt.style.backgroundColor = '#ffffff'; window.setTimeout(function()
{
elt.style.backgroundColor = '';
}, 200); mxEvent.consume(evt);
})); // Shows a tooltip with the rendered cell
if (!touchStyle)
{
mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt)
{
this.showTooltip(elt, cells);
}));
} return elt;
}; /**
* Adds the given palette.
*/
Sidebar.prototype.addPalette = function(id, title, expanded, onInit)
{
var elt = this.createTitle(title);
this.container.appendChild(elt); var div = document.createElement('div');
div.className = 'geSidebar'; if (expanded)
{
onInit(div);
onInit = null;
}
else
{
div.style.display = 'none';
} this.addFoldingHandler(elt, div, onInit); var outer = document.createElement('div');
outer.appendChild(div);
this.container.appendChild(outer); // Keeps references to the DOM nodes
if (id != null)
{
this.palettes[id] = [elt, outer];
}
}; /**
* Create the given title element.
*/
Sidebar.prototype.addFoldingHandler = function(title, content, funct)
{
var initialized = false; title.style.backgroundImage = (content.style.display == 'none') ?
'url(' + IMAGE_PATH + '/collapsed.gif)' : 'url(' + IMAGE_PATH + '/expanded.gif)';
title.style.backgroundRepeat = 'no-repeat';
title.style.backgroundPosition = '100% 50%'; mxEvent.addListener(title, 'click', function(evt)
{
if (content.style.display == 'none')
{
if (!initialized)
{
initialized = true; if (funct != null)
{
funct(content);
}
} title.style.backgroundImage = 'url(' + IMAGE_PATH + '/expanded.gif)';
content.style.display = 'block';
}
else
{
title.style.backgroundImage = 'url(' + IMAGE_PATH + '/collapsed.gif)';
content.style.display = 'none';
} mxEvent.consume(evt);
});
}; /**
* Removes the palette for the given ID.
*/
Sidebar.prototype.removePalette = function(id)
{
var elts = this.palettes[id]; if (elts != null)
{
this.palettes[id] = null; for (var i = 0; i < elts.length; i++)
{
this.container.removeChild(elts[i]);
} return true;
} return false;
}; /**
* Adds the given image palette.
*/
Sidebar.prototype.addImagePalette = function(id, title, prefix, postfix, items)
{
this.addPalette(id, title, true, mxUtils.bind(this, function(content)
{
for (var i = 0; i < items.length; i++)
{
var icon = prefix + items[i] + postfix;
content.appendChild(this.createVertexTemplate('image;image=' + icon, 80, 80, ''));
}
}));
}; /**
* Adds the given stencil palette.
*/
Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ignore, onInit, scale)
{
scale = (scale != null) ? scale : 1; this.addPalette(id, title, false, mxUtils.bind(this, function(content)
{
if (style == null)
{
style = '';
} if (onInit != null)
{
onInit.call(this, content);
} mxStencilRegistry.loadStencilSet(stencilFile, mxUtils.bind(this, function(packageName, stencilName, displayName, w, h)
{
if (ignore == null || mxUtils.indexOf(ignore, stencilName) < 0)
{
content.appendChild(this.createVertexTemplate('shape=' + packageName + stencilName.toLowerCase() + style,
Math.round(w * scale), Math.round(h * scale), ''));
}
}), true);
}));
};

Parameter variables corresponding to the configuration properties file :

Right click menu binding device , Set the line width

The documents are messy ! I'm in a hurry ~

Welcome to join in the discussion , Later development and discussion , There are still some bottlenecks to be solved ....

Demo Download address : Click to download

This article is based on A signature 2.5 The mainland China license agreement Release , Welcome to reprint , To perform or use for commercial purposes , However, the link to the original text must be clearly placed on the page of the article Dana、Li( Include links ), The specific operation mode can be referred to here . If you have any questions or negotiation on Authorization , Please leave a message or add Q Group !

be based on Web Implementation of network topology map more related articles

  1. ECharts Integrate HT&#160;for&#160;Web The application of network topology map of

    ECharts The graphics component is in 1.0 I was already paying attention to it when it was released , Today, I met the need of icon when I was working on the project , stay HT for Web There are also functions of graphic components on the , But after trying to implement it , Find out HT for Web The graphic component of is ...

  2. Build a simple model based on web Network traffic monitoring visualization system based on

    This article is reproduced in my personal blog , Reprint please indicate the source . The original Submit the student certification application in Tencent cloud n After heaven , Finally got the approval , So I can't wait to play Tencent cloud , As a network operator , Naturally, there are some gadgets about network applications , So we'll take the ones we've deployed before ...

  3. ECharts Integrate HT&amp;#160;for&amp;#160;Web The application of network topology map of

    ECharts The graphics component is in 1.0 I was already concerned when it was announced . Today, I met the need of icon when I was working on the project , stay HTfor Web There are also functions of graphic components on the . But after trying to implement it in detail , Find out HT for Web The graphic component of is based on ...

  4. be based on Web The project design and implementation of online shopping mall based on 【SSM+Bootstrap+Vue】

    [Spring+SpringMVC+MyBatis+Bootstrap+Vue] demonstration : line 1  line 2 1. System function introduction Online mall system   It's a fully functional online shopping system - , Mainly for online sales and online shopping service ...

  5. be based on HTML5 Network topology of

    In telecommunication network management system , Real time display of device status information is very important , Usually a bunch of icons will be mounted to display status or alarm information , The information content of the icon is limited , Sometimes more detailed panels are needed , Even in the form of graphs , This article will combine the needs mentioned by recent customers , Use Qunee1. ...

  6. Baidu Maps 、ECharts Integrate HT for Web Network topology application

    The previous article talked about ECharts Integrate HT for Web The application of network topology map of , Later on ECharts Of Demo See the application of related reports on air quality in , Want to Baidu map .ECharts and HT for Web A combination of the three ...

  7. ECharts+BaiduMap+HT for Web Network topology application

    The previous article talked about ECharts Integrate HT for Web The application of network topology map of , Later on ECharts Of Demo See the application of related reports on air quality in , Want to Baidu map .ECharts and HT for Web A combination of the three ...

  8. Rapid development is based on HTML5 Network topology application

    use HT Developing a network topology is very easy , for example < Introduction Manual > The first small example of sparrow is that although it is small, it has all five internal organs :http://www.hightopo.com/guide/guide/core/beginners/e ...

  9. Rapid development is based on HTML5 Network topology application 1

    From today on, we will analyze how to build HTML5 Canvas Topology map application ,HT A topology graphic component is encapsulated inside ht.graph.GraphView( hereinafter referred to as GraphView) yes HT In the frame 2D ...

Random recommendation

  1. MSSQLSERVER add to c# clr How to use assemblies

    Preface MSSQLSERVER Provider assembly , Undoubtedly, it can make programmers more convenient to operate database data , such as c# Write the function , It can be used in the database as sql The function uses , Think about how good he is for programmers who are not familiar with databases . Such a good mechanism , Big ...

  2. ASP.NET DAY1

    <!-- AutoEventWireup,CodeBehind,Inherits And so on , Language Property is required --> <%@ Page Language=" ...

  3. 2014 Jiajie information Cup ACM/ICPC Hunan Program Design Invitational Competition and the 6th Xiangtan program design competition

    Match Links : http://202.197.224.59/OnlineJudge2/index.php/Contest/problems/contest_id/36 Title source : 2014 Jiajie information Cup ACM ...

  4. JS Realize the dynamic prompt text box to input the number of remaining words ( It's similar to posting digital tips on Weibo )

    One . Realization effect : In order to reflect more intuitively, users can see how many words they input when they input text in the text box , In the project, you need to judge the number of words left in the prompt text box . html & JS: <div> <textare ...

  5. python(26) View file size

    occasionally , When writing a file, you need to judge the size of the file , Or delete the empty file import os from os.path import join, getsize def getdirsize(dir): size ...

  6. Worker、Task、Executor The relationship between the three

  7. be based on visual Studio2013 solve C One of the questions in the language contest 1017 frequency

         subject Solution code and comments /* function : Someone said it was 400, 401, 402, ...499 Of these numbers 4 This number appears together 112 Time , Please program to determine this Is that correct . If correct, please print out 'YE ...

  8. tuple Array 、 File operations

    halcon Self case study . Tuple1 := [,,,,] // Array Number := |Tuple1| // Element number SingleElement := Tuple1[] Part := Tup ...

  9. github Remote branches , Problems not seen locally

    reason :Git  branch -a Looking at all branches of the local warehouse   Remote New without synchronization Just can't see solve :$git checkout master   // First cut to master Branch $git pull ...

  10. I - Cows

    source poj 3348 Your friend to the south is interested in building fences and turning plowshares into sw ...