Skip to content

Inside-shape alignment of text labels #3443

@martinmolema

Description

@martinmolema

Description of new feature

What should the new feature do? For visual features, include an image/mockup of the expected output.

Add inside variants for node label alignment:

  • text-halign: support left-inside and right-inside in addition to left, center, and right.
  • text-valign: support top-inside and bottom-inside in addition to top, center, and bottom.

The new values should anchor the label on the inside edge of the node, rather than outside the node:

  • left anchors the label just outside the node's left side, while left-inside anchors it just inside the node's left side.
  • right anchors the label just outside the node's right side, while right-inside anchors it just inside the node's right side.
  • top anchors the label just outside the node's top side, while top-inside anchors it just inside the node's top side.
  • bottom anchors the label just outside the node's bottom side, while bottom-inside anchors it just inside the node's bottom side.

These values should work consistently for rendering, label bounding boxes, label backgrounds, automatic text justification, texture caching, and edge endpoint calculations that consider node labels.

Motivation for new feature

Describe your use case for this new feature.

The current node label alignment values support labels centered on a node or placed outside a node's sides. Some graph designs need labels placed inside a node while still aligned to a specific side or corner. This is useful for dense diagrams, node annotations, and UI-like graph nodes where labels should remain visually associated with the node without expanding outward into nearby graph space.

Adding explicit inside values keeps the API clear and avoids using manual text margins to simulate inside placement, which can be brittle across node sizes, padding, zoom levels, and label dimensions.

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

  • Ensure that the reporter has adequately described their idea. If not, elicit more information about the use case. You should iteratively build a spec together.
  • Ensure that the issue is a good fit for the core library. Some things are best done in extensions (e.g. UI-related features that aren't style-related). Some things are best done by app authors themselves -- instead of in Cytoscape libraries.
  • The issue has been associated with a corresponding milestone.
  • The commits have been incorporated into the unstable branch via pull request. The corresponding pull request is cross-referenced.

OP:

I would like to be able to align text left inside a node. The text-halign will currently place text outside the box for value 'left', instead of inside the box.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions