js画图开发库--mxgraph--[schema-结构定义.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"> // 程序在此方法中启动 function main(container, outline, toolbar, sidebar, status) { // 检查浏览器支持 if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported!', 200, false); } else { // 指定透明度,颜色和偏移 mxConstants.SHADOW_OPACITY = 0.5; mxConstants.SHADOWCOLOR = '#C0C0C0'; mxConstants.SHADOW_OFFSET_X = 5; mxConstants.SHADOW_OFFSET_Y = 6; // 表的尺寸和位置 mxSwimlane.prototype.imageSize = 20; mxSwimlane.prototype.imageDx = 16; mxSwimlane.prototype.imageDy = 4; // 泳道背景为白色 mxSwimlaneCreateSvg = mxSwimlane.prototype.createSvg; mxSwimlane.prototype.createSvg = function() { var node = mxSwimlaneCreateSvg.apply(this, arguments); this.content.setAttribute('fill', '#FFFFFF'); return node; }; // 阴影效果 mxSwimlaneReconfigure = mxSwimlane.prototype.reconfigure; mxSwimlane.prototype.reconfigure = function(node) { mxSwimlaneReconfigure.apply(this, arguments); if (this.dialect == mxConstants.DIALECT_SVG && this.shadowNode != null) { this.shadowNode.setAttribute('height', this.bounds.height); } }; // 重绘图标位置 mxSwimlaneRedrawSvg = mxSwimlane.prototype.redrawSvg; mxSwimlane.prototype.redrawSvg = function() { mxSwimlaneRedrawSvg.apply(this, arguments); // 阴影 if (this.dialect == mxConstants.DIALECT_SVG && this.shadowNode != null) { this.shadowNode.setAttribute('height', this.bounds.height); } // 表图标位置 if (this.imageNode != null) { this.imageNode.setAttribute('x', this.bounds.x + this.imageDx * this.scale); this.imageNode.setAttribute('y', this.bounds.y + this.imageDy * this.scale); } }; // 在VML中显示表图标的位置 mxSwimlaneRedrawVml = mxSwimlane.prototype.redrawVml; mxSwimlane.prototype.redrawVml = function() { mxSwimlaneRedrawVml.apply(this, arguments); // 表图标的位置 if (this.imageNode != null) { this.imageNode.style.left = Math.floor(this.imageDx * this.scale) + 'px'; this.imageNode.style.top = Math.floor(this.imageDy * this.scale) + 'px'; } }; // 自定义阴影效果 mxSwimlaneCreateVml = mxSwimlane.prototype.createVml; mxSwimlane.prototype.createVml = function() { this.isShadow = false; var node = mxSwimlaneCreateVml.apply(this, arguments); this.shadowNode = document.createElement('v:rect'); // 指定阴影的位置和大小 this.shadowNode.style.left = mxConstants.SHADOW_OFFSET_X + 'px'; this.shadowNode.style.top = mxConstants.SHADOW_OFFSET_Y + 'px'; this.shadowNode.style.width = '100%' this.shadowNode.style.height = '100%' // 阴影填充颜色 var fillNode = document.createElement('v:fill'); this.updateVmlFill(fillNode, mxConstants.SHADOWCOLOR, null, null, mxConstants.SHADOW_OPACITY * 100); this.shadowNode.appendChild(fillNode); // 阴影颜色的深度 this.shadowNode.setAttribute('strokecolor', mxConstants.SHADOWCOLOR); this.shadowNode.setAttribute('strokeweight', (this.strokewidth * this.scale) + 'px'); // 透明度 var strokeNode = document.createElement('v:stroke'); strokeNode.setAttribute('opacity', (mxConstants.SHADOW_OPACITY * 100) + '%'); this.shadowNode.appendChild(strokeNode); node.insertBefore(this.shadowNode, node.firstChild); // 泳道背景颜色 this.content.setAttribute('fillcolor', 'white'); this.content.setAttribute('filled', 'true'); // 内容区透明度 if (this.opacity != null) { var contentFillNode = document.createElement('v:fill'); contentFillNode.setAttribute('opacity', this.opacity + '%'); this.content.appendChild(contentFillNode); } return node; }; // 定义新的连接的图标。这将自动禁用高亮显示的元素。 mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16); // 读取字段中出现的图像 var keyImage = new Image(); keyImage.src = "images/key.png"; var plusImage = new Image(); plusImage.src = "images/plus.png"; var checkImage = new Image(); checkImage.src = "images/check.png"; // IE浏览器添加样式 if (mxClient.IS_QUIRKS) { document.body.style.overflow = 'hidden'; new mxDivResizer(container); new mxDivResizer(outline); new mxDivResizer(toolbar); new mxDivResizer(sidebar); new mxDivResizer(status); } // 创建编辑器 var editor = new mxEditor(); var graph = editor.graph; var model = graph.model; // 禁用一些全局变量 graph.setConnectable(true); graph.setCellsDisconnectable(false); graph.setCellsCloneable(false); graph.swimlaneNesting = false; graph.dropEnabled = true; // 不允许连接线晃动 graph.setAllowDanglingEdges(true); // 使用默认连接处理程序 graph.connectionHandler.factoryMethod = null; // 表只能调整大小 graph.isCellResizable = function(cell) { return this.isSwimlane(cell); }; // 表只能移动 graph.isCellMovable = function(cell) { return this.isSwimlane(cell); }; // 设置图形容器,并配置编辑器 editor.setGraphContainer(container); var config = mxUtils.load( 'editors/config/keyhandler-minimal.xml'). getDocumentElement(); editor.configure(config); // 配置表列自动布局 editor.layoutSwimlanes = true; editor.createSwimlaneLayout = function () { var layout = new mxStackLayout(this.graph, false); layout.fill = true; layout.resizeParent = true; // 覆盖函数永远返回 true layout.isVertexMovable = function(cell) { return true; }; return layout; }; // 对象创建将显示文本提示标签 graph.model.valueForCellChanged = function(cell, value) { if (value.name != null) { return mxGraphModel.prototype.valueForCellChanged.apply(this, arguments); } else { var old = cell.value.name; cell.value.name = value; return old; } }; // 表列是动态创建的 graph.isHtmlLabel = function(cell) { return !this.isSwimlane(cell) && !this.model.isEdge(cell); }; // 连接线不可编辑 graph.isCellEditable = function(cell) { return !this.model.isEdge(cell); }; // 返回元素的名称 graph.convertValueToString = function(cell) { if (cell.value != null && cell.value.name != null) { return cell.value.name; } return mxGraph.prototype.convertValueToString.apply(this, arguments); // "supercall" }; // 返回元素类型 graph.getTooltip = function(state) { if (this.isHtmlLabel(state.cell)) { return 'Type: '+state.cell.value.type; } else if (this.model.isEdge(state.cell)) { var source = this.model.getTerminal(state.cell, true); var parent = this.model.getParent(source); return parent.value.name+'.'+source.value.name; } return mxGraph.prototype.getTooltip.apply(this, arguments); // "supercall" }; // 动态创建标签 graph.getLabel = function(cell) { if (this.isHtmlLabel(cell)) { var label = ''; if (cell.value.primaryKey) { label += '<img title="Primary Key" src="images/key.png" width="16" height="16" align="top"> '; } else { label += '<img src="images/spacer.gif" width="16" height="1"> '; } if (cell.value.autoIncrement) { label += '<img title="Auto Increment" src="images/plus.png" width="16" height="16" align="top"> '; } else if (cell.value.unique) { label += '<img title="Unique" src="images/check.png" width="16" height="16" align="top"> '; } else { label += '<img src="images/spacer.gif" width="16" height="1"> '; } return label + mxUtils.htmlEntities(cell.value.name, false) + ': ' + mxUtils.htmlEntities(cell.value.type, false); } return mxGraph.prototype.getLabel.apply(this, arguments); // "supercall" }; // 如果连接线被删除,删除顶点元素 graph.addListener(mxEvent.REMOVE_CELLS, function(sender, evt) { var cells = evt.getProperty('cells'); for (var i = 0; i < cells.length; i++) { var cell = cells[i]; if (this.model.isEdge(cell)) { var terminal = this.model.getTerminal(cell, true); var parent = this.model.getParent(terminal); this.model.remove(terminal); } } }); // 禁用拖动 graph.isValidDropTarget = function(cell, cells, evt) { return this.isSwimlane(cell); }; // 添加一个下拉菜单 graph.panningHandler.factoryMethod = function(menu, cell, evt) { createPopupMenu(editor, graph, menu, cell, evt); }; // 添加所有样式 configureStylesheet(graph); // 添加表对象的侧边栏图标 var tableObject = new Table('TABLENAME'); var table = new mxCell(tableObject, new mxGeometry(0, 0, 200, 28), 'table'); table.setVertex(true); addSidebarIcon(graph, sidebar, table, 'images/icons48/table.png'); // 添加表对象的侧边栏图标 var columnObject = new Column('COLUMNNAME'); var column = new mxCell(columnObject, new mxGeometry(0, 0, 0, 26)); column.setVertex(true); column.setConnectable(false); addSidebarIcon(graph, sidebar, column, 'images/icons48/column.png'); // 添加主键字段 var firstColumn = column.clone(); firstColumn.value.name = 'TABLENAME_ID'; firstColumn.value.type = 'INTEGER'; firstColumn.value.primaryKey = true; firstColumn.value.autoIncrement = true; table.insert(firstColumn); // 添加子列的新表与表之间的连接 graph.addEdge = function(edge, parent, source, target, index) { // Finds the primary key child of the target table var primaryKey = null; var childCount = this.model.getChildCount(target); for (var i=0; i < childCount; i++) { var child = this.model.getChildAt(target, i); if (child.value.primaryKey) { primaryKey = child; break; } } if (primaryKey == null) { mxUtils.alert('Target table must have a primary key'); return; } this.model.beginUpdate(); try { var col1 = this.model.cloneCell(column); col1.value.name = primaryKey.value.name; col1.value.type = primaryKey.value.type; this.addCell(col1, source); source = col1; target = primaryKey; return mxGraph.prototype.addEdge.apply(this, arguments); // "supercall" } finally { this.model.endUpdate(); } return null; }; // 在一个半透明的小框显示提示。 var hints = document.createElement('div'); hints.style.position = 'absolute'; hints.style.overflow = 'hidden'; hints.style.width = '230px'; hints.style.bottom = '56px'; hints.style.height = '86px'; hints.style.right = '20px'; hints.style.background = 'black'; hints.style.color = 'white'; hints.style.fontFamily = 'Arial'; hints.style.fontSize = '10px'; hints.style.padding = '4px'; mxUtils.setOpacity(hints, 50); mxUtils.writeln(hints, '- Drag an image from the sidebar to the graph'); mxUtils.writeln(hints, '- Doubleclick on a table or column to edit'); mxUtils.writeln(hints, '- Shift- or Rightclick and drag for panning'); mxUtils.writeln(hints, '- Move the mouse over a cell to see a tooltip'); mxUtils.writeln(hints, '- Click and drag a table to move and connect'); mxUtils.writeln(hints, '- Shift- or Rightclick to show a popup menu'); document.body.appendChild(hints); // 创建工具栏并添加工具按钮 var spacer = document.createElement('div'); spacer.style.display = 'inline'; spacer.style.padding = '8px'; addToolbarButton(editor, toolbar, 'properties', 'Properties', 'editors/images/properties.gif'); // 定义新的导出动作 editor.addAction('properties', function(editor, cell) { if (cell == null) { cell = graph.getSelectionCell(); } if (graph.isHtmlLabel(cell)) { showProperties(graph, cell); } }); addToolbarButton(editor, toolbar, 'delete', 'Delete', 'images/delete2.png'); toolbar.appendChild(spacer.cloneNode(true)); addToolbarButton(editor, toolbar, 'undo', '', 'images/undo.png'); addToolbarButton(editor, toolbar, 'redo', '', 'images/redo.png'); toolbar.appendChild(spacer.cloneNode(true)); addToolbarButton(editor, toolbar, 'show', 'Show', 'images/camera.png'); addToolbarButton(editor, toolbar, 'print', 'Print', 'images/printer.png'); toolbar.appendChild(spacer.cloneNode(true)); // 定义导出SQL 动作 editor.addAction('showSql', function(editor, cell) { var sql = createSql(graph); if (sql.length > 0) { var textarea = document.createElement('textarea'); textarea.style.width = '400px'; textarea.style.height = '400px'; textarea.value = sql; showModalWindow('SQL', textarea, 410, 440); } else { mxUtils.alert('Schema is empty'); } }); // 定义导出动作 editor.addAction('createGears', function(editor, cell) { var sql = createSql(graph); if (sql.length > 0) { loadGoogleGears(); try { var db = google.gears.factory.create('beta.database', '1.0'); var name = mxUtils.prompt('Enter name of new database', 'MyDatabase'); if (name != null) { db.open(name); // Checks if database is empty var rs = db.execute('SELECT * FROM sqlite_master'); if (rs.isValidRow()) { if (mxUtils.confirm(name+' exists. Do you want to continue? This will replace existing tables.') == 0) { return; } } try { db.execute(sql); mxUtils.alert(name+' successfully created'); } catch (e) { mxUtils.alert('SQL Error: '+e.message); } } } catch (e) { mxUtils.alert('Google Gears is not available: '+e.message); } } else { mxUtils.alert('Schema is empty'); } }); addToolbarButton(editor, toolbar, 'showSql', 'Show SQL', 'images/export1.png'); addToolbarButton(editor, toolbar, 'createGears', 'Create in Google Gears', 'images/export1.png'); toolbar.appendChild(spacer.cloneNode(true)); // Defines export XML action editor.addAction('export', function(editor, cell) { var textarea = document.createElement('textarea'); textarea.style.width = '400px'; textarea.style.height = '400px'; var enc = new mxCodec(mxUtils.createXmlDocument()); var node = enc.encode(editor.graph.getModel()); textarea.value = mxUtils.getPrettyXml(node); showModalWindow('XML', textarea, 410, 440); }); addToolbarButton(editor, toolbar, 'export', 'Export XML', 'images/export1.png'); // 在底部的状态栏添加工具栏按钮 addToolbarButton(editor, status, 'collapseAll', 'Collapse All', 'images/navigate_minus.png', true); addToolbarButton(editor, status, 'expandAll', 'Expand All', 'images/navigate_plus.png', true); status.appendChild(spacer.cloneNode(true)); addToolbarButton(editor, status, 'zoomIn', '', 'images/zoom_in.png', true); addToolbarButton(editor, status, 'zoomOut', '', 'images/zoom_out.png', true); addToolbarButton(editor, status, 'actualSize', '', 'images/view_1_1.png', true); addToolbarButton(editor, status, 'fit', '', 'images/fit_to_size.png', true); // 创建提示 var outln = new mxOutline(graph, outline); // Fades-out the splash screen after the UI has been loaded. var splash = document.getElementById('splash'); if (splash != null) { try { mxEvent.release(splash); mxEffects.fadeOut(splash, 100, true); } catch (e) { // mxUtils is not available (library not loaded) splash.parentNode.removeChild(splash); } } } } function addToolbarButton(editor, toolbar, action, label, image, isTransparent) { var button = document.createElement('button'); button.style.fontSize = '10'; if (image != null) { var img = document.createElement('img'); img.setAttribute('src', image); img.style.width = '16px'; img.style.height = '16px'; img.style.verticalAlign = 'middle'; img.style.marginRight = '2px'; button.appendChild(img); } if (isTransparent) { button.style.background = 'transparent'; button.style.color = '#FFFFFF'; button.style.border = 'none'; } mxEvent.addListener(button, 'click', function(evt) { editor.execute(action); }); mxUtils.write(button, label); toolbar.appendChild(button); }; function showModalWindow(title, content, width, height) { var background = document.createElement('div'); background.style.position = 'absolute'; background.style.left = '0px'; background.style.top = '0px'; background.style.right = '0px'; background.style.bottom = '0px'; background.style.background = 'black'; mxUtils.setOpacity(background, 50); document.body.appendChild(background); if (mxClient.IS_QUIRKS) { new mxDivResizer(background); } var x = Math.max(0, document.body.scrollWidth/2-width/2); var y = Math.max(10, (document.body.scrollHeight || document.documentElement.scrollHeight)/2-height*2/3); var wnd = new mxWindow(title, content, x, y, width, height, false, true); wnd.setClosable(true); // Fades the background out after after the window has been closed wnd.addListener(mxEvent.DESTROY, function(evt) { mxEffects.fadeOut(background, 50, true, 10, 30, true); }); wnd.setVisible(true); return wnd; }; function addSidebarIcon(graph, sidebar, prototype, image) { // Function that is executed when the image is dropped on // the graph. The cell argument points to the cell under // the mousepointer if there is one. var funct = function(graph, evt, cell) { graph.stopEditing(false); var pt = graph.getPointForEvent(evt); var parent = graph.getDefaultParent(); var model = graph.getModel(); var isTable = graph.isSwimlane(prototype); var name = null; if (!isTable) { var offset = mxUtils.getOffset(graph.container); parent = graph.getSwimlaneAt(evt.clientX-offset.x, evt.clientY-offset.y); var pstate = graph.getView().getState(parent); if (parent == null || pstate == null) { mxUtils.alert('Drop target must be a table'); return; } pt.x -= pstate.x; pt.y -= pstate.y; var columnCount = graph.model.getChildCount(parent)+1; name = mxUtils.prompt('Enter name for new column', 'COLUMN'+columnCount); } else { var tableCount = 0; var childCount = graph.model.getChildCount(parent); for (var i=0; i<childCount; i++) { if (!graph.model.isEdge(graph.model.getChildAt(parent, i))) { tableCount++; } } graph.model.getChildCount(parent)+1; var name = mxUtils.prompt('Enter name for new table', 'TABLE'+(tableCount+1)); } if (name != null) { var v1 = model.cloneCell(prototype); model.beginUpdate(); try { v1.value.name = name; v1.geometry.x = pt.x; v1.geometry.y = pt.y; graph.addCell(v1, parent); if (isTable) { v1.geometry.alternateBounds = new mxRectangle(0, 0, v1.geometry.width, v1.geometry.height); v1.children[0].value.name = name + '_ID'; } } finally { model.endUpdate(); } graph.setSelectionCell(v1); } } // 创建拖动源图标 var img = document.createElement('img'); img.setAttribute('src', image); img.style.width = '48px'; img.style.height = '48px'; img.title = 'Drag this to the diagram to create a new vertex'; sidebar.appendChild(img); // 创建拖动源预览图标 var dragImage = img.cloneNode(true); var ds = mxUtils.makeDraggable(img, graph, funct, dragImage); // 高亮效果 ds.highlightDropTargets = true; ds.getDropTarget = function(graph, x, y) { if (graph.isSwimlane(prototype)) { return null; } else { var cell = graph.getCellAt(x, y); if (graph.isSwimlane(cell)) { return cell; } else { var parent = graph.getModel().getParent(cell); if (graph.isSwimlane(parent)) { return parent; } } } }; }; function configureStylesheet(graph) { var style = new Object(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style[mxConstants.STYLE_FONTSIZE] = '11'; style[mxConstants.STYLE_FONTSTYLE] = 0; style[mxConstants.STYLE_SPACING_LEFT] = '4'; style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; graph.getStylesheet().putDefaultVertexStyle(style); style = new Object(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5'; style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style[mxConstants.STYLE_STROKEWIDTH] = '2'; style[mxConstants.STYLE_STARTSIZE] = '28'; style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; style[mxConstants.STYLE_FONTSIZE] = '12'; style[mxConstants.STYLE_FONTSTYLE] = 1; style[mxConstants.STYLE_IMAGE] = 'images/icons48/table.png'; // 如果启用了阴影 //style[mxConstants.STYLE_OPACITY] = '80'; style[mxConstants.STYLE_SHADOW] = 1; graph.getStylesheet().putCellStyle('table', style); style = graph.stylesheet.getDefaultEdgeStyle(); style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'; style[mxConstants.STYLE_STROKEWIDTH] = '2'; style[mxConstants.STYLE_ROUNDED] = true; style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; }; // 创建下拉菜单 function createPopupMenu(editor, graph, menu, cell, evt) { if (cell != null) { if (graph.isHtmlLabel(cell)) { menu.addItem('Properties', 'editors/images/properties.gif', function() { editor.execute('properties', cell); }); menu.addSeparator(); } menu.addItem('Delete', 'images/delete2.png', function() { editor.execute('delete', cell); }); menu.addSeparator(); } menu.addItem('Undo', 'images/undo.png', function() { editor.execute('undo', cell); }); menu.addItem('Redo', 'images/redo.png', function() { editor.execute('redo', cell); }); menu.addSeparator(); menu.addItem('Show SQL', 'images/export1.png', function() { editor.execute('showSql', cell); }); }; // 显示属性栏 function showProperties(graph, cell) { // Creates a form for the user object inside // the cell var form = new mxForm('properties'); // Adds a field for the columnname var nameField = form.addText('Name', cell.value.name); var typeField = form.addText('Type', cell.value.type); var primaryKeyField = form.addCheckbox('Primary Key', cell.value.primaryKey); var autoIncrementField = form.addCheckbox('Auto Increment', cell.value.autoIncrement); var notNullField = form.addCheckbox('Not Null', cell.value.notNull); var uniqueField = form.addCheckbox('Unique', cell.value.unique); var defaultField = form.addText('Default', cell.value.defaultValue || ''); var useDefaultField = form.addCheckbox('Use Default', (cell.value.defaultValue != null)); var wnd = null; // 定义下一步按钮 var okFunction = function() { var clone = cell.value.clone(); clone.name = nameField.value; clone.type = typeField.value; if (useDefaultField.checked) { clone.defaultValue = defaultField.value; } else { clone.defaultValue = null; } clone.primaryKey = primaryKeyField.checked; clone.autoIncrement = autoIncrementField.checked; clone.notNull = notNullField.checked; clone.unique = uniqueField.checked; graph.model.setValue(cell, clone); wnd.destroy(); } // 定义上一步按钮 var cancelFunction = function() { wnd.destroy(); } form.addButtons(okFunction, cancelFunction); var parent = graph.model.getParent(cell); var name = parent.value.name + '.' + cell.value.name; wnd = showModalWindow(name, form.table, 240, 240); }; function createSql(graph) { var sql = []; var parent = graph.getDefaultParent(); var childCount = graph.model.getChildCount(parent); for (var i=0; i<childCount; i++) { var child = graph.model.getChildAt(parent, i); if (!graph.model.isEdge(child)) { sql.push('CREATE TABLE IF NOT EXISTS '+child.value.name+' ('); var columnCount = graph.model.getChildCount(child); if (columnCount > 0) { for (var j=0; j<columnCount; j++) { var column = graph.model.getChildAt(child, j).value; sql.push('\n '+column.name+' '+column.type); if (column.notNull) { sql.push(' NOT NULL'); } if (column.primaryKey) { sql.push(' PRIMARY KEY'); } if (column.autoIncrement) { sql.push(' AUTOINCREMENT'); } if (column.unique) { sql.push(' UNIQUE'); } if (column.defaultValue != null) { sql.push(' DEFAULT '+column.defaultValue); } sql.push(','); } sql.splice(sql.length-1, 1); sql.push('\n);'); } sql.push('\n'); } } return sql.join(''); }; //加载google配置 function loadGoogleGears() { // We are already defined. Hooray! if (window.google && google.gears) { return; } var factory = null; // Firefox if (typeof GearsFactory != 'undefined') { factory = new GearsFactory(); } else { // IE try { factory = new ActiveXObject('Gears.Factory'); } catch (e) { // Safari if (navigator.mimeTypes["application/x-googlegears"]) { factory = document.createElement("object"); factory.style.display = "none"; factory.width = 0; factory.height = 0; factory.type = "application/x-googlegears"; document.documentElement.appendChild(factory); } } } // *Do not* define any objects if Gears is not installed. This mimics the // behavior of Gears defining the objects in the future. if (!factory) { return; } // Now set up the objects, being careful not to overwrite anything. if (!window.google) { window.google = {}; } if (!google.gears) { google.gears = {factory: factory}; } }; // 定义字段 function Column(name) { this.name = name; }; Column.prototype.type = 'TEXT'; Column.prototype.defaultValue = null; Column.prototype.primaryKey = false; Column.prototype.autoIncrement = false; Column.prototype.notNull = false; Column.prototype.unique = false; Column.prototype.clone = function() { return mxUtils.clone(this); }; // 定义表 function Table(name) { this.name = name; }; Table.prototype.clone = function() { return mxUtils.clone(this); }; </script> </head> <!-- 页面载入时启动程序 --> <body onload="main(document.getElementById('graphContainer'), document.getElementById('outlineContainer'), document.getElementById('toolbarContainer'), document.getElementById('sidebarContainer'), document.getElementById('statusContainer'));"> <!-- 创建容器的启动画面 --> <div id="splash" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;"> <center id="splash" style="padding-top:230px;"> <img src="editors/images/loading.gif"> </center> </div> <!-- 创建容器侧边栏 --> <div id="toolbarContainer" style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');"> </div> <!-- 创建容器的工具箱 --> <div id="sidebarContainer" style="position:absolute;overflow:hidden;top:36px;left:0px;bottom:36px;max-width:52px;width:56px;padding-top:10px;padding-left:4px;background-image:url('images/sidebar_bg.gif');"> </div> <!-- 创建图形容器--> <div id="graphContainer" style="position:absolute;overflow:hidden;top:36px;left:60px;bottom:36px;right:0px;"> </div> <!-- 创建导航框--> <div id="outlineContainer" style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;"> </div> <!-- 创建容器侧边栏 --> <div id="statusContainer" style="text-align:right;position:absolute;overflow:hidden;bottom:0px;left:0px;max-height:24px;height:36px;right:0px;color:white;padding:6px;background-image:url('images/toolbar_bg.gif');"> <div style="font-size:10pt;float:left;"> Created with <a href="http://www.jgraph.com" target="_blank">mxGraph</a> </div> </div> </body> </html>
相关推荐
MXGRAPH通常指的是一个开源的JavaScript图形库,用于创建可交互的图表和流程图,但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息,我可以提供如下内容: MXGRAPH是一个强大的图形编辑框架,主要用于创建富...
1. **引入库文件**:在HTML页面中引入`mxgraph.js`或其压缩版本,以及相关的CSS样式文件。 2. **初始化图形实例**:创建`mxGraph`实例,设置绘图区域和模型。 3. **添加图形元素**:通过API添加图形节点和连接线,...
十分强大的js绘图工具,适用于设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。这是破解过的源js库。
**JS画图框架——mxGraph 入门指南** 在网页应用中,图形界面设计和交互已经成为不可或缺的一部分。JavaScript,作为最广泛使用的客户端脚本语言,自然也提供了多种库和框架来实现这一目标。其中,mxGraph 是一个...
- 需要引入`mxClient.js`文件,它是mxGraph的主要JavaScript库文件,定义了核心的图表功能。 4. **JavaScript API使用** - `main`函数是mxGraph的入口点,负责初始化和运行图形界面。 - 使用`mxGraphModel`来...
mxgraph.js中文文档是一个官方的api,翻译来源于sunflower(github: https://github.com/SunInfoFE),提供给更多的开发者参考和共享源码资源!
mxGraph是一款强大的JavaScript图形库,主要用于创建交互式图表和图形应用程序。它提供了丰富的API和功能,使得开发者能够轻松地在Web浏览器中构建复杂的图形编辑器和流程图工具。这款库以其灵活性、性能和易用性...
mxGraph是一款强大的JavaScript库,专为在Web应用中创建交互式和可编辑的图形界面而设计,特别是用于绘制流程图、组织结构图、网络拓扑图等。它以其丰富的功能集、灵活性和高性能而在IT领域受到广泛欢迎。下面将详细...
**mxgraph Editor** 是一款基于JavaScript的开源图形编辑器,专为绘制流程图、工作流、拓扑图等图表设计。它使用了mxGraph库,一个功能强大的图形渲染和操作库,提供了丰富的图形编辑功能。 **mxGraph核心概念:** ...
mxGraph是一个功能强大的JavaScript库,用于创建可交互的图形编辑器,支持绘制流程图、网络拓扑图等各种图表。 首先,让我们深入了解Vue.js的核心概念。Vue采用组件化的开发方式,将UI拆分为可复用的模块,每个模块...
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...
2. **文件结构**:压缩包中的`jgraph-drawio-e6d99f2`目录包含了源码的各个模块,例如`src/js`存放JavaScript代码,`src/css`存储样式文件,`src/images`包含各种图形资源,`src/json`保存预设的图形模板。...
mxgraph-svg2shape 一套将SVG文件转换为mxGraph资源的工具。 该存储库基于: SVG to XML mxGraph stencil definition translation tool. ... 添加 :将XML mxGraph模具定义转换为一组相应JavaScript /
mxGraph 是一个强大的 JavaScript 图形库,它允许开发者在 Web 浏览器中创建和编辑图形界面。这个名为 "mxgraph-demo-源码" 的压缩包包含了 mxGraph 的示例源代码,为我们提供了一个深入理解 mxGraph 功能和实现原理...
mxGraph是一个功能强大的JavaScript图形库,主要用于创建交互式图表、流程图、网络拓扑图等。其最新版本1_10_4_0提供了丰富的功能,不仅包括源代码,还附带了详尽的文档和示例,方便开发者快速理解和应用。 一、...
带Webpack的typed-mxgraph演示 来自Webpack Typescript入门 如何使用 在本地克隆项目 git clone https://github.com/typed-mxgraph/typed-mxgraph-demo.git 切换到项目目录 cd typed-mxgraph-demo 确保使用节点10...
mxGraph是一款强大的JavaScript图形库,主要用于创建交互式和可自定义的图表、流程图和模型。这个开源项目,"huiger123-mxgraph-master.zip",包含了mxGraph的源代码,允许开发者深入理解其内部工作原理并进行扩展。...
首先,mxgraph.js是mxGraph库的主要JavaScript实现,它提供了丰富的图形绘制和编辑功能。该库支持SVG、VML和Canvas等多种渲染方式,确保在各种浏览器上都能获得良好的兼容性。mxGraph的核心组件包括模型(Model)、...
mxGraph是一款强大的JavaScript图形库,用于创建交互式图表和图编辑器。它允许开发者在Web浏览器中绘制复杂的图形,如流程图、网络拓扑图、UML模型等。这个压缩包包含了mxGraph的两个不同版本的文档:mxGraph 1.10 ...
mxGraph是一款强大的JavaScript图形库,用于在Web应用中创建交互式和可自定义的图表、流程图和其他图形。它提供了一种直观的方式来处理图形编辑,包括拖放功能、形状库和丰富的API。在这个场景中,我们需要利用...