### Install Transition Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/transition/index.md

Use the appropriate command for your package manager to install the local .tgz file.

```npm
npm install ./leafer/leafer-in-transition-1.0.0.tgz
```

```pnpm
pnpm add ./leafer/leafer-in-transition-1.0.0.tgz
```

```yarn
yarn add ./leafer/leafer-in-transition-1.0.0.tgz
```

```bun
bun add ./leafer/leafer-in-transition-1.0.0.tgz
```

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

### Install ViewportLighter via package manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/viewport-lighter/index.md

Use these commands to install the local .tgz plugin package using your preferred package manager.

```sh
npm install ./pxgrow/pxgrow-viewport-lighter-1.0.6.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-viewport-lighter-1.0.6.tgz
```

```sh
yarn add ./pxgrow/pxgrow-viewport-lighter-1.0.6.tgz
```

```sh
bun add ./pxgrow/pxgrow-viewport-lighter-1.0.6.tgz
```

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

### Install License Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/license/index.md

Use the appropriate command for your package manager to install the local .tgz file.

```npm
npm install ./pxgrow/pxgrow-license-1.0.6.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-license-1.0.6.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-license-1.0.6.tgz
```

```bun
bun add ./pxgrow/pxgrow-license-1.0.6.tgz
```

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

### Install Lighter Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/lighter/index.md

Use the appropriate command for your package manager to install the local .tgz file.

```npm
npm install ./pxgrow/pxgrow-lighter-1.0.0-beta.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-lighter-1.0.0-beta.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-lighter-1.0.0-beta.tgz
```

```bun
bun add ./pxgrow/pxgrow-lighter-1.0.0-beta.tgz
```

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

### Install Quantum Viewport via package manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/quantum-viewport/index.md

Use the appropriate command for your package manager to install the local .tgz plugin file.

```npm
npm install ./pxgrow/pxgrow-quantum-viewport-1.0.0.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-quantum-viewport-1.0.0.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-quantum-viewport-1.0.0.tgz
```

```bun
bun add ./pxgrow/pxgrow-quantum-viewport-1.0.0.tgz
```

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

### Install Stroke Brush Plugin

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/stroke-brush/index.md

Commands to install the local plugin package using various package managers.

```sh
npm install ./pxgrow/pxgrow-stroke-brush-1.1.4.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-stroke-brush-1.1.4.tgz
```

```sh
yarn add ./pxgrow/pxgrow-stroke-brush-1.1.4.tgz
```

```sh
bun add ./pxgrow/pxgrow-stroke-brush-1.1.4.tgz
```

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

### Install Linker Editor via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker-editor/index.md

Use the appropriate command for your package manager to install the local plugin file.

```npm
npm install ./pxgrow/pxgrow-linker-editor-1.0.0-beta.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-linker-editor-1.0.0-beta.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-linker-editor-1.0.0-beta.tgz
```

```bun
bun add ./pxgrow/pxgrow-linker-editor-1.0.0-beta.tgz
```

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

### Install ImageLighter via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/image-lighter/index.md

Install the local plugin package using your preferred Node.js package manager.

```sh
npm install ./pxgrow/pxgrow-image-lighter-1.1.4.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-image-lighter-1.1.4.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-image-lighter-1.1.4.tgz
```

```bun
bun add ./pxgrow/pxgrow-image-lighter-1.1.4.tgz
```

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

### Install Shadow Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/shadow/index.md

Commands to install the local .tgz plugin package using various package managers.

```sh
npm install ./leafer/leafer-in-shadow-1.0.0.tgz
```

```sh
pnpm add ./leafer/leafer-in-shadow-1.0.0.tgz
```

```sh
yarn add ./leafer/leafer-in-shadow-1.0.0.tgz
```

```sh
bun add ./leafer/leafer-in-shadow-1.0.0.tgz
```

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

### Install BackgroundRunner via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/bg-runner/index.md

Commands to install the local .tgz plugin package using various Node.js package managers.

```sh
npm install ./leafer/leafer-in-bg-runner-1.0.1.tgz
```

```sh
pnpm add ./leafer/leafer-in-bg-runner-1.0.1.tgz
```

```sh
yarn add ./leafer/leafer-in-bg-runner-1.0.1.tgz
```

```sh
bun add ./leafer/leafer-in-bg-runner-1.0.1.tgz
```

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

### Install Points Editor via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/points-editor/index.md

Use the appropriate command for your package manager to install the local .tgz plugin file.

```npm
npm install ./pxgrow/pxgrow-points-editor-1.0.0-beta.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-points-editor-1.0.0-beta.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-points-editor-1.0.0-beta.tgz
```

```bun
bun add ./pxgrow/pxgrow-points-editor-1.0.0-beta.tgz
```

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

### Install Motion Text Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/motion-text/index.md

Commands to install the local .tgz plugin file using various package managers.

```npm
npm install ./pxgrow/pxgrow-motion-text-1.0.0-beta.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-motion-text-1.0.0-beta.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-motion-text-1.0.0-beta.tgz
```

```bun
bun add ./pxgrow/pxgrow-motion-text-1.0.0-beta.tgz
```

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

### Install VectorLighter via package manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/vector-lighter/index.md

Commands to install the local .tgz plugin package using various Node.js package managers.

```sh
npm install ./pxgrow/pxgrow-vector-lighter-1.0.0-beta.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-vector-lighter-1.0.0-beta.tgz
```

```sh
yarn add ./pxgrow/pxgrow-vector-lighter-1.0.0-beta.tgz
```

```sh
bun add ./pxgrow/pxgrow-vector-lighter-1.0.0-beta.tgz
```

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

### createStartPoint

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker/index.md

Creates a starting point for a linker based on a world coordinate and an optional target UI element.

```APIDOC
## createStartPoint(worldPoint, node?, options?)

### Description
Creates a starting point for a linker. It automatically calculates the connection point data on the target node based on the provided world coordinates.

### Parameters
- **worldPoint** (IPointData) - Required - The world coordinate point.
- **node** (UI) - Optional - The target UI element to connect to.
- **options** (ILinkerPointOptions) - Optional - Configuration for snapping and connection mode.
```

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

### Install Shape Editor via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/shape-editor/index.md

Use the appropriate command for your package manager to install the local .tgz file.

```npm
npm install ./pxgrow/pxgrow-shape-editor-1.0.0-beta.2.tgz
```

```pnpm
pnpm add ./pxgrow/pxgrow-shape-editor-1.0.0-beta.2.tgz
```

```yarn
yarn add ./pxgrow/pxgrow-shape-editor-1.0.0-beta.2.tgz
```

```bun
bun add ./pxgrow/pxgrow-shape-editor-1.0.0-beta.2.tgz
```

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

### Create Connection Elements

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker/index.md

Demonstrates how to initialize the Linker plugin and connect elements using start and end points with custom styling.

