Browse Source

feat: 编排组件

master
suanmei 5 years ago
committed by 拾邑
parent
commit
758adedc33
  1. 1
      .eslintrc.js
  2. 417
      package-lock.json
  3. 1
      package.json
  4. 36
      packages/core/package-lock.json
  5. 9
      packages/core/package.json
  6. 29
      packages/core/src/components/cells/decision.tsx
  7. 26
      packages/core/src/components/cells/end.tsx
  8. 13
      packages/core/src/components/cells/index.tsx
  9. 26
      packages/core/src/components/cells/start.tsx
  10. 103
      packages/core/src/components/sidebar.tsx
  11. 52
      packages/core/src/components/toolbar.tsx
  12. 48
      packages/core/src/data/cells.ts
  13. 11
      packages/core/src/index.tsx
  14. 72
      packages/core/src/utils/create-graph.ts
  15. 65
      packages/core/src/utils/patch-dnd.tsx
  16. 11
      rollup.config.js

1
.eslintrc.js

@ -37,6 +37,7 @@ module.exports = {
'prettier/@typescript-eslint',
],
rules: {
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'no-param-reassign': 'off',
'import/extensions': [

417
package-lock.json

@ -3583,6 +3583,23 @@
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"dev": true
},
"abstract-leveldown": {
"version": "0.12.4",
"resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-0.12.4.tgz",
"integrity": "sha1-KeGOYy5g5OIh1YECR4UqY9ey5BA=",
"dev": true,
"requires": {
"xtend": "~3.0.0"
},
"dependencies": {
"xtend": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
"integrity": "sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=",
"dev": true
}
}
},
"acorn": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
@ -4052,6 +4069,41 @@
"file-uri-to-path": "1.0.0"
}
},
"bl": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/bl/-/bl-0.8.2.tgz",
"integrity": "sha1-yba8oI0bwuoA/Ir7Txpf0eHGbk4=",
"dev": true,
"requires": {
"readable-stream": "~1.0.26"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"dev": true
},
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
}
}
},
"bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@ -4152,6 +4204,17 @@
"safe-buffer": "^5.1.2"
}
},
"browserify-fs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/browserify-fs/-/browserify-fs-1.0.0.tgz",
"integrity": "sha1-8HWqinKdTRcW0GZiDjhvzBMRqW8=",
"dev": true,
"requires": {
"level-filesystem": "^1.0.1",
"level-js": "^2.1.3",
"levelup": "^0.18.2"
}
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
@ -4215,6 +4278,12 @@
"isarray": "^1.0.0"
}
},
"buffer-es6": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/buffer-es6/-/buffer-es6-4.9.3.tgz",
"integrity": "sha1-8mNHuC33b9N+GLy1KIxJcM/VxAQ=",
"dev": true
},
"buffer-from": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@ -5986,6 +6055,15 @@
"clone": "^1.0.2"
}
},
"deferred-leveldown": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/deferred-leveldown/-/deferred-leveldown-0.2.0.tgz",
"integrity": "sha1-LO8fER4cV4cNi7uK8mUOWHzS9bQ=",
"dev": true,
"requires": {
"abstract-leveldown": "~0.12.1"
}
},
"define-properties": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@ -7383,6 +7461,12 @@
"for-in": "^1.0.1"
}
},
"foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
"integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
"dev": true
},
"forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@ -7476,6 +7560,41 @@
"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
"dev": true
},
"fwd-stream": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/fwd-stream/-/fwd-stream-1.0.4.tgz",
"integrity": "sha1-7Sgcq+1G/uz5Ie4y3ExQs3KsfPo=",
"dev": true,
"requires": {
"readable-stream": "~1.0.26-4"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"dev": true
},
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
}
}
},
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@ -8285,6 +8404,12 @@
"safer-buffer": ">= 2.1.2 < 3"
}
},
"idb-wrapper": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/idb-wrapper/-/idb-wrapper-1.7.2.tgz",
"integrity": "sha512-zfNREywMuf0NzDo9mVsL0yegjsirJxHpKHvWcyRozIqQy89g0a3U+oBPOCN4cc0oCiOuYgZHimzaW/R46G1Mpg==",
"dev": true
},
"ieee754": {
"version": "1.1.13",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@ -8404,6 +8529,12 @@
"integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
"dev": true
},
"indexof": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
"dev": true
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@ -8495,6 +8626,12 @@
"integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
"dev": true
},
"is": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/is/-/is-0.2.7.tgz",
"integrity": "sha1-OzSixI81mXLzUEKEkZOucmS2NWI=",
"dev": true
},
"is-accessor-descriptor": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@ -8639,6 +8776,12 @@
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
"dev": true
},
"is-object": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/is-object/-/is-object-0.1.2.tgz",
"integrity": "sha1-AO+8CIFsM8/ErIJR0TLhDcZQmNc=",
"dev": true
},
"is-plain-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@ -8747,6 +8890,12 @@
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"isbuffer": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/isbuffer/-/isbuffer-0.0.0.tgz",
"integrity": "sha1-OMFG2d9Si4v5sHAcPUPPEt8/w5s=",
"dev": true
},
"isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@ -8927,6 +9076,232 @@
"npmlog": "^4.1.2"
}
},
"level-blobs": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/level-blobs/-/level-blobs-0.1.7.tgz",
"integrity": "sha1-mrm5e7mfHtv594o0M+Ie1WOGva8=",
"dev": true,
"requires": {
"level-peek": "1.0.6",
"once": "^1.3.0",
"readable-stream": "^1.0.26-4"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"dev": true
},
"readable-stream": {
"version": "1.1.14",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
}
}
},
"level-filesystem": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/level-filesystem/-/level-filesystem-1.2.0.tgz",
"integrity": "sha1-oArKmRnEpN+v3KaoEI0iWq3/Y7M=",
"dev": true,
"requires": {
"concat-stream": "^1.4.4",
"errno": "^0.1.1",
"fwd-stream": "^1.0.4",
"level-blobs": "^0.1.7",
"level-peek": "^1.0.6",
"level-sublevel": "^5.2.0",
"octal": "^1.0.0",
"once": "^1.3.0",
"xtend": "^2.2.0"
},
"dependencies": {
"xtend": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-2.2.0.tgz",
"integrity": "sha1-7vax8ZjByN6vrYsXZaBNrUoBxak=",
"dev": true
}
}
},
"level-fix-range": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/level-fix-range/-/level-fix-range-1.0.2.tgz",
"integrity": "sha1-vxW5Fa422EcMgh6IPd95zRZCCCg=",
"dev": true
},
"level-hooks": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/level-hooks/-/level-hooks-4.5.0.tgz",
"integrity": "sha1-G5rmGSKTDzMF0aYfxNg8gQLA3ZM=",
"dev": true,
"requires": {
"string-range": "~1.2"
}
},
"level-js": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/level-js/-/level-js-2.2.4.tgz",
"integrity": "sha1-vAVfQYBjXUSJtWHJSG+jcOjBFpc=",
"dev": true,
"requires": {
"abstract-leveldown": "~0.12.0",
"idb-wrapper": "^1.5.0",
"isbuffer": "~0.0.0",
"ltgt": "^2.1.2",
"typedarray-to-buffer": "~1.0.0",
"xtend": "~2.1.2"
},
"dependencies": {
"object-keys": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
"integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=",
"dev": true
},
"xtend": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
"integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
"dev": true,
"requires": {
"object-keys": "~0.4.0"
}
}
}
},
"level-peek": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/level-peek/-/level-peek-1.0.6.tgz",
"integrity": "sha1-vsUccqgu5GTTNkNMfIdsP8vM538=",
"dev": true,
"requires": {
"level-fix-range": "~1.0.2"
}
},
"level-sublevel": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/level-sublevel/-/level-sublevel-5.2.3.tgz",
"integrity": "sha1-dEwSxy0ucr543eO5tc2E1iGRQTo=",
"dev": true,
"requires": {
"level-fix-range": "2.0",
"level-hooks": ">=4.4.0 <5",
"string-range": "~1.2.1",
"xtend": "~2.0.4"
},
"dependencies": {
"clone": {
"version": "0.1.19",
"resolved": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz",
"integrity": "sha1-YT+2hjmyaklKxTJT4Vsaa9iK2oU=",
"dev": true
},
"level-fix-range": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/level-fix-range/-/level-fix-range-2.0.0.tgz",
"integrity": "sha1-xBfWIVlEIVGhnZojZ4aPFyTC1Ug=",
"dev": true,
"requires": {
"clone": "~0.1.9"
}
},
"object-keys": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.2.0.tgz",
"integrity": "sha1-zd7AKZiwkb5CvxA1rjLknxy26mc=",
"dev": true,
"requires": {
"foreach": "~2.0.1",
"indexof": "~0.0.1",
"is": "~0.2.6"
}
},
"xtend": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-2.0.6.tgz",
"integrity": "sha1-XqZXptukRwacLlnFihE4ywxebO4=",
"dev": true,
"requires": {
"is-object": "~0.1.2",
"object-keys": "~0.2.0"
}
}
}
},
"levelup": {
"version": "0.18.6",
"resolved": "https://registry.npmjs.org/levelup/-/levelup-0.18.6.tgz",
"integrity": "sha1-5qAcsIlhbI7MApHCqb0/DETj5es=",
"dev": true,
"requires": {
"bl": "~0.8.1",
"deferred-leveldown": "~0.2.0",
"errno": "~0.1.1",
"prr": "~0.0.0",
"readable-stream": "~1.0.26",
"semver": "~2.3.1",
"xtend": "~3.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
"dev": true
},
"prr": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz",
"integrity": "sha1-GoS4WQgyVQFBGFPQCB7j+obikmo=",
"dev": true
},
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.1",
"isarray": "0.0.1",
"string_decoder": "~0.10.x"
}
},
"semver": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-2.3.2.tgz",
"integrity": "sha1-uYSPJdbPNjMwc+ye+IVtQvEjPlI=",
"dev": true
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"xtend": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-3.0.0.tgz",
"integrity": "sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=",
"dev": true
}
}
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -9173,6 +9548,12 @@
"yallist": "^3.0.2"
}
},
"ltgt": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
"integrity": "sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=",
"dev": true
},
"macos-release": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.3.0.tgz",
@ -10026,6 +10407,12 @@
"has": "^1.0.3"
}
},
"octal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/octal/-/octal-1.0.0.tgz",
"integrity": "sha1-Y+cWKmjvvrniE1iNWOmJ0eXEUws=",
"dev": true
},
"octokit-pagination-methods": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
@ -10434,6 +10821,12 @@
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
"dev": true
},
"process-es6": {
"version": "0.11.6",
"resolved": "https://registry.npmjs.org/process-es6/-/process-es6-0.11.6.tgz",
"integrity": "sha1-xrs4n5qVH4K9TrFpYAEFvS/5x3g=",
"dev": true
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@ -11033,6 +11426,18 @@
"rollup-pluginutils": "^2.8.1"
}
},
"rollup-plugin-node-builtins": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz",
"integrity": "sha1-JKH+1KQyV7a2Q3HYq8bOGrFFl+k=",
"dev": true,
"requires": {
"browserify-fs": "^1.0.0",
"buffer-es6": "^4.9.2",
"crypto-browserify": "^3.11.0",
"process-es6": "^0.11.2"
}
},
"rollup-plugin-size-snapshot": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-size-snapshot/-/rollup-plugin-size-snapshot-0.11.0.tgz",
@ -11670,6 +12075,12 @@
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
"dev": true
},
"string-range": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/string-range/-/string-range-1.2.2.tgz",
"integrity": "sha1-qJPtNH5yKZvIO++78qaSqNI51d0=",
"dev": true
},
"string-width": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
@ -12227,6 +12638,12 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
"typedarray-to-buffer": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-1.0.4.tgz",
"integrity": "sha1-m7i6DoQfs/TPH+fCRenz+opf6Zw=",
"dev": true
},
"typescript": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",

