Skip to content

Commit

Permalink
'优化mxgraph导入方式'
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason-chen-coder committed Aug 31, 2021
1 parent 59c9bc5 commit 0f05687
Show file tree
Hide file tree
Showing 6 changed files with 373 additions and 202 deletions.
78 changes: 66 additions & 12 deletions src/graph/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,66 @@
import mx from 'mxgraph'
const mxgraph = mx({})
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph
window.mxGraphModel = mxgraph.mxGraphModel
window.mxEditor = mxgraph.mxEditor
window.mxGeometry = mxgraph.mxGeometry
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu
window.mxStylesheet = mxgraph.mxStylesheet
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar
export default mxgraph
/*
* @Descripttion:
* @version:
* @Author: Jason chen
* @Date: 2020-07-09 17:04:43
* @LastEditors: Jason chen
* @LastEditTime: 2021-08-31 11:14:26
*/
const mx = require('mxgraph')

const mxgraph = mx({
// 核心中所有图像url的Basepath,不带斜杠。在mxClient.imageBasePath中指定路径.
mxImageBasePath: 'mxgraph/images',
// 核心中的所有url的Basepath,不带斜杠。在mxClient.basePath中指定路径。
// 指向的路径一定要是一个可以通过 url 访问的静态资源目录
mxBasePath: 'mxgraph',
// 可选的全局配置变量。切换加载mxGraph和mxEditor中的两个资源文件。
// 默认值是true。在主线程警告上禁用同步XMLHttpRequest
mxLoadResources: true
// 指定是否应加载任何样式表。 默认值是true。
// mxLoadStylesheets: false,
// 可选的全局配置变量,在开发模式下强制加载JavaScript文件。
// mxForceIncludes: true,
// 可选的全局配置变量来指定资源文件的扩展名。
// mxResourceExtension: '.txt'
})

const MxCell = mxgraph.mxCell
const MxConstants = mxgraph.mxConstants
const MxEvent = mxgraph.mxEvent
const MxGraph = mxgraph.mxGraph

const MxRubberBand = mxgraph.mxRubberband

const MxUtils = mxgraph.mxUtils
const MxCodec = mxgraph.mxCodec
const MxGeometry = mxgraph.mxGeometry
const MxEditor = mxgraph.mxEditor
const MxGraphHandler = mxgraph.mxGraphHandler
const MxRectangleShape = mxgraph.mxRectangleShape
const MxCellTracker = mxgraph.mxCellTracker
const MxClient = mxgraph.mxClient
const MxPerimeter = mxgraph.mxPerimeter
const MxEventObject = mxgraph.mxEventObject
const ActiveXObject = mxgraph.activeXObject


MxRubberBand.prototype.defaultOpacity = 30

export {
MxEvent,
MxGraph,
MxEditor,
MxUtils,
MxGraphHandler,
MxConstants,
MxCodec,
MxRectangleShape,
MxCellTracker,
MxClient,
MxPerimeter,
MxEventObject,
MxGeometry,
MxCell,
ActiveXObject
}
32 changes: 16 additions & 16 deletions src/views/customToolbar/GroupToolbarItems.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import mxgraph from '../../graph/index';
import { MxConstants } from '../../graph/index';

const { mxConstants } = mxgraph;
// const { MxConstants } = mxgraph;
export const grouptoolItems = [
{
title: '分组1',
Expand All @@ -16,8 +16,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -48,8 +48,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -80,8 +80,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -112,8 +112,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -144,8 +144,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -176,8 +176,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down Expand Up @@ -208,8 +208,8 @@ export const grouptoolItems = [
fillColor: '#409eff',
strokeColor: '#629EA0',
fontColor: '#000000',
verticalAlign: mxConstants.ALIGN_TOP,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_TOP,
align: MxConstants.ALIGN_CENTER,
},
created (graph, cell, index) {
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
Expand Down
8 changes: 4 additions & 4 deletions src/views/customToolbar/general-shape.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import mxgraph from "../../graph/index";
const { mxConstants } = mxgraph;
import { MxConstants } from "../../graph/index";
// const { MxConstants } = mxgraph;
export const generalToolbarItems = [
{
index: 0,
Expand Down Expand Up @@ -151,8 +151,8 @@ export const generalToolbarItems = [
strokeWidth: '1',
html: 1,
fillColor: '#FFFFFF',
verticalAlign: mxConstants.ALIGN_MIDDLE,
align: mxConstants.ALIGN_CENTER,
verticalAlign: MxConstants.ALIGN_MIDDLE,
align: MxConstants.ALIGN_CENTER,
whiteSpace: 'wrap',
rounded: 0,
}
Expand Down
Loading

0 comments on commit 0f05687

Please sign in to comment.