@markup-canvas/core 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/lib/rulers/updateRulerTheme.d.ts +0 -5
  2. package/dist/markup-canvas.cjs.js +46 -67
  3. package/dist/markup-canvas.esm.js +46 -67
  4. package/dist/markup-canvas.umd.js +41 -62
  5. package/dist/markup-canvas.umd.min.js +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/config/constants.ts +2 -2
  8. package/src/lib/config/presets/editor-preset.ts +5 -5
  9. package/src/lib/rulers/createCornerBox.ts +4 -8
  10. package/src/lib/rulers/createGridOverlay.ts +2 -4
  11. package/src/lib/rulers/createHorizontalRuler.ts +4 -8
  12. package/src/lib/rulers/createRulers.ts +2 -3
  13. package/src/lib/rulers/createVerticalRuler.ts +4 -8
  14. package/src/lib/rulers/ticks/createHorizontalTick.ts +3 -5
  15. package/src/lib/rulers/ticks/createVerticalTick.ts +3 -5
  16. package/src/lib/rulers/updateRulerTheme.ts +17 -25
package/src/lib/rulers/ticks/createHorizontalTick.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { getThemeValue } from "@/lib/helpers/index.js";
2
1
  import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
3
2
  import type { MarkupCanvasConfig } from "@/types/index.js";
4
3
 
