checkpoint-cli 0.1.5 → 0.1.6

package/dist/index.js

@@ -235,6 +235,16 @@ function trackingScript() {
       textSelf=shortText(el&&el.textContent);
       textParent=shortText(el&&el.parentElement&&el.parentElement.textContent);
     }catch(e){}
+    var fallback=buildCoordFallback(clientX,clientY,metrics);
+    try{
+      var rect=el&&el.getBoundingClientRect?el.getBoundingClientRect():null;
+      if(rect){
+        var safeW=Math.max(1,rect.width||1);
+        var safeH=Math.max(1,rect.height||1);
+        fallback.element_x_percent=clampPercent(((clientX-rect.left)/safeW)*100);
+        fallback.element_y_percent=clampPercent(((clientY-rect.top)/safeH)*100);
+      }
+    }catch(e){}
     return {
       selector_chain:getSelectorChain(el),
       dom_fingerprint:getDomFingerprint(el),
@@ -243,11 +253,109 @@ function trackingScript() {
         parent:textParent
       },
       container_hint:getContainerHint(el),
-      coord_fallback:buildCoordFallback(clientX,clientY,metrics)
+      coord_fallback:fallback
     };
   }
 
-  function resolveFromFingerprint(fingerprint){
+  function getTargetDocPoint(payload,metrics){
+    var fallback=payload&&payload.coord_fallback;
+    if(!fallback||typeof fallback!=='object') return null;
+    var docW=(typeof fallback.doc_width==='number'&&fallback.doc_width>0)
+      ? fallback.doc_width
+      : (metrics.docWidth||metrics.viewWidth||1);
+    var docH=(typeof fallback.doc_height==='number'&&fallback.doc_height>0)
+      ? fallback.doc_height
+      : (metrics.docHeight||metrics.viewHeight||1);
+    if(typeof fallback.doc_x_percent==='number'&&typeof fallback.doc_y_percent==='number'){
+      return {
+        x:(fallback.doc_x_percent/100)*docW,
+        y:(fallback.doc_y_percent/100)*docH
+      };
+    }
+    if(typeof fallback.x_percent==='number'&&typeof fallback.y_percent==='number'){
+      var viewW=(typeof fallback.viewport_width==='number'&&fallback.viewport_width>0)
+        ? fallback.viewport_width
+        : (metrics.viewWidth||1);
+      var viewH=(typeof fallback.viewport_height==='number'&&fallback.viewport_height>0)
+        ? fallback.viewport_height
+        : (metrics.viewHeight||1);
+      var scrollX=typeof fallback.scroll_x==='number'?fallback.scroll_x:metrics.scrollX;
+      var scrollY=typeof fallback.scroll_y==='number'?fallback.scroll_y:metrics.scrollY;
+      return {
+        x:(fallback.x_percent/100)*viewW+scrollX,
+        y:(fallback.y_percent/100)*viewH+scrollY
+      };
+    }
+    return null;
+  }
+
+  function getAnchorClientPoint(el,payload){
+    var rect=el.getBoundingClientRect();
+    var safeW=Math.max(2,rect.width||2);
+    var safeH=Math.max(2,rect.height||2);
+    var relX=0.5;
+    var relY=0.5;
+    var fallback=payload&&payload.coord_fallback;
+    if(fallback&&typeof fallback.element_x_percent==='number'){
+      relX=clampPercent(fallback.element_x_percent)/100;
+    }
+    if(fallback&&typeof fallback.element_y_percent==='number'){
+      relY=clampPercent(fallback.element_y_percent)/100;
+    }
+    return {
+      clientX:rect.left+Math.max(1,Math.min(safeW-1,safeW*relX)),
+      clientY:rect.top+Math.max(1,Math.min(safeH-1,safeH*relY))
+    };
+  }
+
+  function siblingPathDistance(el,path){
+    if(!Array.isArray(path)||path.length===0) return 0;
+    var current=getSiblingPath(el);
+    var maxLen=Math.max(current.length,path.length);
+    var dist=Math.abs(current.length-path.length)*5;
+    var cOffset=maxLen-current.length;
+    var pOffset=maxLen-path.length;
+    for(var i=0;i<maxLen;i++){
+      var cVal=current[i-cOffset];
+      var pVal=path[i-pOffset];
+      if(typeof cVal==='number'&&typeof pVal==='number'){
+        dist+=Math.abs(cVal-pVal);
+      }else{
+        dist+=2;
+      }
+    }
+    return dist;
+  }
+
+  function pickBestElement(nodes,payload,metrics,fingerprintPath){
+    if(!nodes||nodes.length===0) return null;
+    var target=getTargetDocPoint(payload,metrics);
+    var best=null;
+    var bestScore=Infinity;
+    for(var i=0;i<nodes.length;i++){
+      var node=nodes[i];
+      if(!node||node.nodeType!==1) continue;
+      var anchorPoint=getAnchorClientPoint(node,payload);
+      var docX=anchorPoint.clientX+metrics.scrollX;
+      var docY=anchorPoint.clientY+metrics.scrollY;
+      var score=0;
+      if(target){
+        var dx=docX-target.x;
+        var dy=docY-target.y;
+        score+=Math.sqrt(dx*dx+dy*dy);
+      }
+      if(Array.isArray(fingerprintPath)&&fingerprintPath.length>0){
+        score+=siblingPathDistance(node,fingerprintPath)*40;
+      }
+      if(score<bestScore){
+        best=node;
+        bestScore=score;
+      }
+    }
+    return best;
+  }
+
+  function resolveFromFingerprint(fingerprint,payload,metrics){
     if(!fingerprint) return null;
     if(fingerprint.id){
       var byId=document.getElementById(fingerprint.id);
@@ -260,22 +368,35 @@ function trackingScript() {
     }
     try{
       var nodes=document.querySelectorAll(selector);
-      if(nodes&&nodes.length>0) return nodes[0];
+      return pickBestElement(nodes,payload,metrics,fingerprint.sibling_path);
     }catch(e){}
     return null;
   }
 
+  function isStrongContainerHint(hint){
+    if(!hint||typeof hint!=='object') return false;
+    if(typeof hint.id==='string'&&hint.id.length>0) return true;
+    if(typeof hint.selector==='string'){
+      if(hint.selector.indexOf('#')===0) return true;
+      if(hint.selector.indexOf('[data-testid')>=0) return true;
+      if(hint.selector.indexOf('[role=')>=0) return true;
+    }
+    return false;
+  }
+
   function resolveAnchor(payload){
     if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null};
     var element=null;
     var strategy='none';
     var matchedSelector=null;
+    var metrics=getMetrics();
     if(Array.isArray(payload.selector_chain)){
       for(var i=0;i<payload.selector_chain.length;i++){
         var candidate=payload.selector_chain[i];
         if(!candidate||typeof candidate.selector!=='string') continue;
         try{
-          var found=document.querySelector(candidate.selector);
+          var nodes=document.querySelectorAll(candidate.selector);
+          var found=pickBestElement(nodes,payload,metrics,null);
           if(found){
             element=found;
             strategy='selector';
@@ -285,9 +406,15 @@ function trackingScript() {
         }catch(e){}
       }
     }
-    if(!element&&payload.container_hint&&typeof payload.container_hint.selector==='string'){
+    if(
+      !element&&
+      payload.container_hint&&
+      typeof payload.container_hint.selector==='string'&&
+      isStrongContainerHint(payload.container_hint)
+    ){
       try{
-        var containerEl=document.querySelector(payload.container_hint.selector);
+        var containerNodes=document.querySelectorAll(payload.container_hint.selector);
+        var containerEl=pickBestElement(containerNodes,payload,metrics,null);
         if(containerEl){
           element=containerEl;
           strategy='container';
@@ -296,17 +423,16 @@ function trackingScript() {
       }catch(e){}
     }
     if(!element){
-      var fpEl=resolveFromFingerprint(payload.dom_fingerprint);
+      var fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics);
       if(fpEl){
         element=fpEl;
         strategy='fingerprint';
       }
     }
     if(!element) return {coordFallback:null,strategy:'none',matchedSelector:null};
-    var rect=element.getBoundingClientRect();
-    var clientX=rect.left+Math.max(1,Math.min(rect.width-1,rect.width*0.5));
-    var clientY=rect.top+Math.max(1,Math.min(rect.height-1,rect.height*0.5));
-    var metrics=getMetrics();
+    var point=getAnchorClientPoint(element,payload);
+    var clientX=point.clientX;
+    var clientY=point.clientY;
     return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector};
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checkpoint-cli",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",