@markup-canvas/core 1.0.7 → 1.0.9

package/dist/lib/MarkupCanvas.d.ts

@@ -13,6 +13,9 @@ export declare class MarkupCanvas implements Canvas {
     private _isReady;
     private listen;
     constructor(container: HTMLElement, options?: MarkupCanvasConfig);
+    private setupGlobalBinding;
+    private cleanupGlobalBinding;
+    private broadcastEvent;
     private setupEventHandlers;
     get container(): HTMLElement;
     get transformLayer(): HTMLElement;

package/dist/lib/events/EventEmitter.d.ts

@@ -1,5 +1,7 @@
 export declare class EventEmitter<Events extends Record<string, unknown>> {
     private listeners;
+    private emitInterceptor?;
+    setEmitInterceptor(interceptor: (event: keyof Events, data: unknown) => void): void;
     on<K extends keyof Events>(event: K, handler: (data: Events[K]) => void): void;
     off<K extends keyof Events>(event: K, handler: (data: Events[K]) => void): void;
     emit<K extends keyof Events>(event: K, data: Events[K]): void;

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

@@ -5,9 +5,4 @@ export interface RulerThemeUpdater {
     cornerBox?: HTMLElement;
     gridOverlay?: HTMLElement;
 }
-/**
- * Updates all ruler elements with new theme colors
- * @param elements - The ruler elements to update
- * @param config - The canvas config containing theme and color settings
- */
 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.7
+ * @version 1.0.9
  */
 'use strict';
 
@@ -17,7 +17,7 @@ const EDITOR_PRESET = {
     enablePan: true,
     enableTouch: true,
     enableKeyboard: false,
-    limitKeyboardEventsToCanvas: false,
+    bindKeyboardEventsTo: "canvas",
     // Zoom behavior
     zoomSpeed: 1.5,
     minZoom: 0.05,
@@ -47,22 +47,25 @@ const EDITOR_PRESET = {
     rulerUnits: "px",
     rulerSize: 20,
     // Canvas styling
-    canvasBackgroundColor: "oklch(98.5% 0 0)",
-    canvasBackgroundColorDark: "oklch(21% 0.006 285.885)",
+    canvasBackgroundColor: "transparent",
+    canvasBackgroundColorDark: "transparent",
     // Ruler styling
-    rulerBackgroundColor: "oklch(100% 0 0 / 0.4)",
-    rulerBorderColor: "oklch(98.5% 0 0)",
+    rulerBackgroundColor: "oklch(100% 0 0 / 0.96)",
+    rulerBorderColor: "oklch(96.7% 0.001 286.375)",
     rulerTextColor: "oklch(70.5% 0.015 286.067)",
-    rulerTickColor: "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(37% 0.013 285.805)",
+    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",
+    // Global Binding & Instance Access
+    bindToWindow: false,
+    name: "markupCanvas",
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -315,7 +318,7 @@ const DEFAULT_CONFIG = {
     enablePan: true,
     enableTouch: true,
     enableKeyboard: true,
-    limitKeyboardEventsToCanvas: false,
+    bindKeyboardEventsTo: "canvas",
     // Zoom behavior
     zoomSpeed: 1.5,
     minZoom: 0.05,
@@ -349,7 +352,7 @@ const DEFAULT_CONFIG = {
     canvasBackgroundColorDark: "rgba(40, 40, 40, 1)",
     // Ruler styling (light theme)
     rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
-    rulerBorderColor: "rgba(221, 221, 221, 1)",
+    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)",
@@ -357,10 +360,13 @@ const DEFAULT_CONFIG = {
     rulerBackgroundColorDark: "rgba(30, 30, 30, 0.95)",
     rulerBorderColorDark: "rgba(68, 68, 68, 1)",
     rulerTextColorDark: "rgba(170, 170, 170, 1)",
-    rulerTickColorDark: "rgba(56, 56, 56, 1)",
+    rulerTickColorDark: "rgba(104, 104, 104, 1)",
     gridColorDark: "rgba(232, 86, 193, 0.5)",
     // Theme
     themeMode: "light",
+    // Global Binding & Instance Access
+    bindToWindow: false,
+    name: "markupCanvas",
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -708,6 +714,9 @@ class EventEmitter {
     constructor() {
         this.listeners = new Map();
     }
+    setEmitInterceptor(interceptor) {
+        this.emitInterceptor = interceptor;
+    }
     on(event, handler) {
         if (!this.listeners.has(event)) {
             this.listeners.set(event, new Set());
@@ -721,6 +730,7 @@ class EventEmitter {
         }
     }
     emit(event, data) {
+        this.emitInterceptor?.(event, data);
         const handlers = this.listeners.get(event);
         if (handlers) {
             handlers.forEach((handler) => {
@@ -779,7 +789,7 @@ function setupKeyboardEvents(canvas, config) {
     function handleKeyDown(event) {
         if (!(event instanceof KeyboardEvent))
             return;
-        if (config.limitKeyboardEventsToCanvas && document.activeElement !== canvas.container)
+        if (config.bindKeyboardEventsTo === "canvas" && document.activeElement !== canvas.container)
             return;
         const isFastPan = event.shiftKey;
         const panDistance = config.keyboardPanStep * (isFastPan ? config.keyboardFastMultiplier : 1);
@@ -852,7 +862,7 @@ function setupKeyboardEvents(canvas, config) {
             }
         }
     }
-    const keyboardTarget = config.limitKeyboardEventsToCanvas ? canvas.container : document;
+    const keyboardTarget = config.bindKeyboardEventsTo === "canvas" ? canvas.container : document;
     keyboardTarget.addEventListener("keydown", handleKeyDown);
     canvas.container.addEventListener("mousemove", handleMouseMove);
     return () => {
@@ -1380,25 +1390,22 @@ const GRID_SETTINGS = {
 function createCornerBox(config) {
     const corner = document.createElement("div");
     corner.className = "canvas-ruler corner-box";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     corner.style.cssText = `
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: ${config.rulerSize}px;
 		height: ${config.rulerSize}px;
-		background: ${backgroundColor};
-		border-right: 1px solid ${borderColor};
-		border-bottom: 1px solid ${borderColor};
+		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: ${textColor};
+		color: var(--ruler-text-color);
 		pointer-events: none;
 	`;
     corner.textContent = config.rulerUnits;
@@ -1408,7 +1415,6 @@ function createCornerBox(config) {
 function createGridOverlay(config) {
     const grid = document.createElement("div");
     grid.className = "canvas-ruler grid-overlay";
-    const gridColor = getThemeValue(config, "gridColor");
     grid.style.cssText = `
 		position: absolute;
 		top: ${config.rulerSize}px;
@@ -1418,8 +1424,8 @@ function createGridOverlay(config) {
 		pointer-events: none;
 		z-index: ${RULER_Z_INDEX.GRID};
 		background-image: 
-			linear-gradient(${gridColor} 1px, transparent 1px),
-			linear-gradient(90deg, ${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;
 	`;
@@ -1429,23 +1435,20 @@ function createGridOverlay(config) {
 function createHorizontalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler horizontal-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: 0;
 	left: ${config.rulerSize}px;
 	right: 0;
 	height: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-bottom: 1px solid ${borderColor};
-	border-right: 1px solid ${borderColor};
+	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: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1454,23 +1457,20 @@ function createHorizontalRuler(config) {
 function createVerticalRuler(config) {
     const ruler = document.createElement("div");
     ruler.className = "canvas-ruler vertical-ruler";
-    const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
-    const borderColor = getThemeValue(config, "rulerBorderColor");
-    const textColor = getThemeValue(config, "rulerTextColor");
     ruler.style.cssText = `
 	position: absolute;
 	top: ${config.rulerSize}px;
 	left: 0;
 	bottom: 0;
 	width: ${config.rulerSize}px;
-	background: ${backgroundColor};
-	border-right: 1px solid ${borderColor};
-	border-bottom: 1px solid ${borderColor};
+	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: ${textColor};
+	color: var(--ruler-text-color);
 	overflow: hidden;
   `;
     return ruler;
@@ -1542,27 +1542,26 @@ function calculateTickSpacing(contentSize, canvasSize) {
 
 function createHorizontalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		left: ${pixelPos}px;
 		bottom: 0;
 		width: 1px;
 		height: ${TICK_SETTINGS.TICK_HEIGHT}px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			left: ${pixelPos}px;
 			bottom: ${TICK_SETTINGS.TICK_HEIGHT + 2}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 		`;
@@ -1590,27 +1589,26 @@ function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, sc
 
 function createVerticalTick(container, position, pixelPos, _tickSpacing, config) {
     const tick = document.createElement("div");
-    const tickColor = getThemeValue(config, "rulerTickColor");
+    tick.className = "tick";
     tick.style.cssText = `
 		position: absolute;
 		top: ${pixelPos}px;
 		right: 0;
 		width: ${TICK_SETTINGS.TICK_WIDTH}px;
 		height: 1px;
-		background: ${tickColor};
+		background: var(--ruler-tick-color);
 	`;
     container.appendChild(tick);
     const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
     if (shouldShowLabel) {
         const label = document.createElement("div");
-        const textColor = getThemeValue(config, "rulerTextColor");
         label.style.cssText = `
 			position: absolute;
 			top: ${pixelPos - 6}px;
 			right: ${TICK_SETTINGS.TICK_WIDTH + 6}px;
 			font-size: ${config.rulerFontSize}px;
 			line-height: 1;
-			color: ${textColor};
+			color: var(--ruler-text-color);
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);
@@ -1656,44 +1654,36 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
     }
 }
 
-/**
- * Updates all ruler elements with new theme colors
- * @param elements - The ruler elements to update
- * @param config - The canvas config containing theme and color settings
- */
 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
+    // Update horizontal ruler with CSS variables
     if (elements.horizontalRuler) {
-        elements.horizontalRuler.style.background = backgroundColor;
-        elements.horizontalRuler.style.borderBottomColor = borderColor;
-        elements.horizontalRuler.style.borderRightColor = borderColor;
-        elements.horizontalRuler.style.color = textColor;
+        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
+    // Update vertical ruler with CSS variables
     if (elements.verticalRuler) {
-        elements.verticalRuler.style.background = backgroundColor;
-        elements.verticalRuler.style.borderRightColor = borderColor;
-        elements.verticalRuler.style.borderBottomColor = borderColor;
-        elements.verticalRuler.style.color = textColor;
+        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
+    // Update corner box with CSS variables
     if (elements.cornerBox) {
-        elements.cornerBox.style.background = backgroundColor;
-        elements.cornerBox.style.borderRightColor = borderColor;
-        elements.cornerBox.style.borderBottomColor = borderColor;
-        elements.cornerBox.style.color = textColor;
+        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
+    // Update grid overlay with CSS variables
     if (elements.gridOverlay) {
-        elements.gridOverlay.style.backgroundImage = `
-      linear-gradient(${gridColor} 1px, transparent 1px),
-      linear-gradient(90deg, ${gridColor} 1px, transparent 1px)
-    `;
+        elements.gridOverlay.style.setProperty("--grid-color", gridColor);
     }
 }
 
@@ -1713,6 +1703,7 @@ 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";
@@ -1733,8 +1724,6 @@ function createRulers(canvas, config) {
                     return;
                 // Update all ruler theme colors
                 updateRulerTheme(elements, newConfig);
-                // Re-render rulers to update tick colors
-                safeUpdate();
             },
             show: () => {
                 if (elements.horizontalRuler)
@@ -1804,11 +1793,59 @@ class MarkupCanvas {
             throw new Error("Failed to create canvas");
         }
         this.baseCanvas = canvas;
+        if (this.config.bindToWindow) {
+            this.listen.setEmitInterceptor((event, data) => {
+                this.broadcastEvent(event, data);
+            });
+            this.setupGlobalBinding();
+        }
         this.setupEventHandlers();
         this._isReady = true;
         // Emit ready event
         this.listen.emit("ready", this);
     }
+    setupGlobalBinding() {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const canvasName = this.config.name || "markupCanvas";
+        const windowObj = window;
+        // Bind instance to window
+        windowObj[canvasName] = this;
+        // Track all instances
+        if (!windowObj.__markupCanvasInstances) {
+            windowObj.__markupCanvasInstances = new Map();
+        }
+        windowObj.__markupCanvasInstances.set(canvasName, this);
+    }
+    cleanupGlobalBinding() {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const canvasName = this.config.name || "markupCanvas";
+        const windowObj = window;
+        delete windowObj[canvasName];
+        if (windowObj.__markupCanvasInstances) {
+            windowObj.__markupCanvasInstances.delete(canvasName);
+        }
+    }
+    broadcastEvent(event, data) {
+        if (typeof window === "undefined") {
+            return;
+        }
+        // Receivers can get the instance from the window binding
+        let broadcastData = data;
+        if (event === "ready") {
+            broadcastData = { ready: true };
+        }
+        window.postMessage({
+            source: "markup-canvas",
+            event,
+            data: broadcastData,
+            timestamp: Date.now(),
+            canvasName: this.config.name,
+        }, "*");
+    }
     setupEventHandlers() {
         try {
             // Wheel zoom
@@ -2120,6 +2157,7 @@ class MarkupCanvas {
     }
     // Cleanup method
     cleanup() {
+        this.cleanupGlobalBinding();
         this.cleanupFunctions.forEach((cleanup) => {
             try {
                 cleanup();