open-index/open-npm huggingface dataset:
npm package: @knotx/cli
Description: CLI tool for Knotx
Author: boenfu
Latest version: 0.5.10

# @knotx/cli

Knotx CLI工具，用于创建和管理Knotx插件。

## 安装

```bash
npm install -g @knotx/cli
# 或者
yarn global add @knotx/cli
# 或者
pnpm add -g @knotx/cli
```

## 使用方法

### 创建新插件

```bash
knotx create-plugin
```

此命令将引导您完成创建新Knotx插件的过程：
1. 询问插件名称 - 用于生成插件包名和相关文件
2. 选择插件运行环境 - 可选择 jsx 或 react

## 命令列表

- `knotx create-plugin` - 创建新的Knotx插件
- `knotx --help` - 显示帮助信息
- `knotx --version` - 显示版本信息

## 许可证

MIT
npm package: @knotx/plugins-canvas-scrollbar
Description: Canvas Scrollbar Plugin for Knotx
Author: boenfu
Latest version: 0.5.10

# @knotx/plugins-canvas-scrollbar

画布滚动条插件，为画布提供自定义滚动条功能。

## 安装

```bash
npm install @knotx/plugins-canvas-scrollbar
```

## 基本概述

`@knotx/plugins-canvas-scrollbar` 是 KnotX 框架的画布滚动条插件，为画布提供自定义的滚动条功能。当画布内容超出可视区域时，会自动显示滚动条，用户可以通过拖拽滚动条来快速导航到画布的不同区域。

## 实现原理

该插件通过监听画布的变换状态和内容尺寸，动态计算滚动条的位置和大小：

1. **滚动条计算**：基于画布内容尺寸、可视区域和变换状态计算滚动条的位置和大小
2. **交互处理**：支持点击滚动条轨道和拖拽滚动条滑块
3. **自动隐藏**：支持配置滚动条的自动隐藏延迟时间
4. **样式定制**：支持自定义滚动条的样式和尺寸

## 依赖插件

该插件依赖以下包：

- `@knotx/core` - 核心功能
- `@knotx/decorators` - 装饰器支持
- `@knotx/plugins-canvas` - 画布插件（peer dependency）
- `@knotx/jsx` - JSX 支持（peer dependency）
- `react` - React 框架（peer dependency）

## API 使用

### 基本使用

```typescript
import { CanvasScrollbar } from '@knotx/plugins-canvas-scrollbar'

// 创建滚动条插件实例
const scrollbar = new CanvasScrollbar()

// 在引擎中注册插件
engine.use(scrollbar)
```

### 配置选项

```typescript
const scrollbar = new CanvasScrollbar().init({
  style: {
    track: {
      backgroundColor: '#f0f0f0',
      borderRadius: '4px'
    },
    thumb: {
      backgroundColor: '#999',
      borderRadius: '4px'
    }
  },
  size: 12,
  offset: 5,
  minThumbSize: 40,
  hideTimeout: 2000
})
```

### 完整示例

```typescript
import { Engine } from '@knotx/core'
import { Canvas } from '@knotx/plugins-canvas'
import { CanvasScrollbar } from '@knotx/plugins-canvas-scrollbar'

const engine = new Engine()

// 注册画布插件
engine.use(new Canvas())

// 注册滚动条插件
engine.use(new CanvasScrollbar().init({
  style: {
    track: {
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
      borderRadius: '6px'
    },
    thumb: {
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
      borderRadius: '6px'
    }
  },
  size: 10,
  offset: 8,
  minThumbSize: 50,
  hideTimeout: 3000
}))
```

## 配置接口

### CanvasScrollbarConfig

```typescript
interface CanvasScrollbarConfig {
  /**
   * 轨道以及滑块的css样式
   */
  style?: ScrollbarStyle
  /**
   * 轨道以及滑块的宽度/高度
   */
  size?: number
  /**
   * 距离边界的距离
   */
  offset?: number
  /**
   * 滑块的最小宽度/高度
   */
  minThumbSize?: number
  /**
   * 滚动条消失延迟
   */
  hideTimeout?: number
}
```

### ScrollbarStyle

```typescript
interface ScrollbarStyle {
  track: CSSProperties
  thumb: CSSProperties
}
```

## 默认配置

```typescript
const defaultConfig = {
  style: {
    track: {},
    thumb: {}
  },
  offset: 3,
  size: 8,
  minThumbSize: 30,
  hideTimeout: 0
}
```

## 交互功能

### 滚动条拖拽

- 支持拖拽水平和垂直滚动条滑块
- 实时更新画布视图位置
- 平滑的拖拽体验

### 轨道点击

- 支持点击滚动条轨道快速跳转
- 自动计算目标位置
- 平滑的滚动动画

### 自动显示/隐藏

- 鼠标进入画布区域时显示滚动条
- 鼠标离开画布区域时延迟隐藏滚动条
- 支持配置隐藏延迟时间

## 文件目录结构

```
packages/plugins-canvas-scrollbar/
├── src/
│   ├── canvas-scrollbar.tsx  # 画布滚动条插件主文件
│   └── index.ts             # 导出文件
├── dist/                    # 编译输出目录
├── CHANGELOG.md            # 变更日志
├── package.json            # 包配置
├── build.config.ts         # 构建配置
├── eslint.config.mjs       # ESLint 配置
└── tsconfig.json           # TypeScript 配置
```

## 许可证

MIT
npm package: @knotx/plugins-dagre-layout
Description: A Knotx plugin for automatic graph layout using dagre algorithm
Author: boenfu
Latest version: 0.0.1

# Dagre Layout for Knotx

[![npm version](https://img.shields.io/npm/v/@knotx/plugins-dagre-layout.svg)](https://www.npmjs.com/package/@knotx/plugins-dagre-layout)
[![npm downloads](https://img.shields.io/npm/dm/@knotx/plugins-dagre-layout.svg)](https://www.npmjs.com/package/@knotx/plugins-dagre-layout)
[![GitHub license](https://img.shields.io/github/license/knotxjs/dagre-layout.svg)](https://github.com/knotxjs/dagre-layout/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![GitHub stars](https://img.shields.io/github/stars/knotxjs/dagre-layout.svg?style=social)](https://github.com/knotxjs/dagre-layout/stargazers)

基于 [dagre](https://github.com/dagrejs/dagre) 的 Knotx 图布局插件，提供自动布局功能。

## 功能特点

- 为 Knotx 图形提供自动布局能力
- 支持各种布局方向（从上到下、从左到右等）
- 无缝集成到 Knotx 生态系统
- 响应式布局更新

## 安装

```bash
# 使用 npm
npm install @knotx/plugins-dagre-layout

# 使用 yarn
yarn add @knotx/plugins-dagre-layout

# 使用 pnpm
pnpm add @knotx/plugins-dagre-layout
```

## 使用方法

在您的 Knotx 应用中引入并使用该插件：

```tsx
import { DagreLayout } from '@knotx/plugins-dagre-layout'
import { Knotx } from '@knotx/react'

function App() {
  return (
    <Knotx
      // ...其他属性
      plugins={[DagreLayout]}
      pluginConfig={{
        // ...其他插件配置
        dagreLayout: {
          rankdir: 'TB', // 布局方向：TB（从上到下）, LR（从左到右）等
          // 其他 dagre 配置选项
        },
      }}
    />
  )
}
```

### 布局配置

您可以通过 `pluginConfig.dagreLayout` 传递 [dagre 支持的配置选项](https://github.com/dagrejs/dagre/wiki#configuring-the-layout)：

- `rankdir`: 布局方向 ('TB', 'BT', 'LR', 或 'RL')
- `align`: 节点对齐方式 ('UL', 'UR', 'DL', 或 'DR')
- `nodesep`: 同一层级节点之间的间距（像素）
- `edgesep`: 边之间的间距（像素）
- `ranksep`: 层级之间的间距（像素）
- `marginx`, `marginy`: 图形边缘的边距（像素）
- `acyclicer`: 如何处理循环（'greedy' 或 undefined）
- `ranker`: 层级分配算法 ('network-simplex', 'tight-tree' 或 'longest-path')

### 手动触发布局

您可以在需要时手动触发布局重新计算：

```tsx
import type { PluginData } from '@knotx/core'

// 在组件内部使用
import { inject } from '@knotx/decorators'

class YourPlugin extends BasePlugin {
  @inject.dagreLayout.rebuild()
  private layout!: PluginData['dagreLayout']['rebuild']

  someMethod() {
    // 在需要时触发布局重新计算
    this.layout()
  }
}
```

## 示例

详细示例请参考 [playground](./playground/main.tsx) 目录。

## 许可证

MIT © [Knotx](https://github.com/knotxjs)
npm package: @knotx/plugins-viewport-render
Description: A knotx plugin for rendering the viewport based on flatbush. It has a significant effect in scenarios with a large number of nodes.
Author: boenfu
Latest version: 0.5.9

# @knotx/plugins-viewport-render

English version: [README.en.md](README.en.md)

[![npm version](https://img.shields.io/npm/v/@knotx/plugins-viewport-render.svg)](https://www.npmjs.com/package/@knotx/plugins-viewport-render)
[![npm downloads](https://img.shields.io/npm/dm/@knotx/plugins-viewport-render.svg)](https://www.npmjs.com/package/@knotx/plugins-viewport-render)
[![license](https://img.shields.io/npm/l/@knotx/plugins-viewport-render.svg)](https://github.com/knotxjs/viewport-render/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-blue.svg)](https://www.typescriptlang.org/)

基于 flatbush 实现的 Knotx 视口渲染插件。在节点数量较多的场景下，能够显著提升渲染性能。

## 特性

- 基于 flatbush 实现的高性能空间索引
- 支持视口内节点和边的智能缓存
- 可配置的搜索范围和缓存容量
- 支持首屏优化
- 支持动态更新节点和边
- 支持强制显示指定节点和边

## 安装

```bash
npm install @knotx/plugins-viewport-render
# 或者
yarn add @knotx/plugins-viewport-render
# 或者
pnpm add @knotx/plugins-viewport-render
```

## 使用方法

```tsx
import { ViewportRender } from '@knotx/plugins-viewport-render'
import { Knotx } from '@knotx/react'

function App() {
  return (
    <Knotx
      nodes={nodes}
      edges={edges}
      plugins={[ViewportRender]}
      pluginConfig={{
        viewportRender: {
          enable: true,
          searchScale: 1.4,
          nodeCacheCapacity: 200,
          edgeCacheCapacity: 400
        }
      }}
    />
  )
}
```

## 配置选项

| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| enable | boolean | true | 是否启用视口渲染 |
| searchScale | number | 1 | 搜索范围缩放比例，值越大搜索范围越大 |
| nodeCacheCapacity | number | 200 | 视口内节点缓存容量 |
| edgeCacheCapacity | number | nodeCacheCapacity * 2 | 视口内边缓存容量 |

## 高级用法

### 强制显示指定节点和边

可以通过插件提供的 API 强制显示指定的节点和边，即使它们不在当前视口内：

```typescript
@inject.viewportRender.setForceActiveNodes()
setForceActiveNodes!: PluginData['viewportRender']['setForceActiveNodes']
```

## 性能优化

- 使用 flatbush 进行空间索引，提供高效的视口查询
- 实现 LRU 缓存策略，智能管理视口内元素
- 首屏渲染优化，确保首次加载性能
- 支持动态调整搜索范围，平衡性能和用户体验
- 使用 requestIdleCallback 进行边的延迟渲染，提高交互流畅度

## 依赖

- @knotx/core
- @knotx/decorators
- @knotx/plugins-canvas
-
- flatbush

## 许可证

[MIT](./LICENSE)
npm package: @knotx/viselect
Description: [Forked] Simple, lightweight and modern library library for making visual DOM Selections.
Author: Simon Reinisch
Latest version: 3.9.0

<p align="center">
    <code>@viselect/vanilla</code>
</p>

<p align="center">
    <a href="https://simonwep.github.io/viselect">Go Here For Documentation</a>
</p>