iot处理
This commit is contained in:
parent
62a3cefae0
commit
bd5e9f4db3
|
|
@ -55,7 +55,7 @@ export default {
|
|||
if (sourceNode.id !== targetNode.id) {
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
stroke: "#53da3a",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
}
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
stroke: "#53da3a",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
|
|
|
|||
|
|
@ -300,11 +300,12 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
Node.obj.Image.sendThis(this);
|
||||
Behavior.obj.clickEventEdit.sendThis(this);
|
||||
Behavior.obj.dragAddEdge.sendThis(this);
|
||||
// Behavior.obj.clickEventEdit.sendThis(this);
|
||||
// Behavior.obj.dragAddEdge.sendThis(this);
|
||||
Behavior.obj.dragEventEdit.sendThis(this);
|
||||
Behavior.obj.keyupEventEdit.sendThis(this);
|
||||
Behavior.obj.hoverEventEdit.sendThis(this);
|
||||
// Behavior.obj.hoverEventEdit.sendThis(this);
|
||||
Behavior.obj
|
||||
this.clearHistoryData();
|
||||
// this.initTopo(this.graphData)
|
||||
// this.autoZoomHandler()
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@ export default {
|
|||
};
|
||||
}
|
||||
} else if (event.item._cfg.type === "edge") {
|
||||
console.log("jshdjhd")
|
||||
// 更新vm的data: selectedEdge 和 selectedEdgeParams
|
||||
let clickEdge = event.item;
|
||||
if (clickEdge.hasState("selected")) {
|
||||
|
|
|
|||
|
|
@ -4,3 +4,40 @@
|
|||
* @email: clay@hchyun.com
|
||||
* @description: node
|
||||
*/
|
||||
let vm = null;
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
export default {
|
||||
sendThis,
|
||||
name: 'dice-er-edge',
|
||||
options: {
|
||||
getDefaultCfg() {
|
||||
return {
|
||||
multiple: true,
|
||||
};
|
||||
},
|
||||
getEvents() {
|
||||
return {
|
||||
"edge:click": "onEdgeClick",
|
||||
}
|
||||
},
|
||||
onEdgeClick(event) {
|
||||
let clickEdge = event.item;
|
||||
console.log(789)
|
||||
console.log(clickEdge);
|
||||
clickEdge.setState("selected", !clickEdge.hasState("selected"));
|
||||
console.log(clickEdge);
|
||||
let model = clickEdge.getModel();
|
||||
console.log(model);
|
||||
model.label = "4564654"
|
||||
model.stroke='#e2e2e2'
|
||||
clickEdge.update(model)
|
||||
|
||||
// console.log(vm)
|
||||
// vm.currentFocus = "edge";
|
||||
this.updateVmData(event);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,10 +77,6 @@ export default {
|
|||
const {
|
||||
graph
|
||||
} = this;
|
||||
const {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
y
|
||||
} = e;
|
||||
const item = e.item;
|
||||
const shape = e.shape;
|
||||
if (!item) {
|
||||
|
|
@ -101,9 +97,9 @@ export default {
|
|||
}else {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const model = item.getModel();
|
||||
console.log(JSON.stringify(model));
|
||||
console.log(model.style.default.fill = '#4eb922');
|
||||
console.log(model.style.selected.shadowColor = '#4eb922');
|
||||
// console.log(JSON.stringify(model));
|
||||
// console.log(model.style.default.fill = '#4eb922');
|
||||
// console.log(model.style.selected.shadowColor = '#4eb922');
|
||||
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import hoverEventEdit from './hover-event-edit'
|
|||
import clickEventEdit from './click-event-edit'
|
||||
import dragEventEdit from './drag-event-edit'
|
||||
import keyupEventEdit from './keyup-event-edit'
|
||||
import diceErScroll from './dice-er-node'
|
||||
import diceErNode from './dice-er-node'
|
||||
import diceErEdge from './dice-er-edge'
|
||||
|
||||
const obj = {
|
||||
// dragAddEdge,
|
||||
|
|
@ -17,7 +18,8 @@ const obj = {
|
|||
// clickEventEdit,
|
||||
dragEventEdit,
|
||||
keyupEventEdit,
|
||||
diceErScroll
|
||||
diceErNode,
|
||||
diceErEdge
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -5,126 +5,134 @@
|
|||
* @description: node
|
||||
*/
|
||||
import {Util} from '@antv/g6'
|
||||
import utils from "@/views/system/top/packages/topology/src/utils";
|
||||
|
||||
export default {
|
||||
name: 'dice-er-edge',
|
||||
options: {
|
||||
draw(cfg, group) {
|
||||
//todo 画线
|
||||
// console.log("cfg",cfg,"group",group)
|
||||
const edge = group.cfg.item;
|
||||
const sourceNode = edge.getSource().getModel();
|
||||
const targetNode = edge.getTarget().getModel();
|
||||
name: 'dice-er-edge',
|
||||
options: {
|
||||
|
||||
const sourceIndex = sourceNode.attrs.findIndex(
|
||||
(e) => e.key === cfg.sourceKey
|
||||
);
|
||||
|
||||
const sourceStartIndex = sourceNode.startIndex || 0;
|
||||
draw(cfg, group) {
|
||||
//todo 画线
|
||||
// console.log("cfg",cfg,"group",group)
|
||||
const edge = group.cfg.item;
|
||||
const sourceNode = edge.getSource().getModel();
|
||||
const targetNode = edge.getTarget().getModel();
|
||||
|
||||
let sourceY = 15;
|
||||
const sourceIndex = sourceNode.attrs.findIndex(
|
||||
(e) => e.key === cfg.sourceKey
|
||||
);
|
||||
|
||||
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
|
||||
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
|
||||
sourceY = Math.min(sourceY, 300);
|
||||
}
|
||||
const sourceStartIndex = sourceNode.startIndex || 0;
|
||||
|
||||
const targetIndex = targetNode.attrs.findIndex(
|
||||
(e) => e.key === cfg.targetKey
|
||||
);
|
||||
let sourceY = 15;
|
||||
|
||||
const targetStartIndex = targetNode.startIndex || 0;
|
||||
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
|
||||
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
|
||||
sourceY = Math.min(sourceY, 300);
|
||||
}
|
||||
|
||||
let targetY = 15;
|
||||
const targetIndex = targetNode.attrs.findIndex(
|
||||
(e) => e.key === cfg.targetKey
|
||||
);
|
||||
|
||||
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
|
||||
targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
|
||||
targetY = Math.min(targetY, 300);
|
||||
}
|
||||
const targetStartIndex = targetNode.startIndex || 0;
|
||||
|
||||
const startPoint = {
|
||||
...cfg.startPoint
|
||||
};
|
||||
const endPoint = {
|
||||
...cfg.endPoint
|
||||
};
|
||||
let targetY = 15;
|
||||
|
||||
startPoint.y = startPoint.y + sourceY;
|
||||
endPoint.y = endPoint.y + targetY;
|
||||
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
|
||||
targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
|
||||
targetY = Math.min(targetY, 300);
|
||||
}
|
||||
|
||||
let shape;
|
||||
if (sourceNode.id !== targetNode.id) {
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
"C",
|
||||
endPoint.x / 3 + (2 / 3) * startPoint.x,
|
||||
startPoint.y,
|
||||
endPoint.x / 3 + (2 / 3) * startPoint.x,
|
||||
endPoint.y,
|
||||
endPoint.x,
|
||||
endPoint.y,
|
||||
],
|
||||
],
|
||||
endArrow: true,
|
||||
},
|
||||
name: "path-shape",
|
||||
});
|
||||
} else if (!sourceNode.collapsed) {
|
||||
let gap = Math.abs((startPoint.y - endPoint.y) / 3);
|
||||
if (startPoint["index"] === 1) {
|
||||
gap = -gap;
|
||||
}
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
"C",
|
||||
startPoint.x - gap,
|
||||
startPoint.y,
|
||||
startPoint.x - gap,
|
||||
endPoint.y,
|
||||
startPoint.x,
|
||||
endPoint.y,
|
||||
],
|
||||
],
|
||||
endArrow: true,
|
||||
},
|
||||
name: "path-shape",
|
||||
});
|
||||
}
|
||||
const startPoint = {
|
||||
...cfg.startPoint
|
||||
};
|
||||
const endPoint = {
|
||||
...cfg.endPoint
|
||||
};
|
||||
|
||||
return shape;
|
||||
},
|
||||
afterDraw(cfg, group) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const labelCfg = cfg.labelCfg || {};
|
||||
const edge = group.cfg.item;
|
||||
const sourceNode = edge.getSource().getModel();
|
||||
const targetNode = edge.getTarget().getModel();
|
||||
if (sourceNode.collapsed && targetNode.collapsed) {
|
||||
return;
|
||||
}
|
||||
const path = group.find(
|
||||
(element) => element.get("name") === "path-shape"
|
||||
);
|
||||
|
||||
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
|
||||
const label = group.addShape("text", {
|
||||
attrs: {
|
||||
...labelStyle,
|
||||
text: cfg.label || '',
|
||||
fill: "#000",
|
||||
textAlign: "center",
|
||||
stroke: "#fff",
|
||||
lineWidth: 1,
|
||||
},
|
||||
});
|
||||
label.rotateAtStart(labelStyle.rotate);
|
||||
startPoint.y = startPoint.y + sourceY;
|
||||
endPoint.y = endPoint.y + targetY;
|
||||
|
||||
let shape;
|
||||
if (sourceNode.id !== targetNode.id) {
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
"C",
|
||||
endPoint.x / 3 + (2 / 3) * startPoint.x,
|
||||
startPoint.y,
|
||||
endPoint.x / 3 + (2 / 3) * startPoint.x,
|
||||
endPoint.y,
|
||||
endPoint.x,
|
||||
endPoint.y,
|
||||
],
|
||||
],
|
||||
endArrow: true,
|
||||
},
|
||||
name: "path-shape",
|
||||
});
|
||||
} else if (!sourceNode.collapsed) {
|
||||
let gap = Math.abs((startPoint.y - endPoint.y) / 3);
|
||||
if (startPoint["index"] === 1) {
|
||||
gap = -gap;
|
||||
}
|
||||
shape = group.addShape("path", {
|
||||
attrs: {
|
||||
stroke: "#5B8FF9",
|
||||
path: [
|
||||
["M", startPoint.x, startPoint.y],
|
||||
[
|
||||
"C",
|
||||
startPoint.x - gap,
|
||||
startPoint.y,
|
||||
startPoint.x - gap,
|
||||
endPoint.y,
|
||||
startPoint.x,
|
||||
endPoint.y,
|
||||
],
|
||||
],
|
||||
endArrow: true,
|
||||
},
|
||||
name: "path-shape",
|
||||
});
|
||||
}
|
||||
|
||||
return shape;
|
||||
},
|
||||
afterDraw(cfg, group) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const labelCfg = cfg.labelCfg || {};
|
||||
const edge = group.cfg.item;
|
||||
const sourceNode = edge.getSource().getModel();
|
||||
const targetNode = edge.getTarget().getModel();
|
||||
if (sourceNode.collapsed && targetNode.collapsed) {
|
||||
return;
|
||||
}
|
||||
const path = group.find(
|
||||
(element) => element.get("name") === "path-shape"
|
||||
);
|
||||
|
||||
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
|
||||
const label = group.addShape("text", {
|
||||
attrs: {
|
||||
...labelStyle,
|
||||
text: cfg.label || '',
|
||||
fill: "#000",
|
||||
textAlign: "center",
|
||||
stroke: "#fff",
|
||||
lineWidth: 1,
|
||||
},
|
||||
});
|
||||
label.rotateAtStart(labelStyle.rotate);
|
||||
},
|
||||
setState(name, value, item) {
|
||||
// 设置边状态
|
||||
utils.edge.setState(name, value, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,18 +54,19 @@ const initGraph = {
|
|||
// shadowOffsetY: 3
|
||||
// }
|
||||
// },
|
||||
edgeStateStyles: themeStyle.edgeStyle,
|
||||
// edgeStyle: {
|
||||
// default: {
|
||||
// stroke: '#e2e2e2',
|
||||
// lineWidth: 3,
|
||||
// lineAppendWidth: 10
|
||||
// },
|
||||
// selected: {
|
||||
// shadowColor: '#626262',
|
||||
// shadowBlur: 3
|
||||
// }
|
||||
// },
|
||||
edgeStateStyles:{
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#e2e2e2',
|
||||
lineWidth: 3,
|
||||
lineAppendWidth: 10
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#626262',
|
||||
shadowBlur: 3
|
||||
}
|
||||
},
|
||||
},
|
||||
modes: options.modes
|
||||
})
|
||||
// 将 read 方法分解成 data() 和 render 方法,便于整个生命周期的管理
|
||||
|
|
|
|||
|
|
@ -6,272 +6,271 @@
|
|||
*/
|
||||
import utils from '../utils/index'
|
||||
|
||||
let vm = null;
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
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)
|
||||
sendThis,
|
||||
name: 'dice-er-box',
|
||||
options: {
|
||||
draw(cfg, group) {
|
||||
const width = 250;
|
||||
const height = 316;
|
||||
const itemCount = 10;
|
||||
const boxStyle = {
|
||||
stroke: "#096DD9",
|
||||
radius: 4,
|
||||
};
|
||||
|
||||
const {
|
||||
attrs = [],
|
||||
startIndex = 0,
|
||||
selectedIndex,
|
||||
collapsed,
|
||||
icon,
|
||||
} = cfg;
|
||||
const list = attrs;
|
||||
const afterList = list.slice(
|
||||
Math.floor(startIndex),
|
||||
Math.floor(startIndex + itemCount - 1)
|
||||
);
|
||||
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
|
||||
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
fill: boxStyle.stroke,
|
||||
height: 30,
|
||||
width,
|
||||
radius: [boxStyle.radius, boxStyle.radius, 0, 0],
|
||||
},
|
||||
draw(cfg, group) {
|
||||
const width = 250;
|
||||
const height = 316;
|
||||
const itemCount = 10;
|
||||
const boxStyle = {
|
||||
stroke: "#096DD9",
|
||||
radius: 4,
|
||||
};
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
const {
|
||||
attrs = [],
|
||||
startIndex = 0,
|
||||
selectedIndex,
|
||||
collapsed,
|
||||
icon,
|
||||
} = cfg;
|
||||
const list = attrs;
|
||||
const afterList = list.slice(
|
||||
Math.floor(startIndex),
|
||||
Math.floor(startIndex + itemCount - 1)
|
||||
);
|
||||
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
|
||||
let fontLeft = 12;
|
||||
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
fill: boxStyle.stroke,
|
||||
height: 30,
|
||||
width,
|
||||
radius: [boxStyle.radius, boxStyle.radius, 0, 0],
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
if (icon && icon.show !== false) {
|
||||
group.addShape("image", {
|
||||
attrs: {
|
||||
x: 8,
|
||||
y: 8,
|
||||
height: 16,
|
||||
width: 16,
|
||||
...icon,
|
||||
},
|
||||
});
|
||||
fontLeft += 18;
|
||||
}
|
||||
|
||||
let fontLeft = 12;
|
||||
|
||||
if (icon && icon.show !== false) {
|
||||
group.addShape("image", {
|
||||
attrs: {
|
||||
x: 8,
|
||||
y: 8,
|
||||
height: 16,
|
||||
width: 16,
|
||||
...icon,
|
||||
},
|
||||
});
|
||||
fontLeft += 18;
|
||||
}
|
||||
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
y: 22,
|
||||
x: fontLeft,
|
||||
fill: "#fff",
|
||||
text: cfg.label,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
},
|
||||
});
|
||||
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: collapsed ? 30 : 300,
|
||||
height: 15,
|
||||
width,
|
||||
fill: "#eee",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: width / 2 - 6,
|
||||
y: (collapsed ? 30 : 300) + 12,
|
||||
text: collapsed ? "+" : "-",
|
||||
width,
|
||||
fill: "#000",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
const keyshape = group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height: collapsed ? 45 : height,
|
||||
...boxStyle,
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (collapsed) {
|
||||
return keyshape;
|
||||
}
|
||||
|
||||
const listContainer = group.addGroup({});
|
||||
listContainer.setClip({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: -8,
|
||||
y: 30,
|
||||
width: width + 16,
|
||||
height: 300 - 30,
|
||||
},
|
||||
});
|
||||
listContainer.addShape({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: 30,
|
||||
width: width - 2,
|
||||
height: 300 - 30,
|
||||
fill: "#fff",
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (list.length > itemCount) {
|
||||
const barStyle = {
|
||||
width: 4,
|
||||
padding: 0,
|
||||
boxStyle: {
|
||||
stroke: "#00000022",
|
||||
},
|
||||
innerStyle: {
|
||||
fill: "#00000022",
|
||||
},
|
||||
};
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30,
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: height - 30,
|
||||
...barStyle.boxStyle,
|
||||
},
|
||||
});
|
||||
|
||||
const indexHeight =
|
||||
afterList.length > itemCount ?
|
||||
(afterList.length / list.length) * height :
|
||||
10;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30 +
|
||||
barStyle.padding +
|
||||
(startIndex / list.length) * (height - 30),
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: Math.min(height, indexHeight),
|
||||
...barStyle.innerStyle,
|
||||
},
|
||||
});
|
||||
}
|
||||
if (afterList) {
|
||||
afterList.forEach((e, i) => {
|
||||
const isSelected =
|
||||
Math.floor(startIndex) + i === Number(selectedIndex);
|
||||
let {
|
||||
key = "", type
|
||||
} = e;
|
||||
if (type) {
|
||||
key += " - " + type;
|
||||
}
|
||||
const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: i * itemHeight - itemHeight / 2 + offsetY,
|
||||
width: width - 4,
|
||||
height: itemHeight,
|
||||
radius: 2,
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}-content`,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (!cfg.hideDot) {
|
||||
// utils.anchor.erDrawLeft(group,label,0,i * itemHeight + offsetY)
|
||||
// utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
|
||||
listContainer.addShape("marker", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: i * itemHeight + offsetY,
|
||||
r: 3,
|
||||
stroke: boxStyle.stroke,
|
||||
fill: "white",
|
||||
radius: 2,
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: 'marker-shape'
|
||||
});
|
||||
listContainer.addShape("marker", {
|
||||
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", {
|
||||
attrs: {
|
||||
x: 12,
|
||||
y: i * itemHeight + offsetY + 6,
|
||||
text: label,
|
||||
fontSize: 12,
|
||||
fill: "#000",
|
||||
fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
|
||||
full: e,
|
||||
fontWeight: isSelected ? 500 : 100,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}`,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// console.log(keyshape);
|
||||
return keyshape;
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
y: 22,
|
||||
x: fontLeft,
|
||||
fill: "#fff",
|
||||
text: cfg.label,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
},
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0, 0],
|
||||
[1, 0],
|
||||
];
|
||||
});
|
||||
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: collapsed ? 30 : 300,
|
||||
height: 15,
|
||||
width,
|
||||
fill: "#eee",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
}
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: width / 2 - 6,
|
||||
y: (collapsed ? 30 : 300) + 12,
|
||||
text: collapsed ? "+" : "-",
|
||||
width,
|
||||
fill: "#000",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
const keyshape = group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height: collapsed ? 45 : height,
|
||||
...boxStyle,
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (collapsed) {
|
||||
return keyshape;
|
||||
}
|
||||
|
||||
const listContainer = group.addGroup({});
|
||||
listContainer.setClip({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: -8,
|
||||
y: 30,
|
||||
width: width + 16,
|
||||
height: 300 - 30,
|
||||
},
|
||||
});
|
||||
listContainer.addShape({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: 30,
|
||||
width: width - 2,
|
||||
height: 300 - 30,
|
||||
fill: "#fff",
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (list.length > itemCount) {
|
||||
const barStyle = {
|
||||
width: 4,
|
||||
padding: 0,
|
||||
boxStyle: {
|
||||
stroke: "#00000022",
|
||||
},
|
||||
innerStyle: {
|
||||
fill: "#00000022",
|
||||
},
|
||||
};
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30,
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: height - 30,
|
||||
...barStyle.boxStyle,
|
||||
},
|
||||
});
|
||||
|
||||
const indexHeight =
|
||||
afterList.length > itemCount ?
|
||||
(afterList.length / list.length) * height :
|
||||
10;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30 +
|
||||
barStyle.padding +
|
||||
(startIndex / list.length) * (height - 30),
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: Math.min(height, indexHeight),
|
||||
...barStyle.innerStyle,
|
||||
},
|
||||
});
|
||||
}
|
||||
if (afterList) {
|
||||
afterList.forEach((e, i) => {
|
||||
const isSelected =
|
||||
Math.floor(startIndex) + i === Number(selectedIndex);
|
||||
let {
|
||||
key = "", type
|
||||
} = e;
|
||||
if (type) {
|
||||
key += " - " + type;
|
||||
}
|
||||
const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: i * itemHeight - itemHeight / 2 + offsetY,
|
||||
width: width - 4,
|
||||
height: itemHeight,
|
||||
radius: 2,
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}-content`,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (!cfg.hideDot) {
|
||||
// utils.anchor.erDrawLeft(group,label,0,i * itemHeight + offsetY)
|
||||
// utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
|
||||
listContainer.addShape("marker", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: i * itemHeight + offsetY,
|
||||
r: 3,
|
||||
stroke: boxStyle.stroke,
|
||||
fill: "white",
|
||||
radius: 2,
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: 'marker-shape'
|
||||
});
|
||||
listContainer.addShape("marker", {
|
||||
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", {
|
||||
attrs: {
|
||||
x: 12,
|
||||
y: i * itemHeight + offsetY + 6,
|
||||
text: label,
|
||||
fontSize: 12,
|
||||
fill: "#000",
|
||||
fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
|
||||
full: e,
|
||||
fontWeight: isSelected ? 500 : 100,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}`,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// console.log(keyshape);
|
||||
return keyshape;
|
||||
},
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0, 0],
|
||||
[1, 0],
|
||||
];
|
||||
},
|
||||
setState(name, value, item) {
|
||||
// 设置节点状态
|
||||
// utils.node.setState(name, value, item)
|
||||
// 设置锚点状态
|
||||
// if (vm.graphMode === 'edit') {
|
||||
utils.anchor.setState(name, value, item)
|
||||
// }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -71,13 +71,13 @@ export default {
|
|||
// 锚点样式
|
||||
anchorStyle: {
|
||||
default: {
|
||||
r: 10,
|
||||
// symbol: 'circle',
|
||||
r: 3,
|
||||
symbol: 'circle',
|
||||
fill: '#FFFFFF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
// cursor: 'crosshair'
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
|
|
@ -100,12 +100,12 @@ export default {
|
|||
anchorBgStyle: {
|
||||
default: {
|
||||
r: 10,
|
||||
// symbol: 'circle',
|
||||
symbol: 'circle',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
// cursor: 'crosshair'
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
|
|
|
|||
|
|
@ -299,12 +299,14 @@ export default {
|
|||
created() {
|
||||
},
|
||||
mounted() {
|
||||
Node.obj.Image.sendThis(this);
|
||||
Behavior.obj.clickEventEdit.sendThis(this);
|
||||
Behavior.obj.dragAddEdge.sendThis(this);
|
||||
Node.obj.diceErBox.sendThis(this)
|
||||
// Behavior.obj.clickEventEdit.sendThis(this);
|
||||
// Behavior.obj.dragAddEdge.sendThis(this);
|
||||
Behavior.obj.dragEventEdit.sendThis(this);
|
||||
Behavior.obj.keyupEventEdit.sendThis(this);
|
||||
Behavior.obj.hoverEventEdit.sendThis(this);
|
||||
// Behavior.obj.hoverEventEdit.sendThis(this);
|
||||
Behavior.obj.diceErEdge.sendThis(this)
|
||||
|
||||
this.clearHistoryData();
|
||||
// this.initTopo(this.graphData)
|
||||
// this.autoZoomHandler()
|
||||
|
|
@ -465,7 +467,8 @@ export default {
|
|||
// "drag-event-edit",
|
||||
"keyup-event-edit",
|
||||
"drag-add-edge",
|
||||
'dice-er-node'
|
||||
'dice-er-node',
|
||||
"dice-er-edge"
|
||||
],
|
||||
addEdge: [
|
||||
"drag-canvas",
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import setState from './set-state'
|
|||
// import update from './update'
|
||||
|
||||
export default {
|
||||
// draw,
|
||||
setState,
|
||||
// update,
|
||||
erDrawLeft,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import theme from '../../theme'
|
|||
|
||||
export default function(name, value, item) {
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题,后期可能增加其它风格的主体
|
||||
// console.log(item)
|
||||
console.log(name)
|
||||
if (name === 'hover') {
|
||||
console.log(456)
|
||||
let group = item.getContainer()
|
||||
let children = group.get('children')
|
||||
for (let i = 0, len = children.length; i < len; i++) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue