Pixso Plugin API

https://pixso.cn/developer/en/
Admin
Pixso Plugin API enables community developers to create plugins that extend Pixso's design...
Tokens:137,035
Snippets:894
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Plugin Data Management: Get Keys

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Demonstrates how to retrieve all keys for plugin data stored on a node.

```typescript
const node: BaseNode;

// Get all keys for plugin data
const pluginDataKeys: string[] = node.getPluginDataKeys();
```

--------------------------------

### Setting Prototype Start Node

Source: https://pixso.cn/developer/en/rest-api/node/PageNode

The 'prototypeStartNode' property specifies the initial node displayed when a prototype is launched from this page. It can be a FrameNode, GroupNode, ComponentNode, InstanceNode, or null if no start node is defined.

```typescript
readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null;

```

--------------------------------

### Pixso Plugin File Structure

Source: https://pixso.cn/developer/en/guide/introduction

Defines the essential files for a Pixso plugin: manifest.json for configuration, main.js for plugin logic in a sandbox, and ui.html for the user interface.

```treeview
.
├── manifest.json   # (Required) The configuration file of the plugin
├── main.js         # (Optional) The script file that runs in the plugin sandbox, used to access the plugin API
└── ui.html         # (Optional) The HTML file embedded in the iframe, used to render the plugin UI

```

--------------------------------

### Get Export Settings

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Retrieves the export settings configured for a node.

```typescript
const settings = node.exportSettings;
```

--------------------------------

### Get Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Retrieves relaunch data previously stored on a node using `setRelaunchData`. This returns an object mapping commands to their descriptions.

```typescript
const relaunchData = currentNode.getRelaunchData();
```

--------------------------------

### Plugin Data Management

Source: https://pixso.cn/developer/en/rest-api/node/PolygonNode

This snippet shows how to get, set, and retrieve keys for private plugin data stored on a node or style.

```typescript
baseNode.setPluginData('myKey', JSON.stringify({ value: 123 }));
const pluginData = baseNode.getPluginData('myKey');
const keys = baseNode.getPluginDataKeys();
const decodedData = JSON.parse(pluginData);
```

--------------------------------

### Get Plugin Data Keys

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Retrieves a list of all keys stored on the node or style using `setPluginData`.

```typescript
const keys: string[] = node.getPluginDataKeys();
```

--------------------------------

### Shared Plugin Data: Get Keys

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Demonstrates how to retrieve all keys for shared data stored within a specific namespace on a node.

```typescript
const node: BaseNode;
const namespace = 'myPluginNamespace';

// Get all keys for shared data in the namespace
const sharedKeys: string[] = node.getSharedPluginDataKeys(namespace);
```

--------------------------------

### Get Plugin Data Keys

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Retrieves a list of all keys for custom plugin data stored on a node or style. This returns an array of strings.

```typescript
const dataKeys = currentNode.getPluginDataKeys();
```

--------------------------------

### Detecting Pixso Environment in Code

Source: https://pixso.cn/developer/en/guide/introduction

Provides a JavaScript code snippet to determine if the current environment is Pixso, useful for compatibility checks with Figma plugins.

```javascript
  // main.js
  let isInPixso = false;
  try {
    isInPixso = !!pixso;
  } catch (e) {
    //
  }


```

--------------------------------

### Get and Set Line Height in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the line height for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeLineHeight(start: number, end: number): LineHeight | pixso.mixed
```

```typescript
setRangeLineHeight(start: number, end: number, value: LineHeight): void
```

--------------------------------

### Build Basic HTML UI for Pixso Plugin

Source: https://pixso.cn/developer/en/guide/setup

This snippet demonstrates the basic HTML structure for a Pixso plugin's user interface. It includes an input field for user data and a button to trigger an action. This HTML is typically loaded by the Pixso `showUI` function.

```html
<!DOCTYPE html>
<body>
  <div class="content">
    <div style="margin-bottom: 20px; color: #fff;">
      Enter the number of ovals: <input type="text" />
    </div>
    <button id="btn">Create</button>
  </div>
</body>

```

--------------------------------

### Get and Set Letter Spacing in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the letter spacing for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeLetterSpacing(start: number, end: number): LetterSpacing | pixso.mixed
```

```typescript
setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void
```

--------------------------------

### Node Removal and Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/PolygonNode

This snippet demonstrates how to remove a node and its children, and how to set and get relaunch data for cross-thread communication.

```typescript
baseNode.remove();
baseNode.setRelaunchData({
  command: 'openPanel',
  description: 'Open the plugin panel'
});
const relaunchData = baseNode.getRelaunchData();
```

--------------------------------

### Get Overrides

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Returns an array of all properties that have been overridden on the current instance. This provides a detailed view of customizations applied to the instance.

```typescript
const overrides = instanceNode.overrides;
```

--------------------------------

