@markup-canvas/core 1.0.6 → 1.0.8

package/README.md

@@ -7,6 +7,7 @@ Lightweight, canvas-like container with smooth pan and zoom capabilities. Simply
 - 🚀 **High Performance**: 60fps smooth animations with GPU acceleration
 - 🎯 **Precise Control**: Zoom, pan, and navigate with mouse, keyboard, or touch
 - 📏 **Rulers & Grid**: Optional rulers and grid overlay
+- 🌓 **Dark Mode**: Built-in dark theme support
 - 🔧 **Event System**: Built-in EventEmitter for reactive updates
 - 📦 **TypeScript**: Full TypeScript support with comprehensive types
 
@@ -102,6 +103,8 @@ const canvas = new MarkupCanvas(container, {
 |--------|------|---------|-------------|
 | `enableRulers` | `boolean` | `true` | Show rulers on top and left |
 | `enableGrid` | `boolean` | `false` | Show background grid |
+| `showRulers` | `boolean` | `true` | Initially show rulers (only applies if `enableRulers` is true) |
+| `showGrid` | `boolean` | `false` | Initially show grid (only applies if `enableGrid` is true) |
 | `gridColor` | `string` | `"#e0e0e0"` | Grid line color |
 
 #### Ruler Styling
@@ -111,12 +114,22 @@ const canvas = new MarkupCanvas(container, {
 | `rulerBackgroundColor` | `string` | `"#f5f5f5"` | Ruler background color |
 | `rulerBorderColor` | `string` | `"#d0d0d0"` | Ruler border color |
 | `rulerTextColor` | `string` | `"#666666"` | Ruler text color |
-| `rulerMajorTickColor` | `string` | `"#666666"` | Major tick mark color |
-| `rulerMinorTickColor` | `string` | `"#999999"` | Minor tick mark color |
+| `rulerTickColor` | `string` | `"#cccccc"` | Tick mark color |
 | `rulerFontSize` | `number` | `12` | Ruler font size in pixels |
 | `rulerFontFamily` | `string` | `"monospace"` | Ruler font family |
 | `rulerUnits` | `string` | `"px"` | Ruler units label |
 
+#### Dark Theme Support
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `themeMode` | `"light" \| "dark"` | `"light"` | Current theme mode |
+| `rulerBackgroundColorDark` | `string` | `"rgba(30, 30, 30, 0.95)"` | Dark mode ruler background color |
+| `rulerBorderColorDark` | `string` | `"#444"` | Dark mode ruler border color |
+| `rulerTextColorDark` | `string` | `"#aaa"` | Dark mode ruler text color |
+| `rulerTickColorDark` | `string` | `"#383838"` | Dark mode tick mark color |
+| `gridColorDark` | `string` | `"rgba(255, 255, 255, 0.1)"` | Dark mode grid line color |
+
 #### Callbacks
 
 | Option | Type | Description |
@@ -185,6 +198,33 @@ Always cleanup when you're done:
 canvas.cleanup();
 ```
 
+### Theme Management
+
+Switch between light and dark themes dynamically:
+
+```javascript
+// Change theme mode
+canvas.updateThemeMode('dark');
+canvas.updateThemeMode('light');
+```
+
+You can also customize dark theme colors:
+
+```javascript
+const canvas = new MarkupCanvas(container, {
+  width: 20000,
+  height: 15000,
+  themeMode: 'light',
+  // Light theme colors (default)
+  rulerBackgroundColor: 'rgba(255, 255, 255, 0.95)',
+  rulerTextColor: '#666',
+  // Dark theme colors
+  rulerBackgroundColorDark: 'rgba(30, 30, 30, 0.95)',
+  rulerTextColorDark: '#aaa',
+  gridColorDark: 'rgba(255, 255, 255, 0.1)',
+});
+```
+
 ### Complete Example
 
 Here's a complete example with HTML:

package/dist/lib/MarkupCanvas.d.ts

@@ -69,6 +69,7 @@ export declare class MarkupCanvas implements Canvas {
     scrollToPoint(x: number, y: number): boolean;
     getConfig(): Required<MarkupCanvasConfig>;
     updateConfig(newConfig: Partial<MarkupCanvasConfig>): void;
+    updateThemeMode(mode: "light" | "dark"): void;
     cleanup(): void;
     on<K extends keyof MarkupCanvasEvents>(event: K, handler: (data: MarkupCanvasEvents[K]) => void): void;
     off<K extends keyof MarkupCanvasEvents>(event: K, handler: (data: MarkupCanvasEvents[K]) => void): void;

package/dist/lib/canvas/setupCanvasContainer.d.ts

@@ -1 +1,2 @@
-export declare function setupCanvasContainer(container: HTMLElement): void;
+import type { MarkupCanvasConfig } from "@/types/index.js";
+export declare function setupCanvasContainer(container: HTMLElement, config?: Required<MarkupCanvasConfig>): void;

package/dist/lib/helpers/index.d.ts

@@ -4,3 +4,4 @@ export { withFeatureEnabled } from "./withFeatureEnabled.js";
 export { withRAF, withRAFThrottle } from "./withRAF.js";
 export { withRulerAdjustment, withRulerCheck, withRulerOffsetObject, withRulerOffsets, withRulerSize, } from "./withRulerCheck.js";
 export { withRulerOffset } from "./withRulerOffset.js";
+export { getThemeValue } from "./withTheme.js";

package/dist/lib/helpers/withTheme.d.ts

@@ -0,0 +1,4 @@
+import type { MarkupCanvasConfig } from "@/types";
+type ThemeColorKey = "canvasBackgroundColor" | "rulerBackgroundColor" | "rulerBorderColor" | "rulerTextColor" | "rulerTickColor" | "gridColor";
+export declare function getThemeValue(config: Required<MarkupCanvasConfig>, key: ThemeColorKey): string;
+export {};

package/dist/lib/rulers/constants.d.ts

@@ -4,12 +4,9 @@ export declare const RULER_Z_INDEX: {
     readonly CORNER: 1001;
 };
 export declare const TICK_SETTINGS: {
-    readonly MAJOR_HEIGHT: 6;
-    readonly MINOR_HEIGHT: 4;
-    readonly MAJOR_WIDTH: 8;
-    readonly MINOR_WIDTH: 4;
-    readonly MAJOR_MULTIPLIER: 5;
-    readonly LABEL_INTERVAL: 100;
+    readonly TICK_HEIGHT: 4;
+    readonly TICK_WIDTH: 4;
+    readonly TICK_LABEL_INTERVAL: 100;
 };
 export declare const GRID_SETTINGS: {
     readonly BASE_SIZE: 100;

package/dist/lib/rulers/ticks/createHorizontalTick.d.ts

@@ -1,2 +1,2 @@
 import type { MarkupCanvasConfig } from "@/types/index.js";
-export declare function createHorizontalTick(container: HTMLElement | DocumentFragment, position: number, pixelPos: number, tickSpacing: number, config: Required<MarkupCanvasConfig>): void;
+export declare function createHorizontalTick(container: HTMLElement | DocumentFragment, position: number, pixelPos: number, _tickSpacing: number, config: Required<MarkupCanvasConfig>): void;

package/dist/lib/rulers/ticks/createVerticalTick.d.ts

@@ -1,2 +1,2 @@
 import type { MarkupCanvasConfig } from "@/types/index.js";
-export declare function createVerticalTick(container: HTMLElement | DocumentFragment, position: number, pixelPos: number, tickSpacing: number, config: Required<MarkupCanvasConfig>): void;
+export declare function createVerticalTick(container: HTMLElement | DocumentFragment, position: number, pixelPos: number, _tickSpacing: number, config: Required<MarkupCanvasConfig>): void;

package/dist/lib/rulers/updateRulerTheme.d.ts

@@ -0,0 +1,8 @@
+import type { MarkupCanvasConfig } from "@/types/index.js";
+export interface RulerThemeUpdater {
+    horizontalRuler?: HTMLElement;
+    verticalRuler?: HTMLElement;
+    cornerBox?: HTMLElement;
+    gridOverlay?: HTMLElement;
+}
+export declare function updateRulerTheme(elements: RulerThemeUpdater, config: Required<MarkupCanvasConfig>): void;

package/dist/markup-canvas.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.0.6
+ * @version 1.0.8
  */
 'use strict';
 
@@ -40,17 +40,29 @@ const EDITOR_PRESET = {
     // Visual elements
     enableRulers: true,
     enableGrid: false,
-    gridColor: "rgba(0, 123, 255, 0.1)",
-    // Ruler styling
-    rulerBackgroundColor: "rgba(255, 255, 255, 0.4)",
-    rulerBorderColor: "#ddd",
-    rulerTextColor: "oklch(70.5% 0.015 286.067)",
-    rulerMajorTickColor: "oklch(87.1% 0.006 286.286)",
-    rulerMinorTickColor: "oklch(92% 0.004 286.32)",
+    showRulers: true,
+    showGrid: false,
     rulerFontSize: 9,
     rulerFontFamily: "Monaco, Menlo, monospace",
     rulerUnits: "px",
     rulerSize: 20,
+    // Canvas styling
+    canvasBackgroundColor: "transparent",
+    canvasBackgroundColorDark: "transparent",
+    // Ruler styling
+    rulerBackgroundColor: "oklch(100% 0 0 / 0.4)",
+    rulerBorderColor: "oklch(96.7% 0.001 286.375)",
+    rulerTextColor: "oklch(70.5% 0.015 286.067)",
+    rulerTickColor: "oklch(92% 0.004 286.32)",
+    gridColor: "rgba(232, 86, 193, 0.5)",
+    // Ruler styling (dark theme)
+    rulerBackgroundColorDark: "oklch(27.4% 0.006 286.033)",
+    rulerBorderColorDark: "oklch(44.2% 0.017 285.786)",
+    rulerTextColorDark: "oklch(55.2% 0.016 285.938)",
+    rulerTickColorDark: "oklch(55.2% 0.016 285.938)",
+    gridColorDark: "rgba(232, 86, 193, 0.5)",
+    // Theme
+    themeMode: "light",
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -285,6 +297,14 @@ function withRulerOffset(canvas, x, y, rulerSize, operation) {
     return operation(adjustedX, adjustedY);
 }
 
+function getThemeValue(config, key) {
+    if (config.themeMode === "dark") {
+        const darkKey = `${key}Dark`;
+        return config[darkKey];
+    }
+    return config[key];
+}
+
 const DEFAULT_CONFIG = {
     // Canvas dimensions
     width: 8000,
@@ -317,18 +337,30 @@ const DEFAULT_CONFIG = {
     requireOptionForClickZoom: false,
     // Visual elements
     enableRulers: true,
-    enableGrid: true,
-    gridColor: "rgba(0, 123, 255, 0.1)",
-    // Ruler styling
-    rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
-    rulerBorderColor: "#ddd",
-    rulerTextColor: "#666",
-    rulerMajorTickColor: "#999",
-    rulerMinorTickColor: "#ccc",
+    enableGrid: false,
+    showRulers: true,
+    showGrid: false,
     rulerFontSize: 9,
     rulerFontFamily: "Monaco, Menlo, monospace",
     rulerUnits: "px",
     rulerSize: 20,
+    // Canvas styling
+    canvasBackgroundColor: "rgba(250, 250, 250, 1)",
+    canvasBackgroundColorDark: "rgba(40, 40, 40, 1)",
+    // Ruler styling (light theme)
+    rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
+    rulerBorderColor: "rgba(240, 240, 240, 1)",
+    rulerTextColor: "rgba(102, 102, 102, 1)",
+    rulerTickColor: "rgba(204, 204, 204, 1)",
+    gridColor: "rgba(232, 86, 193, 0.5)",
+    // Ruler styling (dark theme)
+    rulerBackgroundColorDark: "rgba(30, 30, 30, 0.95)",
+    rulerBorderColorDark: "rgba(68, 68, 68, 1)",
+    rulerTextColorDark: "rgba(170, 170, 170, 1)",
+    rulerTickColorDark: "rgba(104, 104, 104, 1)",
+    gridColorDark: "rgba(232, 86, 193, 0.5)",
+    // Theme
+    themeMode: "light",
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -560,7 +592,7 @@ function checkContainerDimensions(container) {
     }
 }
 
-function setupCanvasContainer(container) {
+function setupCanvasContainer(container, config) {
     const currentPosition = getComputedStyle(container).position;
     if (currentPosition === "static") {
         container.style.position = "relative";
@@ -568,6 +600,11 @@ function setupCanvasContainer(container) {
     container.style.overflow = "hidden";
     container.style.cursor = "grab";
     container.style.overscrollBehavior = "none";
+    // Apply canvas background color
+    if (config) {
+        const backgroundColor = getThemeValue(config, "canvasBackgroundColor");
+        container.style.backgroundColor = backgroundColor;
+    }
     if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
     }
@@ -584,7 +621,7 @@ function createCanvas(container, config) {
         return null;
     }
     try {
-        setupCanvasContainer(container);
+        setupCanvasContainer(container, config);
         const { transformLayer, contentLayer } = createCanvasLayers(container, config);
         // Enable hardware acceleration if requested
         if (config.enableAcceleration) {
@@ -1330,12 +1367,9 @@ const RULER_Z_INDEX = {
     CORNER: 1001,
 };
 const TICK_SETTINGS = {
-    MAJOR_HEIGHT: 6,
-    MINOR_HEIGHT: 4,
-    MAJOR_WIDTH: 8,
-    MINOR_WIDTH: 4,
-    MAJOR_MULTIPLIER: 5,
-    LABEL_INTERVAL: 100,
+    TICK_HEIGHT: 4,
+    TICK_WIDTH: 4,
+    TICK_LABEL_INTERVAL: 100,
 };
 const GRID_SETTINGS = {
     BASE_SIZE: 100,
@@ -1352,16 +1386,16 @@ function createCornerBox(config) {
 		left: 0;
 		width: ${config.rulerSize}px;
 		height: ${config.rulerSize}px;
-		background: ${config.rulerBackgroundColor};
-		border-right: 1px solid ${config.rulerBorderColor};
-		border-bottom: 1px solid ${config.rulerBorderColor};
+		background: var(--ruler-background-color);
+		border-right: 1px solid var(--ruler-border-color);
+		border-bottom: 1px solid var(--ruler-border-color);
 		z-index: ${RULER_Z_INDEX.CORNER};
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-family: ${config.rulerFontFamily};
 		font-size: ${config.rulerFontSize - 2}px;
-		color: ${config.rulerTextColor};
+		color: var(--ruler-text-color);
 		pointer-events: none;
 	`;
     corner.textContent = config.rulerUnits;
@@ -1380,8 +1414,8 @@ function createGridOverlay(config) {
 		pointer-events: none;
 		z-index: ${RULER_Z_INDEX.GRID};
 		background-image: 
-			linear-gradient(${config.gridColor} 1px, transparent 1px),
-			linear-gradient(90deg, ${config.gridColor} 1px, transparent 1px);
+			linear-gradient(var(--grid-color) 1px, transparent 1px),
+			linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
 		background-size: 100px 100px;
 		opacity: 0.5;
 	`;
@@ -1397,14 +1431,14 @@ function createHorizontalRuler(config) {
 	left: ${config.rulerSize}px;
 	right: 0;
 	height: ${config.rulerSize}px;
-	background: ${config.rulerBackgroundColor};
-	border-bottom: 1px solid ${config.rulerBorderColor};
-	border-right: 1px solid ${config.rulerBorderColor};
+	background: var(--ruler-background-color);
+	border-bottom: 1px solid var(--ruler-border-color);
+	border-right: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${config.rulerTextColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1419,14 +1453,14 @@ function createVerticalRuler(config) {
 	left: 0;
 	bottom: 0;
 	width: ${config.rulerSize}px;
-	background: ${config.rulerBackgroundColor};
-	border-right: 1px solid ${config.rulerBorderColor};
-	border-bottom: 1px solid ${config.rulerBorderColor};
+	background: var(--ruler-background-color);
+	border-right: 1px solid var(--ruler-border-color);
+	border-bottom: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${config.rulerTextColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1496,29 +1530,28 @@ function calculateTickSpacing(contentSize, canvasSize) {
     return niceSpacing * magnitude;
 }
 
-function createHorizontalTick(container, position, pixelPos, tickSpacing, config) {
+function createHorizontalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
-    const tickHeight = isMajor ? TICK_SETTINGS.MAJOR_HEIGHT : TICK_SETTINGS.MINOR_HEIGHT;
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		left: ${pixelPos}px;
 		bottom: 0;
 		width: 1px;
-		height: ${tickHeight}px;
-		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
+		height: ${TICK_SETTINGS.TICK_HEIGHT}px;
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
-    const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+    const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
         label.style.cssText = `
 			position: absolute;
 			left: ${pixelPos}px;
-			bottom: ${tickHeight}px;
+			bottom: ${TICK_SETTINGS.TICK_HEIGHT + 2}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${config.rulerTextColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 		`;
@@ -1544,29 +1577,28 @@ function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, sc
     ruler.appendChild(fragment);
 }
 
-function createVerticalTick(container, position, pixelPos, tickSpacing, config) {
+function createVerticalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
-    const tickWidth = isMajor ? TICK_SETTINGS.MAJOR_WIDTH : TICK_SETTINGS.MINOR_WIDTH;
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		top: ${pixelPos}px;
 		right: 0;
-		width: ${tickWidth}px;
+		width: ${TICK_SETTINGS.TICK_WIDTH}px;
 		height: 1px;
-		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
-    const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+    const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
         label.style.cssText = `
 			position: absolute;
 			top: ${pixelPos - 6}px;
-			right: ${tickWidth + 6}px;
+			right: ${TICK_SETTINGS.TICK_WIDTH + 6}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${config.rulerTextColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);
@@ -1612,6 +1644,39 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
     }
 }
 
+function updateRulerTheme(elements, config) {
+    // Get theme-aware colors
+    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
+    const borderColor = getThemeValue(config, "rulerBorderColor");
+    const textColor = getThemeValue(config, "rulerTextColor");
+    const tickColor = getThemeValue(config, "rulerTickColor");
+    const gridColor = getThemeValue(config, "gridColor");
+    // Update horizontal ruler with CSS variables
+    if (elements.horizontalRuler) {
+        elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
+    }
+    // Update vertical ruler with CSS variables
+    if (elements.verticalRuler) {
+        elements.verticalRuler.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
+        elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
+        elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
+    }
+    // Update corner box with CSS variables
+    if (elements.cornerBox) {
+        elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
+        elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
+        elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
+    }
+    // Update grid overlay with CSS variables
+    if (elements.gridOverlay) {
+        elements.gridOverlay.style.setProperty("--grid-color", gridColor);
+    }
+}
+
 function createRulers(canvas, config) {
     if (!canvas?.container) {
         console.error("Invalid canvas provided to createRulers");
@@ -1628,13 +1693,28 @@ function createRulers(canvas, config) {
     try {
         elements = createRulerElements(canvas.container, config);
         cleanupEvents = setupRulerEvents(canvas, safeUpdate);
+        updateRulerTheme(elements, config);
         safeUpdate();
+        if (!config.showRulers) {
+            elements.horizontalRuler.style.display = "none";
+            elements.verticalRuler.style.display = "none";
+            elements.cornerBox.style.display = "none";
+        }
+        if (!config.showGrid && elements.gridOverlay) {
+            elements.gridOverlay.style.display = "none";
+        }
         return {
             horizontalRuler: elements.horizontalRuler,
             verticalRuler: elements.verticalRuler,
             cornerBox: elements.cornerBox,
             gridOverlay: elements.gridOverlay,
             update: safeUpdate,
+            updateTheme: (newConfig) => {
+                if (isDestroyed)
+                    return;
+                // Update all ruler theme colors
+                updateRulerTheme(elements, newConfig);
+            },
             show: () => {
                 if (elements.horizontalRuler)
                     elements.horizontalRuler.style.display = "block";
@@ -2002,6 +2082,21 @@ class MarkupCanvas {
     updateConfig(newConfig) {
         this.config = createMarkupCanvasConfig({ ...this.config, ...newConfig });
     }
+    // Theme management
+    updateThemeMode(mode) {
+        const newConfig = {
+            ...this.config,
+            themeMode: mode,
+        };
+        this.config = createMarkupCanvasConfig(newConfig);
+        // Update canvas background color
+        const backgroundColor = getThemeValue(this.config, "canvasBackgroundColor");
+        this.baseCanvas.container.style.backgroundColor = backgroundColor;
+        // Update rulers if they exist
+        if (this.rulers) {
+            this.rulers.updateTheme(this.config);
+        }
+    }
     // Cleanup method
     cleanup() {
         this.cleanupFunctions.forEach((cleanup) => {