UNPKG

@antv/g6

Version:

graph visualization frame work

130 lines (124 loc) 3.39 kB
/** * @fileOverview edge shapes * @author huangtonger@aliyun.com */ const Shape = require('../shape'); const Util = require('../../util/'); const Global = require('../../global'); const MIN_ARROW_SIZE = 3; const defaultArrow = { path(item) { const keyShape = item.getKeyShape(); let lineWidth = keyShape.attr('lineWidth'); lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE; const halfWidth = lineWidth * 10 / 3; const halfHeight = lineWidth * 4 / 3; const radius = lineWidth * 4; return [ [ 'M', -halfWidth, halfHeight ], [ 'L', 0, 0 ], [ 'L', -halfWidth, -halfHeight ], [ 'A', radius, radius, 0, 0, 1, -halfWidth, halfHeight ], [ 'Z' ] ]; }, dindent(item) { const keyShape = item.getKeyShape(); const lineWidth = keyShape.attr('lineWidth'); return (lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE) * 3.1; }, style(item) { const keyShape = item.getKeyShape(); const { strokeOpacity, stroke } = keyShape.get('attrs'); return { fillOpacity: strokeOpacity, fill: stroke }; } }; Shape.registerEdge('common', { draw(item) { const keyShape = this.drawKeyShape(item); this.drawLabel(item, keyShape); return keyShape; }, drawKeyShape(item) { const group = item.getGraphicGroup(); const style = this.getStyle(item); const path = this.getPath(item); return group.addShape('path', { attrs: Util.mix({}, style, { path }) }); }, getStyle(item) { const model = item.getModel(); return Util.mix(true, {}, { stroke: model.color || '#A3B1BF', strokeOpacity: 0.92, lineAppendWidth: 4, lineWidth: model.size || 1 }, model.style); }, getPath(item) { const points = item.getPoints(); return Util.pointsToPolygon(points); }, getLabel(item) { const model = item.getModel(); return model.label; }, drawLabel(item, keyShape) { let label = this.getLabel(item); const group = item.getGraphicGroup(); const model = item.getModel(); if (label) { const center = keyShape.getPoint(0.5); const attrs = Util.mix(true, {}, Global.labelStyle, center); if (!Util.isObject(label)) { attrs.text = label; } else { Util.mix(attrs, label); } label = group.addShape('text', { attrs }); const padding = Util.toAllPadding([ 4, 8 ]); const textBox = label.getBBox(); const defaultStyle = { fill: 'white' }; const style = model.labelRectStyle ? Util.mix({}, defaultStyle, model.labelRectStyle) : defaultStyle; group.addShape('rect', { attrs: Util.mix({}, style, { x: textBox.minX - padding[3], y: textBox.minY - padding[0], width: textBox.maxX - textBox.minX + padding[1] + padding[3], height: textBox.maxY - textBox.minY + padding[0] + padding[2] }) }); Util.toFront(label); } }, startArrow: { ...defaultArrow, tangent(item) { const keyShape = item.getKeyShape(); return keyShape.getStartTangent(); }, ratio() { return 0; } }, endArrow: { ...defaultArrow, tangent(item) { const keyShape = item.getKeyShape(); return keyShape.getEndTangent(); }, ratio() { return 1; } } });