### Get and Set Text Decoration in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the text decoration for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeTextDecoration(start: number, end: number): TextDecoration | pixso.mixed
```

```typescript
setRangeTextDecoration(start: number, end: number, value: TextDecoration): void
```

--------------------------------

### Display Pixso Plugin UI using JavaScript

Source: https://pixso.cn/developer/en/guide/setup

This JavaScript code snippet shows how to display the plugin's user interface within Pixso. It uses the `pixso.showUI(__html__)` function, which requires a reference to the HTML content, typically passed as a variable like `__html__`.

```javascript
// main.js
pixso.showUI(__html__); // Used to display the plugin user interface

```

--------------------------------

### Shared Plugin Data API

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

APIs for getting, setting, and retrieving keys for shared plugin data on nodes.

```APIDOC
## GET /api/sharedPluginData

### Description
Retrieves shared data stored on a specific namespace.

### Method
GET

### Endpoint
`/api/sharedPluginData`

### Parameters
#### Query Parameters
- **namespace** (string) - Required - The namespace to retrieve data from.
- **key** (string) - Required - The key of the data to retrieve.

### Response
#### Success Response (200)
- **data** (string) - The retrieved shared data.

### Response Example
```json
{
  "data": "shared_plugin_data_value"
}
```
```

```APIDOC
## POST /api/sharedPluginData

### Description
Stores custom information on any node, retrievable later. This data is accessible to all plugins.

### Method
POST

### Endpoint
`/api/sharedPluginData`

### Parameters
#### Request Body
- **namespace** (string) - Required - A unique string to identify your plugin and avoid key conflicts. Must contain at least 3 alphanumeric characters.
- **key** (string) - Required - The key for the custom information.
- **value** (string) - Required - The custom information to store.

### Request Example
```json
{
  "namespace": "myPluginNamespace",
  "key": "userData",
  "value": "user123"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

### Response Example
```json
{
  "status": "success"
}
```
```

```APIDOC
## GET /api/sharedPluginDataKeys

### Description
Retrieves a list of all keys stored on a node or style using `setSharedPluginData` within a given namespace.

### Method
GET

### Endpoint
`/api/sharedPluginDataKeys`

### Parameters
#### Query Parameters
- **namespace** (string) - Required - The namespace to retrieve keys from.

### Response
#### Success Response (200)
- **keys** (string[]) - An array of keys stored within the specified namespace.

### Response Example
```json
{
  "keys": ["key1", "key2", "key3"]
}
```
```

--------------------------------

### Example manifest.json Structure for Pixso Plugin

Source: https://pixso.cn/developer/en/guide/manifest

This JSON structure defines the essential configuration for a Pixso plugin. It includes the plugin's name, a unique identifier, the main script for the plugin's logic, the HTML file for its user interface, and menu items for triggering specific commands.

```json
{
  "name": "pixso-plugin",
  "id": "123456",
  "main": "./main.js",
  "ui": "./ui.html",
  "menu": [
    {
      "name": "Main",
      "command": "main"
    },
    {
      "name": "Test",
      "command": "test"
    }
  ]
}
```

--------------------------------

### Get and Set Fills in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the fills (color, gradient, etc.) for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeFills(start: number, end: number): Paint[] | pixso.mixed
```

```typescript
setRangeFills(start: number, end: number, value: Paint[]): void
```

--------------------------------

### Pixso Utility Functions

Source: https://pixso.cn/developer/en/host-api/api

Utility functions for interacting with the Pixso environment. Includes showing the plugin dock and configuring resource library settings. setLibraryConfig takes a partial LibraryConfig object.

```typescript
showPluginDockAsync(): Promise<void>
```

```typescript
setLibraryConfig(config: Partial<LibraryConfig>): void

interface LibraryConfig {
  enabled_team_library: boolean; // 一键关闭团队资源库
  enabled_ent_library: boolean; // 一键关闭企业资源库

  enabled_team_left_component_panel: boolean; // 是否启用团队左侧组件面板
  enabled_ent_left_component_panel: boolean; // 是否启用企业左侧组件面板

  enabled_team_instance_replace: boolean; // 是否启用团队实例替换
  enabled_ent_instance_replace: boolean; // 是否启用企业实例替换

  enabled_team_style_replace: boolean; // 是否启用团队样式替换
  enabled_ent_style_replace: boolean; // 是否启用企业样式替换

  enabled_team_library_tab: boolean; // 是否启用团队资源库发布页
  enabled_ent_library_tab: boolean; // 是否启用企业资源库发布页

  enabled_team_library_publish: boolean; // 是否启用团队资源库发布
  enabled_ent_library_publish: boolean; // 是否启用企业资源库发布

  enabled_team_library_replace: boolean; // 是否启用团队资源库替换
  enabled_ent_library_replace: boolean; // 是否启用企业资源库替换

  enabled_library_missing_replace: boolean; // 是否启用缺失资源库替换功能

