gitmaps 1.0.0 → 1.1.1

package/packages/galaxydraw/src/core/minimap.ts

@@ -1,216 +0,0 @@
-/**
- * Minimap — Small overview of the entire canvas
- *
- * Renders a proportional view of all card positions as colored
- * rectangles. Click/drag on the minimap to navigate.
- */
-
-import type { CanvasState } from './state';
-import type { CardManager } from './cards';
-
-export class Minimap {
-    private el: HTMLElement;
-    private mapCanvas: HTMLCanvasElement;
-    private ctx2d: CanvasRenderingContext2D | null;
-    private rafPending = false;
-
-    /** Minimap dimensions */
-    width = 180;
-    height = 120;
-
-    constructor(
-        private state: CanvasState,
-        private cards: CardManager,
-        container: HTMLElement,
-    ) {
-        this.el = document.createElement('div');
-        this.el.className = 'gd-minimap';
-        this.el.style.cssText = `
-            position: absolute;
-            bottom: 12px;
-            right: 12px;
-            width: ${this.width}px;
-            height: ${this.height}px;
-            border-radius: 8px;
-            overflow: hidden;
-            backdrop-filter: blur(12px);
-            background: rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            cursor: pointer;
-            z-index: 999;
-        `;
-
-        this.mapCanvas = document.createElement('canvas');
-        this.mapCanvas.width = this.width;
-        this.mapCanvas.height = this.height;
-        this.el.appendChild(this.mapCanvas);
-        container.appendChild(this.el);
-
-        this.ctx2d = this.mapCanvas.getContext('2d');
-
-        // Click to navigate
-        this.el.addEventListener('mousedown', (e) => this.handleClick(e));
-
-        // Auto-rebuild on state change
-        this.state.subscribe(() => this.scheduleRebuild());
-    }
-
-    /** Schedule a redraw */
-    scheduleRebuild() {
-        if (this.rafPending) return;
-        this.rafPending = true;
-        requestAnimationFrame(() => {
-            this.rafPending = false;
-            this.rebuild();
-        });
-    }
-
-    /** Force immediate redraw */
-    rebuild() {
-        const ctx = this.ctx2d;
-        if (!ctx) return;
-        ctx.clearRect(0, 0, this.width, this.height);
-
-        // Compute world bounding box of all cards
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const [, card] of this.cards.cards) {
-            const x = parseFloat(card.style.left) || 0;
-            const y = parseFloat(card.style.top) || 0;
-            const w = card.offsetWidth || 400;
-            const h = card.offsetHeight || 300;
-            minX = Math.min(minX, x);
-            minY = Math.min(minY, y);
-            maxX = Math.max(maxX, x + w);
-            maxY = Math.max(maxY, y + h);
-        }
-
-        // Include deferred cards in bounding box
-        for (const [, data] of this.cards.deferred) {
-            minX = Math.min(minX, data.x);
-            minY = Math.min(minY, data.y);
-            maxX = Math.max(maxX, data.x + data.width);
-            maxY = Math.max(maxY, data.y + data.height);
-        }
-
-        if (minX === Infinity) return; // no cards
-
-        const pad = 50;
-        const worldW = maxX - minX + pad * 2;
-        const worldH = maxY - minY + pad * 2;
-        const scale = Math.min(this.width / worldW, this.height / worldH);
-
-        const ox = (this.width - worldW * scale) / 2;
-        const oy = (this.height - worldH * scale) / 2;
-
-        // Draw card dots
-        ctx.fillStyle = 'rgba(147, 130, 255, 0.6)';
-        for (const [, card] of this.cards.cards) {
-            const x = (parseFloat(card.style.left) || 0) - minX + pad;
-            const y = (parseFloat(card.style.top) || 0) - minY + pad;
-            const w = card.offsetWidth || 400;
-            const h = card.offsetHeight || 300;
-            ctx.fillRect(ox + x * scale, oy + y * scale, Math.max(2, w * scale), Math.max(2, h * scale));
-        }
-
-        // Draw deferred card dots (dimmer)
-        ctx.fillStyle = 'rgba(147, 130, 255, 0.2)';
-        for (const [, data] of this.cards.deferred) {
-            const x = data.x - minX + pad;
-            const y = data.y - minY + pad;
-            ctx.fillRect(ox + x * scale, oy + y * scale, Math.max(2, data.width * scale), Math.max(2, data.height * scale));
-        }
-
-        // Draw viewport rect
-        const vp = this.state.getVisibleWorldRect();
-        if (vp) {
-            ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
-            ctx.lineWidth = 1.5;
-            const rx = ox + (vp.left - minX + pad) * scale;
-            const ry = oy + (vp.top - minY + pad) * scale;
-            const rw = vp.width * scale;
-            const rh = vp.height * scale;
-            ctx.strokeRect(rx, ry, rw, rh);
-        }
-    }
-
-    private handleClick(e: MouseEvent) {
-        e.stopPropagation();
-        e.preventDefault();
-
-        // Compute the same bounding box used in rebuild()
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const [, card] of this.cards.cards) {
-            const x = parseFloat(card.style.left) || 0;
-            const y = parseFloat(card.style.top) || 0;
-            const w = card.offsetWidth || 400;
-            const h = card.offsetHeight || 300;
-            minX = Math.min(minX, x);
-            minY = Math.min(minY, y);
-            maxX = Math.max(maxX, x + w);
-            maxY = Math.max(maxY, y + h);
-        }
-        for (const [, data] of this.cards.deferred) {
-            minX = Math.min(minX, data.x);
-            minY = Math.min(minY, data.y);
-            maxX = Math.max(maxX, data.x + data.width);
-            maxY = Math.max(maxY, data.y + data.height);
-        }
-        if (minX === Infinity) return;
-
-        const pad = 50;
-        const worldW = maxX - minX + pad * 2;
-        const worldH = maxY - minY + pad * 2;
-        const scale = Math.min(this.width / worldW, this.height / worldH);
-        const ox = (this.width - worldW * scale) / 2;
-        const oy = (this.height - worldH * scale) / 2;
-
-        // Convert minimap click → world coordinates
-        const rect = this.el.getBoundingClientRect();
-        const clickX = e.clientX - rect.left;
-        const clickY = e.clientY - rect.top;
-
-        const worldX = (clickX - ox) / scale + minX - pad;
-        const worldY = (clickY - oy) / scale + minY - pad;
-
-        // Center the viewport on this world position
-        const vp = this.state.getVisibleWorldRect();
-        if (vp) {
-            const vpWorldW = vp.width;
-            const vpWorldH = vp.height;
-            const newOffsetX = -(worldX - vpWorldW / 2) * this.state.zoom;
-            const newOffsetY = -(worldY - vpWorldH / 2) * this.state.zoom;
-            this.state.set(this.state.zoom, newOffsetX, newOffsetY);
-        }
-
-        // Support drag on the minimap
-        const onMove = (ev: MouseEvent) => {
-            const mx = ev.clientX - rect.left;
-            const my = ev.clientY - rect.top;
-            const wx = (mx - ox) / scale + minX - pad;
-            const wy = (my - oy) / scale + minY - pad;
-            const v = this.state.getVisibleWorldRect();
-            if (v) {
-                this.state.set(
-                    this.state.zoom,
-                    -(wx - v.width / 2) * this.state.zoom,
-                    -(wy - v.height / 2) * this.state.zoom,
-                );
-            }
-        };
-        const onUp = () => {
-            window.removeEventListener('mousemove', onMove);
-            window.removeEventListener('mouseup', onUp);
-        };
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-    }
-
-    /** Show/hide the minimap */
-    setVisible(visible: boolean) {
-        this.el.style.display = visible ? '' : 'none';
-    }
-
-    destroy() {
-        this.el.remove();
-    }
-}

