@knotx/plugins-guideline 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,294 @@
+# @knotx/plugins-guideline
+
+English | [中文](./README.md)
+
+Guideline plugin that provides alignment hints for node dragging in KnotX.
+
+## Installation
+
+```bash
+npm install @knotx/plugins-guideline
+# or
+pnpm add @knotx/plugins-guideline
+# or
+yarn add @knotx/plugins-guideline
+```
+
+## Overview
+
+The Guideline plugin provides intelligent node alignment assistance for KnotX, displaying alignment guidelines in real-time during node dragging. This plugin supports multiple alignment methods, automatic snapping functionality, and delivers excellent performance and user experience.
+
+## Features
+
+- 🎯 **Smart Alignment Detection** - Real-time detection of alignment relationships between nodes
+- 📏 **Multiple Alignment Types** - Support for left, right, center, top, bottom alignment
+- 🧲 **Auto-Snap Functionality** - Automatically snap nodes to precise positions when close to alignment
+- ⚡ **Performance Optimized** - Guidelines calculated and rendered only during dragging
+- 🎨 **Customizable** - Support for custom colors, thresholds, and other configurations
+- 🔄 **Reactive Updates** - Reactive state management based on RxJS
+
+## Implementation Principle
+
+The core implementation principles of the Guideline plugin:
+
+1. **Event Listening**: Listens to node `draftOperation` events to capture position changes during dragging
+2. **Distance Calculation**: Real-time calculation of distance relationships between dragged nodes and other nodes
+3. **Alignment Detection**: Detects various alignment possibilities within the set threshold range
+4. **Guideline Generation**: Generates corresponding vertical and horizontal guidelines based on detection results
+5. **Auto-Snap**: When snap functionality is enabled, automatically adjusts node positions to precise alignment positions
+6. **Render Optimization**: Renders guidelines on the foreground layer to ensure correct visual hierarchy
+
+## Dependencies
+
+### Core Dependencies
+- `@knotx/core`: Provides base plugin architecture and data management
+- `@knotx/decorators`: Provides decorator support
+- `rxjs`: Provides reactive programming support
+
+## API Documentation
+
+### Main Classes
+
+#### Guideline
+
+The main class of the Guideline plugin, extending `BasePlugin`.
+
+```typescript
+export class Guideline extends BasePlugin {
+  name = 'guideline' as const
+}
+```
+
+### Configuration Options
+
+#### GuidelineConfig
+
+```typescript
+export interface GuidelineConfig {
+  /** Alignment threshold (pixels), guidelines will be displayed when nodes are within this range */
+  threshold?: number
+  /** Guideline color */
+  color?: string
+  /** Guideline width (pixels) */
+  lineWidth?: number
+  /** Whether to enable the plugin */
+  enabled?: boolean
+  /** Whether to enable auto-snap functionality */
+  enableSnap?: boolean
+}
+```
+
+### Type Definitions
+
+#### GuidelineItem
+
+```typescript
+interface GuidelineItem {
+  /** Guideline type */
+  type: 'vertical' | 'horizontal'
+  /** Guideline position coordinate */
+  position: number
+  /** Optional label information */
+  label?: string
+}
+```
+
+## Usage Examples
+
+### Basic Usage
+
+```typescript
+import { Engine } from '@knotx/core'
+import { Guideline } from '@knotx/plugins-guideline'
+
+const engine = new Engine({
+  container: { width: 800, height: 600, direction: 'horizontal' },
+  plugins: [
+    Guideline,
+    // Other plugins...
+  ],
+})
+```
+
+### Custom Configuration
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+  pluginConfig: {
+    guideline: {
+      threshold: 5,
+      color: '#007ACC',
+      lineWidth: 1,
+      enabled: true,
+      enableSnap: true,
+    },
+  },
+})
+```
+
+### Integration with Drag Plugin
+
+```typescript
+import { Drag } from '@knotx/plugins-drag'
+import { Guideline } from '@knotx/plugins-guideline'
+
+const engine = new Engine({
+  plugins: [Drag, Guideline],
+  pluginConfig: {
+    guideline: {
+      threshold: 8,
+      color: '#FF6B6B',
+      enableSnap: true,
+    },
+  },
+})
+```
+
+### Dynamic Configuration
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+})
+
+// Modify configuration at runtime
+engine.updatePluginConfig('guideline', {
+  threshold: 10,
+  color: '#4ECDC4',
+  enableSnap: false,
+})
+```
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `threshold` | `number` | `5` | Alignment threshold (pixels), guidelines will be displayed when nodes are within this range |
+| `color` | `string` | `'#007ACC'` | Guideline color |
+| `lineWidth` | `number` | `1` | Guideline width (pixels) |
+| `enabled` | `boolean` | `true` | Whether to enable the plugin |
+| `enableSnap` | `boolean` | `true` | Whether to enable auto-snap functionality |
+
+## Alignment Types
+
+The plugin supports the following alignment types:
+
+### Vertical Alignment
+- **Left Alignment** - Align node left edges
+- **Right Alignment** - Align node right edges
+- **Center Alignment** - Align node horizontal centers
+- **Edge Alignment** - Align one node's edge with another node's opposite edge
+
+### Horizontal Alignment
+- **Top Alignment** - Align node top edges
+- **Bottom Alignment** - Align node bottom edges
+- **Center Alignment** - Align node vertical centers
+- **Edge Alignment** - Align one node's edge with another node's opposite edge
+
+## How It Works
+
+1. Listen to node `draftOperation` events
+2. When node position changes, calculate distances to other nodes
+3. Generate corresponding guidelines when within threshold range
+4. **Snap Feature**: If enabled, automatically adjust node position to the nearest alignment position
+5. Render guidelines on the `Layer.Foreground` layer
+6. Automatically clear guidelines when dragging ends
+
+## Advanced Features
+
+### Custom Guideline Styling
+
+```typescript
+class CustomGuidelinePlugin extends BasePlugin {
+  @OnInit
+  init() {
+    // Customize guideline rendering style through inheritance or configuration
+    const config = this.engine.getPluginConfig('guideline')
+    config.color = this.getThemeColor()
+    config.lineWidth = this.getLineWidth()
+  }
+
+  private getThemeColor(): string {
+    // Return different colors based on theme
+    return document.body.classList.contains('dark-theme') ? '#64FFDA' : '#007ACC'
+  }
+
+  private getLineWidth(): number {
+    // Adjust line width based on canvas zoom level
+    const scale = this.engine.getPluginData('canvas')?.transform?.scale || 1
+    return Math.max(1, Math.round(2 / scale))
+  }
+}
+```
+
+### Performance Optimization Configuration
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+  pluginConfig: {
+    guideline: {
+      // Increase threshold appropriately to reduce computation in large node scenarios
+      threshold: 10,
+      // Disable auto-snap to improve performance
+      enableSnap: false,
+    },
+  },
+})
+```
+
+## File Directory Structure
+
+```
+packages/plugins-guideline/
+├── src/
+│   ├── index.ts               # Export file
+│   └── plugin.tsx             # Main implementation file
+├── dist/                      # Build output directory
+├── package.json              # Package configuration
+├── build.config.ts           # Build configuration
+├── tsconfig.json             # TypeScript configuration
+├── eslint.config.mjs         # ESLint configuration
+└── CHANGELOG.md              # Changelog
+```
+
+### Core Files Description
+
+- **plugin.tsx**: Contains the main implementation of the Guideline plugin, including alignment detection algorithms, guideline rendering, and auto-snap functionality
+- **index.ts**: Exports the Guideline class and related type definitions
+
+## Best Practices
+
+### Performance Optimization
+
+1. **Set Reasonable Threshold**: Adjust the `threshold` value based on usage scenarios; too small thresholds increase computational burden
+2. **Enable Snap As Needed**: Enable `enableSnap` in scenarios where precise positioning is important, otherwise disable it to improve performance
+3. **Consider Node Count**: In scenarios with many nodes, consider appropriately increasing the threshold or optimizing rendering strategy
+
+### User Experience
+
+1. **Visual Consistency**: Ensure guideline colors are consistent with the overall design style
+2. **Responsive Configuration**: Dynamically adjust line width and threshold based on canvas zoom level
+3. **Progressive Enhancement**: Consider disabling or simplifying guideline functionality on mobile devices
+
+### Integration Recommendations
+
+1. **Pair with Drag Plugin**: Recommended to use with `@knotx/plugins-drag` plugin for the best experience
+2. **Theme Adaptation**: Dynamically adjust guideline colors when supporting light/dark theme switching
+3. **Keyboard Support**: Consider adding keyboard shortcuts to temporarily disable/enable guideline functionality
+
+## Examples
+
+Check the example code in `apps/playground/src/examples/basic/guideline.tsx` to learn how to use the guideline plugin.
+
+## Notes
+
+1. **Performance Considerations**: Frequent alignment calculations in scenarios with many nodes may impact performance
+2. **Event Priority**: Ensure correct event handling order with other interaction plugins
+3. **Memory Management**: The plugin automatically cleans up unneeded guidelines; no manual management required
+4. **Browser Compatibility**: Uses modern browser features; ensure target browsers support them
+
+## License
+
+MIT © boenfu

package/README.md

@@ -0,0 +1,294 @@
+# @knotx/plugins-guideline
+
+[English](./README.en.md) | 中文
+
+辅助线插件，为 KnotX 提供节点拖拽时的对齐提示功能。
+
+## 安装
+
+```bash
+npm install @knotx/plugins-guideline
+# or
+pnpm add @knotx/plugins-guideline
+# or
+yarn add @knotx/plugins-guideline
+```
+
+## 概述
+
+Guideline 插件为 KnotX 提供了智能的节点对齐辅助功能，在节点拖拽过程中实时检测并显示对齐辅助线。该插件支持多种对齐方式、自动吸附功能，并提供了优秀的性能和用户体验。
+
+## 功能特性
+
+- 🎯 **智能对齐检测** - 实时检测节点之间的对齐关系
+- 📏 **多种对齐方式** - 支持左、右、中心、顶部、底部对齐
+- 🧲 **自动吸附功能** - 节点接近对齐位置时自动吸附到精确位置
+- ⚡ **性能优化** - 仅在拖拽时计算和渲染辅助线
+- 🎨 **可自定义** - 支持自定义颜色、阈值等配置
+- 🔄 **响应式更新** - 基于 RxJS 实现响应式的状态管理
+
+## 实现原理
+
+Guideline 插件的核心实现原理：
+
+1. **事件监听**：监听节点的 `draftOperation` 事件，获取拖拽中的节点位置变化
+2. **距离计算**：实时计算拖拽节点与其他节点之间的距离关系
+3. **对齐检测**：在设定的阈值范围内检测各种对齐可能性
+4. **辅助线生成**：根据检测结果生成相应的垂直和水平辅助线
+5. **自动吸附**：当启用 snap 功能时，自动调整节点位置到精确的对齐位置
+6. **渲染优化**：在前景层渲染辅助线，确保视觉层级正确
+
+## 依赖关系
+
+### 核心依赖
+- `@knotx/core`：提供基础插件架构和数据管理
+- `@knotx/decorators`：提供装饰器支持
+- `rxjs`：提供响应式编程支持
+
+## API 文档
+
+### 主要类
+
+#### Guideline
+
+辅助线插件的主要类，继承自 `BasePlugin`。
+
+```typescript
+export class Guideline extends BasePlugin {
+  name = 'guideline' as const
+}
+```
+
+### 配置选项
+
+#### GuidelineConfig
+
+```typescript
+export interface GuidelineConfig {
+  /** 对齐阈值（像素），节点在此范围内将显示辅助线 */
+  threshold?: number
+  /** 辅助线颜色 */
+  color?: string
+  /** 辅助线宽度（像素） */
+  lineWidth?: number
+  /** 是否启用插件 */
+  enabled?: boolean
+  /** 是否启用自动吸附功能 */
+  enableSnap?: boolean
+}
+```
+
+### 类型定义
+
+#### GuidelineItem
+
+```typescript
+interface GuidelineItem {
+  /** 辅助线类型 */
+  type: 'vertical' | 'horizontal'
+  /** 辅助线位置坐标 */
+  position: number
+  /** 可选的标签信息 */
+  label?: string
+}
+```
+
+## 使用示例
+
+### 基本用法
+
+```typescript
+import { Engine } from '@knotx/core'
+import { Guideline } from '@knotx/plugins-guideline'
+
+const engine = new Engine({
+  container: { width: 800, height: 600, direction: 'horizontal' },
+  plugins: [
+    Guideline,
+    // 其他插件...
+  ],
+})
+```
+
+### 自定义配置
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+  pluginConfig: {
+    guideline: {
+      threshold: 5,
+      color: '#007ACC',
+      lineWidth: 1,
+      enabled: true,
+      enableSnap: true,
+    },
+  },
+})
+```
+
+### 与拖拽插件配合使用
+
+```typescript
+import { Drag } from '@knotx/plugins-drag'
+import { Guideline } from '@knotx/plugins-guideline'
+
+const engine = new Engine({
+  plugins: [Drag, Guideline],
+  pluginConfig: {
+    guideline: {
+      threshold: 8,
+      color: '#FF6B6B',
+      enableSnap: true,
+    },
+  },
+})
+```
+
+### 动态配置
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+})
+
+// 运行时修改配置
+engine.updatePluginConfig('guideline', {
+  threshold: 10,
+  color: '#4ECDC4',
+  enableSnap: false,
+})
+```
+
+## 配置选项
+
+| 选项 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `threshold` | `number` | `5` | 对齐阈值（像素），节点在此范围内将显示辅助线 |
+| `color` | `string` | `'#007ACC'` | 辅助线颜色 |
+| `lineWidth` | `number` | `1` | 辅助线宽度（像素） |
+| `enabled` | `boolean` | `true` | 是否启用插件 |
+| `enableSnap` | `boolean` | `true` | 是否启用自动吸附功能 |
+
+## 对齐类型
+
+插件支持以下对齐类型：
+
+### 垂直对齐
+- **左边对齐** - 节点左边缘对齐
+- **右边对齐** - 节点右边缘对齐
+- **中心对齐** - 节点水平中心对齐
+- **边缘对齐** - 一个节点的边缘与另一个节点的相对边缘对齐
+
+### 水平对齐
+- **顶部对齐** - 节点顶部对齐
+- **底部对齐** - 节点底部对齐
+- **中心对齐** - 节点垂直中心对齐
+- **边缘对齐** - 一个节点的边缘与另一个节点的相对边缘对齐
+
+## 工作原理
+
+1. 监听节点的 `draftOperation` 事件
+2. 当节点位置发生变化时，计算与其他节点的距离
+3. 在阈值范围内时，生成相应的辅助线
+4. **Snap功能**：如果启用，自动将节点位置调整到最近的对齐位置
+5. 在 `Layer.Foreground` 层渲染辅助线
+6. 拖拽结束时自动清除辅助线
+
+## 高级功能
+
+### 自定义辅助线样式
+
+```typescript
+class CustomGuidelinePlugin extends BasePlugin {
+  @OnInit
+  init() {
+    // 可以通过继承或配置来自定义辅助线的渲染样式
+    const config = this.engine.getPluginConfig('guideline')
+    config.color = this.getThemeColor()
+    config.lineWidth = this.getLineWidth()
+  }
+
+  private getThemeColor(): string {
+    // 根据主题返回不同的颜色
+    return document.body.classList.contains('dark-theme') ? '#64FFDA' : '#007ACC'
+  }
+
+  private getLineWidth(): number {
+    // 根据画布缩放级别调整线宽
+    const scale = this.engine.getPluginData('canvas')?.transform?.scale || 1
+    return Math.max(1, Math.round(2 / scale))
+  }
+}
+```
+
+### 性能优化配置
+
+```typescript
+const engine = new Engine({
+  plugins: [Guideline],
+  pluginConfig: {
+    guideline: {
+      // 在大量节点场景下，适当增加阈值以减少计算
+      threshold: 10,
+      // 禁用自动吸附以提升性能
+      enableSnap: false,
+    },
+  },
+})
+```
+
+## 文件目录结构
+
+```
+packages/plugins-guideline/
+├── src/
+│   ├── index.ts               # 导出文件
+│   └── plugin.tsx             # 主要实现文件
+├── dist/                      # 构建输出目录
+├── package.json              # 包配置文件
+├── build.config.ts           # 构建配置
+├── tsconfig.json             # TypeScript 配置
+├── eslint.config.mjs         # ESLint 配置
+└── CHANGELOG.md              # 更新日志
+```
+
+### 核心文件说明
+
+- **plugin.tsx**：包含 Guideline 插件的主要实现，包括对齐检测算法、辅助线渲染和自动吸附功能
+- **index.ts**：导出 Guideline 类和相关类型定义
+
+## 最佳实践
+
+### 性能优化
+
+1. **合理设置阈值**：根据使用场景调整 `threshold` 值，过小的阈值会增加计算负担
+2. **按需启用吸附**：在精确定位重要的场景启用 `enableSnap`，否则可以禁用以提升性能
+3. **节点数量考虑**：在节点数量较多的场景下，考虑适当增加阈值或优化渲染策略
+
+### 用户体验
+
+1. **视觉一致性**：确保辅助线颜色与整体设计风格保持一致
+2. **响应性配置**：根据画布缩放级别动态调整线宽和阈值
+3. **渐进式增强**：在移动设备上可以考虑禁用或简化辅助线功能
+
+### 集成建议
+
+1. **与拖拽插件配合**：建议与 `@knotx/plugins-drag` 插件一起使用以获得最佳体验
+2. **主题适配**：支持明暗主题切换时，动态调整辅助线颜色
+3. **快捷键支持**：可以考虑添加快捷键来临时禁用/启用辅助线功能
+
+## 示例
+
+查看 `apps/playground/src/examples/basic/guideline.tsx` 中的示例代码，了解如何使用辅助线插件。
+
+## 注意事项
+
+1. **性能考虑**：在大量节点的场景下，频繁的对齐计算可能影响性能
+2. **事件优先级**：确保与其他交互插件的事件处理顺序正确
+3. **内存管理**：插件会自动清理不再需要的辅助线，无需手动管理
+4. **浏览器兼容性**：使用了现代浏览器特性，确保目标浏览器支持
+
+## 许可证
+
+MIT © boenfu

package/dist/index.cjs

@@ -0,0 +1,262 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const operators = require('rxjs/operators');
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _init_dec, _draggingNodeId_dec, _guidelines_dec, _transform_dec, _addNodePipe_dec, _getNode_dec, _container_dec, _nodes_dec, _a, _init;
+class Guideline extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.nodes()], _container_dec = [decorators.inject.container()], _getNode_dec = [decorators.inject.getNode()], _addNodePipe_dec = [decorators.inject.addNodePipe()], _transform_dec = [decorators.inject.canvas.transform()], _guidelines_dec = [decorators.observable()], _draggingNodeId_dec = [decorators.observable()], _init_dec = [decorators.OnInit], _render_dec = [decorators.layer(core.Layer.Foreground)], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "guideline");
+    __publicField(this, "config", {
+      threshold: 4,
+      color: "#007ACC",
+      lineWidth: 1,
+      enabled: true,
+      enableSnap: true
+    });
+    __publicField(this, "nodes", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
+    __publicField(this, "container", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "addNodePipe", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "transform", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "guidelines", __runInitializers(_init, 28, this, [])), __runInitializers(_init, 31, this);
+    __publicField(this, "draggingNodeId", __runInitializers(_init, 32, this, null)), __runInitializers(_init, 35, this);
+  }
+  init(config = {}) {
+    this.config = __spreadValues(__spreadValues({}, this.config), config);
+    this.subscriptions.push(this.addNodePipe({
+      transform: () => (operation$) => {
+        return operation$.pipe(
+          operators.tap((operation) => {
+            if (core.isDraftOperation(operation) && operation.type === "draftOperation") {
+              this.handleDraftOperation(operation);
+            } else if (operation.type === "commitDraft" || operation.type === "discardDraft") {
+              this.clearGuidelines();
+            }
+          })
+        );
+      }
+    }));
+  }
+  handleDraftOperation(operation) {
+    if (!this.config.enabled) {
+      return;
+    }
+    if (operation.operation.type === "update" && operation.operation.data.position) {
+      const nodeId = operation.operation.id;
+      const newPosition = operation.operation.data.position;
+      this.draggingNodeId = nodeId;
+      const snapResult = this.calculateGuidelines(nodeId, newPosition);
+      if (this.config.enableSnap && snapResult.snapPosition) {
+        if (snapResult.snapPosition.x !== void 0) {
+          operation.operation.data.position.x = snapResult.snapPosition.x;
+        }
+        if (snapResult.snapPosition.y !== void 0) {
+          operation.operation.data.position.y = snapResult.snapPosition.y;
+        }
+      }
+    }
+  }
+  calculateGuidelines(draggingNodeId, newPosition) {
+    var _a2, _b, _c;
+    const guidelines = [];
+    const threshold = (_a2 = this.config.threshold) != null ? _a2 : 5;
+    const snapPosition = {};
+    const draggingNode = this.getNode({ id: draggingNodeId });
+    if (!draggingNode)
+      return { guidelines: [] };
+    const draggingWidth = ((_b = draggingNode.measured) == null ? void 0 : _b.width) || 0;
+    const draggingHeight = ((_c = draggingNode.measured) == null ? void 0 : _c.height) || 0;
+    const draggingLeft = newPosition.x;
+    const draggingRight = newPosition.x + draggingWidth;
+    const draggingCenterX = newPosition.x + draggingWidth / 2;
+    const draggingTop = newPosition.y;
+    const draggingBottom = newPosition.y + draggingHeight;
+    const draggingCenterY = newPosition.y + draggingHeight / 2;
+    let nearestXSnap;
+    let nearestYSnap;
+    this.nodes.forEach((node) => {
+      var _a3, _b2, _c2, _d;
+      if (node.id === draggingNodeId)
+        return;
+      const nodeLeft = node.position.x;
+      const nodeRight = node.position.x + (((_a3 = node.measured) == null ? void 0 : _a3.width) || 0);
+      const nodeCenterX = node.position.x + (((_b2 = node.measured) == null ? void 0 : _b2.width) || 0) / 2;
+      const nodeTop = node.position.y;
+      const nodeBottom = node.position.y + (((_c2 = node.measured) == null ? void 0 : _c2.height) || 0);
+      const nodeCenterY = node.position.y + (((_d = node.measured) == null ? void 0 : _d.height) || 0) / 2;
+      const checkVerticalSnap = (targetX, label, draggedX) => {
+        const distance = Math.abs(draggedX - targetX);
+        if (distance <= threshold) {
+          guidelines.push({
+            type: "vertical",
+            position: targetX,
+            label
+          });
+          const newX = targetX - (draggedX - newPosition.x);
+          if (!nearestXSnap || distance < nearestXSnap.distance) {
+            nearestXSnap = { distance, position: targetX, newX };
+          }
+        }
+      };
+      const checkHorizontalSnap = (targetY, label, draggedY) => {
+        const distance = Math.abs(draggedY - targetY);
+        if (distance <= threshold) {
+          guidelines.push({
+            type: "horizontal",
+            position: targetY,
+            label
+          });
+          const newY = targetY - (draggedY - newPosition.y);
+          if (!nearestYSnap || distance < nearestYSnap.distance) {
+            nearestYSnap = { distance, position: targetY, newY };
+          }
+        }
+      };
+      checkVerticalSnap(nodeLeft, "left", draggingLeft);
+      checkVerticalSnap(nodeRight, "right", draggingRight);
+      checkVerticalSnap(nodeCenterX, "center", draggingCenterX);
+      checkVerticalSnap(nodeRight, "edge", draggingLeft);
+      checkVerticalSnap(nodeLeft, "edge", draggingRight);
+      checkHorizontalSnap(nodeTop, "top", draggingTop);
+      checkHorizontalSnap(nodeBottom, "bottom", draggingBottom);
+      checkHorizontalSnap(nodeCenterY, "center", draggingCenterY);
+      checkHorizontalSnap(nodeBottom, "edge", draggingTop);
+      checkHorizontalSnap(nodeTop, "edge", draggingBottom);
+    });
+    const uniqueGuidelines = guidelines.filter((guideline, index) => {
+      return guidelines.findIndex(
+        (g) => g.type === guideline.type && Math.abs(g.position - guideline.position) < 1
+      ) === index;
+    });
+    if (nearestXSnap) {
+      snapPosition.x = nearestXSnap.newX;
+    }
+    if (nearestYSnap) {
+      snapPosition.y = nearestYSnap.newY;
+    }
+    this.guidelines = uniqueGuidelines;
+    return {
+      guidelines: uniqueGuidelines,
+      snapPosition: Object.keys(snapPosition).length > 0 ? snapPosition : void 0
+    };
+  }
+  clearGuidelines() {
+    this.guidelines = [];
+    this.draggingNodeId = null;
+  }
+  render() {
+    const { guidelines, transform, config } = core.use(() => ({
+      guidelines: this.guidelines,
+      transform: this.transform,
+      config: this.config
+    }));
+    if (!config.enabled || guidelines.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: core.bem("guideline", "container"), children: guidelines.map((guideline, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: core.bem("guideline", "line", guideline.type),
+        style: __spreadValues({
+          position: "absolute",
+          backgroundColor: config.color,
+          pointerEvents: "none"
+        }, guideline.type === "vertical" ? {
+          left: guideline.position * transform.scale + transform.positionX,
+          top: 0,
+          width: config.lineWidth,
+          height: this.container.height
+        } : {
+          left: 0,
+          top: guideline.position * transform.scale + transform.positionY,
+          width: this.container.width,
+          height: config.lineWidth
+        })
+      },
+      `${guideline.type}-${guideline.position}-${index}`
+    )) });
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Guideline);
+__decorateElement(_init, 1, "render", _render_dec, Guideline);
+__decorateElement(_init, 5, "nodes", _nodes_dec, Guideline);
+__decorateElement(_init, 5, "container", _container_dec, Guideline);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Guideline);
+__decorateElement(_init, 5, "addNodePipe", _addNodePipe_dec, Guideline);
+__decorateElement(_init, 5, "transform", _transform_dec, Guideline);
+__decorateElement(_init, 5, "guidelines", _guidelines_dec, Guideline);
+__decorateElement(_init, 5, "draggingNodeId", _draggingNodeId_dec, Guideline);
+__decoratorMetadata(_init, Guideline);
+
+exports.Guideline = Guideline;

package/dist/index.d.cts

@@ -0,0 +1,60 @@
+import { BasePlugin } from '@knotx/core';
+
+interface GuidelineConfig {
+    /**
+     * 对齐阈值（像素）
+     * @default 4
+     */
+    threshold?: number;
+    /**
+     * 辅助线颜色
+     * @default '#007ACC'
+     */
+    color?: string;
+    /**
+     * 辅助线宽度
+     * @default 1
+     */
+    lineWidth?: number;
+    /**
+     * 是否启用
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * 是否启用自动吸附
+     * @default true
+     */
+    enableSnap?: boolean;
+}
+interface GuidelineItem {
+    type: 'vertical' | 'horizontal';
+    position: number;
+    label?: string;
+}
+declare module '@knotx/core' {
+    interface PluginData {
+        guideline: {
+            guidelines: GuidelineItem[];
+            enabled: boolean;
+        };
+    }
+}
+declare class Guideline extends BasePlugin<'guideline', GuidelineConfig> {
+    name: "guideline";
+    private config;
+    private nodes;
+    private container;
+    private getNode;
+    private addNodePipe;
+    private transform;
+    guidelines: GuidelineItem[];
+    draggingNodeId: string | null;
+    init(config?: GuidelineConfig): void;
+    private handleDraftOperation;
+    private calculateGuidelines;
+    private clearGuidelines;
+    render(): JSX.Element | null;
+}
+
+export { Guideline, type GuidelineConfig };

package/dist/index.d.mts

@@ -0,0 +1,60 @@
+import { BasePlugin } from '@knotx/core';
+
+interface GuidelineConfig {
+    /**
+     * 对齐阈值（像素）
+     * @default 4
+     */
+    threshold?: number;
+    /**
+     * 辅助线颜色
+     * @default '#007ACC'
+     */
+    color?: string;
+    /**
+     * 辅助线宽度
+     * @default 1
+     */
+    lineWidth?: number;
+    /**
+     * 是否启用
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * 是否启用自动吸附
+     * @default true
+     */
+    enableSnap?: boolean;
+}
+interface GuidelineItem {
+    type: 'vertical' | 'horizontal';
+    position: number;
+    label?: string;
+}
+declare module '@knotx/core' {
+    interface PluginData {
+        guideline: {
+            guidelines: GuidelineItem[];
+            enabled: boolean;
+        };
+    }
+}
+declare class Guideline extends BasePlugin<'guideline', GuidelineConfig> {
+    name: "guideline";
+    private config;
+    private nodes;
+    private container;
+    private getNode;
+    private addNodePipe;
+    private transform;
+    guidelines: GuidelineItem[];
+    draggingNodeId: string | null;
+    init(config?: GuidelineConfig): void;
+    private handleDraftOperation;
+    private calculateGuidelines;
+    private clearGuidelines;
+    render(): JSX.Element | null;
+}
+
+export { Guideline, type GuidelineConfig };

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+import { BasePlugin } from '@knotx/core';
+
+interface GuidelineConfig {
+    /**
+     * 对齐阈值（像素）
+     * @default 4
+     */
+    threshold?: number;
+    /**
+     * 辅助线颜色
+     * @default '#007ACC'
+     */
+    color?: string;
+    /**
+     * 辅助线宽度
+     * @default 1
+     */
+    lineWidth?: number;
+    /**
+     * 是否启用
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * 是否启用自动吸附
+     * @default true
+     */
+    enableSnap?: boolean;
+}
+interface GuidelineItem {
+    type: 'vertical' | 'horizontal';
+    position: number;
+    label?: string;
+}
+declare module '@knotx/core' {
+    interface PluginData {
+        guideline: {
+            guidelines: GuidelineItem[];
+            enabled: boolean;
+        };
+    }
+}
+declare class Guideline extends BasePlugin<'guideline', GuidelineConfig> {
+    name: "guideline";
+    private config;
+    private nodes;
+    private container;
+    private getNode;
+    private addNodePipe;
+    private transform;
+    guidelines: GuidelineItem[];
+    draggingNodeId: string | null;
+    init(config?: GuidelineConfig): void;
+    private handleDraftOperation;
+    private calculateGuidelines;
+    private clearGuidelines;
+    render(): JSX.Element | null;
+}
+
+export { Guideline, type GuidelineConfig };

package/dist/index.js

@@ -0,0 +1,260 @@
+import { jsx } from '@knotx/jsx/jsx-runtime';
+import { Layer, isDraftOperation, use, bem, BasePlugin } from '@knotx/core';
+import { inject, observable, layer, OnInit } from '@knotx/decorators';
+import { tap } from 'rxjs/operators';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _init_dec, _draggingNodeId_dec, _guidelines_dec, _transform_dec, _addNodePipe_dec, _getNode_dec, _container_dec, _nodes_dec, _a, _init;
+class Guideline extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _container_dec = [inject.container()], _getNode_dec = [inject.getNode()], _addNodePipe_dec = [inject.addNodePipe()], _transform_dec = [inject.canvas.transform()], _guidelines_dec = [observable()], _draggingNodeId_dec = [observable()], _init_dec = [OnInit], _render_dec = [layer(Layer.Foreground)], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "guideline");
+    __publicField(this, "config", {
+      threshold: 4,
+      color: "#007ACC",
+      lineWidth: 1,
+      enabled: true,
+      enableSnap: true
+    });
+    __publicField(this, "nodes", __runInitializers(_init, 8, this, [])), __runInitializers(_init, 11, this);
+    __publicField(this, "container", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "addNodePipe", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "transform", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "guidelines", __runInitializers(_init, 28, this, [])), __runInitializers(_init, 31, this);
+    __publicField(this, "draggingNodeId", __runInitializers(_init, 32, this, null)), __runInitializers(_init, 35, this);
+  }
+  init(config = {}) {
+    this.config = __spreadValues(__spreadValues({}, this.config), config);
+    this.subscriptions.push(this.addNodePipe({
+      transform: () => (operation$) => {
+        return operation$.pipe(
+          tap((operation) => {
+            if (isDraftOperation(operation) && operation.type === "draftOperation") {
+              this.handleDraftOperation(operation);
+            } else if (operation.type === "commitDraft" || operation.type === "discardDraft") {
+              this.clearGuidelines();
+            }
+          })
+        );
+      }
+    }));
+  }
+  handleDraftOperation(operation) {
+    if (!this.config.enabled) {
+      return;
+    }
+    if (operation.operation.type === "update" && operation.operation.data.position) {
+      const nodeId = operation.operation.id;
+      const newPosition = operation.operation.data.position;
+      this.draggingNodeId = nodeId;
+      const snapResult = this.calculateGuidelines(nodeId, newPosition);
+      if (this.config.enableSnap && snapResult.snapPosition) {
+        if (snapResult.snapPosition.x !== void 0) {
+          operation.operation.data.position.x = snapResult.snapPosition.x;
+        }
+        if (snapResult.snapPosition.y !== void 0) {
+          operation.operation.data.position.y = snapResult.snapPosition.y;
+        }
+      }
+    }
+  }
+  calculateGuidelines(draggingNodeId, newPosition) {
+    var _a2, _b, _c;
+    const guidelines = [];
+    const threshold = (_a2 = this.config.threshold) != null ? _a2 : 5;
+    const snapPosition = {};
+    const draggingNode = this.getNode({ id: draggingNodeId });
+    if (!draggingNode)
+      return { guidelines: [] };
+    const draggingWidth = ((_b = draggingNode.measured) == null ? void 0 : _b.width) || 0;
+    const draggingHeight = ((_c = draggingNode.measured) == null ? void 0 : _c.height) || 0;
+    const draggingLeft = newPosition.x;
+    const draggingRight = newPosition.x + draggingWidth;
+    const draggingCenterX = newPosition.x + draggingWidth / 2;
+    const draggingTop = newPosition.y;
+    const draggingBottom = newPosition.y + draggingHeight;
+    const draggingCenterY = newPosition.y + draggingHeight / 2;
+    let nearestXSnap;
+    let nearestYSnap;
+    this.nodes.forEach((node) => {
+      var _a3, _b2, _c2, _d;
+      if (node.id === draggingNodeId)
+        return;
+      const nodeLeft = node.position.x;
+      const nodeRight = node.position.x + (((_a3 = node.measured) == null ? void 0 : _a3.width) || 0);
+      const nodeCenterX = node.position.x + (((_b2 = node.measured) == null ? void 0 : _b2.width) || 0) / 2;
+      const nodeTop = node.position.y;
+      const nodeBottom = node.position.y + (((_c2 = node.measured) == null ? void 0 : _c2.height) || 0);
+      const nodeCenterY = node.position.y + (((_d = node.measured) == null ? void 0 : _d.height) || 0) / 2;
+      const checkVerticalSnap = (targetX, label, draggedX) => {
+        const distance = Math.abs(draggedX - targetX);
+        if (distance <= threshold) {
+          guidelines.push({
+            type: "vertical",
+            position: targetX,
+            label
+          });
+          const newX = targetX - (draggedX - newPosition.x);
+          if (!nearestXSnap || distance < nearestXSnap.distance) {
+            nearestXSnap = { distance, position: targetX, newX };
+          }
+        }
+      };
+      const checkHorizontalSnap = (targetY, label, draggedY) => {
+        const distance = Math.abs(draggedY - targetY);
+        if (distance <= threshold) {
+          guidelines.push({
+            type: "horizontal",
+            position: targetY,
+            label
+          });
+          const newY = targetY - (draggedY - newPosition.y);
+          if (!nearestYSnap || distance < nearestYSnap.distance) {
+            nearestYSnap = { distance, position: targetY, newY };
+          }
+        }
+      };
+      checkVerticalSnap(nodeLeft, "left", draggingLeft);
+      checkVerticalSnap(nodeRight, "right", draggingRight);
+      checkVerticalSnap(nodeCenterX, "center", draggingCenterX);
+      checkVerticalSnap(nodeRight, "edge", draggingLeft);
+      checkVerticalSnap(nodeLeft, "edge", draggingRight);
+      checkHorizontalSnap(nodeTop, "top", draggingTop);
+      checkHorizontalSnap(nodeBottom, "bottom", draggingBottom);
+      checkHorizontalSnap(nodeCenterY, "center", draggingCenterY);
+      checkHorizontalSnap(nodeBottom, "edge", draggingTop);
+      checkHorizontalSnap(nodeTop, "edge", draggingBottom);
+    });
+    const uniqueGuidelines = guidelines.filter((guideline, index) => {
+      return guidelines.findIndex(
+        (g) => g.type === guideline.type && Math.abs(g.position - guideline.position) < 1
+      ) === index;
+    });
+    if (nearestXSnap) {
+      snapPosition.x = nearestXSnap.newX;
+    }
+    if (nearestYSnap) {
+      snapPosition.y = nearestYSnap.newY;
+    }
+    this.guidelines = uniqueGuidelines;
+    return {
+      guidelines: uniqueGuidelines,
+      snapPosition: Object.keys(snapPosition).length > 0 ? snapPosition : void 0
+    };
+  }
+  clearGuidelines() {
+    this.guidelines = [];
+    this.draggingNodeId = null;
+  }
+  render() {
+    const { guidelines, transform, config } = use(() => ({
+      guidelines: this.guidelines,
+      transform: this.transform,
+      config: this.config
+    }));
+    if (!config.enabled || guidelines.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: bem("guideline", "container"), children: guidelines.map((guideline, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: bem("guideline", "line", guideline.type),
+        style: __spreadValues({
+          position: "absolute",
+          backgroundColor: config.color,
+          pointerEvents: "none"
+        }, guideline.type === "vertical" ? {
+          left: guideline.position * transform.scale + transform.positionX,
+          top: 0,
+          width: config.lineWidth,
+          height: this.container.height
+        } : {
+          left: 0,
+          top: guideline.position * transform.scale + transform.positionY,
+          width: this.container.width,
+          height: config.lineWidth
+        })
+      },
+      `${guideline.type}-${guideline.position}-${index}`
+    )) });
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Guideline);
+__decorateElement(_init, 1, "render", _render_dec, Guideline);
+__decorateElement(_init, 5, "nodes", _nodes_dec, Guideline);
+__decorateElement(_init, 5, "container", _container_dec, Guideline);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Guideline);
+__decorateElement(_init, 5, "addNodePipe", _addNodePipe_dec, Guideline);
+__decorateElement(_init, 5, "transform", _transform_dec, Guideline);
+__decorateElement(_init, 5, "guidelines", _guidelines_dec, Guideline);
+__decorateElement(_init, 5, "draggingNodeId", _draggingNodeId_dec, Guideline);
+__decoratorMetadata(_init, Guideline);
+
+export { Guideline };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@knotx/plugins-guideline",
+  "version": "0.0.1",
+  "description": "Guideline Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-guideline"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@knotx/jsx": "0.4.15",
+    "@knotx/plugins-canvas": "0.4.15"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1",
+    "@knotx/core": "0.4.15",
+    "@knotx/decorators": "0.4.15"
+  },
+  "devDependencies": {
+    "@knotx/build-config": "0.4.15",
+    "@knotx/eslint-config": "0.4.15",
+    "@knotx/plugins-canvas": "0.4.15",
+    "@knotx/typescript-config": "0.4.15",
+    "@knotx/jsx": "0.4.15"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}