Skip to content

Updated docs for Resize API and TextNode class #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 5, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,10 @@ module.exports = {
title: "SolidColorShapeNode",
path: "references/document-sandbox/document-apis/classes/SolidColorShapeNode.md",
},
{
title: "StandaloneTextNode",
path: "references/document-sandbox/document-apis/classes/StandaloneTextNode.md",
},
{
title: "StrokableNode",
path: "references/document-sandbox/document-apis/classes/StrokableNode.md",
Expand All @@ -254,6 +258,10 @@ module.exports = {
title: "TextNode",
path: "references/document-sandbox/document-apis/classes/TextNode.md",
},
{
title: "ThreadedTextNode",
path: "references/document-sandbox/document-apis/classes/ThreadedTextNode.md",
},
{
title: "UnavailableFont",
path: "references/document-sandbox/document-apis/classes/UnavailableFont.md",
Expand Down Expand Up @@ -284,6 +292,10 @@ module.exports = {
title: "AutoHeightTextLayout",
path: "references/document-sandbox/document-apis/interfaces/AutoHeightTextLayout.md",
},
{
title: "AutoWidthTextLayout",
path: "references/document-sandbox/document-apis/interfaces/AutoWidthTextLayout.md",
},
{
title: "BaseParagraphStyles",
path: "references/document-sandbox/document-apis/interfaces/BaseParagraphStyles.md",
Expand Down Expand Up @@ -368,10 +380,6 @@ module.exports = {
title: "Point",
path: "references/document-sandbox/document-apis/interfaces/Point.md",
},
{
title: "PointTextLayout",
path: "references/document-sandbox/document-apis/interfaces/PointTextLayout.md",
},
{
title: "Rect",
path: "references/document-sandbox/document-apis/interfaces/Rect.md",
Expand Down
7 changes: 7 additions & 0 deletions src/pages/references/changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@ contributors:

# Changelog

## 2025-05-27

### Added

- 4 new Resize HLAPI's are added in [Node](./document-sandbox/document-apis/classes/Node.md) class as experimental.
- [`TextNode()`](./document-sandbox/document-apis/classes/TextNode.md) is now an abstract base class, with two subclasses: StandaloneTextNode and ThreadedTextNode. These exist mainly to capture the key difference that the allowed layout choices are not the same. (Standalone text does not support “area text” layout, while Threaded text can only use “area text” layout).

## 2025-05-26

### Added
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Please note that creating and deleting an artboard in a single frame will crash

## Implements

- [`IRectangularNode`](../interfaces/IRectangularNode.md)
- `Readonly`\<[`IRectangularNode`](../interfaces/IRectangularNode.md)\>
- [`ContainerNode`](../interfaces/ContainerNode.md)

## Accessors
Expand Down Expand Up @@ -114,6 +114,7 @@ The background fill of the artboard. Artboards must always have a fill.
• `get` **height**(): `number`

The height of the artboard.
Shares the same dimensions as the parent page and other artboards within the parent page.

#### Returns

Expand Down Expand Up @@ -194,6 +195,7 @@ meaningful comparison or conversion between the bounds or coordinate spaces of s
• `get` **width**(): `number`

The width of the artboard.
Shares the same dimensions as the parent page and other artboards within the parent page.

#### Returns

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,110 @@ removal. No-op if node is already an orphan.

---

### rescaleProportionalToHeight()

**rescaleProportionalToHeight**(`height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Changes the height to the given value and the width to the given height multiplied by the aspect ratio.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes the height to the given value and the width to the given height multiplied by the aspect ratio.

Is that the user-input value?


#### Parameters

**height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`rescaleProportionalToHeight`](FillableNode.md#rescaleproportionaltoheight)

---

### rescaleProportionalToWidth()

**rescaleProportionalToWidth**(`width`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Changes the width to the given value and the height to the given width multiplied by the aspect ratio.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question as above


#### Parameters

**width**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`rescaleProportionalToWidth`](FillableNode.md#rescaleproportionaltowidth)

---

### resizeToCover()

**resizeToCover**(`width`, `height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Resizes the node to cover a box with the given dimensions.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does given mean? User-input?


If the node doesn't have a fixed aspect ratio then this will resize the node to the given width and height.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the node doesn't have a fixed aspect ratio, the resizeToCover() API will resize it to the given width and height.


#### Parameters

**width**: `number`

**height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`resizeToCover`](FillableNode.md#resizetocover)

---

### resizeToFitWithin()

**resizeToFitWithin**(`width`, `height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Resizes the node to fit within a box with the given dimensions.

If the node doesn't have a fixed aspect ratio then this will resize the node to the given width and height.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the node has no fixed aspect ratio, the resizeToFitWithin() API will resize it to the given width and height.


#### Parameters

**width**: `number`

**height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`resizeToFitWithin`](FillableNode.md#resizetofitwithin)

---

### setPositionInParent()

**setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,38 @@ Transform values default to 0.

### createText()

• **createText**(): [`TextNode`](TextNode.md)
#### createText()

#### Returns
• **createText**(): [`StandaloneTextNode`](StandaloneTextNode.md)

##### Returns

[`TextNode`](TextNode.md)
[`StandaloneTextNode`](StandaloneTextNode.md)

a text node with default styles. The text content is initially empty, so the text node will be
invisible until its `fullContent` property's `text` is set. Creates point text, so the node's width will automatically
adjust to accommodate whatever text is set.
invisible until its `fullContent` property's `text` is set. Creates auto-width text, so the node's width will
automatically adjust to accommodate whatever text is set.

##### Deprecated

- Initial text content is always expected so please use `createText(textContent: string): StandaloneTextNode`.

#### createText(textContent)

• **createText**(`textContent`): [`StandaloneTextNode`](StandaloneTextNode.md)

##### Parameters

• **textContent**: `string`

the initial string to show.

##### Returns

[`StandaloneTextNode`](StandaloneTextNode.md)

a text node with default styles. Creates auto-width text, so the node's width will automatically adjust
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A text node with default styles. Creates auto-width text, so the node's width will automatically adjust
to accommodate the given text content.

to accommodate the given text content.

Note: the registration point of this text node is not guaranteed to be at the top-left of the bounding box of its
insertion parent. Recommend using `setPositionInParent` over `translation` to set the position.
Expand Down
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does given mean?

Is that user input? If yes, please change all instances of given to user-input

Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,110 @@ removal. No-op if node is already an orphan.

---

### rescaleProportionalToHeight()

• **rescaleProportionalToHeight**(`height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Changes the height to the given value and the width to the given height multiplied by the aspect ratio.

#### Parameters

• **height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`rescaleProportionalToHeight`](FillableNode.md#rescaleproportionaltoheight)

---

### rescaleProportionalToWidth()

• **rescaleProportionalToWidth**(`width`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Changes the width to the given value and the height to the given width multiplied by the aspect ratio.

#### Parameters

• **width**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`rescaleProportionalToWidth`](FillableNode.md#rescaleproportionaltowidth)

---

### resizeToCover()

• **resizeToCover**(`width`, `height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Resizes the node to cover a box with the given dimensions.

If the node doesn't have a fixed aspect ratio then this will resize the node to the given width and height.

#### Parameters

• **width**: `number`

• **height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`resizeToCover`](FillableNode.md#resizetocover)

---

### resizeToFitWithin()

• **resizeToFitWithin**(`width`, `height`): `void`

<InlineAlert slots="text" variant="warning"/>

**IMPORTANT:** This is currently ***experimental only*** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../manifest/index.md#requirements) section of the `manifest.json`.

Resizes the node to fit within a box with the given dimensions.

If the node doesn't have a fixed aspect ratio then this will resize the node to the given width and height.

#### Parameters

• **width**: `number`

• **height**: `number`

#### Returns

`void`

#### Inherited from

[`FillableNode`](FillableNode.md).[`resizeToFitWithin`](FillableNode.md#resizetofitwithin)

---

### setPositionInParent()

• **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void`
Expand Down
Loading