js画图开发库--mxgraph--[groups-组.html]
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>组</title><!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 --><script type="text/javascript">mxBasePath = '../src';</script><!-- 引入支持库文件 --><script type="text/javascript" src="../src/js/mxClient.js"></script><!-- 示例代码 --><script type="text/javascript">//覆写检查是否根节点mxGraph.prototype.isValidRoot = function(){return false;};// 如果选择多个单元格， 不清除选择var graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;mxGraphHandler.prototype.mouseDown = function(sender, me){graphHandlerMouseDown.apply(this, arguments);if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1){this.delayedSelection = false;}};// 覆写元素初始化事件var graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;mxGraphHandler.prototype.getInitialCellForEvent = function(me){var model = this.graph.getModel();var psel = model.getParent(this.graph.getSelectionCell());var cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);var parent = model.getParent(cell);if (psel == null || (psel != cell && psel != parent)){while (!this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) &&model.isVertex(parent) && !this.graph.isValidRoot(parent)){cell = parent;parent = this.graph.getModel().getParent(cell);}}return cell;};// 鼠标延迟选择子元素var graphHandlerIsDelayedSelection = mxGraphHandler.prototype.isDelayedSelection;mxGraphHandler.prototype.isDelayedSelection = function(cell){var result = graphHandlerIsDelayedSelection.apply(this, arguments);var model = this.graph.getModel();var psel = model.getParent(this.graph.getSelectionCell());var parent = model.getParent(cell);if (psel == null || (psel != cell && psel != parent)){if (!this.graph.isCellSelected(cell) && model.isVertex(parent) && !this.graph.isValidRoot(parent)){result = true;}}return result;};// 元素组延迟选择mxGraphHandler.prototype.selectDelayed = function(me){var cell = me.getCell();if (cell == null){cell = this.cell;}var model = this.graph.getModel();var parent = model.getParent(cell);while (this.graph.isCellSelected(cell) && model.isVertex(parent) && !this.graph.isValidRoot(parent)){cell = parent;parent = model.getParent(cell);}this.graph.selectCellForEvent(cell, me.getEvent());};// 返回最后选定的父节点mxPanningHandler.prototype.getCellForPopupEvent = function(me){var cell = me.getCell();var model = this.graph.getModel();var parent = model.getParent(cell);while (model.isVertex(parent) && !this.graph.isValidRoot(parent)){if (this.graph.isCellSelected(parent)){cell = parent;}parent = model.getParent(parent);}return cell;};// 程序在此启动function main(container){// 浏览器兼容性检测if (!mxClient.isBrowserSupported()){mxUtils.error('Browser is not supported!', 200, false);}else{// 去锯齿效果mxRectangleShape.prototype.crisp = true;// 在容器中创建图形var graph = new mxGraph(container);graph.constrainChildren = false;graph.extendParents = false;graph.extendParentsOnAdd = false;// 可选择画布自适应//graph.setResizeContainer(true);// 启用浏览器默认右键下拉列表new mxRubberband(graph);// 创建默认窗体var parent = graph.getDefaultParent();// 开启更新事务graph.getModel().beginUpdate();try{var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);var v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);}finally{// 结束更新事务graph.getModel().endUpdate();}}};</script></head><!-- 页面载入时启动程序 --><body onload="main(document.getElementById('graphContainer'))"><!-- 创建带网格壁纸和曲线的一个容器 --><div id="graphContainer"style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;"></div></body></html>
?
?