package/packages/galaxydraw/src/core/state.ts

@@ -1,177 +0,0 @@
-/**
- * CanvasState — Reactive state container for the infinite canvas
- *
- * Tracks zoom level, pan offset, and provides world↔screen
- * coordinate conversion utilities.
- */
-
-export interface CanvasStateSnapshot {
-    zoom: number;
-    offsetX: number;
-    offsetY: number;
-}
-
-export interface ViewportRect {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-    width: number;
-    height: number;
-}
-
-export class CanvasState {
-    zoom = 1;
-    offsetX = 0;
-    offsetY = 0;
-
-    private viewportEl: HTMLElement | null = null;
-    private contentEl: HTMLElement | null = null;
-    private listeners = new Set<() => void>();
-
-    // ─── Zoom limits ─────────────────────────────────────
-    readonly MIN_ZOOM = 0.05;
-    readonly MAX_ZOOM = 5;
-
-    constructor(viewport?: HTMLElement, content?: HTMLElement) {
-        this.viewportEl = viewport ?? null;
-        this.contentEl = content ?? null;
-    }
-
-    /** Bind to DOM elements after mount */
-    bind(viewport: HTMLElement, content: HTMLElement) {
-        this.viewportEl = viewport;
-        this.contentEl = content;
-        this.applyTransform();
-    }
-
-    /** Get a frozen snapshot of current state */
-    snapshot(): CanvasStateSnapshot {
-        return { zoom: this.zoom, offsetX: this.offsetX, offsetY: this.offsetY };
-    }
-
-    /** Subscribe to state changes */
-    subscribe(fn: () => void): () => void {
-        this.listeners.add(fn);
-        return () => this.listeners.delete(fn);
-    }
-
-    private notify() {
-        for (const fn of this.listeners) fn();
-    }
-
-    // ─── Transform ───────────────────────────────────────
-
-    /** Apply current state to the content element's CSS transform */
-    applyTransform() {
-        if (!this.contentEl) return;
-        // Round translate to whole pixels to prevent subpixel text blurring
-        const tx = Math.round(this.offsetX);
-        const ty = Math.round(this.offsetY);
-        this.contentEl.style.transform =
-            `translate(${tx}px, ${ty}px) scale(${this.zoom})`;
-    }
-
-    /** Set zoom + offset, clamping zoom to limits */
-    set(zoom: number, offsetX: number, offsetY: number) {
-        this.zoom = Math.max(this.MIN_ZOOM, Math.min(this.MAX_ZOOM, zoom));
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
-        this.applyTransform();
-        this.notify();
-    }
-
-    /** Pan by delta pixels */
-    pan(dx: number, dy: number) {
-        this.offsetX += dx;
-        this.offsetY += dy;
-        this.applyTransform();
-        this.notify();
-    }
-
-    /** Center the viewport on a world coordinate */
-    panTo(worldX: number, worldY: number) {
-        if (!this.viewportEl) return;
-        const vpW = this.viewportEl.clientWidth;
-        const vpH = this.viewportEl.clientHeight;
-        this.offsetX = vpW / 2 - worldX * this.zoom;
-        this.offsetY = vpH / 2 - worldY * this.zoom;
-        this.applyTransform();
-        this.notify();
-    }
-
-    /** Zoom toward a screen point (e.g. cursor position) */
-    zoomToward(screenX: number, screenY: number, factor: number) {
-        const newZoom = Math.max(this.MIN_ZOOM, Math.min(this.MAX_ZOOM, this.zoom * factor));
-        if (newZoom === this.zoom) return;
-
-        const rect = this.viewportEl?.getBoundingClientRect();
-        const mouseX = screenX - (rect?.left ?? 0);
-        const mouseY = screenY - (rect?.top ?? 0);
-
-        // Convert screen point to world coordinates at current zoom
-        const worldX = (mouseX - this.offsetX) / this.zoom;
-        const worldY = (mouseY - this.offsetY) / this.zoom;
-
-        // Update zoom and recalculate offset to keep world point under cursor
-        this.zoom = newZoom;
-        this.offsetX = mouseX - worldX * newZoom;
-        this.offsetY = mouseY - worldY * newZoom;
-
-        this.applyTransform();
-        this.notify();
-    }
-
-    // ─── Coordinate conversion ───────────────────────────
-
-    /** Screen pixel → world coordinate */
-    screenToWorld(screenX: number, screenY: number): { x: number; y: number } {
-        const rect = this.viewportEl?.getBoundingClientRect();
-        const localX = screenX - (rect?.left ?? 0);
-        const localY = screenY - (rect?.top ?? 0);
-        return {
-            x: (localX - this.offsetX) / this.zoom,
-            y: (localY - this.offsetY) / this.zoom,
-        };
-    }
-
-    /** World coordinate → screen pixel */
-    worldToScreen(worldX: number, worldY: number): { x: number; y: number } {
-        const rect = this.viewportEl?.getBoundingClientRect();
-        return {
-            x: worldX * this.zoom + this.offsetX + (rect?.left ?? 0),
-            y: worldY * this.zoom + this.offsetY + (rect?.top ?? 0),
-        };
-    }
-
-    /** Get the visible world-space rectangle (with optional margin in screen px) */
-    getVisibleWorldRect(margin = 0): ViewportRect | null {
-        if (!this.viewportEl) return null;
-        const vpW = this.viewportEl.clientWidth;
-        const vpH = this.viewportEl.clientHeight;
-
-        const left = (-this.offsetX - margin) / this.zoom;
-        const top = (-this.offsetY - margin) / this.zoom;
-        const right = (vpW - this.offsetX + margin) / this.zoom;
-        const bottom = (vpH - this.offsetY + margin) / this.zoom;
-
-        return { left, top, right, bottom, width: right - left, height: bottom - top };
-    }
-
-    /** Fit a world-space bounding box into the viewport */
-    fitRect(worldLeft: number, worldTop: number, worldRight: number, worldBottom: number, padding = 60) {
-        if (!this.viewportEl) return;
-        const vpW = this.viewportEl.clientWidth;
-        const vpH = this.viewportEl.clientHeight;
-
-        const w = worldRight - worldLeft + padding * 2;
-        const h = worldBottom - worldTop + padding * 2;
-        const zoom = Math.min(vpW / w, vpH / h, this.MAX_ZOOM);
-
-        this.set(
-            zoom,
-            (vpW - w * zoom) / 2 - (worldLeft - padding) * zoom,
-            (vpH - h * zoom) / 2 - (worldTop - padding) * zoom,
-        );
-    }
-}

