Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
deeae6e7 1 parent 13acee2c

🎉 init:

Expand all
Inline Side-by-side
Showing 147 changed files with 1768 additions and 0 deletions
1 +> 1%
2 +last 2 versions
1 +node_modules
1 +MIT License
2 +
3 +Copyright (c) 2020 martsforever
4 +
5 +Permission is hereby granted, free of charge, to any person obtaining a copy
6 +of this software and associated documentation files (the "Software"), to deal
7 +in the Software without restriction, including without limitation the rights
8 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 +copies of the Software, and to permit persons to whom the Software is
10 +furnished to do so, subject to the following conditions:
11 +
12 +The above copyright notice and this permission notice shall be included in all
13 +copies or substantial portions of the Software.
14 +
15 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 +SOFTWARE.
1 +# vue-flow-editor-vue3.0
2 +
3 +## 简介
4 +
5 +vue-flow-editor 是基于 Vue3.0 以及 G6@3.1.10 实现的流程编辑器。在线操作地址：
6 +
7 +## 特点
8 +
9 +- 兼容ie；
10 +- 轻量级依赖
11 + - 依赖于 Vue3.0、g6、element-plus，但是打包的 vue-flow-editor 中是不包含这些依赖的，
12 + 由开发者手动引入，方便管理依赖；
13 + - 对G6的连接线进行了简单封装，对节点无影响。开发者可以使用G6的默认节点以实现自定义的样式；
14 + - 操作丰富，请见操作手册；
15 +- 界面简洁，左侧菜单栏以及顶部工具栏都有插槽供开发者自定义内容；
16 +- 内置一个右侧弹出框，开发者可以通过插槽，以及手动打开这个弹出框以编辑节点内容；
17 +
18 +## 安装
19 +
20 +### npm安装
21 +
22 +npm i 所有包我都配置好了，记住不要用cnpm i，不然有个包下不下来
23 +
24 +装好执行 npm run start 就行了
25 +
26 +### 静态引入
27 +
28 +参考docs\demo.html，还是2.0的要用自己改一下，只是把非静态引入的改了
29 +
30 +## vue-flow-editor 属性说明
31 +
32 +|属性名称|类型|默认值|可选值|说明|
33 +| --- | --- | --- | --- | --- |
34 +| data | object | --- | --- | 渲染的数据，数据格式参考G6文档 |
35 +| grid | boolean | true | --- | 是否开启网格 |
36 +| miniMap | boolean | false | --- | 是否开启缩略图 |
37 +| --- | --- | --- | --- | --- |
38 +| disabledDragEdge | boolean | --- | --- | 是否禁用拖拽连线 |
39 +| disabledUndo | boolean | --- | --- | 是否禁用撤销/重做 |
40 +| --- | --- | --- | --- | --- |
41 +| height| number,string | 100%| --- | 画布高度 |
42 +| toolbarHeight | string,number | 50px | --- | 工具栏高度 |
43 +| menuWidth | string,number | 250px | --- | 菜单栏宽度 |
44 +| modelWidth | string,number | 500px | --- | 右侧弹框宽度 |
45 +| --- | --- | --- | --- | --- |
46 +| onRef | (editor:object null )=>void | --- | --- | 获取组件的引用时，传递的函数，参数为组件暴露的函数以及响应式变量 |
47 +| toolbarButtonHandler | (object:[])=>object[] | --- | --- | 对工具栏按钮做格式化的函数 |
48 +| loading | boolean | --- | --- | 开始编辑器的loading状态 |
49 +| multipleSelect | boolean | true | --- | 编辑器是否可以多选 |
50 +| --- | --- | --- | --- | --- |
51 +| beforeDelete | (model:object)=>Promise<any> | --- | --- | 删除前校验 |
52 +| afterDelete | (model:object)=>Promise<any> | --- | --- | 删除后动作 |
53 +| beforeAdd | (model:object)=>Promise<any> | --- | --- | 添加前校验 |
54 +| afterAdd | (model:object)=>Promise<any> | --- | --- | 添加后动作 |
55 +
56 +## 通过 onRef 得到的对象
57 +
58 +|属性名称|类型|说明|
59 +| --- | --- | --- |
60 +| editorState | object | 编辑器组件内部状态变量 |
61 +| commander | object | 命令对象，画布中所有操作都是通过commander进行的，以便实现撤销以及重做 |
62 +| openModel | function | 打开右侧弹框 |
63 +| closeModel | function | 关闭右侧弹框 |
64 +| updateModel | function | 更新model |
65 +| openPreview | function | 打开预览对话框 |
66 +
67 +## 操作手册
68 +
69 +### 工具栏
70 +
71 +从左至右依次为：
72 +- 开启/关闭网格；
73 +- 开启/关闭缩略图；
74 +- 适应画布（画布缩放适应界面大小）；
75 +- 实际尺寸（画布中元素大小为实际像素大小）；
76 +- 撤销；
77 +- 重做；
78 +- 放大；
79 +- 缩小；
80 +- 删除（选中节点之后删除）；
81 +- 预览（在弹框中以适应画布的模式展示画布内容）；
82 +
83 +### 选择
84 +
85 +- 单击 节点/边 可以选中，选中的时候样式会有变化；
86 +- 摁住 shift单击 可以选中多个 节点/边；
87 +- 摁住 shift可以拖拽生成一个选择框，框内的 节点/边 会被选中；
88 +- 鼠标在画布内快捷键 CTRL+A 可以全选；
89 +- 多选的时候拖拽节点，会拖拽所有的节点；
90 +
91 +### 新建节点/边
92 +
93 +- 从左侧选项菜单列表中拖拽菜单到画布可以添加节点；
94 +- 悬浮在节点内，会显示用来连接线的指示节点，点击拖拽连接其他节点的指示节点可以新建连线（这个不是特别灵敏，拖拽指示节点的时候稍微慢一点）；
95 +- 右侧选项菜单中有各种形状的节点供拖拽展示；
96 +
97 +### 编辑
98 +
99 +- 双击节点会弹出编辑器右侧的编辑框（这个动作是开发者自定义的，可以自定义弹框编辑节点内容）；
100 +- 编辑器右侧的编辑框内的内容是自定义的，可以根据节点内容动态变化，显示不同的表单内容；比如实例中，【开始】以及【结束】节点就只能编辑节点名称；而【审批节点】可以从下拉选项中选择【节点任务内容】；
101 +
102 +# 后续待完成的功能
103 +
104 +- 节点增加宽度以及高度的功能；
105 +- 节点复制；
106 +
107 +# 其他
108 +
109 +- vue-flow-editor是基于 Vue3.0 + typescript 实现的库
110 +- 如遇到元素突然不能拖拽的话，先点击一下旁边画布，再重新点击元素就可拖拽了
...\ No newline at end of file ...\ No newline at end of file
......
1 +module.exports = {
2 + sourceType: 'unambiguous', // 打包G6的时候才需要的属性
3 + presets: ['vca-jsx', '@vue/app'],
4 + plugins: ["@babel/plugin-transform-modules-umd"]
5 +};
1 +const $utils = require('./build.utils')
2 +
3 +module.exports = {
4 + outputDir: 'docs/lib',
5 + transpileDependencies: [
6 + '@antv',
7 + 'd3-force',
8 + ],
9 + configureWebpack: {
10 + entry: {
11 + 'G6': $utils.resolve('src/build.g6.ts')
12 + },
13 + output: {
14 + filename: `g6.umd.min.js`,
15 + libraryTarget: 'umd',
16 + library: ['G6'],
17 + globalObject: 'this'
18 + },
19 + },
20 + chainWebpack: config => {
21 + config.optimization.delete('splitChunks')
22 + config.plugins.delete('copy')
23 + config.plugins.delete('preload')
24 + config.plugins.delete('prefetch')
25 +
26 + config.plugins.delete('html')
27 + config.plugins.delete('hmr')
28 + config.entryPoints.delete('app')
29 + }
30 +}
...\ No newline at end of file ...\ No newline at end of file
1 +const path = require('path')
2 +const fs = require('fs')
3 +const resolve = (dir) => path.join(__dirname, '../', dir)
4 +const packageJson = require('../package')
5 +const join = path.join
6 +const webpack = require('webpack')
7 +const WebpackMerge = require('webpack-merge')
8 +
9 +/**
10 + * 转为驼峰命名
11 + * @author 韦胜健
12 + * @date 2018/11/19
13 + */
14 +function camelCase(name) {
15 + const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
16 + const MOZ_HACK_REGEXP = /^moz([A-Z])/;
17 + return name
18 + .replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
19 + return offset ? letter.toUpperCase() : letter;
20 + })
21 + .replace(MOZ_HACK_REGEXP, 'Moz$1');
22 +}
23 +
24 +const entryName = (() => {
25 + let name = packageJson.name
26 + let separatorIndex = name.indexOf('/')
27 + if (separatorIndex > -1) {
28 + name = name.substring(separatorIndex + 1)
29 + }
30 + return name
31 +})();
32 +
33 +module.exports = {
34 + // 当前是否为生产模式
35 + isProduction: process.env.NODE_ENV === 'production',
36 + // 包名
37 + packageName: packageJson.name,
38 + // 打包主入口文件名
39 + entryName,
40 + // 打包暴露对象名称
41 + libraryName: (() => {
42 + let name = camelCase(entryName)
43 + name = name.charAt(0).toUpperCase() + name.substring(1)
44 + return name
45 + })(),
46 + // 版本
47 + version: packageJson.version,
48 + webpack,
49 + WebpackMerge,
50 + resolve,
51 + join,
52 + camelCase,
53 + argv: (() => {
54 + const args = process.argv.slice(2)
55 + return args.reduce((ret, item) => {
56 + if (item.indexOf('=') > -1) {
57 + const [key, value] = item.split('=')
58 + ret[key] = value
59 + } else if (item.indexOf('--') > -1) {
60 + const key = item.replace('--', '')
61 + ret[key] = true
62 + }
63 + return ret
64 + }, {})
65 + })(),
66 + isExist(path) {
67 + try {
68 + return fs.statSync(path)
69 + } catch (e) {
70 + return null
71 + }
72 + },
73 + checkEntries(path) {
74 + let files = fs.readdirSync(resolve(path));
75 + files.forEach((item) => {
76 + let itemPath = join(path, item)
77 + let isDir = fs.statSync(itemPath).isDirectory();
78 + if (isDir) {
79 + let p;
80 + p = resolve(join(itemPath, 'index.js'))
81 + if (!!this.isExist(p)) {
82 + return
83 + }
84 + p = resolve(join(itemPath, 'index.ts'))
85 + if (!!this.isExist(p)) {
86 + return
87 + }
88 + p = resolve(join(itemPath, 'index.tsx'))
89 + if (!!this.isExist(p)) {
90 + return
91 + }
92 + console.log(`create index file:` + p)
93 + fs.writeFileSync(join(itemPath, 'index.js'), `
94 +import component from './pl-${item}.vue'
95 +import {plugin} from "../../utils";
96 +export default plugin(component)
97 + `.trim())
98 + }
99 + })
100 + },
101 + getEntries(path) {
102 + let files = fs.readdirSync(resolve(path));
103 + const componentEntries = files.reduce((ret, item) => {
104 + let itemPath = join(path, item)
105 + let isDir = fs.statSync(itemPath).isDirectory();
106 + if (isDir) {
107 + let p;
108 + p = resolve(join(itemPath, 'index.js'))
109 + if (!!this.isExist(p)) {
110 + ret[item] = p
111 + }
112 + p = resolve(join(itemPath, 'index.ts'))
113 + if (!!this.isExist(p)) {
114 + ret[item] = p
115 + }
116 + p = resolve(join(itemPath, 'index.tsx'))
117 + if (!!this.isExist(p)) {
118 + ret[item] = p
119 + }
120 + } else {
121 + const [name] = item.split('.')
122 + ret[name] = resolve(`${itemPath}`)
123 + }
124 + return ret
125 + }, {})
126 + return componentEntries
127 + },
128 +}
1 +/*
2 + * @Date: 2021-08-18 12:47:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-10-26 10:10:07
5 + * @FilePath: /vue-flow-editor-for-vue3.0-master/build/docs.js
6 + * @Description: 文件描述
7 + */
8 +const $utils = require('./build.utils')
9 +
10 +module.exports = {
11 + publicPath: './',
12 + outputDir: 'docs',
13 + devServer: {
14 + port: '4488'
15 + },
16 + pages: {
17 + index: {
18 + entry: $utils.resolve('doc/main.ts'),
19 + template: 'public/index.html',
20 + filename: 'index.html',
21 + title: 'vue-flow-editor',
22 + chunks: ['chunk-vendors', 'chunk-common', 'index'],
23 + },
24 + },
25 + configureWebpack:{
26 + module: {
27 + rules: [
28 + {
29 + test: /\.mjs$/,
30 + include: /node_modules/,
31 + type: "javascript/auto"
32 + },
33 + ]
34 + }
35 + },
36 +}
1 +/*
2 + * @Date: 2021-08-18 12:47:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-10-25 18:27:38
5 + * @FilePath: /vue-flow-editor-for-vue3.0-master/build/index.js
6 + * @Description: 文件描述
7 + */
8 +const $utils = require('./build.utils')
9 +
10 +// const argv = $utils.argv
11 +
12 +// if (argv.g6) {
13 +// return module.exports = require('./build.g6')
14 +// }
15 +
16 +// if (!argv.release) {
17 +// return module.exports = require('./docs')
18 +// } else {
19 +// return module.exports = require('./release')
20 +// }
21 +
22 +module.exports = require('./docs')
1 +const $utils = require('./build.utils')
2 +
3 +console.log('build umd')
4 +
5 +module.exports = {
6 + publicPath: './',
7 + outputDir: 'docs/dist',
8 + configureWebpack: {
9 + entry: {
10 + 'vue-flow-editor': $utils.resolve('src/index.ts')
11 + },
12 + output: {
13 + filename: `vue-flow-editor.js`,
14 + libraryTarget: 'umd',
15 + libraryExport: 'default',
16 + library: ['VueFlowEditor'],
17 + globalObject: 'this'
18 + },
19 + },
20 + css: {
21 + sourceMap: true,
22 + extract: {
23 + filename: `[name].css`
24 + }
25 + },
26 + chainWebpack: config => {
27 + config.optimization.delete('splitChunks')
28 + config.plugins.delete('copy')
29 + config.plugins.delete('preload')
30 + config.plugins.delete('prefetch')
31 + config.plugins.delete('html')
32 + config.plugins.delete('hmr')
33 + config.entryPoints.delete('app')
34 + }
35 +}
1 +<template>
2 + <div class="app" style="height: 100vh">
3 + <vue-flow-editor
4 + ref="editor"
5 + :data="state.data"
6 + :grid="showGrid"
7 + :miniMap="showMiniMap"
8 + :onRef="onRef"
9 + :multipleSelect="true"
10 + :loading="state.editorLoading"
11 + :beforeDelete="handleBeforeDelete"
12 + :afterDelete="handleAfterDelete"
13 + :beforeAdd="handleBeforeAdd"
14 + :afterAdd="handleAfterAdd"
15 + @dblclick-node="onDblclickNode"
16 + @dblclick-edge="onDblClickEdge"
17 + :activityConfig="state.activityConfig"
18 + >
19 + <template v-slot:menu>
20 + <vue-flow-edit-menu-group label="活动节点" value>
21 + <vue-flow-edit-menu
22 + v-for="(value, key) in state.activityConfig"
23 + :key="key"
24 + :model="{ activity: key, text: value.text, desc: value.desc }"
25 + >
26 + <template v-slot:content>
27 + <div class="activity-menu">
28 + <img :src="value.img" />
29 + <span>{{ value.text }}</span>
30 + </div>
31 + </template>
32 + </vue-flow-edit-menu>
33 + </vue-flow-edit-menu-group>
34 + <vue-flow-edit-menu-group
35 + v-for="(group, groupIndex) in state.menuData"
36 + :label="group.label"
37 + :key="groupIndex"
38 + value
39 + >
40 + <vue-flow-edit-menu
41 + v-for="(menu, menuIndex) in group.menus"
42 + :key="menuIndex"
43 + :model="menu"
44 + />
45 + </vue-flow-edit-menu-group>
46 + </template>
47 +
48 + <template v-slot:model>
49 + <el-form
50 + v-if="!!state.detailModel"
51 + ref="form"
52 + :model="state.detailModel"
53 + label-width="100px"
54 + >
55 + <template v-if="state.detailModel.activity === undefined">
56 + <el-form-item label="节点名称" prop="label">
57 + <el-input v-model="state.detailModel.label" />
58 + </el-form-item>
59 + <el-form-item label="测试属性" prop="label">
60 + <el-input v-model="state.detailModel.data.test" />
61 + </el-form-item>
62 +
63 + <template v-if="state.detailModel.type !== 'edge'">
64 + <el-form-item label="节点背景色" prop="style.fill">
65 + <el-color-picker v-model="state.detailModel.style.fill" />
66 + </el-form-item>
67 + <el-form-item label="节点边框色" prop="style.stroke">
68 + <el-color-picker v-model="state.detailModel.style.stroke" />
69 + </el-form-item>
70 + <el-form-item label="节点文字色" prop="labelCfg.style.stroke">
71 + <el-color-picker
72 + v-model="state.detailModel.labelCfg.style.fill"
73 + />
74 + </el-form-item>
75 + </template>
76 + </template>
77 + <template v-else>
78 + <el-form-item label="活动标题">
79 + <el-input v-model="state.detailModel.text" />
80 + </el-form-item>
81 + <el-form-item label="活动副标题">
82 + <el-input v-model="state.detailModel.desc" />
83 + </el-form-item>
84 + <el-form-item label="活动类型">
85 + <el-select v-model="state.detailModel.activity">
86 + <el-option
87 + v-for="(value, key) in state.activityConfig"
88 + :key="key"
89 + :label="value.text"
90 + :value="key"
91 + />
92 + </el-select>
93 + </el-form-item>
94 + </template>
95 + </el-form>
96 + </template>
97 +
98 + <template v-slot:toolbar>
99 + <el-tooltip content="测试工具栏插槽">
100 + <div class="vue-flow-editor-toolbar-item" @click="logData">
101 + <i class="el-icon-search" />
102 + </div>
103 + </el-tooltip>
104 + </template>
105 +
106 + <template v-slot:foot>
107 + <el-button type="primary" @click="save">保存</el-button>
108 + <el-button @click="cancel">取消</el-button>
109 + </template>
110 + </vue-flow-editor>
111 + </div>
112 +</template>
113 +
114 +<script lang="ts">
115 +import { reactive } from "vue";
116 +import { AppData } from "./data.js";
117 +import { staticPath } from "./utils";
118 +import { ElNotification } from 'element-plus'
119 +
120 +const G6 = (window as any).G6.default as any;
121 +
122 +function delay(time) {
123 + return new Promise((resolve) => setTimeout(resolve, time));
124 +}
125 +
126 +export default {
127 + setup(props, context) {
128 + const state = reactive({
129 + data: AppData,
130 + detailModel: null,
131 + editorLoading: false,
132 + selectOptions: [
133 + { label: "待确认", value: "0" },
134 + { label: "填写表单", value: "1" },
135 + { label: "部门负责人审批", value: "2" },
136 + { label: "总经理审批", value: "3" },
137 + ],
138 + menuData: [
139 + {
140 + label: "流程节点",
141 + menus: [
142 + { label: "开始", shape: "ellipse", id: "start-node" },
143 + { label: "结束", shape: "ellipse", id: "end-node" },
144 + { label: "审批节点", busType: "123" },
145 + { label: "判断节点", shape: "diamond" },
146 + ],
147 + },
148 + {
149 + label: "其他形状节点",
150 + menus: [
151 + { label: "矩形节点", shape: "rect" },
152 + { label: "圆形节点", shape: "circle" },
153 + { label: "椭圆节点", shape: "ellipse" },
154 + { label: "菱形节点", shape: "diamond" },
155 + { label: "三角形节点", shape: "triangle" },
156 + { label: "星形节点", shape: "star" },
157 + ],
158 + },
159 + ],
160 + activityConfig: {
161 + advertisement: {
162 + text: "广告宣传1",
163 + desc: "通过广告宣传新品",
164 + color: "#9283ed",
165 + img: 'https://cdn.ipadbiz.cn/oa/advertisement-node.svg',
166 + },
167 + coupon: {
168 + text: "优惠券",
169 + desc: "发放奖励优惠券",
170 + color: "#ed8383",
171 + img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
172 + },
173 + crowd: {
174 + text: "用户反馈",
175 + desc: "收集用户反馈信息",
176 + color: "#92dba8",
177 + img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg',
178 + },
179 + },
180 + });
181 +
182 + let editor;
183 +
184 + function onDblclickNode(e) {
185 + const model = G6.Util.clone(e.item.get("model"));
186 + model.style = model.style || {};
187 + model.labelCfg = model.labelCfg || { style: {} };
188 +
189 + state.detailModel = model;
190 + editor.openModel();
191 + }
192 +
193 + function onDblClickEdge(e) {
194 + const { source, target, style, labelCfg, label } = e.item.get("model");
195 + const model = {
196 + label,
197 + source,
198 + target,
199 + style: style || {},
200 + labelCfg: labelCfg || { style: {} },
201 + type: null,
202 + id: null,
203 + };
204 + model.type = e.item.get("type");
205 + model.id = e.item.get("id");
206 +
207 + state.detailModel = model;
208 + editor.openModel();
209 + }
210 +
211 + function cancel() {
212 + editor.closeModel();
213 + }
214 +
215 + function save() {
216 + editor.updateModel(state.detailModel);
217 + editor.closeModel();
218 + }
219 +
220 + async function handleBeforeDelete(model, type) {
221 + if (type === "node") {
222 + if (model.label === "开始") {
223 + state.editorLoading = true;
224 + await delay(1000);
225 + state.editorLoading = false;
226 + ElNotification.error("不可以删除【开始】节点");
227 + return Promise.reject("reject");
228 + }
229 + }
230 + }
231 +
232 + function handleAfterDelete(model, type) {
233 + if (type === "edge") {
234 + console.log("delete edge");
235 + } else {
236 + console.log("after delete", model.label, { ...model });
237 + }
238 + }
239 +
240 + function handleBeforeAdd(model, type) {
241 + if (type === "edge") {
242 + if (model.source === "end-node") {
243 + ElNotification.error("结束节点不能输出连线其他节点");
244 + return Promise.reject("reject");
245 + }
246 + }
247 + if (type === "node") {
248 + if (model.id === "start-node" || model.id === "end-node") {
249 + const data = editor.editorState.graph.save();
250 + for (let i = 0; i < data.nodes.length; i++) {
251 + const node = data.nodes[i];
252 + if (node.id === model.id) {
253 + ElNotification.error(
254 + `只能有一个${model.id === "start-node" ? "开始" : "结束"}节点`
255 + );
256 + return Promise.reject("reject");
257 + }
258 + }
259 + }
260 + }
261 + }
262 +
263 + function handleAfterAdd(model, type) {
264 + if (type === "edge") {
265 + console.log(`新增连接线`);
266 + }
267 + }
268 +
269 + function logData() {
270 + let { nodes, edges } = editor.editorState.graph.save();
271 + nodes = nodes.map(
272 + ({ data, id, label, shape, x, y, text, desc, img }) => ({
273 + data,
274 + id,
275 + label,
276 + shape,
277 + x,
278 + y,
279 + text,
280 + desc,
281 + img,
282 + })
283 + );
284 + edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
285 + source,
286 + sourceAnchor,
287 + target,
288 + targetAnchor,
289 + }));
290 + console.log(JSON.stringify({ nodes, edges }, null, 2));
291 + }
292 +
293 + return {
294 + state,
295 +
296 + showGrid: true,
297 + showMiniMap: true,
298 +
299 + onDblclickNode,
300 + onDblClickEdge,
301 + cancel,
302 + save,
303 + handleBeforeDelete,
304 + handleAfterDelete,
305 + handleBeforeAdd,
306 + handleAfterAdd,
307 +
308 + logData,
309 +
310 + onRef: (e) => (editor = e),
311 + staticPath,
312 + };
313 + },
314 +};
315 +</script>
316 +
317 +<style lang="scss">
318 +html,
319 +body {
320 + padding: 0;
321 + margin: 0;
322 +
323 + .activity-menu {
324 + display: flex;
325 + align-items: center;
326 +
327 + img {
328 + margin-right: 1em;
329 + width: 30px;
330 + height: 30px;
331 + }
332 + }
333 +}
334 +</style>
1 +export const AppData = {
2 + "nodes": [
3 + {
4 + "id": "123456",
5 + "x": 590,
6 + "y": 100,
7 + "text": "广告宣传",
8 + "desc": "通过广告短频宣传",
9 + "activity": "advertisement",
10 + },
11 + {
12 + "id": "2323456789",
13 + "x": 1020,
14 + "y": 100,
15 + "text": "优惠券",
16 + "desc": "发送奖励优惠券",
17 + "activity": "coupon",
18 + },
19 + {
20 + "data": {},
21 + "id": "start-node",
22 + "label": "开始",
23 + "shape": "ellipse",
24 + "x": 380,
25 + "y": 100
26 + },
27 + {
28 + "data": {},
29 + "id": "1588848310120",
30 + "label": "主管审批",
31 + "shape": "rect",
32 + "x": 380,
33 + "y": 180
34 + },
35 + {
36 + "data": {},
37 + "id": "1588848322179",
38 + "label": "经理审批",
39 + "shape": "rect",
40 + "x": 380,
41 + "y": 260
42 + },
43 + {
44 + "data": {},
45 + "id": "1588848338211",
46 + "label": "金额>2万",
47 + "shape": "diamond",
48 + "x": 380,
49 + "y": 340
50 + },
51 + {
52 + "data": {},
53 + "id": "1588848351476",
54 + "label": "财务打款",
55 + "shape": "rect",
56 + "x": 380,
57 + "y": 460
58 + },
59 + {
60 + "data": {},
61 + "id": "end-node",
62 + "label": "结束",
63 + "shape": "ellipse",
64 + "x": 380,
65 + "y": 540
66 + },
67 + {
68 + "data": {},
69 + "id": "1588848397511",
70 + "label": "VIP审批",
71 + "shape": "rect",
72 + "x": 590,
73 + "y": 340
74 + },
75 + {
76 + "data": {
77 + test: 100
78 + },
79 + "id": "1588848436694",
80 + "label": "金额>10万1",
81 + "shape": "diamond",
82 + "x": 780,
83 + "y": 340
84 + },
85 + {
86 + "data": {},
87 + "id": "1588848449431",
88 + "label": "CEO审批",
89 + "shape": "rect",
90 + "x": 960,
91 + "y": 460
92 + }
93 + ],
94 + "edges": [
95 + {
96 + "source": "start-node",
97 + "sourceAnchor": 2,
98 + "target": "1588848310120",
99 + "targetAnchor": 0
100 + },
101 + {
102 + "source": "1588848310120",
103 + "sourceAnchor": 2,
104 + "target": "1588848322179",
105 + "targetAnchor": 0
106 + },
107 + {
108 + "source": "1588848322179",
109 + "sourceAnchor": 2,
110 + "target": "1588848338211",
111 + "targetAnchor": 0
112 + },
113 + {
114 + "source": "1588848338211",
115 + "sourceAnchor": 2,
116 + "target": "1588848351476",
117 + "targetAnchor": 0
118 + },
119 + {
120 + "source": "1588848351476",
121 + "sourceAnchor": 2,
122 + "target": "end-node",
123 + "targetAnchor": 0
124 + },
125 + {
126 + "source": "1588848338211",
127 + "sourceAnchor": 3,
128 + "target": "1588848397511",
129 + "targetAnchor": 1
130 + },
131 + {
132 + "source": "1588848436694",
133 + "sourceAnchor": 3,
134 + "target": "1588848449431",
135 + "targetAnchor": 0
136 + },
137 + {
138 + "source": "1588848449431",
139 + "sourceAnchor": 1,
140 + "target": "1588848351476",
141 + "targetAnchor": 3
142 + },
143 + {
144 + "source": "1588848436694",
145 + "sourceAnchor": 2,
146 + "target": "1588848351476",
147 + "targetAnchor": 3
148 + },
149 + {
150 + "source": "1588848397511",
151 + "sourceAnchor": 3,
152 + "target": "1588848436694",
153 + "targetAnchor": 1
154 + },
155 + {
156 + "source": "start-node",
157 + "sourceAnchor": 3,
158 + "target": "123456",
159 + "targetAnchor": 1
160 + },
161 + {
162 + "source": "123456",
163 + "sourceAnchor": 3,
164 + "target": "2323456789",
165 + "targetAnchor": 1
166 + },
167 + {
168 + "source": "2323456789",
169 + "sourceAnchor": 3,
170 + "target": "end-node",
171 + "targetAnchor": 3
172 + }
173 + ]
174 +}
1 +/*
2 + * @Date: 2021-08-18 12:47:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-10-26 10:01:48
5 + * @FilePath: /vue-flow-editor-for-vue3.0-master/doc/main.ts
6 + * @Description: 文件描述
7 + */
8 +import { createApp ,h } from 'vue';
9 +
10 +import App from './App.vue'
11 +
12 +import VueFlowEditor from '../src/index'
13 +import element from 'element-plus'
14 +import 'element-plus/dist/index.css'
15 +
16 +const Vue = createApp({
17 + render: ()=>h(App)
18 +});
19 +
20 +Vue.use(VueFlowEditor)
21 +// @ts-ignore
22 +//Vue.use(window.ELEMENT)
23 +//Vue.config.productionTip = false
24 +Vue.use(element)
25 +
26 +Vue.mount("#app")
1 +declare module '*.bmp' {
2 + const src: string;
3 + export default src;
4 +}
5 +
6 +declare module '*.gif' {
7 + const src: string;
8 + export default src;
9 +}
10 +
11 +declare module '*.jpg' {
12 + const src: string;
13 + export default src;
14 +}
15 +
16 +declare module '*.jpeg' {
17 + const src: string;
18 + export default src;
19 +}
20 +
21 +declare module '*.png' {
22 + const src: string;
23 + export default src;
24 +}
25 +
26 +declare module '*.webp' {
27 + const src: string;
28 + export default src;
29 +}
30 +
31 +declare module '*.module.css' {
32 + const classes: { readonly [key: string]: string };
33 + export default classes;
34 +}
35 +
36 +declare module '*.module.scss' {
37 + const classes: { readonly [key: string]: string };
38 + export default classes;
39 +}
40 +
41 +declare module '*.module.sass' {
42 + const classes: { readonly [key: string]: string };
43 + export default classes;
44 +}
45 +
46 +declare module '*.vue' {
47 + import type { DefineComponent } from 'vue'
48 + const component: DefineComponent<{}, {}, any>
49 + export default component
50 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import { VNode } from 'vue'
2 +import { ComponentRenderProxy } from '@vue/composition-api'
3 +
4 +declare global {
5 + namespace JSX {
6 + // tslint:disable no-empty-interface
7 + interface Element extends VNode {}
8 + // tslint:disable no-empty-interface
9 + interface ElementClass extends ComponentRenderProxy {}
10 + interface ElementAttributesProperty {
11 + $props: any; // specify the property name to use
12 + }
13 + interface IntrinsicElements {
14 + [elem: string]: any
15 + }
16 + }
17 +}
1 +export function staticPath(path) {
2 + return joinPath('/vue-flow-editor', path)
3 +}
4 +
5 +export function joinPath(source: string, target: string, separator = '/') {
6 + if (source.indexOf('/') === source.length - 1) {
7 + source = source.slice(0, -1)
8 + }
9 + if (target.charAt(0) === '/') {
10 + target = target.slice(1)
11 + }
12 + return `${source}${separator}${target}`
13 +}
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
No preview for this file type
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 15</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -1217.000000)">
8 + <g id="Group-17" transform="translate(218.000000, 749.000000)">
9 + <g transform="translate(16.000000, 348.000000)" id="Group-5-Copy-6">
10 + <g transform="translate(0.000000, 120.000000)">
11 + <g id="Group-15">
12 + <rect id="Rectangle-5" fill="#9283ED" x="0" y="0" width="24" height="24"></rect>
13 + <g id="_08-2广告投放日志" transform="translate(6.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
14 + <path d="M0.00260303688,7.74513716 C0.00260303688,8.17286783 0.449075922,8.49206983 0.888885033,8.49206983 L5.7401128,8.49206983 L5.7401128,9.49436409 L3.23453362,9.49436409 C3.08126681,9.49436409 2.97464642,9.59650873 2.97464642,9.74334165 C2.97464642,9.89017456 3.08126681,9.9923192 3.23453362,9.9923192 L8.97204338,9.9923192 C9.1253102,9.9923192 9.23193059,9.89017456 9.23193059,9.74334165 C9.23193059,9.59650873 9.1253102,9.49436409 8.97204338,9.49436409 L6.2598872,9.49436409 L6.2598872,8.49206983 L11.317692,8.49206983 C11.7641649,8.49206983 11.997397,8.16648379 11.997397,7.74513716 L11.997397,7.4961596 L0.00260303688,7.4961596 L0.00260303688,7.74513716 Z M4.03418655,2.81027431 C3.95422126,3.02733167 3.95422126,3.02733167 3.94089371,3.07201995 L3.43444685,4.45097257 L4.64059002,4.45097257 L4.12081562,3.07201995 C4.1008243,3.02094763 4.08749675,2.96349127 4.03418655,2.81027431 Z M7.81921041,2.82304239 L7.03954881,2.82304239 L7.03954881,5.43411471 L7.81254664,5.43411471 C8.2123731,5.43411471 8.4722603,5.34473815 8.67217354,5.13406484 C8.90540564,4.89785536 9.03201735,4.53396509 9.03201735,4.09985037 C9.03201735,3.65935162 8.91873319,3.32738155 8.69216486,3.10394015 C8.49225163,2.89965087 8.2390282,2.82304239 7.81921041,2.82304239 Z" id="Shape"></path>
15 + <path d="M11.317692,0.0012967581 L0.888885033,0.0012967581 C0.442412148,0.0012967581 0.00260303688,0.352418953 0.00260303688,0.805685786 L0.00260303688,7.52169576 L11.997397,7.52169576 L11.997397,0.812069825 C11.997397,0.352418953 11.7375098,0.0012967581 11.317692,0.0012967581 Z M5.14703688,5.98952618 C5.12038178,5.83630923 5.06707158,5.63201995 5.00709761,5.49795511 L4.81384816,4.98723192 L3.26118872,4.98723192 L3.06793926,5.49795511 C2.9813102,5.72139651 2.96131887,5.79162095 2.92133623,5.98952618 L2.1216833,5.98952618 C2.19498482,5.86184539 2.29494143,5.65117207 2.3815705,5.44049875 L3.45443818,2.74643392 C3.54773102,2.51022444 3.58771367,2.39531172 3.60770499,2.27401496 L4.45400434,2.27401496 C4.48065944,2.38892768 4.50731453,2.45915212 4.6205987,2.74643392 L5.70013015,5.44049875 C5.82007809,5.74054863 5.88005206,5.86822943 5.9466898,5.98952618 L5.14703688,5.98952618 Z M9.13197397,5.58094763 C8.81877657,5.86184539 8.43227766,5.98952618 7.85919306,5.98952618 L6.97291106,5.98952618 C6.67304121,5.98952618 6.55309328,5.99591022 6.35318004,6.00229426 C6.37983514,5.81077307 6.39316269,5.66394015 6.39316269,5.38942643 L6.39316269,2.86773067 C6.39316269,2.60598504 6.38649892,2.46553616 6.35318004,2.26124688 C6.5464295,2.26763092 6.66637744,2.27401496 6.97291106,2.27401496 L7.85252928,2.27401496 C8.45893275,2.27401496 8.85875922,2.39531172 9.16529284,2.68259352 C9.52513666,3.00179551 9.70505857,3.48698254 9.70505857,4.09346633 C9.70505857,4.73187032 9.51180911,5.23620948 9.13197397,5.58094763 Z" id="Shape"></path>
16 + </g>
17 + </g>
18 + </g>
19 + </g>
20 + </g>
21 + </g>
22 + </g>
23 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>优惠券@3x</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="老窖智慧零售" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="Artboard" transform="translate(-340.000000, -460.000000)">
8 + <g id="优惠券" transform="translate(340.000000, 460.000000)">
9 + <rect id="Rectangle-5" fill="#ED8383" x="0" y="0" width="56" height="56"></rect>
10 + <g transform="translate(14.000000, 16.500000)" fill="#FFFFFF" fill-rule="nonzero" id="Shape">
11 + <path d="M27.0206628,14.1948104 C25.4237817,13.4113107 24.9447174,12.784511 24.9447173,11.5309115 C24.9447173,10.355662 25.4237816,9.72886228 27.0206628,8.86701265 C27.8989474,8.31856287 27.9787914,7.84846309 27.9787914,7.0649634 L27.9787914,2.59901529 C27.9787914,1.18871589 26.7811306,0.0134663967 25.3439376,0.0134663967 L2.66822611,0.0134663967 C1.23103312,0.0134663967 0.0333723158,1.18871589 0.0333723158,2.59901529 L0.0333723158,7.0649634 C0.0333723158,7.7701131 0.113216386,8.39691282 0.991500982,8.86701265 C1.6302534,9.1804125 3.06744639,9.96391219 3.06744639,11.5309115 C3.06744639,13.2546108 2.02947368,13.8030605 1.07134502,14.1164604 L0.991500982,14.1164604 C0.113216386,14.6649102 0.0333723158,15.5267598 0.0333723158,15.9185097 L0.0333723158,20.3844578 C0.0333723158,21.7947572 1.23103312,22.9700067 2.66822611,22.9700067 L25.3439376,22.9700067 C26.7811306,22.9700067 27.9787914,21.7947572 27.9787914,20.3844578 L27.9787914,15.9185097 C27.9787914,15.05666 27.6594152,14.7432602 27.0206628,14.1948104 Z M18.2378168,12.6278111 C18.7168811,12.6278111 19.1161014,13.0195609 19.1161014,13.4896607 C19.1161014,13.9597605 18.7168811,14.3515103 18.2378168,14.3515103 L14.8843665,14.3515103 L14.8843665,17.6422089 C14.8843665,18.1123087 14.4851462,18.5040585 14.0060819,18.5040585 C13.5270175,18.5040585 13.1277973,18.1123087 13.1277973,17.6422089 L13.1277973,14.3515103 L9.77434698,14.3515103 C9.29528267,14.3515103 8.89606239,13.9597605 8.89606239,13.4896607 C8.89606239,13.0195609 9.29528267,12.6278111 9.77434698,12.6278111 L13.1277973,12.6278111 L13.1277973,10.5907119 L9.53481481,10.5907119 C9.05575049,10.5907119 8.65653021,10.1989621 8.65653021,9.72886228 C8.65653021,9.25876249 9.05575049,8.86701265 9.53481481,8.86701265 L12.1696686,8.86701265 L9.3751267,6.12476379 C9.05575049,5.81136393 9.05575049,5.26291416 9.3751267,4.9495143 C9.69450291,4.63611444 10.2534113,4.63611444 10.5727875,4.9495143 L14.0060819,8.31856287 L17.4393762,4.9495143 C17.7587524,4.63611444 18.3176608,4.63611444 18.6370371,4.9495143 C18.9564133,5.26291416 18.9564133,5.81136393 18.6370371,6.12476379 L15.8424951,8.86701265 L18.3975049,8.86701265 C18.8765692,8.86701265 19.2757895,9.25876249 19.2757895,9.72886228 C19.2757895,10.1989621 18.8765692,10.5907119 18.3975049,10.5907119 L14.8045224,10.5907119 L14.8045224,12.6278111 L18.2378168,12.6278111 Z"></path>
12 + </g>
13 + </g>
14 + </g>
15 + </g>
16 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 7</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -841.000000)">
8 + <g id="Group-5" transform="translate(234.000000, 841.000000)">
9 + <g id="Group-7">
10 + <rect id="Rectangle-5" fill="#92DBA8" x="0" y="0" width="24" height="24"></rect>
11 + <g id="选择人群" transform="translate(6.000000, 6.000000)" fill="#FFFFFF" fill-rule="nonzero">
12 + <path d="M6.07954684,0.0879348459 C6.27427218,0.127410328 6.46293741,0.192275772 6.64067902,0.280859046 C6.8102853,0.353040709 6.96966437,0.447089399 7.11473896,0.560599136 C7.23270551,0.650915741 7.33983452,0.754492582 7.43400383,0.869277845 C7.6096674,1.10543782 7.743798,1.3696474 7.83066622,1.65062084 C7.90815537,1.91946351 7.96635063,2.19346537 8.0048107,2.47054868 C8.04340938,2.76803307 8.0627987,3.06768277 8.06285885,3.36764619 C8.11177355,3.40676316 8.15141696,3.45617153 8.17895517,3.51233934 C8.20586843,3.57834292 8.22848954,3.64600647 8.24667801,3.71490975 C8.26110047,3.81406862 8.26110047,3.91478338 8.24667801,4.01394225 C8.23277675,4.14333562 8.20019089,4.27004632 8.14993109,4.39014444 C8.11296793,4.47042419 8.06034712,4.54256479 7.995136,4.60236105 C7.94281913,4.66039795 7.87607712,4.70365254 7.80164215,4.72776178 C7.80164215,4.8435163 7.7339193,4.95927082 7.69522052,5.08467155 L7.57912421,5.36441163 C7.53873738,5.44264135 7.48652933,5.51421609 7.42432913,5.57662825 L7.09538957,5.86601454 C6.998376,5.97618752 6.94056027,6.11521495 6.9309198,6.26150915 C6.92102457,6.37383202 6.92102457,6.48680361 6.9309198,6.59912648 C6.94377829,6.7163127 6.97649181,6.83047294 7.02766672,6.93674384 C7.02766672,6.93674384 7.09538957,7.01391352 7.02766672,7.03320594 C5.85840368,8.06021036 5.57533261,9.76573242 6.35043823,11.1135527 L0.00383979921,11.1135527 C0.0484947862,10.5618146 0.17230191,10.0193167 0.371478118,9.50263565 C0.655979451,8.98774748 1.08682936,8.56823433 1.6098388,8.29685942 C2.03232171,8.06520837 2.47617744,7.87462158 2.9352717,7.72773304 C3.1657719,7.66730243 3.38475398,7.56953942 3.58347612,7.43834674 C3.70199899,7.35979832 3.80938384,7.26570764 3.90274097,7.15860665 C3.97403505,7.07963202 4.02982465,6.9880138 4.06721075,6.88851279 C4.10475758,6.80334678 4.12450861,6.71144666 4.12525891,6.6184189 L4.12525891,6.29044778 C4.10646041,6.13177975 4.02669894,5.98655719 3.90274097,5.88530696 C3.80599404,5.77919865 3.68989773,5.67309034 3.58347612,5.57662825 C3.51809483,5.51907594 3.46820471,5.44611919 3.43835572,5.36441163 L3.32225941,5.07502534 C3.32225941,4.95927082 3.24486187,4.8435163 3.21583779,4.72776178 C3.16234019,4.7083446 3.11307613,4.67887318 3.07071739,4.64094589 C3.01825681,4.59636533 2.97262442,4.54436756 2.9352717,4.48660654 C2.87405499,4.39967129 2.83125963,4.30120353 2.8095007,4.19722024 C2.78360203,4.08973474 2.78030797,3.97806645 2.799826,3.8692491 C2.80890097,3.77732376 2.82837411,3.68671665 2.85787416,3.59915523 C2.88751895,3.51394932 2.93352397,3.43531575 2.99331985,3.36764619 C2.97402783,3.08501761 2.97402783,2.80140832 2.99331985,2.51877973 C3.03093752,2.26213766 3.08261314,2.00774044 3.14811494,1.75672915 C3.2195717,1.47529117 3.34435992,1.21007834 3.51575327,0.975386155 C3.64051454,0.79730067 3.79040549,0.638104288 3.96078913,0.502721876 C4.11460093,0.381471537 4.28374782,0.280930836 4.46387315,0.203689366 C4.627772,0.114590779 4.80373999,0.0496093232 4.98630656,0.0107651658 C5.15046156,-0.00358290013 5.31556089,-0.00358290013 5.47971589,0.0107651658 C5.68206408,0.0120561592 5.88349756,0.0379710558 6.07954684,0.0879348459 Z M8.42082248,8.63447676 L7.82099153,9.17466451 L8.54659349,10.0524696 L9.06902689,10.6601808 L9.66885784,10.1199931 L11.7005433,8.25827458 C12.1888311,9.19354561 12.0510689,10.3317812 11.3536536,11.1243887 C10.6562384,11.9169962 9.54228256,12.2013293 8.54867674,11.8403487 C7.55507093,11.4793681 6.88570713,10.5471485 6.86319696,9.49298944 C6.85800832,8.46749633 7.46798468,7.53817708 8.4125917,7.13243506 C9.35719873,6.72669304 10.4535645,6.92307817 11.1974593,7.63127094 L9.14642444,9.50263565 L8.42082248,8.63447676 Z" id="Shape"></path>
13 + </g>
14 + </g>
15 + </g>
16 + </g>
17 + </g>
18 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="./lib/element-ui.css"><link href="css/chunk-vendors.d1676ea7.css" rel="preload" as="style"><link href="css/index.0ba1d066.css" rel="preload" as="style"><link href="js/chunk-vendors.9382c778.js" rel="preload" as="script"><link href="js/index.e8a5c5ea.js" rel="preload" as="script"><link href="css/chunk-vendors.d1676ea7.css" rel="stylesheet"><link href="css/index.0ba1d066.css" rel="stylesheet"></head><body><script src="./lib/g6.umd.min.js"></script><div id="app"></div><script src="js/chunk-vendors.9382c778.js"></script><script src="js/index.e8a5c5ea.js"></script></body></html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 +import vca from '@vue/composition-api'
2 +
3 +export default vca
4 +
5 +export * from '@vue/composition-api'
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
No preview for this file type
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 15</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -1217.000000)">
8 + <g id="Group-17" transform="translate(218.000000, 749.000000)">
9 + <g transform="translate(16.000000, 348.000000)" id="Group-5-Copy-6">
10 + <g transform="translate(0.000000, 120.000000)">
11 + <g id="Group-15">
12 + <rect id="Rectangle-5" fill="#9283ED" x="0" y="0" width="24" height="24"></rect>
13 + <g id="_08-2广告投放日志" transform="translate(6.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
14 + <path d="M0.00260303688,7.74513716 C0.00260303688,8.17286783 0.449075922,8.49206983 0.888885033,8.49206983 L5.7401128,8.49206983 L5.7401128,9.49436409 L3.23453362,9.49436409 C3.08126681,9.49436409 2.97464642,9.59650873 2.97464642,9.74334165 C2.97464642,9.89017456 3.08126681,9.9923192 3.23453362,9.9923192 L8.97204338,9.9923192 C9.1253102,9.9923192 9.23193059,9.89017456 9.23193059,9.74334165 C9.23193059,9.59650873 9.1253102,9.49436409 8.97204338,9.49436409 L6.2598872,9.49436409 L6.2598872,8.49206983 L11.317692,8.49206983 C11.7641649,8.49206983 11.997397,8.16648379 11.997397,7.74513716 L11.997397,7.4961596 L0.00260303688,7.4961596 L0.00260303688,7.74513716 Z M4.03418655,2.81027431 C3.95422126,3.02733167 3.95422126,3.02733167 3.94089371,3.07201995 L3.43444685,4.45097257 L4.64059002,4.45097257 L4.12081562,3.07201995 C4.1008243,3.02094763 4.08749675,2.96349127 4.03418655,2.81027431 Z M7.81921041,2.82304239 L7.03954881,2.82304239 L7.03954881,5.43411471 L7.81254664,5.43411471 C8.2123731,5.43411471 8.4722603,5.34473815 8.67217354,5.13406484 C8.90540564,4.89785536 9.03201735,4.53396509 9.03201735,4.09985037 C9.03201735,3.65935162 8.91873319,3.32738155 8.69216486,3.10394015 C8.49225163,2.89965087 8.2390282,2.82304239 7.81921041,2.82304239 Z" id="Shape"></path>
15 + <path d="M11.317692,0.0012967581 L0.888885033,0.0012967581 C0.442412148,0.0012967581 0.00260303688,0.352418953 0.00260303688,0.805685786 L0.00260303688,7.52169576 L11.997397,7.52169576 L11.997397,0.812069825 C11.997397,0.352418953 11.7375098,0.0012967581 11.317692,0.0012967581 Z M5.14703688,5.98952618 C5.12038178,5.83630923 5.06707158,5.63201995 5.00709761,5.49795511 L4.81384816,4.98723192 L3.26118872,4.98723192 L3.06793926,5.49795511 C2.9813102,5.72139651 2.96131887,5.79162095 2.92133623,5.98952618 L2.1216833,5.98952618 C2.19498482,5.86184539 2.29494143,5.65117207 2.3815705,5.44049875 L3.45443818,2.74643392 C3.54773102,2.51022444 3.58771367,2.39531172 3.60770499,2.27401496 L4.45400434,2.27401496 C4.48065944,2.38892768 4.50731453,2.45915212 4.6205987,2.74643392 L5.70013015,5.44049875 C5.82007809,5.74054863 5.88005206,5.86822943 5.9466898,5.98952618 L5.14703688,5.98952618 Z M9.13197397,5.58094763 C8.81877657,5.86184539 8.43227766,5.98952618 7.85919306,5.98952618 L6.97291106,5.98952618 C6.67304121,5.98952618 6.55309328,5.99591022 6.35318004,6.00229426 C6.37983514,5.81077307 6.39316269,5.66394015 6.39316269,5.38942643 L6.39316269,2.86773067 C6.39316269,2.60598504 6.38649892,2.46553616 6.35318004,2.26124688 C6.5464295,2.26763092 6.66637744,2.27401496 6.97291106,2.27401496 L7.85252928,2.27401496 C8.45893275,2.27401496 8.85875922,2.39531172 9.16529284,2.68259352 C9.52513666,3.00179551 9.70505857,3.48698254 9.70505857,4.09346633 C9.70505857,4.73187032 9.51180911,5.23620948 9.13197397,5.58094763 Z" id="Shape"></path>
16 + </g>
17 + </g>
18 + </g>
19 + </g>
20 + </g>
21 + </g>
22 + </g>
23 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>优惠券@3x</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="老窖智慧零售" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="Artboard" transform="translate(-340.000000, -460.000000)">
8 + <g id="优惠券" transform="translate(340.000000, 460.000000)">
9 + <rect id="Rectangle-5" fill="#ED8383" x="0" y="0" width="56" height="56"></rect>
10 + <g transform="translate(14.000000, 16.500000)" fill="#FFFFFF" fill-rule="nonzero" id="Shape">
11 + <path d="M27.0206628,14.1948104 C25.4237817,13.4113107 24.9447174,12.784511 24.9447173,11.5309115 C24.9447173,10.355662 25.4237816,9.72886228 27.0206628,8.86701265 C27.8989474,8.31856287 27.9787914,7.84846309 27.9787914,7.0649634 L27.9787914,2.59901529 C27.9787914,1.18871589 26.7811306,0.0134663967 25.3439376,0.0134663967 L2.66822611,0.0134663967 C1.23103312,0.0134663967 0.0333723158,1.18871589 0.0333723158,2.59901529 L0.0333723158,7.0649634 C0.0333723158,7.7701131 0.113216386,8.39691282 0.991500982,8.86701265 C1.6302534,9.1804125 3.06744639,9.96391219 3.06744639,11.5309115 C3.06744639,13.2546108 2.02947368,13.8030605 1.07134502,14.1164604 L0.991500982,14.1164604 C0.113216386,14.6649102 0.0333723158,15.5267598 0.0333723158,15.9185097 L0.0333723158,20.3844578 C0.0333723158,21.7947572 1.23103312,22.9700067 2.66822611,22.9700067 L25.3439376,22.9700067 C26.7811306,22.9700067 27.9787914,21.7947572 27.9787914,20.3844578 L27.9787914,15.9185097 C27.9787914,15.05666 27.6594152,14.7432602 27.0206628,14.1948104 Z M18.2378168,12.6278111 C18.7168811,12.6278111 19.1161014,13.0195609 19.1161014,13.4896607 C19.1161014,13.9597605 18.7168811,14.3515103 18.2378168,14.3515103 L14.8843665,14.3515103 L14.8843665,17.6422089 C14.8843665,18.1123087 14.4851462,18.5040585 14.0060819,18.5040585 C13.5270175,18.5040585 13.1277973,18.1123087 13.1277973,17.6422089 L13.1277973,14.3515103 L9.77434698,14.3515103 C9.29528267,14.3515103 8.89606239,13.9597605 8.89606239,13.4896607 C8.89606239,13.0195609 9.29528267,12.6278111 9.77434698,12.6278111 L13.1277973,12.6278111 L13.1277973,10.5907119 L9.53481481,10.5907119 C9.05575049,10.5907119 8.65653021,10.1989621 8.65653021,9.72886228 C8.65653021,9.25876249 9.05575049,8.86701265 9.53481481,8.86701265 L12.1696686,8.86701265 L9.3751267,6.12476379 C9.05575049,5.81136393 9.05575049,5.26291416 9.3751267,4.9495143 C9.69450291,4.63611444 10.2534113,4.63611444 10.5727875,4.9495143 L14.0060819,8.31856287 L17.4393762,4.9495143 C17.7587524,4.63611444 18.3176608,4.63611444 18.6370371,4.9495143 C18.9564133,5.26291416 18.9564133,5.81136393 18.6370371,6.12476379 L15.8424951,8.86701265 L18.3975049,8.86701265 C18.8765692,8.86701265 19.2757895,9.25876249 19.2757895,9.72886228 C19.2757895,10.1989621 18.8765692,10.5907119 18.3975049,10.5907119 L14.8045224,10.5907119 L14.8045224,12.6278111 L18.2378168,12.6278111 Z"></path>
12 + </g>
13 + </g>
14 + </g>
15 + </g>
16 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 7</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -841.000000)">
8 + <g id="Group-5" transform="translate(234.000000, 841.000000)">
9 + <g id="Group-7">
10 + <rect id="Rectangle-5" fill="#92DBA8" x="0" y="0" width="24" height="24"></rect>
11 + <g id="选择人群" transform="translate(6.000000, 6.000000)" fill="#FFFFFF" fill-rule="nonzero">
12 + <path d="M6.07954684,0.0879348459 C6.27427218,0.127410328 6.46293741,0.192275772 6.64067902,0.280859046 C6.8102853,0.353040709 6.96966437,0.447089399 7.11473896,0.560599136 C7.23270551,0.650915741 7.33983452,0.754492582 7.43400383,0.869277845 C7.6096674,1.10543782 7.743798,1.3696474 7.83066622,1.65062084 C7.90815537,1.91946351 7.96635063,2.19346537 8.0048107,2.47054868 C8.04340938,2.76803307 8.0627987,3.06768277 8.06285885,3.36764619 C8.11177355,3.40676316 8.15141696,3.45617153 8.17895517,3.51233934 C8.20586843,3.57834292 8.22848954,3.64600647 8.24667801,3.71490975 C8.26110047,3.81406862 8.26110047,3.91478338 8.24667801,4.01394225 C8.23277675,4.14333562 8.20019089,4.27004632 8.14993109,4.39014444 C8.11296793,4.47042419 8.06034712,4.54256479 7.995136,4.60236105 C7.94281913,4.66039795 7.87607712,4.70365254 7.80164215,4.72776178 C7.80164215,4.8435163 7.7339193,4.95927082 7.69522052,5.08467155 L7.57912421,5.36441163 C7.53873738,5.44264135 7.48652933,5.51421609 7.42432913,5.57662825 L7.09538957,5.86601454 C6.998376,5.97618752 6.94056027,6.11521495 6.9309198,6.26150915 C6.92102457,6.37383202 6.92102457,6.48680361 6.9309198,6.59912648 C6.94377829,6.7163127 6.97649181,6.83047294 7.02766672,6.93674384 C7.02766672,6.93674384 7.09538957,7.01391352 7.02766672,7.03320594 C5.85840368,8.06021036 5.57533261,9.76573242 6.35043823,11.1135527 L0.00383979921,11.1135527 C0.0484947862,10.5618146 0.17230191,10.0193167 0.371478118,9.50263565 C0.655979451,8.98774748 1.08682936,8.56823433 1.6098388,8.29685942 C2.03232171,8.06520837 2.47617744,7.87462158 2.9352717,7.72773304 C3.1657719,7.66730243 3.38475398,7.56953942 3.58347612,7.43834674 C3.70199899,7.35979832 3.80938384,7.26570764 3.90274097,7.15860665 C3.97403505,7.07963202 4.02982465,6.9880138 4.06721075,6.88851279 C4.10475758,6.80334678 4.12450861,6.71144666 4.12525891,6.6184189 L4.12525891,6.29044778 C4.10646041,6.13177975 4.02669894,5.98655719 3.90274097,5.88530696 C3.80599404,5.77919865 3.68989773,5.67309034 3.58347612,5.57662825 C3.51809483,5.51907594 3.46820471,5.44611919 3.43835572,5.36441163 L3.32225941,5.07502534 C3.32225941,4.95927082 3.24486187,4.8435163 3.21583779,4.72776178 C3.16234019,4.7083446 3.11307613,4.67887318 3.07071739,4.64094589 C3.01825681,4.59636533 2.97262442,4.54436756 2.9352717,4.48660654 C2.87405499,4.39967129 2.83125963,4.30120353 2.8095007,4.19722024 C2.78360203,4.08973474 2.78030797,3.97806645 2.799826,3.8692491 C2.80890097,3.77732376 2.82837411,3.68671665 2.85787416,3.59915523 C2.88751895,3.51394932 2.93352397,3.43531575 2.99331985,3.36764619 C2.97402783,3.08501761 2.97402783,2.80140832 2.99331985,2.51877973 C3.03093752,2.26213766 3.08261314,2.00774044 3.14811494,1.75672915 C3.2195717,1.47529117 3.34435992,1.21007834 3.51575327,0.975386155 C3.64051454,0.79730067 3.79040549,0.638104288 3.96078913,0.502721876 C4.11460093,0.381471537 4.28374782,0.280930836 4.46387315,0.203689366 C4.627772,0.114590779 4.80373999,0.0496093232 4.98630656,0.0107651658 C5.15046156,-0.00358290013 5.31556089,-0.00358290013 5.47971589,0.0107651658 C5.68206408,0.0120561592 5.88349756,0.0379710558 6.07954684,0.0879348459 Z M8.42082248,8.63447676 L7.82099153,9.17466451 L8.54659349,10.0524696 L9.06902689,10.6601808 L9.66885784,10.1199931 L11.7005433,8.25827458 C12.1888311,9.19354561 12.0510689,10.3317812 11.3536536,11.1243887 C10.6562384,11.9169962 9.54228256,12.2013293 8.54867674,11.8403487 C7.55507093,11.4793681 6.88570713,10.5471485 6.86319696,9.49298944 C6.85800832,8.46749633 7.46798468,7.53817708 8.4125917,7.13243506 C9.35719873,6.72669304 10.4535645,6.92307817 11.1974593,7.63127094 L9.14642444,9.50263565 L8.42082248,8.63447676 Z" id="Shape"></path>
13 + </g>
14 + </g>
15 + </g>
16 + </g>
17 + </g>
18 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="./lib/element-ui.css"><link href="css/chunk-vendors.d1676ea7.css" rel="preload" as="style"><link href="css/index.0ba1d066.css" rel="preload" as="style"><link href="js/chunk-vendors.9382c778.js" rel="preload" as="script"><link href="js/index.e8a5c5ea.js" rel="preload" as="script"><link href="css/chunk-vendors.d1676ea7.css" rel="stylesheet"><link href="css/index.0ba1d066.css" rel="stylesheet"></head><body><script src="./lib/g6.umd.min.js"></script><div id="app"></div><script src="js/chunk-vendors.9382c778.js"></script><script src="js/index.e8a5c5ea.js"></script></body></html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 +import vca from '@vue/composition-api'
2 +
3 +export default vca
4 +
5 +export * from '@vue/composition-api'
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.

3.37 KB
This diff could not be displayed because it is too large.
1 +{
2 + "name": "vue-flow-editor",
3 + "version": "0.1.19",
4 + "scripts": {
5 + "start": "vue-cli-service serve",
6 + "build": "vue-cli-service build && npm run release",
7 + "release": "vue-cli-service build --release --report --no-clean",
8 + "build:g6": "vue-cli-service build --g6 --report --no-clean"
9 + },
10 + "repository": {
11 + "gitee": "https://gitee.com/martsforever-pot/vue-flow-editor"
12 + },
13 + "files": [
14 + "docs"
15 + ],
16 + "main": "docs/dist/vue-flow-editor.js",
17 + "keywords": [
18 + "vue",
19 + "flow",
20 + "editor",
21 + "流程",
22 + "编辑器"
23 + ],
24 + "dependencies": {
25 + "@vue/composition-api": "^1.7.2",
26 + "echarts": "^5.1.2",
27 + "element-plus": "^2.4.1",
28 + "sass": "^1.69.4",
29 + "sass-loader": "10.1.1",
30 + "vue": "^3.0.0",
31 + "vue-loader-v16": "^16.0.0-beta.5.4",
32 + "vue-router": "^4.0.0-0",
33 + "vue-template-compiler": "^2.6.14",
34 + "vuex": "^4.0.0-0"
35 + },
36 + "devDependencies": {
37 + "@antv/g6": "~3.1.3",
38 + "@antv/util": "~1.3.1",
39 + "@babel/plugin-transform-modules-umd": "^7.9.0",
40 + "@vue/cli-plugin-babel": "^4.5.0",
41 + "@vue/cli-plugin-typescript": "^4.5.13",
42 + "@vue/cli-service": "^4.5.0",
43 + "@vue/compiler-sfc": "^3.0.0",
44 + "babel-preset-vca-jsx": "^0.1.0",
45 + "core-js": "^3.6.5",
46 + "numericjs": "^1.2.6",
47 + "typescript": "~4.1.5",
48 + "webpack": "^4.0.0",
49 + "webpack-theme-color-replacer": "^1.3.12"
50 + }
51 +}
1 +module.exports = {
2 + plugins: {
3 + autoprefixer: {}
4 + }
5 +}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
No preview for this file type
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 15</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -1217.000000)">
8 + <g id="Group-17" transform="translate(218.000000, 749.000000)">
9 + <g transform="translate(16.000000, 348.000000)" id="Group-5-Copy-6">
10 + <g transform="translate(0.000000, 120.000000)">
11 + <g id="Group-15">
12 + <rect id="Rectangle-5" fill="#9283ED" x="0" y="0" width="24" height="24"></rect>
13 + <g id="_08-2广告投放日志" transform="translate(6.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
14 + <path d="M0.00260303688,7.74513716 C0.00260303688,8.17286783 0.449075922,8.49206983 0.888885033,8.49206983 L5.7401128,8.49206983 L5.7401128,9.49436409 L3.23453362,9.49436409 C3.08126681,9.49436409 2.97464642,9.59650873 2.97464642,9.74334165 C2.97464642,9.89017456 3.08126681,9.9923192 3.23453362,9.9923192 L8.97204338,9.9923192 C9.1253102,9.9923192 9.23193059,9.89017456 9.23193059,9.74334165 C9.23193059,9.59650873 9.1253102,9.49436409 8.97204338,9.49436409 L6.2598872,9.49436409 L6.2598872,8.49206983 L11.317692,8.49206983 C11.7641649,8.49206983 11.997397,8.16648379 11.997397,7.74513716 L11.997397,7.4961596 L0.00260303688,7.4961596 L0.00260303688,7.74513716 Z M4.03418655,2.81027431 C3.95422126,3.02733167 3.95422126,3.02733167 3.94089371,3.07201995 L3.43444685,4.45097257 L4.64059002,4.45097257 L4.12081562,3.07201995 C4.1008243,3.02094763 4.08749675,2.96349127 4.03418655,2.81027431 Z M7.81921041,2.82304239 L7.03954881,2.82304239 L7.03954881,5.43411471 L7.81254664,5.43411471 C8.2123731,5.43411471 8.4722603,5.34473815 8.67217354,5.13406484 C8.90540564,4.89785536 9.03201735,4.53396509 9.03201735,4.09985037 C9.03201735,3.65935162 8.91873319,3.32738155 8.69216486,3.10394015 C8.49225163,2.89965087 8.2390282,2.82304239 7.81921041,2.82304239 Z" id="Shape"></path>
15 + <path d="M11.317692,0.0012967581 L0.888885033,0.0012967581 C0.442412148,0.0012967581 0.00260303688,0.352418953 0.00260303688,0.805685786 L0.00260303688,7.52169576 L11.997397,7.52169576 L11.997397,0.812069825 C11.997397,0.352418953 11.7375098,0.0012967581 11.317692,0.0012967581 Z M5.14703688,5.98952618 C5.12038178,5.83630923 5.06707158,5.63201995 5.00709761,5.49795511 L4.81384816,4.98723192 L3.26118872,4.98723192 L3.06793926,5.49795511 C2.9813102,5.72139651 2.96131887,5.79162095 2.92133623,5.98952618 L2.1216833,5.98952618 C2.19498482,5.86184539 2.29494143,5.65117207 2.3815705,5.44049875 L3.45443818,2.74643392 C3.54773102,2.51022444 3.58771367,2.39531172 3.60770499,2.27401496 L4.45400434,2.27401496 C4.48065944,2.38892768 4.50731453,2.45915212 4.6205987,2.74643392 L5.70013015,5.44049875 C5.82007809,5.74054863 5.88005206,5.86822943 5.9466898,5.98952618 L5.14703688,5.98952618 Z M9.13197397,5.58094763 C8.81877657,5.86184539 8.43227766,5.98952618 7.85919306,5.98952618 L6.97291106,5.98952618 C6.67304121,5.98952618 6.55309328,5.99591022 6.35318004,6.00229426 C6.37983514,5.81077307 6.39316269,5.66394015 6.39316269,5.38942643 L6.39316269,2.86773067 C6.39316269,2.60598504 6.38649892,2.46553616 6.35318004,2.26124688 C6.5464295,2.26763092 6.66637744,2.27401496 6.97291106,2.27401496 L7.85252928,2.27401496 C8.45893275,2.27401496 8.85875922,2.39531172 9.16529284,2.68259352 C9.52513666,3.00179551 9.70505857,3.48698254 9.70505857,4.09346633 C9.70505857,4.73187032 9.51180911,5.23620948 9.13197397,5.58094763 Z" id="Shape"></path>
16 + </g>
17 + </g>
18 + </g>
19 + </g>
20 + </g>
21 + </g>
22 + </g>
23 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>优惠券@3x</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="老窖智慧零售" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="Artboard" transform="translate(-340.000000, -460.000000)">
8 + <g id="优惠券" transform="translate(340.000000, 460.000000)">
9 + <rect id="Rectangle-5" fill="#ED8383" x="0" y="0" width="56" height="56"></rect>
10 + <g transform="translate(14.000000, 16.500000)" fill="#FFFFFF" fill-rule="nonzero" id="Shape">
11 + <path d="M27.0206628,14.1948104 C25.4237817,13.4113107 24.9447174,12.784511 24.9447173,11.5309115 C24.9447173,10.355662 25.4237816,9.72886228 27.0206628,8.86701265 C27.8989474,8.31856287 27.9787914,7.84846309 27.9787914,7.0649634 L27.9787914,2.59901529 C27.9787914,1.18871589 26.7811306,0.0134663967 25.3439376,0.0134663967 L2.66822611,0.0134663967 C1.23103312,0.0134663967 0.0333723158,1.18871589 0.0333723158,2.59901529 L0.0333723158,7.0649634 C0.0333723158,7.7701131 0.113216386,8.39691282 0.991500982,8.86701265 C1.6302534,9.1804125 3.06744639,9.96391219 3.06744639,11.5309115 C3.06744639,13.2546108 2.02947368,13.8030605 1.07134502,14.1164604 L0.991500982,14.1164604 C0.113216386,14.6649102 0.0333723158,15.5267598 0.0333723158,15.9185097 L0.0333723158,20.3844578 C0.0333723158,21.7947572 1.23103312,22.9700067 2.66822611,22.9700067 L25.3439376,22.9700067 C26.7811306,22.9700067 27.9787914,21.7947572 27.9787914,20.3844578 L27.9787914,15.9185097 C27.9787914,15.05666 27.6594152,14.7432602 27.0206628,14.1948104 Z M18.2378168,12.6278111 C18.7168811,12.6278111 19.1161014,13.0195609 19.1161014,13.4896607 C19.1161014,13.9597605 18.7168811,14.3515103 18.2378168,14.3515103 L14.8843665,14.3515103 L14.8843665,17.6422089 C14.8843665,18.1123087 14.4851462,18.5040585 14.0060819,18.5040585 C13.5270175,18.5040585 13.1277973,18.1123087 13.1277973,17.6422089 L13.1277973,14.3515103 L9.77434698,14.3515103 C9.29528267,14.3515103 8.89606239,13.9597605 8.89606239,13.4896607 C8.89606239,13.0195609 9.29528267,12.6278111 9.77434698,12.6278111 L13.1277973,12.6278111 L13.1277973,10.5907119 L9.53481481,10.5907119 C9.05575049,10.5907119 8.65653021,10.1989621 8.65653021,9.72886228 C8.65653021,9.25876249 9.05575049,8.86701265 9.53481481,8.86701265 L12.1696686,8.86701265 L9.3751267,6.12476379 C9.05575049,5.81136393 9.05575049,5.26291416 9.3751267,4.9495143 C9.69450291,4.63611444 10.2534113,4.63611444 10.5727875,4.9495143 L14.0060819,8.31856287 L17.4393762,4.9495143 C17.7587524,4.63611444 18.3176608,4.63611444 18.6370371,4.9495143 C18.9564133,5.26291416 18.9564133,5.81136393 18.6370371,6.12476379 L15.8424951,8.86701265 L18.3975049,8.86701265 C18.8765692,8.86701265 19.2757895,9.25876249 19.2757895,9.72886228 C19.2757895,10.1989621 18.8765692,10.5907119 18.3975049,10.5907119 L14.8045224,10.5907119 L14.8045224,12.6278111 L18.2378168,12.6278111 Z"></path>
12 + </g>
13 + </g>
14 + </g>
15 + </g>
16 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 + <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
4 + <title>Group 7</title>
5 + <desc>Created with Sketch.</desc>
6 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 + <g id="营销活动-新建活动-维护活动事件收起" transform="translate(-234.000000, -841.000000)">
8 + <g id="Group-5" transform="translate(234.000000, 841.000000)">
9 + <g id="Group-7">
10 + <rect id="Rectangle-5" fill="#92DBA8" x="0" y="0" width="24" height="24"></rect>
11 + <g id="选择人群" transform="translate(6.000000, 6.000000)" fill="#FFFFFF" fill-rule="nonzero">
12 + <path d="M6.07954684,0.0879348459 C6.27427218,0.127410328 6.46293741,0.192275772 6.64067902,0.280859046 C6.8102853,0.353040709 6.96966437,0.447089399 7.11473896,0.560599136 C7.23270551,0.650915741 7.33983452,0.754492582 7.43400383,0.869277845 C7.6096674,1.10543782 7.743798,1.3696474 7.83066622,1.65062084 C7.90815537,1.91946351 7.96635063,2.19346537 8.0048107,2.47054868 C8.04340938,2.76803307 8.0627987,3.06768277 8.06285885,3.36764619 C8.11177355,3.40676316 8.15141696,3.45617153 8.17895517,3.51233934 C8.20586843,3.57834292 8.22848954,3.64600647 8.24667801,3.71490975 C8.26110047,3.81406862 8.26110047,3.91478338 8.24667801,4.01394225 C8.23277675,4.14333562 8.20019089,4.27004632 8.14993109,4.39014444 C8.11296793,4.47042419 8.06034712,4.54256479 7.995136,4.60236105 C7.94281913,4.66039795 7.87607712,4.70365254 7.80164215,4.72776178 C7.80164215,4.8435163 7.7339193,4.95927082 7.69522052,5.08467155 L7.57912421,5.36441163 C7.53873738,5.44264135 7.48652933,5.51421609 7.42432913,5.57662825 L7.09538957,5.86601454 C6.998376,5.97618752 6.94056027,6.11521495 6.9309198,6.26150915 C6.92102457,6.37383202 6.92102457,6.48680361 6.9309198,6.59912648 C6.94377829,6.7163127 6.97649181,6.83047294 7.02766672,6.93674384 C7.02766672,6.93674384 7.09538957,7.01391352 7.02766672,7.03320594 C5.85840368,8.06021036 5.57533261,9.76573242 6.35043823,11.1135527 L0.00383979921,11.1135527 C0.0484947862,10.5618146 0.17230191,10.0193167 0.371478118,9.50263565 C0.655979451,8.98774748 1.08682936,8.56823433 1.6098388,8.29685942 C2.03232171,8.06520837 2.47617744,7.87462158 2.9352717,7.72773304 C3.1657719,7.66730243 3.38475398,7.56953942 3.58347612,7.43834674 C3.70199899,7.35979832 3.80938384,7.26570764 3.90274097,7.15860665 C3.97403505,7.07963202 4.02982465,6.9880138 4.06721075,6.88851279 C4.10475758,6.80334678 4.12450861,6.71144666 4.12525891,6.6184189 L4.12525891,6.29044778 C4.10646041,6.13177975 4.02669894,5.98655719 3.90274097,5.88530696 C3.80599404,5.77919865 3.68989773,5.67309034 3.58347612,5.57662825 C3.51809483,5.51907594 3.46820471,5.44611919 3.43835572,5.36441163 L3.32225941,5.07502534 C3.32225941,4.95927082 3.24486187,4.8435163 3.21583779,4.72776178 C3.16234019,4.7083446 3.11307613,4.67887318 3.07071739,4.64094589 C3.01825681,4.59636533 2.97262442,4.54436756 2.9352717,4.48660654 C2.87405499,4.39967129 2.83125963,4.30120353 2.8095007,4.19722024 C2.78360203,4.08973474 2.78030797,3.97806645 2.799826,3.8692491 C2.80890097,3.77732376 2.82837411,3.68671665 2.85787416,3.59915523 C2.88751895,3.51394932 2.93352397,3.43531575 2.99331985,3.36764619 C2.97402783,3.08501761 2.97402783,2.80140832 2.99331985,2.51877973 C3.03093752,2.26213766 3.08261314,2.00774044 3.14811494,1.75672915 C3.2195717,1.47529117 3.34435992,1.21007834 3.51575327,0.975386155 C3.64051454,0.79730067 3.79040549,0.638104288 3.96078913,0.502721876 C4.11460093,0.381471537 4.28374782,0.280930836 4.46387315,0.203689366 C4.627772,0.114590779 4.80373999,0.0496093232 4.98630656,0.0107651658 C5.15046156,-0.00358290013 5.31556089,-0.00358290013 5.47971589,0.0107651658 C5.68206408,0.0120561592 5.88349756,0.0379710558 6.07954684,0.0879348459 Z M8.42082248,8.63447676 L7.82099153,9.17466451 L8.54659349,10.0524696 L9.06902689,10.6601808 L9.66885784,10.1199931 L11.7005433,8.25827458 C12.1888311,9.19354561 12.0510689,10.3317812 11.3536536,11.1243887 C10.6562384,11.9169962 9.54228256,12.2013293 8.54867674,11.8403487 C7.55507093,11.4793681 6.88570713,10.5471485 6.86319696,9.49298944 C6.85800832,8.46749633 7.46798468,7.53817708 8.4125917,7.13243506 C9.35719873,6.72669304 10.4535645,6.92307817 11.1974593,7.63127094 L9.14642444,9.50263565 L8.42082248,8.63447676 Z" id="Shape"></path>
13 + </g>
14 + </g>
15 + </g>
16 + </g>
17 + </g>
18 +</svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="stylesheet" href="./lib/element-ui.css">
8 +</head>
9 +<body>
10 +<script src="./lib/g6.umd.min.js"></script>
11 +<!-- <script src="./lib/vue.min.js"></script>
12 +<script src="./lib/element-ui.js"></script> -->
13 +
14 +<div id="app"></div>
15 +</body>
16 +</html>
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 +import vca from '@vue/composition-api'
2 +
3 +export default vca
4 +
5 +export * from '@vue/composition-api'
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 +const min = Math.min;
2 +const max = Math.max;
3 +const abs = Math.abs;
4 +const DEFAULT_TRIGGER = 'shift';
5 +const ALLOW_EVENTS = ['drag', 'shift', 'ctrl', 'alt', 'control'];
6 +
7 +export function brushSelecct(G6) {
8 + G6.registerBehavior('brush-select', {
9 + getDefaultCfg() {
10 + return {
11 + brushStyle: {
12 + fill: '#EEF6FF',
13 + fillOpacity: 0.4,
14 + stroke: '#DDEEFE',
15 + lineWidth: 1
16 + },
17 + onSelect() {},
18 + onDeselect() {},
19 + selectedState: 'selected',
20 + trigger: DEFAULT_TRIGGER,
21 + includeEdges: true,
22 + selectedEdges: [],
23 + selectedNodes: []
24 + };
25 + },
26 + getEvents() {
27 + let trigger;
28 + // 检测输入是否合法
29 + if (ALLOW_EVENTS.indexOf(this.trigger.toLowerCase()) > -1) {
30 + trigger = this.trigger;
31 + } else {
32 + trigger = DEFAULT_TRIGGER;
33 + console.warn('Behavior brush-select的trigger参数不合法，请输入drag、shift、ctrl或alt');
34 + }
35 + if (trigger === 'drag') {
36 + return {
37 + mousedown: 'onMouseDown',
38 + mousemove: 'onMouseMove',
39 + mouseup: 'onMouseUp',
40 + 'canvas:click': 'clearStates'
41 + };
42 + }
43 + return {
44 + mousedown: 'onMouseDown',
45 + mousemove: 'onMouseMove',
46 + mouseup: 'onMouseUp',
47 + 'canvas:click': 'clearStates',
48 + keyup: 'onKeyUp',
49 + keydown: 'onKeyDown'
50 + };
51 + },
52 + onMouseDown(e) {
53 + // 按在node上面拖动时候不应该是框选
54 + const {item} = e;
55 + if (item) {
56 + return;
57 + }
58 +
59 + if (this.trigger !== 'drag' && !this.keydown) {
60 + return;
61 + }
62 +
63 + if (this.selectedNodes && this.selectedNodes.length !== 0) {
64 + this.clearStates();
65 + }
66 +
67 + let brush = this.brush;
68 + if (!brush) {
69 + brush = this._createBrush();
70 + }
71 + this.originPoint = {x: e.canvasX, y: e.canvasY};
72 + brush.attr({width: 0, height: 0});
73 + brush.show();
74 + this.dragging = true;
75 + },
76 + onMouseMove(e) {
77 + if (!this.dragging) {
78 + return;
79 + }
80 +
81 + if (this.trigger !== 'drag' && !this.keydown) {
82 + return;
83 + }
84 +
85 + this._updateBrush(e);
86 + this.graph.paint();
87 + },
88 + onMouseUp(e) {
89 + if (!this.brush && !this.dragging) {
90 + return;
91 + }
92 +
93 + if (this.trigger !== 'drag' && !this.keydown) {
94 + return;
95 + }
96 +
97 + const graph = this.graph;
98 + const autoPaint = graph.get('autoPaint');
99 + graph.setAutoPaint(false);
100 + this.brush.destroy();
101 + this.brush = null;
102 + this._getSelectedNodes(e);
103 + this.dragging = false;
104 + this.graph.paint();
105 + graph.setAutoPaint(autoPaint);
106 + },
107 + clearStates() {
108 +
109 + if (this.keydown) {
110 + return
111 + }
112 +
113 + const graph = this.graph;
114 + const autoPaint = graph.get('autoPaint');
115 + graph.setAutoPaint(false);
116 + const selectedState = this.selectedState;
117 +
118 + const nodes = graph.findAllByState('node', selectedState);
119 + const edges = graph.findAllByState('edge', selectedState);
120 + nodes.forEach(node => graph.setItemState(node, selectedState, false));
121 + edges.forEach(edge => graph.setItemState(edge, selectedState, false));
122 +
123 + this.selectedNodes = [];
124 +
125 + this.selectedEdges = [];
126 + this.onDeselect && this.onDeselect(this.selectedNodes, this.selectedEdges);
127 + graph.emit('nodeselectchange', {
128 + targets: {
129 + nodes: [],
130 + edges: []
131 + }, select: false
132 + });
133 + graph.paint();
134 + graph.setAutoPaint(autoPaint);
135 + },
136 + _getSelectedNodes(e) {
137 + const graph = this.graph;
138 + const state = this.selectedState;
139 + const originPoint = this.originPoint;
140 + const p1 = {x: e.x, y: e.y};
141 + const p2 = graph.getPointByCanvas(originPoint.x, originPoint.y);
142 + const left = min(p1.x, p2.x);
143 + const right = max(p1.x, p2.x);
144 + const top = min(p1.y, p2.y);
145 + const bottom = max(p1.y, p2.y);
146 + const selectedNodes = [];
147 + const shouldUpdate = this.shouldUpdate;
148 + const selectedIds = [];
149 + graph.getNodes().forEach(node => {
150 + const bbox = node.getBBox();
151 + if (bbox.centerX >= left
152 + && bbox.centerX <= right
153 + && bbox.centerY >= top
154 + && bbox.centerY <= bottom
155 + ) {
156 + if (shouldUpdate(node, 'select')) {
157 + selectedNodes.push(node);
158 + const model = node.getModel();
159 + selectedIds.push(model.id);
160 + graph.setItemState(node, state, true);
161 + }
162 + }
163 + });
164 +
165 + const selectedEdges = [];
166 + if (this.includeEdges) {
167 + // 选中边，边的source和target都在选中的节点中时才选中
168 + selectedNodes.forEach(node => {
169 + const edges = node.getEdges();
170 + edges.forEach(edge => {
171 + const model = edge.getModel();
172 + const {source, target} = model;
173 + if (selectedIds.includes(source)
174 + && selectedIds.includes(target)
175 + && shouldUpdate(edge, 'select')) {
176 + selectedEdges.push(edge);
177 + graph.setItemState(edge, this.selectedState, true);
178 + }
179 + });
180 + });
181 + }
182 +
183 + this.selectedEdges = selectedEdges;
184 + this.selectedNodes = selectedNodes;
185 + this.onSelect && this.onSelect(selectedNodes, selectedEdges);
186 + graph.emit('nodeselectchange', {
187 + targets: {
188 + nodes: selectedNodes,
189 + edges: selectedEdges
190 + }, select: true
191 + });
192 + },
193 + _createBrush() {
194 + const self = this;
195 + const brush = self.graph.get('canvas').addShape('rect', {
196 + attrs: self.brushStyle,
197 + capture: false
198 + });
199 + this.brush = brush;
200 + return brush;
201 + },
202 + _updateBrush(e) {
203 + const originPoint = this.originPoint;
204 + this.brush.attr({
205 + width: abs(e.canvasX - originPoint.x),
206 + height: abs(e.canvasY - originPoint.y),
207 + x: min(e.canvasX, originPoint.x),
208 + y: min(e.canvasY, originPoint.y)
209 + });
210 + },
211 + onKeyDown(e) {
212 + const code = e.key;
213 + // 按住control键时，允许用户设置trigger为ctrl
214 + if (code && (code.toLowerCase() === this.trigger.toLowerCase())
215 + || code.toLowerCase() === 'control') {
216 + this.keydown = true;
217 + } else {
218 + this.keydown = false;
219 + }
220 + },
221 + onKeyUp() {
222 + if (this.brush) {
223 + // 清除所有选中状态后，设置拖得动状态为false，并清除框选的brush
224 + this.brush.destroy();
225 + this.brush = null;
226 + this.dragging = false;
227 + }
228 + this.keydown = false;
229 + }
230 + })
231 +}
1 +const DEFAULT_TRIGGER = 'shift';
2 +const ALLOW_EVENTS = ['shift', 'ctrl', 'alt'];
3 +import {flatten} from "@/utils/utils";
4 +
5 +export const SELECTED_STATE = 'selected'
6 +
7 +export function clickSelect(G6) {
8 + G6.registerBehavior('click-select', {
9 + getDefaultCfg() {
10 + return {
11 + multiple: true,
12 + trigger: DEFAULT_TRIGGER,
13 + };
14 + },
15 + getEvents() {
16 + if (!this.multiple) {
17 + return {
18 + 'node:click': 'onClick',
19 + 'edge:click': 'onClick',
20 + 'canvas:click': 'onCanvasClick'
21 + };
22 + }
23 + return {
24 + 'node:click': 'onClick',
25 + 'edge:click': 'onClick',
26 + 'canvas:click': 'onCanvasClick',
27 + keyup: 'onKeyUp',
28 + keydown: 'onKeyDown'
29 + };
30 + },
31 + onClick(e) {
32 + const self = this;
33 + const item = e.item;
34 + const graph = self.graph;
35 + const autoPaint = graph.get('autoPaint');
36 + graph.setAutoPaint(false);
37 +
38 + // 当前是否选择有变化
39 + let selectChangeFlag = false
40 +
41 + if (!self.keydown || !self.multiple) {
42 + const selected = this.getSelected()
43 +
44 + flatten(Object.values(selected)).forEach(n => {
45 + if (n !== item) {
46 + if (n.hasState(SELECTED_STATE)) {
47 + selectChangeFlag = true
48 + graph.setItemState(n, SELECTED_STATE, false);
49 + }
50 + }
51 + })
52 + }
53 + if (item.hasState(SELECTED_STATE)) {
54 + return
55 + } else {
56 + if (self.shouldUpdate.call(self, e)) {
57 + selectChangeFlag = true
58 + graph.setItemState(item, SELECTED_STATE, true);
59 + }
60 + graph.emit('nodeselectchange', {target: item, select: true});
61 + }
62 + if (selectChangeFlag) {
63 + this.emitSelectChange()
64 + }
65 + graph.setAutoPaint(autoPaint);
66 + graph.paint();
67 + },
68 + onCanvasClick() {
69 +
70 + if (this.keydown) {
71 + return
72 + }
73 +
74 + const graph = this.graph;
75 + const autoPaint = graph.get('autoPaint');
76 + graph.setAutoPaint(false);
77 + const selected = this.getSelected()
78 +
79 + // 当前是否选择有变化
80 + let selectChangeFlag = false
81 +
82 + flatten(Object.values(selected)).forEach(n => {
83 + if (n.hasState(SELECTED_STATE)) {
84 + selectChangeFlag = true
85 + graph.setItemState(n, SELECTED_STATE, false);
86 + }
87 + });
88 + if (selectChangeFlag) {
89 + this.emitSelectChange(true)
90 + }
91 +
92 + graph.paint();
93 + graph.setAutoPaint(autoPaint);
94 + },
95 + onKeyDown(e) {
96 + const code = e.key;
97 + if (ALLOW_EVENTS.indexOf(code.toLowerCase()) > -1) {
98 + this.keydown = true;
99 + } else {
100 + this.keydown = false;
101 + }
102 + },
103 + onKeyUp() {
104 + this.keydown = false;
105 + },
106 +
107 + getSelected() {
108 + return getSelected(this.graph)
109 + },
110 + emitSelectChange(isClear: boolean = false) {
111 +
112 + if (isClear) {
113 + this.selectChange([], [])
114 + } else {
115 + const graph = this.graph;
116 + const nodes = graph.findAllByState('node', SELECTED_STATE)
117 + const edges = graph.findAllByState('edge', SELECTED_STATE)
118 + this.selectChange(nodes, edges)
119 + }
120 + },
121 + selectChange(nodes: any[], edges: any[]) {
122 + this.graph.emit('select-change', {nodes, edges})
123 + },
124 + })
125 +}
126 +
127 +export function getSelected(graph: any) {
128 + return {
129 + nodes: graph.findAllByState('node', SELECTED_STATE),
130 + edges: graph.findAllByState('edge', SELECTED_STATE)
131 + }
132 +}
1 +import {G6} from "@/g6/g6";
2 +
3 +const Util = G6.Util
4 +const abs = Math.abs;
5 +const DRAG_OFFSET = 10;
6 +const body = document.body;
7 +const ALLOW_EVENTS = [16, 17, 18];
8 +
9 +export function dragCanvas(G6) {
10 + G6.registerBehavior('drag-canvas', {
11 + getDefaultCfg() {
12 + return {
13 + direction: 'both'
14 + };
15 + },
16 + getEvents() {
17 + return {
18 + 'canvas:mousedown': 'onMouseDown',
19 + 'canvas:mousemove': 'onMouseMove',
20 + 'canvas:mouseup': 'onMouseUp',
21 + 'canvas:click': 'onMouseUp',
22 + 'canvas:mouseleave': 'onOutOfRange',
23 + keyup: 'onKeyUp',
24 + keydown: 'onKeyDown'
25 + };
26 + },
27 + updateViewport(e) {
28 + const origin = this.origin;
29 + const clientX = +e.clientX;
30 + const clientY = +e.clientY;
31 + if (isNaN(clientX) || isNaN(clientY)) {
32 + return;
33 + }
34 + let dx = clientX - origin.x;
35 + let dy = clientY - origin.y;
36 + if (this.get('direction') === 'x') {
37 + dy = 0;
38 + } else if (this.get('direction') === 'y') {
39 + dx = 0;
40 + }
41 + this.origin = {
42 + x: clientX,
43 + y: clientY
44 + };
45 + this.graph.translate(dx, dy);
46 + this.graph.paint();
47 + },
48 + onMouseDown(e) {
49 + if (e.event.button === 2) {
50 + return;
51 + }
52 + if (this.keydown) {
53 + return;
54 + }
55 +
56 + this.origin = {x: e.clientX, y: e.clientY};
57 + this.dragging = false;
58 + },
59 + onMouseMove(e) {
60 + if (this.keydown) {
61 + return;
62 + }
63 +
64 + e = Util.cloneEvent(e);
65 + const graph = this.graph;
66 + if (!this.origin) { return; }
67 + if (this.origin && !this.dragging) {
68 + if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {
69 + return;
70 + }
71 + if (this.shouldBegin.call(this, e)) {
72 + e.type = 'dragstart';
73 + graph.emit('canvas:dragstart', e);
74 + this.dragging = true;
75 + }
76 + }
77 + if (this.dragging) {
78 + e.type = 'drag';
79 + graph.emit('canvas:drag', e);
80 + }
81 + if (this.shouldUpdate.call(this, e)) {
82 + this.updateViewport(e);
83 + }
84 + },
85 + onMouseUp(e) {
86 + if (this.keydown) {
87 + return;
88 + }
89 +
90 + if (!this.dragging) {
91 + this.origin = null;
92 + return;
93 + }
94 + e = Util.cloneEvent(e);
95 + const graph = this.graph;
96 + if (this.shouldEnd.call(this, e)) {
97 + this.updateViewport(e);
98 + }
99 + e.type = 'dragend';
100 + graph.emit('canvas:dragend', e);
101 + this.endDrag();
102 + },
103 + endDrag() {
104 + if (this.dragging) {
105 + this.origin = null;
106 + this.dragging = false;
107 + // 终止时需要判断此时是否在监听画布外的 mouseup 事件，若有则解绑
108 + const fn = this.fn;
109 + if (fn) {
110 + body.removeEventListener('mouseup', fn, false);
111 + this.fn = null;
112 + }
113 + }
114 + },
115 + // 若在拖拽时，鼠标移出画布区域，此时放开鼠标无法终止 drag 行为。在画布外监听 mouseup 事件，放开则终止
116 + onOutOfRange(e) {
117 + if (this.dragging) {
118 + const self = this;
119 + const canvasElement = self.graph.get('canvas').get('el');
120 + const fn = ev => {
121 + if (ev.target !== canvasElement) {
122 + self.onMouseUp(e);
123 + }
124 + };
125 + this.fn = fn;
126 + body.addEventListener('mouseup', fn, false);
127 + }
128 + },
129 + onKeyDown(e) {
130 + const code = e.keyCode || e.which;
131 + if (ALLOW_EVENTS.indexOf(code) > -1) {
132 + this.keydown = true;
133 + } else {
134 + this.keydown = false;
135 + }
136 + },
137 + onKeyUp() {
138 + this.keydown = false;
139 + }
140 + })
141 +}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.