"use strict"; var _tslib = require("tslib"); var _g6Core = require("@antv/g6-core"); var _util = require("@antv/util"); // 五角星shape (0, _g6Core.registerNode)('star', { // 自定义节点时的配置 options: { size: 60, style: { stroke: _g6Core.BaseGlobal.defaultNode.style.stroke, fill: _g6Core.BaseGlobal.defaultNode.style.fill, lineWidth: _g6Core.BaseGlobal.defaultNode.style.lineWidth }, labelCfg: { style: { fill: _g6Core.BaseGlobal.nodeLabel.style.fill, fontSize: _g6Core.BaseGlobal.nodeLabel.style.fontSize, fontFamily: _g6Core.BaseGlobal.windowFontFamily } }, // 节点上左右上下四个方向上的链接circle配置 linkPoints: { top: false, right: false, bottom: false, left: false, // circle的大小 size: _g6Core.BaseGlobal.defaultNode.linkPoints.size, lineWidth: _g6Core.BaseGlobal.defaultNode.linkPoints.lineWidth, fill: _g6Core.BaseGlobal.defaultNode.linkPoints.fill, stroke: _g6Core.BaseGlobal.defaultNode.linkPoints.stroke }, // 节点中icon配置 icon: { // 是否显示icon,值为 false 则不渲染icon show: false, // icon的地址,字符串类型 img: 'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg', width: 20, height: 20 }, stateStyles: (0, _tslib.__assign)({}, _g6Core.BaseGlobal.nodeStateStyles) }, shapeType: 'star', // 文本位置 labelPosition: 'center', drawShape: function drawShape(cfg, group) { var _a = (this.mergeStyle || this.getOptions(cfg)).icon, icon = _a === void 0 ? {} : _a; var style = this.getShapeStyle(cfg); var keyShape = group.addShape('path', { attrs: style, className: "".concat(this.type, "-keyShape"), name: "".concat(this.type, "-keyShape"), draggable: true }); group['shapeMap']["".concat(this.type, "-keyShape")] = keyShape; var w = icon.width, h = icon.height, show = icon.show, text = icon.text; if (show) { if (text) { group['shapeMap']["".concat(this.type, "-icon")] = group.addShape('text', { attrs: (0, _tslib.__assign)({ x: 0, y: 0, fontSize: 12, fill: '#000', stroke: '#000', textBaseline: 'middle', textAlign: 'center' }, icon), className: "".concat(this.type, "-icon"), name: "".concat(this.type, "-icon"), draggable: true }); } else { group['shapeMap']["".concat(this.type, "-icon")] = group.addShape('image', { attrs: (0, _tslib.__assign)({ x: -w / 2, y: -h / 2 }, icon), className: "".concat(this.type, "-icon"), name: "".concat(this.type, "-icon"), draggable: true }); } } this.drawLinkPoints(cfg, group); return keyShape; }, /** * 绘制节点上的LinkPoints * @param {Object} cfg data数据配置项 * @param {Group} group Group实例 */ drawLinkPoints: function drawLinkPoints(cfg, group) { var _a = (this.mergeStyle || this.getOptions(cfg)).linkPoints, linkPoints = _a === void 0 ? {} : _a; var top = linkPoints.top, left = linkPoints.left, right = linkPoints.right, leftBottom = linkPoints.leftBottom, rightBottom = linkPoints.rightBottom, markSize = linkPoints.size, markR = linkPoints.r, markStyle = (0, _tslib.__rest)(linkPoints, ["top", "left", "right", "leftBottom", "rightBottom", "size", "r"]); var size = this.getSize(cfg); var outerR = size[0]; if (right) { // right circle // up down left right 四个方向的坐标均不相同 var x1 = Math.cos((18 + 72 * 0) / 180 * Math.PI) * outerR; var y1 = Math.sin((18 + 72 * 0) / 180 * Math.PI) * outerR; group['shapeMap']['link-point-right'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: x1, y: -y1, r: markSize / 2 || markR || 5 }), className: 'link-point-right', name: 'link-point-right' }); } if (top) { // up down left right 四个方向的坐标均不相同 var x1 = Math.cos((18 + 72 * 1) / 180 * Math.PI) * outerR; var y1 = Math.sin((18 + 72 * 1) / 180 * Math.PI) * outerR; // top circle group['shapeMap']['link-point-top'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: x1, y: -y1, r: markSize / 2 || markR || 5 }), className: 'link-point-top', name: 'link-point-top' }); } if (left) { // up down left right 四个方向的坐标均不相同 var x1 = Math.cos((18 + 72 * 2) / 180 * Math.PI) * outerR; var y1 = Math.sin((18 + 72 * 2) / 180 * Math.PI) * outerR; // left circle group['shapeMap']['link-point-left'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: x1, y: -y1, r: markSize / 2 || markR || 5 }), className: 'link-point-left', name: 'link-point-left' }); } if (leftBottom) { // up down left right 四个方向的坐标均不相同 var x1 = Math.cos((18 + 72 * 3) / 180 * Math.PI) * outerR; var y1 = Math.sin((18 + 72 * 3) / 180 * Math.PI) * outerR; // left bottom circle group['shapeMap']['link-point-bottom'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: x1, y: -y1, r: markSize / 2 || markR || 5 }), className: 'link-point-left-bottom', name: 'link-point-left-bottom' }); } if (rightBottom) { // up down left right 四个方向的坐标均不相同 var x1 = Math.cos((18 + 72 * 4) / 180 * Math.PI) * outerR; var y1 = Math.sin((18 + 72 * 4) / 180 * Math.PI) * outerR; // left bottom circle group['shapeMap']['link-point-right-bottom'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: x1, y: -y1, r: markSize / 2 || markR || 5 }), className: 'link-point-right-bottom', name: 'link-point-right-bottom' }); } }, getPath: function getPath(cfg) { var size = this.getSize(cfg); var outerR = size[0]; var defaultInnerR = outerR * 3 / 8; var innerR = cfg.innerR || defaultInnerR; return _g6Core.Util.getStarPath(outerR, innerR); }, /** * 获取节点的样式,供基于该节点自定义时使用 * @param {Object} cfg 节点数据模型 * @return {Object} 节点的样式 */ getShapeStyle: function getShapeStyle(cfg) { var defaultStyle = (this.mergeStyle || this.getOptions(cfg)).style; var strokeStyle = { stroke: cfg.color }; // 如果设置了color,则覆盖原来默认的 stroke 属性。但 cfg 中但 stroke 属性优先级更高 var style = (0, _util.mix)({}, defaultStyle, strokeStyle); var path = this.getPath(cfg); var styles = (0, _tslib.__assign)({ path: path }, style); return styles; }, update: function update(cfg, item, updateType) { var group = item.getContainer(); // 这里不传 cfg 参数是因为 cfg.style 需要最后覆盖样式 var defaultStyle = this.getOptions({}).style; var path = this.getPath(cfg); // 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。 var strokeStyle = { stroke: cfg.color, path: path }; // 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。 var keyShape = item.get('keyShape'); var style = (0, _util.mix)({}, defaultStyle, keyShape.attr(), strokeStyle); style = (0, _util.mix)(style, cfg.style); this.updateShape(cfg, item, style, true, updateType); this.updateLinkPoints(cfg, group); }, /** * 更新linkPoints * @param {Object} cfg 节点数据配置项 * @param {Group} group Item所在的group */ updateLinkPoints: function updateLinkPoints(cfg, group) { var defaultLinkPoints = this.getOptions({}).linkPoints; var markLeft = group['shapeMap']['link-point-left'] || group.find(function (element) { return element.get('className') === 'link-point-left'; }); var markRight = group['shapeMap']['link-point-right'] || group.find(function (element) { return element.get('className') === 'link-point-right'; }); var markTop = group['shapeMap']['link-point-top'] || group.find(function (element) { return element.get('className') === 'link-point-top'; }); var markLeftBottom = group['shapeMap']['link-point-left-bottom'] || group.find(function (element) { return element.get('className') === 'link-point-left-bottom'; }); var markRightBottom = group['shapeMap']['link-point-left-bottom'] || group.find(function (element) { return element.get('className') === 'link-point-right-bottom'; }); var currentLinkPoints = defaultLinkPoints; var existLinkPoint = markLeft || markRight || markTop || markLeftBottom || markRightBottom; if (existLinkPoint) { currentLinkPoints = existLinkPoint.attr(); } var linkPoints = (0, _util.mix)({}, currentLinkPoints, cfg.linkPoints); var markFill = linkPoints.fill, markStroke = linkPoints.stroke, borderWidth = linkPoints.lineWidth; var markSize = linkPoints.size / 2; if (!markSize) markSize = linkPoints.r; var _a = cfg.linkPoints ? cfg.linkPoints : { left: undefined, right: undefined, top: undefined, leftBottom: undefined, rightBottom: undefined }, left = _a.left, right = _a.right, top = _a.top, leftBottom = _a.leftBottom, rightBottom = _a.rightBottom; var size = this.getSize(cfg); var outerR = size[0]; var styles = { r: markSize, fill: markFill, stroke: markStroke, lineWidth: borderWidth }; var x = Math.cos((18 + 72 * 0) / 180 * Math.PI) * outerR; var y = Math.sin((18 + 72 * 0) / 180 * Math.PI) * outerR; if (markRight) { if (!right && right !== undefined) { markRight.remove(); delete group['shapeMap']['link-point-right']; } else { markRight.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y })); } } else if (right) { group['shapeMap']['link-point-right'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y }), className: 'link-point-right', name: 'link-point-right', isAnchorPoint: true }); } x = Math.cos((18 + 72 * 1) / 180 * Math.PI) * outerR; y = Math.sin((18 + 72 * 1) / 180 * Math.PI) * outerR; if (markTop) { if (!top && top !== undefined) { markTop.remove(); delete group['shapeMap']['link-point-top']; } else { markTop.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y })); } } else if (top) { group['shapeMap']['link-point-top'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y }), className: 'link-point-top', name: 'link-point-top', isAnchorPoint: true }); } x = Math.cos((18 + 72 * 2) / 180 * Math.PI) * outerR; y = Math.sin((18 + 72 * 2) / 180 * Math.PI) * outerR; if (markLeft) { if (!left && left !== undefined) { markLeft.remove(); delete group['shapeMap']['link-point-left']; } else { markLeft.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y })); } } else if (left) { group['shapeMap']['link-point-left'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y }), className: 'link-point-left', name: 'link-point-left', isAnchorPoint: true }); } x = Math.cos((18 + 72 * 3) / 180 * Math.PI) * outerR; y = Math.sin((18 + 72 * 3) / 180 * Math.PI) * outerR; if (markLeftBottom) { if (!leftBottom && leftBottom !== undefined) { markLeftBottom.remove(); delete group['shapeMap']['link-point-left-bottom']; } else { markLeftBottom.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y })); } } else if (leftBottom) { group['shapeMap']['link-point-left-bottom'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y }), className: 'link-point-left-bottom', name: 'link-point-left-bottom', isAnchorPoint: true }); } x = Math.cos((18 + 72 * 4) / 180 * Math.PI) * outerR; y = Math.sin((18 + 72 * 4) / 180 * Math.PI) * outerR; if (markRightBottom) { if (!rightBottom && rightBottom !== undefined) { markRightBottom.remove(); delete group['shapeMap']['link-point-right-bottom']; } else { markRightBottom.attr((0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y })); } } else if (rightBottom) { group['shapeMap']['link-point-right-bottom'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, styles), { x: x, y: -y }), className: 'link-point-right-bottom', name: 'link-point-right-bottom', isAnchorPoint: true }); } } }, 'single-node');