Browse Source

feat: 元件属性

master
suanmei 5 years ago
committed by 拾邑
parent
commit
c4723a6bd7
  1. 417
      package-lock.json
  2. 1
      package.json
  3. 31
      packages/core/package-lock.json
  4. 5
      packages/core/package.json
  5. 34
      packages/core/src/components/cells/action.tsx
  6. 40
      packages/core/src/components/cells/decision.tsx
  7. 5
      packages/core/src/components/cells/end.tsx
  8. 2
      packages/core/src/components/cells/index.tsx
  9. 3
      packages/core/src/components/cells/start.tsx
  10. 90
      packages/core/src/components/setting.tsx
  11. 21
      packages/core/src/components/sidebar.tsx
  12. 55
      packages/core/src/data/cells.ts
  13. 12
      packages/core/src/data/commands.tsx
  14. 7
      packages/core/src/index.tsx
  15. 4
      packages/core/src/model/cells.ts
  16. 1
      packages/core/src/model/index.ts
  17. 17
      packages/core/src/utils/create-graph.tsx
  18. 14
      packages/core/src/utils/patch-dnd.tsx
  19. 16
      packages/core/src/utils/styles/cells.ts
  20. 8
      rollup.config.js

417
package-lock.json

@ -3583,23 +3583,6 @@
"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",
@ -4069,41 +4052,6 @@
"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",
@ -4204,17 +4152,6 @@
"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",
@ -4278,12 +4215,6 @@
"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",
@ -6055,15 +5986,6 @@
"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",
@ -7461,12 +7383,6 @@
"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",
@ -7560,41 +7476,6 @@
"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",
@ -8404,12 +8285,6 @@
"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",
@ -8529,12 +8404,6 @@
"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",
@ -8626,12 +8495,6 @@
"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",
@ -8776,12 +8639,6 @@
"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",
@ -8890,12 +8747,6 @@
"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",
@ -9076,232 +8927,6 @@
"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",
@ -9548,12 +9173,6 @@
"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",
@ -10407,12 +10026,6 @@
"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",
@ -10821,12 +10434,6 @@
"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",
@ -11426,18 +11033,6 @@
"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",
@ -12075,12 +11670,6 @@
"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",
@ -12638,12 +12227,6 @@
"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,7 +35,6 @@
"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"
},

31
packages/core/package-lock.json

@ -281,6 +281,15 @@
"csstype": "^2.2.0"
}
},
"@types/react-dom": {
"version": "16.9.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.7.tgz",
"integrity": "sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/react-lifecycles-compat": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.1.tgz",
@ -1191,6 +1200,18 @@
"prop-types": "^15.6.2"
}
},
"react-dom": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
"integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"scheduler": "^0.19.1"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -1255,6 +1276,16 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
},
"scheduler": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
"integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"scroll-into-view-if-needed": {
"version": "2.2.24",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz",

5
packages/core/package.json

@ -42,8 +42,10 @@
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"antd": "^4.1.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rollup": "^2.6.1",
"watch": "^1.0.2"
},
@ -54,7 +56,8 @@
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"antd": "^4.1.4",
"react": "^16.13.1"
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"gitHead": "9fafd8c5390fa001e7b661ccccfaf65f636d721a"
}

34
packages/core/src/components/cells/action.tsx

@ -0,0 +1,34 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { CellProps } from '../../model';
import Label from '../../utils/styles/cells';
const StateCell = ({ label, scale = 1 }: CellProps): JSX.Element => {
const width = 48 * scale;
const height = 30 * scale;
return (
<div>
<svg
css={css`
width: ${width}px;
height: ${height}px;
`}
>
<rect
css={css`
fill: #daeffa;
stroke: #82caed;
`}
x="1"
y="1"
width={width - 2}
height={height - 2}
strokeWidth="2"
/>
</svg>
{label && <Label>{label}</Label>}
</div>
);
};
export default StateCell;

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

@ -1,29 +1,33 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { CellProps } from '../../model';
import Label from '../../utils/styles/cells';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const DecisionCell = ({ label, scale = 1 }: CellProps): 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
<div>
<svg
css={css`
fill: #fef0dd;
stroke: #fccd8e;
width: ${width}px;
height: ${height}px;
`}
points={`${1 * scale},${15 * scale} ${24 * scale},${29 * scale} ${47 * scale},${
15 * scale
} ${24 * scale},${1 * scale}`}
strokeWidth="2"
/>
</svg>
>
<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>
{label && <Label>{label}</Label>}
</div>
);
};
export default StartCell;
export default DecisionCell;

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

@ -1,7 +1,8 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { CellProps } from '../../model';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const EndCell = ({ scale = 1 }: CellProps): JSX.Element => {
const width = 20 * scale;
const radius = 10 * scale;
return (
@ -23,4 +24,4 @@ const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
);
};
export default StartCell;
export default EndCell;

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