package/packages/galaxydraw/src/core/viewport.ts

@@ -1,106 +0,0 @@
-/**
- * ViewportCuller — Hide/show cards based on viewport visibility
- *
- * Uses content-visibility: hidden for off-screen cards (keeps dimensions
- * for layout stability) and materializes deferred cards on demand.
- */
-
-import type { CanvasState } from './state';
-import type { CardManager } from './cards';
-import type { EventBus } from './events';
-
-export interface CullResult {
-    shown: number;
-    culled: number;
-    materialized: number;
-    total: number;
-}
-
-export class ViewportCuller {
-    private rafPending = false;
-    private enabled = true;
-    /** Margin in screen pixels beyond the viewport for pre-rendering */
-    margin = 500;
-
-    constructor(
-        private state: CanvasState,
-        private cards: CardManager,
-        private bus: EventBus,
-    ) { }
-
-    /** Enable/disable culling */
-    setEnabled(enabled: boolean) {
-        this.enabled = enabled;
-    }
-
-    /** Schedule a culling pass on the next animation frame */
-    schedule() {
-        if (this.rafPending || !this.enabled) return;
-        this.rafPending = true;
-        requestAnimationFrame(() => {
-            this.rafPending = false;
-            this.perform();
-        });
-    }
-
-    /** Perform immediate culling pass */
-    perform(): CullResult {
-        const result: CullResult = { shown: 0, culled: 0, materialized: 0, total: 0 };
-        if (!this.enabled) return result;
-
-        const worldRect = this.state.getVisibleWorldRect(this.margin);
-        if (!worldRect) return result;
-
-        // 1. Cull/show existing DOM cards
-        for (const [id, card] of this.cards.cards) {
-            const visible = this.isCardInRect(card, worldRect);
-            const wasCulled = card.dataset.culled === 'true';
-
-            if (visible && wasCulled) {
-                card.style.contentVisibility = '';
-                card.style.visibility = '';
-                card.dataset.culled = 'false';
-                result.shown++;
-            } else if (!visible && !wasCulled) {
-                card.style.contentVisibility = 'hidden';
-                card.style.visibility = 'hidden';
-                card.dataset.culled = 'true';
-                result.culled++;
-            } else if (visible) {
-                result.shown++;
-            } else {
-                result.culled++;
-            }
-        }
-
-        // 2. Materialize deferred cards in viewport
-        if (this.cards.deferred.size > 0) {
-            result.materialized = this.cards.materializeInRect(worldRect);
-        }
-
-        result.total = this.cards.cards.size + this.cards.deferred.size;
-
-        if (result.materialized > 0) {
-            this.bus.emit('viewport:cull', result);
-        }
-
-        return result;
-    }
-
-    /** Force all cards visible (for operations that need to measure everything) */
-    uncullAll() {
-        for (const [, card] of this.cards.cards) {
-            card.style.contentVisibility = '';
-            card.style.visibility = '';
-            card.dataset.culled = 'false';
-        }
-    }
-
-    private isCardInRect(card: HTMLElement, rect: { left: number; top: number; right: number; bottom: number }): boolean {
-        const x = parseFloat(card.style.left) || 0;
-        const y = parseFloat(card.style.top) || 0;
-        const w = card.offsetWidth || 400;
-        const h = card.offsetHeight || 300;
-        return x + w > rect.left && x < rect.right && y + h > rect.top && y < rect.bottom;
-    }
-}

