clay
/
er-top
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

11

This commit is contained in:
20932067@zju.edu.cn 2021-05-22 22:43:45 +08:00
parent 8da1996605
commit c3b375572c
15 changed files with 919 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Index.vue
View File

@ -4,7 +4,7 @@
</template>
<script>
import {renderMap} from "@/views/create";
import {renderMap} from "./create/index";
import G6 from "@antv/g6";
//注册监听事件,线条,已经节点
import Behavior from './behavior'

133
src/views/behavior/dice-er-scroll.js
View File

@ -4,6 +4,7 @@
* @email: clay@hchyun.com
* @description: node
*/
// import utils from '../utils'
const isInBBox = (point, bbox) => {
const {
x,
@ -75,51 +76,105 @@ export default {
},
click(e) {
console.log(789)
const {
graph
} = this;
const {
try {
console.log(e.shape.get("name"))
const {
graph
} = 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
y
} = e;
const item = e.item;
const shape = e.shape;
if (!item) {
return;
}
// eslint-disable-next-line no-unused-vars
const model = item.getModel();
const model = item.getModel();
if (shape.get("name") === "collapse") {
graph.updateItem(item, {
collapsed: true,
size: [300, 50],
});
setTimeout(() => graph.layout(), 100);
} else if (shape.get("name") === "expand") {
graph.updateItem(item, {
collapsed: false,
size: [300, 500],
});
setTimeout(() => graph.layout(), 100);
if (shape.get("name") === "collapse") {
graph.updateItem(item, {
collapsed: true,
size: [300, 50],
});
setTimeout(() => graph.layout(), 100);
} else if (shape.get("name") === "expand") {
graph.updateItem(item, {
collapsed: false,
size: [300, 500],
});
setTimeout(() => graph.layout(), 100);
}
}catch (ee){
console.log(ee)
}
},
moves(e) {
const name = e.shape.get("name");
console.log(name)
const item = e.item;
console.log(name)
if (name && name.startsWith("item")) {
this.graph.updateItem(item, {
selectedIndex: Number(name.split("-")[1]),
});
} else {
this.graph.updateItem(item, {
selectedIndex: NaN,
});
try {
// console.log(eventName);
// const {
// graph
// } = this;
const name = e.shape.get("name");
const item = e.item;
// if (name ==="marker-shape"){
//
// utils.anchor.setState("hover",true,e.shape)
// this.graph.updateItem(item,{
// 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)
}
},
}
}

71
src/views/node/dice-er-box.js
View File

@ -4,11 +4,20 @@
* @email: clay@hchyun.com
* @description: node
*/
import utils from '../utils/index'
const itemHeight = 30;
export default {
name: 'dice-er-box',
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) {
const width = 250;
const height = 316;
@ -197,30 +206,44 @@ export default {
});
if (!cfg.hideDot) {
listContainer.addShape("circle", {
attrs: {
x: 0,
y: i * itemHeight + offsetY,
r: 3,
stroke: boxStyle.stroke,
fill: "white",
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
});
listContainer.addShape("circle", {
attrs: {
x: width,
y: i * itemHeight + offsetY,
r: 3,
stroke: boxStyle.stroke,
fill: "white",
radius: 2,
lineWidth: 1,
cursor: "pointer",
},
});
utils.anchor.erDrawLeft(listContainer,label,0,i * itemHeight + offsetY)
utils.anchor.erDrawLeft(listContainer,label,width,i * itemHeight + offsetY)
// listContainer.addShape("circle", {
// attrs: {
// x: 0,
// y: i * itemHeight + offsetY,
// r: 3,
// stroke: boxStyle.stroke,
// fill: "white",
// radius: 2,
// lineWidth: 1,
// cursor: "pointer",
// },
// name: 'markerBg-shape'
// });
// listContainer.addShape("circle", {
// attrs: {
// x: width,
// y: i * itemHeight + offsetY,
// r: 3,
// stroke: boxStyle.stroke,
// fill: "white",
// radius: 2,
// lineWidth: 1,
// cursor: "pointer",
// },
// name: 'markerBg-shape'
// });
}
listContainer.addShape("text", {

177
src/views/theme/dark-style.js Normal file
View File

@ -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 }
}

180
src/views/theme/default-style.js Normal file
View File

@ -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 }
}

15
src/views/theme/index.js Normal file
View File

@ -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
}

177
src/views/theme/office-style.js Normal file
View File

@ -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 }
}

45
src/views/utils/anchor/er-draw-left.js Normal file
View File

@ -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
})
})
}

13
src/views/utils/anchor/index.js Normal file
View File

@ -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
}

29
src/views/utils/anchor/set-state.js Normal file
View File

@ -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)
}
}
}
}
}

11
src/views/utils/edge/index.js Normal file
View File

@ -0,0 +1,11 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: edge
*/
import setState from './set-state'
export default {
setState
}

26
src/views/utils/edge/set-state.js Normal file
View File

@ -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)
}
}
}

63
src/views/utils/index.js Normal file
View File

@ -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
}

11
src/views/utils/node/index.js Normal file
View File

@ -0,0 +1,11 @@
/**
* @author: clay
* @data: 2019/08/15
* @description: node
*/
import setState from './set-state'
export default {
setState
}

30
src/views/utils/node/set-state.js Normal file
View File

@ -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)
}
}
}