@@ -10,15 +9,15 @@ export function createHorizontalTick(
10
9
  config: Required<MarkupCanvasConfig>
11
10
  ): void {
12
11
  const tick = document.createElement("div");
13
- const tickColor = getThemeValue(config, "rulerTickColor");
14
12
 
13
+ tick.className = "tick";
15
14
  tick.style.cssText = `
16
15
  position: absolute;
17
16
  left: ${pixelPos}px;
18
17
  bottom: 0;
19
18
  width: 1px;
20
19
  height: ${TICK_SETTINGS.TICK_HEIGHT}px;
21
- background: ${tickColor};
20
+ background: var(--ruler-tick-color);
22
21
  `;
23
22
 
24
23
  container.appendChild(tick);
@@ -26,7 +25,6 @@ export function createHorizontalTick(
26
25
  const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
27
26
  if (shouldShowLabel) {
28
27
  const label = document.createElement("div");
29
- const textColor = getThemeValue(config, "rulerTextColor");
30
28
 
31
29
  label.style.cssText = `
32
30
  position: absolute;
@@ -34,7 +32,7 @@ export function createHorizontalTick(
34
32
  bottom: ${TICK_SETTINGS.TICK_HEIGHT + 2}px;
35
33
  font-size: ${config.rulerFontSize}px;
36
34
  line-height: 1;
37
- color: ${textColor};
35
+ color: var(--ruler-text-color);
38
36
  white-space: nowrap;
39
37
  pointer-events: none;
40
38
  `;
package/src/lib/rulers/ticks/createVerticalTick.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { getThemeValue } from "@/lib/helpers/index.js";
2
1
  import { TICK_SETTINGS } from "@/lib/rulers/constants.js";
3
2
  import type { MarkupCanvasConfig } from "@/types/index.js";
4
3
 
@@ -10,15 +9,15 @@ export function createVerticalTick(
10
9
  config: Required<MarkupCanvasConfig>
11
10
  ): void {
12
11
  const tick = document.createElement("div");
13
- const tickColor = getThemeValue(config, "rulerTickColor");
14
12
 
13
+ tick.className = "tick";
15
14
  tick.style.cssText = `
16
15
  position: absolute;
17
16
  top: ${pixelPos}px;
18
17
  right: 0;
19
18
  width: ${TICK_SETTINGS.TICK_WIDTH}px;
20
19
  height: 1px;
21
- background: ${tickColor};
20
+ background: var(--ruler-tick-color);
22
21
  `;
23
22
 
24
23
  container.appendChild(tick);
@@ -26,7 +25,6 @@ export function createVerticalTick(
26
25
  const shouldShowLabel = position % TICK_SETTINGS.TICK_LABEL_INTERVAL === 0;
27
26
  if (shouldShowLabel) {
28
27
  const label = document.createElement("div");
29
- const textColor = getThemeValue(config, "rulerTextColor");
30
28
 
31
29
  label.style.cssText = `
32
30
  position: absolute;
@@ -34,7 +32,7 @@ export function createVerticalTick(
34
32
  right: ${TICK_SETTINGS.TICK_WIDTH + 6}px;
35
33
  font-size: ${config.rulerFontSize}px;
36
34
  line-height: 1;
37
- color: ${textColor};
35
+ color: var(--ruler-text-color);
38
36
  white-space: nowrap;
39
37
  pointer-events: none;
40
38
  transform: rotate(-90deg);
package/src/lib/rulers/updateRulerTheme.ts CHANGED
@@ -8,47 +8,39 @@ export interface RulerThemeUpdater {
8
8
  gridOverlay?: HTMLElement;
9
9
  }
10
10
 
11
- /**
12
- * Updates all ruler elements with new theme colors
13
- * @param elements - The ruler elements to update
14
- * @param config - The canvas config containing theme and color settings
15
- */
16
11
  export function updateRulerTheme(elements: RulerThemeUpdater, config: Required<MarkupCanvasConfig>): void {
17
12
  // Get theme-aware colors
18
13
  const backgroundColor = getThemeValue(config, "rulerBackgroundColor");
19
14
  const borderColor = getThemeValue(config, "rulerBorderColor");
20
15
  const textColor = getThemeValue(config, "rulerTextColor");
16
+ const tickColor = getThemeValue(config, "rulerTickColor");
21
17
  const gridColor = getThemeValue(config, "gridColor");
22
18
 
23
- // Update horizontal ruler
19
+ // Update horizontal ruler with CSS variables
24
20
  if (elements.horizontalRuler) {
25
- elements.horizontalRuler.style.background = backgroundColor;
26
- elements.horizontalRuler.style.borderBottomColor = borderColor;
27
- elements.horizontalRuler.style.borderRightColor = borderColor;
28
- elements.horizontalRuler.style.color = textColor;
21
+ elements.horizontalRuler.style.setProperty("--ruler-background-color", backgroundColor);
22
+ elements.horizontalRuler.style.setProperty("--ruler-border-color", borderColor);
23
+ elements.horizontalRuler.style.setProperty("--ruler-text-color", textColor);
24
+ elements.horizontalRuler.style.setProperty("--ruler-tick-color", tickColor);
29
25
  }
30
26
 
31
- // Update vertical ruler
27
+ // Update vertical ruler with CSS variables
32
28
  if (elements.verticalRuler) {
33
- elements.verticalRuler.style.background = backgroundColor;
34
- elements.verticalRuler.style.borderRightColor = borderColor;
35
- elements.verticalRuler.style.borderBottomColor = borderColor;
36
- elements.verticalRuler.style.color = textColor;
29
+ elements.verticalRuler.style.setProperty("--ruler-background-color", backgroundColor);
30
+ elements.verticalRuler.style.setProperty("--ruler-border-color", borderColor);
31
+ elements.verticalRuler.style.setProperty("--ruler-text-color", textColor);
32
+ elements.verticalRuler.style.setProperty("--ruler-tick-color", tickColor);
37
33
  }
38
34
 
39
- // Update corner box
35
+ // Update corner box with CSS variables
40
36
  if (elements.cornerBox) {
41
- elements.cornerBox.style.background = backgroundColor;
42
- elements.cornerBox.style.borderRightColor = borderColor;
43
- elements.cornerBox.style.borderBottomColor = borderColor;
44
- elements.cornerBox.style.color = textColor;
37
+ elements.cornerBox.style.setProperty("--ruler-background-color", backgroundColor);
38
+ elements.cornerBox.style.setProperty("--ruler-border-color", borderColor);
39
+ elements.cornerBox.style.setProperty("--ruler-text-color", textColor);
45
40
  }
46
41
 
47
- // Update grid overlay
42
+ // Update grid overlay with CSS variables
48
43
  if (elements.gridOverlay) {
49
- elements.gridOverlay.style.backgroundImage = `
50
- linear-gradient(${gridColor} 1px, transparent 1px),
51
- linear-gradient(90deg, ${gridColor} 1px, transparent 1px)
52
- `;
44
+ elements.gridOverlay.style.setProperty("--grid-color", gridColor);
53
45
  }
54
46
  }