package/packages/galaxydraw/src/galaxydraw.css

@@ -1,166 +0,0 @@
-/* galaxydraw.css — Base styles for the infinite canvas */
-
-/* ─── Viewport & Canvas ─────────────────────────────────── */
-.gd-viewport {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: radial-gradient(circle at 50% 50%, #0c0e1a 0%, #060812 100%);
-    user-select: none;
-    -webkit-user-select: none;
-}
-
-.gd-viewport.gd-space-pan {
-    cursor: grab;
-}
-
-.gd-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform-origin: 0 0;
-    will-change: transform;
-}
-
-/* ─── Dot grid background ───────────────────────────────── */
-.gd-viewport::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
-    background-size: 24px 24px;
-    pointer-events: none;
-    z-index: 0;
-}
-
-/* ─── Cards ─────────────────────────────────────────────── */
-.gd-card {
-    position: absolute;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(13, 15, 28, 0.92);
-    backdrop-filter: blur(8px);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    transition: box-shadow 0.2s ease, border-color 0.2s ease;
-    contain: layout style;
-}
-
-.gd-card--selected {
-    border-color: rgba(147, 130, 255, 0.4);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(147, 130, 255, 0.25);
-}
-
-.gd-card--dragging {
-    opacity: 0.9;
-    transition: none;
-}
-
-.gd-card--resizing {
-    transition: none;
-}
-
-.gd-card--collapsed .gd-card-body {
-    display: none;
-}
-
-/* ─── Card header ───────────────────────────────────────── */
-.gd-card-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    cursor: grab;
-    min-height: 40px;
-    flex-shrink: 0;
-}
-
-.gd-card-header:active {
-    cursor: grabbing;
-}
-
-.gd-card-header .title {
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-    font-family: 'Inter', sans-serif;
-}
-
-/* ─── Card body ─────────────────────────────────────────── */
-.gd-card-body {
-    flex: 1;
-    overflow: auto;
-    min-height: 0;
-}
-
-/* ─── Resize handle ─────────────────────────────────────── */
-.gd-resize-handle {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 20px;
-    height: 20px;
-    cursor: nw-resize;
-    z-index: 1;
-}
-
-.gd-resize-handle::after {
-    content: '';
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-    width: 8px;
-    height: 8px;
-    border-right: 2px solid rgba(255, 255, 255, 0.15);
-    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
-    border-radius: 0 0 2px 0;
-}
-
-.gd-card:hover .gd-resize-handle::after {
-    border-color: rgba(255, 255, 255, 0.3);
-}
-
-/* ─── Minimap ───────────────────────────────────────────── */
-.gd-minimap {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    border-radius: 8px;
-    overflow: hidden;
-    backdrop-filter: blur(12px);
-    background: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-    z-index: 999;
-    transition: opacity 0.2s ease;
-}
-
-.gd-minimap:hover {
-    opacity: 1;
-}
-
-/* ─── Scrollbar styling ─────────────────────────────────── */
-.gd-card-body::-webkit-scrollbar {
-    width: 4px;
-}
-
-.gd-card-body::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.gd-card-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-}
-
-.gd-card-body::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}

