@markup-canvas/core 1.0.3 → 1.0.5

package/src/lib/canvas/getCanvasMethods.ts

@@ -40,8 +40,6 @@ export function getCanvasMethods() {
 
     // Handle canvas resize
     handleResize: function (this: BaseCanvas) {
-      const newRect = this.container.getBoundingClientRect();
-
       return true;
     },
 
@@ -68,7 +66,7 @@ export function getCanvasMethods() {
     // Reset view with animation
     resetView: function (this: BaseCanvas) {
       return withTransition(this.transformLayer, this.config, () => {
-        return withRulerSize(this, (rulerSize) => {
+        return withRulerSize(this, this.config.rulerSize, (rulerSize) => {
           const resetTransform: Transform = {
             scale: 1.0,
             translateX: rulerSize * -1,

package/src/lib/canvas/setupTransformLayer.ts

@@ -1,11 +1,10 @@
-import { RULER_SIZE } from "@/lib/rulers/constants";
 import type { MarkupCanvasConfig } from "@/types";
 
 // Sets up the transform layer with proper styles and dimensions
 export function setupTransformLayer(transformLayer: HTMLElement, config: Required<MarkupCanvasConfig>): void {
   transformLayer.style.position = "absolute";
 
-  const rulerOffset = RULER_SIZE;
+  const rulerOffset = config.rulerSize;
 
   transformLayer.style.top = `${rulerOffset}px`;
   transformLayer.style.left = `${rulerOffset}px`;

package/src/lib/config/constants.ts

@@ -47,9 +47,10 @@ export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
   rulerTextColor: "#666",
   rulerMajorTickColor: "#999",
   rulerMinorTickColor: "#ccc",
-  rulerFontSize: 10,
+  rulerFontSize: 9,
   rulerFontFamily: "Monaco, Menlo, monospace",
   rulerUnits: "px",
+  rulerSize: 20,
 
   // Callbacks
   onTransformUpdate: () => {},

package/src/lib/config/createMarkupCanvasConfig.ts

@@ -52,5 +52,10 @@ export function createMarkupCanvasConfig(options: MarkupCanvasConfig = {}): Requ
     config.rulerFontSize = DEFAULT_CONFIG.rulerFontSize;
   }
 
+  if (typeof config.rulerSize !== "number" || config.rulerSize <= 0) {
+    console.warn("Invalid rulerSize, using default");
+    config.rulerSize = DEFAULT_CONFIG.rulerSize;
+  }
+
   return config;
 }

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

@@ -0,0 +1,57 @@
+import type { MarkupCanvasConfig } from "@/types";
+
+export const EDITOR_PRESET: Required<MarkupCanvasConfig> = {
+  // Canvas dimensions
+  width: 4000,
+  height: 4000,
+  enableAcceleration: true,
+
+  // Interaction controls
+  enableZoom: true,
+  enablePan: true,
+  enableTouch: true,
+  enableKeyboard: false,
+  limitKeyboardEventsToCanvas: false,
+
+  // Zoom behavior
+  zoomSpeed: 1.5,
+  minZoom: 0.05,
+  maxZoom: 80,
+  enableTransition: false,
+  transitionDuration: 0.2,
+  enableAdaptiveSpeed: true,
+
+  // Pan behavior
+  enableLeftDrag: true,
+  enableMiddleDrag: true,
+  requireSpaceForMouseDrag: true,
+
+  // Keyboard behavior
+  keyboardPanStep: 50,
+  keyboardFastMultiplier: 20,
+  keyboardZoomStep: 0.2,
+
+  // Click-to-zoom
+  enableClickToZoom: true,
+  clickZoomLevel: 1.0,
+  requireOptionForClickZoom: true,
+
+  // 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)",
+  rulerFontSize: 9,
+  rulerFontFamily: "Monaco, Menlo, monospace",
+  rulerUnits: "px",
+  rulerSize: 20,
+
+  // Callbacks
+  onTransformUpdate: () => {},
+};

package/src/lib/config/presets/index.ts

@@ -0,0 +1 @@
+export { EDITOR_PRESET } from "./editor-preset.js";

package/src/lib/events/keyboard/setupKeyboardEvents.ts

@@ -14,7 +14,7 @@ export function setupKeyboardEvents(canvas: Canvas, config: Required<MarkupCanva
     const rawMouseX = event.clientX - rect.left;
     const rawMouseY = event.clientY - rect.top;
 
-    withRulerOffsets(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
+    withRulerOffsets(canvas, config.rulerSize, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
       lastMouseX = adjustedX;
       lastMouseY = adjustedY;
     });

package/src/lib/events/keyboard/setupKeyboardNavigation.ts

@@ -15,7 +15,7 @@ export function setupKeyboardEvents(canvas: Canvas, config: Required<MarkupCanva
     const rawMouseY = event.clientY - rect.top;
 
     // Use the new helper to adjust for ruler offset
-    withRulerOffsets(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
+    withRulerOffsets(canvas, config.rulerSize, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
       lastMouseX = adjustedX;
       lastMouseY = adjustedY;
     });

package/src/lib/events/mouse/handleClickToZoom.ts

@@ -24,7 +24,7 @@ export function handleClickToZoom(
     const rawClickX = event.clientX - rect.left;
     const rawClickY = event.clientY - rect.top;
 
-    const { clickX, clickY } = withRulerOffset(canvas, rawClickX, rawClickY, (adjustedX, adjustedY) => ({
+    const { clickX, clickY } = withRulerOffset(canvas, rawClickX, rawClickY, config.rulerSize, (adjustedX, adjustedY) => ({
       clickX: adjustedX,
       clickY: adjustedY,
     }));

package/src/lib/events/touch/handleTouchMove.ts

@@ -39,7 +39,7 @@ export function handleTouchMove(event: TouchEvent, canvas: Canvas, touchState: T
         let centerY = currentCenter.y - rect.top;
 
         // Account for ruler offset if rulers are present
-        const adjustedCenter = withRulerOffsetObject(canvas, { x: centerX, y: centerY }, (adjusted) => adjusted);
+        const adjustedCenter = withRulerOffsetObject(canvas, canvas.config.rulerSize, { x: centerX, y: centerY }, (adjusted) => adjusted);
         centerX = adjustedCenter.x;
         centerY = adjustedCenter.y;
 

package/src/lib/events/wheel/handleWheel.ts

@@ -25,7 +25,7 @@ export function handleWheel(event: WheelEvent, canvas: Canvas, config: Required<
     const rawMouseY = event.clientY - rect.top;
 
     // Account for ruler offset
-    const { mouseX, mouseY } = withRulerOffset(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => ({
+    const { mouseX, mouseY } = withRulerOffset(canvas, rawMouseX, rawMouseY, config.rulerSize, (adjustedX, adjustedY) => ({
       mouseX: adjustedX,
       mouseY: adjustedY,
     }));

package/src/lib/helpers/withRulerCheck.ts

@@ -1,22 +1,21 @@
-import { RULER_SIZE } from "../rulers/constants";
-
 export function withRulerCheck<T>(canvas: { container: HTMLElement }, operation: (hasRulers: boolean) => T): T {
   const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
   return operation(hasRulers);
 }
 
-export function withRulerSize<T>(canvas: { container: HTMLElement }, operation: (rulerSize: number) => T): T {
+export function withRulerSize<T>(canvas: { container: HTMLElement }, rulerSize: number, operation: (rulerSize: number) => T): T {
   const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
-  const rulerSize = hasRulers ? RULER_SIZE : 0;
-  return operation(rulerSize);
+  const finalRulerSize = hasRulers ? rulerSize : 0;
+  return operation(finalRulerSize);
 }
 
 export function withRulerAdjustment(
   canvas: { container: HTMLElement },
+  rulerSize: number,
   value: number,
   operation?: (adjustedValue: number) => void
 ): number {
-  return withRulerSize(canvas, (rulerSize) => {
+  return withRulerSize(canvas, rulerSize, (rulerSize) => {
     const adjusted = value - rulerSize;
     operation?.(adjusted);
     return adjusted;
@@ -25,11 +24,12 @@ export function withRulerAdjustment(
 
 export function withRulerOffsets<T>(
   canvas: { container: HTMLElement },
+  rulerSize: number,
   x: number,
   y: number,
   operation: (adjustedX: number, adjustedY: number) => T
 ): T {
-  return withRulerSize(canvas, (rulerSize) => {
+  return withRulerSize(canvas, rulerSize, (rulerSize) => {
     const adjustedX = x - rulerSize;
     const adjustedY = y - rulerSize;
     return operation(adjustedX, adjustedY);
@@ -38,10 +38,11 @@ export function withRulerOffsets<T>(
 
 export function withRulerOffsetObject<T, C extends { x: number; y: number }>(
   canvas: { container: HTMLElement },
+  rulerSize: number,
   coords: C,
   operation: (adjusted: C) => T
 ): T {
-  return withRulerSize(canvas, (rulerSize) => {
+  return withRulerSize(canvas, rulerSize, (rulerSize) => {
     const adjusted = {
       ...coords,
       x: coords.x - rulerSize,

package/src/lib/helpers/withRulerOffset.ts

@@ -1,14 +1,13 @@
-import { RULER_SIZE } from "../rulers/constants";
-
 export function withRulerOffset<T>(
   canvas: { container: HTMLElement },
   x: number,
   y: number,
+  rulerSize: number,
   operation: (adjustedX: number, adjustedY: number) => T
 ): T {
   const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
-  const adjustedX = hasRulers ? x - RULER_SIZE : x;
-  const adjustedY = hasRulers ? y - RULER_SIZE : y;
+  const adjustedX = hasRulers ? x - rulerSize : x;
+  const adjustedY = hasRulers ? y - rulerSize : y;
 
   return operation(adjustedX, adjustedY);
 }

package/src/lib/matrix/getZoomToMouseTransform.ts

@@ -1,7 +1,6 @@
 import { DEFAULT_ZOOM, ZOOM_CHANGE_THRESHOLD } from "@/lib/constants.js";
 import { clampZoom } from "@/lib/matrix/clampZoom.js";
 import type { MarkupCanvasConfig, Transform } from "@/types/index.js";
-import { RULER_SIZE } from "../rulers/constants";
 
 export function getZoomToMouseTransform(
   mouseX: number,
@@ -10,7 +9,7 @@ export function getZoomToMouseTransform(
   zoomFactor: number,
   config: Required<MarkupCanvasConfig>
 ): Transform {
-  const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+  const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
 
   const transform = currentTransform || {
     scale: DEFAULT_ZOOM,

package/src/lib/rulers/constants.ts

@@ -1,6 +1,4 @@
 // Rulers
-export const RULER_SIZE = 24;
-
 export const RULER_Z_INDEX = {
   GRID: 100,
   RULERS: 1000,

package/src/lib/rulers/createCornerBox.ts

@@ -1,27 +1,27 @@
-import type { RulerOptions } from "@/types/index.js";
-import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+import { RULER_Z_INDEX } from "./constants";
 
-export function createCornerBox(config: Required<RulerOptions>): HTMLElement {
+export function createCornerBox(config: Required<MarkupCanvasConfig>): HTMLElement {
   const corner = document.createElement("div");
   corner.className = "canvas-ruler corner-box";
   corner.style.cssText = `
 		position: absolute;
 		top: 0;
 		left: 0;
-		width: ${RULER_SIZE}px;
-		height: ${RULER_SIZE}px;
-		background: ${config.backgroundColor};
-		border-right: 1px solid ${config.borderColor};
-		border-bottom: 1px solid ${config.borderColor};
+		width: ${config.rulerSize}px;
+		height: ${config.rulerSize}px;
+		background: ${config.rulerBackgroundColor};
+		border-right: 1px solid ${config.rulerBorderColor};
+		border-bottom: 1px solid ${config.rulerBorderColor};
 		z-index: ${RULER_Z_INDEX.CORNER};
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-family: ${config.fontFamily};
-		font-size: ${config.fontSize - 2}px;
-		color: ${config.textColor};
+		font-family: ${config.rulerFontFamily};
+		font-size: ${config.rulerFontSize - 2}px;
+		color: ${config.rulerTextColor};
 		pointer-events: none;
 	`;
-  corner.textContent = config.units;
+  corner.textContent = config.rulerUnits;
   return corner;
 }

package/src/lib/rulers/createGridOverlay.ts

@@ -1,13 +1,13 @@
-import type { RulerOptions } from "@/types/index.js";
-import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+import { RULER_Z_INDEX } from "./constants";
 
-export function createGridOverlay(config: Required<RulerOptions>): HTMLElement {
+export function createGridOverlay(config: Required<MarkupCanvasConfig>): HTMLElement {
   const grid = document.createElement("div");
   grid.className = "canvas-ruler grid-overlay";
   grid.style.cssText = `
 		position: absolute;
-		top: ${RULER_SIZE}px;
-		left: ${RULER_SIZE}px;
+		top: ${config.rulerSize}px;
+		left: ${config.rulerSize}px;
 		right: 0;
 		bottom: 0;
 		pointer-events: none;

package/src/lib/rulers/createHorizontalRuler.ts

@@ -1,23 +1,23 @@
-import type { RulerOptions } from "@/types/index.js";
-import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+import { RULER_Z_INDEX } from "./constants";
 
-export function createHorizontalRuler(config: Required<RulerOptions>): HTMLElement {
+export function createHorizontalRuler(config: Required<MarkupCanvasConfig>): HTMLElement {
   const ruler = document.createElement("div");
   ruler.className = "canvas-ruler horizontal-ruler";
   ruler.style.cssText = `
 	position: absolute;
 	top: 0;
-	left: ${RULER_SIZE}px;
+	left: ${config.rulerSize}px;
 	right: 0;
-	height: ${RULER_SIZE}px;
-	background: ${config.backgroundColor};
-	border-bottom: 1px solid ${config.borderColor};
-	border-right: 1px solid ${config.borderColor};
+	height: ${config.rulerSize}px;
+	background: ${config.rulerBackgroundColor};
+	border-bottom: 1px solid ${config.rulerBorderColor};
+	border-right: 1px solid ${config.rulerBorderColor};
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
-	font-family: ${config.fontFamily};
-	font-size: ${config.fontSize}px;
-	color: ${config.textColor};
+	font-family: ${config.rulerFontFamily};
+	font-size: ${config.rulerFontSize}px;
+	color: ${config.rulerTextColor};
 	overflow: hidden;
   `;
   return ruler;

package/src/lib/rulers/createRulerElements.ts

@@ -1,15 +1,14 @@
-import type { RulerOptions } from "@/types/index.js";
+import type { MarkupCanvasConfig, RulerElements } from "@/types/index.js";
 import { createCornerBox } from "./createCornerBox.js";
 import { createGridOverlay } from "./createGridOverlay.js";
 import { createHorizontalRuler } from "./createHorizontalRuler.js";
 import { createVerticalRuler } from "./createVerticalRuler.js";
-import type { RulerElements } from "./RulerElements.js";
 
-export function createRulerElements(container: HTMLElement, config: Required<RulerOptions>): RulerElements {
+export function createRulerElements(container: HTMLElement, config: Required<MarkupCanvasConfig>): RulerElements {
   const horizontalRuler = createHorizontalRuler(config);
   const verticalRuler = createVerticalRuler(config);
   const cornerBox = createCornerBox(config);
-  const gridOverlay = config.showGrid ? createGridOverlay(config) : undefined;
+  const gridOverlay = config.enableGrid ? createGridOverlay(config) : undefined;
 
   container.appendChild(horizontalRuler);
   container.appendChild(verticalRuler);

package/src/lib/rulers/createRulers.ts

@@ -1,6 +1,6 @@
 import type { RulerCanvas as Canvas, MarkupCanvasConfig, RulerSystem } from "@/types/index.js";
+import type { RulerElements } from "@/types/rulers.js";
 import { createRulerElements } from "./createRulerElements.js";
-import type { RulerElements } from "./RulerElements.js";
 import { setupRulerEvents } from "./setupRulerEvents.js";
 import { updateRulers } from "./updateRulers.js";
 
@@ -14,26 +14,13 @@ export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig
   let cleanupEvents: (() => void) | null = null;
   let isDestroyed = false;
 
-  const rulerOptions = {
-    backgroundColor: config.rulerBackgroundColor,
-    borderColor: config.rulerBorderColor,
-    textColor: config.rulerTextColor,
-    majorTickColor: config.rulerMajorTickColor,
-    minorTickColor: config.rulerMinorTickColor,
-    fontSize: config.rulerFontSize,
-    fontFamily: config.rulerFontFamily,
-    showGrid: config.enableGrid,
-    gridColor: config.gridColor,
-    units: config.rulerUnits,
-  };
-
   const safeUpdate = (): void => {
     if (isDestroyed || !elements.horizontalRuler || !elements.verticalRuler) return;
-    updateRulers(canvas, elements.horizontalRuler, elements.verticalRuler, elements.gridOverlay, rulerOptions);
+    updateRulers(canvas, elements.horizontalRuler, elements.verticalRuler, elements.gridOverlay, config);
   };
 
   try {
-    elements = createRulerElements(canvas.container, rulerOptions);
+    elements = createRulerElements(canvas.container, config);
     cleanupEvents = setupRulerEvents(canvas, safeUpdate);
 
     safeUpdate();

package/src/lib/rulers/createVerticalRuler.ts

@@ -1,23 +1,23 @@
-import type { RulerOptions } from "@/types/index.js";
-import { RULER_SIZE, RULER_Z_INDEX } from "./constants";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+import { RULER_Z_INDEX } from "./constants";
 
-export function createVerticalRuler(config: Required<RulerOptions>): HTMLElement {
+export function createVerticalRuler(config: Required<MarkupCanvasConfig>): HTMLElement {
   const ruler = document.createElement("div");
   ruler.className = "canvas-ruler vertical-ruler";
   ruler.style.cssText = `
 	position: absolute;
-	top: ${RULER_SIZE}px;
+	top: ${config.rulerSize}px;
 	left: 0;
 	bottom: 0;
-	width: ${RULER_SIZE}px;
-	background: ${config.backgroundColor};
-	border-right: 1px solid ${config.borderColor};
-	border-bottom: 1px solid ${config.borderColor};
+	width: ${config.rulerSize}px;
+	background: ${config.rulerBackgroundColor};
+	border-right: 1px solid ${config.rulerBorderColor};
+	border-bottom: 1px solid ${config.rulerBorderColor};
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
-	font-family: ${config.fontFamily};
-	font-size: ${config.fontSize}px;
-	color: ${config.textColor};
+	font-family: ${config.rulerFontFamily};
+	font-size: ${config.rulerFontSize}px;
+	color: ${config.rulerTextColor};
 	overflow: hidden;
   `;
   return ruler;

package/src/lib/rulers/index.ts

@@ -1,2 +1,2 @@
-export type { RulerOptions, RulerSystem } from "@/types/index.js";
+export type { RulerSystem } from "@/types/index.js";
 export { createRulers } from "./createRulers.js";

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

@@ -1,12 +1,12 @@
 import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
-import type { RulerOptions } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function createHorizontalTick(
   container: HTMLElement | DocumentFragment,
   position: number,
   pixelPos: number,
   tickSpacing: number,
-  config: Required<RulerOptions>
+  config: Required<MarkupCanvasConfig>
 ): void {
   const tick = document.createElement("div");
   const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
@@ -18,7 +18,7 @@ export function createHorizontalTick(
 		bottom: 0;
 		width: 1px;
 		height: ${tickHeight}px;
-		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
 	`;
 
   container.appendChild(tick);
@@ -30,8 +30,9 @@ export function createHorizontalTick(
 			position: absolute;
 			left: ${pixelPos}px;
 			bottom: ${tickHeight}px;
-			font-size: ${config.fontSize}px;
-			color: ${config.textColor};
+			font-size: ${config.rulerFontSize}px;
+			line-height: 1;
+			color: ${config.rulerTextColor};
 			white-space: nowrap;
 			pointer-events: none;
 		`;

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

@@ -1,12 +1,12 @@
 import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
-import type { RulerOptions } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function createVerticalTick(
   container: HTMLElement | DocumentFragment,
   position: number,
   pixelPos: number,
   tickSpacing: number,
-  config: Required<RulerOptions>
+  config: Required<MarkupCanvasConfig>
 ): void {
   const tick = document.createElement("div");
   const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
@@ -18,7 +18,7 @@ export function createVerticalTick(
 		right: 0;
 		width: ${tickWidth}px;
 		height: 1px;
-		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
 	`;
 
   container.appendChild(tick);
@@ -30,8 +30,9 @@ export function createVerticalTick(
 			position: absolute;
 			top: ${pixelPos - 6}px;
 			right: ${tickWidth + 6}px;
-			font-size: ${config.fontSize}px;
-			color: ${config.textColor};
+			font-size: ${config.rulerFontSize}px;
+			line-height: 1;
+			color: ${config.rulerTextColor};
 			white-space: nowrap;
 			pointer-events: none;
 			transform: rotate(-90deg);

package/src/lib/rulers/updateHorizontalRuler.ts

@@ -1,4 +1,4 @@
-import type { RulerOptions } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 import { calculateTickSpacing } from "./ticks/calculateTickSpacing.js";
 import { createHorizontalTick } from "./ticks/createHorizontalTick.js";
 
@@ -8,7 +8,7 @@ export function updateHorizontalRuler(
   contentRight: number,
   canvasWidth: number,
   scale: number,
-  config: Required<RulerOptions>
+  config: Required<MarkupCanvasConfig>
 ): void {
   const rulerWidth = canvasWidth;
   const contentWidth = contentRight - contentLeft;

package/src/lib/rulers/updateRulers.ts

@@ -1,6 +1,5 @@
 import { updateGrid } from "@/lib/rulers/updateGrid.js";
-import type { RulerCanvas as Canvas, RulerOptions } from "@/types/index.js";
-import { RULER_SIZE } from "./constants";
+import type { RulerCanvas as Canvas, MarkupCanvasConfig } from "@/types/index.js";
 import { updateHorizontalRuler } from "./updateHorizontalRuler.js";
 import { updateVerticalRuler } from "./updateVerticalRuler.js";
 
@@ -9,15 +8,15 @@ export function updateRulers(
   horizontalRuler: HTMLElement,
   verticalRuler: HTMLElement,
   gridOverlay: HTMLElement | undefined,
-  config: Required<RulerOptions>
+  config: Required<MarkupCanvasConfig>
 ): void {
   const bounds = canvas.getBounds();
   const scale = bounds.scale || 1;
   const translateX = bounds.translateX || 0;
   const translateY = bounds.translateY || 0;
 
-  const canvasWidth = bounds.width - RULER_SIZE;
-  const canvasHeight = bounds.height - RULER_SIZE;
+  const canvasWidth = bounds.width - config.rulerSize;
+  const canvasHeight = bounds.height - config.rulerSize;
 
   const contentLeft = -translateX / scale;
   const contentTop = -translateY / scale;

package/src/lib/rulers/updateVerticalRuler.ts

@@ -1,5 +1,5 @@
 import { calculateTickSpacing, createVerticalTick } from "@/lib/rulers/ticks";
-import type { RulerOptions } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function updateVerticalRuler(
   ruler: HTMLElement,
@@ -7,7 +7,7 @@ export function updateVerticalRuler(
   contentBottom: number,
   canvasHeight: number,
   scale: number,
-  config: Required<RulerOptions>
+  config: Required<MarkupCanvasConfig>
 ): void {
   const rulerHeight = canvasHeight;
   const contentHeight = contentBottom - contentTop;

package/src/types/config.ts

@@ -48,6 +48,7 @@ export interface MarkupCanvasConfig {
   rulerFontSize?: number;
   rulerFontFamily?: string;
   rulerUnits?: string;
+  rulerSize?: number;
 
   // Callbacks
   onTransformUpdate?: (transform: Transform) => void;

package/src/types/index.ts

@@ -23,6 +23,6 @@ export type {
 // Ruler types
 export type {
   RulerCanvas,
-  RulerOptions,
+  RulerElements,
   RulerSystem,
 } from "./rulers.js";

package/src/types/rulers.ts

@@ -1,18 +1,5 @@
 import type { CanvasBounds, Transform } from "./canvas.js";
 
-export interface RulerOptions {
-  backgroundColor?: string;
-  borderColor?: string;
-  textColor?: string;
-  majorTickColor?: string;
-  minorTickColor?: string;
-  fontSize?: number;
-  fontFamily?: string;
-  showGrid?: boolean;
-  gridColor?: string;
-  units?: string;
-}
-
 export interface RulerSystem {
   horizontalRuler: HTMLElement;
   verticalRuler: HTMLElement;
@@ -33,3 +20,9 @@ export interface RulerCanvas {
   updateTransform: (newTransform: Partial<Transform>) => boolean;
   getBounds: () => CanvasBounds;
 }
+export interface RulerElements {
+  horizontalRuler: HTMLElement;
+  verticalRuler: HTMLElement;
+  cornerBox: HTMLElement;
+  gridOverlay?: HTMLElement;
+}

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

@@ -1,6 +0,0 @@
-export interface RulerElements {
-    horizontalRuler: HTMLElement;
-    verticalRuler: HTMLElement;
-    cornerBox: HTMLElement;
-    gridOverlay?: HTMLElement;
-}