```ts
// #Linker [创建连线元素]
import { App, Box, Ellipse } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/find' // 导入查找元素插件
import '@leafer-in/arrow' // 导入箭头插件

import { Linker } from '@leafer-in/linker' // 导入连线插件  // [!code hl]

const app = new App({ view: window, editor: {} })

app.tree.cacheId = true // 创建时缓存元素id, 加快查找id的速度

const rect1 = Box.one({ id: 'rect1', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20], children: [new Ellipse({ x: 92, y: 50, width: 8, height: 8, around: 'center', fill: '#836DFF', stroke: '#000', strokeWidth: 1 })] }, 100, 100, 100, 100)
const rect2 = Box.one({ id: 'rect2', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20] }, 100, 300, 100, 100)
const rect3 = Box.one({ id: 'rect3', editable: true, fill: '#FEB027', cornerRadius: [0, 20, 20, 0], children: [new Ellipse({ x: 8, y: 20, width: 8, height: 8, around: 'center', fill: '#836DFF' })] }, 400, 200, 100, 100)


const linker1 = new Linker({  // 类似 AI 工作流连线，位于底部 // [!code hl:6]
    startPoint: { id: 'rect1', point: 'right' },
    endPoint: { id: 'rect3', direction: 'left', point: 'top-left', offset: { y: 20 } },
    stroke: [{ type: 'solid', color: '#000', style: { strokeWidth: 4 } }, { type: 'solid', color: '#836DFF' }],
    strokeWidth: 2,
})

app.tree.add(linker1)


app.tree.add(rect1)
app.tree.add(rect2)
app.tree.add(rect3)


const linker2 = new Linker({  // 带箭头的连线，位于顶部 // [!code hl:7]
    startPoint: { id: 'rect2' }, // 箭头自动方向
    endPoint: { id: 'rect3' },
    endArrow: 'angle',
    stroke: '#ff4c4c',
    strokeWidth: 2
})

app.tree.add(linker2)
```

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

### Install Ruler Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/ruler/index.md

Commands to install the local .tgz plugin package using various package managers.

```sh
npm install ./pxgrow/pxgrow-ruler-1.0.0-beta.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-ruler-1.0.0-beta.tgz
```

```sh
yarn add ./pxgrow/pxgrow-ruler-1.0.0-beta.tgz
```

```sh
bun add ./pxgrow/pxgrow-ruler-1.0.0-beta.tgz
```

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

### Install Motion Editor via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/motion-editor/index.md

Use the local .tgz file path to install the plugin dependency using common package managers.

```sh
npm install ./pxgrow/pxgrow-motion-editor-1.0.0-beta.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-motion-editor-1.0.0-beta.tgz
```

```sh
yarn add ./pxgrow/pxgrow-motion-editor-1.0.0-beta.tgz
```

```sh
bun add ./pxgrow/pxgrow-motion-editor-1.0.0-beta.tgz
```

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

### Install Stroke Sides Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/stroke-sides/index.md

Use the appropriate command for your package manager to install the local .tgz plugin file.

```npm
npm install ./leafer/leafer-in-stroke-sides-1.0.0.tgz
```

```pnpm
pnpm add ./leafer/leafer-in-stroke-sides-1.0.0.tgz
```

```yarn
yarn add ./leafer/leafer-in-stroke-sides-1.0.0.tgz
```

```bun
bun add ./leafer/leafer-in-stroke-sides-1.0.0.tgz
```

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

### Install Image Filter Plugin via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/image-filter/index.md

Commands to install the local .tgz plugin package using various package managers.

```sh
npm install ./leafer/leafer-in-image-filter-1.0.0.tgz
```

```sh
pnpm add ./leafer/leafer-in-image-filter-1.0.0.tgz
```

```sh
yarn add ./leafer/leafer-in-image-filter-1.0.0.tgz
```

```sh
bun add ./leafer/leafer-in-image-filter-1.0.0.tgz
```

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

### Install Mask Editor via Package Manager

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/mask-editor/index.md

Commands to install the local .tgz plugin package using various package managers.

```sh
npm install ./pxgrow/pxgrow-mask-editor-1.0.0-beta.tgz
```

```sh
pnpm add ./pxgrow/pxgrow-mask-editor-1.0.0-beta.tgz
```

```sh
yarn add ./pxgrow/pxgrow-mask-editor-1.0.0-beta.tgz
```

```sh
bun add ./pxgrow/pxgrow-mask-editor-1.0.0-beta.tgz
```

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

### Initialize Tiler Plugin

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/tiler/index.md

Basic setup for enabling the Tiler plugin and assigning the TileEditor to a rectangle element.