1
package.json

@ -35,6 +35,7 @@
"prettier": "^2.0.4",
"rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-size-snapshot": "^0.11.0",
"typescript": "^3.8.3"
},

36
packages/core/package-lock.json

@ -45,17 +45,24 @@
}
},
"@antv/x6": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@antv/x6/-/x6-0.3.3.tgz",
"integrity": "sha512-zeIVer6mNt/gdsGIbwJwW5fS1euHjlLslbOk7s8b/qLTdZ1EmbiMr9lTHKw3xnYd+2Q2GKy8NSLQNxjbWBmLfw==",
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@antv/x6/-/x6-0.3.4.tgz",
"integrity": "sha512-dchrtvPw6Su30QkCh65RfOcsBkJgYYPCRtUlJjouRhHnYPX1WmHxxRct4GvcVNfkXxxpBAIz8l7MN3TSDElhxQ==",
"dev": true,
"requires": {
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"mousetrap": "^1.6.3",
"size-sensor": "^0.2.5",
"utility-types": "^3.10.0"
}
},
"@antv/x6-react-shape": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@antv/x6-react-shape/-/x6-react-shape-0.2.2.tgz",
"integrity": "sha512-kaLT87/DelwGtq2hPpIZqOoX1KGppDBb9g2IcrWCp7ZcW3kIP7UM2E9SJprRMzwRUjLfhcXl8BUapFgRA8LAfQ==",
"dev": true
},
"@babel/code-frame": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@ -617,7 +624,8 @@
"jquery": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.0.tgz",
"integrity": "sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ=="
"integrity": "sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==",
"dev": true
},
"js-tokens": {
"version": "4.0.0",
@ -649,7 +657,14 @@
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
},
"lodash-es": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==",
"dev": true
},
"loose-envify": {
"version": "1.4.0",
@ -697,7 +712,8 @@
"mousetrap": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==",
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -1257,7 +1273,8 @@
"size-sensor": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-0.2.6.tgz",
"integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg=="
"integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg==",
"dev": true
},
"source-map": {
"version": "0.5.7",
@ -1307,7 +1324,8 @@
"utility-types": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
"dev": true
},
"warning": {
"version": "4.0.3",

9
packages/core/package.json

@ -36,6 +36,8 @@
"url": "https://github.com/suanmei/iMove/issues"
},
"devDependencies": {
"@antv/x6": "^0.3.4",
"@antv/x6-react-shape": "^0.2.2",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@types/react": "^16.9.34",
@ -45,13 +47,12 @@
"watch": "^1.0.2"
},
"peerDependencies": {
"@antv/x6": "^0.3.4",
"@antv/x6-react-shape": "^0.2.2",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"antd": "^4.1.4",
"react": "^16.13.1"
},
"gitHead": "9fafd8c5390fa001e7b661ccccfaf65f636d721a",
"dependencies": {
"@antv/x6": "^0.3.3"
}
"gitHead": "9fafd8c5390fa001e7b661ccccfaf65f636d721a"
}

29
packages/core/src/components/cells/decision.tsx

@ -0,0 +1,29 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const width = 48 * scale;
const height = 30 * scale;
return (
<svg
css={css`
width: ${width}px;
height: ${height}px;
`}
>
1,15 24,29 47,15 24,1
<polygon
css={css`
fill: #fef0dd;
stroke: #fccd8e;
`}
points={`${1 * scale},${15 * scale} ${24 * scale},${29 * scale} ${47 * scale},${
15 * scale
} ${24 * scale},${1 * scale}`}
strokeWidth="2"
/>
</svg>
);
};
export default StartCell;

26
packages/core/src/components/cells/end.tsx

@ -0,0 +1,26 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const width = 20 * scale;
const radius = 10 * scale;
return (
<svg
css={css`
width: ${width}px;
height: ${width}px;
`}
>
<circle
css={{ fill: '#f55753' }}
cx={radius}
cy={radius}
r={radius}
strokeWidth={2 * scale}
/>
<circle css={{ fill: '#faaba9' }} cx={radius} cy={radius} r={8 * scale} />
</svg>
);
};
export default StartCell;

13
packages/core/src/components/cells/index.tsx

@ -0,0 +1,13 @@
import Start from './start';
import Decision from './decision';
import End from './end';
const CellMap = {
start: Start,
decision: Decision,
end: End,
};
export default CellMap;
export type CellTypes = keyof typeof CellMap;

26
packages/core/src/components/cells/start.tsx

@ -0,0 +1,26 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const width = 20 * scale;
const radius = 10 * scale;
return (
<svg
css={css`
width: ${width}px;
height: ${width}px;
`}
>
<circle
css={{ fill: '#76ca02' }}
cx={radius}
cy={radius}
r={radius}
strokeWidth={2 * scale}
/>
<circle css={{ fill: '#bbe581' }} cx={radius} cy={radius} r={8 * scale} />
</svg>
);
};
export default StartCell;

103
packages/core/src/components/sidebar.tsx

@ -0,0 +1,103 @@
/** @jsx jsx */
import { useRef, useEffect, ReactNode } from 'react';
import { jsx, css } from '@emotion/core';
import styled from '@emotion/styled';
import { Graph } from '@antv/x6';
import { Collapse } from 'antd';
import { generals, DataItem } from '../data/cells';
import patchDnd from '../utils/patch-dnd';
import Cells from './cells';
import 'antd/lib/collapse/style';
const { Panel } = Collapse;
const ToolCollapse = styled(Collapse)`
border: none;
`;
const ToolPanel = styled(Panel)`
margin-right: -1px;
.ant-collapse-content-box {
margin-bottom: -1px;
padding: 0;
overflow: hidden;
}
`;
interface SidebarProps {
graph: Graph;
}
const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }): JSX.Element => {
return (
<div
css={css`
box-sizing: border-box;
display: inline-block;
padding: 10px 5px;
width: 50%;
height: 80px;
text-align: center;
vertical-align: top;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
`}
>
<div
css={css`
display: flex;
align-items: center;
justify-content: center;
height: 40px;
`}
>
{children}
</div>
<span
css={css`
font-size: 11px;
line-height: 19px;
`}
>
{data.title}
</span>
</div>
);
};
const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
const generalRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const generalContainer = generalRef.current;
patchDnd(generalContainer, graph, generals);
});
return (
<div
css={css`
height: 100%;
overflow: auto;
border-right: 1px solid #ddd;
`}
>
<ToolCollapse defaultActiveKey={['1']}>
<ToolPanel header="General" key="1">
<div ref={generalRef}>
{generals.map((cell) => {
const Cell = Cells[cell.style.type];
return (
<CellWrapper key={cell.style.type} data={cell}>
<Cell />
</CellWrapper>
);
})}
</div>
</ToolPanel>
</ToolCollapse>
</div>
);
};
export default Sidebar;

