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.
198 lines
7.1 KiB
198 lines
7.1 KiB
import type { BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g';
|
|
import type { CategoricalPalette } from '../../palettes/types';
|
|
import type { NodeData } from '../../spec';
|
|
import type { ID, Node, NodeBadgeStyleProps, NodeLabelStyleProps, NodePortStyleProps, Point, Port, PortStyleProps, Prefix, Size } from '../../types';
|
|
import { BaseElement } from '../base-element';
|
|
import type { BadgeStyleProps, BaseShapeStyleProps, IconStyleProps, LabelStyleProps } from '../shapes';
|
|
/**
|
|
* <zh/> 节点通用样式配置项
|
|
*
|
|
* <en/> Base node style props
|
|
*/
|
|
export interface BaseNodeStyleProps extends BaseShapeStyleProps, Prefix<'label', NodeLabelStyleProps>, Prefix<'halo', BaseStyleProps>, Prefix<'icon', IconStyleProps>, Prefix<'badge', BadgeStyleProps>, Prefix<'port', PortStyleProps> {
|
|
/**
|
|
* <zh/> x 坐标
|
|
*
|
|
* <en/> The x-coordinate of node
|
|
*/
|
|
x?: number;
|
|
/**
|
|
* <zh/> y 坐标
|
|
*
|
|
* <en/> The y-coordinate of node
|
|
*/
|
|
y?: number;
|
|
/**
|
|
* <zh/> z 坐标
|
|
*
|
|
* <en/> The z-coordinate of node
|
|
*/
|
|
z?: number;
|
|
/**
|
|
* <zh/> 节点大小,快捷设置节点宽高
|
|
* - 若值为数字,则表示节点的宽度、高度以及深度相同为指定值
|
|
* - 若值为数组,则按数组元素依次表示节点的宽度、高度以及深度
|
|
*
|
|
* <en/> The size of node, which is a shortcut to set the width and height of node
|
|
* - If the value is a number, it means the width, height, and depth of the node are the same as the specified value
|
|
* - If the value is an array, it means the width, height, and depth of the node are represented by the array elements in turn
|
|
*/
|
|
size?: Size;
|
|
/**
|
|
* <zh/> 当前节点/组合是否展开
|
|
*
|
|
* <en/> Whether the current node/combo is expanded
|
|
*/
|
|
collapsed?: boolean;
|
|
/**
|
|
* <zh/> 子节点实例
|
|
*
|
|
* <en/> The instance of the child node
|
|
* @remarks
|
|
* <zh/> 仅在树图中生效
|
|
*
|
|
* <en/> Only valid in the tree graph
|
|
* @ignore
|
|
*/
|
|
childrenNode?: ID[];
|
|
/**
|
|
* <zh/> 子节点数据
|
|
*
|
|
* <en/> The data of the child node
|
|
* @remarks
|
|
* <zh/> 仅在树图中生效。如果当前节点为收起状态,children 可能为空,通过 childrenData 能够获取完整的子元素数据
|
|
*
|
|
* <en/> Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
|
|
* @ignore
|
|
*/
|
|
childrenData?: NodeData[];
|
|
/**
|
|
* <zh/> 是否显示节点标签
|
|
*
|
|
* <en/> Whether to show the node label
|
|
* @defaultValue true
|
|
*/
|
|
label?: boolean;
|
|
/**
|
|
* <zh/> 是否显示节点光晕
|
|
*
|
|
* <en/> Whether to show the node halo
|
|
* @defaultValue false
|
|
*/
|
|
halo?: boolean;
|
|
/**
|
|
* <zh/> 是否显示节点图标
|
|
*
|
|
* <en/> Whether to show the node icon
|
|
* @defaultValue true
|
|
*/
|
|
icon?: boolean;
|
|
/**
|
|
* <zh/> 是否显示节点徽标
|
|
*
|
|
* <en/> Whether to show the node badge
|
|
* @defaultValue true
|
|
*/
|
|
badge?: boolean;
|
|
/**
|
|
* <zh/> 是否显示连接桩
|
|
*
|
|
* <en/> Whether to show the node port
|
|
* @defaultValue true
|
|
*/
|
|
port?: boolean;
|
|
/**
|
|
* <zh/> 连接桩配置项,支持配置多个连接桩
|
|
*
|
|
* <en/> Port configuration, supports configuring multiple ports
|
|
* @example
|
|
* ```json
|
|
* {
|
|
* port: true,
|
|
* ports: [
|
|
* { key: 'top', placement: [0.5, 0], r: 4, stroke: '#31d0c6', fill: '#fff' },
|
|
* { key: 'bottom', placement: [0.5, 1], r: 4, stroke: '#31d0c6', fill: '#fff' },
|
|
* ],
|
|
* }
|
|
* ```
|
|
*/
|
|
ports?: NodePortStyleProps[];
|
|
/**
|
|
* <zh/> 徽标
|
|
*
|
|
* <en/> Badge
|
|
* @example
|
|
* ```json
|
|
* {
|
|
* badge: true,
|
|
* badges: [
|
|
* { text: 'A', placement: 'right-top'},
|
|
* { text: 'Important', placement: 'right' },
|
|
* { text: 'Notice', placement: 'right-bottom' },
|
|
* ],
|
|
* badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'],
|
|
* }
|
|
* ```
|
|
*/
|
|
badges?: NodeBadgeStyleProps[];
|
|
/**
|
|
* <zh/> 徽标的背景色板
|
|
*
|
|
* <en/> Badge background color palette
|
|
*/
|
|
badgePalette?: CategoricalPalette;
|
|
}
|
|
/**
|
|
* <zh/> 节点元素的基类
|
|
*
|
|
* <en/> Base node class
|
|
* @remarks
|
|
* <zh/> 自定义节点时,建议将此类作为基类。这样,你只需要关注如何实现 keyShape 的绘制逻辑
|
|
*
|
|
* <zh/> 设计文档:https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98
|
|
*
|
|
* <en/> When customizing a node, it is recommended to use this class as the base class. This way, you can directly focus on how to implement the drawing logic of keyShape
|
|
*
|
|
* <en/> Design document: https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98
|
|
*/
|
|
export declare abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps> extends BaseElement<S> implements Node {
|
|
type: string;
|
|
static defaultStyleProps: Partial<BaseNodeStyleProps>;
|
|
constructor(options: DisplayObjectConfig<S>);
|
|
protected getSize(attributes?: S & import("@antv/g").BaseCustomElementStyleProps): import("../../types").Vector3;
|
|
protected getKeyStyle(attributes: Required<S>): any;
|
|
protected getLabelStyle(attributes: Required<S>): false | LabelStyleProps;
|
|
protected getHaloStyle(attributes: Required<S>): any;
|
|
protected getIconStyle(attributes: Required<S>): false | IconStyleProps;
|
|
protected getBadgesStyle(attributes: Required<S>): Record<string, NodeBadgeStyleProps | false>;
|
|
protected getBadgeStyle(style: NodeBadgeStyleProps): NodeBadgeStyleProps;
|
|
protected getPortsStyle(attributes: Required<S>): Record<string, PortStyleProps | false>;
|
|
protected getPortXY(attributes: Required<S>, style: NodePortStyleProps): Point;
|
|
/**
|
|
* Get the ports for the node.
|
|
* @returns Ports shape map.
|
|
*/
|
|
getPorts(): Record<string, Port>;
|
|
/**
|
|
* Get the center point of the node.
|
|
* @returns The center point of the node.
|
|
*/
|
|
getCenter(): Point;
|
|
/**
|
|
* Get the point on the outer contour of the node that is the intersection with a line starting in the center the ending in the point `p`.
|
|
* @param point - The point to intersect with the node.
|
|
* @param useExtendedLine - Whether to use the extended line.
|
|
* @returns The intersection point.
|
|
*/
|
|
getIntersectPoint(point: Point, useExtendedLine?: boolean): Point;
|
|
protected drawHaloShape(attributes: Required<S>, container: Group): void;
|
|
protected drawIconShape(attributes: Required<S>, container: Group): void;
|
|
protected drawBadgeShapes(attributes: Required<S>, container: Group): void;
|
|
protected drawPortShapes(attributes: Required<S>, container: Group): void;
|
|
protected drawLabelShape(attributes: Required<S>, container: Group): void;
|
|
protected abstract drawKeyShape(attributes: Required<S>, container: Group): DisplayObject | undefined;
|
|
private _drawKeyShape;
|
|
render(attributes?: Required<S>, container?: Group): void;
|
|
update(attr?: Partial<S>): void;
|
|
protected onframe(): void;
|
|
}
|
|
|