@steedos/steedos-plugin-schema-builder 2.6.1-beta.6 → 2.6.2-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -34
- package/package.json +4 -4
- package/package.service.js +7 -5
- package/package.service.yml +3 -0
- package/public/schema-builder/index.html +1 -1
- package/src/objects.object.yml +1 -1
- package/.scripts/npm-postinstall.js +0 -35
- package/.vscode/extensions.json +0 -5
- package/.vscode/settings.json +0 -10
- package/nodemon.json +0 -13
- package/plugin.config.yml +0 -4
- package/steedos-config.yml +0 -31
- package/webapp/index.html +0 -0
- package/webapp/package.json +0 -53
- package/webapp/src/g6/behavior/activate-relations/index.tsx +0 -160
- package/webapp/src/g6/behavior/darg/index.tsx +0 -146
- package/webapp/src/g6/behavior/index.tsx +0 -5
- package/webapp/src/g6/model/editor-background.png +0 -0
- package/webapp/src/g6/model/index.tsx +0 -574
- package/webapp/src/g6/model/model-node.tsx +0 -1080
- package/webapp/src/g6/model/model.scss +0 -163
- package/webapp/src/g6/model/toolbar.tsx +0 -360
- package/webapp/src/g6/shape/base-sharp/index.tsx +0 -19
- package/webapp/src/g6/shape/index.tsx +0 -0
- package/webapp/src/g6/util/graph.tsx +0 -60
- package/webapp/src/g6/util/hooks.tsx +0 -26
- package/webapp/src/g6/util/index.tsx +0 -20
- package/webapp/src/hook/index.tsx +0 -47
- package/webapp/src/index.tsx +0 -25
- package/webapp/src/page/dva-model/index.tsx +0 -70
- package/webapp/src/page/dva-model/reducer/arrange.tsx +0 -16
- package/webapp/src/page/dva-model/reducer/index.tsx +0 -7
- package/webapp/src/page/dva-model/reducer/init.tsx +0 -61
- package/webapp/src/page/dva-model/reducer/model.tsx +0 -126
- package/webapp/src/page/dva-model/reducer/on-expand.tsx +0 -27
- package/webapp/src/page/dva-model/style.tsx +0 -88
- package/webapp/src/page/hooks/callback.tsx +0 -54
- package/webapp/src/page/hooks/fullscreen.tsx +0 -34
- package/webapp/src/page/hooks/pagehooks.tsx +0 -127
- package/webapp/src/page/hooks/resize.tsx +0 -20
- package/webapp/src/page/index.tsx +0 -393
- package/webapp/src/page/model-navi/index.tsx +0 -329
- package/webapp/src/page/model-navi/style.scss +0 -111
- package/webapp/src/page/util/index.tsx +0 -234
- package/webapp/src/page/util/layout-nodes/index.tsx +0 -185
- package/webapp/src/pdm/index.tsx +0 -50
- package/webapp/src/pdm/pdm-json/index.js +0 -224
- package/webapp/src/pdm/pdm-json/removeDiacritics.js +0 -96
- package/webapp/src/style.less +0 -14
- package/webapp/src/tree/index.tsx +0 -46
- package/webapp/src/tree/style.scss +0 -26
- package/webapp/src/type/field.tsx +0 -10
- package/webapp/src/type/index.tsx +0 -3
- package/webapp/src/type/model.tsx +0 -12
- package/webapp/src/type/module.tsx +0 -4
- package/webapp/webconfig.config.js +0 -57
package/README.md
CHANGED
|
@@ -1,36 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
```
|
|
3
|
-
npm i yarn -g
|
|
4
|
-
```
|
|
1
|
+
# Object Schema Builder
|
|
5
2
|
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
npm config set registry https://registry.npmmirror.com/
|
|
9
|
-
```
|
|
3
|
+
By enabling this package, a new "Schema Builder" button is added within the object manager interface.
|
|
10
4
|
|
|
11
|
-
|
|
12
|
-
```
|
|
13
|
-
yarn
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
### 启动服务器
|
|
17
|
-
```
|
|
18
|
-
yarn start
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### 启动前端调试
|
|
22
|
-
```
|
|
23
|
-
yarn fe-watch
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
### 编译前端
|
|
28
|
-
```
|
|
29
|
-
yarn fe-build
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### 了解更多
|
|
33
|
-
- [开发文档](https://www.steedos.com/developer/)
|
|
34
|
-
|
|
35
|
-
## 功能说明
|
|
36
|
-
- 用于生成表结构关系图
|
|
5
|
+
Clicking this button allows you to view the object relationship graph.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steedos/steedos-plugin-schema-builder",
|
|
3
|
-
"version": "2.6.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "2.6.2-beta.2",
|
|
4
|
+
"description": "Add Schema Builder to Steedos Object Manager.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "ISC",
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://
|
|
13
|
-
"gitHead": "
|
|
12
|
+
"homepage": "https://github.com/steedos/steedos-platform/tree/master/packages/steedos-plugin-schema-builder",
|
|
13
|
+
"gitHead": "ddef9fbc34afc7b57c59a31e9ed4f56818dc4c31"
|
|
14
14
|
}
|
package/package.service.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const project = require('./package.json');
|
|
3
3
|
const packageName = project.name;
|
|
4
|
-
const packageLoader = require('@steedos/service-
|
|
4
|
+
const packageLoader = require('@steedos/service-package-loader');
|
|
5
5
|
const path = require('path');
|
|
6
6
|
const init = require('.').init;
|
|
7
7
|
/**
|
|
@@ -17,7 +17,9 @@ module.exports = {
|
|
|
17
17
|
*/
|
|
18
18
|
settings: {
|
|
19
19
|
packageInfo: {
|
|
20
|
-
|
|
20
|
+
name: packageName,
|
|
21
|
+
path: __dirname,
|
|
22
|
+
isPackage: true
|
|
21
23
|
}
|
|
22
24
|
},
|
|
23
25
|
|
|
@@ -44,9 +46,9 @@ module.exports = {
|
|
|
44
46
|
* Methods
|
|
45
47
|
*/
|
|
46
48
|
methods: {
|
|
47
|
-
init: function (context) {
|
|
48
|
-
|
|
49
|
-
}
|
|
49
|
+
// init: function (context) {
|
|
50
|
+
// init(context);
|
|
51
|
+
// }
|
|
50
52
|
},
|
|
51
53
|
|
|
52
54
|
/**
|
package/src/objects.object.yml
CHANGED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
const { execSync } = require('child_process');
|
|
2
|
-
const path = require('path');
|
|
3
|
-
console.log("Running npm-postinstall.js");
|
|
4
|
-
|
|
5
|
-
//execSync('cp node_modules/devextreme/dist/css/fonts/* public/fonts/devextreme/');
|
|
6
|
-
|
|
7
|
-
// fix DevExtreme的 formatISO8601函数没用使用utc时间
|
|
8
|
-
execSync('rm -rf ./node_modules/crypto');
|
|
9
|
-
execSync('rm -rf ./node_modules/bcrypt');
|
|
10
|
-
|
|
11
|
-
// if (process.platform == "darwin"){
|
|
12
|
-
// execSync('cp -r .scripts/bcrypt-57-darwin-x64/* node_modules/bcrypt/');
|
|
13
|
-
// execSync('cp -r .scripts/bcrypt-57-darwin-x64/* ../node_modules/bcrypt/');
|
|
14
|
-
// }
|
|
15
|
-
// else if (process.platform == "win32") {
|
|
16
|
-
// execSync('cp -r .scripts/bcrypt-57-win32-x64/* node_modules/bcrypt/');
|
|
17
|
-
// execSync('cp -r .scripts/bcrypt-57-win32-x64/* ../node_modules/bcrypt/');
|
|
18
|
-
// }
|
|
19
|
-
|
|
20
|
-
// 修正 旧版 windows 客户端
|
|
21
|
-
|
|
22
|
-
execSync('rm -rf node_modules/@steedos');
|
|
23
|
-
execSync('rm -rf node_modules/steedos-server');
|
|
24
|
-
execSync('rm -rf node_modules/graphql');
|
|
25
|
-
if (process.platform == "win32") {
|
|
26
|
-
execSync('mklink /J '+path.join(process.cwd(), '/node_modules/@steedos')+' '+ path.join('F:/GitHub/steedos-platform/node_modules/@steedos')); //指向本地platform
|
|
27
|
-
execSync('mklink /J '+path.join(process.cwd(), '/node_modules/steedos-server')+' '+ path.join('F:/GitHub/steedos-platform/node_modules/steedos-server')); //指向本地platform
|
|
28
|
-
execSync('rm -rf node_modules/@steedos/metadata-api');
|
|
29
|
-
execSync('mklink /J '+path.join(process.cwd(), '/node_modules/@steedos/metadata-api')+' '+ path.join('F:/GitHub/steedos-enterprise/packages/metadata-api')); //指向本地platform
|
|
30
|
-
execSync('rm -rf node_modules/@steedos/metadata-core');
|
|
31
|
-
execSync('mklink /J '+path.join(process.cwd(), '/node_modules/@steedos/metadata-core')+' '+ path.join('F:/GitHub/steedos-enterprise/packages/metadata-core')); //指向本地platform
|
|
32
|
-
execSync('mklink /J '+path.join(process.cwd(), '/node_modules/graphql')+' '+ path.join('F:/GitHub/steedos-platform/node_modules/graphql')); //指向本地platform
|
|
33
|
-
}else{
|
|
34
|
-
execSync('ln -s ' + process.cwd() + '/../node_modules/@steedos ' + process.cwd() + '/node_modules/@steedos' );
|
|
35
|
-
}
|
package/.vscode/extensions.json
DELETED
package/.vscode/settings.json
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"yaml.completion": true,
|
|
3
|
-
"yaml.customTags": [
|
|
4
|
-
"tag:yaml.org,2002:js/function"
|
|
5
|
-
],
|
|
6
|
-
"yaml.schemas": {
|
|
7
|
-
"https://steedos.github.io/schemas/app/schema.json": "/*.app.yml",
|
|
8
|
-
"https://steedos.github.io/schemas/object/schema.json": "/*.object.yml"
|
|
9
|
-
}
|
|
10
|
-
}
|
package/nodemon.json
DELETED
package/plugin.config.yml
DELETED
package/steedos-config.yml
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
datasources:
|
|
2
|
-
default:
|
|
3
|
-
connection:
|
|
4
|
-
url: ${MONGO_URL}
|
|
5
|
-
objectFiles:
|
|
6
|
-
- "./src/**"
|
|
7
|
-
public:
|
|
8
|
-
cfs:
|
|
9
|
-
store: "local"
|
|
10
|
-
local:
|
|
11
|
-
folder: "./storage"
|
|
12
|
-
email:
|
|
13
|
-
host:
|
|
14
|
-
port: 465
|
|
15
|
-
username:
|
|
16
|
-
password:
|
|
17
|
-
secure: true
|
|
18
|
-
from:
|
|
19
|
-
tenant:
|
|
20
|
-
_id:
|
|
21
|
-
name: 华炎魔方
|
|
22
|
-
logo_url:
|
|
23
|
-
background_url:
|
|
24
|
-
enable_register: true
|
|
25
|
-
enable_forget_password: false
|
|
26
|
-
enable_create_tenant: true
|
|
27
|
-
enable_password_login: true
|
|
28
|
-
enable_bind_email: false
|
|
29
|
-
enable_bind_mobile: false
|
|
30
|
-
plugins:
|
|
31
|
-
- "@steedos/accounts"
|
package/webapp/index.html
DELETED
|
File without changes
|
package/webapp/package.json
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@steedos/steedos-plugin-schema-builder",
|
|
3
|
-
"version": "2.2.50",
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"debug": "nodemon server.js",
|
|
8
|
-
"start": "node server.js",
|
|
9
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
-
"fe-build": "rm -rf public/schema-builder && cross-env NODE_ENV=production webpack --config ./webapp/webconfig.config.js --mode production --colors --max_old_space_size=1024 && rm -rf docker/public ",
|
|
11
|
-
"fe-watch": "webpack-dev-server --watch-poll --config ./webapp/webconfig.config.js --mode development",
|
|
12
|
-
"fe-server": " scp public/schema-builder/** root@$SERVER_IP:/root/docker-yml/steedos/docker-volumes/steedos/public/schema-builder",
|
|
13
|
-
"fe-publish": "npm run fe-build && npm run fe-server",
|
|
14
|
-
"os": "cp -r F:/GitHub/steedos-platform/packages/* node_modules/@steedos/ && cp -r F:/GitHub/steedos-platform/server/* node_modules/steedos-server/",
|
|
15
|
-
"pub": "npm publish --registry https://registry.npmjs.org && start https://npm.taobao.org/sync/@steedos/steedos-plugin-schema-builder",
|
|
16
|
-
"pub_next": "npm publish --tag next --registry https://registry.npmjs.org && start https://npm.taobao.org/sync/@steedos/steedos-plugin-schema-builder",
|
|
17
|
-
"linkToDevPlatform": "node .scripts/npm-postinstall.js"
|
|
18
|
-
},
|
|
19
|
-
"author": "",
|
|
20
|
-
"license": "ISC",
|
|
21
|
-
"private": false,
|
|
22
|
-
"publishConfig": {
|
|
23
|
-
"access": "public"
|
|
24
|
-
},
|
|
25
|
-
"devDependencies": {
|
|
26
|
-
"@antv/g6": "^3.6.0",
|
|
27
|
-
"@iarna/rtf-to-html": "^1.1.0",
|
|
28
|
-
"@types/react": "^16.9.22",
|
|
29
|
-
"@types/react-dom": "^16.8.4",
|
|
30
|
-
"ahooks": "^2.4.0",
|
|
31
|
-
"ak-webpack": "^1.0.9",
|
|
32
|
-
"antd": "^4.3.5",
|
|
33
|
-
"classnames": "^2.2.6",
|
|
34
|
-
"cross-env": "^7.0.3",
|
|
35
|
-
"dotenv-flow": "^3.1.0",
|
|
36
|
-
"dva": "^2.6.0-beta.14",
|
|
37
|
-
"immer": "^4.0.0",
|
|
38
|
-
"nodemon": "^2.0.19",
|
|
39
|
-
"react": "^16.8.6",
|
|
40
|
-
"react-custom-scrollbars": "^4.2.1",
|
|
41
|
-
"react-dnd": "^9.3.4",
|
|
42
|
-
"react-dnd-html5-backend": "^9.3.4",
|
|
43
|
-
"react-dom": "^16.9.0",
|
|
44
|
-
"react-scrollbars-custom": "^4.0.21",
|
|
45
|
-
"stats": "^1.0.0",
|
|
46
|
-
"stats.js": "^0.17.0",
|
|
47
|
-
"typescript": "4.6.3",
|
|
48
|
-
"unstated-next": "^1.1.0",
|
|
49
|
-
"with-dnd-context": "^1.0.4",
|
|
50
|
-
"xml2js": "^0.4.23"
|
|
51
|
-
},
|
|
52
|
-
"homepage": "https://developer.steedos.com"
|
|
53
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
export default {
|
|
3
|
-
getDefaultCfg() {
|
|
4
|
-
return {
|
|
5
|
-
trigger: 'mouseenter',
|
|
6
|
-
// 可选 mouseenter || click
|
|
7
|
-
activeState: 'active',
|
|
8
|
-
inactiveState: 'inactive',
|
|
9
|
-
|
|
10
|
-
shouldUpdate() {
|
|
11
|
-
return true
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
getEvents() {
|
|
18
|
-
if (this.get('trigger') === 'mouseenter') {
|
|
19
|
-
return {
|
|
20
|
-
'node:mouseenter': 'setAllItemStates',
|
|
21
|
-
'node:mouseleave': 'clearAllItemStates',
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return {
|
|
26
|
-
'node:click': 'setAllItemStates',
|
|
27
|
-
'canvas:click': 'clearAllItemStates',
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
setAllItemStates(e) {
|
|
32
|
-
// return
|
|
33
|
-
const graph = this.get('graph')
|
|
34
|
-
const item = e.item
|
|
35
|
-
this.item = item
|
|
36
|
-
|
|
37
|
-
if (!this.shouldUpdate(e.item, {
|
|
38
|
-
event: e,
|
|
39
|
-
action: 'activate',
|
|
40
|
-
})) {
|
|
41
|
-
return
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const activeState = this.get('activeState')
|
|
45
|
-
const inactiveState = this.get('inactiveState')
|
|
46
|
-
const autoPaint = graph.get('autoPaint')
|
|
47
|
-
graph.setAutoPaint(false)
|
|
48
|
-
graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
|
|
49
|
-
// graph.setItemState(node, activeState, false)
|
|
50
|
-
// inactiveState && graph.setItemState(node, inactiveState, true)
|
|
51
|
-
graph.updateItem(node, {
|
|
52
|
-
active: false,
|
|
53
|
-
inactive: true,
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
graph.getEdges().filter((a) => !a.isSys).forEach((edge) => {
|
|
57
|
-
graph.setItemState(edge, 'init', false)
|
|
58
|
-
// graph.updateItem(edge, { active: false, into : false })
|
|
59
|
-
graph.setItemState(edge, inactiveState, true)
|
|
60
|
-
graph.setItemState(edge, activeState, false) // inactiveState && graph.setItemState(edge, inactiveState, true)
|
|
61
|
-
}) // inactiveState && graph.setItemState(item, inactiveState, false)
|
|
62
|
-
// graph.setItemState(item, activeState, true)
|
|
63
|
-
|
|
64
|
-
graph.updateItem(item, {
|
|
65
|
-
active: true,
|
|
66
|
-
}) // const { target } = e
|
|
67
|
-
// // alert(target.attr('text'))
|
|
68
|
-
// if (target.attr('text')) {
|
|
69
|
-
// target.attr('fill_old', target.attr('fill'))
|
|
70
|
-
// target.attr('fill', 'red')
|
|
71
|
-
// }
|
|
72
|
-
|
|
73
|
-
graph.getEdges().forEach((edge) => {
|
|
74
|
-
if (edge.getSource() === item) {
|
|
75
|
-
// inactiveState && graph.setItemState(edge.getTarget(), inactiveState, false)
|
|
76
|
-
// graph.updateItem(edge.getTarget(), { active: true })
|
|
77
|
-
graph.setItemState(edge.getTarget(), activeState, true)
|
|
78
|
-
graph.setItemState(edge, activeState, true)
|
|
79
|
-
graph.setItemState(edge, inactiveState, false) // graph.updateItem(edge, { active: true, into : true })
|
|
80
|
-
|
|
81
|
-
graph.updateItem(edge.getTarget(), {
|
|
82
|
-
out: false,
|
|
83
|
-
into: true,
|
|
84
|
-
})
|
|
85
|
-
edge.toFront()
|
|
86
|
-
} else if (edge.getTarget() === item) {
|
|
87
|
-
graph.updateItem(edge.getSource(), {
|
|
88
|
-
into: false,
|
|
89
|
-
out: true,
|
|
90
|
-
})
|
|
91
|
-
// inactiveState && graph.setItemState(edge.getSource(), inactiveState, false)
|
|
92
|
-
|
|
93
|
-
graph.setItemState(edge.getSource(), activeState, true)
|
|
94
|
-
graph.setItemState(edge, activeState, true)
|
|
95
|
-
graph.setItemState(edge, inactiveState, true) // graph.updateItem(edge, { active: true, out : true })
|
|
96
|
-
|
|
97
|
-
edge.toFront()
|
|
98
|
-
}
|
|
99
|
-
})
|
|
100
|
-
graph.paint()
|
|
101
|
-
graph.setAutoPaint(autoPaint)
|
|
102
|
-
graph.emit('afteractivaterelations', {
|
|
103
|
-
item: e.item,
|
|
104
|
-
action: 'activate',
|
|
105
|
-
})
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
clearAllItemStates(e) {
|
|
109
|
-
// return
|
|
110
|
-
// const { target } = e
|
|
111
|
-
// // alert(target.attr('text'))
|
|
112
|
-
// if (target.attr('text')) {
|
|
113
|
-
// // target.attr('fill_old', target.attr('fill'))
|
|
114
|
-
// if (target.attr('fill_old'))
|
|
115
|
-
// target.attr('fill', target.attr('fill_old'))
|
|
116
|
-
// }
|
|
117
|
-
const graph = this.get('graph')
|
|
118
|
-
|
|
119
|
-
if (!this.shouldUpdate(e.item, {
|
|
120
|
-
event: e,
|
|
121
|
-
action: 'deactivate',
|
|
122
|
-
})) {
|
|
123
|
-
return
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
const autoPaint = graph.get('autoPaint')
|
|
127
|
-
graph.setAutoPaint(false)
|
|
128
|
-
const activeState = this.get('activeState')
|
|
129
|
-
const inactiveState = this.get('inactiveState')
|
|
130
|
-
graph.getNodes().filter((a) => !a.isSys).forEach((n) => {
|
|
131
|
-
// graph.clearItemStates(node, [activeState , inactiveState ])
|
|
132
|
-
// graph.setItemState(n, activeState, false)
|
|
133
|
-
// graph.setItemState(n, inactiveState, false)
|
|
134
|
-
graph.updateItem(n, {
|
|
135
|
-
active: false,
|
|
136
|
-
into: false,
|
|
137
|
-
out: false,
|
|
138
|
-
inactive: false,
|
|
139
|
-
})
|
|
140
|
-
|
|
141
|
-
})
|
|
142
|
-
// alert(graph.getEdges().length)
|
|
143
|
-
graph.getEdges().forEach((n) => {
|
|
144
|
-
// graph.updateItem(n, { active: false, into : false , out : false })
|
|
145
|
-
// graph.clearItemStates(edge, [activeState , inactiveState ])
|
|
146
|
-
graph.clearItemStates(n, [activeState, inactiveState])
|
|
147
|
-
graph.setItemState(n, 'init', true)
|
|
148
|
-
// graph.setItemState(n, activeState, false)
|
|
149
|
-
// graph.setItemState(n, inactiveState, false)
|
|
150
|
-
})
|
|
151
|
-
graph.paint()
|
|
152
|
-
graph.setAutoPaint(autoPaint) // alert(activeState)
|
|
153
|
-
|
|
154
|
-
graph.emit('afteractivaterelations', {
|
|
155
|
-
item: e.item || this.item,
|
|
156
|
-
action: 'deactivate',
|
|
157
|
-
})
|
|
158
|
-
},
|
|
159
|
-
|
|
160
|
-
}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { Util } from '@antv/g6';
|
|
3
|
-
import _ from 'lodash';
|
|
4
|
-
const abs = Math.abs;
|
|
5
|
-
const DRAG_OFFSET = 10;
|
|
6
|
-
const body = document.body;
|
|
7
|
-
export default {
|
|
8
|
-
getDefaultCfg() {
|
|
9
|
-
return {
|
|
10
|
-
direction: 'both'
|
|
11
|
-
};
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
getEvents() {
|
|
15
|
-
return {
|
|
16
|
-
'canvas:mousedown': 'onMouseDown',
|
|
17
|
-
'canvas:mousemove': 'onMouseMove',
|
|
18
|
-
'canvas:mouseup': 'onMouseUp',
|
|
19
|
-
'canvas:click': 'onMouseUp',
|
|
20
|
-
'canvas:mouseleave': 'onOutOfRange'
|
|
21
|
-
};
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
updateViewport(e) {
|
|
25
|
-
const origin = this.origin;
|
|
26
|
-
const clientX = +e.clientX;
|
|
27
|
-
const clientY = +e.clientY;
|
|
28
|
-
|
|
29
|
-
if (isNaN(clientX) || isNaN(clientY)) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
let dx = clientX - origin.x;
|
|
34
|
-
let dy = clientY - origin.y;
|
|
35
|
-
|
|
36
|
-
if (this.get('direction') === 'x') {
|
|
37
|
-
dy = 0;
|
|
38
|
-
} else if (this.get('direction') === 'y') {
|
|
39
|
-
dx = 0;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
this.origin = {
|
|
43
|
-
x: clientX,
|
|
44
|
-
y: clientY
|
|
45
|
-
};
|
|
46
|
-
this.graph.translate(dx, dy);
|
|
47
|
-
this.graph.paint();
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
onMouseDown(e) {
|
|
51
|
-
this.origin = {
|
|
52
|
-
x: e.clientX,
|
|
53
|
-
y: e.clientY
|
|
54
|
-
};
|
|
55
|
-
this.dragging = false;
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
onMouseMove(e) {
|
|
59
|
-
e = Util.cloneEvent(e);
|
|
60
|
-
const graph = this.graph;
|
|
61
|
-
|
|
62
|
-
if (!this.origin) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
if (this.origin && !this.dragging) {
|
|
67
|
-
if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
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
|
-
|
|
78
|
-
if (this.dragging) {
|
|
79
|
-
e.type = 'drag';
|
|
80
|
-
const self = this;
|
|
81
|
-
const canvasElement = self.graph.get('canvas').get('el');
|
|
82
|
-
canvasElement.style.cursor = 'grabbing';
|
|
83
|
-
graph.emit('canvas:drag', e);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
if (this.shouldUpdate.call(this, e)) {
|
|
87
|
-
this.updateViewport(e); // console.log(e)
|
|
88
|
-
// _.throttle(() => {
|
|
89
|
-
// this.updateViewport(e)
|
|
90
|
-
// }, 0)
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
onMouseUp(e) {
|
|
95
|
-
if (!this.dragging) {
|
|
96
|
-
this.origin = null;
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
e = Util.cloneEvent(e);
|
|
101
|
-
const graph = this.graph;
|
|
102
|
-
|
|
103
|
-
if (this.shouldEnd.call(this, e)) {
|
|
104
|
-
this.updateViewport(e);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
e.type = 'dragend';
|
|
108
|
-
graph.emit('canvas:dragend', e);
|
|
109
|
-
this.endDrag();
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
endDrag() {
|
|
113
|
-
if (this.dragging) {
|
|
114
|
-
const self = this;
|
|
115
|
-
const canvasElement = self.graph.get('canvas').get('el');
|
|
116
|
-
canvasElement.style.cursor = 'grab';
|
|
117
|
-
this.origin = null;
|
|
118
|
-
this.dragging = false; // 终止时需要判断此时是否在监听画布外的 mouseup 事件,若有则解绑
|
|
119
|
-
|
|
120
|
-
const fn = this.fn;
|
|
121
|
-
|
|
122
|
-
if (fn) {
|
|
123
|
-
body.removeEventListener('mouseup', fn, false);
|
|
124
|
-
this.fn = null;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
|
|
129
|
-
// 若在拖拽时,鼠标移出画布区域,此时放开鼠标无法终止 drag 行为。在画布外监听 mouseup 事件,放开则终止
|
|
130
|
-
onOutOfRange(e) {
|
|
131
|
-
if (this.dragging) {
|
|
132
|
-
const self = this;
|
|
133
|
-
const canvasElement = self.graph.get('canvas').get('el');
|
|
134
|
-
|
|
135
|
-
const fn = ev => {
|
|
136
|
-
if (ev.target !== canvasElement) {
|
|
137
|
-
self.onMouseUp(e);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
this.fn = fn;
|
|
142
|
-
body.addEventListener('mouseup', fn, false);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
};
|
|
Binary file
|