@ -1,9 +1,11 @@
import Start from './start';
import Action from './action';
import Decision from './decision';
import End from './end';
const CellMap = {
start: Start,
action: Action,
decision: Decision,
end: End,
};

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

@ -1,7 +1,8 @@
/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { CellProps } from '../../model';
const StartCell = ({ scale = 1 }: { scale?: number }): JSX.Element => {
const StartCell = ({ scale = 1 }: CellProps): JSX.Element => {
const width = 20 * scale;
const radius = 10 * scale;
return (

90
packages/core/src/components/setting.tsx

@ -0,0 +1,90 @@
/** @jsx jsx */
import { useState } from 'react';
import { jsx, css } from '@emotion/core';
import styled from '@emotion/styled';
import { Graph, Cell } from '@antv/x6';
import { Collapse, Form, Input } from 'antd';
import 'antd/lib/form/style';
import 'antd/lib/input/style';
const { Panel } = Collapse;
const { Item } = Form;
const Header = styled.h3`
margin-bottom: 0;
padding-left: 20px;
height: 36px;
line-height: 36px;
font-size: 12px;
color: #555;
border-bottom: 1px solid #ddd;
`;
const SettingCollapse = styled(Collapse)`
font-size: 14px;
border: none;
> .ant-collapse-item > .ant-collapse-header {
height: 36px;
line-height: 12px;
font-size: 12px;
color: #666;
}
`;
interface SettingProps {
graph: Graph;
}
const Setting = ({ graph }: SettingProps): JSX.Element => {
const [cell, setCell] = useState<Cell<any> | null>(null);
graph.on('selection:changed', () => {
const cells = graph.getSelectedCells();
setCell(cells.length > 0 ? cells[0] : null);
});
let cellType = '';
if (cell) {
if (cell.isNode()) {
cellType = cell.data.type.toUpperCase();
} else {
cellType = 'EDGE';
}
} else {
cellType = 'FLOW';
}
return (
<div
css={css`
height: 100%;
overflow: auto;
border-left: 1px solid #ddd;
`}
>
<Header>{cellType}</Header>
{cell && cell.isNode() && ['decision', 'action'].includes(cell.data.type) && (
<SettingCollapse defaultActiveKey={['general']}>
<Panel header="General" key="general">
<Form initialValues={{ label: cell.data.label }}>
<Item label="名称" name="label">
<Input
onChange={(e): void => {
console.log(`first: ${cell.data.label}`);
cell.data.label = e.target.value.trim();
console.log(`then: ${cell.data.label}`);
graph.setCellData(cell, cell.data);
}}
/>
</Item>
</Form>
</Panel>
</SettingCollapse>
)}
</div>
);
};
export default Setting;

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

@ -13,6 +13,13 @@ const { Panel } = Collapse;
const ToolCollapse = styled(Collapse)`
border: none;
> .ant-collapse-item > .ant-collapse-header {
height: 36px;
line-height: 12px;
font-size: 12px;
color: #666;
}
`;
const ToolPanel = styled(Panel)`
@ -42,6 +49,10 @@ const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }
vertical-align: top;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
`}
>
<div
@ -60,7 +71,7 @@ const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }
line-height: 19px;
`}
>
{data.title}
{data.label}
</span>
</div>
);
@ -82,13 +93,13 @@ const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
border-right: 1px solid #ddd;
`}
>
<ToolCollapse defaultActiveKey={['1']}>
<ToolPanel header="General" key="1">
<ToolCollapse defaultActiveKey={['general']}>
<ToolPanel header="General" key="general">
<div ref={generalRef}>
{generals.map((cell) => {
const Cell = Cells[cell.style.type];
const Cell = Cells[cell.type];
return (
<CellWrapper key={cell.style.type} data={cell}>
<CellWrapper key={cell.type} data={cell}>
<Cell />
</CellWrapper>
);

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

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

12
packages/core/src/data/commands.tsx

@ -9,25 +9,26 @@ import {
DeleteOutlined,
SaveOutlined,
} from '@ant-design/icons';
import { Graph, UndoManager } from '@antv/x6';
import { Graph, UndoManager, Platform } from '@antv/x6';
import * as Tool from '../utils/tool';
import { Commands } from '../model';
export default function getCommands(graph: Graph, undoManager: UndoManager): Commands {
const ctrlKey = Platform.IS_MAC ? 'Cmd' : 'Ctrl';
return [
[
{
name: 'undo',
icon: <UndoOutlined />,
tooltip: '撤销',
shortcut: 'Cmd + Z',
shortcut: `${ctrlKey} + Z`,
handler: (): void => undoManager.undo(),
},
{
name: 'redo',
icon: <RedoOutlined />,
tooltip: '重做',
shortcut: 'Cmd + Shift + Z',
shortcut: `${ctrlKey} + Shift + Z`,
handler: (): void => undoManager.redo(),
},
],
@ -78,9 +79,10 @@ export default function getCommands(graph: Graph, undoManager: UndoManager): Com
name: 'save',
icon: <SaveOutlined />,
tooltip: '保存',
shortcut: 'Cmd + S',
shortcut: `${ctrlKey} + S`,
handler: (): void => {
// code
const graphData = graph.toJSON();
console.log(JSON.stringify(graphData));
},
},
],

7
packages/core/src/index.tsx

@ -5,6 +5,7 @@ import { ReactShape } from '@antv/x6-react-shape';
import styled from '@emotion/styled';
import Sidebar from './components/sidebar';
import Toolbar from './components/toolbar';
import Setting from './components/setting';
import createGraph from './utils/create-graph';
import 'antd/lib/layout/style';
@ -83,9 +84,11 @@ class Core extends React.Component<{}, CoreState> {
<IMoveSider>{this.graph && inited && <Sidebar graph={this.graph} />}</IMoveSider>
<IMoveContent>
<ToolWrapper>{this.graph && inited && <Toolbar graph={this.graph} />}</ToolWrapper>
<div ref={this.container} />
<div ref={this.container} tabIndex={-1} />
</IMoveContent>
<IMoveSider>Sider</IMoveSider>
<IMoveSider width="300">
{this.graph && inited && <Setting graph={this.graph} />}
</IMoveSider>
</IMoveLayout>
</IMoveLayout>
);

4
packages/core/src/model/cells.ts

@ -0,0 +1,4 @@
export interface CellProps {
label?: string;
scale?: number;
}

1
packages/core/src/model/index.ts

@ -1 +1,2 @@
export * from './cells';
export * from './commands';

17
packages/core/src/utils/create-graph.ts → packages/core/src/utils/create-graph.tsx

@ -1,5 +1,6 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Graph } from '@antv/x6';
// import Start from '../components/cells/start';
export default function createGraph(container: HTMLDivElement): Graph {
return new Graph(container, {
@ -57,13 +58,13 @@ export default function createGraph(container: HTMLDivElement): Graph {
return true;
},
getAnchors(cell): [number, number][] | null {
if (!cell || !cell.data) return null;
if (cell === null || cell.data === null) return null;
if (cell.data.style.type === 'start') {
if (cell.data.type === 'start') {
return [[0.5, 1]];
}
if (cell.data.style.type === 'end') {
if (cell.data.type === 'end') {
return [[0.5, 0]];
}
@ -75,5 +76,13 @@ export default function createGraph(container: HTMLDivElement): Graph {
[0.5, 1],
];
},
getLabel: (cell): HTMLElement | string => {
if (cell.isEdge()) {
const div = document.createElement('div');
ReactDom.render(<div>{cell.data.label}</div>, div);
return div;
}
return '';
},
});
}

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

@ -19,7 +19,7 @@ export default function patchDnd(
const elem = document.createElement('div');
if (typeof data === 'undefined') return elem;
const { width, height, scale } = data;
const { width, height, scale } = data.style;
elem.style.width = `${width * scale}px`;
elem.style.height = `${height * scale}px`;
elem.style.border = '1px dashed #000';
@ -30,7 +30,7 @@ export default function patchDnd(
const elem = document.createElement('div');
if (typeof data === 'undefined') return elem;
const { width, height, scale } = data;
const { width, height, scale } = data.style;
elem.style.width = `${width * scale}px`;
elem.style.height = `${height * scale}px`;
elem.style.border = '1px dashed #000';
@ -46,9 +46,9 @@ export default function patchDnd(
dnd.on('drop', ({ data, targetPosition }) => {
if (typeof data === 'undefined') return;
const { width, height, scale } = data;
const { width, height, scale } = data.style;
const { x, y } = targetPosition;
const Cell = CellMap[data.style.type];
const Cell = CellMap[data.type];
const cell = graph.addNode({
x,
y,
@ -56,7 +56,11 @@ export default function patchDnd(
width: width * scale,
height: height * scale,
shape: 'react',
component: <Cell scale={scale} />,
component: (newData) => {
if (!cell) return null;
const { label } = newData.data;
return <Cell label={label} scale={scale} />;
},
});
graph.unSelectCells(graph.getSelectedCells()).selectCell(cell);

16
packages/core/src/utils/styles/cells.ts

@ -0,0 +1,16 @@
import styled from '@emotion/styled';
const Label = styled.div`
position: absolute;
width: 100%;
top: 50%;
padding: 0 5px;
transform: translateY(-50%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
text-align: center;
`;
export default Label;

8
rollup.config.js

@ -1,5 +1,4 @@
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';
@ -14,12 +13,7 @@ export default {
input,
plugins: [
resolve({ extensions, preferBuiltins: true }),
commonjs({
namedExports: {
'react-dom/server': ['renderToString'],
},
}),
builtins(),
commonjs(),
babel({
extensions,
exclude: 'node_modules/**',

Loading…
Cancel
Save