package/packages/galaxydraw/src/index.ts

@@ -1,40 +0,0 @@
-/**
- * galaxydraw — Infinite canvas framework
- *
- * Core engine for spatial applications. Provides:
- * - Infinite pan/zoom canvas with GPU-accelerated transforms
- * - Virtualized card rendering (only DOM for visible cards)
- * - Drag, resize, z-order, collapse for cards
- * - Minimap with click-to-navigate
- * - Layout persistence (localStorage + optional server sync)
- * - Dual control modes (Simple: drag=pan / Advanced: space+drag=pan)
- * - Keyboard shortcuts system
- * - Plugin architecture for custom card types
- */
-
-// ─── Core ────────────────────────────────────────────────
-export { GalaxyDraw } from './core/engine';
-export type { GalaxyDrawOptions, ControlMode } from './core/engine';
-
-// ─── Canvas State ────────────────────────────────────────
-export { CanvasState } from './core/state';
-export type { CanvasStateSnapshot, ViewportRect } from './core/state';
-
-// ─── Cards ───────────────────────────────────────────────
-export { CardManager } from './core/cards';
-export type { CardOptions, CardData, CardPlugin } from './core/cards';
-
-// ─── Viewport & Virtualization ───────────────────────────
-export { ViewportCuller } from './core/viewport';
-export type { CullResult } from './core/viewport';
-
-// ─── Layout ──────────────────────────────────────────────
-export { LayoutManager } from './core/layout';
-export type { LayoutData, LayoutProvider } from './core/layout';
-
-// ─── Minimap ─────────────────────────────────────────────
-export { Minimap } from './core/minimap';
-
-// ─── Events ──────────────────────────────────────────────
-export { EventBus } from './core/events';
-export type { GalaxyDrawEvent, EventHandler } from './core/events';