```typescript
// #Tiler [自由平铺]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import '@pxgrow/tiler' // 导入图片平铺插件 // [!code hl]

const app = new App({
    view: window, editor: {}
})

const rect = new Rect({
    x: 100,
    y: 100,
    width: 500,
    editable: true,
    editInner: 'TileEditor', // 指定内部编辑器 // [!code hl]
    fill: {
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'repeat',
        gap: 10,
        scale: 0.6
    }
})

app.tree.add(rect)

// 模拟双击元素打开平铺编辑器
rect.on('image.loaded', () => {
    setTimeout(() => {
        app.editor.openInnerEditor(rect, true)
    }, 600)
})
```

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

### Initialize Ruler in LeaferJS

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/ruler/index.md

Example of importing the Ruler plugin and adding it to a Leafer App instance.

```ts
// #Ruler [标尺功能]
import { App, Frame, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import { ScrollBar } from '@leafer-in/scroll'  // 导入滚动条插件 (可选)

import { Ruler } from '@leafer-in/ruler' // 导入标尺插件 // [!code hl]

const app = new App({
    view: window,
    fill: '#333',
    pointSnap: true,
    editor: {},
})

// 标尺自动关联 tree 层，并将标尺添加到 sky 层 // [!code hl:8]
new Ruler(app, {
    fill: '#333', // 标尺的填充色，只能为字符串
    stroke: '#888', // 标尺的刻度、字体颜色
    // selectedColor: '#836DFF', // 选中元素的高亮坐标信息颜色
})
// const ruler = new Ruler(app.tree, {})
// app.sky.add(ruler)

new ScrollBar(app, { theme: 'dark', padding: [10, 0, 0, 10] })

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))
```

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

### Create a Video element

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/video/index.md

Initializes a video instance and adds it to the application tree, with basic playback toggling via click events.

```ts
// #Video [创建Video元素]
import { App } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件  // [!code hl]

const app = new App({ view: window, editor: {} })

const video = new Video({ // [!code hl:7]
    url: '/video/forest.mp4',
    pixelRatio: 2,
    editable: true
})

app.tree.add(video)

// 点击 video 暂停/播放视频 // [!code hl:17]
video.on('click', () => {

    video.togglePlay()

    // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

    // video.duration // 获取视频总时长，以秒为单位

    // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

    // video.volume // 获取、设置视频的音量，0～1

    // video.paused // 视频是否已暂停

    // video.ended // 视频是否已结束

})
```

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

### Implement Gradient Animation on Linked Elements

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/transition/index.md

Demonstrates how to import the transition plugin and apply an animated linear gradient to a Linker element.

```ts
// #Transition [带渐变动画的连线元素]
import { App, Box, Ellipse } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/find' // 导入查找元素插件
import '@leafer-in/arrow' // 导入箭头插件
import '@leafer-in/animate' // 导入动画插件

import '@leafer-in/transition' // 导入渐变颜色过渡插件  // [!code hl:2]
import { Linker } from '@leafer-in/linker' // 导入连线插件 

const app = new App({ view: window, editor: {} })

app.tree.cacheId = true // 创建时缓存元素id, 加快查找id的速度

const rect1 = Box.one({ id: 'rect1', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20], children: [new Ellipse({ x: 92, y: 50, width: 8, height: 8, around: 'center', fill: '#836DFF', stroke: '#000', strokeWidth: 1 })] }, 100, 100, 100, 100)
const rect2 = Box.one({ id: 'rect2', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20] }, 100, 300, 100, 100)
const rect3 = Box.one({ id: 'rect3', editable: true, fill: '#FEB027', cornerRadius: [0, 20, 20, 0], children: [new Ellipse({ x: 8, y: 20, width: 8, height: 8, around: 'center', fill: '#836DFF' })] }, 400, 200, 100, 100)

const linker1 = new Linker({  // 类似 AI 工作流连线，位于底部 
    startPoint: { id: 'rect1', point: 'right' },
    endPoint: { id: 'rect3', direction: 'left', point: 'top-left', offset: { y: 20 } },
    stroke: {
        type: 'linear',
        from: { type: 'percent', x: -1, y: 0.5 },
        to: { type: 'percent', x: 0, y: 0.5 },
        stops: ['#836DFF', '#FEB027', '#836DFF']
    },
    strokeWidth: 2,
    animation: { // 渐变动画 // [!code hl:14]
        style: {
            stroke: {
                type: 'linear',
                from: { type: 'percent', x: 1, y: 0.5 },
                to: { type: 'percent', x: 2, y: 0.5 },
                stops: ['#836DFF', '#FEB027', '#836DFF']
            }
        },
        easing: 'linear',
        duration: 1,
        // reverse: true, // 反向流动
        loop: true,
    }
})

app.tree.add(linker1)


app.tree.add(rect1)
app.tree.add(rect2)
app.tree.add(rect3)


const linker2 = new Linker({  // 带箭头的连线，位于顶部 
    stroke: '#ff4c4c',
    strokeWidth: 2,
    startPoint: { id: 'rect2' }, // 箭头自动方向
    endPoint: { id: 'rect3' },
    endArrow: 'angle'
})

app.tree.add(linker2)
```

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

### 定义 startPoint 接口

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker/index.md

定义连线起点的数据结构，包含方向、对齐方式及偏移量。

```ts
interface ILinkerPointData {
  id?: string | UI // 起点元素的 id，也支持元素实例（只是导出不了json）
  direction?: IDirection4 | 'center' // 连线的方向（相对元素），为 center 时表示自动方向
  point?: IAlign | IUnitPointData // 连接点（相对元素实际内容的box坐标点，支持使用对齐方向名、百分比坐标）
  offset?: IOptionPointData // 相对连接点的偏移值
}

type IDirection4 = 'top' | 'right' | 'bottom' | 'left'

type IAlign =
  | 'top-left'
  | 'top'
  | 'top-right'
  | 'right'
  | 'bottom-right'
  | 'bottom'
  | 'bottom-left'
  | 'left'
  | 'center'

interface IUnitPointData extends IPointData {
  type?: 'percent' | 'px'
}

interface IPointData {
  x: number
  y: number
}

interface IOptionPointData {
  x?: number
  y?: number
}
```

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

### Preload and Add Video to Engine

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/video/index.md

Demonstrates using the Resource loader to ensure a video is fully loaded before adding it to the Leafer application tree.

```ts
// #Video [等待视频加载完，再添加到引擎中]
import { App, Resource } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件  // [!code hl]

const app = new App({ view: window, editor: {} })

const url = '/video/forest.mp4'

Resource.loadVideo(url).then(() => { // [!code hl:5]

    app.tree.add(new Video({ url, editable: true }))

})
```

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

### Apply Rotation to Shadow

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/shadow/index.md

Example of rotating a shadow effect.

```ts
// #阴影变形 [rotate 旋转阴影]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/shadow' // 导入阴影变形插件 // [!code hl]

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    shadow: [{
        blur: 20,
        color: '#FF0000AA',
        rotation: -20 // rotate 旋转阴影 // [!code hl]
    },
    {
        blur: 20,
        color: '#00FF00AA',
        rotation: 20
    }]
})

leafer.add(rect)
```

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

### Include Quantum Viewport via script tag

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/quantum-viewport/index.md

Load the plugin manually using a script tag and access it via the global PxGrow variable.

```html
<script src="/lib/pxgrow/quantum-viewport.js"></script>
<script>
  const { QuantumViewport } = PxGrow.quantumViewport
</script>
```

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

### getBeginNode

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/path-editor/PathEditor/getNode.md

Retrieves the start node of the line containing the specified node.

```APIDOC
## getBeginNode(node: PathNode): PathNode

### Description
Retrieves the starting node of the line where the specified node is located.
```

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

### Set Shadow Transformation Origin

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/shadow/index.md

Example of configuring the origin point for shadow transformations.

```ts
// #阴影变形 [设置 origin 变形中心点]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/shadow'  // 导入阴影变形插件 // [!code hl]

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    shadow: [{
        blur: 20,
        color: '#FF0000AA',
        skew: { x: -60, y: 0 },
        origin: 'top' // 变形原点， 默认为bottom
    }, {
        blur: 20,
        color: '#00FF00AA',
        skew: { x: 60, y: 0 },
        origin: 'top'
    }]
})

leafer.add(rect)
```

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

### Automatic snapping and offset for connection points

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker/index.md

Demonstrates how to programmatically create connection points with automatic snapping to element directions and configurable snap radii.

```ts
// #Linker [创建连线点，自动吸附方向、偏移距离]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/find' // 导入查找元素插件
import '@leafer-in/arrow' // 导入箭头插件

import { Linker } from '@leafer-in/linker' // 导入连线插件  // [!code hl]

const app = new App({ view: window, editor: {} })

app.tree.cacheId = true // 创建时缓存元素id, 加快查找id的速度

const rect1 = Rect.one({ id: 'rect1', editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100)
const rect2 = Rect.one({ id: 'rect2', editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 300)
const rect3 = Rect.one({ id: 'rect3', editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 200)

app.tree.add(rect1)
app.tree.add(rect2)
app.tree.add(rect3)

const linker = new Linker({
    startPoint: { id: 'rect1' },
    endPoint: { id: 'rect3' },
    endArrow: 'arrow',
    stroke: '#836DFF',
    strokeWidth: 2,
})

app.tree.add(linker)

setTimeout(() => {

    // 创建连线点，自动吸附方向 // [!code hl:4]
    console.log(linker.createStartPoint({ x: 400, y: 380 }, rect2, {
        snapRadius: 10 // 吸附到方向点上之后，如果吸附距离超过这个吸附半径（相对元素的Box坐标系），连接点对象会自动增加 offset: {x,y}
    }))

}, 2000)
```

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

### Line Element Editing

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/points-editor/index.md

Basic setup for enabling point editing on a Line element.

```ts
// #Points Editor [Line 元素]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/state' // 导入交互状态插件 (可选)

import '@pxgrow/points-editor'  // 导入节点编辑插件 // [!code hl]

const app = new App({
    view: window, editor: {
        PointsEditTool: { // 编辑工具配置
            // pathEditable: false // 是否可编辑带path属性的元素， 默认为 false
            // showAddPoint: false // 是否显示添加点（位于选中节点的两侧线段中间）, 默认为 false
            // point: {} // 控制点样式
            // beginPoint: {} // 起始控制点样式
        }
    }
})

const line = new Line({
    x: 100,
    y: 100,
    points: [0, 270, 60, 180, 120, 240, 180, 120, 225, 150, 270, 30, 300, 270],
    strokeWidth: 5,
    strokeJoin: 'round',
    stroke: "#32cd79",
    // editOuter: 'PointsEditTool', // 带 points 属性的元素默认为 PointsEditTool，可以不用设置 // [!code hl]
    editable: true
})

app.tree.add(line)

// 模拟点击元素，显示编辑工具
setTimeout(() => {
    app.editor.select(line)
}, 600)
```

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

### Set Brush Icon Spacing

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/stroke-brush/index.md

Example of setting a gap between brush icons along the path.

```ts
// #Stroke Brush [图标间隔]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 (可选)
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/state' // 导入交互状态插件 (可选)
import '@pxgrow/path-editor' // 导入路径编辑插件 (可选)
import { ImageLighter } from '@pxgrow/image-lighter' // 导入图片加速插件 (建议，可选)

import '@pxgrow/stroke-brush' // 导入图标笔刷插件 // [!code hl]

const app = new App({ view: window, editor: { PathEditor: { showAddPoint: true } } })

new ImageLighter(app.tree, {})

const line = new Line({
    points: [{ x: 100, y: 100 }, { x: 200, y: 230 }, { x: 300, y: 250 }, { x: 400, y: 230 }, { x: 500, y: 100 }],
    curve: true,
    editable: true,
    strokeWidth: 30,
    stroke: [
        {
            type: 'image',
            url: '/image/leafer.jpg',
            mode: 'brush',
            gap: { x: 20 } // 每个图标间隔20px // [!code hl]
        }]
})

app.tree.add(line)
```

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

