Flow Label - IRobot1/three-flow-ts GitHub Wiki

FlowLabel extends Object3D and is used to display text within flow diagrams.

Constructors

• FlowLabel(diagram: FlowDiagram, parameters: FlowLabelParameters)
  • Description: Constructs a new FlowLabel instance with a reference to the flow diagram and specific label parameters.
  • Parameters:
    • diagram (FlowDiagram): The flow diagram to which this label belongs.
    • parameters (FlowLabelParameters): Configuration parameters for the label.
  • Example:

    const flowDiagram = new FlowDiagram();
    const labelParams = { text: 'Hello', size: 0.1, material:{color: 'blue'} };
    const flowLabel = new FlowLabel(flowDiagram, labelParams);
    flowLabel.updateLabel();
    
    // Add the label to a flow node
    const flowNode = new FlowNode(flowDiagram, nodeParams);
    flowNode.add(flowLabel);
    

Properties

• text
  • Type: string
  • Description: Gets or sets the text content of the label.
• size
  • Type: number
  • Description: Gets or sets the font size of the label.
• color
  • Type: ColorRepresentation
  • Description: Gets or sets the color of the label.
• padding
  • Type: number
  • Description: Gets or sets the padding around the label.
• width
  • Type: number
  • Description: Read-only. Gets the width of the label. Fires FlowEventType.WIDTH_CHANGED event
• height
  • Type: number
  • Description: Read-only. Gets the height of the label. Fires FlowEventType.HEIGHT_CHANGED event

Public Methods

• updateLabel()
  • Description: Updates the label geometry and appearance based on current properties.
  • Returns: void
  • Usage:

    const flowLabel = new FlowLabel(flowDiagram, labelParams);
    flowLabel.updateLabel();
    

Override Methods

• createText(label: string, options: any): Mesh
  • Description: Creates and returns a new text mesh based on the provided label and options.
  • Parameters:
    • label (string): The text of the label.
    • options (TextGeometryParameters): Parameters for the text geometry.
  • Returns: Mesh
  • Usage:

    class CustomFlowLabel extends FlowLabel {
      override createText(label: string, options: any): Mesh {
        return CustomLabel(label, options)
      }
    }
    // or
    label.createText = (label: string, options: any): Mesh => {
      return CustomLabel(label, options)
    }
    

Events

• FlowEventType.WIDTH_CHANGED
  • Description: Fired when the width of the label changes.
• FlowEventType.HEIGHT_CHANGED
  • Description: Fired when the height of the label changes.

Example Usage

// @ts-ignore
import { Text } from "troika-three-text";
import { FlowDiagram, FlowLabel, FlowLabelParameters } from "three-flow";
import { Mesh } from "three";

// https://protectwise.github.io/troika/troika-three-text/
// For list of icons, see https://fonts.google.com/icons

export class TroikaFlowLabel extends FlowLabel {
  override createText(text: string, options: any): Mesh {
    const label = new Text();
    label.text = text;
    if (this.isicon) {
      label.font = 'https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff'
      label.anchorX = 'center'
      label.anchorY = 'middle'
    }
    else {
      label.anchorX = this.alignX
      label.anchorY = this.alignY
      label.maxWidth = this.wrapwidth
      label.textAlign = this.textalign
    }
    label.fontSize = this.size
    label.sync();
    return label;
  }
}