@tsdraw/core 0.9.0 → 0.9.1

package/dist/index.cjs

@@ -561,7 +561,11 @@ function getLineDash(dash, width) {
 var DEFAULT_SPACING = 20;
 var DEFAULT_LINE_WIDTH = 0.5;
 var DEFAULT_DOT_RADIUS = 1;
-var DEFAULT_OPACITY = 0.25;
+var DEFAULT_OPACITY = 1;
+var LINE_GAP_FADE_IN = 3;
+var LINE_GAP_FADE_FULL = 8;
+var DOT_GAP_FADE_IN = 2;
+var DOT_GAP_FADE_FULL = 16;
 function resolvePresetPatternColor(colorLight, colorDark, theme) {
   if (theme === "dark") return colorDark ?? colorLight ?? "#888888";
   return colorLight ?? "#c0c0c0";
@@ -574,56 +578,116 @@ function visiblePageRect(viewport, canvasWidth, canvasHeight) {
     maxY: (canvasHeight - viewport.y) / viewport.zoom
   };
 }
-function drawHorizontalLines(ctx, visible, spacing, lineWidth, color, opacity) {
+function isOnGrid(value, gridSpacing) {
+  const remainder = (value % gridSpacing + gridSpacing) % gridSpacing;
+  return remainder < 0.5 || remainder > gridSpacing - 0.5;
+}
+function fadeForScreenGap(screenGap, fadeIn, fadeFull) {
+  return Math.min(1, Math.max(0, (screenGap - fadeIn) / (fadeFull - fadeIn)));
+}
+function buildLevels(baseSpacing, zoom, fadeIn, fadeFull) {
+  let topSpacing = baseSpacing;
+  while (topSpacing * zoom < fadeFull) {
+    topSpacing *= 2;
+  }
+  const levels = [];
+  for (let s = topSpacing; s >= baseSpacing; s /= 2) {
+    const fade = fadeForScreenGap(s * zoom, fadeIn, fadeFull);
+    if (fade < 0.01) break;
+    levels.push({ spacing: s, fade });
+  }
+  return levels;
+}
+function drawDotTile(ctx, physicalWidth, physicalHeight, panXPx, panYPx, exactTileSize, radiusPx, color, alpha) {
+  if (alpha < 5e-3 || exactTileSize < 2) return;
+  const tilePixels = Math.ceil(exactTileSize);
+  const tileScale = exactTileSize / tilePixels;
+  const center = tilePixels / 2;
+  const tile = new OffscreenCanvas(tilePixels, tilePixels);
+  const tctx = tile.getContext("2d");
+  tctx.fillStyle = color;
+  tctx.beginPath();
+  tctx.arc(center, center, radiusPx / tileScale, 0, Math.PI * 2);
+  tctx.fill();
+  const pattern = ctx.createPattern(tile, "repeat");
+  if (!pattern) return;
+  pattern.setTransform(
+    new DOMMatrix().translateSelf(panXPx - exactTileSize / 2, panYPx - exactTileSize / 2).scaleSelf(tileScale, tileScale)
+  );
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.globalAlpha = alpha;
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, 0, physicalWidth, physicalHeight);
+  ctx.restore();
+}
+function drawMergingDots(ctx, viewport, canvasWidth, canvasHeight, baseSpacing, dotRadius, color, opacity) {
+  const dpr = ctx.getTransform().a;
+  const levels = buildLevels(baseSpacing, viewport.zoom, DOT_GAP_FADE_IN, DOT_GAP_FADE_FULL);
+  if (levels.length === 0) return;
+  const physicalWidth = canvasWidth * dpr;
+  const physicalHeight = canvasHeight * dpr;
+  const panXPx = viewport.x * dpr;
+  const panYPx = viewport.y * dpr;
+  const radiusPx = dotRadius * dpr;
+  for (const level of levels) {
+    const tileSize = level.spacing * viewport.zoom * dpr;
+    drawDotTile(ctx, physicalWidth, physicalHeight, panXPx, panYPx, tileSize, radiusPx, color, opacity * level.fade);
+  }
+}
+function drawHorizontalLinesForLevel(ctx, visible, spacing, skipSpacing, lineWidth, color, alpha) {
   const startY = Math.floor(visible.minY / spacing) * spacing;
   ctx.save();
   ctx.strokeStyle = color;
-  ctx.lineWidth = lineWidth / ctx.getTransform().a;
-  ctx.globalAlpha = opacity;
+  ctx.lineWidth = lineWidth;
+  ctx.globalAlpha = alpha;
   ctx.beginPath();
   for (let y = startY; y <= visible.maxY; y += spacing) {
+    if (skipSpacing > 0 && isOnGrid(y, skipSpacing)) continue;
     ctx.moveTo(visible.minX, y);
     ctx.lineTo(visible.maxX, y);
   }
   ctx.stroke();
   ctx.restore();
 }
-function drawGridLines(ctx, visible, spacing, lineWidth, color, opacity) {
+function drawMergingLines(ctx, visible, baseSpacing, lineWidth, color, opacity, zoom) {
+  const compensatedWidth = lineWidth / ctx.getTransform().a;
+  const levels = buildLevels(baseSpacing, zoom, LINE_GAP_FADE_IN, LINE_GAP_FADE_FULL);
+  for (let i = 0; i < levels.length; i++) {
+    const level = levels[i];
+    const coarserSpacing = i > 0 ? levels[i - 1].spacing : 0;
+    drawHorizontalLinesForLevel(ctx, visible, level.spacing, coarserSpacing, compensatedWidth, color, opacity * level.fade);
+  }
+}
+function drawGridForLevel(ctx, visible, spacing, skipSpacing, lineWidth, color, alpha) {
   const startX = Math.floor(visible.minX / spacing) * spacing;
   const startY = Math.floor(visible.minY / spacing) * spacing;
-  const compensatedWidth = lineWidth / ctx.getTransform().a;
   ctx.save();
   ctx.strokeStyle = color;
-  ctx.lineWidth = compensatedWidth;
-  ctx.globalAlpha = opacity;
+  ctx.lineWidth = lineWidth;
+  ctx.globalAlpha = alpha;
   ctx.beginPath();
   for (let x = startX; x <= visible.maxX; x += spacing) {
+    if (skipSpacing > 0 && isOnGrid(x, skipSpacing)) continue;
     ctx.moveTo(x, visible.minY);
     ctx.lineTo(x, visible.maxY);
   }
   for (let y = startY; y <= visible.maxY; y += spacing) {
+    if (skipSpacing > 0 && isOnGrid(y, skipSpacing)) continue;
     ctx.moveTo(visible.minX, y);
     ctx.lineTo(visible.maxX, y);
   }
   ctx.stroke();
   ctx.restore();
 }
-function drawDotPattern(ctx, visible, spacing, dotRadius, color, opacity) {
-  const startX = Math.floor(visible.minX / spacing) * spacing;
-  const startY = Math.floor(visible.minY / spacing) * spacing;
-  const compensatedRadius = dotRadius / ctx.getTransform().a;
-  ctx.save();
-  ctx.fillStyle = color;
-  ctx.globalAlpha = opacity;
-  ctx.beginPath();
-  for (let x = startX; x <= visible.maxX; x += spacing) {
-    for (let y = startY; y <= visible.maxY; y += spacing) {
-      ctx.moveTo(x + compensatedRadius, y);
-      ctx.arc(x, y, compensatedRadius, 0, Math.PI * 2);
-    }
+function drawMergingGrid(ctx, visible, baseSpacing, lineWidth, color, opacity, zoom) {
+  const compensatedWidth = lineWidth / ctx.getTransform().a;
+  const levels = buildLevels(baseSpacing, zoom, LINE_GAP_FADE_IN, LINE_GAP_FADE_FULL);
+  for (let i = 0; i < levels.length; i++) {
+    const level = levels[i];
+    const coarserSpacing = i > 0 ? levels[i - 1].spacing : 0;
+    drawGridForLevel(ctx, visible, level.spacing, coarserSpacing, compensatedWidth, color, opacity * level.fade);
   }
-  ctx.fill();
-  ctx.restore();
 }
 function renderCanvasBackground(ctx, viewport, canvasWidth, canvasHeight, options, theme) {
   if (!options || options.type === "blank") return;
@@ -631,23 +695,24 @@ function renderCanvasBackground(ctx, viewport, canvasWidth, canvasHeight, option
     options.render(ctx, viewport, canvasWidth, canvasHeight);
     return;
   }
-  const spacing = options.spacing ?? DEFAULT_SPACING;
-  if (spacing <= 0) return;
+  const baseSpacing = options.spacing ?? DEFAULT_SPACING;
+  if (baseSpacing <= 0) return;
   const color = resolvePresetPatternColor(options.color, options.colorDark, theme);
   const opacity = options.opacity ?? DEFAULT_OPACITY;
+  if (options.type === "dots") {
+    drawMergingDots(ctx, viewport, canvasWidth, canvasHeight, baseSpacing, options.size ?? DEFAULT_DOT_RADIUS, color, opacity);
+    return;
+  }
   const visible = visiblePageRect(viewport, canvasWidth, canvasHeight);
   ctx.save();
   ctx.translate(viewport.x, viewport.y);
   ctx.scale(viewport.zoom, viewport.zoom);
   switch (options.type) {
     case "lines":
-      drawHorizontalLines(ctx, visible, spacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity);
+      drawMergingLines(ctx, visible, baseSpacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity, viewport.zoom);
       break;
     case "grid":
-      drawGridLines(ctx, visible, spacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity);
-      break;
-    case "dots":
-      drawDotPattern(ctx, visible, spacing, options.size ?? DEFAULT_DOT_RADIUS, color, opacity);
+      drawMergingGrid(ctx, visible, baseSpacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity, viewport.zoom);
       break;
   }
   ctx.restore();