### Apply Skew Transformation to Shadow

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/shadow/index.md

Example of applying a skew transformation to a rectangle's shadow.

```ts
// #阴影变形 [skew 倾斜变形]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/shadow'  // 导入阴影变形插件 // [!code hl]

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    shadow: [{
        blur: 20,
        skew: { x: -90, y: 0 },  // skew 倾斜变形 // [!code hl]
        scale: { x: 1, y: 0.5 }
    }]
})

leafer.add(rect)
```

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

### Optimize 100,000 rectangle elements for smooth zooming

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/viewport-lighter/index.md

Demonstrates initializing ViewportLighter on the app tree to accelerate rendering of a large number of elements.

```ts
// #Viewport Lighter [10万级矩形元素流畅缩放]
import { App, Rect, Group, IGroup } from 'leafer-ui'
import '@leafer-in/viewport'
import '@leafer-in/view'
import '@leafer-in/editor'

import { ViewportLighter } from '@pxgrow/viewport-lighter'  // [!code hl]

const app = new App({ view: window, editor: {} })

new ViewportLighter(app.tree, { // 加速 tree 层
    sliceRender: 10000 // 每个切片1万个元素
})

create(app.tree, 10) // 创建10万个矩形

app.nextRender(() => {
    app.tree.zoom('fit')
})


function create(view: IGroup, num: number) {
    const groupSize = 10 * 100 * 1.5
    const column = num > 25 ? 10 : 5

    for (let i = 0; i < num; i++) {
        const group = new Group()
        group.x = groupSize * (i % column)
        group.y = groupSize * Math.floor(i / column)
        view.add(group)
        createRects(group, 0, 0, `hsl(${(i * 10) % 360},70%,50%)`)
    }
}

function createRects(group: IGroup, startX: number, startY: number, color: string) {
    let y, rect
    for (let i = 0; i < 100; i++) {
        if (i % 10 === 0) startX += 10
        y = startY
        for (let j = 0; j < 100; j++) {
            if (j % 10 === 0) y += 10
            rect = new Rect()
            rect.x = startX
            rect.y = y
            rect.height = 10
            rect.width = 10
            rect.fill = color
            rect.editable = true
            group.add(rect)
            y += 12
        }
        startX += 12
    }
}
```

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

### 引入插件（Web 方式）

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/tiler/index.md

通过 script 标签引入插件，并使用全局变量 PxGrow.tiler 访问。

```html
<script src="/lib/pxgrow/tiler.js"></script>
<script>
  const { TileEditor } = PxGrow.tiler
</script>
```

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

### Flip Brush Icon

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/stroke-brush/index.md

Example of flipping the brush icon along the path using the scale property.

```ts
// #Stroke Brush [翻转图标]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 (可选)
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/state' // 导入交互状态插件 (可选)
import '@pxgrow/path-editor' // 导入路径编辑插件 (可选)
import { ImageLighter } from '@pxgrow/image-lighter' // 导入图片加速插件 (建议，可选)

import '@pxgrow/stroke-brush' // 导入图标笔刷插件 // [!code hl]

const app = new App({ view: window, editor: { PathEditor: { showAddPoint: true } } })

new ImageLighter(app.tree, {})

const line = new Line({
    points: [{ x: 100, y: 100 }, { x: 200, y: 230 }, { x: 300, y: 250 }, { x: 400, y: 230 }, { x: 500, y: 100 }],
    curve: true,
    editable: true,
    strokeWidth: 30,
    stroke: [
        {
            type: 'image',
            url: '/image/leafer.jpg',
            mode: 'brush',
            scale: { x: 1, y: -1 } // y轴设为-1可翻转图片，设为1表示正常 // [!code hl]
        }]
})

app.tree.add(line)
```

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

