webmarker-js 0.6.0 → 0.7.0

package/README.md

@@ -158,7 +158,7 @@ const markedElements = mark({
   // Use a blue dashed outline with a transparent and slighly blue background
   boundingBoxStyle: { outline: "2px dashed blue", backgroundColor: "rgba(0, 0, 255, 0.1)"},
   // Place the mark at the top right corner of the element
-  markPlacement: "top-end";
+  markPlacement: "top-end",
   // Show bounding boxes over elements (defaults to true)
   showBoundingBoxes: true,
   // Generate labels as 'Element 0', 'Element 1', 'Element 2'...

package/dist/main.js

@@ -972,7 +972,7 @@ var WebMarker = (() => {
           markClass
         );
         fragment.appendChild(markElement);
-        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass) : void 0;
         if (boundingBoxElement) {
           fragment.appendChild(boundingBoxElement);
         }
@@ -1010,7 +1010,7 @@ var WebMarker = (() => {
     );
     return markElement;
   }
-  function createBoundingBox(element, style, label, boundingBoxClass) {
+  function createBoundingBox(element, index, style, label, boundingBoxClass) {
     const boundingBoxElement = document.createElement("div");
     boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
     boundingBoxElement.id = `webmarker-bounding-box-${label}`;
@@ -1031,7 +1031,7 @@ var WebMarker = (() => {
         position: "absolute",
         pointerEvents: "none"
       },
-      typeof style === "function" ? style(element, parseInt(label)) : style
+      typeof style === "function" ? style(element, index) : style
     );
     return boundingBoxElement;
   }

package/dist/module.js

@@ -948,7 +948,7 @@ function mark(options = {}) {
         markClass
       );
       fragment.appendChild(markElement);
-      const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+      const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass) : void 0;
       if (boundingBoxElement) {
         fragment.appendChild(boundingBoxElement);
       }
@@ -986,7 +986,7 @@ function createMark(element, index, style, label, markPlacement = "top-start", m
   );
   return markElement;
 }
-function createBoundingBox(element, style, label, boundingBoxClass) {
+function createBoundingBox(element, index, style, label, boundingBoxClass) {
   const boundingBoxElement = document.createElement("div");
   boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
   boundingBoxElement.id = `webmarker-bounding-box-${label}`;
@@ -1007,7 +1007,7 @@ function createBoundingBox(element, style, label, boundingBoxClass) {
       position: "absolute",
       pointerEvents: "none"
     },
-    typeof style === "function" ? style(element, parseInt(label)) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return boundingBoxElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webmarker-js",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A library for marking web pages for Set-of-Mark prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",

package/playwright-report/index.html

@@ -65,4 +65,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   </body>
 </html>
 <script>
-window.playwrightReportBase64 = "data:application/zip;base64,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";</script>
+window.playwrightReportBase64 = "data:application/zip;base64,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";</script>

package/src/index.ts

@@ -138,7 +138,7 @@ function mark(options: MarkOptions = {}): Record<string, MarkedElement> {
       fragment.appendChild(markElement);
 
       const boundingBoxElement = showBoundingBoxes
-        ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass)
+        ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass)
         : undefined;
       if (boundingBoxElement) {
         fragment.appendChild(boundingBoxElement);
@@ -190,6 +190,7 @@ function createMark(
 
 function createBoundingBox(
   element: Element,
+  index: number,
   style: StyleObject | StyleFunction,
   label: string,
   boundingBoxClass: string
@@ -215,7 +216,7 @@ function createBoundingBox(
       position: "absolute",
       pointerEvents: "none",
     },
-    typeof style === "function" ? style(element, parseInt(label)) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return boundingBoxElement;
 }