@lgs1920/widgetizer

A framework independent widget transformation and interaction component.
Build canvas editors with selection, geometry, actions, and a controlled event model.

Live demo · Specifications · npm · Repository

The current release is 0.1.0.

@lgs1920/widgetizer is the foundation for the LGS1920 widget editor. The package keeps widget geometry and selection serializable, exposes namespaced DOM events, and provides an optional React adapter. The host application owns widget persistence, commands, undo/redo, and context menu rendering.

Installation

bun add @lgs1920/widgetizer

Register the custom element through the package entry point:

import '@lgs1920/widgetizer'
import '@lgs1920/widgetizer/styles.css'

Quick start

<div id="canvas" class="canvas">
    <lgs1920-widgetizer id="widgetizer" aria-label="Widget editor"></lgs1920-widgetizer>
</div>

const widgetizer = document.querySelector('#widgetizer')

widgetizer.widgets = [
    {
        id: 'title',
        type: 'text',
        geometry: {
            x: 120,
            y: 80,
            width: 400,
            height: 180,
            rotation: 0,
            scaleX: 1,
            scaleY: 1,
        },
    },
]

widgetizer.selection = ['title']

widgetizer.addEventListener('lgs1920-widgetizer-interaction-commit', event => {
    saveGeometry(event.detail)
})

widgetizer.request('rotate', 'title', {rotation: 15})

Current foundation

The initial package establishes:

• the lgs1920-widgetizer custom element
• serializable widget geometry
• controlled widget and selection properties
• programmatic move, resize, scale, rotate, and reset operations
• transaction oriented commit events
• an optional React adapter
• package build, test, lint, pack, and public npm publication scripts

Pointer handles, keyboard transformations, snapping, group operations, and the complete Studio adapter are specified and will be implemented in successive phases. See the specification.

React adapter

import {Widgetizer} from '@lgs1920/widgetizer/react'

<Widgetizer
    widgets={widgets}
    selection={selection}
    onSelectionChange={event => setSelection(event.selection)}
    onInteractionCommit={event => saveGeometry(event)}
/>

License

MIT. See LICENSE.md.