52
packages/core/src/components/toolbar.tsx

@ -1,52 +0,0 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import styled from '@emotion/styled';
import { Collapse } from 'antd';
import 'antd/lib/collapse/style';
const { Panel } = Collapse;
const ToolCollapse = styled(Collapse)`
border: none;
`;
const ToolPanel = styled(Panel)`
margin-right: -1px;
.ant-collapse-content-box {
margin-bottom: -1px;
padding: 0;
overflow: hidden;
}
`;
const Cell = styled.div`
box-sizing: border-box;
display: inline-block;
width: 50%;
height: 100px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
`;
const Toolbar = (): JSX.Element => {
return (
<div
css={css`
height: 100%;
overflow: auto;
border-right: 1px solid #ddd;
`}
>
<ToolCollapse defaultActiveKey={['1']}>
<ToolPanel header="General" key="1">
<Cell>2</Cell>
<Cell>2</Cell>
<Cell>2</Cell>
</ToolPanel>
</ToolCollapse>
</div>
);
};
export default Toolbar;

48
packages/core/src/data/cells.ts

@ -0,0 +1,48 @@
import { Style, Point } from '@antv/x6';
import { CellTypes } from '../components/cells';
interface CellStyle extends Style {
type: CellTypes;
}
export interface DataItem {
label?: string;
title: string;
data?: any;
width: number;
height: number;
scale: number;
style: CellStyle;
isEdge?: boolean;
points?: Point[];
}
export const generals: DataItem[] = [
{
title: 'Start Event',
width: 20,
height: 20,
scale: 2,
style: {
type: 'start',
},
},
{
title: 'Decision',
width: 48,
height: 30,
scale: 2,
style: {
type: 'decision',
},
},
{
title: 'End Event',
width: 20,
height: 20,
scale: 2,
style: {
type: 'end',
},
},
];

11
packages/core/src/index.tsx