### Create Animated Connection Elements

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/linker/index.md

Shows how to apply dash patterns and animation configurations to Linker elements to create flow effects.

```ts
// #Linker [带流动动画的连线元素]
import { App, Box, Ellipse } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/find' // 导入查找元素插件
import '@leafer-in/arrow' // 导入箭头插件
import '@leafer-in/animate' // 导入动画插件

import { Linker } from '@leafer-in/linker' // 导入连线插件  // [!code hl]

const app = new App({ view: window, editor: {} })

app.tree.cacheId = true // 创建时缓存元素id, 加快查找id的速度

const rect1 = Box.one({ id: 'rect1', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20], children: [new Ellipse({ x: 92, y: 50, width: 8, height: 8, around: 'center', fill: '#836DFF', stroke: '#000', strokeWidth: 1 })] }, 100, 100, 100, 100)
const rect2 = Box.one({ id: 'rect2', editable: true, fill: '#FFE04B', cornerRadius: [20, 0, 0, 20] }, 100, 300, 100, 100)
const rect3 = Box.one({ id: 'rect3', editable: true, fill: '#FEB027', cornerRadius: [0, 20, 20, 0], children: [new Ellipse({ x: 8, y: 20, width: 8, height: 8, around: 'center', fill: '#836DFF' })] }, 400, 200, 100, 100)


const linker1 = new Linker({  // 类似 AI 工作流连线，位于底部 
    startPoint: { id: 'rect1', point: 'right' },
    endPoint: { id: 'rect3', direction: 'left', point: 'top-left', offset: { y: 20 } },
    stroke: '#836DFF',
    strokeWidth: 2,
    dashPattern: [10, 10], // 绘制虚线 
    dashOffset: 0,
    animation: { // 虚线动画 // [!code hl:7]
        style: { dashOffset: -20 },
        easing: 'linear',
        duration: 0.5,
        // reverse: true, // 反向流动
        loop: true,
    }
})

app.tree.add(linker1)


app.tree.add(rect1)
app.tree.add(rect2)
app.tree.add(rect3)


const linker2 = new Linker({  // 带箭头的连线，位于顶部 
    startPoint: { id: 'rect2' }, // 箭头自动方向
    endPoint: { id: 'rect3' },
    endArrow: 'angle',
    stroke: '#ff4c4c',
    strokeWidth: 2
})

app.tree.add(linker2)
```

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

### Apply Stroke Brush to Line Curve

Source: https://github.com/leaferjs/px-docs/blob/main/plugin/official/stroke-brush/index.md

Example of applying an image brush to a curved line path.

```ts
// #Stroke Brush [Line 曲线]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 (可选)
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/state' // 导入交互状态插件 (可选)
import '@pxgrow/path-editor' // 导入路径编辑插件 (可选)
import { ImageLighter } from '@pxgrow/image-lighter' // 导入图片加速插件 (建议，可选)

import '@pxgrow/stroke-brush' // 导入图标笔刷插件 // [!code hl]

const app = new App({ view: window, editor: { PathEditor: { showAddPoint: true } } })

new ImageLighter(app.tree, {})

const line = new Line({
    points: [{ x: 100, y: 100 }, { x: 200, y: 230 }, { x: 300, y: 250 }, { x: 400, y: 230 }, { x: 500, y: 100 }],
    curve: true,
    editable: true,
    strokeWidth: 30,
    stroke: [ // [!code hl:6]
        {
            type: 'image',
            url: '/image/leafer.jpg',
            mode: 'brush',
        }]
})

app.tree.add(line)
```