Skip to content

Commit

Permalink
add demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@seeksdream
seeksdream committed Oct 13, 2020
1 parent 01bb941 commit a137814
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 72 deletions.
36 changes: 32 additions & 4 deletions dist/relation-graph.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2876,17 +2876,19 @@ const SeeksStoreManager = {
// return _num_l + '/' + _num_c
// return this.nodeProps.text
},
expandNode() {
expandNode(e) {
this.nodeProps.expanded = true;
this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = true;
});
this.$parent.onNodeExpandEvent(this.nodeProps, e);
},
closeNode() {
closeNode(e) {
this.nodeProps.expanded = false;
this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = false;
});
this.$parent.onNodeCollapseEvent(this.nodeProps, e);
},
onDragStart(e) {
this.dragging = true;
Expand Down Expand Up @@ -3025,7 +3027,7 @@ var render = function () {
return _vm.onclick($event);
}
}
}, [(_vm.nodeProps.expandHolderPosition || _vm.graphSetting.defaultExpandHolderPosition) !== "hide" && _vm.nodeProps.lot.childs && _vm.nodeProps.lot.childs.length > 0 ? _c("div", {
}, [_vm.nodeProps.expandHolderPosition && _vm.nodeProps.expandHolderPosition !== "hide" || _vm.graphSetting.defaultExpandHolderPosition && _vm.graphSetting.defaultExpandHolderPosition !== "hide" && _vm.nodeProps.lot.childs && _vm.nodeProps.lot.childs.length > 0 ? _c("div", {
staticClass: "c-btn-open-close",
class: ["c-expand-positon-" + (_vm.nodeProps.expandHolderPosition || _vm.graphSetting.defaultExpandHolderPosition)]
}, [_c("span", {
Expand Down Expand Up @@ -4710,6 +4712,20 @@ if (false) {(function () {
},
type: Function
},
onNodeExpand: {
mustUseProp: false,
default: () => {
return () => {};
},
type: Function
},
onNodeCollapse: {
mustUseProp: false,
default: () => {
return () => {};
},
type: Function
},
onLineClick: {
mustUseProp: false,
default: () => {
Expand Down Expand Up @@ -5621,6 +5637,18 @@ if (false) {(function () {
getLines() {
return this.lineViewList;
},
onNodeExpandEvent(node, e) {
console.log('onNodeExpand:', node);
if (this.onNodeExpand) {
this.onNodeExpand(node, e);
}
},
onNodeCollapseEvent(node, e) {
console.log('onNodeCollapse:', node);
if (this.onNodeCollapse) {
this.onNodeCollapse(node, e);
}
},
printGraphJsonData() {
var _nodes = [];
var _links = [];
Expand Down Expand Up @@ -13327,7 +13355,7 @@ exports = module.exports = __webpack_require__(0)(false);


// module
exports.push([module.i, "\n.el-icon-remove,.el-icon-circle-plus{\n cursor: pointer;\n}\n.rel-node-peel{\n clear: both;\n padding:8px;\n position: absolute;\n font-size: 14px;\n /*border:green solid 1px;*/\n}\n.rel-node{\n text-align: center;\n}\n.rel-node-shape-1{\n /*border: #FD8B37 solid 1px;*/\n border-radius: 8px;\n padding:5px;\n padding-left:15px;\n padding-right:15px;\n}\n.c-node-text{\n height:100%;\n width:100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.rel-node-shape-0{\n padding:10px;\n}\n.rel-node-shape-0{\n width:80px;\n height:80px;\n border-radius: 50%;\n /*border: #FD8B37 solid 2px;*/\n /*text-align: left;*/\n /*padding:10px;*/\n /*white-space: nowrap;*/\n /*text-overflow: ellipsis;*/\n /*overflow: hidden;*/\n /*word-break: break-all;*/\n}\n.rel-node-shape-0:hover{\n /*overflow: visible;*/\n /*text-overflow: inherit;*/\n box-shadow: 0px 0px 5px #FFC5A6;\n}\n/*.rel-node{*/\n /*display: table;*/\n/*}*/\n/*.rel-node span{*/\n /*display: table-cell;*/\n /*vertical-align:middle;*/\n/*}*/\n.rel-node-type-button{\n border-radius: 25px;\n color: blue;\n cursor: pointer;\n}\n.rel-node-hover{\n}\n.rel-node-checked{\n box-shadow: 0px 0px 10px #FD8B37;\n /*border-color: #BA7909;*/\n /*background-color: #FD8B37;*/\n /*color: #ffffff;*/\n /* firefox bug fix - won't rotate at 90deg angles */\n -moz-transform: rotate(-89deg) translateX(-190px);\n animation-timing-function:linear;\n animation: ACTRGNodeInit 2s;\n}\n.rel-node-selected{\n box-shadow: 0px 0px 10px #FD8B37;\n /*border-color: #BA7909;*/\n /*background-color: #FD8B37;*/\n /*color: #ffffff;*/\n /* firefox bug fix - won't rotate at 90deg angles */\n -moz-transform: rotate(-89deg) translateX(-190px);\n animation-timing-function:linear;\n animation: ACTRGNodeInit 2s;\n}\n.rel-node-vtree-2 {\n transform-origin:0 0;/* 设置旋转中心为左上角*/\n /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/\n transform: rotate(30deg) translateX(0px);\n}\n.rel-node-vtree {\n width:130px;\n height:45px;\n text-align: left;\n}\n/*.c-node-text{*/\n /*font-size: 12px;*/\n /*display: inline-block;*/\n /*width:100px;*/\n /*height:16px;*/\n /*margin-top:40px;*/\n /*margin-left:-25px;*/\n /*position:absolute;*/\n /*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/\n /*text-align:center;*/\n/*}*/\n.c-btn-open-close{\n position: absolute;\n height:100%;\n width:18px;\n /*border:red solid 1px;*/\n display: flex;\n align-items: center;\n justify-content: center;\n /*border:#ff0000 solid 1px;*/\n}\n.c-btn-open-close span{\n width: 19px;\n height:19px;\n display: inline-block;\n text-align: center;\n line-height: 18px;\n font-size: 12px;\n border-radius: 15px;\n padding-left:1px;\n padding-top:1px;\n color: #ffffff;\n cursor: pointer;\n}\n.c-expand-positon-left{\n margin-top:-8px;\n margin-left:-18px;\n}\n.c-expand-positon-right{\n height:100%;\n width:100%;\n justify-content: center;\n}\n.c-expand-positon-right span{\n margin-top:-18px;\n margin-right:-18px;\n margin-left:100%;\n}\n.c-expand-positon-bottom{\n height:100%;\n width:100%;\n margin-top:5px;\n margin-left:-6px;\n align-items: flex-end;\n justify-content: center;\n}\n.c-expand-positon-top{\n height:18px;\n width:100%;\n margin-top:-20px;\n margin-left:-6px;\n align-items: flex-end;\n justify-content: center;\n}\n@keyframes ACTRGNodeInit {\nfrom {\n box-shadow: 0px 0px 15px #FD8B37;\n}\n15% {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n30% {\n box-shadow: 0px 0px 15px #FD8B37;\n}\n45% {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n60% {\n box-shadow: 0px 0px 15px #FD8B37;\n}\nto {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n}\n.rel-diy-node{\n padding:0px;\n}\n", ""]);
exports.push([module.i, "\n.el-icon-remove,.el-icon-circle-plus{\n cursor: pointer;\n}\n.rel-node-peel{\n clear: both;\n padding:8px;\n position: absolute;\n font-size: 14px;\n /*border:green solid 1px;*/\n}\n.rel-node{\n text-align: center;\n}\n.rel-node-shape-1{\n /*border: #FD8B37 solid 1px;*/\n border-radius: 8px;\n padding:5px;\n padding-left:15px;\n padding-right:15px;\n}\n.c-node-text{\n height:100%;\n width:100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.rel-node-shape-0{\n padding:10px;\n}\n.rel-node-shape-0{\n width:80px;\n height:80px;\n border-radius: 50%;\n /*border: #FD8B37 solid 2px;*/\n /*text-align: left;*/\n /*padding:10px;*/\n /*white-space: nowrap;*/\n /*text-overflow: ellipsis;*/\n /*overflow: hidden;*/\n /*word-break: break-all;*/\n}\n.rel-node-shape-0:hover{\n /*overflow: visible;*/\n /*text-overflow: inherit;*/\n box-shadow: 0px 0px 5px #FFC5A6;\n}\n/*.rel-node{*/\n /*display: table;*/\n/*}*/\n/*.rel-node span{*/\n /*display: table-cell;*/\n /*vertical-align:middle;*/\n/*}*/\n.rel-node-type-button{\n border-radius: 25px;\n color: blue;\n cursor: pointer;\n}\n.rel-node-hover{\n}\n.rel-node-checked{\n box-shadow: 0px 0px 10px #FD8B37;\n /*border-color: #BA7909;*/\n /*background-color: #FD8B37;*/\n /*color: #ffffff;*/\n /* firefox bug fix - won't rotate at 90deg angles */\n -moz-transform: rotate(-89deg) translateX(-190px);\n animation-timing-function:linear;\n animation: ACTRGNodeInit 2s;\n}\n.rel-node-selected{\n box-shadow: 0px 0px 10px #FD8B37;\n /*border-color: #BA7909;*/\n /*background-color: #FD8B37;*/\n /*color: #ffffff;*/\n /* firefox bug fix - won't rotate at 90deg angles */\n -moz-transform: rotate(-89deg) translateX(-190px);\n animation-timing-function:linear;\n animation: ACTRGNodeInit 2s;\n}\n.rel-node-vtree-2 {\n transform-origin:0 0;/* 设置旋转中心为左上角*/\n /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/\n transform: rotate(30deg) translateX(0px);\n}\n.rel-node-vtree {\n width:130px;\n height:45px;\n text-align: left;\n}\n/*.c-node-text{*/\n /*font-size: 12px;*/\n /*display: inline-block;*/\n /*width:100px;*/\n /*height:16px;*/\n /*margin-top:40px;*/\n /*margin-left:-25px;*/\n /*position:absolute;*/\n /*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/\n /*text-align:center;*/\n/*}*/\n.c-btn-open-close{\n position: absolute;\n height:100%;\n width:18px;\n /*border:red solid 1px;*/\n display: flex;\n align-items: center;\n justify-content: center;\n /*border:#ff0000 solid 1px;*/\n}\n.c-btn-open-close span{\n width: 19px;\n height:19px;\n display: inline-block;\n text-align: center;\n line-height: 18px;\n font-size: 12px;\n border-radius: 15px;\n padding-left:1px;\n padding-top:1px;\n color: #ffffff;\n cursor: pointer;\n}\n.c-expand-positon-left{\n margin-top:-8px;\n margin-left:-18px;\n}\n.c-expand-positon-right{\n height:100%;\n width:100%;\n justify-content: center;\n}\n.c-expand-positon-right span{\n margin-top:-18px;\n margin-right:-18px;\n margin-left:100%;\n}\n.c-expand-positon-bottom{\n height:100%;\n width:100%;\n margin-top:7px;\n margin-left:-8px;\n align-items: flex-end;\n justify-content: center;\n}\n.c-expand-positon-top{\n height:18px;\n width:100%;\n margin-top:-20px;\n margin-left:-6px;\n align-items: flex-end;\n justify-content: center;\n}\n@keyframes ACTRGNodeInit {\nfrom {\n box-shadow: 0px 0px 15px #FD8B37;\n}\n15% {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n30% {\n box-shadow: 0px 0px 15px #FD8B37;\n}\n45% {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n60% {\n box-shadow: 0px 0px 15px #FD8B37;\n}\nto {\n box-shadow: 0px 0px 1px rgb(46, 78, 143);\n}\n}\n.rel-diy-node{\n padding:0px;\n}\n", ""]);

// exports

Expand Down
Loading

0 comments on commit a137814

Please sign in to comment.