Custom interactive components

Custom primitives in custom rendering and custom layout can use the components provided by VRender. Currently, the following components are supported:

TextAutoPoptip

The TextAutoPoptip component is an interactive component provided by VRender. Its function is that when the text is too long and is omitted, hover over the text and a poptip will automatically pop up to display the entire content of the text.

To use the TextAutoPoptip component, you need to configure the corresponding text primitive with pickable: true to enable interaction. At this time, the TextAutoPoptip component will automatically start when the text primitive is omitted by the maxLineWidth attribute. If you want to disable component retention interaction, you need to configure the disableAutoClipedPoptip attribute on the text primitive to true.

The poptip style popped up by the TextAutoPoptip component can be configured in theme.textPopTipStyle. Some common properties are as follows:

Name	Type	Description
position	'auto' | 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb ' | 'right' | 'rt' | 'rb'	poptip is displayed relative to the position of the primitive
title	string | string[] | number | number[]	The content of title in poptip
titleStyle	Partial<ITextGraphicAttribute>	The style of the title content in poptip
titleFormatMethod	(t: string | string[] | number | number[]) => string | string[] | number | number[]	format method for title content in poptip
content	string | string[] | number | number[]	The content of content in poptip, the default is the complete string
contentStyle	Partial	The style of the content content in poptip
contentFormatMethod	(t: string | string[] | number | number[]) => string | string[] | number | number[]	The format method of content in poptip
space	number	Distance between title and content
padding	Padding	padding in poptip
panel	BackgroundAttributes & ISymbolGraphicAttribute & {space?:number;}	Background style in poptip
minWidth	number	Maximum width in poptip
maxWidth	number	The minimum width in poptip
maxWidthPercent	number	Maximum width percentage in poptip
visible	boolean	whether poptip is visible
visibleFunc	(graphic: IGraphic) => boolean	whether poptip is visible function
dx	number	poptipx-direction offset
dy	number	poptipy direction offset