@comty.io/core 0.1.0 → 0.1.1

package/src/capture.js

@@ -440,7 +440,7 @@ export function createScreenshotCapture() {
 
       const clonedBody = clone.querySelector("body");
       if (clonedBody instanceof HTMLElement) {
-        clonedBody.style.width = `${captureWidth}px`;
+        clonedBody.style.width = getComputedStyle(document.body).width;
         clonedBody.style.minHeight = `${documentHeight}px`;
         clonedBody.style.margin = clonedBody.style.margin || "0";
       }
@@ -470,3 +470,106 @@ export function createScreenshotCapture() {
 
     return { waitForPaint, waitForCustomElements, captureViewportScreenshot };
 }
+
+// Page-local counterpart of the native eyedropper; never captures outside the page.
+export function createColorMagnifier({ root, isComtyElement, capture }) {
+  const lens = document.createElement('div');
+  lens.className = 'comty-color-magnifier';
+  lens.setAttribute('aria-hidden', 'true');
+  lens.hidden = true;
+  lens.innerHTML = '<div class="comty-color-magnifier-glass"><canvas width="9" height="9"></canvas><span></span></div>';
+  root.appendChild(lens);
+  const canvas = lens.querySelector('canvas');
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  let enabled = false, image = null, point = null, revision = 0, timer = 0;
+  let sampledHex = null;
+
+  function paint() {
+    if (!enabled || !point || !context) return;
+    const { x, y, element } = point;
+    if (!element.isConnected) { lens.hidden = true; return; }
+    // An unavailable/unsafe page capture falls back to the element's CSS colour.
+    let background = element;
+    while (background.parentElement && getComputedStyle(background).backgroundColor === 'rgba(0, 0, 0, 0)') background = background.parentElement;
+    const color = getComputedStyle(background).backgroundColor;
+    context.clearRect(0, 0, 9, 9);
+    context.fillStyle = getComputedStyle(root).getPropertyValue('--comty-paper');
+    context.fillRect(0, 0, 9, 9);
+    context.fillStyle = color;
+    context.fillRect(0, 0, 9, 9);
+    if (image) context.drawImage(image, Math.floor(x) - 4, Math.floor(y) - 4, 9, 9, 0, 0, 9, 9);
+    lens.dataset.preview = image ? 'pixels' : 'color';
+    sampledHex = null;
+    try {
+      const [r, g, b] = context.getImageData(4, 4, 1, 1).data;
+      if (image) sampledHex = '#' + [r, g, b].map(channel => channel.toString(16).padStart(2, '0')).join('');
+      lens.dataset.tone = .2126 * r + .7152 * g + .0722 * b < 128 ? 'dark' : 'light';
+    } catch { lens.dataset.tone = 'light'; }
+    lens.style.left = `${x}px`;
+    lens.style.top = `${y}px`;
+    lens.hidden = false;
+  }
+
+  async function refresh() {
+    const version = ++revision;
+    image = null;
+    sampledHex = null;
+    if (!enabled) return;
+    try {
+      const { blob } = await capture();
+      if (!enabled || version !== revision) return;
+      const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+      const next = new Image();
+      next.src = dataUrl;
+      await next.decode();
+      if (!enabled || version !== revision) return;
+      // Verify the bitmap can be sampled before using it for both preview and pick.
+      const probe = document.createElement('canvas').getContext('2d');
+      probe.drawImage(next, 0, 0);
+      probe.getImageData(0, 0, 1, 1);
+      image = next;
+      paint();
+    } catch { /* The CSS-colour fallback remains available without screen permission. */ }
+  }
+
+  function setEnabled(value) {
+    if (enabled === value) return;
+    enabled = value;
+    lens.hidden = true;
+    point = null;
+    clearTimeout(timer);
+    if (enabled) refresh();
+    else { revision++; image = null; sampledHex = null; }
+  }
+
+  document.addEventListener('pointermove', event => {
+    if (!enabled) return;
+    if (!(event.target instanceof Element) || isComtyElement(event.target)) {
+      point = null;
+      sampledHex = null;
+      lens.hidden = true;
+      return;
+    }
+    point = { x: event.clientX, y: event.clientY, element: event.target };
+    paint();
+  }, true);
+  document.documentElement.addEventListener('pointerleave', () => { point = null; lens.hidden = true; });
+  function invalidate(event) {
+    if (!enabled || event.target instanceof Element && isComtyElement(event.target)) return;
+    revision++;
+    image = null;
+    sampledHex = null;
+    point = null;
+    lens.hidden = true;
+    clearTimeout(timer);
+    timer = setTimeout(refresh, 120);
+  }
+  document.addEventListener('scroll', invalidate, true);
+  window.addEventListener('resize', invalidate);
+  return { setEnabled, sample: () => sampledHex };
+}

package/src/dev.mjs

@@ -19,6 +19,7 @@ export async function startDev({ cwd = process.cwd(), target = 'http://127.0.0.1
   const anchors = await readFile(new URL('./anchors.js', import.meta.url));
   const capture = await readFile(new URL('./capture.js', import.meta.url));
   const comments = await readFile(new URL('./comments.js', import.meta.url));
+  const measurements = await readFile(new URL('./measurements.js', import.meta.url));
   let companion, origin, child, closing, finished;
   const sockets = new Set();
   const proxies = new Set();
@@ -34,9 +35,9 @@ export async function startDev({ cwd = process.cwd(), target = 'http://127.0.0.1
       if (request.headers.origin && request.headers.origin !== origin) {
         response.writeHead(403); response.end(); return;
       }
-      if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/comments.js', '/__comty/start.js'].includes(url.pathname)) {
+      if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/comments.js', '/__comty/measurements.js', '/__comty/start.js'].includes(url.pathname)) {
         response.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' });
-        response.end(url.pathname.endsWith('/browser.js') ? runtime : url.pathname.endsWith('/style.js') ? style : url.pathname.endsWith('/anchors.js') ? anchors : url.pathname.endsWith('/capture.js') ? capture : url.pathname.endsWith('/comments.js') ? comments :
+        response.end(url.pathname.endsWith('/browser.js') ? runtime : url.pathname.endsWith('/style.js') ? style : url.pathname.endsWith('/anchors.js') ? anchors : url.pathname.endsWith('/capture.js') ? capture : url.pathname.endsWith('/comments.js') ? comments : url.pathname.endsWith('/measurements.js') ? measurements :
           `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey, apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`);
         return;
       }

package/src/measurements.js

@@ -0,0 +1,209 @@
+const edgeAxis = { top: "y", bottom: "y", left: "x", right: "x" };
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+/** Pick a nearby border segment, including when the pointer is just outside it. */
+export function nearestMeasurementEdge(candidates, point, { axis, exclude, tolerance = 10 } = {}) {
+  let nearest = null;
+  let distance = tolerance;
+  for (const { element, rect } of candidates) {
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    for (const edge of ["top", "bottom", "left", "right"]) {
+      if (axis && edgeAxis[edge] !== axis) continue;
+      if (exclude?.element === element && exclude.edge === edge) continue;
+      const vertical = edgeAxis[edge] === "y";
+      const x = vertical ? clamp(point.x, rect.left, rect.right) : rect[edge];
+      const y = vertical ? rect[edge] : clamp(point.y, rect.top, rect.bottom);
+      const nextDistance = Math.hypot(point.x - x, point.y - y);
+      if (nextDistance > distance || (nearest && nextDistance === distance)) continue;
+      distance = nextDistance;
+      nearest = { element, edge, axis: edgeAxis[edge], offset: vertical ? (x - rect.left) / rect.width : (y - rect.top) / rect.height };
+    }
+  }
+  return nearest;
+}
+
+export function measurementPoint(anchor, rect, scroll = { x: 0, y: 0 }) {
+  if (!anchor.element) return { x: anchor.x - scroll.x, y: anchor.y - scroll.y };
+  return anchor.axis === "y"
+    ? { x: rect.left + rect.width * anchor.offset, y: rect[anchor.edge] }
+    : { x: rect[anchor.edge], y: rect.top + rect.height * anchor.offset };
+}
+
+/** Border measurements live for one activation of the existing ruler tool. */
+export function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit }) {
+  let enabled = false;
+  let hover = null;
+  let drag = null;
+  let pointer = null;
+  let signature = "";
+  const measurements = [];
+  const svgNS = "http://www.w3.org/2000/svg";
+  const layer = document.createElementNS(svgNS, "svg");
+  layer.classList.add("comty-distance-layer");
+  layer.setAttribute("aria-hidden", "true");
+  root.prepend(layer);
+  const announcement = document.createElement("span");
+  announcement.className = "comty-distance-announcement";
+  announcement.setAttribute("role", "status");
+  root.appendChild(announcement);
+
+  function rectOf(element) {
+    if (element === document.documentElement) {
+      const width = Math.max(element.clientWidth, element.scrollWidth);
+      const height = Math.max(element.clientHeight, element.scrollHeight);
+      return { left: -scrollX, top: -scrollY, right: width - scrollX, bottom: height - scrollY, width, height };
+    }
+    return element.getBoundingClientRect();
+  }
+  function pointOf(anchor) {
+    return measurementPoint(anchor, anchor.element && rectOf(anchor.element), { x: scrollX, y: scrollY });
+  }
+  function candidatesAt(point) {
+    const elements = new Set();
+    // Sample around the cursor as well as underneath it to catch an outside edge.
+    for (const [dx, dy] of [[0, 0], [-10, 0], [10, 0], [0, -10], [0, 10]]) {
+      for (const hit of document.elementsFromPoint(clamp(point.x + dx, 0, innerWidth - 1), clamp(point.y + dy, 0, innerHeight - 1))) {
+        if (isComtyElement(hit)) continue;
+        for (let element = hit; element; element = element.parentElement) elements.add(element);
+      }
+    }
+    return [...elements].filter(element => !isElementTreeHidden(element)).map(element => ({ element, rect: rectOf(element) }));
+  }
+  function findEdge(point, start) {
+    return nearestMeasurementEdge(candidatesAt(point), point, { axis: start?.axis, exclude: start });
+  }
+  function setCursor(axis) {
+    document.documentElement.classList.toggle("comty-measure-vertical", axis === "y");
+    document.documentElement.classList.toggle("comty-measure-horizontal", axis === "x");
+  }
+  function updatePointer(event) {
+    pointer = { x: event.clientX, y: event.clientY };
+    hover = findEdge(pointer, drag?.start);
+    if (drag) {
+      drag.end = hover || { x: pointer.x + scrollX, y: pointer.y + scrollY };
+      // Keep the two anchors perpendicular when both borders share that coordinate.
+      if (hover) {
+        const start = pointOf(drag.start), rect = rectOf(hover.element);
+        drag.end = { ...hover, offset: drag.start.axis === "y"
+          ? clamp((start.x - rect.left) / rect.width, 0, 1)
+          : clamp((start.y - rect.top) / rect.height, 0, 1) };
+      }
+    }
+    setCursor(drag?.start.axis || hover?.axis);
+    render();
+  }
+  function node(tag, attributes, parent = layer) {
+    const element = document.createElementNS(svgNS, tag);
+    for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+    parent.appendChild(element);
+    return element;
+  }
+  function valid(anchor) {
+    return !anchor.element || (anchor.element.isConnected && !isElementTreeHidden(anchor.element));
+  }
+  function render() {
+    if (!enabled) return;
+    const visible = [...measurements, ...(drag ? [drag] : [])].filter(item => valid(item.start) && valid(item.end));
+    const geometry = visible.map(item => ({ start: pointOf(item.start), end: pointOf(item.end), axis: item.start.axis }));
+    const hoverPoint = hover && valid(hover) ? pointOf(hover) : null;
+    const next = JSON.stringify([geometry, hoverPoint]);
+    if (signature === next) return;
+    signature = next;
+    layer.replaceChildren();
+    for (const { start, end, axis } of geometry) {
+      const vertical = axis === "y";
+      const distance = Math.round(Math.abs(end[axis] - start[axis]));
+      if (distance < 1) continue;
+      const x2 = vertical ? start.x : end.x, y2 = vertical ? end.y : start.y;
+      const group = node("g", { "data-comty-distance": distance });
+      node("path", { d: `M${start.x} ${start.y}L${x2} ${y2}`, class: "comty-distance-line" }, group);
+      if (Math.hypot(end.x - x2, end.y - y2) > 1) node("path", { d: `M${x2} ${y2}L${end.x} ${end.y}`, class: "comty-distance-extension" }, group);
+      const direction = Math.sign(end[axis] - start[axis]);
+      for (const [x, y, inward] of [[start.x, start.y, direction], [x2, y2, -direction]]) {
+        const points = vertical ? `${x},${y} ${x - 3},${y + inward * 6} ${x + 3},${y + inward * 6}` : `${x},${y} ${x + inward * 6},${y - 3} ${x + inward * 6},${y + 3}`;
+        node("polygon", { points, class: "comty-distance-arrow" }, group);
+      }
+      const text = String(distance), width = text.length * 7.5 + 12;
+      const labelX = vertical ? start.x - width - 8 : (start.x + x2 - width) / 2;
+      const labelY = vertical ? (start.y + y2) / 2 - 10 : start.y - 28;
+      const label = node("g", { transform: `translate(${clamp(labelX, 2, innerWidth - width - 2)} ${clamp(labelY, 2, innerHeight - 22)})` }, group);
+      node("rect", { width, height: 20, rx: 3, class: "comty-distance-label" }, label);
+      node("text", { x: width / 2, y: 14, "text-anchor": "middle", class: "comty-distance-value" }, label).textContent = text;
+    }
+    if (hoverPoint) node("circle", { cx: hoverPoint.x, cy: hoverPoint.y, r: 4, class: "comty-distance-snap" });
+  }
+  function cancel() {
+    const pointerId = drag?.pointerId;
+    drag = null;
+    if (pointerId !== undefined && document.documentElement.hasPointerCapture(pointerId)) document.documentElement.releasePointerCapture(pointerId);
+    hover = null;
+    pointer = null;
+    setCursor(null);
+    render();
+  }
+  function setEnabled(value) {
+    if (enabled === value) return;
+    enabled = value;
+    layer.style.display = value ? "" : "none";
+    if (!value) {
+      measurements.length = 0;
+      cancel();
+      layer.replaceChildren();
+      announcement.textContent = "";
+      signature = "";
+    }
+  }
+  function isHostEvent(event) {
+    if (!enabled || !(event.target instanceof Element)) return false;
+    if (!isComtyElement(event.target)) return true;
+    // The outer ruler strip must still let us anchor to the page's top/left edge.
+    return event.target.matches(".comty-ruler") && (event.clientX + scrollX <= 10 || event.clientY + scrollY <= 10);
+  }
+  document.addEventListener("pointermove", event => {
+    if (!enabled) return;
+    if (drag && event.pointerId !== drag.pointerId) return;
+    if (!isHostEvent(event) && !drag) { hover = null; setCursor(null); render(); return; }
+    event.stopImmediatePropagation();
+    updatePointer(event);
+  }, true);
+  document.addEventListener("pointerdown", event => {
+    if (!isHostEvent(event) || event.button !== 0) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    updatePointer(event);
+    if (hover) {
+      drag = { start: hover, end: hover, pointerId: event.pointerId };
+      if (event.isTrusted) document.documentElement.setPointerCapture(event.pointerId);
+    }
+  }, true);
+  document.addEventListener("pointerup", event => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    updatePointer(event);
+    const distance = Math.round(Math.abs(pointOf(drag.end)[drag.start.axis] - pointOf(drag.start)[drag.start.axis]));
+    if (distance > 0) {
+      measurements.push(drag);
+      announcement.textContent = `${distance} pixels ${drag.start.axis === "y" ? "vertically" : "horizontally"}`;
+    }
+    drag = null;
+    if (document.documentElement.hasPointerCapture(event.pointerId)) document.documentElement.releasePointerCapture(event.pointerId);
+    render();
+  }, true);
+  document.addEventListener("click", event => {
+    if (isHostEvent(event)) { event.preventDefault(); event.stopImmediatePropagation(); }
+  }, true);
+  document.addEventListener("keydown", event => {
+    if (!enabled || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    if (drag) cancel(); else onExit();
+  }, true);
+  document.addEventListener("pointercancel", cancel, true);
+  document.documentElement.addEventListener("lostpointercapture", event => { if (drag?.pointerId === event.pointerId) cancel(); });
+  document.documentElement.addEventListener("pointerleave", () => { if (!drag) cancel(); });
+  window.addEventListener("blur", cancel);
+  document.addEventListener("scroll", () => {
+    if (!enabled) return;
+    if (pointer) updatePointer({ clientX: pointer.x, clientY: pointer.y });
+    else render();
+  }, { capture: true, passive: true });
+  return { setEnabled, render };
+}