"use strict"; var _tslib = require("tslib"); var _util = require("@antv/util"); var _g6Core = require("@antv/g6-core"); (0, _g6Core.registerNode)('rect', { // 自定义节点时的配置 options: { size: [100, 30], style: { radius: 0, 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 }, // 连接点,默认为左右 // anchorPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }] anchorPoints: [[0, 0.5], [1, 0.5]], stateStyles: (0, _tslib.__assign)({}, _g6Core.BaseGlobal.nodeStateStyles) }, shapeType: 'rect', labelPosition: 'center', drawShape: function drawShape(cfg, group) { var style = this.getShapeStyle(cfg); var keyShape = group.addShape('rect', { attrs: style, className: "".concat(this.type, "-keyShape"), name: "".concat(this.type, "-keyShape"), draggable: true }); group['shapeMap']["".concat(this.type, "-keyShape")] = keyShape; 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, bottom = linkPoints.bottom, markSize = linkPoints.size, markR = linkPoints.r, markStyle = (0, _tslib.__rest)(linkPoints, ["top", "left", "right", "bottom", "size", "r"]); var size = this.getSize(cfg); var width = size[0]; var height = size[1]; if (left) { // left circle group['shapeMap']['link-point-left'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: -width / 2, y: 0, r: markSize / 2 || markR || 5 }), className: 'link-point-left', name: 'link-point-left', isAnchorPoint: true }); } if (right) { // right circle group['shapeMap']['link-point-right'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: width / 2, y: 0, r: markSize / 2 || markR || 5 }), className: 'link-point-right', name: 'link-point-right', isAnchorPoint: true }); } if (top) { // top circle group['shapeMap']['link-point-top'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: 0, y: -height / 2, r: markSize / 2 || markR || 5 }), className: 'link-point-top', name: 'link-point-top', isAnchorPoint: true }); } if (bottom) { // bottom circle group['shapeMap']['link-point-bottom'] = group.addShape('circle', { attrs: (0, _tslib.__assign)((0, _tslib.__assign)({}, markStyle), { x: 0, y: height / 2, r: markSize / 2 || markR || 5 }), className: 'link-point-bottom', name: 'link-point-bottom', isAnchorPoint: true }); } }, /** * 获取节点的样式,供基于该节点自定义时使用 * @param {Object} cfg 节点数据模型 * @return {Object} 节点的样式 */ getShapeStyle: function getShapeStyle(cfg) { var defaultStyle = (this.mergeStyle || this.getOptions(cfg)).style; var strokeStyle = { stroke: cfg.color }; // 如果设置了color,则覆盖默认的stroke属性 var style = (0, _util.mix)({}, defaultStyle, strokeStyle); var size = this.getSize(cfg); var width = style.width || size[0]; var height = style.height || size[1]; var styles = (0, _tslib.__assign)({ x: -width / 2, y: -height / 2, width: width, height: height }, style); return styles; }, update: function update(cfg, item, updateType) { var group = item.getContainer(); // 这里不传 cfg 参数是因为 cfg.style 需要最后覆盖样式 var defaultStyle = this.getOptions({}).style; var size = this.getSize(cfg); var keyShape = item.get('keyShape'); if (!cfg.size) { size[0] = keyShape.attr('width') || defaultStyle.width; size[1] = keyShape.attr('height') || defaultStyle.height; } // 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。 var strokeStyle = { stroke: cfg.color, x: -size[0] / 2, y: -size[1] / 2, width: size[0], height: size[1] }; // 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。 var style = (0, _util.mix)({}, defaultStyle, keyShape.attr(), strokeStyle); style = (0, _util.mix)(style, cfg.style); this.updateShape(cfg, item, style, false, updateType); this.updateLinkPoints(cfg, group); } }, 'single-node');