  enabled_dev_mode: boolean; // 是否启用研发模式开关
}
```

```typescript
getVersionIdAsync(): Promise<string>
```

--------------------------------

### Get and Set Text Case in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the text case for characters within a specified range (start inclusive, end exclusive). Requires the font to be loaded for setting the case.

```typescript
getRangeTextCase(start: number, end: number): TextCase | pixso.mixed
```

```typescript
setRangeTextCase(start: number, end: number, value: TextCase): void
```

--------------------------------

### Get and Set Fill Style ID in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the fill style ID for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeFillStyleId(start: number, end: number): string | pixso.mixed
```

```typescript
setRangeFillStyleId(start: number, end: number, value: string): void
```

--------------------------------

### Utility API

Source: https://pixso.cn/developer/en/host-api/api

Miscellaneous utility functions for interacting with the Pixso environment.

```APIDOC
## Utility API

### Description
Provides various utility functions for interacting with the Pixso environment and its features.

### `showPluginDockAsync`

#### Method
`hostApi.showPluginDockAsync(): Promise<void>;`

#### Description
Displays the Pixso plugin dock.

### `setLibraryConfig`

#### Method
`hostApi.setLibraryConfig(config: Partial<LibraryConfig>): void;`

#### Description
Configures the visibility and behavior of resource library UI elements, such as team and enterprise libraries, component panels, and style replacements.

* * *
### `getVersionIdAsync`

#### Method
`hostApi.getVersionIdAsync(): Promise<string>;`

#### Description
Retrieves the ID of the current historical version in Pixso.
```

--------------------------------

### Get and Set Text Style ID in Range

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Retrieve or set the text style ID for characters within a specified range (start inclusive, end exclusive). Setting requires the font to be loaded.

```typescript
getRangeTextStyleId(start: number, end: number): string | pixso.mixed
```

```typescript
setRangeTextStyleId(start: number, end: number, value: string): void
```

--------------------------------

### Reaction and Export API

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

API documentation for reaction prototyping and export-related functionalities.

```APIDOC
## Reaction Prototyping

### `reactions`

* **Description**: A list of reactions on this node, which includes the methods in the prototype that interact with this node and the behavior of that interaction.
* **Type**: `ReadonlyArray<Reaction>`

## Export-related

### `exportSettings`

* **Description**: The export settings for the node.
* **Type**: `exportSettings: ReadonlyArray<ExportSettings>`
* **Type Declaration**: **ExportSettings**

### `getIsExportSizeExceeded`

* **Description**: Determine whether the export size exceeds the upper limit.
* **Type**: `getIsExportSizeExceeded(settings?: ExportSettings): boolean`
* **Type Declaration**: **ExportSettings**

### `exportAsync`

* **Description**: Export the node as a encoded image.
* **Type**: `exportAsync(settings?: ExportSettings): Promise<Uint8Array>`
* **Type Declaration**: **ExportSettings**
* **Tip**: `Cross-thread Communication`

### `exportJsonAsync`

* **Description**: Export the JSON data of the node, which includes all the information of the node.
* **Type**: `exportJsonAsync(payload?:{withConnectLine?: boolean}): Promise<string>`
* **Tip**: `Cross-thread Communication`

### `exportHexAsync`

* **Description**: Export the Hex data of the node, which includes all the information of the node.
* **Type**: `exportHexAsync(payload?:{withConnectLine?: boolean}): Promise<string>`
```

--------------------------------

### Detect Pixso Environment in UI

Source: https://pixso.cn/developer/en/guide/setup

This JavaScript snippet shows how to determine if the code is running within the Pixso environment from the user interface. It checks the `window.location.origin` for the presence of 'pixso'.

```javascript
<script>
  const isInPixso = window.location.origin.includes("pixso");
</script>

```

--------------------------------

### Accessing Page Guides

Source: https://pixso.cn/developer/en/rest-api/node/PageNode

The 'guides' property provides read-only access to an array of Guide objects associated with the current PageNode. These guides can be used for layout and alignment purposes.

```typescript
readonly guides: ReadonlyArray<Guide>;

```

--------------------------------

### Prototyping and Export Settings

Source: https://pixso.cn/developer/en/rest-api/node/BooleanOperationNode

Documentation for reaction prototyping and export-related functionalities.

```APIDOC
## Prototyping and Export Settings

### `reactions`
  * **Description**: A list of reactions on this node, including interaction methods and behaviors.
  * **Type**: `ReadonlyArray<Reaction>`

### `exportSettings`
  * **Description**: The export settings for the node.
  * **Type**: `exportSettings: ReadonlyArray<ExportSettings>`

### `getIsExportSizeExceeded`
  * **Description**: Determines whether the export size exceeds the upper limit.
  * **Type**: `getIsExportSizeExceeded(settings?: ExportSettings): boolean`
```

--------------------------------

### Get Layer Absolute Transform

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Gets the layer node's position relative to the page as a transformation matrix. This is a read-only property.

```typescript
const absoluteTransform: Transform = layerNode.absoluteTransform;
```

--------------------------------

### Get Plugin Data

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Retrieves custom, plugin-specific information stored on a node or style. The data is returned as a string and may need to be parsed.

```typescript
const pluginData = currentNode.getPluginData("myKey");
```

--------------------------------

### Get Shared Plugin Data

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Gets shared data stored within a specific namespace on a node or style. This data is readable by any plugin.

```typescript
const sharedData = node.getSharedPluginData('myNamespace', 'sharedKey');
```

--------------------------------

### Relaunch Data Management

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Illustrates how to set and retrieve relaunch data on a node, which can display a button and description when the node is selected.

```typescript
const node: BaseNode;

// Set relaunch data
node.setRelaunchData({ 'open-plugin': 'Open My Plugin' });

// Retrieve relaunch data
const relaunchData = node.getRelaunchData(); // { 'open-plugin': 'Open My Plugin' }
```

--------------------------------

### Shared Plugin Data: Set and Get

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Shows how to store and retrieve shared data on a node using a namespace to avoid key conflicts. This data is accessible by any plugin.

```typescript
const node: BaseNode;
const namespace = 'myPluginNamespace'; // Must be >= 3 alphanumeric chars

// Store shared data
node.setSharedPluginData(namespace, 'sharedKey', 'sharedValue');

// Retrieve shared data
const sharedValue = node.getSharedPluginData(namespace, 'sharedKey'); // 'sharedValue'
```

--------------------------------

### Reaction Prototyping

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Manages reaction prototyping, including the methods and behaviors of interactions on a node.

```APIDOC
## Reaction Prototyping API

### Description
Manages reaction prototypes associated with a node. This includes defining interactions and their associated behaviors.

### Properties
- **`reactions`** (ReadonlyArray<Reaction>) - A list of reactions on this node, detailing interaction methods and behaviors.
```

--------------------------------

### Get Parent Node

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Gets the parent node of the current node. The `parent` property returns the parent or `null` if the node is at the root level.

```typescript
const parentNode = currentNode.parent;
```

--------------------------------

### Create Instance

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Demonstrates how to create an instance of a component using the `createInstance` method. This is a fundamental operation for reusing components within Pixso.

```typescript
const newInstance = someComponentNode.createInstance();
```

--------------------------------

### Get Layer Relative Transform

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Gets the layer node's position relative to its parent as a transformation matrix. Note: Does not work for auto layout normal sublayers.

```typescript
const transform: Transform = layerNode.relativeTransform;
```

--------------------------------

### Navigate Pixso UI to Custom URL

Source: https://pixso.cn/developer/en/guide/setup

This code allows developers to navigate the Pixso plugin's UI iframe to a custom URL instead of using the default 'null' origin iframe. This is useful for security and to avoid limitations associated with the 'data:' protocol origin.

```javascript
pixso.showUI(`<script>window.location.href = "https://..."</script>`)

```

--------------------------------

### TextNode - Get and Set Range Font Size

Source: https://pixso.cn/developer/en/rest-api/node/TextNode

Provides functions to get and set font sizes within specific character ranges. `getRangeFontSize` retrieves the font size, while `setRangeFontSize` applies a new font size, requiring the font to be loaded.

```typescript
getRangeFontSize(start: number, end: number): number | pixso.mixed
setRangeFontSize(start: number, end: number, value: number): void
```

--------------------------------

### Event Handling API

Source: https://pixso.cn/developer/en/host-api/api

APIs for registering and removing event listeners for Pixso events such as 'mounted' and 'beforeunmount'.

```APIDOC
## Event Handling API

### Description
Provides interfaces to manage event listeners for Pixso events.

### `on`

#### Method
`hostApi.on(type: HostArgFreeEventType, callback: () => void): void;`

#### Description
Registers a handler function for a specific event. The callback function is executed when the event occurs.

### `once`

#### Method
`hostApi.once(type: HostArgFreeEventType, callback: () => void): void;`

#### Description
Registers a handler function for a specific event that will only be executed once. The callback function is executed when the event occurs.

### `off`

#### Method
`hostApi.off(type: HostArgFreeEventType, callback: () => void): void;`

#### Description
Removes event handlers that were bound using `hostApi.on` or `hostApi.once`.
```

--------------------------------

### Sandbox Communication API

Source: https://pixso.cn/developer/en/host-api/api

APIs for communication between host.js and a plugin's sandbox.js.

```APIDOC
## Sandbox Communication API

### Description
Enables communication between `host.js` and the `sandbox.js` of a plugin.

### `sandbox.postMessage`

#### Method
`hostApi.sandbox.postMessage(message: any): void;`

#### Description
Sends a message from `host.js` to `sandbox.js`.

### `sandbox.onmessage`

#### Method
`hostApi.sandbox.onmessage: Function | undefined;`

#### Description
Listens for messages sent from `sandbox.js` to `host.js`.

### `sandbox.on`

#### Method
`hostApi.sandbox.on(event: 'message', cb: (event: any) => void): void;`

#### Description
Listens for messages sent by `sandbox.js` to `host.js`.

### `sandbox.once`

#### Method
`hostApi.sandbox.once(event: 'message', cb: (event: any) => void): void;`

#### Description
Listens for messages sent by `sandbox.js` to `host.js`, and removes the listener after the callback function runs once.

### `sandbox.off`

#### Method
`hostApi.sandbox.off(event: 'message', cb: (event: any) => void): void;`

#### Description
Removes a listener that was bound using the `sandbox.on` or `sandbox.once` interface.
```

--------------------------------

### Export Settings and Methods

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Handles export settings and asynchronous export methods for nodes, including image and JSON formats.

```APIDOC
## Export API

### Description
Manages export settings and provides asynchronous methods for exporting nodes as images or JSON data. Includes a utility to check if export size exceeds limits.

### Properties and Methods
- **`exportSettings`** (exportSettings: ReadonlyArray<ExportSettings>) - The export settings for the node.
- **`getIsExportSizeExceeded`** (settings?: ExportSettings): boolean - Determines if the export size exceeds the upper limit.
- **`exportAsync`** (settings?: ExportSettings): Promise<Uint8Array> - Exports the node as an encoded image. (Cross-thread Communication)
- **`exportJsonAsync`** (payload?:{withConnectLine?: boolean}): Promise<string> - Exports the node's JSON data, including all node information. (Cross-thread Communication)
- **`exportHexAsync`** (payload?:{withConnectLine?: boolean}): Promise<string> - Exports the node's Hex data, including all node information.
```

--------------------------------

### Get Layer Height

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Returns the read-only height of the layer node.

```typescript
const height: number = layerNode.height;
```

--------------------------------

### Plugin Data Management: Set and Get

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Explains how to store and retrieve custom data associated with a node using `setPluginData` and `getPluginData`. Data should be stringified/parsed for non-string types.

```typescript
const node: BaseNode;

// Store custom data (e.g., JSON string)
const myData = { value: 123 };
node.setPluginData('myDataKey', JSON.stringify(myData));

// Retrieve custom data
const storedDataString: string = node.getPluginData('myDataKey');
const retrievedData = JSON.parse(storedDataString); // { value: 123 }
```

--------------------------------

### Reaction Prototyping API

Source: https://pixso.cn/developer/en/rest-api/node/LineNode

API for managing and retrieving reactions associated with nodes in the prototype.

```APIDOC
## `reactions`

### Description
A list of reactions on this node, which includes the methods in the prototype that interact with this node and the behavior of that interaction.

### Type
`ReadonlyArray<Reaction>`
```

--------------------------------

### Get Layer Width

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Returns the read-only width of the layer node.

```typescript
const width: number = layerNode.width;
```

--------------------------------

### Base Node Properties and Methods

Source: https://pixso.cn/developer/en/rest-api/node/StarNode

Provides core properties and methods applicable to all nodes. Includes 'id', 'parent', 'index', 'name', 'removed', 'toString', 'remove', 'setRelaunchData', 'getRelaunchData', 'getPluginData', 'setPluginData', 'getPluginDataKeys', 'getSharedPluginData', 'setSharedPluginData', and 'getSharedPluginDataKeys'.

```typescript
id: string // Readonly
parent: (BaseNode & ChildrenMixin) | null // Readonly
index: number // Readonly
name: string
removed: boolean // Readonly
tosString(): string
remove(): void
setRelaunchData(data: {[command: string]: string}): void
getRelaunchData(): { [command: string]: string }
getPluginData(key: string): string
setPluginData(key: string, value: string): void
getPluginDataKeys(): string[]
getSharedPluginData(namespace: string, key: string): string
setSharedPluginData(namespace: string, key: string, value: string): void
getSharedPluginDataKeys(namespace: string): string[]
```

--------------------------------

### Get String Representation of Node

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Returns a string representation of the node.

```typescript
const nodeString: string = node.toString();
```

--------------------------------

### Layer Resizing and Rescaling

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

APIs for resizing and rescaling layer nodes.

```APIDOC
## Layer Resizing and Rescaling

### `resize`
  * Type: `resize(width: number, height: number): void`
  * Description: Resizes the node. If the node contains child nodes with constraints, it applies those constraints during resizing. If the parent has an automatic layout, it causes the parent to resize.

### `resizeWithoutConstraints`
  * Type: `resizeWithoutConstraints(width: number, height: number): void`
  * Description: Resize nodes. If the parent is not automatically laid out, the children of the node will never resize, even if those children are constrained. If the parent has automatic layout, the parent child nodes and nodes of the node are resized (this constraint cannot be ignored).

### `rescale`
  * Type: `rescale(scale: number): void`
  * Description: Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar.
```

--------------------------------

### Get Node Export Settings

Source: https://pixso.cn/developer/en/rest-api/node/SliceNode

Provides an array of export settings for the node.

```TypeScript
exportSettings: ReadonlyArray<ExportSettings>
```

--------------------------------

### Get Node Constraints

Source: https://pixso.cn/developer/en/rest-api/node/SliceNode

Retrieves the constraints of a node relative to its containing FrameNode, if any.

```TypeScript
Constraints
```

--------------------------------

### Prototyping Properties

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Properties related to reaction and frame prototyping, including reaction lists and overflow behavior.

```APIDOC
## Prototyping Properties

### `reactions`
  * Type: `ReadonlyArray<Reaction>`

  A list of reactions on this node, which includes the methods in the prototype that interact with this node and the behavior of that interaction.

## Frame prototyping-related

### `overflowDirection`
  * Type: `"NONE" | "HORIZONTAL" | "VERTICAL" | "BOTH"`

  Determines whether a frame will scroll in presentation mode when the frame contains content that exceed the frame's bounds. Reflects the value shown in "Overflow Behavior" in the Prototype tab.

### `numberOfFixedChildren`
  * Type: `number`

  Determines which children of the frame are fixed children in a scrolling frame.

### `overlayPositionType`
  * Readonly: `true`
  * Type: `OverlayPositionType`

  How this frame is positioned when opened as an overlay.

### `OverlayBackground`
  * Readonly: `true`
  * Type: `OverlayBackground`

  How this frame obscures the content under it when opened as an overlay.

### `overlayBackgroundInteraction`
  * Readonly: `true`
  * Type: `overlayBackgroundInteraction`

  How the user can interact with the content under this frame when opened as an overlay.
```

--------------------------------

### Layer Resizing and Rescaling

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Methods to resize and rescale a layer, with options to respect or ignore constraints and auto-layout behavior.

```APIDOC
## POST /layer/resize

### Description
Resizes the node. If the node contains child nodes with constraints, it applies those constraints during resizing. If the parent has an automatic layout, it causes the parent to resize.

### Method
POST

### Endpoint
/layer/resize

### Parameters
#### Query Parameters
- **layerId** (string) - Required - The unique identifier of the layer.
#### Request Body
- **width** (number) - Required - The new width for the layer.
- **height** (number) - Required - The new height for the layer.

### Request Example
```json
{
  "width": 150,
  "height": 75
}
```

## POST /layer/resizeWithoutConstraints

### Description
Resizes nodes. If the parent is not automatically laid out, the children of the node will never resize, even if those children are constrained. If the parent has automatic layout, the parent child nodes and nodes of the node are resized (this constraint cannot be ignored).

### Method
POST

### Endpoint
/layer/resizeWithoutConstraints

### Parameters
#### Query Parameters
- **layerId** (string) - Required - The unique identifier of the layer.
#### Request Body
- **width** (number) - Required - The new width for the layer.
- **height** (number) - Required - The new height for the layer.

### Request Example
```json
{
  "width": 150,
  "height": 75
}
```

## POST /layer/rescale

### Description
Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar.

### Method
POST

### Endpoint
/layer/rescale

### Parameters
#### Query Parameters
- **layerId** (string) - Required - The unique identifier of the layer.
#### Request Body
- **scale** (number) - Required - The scaling factor to apply.

### Request Example
```json
{
  "scale": 1.5
}
```
```

--------------------------------

### Get Shared Plugin Data

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Retrieves shared data from a specific namespace on a node.

```typescript
getSharedPluginData(namespace: string, key: string): string
```

--------------------------------

### Get Plugin Data Keys

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Retrieves all keys stored on the current node or style.

```typescript
getPluginDataKeys(): string[]
```

--------------------------------

### Create Component Instance

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Creates a new instance of a component. By default, the instance is added to the current page.

```typescript
const newInstance = componentNode.createInstance();
```

--------------------------------

### Get Node String Representation

Source: https://pixso.cn/developer/en/rest-api/node/BooleanOperationNode

Returns a string representation of the node. This is a read-only property.

```typescript
toString: string;
```

--------------------------------

### Get Layer Blend Mode

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Retrieves the blend mode of the layer. The type is `BlendMode`.

```typescript
const blendMode: BlendMode = layerNode.blendMode;
```

--------------------------------

### Layout-related Properties and Methods

Source: https://pixso.cn/developer/en/rest-api/node/ComponentSetNode

Details on layout properties like position, dimensions, and transforms, along with methods for resizing and scaling.

```APIDOC
## Layout-related

### `x`
  * Type: `number`

The position of the layer node, equivalent to `relativeTransform[0][2]`.

### `y`
  * Type: `number`

The position of the layer node, equivalent to `relativeTransform[1][2]`.

### `width`
  * Readonly: `true`
  * Type: `number`

The width of the layer node.

### `height`
  * Readonly: `true`
  * Type: `number`

The height of the layer node.

### `relativeTransform`
  * Type: `Transform`

The position of the layer node relative to its parent is represented as a transformation matrix. Note: `relativeTransform` does not work for auto layout normal sublayers. `relativeTransform` still works for sublayers with absolute positioning.

### `absoluteTransform`
  * Readonly: `true`
  * Type: `Transform`

The position of a layer node relative to the page containing it is presented as a transformation matrix.

### `absoluteBoundingBox`
  * Readonly: `true`
  * Type: `Rect | null`

Node boundaries that do not include rendering attributes such as shadows or strokes.

### `getNestedBoundaryBox`
  * Type: `getNestedBoundaryBox(): NestedBoundaryBox`

Get the boundaryBox information of the current layer and all its sublayers.

### `absoluteRenderBounds`
  * Readonly: `true`
  * Type: `Rect | null`

The actual boundaries of the node, including shadows, bold strokes, and anything else that might fall outside the node's regular bounding box, which is defined in `x`, `y`, `width`, and in `height`. `x` and `y` inside this property represents the absolute position of the node on the page. If the node is not visible, this value will be null.

### `constrainProportions`
  * Type: `boolean`

After the switch, when the user resizes the layer via the Properties panel, it makes the layer maintain its scale.

### `rotation`
  * Type: `number`

The rotation angle of the layer node. The value range is [-180, 180]. The values are equivalent to:
```javascript
Math.atan2(-relativeTransform[1][0], relativeTransform[0][0]);
```

### `layoutAlign`
  * Type: `"STRETCH" | "INHERIT"`

Applies only to direct child levels of the auto layout frame, otherwise ignore. Determines if the layer should be stretched along the inverse axis of the parent. The default is `INHERIT`.

### `layoutGrow`
  * Type: `number`

This property applies only to direct child levels of the auto layout frame, otherwise it is ignored. Determines whether the layer should be stretched along the main axis of its parent. 0 corresponds to fixed size, 1 to stretched.

### `resize`
  * Type: `resize(width: number, height: number): void`

Resizes the node. If the node contains child nodes with constraints, it applies those constraints during resizing. If the parent has an automatic layout, it causes the parent to resize.

### `resizeWithoutConstraints`
  * Type: `resizeWithoutConstraints(width: number, height: number): void`

Resize nodes. If the parent is not automatically laid out, the children of the node will never resize, even if those children are constrained. If the parent has automatic layout, the parent child nodes and nodes of the node are resized (this constraint cannot be ignored).

### `rescale`
  * Type: `rescale(scale: number): void`

Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar.

### `constraints`
  * Type: `Constraints`

Constraints of this node relative to its containing FrameNode, if any.
```

--------------------------------

### Swap Component

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Illustrates how to change the main component of an instance while preserving existing overrides. The `swapComponent` method is used for this purpose.

```typescript
instanceNode.swapComponent(newComponentNode);
```

--------------------------------

### Get Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Retrieves the relaunch data stored on the node using `setRelaunchData`.

```typescript
const data = node.getRelaunchData();
```

--------------------------------

### Base Node Properties and Methods (TypeScript)

Source: https://pixso.cn/developer/en/rest-api/node/LineNode

Details common properties and methods available on all nodes, including ID, parent, index, name, removal, and string representation. Also includes methods for managing plugin data.

```typescript
id: string
parent: (BaseNode & ChildrenMixin) | null
index: number
name: string
removed: boolean
tostring(): string
remove(): void
getPluginData(key: string): string
setPluginData(key: string, value: string): void
getPluginDataKeys(): string[]
```

--------------------------------

### Scene Node Children Count

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Gets the total number of direct children for a scene node.

```typescript
childrenCount: number
```

--------------------------------

### Get Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/ComponentNode

Retrieves relaunch data stored on the current node using setRelaunchData.

```typescript
getRelaunchData(): { [command: string]: string }
```

--------------------------------

### Reaction Prototyping

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Manage reactions and prototype interactions associated with design nodes.

```APIDOC
## GET /api/reactions

### Description
Retrieves a list of reactions on the current node, including interaction methods and behaviors.

### Method
GET

### Endpoint
/api/reactions

### Parameters
#### Query Parameters
None

#### Request Body
None

### Response
#### Success Response (200)
- **ReadonlyArray<Reaction>** (array) - An array of reaction objects.

#### Response Example
```json
[
  {
    "action": {
      "type": "NAVIGATE",
      "destinationId": "layer_id_123"
    },
    "trigger": {
      "type": "ON_CLICK"
    }
  }
]
```
```

--------------------------------

### Get Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/BooleanOperationNode

Retrieves the relaunch data previously set on the node using `setRelaunchData`.

```typescript
getRelaunchData(): { [command: string]: string };
```

--------------------------------

### Get Node Index

Source: https://pixso.cn/developer/en/rest-api/node/BooleanOperationNode

Retrieves the sequential index of the node among its siblings. This property is read-only.

```typescript
index: number;
```

--------------------------------

### Set Relaunch Data

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Sets state on a node to display a button and description when selected. This is used for cross-thread communication with plugins.

```typescript
currentNode.setRelaunchData({ command: "description" });
```

--------------------------------

### Get Node ID

Source: https://pixso.cn/developer/en/rest-api/node/BooleanOperationNode

Retrieves the unique identifier (ID) of the current node. This property is read-only.

```typescript
id: string;
```

--------------------------------

### BaseNode API

Source: https://pixso.cn/developer/en/rest-api/node/LineNode

Provides documentation for common properties and methods shared across all nodes in the Pixso API.

```APIDOC
## Base Node Properties and Methods

### `id`
* **Readonly**: `true`
* **Type**: `string`
* **Description**: The unique identifier for the current node.

### `parent`
* **Readonly**: `true`
* **Type**: `(BaseNode & ChildrenMixin) | null`
* **Description**: Returns the parent node of the current node, or null if it has no parent.

### `index`
* **Readonly**: `true`
* **Type**: `number`
* **Description**: The sequential index of the node among its siblings.

### `name`
* **Type**: `string`
* **Description**: The name of the node as displayed in the layers panel.

### `removed`
* **Readonly**: `true`
* **Type**: `boolean`
* **Description**: Indicates if the node has been removed from the document. Useful for checking node validity.

### `toString`
* **Type**: `string`
* **Description**: Returns a string representation of the node.

### `remove`
* **Type**: `remove(): void`
* **Description**: Removes the node and all its children from the document.

### `setRelaunchData`
* **Type**: `data: {[command: string]: string}): void`
* **Description**: Sets relaunch data for the node, typically used to display custom buttons and descriptions when the node is selected.
* **Tip**: Cross-thread Communication

### `getRelaunchData`
* **Type**: `getRelaunchData(): { [command: string]: string }`
* **Description**: Retrieves the relaunch data stored on the node.

### `getPluginData`
* **Type**: `getPluginData(key: string): string`
* **Description**: Retrieves custom data stored on the node using a specific key. The value is returned as a string and may need JSON decoding.

### `setPluginData`
* **Type**: `setPluginData(key: string, value: string): void`
* **Description**: Stores custom data on the node, private to the plugin. Values should be JSON-encoded if not strings.

### `getPluginDataKeys`
* **Type**: `getPluginDataKeys(): string[]`
* **Description**: Retrieves an array of all keys for custom data stored on the node by the plugin.

### `getSharedPluginData`
* **Type**: `getSharedPluginData(namespace: string, key: string): string`
* **Description**: Retrieves shared custom data stored on the node within a specific namespace and key. This data is accessible by other plugins.

### `setSharedPluginData`
* **Type**: `setSharedPluginData(namespace: string, key: string, value: string): void`
* **Description**: Stores shared custom data on the node accessible by other plugins. Requires a namespace to prevent key conflicts.

### `getSharedPluginDataKeys`
* **Type**: `getSharedPluginDataKeys(namespace: string): string[]`
* **Description**: Retrieves an array of all keys for shared data stored on the node within a given namespace.
```

--------------------------------

### Pixso Node Manipulation with hostApi

Source: https://pixso.cn/developer/en/host-api/api

Provides functions to retrieve and manipulate nodes within Pixso. Includes getting frames by level, managing selection, and navigating pages. Returns Promises for asynchronous operations.

```typescript
type FramesByLevel = {
  pageID: string;
  pageName: string;
  frames: {
    id: string;
    level: number;
    name: string;
    parentID: string;
    parentName: string;
    type: NodeType;
  }[];
};

getFramesByLevel(level: number): Promise<FramesByLevel>
```

```typescript
getSelection(): Promise<{id: string, name: string, type: NodeType}[]>
```

```typescript
setSelection(guids: string[]): Promise<void>
```

```typescript
getCurrentPage(): Promise<{id: string, name: string, type: NodeType}>
```

```typescript
setCurrentPage(guid: string): Promise<void>
```

```typescript
scrollAndZoomIntoView(guids: string[]): Promise<void>
```

--------------------------------

### Get Node Name

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Returns the name of the layer as it appears in the layers panel. This is a string property.

```typescript
const name: string = node.name;
```

--------------------------------

### Getting Library Information for ComponentSetNode

Source: https://pixso.cn/developer/en/rest-api/node/ComponentSetNode

The 'getLibraryInfoAsync' method retrieves information about the library to which a component set belongs, including its key and name. It returns a Promise resolving to an object with 'key' and 'name'.

```typescript
async function getLibrary(componentSet: ComponentSetNode) {
  const libraryInfo = await componentSet.getLibraryInfoAsync();
  console.log(libraryInfo.key, libraryInfo.name);
}
```

--------------------------------

### Get Node Index

Source: https://pixso.cn/developer/en/rest-api/node/GroupNode

Retrieves the sequential index of the current node at the same level. This is a read-only property.

```typescript
const index: number = node.index;
```

--------------------------------

### Pixso API: Configure Overlay Background

Source: https://pixso.cn/developer/en/rest-api/node/InstanceNode

Determines the background appearance of an overlay, including how it obscures content underneath. This impacts the visual hierarchy and focus during modal presentations.

```TypeScript
OverlayBackground: OverlayBackground
```

--------------------------------

### Get Node Reactions

Source: https://pixso.cn/developer/en/rest-api/node/EllipseNode

Retrieves a list of reactions associated with a node, including interaction methods and behaviors.

```typescript
const reactions = node.reactions;
```
Tokens:
Raw