@easy-editor/plugin-dashboard NPM

@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

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:

{
  group: {
    // Component metadata for the group
    meta: ComponentMetadata;

    // Initial schema for new groups
    initSchema: NodeSchema;
  }
}