2D drawing on screen

Where a drawing point is on screen, in CSS pixels of the active pane.

sx = (x − cx)·zoom + w ÷ 2; sy = h ÷ 2 − (y − cy)·zoom (with a turn: the difference is rotated first)

The view center is subtracted before the multiplication by the zoom, so the digits of a large coordinate are spent on the difference and not on the product. Used for markers, grips and rubber bands on the overlay canvas.

toScreen(x, y) {
  if (!this.tw) return { x: (x - this.cx) * this.zoom + this.w / 2, y: this.h / 2 - (y - this.cy) * this.zoom };
  const c = Math.cos(this.tw), s = Math.sin(this.tw), dx = x - this.cx, dy = y - this.cy;
  return { x: this.w / 2 + this.zoom * (c * dx + s * dy), y: this.h / 2 - this.zoom * (-s * dx + c * dy) };
}

The point the cached drawing paths are stored relative to.

origin = middle of the extents of the visible objects; path point = point − origin

The subtraction is done in 64-bit numbers before the coordinates go into the browser's Path2D objects, which keeps the values given to the canvas small for a drawing far from the origin.

const origin = validBounds(ext) ? { x: (ext.minX + ext.maxX) / 2, y: (ext.minY + ext.maxY) / 2 } : { x: 0, y: 0 };

The spacing of the background grid: 1, 2 or 5 times a power of ten, at least 14 pixels apart.

target = 14 ÷ zoom; p = 10^⌊log₁₀ target⌋; step = first of p, 2p, 5p, 10p that is ≥ target; major = 5 × step

The power of ten comes from Math.log10 and Math.pow; for negative exponents the result is a 64-bit number close to 0.1, 0.01 and so on, and Math.pow is not required to round it correctly. The step is used to draw grid lines only; it is stored on the view but nothing else in the app reads it.

const target = 14 / this.zoom;
const p10 = Math.pow(10, Math.floor(Math.log10(target)));
const step = [1, 2, 5, 10].map((k) => k * p10).find((s) => s >= target);
const major = step * 5;

How many CSS pixels one millimeter of the sheet takes, used to draw lineweights at their paper width.

√(T₀² + T₁²) ÷ (25.4 when the paper is in inches, else 1)

The scale of the view matrix by Math.hypot, divided by 25.4 for a sheet set up in inches. 25.4 is the exact number of millimeters in an inch.

/** CSS px per paper mm on the open sheet (viewports included), 0 in the model. */
paperPxPerMm() {
  const lay = this.spaceLayout !== undefined ? this.spaceLayout : this.doc.layout;   // the space being drawn (split screen)
  if (!lay) return 0;
  return Math.hypot(this.T[0], this.T[1]) / (lay.paper?.unit === 'in' ? 25.4 : 1);
}