diff --git a/.github/workflows/buildAndDeploy.yml b/.github/workflows/buildAndDeploy.yml new file mode 100644 index 0000000..a553d5e --- /dev/null +++ b/.github/workflows/buildAndDeploy.yml @@ -0,0 +1,30 @@ +# name 可以自定义 +name: CI +# 指定触发workflow的条件 +# 下面的意思就是在监听到main分支push操作的时候运行 +on: + push: + branches: [ main ] + +# jobs 表示要执行的一项或者多项任务 +jobs: + # 任务名，可自定义 + build-and-deploy: + # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。 + runs-on: ubuntu-latest + # steps表示执行步骤 + steps: + # 检出代码，这里用了 actions/checkout@master 库来完成 + - name: Checkout + uses: actions/checkout@master + # 这里展示了如何执行多条命令 + - name: Install and Build + run: | + npm install + npm run build + # 这里引用了别人写好的发布库，具体参数信息可以查阅上面的链接 + - name: Deploy to GitHub Pages + uses: JamesIves/github-pages-deploy-action@4.0.0 + with: + branch: gh-pages + folder: dist diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..576a942 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,37 @@ +# This is a basic workflow to help you get started with Actions + +name: CI + +# Controls when the workflow will run +on: + # Triggers the workflow on push or pull request events but only for the V1.0-beat branch + push: + branches: [ V1.0-beat ] + pull_request: + branches: [ V1.0-beat ] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# jobs 表示要执行的一项或者多项任务 +jobs: + # 任务名，可自定义 + build-and-deploy: + # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。 + runs-on: ubuntu-latest + # steps表示执行步骤 + steps: + # 检出代码，这里用了 actions/checkout@master 库来完成 + - name: Checkout + uses: actions/checkout@master + # 这里展示了如何执行多条命令 + - name: Install and Build + run: | + yarn + yarn build + # 这里引用了别人写好的发布库，具体参数信息可以查阅上面的链接 + - name: Deploy to GitHub Pages + uses: JamesIves/github-pages-deploy-action@4.0.0 + with: + branch: gh-pages + folder: dist diff --git a/.gitignore b/.gitignore index 11f5d71..32618de 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ .DS_Store node_modules /dist - +/web-serve-until/node_modules # local env files .env.local .env.*.local diff --git a/README.md b/README.md index 4f2448c..430b72c 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,51 @@ -# mxgraph-easyeditor +# Mxgraph-EasyFlowEditor + 本项目是基于mxGraph+vue设计的流程图编辑器，可用于流程图绘制，流程渲染等等；欢迎交流，欢迎star，谢谢！: + +## 项目展示： +![Vue生命周期流程的绘制](https://img-blog.csdnimg.cn/20210608102620212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) + +![定制化场景的流程渲染](https://img-blog.csdnimg.cn/2c18e17f1f47442e8f36e775aa5b3497.png) + +## 推荐文章: +以下是个人认为对上手mxgraph非常有帮助的文章： + +1.基于 mxGraph 的可视化环境组网设计器:[https://github.com/igonglei/env-editor](https://github.com/yooSeeFly/env-editor) + +2.mxGraph 学习笔记:https://www.kancloud.cn/wujie520303/mxgraph/1434409 + +3.功能全面的案例:https://github.com/lanniu/vue-mxgraph-example + +4.关于 mxGraph 可搜索的 API 中文文档:https://api.mxgraph.lanniu.top/#/ + +## Project setup + +``` +yarn +``` + +### Compiles and hot-reloads for development + +``` +yarn serve +``` + +### Compiles and minifies for production + +``` +yarn build +``` + +## Star 趋势图 + +[![Stargazers over time](https://starchart.cc/Jason-chen-coder/Mxgraph-EasyFlowEditor.svg)](https://starchart.cc/Jason-chen-coder/Mxgraph-EasyFlowEditor) ## 1.什么是 mxgraph mxGraph 是一个 JavaScript 图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。mxGraph 提供图形绘制、图形可视化、图形交互、图形布局、图形分析等能力， 适用于工作流程图、BPMN 图、网络图、UML 图、循环图、组织结构图、MindMap 图、机架图、甘特图、信息图、平面图等绘制。 mxGraph 在 2005 年创建，作为商业项目一直持续到 2016 年，2016 年创建者以 Apache 2.0 开源协议在 GitHub 上公布源码。 + 官方产品(Draw.io): [https://app.diagrams.net/](https://app.diagrams.net/) + 官方 API ：[http://jgraph.github.io/mxgraph/docs/js-api](https://app.diagrams.net/) GitHub 库：jgraph/mxgraph @@ -24,7 +65,8 @@ mxGraph 是用户直接操作的图，图的所有状态都保存;在 mxGraphMod mxGraph 的功能依赖关系如图所示： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165359553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) -除此之外，mxGraph 还有 mxClient、组结构、复杂管理等部分组成，并提供 editor、io、handler、shape、view、util、layout 等 API。具体框架结构如下。 + 除此之外，mxGraph 还有 mxClient、组结构、复杂管理等部分组成，并提供 editor、io、handler、shape、view、util、layout 等 API。具体框架结构如下。 + ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165408607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) ``` @@ -90,6 +132,7 @@ export default { ``` 第四步:运行效果 + ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165600359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) API 方法使用总结： @@ -101,16 +144,27 @@ API 方法使用总结： –会创建一个 mxCell 对象并返回。 **方法的参数：** -parent – 组结构中此图元的直接父图元。我们会很快谈论到组结构，但现在我们直接使用 graph.getDefaultParent();作为默认的父图元，就像在 HelloWorld 这个例子一样。 -id – 描述此单元的全局唯一身份号码，总是一个字符串。主要用于外部对这单元的引用。如果你不想自己维护这些号码，只需要传入一个空参数并确保 mxGraphModel.isCreateIds()返回真即可。这样，模型就会管理这些号码，并保证它们的唯一性。 -value – 此单元的用户对象。用户对象只是一些对象，可以让您把应用程序的商务逻辑与 mxGraph 的可视化呈现相关联。在手册的后面有详细地描述，这里我们就只用字符 串就好，并把它们显示成节点和边的标签。 -x, y, width, height – 就像名字提到的，这是节点的左上角的 x 和 y 的位置以及它的宽度和高度。 -style – 将被应用到节点的样式描述。关于样式，很快会有更详细的描述，简单来讲，就是一个特定格式的字符串。这个字符串有零个或多个样式名字和一些键/值配对，用来覆盖全局设置或者创立新的样式。除非我们要创建自己的样式，我们可以直接使用这些现有的设置。 -source 和 target –参数定义了节点要连接的节点;注意,源节点 和目标节点需要已经被加入到模型中。 + + parent – 组结构中此图元的直接父图元。我们会很快谈论到组结构，但现在我们直接使用 graph.getDefaultParent();作为默认的父图元，就像在 HelloWorld 这个例子一样。 + + id – 描述此单元的全局唯一身份号码，总是一个字符串。主要用于外部对这单元的引用。如果你不想自己维护这些号码，只需要传入一个空参数并确保 mxGraphModel.isCreateIds()返回真即可。这样，模型就会管理这些号码，并保证它们的唯一性。 + + value – 此单元的用户对象。用户对象只是一些对象，可以让您把应用程序的商务逻辑与 mxGraph 的可视化呈现相关联。在手册的后面有详细地描述，这里我们就只用字符 串就好，并把它们显示成节点和边的标签。 + + x, y, width, height – 就像名字提到的，这是节点的左上角的 x 和 y 的位置以及它的宽度和高度。 + + style – 将被应用到节点的样式描述。关于样式，很快会有更详细的描述，简单来讲，就是一个特定格式的字符串。这个字符串有零个或多个样式名字和一些键/值配对，用来覆盖全局设置或者创立新的样式。除非我们要创建自己的样式，我们可以直接使用这些现有的设置。 + + source 和 target –参数定义了节点要连接的节点;注意,源节点 和目标节点需要已经被加入到模型中。 + **注意:** -1.mxGraph 事物的更新(插入新元素时)一定要放在 beginUpdate 和 endUpdate 里面。一次 beginUpdate 必须对应一次 endUpdate 2.由于 mxGraph 配置了默认的样式(节点字体、连线等元素样式)和默认的配置所以样式看起来比较单一;我们可以在绘制图形前修改 mxGraph 默认配置好的配置项,来达到我们想要的效果; + +1.mxGraph 事物的更新(插入新元素时)一定要放在 beginUpdate 和 endUpdate 里面。一次 beginUpdate 必须对应一次 endUpdate + +2.由于 mxGraph 配置了默认的样式(节点字体、连线等元素样式)和默认的配置所以样式看起来比较单一;我们可以在绘制图形前修改 mxGraph 默认配置好的配置项,来达到我们想要的效果; 3.mxgraph 的自定义配置 + js 代码如下: ```js @@ -200,15 +254,23 @@ export default { ``` -注意: 1.我们在配置中会用到 mxGraph 中其他的模块,所以我们使用到 mxGraph 的哪个方法就得把它们 import 进来。 +注意: + +1.我们在配置中会用到 mxGraph 中其他的模块,所以我们使用到 mxGraph 的哪个方法就得把它们 import 进来。 + 2.mxGraph 中有三个主要的组件：mxGraph、mxGraphModel、mxCell。mxGraph 是用户直接操作的图，图的所有状态都保存在 mxGraphModel 中，而图中的顶点和边都是用 mxCell 定义。 -3.insertVertex 做了三件事，先是设置几何信息，然后创建一个节点，最后将这个节点添加到画布。insertEdge 与 insertVertex 类似，方法中的几何信息四个数字分别对应 X、 Y、 宽、 高 ;坐标是以 graph 的左上角为原点。 3.当用户对 mxGraph 进行操作时，所有操作都映射到对 mxGraphModel 中保存的状态进行修改，而 mxGraphModel 中保存的状态也就是 mxCell 的状态。 + +3.insertVertex 做了三件事，先是设置几何信息，然后创建一个节点，最后将这个节点添加到画布。insertEdge 与 insertVertex 类似，方法中的几何信息四个数字分别对应 X、 Y、 宽、 高 ;坐标是以 graph 的左上角为原点。 + +4.当用户对 mxGraph 进行操作时，所有操作都映射到对 mxGraphModel 中保存的状态进行修改，而 mxGraphModel 中保存的状态也就是 mxCell 的状态。 + 运行效果: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165656158.png) 4.绘制具备树形结构的拓扑图 对于自动布局，我们可以根据官网提供的 mxHierarchicalLayout 模块,它提供了 getLayout 钩子。可以重写它以返回给定 cell 的子节点的布局算法。 + 代码如下: ```js @@ -295,10 +357,12 @@ export default { ``` 运行效果: + ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165709326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) 关于 mxGraph，官方 API 文档不友好，介绍简单;API 文档也是全是英文，官网的 Demo 倒是不少，不过有的拉下来在自己的环境下跑会报错，只有根据官方的 demo 不断地尝试和理解才能解决使用上的问题，目前只基本掌握基础使用部分，个人使用心得还会继续更新。 5.辅助功能演示： 通过以上三个 demo 的演示，相信大家对 mxgraph 已经有大致的了解了；下面在 demo 基础上我们针对一些辅助功能进行演示： + 5.1 选择线框 ```js @@ -317,12 +381,11 @@ position: absolute; ``` -![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165805725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) +运行效果: -``` - 5.3修改连线样式 +![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165805725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) -``` +5.3 修改连线样式 ```js mxEdgeStyle 中定义了线的各种样式：Loop、ElbowConnector、SideToSide等等，可以通过以下方式自定义连线样式： @@ -344,6 +407,8 @@ graph.getModel().setStyle(e1, 'edgeStyle=myEdgeStyle'); ``` +运行效果: + ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210302165835344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) 也可以在定义好自定义样式后，直接修改连线的默认样式： @@ -371,9 +436,13 @@ mxGraphHandler.prototype.guidesEnabled = true ``` 针对上述功能，我们下一步进行 mxgraph 拓扑图编辑工具的开发说明： + 初始化画布: + 导入 mxgraph 的资源的由于源代码中已有且各个功能注释已写的较明确在这里就暂不赘述了,主要以功能性方面进行介绍;下面将初始化画布分解为 6 个步骤讲解 + 第一步:首先 mxgraph 将会检测当前浏览器是否支持 mxgraph,若不支持将会弹出警告并终止操作 + 第二步:.创建画布: ```js @@ -392,10 +461,15 @@ createGraph () { ``` 我们在获取画布的 dom 元素(this.\$ref.container)之后即可进行初始化;此步骤相当于告诉 mxgraph 我们将在那个 dom 元素上进行绘图;剩下的就是画布的配置项,各个配置的具体功能代码中备注 + 第三步:配置事件中心:此步骤将会配置各个事件 + 3.1 监听 新增 cell 事件: + (在 mxgraph 中,节点和连线都是 cell),当我们向画布新增 cell 时就会触发该事件;我们还可以配置其他的事件,所有事件都在 mxEvent 中,直接在控制台打印出,mxEvent 就可以知道有什么事件,配置方法直接参考 ADD_CELLS 即可 + 第四步:配置鼠标事件: + 我们可以配置鼠标事件来监听我们鼠标在画布中的操作 ```js @@ -446,7 +520,9 @@ createGraph () { ``` 各个事件函数的形参即可获取当前鼠标操作的元素信息 + 第五步:.配置画布中的右键菜单 + 首先 mxEvent.disableContextMenu(this.\$refs.container) 告诉 mxgraph 你要在画布中配置右键菜单,并使用 popupMenuHandler 进行菜单项新增 ```js @@ -480,6 +556,7 @@ configMenu () { ``` 第六步:.初始化左侧工具栏: + 此处是重点,在此处配置后左侧的节点列表即可进行拖拽,并可通过拖拽节点到画布新增节点 ```js @@ -551,9 +628,11 @@ var generalToolbarDomArray = this.$refs.generalToolItems ### 6.4 当节点新增到画布之后会自动触发 ADD_CELLS 事件 注意： + 左侧节点列表上方的搜索功能.在执行搜索后 generalToolbarDomArray 会改变, 所以在过滤完节点列表之后 我们要手动再执行一遍 initGeneralTool 函数,这样新的节点列表才可被拖拽新增 -第七步:.自动布局 +第七步:自动布局 + mxgraph 提供了几种自动布局的 API,直接调用 graphLayout 即可 ```js @@ -610,46 +689,3 @@ mxgraph 提供了几种自动布局的 API,直接调用 graphLayout 即可 } ``` - -## 项目源码欢迎 star: - -[项目源码地址](https://github.com/Jason-chen-coder/mxgraph-EasyEditor): -![在这里插入图片描述](https://img-blog.csdnimg.cn/20210608102620212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) - -## 推荐文章: - -1.基于 mxGraph 的可视化环境组网设计器:https://github.com/igonglei/env-editor - -2.mxGraph 学习笔记:https://www.kancloud.cn/wujie520303/mxgraph/1434409 - -3.功能全面的案例:https://github.com/lanniu/vue-mxgraph-example - -4.关于 mxGraph 可搜索的 API 中文文档:https://api.mxgraph.lanniu.top/#/ - -## Project setup - -``` -npm install -``` - -### Compiles and hot-reloads for development - -``` -npm run serve -``` - -### Compiles and minifies for production - -``` -npm run build -``` - -### Lints and fixes files - -``` -npm run lint -``` - -### Customize configuration - -See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..034e848 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,21 @@ +# Security Policy + +## Supported Versions + +Use this section to tell people about which versions of your project are +currently being supported with security updates. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :white_check_mark: | +| < 4.0 | :x: | + +## Reporting a Vulnerability + +Use this section to tell people how to report a vulnerability. + +Tell them where to go, how often they can expect to get an update on a +reported vulnerability, what to expect if the vulnerability is accepted or +declined, etc. diff --git a/build/build.js b/build/build.js new file mode 100644 index 0000000..cb27f4b --- /dev/null +++ b/build/build.js @@ -0,0 +1,42 @@ +'use strict'; +require('./check-versions')(); + +process.env.OPT_TYPE = 'deploy'; +process.env.NODE_ENV = 'production'; + +const ora = require('ora'); +const rm = require('rimraf'); +const path = require('path'); +const chalk = require('chalk'); +const webpack = require('webpack'); +const config = require('../config'); +const webpackConfig = require('./webpack.prod.conf'); + +const spinner = ora('building for production...'); +spinner.start(); + +rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { + if (err) throw err; + webpack(webpackConfig, (err, stats) => { + spinner.stop(); + if (err) throw err; + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false, + }) + '\n\n'); + + if (stats.hasErrors()) { + console.log(chalk.red(' Build failed with errors.\n')); + process.exit(1); + } + + console.log(chalk.cyan(' Build complete.\n')); + console.log(chalk.yellow( + ' Tip: built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n', + )); + }); +}); diff --git a/build/check-version.js b/build/check-version.js new file mode 100644 index 0000000..0211023 --- /dev/null +++ b/build/check-version.js @@ -0,0 +1,54 @@ +'use strict'; +const chalk = require('chalk'); +const semver = require('semver'); +const packageConfig = require('../package.json'); +const shell = require('shelljs'); + +function exec (cmd) { + return require('child_process').execSync(cmd).toString().trim(); +} + +const versionRequirements = [ + { + name: 'node', + currentVersion: semver.clean(process.version), + versionRequirement: packageConfig.engines.node, + }, +]; + +if (shell.which('npm')) { + versionRequirements.push({ + name: 'npm', + currentVersion: exec('npm --version'), + versionRequirement: packageConfig.engines.npm, + }); +} + +module.exports = function () { + const warnings = []; + + for (let i = 0; i < versionRequirements.length; i++) { + const mod = versionRequirements[i]; + + if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { + warnings.push(mod.name + ': ' + + chalk.red(mod.currentVersion) + ' should be ' + + chalk.green(mod.versionRequirement), + ); + } + } + + if (warnings.length) { + console.log(''); + console.log(chalk.yellow('To use this template, you must update following to modules:')); + console.log(); + + for (let i = 0; i < warnings.length; i++) { + const warning = warnings[i]; + console.log(' ' + warning); + } + + console.log(); + process.exit(1); + } +}; diff --git a/build/thread-loader.conf b/build/thread-loader.conf new file mode 100644 index 0000000..400c781 --- /dev/null +++ b/build/thread-loader.conf @@ -0,0 +1,30 @@ +module.exports = { + options: { + // 产生的 worker 的数量，默认是 (cpu 核心数 - 1) + // 或者，在 require('os').cpus() 是 undefined 时回退至 1 + // workers: require('os').cpus() - 1, + + // 一个 worker 进程中并行执行工作的数量 + // 默认为 20 + workerParallelJobs: 20, + + // 额外的 Node.js 参数 + workerNodeArgs: ['--max-old-space-size=4096'], + + // Allow to respawn a dead worker pool + // respawning slows down the entire compilation + // and should be set to false for development + poolRespawn: false, + + // 闲置时定时删除 worker 进程 + // 默认为 500ms + // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在 + poolTimeout: 500, + + // 池(pool)分配给 worker 的工作数量 + // 默认为 200 + // 降低这个数值会降低总体的效率，但是会提升工作分布更均一 + poolParallelJobs: 200, + + }, +}; diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..7d7d351 --- /dev/null +++ b/build/utils.js @@ -0,0 +1,100 @@ +'use strict'; +const path = require('path'); +const config = require('../config'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const packageConfig = require('../package.json'); + +exports.assetsPath = function (_path) { + const assetsSubDirectory = process.env.NODE_ENV === 'production' + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory; + + return path.posix.join(assetsSubDirectory, _path); +}; + +exports.cssLoaders = function (options) { + options = options || {}; + + const cssLoader = { + loader: 'css-loader', + options: { + sourceMap: options.sourceMap, + }, + }; + + const postcssLoader = { + loader: 'postcss-loader', + options: { + sourceMap: options.sourceMap, + }, + }; + + // generate loader string to be used with extract text plugin + function generateLoaders (loader, loaderOptions) { + const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]; + + if (loader) { + loaders.push({ + loader: loader + '-loader', + options: Object.assign({}, loaderOptions, { + sourceMap: options.sourceMap, + }), + }); + } + + // Extract CSS when that option is specified + // (which is the case during production build) + if (options.extract) { + return [MiniCssExtractPlugin.loader].concat(loaders); + } else { + return ['vue-style-loader'].concat(loaders); + } + } + + // https://vue-loader.vuejs.org/en/configurations/extract-css.html + return { + css: generateLoaders(), + postcss: generateLoaders(), + less: generateLoaders('less', { + javascriptEnabled: true, + }), + sass: generateLoaders('sass', { indentedSyntax: true }), + scss: generateLoaders('sass'), + stylus: generateLoaders('stylus'), + styl: generateLoaders('stylus'), + }; +}; + +// Generate loaders for standalone style files (outside of .vue) +exports.styleLoaders = function (options) { + const output = []; + const loaders = exports.cssLoaders(options); + + for (const extension in loaders) { + const loader = loaders[extension]; + output.push({ + test: new RegExp('\\.' + extension + '$'), + use: loader, + }); + } + + return output; +}; + +exports.createNotifierCallback = () => { + const notifier = require('node-notifier'); + + return (severity, errors) => { + if (severity !== 'error') return; + + const error = errors[0]; + const filename = error.file && error.file.split('!').pop(); + + notifier.notify({ + title: packageConfig.name, + message: severity + ': ' + error.name, + subtitle: filename || '', + icon: path.join(__dirname, 'logo.png'), + }); + }; +}; diff --git a/build/vue-loader.conf b/build/vue-loader.conf new file mode 100644 index 0000000..24fa9d2 --- /dev/null +++ b/build/vue-loader.conf @@ -0,0 +1,33 @@ +/* + * @Descripttion: + * @version: + * @Author: Jason chen + * @Date: 2021-08-16 17:58:07 + * @LastEditors: sueRimn + * @LastEditTime: 2021-08-16 17:58:08 + */ +'use strict'; +const utils = require('./utils'); +const config = require('../config'); +const isProduction = process.env.NODE_ENV === 'production'; +const sourceMapEnabled = isProduction + ? config.build.productionSourceMap + : config.dev.cssSourceMap; + +module.exports = { + loaders: Object.assign(utils.cssLoaders({ + sourceMap: sourceMapEnabled, + extract: isProduction, + }), { + ts: 'ts-loader', + tsx: 'babel-loader!ts-loader', + }), + cssSourceMap: sourceMapEnabled, + cacheBusting: config.dev.cacheBusting, + transformToRequire: { + video: ['src', 'poster'], + source: 'src', + img: 'src', + image: 'xlink:href', + }, +}; diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js new file mode 100644 index 0000000..920af77 --- /dev/null +++ b/build/webpack.base.conf.js @@ -0,0 +1,208 @@ +'use strict'; +const path = require('path'); +const utils = require('./utils'); +const config = require('../config'); +const vueLoaderConfig = require('./vue-loader.conf'); +const VueLoaderPlugin = require('vue-loader/lib/plugin'); +const ProgressBarPlugin = require('progress-bar-webpack-plugin'); +const threadLoaderConfig = require('./thread-loader.conf'); +const FilterWarningsPlugin = require('webpack-filter-warnings-plugin'); +const webpack = require('webpack'); + +const excludeModuleDependencyWarning = new RegExp('"export .* was not found in \'.*\''); + +function resolve (dir) { + return path.join(__dirname, '..', dir); +} + +let entry = {}, output = {}; +if (process.env.OPT_TYPE === 'dll') { + // dll打包 + entry = { + libs: config.dll.entry, + }; + output = { + path: config.dll.output, + filename: config.dll.filename, + publicPath: config.dll.publicPath, + library: '[name]', + }; +} else { + // if (process.env.NODE_ENV !== 'production') { + // threadLoader.warmup({ + // // pool options, like passed to loader options + // // must match loader options to boot the correct pool + // ...threadLoaderConfig, + // }, [ + // // modules to load + // // can be any module, i. e. + // 'babel-loader', + // 'vue-loader', + // 'ts-loader', + // 'svg-sprite-loader', + // 'url-loader', + // ]); + // } + entry = { + app: './src/main.ts', + }; + output = { + path: process.env.NODE_ENV === 'production' ? config.build.assetsRoot : config.dev.assetsRoot, + filename: '[name].js', + publicPath: process.env.NODE_ENV === 'production' + ? config.build.assetsPublicPath + : config.dev.assetsPublicPath, + }; +} +module.exports = { + context: path.resolve(__dirname, '../'), + entry, + output, + resolve: { + // 绝对路径, 查找module的话从这里开始查找(可选) + modules: [resolve('src'), 'node_modules'], + extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json', '.less', '.css', '.scss'], + alias: { + 'vue$': 'vue/dist/vue.esm.js', + '@': resolve('src'), + 'edsp-vue-ui': resolve('src/packages'), + 'package.json': resolve('package.json'), + }, + }, + optimization: { + splitChunks: { + //缓存组（配置的关键） + cacheGroups: { + commons: { + chunks: 'all',//表示从哪些chunks里面抽取代码，除了三个可选字符串值 initial、async、all 之外，还可以通过函数来过滤所需的 chunks； + minChunks: 2,//表示被引用次数，默认为1； + maxInitialRequests: 5, //最大的初始化加载次数，默认为 3； + minSize: 0, // 模块的文件体积超过 0 byte就抽取到common中 + name: true,//抽取出来文件的名字，默认为 true，表示自动生成文件名 + }, + }, + }, + }, + plugins: [ + new webpack.ProvidePlugin({ + // other modules + introJs: ['intro.js'], + }), + new FilterWarningsPlugin({ + exclude: excludeModuleDependencyWarning, + }), + new VueLoaderPlugin(), + new ProgressBarPlugin(), + ], + module: { + rules: [ + // { + // enforce: 'pre', + // test: /\.(ts|tsx)$/, + // exclude: /node_modules|.vue.ts|.vue.tsx/, + // use: ['cache-loader', { loader: 'thread-loader', ...threadLoaderConfig }, { + // loader: 'tslint-loader', + // options: vueLoaderConfig, + // }], + // }, + // { + // resourceQuery: /blockType=i18n/, + // type: 'javascript/auto', + // loader: '@kazupon/vue-i18n-loader', + // }, + { + test: /\.vue$/, + use: ['cache-loader', { loader: 'thread-loader', ...threadLoaderConfig }, { + loader: 'vue-loader', + options: vueLoaderConfig, + }], + }, + { + test: /\.tsx?$/, + exclude: /node_modules/, + use: [ + 'cache-loader', + { loader: 'thread-loader', ...threadLoaderConfig }, + 'babel-loader', + { + loader: 'ts-loader', + options: { + appendTsxSuffixTo: [/\.vue$/], + happyPackMode: true, + }, + }, + ], + }, + { + test: /\.jsx?$/, + use: ['cache-loader', { loader: 'thread-loader', ...threadLoaderConfig }, 'babel-loader'], + include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts'), + resolve('node_modules/resize-detector')], + }, + // { + // test: /\.html$/, + // loader: 'vue-template-loader', + // include: [resolve('src', 'views')], + // }, + // { + // test: /\.scss$/, + // use: [ + // 'style-loader', // creates style nodes from JS strings + // 'css-loader', // translates CSS into CommonJS + // 'sass-loader', // compiles Sass to CSS, using Node Sass by default + // ], + // }, + { + test: /\.svg$/, + loader: 'svg-sprite-loader', + options: { + symbolId: '[name]', + }, + include: [resolve('src/assets/svg')], + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]'), + }, + include: [resolve('src/assets/img'), resolve('src/assets/font/iconfont'), resolve('src/packages/styles'), resolve('src/packages/images'), resolve('src/styles'), + resolve('src/components/topology/assets'), resolve('src/components/trace/trace-chart-table'), resolve('node_modules/jsoneditor/dist/img'), resolve('node_modules/edsp-gls-ui'), resolve('src/views/dynamicFlow/flow/css/font') + , resolve('node_modules/bpmn-js')], + }, + // { + // test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, + // use: [ + // 'cache-loader', { + // loader: 'url-loader', + // options: { + // limit: 10000, + // name: utils.assetsPath('media/[name].[hash:7].[ext]'), + // }, + // }, + // ], + // }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('font/[name].[hash:7].[ext]'), + }, + }, + ], + }, + node: { + // prevent webpack from injecting useless setImmediate polyfill because Vue + // source contains it (although only uses it if it's native). + setImmediate: false, + // prevent webpack from injecting mocks to Node native modules + // that does not make sense for the client + dgram: 'empty', + fs: 'empty', + net: 'empty', + tls: 'empty', + child_process: 'empty', + }, +}; diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js new file mode 100644 index 0000000..a74f2ee --- /dev/null +++ b/build/webpack.dev.conf.js @@ -0,0 +1,123 @@ +'use strict'; +const path = require('path'); +const utils = require('./utils'); +const webpack = require('webpack'); +const config = require('../config'); +const merge = require('webpack-merge'); +const baseWebpackConfig = require('./webpack.base.conf'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); +const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); +const portfinder = require('portfinder'); +const address = require('address'); + +// const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); + +// const smp = new SpeedMeasurePlugin(); + +function resolve (dir) { + return path.join(__dirname, '..', dir); +} + +const HOST = process.env.HOST; +const PORT = process.env.PORT && Number(process.env.PORT); +const manifest = path.resolve(config.dll.output, 'manifest.json'); + +const devWebpackConfig = merge(baseWebpackConfig, { + mode: 'development', + module: { + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }), + }, + // cheap-module-eval-source-map is faster for development + // devtool: config.dev.devtool, + devtool: 'eval-source-map', + + // these devServer options should be customized in /config/index.js + devServer: { + clientLogLevel: 'warning', + historyApiFallback: true, + hot: true, + inline: config.dev.inline, + compress: true, + host: HOST || config.dev.host, + port: PORT || config.dev.port, + open: config.dev.autoOpenBrowser, + overlay: config.dev.errorOverlay + ? { warnings: false, errors: true } + : false, + publicPath: config.dev.assetsPublicPath, + proxy: config.dev.proxyTable, + quiet: true, // necessary for FriendlyErrorsPlugin + watchOptions: { + poll: config.dev.poll, + }, + }, + plugins: [ + new webpack.DllReferencePlugin({ + manifest, + name: 'libs', + }), + new webpack.HotModuleReplacementPlugin(), + new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. + new webpack.NoEmitOnErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'public/index.ejs', + templateParameters: { + edspDistTime: new Date().getTime() + }, + inject: true, + hash: true, + // favicon: resolve('public/favicon.ico'), + path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory, + }), + new HtmlWebpackIncludeAssetsPlugin({ + assets: ['./js/libs.js'], + append: false, + hash: true, + }), + new CopyWebpackPlugin([ + { + from: path.resolve(__dirname, '../public'), + to: config.dev.assetsSubDirectory, + ignore: ['.*'], + }, + { + from: config.dll.output, + to: './', + }, + ]), + ], +}); + +module.exports = new Promise((resolve, reject) => { + portfinder.basePort = process.env.PORT || config.dev.port; + portfinder.getPort((err, port) => { + if (err) { + reject(err); + } else { + // publish the new Port, necessary for e2e tests + process.env.PORT = port; + // add port to devServer config + devWebpackConfig.devServer.port = port; + + // Add FriendlyErrorsPlugin + devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ + compilationSuccessInfo: { + messages: [ + ` App running at:`, + ` - Local: http://localhost:${port}`, + ` - Network: http://${address.ip()}:${port}`, + ], + }, + onErrors: config.dev.notifyOnErrors + ? utils.createNotifierCallback() + : undefined, + })); + + resolve(devWebpackConfig); + } + }); +}); diff --git a/build/webpack.dll.conf.js b/build/webpack.dll.conf.js new file mode 100644 index 0000000..75258ad --- /dev/null +++ b/build/webpack.dll.conf.js @@ -0,0 +1,20 @@ +'use strict'; +process.env.NODE_ENV = 'production'; +process.env.OPT_TYPE = 'dll'; +const webpack = require('webpack'); +const merge = require('webpack-merge'); +const baseWebpackConfig = require('./webpack.base.conf'); +const config = require('../config'); +const path = require('path'); + +const manifest = path.resolve(config.dll.output, 'manifest.json'); + +module.exports = merge(baseWebpackConfig, { + mode: 'production', + plugins: [ + new webpack.DllPlugin({ + path: manifest, + name: '[name]_[hash]', + }), + ], +}); diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js new file mode 100644 index 0000000..77aecaa --- /dev/null +++ b/build/webpack.prod.conf.js @@ -0,0 +1,165 @@ +'use strict'; +const path = require('path'); +const utils = require('./utils'); +const webpack = require('webpack'); +const config = require('../config'); +const merge = require('webpack-merge'); +const baseWebpackConfig = require('./webpack.base.conf'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); + +const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const FileManagerPlugin = require('filemanager-webpack-plugin'); + +function resolve (dir) { + return path.join(__dirname, '..', dir); +} + +const manifest = path.resolve(config.dll.output, 'manifest.json'); + +const webpackConfig = merge(baseWebpackConfig, { + mode: 'production', + module: { + rules: utils.styleLoaders({ + sourceMap: config.build.productionSourceMap, + extract: true, + usePostCSS: true, + }), + }, + devtool: 'cheap-module-source-map', + output: { + path: config.build.assetsRoot, + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'), + }, + plugins: [ + new UglifyJsPlugin({ + uglifyOptions: { + compress: { + reduce_vars: true,// 把使用多次的静态值自动定义为变量 + drop_debugger: true,// 删除所有的debugger语句 + drop_console: true,// 删除所有的console语句 + }, + parallel: true, // 允许并发 + cache: true, // 开启缓存 + output: { + beautify: false // 使输出的代码尽可能紧凑 + } + }, + }), + new webpack.DllReferencePlugin({ + manifest, + name: 'libs', + }), + // extract css into its own file + new MiniCssExtractPlugin({ + filename: utils.assetsPath('css/[name].css'), + }), + // Compress extracted CSS. We are using this plugin so that possible + // duplicated CSS from different components can be deduped. + new OptimizeCSSPlugin({ + cssProcessorOptions: config.build.productionSourceMap + ? { safe: true, map: { inline: false } } + : { safe: true }, + }), + // generate dist index.html with correct asset hash for caching. + // you can customize output by editing /index.html + // see https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: config.build.index, + template: 'public/index.ejs', + templateParameters: { + edspDistTime: new Date().getTime() + }, + inject: true, + hash: true, + // favicon: resolve('public/favicon.ico'), + // title: 'admin-sunline', + path: config.build.assetsPublicPath + config.build.assetsSubDirectory, + minify: { + removeComments: true, + collapseWhitespace: true, + // removeAttributeQuotes: true, + // more options: + // https://github.com/kangax/html-minifier#options-quick-reference + }, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'none', + }), + new HtmlWebpackIncludeAssetsPlugin({ + assets: ['js/libs.js'], + append: false, + hash: true, + }), + // copy custom public assets + new CopyWebpackPlugin([ + { + from: path.resolve(__dirname, '../public'), + to: config.build.assetsSubDirectory, + ignore: ['.*'], + }, + { + from: config.dll.output, + to: path.resolve(config.build.assetsRoot), + }, + ]), + new FileManagerPlugin({ + onEnd: [ + { + move: [ + { source: path.resolve(__dirname, '../deploy', 'font'), destination: path.resolve(__dirname, '../deploy', 'css', 'font') }, + ], + copy: [ + { source: path.resolve(__dirname, '../deploy', 'img/*.svg'), destination: path.resolve(__dirname, '../deploy', 'css', 'img') }, + ], + }, + ] + }) + ], + optimization: { + minimizer: [ + // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释 + // `...`, + new CssMinimizerPlugin({ + parallel: true,// 多并发执行 + minimizerOptions: { + preset: [ + "default", + { + discardComments: { removeAll: true },//移除所有注释 + }, + ], + }, + }), + ], + }, +}); + +if (config.build.productionGzip) { + const CompressionWebpackPlugin = require('compression-webpack-plugin'); + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + filename: '[path].gz[query]', + algorithm: 'gzip', + test: new RegExp( + '\\.(' + + config.build.productionGzipExtensions.join('|') + + ')$', + ), + threshold: 10240,//仅处理大于此大小的资产。以字节为单位。 + minRatio: 0.8, + }), + ); +} + +if (config.build.bundleAnalyzerReport) { + const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; + webpackConfig.plugins.push(new BundleAnalyzerPlugin()); +} + +module.exports = webpackConfig; diff --git a/config/dev.env.js b/config/dev.env.js new file mode 100644 index 0000000..54a2f97 --- /dev/null +++ b/config/dev.env.js @@ -0,0 +1,8 @@ +'use strict'; +const merge = require('webpack-merge'); +const prodEnv = require('./prod.env'); + +module.exports = merge(prodEnv, { + NODE_ENV: '"development"', + BASE_API: '"/api"', +}); diff --git a/config/dllEntry.json b/config/dllEntry.json new file mode 100644 index 0000000..b362198 --- /dev/null +++ b/config/dllEntry.json @@ -0,0 +1,41 @@ +[ + "@ant-design/dark-theme", + "@chenfengyuan/vue-countdown", + "@riophae/vue-treeselect", + "ant-design-vue", + "axios", + "bluebird", + "byt", + "d3", + "d3-tip", + "dayjs", + "echarts", + "element-ui", + "file-saver", + "isomorphic-fetch", + "jquery", + "jwt-builder", + "jwt-decode", + "lodash", + "memoize-one", + "mockjs", + "moment", + "nprogress", + "popper.js", + "pretty-bytes", + "prop-types", + "query-string", + "screenfull", + "vee-validate", + "vue", + "vue-class-component", + "vue-clipboard2", + "vue-codemirror", + "vue-highlight-words", + "vue-i18n", + "vue-property-decorator", + "vue-router", + "vue-tsx-support", + "vuex", + "vuex-class" +] diff --git a/config/index.js b/config/index.js new file mode 100644 index 0000000..3c91d2f --- /dev/null +++ b/config/index.js @@ -0,0 +1,131 @@ +'use strict'; +// Template version: 1.2.6 +// see http://vuejs-templates.github.io/webpack for documentation. + +const path = require('path'); +const version = require('../src/Controls.json').version; +const proxyJson = require('../src/proxy.json'); +const dllEntry = require('./dllEntry.json'); +function resolve (dir) { + return path.join(__dirname, '.', dir); +} +// 获取代理 +function getProxy (proxyJson, version) { + const devServerProxy = {}; + proxyJson.forEach(function (item) { + let proxyUrl = ''; + if (item.proxyUrl === '/loader' || item.notVersion) { + // 不需要带版本号 + // 壳子服务不需要版本 + proxyUrl = item.proxyUrl; + } else { + proxyUrl = item.proxyUrl + '/' + version; + } + devServerProxy[proxyUrl] = { + target: item.targetApi, + ws: item.protocol === 'ws://', + changeOrigin: item.changeOrigin, + secure: false, + }; + if (!item.notPathRewrite) { + if (item.pathRewrite) { + devServerProxy[proxyUrl]['pathRewrite'] = item.pathRewrite; + } else { + devServerProxy[proxyUrl]['pathRewrite'] = {}; + devServerProxy[proxyUrl]['pathRewrite'][proxyUrl] = ''; + } + } + }); + return devServerProxy; +} + +module.exports = { + dev: { + // Paths + assetsRoot: path.resolve(__dirname, '../'), + assetsSubDirectory: '', + assetsPublicPath: '/', + proxyTable: getProxy(proxyJson, version), // 代理 + inline: true, // 是否热部署 + // Various Dev Server settings + host: '0.0.0.0', // can be overwritten by process.env.HOST + // host: 'localhost', // can be overwritten by process.env.HOST + port: 9080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined + autoOpenBrowser: false, + errorOverlay: true, + notifyOnErrors: false, + poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- + + // Use Eslint Loader? + // If true, your code will be linted during bundling and + // linting errors and warnings will be shown in the console. + useEslint: true, + // If true, eslint errors and warnings will also be shown in the error overlay + // in the browser. + showEslintErrorsInOverlay: false, + + /** + * Source Maps + */ + + // https://webpack.js.org/configuration/devtool/#development + devtool: '#source-map', + + // If you have problems debugging vue-files in devtools, + // set this to false - it *may* help + // https://vue-loader.vuejs.org/en/options.html#cachebusting + cacheBusting: true, + + // CSS Sourcemaps off by default because relative paths are "buggy" + // with this option, according to the CSS-Loader README + // (https://github.com/webpack/css-loader#sourcemaps) + // In our experience, they generally work as expected, + // just be aware of this issue when enabling this option. + cssSourceMap: true, + }, + + dll: { + filename: './js/[name].js', // 文件名 + publicPath: '/', // 公共目录 + entry: dllEntry, // 入口 + output: path.resolve(__dirname, '../vendor'), // 出口 + }, + + build: { + entry: path.resolve(__dirname, '../src/main.js'), // 入口 + output: path.resolve(__dirname, '../deploy'), // 出口 + // Template for index.html + index: path.resolve(__dirname, '../deploy/index.html'), + + // Paths + assetsRoot: path.resolve(__dirname, '../deploy'), + assetsSubDirectory: '', + + // you can set by youself according to actual condition + assetsPublicPath: './', + // Use Eslint Loader? + // If true, your code will be linted during bundling and + // linting errors and warnings will be shown in the console. + useEslint: true, + /** + * Source Maps + */ + + productionSourceMap: false, + // https://webpack.js.org/configuration/devtool/#production + devtool: 'nosources-source-map', + + // Gzip off by default as many popular public hosts such as + // Surge or Netlify already gzip all public assets for you. + // Before setting to `true`, make sure to: + // npm install --save-dev compression-webpack-plugin + productionGzip: true, + productionGzipExtensions: ['js', 'css', 'html', 'svg', 'txt', 'eot', 'otf', 'ttf', 'gif'], + + // Run the build command with an extra argument to + // View the bundle analyzer report after build finishes: + // `npm run build --report` + // Set to `true` or `false` to always turn it on or off + bundleAnalyzerReport: process.env.npm_config_report, + }, +}; diff --git a/config/prod.env.js b/config/prod.env.js new file mode 100644 index 0000000..c3dad8f --- /dev/null +++ b/config/prod.env.js @@ -0,0 +1,5 @@ +'use strict'; +module.exports = { + NODE_ENV: '"production"', + BASE_API: '"/api"', +}; diff --git a/package-lock.json b/package-lock.json index 4866c51..4b10d56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "mxgraph-easyeditor", + "name": "Mxgraph-EasyFlowEditor", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -1071,6 +1071,39 @@ "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=", "dev": true }, + "@npmcli/move-file": { + "version": "1.1.2", + "resolved": "https://registry.npm.taobao.org/@npmcli/move-file/download/@npmcli/move-file-1.1.2.tgz", + "integrity": "sha1-GoLD43L3yuklPrZtclQ9a4aFxnQ=", + "dev": true, + "requires": { + "mkdirp": "^1.0.4", + "rimraf": "^3.0.2" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz", + "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=", + "dev": true + }, + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz?cache=0&sync_timestamp=1591175021598&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-3.0.2.tgz", + "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } + } + }, + "@polka/url": { + "version": "1.0.0-next.15", + "resolved": "https://registry.nlark.com/@polka/url/download/@polka/url-1.0.0-next.15.tgz", + "integrity": "sha1-ap0UP39PSdsteC+eHIg5optDriM=", + "dev": true + }, "@soda/friendly-errors-webpack-plugin": { "version": "1.7.1", "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz", @@ -1479,6 +1512,16 @@ "path-exists": "^4.0.0" } }, + "gzip-size": { + "version": "5.1.1", + "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz?cache=0&sync_timestamp=1605523244597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgzip-size%2Fdownload%2Fgzip-size-5.1.1.tgz", + "integrity": "sha1-y5vuaS+HwGErIyhAqHOQTkwTUnQ=", + "dev": true, + "requires": { + "duplexer": "^0.1.1", + "pify": "^4.0.1" + } + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz", @@ -1559,6 +1602,27 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } + }, + "webpack-bundle-analyzer": { + "version": "3.9.0", + "resolved": "https://registry.nlark.com/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.9.0.tgz?cache=0&sync_timestamp=1621259099265&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.9.0.tgz", + "integrity": "sha1-9vlNsQj7V05BWtMT3kGicH0z7zw=", + "dev": true, + "requires": { + "acorn": "^7.1.1", + "acorn-walk": "^7.1.1", + "bfj": "^6.1.1", + "chalk": "^2.4.1", + "commander": "^2.18.0", + "ejs": "^2.6.1", + "express": "^4.16.3", + "filesize": "^3.6.1", + "gzip-size": "^5.0.0", + "lodash": "^4.17.19", + "mkdirp": "^0.5.1", + "opener": "^1.5.1", + "ws": "^6.0.0" + } } } }, @@ -3271,6 +3335,178 @@ } } }, + "compression-webpack-plugin": { + "version": "5.0.1", + "resolved": "https://registry.nlark.com/compression-webpack-plugin/download/compression-webpack-plugin-5.0.1.tgz?cache=0&sync_timestamp=1624626650884&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcompression-webpack-plugin%2Fdownload%2Fcompression-webpack-plugin-5.0.1.tgz", + "integrity": "sha1-MWwaTkzMlFEKl4yWf8FDWB0eNkM=", + "dev": true, + "requires": { + "cacache": "^15.0.5", + "find-cache-dir": "^3.3.1", + "schema-utils": "^2.7.0", + "serialize-javascript": "^4.0.0", + "webpack-sources": "^1.4.3" + }, + "dependencies": { + "cacache": { + "version": "15.2.0", + "resolved": "https://registry.nlark.com/cacache/download/cacache-15.2.0.tgz?cache=0&sync_timestamp=1621949655085&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcacache%2Fdownload%2Fcacache-15.2.0.tgz", + "integrity": "sha1-c69193xY5y2MYwp6KFjLGO9SM4k=", + "dev": true, + "requires": { + "@npmcli/move-file": "^1.0.1", + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "glob": "^7.1.4", + "infer-owner": "^1.0.4", + "lru-cache": "^6.0.0", + "minipass": "^3.1.1", + "minipass-collect": "^1.0.2", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.2", + "mkdirp": "^1.0.3", + "p-map": "^4.0.0", + "promise-inflight": "^1.0.1", + "rimraf": "^3.0.2", + "ssri": "^8.0.1", + "tar": "^6.0.2", + "unique-filename": "^1.1.1" + } + }, + "chownr": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz", + "integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4=", + "dev": true + }, + "find-cache-dir": { + "version": "3.3.1", + "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz", + "integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=", + "dev": true, + "requires": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + } + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-4.1.0.tgz?cache=0&sync_timestamp=1597169882796&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-4.1.0.tgz", + "integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz", + "integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1599054167787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz", + "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz", + "integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=", + "dev": true, + "requires": { + "semver": "^6.0.0" + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz", + "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=", + "dev": true + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz", + "integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + } + }, + "p-map": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/p-map/download/p-map-4.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fp-map%2Fdownload%2Fp-map-4.0.0.tgz", + "integrity": "sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=", + "dev": true, + "requires": { + "aggregate-error": "^3.0.0" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-4.0.0.tgz", + "integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=", + "dev": true + }, + "pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602858985920&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz", + "integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=", + "dev": true, + "requires": { + "find-up": "^4.0.0" + } + }, + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz?cache=0&sync_timestamp=1591175021598&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-3.0.2.tgz", + "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz", + "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=", + "dev": true + }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/serialize-javascript/download/serialize-javascript-4.0.0.tgz", + "integrity": "sha1-tSXhI4SJpez8Qq+sw/6Z5mb0sao=", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, + "ssri": { + "version": "8.0.1", + "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz", + "integrity": "sha1-Y45OQ54v+9LNKJd21cpFfE9Roq8=", + "dev": true, + "requires": { + "minipass": "^3.1.1" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz", + "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=", + "dev": true + } + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz", @@ -3638,6 +3874,234 @@ } } }, + "css-minimizer-webpack-plugin": { + "version": "1.0.0", + "resolved": "https://registry.nlark.com/css-minimizer-webpack-plugin/download/css-minimizer-webpack-plugin-1.0.0.tgz?cache=0&sync_timestamp=1624621647030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcss-minimizer-webpack-plugin%2Fdownload%2Fcss-minimizer-webpack-plugin-1.0.0.tgz", + "integrity": "sha1-10ySkbFvIhWsppcXlTdolUS+Uhw=", + "dev": true, + "requires": { + "cacache": "^15.0.5", + "cssnano": "^4.1.10", + "find-cache-dir": "^3.3.1", + "jest-worker": "^26.2.0", + "p-limit": "^3.0.2", + "schema-utils": "^2.7.0", + "serialize-javascript": "^4.0.0", + "source-map": "^0.6.1", + "webpack-sources": "^1.4.3" + }, + "dependencies": { + "cacache": { + "version": "15.2.0", + "resolved": "https://registry.nlark.com/cacache/download/cacache-15.2.0.tgz?cache=0&sync_timestamp=1621949655085&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcacache%2Fdownload%2Fcacache-15.2.0.tgz", + "integrity": "sha1-c69193xY5y2MYwp6KFjLGO9SM4k=", + "dev": true, + "requires": { + "@npmcli/move-file": "^1.0.1", + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "glob": "^7.1.4", + "infer-owner": "^1.0.4", + "lru-cache": "^6.0.0", + "minipass": "^3.1.1", + "minipass-collect": "^1.0.2", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.2", + "mkdirp": "^1.0.3", + "p-map": "^4.0.0", + "promise-inflight": "^1.0.1", + "rimraf": "^3.0.2", + "ssri": "^8.0.1", + "tar": "^6.0.2", + "unique-filename": "^1.1.1" + } + }, + "chownr": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz", + "integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4=", + "dev": true + }, + "find-cache-dir": { + "version": "3.3.1", + "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz", + "integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=", + "dev": true, + "requires": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + } + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-4.1.0.tgz?cache=0&sync_timestamp=1597169882796&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-4.1.0.tgz", + "integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz", + "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", + "dev": true + }, + "jest-worker": { + "version": "26.6.2", + "resolved": "https://registry.nlark.com/jest-worker/download/jest-worker-26.6.2.tgz", + "integrity": "sha1-f3LLxNZDw2Xie5/XdfnQ6qnHqO0=", + "dev": true, + "requires": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^7.0.0" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz", + "integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1599054167787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz", + "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz", + "integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=", + "dev": true, + "requires": { + "semver": "^6.0.0" + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz", + "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=", + "dev": true + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-3.1.0.tgz?cache=0&sync_timestamp=1606290276843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-3.1.0.tgz", + "integrity": "sha1-4drMvnjQ0TiMoYxk/qOOPlfjcGs=", + "dev": true, + "requires": { + "yocto-queue": "^0.1.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz", + "integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + }, + "dependencies": { + "p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz?cache=0&sync_timestamp=1606290276843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-2.3.0.tgz", + "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + } + } + }, + "p-map": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/p-map/download/p-map-4.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fp-map%2Fdownload%2Fp-map-4.0.0.tgz", + "integrity": "sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=", + "dev": true, + "requires": { + "aggregate-error": "^3.0.0" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-4.0.0.tgz", + "integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=", + "dev": true + }, + "pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602858985920&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz", + "integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=", + "dev": true, + "requires": { + "find-up": "^4.0.0" + } + }, + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz?cache=0&sync_timestamp=1591175021598&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-3.0.2.tgz", + "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz", + "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=", + "dev": true + }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/serialize-javascript/download/serialize-javascript-4.0.0.tgz", + "integrity": "sha1-tSXhI4SJpez8Qq+sw/6Z5mb0sao=", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", + "dev": true + }, + "ssri": { + "version": "8.0.1", + "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz", + "integrity": "sha1-Y45OQ54v+9LNKJd21cpFfE9Roq8=", + "dev": true, + "requires": { + "minipass": "^3.1.1" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz", + "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz", + "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=", + "dev": true + } + } + }, "css-select": { "version": "2.1.0", "resolved": "https://registry.npm.taobao.org/css-select/download/css-select-2.1.0.tgz", @@ -4265,9 +4729,9 @@ "dev": true }, "duplexer": { - "version": "0.1.1", - "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.1.tgz", - "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", + "version": "0.1.2", + "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz", + "integrity": "sha1-Or5DrvODX4rgd9E23c4PJ2sEAOY=", "dev": true }, "duplexify": { @@ -5103,7 +5567,7 @@ }, "filesize": { "version": "3.6.1", - "resolved": "https://registry.npm.taobao.org/filesize/download/filesize-3.6.1.tgz", + "resolved": "https://registry.nlark.com/filesize/download/filesize-3.6.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffilesize%2Fdownload%2Ffilesize-3.6.1.tgz", "integrity": "sha1-CQuz7gG2+AGoqL6Z0xcQs0Irsxc=", "dev": true }, @@ -5435,13 +5899,12 @@ "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=" }, "gzip-size": { - "version": "5.1.1", - "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz", - "integrity": "sha1-y5vuaS+HwGErIyhAqHOQTkwTUnQ=", + "version": "6.0.0", + "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-6.0.0.tgz?cache=0&sync_timestamp=1605523244597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgzip-size%2Fdownload%2Fgzip-size-6.0.0.tgz", + "integrity": "sha1-BlNn/VDCOcBnHLy61b4+LusQ5GI=", "dev": true, "requires": { - "duplexer": "^0.1.1", - "pify": "^4.0.1" + "duplexer": "^0.1.2" } }, "handle-thing": { @@ -7140,6 +7603,24 @@ "minipass": "^3.0.0" } }, + "minizlib": { + "version": "2.1.2", + "resolved": "https://registry.nlark.com/minizlib/download/minizlib-2.1.2.tgz", + "integrity": "sha1-6Q00Zrogm5MkUVCKEc49NjIUWTE=", + "dev": true, + "requires": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + }, + "dependencies": { + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz", + "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=", + "dev": true + } + } + }, "mississippi": { "version": "3.0.0", "resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz", @@ -7602,9 +8083,9 @@ } }, "opener": { - "version": "1.5.1", - "resolved": "https://registry.npm.taobao.org/opener/download/opener-1.5.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fopener%2Fdownload%2Fopener-1.5.1.tgz", - "integrity": "sha1-bS8Od/GgrwAyrKcWwsH7uOfoq+0=", + "version": "1.5.2", + "resolved": "https://registry.npm.taobao.org/opener/download/opener-1.5.2.tgz", + "integrity": "sha1-XTfh81B3udysQwE3InGv3rKhNZg=", "dev": true }, "opn": { @@ -8613,6 +9094,67 @@ "integrity": "sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=", "dev": true }, + "progress-bar-webpack-plugin": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-2.1.0.tgz", + "integrity": "sha512-UtlZbnxpYk1wufEWfhIjRn2U52zlY38uvnzFhs8rRxJxC1hSqw88JNR2Mbpqq9Kix8L1nGb3uQ+/1BiUWbigAg==", + "dev": true, + "requires": { + "chalk": "^3.0.0", + "progress": "^2.0.3" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz", @@ -9449,6 +9991,17 @@ } } }, + "sirv": { + "version": "1.0.12", + "resolved": "https://registry.nlark.com/sirv/download/sirv-1.0.12.tgz", + "integrity": "sha1-2BbIgrNUibPGMpDi9FWuPszV9lI=", + "dev": true, + "requires": { + "@polka/url": "^1.0.0-next.15", + "mime": "^2.3.1", + "totalist": "^1.0.0" + } + }, "slash": { "version": "2.0.0", "resolved": "https://registry.npm.taobao.org/slash/download/slash-2.0.0.tgz", @@ -10088,6 +10641,40 @@ "integrity": "sha1-ofzMBrWNth/XpF2i2kT186Pme6I=", "dev": true }, + "tar": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", + "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==", + "dev": true, + "requires": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^3.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + }, + "dependencies": { + "chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", + "dev": true + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } + }, "terser": { "version": "4.8.0", "resolved": "https://registry.npm.taobao.org/terser/download/terser-4.8.0.tgz?cache=0&sync_timestamp=1592448394415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser%2Fdownload%2Fterser-4.8.0.tgz", @@ -10300,6 +10887,12 @@ "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=", "dev": true }, + "totalist": { + "version": "1.1.0", + "resolved": "https://registry.nlark.com/totalist/download/totalist-1.1.0.tgz", + "integrity": "sha1-pNZaPlRlF3AePlw3pHpwrJf+Vt8=", + "dev": true + }, "tough-cookie": { "version": "2.5.0", "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz", @@ -10400,6 +10993,54 @@ } } }, + "uglifyjs-webpack-plugin": { + "version": "2.2.0", + "resolved": "https://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-2.2.0.tgz", + "integrity": "sha1-51vIDn8ZN/cllUybTFoeln6p0Nc=", + "dev": true, + "requires": { + "cacache": "^12.0.2", + "find-cache-dir": "^2.1.0", + "is-wsl": "^1.1.0", + "schema-utils": "^1.0.0", + "serialize-javascript": "^1.7.0", + "source-map": "^0.6.1", + "uglify-js": "^3.6.0", + "webpack-sources": "^1.4.0", + "worker-farm": "^1.7.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.nlark.com/schema-utils/download/schema-utils-1.0.0.tgz?cache=0&sync_timestamp=1626694740261&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fschema-utils%2Fdownload%2Fschema-utils-1.0.0.tgz", + "integrity": "sha1-C3mpMgTXtgDUsoUNH2bCo0lRx3A=", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + }, + "serialize-javascript": { + "version": "1.9.1", + "resolved": "https://registry.nlark.com/serialize-javascript/download/serialize-javascript-1.9.1.tgz", + "integrity": "sha1-z8IArvd7YAxH2pu4FJyUPnmML9s=", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", + "dev": true + }, + "uglify-js": { + "version": "3.14.1", + "resolved": "https://registry.nlark.com/uglify-js/download/uglify-js-3.14.1.tgz?cache=0&sync_timestamp=1627379738025&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fuglify-js%2Fdownload%2Fuglify-js-3.14.1.tgz", + "integrity": "sha1-4suf4025y0z3410dJt/qKOCafQY=", + "dev": true + } + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npm.taobao.org/unicode-canonical-property-names-ecmascript/download/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -11004,30 +11645,93 @@ } }, "webpack-bundle-analyzer": { - "version": "3.8.0", - "resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.8.0.tgz", - "integrity": "sha1-zms/kI2vBp/R9yZvaSy7O97ZuhY=", + "version": "4.4.2", + "resolved": "https://registry.nlark.com/webpack-bundle-analyzer/download/webpack-bundle-analyzer-4.4.2.tgz?cache=0&sync_timestamp=1621259099265&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-4.4.2.tgz", + "integrity": "sha1-OYmM9iABeCQJENYpcF8PNJP31mY=", "dev": true, "requires": { - "acorn": "^7.1.1", - "acorn-walk": "^7.1.1", - "bfj": "^6.1.1", - "chalk": "^2.4.1", - "commander": "^2.18.0", - "ejs": "^2.6.1", - "express": "^4.16.3", - "filesize": "^3.6.1", - "gzip-size": "^5.0.0", - "lodash": "^4.17.15", - "mkdirp": "^0.5.1", - "opener": "^1.5.1", - "ws": "^6.0.0" + "acorn": "^8.0.4", + "acorn-walk": "^8.0.0", + "chalk": "^4.1.0", + "commander": "^6.2.0", + "gzip-size": "^6.0.0", + "lodash": "^4.17.20", + "opener": "^1.5.2", + "sirv": "^1.0.7", + "ws": "^7.3.1" }, "dependencies": { "acorn": { - "version": "7.3.1", - "resolved": "https://registry.npm.taobao.org/acorn/download/acorn-7.3.1.tgz?cache=0&sync_timestamp=1591869439113&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-7.3.1.tgz", - "integrity": "sha1-hQEHVNtTw/uvO56j4IOqXF0Uf/0=", + "version": "8.4.1", + "resolved": "https://registry.nlark.com/acorn/download/acorn-8.4.1.tgz", + "integrity": "sha1-VsNiUfx8q8cJatwY8Fr+gUMhoow=", + "dev": true + }, + "acorn-walk": { + "version": "8.1.1", + "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-8.1.1.tgz?cache=0&sync_timestamp=1624951990736&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-8.1.1.tgz", + "integrity": "sha1-Pdq3+E5KfiMT9sQUxbfayF9OPrw=", + "dev": true + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz", + "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz", + "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz", + "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", + "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", + "dev": true + }, + "commander": { + "version": "6.2.1", + "resolved": "https://registry.nlark.com/commander/download/commander-6.2.1.tgz?cache=0&sync_timestamp=1627358203890&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-6.2.1.tgz", + "integrity": "sha1-B5LraC37wyWZm7K4T93duhEKxzw=", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz", + "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz", + "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "ws": { + "version": "7.5.3", + "resolved": "https://registry.nlark.com/ws/download/ws-7.5.3.tgz?cache=0&sync_timestamp=1627496096076&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fws%2Fdownload%2Fws-7.5.3.tgz", + "integrity": "sha1-Fgg1tjx9l7+rQY/BuKn87SrAGnQ=", "dev": true } } @@ -11608,6 +12312,12 @@ "decamelize": "^1.2.0" } }, + "yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npm.taobao.org/yocto-queue/download/yocto-queue-0.1.0.tgz?cache=0&sync_timestamp=1606290282107&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyocto-queue%2Fdownload%2Fyocto-queue-0.1.0.tgz", + "integrity": "sha1-ApTrPe4FAo0x7hpfosVWpqrxChs=", + "dev": true + }, "yorkie": { "version": "2.0.0", "resolved": "https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz", diff --git a/package.json b/package.json index 48cc4a9..06ef5d7 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,33 @@ { - "name": "mxgraph-easyeditor", + "name": "Mxgraph-EasyFlowEditor", "version": "0.1.0", "private": true, + "homepage": "https://Jason-chen-coder.github.io/Mxgraph-EasyFlowEditor", + "pre-commit": [ + "pre-commit" + ], + "main": "./main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "dev": "cross-env BABEL_ENV=development ./node_modules/.bin/webpack-dev-server --progress --devtool eval-source-map --config build/webpack.dev.conf.js", + "start": "yarn lint && yarn dll && yarn dev", + "del:dll": "./node_modules/.bin/rimraf vendor", + "compile:dll": "./node_modules/.bin/webpack --config build/webpack.dll.conf.js --colors --profile", + "dll": "yarn del:dll && yarn compile:dll", + "build:report": "npm_config_report=true node --max_old_space_size=4096 build/build.js", + "pre-commit": "echo 'Pre-commit checks...' && yarn switch-source-in && yarn lint2", + "switch-source-in": "bash ./scripts/switch_source.sh i", + "lint3": "./node_modules/.bin/eslint --fix --ext .js,.jsx,.ts,.tsx,.vue src && ./node_modules/.bin/tslint --fix 'src/**/*{.ts,.tsx}'", + "test": "cross-env NODE_ENV=test jest --config jest.config.js", + "del:components": "./node_modules/.bin/rimraf components", + "copy": "./node_modules/.bin/gulp copy", + "babel": "./node_modules/.bin/babel components -d components", + "components": "yarn del:components && yarn copy && yarn babel", + "deploy": "node --max_old_space_size=4096 build/build.js", + "clean:node": "rm -Rf ./node_modules", + "change:version": "./node/node ./ci_script/changeVersion.js" }, "dependencies": { "core-js": "^3.6.5", @@ -28,9 +50,14 @@ "@vue/cli-plugin-eslint": "~4.4.0", "@vue/cli-service": "~4.4.0", "babel-eslint": "^10.1.0", + "compression-webpack-plugin": "^5.0.1", + "css-minimizer-webpack-plugin": "^1.0.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", - "vue-template-compiler": "^2.6.11" + "progress-bar-webpack-plugin": "^2.1.0", + "uglifyjs-webpack-plugin": "^2.2.0", + "vue-template-compiler": "^2.6.11", + "webpack-bundle-analyzer": "^4.4.2" }, "eslintConfig": { "root": true, diff --git a/public/index.html b/public/index.html index d2e66e8..42924a9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,3 +1,11 @@ + @@ -9,15 +17,140 @@ <%= htmlWebpackPlugin.options.title %> + - + +
+ Loading... +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- + + \ No newline at end of file diff --git "a/src/PlanADDFunction/\351\274\240\346\240\207\346\202\254\346\265\256\346\267\273\345\212\240\345\233\276\346\240\207.html" "b/src/PlanADDFunction/\351\274\240\346\240\207\346\202\254\346\265\256\346\267\273\345\212\240\345\233\276\346\240\207.html" new file mode 100644 index 0000000..872e2f4 --- /dev/null +++ "b/src/PlanADDFunction/\351\274\240\346\240\207\346\202\254\346\265\256\346\267\273\345\212\240\345\233\276\346\240\207.html" @@ -0,0 +1,201 @@ + + + + + Hover icons example for mxGraph + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/src/graph/index.js b/src/graph/index.js index 2d95385..5524005 100644 --- a/src/graph/index.js +++ b/src/graph/index.js @@ -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 \ No newline at end of file +/* + * @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 +} \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index d7af090..11fbed3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,3 +1,11 @@ +/* + * @Descripttion: + * @version: + * @Author: Jason chen + * @Date: 2020-06-26 17:46:26 + * @LastEditors: Jason chen + * @LastEditTime: 2021-08-30 15:13:17 + */ // 导入 vue-router import Vue from 'vue'; import VueRouter from 'vue-router' @@ -13,15 +21,15 @@ const router = new VueRouter({ routes: [ { path: '/', - component: () => import("../views/customToolbar/customToolbar.vue"), + component: () => import(/*webpackChunkName: "my-customToolbar-chunk"*/ "../views/customToolbar/customToolbar.vue"), }, { path: "/customToolbar", - component: () => import("../views/customToolbar/customToolbar.vue") + component: () => import(/*webpackChunkName: "my-customToolbar-chunk"*/ "../views/customToolbar/customToolbar.vue") }, { path: "/renderModel", - component: () => import("../views/renderModel/index.vue") + component: () => import(/*webpackChunkName: "renderModel-chunk"*/"../views/renderModel/index.vue") } ] }) diff --git a/src/views/customToolbar/GroupToolbarItems.js b/src/views/customToolbar/GroupToolbarItems.js index 93e414a..d7c0263 100644 --- a/src/views/customToolbar/GroupToolbarItems.js +++ b/src/views/customToolbar/GroupToolbarItems.js @@ -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', @@ -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}`); @@ -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}`); @@ -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}`); @@ -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}`); @@ -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}`); @@ -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}`); @@ -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}`); diff --git a/src/views/customToolbar/customToolbar.vue b/src/views/customToolbar/customToolbar.vue index f51779f..5852065 100644 --- a/src/views/customToolbar/customToolbar.vue +++ b/src/views/customToolbar/customToolbar.vue @@ -767,6 +767,7 @@ export default { if (!(toolbarDomArray instanceof Array) || toolbarDomArray.length <= 0) { return; } + toolbarDomArray.forEach((dom, domIndex) => { var toolItem = this.toolbarItems[domIndex]; var { width, height } = toolItem; diff --git a/src/views/customToolbar/general-shape.js b/src/views/customToolbar/general-shape.js index c073656..b686fb6 100644 --- a/src/views/customToolbar/general-shape.js +++ b/src/views/customToolbar/general-shape.js @@ -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, @@ -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, } diff --git a/src/views/customToolbar/toolbar.js b/src/views/customToolbar/toolbar.js index 311ecb0..87f5d3c 100644 --- a/src/views/customToolbar/toolbar.js +++ b/src/views/customToolbar/toolbar.js @@ -1,10 +1,10 @@ // import { -// mxConstants as mxConstants +// MxConstants as MxConstants // } from 'mxgraph-js' // const closeIcon = require('@/assets/icon/delete.png') -import mxgraph from "../../graph/index"; -const { mxConstants } = mxgraph; +import { MxConstants } from "../../graph/index"; +// const { MxConstants } = mxgraph; const boxDomain = './icon/boxDomain.png' const center = './icon/center.png' const database = './icon/database.png' @@ -32,11 +32,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', strokeColor: '#000000', strokeWidth: '1', - shape: mxConstants.SHAPE_LABEL, - align: mxConstants.ALIGN_TOP, - verticalAlign: mxConstants.ALIGN_BOTTOM, - imageAlign: mxConstants.ALIGN_CENTER, // 背景图的水平方向的定位 - imageVerticalAlign: mxConstants.ALIGN_TOP, // 背景图垂直方向的定位 + shape: MxConstants.SHAPE_LABEL, + align: MxConstants.ALIGN_TOP, + verticalAlign: MxConstants.ALIGN_BOTTOM, + imageAlign: MxConstants.ALIGN_CENTER, // 背景图的水平方向的定位 + imageVerticalAlign: MxConstants.ALIGN_TOP, // 背景图垂直方向的定位 image: boxDomain } }, @@ -53,11 +53,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_CENTER, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_TOP, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 image: center // 图形 } }, @@ -74,11 +74,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_CENTER, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_TOP, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 image: database // 图形 } }, @@ -95,11 +95,11 @@ export const toolbarItems = [ // fillColor: '#FFFFFF', // 填充色 // strokeColor: '#000000', // 线条颜色 // strokeWidth: '1', // 线条粗细 - // shape: mxConstants.SHAPE_LABEL, // 形状 - // align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - // verticalAlign: mxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 - // imageAlign: mxConstants.ALIGN_CENTER, // 图形水平方向对其方式 - // imageVerticalAlign: mxConstants.ALIGN_TOP, // 图形方向对其方式 + // shape: MxConstants.SHAPE_LABEL, // 形状 + // align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + // verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 + // imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 + // imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 // image: authorizate // 图形 // } // }, @@ -116,11 +116,11 @@ export const toolbarItems = [ // fillColor: '#FFFFFF', // 填充色 // strokeColor: '#000000', // 线条颜色 // strokeWidth: '1', // 线条粗细 - // shape: mxConstants.SHAPE_LABEL, // 形状 - // align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - // verticalAlign: mxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 - // imageAlign: mxConstants.ALIGN_CENTER, // 图形水平方向对其方式 - // imageVerticalAlign: mxConstants.ALIGN_TOP, // 图形方向对其方式 + // shape: MxConstants.SHAPE_LABEL, // 形状 + // align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + // verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 + // imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 + // imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 // image: cluster // 图形 // } // }, @@ -137,11 +137,11 @@ export const toolbarItems = [ // fillColor: '#FFFFFF', // 填充色 // strokeColor: '#000000', // 线条颜色 // strokeWidth: '1', // 线条粗细 - // shape: mxConstants.SHAPE_LABEL, // 形状 - // align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - // verticalAlign: mxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 - // imageAlign: mxConstants.ALIGN_CENTER, // 图形水平方向对其方式 - // imageVerticalAlign: mxConstants.ALIGN_TOP, // 图形方向对其方式 + // shape: MxConstants.SHAPE_LABEL, // 形状 + // align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + // verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 + // imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 + // imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 // image: exchange // 图形 // }, // }, @@ -158,11 +158,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: elasticsearch // 图形 }, }, @@ -179,11 +179,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: kibana // 图形 }, }, @@ -200,11 +200,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: logstash // 图形 }, }, @@ -221,11 +221,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: KAFKA // 图形 }, }, @@ -242,11 +242,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: beats // 图形 }, }, @@ -263,11 +263,11 @@ export const toolbarItems = [ fillColor: '#FFFFFF', // 填充色 strokeColor: '#000000', // 线条颜色 strokeWidth: '1', // 线条粗细 - shape: mxConstants.SHAPE_LABEL, // 形状 - align: mxConstants.ALIGN_CENTER, // 水平方向对其方式 - verticalAlign: mxConstants.ALIGN_CENTER, // 垂直方向对其方式 - imageAlign: mxConstants.ALIGN_LEFT, // 图形水平方向对其方式 - imageVerticalAlign: mxConstants.ALIGN_CENTER, // 图形方向对其方式 + shape: MxConstants.SHAPE_LABEL, // 形状 + align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 + verticalAlign: MxConstants.ALIGN_CENTER, // 垂直方向对其方式 + imageAlign: MxConstants.ALIGN_LEFT, // 图形水平方向对其方式 + imageVerticalAlign: MxConstants.ALIGN_CENTER, // 图形方向对其方式 image: redis // 图形 }, }, diff --git a/src/views/renderModel/index.js b/src/views/renderModel/index.js new file mode 100644 index 0000000..eb6f626 --- /dev/null +++ b/src/views/renderModel/index.js @@ -0,0 +1,70 @@ +/* + * @Descripttion: + * @version: + * @Author: Jason chen + * @Date: 2021-08-31 11:10:34 + * @LastEditors: Jason chen + * @LastEditTime: 2021-08-31 11:13:05 + */ +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' +}) + +// Object.keys(mxgraph).forEach((key) => { +// window[key] = mxgraph[key]; +// }); + +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 +} \ No newline at end of file diff --git a/src/views/renderModel/index.vue b/src/views/renderModel/index.vue index f877ccb..b8d53b3 100644 --- a/src/views/renderModel/index.vue +++ b/src/views/renderModel/index.vue @@ -5,21 +5,53 @@
Easy Editor
+ style=" + color: rgb(64, 158, 255); + font-weight: 800; + font-size: 22px; + margin-left: 44px; + " + > + Easy Editor + - - + + - - + + - + @@ -29,8 +61,17 @@ - - + + -
] +
+ ]