You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
12 KiB
275 lines
12 KiB
"use strict";
|
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
if (k2 === undefined) k2 = k;
|
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
}
|
|
Object.defineProperty(o, k2, desc);
|
|
}) : (function(o, m, k, k2) {
|
|
if (k2 === undefined) k2 = k;
|
|
o[k2] = m[k];
|
|
}));
|
|
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
}) : function(o, v) {
|
|
o["default"] = v;
|
|
});
|
|
var __importStar = (this && this.__importStar) || (function () {
|
|
var ownKeys = function(o) {
|
|
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
var ar = [];
|
|
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
return ar;
|
|
};
|
|
return ownKeys(o);
|
|
};
|
|
return function (mod) {
|
|
if (mod && mod.__esModule) return mod;
|
|
var result = {};
|
|
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
__setModuleDefault(result, mod);
|
|
return result;
|
|
};
|
|
})();
|
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.BaseEdge = void 0;
|
|
const g_1 = require("@antv/g");
|
|
const util_1 = require("@antv/util");
|
|
const bbox_1 = require("../../utils/bbox");
|
|
const edge_1 = require("../../utils/edge");
|
|
const element_1 = require("../../utils/element");
|
|
const prefix_1 = require("../../utils/prefix");
|
|
const size_1 = require("../../utils/size");
|
|
const style_1 = require("../../utils/style");
|
|
const Symbol = __importStar(require("../../utils/symbol"));
|
|
const text_1 = require("../../utils/text");
|
|
const base_element_1 = require("../base-element");
|
|
const shapes_1 = require("../shapes");
|
|
/**
|
|
* <zh/> 边元素基类
|
|
*
|
|
* <en/> Base class of the edge
|
|
*/
|
|
class BaseEdge extends base_element_1.BaseElement {
|
|
constructor(options) {
|
|
super((0, style_1.mergeOptions)({ style: BaseEdge.defaultStyleProps }, options));
|
|
this.type = 'edge';
|
|
}
|
|
get sourceNode() {
|
|
const { sourceNode: source } = this.parsedAttributes;
|
|
return this.context.element.getElement(source);
|
|
}
|
|
get targetNode() {
|
|
const { targetNode: target } = this.parsedAttributes;
|
|
return this.context.element.getElement(target);
|
|
}
|
|
getKeyStyle(attributes) {
|
|
const _a = this.getGraphicStyle(attributes), { loop } = _a, style = __rest(_a, ["loop"]);
|
|
const { sourceNode, targetNode } = this;
|
|
const d = loop && (0, element_1.isSameNode)(sourceNode, targetNode) ? this.getLoopPath(attributes) : this.getKeyPath(attributes);
|
|
const keyStyle = { d };
|
|
g_1.Path.PARSED_STYLE_LIST.forEach((key) => {
|
|
// @ts-expect-error skip type error
|
|
if (key in style)
|
|
keyStyle[key] = style[key];
|
|
});
|
|
return keyStyle;
|
|
}
|
|
getLoopPath(attributes) {
|
|
const { sourcePort, targetPort } = attributes;
|
|
const node = this.sourceNode;
|
|
const bbox = (0, bbox_1.getNodeBBox)(node);
|
|
const defaultDist = Math.max((0, bbox_1.getBBoxWidth)(bbox), (0, bbox_1.getBBoxHeight)(bbox));
|
|
const { placement, clockwise, dist = defaultDist, } = (0, prefix_1.subStyleProps)(this.getGraphicStyle(attributes), 'loop');
|
|
return (0, edge_1.getCubicLoopPath)(node, placement, clockwise, dist, sourcePort, targetPort);
|
|
}
|
|
getEndpoints(attributes, optimize = true, controlPoints = []) {
|
|
const { sourcePort: sourcePortKey, targetPort: targetPortKey } = attributes;
|
|
const { sourceNode, targetNode } = this;
|
|
const [sourcePort, targetPort] = (0, element_1.findPorts)(sourceNode, targetNode, sourcePortKey, targetPortKey);
|
|
if (!optimize) {
|
|
const sourcePoint = sourcePort ? (0, element_1.getPortPosition)(sourcePort) : sourceNode.getCenter();
|
|
const targetPoint = targetPort ? (0, element_1.getPortPosition)(targetPort) : targetNode.getCenter();
|
|
return [sourcePoint, targetPoint];
|
|
}
|
|
const _controlPoints = typeof controlPoints === 'function' ? controlPoints() : controlPoints;
|
|
const sourcePoint = (0, element_1.getConnectionPoint)(sourcePort || sourceNode, _controlPoints[0] || targetPort || targetNode);
|
|
const targetPoint = (0, element_1.getConnectionPoint)(targetPort || targetNode, _controlPoints[_controlPoints.length - 1] || sourcePort || sourceNode);
|
|
return [sourcePoint, targetPoint];
|
|
}
|
|
getHaloStyle(attributes) {
|
|
if (attributes.halo === false)
|
|
return false;
|
|
const keyStyle = this.getKeyStyle(attributes);
|
|
const haloStyle = (0, prefix_1.subStyleProps)(this.getGraphicStyle(attributes), 'halo');
|
|
return Object.assign(Object.assign({}, keyStyle), haloStyle);
|
|
}
|
|
getLabelStyle(attributes) {
|
|
if (attributes.label === false || !attributes.labelText)
|
|
return false;
|
|
const labelStyle = (0, prefix_1.subStyleProps)(this.getGraphicStyle(attributes), 'label');
|
|
const { placement, offsetX, offsetY, autoRotate, maxWidth } = labelStyle, restStyle = __rest(labelStyle, ["placement", "offsetX", "offsetY", "autoRotate", "maxWidth"]);
|
|
const labelPositionStyle = (0, edge_1.getLabelPositionStyle)(this.shapeMap.key, placement, autoRotate, offsetX, offsetY);
|
|
const bbox = this.shapeMap.key.getLocalBounds();
|
|
const wordWrapWidth = (0, text_1.getWordWrapWidthByEnds)([bbox.min, bbox.max], maxWidth);
|
|
return Object.assign({ wordWrapWidth }, labelPositionStyle, restStyle);
|
|
}
|
|
getBadgeStyle(attributes) {
|
|
if (attributes.badge === false || !attributes.badgeText)
|
|
return false;
|
|
const _a = (0, prefix_1.subStyleProps)(attributes, 'badge'), { offsetX, offsetY, placement } = _a, badgeStyle = __rest(_a, ["offsetX", "offsetY", "placement"]);
|
|
return Object.assign(badgeStyle, (0, edge_1.getBadgePositionStyle)(this.shapeMap, placement, attributes.labelPlacement, offsetX, offsetY));
|
|
}
|
|
drawArrow(attributes, type) {
|
|
var _a;
|
|
const isStart = type === 'start';
|
|
const arrowType = type === 'start' ? 'startArrow' : 'endArrow';
|
|
const enable = attributes[arrowType];
|
|
const keyShape = this.shapeMap.key;
|
|
if (enable) {
|
|
const arrowStyle = this.getArrowStyle(attributes, isStart);
|
|
const [marker, markerOffset, arrowOffset] = isStart
|
|
? ['markerStart', 'markerStartOffset', 'startArrowOffset']
|
|
: ['markerEnd', 'markerEndOffset', 'endArrowOffset'];
|
|
const arrow = keyShape.parsedStyle[marker];
|
|
// update
|
|
if (arrow)
|
|
arrow.attr(arrowStyle);
|
|
// create
|
|
else {
|
|
const Ctor = arrowStyle.src ? g_1.Image : g_1.Path;
|
|
const arrowShape = new Ctor({ style: arrowStyle });
|
|
keyShape.style[marker] = arrowShape;
|
|
}
|
|
keyShape.style[markerOffset] = attributes[arrowOffset] || arrowStyle.width / 2 + +arrowStyle.lineWidth;
|
|
}
|
|
else {
|
|
// destroy
|
|
const marker = isStart ? 'markerStart' : 'markerEnd';
|
|
(_a = keyShape.style[marker]) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
keyShape.style[marker] = null;
|
|
}
|
|
}
|
|
getArrowStyle(attributes, isStart) {
|
|
const keyStyle = this.getShape('key').attributes;
|
|
const arrowType = isStart ? 'startArrow' : 'endArrow';
|
|
const _a = (0, prefix_1.subStyleProps)(this.getGraphicStyle(attributes), arrowType), { size, type } = _a, arrowStyle = __rest(_a, ["size", "type"]);
|
|
const [width, height] = (0, size_1.parseSize)((0, edge_1.getArrowSize)(keyStyle.lineWidth, size));
|
|
const arrowFn = (0, util_1.isFunction)(type) ? type : Symbol[type] || Symbol.triangle;
|
|
const d = arrowFn(width, height);
|
|
return Object.assign((0, util_1.pick)(keyStyle, ['stroke', 'strokeOpacity', 'fillOpacity']), { width, height }, Object.assign({}, (d && { d, fill: type === 'simple' ? '' : keyStyle.stroke })), arrowStyle);
|
|
}
|
|
drawLabelShape(attributes, container) {
|
|
const style = this.getLabelStyle(attributes);
|
|
this.upsert('label', shapes_1.Label, style, container);
|
|
}
|
|
drawHaloShape(attributes, container) {
|
|
const style = this.getHaloStyle(attributes);
|
|
this.upsert('halo', g_1.Path, style, container);
|
|
}
|
|
drawBadgeShape(attributes, container) {
|
|
const style = this.getBadgeStyle(attributes);
|
|
this.upsert('badge', shapes_1.Badge, style, container);
|
|
}
|
|
drawSourceArrow(attributes) {
|
|
this.drawArrow(attributes, 'start');
|
|
}
|
|
drawTargetArrow(attributes) {
|
|
this.drawArrow(attributes, 'end');
|
|
}
|
|
drawKeyShape(attributes, container) {
|
|
const style = this.getKeyStyle(attributes);
|
|
return this.upsert('key', g_1.Path, style, container);
|
|
}
|
|
render(attributes = this.parsedAttributes, container = this) {
|
|
// 1. key shape
|
|
this.drawKeyShape(attributes, container);
|
|
if (!this.getShape('key'))
|
|
return;
|
|
// 2. arrows
|
|
this.drawSourceArrow(attributes);
|
|
this.drawTargetArrow(attributes);
|
|
// 3. label
|
|
this.drawLabelShape(attributes, container);
|
|
// 4. halo
|
|
this.drawHaloShape(attributes, container);
|
|
// 5. badges
|
|
this.drawBadgeShape(attributes, container);
|
|
}
|
|
onframe() {
|
|
this.drawKeyShape(this.parsedAttributes, this);
|
|
this.drawSourceArrow(this.parsedAttributes);
|
|
this.drawTargetArrow(this.parsedAttributes);
|
|
this.drawHaloShape(this.parsedAttributes, this);
|
|
this.drawLabelShape(this.parsedAttributes, this);
|
|
this.drawBadgeShape(this.parsedAttributes, this);
|
|
}
|
|
animate(keyframes, options) {
|
|
const animation = super.animate(keyframes, options);
|
|
if (!animation)
|
|
return animation;
|
|
// 设置 currentTime 时触发更新
|
|
// Trigger update when setting currentTime
|
|
return new Proxy(animation, {
|
|
set: (target, propKey, value) => {
|
|
// 需要推迟 onframe 调用时机，等待节点位置更新完成
|
|
// Need to delay the timing of the onframe call, wait for the node position update to complete
|
|
if (propKey === 'currentTime')
|
|
Promise.resolve().then(() => this.onframe());
|
|
return Reflect.set(target, propKey, value);
|
|
},
|
|
});
|
|
}
|
|
}
|
|
exports.BaseEdge = BaseEdge;
|
|
BaseEdge.defaultStyleProps = {
|
|
badge: true,
|
|
badgeOffsetX: 0,
|
|
badgeOffsetY: 0,
|
|
badgePlacement: 'suffix',
|
|
isBillboard: true,
|
|
label: true,
|
|
labelAutoRotate: true,
|
|
labelIsBillboard: true,
|
|
labelMaxWidth: '80%',
|
|
labelOffsetX: 4,
|
|
labelOffsetY: 0,
|
|
labelPlacement: 'center',
|
|
labelTextBaseline: 'middle',
|
|
labelWordWrap: false,
|
|
halo: false,
|
|
haloDroppable: false,
|
|
haloLineDash: 0,
|
|
haloLineWidth: 12,
|
|
haloPointerEvents: 'none',
|
|
haloStrokeOpacity: 0.25,
|
|
haloZIndex: -1,
|
|
loop: true,
|
|
startArrow: false,
|
|
startArrowLineDash: 0,
|
|
startArrowLineJoin: 'round',
|
|
startArrowLineWidth: 1,
|
|
startArrowTransformOrigin: 'center',
|
|
startArrowType: 'vee',
|
|
endArrow: false,
|
|
endArrowLineDash: 0,
|
|
endArrowLineJoin: 'round',
|
|
endArrowLineWidth: 1,
|
|
endArrowTransformOrigin: 'center',
|
|
endArrowType: 'vee',
|
|
loopPlacement: 'top',
|
|
loopClockwise: true,
|
|
};
|
|
//# sourceMappingURL=base-edge.js.map
|