@markup-canvas/core 1.0.4 → 1.0.5

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { EDITOR_PRESET } from "./lib/config/presets";
 export { MarkupCanvas, MarkupCanvas as default } from "./lib/MarkupCanvas.js";
-export type { BaseCanvas, Canvas, CanvasBounds, CanvasOptions, GestureInfo, MarkupCanvasConfig, MarkupCanvasEvents, MouseDragControls, Point, RulerCanvas, RulerOptions, RulerSystem, TouchState, Transform, ZoomBoundaryOptions, ZoomBoundaryResult, } from "./types/index.js";
+export type { BaseCanvas, Canvas, CanvasBounds, CanvasOptions, GestureInfo, MarkupCanvasConfig, MarkupCanvasEvents, MouseDragControls, Point, RulerCanvas, RulerSystem, TouchState, Transform, ZoomBoundaryOptions, ZoomBoundaryResult, } from "./types/index.js";

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

@@ -3,16 +3,16 @@ export declare function withRulerCheck<T>(canvas: {
 }, operation: (hasRulers: boolean) => T): T;
 export declare function withRulerSize<T>(canvas: {
     container: HTMLElement;
-}, operation: (rulerSize: number) => T): T;
+}, rulerSize: number, operation: (rulerSize: number) => T): T;
 export declare function withRulerAdjustment(canvas: {
     container: HTMLElement;
-}, value: number, operation?: (adjustedValue: number) => void): number;
+}, rulerSize: number, value: number, operation?: (adjustedValue: number) => void): number;
 export declare function withRulerOffsets<T>(canvas: {
     container: HTMLElement;
-}, x: number, y: number, operation: (adjustedX: number, adjustedY: number) => T): T;
+}, rulerSize: number, x: number, y: number, operation: (adjustedX: number, adjustedY: number) => T): T;
 export declare function withRulerOffsetObject<T, C extends {
     x: number;
     y: number;
 }>(canvas: {
     container: HTMLElement;
-}, coords: C, operation: (adjusted: C) => T): T;
+}, rulerSize: number, coords: C, operation: (adjusted: C) => T): T;

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

@@ -1,3 +1,3 @@
 export declare function withRulerOffset<T>(canvas: {
     container: HTMLElement;
-}, x: number, y: number, operation: (adjustedX: number, adjustedY: number) => T): T;
+}, x: number, y: number, rulerSize: number, operation: (adjustedX: number, adjustedY: number) => T): T;

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

@@ -1,4 +1,3 @@
-export declare const RULER_SIZE = 24;
 export declare const RULER_Z_INDEX: {
     readonly GRID: 100;
     readonly RULERS: 1000;

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

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

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

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

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

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

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

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

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

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

package/dist/lib/rulers/index.d.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/dist/lib/rulers/ticks/createHorizontalTick.d.ts

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

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

@@ -1,2 +1,2 @@
-import type { RulerOptions } from "@/types/index.js";
-export declare function updateHorizontalRuler(ruler: HTMLElement, contentLeft: number, contentRight: number, canvasWidth: number, scale: number, config: Required<RulerOptions>): void;
+import type { MarkupCanvasConfig } from "@/types/index.js";
+export declare function updateHorizontalRuler(ruler: HTMLElement, contentLeft: number, contentRight: number, canvasWidth: number, scale: number, config: Required<MarkupCanvasConfig>): void;

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

@@ -1,2 +1,2 @@
-import type { RulerCanvas as Canvas, RulerOptions } from "@/types/index.js";
-export declare function updateRulers(canvas: Canvas, horizontalRuler: HTMLElement, verticalRuler: HTMLElement, gridOverlay: HTMLElement | undefined, config: Required<RulerOptions>): void;
+import type { RulerCanvas as Canvas, MarkupCanvasConfig } from "@/types/index.js";
+export declare function updateRulers(canvas: Canvas, horizontalRuler: HTMLElement, verticalRuler: HTMLElement, gridOverlay: HTMLElement | undefined, config: Required<MarkupCanvasConfig>): void;

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

@@ -1,2 +1,2 @@
-import type { RulerOptions } from "@/types/index.js";
-export declare function updateVerticalRuler(ruler: HTMLElement, contentTop: number, contentBottom: number, canvasHeight: number, scale: number, config: Required<RulerOptions>): void;
+import type { MarkupCanvasConfig } from "@/types/index.js";
+export declare function updateVerticalRuler(ruler: HTMLElement, contentTop: number, contentBottom: number, canvasHeight: number, scale: number, 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.4
+ * @version 1.0.5
  */
 'use strict';
 
@@ -47,9 +47,10 @@ const EDITOR_PRESET = {
     rulerTextColor: "oklch(70.5% 0.015 286.067)",
     rulerMajorTickColor: "oklch(87.1% 0.006 286.286)",
     rulerMinorTickColor: "oklch(92% 0.004 286.32)",
-    rulerFontSize: 8,
+    rulerFontSize: 9,
     rulerFontFamily: "Monaco, Menlo, monospace",
     rulerUnits: "px",
+    rulerSize: 20,
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -82,31 +83,10 @@ function setupContentLayer(contentLayer) {
     contentLayer.style.pointerEvents = "auto";
 }
 
-// Rulers
-const RULER_SIZE = 24;
-const RULER_Z_INDEX = {
-    GRID: 100,
-    RULERS: 1000,
-    CORNER: 1001,
-};
-const TICK_SETTINGS = {
-    MAJOR_HEIGHT: 6,
-    MINOR_HEIGHT: 4,
-    MAJOR_WIDTH: 8,
-    MINOR_WIDTH: 4,
-    MAJOR_MULTIPLIER: 5,
-    LABEL_INTERVAL: 100,
-};
-const GRID_SETTINGS = {
-    BASE_SIZE: 100,
-    MIN_SIZE: 20,
-    MAX_SIZE: 200,
-};
-
 // Sets up the transform layer with proper styles and dimensions
 function setupTransformLayer(transformLayer, config) {
     transformLayer.style.position = "absolute";
-    const rulerOffset = RULER_SIZE;
+    const rulerOffset = config.rulerSize;
     transformLayer.style.top = `${rulerOffset}px`;
     transformLayer.style.left = `${rulerOffset}px`;
     transformLayer.style.width = `${config.width}px`;
@@ -165,7 +145,7 @@ function createMatrix(scale, translateX, translateY) {
 }
 
 function getZoomToMouseTransform(mouseX, mouseY, currentTransform, zoomFactor, config) {
-    const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+    const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
     const transform = currentTransform || {
         scale: DEFAULT_ZOOM,
         translateX: rulerOffset,
@@ -275,20 +255,20 @@ function withRAFThrottle(func) {
     return throttled;
 }
 
-function withRulerSize(canvas, operation) {
+function withRulerSize(canvas, rulerSize, operation) {
     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);
 }
-function withRulerOffsets(canvas, x, y, operation) {
-    return withRulerSize(canvas, (rulerSize) => {
+function withRulerOffsets(canvas, rulerSize, x, y, operation) {
+    return withRulerSize(canvas, rulerSize, (rulerSize) => {
         const adjustedX = x - rulerSize;
         const adjustedY = y - rulerSize;
         return operation(adjustedX, adjustedY);
     });
 }
-function withRulerOffsetObject(canvas, coords, operation) {
-    return withRulerSize(canvas, (rulerSize) => {
+function withRulerOffsetObject(canvas, rulerSize, coords, operation) {
+    return withRulerSize(canvas, rulerSize, (rulerSize) => {
         const adjusted = {
             ...coords,
             x: coords.x - rulerSize,
@@ -298,10 +278,10 @@ function withRulerOffsetObject(canvas, coords, operation) {
     });
 }
 
-function withRulerOffset(canvas, x, y, operation) {
+function withRulerOffset(canvas, x, y, rulerSize, operation) {
     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);
 }
 
@@ -345,9 +325,10 @@ const DEFAULT_CONFIG = {
     rulerTextColor: "#666",
     rulerMajorTickColor: "#999",
     rulerMinorTickColor: "#ccc",
-    rulerFontSize: 10,
+    rulerFontSize: 9,
     rulerFontFamily: "Monaco, Menlo, monospace",
     rulerUnits: "px",
+    rulerSize: 20,
     // Callbacks
     onTransformUpdate: () => { },
 };
@@ -366,8 +347,8 @@ function getCanvasBounds(canvas) {
         const totalWidth = containerRect.width || container.clientWidth || 0;
         const totalHeight = containerRect.height || container.clientHeight || 0;
         // Calculate canvas dimensions accounting for rulers
-        const canvasWidth = withRulerSize({ container }, (rulerSize) => Math.max(0, totalWidth - rulerSize));
-        const canvasHeight = withRulerSize({ container }, (rulerSize) => Math.max(0, totalHeight - rulerSize));
+        const canvasWidth = withRulerSize({ container }, config.rulerSize, (rulerSize) => Math.max(0, totalWidth - rulerSize));
+        const canvasHeight = withRulerSize({ container }, config.rulerSize, (rulerSize) => Math.max(0, totalHeight - rulerSize));
         // Get content dimensions
         const contentWidth = config.width || DEFAULT_CONFIG.width;
         const contentHeight = config.height || DEFAULT_CONFIG.height;
@@ -514,7 +495,6 @@ function getCanvasMethods() {
         },
         // Handle canvas resize
         handleResize: function () {
-            this.container.getBoundingClientRect();
             return true;
         },
         // Set zoom level
@@ -537,7 +517,7 @@ function getCanvasMethods() {
         // Reset view with animation
         resetView: function () {
             return withTransition(this.transformLayer, this.config, () => {
-                return withRulerSize(this, (rulerSize) => {
+                return withRulerSize(this, this.config.rulerSize, (rulerSize) => {
                     const resetTransform = {
                         scale: 1.0,
                         translateX: rulerSize * -1,
@@ -610,7 +590,7 @@ function createCanvas(container, config) {
         if (config.enableAcceleration) {
             enableHardwareAcceleration(transformLayer);
         }
-        const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+        const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
         const initialTransform = {
             scale: DEFAULT_ZOOM,
             translateX: rulerOffset,
@@ -680,6 +660,10 @@ function createMarkupCanvasConfig(options = {}) {
         console.warn("Invalid rulerFontSize, using default");
         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;
 }
 
@@ -750,7 +734,7 @@ function setupKeyboardEvents(canvas, config) {
         const rect = canvas.container.getBoundingClientRect();
         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;
         });
@@ -950,7 +934,7 @@ function handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isD
         const rect = canvas.container.getBoundingClientRect();
         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,
         }));
@@ -1177,7 +1161,7 @@ function handleTouchMove(event, canvas, touchState) {
                 let centerX = currentCenter.x - rect.left;
                 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;
                 // Touch zoom uses global transition settings
@@ -1292,7 +1276,7 @@ function handleWheel(event, canvas, config) {
         const rawMouseX = event.clientX - rect.left;
         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,
         }));
@@ -1339,6 +1323,26 @@ function setupWheelEvents(canvas, config) {
     };
 }
 
+// Rulers
+const RULER_Z_INDEX = {
+    GRID: 100,
+    RULERS: 1000,
+    CORNER: 1001,
+};
+const TICK_SETTINGS = {
+    MAJOR_HEIGHT: 6,
+    MINOR_HEIGHT: 4,
+    MAJOR_WIDTH: 8,
+    MINOR_WIDTH: 4,
+    MAJOR_MULTIPLIER: 5,
+    LABEL_INTERVAL: 100,
+};
+const GRID_SETTINGS = {
+    BASE_SIZE: 100,
+    MIN_SIZE: 20,
+    MAX_SIZE: 200,
+};
+
 function createCornerBox(config) {
     const corner = document.createElement("div");
     corner.className = "canvas-ruler corner-box";
@@ -1346,21 +1350,21 @@ function createCornerBox(config) {
 		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;
 }
 
@@ -1369,8 +1373,8 @@ function createGridOverlay(config) {
     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;
@@ -1390,17 +1394,17 @@ function createHorizontalRuler(config) {
     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;
@@ -1411,18 +1415,18 @@ function createVerticalRuler(config) {
     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;
@@ -1432,7 +1436,7 @@ function createRulerElements(container, config) {
     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);
     container.appendChild(cornerBox);
@@ -1502,7 +1506,7 @@ function createHorizontalTick(container, position, pixelPos, tickSpacing, config
 		bottom: 0;
 		width: 1px;
 		height: ${tickHeight}px;
-		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
 	`;
     container.appendChild(tick);
     const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
@@ -1512,8 +1516,9 @@ function createHorizontalTick(container, position, pixelPos, tickSpacing, config
 			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;
 		`;
@@ -1549,7 +1554,7 @@ function createVerticalTick(container, position, pixelPos, tickSpacing, config)
 		right: 0;
 		width: ${tickWidth}px;
 		height: 1px;
-		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+		background: ${isMajor ? config.rulerMajorTickColor : config.rulerMinorTickColor};
 	`;
     container.appendChild(tick);
     const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
@@ -1559,8 +1564,9 @@ function createVerticalTick(container, position, pixelPos, tickSpacing, config)
 			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);
@@ -1593,8 +1599,8 @@ function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, confi
     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;
     const contentRight = contentLeft + canvasWidth / scale;
@@ -1614,25 +1620,13 @@ function createRulers(canvas, config) {
     let elements;
     let cleanupEvents = 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 = () => {
         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();
         return {