forked from clay/er-top
181 lines
5.6 KiB
JavaScript
181 lines
5.6 KiB
JavaScript
/**
|
|
* @author: clay
|
|
* @data: 2021/5/14 23:20
|
|
* @email: clay@hchyun.com
|
|
* @description: node
|
|
*/
|
|
// import utils from '../utils'
|
|
const isInBBox = (point, bbox) => {
|
|
const {
|
|
x,
|
|
y
|
|
} = point;
|
|
const {
|
|
minX,
|
|
minY,
|
|
maxX,
|
|
maxY
|
|
} = bbox;
|
|
|
|
return x < maxX && x > minX && y > minY && y < maxY;
|
|
};
|
|
|
|
export default {
|
|
name: 'dice-er-scroll',
|
|
options: {
|
|
getDefaultCfg() {
|
|
return {
|
|
multiple: true,
|
|
};
|
|
},
|
|
getEvents() {
|
|
return {
|
|
itemHeight: 50,
|
|
wheel: "scroll",
|
|
click: "click",
|
|
"node:mousemove": "moves",
|
|
};
|
|
},
|
|
scroll(e) {
|
|
console.log(454)
|
|
e.preventDefault();
|
|
const {
|
|
graph
|
|
} = this;
|
|
const nodes = graph.getNodes().filter((n) => {
|
|
const bbox = n.getBBox();
|
|
|
|
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
|
|
});
|
|
if (nodes) {
|
|
nodes.forEach((node) => {
|
|
const model = node.getModel();
|
|
if (model.attrs.length < 9) {
|
|
return;
|
|
}
|
|
const idx = model.startIndex || 0;
|
|
let startX = model.startX || 0.5;
|
|
let startIndex = idx + e.deltaY * 0.02;
|
|
startX -= e.deltaX;
|
|
if (startIndex < 0) {
|
|
startIndex = 0;
|
|
}
|
|
if (startX > 0) {
|
|
startX = 0;
|
|
}
|
|
if (startIndex > model.attrs.length - 1) {
|
|
startIndex = model.attrs.length - 1;
|
|
}
|
|
graph.update(node, {
|
|
startIndex,
|
|
startX,
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
},
|
|
click(e) {
|
|
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
|
|
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);
|
|
}
|
|
}catch (ee){
|
|
console.log(ee)
|
|
}
|
|
},
|
|
moves(e) {
|
|
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)
|
|
}
|
|
|
|
},
|
|
}
|
|
}
|