Window Manager

A lightweight and flexible window management library for organizing draggable and resizable windows in a web application.

🚀 Features

• ✥ Drag & Resize – Easily move and resize windows.
• 🔄 Sticky Mode – Suggest predefined sizes when snapping to corners.
• 💾 Save & Restore Configuration – Save window states and restore them later.
• ⚡ Optimized for Performance – Minimal overhead.

Simple Example Demo
A basic demonstration of the library's functionality.

Demo with iframe widgets
A more advanced demo showcasing iframe-based widgets.

📦 Installation

npm install window-manager
# or
yarn add window-manager

🚀 Usage

1️⃣ Basic Setup

Create root element:

<div id="wm"></div>

Import and initialize the WindowManager:

import { WindowManager } from 'window-manager';
import 'window-manager/style.css';

const root = document.querySelector('#wm') as HTMLElement;
const schema = [
  {
    title: 'My window',
    name: 'myWindow',
    width: 50,
    height: 50,
    position: [20, 20],
    isClosable: true,
    ctor: (window, container, schema) => {
      const element = document.createElement('div');
      container.appendChild(element);
    },
  },
];

const wm = new WindowManager(root, schema);

wm.init();

2️⃣ Advanced Setup

Create root element:

<div id="wm"></div>

Import and initialize the WindowManager:

import { WindowManager } from 'window-manager';
import 'window-manager/style.css';

const root = document.querySelector('#wm') as HTMLElement;
const schema = [
  {
    title: 'My window',
    name: 'myWindow',
    width: 50,
    height: 50,
    position: [20, 20],
    isClosable: true,
    props: {
      myProp: 'My first window',
    },
  },
];

const wm = new WindowManager(root, schema);

wm.registerConstructor('myWindow', (window, container, schema) => {
  const element = document.createElement('div');
  if (typeof schema.props?.myProp === 'string') {
    element.innerText = schema.props.myProp;
  }
  container.appendChild(element);
});

wm.init();

⚙️ Configuration Options

WindowManagerOptions

You can customize WindowManager behavior by passing an options object when initializing it.

{
  snapThreshold?: number;
  minWindowWidth?: number;
  minWindowHeight?: number;
}

Option	Type	Default	Description
snapThreshold	number	20	Defines the distance (in pixels) within which a window will snap to predefined positions when dragged.
minWindowWidth	number	10	The minimum allowed width for a window (in percent).
minWindowHeight	number	10	The minimum allowed height for a window (in percent).

WindowSchema

Each window is represented as an object following this schema:

{
  title: string;
  name: string;
  width: number;
  height: number;
  position: [number, number];
  isClosable?: boolean;
  isExpandable?: boolean;
  ctor?: ContentCtor;
  props?: Record<string, unknown>;
}

Property	Type	Default	Description
title	string		The display title of the window.
name	string		A unique identifier for the window.
width	number		The initial width of the window (in percent).
height	number		The initial height of the window (in percent).
position	[number, number]		The [x, y] coordinates for the window's initial position (in percent).
isClosable	boolean (optional)	true	If true, the window can be closed by the user.
isExpandable	boolean (optional)	true	If true, the window can be maximized.
ctor	ContentCtor (optional)		A constructor for the window content component.
props	Record<string, unknown> (optional)		Custom properties passed to the content component.

📢 Event Listeners

You can subscribe to the following events for WindowManager and WmWindow to handle user interactions dynamically.

🏠 Window Events

• window:close – Triggered when a window is closed.
• window:select – Fired when a window is selected.
• window:expand – Emitted when a window is expanded.

🎯 Drag Events

• drag:start – Fires when dragging starts.
• drag – Continuously emitted while dragging.
• drag:end – Fires when dragging ends.

📏 Resize Events

• resize:start – Fires when resizing starts.
• resize – Continuously emitted while resizing.
• resize:end – Fires when resizing ends.

📌 Usage Example

To listen for an event, use:

wm.on(Events.DragStart, (event) => {
  console.log('Dragging started:', event);
});

// OR

wm.registerConstructor('myWindow', (window, container, schema) => {
  const element = document.createElement('div');
  window.on(Events.DragStart, (event) => {
    console.log('Dragging started:', event);
  });
  container.appendChild(element);
});