@markup-canvas/core 1.0.5 → 1.0.7

package/src/lib/canvas/setupCanvasContainer.ts

@@ -1,7 +1,9 @@
 import { checkContainerDimensions } from "@/lib/canvas/checkContainerDimensions";
 import { CANVAS_CONTAINER_CLASS } from "@/lib/constants";
+import { getThemeValue } from "@/lib/helpers/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
-export function setupCanvasContainer(container: HTMLElement): void {
+export function setupCanvasContainer(container: HTMLElement, config?: Required<MarkupCanvasConfig>): void {
   const currentPosition = getComputedStyle(container).position;
   if (currentPosition === "static") {
     container.style.position = "relative";
@@ -10,6 +12,12 @@ export function setupCanvasContainer(container: HTMLElement): void {
   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");
   }

package/src/lib/config/constants.ts

@@ -38,20 +38,35 @@ export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
 
   // 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(221, 221, 221, 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(56, 56, 56, 1)",
+  gridColorDark: "rgba(232, 86, 193, 0.5)",
+
+  // Theme
+  themeMode: "light",
+
   // Callbacks
   onTransformUpdate: () => {},
 };

package/src/lib/config/presets/editor-preset.ts

@@ -39,19 +39,35 @@ export const EDITOR_PRESET: Required<MarkupCanvasConfig> = {
   // Visual elements
   enableRulers: true,
   enableGrid: false,
-  gridColor: "rgba(0, 123, 255, 0.1)",
+  showRulers: true,
+  showGrid: false,
 
-  // 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)",
   rulerFontSize: 9,
   rulerFontFamily: "Monaco, Menlo, monospace",
   rulerUnits: "px",
   rulerSize: 20,
 
+  // Canvas styling
+  canvasBackgroundColor: "oklch(98.5% 0 0)",
+  canvasBackgroundColorDark: "oklch(21% 0.006 285.885)",
+
+  // Ruler styling
+  rulerBackgroundColor: "oklch(100% 0 0 / 0.4)",
+  rulerBorderColor: "oklch(98.5% 0 0)",
+  rulerTextColor: "oklch(70.5% 0.015 286.067)",
+  rulerTickColor: "oklch(70.5% 0.015 286.067)",
+  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)",
+  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: () => {},
 };

package/src/lib/helpers/index.ts

@@ -10,3 +10,4 @@ export {
   withRulerSize,
 } from "./withRulerCheck.js";
 export { withRulerOffset } from "./withRulerOffset.js";
+export { getThemeValue } from "./withTheme.js";

package/src/lib/helpers/withTheme.ts

@@ -0,0 +1,17 @@
+import type { MarkupCanvasConfig } from "@/types";
+
+type ThemeColorKey =
+  | "canvasBackgroundColor"
+  | "rulerBackgroundColor"
+  | "rulerBorderColor"
+  | "rulerTextColor"
+  | "rulerTickColor"
+  | "gridColor";
+
+export function getThemeValue(config: Required<MarkupCanvasConfig>, key: ThemeColorKey): string {
+  if (config.themeMode === "dark") {
+    const darkKey = `${key}Dark` as keyof Required<MarkupCanvasConfig>;
+    return config[darkKey] as string;
+  }
+  return config[key as keyof Required<MarkupCanvasConfig>] as string;
+}

package/src/lib/rulers/constants.ts

@@ -6,12 +6,9 @@ export const RULER_Z_INDEX = {
 } as const;
 
 export 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,
 } as const;
 
 export const GRID_SETTINGS = {

package/src/lib/rulers/createCornerBox.ts

@@ -1,25 +1,30 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 import { RULER_Z_INDEX } from "./constants";
 
 export function createCornerBox(config: Required<MarkupCanvasConfig>): HTMLElement {
   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: ${config.rulerBackgroundColor};
-		border-right: 1px solid ${config.rulerBorderColor};
-		border-bottom: 1px solid ${config.rulerBorderColor};
+		background: ${backgroundColor};
+		border-right: 1px solid ${borderColor};
+		border-bottom: 1px solid ${borderColor};
 		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: ${textColor};
 		pointer-events: none;
 	`;
   corner.textContent = config.rulerUnits;

package/src/lib/rulers/createGridOverlay.ts

@@ -1,9 +1,12 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 import { RULER_Z_INDEX } from "./constants";
 
 export function createGridOverlay(config: Required<MarkupCanvasConfig>): HTMLElement {
   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;
@@ -13,8 +16,8 @@ export function createGridOverlay(config: Required<MarkupCanvasConfig>): HTMLEle
 		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(${gridColor} 1px, transparent 1px),
+			linear-gradient(90deg, ${gridColor} 1px, transparent 1px);
 		background-size: 100px 100px;
 		opacity: 0.5;
 	`;

package/src/lib/rulers/createHorizontalRuler.ts

@@ -1,23 +1,28 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 import { RULER_Z_INDEX } from "./constants";
 
 export function createHorizontalRuler(config: Required<MarkupCanvasConfig>): HTMLElement {
   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: ${config.rulerBackgroundColor};
-	border-bottom: 1px solid ${config.rulerBorderColor};
-	border-right: 1px solid ${config.rulerBorderColor};
+	background: ${backgroundColor};
+	border-bottom: 1px solid ${borderColor};
+	border-right: 1px solid ${borderColor};
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${config.rulerTextColor};
+	color: ${textColor};
 	overflow: hidden;
   `;
   return ruler;

package/src/lib/rulers/createRulers.ts

@@ -3,6 +3,7 @@ import type { RulerElements } from "@/types/rulers.js";
 import { createRulerElements } from "./createRulerElements.js";
 import { setupRulerEvents } from "./setupRulerEvents.js";
 import { updateRulers } from "./updateRulers.js";
+import { updateRulerTheme } from "./updateRulerTheme.js";
 
 export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig>): RulerSystem | null {
   if (!canvas?.container) {
@@ -25,6 +26,15 @@ export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig
 
     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,
@@ -33,6 +43,16 @@ export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig
 
       update: safeUpdate,
 
+      updateTheme: (newConfig: Required<MarkupCanvasConfig>) => {
+        if (isDestroyed) return;
+
+        // Update all ruler theme colors
+        updateRulerTheme(elements, newConfig);
+
+        // Re-render rulers to update tick colors
+        safeUpdate();
+      },
+
       show: () => {
         if (elements.horizontalRuler) elements.horizontalRuler.style.display = "block";
         if (elements.verticalRuler) elements.verticalRuler.style.display = "block";

package/src/lib/rulers/createVerticalRuler.ts

@@ -1,23 +1,28 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 import { RULER_Z_INDEX } from "./constants";
 
 export function createVerticalRuler(config: Required<MarkupCanvasConfig>): HTMLElement {
   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: ${config.rulerBackgroundColor};
-	border-right: 1px solid ${config.rulerBorderColor};
-	border-bottom: 1px solid ${config.rulerBorderColor};
+	background: ${backgroundColor};
+	border-right: 1px solid ${borderColor};
+	border-bottom: 1px solid ${borderColor};
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
 	font-size: ${config.rulerFontSize}px;
-	color: ${config.rulerTextColor};
+	color: ${textColor};
 	overflow: hidden;
   `;
   return ruler;

package/src/lib/rulers/ticks/createHorizontalTick.ts

@@ -1,3 +1,4 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 
@@ -5,34 +6,35 @@ export function createHorizontalTick(
   container: HTMLElement | DocumentFragment,
   position: number,
   pixelPos: number,
-  tickSpacing: number,
+  _tickSpacing: number,
   config: Required<MarkupCanvasConfig>
 ): void {
   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;
+  const tickColor = getThemeValue(config, "rulerTickColor");
 
   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: ${tickColor};
 	`;
 
   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");
+    const textColor = getThemeValue(config, "rulerTextColor");
+
     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: ${textColor};
 			white-space: nowrap;
 			pointer-events: none;
 		`;

package/src/lib/rulers/ticks/createVerticalTick.ts

@@ -1,3 +1,4 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
 import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
 import type { MarkupCanvasConfig } from "@/types/index.js";
 
@@ -5,34 +6,35 @@ export function createVerticalTick(
   container: HTMLElement | DocumentFragment,
   position: number,
   pixelPos: number,
-  tickSpacing: number,
+  _tickSpacing: number,
   config: Required<MarkupCanvasConfig>
 ): void {
   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;
+  const tickColor = getThemeValue(config, "rulerTickColor");
 
   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: ${tickColor};
 	`;
 
   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");
+    const textColor = getThemeValue(config, "rulerTextColor");
+
     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: ${textColor};
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);

package/src/lib/rulers/updateRulerTheme.ts

@@ -0,0 +1,54 @@
+import { getThemeValue } from "@/lib/helpers/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export interface RulerThemeUpdater {
+  horizontalRuler?: HTMLElement;
+  verticalRuler?: HTMLElement;
+  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 function updateRulerTheme(elements: RulerThemeUpdater, config: Required<MarkupCanvasConfig>): void {
+  // Get theme-aware colors
+  const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
+  const borderColor = getThemeValue(config, "rulerBorderColor");
+  const textColor = getThemeValue(config, "rulerTextColor");
+  const gridColor = getThemeValue(config, "gridColor");
+
+  // Update horizontal ruler
+  if (elements.horizontalRuler) {
+    elements.horizontalRuler.style.background = backgroundColor;
+    elements.horizontalRuler.style.borderBottomColor = borderColor;
+    elements.horizontalRuler.style.borderRightColor = borderColor;
+    elements.horizontalRuler.style.color = textColor;
+  }
+
+  // Update vertical ruler
+  if (elements.verticalRuler) {
+    elements.verticalRuler.style.background = backgroundColor;
+    elements.verticalRuler.style.borderRightColor = borderColor;
+    elements.verticalRuler.style.borderBottomColor = borderColor;
+    elements.verticalRuler.style.color = textColor;
+  }
+
+  // Update corner box
+  if (elements.cornerBox) {
+    elements.cornerBox.style.background = backgroundColor;
+    elements.cornerBox.style.borderRightColor = borderColor;
+    elements.cornerBox.style.borderBottomColor = borderColor;
+    elements.cornerBox.style.color = textColor;
+  }
+
+  // Update grid overlay
+  if (elements.gridOverlay) {
+    elements.gridOverlay.style.backgroundImage = `
+      linear-gradient(${gridColor} 1px, transparent 1px),
+      linear-gradient(90deg, ${gridColor} 1px, transparent 1px)
+    `;
+  }
+}

package/src/types/config.ts

@@ -37,19 +37,34 @@ export interface MarkupCanvasConfig {
   // Visual elements
   enableRulers?: boolean;
   enableGrid?: boolean;
+  showRulers?: boolean;
+  showGrid?: boolean;
   gridColor?: string;
 
-  // Ruler styling
+  // Canvas styling
+  canvasBackgroundColor?: string;
+  canvasBackgroundColorDark?: string;
+
+  // Ruler styling (light theme)
   rulerBackgroundColor?: string;
   rulerBorderColor?: string;
   rulerTextColor?: string;
-  rulerMajorTickColor?: string;
-  rulerMinorTickColor?: string;
+  rulerTickColor?: string;
   rulerFontSize?: number;
   rulerFontFamily?: string;
   rulerUnits?: string;
   rulerSize?: number;
 
+  // Ruler styling (dark theme)
+  rulerBackgroundColorDark?: string;
+  rulerBorderColorDark?: string;
+  rulerTextColorDark?: string;
+  rulerTickColorDark?: string;
+  gridColorDark?: string;
+
+  // Theme
+  themeMode?: "light" | "dark";
+
   // Callbacks
   onTransformUpdate?: (transform: Transform) => void;
 }

package/src/types/rulers.ts

@@ -1,4 +1,5 @@
 import type { CanvasBounds, Transform } from "./canvas.js";
+import type { MarkupCanvasConfig } from "./config.js";
 
 export interface RulerSystem {
   horizontalRuler: HTMLElement;
@@ -6,6 +7,7 @@ export interface RulerSystem {
   cornerBox: HTMLElement;
   gridOverlay?: HTMLElement;
   update: () => void;
+  updateTheme: (config: Required<MarkupCanvasConfig>) => void;
   show: () => void;
   hide: () => void;
   toggleGrid: () => void;