@ -1,11 +1,14 @@
import * as React from 'react';
import { Layout } from 'antd';
import { Graph, DomEvent } from '@antv/x6';
import { Graph, Shape, DomEvent } from '@antv/x6';
import { ReactShape } from '@antv/x6-react-shape';
import styled from '@emotion/styled';
import Toolbar from './components/toolbar';
import { createGraph } from './utils/create-graph';
import Sidebar from './components/sidebar';
import createGraph from './utils/create-graph';
import 'antd/lib/layout/style';
Shape.register('react', ReactShape, true);
export interface CoreState {
inited: boolean;
}
@ -57,7 +60,7 @@ class Core extends React.Component<{}, CoreState> {
<h2>iMove</h2>
</IMoveHeader>
<IMoveLayout>
<IMoveSider>{inited && <Toolbar />}</IMoveSider>
<IMoveSider>{this.graph && inited && <Sidebar graph={this.graph} />}</IMoveSider>
<Content>
<div ref={this.container} />
</Content>

72
packages/core/src/utils/create-graph.ts

@ -1,16 +1,76 @@
import { Graph } from '@antv/x6';
// import Start from '../components/cells/start';
export function createGraph(container: HTMLDivElement): Graph {
export default function createGraph(container: HTMLDivElement): Graph {
return new Graph(container, {
rotate: false,
resize: true,
resize: false,
infinite: true,
backgroundColor: '#f8f9fa',
grid: {
type: 'dot',
color: '#bcbcbc',
},
});
}
guide: {
enabled: true,
dashed: true,
stroke: '#ff5500',
},
keyboard: {
enabled: true,
global: false,
escape: true,
},
selectionPreview: {
dashed: false,
strokeWidth: 2,
},
nodeStyle: {
fill: 'rgba(0, 0, 0, 0)',
stroke: 'none',
label: false,
editable: false,
},
edgeStyle: {
edge: 'elbow',
elbow: 'vertical',
labelBackgroundColor: '#f8f9fa',
rounded: true,
movable: false,
},
connection: {
enabled: true,
hotspotable: false,
livePreview: true,
},
connectionPreview: {
stroke: '#1890ff',
},
anchor: {
inductiveSize: 10,
},
anchorHighlight: {
strokeWidth: 16,
},
shouldRedrawOnDataChange(): boolean {
return true;
},
getAnchors(cell): [number, number][] {
if (cell.data.style.type === 'start') {
return [[0.5, 1]];
}
export function A(): void {
// code
if (cell.data.style.type === 'end') {
return [[0.5, 0]];
}
return [
[0.5, 0],
[0, 0.5],
[1, 0.5],
[0.5, 1],
];
},
});
}

65
packages/core/src/utils/patch-dnd.tsx

@ -0,0 +1,65 @@
import * as React from 'react';
import { Graph, Dnd } from '@antv/x6';
import CellMap from '../components/cells';
import { DataItem } from '../data/cells';
export default function patchDnd(
container: HTMLDivElement | null,
graph: Graph,
cellData: DataItem[]
): void {
if (!container) return;
(container.childNodes as NodeListOf<HTMLElement>).forEach((node, index) => {
const itemData = cellData[index];
const dnd = new Dnd<DataItem>(node, {
data: itemData,
getGraph: (): Graph => graph,
createDragElement: ({ data }): HTMLDivElement => {
const elem = document.createElement('div');
if (typeof data === 'undefined') return elem;
const { width, height, scale } = data;
elem.style.width = `${width * scale}px`;
elem.style.height = `${height * scale}px`;
elem.style.border = '1px dashed #000';
elem.style.cursor = 'move';
return elem;
},
createPreviewElement: ({ data }): HTMLDivElement => {
const elem = document.createElement('div');
if (typeof data === 'undefined') return elem;
const { width, height, scale } = data;
elem.style.width = `${width * scale}px`;
elem.style.height = `${height * scale}px`;
elem.style.border = '1px dashed #000';
elem.style.cursor = 'move';
return elem;
},
});
dnd.on('dragPrepare', ({ dragElement }) => {
dragElement.style.margin = '0';
});
dnd.on('drop', ({ data, targetPosition }) => {
if (typeof data === 'undefined') return;
const { width, height, scale } = data;
const { x, y } = targetPosition;
const Cell = CellMap[data.style.type];
const cell = graph.addNode({
x,
y,
data,
width: width * scale,
height: height * scale,
shape: 'react',
component: <Cell scale={scale} />,
});
graph.selectCell(cell);
});
});
}

11
rollup.config.js

@ -1,4 +1,5 @@
import resolve from '@rollup/plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import commonjs from '@rollup/plugin-commonjs';
import strip from '@rollup/plugin-strip';
import url from '@rollup/plugin-url';
@ -12,8 +13,13 @@ const extensions = ['.js', '.jsx', '.ts', '.tsx'];
export default {
input,
plugins: [
resolve({ extensions }),
commonjs({}),
resolve({ extensions, preferBuiltins: true }),
commonjs({
namedExports: {
'react-dom/server': ['renderToString'],
},
}),
builtins(),
babel({
extensions,
exclude: 'node_modules/**',
@ -26,5 +32,4 @@ export default {
strip({ debugger: true }),
sizeSnapshot({ printInfo: false }),
],
context: null,
};

Loading…
Cancel
Save