@auxiora/canvas 1.0.0

package/src/canvas-server.ts

@@ -0,0 +1,93 @@
+import { CanvasSession, type CanvasSessionOptions } from './canvas-session.js';
+import type { CanvasEvent, CanvasEventType } from './types.js';
+
+export type ServerEventHandler = (event: CanvasEvent) => void;
+
+export interface CanvasServerOptions {
+  maxSessions?: number;
+}
+
+export class CanvasServer {
+  private sessions: Map<string, CanvasSession> = new Map();
+  private globalListeners: Map<CanvasEventType, Set<ServerEventHandler>> = new Map();
+  private maxSessions: number;
+
+  constructor(options: CanvasServerOptions = {}) {
+    this.maxSessions = options.maxSessions ?? 100;
+  }
+
+  createSession(options?: CanvasSessionOptions): CanvasSession {
+    if (this.sessions.size >= this.maxSessions) {
+      throw new Error(`Maximum sessions (${this.maxSessions}) reached`);
+    }
+
+    const session = new CanvasSession(options);
+    this.sessions.set(session.id, session);
+
+    // Forward session events to global listeners
+    const eventTypes: CanvasEventType[] = [
+      'object:added',
+      'object:updated',
+      'object:removed',
+      'canvas:cleared',
+      'canvas:snapshot',
+      'canvas:resized',
+      'interaction:click',
+      'interaction:input',
+      'viewer:joined',
+      'viewer:left',
+    ];
+
+    for (const eventType of eventTypes) {
+      session.on(eventType, (event) => {
+        const handlers = this.globalListeners.get(eventType);
+        if (handlers) {
+          for (const handler of handlers) {
+            handler(event);
+          }
+        }
+      });
+    }
+
+    return session;
+  }
+
+  getSession(id: string): CanvasSession | undefined {
+    return this.sessions.get(id);
+  }
+
+  destroySession(id: string): boolean {
+    const session = this.sessions.get(id);
+    if (!session) return false;
+
+    session.clear();
+    this.sessions.delete(id);
+    return true;
+  }
+
+  getSessions(): CanvasSession[] {
+    return Array.from(this.sessions.values());
+  }
+
+  getSessionCount(): number {
+    return this.sessions.size;
+  }
+
+  on(type: CanvasEventType, handler: ServerEventHandler): void {
+    if (!this.globalListeners.has(type)) {
+      this.globalListeners.set(type, new Set());
+    }
+    this.globalListeners.get(type)!.add(handler);
+  }
+
+  off(type: CanvasEventType, handler: ServerEventHandler): void {
+    this.globalListeners.get(type)?.delete(handler);
+  }
+
+  destroy(): void {
+    for (const id of this.sessions.keys()) {
+      this.destroySession(id);
+    }
+    this.globalListeners.clear();
+  }
+}

package/src/canvas-session.ts

