This commit is contained in:
20932067@zju.edu.cn
parent
8da1996605
commit
c3b375572c
|
|
@ -4,7 +4,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {renderMap} from "@/views/create";
|
import {renderMap} from "./create/index";
|
||||||
import G6 from "@antv/g6";
|
import G6 from "@antv/g6";
|
||||||
//注册监听事件,线条,已经节点
|
//注册监听事件,线条,已经节点
|
||||||
import Behavior from './behavior'
|
import Behavior from './behavior'
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
* @email: clay@hchyun.com
|
* @email: clay@hchyun.com
|
||||||
* @description: node
|
* @description: node
|
||||||
*/
|
*/
|
||||||
|
// import utils from '../utils'
|
||||||
const isInBBox = (point, bbox) => {
|
const isInBBox = (point, bbox) => {
|
||||||
const {
|
const {
|
||||||
x,
|
x,
|
||||||
|
|
@ -75,51 +76,105 @@ export default {
|
||||||
|
|
||||||
},
|
},
|
||||||
click(e) {
|
click(e) {
|
||||||
console.log(789)
|
try {
|
||||||
const {
|
console.log(e.shape.get("name"))
|
||||||
graph
|
const {
|
||||||
} = this;
|
graph
|
||||||
const {
|
} = this;
|
||||||
|
const {
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
y
|
||||||
|
} = e;
|
||||||
|
const item = e.item;
|
||||||
|
const shape = e.shape;
|
||||||
|
if (!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
y
|
const model = item.getModel();
|
||||||
} = e;
|
|
||||||
const item = e.item;
|
|
||||||
const shape = e.shape;
|
|
||||||
if (!item) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const model = item.getModel();
|
|
||||||
|
|
||||||
if (shape.get("name") === "collapse") {
|
if (shape.get("name") === "collapse") {
|
||||||
graph.updateItem(item, {
|
graph.updateItem(item, {
|
||||||
collapsed: true,
|
collapsed: true,
|
||||||
size: [300, 50],
|
size: [300, 50],
|
||||||
});
|
});
|
||||||
setTimeout(() => graph.layout(), 100);
|
setTimeout(() => graph.layout(), 100);
|
||||||
} else if (shape.get("name") === "expand") {
|
} else if (shape.get("name") === "expand") {
|
||||||
graph.updateItem(item, {
|
graph.updateItem(item, {
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
size: [300, 500],
|
size: [300, 500],
|
||||||
});
|
});
|
||||||
setTimeout(() => graph.layout(), 100);
|
setTimeout(() => graph.layout(), 100);
|
||||||
|
}
|
||||||
|
}catch (ee){
|
||||||
|
console.log(ee)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
moves(e) {
|
moves(e) {
|
||||||
const name = e.shape.get("name");
|
try {
|
||||||
console.log(name)
|
// console.log(eventName);
|
||||||
const item = e.item;
|
// const {
|
||||||
console.log(name)
|
// graph
|
||||||
|
// } = this;
|
||||||
if (name && name.startsWith("item")) {
|
const name = e.shape.get("name");
|
||||||
this.graph.updateItem(item, {
|
const item = e.item;
|
||||||
selectedIndex: Number(name.split("-")[1]),
|
// if (name ==="marker-shape"){
|
||||||
});
|
//
|
||||||
} else {
|
// utils.anchor.setState("hover",true,e.shape)
|
||||||
this.graph.updateItem(item, {
|
// this.graph.updateItem(item,{
|
||||||
selectedIndex: NaN,
|
// stroke:"#0d1a26",
|
||||||
});
|
// style: {
|
||||||
|
// background: {
|
||||||
|
// fill: '#ffffff',
|
||||||
|
// stroke: '#000000',
|
||||||
|
// padding: [2, 2, 2, 2],
|
||||||
|
// radius: 2,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// labelCfg: {
|
||||||
|
// style: {
|
||||||
|
// fill: '#fff',
|
||||||
|
// fontSize: 12,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
//
|
||||||
|
// })
|
||||||
|
// console.log(789);
|
||||||
|
// }else if(name ==="markerBg-shape"){
|
||||||
|
//
|
||||||
|
// console.log(456);
|
||||||
|
// let steat = this.graph.update(item,{
|
||||||
|
// stroke:"#0d1a26",
|
||||||
|
// style: {
|
||||||
|
// background: {
|
||||||
|
// fill: '#ffffff',
|
||||||
|
// stroke: '#000000',
|
||||||
|
// padding: [2, 2, 2, 2],
|
||||||
|
// radius: 2,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// labelCfg: {
|
||||||
|
// style: {
|
||||||
|
// fill: '#fff',
|
||||||
|
// fontSize: 12,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// })
|
||||||
|
// console.log(steat)
|
||||||
|
// }
|
||||||
|
if (name && name.startsWith("item")) {
|
||||||
|
this.graph.updateItem(item, {
|
||||||
|
selectedIndex: Number(name.split("-")[1]),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.graph.updateItem(item, {
|
||||||
|
selectedIndex: NaN,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}catch (ee){
|
||||||
|
console.log(ee)
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,20 @@
|
||||||
* @email: clay@hchyun.com
|
* @email: clay@hchyun.com
|
||||||
* @description: node
|
* @description: node
|
||||||
*/
|
*/
|
||||||
|
import utils from '../utils/index'
|
||||||
|
|
||||||
const itemHeight = 30;
|
const itemHeight = 30;
|
||||||
export default {
|
export default {
|
||||||
name: 'dice-er-box',
|
name: 'dice-er-box',
|
||||||
options: {
|
options: {
|
||||||
|
setState(name, value, item,group) {
|
||||||
|
// 设置节点状态
|
||||||
|
utils.node.setState(name, value, item,group);
|
||||||
|
// 设置锚点状态
|
||||||
|
utils.anchor.setState(name, value, item);
|
||||||
|
// //设置收缩状态
|
||||||
|
// utils.collapse.setState(item)
|
||||||
|
},
|
||||||
draw(cfg, group) {
|
draw(cfg, group) {
|
||||||
const width = 250;
|
const width = 250;
|
||||||
const height = 316;
|
const height = 316;
|
||||||
|
|
@ -197,30 +206,44 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!cfg.hideDot) {
|
if (!cfg.hideDot) {
|
||||||
listContainer.addShape("circle", {
|
utils.anchor.erDrawLeft(listContainer,label,0,i * itemHeight + offsetY)
|
||||||
attrs: {
|
utils.anchor.erDrawLeft(listContainer,label,width,i * itemHeight + offsetY)
|
||||||
x: 0,
|
|
||||||
y: i * itemHeight + offsetY,
|
|
||||||
r: 3,
|
// listContainer.addShape("circle", {
|
||||||
stroke: boxStyle.stroke,
|
// attrs: {
|
||||||
fill: "white",
|
// x: 0,
|
||||||
radius: 2,
|
// y: i * itemHeight + offsetY,
|
||||||
lineWidth: 1,
|
// r: 3,
|
||||||
cursor: "pointer",
|
// stroke: boxStyle.stroke,
|
||||||
},
|
// fill: "white",
|
||||||
});
|
// radius: 2,
|
||||||
listContainer.addShape("circle", {
|
// lineWidth: 1,
|
||||||
attrs: {
|
// cursor: "pointer",
|
||||||
x: width,
|
// },
|
||||||
y: i * itemHeight + offsetY,
|
// name: 'markerBg-shape'
|
||||||
r: 3,
|
// });
|
||||||
stroke: boxStyle.stroke,
|
// listContainer.addShape("circle", {
|
||||||
fill: "white",
|
// attrs: {
|
||||||
radius: 2,
|
// x: width,
|
||||||
lineWidth: 1,
|
// y: i * itemHeight + offsetY,
|
||||||
cursor: "pointer",
|
// r: 3,
|
||||||
},
|
// stroke: boxStyle.stroke,
|
||||||
});
|
// fill: "white",
|
||||||
|
// radius: 2,
|
||||||
|
// lineWidth: 1,
|
||||||
|
// cursor: "pointer",
|
||||||
|
// },
|
||||||
|
// name: 'markerBg-shape'
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
listContainer.addShape("text", {
|
listContainer.addShape("text", {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/11/20
|
||||||
|
* @description: dark style
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// 节点样式
|
||||||
|
nodeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#CED4D9',
|
||||||
|
fill: 'transparent',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 4,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||||
|
lineWidth: 1,
|
||||||
|
radius: 4,
|
||||||
|
strokeOpacity: 0.7
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
// shadowColor: '#626262',
|
||||||
|
// shadowBlur: 8,
|
||||||
|
// shadowOffsetX: -1,
|
||||||
|
// shadowOffsetY: 3
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 节点标签样式
|
||||||
|
nodeLabelCfg: {
|
||||||
|
positions: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#FFF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 连线样式
|
||||||
|
edgeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#53da3a',
|
||||||
|
lineWidth: 2,
|
||||||
|
strokeOpacity: 0.92,
|
||||||
|
lineAppendWidth: 10
|
||||||
|
// endArrow: true
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
shadowColor: 'red',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
shadowColor: ''
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点样式
|
||||||
|
anchorStyle: {
|
||||||
|
default: {
|
||||||
|
radius: 3,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#FFFFFF',
|
||||||
|
fillOpacity: 0,
|
||||||
|
stroke: '#1890FF',
|
||||||
|
strokeOpacity: 0,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点背景样式
|
||||||
|
anchorBgStyle: {
|
||||||
|
default: {
|
||||||
|
radius: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: 0,
|
||||||
|
stroke: '#1890FF',
|
||||||
|
strokeOpacity: 0,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
strokeOpacity: 0.5
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||||
|
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||||
|
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||||
|
groupActivedStyle: { stroke: '#1890FF' },
|
||||||
|
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||||
|
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||||
|
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||||
|
|
||||||
|
groupBackgroundPadding: [40, 10, 10, 10],
|
||||||
|
groupLabelOffsetX: 10,
|
||||||
|
groupLabelOffsetY: 10,
|
||||||
|
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
edgeLabelRectPadding: 4,
|
||||||
|
edgeLabelRectStyle: { fill: 'white' },
|
||||||
|
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||||
|
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||||
|
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||||
|
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||||
|
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||||
|
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||||
|
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||||
|
anchorHotsoptActivedStyle: { radius: 14 },
|
||||||
|
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||||
|
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||||
|
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||||
|
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||||
|
cursor: {
|
||||||
|
panningCanvas: '-webkit-grabbing',
|
||||||
|
beforePanCanvas: '-webkit-grab',
|
||||||
|
hoverNode: 'move',
|
||||||
|
hoverEffectiveAnchor: 'crosshair',
|
||||||
|
hoverEdge: 'default',
|
||||||
|
hoverGroup: 'move',
|
||||||
|
hoverUnEffectiveAnchor: 'default',
|
||||||
|
hoverEdgeControllPoint: 'crosshair',
|
||||||
|
multiSelect: 'crosshair'
|
||||||
|
},
|
||||||
|
nodeDelegationStyle: {
|
||||||
|
stroke: '#1890FF',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: .08,
|
||||||
|
lineDash: [4, 4],
|
||||||
|
radius: 4,
|
||||||
|
lineWidth: 1
|
||||||
|
},
|
||||||
|
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: default style
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// 节点样式
|
||||||
|
nodeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#CED4D9',
|
||||||
|
fill: 'transparent',
|
||||||
|
// shadowOffsetX: 0,
|
||||||
|
// shadowOffsetY: 4,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||||
|
lineWidth: 1,
|
||||||
|
radius: 4,
|
||||||
|
strokeOpacity: 0.7
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 2,
|
||||||
|
// shadowOffsetX: 0,
|
||||||
|
// shadowOffsetY: 0,
|
||||||
|
// fontSize:'50'
|
||||||
|
// shadowColor: '#626262',
|
||||||
|
// shadowBlur: 8,
|
||||||
|
// shadowOffsetX: -1,
|
||||||
|
// shadowOffsetY: 3
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 节点标签样式
|
||||||
|
nodeLabelCfg: {
|
||||||
|
positions: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 连线样式
|
||||||
|
edgeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#A3B1BF',
|
||||||
|
lineWidth: 2,
|
||||||
|
strokeOpacity: 0.92,
|
||||||
|
lineAppendWidth: 10
|
||||||
|
// endArrow: true
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
shadowColor: 'red',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
shadowColor: ''
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点样式
|
||||||
|
anchorStyle: {
|
||||||
|
default: {
|
||||||
|
r: 3,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#FFFFFF',
|
||||||
|
stroke: '#1890FF',
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
|
||||||
|
stroke: '#1890FF',
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点背景样式
|
||||||
|
anchorBgStyle: {
|
||||||
|
default: {
|
||||||
|
r: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: 0,
|
||||||
|
stroke: '#1890FF',
|
||||||
|
strokeOpacity: 0,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
strokeOpacity: 0.5
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||||
|
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||||
|
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||||
|
groupActivedStyle: { stroke: '#1890FF' },
|
||||||
|
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||||
|
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||||
|
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||||
|
|
||||||
|
groupBackgroundPadding: [40, 10, 10, 10],
|
||||||
|
groupLabelOffsetX: 10,
|
||||||
|
groupLabelOffsetY: 10,
|
||||||
|
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
edgeLabelRectPadding: 4,
|
||||||
|
edgeLabelRectStyle: { fill: 'white' },
|
||||||
|
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||||
|
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||||
|
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||||
|
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||||
|
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||||
|
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||||
|
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||||
|
anchorHotsoptActivedStyle: { radius: 14 },
|
||||||
|
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||||
|
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||||
|
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||||
|
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||||
|
cursor: {
|
||||||
|
panningCanvas: '-webkit-grabbing',
|
||||||
|
beforePanCanvas: '-webkit-grab',
|
||||||
|
hoverNode: 'move',
|
||||||
|
hoverEffectiveAnchor: 'crosshair',
|
||||||
|
hoverEdge: 'default',
|
||||||
|
hoverGroup: 'move',
|
||||||
|
hoverUnEffectiveAnchor: 'default',
|
||||||
|
hoverEdgeControllPoint: 'crosshair',
|
||||||
|
multiSelect: 'crosshair'
|
||||||
|
},
|
||||||
|
nodeDelegationStyle: {
|
||||||
|
stroke: '#1890FF',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: .08,
|
||||||
|
lineDash: [4, 4],
|
||||||
|
radius: 4,
|
||||||
|
lineWidth: 1
|
||||||
|
},
|
||||||
|
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: 编辑器主题样式 - 节点、连线的预设样式
|
||||||
|
*/
|
||||||
|
|
||||||
|
import defaultStyle from './default-style'
|
||||||
|
import darkStyle from './dark-style'
|
||||||
|
import officeStyle from './office-style'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
defaultStyle,
|
||||||
|
darkStyle,
|
||||||
|
officeStyle
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/11/21
|
||||||
|
* @description: office style
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// 节点样式
|
||||||
|
nodeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#CED4D9',
|
||||||
|
fill: '#FFFFFF',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 4,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||||
|
lineWidth: 1,
|
||||||
|
radius: 4,
|
||||||
|
strokeOpacity: 0.7
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
// shadowColor: '#626262',
|
||||||
|
// shadowBlur: 8,
|
||||||
|
// shadowOffsetX: -1,
|
||||||
|
// shadowOffsetY: 3
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 节点标签样式
|
||||||
|
nodeLabelCfg: {
|
||||||
|
positions: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 连线样式
|
||||||
|
edgeStyle: {
|
||||||
|
default: {
|
||||||
|
stroke: '#41c23a',
|
||||||
|
lineWidth: 2,
|
||||||
|
strokeOpacity: 0.92,
|
||||||
|
lineAppendWidth: 10
|
||||||
|
// endArrow: true
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
shadowColor: 'red',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
shadowColor: ''
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
shadowColor: '#ff240b',
|
||||||
|
shadowBlur: 4,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0
|
||||||
|
},
|
||||||
|
unselected: {
|
||||||
|
shadowColor: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点样式
|
||||||
|
anchorStyle: {
|
||||||
|
default: {
|
||||||
|
radius: 3,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#FFFFFF',
|
||||||
|
fillOpacity: 0,
|
||||||
|
stroke: '#1890FF',
|
||||||
|
strokeOpacity: 0,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 锚点背景样式
|
||||||
|
anchorBgStyle: {
|
||||||
|
default: {
|
||||||
|
radius: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: 0,
|
||||||
|
stroke: '#1890FF',
|
||||||
|
strokeOpacity: 0,
|
||||||
|
cursor: 'crosshair'
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fillOpacity: 1,
|
||||||
|
strokeOpacity: 1
|
||||||
|
},
|
||||||
|
unhover: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
strokeOpacity: 0.5
|
||||||
|
},
|
||||||
|
inactive: {
|
||||||
|
fillOpacity: 0,
|
||||||
|
strokeOpacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||||
|
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||||
|
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||||
|
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||||
|
groupActivedStyle: { stroke: '#1890FF' },
|
||||||
|
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||||
|
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||||
|
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||||
|
|
||||||
|
groupBackgroundPadding: [40, 10, 10, 10],
|
||||||
|
groupLabelOffsetX: 10,
|
||||||
|
groupLabelOffsetY: 10,
|
||||||
|
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
edgeLabelRectPadding: 4,
|
||||||
|
edgeLabelRectStyle: { fill: 'white' },
|
||||||
|
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||||
|
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||||
|
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||||
|
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||||
|
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||||
|
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||||
|
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||||
|
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||||
|
anchorHotsoptActivedStyle: { radius: 14 },
|
||||||
|
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||||
|
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||||
|
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||||
|
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||||
|
cursor: {
|
||||||
|
panningCanvas: '-webkit-grabbing',
|
||||||
|
beforePanCanvas: '-webkit-grab',
|
||||||
|
hoverNode: 'move',
|
||||||
|
hoverEffectiveAnchor: 'crosshair',
|
||||||
|
hoverEdge: 'default',
|
||||||
|
hoverGroup: 'move',
|
||||||
|
hoverUnEffectiveAnchor: 'default',
|
||||||
|
hoverEdgeControllPoint: 'crosshair',
|
||||||
|
multiSelect: 'crosshair'
|
||||||
|
},
|
||||||
|
nodeDelegationStyle: {
|
||||||
|
stroke: '#1890FF',
|
||||||
|
fill: '#1890FF',
|
||||||
|
fillOpacity: .08,
|
||||||
|
lineDash: [4, 4],
|
||||||
|
radius: 4,
|
||||||
|
lineWidth: 1
|
||||||
|
},
|
||||||
|
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import theme from '../../theme'
|
||||||
|
|
||||||
|
// const boxStyle = {
|
||||||
|
// stroke: "#096DD9",
|
||||||
|
// radius: 4,
|
||||||
|
// };
|
||||||
|
export default function (group, label, x, y, i) {
|
||||||
|
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||||
|
let anchorBgShape = group.addShape('marker', {
|
||||||
|
id: label + '_anchor_bg_lift_' + i,
|
||||||
|
attrs: {
|
||||||
|
name: 'anchorBg',
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
...themeStyle.anchorStyle.default
|
||||||
|
},
|
||||||
|
draggable: false,
|
||||||
|
name: 'marker-shape'
|
||||||
|
})
|
||||||
|
|
||||||
|
let anchorShape = group.addShape('marker', {
|
||||||
|
id: label + '_anchor_bg_lift_' + i,
|
||||||
|
attrs: {
|
||||||
|
name: 'anchor',
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
...themeStyle.anchorBgStyle.default
|
||||||
|
},
|
||||||
|
draggable: false,
|
||||||
|
name: 'markerBg-shape'
|
||||||
|
})
|
||||||
|
|
||||||
|
anchorShape.on('mouseenter', function () {
|
||||||
|
anchorBgShape.attr({
|
||||||
|
...themeStyle.anchorBgStyle.active
|
||||||
|
})
|
||||||
|
})
|
||||||
|
anchorShape.on('mouseleave', function () {
|
||||||
|
anchorBgShape.attr({
|
||||||
|
...themeStyle.anchorBgStyle.inactive
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2021/5/16 21:08
|
||||||
|
* @email: clay@hchyun.com
|
||||||
|
* @description: node
|
||||||
|
*/
|
||||||
|
import erDrawLeft from './er-draw-left'
|
||||||
|
import setState from './set-state'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
erDrawLeft,
|
||||||
|
setState
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: set anchor state
|
||||||
|
*/
|
||||||
|
|
||||||
|
import theme from '../../theme'
|
||||||
|
|
||||||
|
export default function(name, value, item) {
|
||||||
|
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||||
|
if (name === 'hover') {
|
||||||
|
item.get();
|
||||||
|
let group = item.getContainer()
|
||||||
|
let children = group.get('children')
|
||||||
|
console.log(children,"children");
|
||||||
|
for (let i = 0, len = children.length; i < len; i++) {
|
||||||
|
let child = children[i]
|
||||||
|
console.log(child)
|
||||||
|
// 处理锚点状态
|
||||||
|
if (child.attrs.name === 'anchor') {
|
||||||
|
if (value) {
|
||||||
|
group.attr(themeStyle.anchorStyle.hover)
|
||||||
|
} else {
|
||||||
|
group.attr(themeStyle.anchorStyle.unhover)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: edge
|
||||||
|
*/
|
||||||
|
|
||||||
|
import setState from './set-state'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setState
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: set edge state
|
||||||
|
*/
|
||||||
|
|
||||||
|
import theme from '../../theme'
|
||||||
|
|
||||||
|
export default function(name, value, item) {
|
||||||
|
const group = item.getContainer()
|
||||||
|
const shape = group.get('children')[0] // 顺序根据 draw 时确定
|
||||||
|
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||||
|
if (name === 'active') {
|
||||||
|
if (value) {
|
||||||
|
shape.attr(themeStyle.edgeStyle.active)
|
||||||
|
} else {
|
||||||
|
shape.attr(themeStyle.edgeStyle.inactive)
|
||||||
|
}
|
||||||
|
} else if (name === 'selected') {
|
||||||
|
if (value) {
|
||||||
|
shape.attr(themeStyle.edgeStyle.selected)
|
||||||
|
} else {
|
||||||
|
shape.attr(themeStyle.edgeStyle.unselected)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2021/5/16 21:01
|
||||||
|
* @email: clay@hchyun.com
|
||||||
|
* @description: node
|
||||||
|
* 比较两个对象的内容是否相同（两个对象的键值都相同）
|
||||||
|
* @param obj1
|
||||||
|
* @param obj2
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// import node from './node'
|
||||||
|
import anchor from './anchor'
|
||||||
|
import edge from './edge'
|
||||||
|
|
||||||
|
const isObjectValueEqual = function(obj1, obj2) {
|
||||||
|
let o1 = obj1 instanceof Object
|
||||||
|
let o2 = obj2 instanceof Object
|
||||||
|
// 不是对象的情况
|
||||||
|
if (!o1 || !o2) {
|
||||||
|
return obj1 === obj2
|
||||||
|
}
|
||||||
|
// 对象的属性（key值）个数不相等
|
||||||
|
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 判断每个属性（如果属性值也是对象则需要递归）
|
||||||
|
for (let attr in obj1) {
|
||||||
|
let t1 = obj1[attr] instanceof Object
|
||||||
|
let t2 = obj2[attr] instanceof Object
|
||||||
|
if (t1 && t2) {
|
||||||
|
return isObjectValueEqual(obj1[attr], obj2[attr])
|
||||||
|
} else if (obj1[attr] !== obj2[attr]) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成uuid算法,碰撞率低于1/2^^122
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
const generateUUID = function() {
|
||||||
|
let d = new Date().getTime()
|
||||||
|
// x 是 0-9 或 a-f 范围内的一个32位十六进制数
|
||||||
|
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||||
|
let r = (d + Math.random() * 16) % 16 | 0
|
||||||
|
d = Math.floor(d / 16)
|
||||||
|
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
|
||||||
|
})
|
||||||
|
return uuid
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
anchor,
|
||||||
|
// node,
|
||||||
|
edge,
|
||||||
|
// 通用工具类函数
|
||||||
|
isObjectValueEqual,
|
||||||
|
generateUUID
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: node
|
||||||
|
*/
|
||||||
|
|
||||||
|
import setState from './set-state'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setState
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
/**
|
||||||
|
* @author: clay
|
||||||
|
* @data: 2019/08/15
|
||||||
|
* @description: set node state
|
||||||
|
*/
|
||||||
|
|
||||||
|
import theme from '../../theme'
|
||||||
|
|
||||||
|
export default function(name, value, item) {
|
||||||
|
console.log(item)
|
||||||
|
item.get(name);
|
||||||
|
const group = item.getContainer()
|
||||||
|
const shape = group.get('children')[0] // 顺序根据 draw 时确定
|
||||||
|
console.log(shape)
|
||||||
|
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||||
|
if (name === 'active') {
|
||||||
|
if (value) {
|
||||||
|
shape.attr(themeStyle.nodeStyle.active)
|
||||||
|
} else {
|
||||||
|
shape.attr(themeStyle.nodeStyle.inactive)
|
||||||
|
}
|
||||||
|
} else if (name === 'selected') {
|
||||||
|
if (value) {
|
||||||
|
group.attr(themeStyle.nodeStyle.selected)
|
||||||
|
} else {
|
||||||
|
group.attr(themeStyle.nodeStyle.default)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue