Element Editor

A lightweight, plugin-based element editor for drag, resize, and tooltip interactions.

Installation

npm

npm install @alsandre/element-editor

CDN

<script src="https://unpkg.com/@alsandre/element-editor/dist/element-editor.min.js"></script>

Quick Start

npm Usage

import {BannerEditor, DragPlugin, ResizePlugin, TooltipPlugin} from "@alsandre/element-editor";

const editor = new BannerEditor(element, container).use(DragPlugin).use(ResizePlugin).use(TooltipPlugin);

// Or use the convenience function
import {createEditor} from "@alsandre/element-editor";
const editor = createEditor(element, container);

CDN Usage

<script>
  const editor = new ElementEditor.BannerEditor(element, container).use(ElementEditor.DragPlugin).use(ElementEditor.ResizePlugin).use(ElementEditor.TooltipPlugin);
</script>

Events

editor.on("dragEnd", (data) => console.log("Position:", data.x, data.y));
editor.on("resizeActive", (data) => console.log("Size:", data.width, data.height));

Development Notes

Development Progress

• ✅ setup html structure for preview and form (VERY SIMPLE)
• ✅ setup form to preview sync
• ✅ make preview box draggable
• ✅ bind form to box
• ✅ restrict ad box from moving out of preview container
• ✅ decompose drag event
• ✅ add resize handler
• ✅ I decided to use existing drag system for resize, but it does not work as expected.
• ✅ I need to decompose the drag event and add a resize event.
• ✅ finetune and update dragcore and apply updates to main script
• ✅ need to finilize the resize handler
• ✅ add resizer to the top left corner
• ✅ add resizer to the right center
• ✅ add resizer to the remaining points
• ✅ fix resize jump issue (canvas coordinate system mismatch)
• ✅ add width and height input to form
• ✅ sync form and preview
• ✅ refactor handle types to compass directions (se, nw, e, etc.)
• ✅ standardize handle positioning logic between static and resize states
• ✅ convert to plugin architecture (BannerEditor core + DragPlugin, ResizePlugin, TooltipPlugin)
• ✅ update functions section to use plugin system instead of direct object references
• ✅ clean up legacy files and streamline script.js functions
• ✅ package for npm and CDN distribution (element-editor)

Handle Type Conversion Table

Refactoring handle types from descriptive names to compass directions for cleaner code and direct CSS cursor mapping.

| Current | New | CSS Cursor | | --------------- | ---- | ----------- | | bottom-right | se | se-resize | | top-left | nw | nw-resize | | top-right | ne | ne-resize | | bottom-left | sw | sw-resize | | right-center | e | e-resize | | left-center | w | w-resize | | top-center | n | n-resize | | bottom-center | s | s-resize |