@@ -0,0 +1,170 @@
+import { nanoid } from 'nanoid';
+import type {
+  CanvasObject,
+  CanvasEvent,
+  CanvasEventType,
+  CanvasSnapshot,
+  ViewerInfo,
+} from './types.js';
+
+export type EventHandler = (event: CanvasEvent) => void;
+
+export interface CanvasSessionOptions {
+  id?: string;
+  width?: number;
+  height?: number;
+}
+
+export class CanvasSession {
+  readonly id: string;
+  private objects: Map<string, CanvasObject> = new Map();
+  private viewers: Map<string, ViewerInfo> = new Map();
+  private listeners: Map<CanvasEventType, Set<EventHandler>> = new Map();
+  private nextZIndex: number = 1;
+  private width: number;
+  private height: number;
+  readonly createdAt: string;
+
+  constructor(options: CanvasSessionOptions = {}) {
+    this.id = options.id ?? nanoid(12);
+    this.width = options.width ?? 1920;
+    this.height = options.height ?? 1080;
+    this.createdAt = new Date().toISOString();
+  }
+
+  addObject(obj: Omit<CanvasObject, 'id' | 'zIndex' | 'createdAt' | 'updatedAt'> & { id?: string }): CanvasObject {
+    const now = new Date().toISOString();
+    const object = {
+      ...obj,
+      id: obj.id ?? nanoid(10),
+      zIndex: this.nextZIndex++,
+      createdAt: now,
+      updatedAt: now,
+    } as CanvasObject;
+
+    this.objects.set(object.id, object);
+    this.emit({ type: 'object:added', sessionId: this.id, objectId: object.id, data: object });
+    return object;
+  }
+
+  updateObject(id: string, updates: Partial<Omit<CanvasObject, 'id' | 'type' | 'createdAt'>>): CanvasObject | null {
+    const existing = this.objects.get(id);
+    if (!existing) return null;
+
+    const updated = {
+      ...existing,
+      ...updates,
+      id: existing.id,
+      type: existing.type,
+      createdAt: existing.createdAt,
+      updatedAt: new Date().toISOString(),
+    } as CanvasObject;
+
+    this.objects.set(id, updated);
+    this.emit({ type: 'object:updated', sessionId: this.id, objectId: id, data: updated });
+    return updated;
+  }
+
+  removeObject(id: string): boolean {
+    const existed = this.objects.delete(id);
+    if (existed) {
+      this.emit({ type: 'object:removed', sessionId: this.id, objectId: id });
+    }
+    return existed;
+  }
+
+  getObject(id: string): CanvasObject | undefined {
+    return this.objects.get(id);
+  }
+
+  getObjects(): CanvasObject[] {
+    return Array.from(this.objects.values()).sort((a, b) => a.zIndex - b.zIndex);
+  }
+
+  getObjectCount(): number {
+    return this.objects.size;
+  }
+
+  clear(): void {
+    this.objects.clear();
+    this.nextZIndex = 1;
+    this.emit({ type: 'canvas:cleared', sessionId: this.id });
+  }
+
+  snapshot(): CanvasSnapshot {
+    const snap: CanvasSnapshot = {
+      sessionId: this.id,
+      objects: this.getObjects(),
+      width: this.width,
+      height: this.height,
+      takenAt: new Date().toISOString(),
+    };
+    this.emit({ type: 'canvas:snapshot', sessionId: this.id, data: snap });
+    return snap;
+  }
+
+  resize(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+    this.emit({
+      type: 'canvas:resized',
+      sessionId: this.id,
+      data: { width, height },
+    });
+  }
+
+  getSize(): { width: number; height: number } {
+    return { width: this.width, height: this.height };
+  }
+
+  addViewer(id: string, name?: string): ViewerInfo {
+    const viewer: ViewerInfo = {
+      id,
+      name,
+      joinedAt: new Date().toISOString(),
+    };
+    this.viewers.set(id, viewer);
+    this.emit({ type: 'viewer:joined', sessionId: this.id, data: viewer });
+    return viewer;
+  }
+
+  removeViewer(id: string): boolean {
+    const existed = this.viewers.delete(id);
+    if (existed) {
+      this.emit({ type: 'viewer:left', sessionId: this.id, data: { id } });
+    }
+    return existed;
+  }
+
+  getViewers(): ViewerInfo[] {
+    return Array.from(this.viewers.values());
+  }
+
+  getViewerCount(): number {
+    return this.viewers.size;
+  }
+
+  on(type: CanvasEventType, handler: EventHandler): void {
+    if (!this.listeners.has(type)) {
+      this.listeners.set(type, new Set());
+    }
+    this.listeners.get(type)!.add(handler);
+  }
+
+  off(type: CanvasEventType, handler: EventHandler): void {
+    this.listeners.get(type)?.delete(handler);
+  }
+
+  private emit(event: Omit<CanvasEvent, 'timestamp'>): void {
+    const fullEvent: CanvasEvent = {
+      ...event,
+      timestamp: new Date().toISOString(),
+    };
+    const handlers = this.listeners.get(event.type);
+    if (handlers) {
+      for (const handler of handlers) {
+        handler(fullEvent);
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export type {
+  CanvasObjectType,
+  CanvasObjectBase,
+  TextObject,
+  ImageObject,
+  DrawingPoint,
+  DrawingObject,
+  WidgetObject,
+  InteractiveElementKind,
+  InteractiveObject,
+  CanvasObject,
+  CanvasEventType,
+  CanvasEvent,
+  CanvasSnapshot,
+  ViewerInfo,
+} from './types.js';
+export { CanvasSession, type CanvasSessionOptions, type EventHandler } from './canvas-session.js';
+export { CanvasServer, type CanvasServerOptions, type ServerEventHandler } from './canvas-server.js';

package/src/types.ts

@@ -0,0 +1,94 @@
+export type CanvasObjectType = 'text' | 'image' | 'drawing' | 'widget' | 'interactive';
+
+export interface CanvasObjectBase {
+  id: string;
+  type: CanvasObjectType;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  visible: boolean;
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TextObject extends CanvasObjectBase {
+  type: 'text';
+  content: string;
+  fontSize: number;
+  fontFamily: string;
+  color: string;
+}
+
+export interface ImageObject extends CanvasObjectBase {
+  type: 'image';
+  src: string;
+  alt: string;
+}
+
+export interface DrawingPoint {
+  x: number;
+  y: number;
+}
+
+export interface DrawingObject extends CanvasObjectBase {
+  type: 'drawing';
+  points: DrawingPoint[];
+  strokeColor: string;
+  strokeWidth: number;
+}
+
+export interface WidgetObject extends CanvasObjectBase {
+  type: 'widget';
+  widgetType: string;
+  props: Record<string, unknown>;
+}
+
+export type InteractiveElementKind = 'button' | 'input' | 'select' | 'checkbox' | 'slider';
+
+export interface InteractiveObject extends CanvasObjectBase {
+  type: 'interactive';
+  elementKind: InteractiveElementKind;
+  label: string;
+  value: string;
+  options?: string[];
+  disabled: boolean;
+}
+
+export type CanvasObject = TextObject | ImageObject | DrawingObject | WidgetObject | InteractiveObject;
+
+export type CanvasEventType =
+  | 'object:added'
+  | 'object:updated'
+  | 'object:removed'
+  | 'canvas:cleared'
+  | 'canvas:snapshot'
+  | 'canvas:resized'
+  | 'interaction:click'
+  | 'interaction:input'
+  | 'viewer:joined'
+  | 'viewer:left';
+
+export interface CanvasEvent {
+  type: CanvasEventType;
+  sessionId: string;
+  objectId?: string;
+  data?: unknown;
+  timestamp: string;
+}
+
+export interface CanvasSnapshot {
+  sessionId: string;
+  objects: CanvasObject[];
+  width: number;
+  height: number;
+  takenAt: string;
+}
+
+export interface ViewerInfo {
+  id: string;
+  name?: string;
+  joinedAt: string;
+}

package/tests/canvas-server.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { CanvasServer } from '../src/canvas-server.js';
+import type { CanvasEvent, TextObject } from '../src/types.js';
+
+describe('CanvasServer', () => {
+  let server: CanvasServer;
+
+  beforeEach(() => {
+    server = new CanvasServer({ maxSessions: 5 });
+  });
+
+  afterEach(() => {
+    server.destroy();
+  });
+
+  describe('createSession', () => {
+    it('should create a new session', () => {
+      const session = server.createSession();
+      expect(session.id).toBeTruthy();
+      expect(server.getSessionCount()).toBe(1);
+    });
+
+    it('should create session with custom options', () => {
+      const session = server.createSession({ id: 'custom', width: 800, height: 600 });
+      expect(session.id).toBe('custom');
+      expect(session.getSize()).toEqual({ width: 800, height: 600 });
+    });
+
+    it('should throw when max sessions reached', () => {
+      for (let i = 0; i < 5; i++) {
+        server.createSession();
+      }
+      expect(() => server.createSession()).toThrow('Maximum sessions (5) reached');
+    });
+  });
+
+  describe('getSession', () => {
+    it('should return existing session', () => {
+      const session = server.createSession({ id: 'my-session' });
+      expect(server.getSession('my-session')).toBe(session);
+    });
+
+    it('should return undefined for non-existent session', () => {
+      expect(server.getSession('nonexistent')).toBeUndefined();
+    });
+  });
+
+  describe('destroySession', () => {
+    it('should remove session', () => {
+      const session = server.createSession({ id: 'to-destroy' });
+      expect(server.destroySession('to-destroy')).toBe(true);
+      expect(server.getSession('to-destroy')).toBeUndefined();
+      expect(server.getSessionCount()).toBe(0);
+    });
+
+    it('should return false for non-existent session', () => {
+      expect(server.destroySession('nonexistent')).toBe(false);
+    });
+  });
+
+  describe('getSessions', () => {
+    it('should return all sessions', () => {
+      server.createSession({ id: 'a' });
+      server.createSession({ id: 'b' });
+      const sessions = server.getSessions();
+      expect(sessions).toHaveLength(2);
+    });
+  });
+
+  describe('global event forwarding', () => {
+    it('should forward object:added events from sessions', () => {
+      const handler = vi.fn();
+      server.on('object:added', handler);
+
+      const session = server.createSession();
+      session.addObject({
+        type: 'text',
+        x: 0, y: 0, width: 100, height: 100, visible: true,
+        content: 'Test', fontSize: 14, fontFamily: 'serif', color: '#000',
+      } as Omit<TextObject, 'id' | 'zIndex' | 'createdAt' | 'updatedAt'>);
+
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler.mock.calls[0][0].sessionId).toBe(session.id);
+    });
+
+    it('should forward events from multiple sessions', () => {
+      const handler = vi.fn();
+      server.on('object:added', handler);
+
+      const s1 = server.createSession({ id: 'session-1' });
+      const s2 = server.createSession({ id: 'session-2' });
+
+      s1.addObject({
+        type: 'text',
+        x: 0, y: 0, width: 100, height: 100, visible: true,
+        content: 'A', fontSize: 14, fontFamily: 'serif', color: '#000',
+      } as Omit<TextObject, 'id' | 'zIndex' | 'createdAt' | 'updatedAt'>);
+
+      s2.addObject({
+        type: 'text',
+        x: 0, y: 0, width: 100, height: 100, visible: true,
+        content: 'B', fontSize: 14, fontFamily: 'serif', color: '#000',
+      } as Omit<TextObject, 'id' | 'zIndex' | 'createdAt' | 'updatedAt'>);
+
+      expect(handler).toHaveBeenCalledTimes(2);
+    });
+
+    it('should forward canvas:cleared events', () => {
+      const handler = vi.fn();
+      server.on('canvas:cleared', handler);
+
+      const session = server.createSession();
+      session.clear();
+      expect(handler).toHaveBeenCalledOnce();
+    });
+
+    it('should forward viewer events', () => {
+      const joinHandler = vi.fn();
+      const leaveHandler = vi.fn();
+      server.on('viewer:joined', joinHandler);
+      server.on('viewer:left', leaveHandler);
+
+      const session = server.createSession();
+      session.addViewer('v1', 'Alice');
+      expect(joinHandler).toHaveBeenCalledOnce();
+
+      session.removeViewer('v1');
+      expect(leaveHandler).toHaveBeenCalledOnce();
+    });
+
+    it('should unregister global handler', () => {
+      const handler = vi.fn();
+      server.on('object:added', handler);
+      server.off('object:added', handler);
+
+      const session = server.createSession();
+      session.addObject({
+        type: 'text',
+        x: 0, y: 0, width: 100, height: 100, visible: true,
+        content: 'Test', fontSize: 14, fontFamily: 'serif', color: '#000',
+      } as Omit<TextObject, 'id' | 'zIndex' | 'createdAt' | 'updatedAt'>);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('destroy', () => {
+    it('should remove all sessions', () => {
+      server.createSession({ id: 'a' });
+      server.createSession({ id: 'b' });
+      server.destroy();
+      expect(server.getSessionCount()).toBe(0);
+    });
+  });
+});