XE TLDraw Window Manager

A window manager library for tldraw that enables building web-based desktop environments. This library extends tldraw with custom window shapes that behave like traditional desktop windows.

Features

✅ Implemented (Phase 1-3)

• Custom Window Shape: Fully functional window shape for tldraw
• Window Chrome: Title bar with close, minimize, and maximize buttons
• Window Management:
  • Drag windows by title bar
  • Resize windows from edges and corners
  • Window state management (normal, minimized, maximized)
  • Active window focus management
  • Z-index stacking
• Theme System:
  • Built-in themes: Default, macOS, Windows 11
  • Swappable themes with complete customization
  • Theme-specific metrics and colors

🚧 Planned Features (Phase 4-5)

• Window snapping to edges/other windows
• Window animations and transitions
• Workspace/virtual desktop support
• Window grouping and tabbing
• Taskbar/dock integration hooks
• Window shadows and effects
• Multi-monitor support simulation
• Window content embedding system
• Keyboard shortcuts for window management
• Window state persistence

Installation

npm install xe-tldraw-window-manager

Usage

import { Tldraw } from '@tldraw/tldraw'
import { WindowShapeUtil, themes } from 'xe-tldraw-window-manager'
import '@tldraw/tldraw/tldraw.css'

// Add the window shape to your tldraw instance
const customShapeUtils = [WindowShapeUtil]

function App() {
  return (
    <Tldraw shapeUtils={customShapeUtils}>
      {/* Your app content */}
    </Tldraw>
  )
}

Creating Windows

import { createShapeId } from '@tldraw/tldraw'

// Inside your tldraw component
const createWindow = (editor) => {
  editor.createShape({
    id: createShapeId(),
    type: 'window',
    x: 100,
    y: 100,
    props: {
      w: 400,
      h: 300,
      title: 'My Window',
      themeId: 'default',
      isActive: true,
      state: 'normal',
      resizable: true,
      closable: true,
      minimizable: true,
      maximizable: true
    }
  })
}

Themes

The library includes three built-in themes:

• default: Dark theme inspired by modern IDEs
• macos: macOS-style window theme
• windows11: Windows 11-style window theme

Using Themes

import { themes, getTheme } from 'xe-tldraw-window-manager'

// Get all available themes
const allThemes = Object.values(themes)

// Get a specific theme
const macTheme = getTheme('macos')

// Apply theme to a window
editor.updateShape({
  id: windowId,
  type: 'window',
  props: { themeId: 'macos' }
})

Creating Custom Themes

import { WindowTheme } from 'xe-tldraw-window-manager'

const myTheme: WindowTheme = {
  id: 'custom',
  name: 'My Custom Theme',
  colors: {
    titleBar: {
      background: '#1a1a1a',
      backgroundActive: '#2d2d2d',
      text: '#ffffff',
      textInactive: '#888888'
    },
    window: {
      background: '#ffffff',
      border: '#d0d0d0',
      borderActive: '#007acc',
      shadow: 'rgba(0, 0, 0, 0.1)',
      shadowActive: 'rgba(0, 0, 0, 0.2)'
    },
    buttons: {
      close: {
        background: 'transparent',
        backgroundHover: '#ff0000',
        icon: '#ffffff'
      },
      minimize: {
        background: 'transparent',
        backgroundHover: '#444444',
        icon: '#ffffff'
      },
      maximize: {
        background: 'transparent',
        backgroundHover: '#444444',
        icon: '#ffffff'
      }
    }
  },
  metrics: {
    titleBarHeight: 30,
    borderWidth: 1,
    borderRadius: 6,
    buttonSize: 14,
    buttonSpacing: 8
  }
}

Window Manager Hooks

import { useWindowManager } from 'xe-tldraw-window-manager'

function MyComponent() {
  const windowManager = useWindowManager()
  
  // Available actions
  windowManager.close(windowId)
  windowManager.minimize(windowId)
  windowManager.maximize(windowId)
  windowManager.restore(windowId)
  windowManager.setActive(windowId)
  windowManager.bringToFront(windowId)
  windowManager.sendToBack(windowId)
}

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

# Build demo
npm run build:demo

License

MIT