@easy-editor/plugin-dashboard 1.0.2 → 1.0.3

package/LICENSE

@@ -1,9 +1,9 @@
-MIT License
-
-Copyright © 2024-PRESENT JinSo <https://github.com/JinSooo>
-
-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.
+MIT License
+
+Copyright © 2024-PRESENT JinSo <https://github.com/JinSooo>
+
+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.md

@@ -1,123 +1,123 @@
-# @easy-editor/plugin-dashboard
-
-Dashboard plugin for EasyEditor. This plugin provides dashboard functionality for managing elements on a canvas-like editor interface, with features like:
-
-- Element positioning and drag-and-drop
-- Grouping and ungrouping elements
-- Element layering (move to top, bottom, etc.)
-- Guidelines and element alignment
-- Visual feedback and layout management
-
-## Features
-
-### Positioning and Movement
-
-The dashboard plugin handles precise positioning of elements on your canvas with:
-
-- Drag-and-drop movement with position tracking
-- Automatic alignment guides with element snapping
-- Coordinate-based positioning with `x`, `y`, `width`, and `height` properties
-
-### Element Grouping
-
-Easily organize your design by grouping elements together:
-
-| Action | Description |
-|--------|-------------|
-| Group Elements | Combine multiple elements into a single manageable group |
-| Ungroup | Split a group back into individual elements |
-| Nested Groups | Support for groups within groups |
-
-### Element Layering
-
-Control the stacking order of elements on your dashboard:
-
-| Method | Description |
-|--------|-------------|
-| `levelTop()` | Move element to the front |
-| `levelBottom()` | Send element to the back |
-| `levelUp()` | Move element up one layer |
-| `levelDown()` | Move element down one layer |
-| `moveToLevel(level)` | Move element to a specific layer |
-
-### Guide Lines
-
-The plugin provides smart guide lines that help with precise element alignment:
-
-- Automatic alignment to element edges and centers
-- Configurable guide lines at specific positions
-- Visual feedback during element movement
-
-## Usage Example
-
-```typescript
-import { DashboardPlugin } from '@easy-editor/plugin-dashboard';
-
-// Define your group component metadata
-const groupMeta = {
-  componentName: 'Group',
-  title: 'Group',
-  category: 'inner',
-  configure: {
-    advanced: {
-      view: GroupComponent
-    }
-  }
-};
-
-// Initialize the plugin with required configuration
-DashboardPlugin({
-  group: {
-    meta: groupMeta,
-    initSchema: {
-      componentName: 'Group',
-      title: 'Group',
-      isGroup: true,
-    },
-  }
-})
-```
-
-## Configuration Options
-
-The plugin accepts a configuration object with the following properties:
-
-### Group Component
-
-The `group` property is required and defines how groups will be handled in the dashboard:
-
-```typescript
-{
-  group: {
-    // Component metadata for the group
-    meta: ComponentMetadata;
-
-    // Initial schema for new groups
-    initSchema: NodeSchema;
-  }
-}
-```
-
-## API Extensions
-
-The dashboard plugin extends several core interfaces with additional methods:
-
-### Document Extensions
-
-- `document.group(nodeIdList)` - Group multiple nodes together
-- `document.ungroup(group)` - Ungroup a group node
-
-### Node Extensions
-
-- `node.isGroup` - Boolean indicating if node is a group
-- `node.getDashboardRect()` - Get positioning rectangle
-- `node.updateDashboardRect(rect)` - Update positioning
-- `node.getNodesInGroup()` - Get direct child nodes in a group
-- `node.getAllNodesInGroup()` - Get all nested nodes in a group
-- `node.getCurrentGroup()` - Get immediate parent group
-- `node.getTopGroup()` - Get top-most parent group
-- `node.getAllGroups()` - Get all parent groups
-
-### Designer Extensions
-
-- `designer.guideline` - Access to guidelines functionality
+# @easy-editor/plugin-dashboard
+
+Dashboard plugin for EasyEditor. This plugin provides dashboard functionality for managing elements on a canvas-like editor interface, with features like:
+
+- Element positioning and drag-and-drop
+- Grouping and ungrouping elements
+- Element layering (move to top, bottom, etc.)
+- Guidelines and element alignment
+- Visual feedback and layout management
+
+## Features
+
+### Positioning and Movement
+
+The dashboard plugin handles precise positioning of elements on your canvas with:
+
+- Drag-and-drop movement with position tracking
+- Automatic alignment guides with element snapping
+- Coordinate-based positioning with `x`, `y`, `width`, and `height` properties
+
+### Element Grouping
+
+Easily organize your design by grouping elements together:
+
+| Action | Description |
+|--------|-------------|
+| Group Elements | Combine multiple elements into a single manageable group |
+| Ungroup | Split a group back into individual elements |
+| Nested Groups | Support for groups within groups |
+
+### Element Layering
+
+Control the stacking order of elements on your dashboard:
+
+| Method | Description |
+|--------|-------------|
+| `levelTop()` | Move element to the front |
+| `levelBottom()` | Send element to the back |
+| `levelUp()` | Move element up one layer |
+| `levelDown()` | Move element down one layer |
+| `moveToLevel(level)` | Move element to a specific layer |
+
+### Guide Lines
+
+The plugin provides smart guide lines that help with precise element alignment:
+
+- Automatic alignment to element edges and centers
+- Configurable guide lines at specific positions
+- Visual feedback during element movement
+
+## Usage Example
+
+```typescript
+import { DashboardPlugin } from '@easy-editor/plugin-dashboard';
+
+// Define your group component metadata
+const groupMeta = {
+  componentName: 'Group',
+  title: 'Group',
+  category: 'inner',
+  configure: {
+    advanced: {
+      view: GroupComponent
+    }
+  }
+};
+
+// Initialize the plugin with required configuration
+DashboardPlugin({
+  group: {
+    meta: groupMeta,
+    initSchema: {
+      componentName: 'Group',
+      title: 'Group',
+      isGroup: true,
+    },
+  }
+})
+```
+
+## Configuration Options
+
+The plugin accepts a configuration object with the following properties:
+
+### Group Component
+
+The `group` property is required and defines how groups will be handled in the dashboard:
+
+```typescript
+{
+  group: {
+    // Component metadata for the group
+    meta: ComponentMetadata;
+
+    // Initial schema for new groups
+    initSchema: NodeSchema;
+  }
+}
+```
+
+## API Extensions
+
+The dashboard plugin extends several core interfaces with additional methods:
+
+### Document Extensions
+
+- `document.group(nodeIdList)` - Group multiple nodes together
+- `document.ungroup(group)` - Ungroup a group node
+
+### Node Extensions
+
+- `node.isGroup` - Boolean indicating if node is a group
+- `node.getDashboardRect()` - Get positioning rectangle
+- `node.updateDashboardRect(rect)` - Update positioning
+- `node.getNodesInGroup()` - Get direct child nodes in a group
+- `node.getAllNodesInGroup()` - Get all nested nodes in a group
+- `node.getCurrentGroup()` - Get immediate parent group
+- `node.getTopGroup()` - Get top-most parent group
+- `node.getAllGroups()` - Get all parent groups
+
+### Designer Extensions
+
+- `designer.guideline` - Access to guidelines functionality

package/dist/designer/alignment.d.ts

@@ -0,0 +1,55 @@
+import type { Designer } from '@easy-editor/core';
+/**
+ * 对齐类型枚举
+ */
+export declare enum AlignType {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top",
+    BOTTOM = "bottom",
+    HORIZONTAL_CENTER = "horizontalCenter",
+    VERTICAL_CENTER = "verticalCenter"
+}
+/**
+ * 分布类型枚举
+ */
+export declare enum DistributeType {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+/**
+ * 多组件对齐功能类
+ */
+export declare class Alignment {
+    readonly designer: Designer;
+    constructor(designer: Designer);
+    get selection(): import("@easy-editor/core").Selection;
+    /**
+     * 获取选中节点（排除 root）
+     */
+    private getSelectedNodes;
+    /**
+     * 计算选中组件的包围盒
+     */
+    private calculateBoundingBox;
+    /**
+     * 更新节点位置（支持 Group）
+     */
+    private updateNodePosition;
+    /**
+     * 执行对齐操作
+     */
+    align(type: AlignType): boolean;
+    /**
+     * 执行分布操作
+     */
+    distribute(type: DistributeType): boolean;
+    alignLeft: () => boolean;
+    alignRight: () => boolean;
+    alignTop: () => boolean;
+    alignBottom: () => boolean;
+    alignHorizontalCenter: () => boolean;
+    alignVerticalCenter: () => boolean;
+    distributeHorizontal: () => boolean;
+    distributeVertical: () => boolean;
+}

package/dist/designer/guideline.d.ts

@@ -5,6 +5,14 @@ interface GuideLineItem {
     type: GuideLineType;
     position: number;
 }
+/**
+ * 用户辅助线项（从游尺添加）
+ */
+export interface UserGuideLineItem {
+    id: string;
+    type: GuideLineType;
+    position: number;
+}
 interface AlignmentLine {
     type: GuideLineType;
     position: number;
@@ -19,6 +27,32 @@ interface AdsorptionLine {
     adsorption: number;
     position: number;
 }
+/**
+ * 距离线段信息（用于渲染组件间的距离指示器）
+ */
+export interface DistanceSegment {
+    /** 距离值（像素） */
+    distance: number;
+    /** 线段起点坐标 */
+    start: number;
+    /** 线段终点坐标 */
+    end: number;
+    /** 线段的固定坐标位置（垂直距离线段的 x 坐标，水平距离线段的 y 坐标） */
+    fixedPos: number;
+    /** 标签中心位置 */
+    labelPos: number;
+}
+/**
+ * 吸附辅助线信息（带距离标签）
+ */
+export interface AdsorptionLineInfo {
+    /** 辅助线位置 */
+    position: number;
+    /** 辅助线类型 */
+    type: 'vertical' | 'horizontal';
+    /** 距离线段列表（可能有多个方向的距离） */
+    distanceSegments?: DistanceSegment[];
+}
 export declare class GuideLine {
     readonly designer: Designer;
     /**
@@ -47,6 +81,18 @@ export declare class GuideLine {
         verticalLines: Set<number>;
         horizontalLines: Set<number>;
     };
+    /**
+     * 带距离标签的吸附辅助线信息
+     */
+    accessor adsorptionLinesWithDistance: AdsorptionLineInfo[];
+    /**
+     * 用户辅助线（从游尺添加）
+     */
+    accessor userGuideLines: UserGuideLineItem[];
+    /**
+     * 用户辅助线 ID 计数器
+     */
+    private userGuideLineIdCounter;
     get currentDocument(): import("@easy-editor/core").Document | undefined;
     constructor(designer: Designer);
     /**
@@ -61,6 +107,29 @@ export declare class GuideLine {
      * 修改辅助线
      */
     updateGuideLine(id: string, guideLine: GuideLineItem): void;
+    /**
+     * 获取用户辅助线的计算映射
+     */
+    get userGuideLinesMap(): {
+        verticalLinesMap: Map<number, UserGuideLineItem>;
+        horizontalLinesMap: Map<number, UserGuideLineItem>;
+    };
+    /**
+     * 添加用户辅助线（从游尺添加）
+     */
+    addUserGuideLine(type: GuideLineType, position: number): UserGuideLineItem;
+    /**
+     * 更新用户辅助线位置
+     */
+    updateUserGuideLine(id: string, position: number): void;
+    /**
+     * 删除用户辅助线
+     */
+    removeUserGuideLine(id: string): void;
+    /**
+     * 清空所有用户辅助线
+     */
+    clearUserGuideLines(): void;
     /**
      * 计算页面组件的辅助线信息
      */
@@ -69,6 +138,11 @@ export declare class GuideLine {
      * 组件的吸附距离
      */
     private adsorptionSize;
+    /**
+     * 距离线段显示的最大距离阈值
+     * 只有当组件间距离在 [adsorptionSize, maxDistanceDisplay] 范围内才显示距离线段
+     */
+    private maxDistanceDisplay;
     /**
      * 设置画布上要实时展示的对齐辅助线，返回要吸附的距离
      * @param rect 为拖动过程中组件的位置信息
@@ -82,5 +156,24 @@ export declare class GuideLine {
         adsorb: Record<"x" | "y", AdsorptionLine | undefined>;
     };
     resetAdsorptionLines(): void;
+    /**
+     * 计算垂直辅助线上的距离线段（当前组件与对齐组件之间的垂直距离）
+     * 返回所有方向的距离线段
+     */
+    private calculateVerticalLineSegments;
+    /**
+     * 计算水平辅助线上的距离线段（当前组件与对齐组件之间的水平距离）
+     * 返回所有方向的距离线段
+     */
+    private calculateHorizontalLineSegments;
+    /**
+     * 获取所有选中节点的 ID（包括组合内的节点）
+     */
+    private getSelectedNodeIds;
+    /**
+     * 判断距离是否在显示范围内
+     * 范围：[adsorptionSize, maxDistanceDisplay]
+     */
+    private isDistanceInDisplayRange;
 }
 export {};

package/dist/designer/marquee-selection.d.ts

@@ -0,0 +1,38 @@
+import { type Designer, type Viewport } from '@easy-editor/core';
+export interface MarqueeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MarqueeEvent {
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+    rect: MarqueeRect;
+    isCtrlPressed: boolean;
+}
+/**
+ * 框选引擎
+ * 用于在画布空白区域拖拽框选多个组件
+ */
+export declare class MarqueeSelection {
+    readonly designer: Designer;
+    private emitter;
+    private isMarqueeSelecting;
+    enabled: boolean;
+    constructor(designer: Designer);
+    isSelecting(): boolean;
+    /**
+     * 绑定框选事件到指定元素
+     * @param shell 画布容器元素
+     * @param viewport 视口对象，用于坐标转换
+     * @param isClickOnNode 检测点击是否在节点上的函数
+     */
+    from(shell: HTMLElement, viewport: Viewport, isClickOnNode: (target: Element) => boolean): () => void;
+    onMarqueeStart(func: (evt: MarqueeEvent) => void): () => void;
+    onMarquee(func: (evt: MarqueeEvent) => void): () => void;
+    onMarqueeEnd(func: (evt: MarqueeEvent) => void): () => void;
+    private getMasterSensors;
+}