vite-plugin-ai-annotator 1.14.2 → 1.14.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -4
- package/dist/annotator/inspection.d.ts +1 -3
- package/dist/annotator-toolbar.d.ts +1 -1
- package/dist/annotator-toolbar.js +144 -196
- package/dist/nuxt-module.d.ts +5 -0
- package/dist/nuxt-module.js +1528 -0
- package/dist/nuxt-module.js.map +7 -0
- package/dist/rpc/define.d.ts +2 -6
- package/package.json +18 -4
|
@@ -6389,10 +6389,15 @@
|
|
|
6389
6389
|
// src/annotator/constants.ts
|
|
6390
6390
|
var Z_INDEX = {
|
|
6391
6391
|
INSPECTION_OVERLAY: 999995,
|
|
6392
|
+
// Mouse inspection hover highlight
|
|
6392
6393
|
HIGHLIGHT_OVERLAY: 999996,
|
|
6394
|
+
// Selected element marching ants border
|
|
6393
6395
|
HOVER_OVERLAY: 999997,
|
|
6396
|
+
// Element hover during inspection mode
|
|
6394
6397
|
BADGE: 999998,
|
|
6398
|
+
// Selection badge with index number
|
|
6395
6399
|
TOOLBAR: 999999
|
|
6400
|
+
// Bottom-right toolbar UI
|
|
6396
6401
|
};
|
|
6397
6402
|
var CONSOLE_LIMITS = {
|
|
6398
6403
|
MAX_ARG_LENGTH: 1e4,
|
|
@@ -6723,6 +6728,7 @@
|
|
|
6723
6728
|
xpath: XPathUtils.generateXPath(targetElement),
|
|
6724
6729
|
cssSelector: XPathUtils.generateEnhancedCSSSelector(targetElement),
|
|
6725
6730
|
textContent: element.textContent?.substring(0, 100) || "",
|
|
6731
|
+
selectedText: data.textSelection?.selectedText,
|
|
6726
6732
|
attributes: Array.from(targetElement.attributes).reduce((acc, attr) => {
|
|
6727
6733
|
if (attr.name !== "style") {
|
|
6728
6734
|
acc[attr.name] = attr.value;
|
|
@@ -6731,19 +6737,6 @@
|
|
|
6731
6737
|
}, {}),
|
|
6732
6738
|
children: []
|
|
6733
6739
|
};
|
|
6734
|
-
if (data.textSelection && data.textSelection.containerElement.isConnected) {
|
|
6735
|
-
elementInfo.textSelection = {
|
|
6736
|
-
selectedText: data.textSelection.selectedText,
|
|
6737
|
-
containerXPath: XPathUtils.generateXPath(data.textSelection.containerElement),
|
|
6738
|
-
containerCssSelector: XPathUtils.generateEnhancedCSSSelector(data.textSelection.containerElement)
|
|
6739
|
-
};
|
|
6740
|
-
} else if (data.textSelection) {
|
|
6741
|
-
elementInfo.textSelection = {
|
|
6742
|
-
selectedText: data.textSelection.selectedText,
|
|
6743
|
-
containerXPath: "",
|
|
6744
|
-
containerCssSelector: ""
|
|
6745
|
-
};
|
|
6746
|
-
}
|
|
6747
6740
|
if (imagePaths && imagePaths.has(element)) {
|
|
6748
6741
|
elementInfo.imagePath = imagePaths.get(element);
|
|
6749
6742
|
}
|
|
@@ -6780,17 +6773,13 @@
|
|
|
6780
6773
|
}
|
|
6781
6774
|
|
|
6782
6775
|
// src/annotator/inspection.ts
|
|
6783
|
-
var DRAG_THRESHOLD = 5;
|
|
6784
|
-
var INITIAL_DRAG_STATE = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
|
|
6785
6776
|
function createInspectionManager(callbacks = {}) {
|
|
6786
|
-
const { onElementSelect,
|
|
6777
|
+
const { onElementSelect, onTextSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
|
|
6787
6778
|
let isInspecting = false;
|
|
6788
6779
|
let currentHoveredElement = null;
|
|
6789
6780
|
let hoverOverlay = null;
|
|
6790
6781
|
let hoverKeyframesStyleElement = null;
|
|
6791
6782
|
let inspectionStyleElement = null;
|
|
6792
|
-
let selectionOverlay = null;
|
|
6793
|
-
let dragState = { ...INITIAL_DRAG_STATE };
|
|
6794
6783
|
let mouseDownTime = 0;
|
|
6795
6784
|
function addInspectionStyles() {
|
|
6796
6785
|
inspectionStyleElement = document.createElement("style");
|
|
@@ -6799,9 +6788,6 @@
|
|
|
6799
6788
|
body.annotator-inspecting * {
|
|
6800
6789
|
cursor: crosshair !important;
|
|
6801
6790
|
}
|
|
6802
|
-
body.annotator-inspecting *::selection {
|
|
6803
|
-
background: ${COLORS.INSPECTION}40 !important;
|
|
6804
|
-
}
|
|
6805
6791
|
annotator-toolbar, annotator-toolbar *,
|
|
6806
6792
|
.annotator-badge, .annotator-badge *,
|
|
6807
6793
|
.annotator-ignore, .annotator-ignore * {
|
|
@@ -6869,102 +6855,25 @@
|
|
|
6869
6855
|
hoverOverlay.style.width = `${rect.width}px`;
|
|
6870
6856
|
hoverOverlay.style.height = `${rect.height}px`;
|
|
6871
6857
|
}
|
|
6872
|
-
function
|
|
6873
|
-
const
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
|
|
6883
|
-
`;
|
|
6884
|
-
document.body.appendChild(overlay);
|
|
6885
|
-
return overlay;
|
|
6886
|
-
}
|
|
6887
|
-
function updateSelectionOverlay() {
|
|
6888
|
-
if (!selectionOverlay) return;
|
|
6889
|
-
const left = Math.min(dragState.startX, dragState.currentX);
|
|
6890
|
-
const top = Math.min(dragState.startY, dragState.currentY);
|
|
6891
|
-
const width = Math.abs(dragState.currentX - dragState.startX);
|
|
6892
|
-
const height = Math.abs(dragState.currentY - dragState.startY);
|
|
6893
|
-
selectionOverlay.style.left = `${left}px`;
|
|
6894
|
-
selectionOverlay.style.top = `${top}px`;
|
|
6895
|
-
selectionOverlay.style.width = `${width}px`;
|
|
6896
|
-
selectionOverlay.style.height = `${height}px`;
|
|
6897
|
-
}
|
|
6898
|
-
function removeSelectionOverlay() {
|
|
6899
|
-
if (selectionOverlay) {
|
|
6900
|
-
selectionOverlay.remove();
|
|
6901
|
-
selectionOverlay = null;
|
|
6902
|
-
}
|
|
6903
|
-
}
|
|
6904
|
-
function getSelectionRect() {
|
|
6905
|
-
const left = Math.min(dragState.startX, dragState.currentX);
|
|
6906
|
-
const top = Math.min(dragState.startY, dragState.currentY);
|
|
6907
|
-
const width = Math.abs(dragState.currentX - dragState.startX);
|
|
6908
|
-
const height = Math.abs(dragState.currentY - dragState.startY);
|
|
6909
|
-
return new DOMRect(left, top, width, height);
|
|
6910
|
-
}
|
|
6911
|
-
function isFullyContained(inner, outer) {
|
|
6912
|
-
return inner.left >= outer.left && inner.right <= outer.right && inner.top >= outer.top && inner.bottom <= outer.bottom;
|
|
6913
|
-
}
|
|
6914
|
-
function findElementsFullyInRect(rect) {
|
|
6915
|
-
const elements = [];
|
|
6916
|
-
function traverse(node) {
|
|
6917
|
-
if (shouldIgnoreElement?.(node)) return;
|
|
6918
|
-
if (node.tagName === "SCRIPT" || node.tagName === "STYLE" || node.tagName === "NOSCRIPT") return;
|
|
6919
|
-
const elementRect = node.getBoundingClientRect();
|
|
6920
|
-
if (elementRect.width > 0 && elementRect.height > 0) {
|
|
6921
|
-
if (isFullyContained(elementRect, rect)) {
|
|
6922
|
-
elements.push(node);
|
|
6923
|
-
}
|
|
6924
|
-
}
|
|
6925
|
-
const children = node.children;
|
|
6926
|
-
for (let i5 = 0; i5 < children.length; i5++) {
|
|
6927
|
-
traverse(children[i5]);
|
|
6928
|
-
}
|
|
6929
|
-
}
|
|
6930
|
-
traverse(document.body);
|
|
6931
|
-
return elements;
|
|
6932
|
-
}
|
|
6933
|
-
function filterLeafElements(elements) {
|
|
6934
|
-
return elements.filter((el) => {
|
|
6935
|
-
return !elements.some((other) => other !== el && el.contains(other));
|
|
6936
|
-
});
|
|
6858
|
+
function detectTextSelection() {
|
|
6859
|
+
const selection = window.getSelection();
|
|
6860
|
+
if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null;
|
|
6861
|
+
const selectedText = selection.toString().trim();
|
|
6862
|
+
if (selectedText.length === 0) return null;
|
|
6863
|
+
const range = selection.getRangeAt(0);
|
|
6864
|
+
const ancestor = range.commonAncestorContainer;
|
|
6865
|
+
const commonAncestor = ancestor.nodeType === Node.ELEMENT_NODE ? ancestor : ancestor.parentElement;
|
|
6866
|
+
if (!commonAncestor || shouldIgnoreElement?.(commonAncestor)) return null;
|
|
6867
|
+
return { range, commonAncestor };
|
|
6937
6868
|
}
|
|
6938
6869
|
function handleMouseDown(e5) {
|
|
6939
6870
|
const clickedElement = e5.target;
|
|
6940
6871
|
if (shouldIgnoreElement?.(clickedElement)) return;
|
|
6941
6872
|
mouseDownTime = Date.now();
|
|
6942
|
-
dragState = {
|
|
6943
|
-
isDragging: false,
|
|
6944
|
-
startX: e5.clientX,
|
|
6945
|
-
startY: e5.clientY,
|
|
6946
|
-
currentX: e5.clientX,
|
|
6947
|
-
currentY: e5.clientY
|
|
6948
|
-
};
|
|
6949
6873
|
}
|
|
6950
6874
|
function handleMouseMove(e5) {
|
|
6951
|
-
if (mouseDownTime > 0
|
|
6952
|
-
|
|
6953
|
-
const dy = Math.abs(e5.clientY - dragState.startY);
|
|
6954
|
-
if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
|
|
6955
|
-
const selection = window.getSelection();
|
|
6956
|
-
const hasTextSelection = selection && !selection.isCollapsed && selection.toString().trim().length > 0;
|
|
6957
|
-
if (!hasTextSelection) {
|
|
6958
|
-
dragState.isDragging = true;
|
|
6959
|
-
removeHoverHighlight();
|
|
6960
|
-
selectionOverlay = createSelectionOverlay();
|
|
6961
|
-
}
|
|
6962
|
-
}
|
|
6963
|
-
}
|
|
6964
|
-
if (dragState.isDragging) {
|
|
6965
|
-
dragState.currentX = e5.clientX;
|
|
6966
|
-
dragState.currentY = e5.clientY;
|
|
6967
|
-
updateSelectionOverlay();
|
|
6875
|
+
if (mouseDownTime > 0) {
|
|
6876
|
+
removeHoverHighlight();
|
|
6968
6877
|
return;
|
|
6969
6878
|
}
|
|
6970
6879
|
const target = document.elementFromPoint(e5.clientX, e5.clientY);
|
|
@@ -6984,19 +6893,7 @@
|
|
|
6984
6893
|
hoverOverlay = createHoverOverlay(target);
|
|
6985
6894
|
currentHoveredElement = target;
|
|
6986
6895
|
}
|
|
6987
|
-
function detectTextSelection() {
|
|
6988
|
-
const selection = window.getSelection();
|
|
6989
|
-
if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null;
|
|
6990
|
-
const selectedText = selection.toString().trim();
|
|
6991
|
-
if (selectedText.length === 0) return null;
|
|
6992
|
-
const range = selection.getRangeAt(0);
|
|
6993
|
-
const ancestor = range.commonAncestorContainer;
|
|
6994
|
-
const commonAncestor = ancestor.nodeType === Node.ELEMENT_NODE ? ancestor : ancestor.parentElement;
|
|
6995
|
-
if (!commonAncestor || shouldIgnoreElement?.(commonAncestor)) return null;
|
|
6996
|
-
return { range, commonAncestor };
|
|
6997
|
-
}
|
|
6998
6896
|
function handleMouseUp(e5) {
|
|
6999
|
-
const wasDragging = dragState.isDragging;
|
|
7000
6897
|
try {
|
|
7001
6898
|
const textSelection = detectTextSelection();
|
|
7002
6899
|
if (textSelection) {
|
|
@@ -7006,18 +6903,6 @@
|
|
|
7006
6903
|
onTextSelect?.(range, commonAncestor);
|
|
7007
6904
|
return;
|
|
7008
6905
|
}
|
|
7009
|
-
if (wasDragging) {
|
|
7010
|
-
removeSelectionOverlay();
|
|
7011
|
-
const selectionRect = getSelectionRect();
|
|
7012
|
-
if (selectionRect.width > 10 && selectionRect.height > 10) {
|
|
7013
|
-
const elementsInRect = findElementsFullyInRect(selectionRect);
|
|
7014
|
-
const leafElements = filterLeafElements(elementsInRect);
|
|
7015
|
-
if (leafElements.length > 0) {
|
|
7016
|
-
onMultiSelect?.(leafElements);
|
|
7017
|
-
}
|
|
7018
|
-
}
|
|
7019
|
-
return;
|
|
7020
|
-
}
|
|
7021
6906
|
if (mouseDownTime > 0) {
|
|
7022
6907
|
const target = document.elementFromPoint(e5.clientX, e5.clientY);
|
|
7023
6908
|
if (target && !shouldIgnoreElement?.(target)) {
|
|
@@ -7026,13 +6911,13 @@
|
|
|
7026
6911
|
}
|
|
7027
6912
|
} finally {
|
|
7028
6913
|
mouseDownTime = 0;
|
|
7029
|
-
dragState = { ...INITIAL_DRAG_STATE };
|
|
7030
6914
|
}
|
|
7031
6915
|
}
|
|
7032
6916
|
function handleClick(e5) {
|
|
7033
6917
|
const target = e5.target;
|
|
7034
6918
|
if (shouldIgnoreElement?.(target)) return;
|
|
7035
6919
|
e5.preventDefault();
|
|
6920
|
+
e5.stopPropagation();
|
|
7036
6921
|
}
|
|
7037
6922
|
function preventMouseEvents(e5) {
|
|
7038
6923
|
const target = e5.target;
|
|
@@ -7054,11 +6939,6 @@
|
|
|
7054
6939
|
}
|
|
7055
6940
|
}
|
|
7056
6941
|
}
|
|
7057
|
-
function resetDragState() {
|
|
7058
|
-
mouseDownTime = 0;
|
|
7059
|
-
dragState = { ...INITIAL_DRAG_STATE };
|
|
7060
|
-
removeSelectionOverlay();
|
|
7061
|
-
}
|
|
7062
6942
|
function cleanup() {
|
|
7063
6943
|
removeInspectionStyles();
|
|
7064
6944
|
document.removeEventListener("mousedown", handleMouseDown, true);
|
|
@@ -7069,7 +6949,7 @@
|
|
|
7069
6949
|
document.removeEventListener("contextmenu", preventMouseEvents, true);
|
|
7070
6950
|
document.removeEventListener("keydown", handleKeyDown);
|
|
7071
6951
|
removeHoverHighlight();
|
|
7072
|
-
|
|
6952
|
+
mouseDownTime = 0;
|
|
7073
6953
|
window.getSelection()?.removeAllRanges();
|
|
7074
6954
|
}
|
|
7075
6955
|
function cleanupKeyframesStyle() {
|
|
@@ -7341,14 +7221,17 @@
|
|
|
7341
7221
|
let vnode = null;
|
|
7342
7222
|
if (!codeLocation) {
|
|
7343
7223
|
const ctxVNode = el.__vnode?.ctx?.vnode;
|
|
7344
|
-
if (ctxVNode
|
|
7345
|
-
codeLocation = ctxVNode
|
|
7224
|
+
if (ctxVNode && ctxVNode.el === element) {
|
|
7225
|
+
codeLocation = ctxVNode.props?.__v_inspector;
|
|
7346
7226
|
}
|
|
7347
7227
|
}
|
|
7348
7228
|
if (!codeLocation) {
|
|
7349
|
-
|
|
7350
|
-
|
|
7351
|
-
|
|
7229
|
+
const parentComponent = el.__vueParentComponent;
|
|
7230
|
+
if (parentComponent?.vnode) {
|
|
7231
|
+
codeLocation = parentComponent.vnode.props?.__v_inspector;
|
|
7232
|
+
vueInstance = parentComponent;
|
|
7233
|
+
vnode = parentComponent.vnode;
|
|
7234
|
+
}
|
|
7352
7235
|
}
|
|
7353
7236
|
if (!codeLocation) {
|
|
7354
7237
|
codeLocation = el.__v_inspector;
|
|
@@ -7641,6 +7524,7 @@
|
|
|
7641
7524
|
this.tooltipCleanup = null;
|
|
7642
7525
|
this.toastTimeout = null;
|
|
7643
7526
|
this.clickListenerTimeout = null;
|
|
7527
|
+
this.skipNextClickOutside = false;
|
|
7644
7528
|
this.socket = null;
|
|
7645
7529
|
this.rpc = null;
|
|
7646
7530
|
this.selectionManager = null;
|
|
@@ -7658,6 +7542,10 @@
|
|
|
7658
7542
|
};
|
|
7659
7543
|
this.handleClickOutside = (e5) => {
|
|
7660
7544
|
if (!this.commentPopover.visible) return;
|
|
7545
|
+
if (this.skipNextClickOutside) {
|
|
7546
|
+
this.skipNextClickOutside = false;
|
|
7547
|
+
return;
|
|
7548
|
+
}
|
|
7661
7549
|
const popoverEl = this.shadowRoot?.querySelector(".popover");
|
|
7662
7550
|
if (!popoverEl) return;
|
|
7663
7551
|
const path = e5.composedPath();
|
|
@@ -7682,7 +7570,6 @@
|
|
|
7682
7570
|
});
|
|
7683
7571
|
this.inspectionManager = createInspectionManager({
|
|
7684
7572
|
onElementSelect: (element) => this.handleElementSelected(element),
|
|
7685
|
-
onMultiSelect: (elements) => this.handleMultiSelect(elements),
|
|
7686
7573
|
onTextSelect: (range, commonAncestor) => this.handleTextSelected(range, commonAncestor),
|
|
7687
7574
|
shouldIgnoreElement: (element) => this.shouldIgnoreElement(element),
|
|
7688
7575
|
isElementSelected: (element) => this.selectionManager?.hasElement(element) || false,
|
|
@@ -7692,29 +7579,36 @@
|
|
|
7692
7579
|
}
|
|
7693
7580
|
initializeConsoleCapture() {
|
|
7694
7581
|
try {
|
|
7582
|
+
const originals = {};
|
|
7695
7583
|
CONSOLE_METHODS.forEach((method) => {
|
|
7696
|
-
|
|
7584
|
+
originals[method] = console[method].bind(console);
|
|
7697
7585
|
});
|
|
7698
7586
|
CONSOLE_METHODS.forEach((method) => {
|
|
7699
7587
|
console[method] = (...args) => {
|
|
7700
|
-
|
|
7701
|
-
|
|
7702
|
-
args: args.map((arg) => {
|
|
7588
|
+
try {
|
|
7589
|
+
const serializedArgs = args.map((arg) => {
|
|
7703
7590
|
try {
|
|
7704
7591
|
const str = typeof arg === "object" ? JSON.stringify(arg) : String(arg);
|
|
7705
7592
|
return str.length > CONSOLE_LIMITS.MAX_ARG_LENGTH ? str.slice(0, CONSOLE_LIMITS.MAX_ARG_LENGTH) + "...[truncated]" : str;
|
|
7706
7593
|
} catch {
|
|
7707
7594
|
return "[circular or unserializable]";
|
|
7708
7595
|
}
|
|
7709
|
-
})
|
|
7710
|
-
|
|
7711
|
-
|
|
7712
|
-
|
|
7713
|
-
|
|
7596
|
+
});
|
|
7597
|
+
this.consoleBuffer.push({
|
|
7598
|
+
type: method,
|
|
7599
|
+
args: serializedArgs,
|
|
7600
|
+
timestamp: Date.now()
|
|
7601
|
+
});
|
|
7602
|
+
if (this.consoleBuffer.length > CONSOLE_LIMITS.BUFFER_MAX) {
|
|
7603
|
+
this.consoleBuffer = this.consoleBuffer.slice(-CONSOLE_LIMITS.BUFFER_TRIM_TO);
|
|
7604
|
+
}
|
|
7605
|
+
originals[method]?.(...args);
|
|
7606
|
+
} catch (captureError) {
|
|
7607
|
+
originals[method]?.(...args);
|
|
7714
7608
|
}
|
|
7715
|
-
this.originalConsoleMethods[method]?.(...args);
|
|
7716
7609
|
};
|
|
7717
7610
|
});
|
|
7611
|
+
this.originalConsoleMethods = originals;
|
|
7718
7612
|
} catch (error) {
|
|
7719
7613
|
this.restoreConsoleMethods();
|
|
7720
7614
|
throw error;
|
|
@@ -7756,19 +7650,71 @@
|
|
|
7756
7650
|
}
|
|
7757
7651
|
registerRpcHandlers() {
|
|
7758
7652
|
if (!this.rpc) return;
|
|
7759
|
-
this.rpc.handle.getPageContext(async () =>
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
|
|
7764
|
-
|
|
7765
|
-
|
|
7766
|
-
);
|
|
7767
|
-
this.rpc.handle.
|
|
7653
|
+
this.rpc.handle.getPageContext(async () => {
|
|
7654
|
+
try {
|
|
7655
|
+
return await this.getPageContext();
|
|
7656
|
+
} catch (error) {
|
|
7657
|
+
this.log("[getPageContext] Handler error:", error);
|
|
7658
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7659
|
+
}
|
|
7660
|
+
});
|
|
7661
|
+
this.rpc.handle.getSelectedElements(async () => {
|
|
7662
|
+
try {
|
|
7663
|
+
return await this.getSelectedElements();
|
|
7664
|
+
} catch (error) {
|
|
7665
|
+
this.log("[getSelectedElements] Handler error:", error);
|
|
7666
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7667
|
+
}
|
|
7668
|
+
});
|
|
7669
|
+
this.rpc.handle.triggerSelection(async (mode, selector, selectorType) => {
|
|
7670
|
+
try {
|
|
7671
|
+
return await this.triggerSelection(mode, selector, selectorType);
|
|
7672
|
+
} catch (error) {
|
|
7673
|
+
this.log("[triggerSelection] Handler error:", error);
|
|
7674
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7675
|
+
}
|
|
7676
|
+
});
|
|
7677
|
+
this.rpc.handle.captureScreenshot(async (type, selector, quality) => {
|
|
7678
|
+
try {
|
|
7679
|
+
return await this.captureScreenshot(type, selector, quality);
|
|
7680
|
+
} catch (error) {
|
|
7681
|
+
this.log("[captureScreenshot] Handler error:", error);
|
|
7682
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7683
|
+
}
|
|
7684
|
+
});
|
|
7685
|
+
this.rpc.handle.clearSelection(async () => {
|
|
7686
|
+
try {
|
|
7687
|
+
return await this.clearSelection();
|
|
7688
|
+
} catch (error) {
|
|
7689
|
+
this.log("[clearSelection] Handler error:", error);
|
|
7690
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7691
|
+
}
|
|
7692
|
+
});
|
|
7768
7693
|
this.rpc.handle.ping(async () => "pong");
|
|
7769
|
-
this.rpc.handle.injectCSS(async (css) =>
|
|
7770
|
-
|
|
7771
|
-
|
|
7694
|
+
this.rpc.handle.injectCSS(async (css) => {
|
|
7695
|
+
try {
|
|
7696
|
+
return await this.injectCSS(css);
|
|
7697
|
+
} catch (error) {
|
|
7698
|
+
this.log("[injectCSS] Handler error:", error);
|
|
7699
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7700
|
+
}
|
|
7701
|
+
});
|
|
7702
|
+
this.rpc.handle.injectJS(async (code) => {
|
|
7703
|
+
try {
|
|
7704
|
+
return await this.injectJS(code);
|
|
7705
|
+
} catch (error) {
|
|
7706
|
+
this.log("[injectJS] Handler error:", error);
|
|
7707
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7708
|
+
}
|
|
7709
|
+
});
|
|
7710
|
+
this.rpc.handle.getConsole(async (clear) => {
|
|
7711
|
+
try {
|
|
7712
|
+
return await this.getConsoleLogs(clear);
|
|
7713
|
+
} catch (error) {
|
|
7714
|
+
this.log("[getConsole] Handler error:", error);
|
|
7715
|
+
throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
|
|
7716
|
+
}
|
|
7717
|
+
});
|
|
7772
7718
|
}
|
|
7773
7719
|
reportPageContext() {
|
|
7774
7720
|
if (!this.socket?.connected) return;
|
|
@@ -7870,10 +7816,12 @@
|
|
|
7870
7816
|
cacheBust: true,
|
|
7871
7817
|
pixelRatio: 1,
|
|
7872
7818
|
includeQueryParams: true,
|
|
7873
|
-
// Filter out
|
|
7819
|
+
// Filter out all annotator UI elements
|
|
7874
7820
|
filter: (node) => {
|
|
7875
7821
|
if (node instanceof Element) {
|
|
7876
|
-
|
|
7822
|
+
const className = node.className || "";
|
|
7823
|
+
const tagName = node.tagName?.toLowerCase() || "";
|
|
7824
|
+
if (className.includes("annotator-") || tagName === "annotator-toolbar") {
|
|
7877
7825
|
return false;
|
|
7878
7826
|
}
|
|
7879
7827
|
}
|
|
@@ -7958,21 +7906,6 @@
|
|
|
7958
7906
|
this.selectionCount = this.selectionManager.getSelectedCount();
|
|
7959
7907
|
this.emitSelectionChanged();
|
|
7960
7908
|
}
|
|
7961
|
-
handleMultiSelect(elements) {
|
|
7962
|
-
if (!this.selectionManager) return;
|
|
7963
|
-
let newSelectCount = 0;
|
|
7964
|
-
for (const element of elements) {
|
|
7965
|
-
if (!this.selectionManager.hasElement(element)) {
|
|
7966
|
-
this.selectionManager.selectElement(element, (el) => findNearestComponent(el, this.verbose));
|
|
7967
|
-
newSelectCount++;
|
|
7968
|
-
}
|
|
7969
|
-
}
|
|
7970
|
-
this.selectionCount = this.selectionManager.getSelectedCount();
|
|
7971
|
-
if (newSelectCount > 0) {
|
|
7972
|
-
this.showToast(`Selected ${newSelectCount} element(s)`);
|
|
7973
|
-
}
|
|
7974
|
-
this.emitSelectionChanged();
|
|
7975
|
-
}
|
|
7976
7909
|
handleTextSelected(range, commonAncestor) {
|
|
7977
7910
|
if (!this.selectionManager) return;
|
|
7978
7911
|
const result = this.selectionManager.wrapTextRange(range, commonAncestor);
|
|
@@ -8019,6 +7952,7 @@
|
|
|
8019
7952
|
if (this.clickListenerTimeout) {
|
|
8020
7953
|
clearTimeout(this.clickListenerTimeout);
|
|
8021
7954
|
}
|
|
7955
|
+
this.skipNextClickOutside = true;
|
|
8022
7956
|
this.clickListenerTimeout = setTimeout(() => {
|
|
8023
7957
|
document.addEventListener("click", this.handleClickOutside, true);
|
|
8024
7958
|
this.clickListenerTimeout = null;
|
|
@@ -8072,6 +8006,9 @@
|
|
|
8072
8006
|
this.popoverCleanup();
|
|
8073
8007
|
this.popoverCleanup = null;
|
|
8074
8008
|
}
|
|
8009
|
+
const popoverEl = this.shadowRoot?.querySelector(".popover");
|
|
8010
|
+
if (popoverEl) {
|
|
8011
|
+
}
|
|
8075
8012
|
this.commentPopover = { visible: false, element: null, comment: "" };
|
|
8076
8013
|
}
|
|
8077
8014
|
handlePopoverInput(e5) {
|
|
@@ -8277,7 +8214,7 @@
|
|
|
8277
8214
|
render() {
|
|
8278
8215
|
if (!this.connected) {
|
|
8279
8216
|
return x`
|
|
8280
|
-
<div class="toolbar">
|
|
8217
|
+
<div class="toolbar" role="alert" aria-live="polite">
|
|
8281
8218
|
<div class="error-message">
|
|
8282
8219
|
${this.renderErrorIcon()}
|
|
8283
8220
|
<span>Cannot connect to AI Annotator server</span>
|
|
@@ -8286,12 +8223,15 @@
|
|
|
8286
8223
|
`;
|
|
8287
8224
|
}
|
|
8288
8225
|
return x`
|
|
8289
|
-
<div class="toolbar">
|
|
8226
|
+
<div class="toolbar" role="toolbar" aria-label="AI Annotator tools">
|
|
8290
8227
|
<button
|
|
8291
8228
|
class="toolbar-btn ${this.isInspecting ? "active" : ""}"
|
|
8292
8229
|
@click=${this.toggleInspect}
|
|
8293
8230
|
@mouseenter=${(e5) => this.showTooltip(this.isInspecting ? "Press ESC to exit" : "Inspect elements", e5.currentTarget)}
|
|
8294
8231
|
@mouseleave=${() => this.hideTooltip()}
|
|
8232
|
+
aria-label="${this.isInspecting ? "Exit inspection mode" : "Inspect elements"}"
|
|
8233
|
+
aria-pressed="${this.isInspecting}"
|
|
8234
|
+
title="${this.isInspecting ? "Press ESC to exit" : "Inspect elements"}"
|
|
8295
8235
|
>
|
|
8296
8236
|
${this.renderCursorIcon()}
|
|
8297
8237
|
</button>
|
|
@@ -8303,19 +8243,24 @@
|
|
|
8303
8243
|
@mouseenter=${(e5) => this.showTooltip("Clear selections", e5.currentTarget)}
|
|
8304
8244
|
@mouseleave=${() => this.hideTooltip()}
|
|
8305
8245
|
?disabled=${this.selectionCount === 0}
|
|
8246
|
+
aria-label="Clear all selections"
|
|
8247
|
+
aria-disabled="${this.selectionCount === 0}"
|
|
8248
|
+
title="Clear selections"
|
|
8306
8249
|
>
|
|
8307
8250
|
${this.renderTrashIcon()}
|
|
8308
8251
|
</button>
|
|
8309
|
-
${this.selectionCount > 0 ? x`<span class="badge">${this.selectionCount}</span>` : ""}
|
|
8252
|
+
${this.selectionCount > 0 ? x`<span class="badge" aria-label="${this.selectionCount} selections">${this.selectionCount}</span>` : ""}
|
|
8310
8253
|
</div>
|
|
8311
8254
|
|
|
8312
|
-
<div class="divider"></div>
|
|
8255
|
+
<div class="divider" role="separator" aria-orientation="vertical"></div>
|
|
8313
8256
|
|
|
8314
8257
|
<button
|
|
8315
8258
|
class="toolbar-btn"
|
|
8316
8259
|
@click=${this.copySessionId}
|
|
8317
8260
|
@mouseenter=${(e5) => this.showTooltip("Copy session", e5.currentTarget)}
|
|
8318
8261
|
@mouseleave=${() => this.hideTooltip()}
|
|
8262
|
+
aria-label="Copy session ID to clipboard"
|
|
8263
|
+
title="Copy session"
|
|
8319
8264
|
>
|
|
8320
8265
|
${this.renderClipboardIcon()}
|
|
8321
8266
|
</button>
|
|
@@ -8325,17 +8270,19 @@
|
|
|
8325
8270
|
@click=${this.openHelpPage}
|
|
8326
8271
|
@mouseenter=${(e5) => this.showTooltip("Help", e5.currentTarget)}
|
|
8327
8272
|
@mouseleave=${() => this.hideTooltip()}
|
|
8273
|
+
aria-label="Open help documentation"
|
|
8274
|
+
title="Help"
|
|
8328
8275
|
>
|
|
8329
8276
|
${this.renderHelpIcon()}
|
|
8330
8277
|
</button>
|
|
8331
8278
|
|
|
8332
|
-
${this.toastMessage ? x`<div class="toast">${this.toastMessage}</div>` : ""}
|
|
8279
|
+
${this.toastMessage ? x`<div class="toast" role="status" aria-live="polite">${this.toastMessage}</div>` : ""}
|
|
8333
8280
|
</div>
|
|
8334
8281
|
|
|
8335
|
-
${this.tooltip.visible ? x`<div class="tooltip">${this.tooltip.text}</div>` : ""}
|
|
8282
|
+
${this.tooltip.visible ? x`<div class="tooltip" role="tooltip">${this.tooltip.text}</div>` : ""}
|
|
8336
8283
|
|
|
8337
8284
|
${this.commentPopover.visible ? x`
|
|
8338
|
-
<div class="popover">
|
|
8285
|
+
<div class="popover" role="dialog" aria-label="Element comment" aria-modal="false">
|
|
8339
8286
|
<textarea
|
|
8340
8287
|
class="popover-input"
|
|
8341
8288
|
placeholder="Add a note... (↵ to close)"
|
|
@@ -8343,12 +8290,13 @@
|
|
|
8343
8290
|
@input=${this.handlePopoverInput}
|
|
8344
8291
|
@keydown=${this.handlePopoverInputKeydown}
|
|
8345
8292
|
rows="1"
|
|
8293
|
+
aria-label="Add a comment for the selected element"
|
|
8346
8294
|
></textarea>
|
|
8347
|
-
<div class="popover-actions">
|
|
8348
|
-
<button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection">
|
|
8295
|
+
<div class="popover-actions" role="group" aria-label="Comment actions">
|
|
8296
|
+
<button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection" aria-label="Remove this selection">
|
|
8349
8297
|
${this.renderTrashIcon()}
|
|
8350
8298
|
</button>
|
|
8351
|
-
<button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)">
|
|
8299
|
+
<button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)" aria-label="Close comment">
|
|
8352
8300
|
${this.renderCloseIcon()}
|
|
8353
8301
|
</button>
|
|
8354
8302
|
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type AiAnnotatorOptions } from './vite-plugin';
|
|
2
|
+
export interface NuxtAiAnnotatorOptions extends AiAnnotatorOptions {
|
|
3
|
+
}
|
|
4
|
+
declare const _default: import("@nuxt/schema").NuxtModule<NuxtAiAnnotatorOptions, NuxtAiAnnotatorOptions, false>;
|
|
5
|
+
export default _default;
|