uilint-react 0.1.38 → 0.1.40
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/dist/{ElementBadges-J2ELN2PU.js → ElementBadges-2I25HN6W.js} +48 -15
- package/dist/{InspectionPanel-7N56XBWA.js → InspectionPanel-4LOWGHW7.js} +2 -2
- package/dist/{LocatorOverlay-RDDLASGB.js → LocatorOverlay-ERRFPXKK.js} +2 -2
- package/dist/{UILintToolbar-OQY2V7Q7.js → UILintToolbar-MJH7RUZK.js} +2 -2
- package/dist/chunk-2VRWAMW7.js +927 -0
- package/dist/chunk-C6NUU5MF.js +1628 -0
- package/dist/{chunk-PU6XPNPN.js → chunk-LAL3JTAA.js} +161 -136
- package/dist/{chunk-V4273T5B.js → chunk-UD6HPLEZ.js} +1 -1
- package/dist/index.d.ts +32 -24
- package/dist/index.js +4 -4
- package/package.json +2 -2
- package/dist/chunk-GZOQ6QWC.js +0 -908
- package/dist/chunk-WEBVLQL5.js +0 -911
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
3
|
import {
|
|
4
|
-
useUILintContext
|
|
5
|
-
|
|
4
|
+
useUILintContext,
|
|
5
|
+
useUILintStore
|
|
6
|
+
} from "./chunk-LAL3JTAA.js";
|
|
6
7
|
|
|
7
8
|
// src/components/ui-lint/ElementBadges.tsx
|
|
8
9
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
@@ -153,8 +154,7 @@ function getScaleFromDistance(distance) {
|
|
|
153
154
|
}
|
|
154
155
|
function getBadgeColor(issueCount) {
|
|
155
156
|
if (issueCount === 0) return STYLES.success;
|
|
156
|
-
|
|
157
|
-
return STYLES.error;
|
|
157
|
+
return STYLES.warning;
|
|
158
158
|
}
|
|
159
159
|
function formatElementLabel(element) {
|
|
160
160
|
const tag = element.tagName.toLowerCase();
|
|
@@ -203,6 +203,10 @@ function ElementBadges() {
|
|
|
203
203
|
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
|
|
204
204
|
const [badgePositions, setBadgePositions] = useState([]);
|
|
205
205
|
const [isAltKeyPressed, setIsAltKeyPressed] = useState(false);
|
|
206
|
+
const hoveredFilePath = useUILintStore((s) => s.hoveredFilePath);
|
|
207
|
+
const selectedFilePath = useUILintStore(
|
|
208
|
+
(s) => s.selectedFilePath
|
|
209
|
+
);
|
|
206
210
|
useEffect(() => {
|
|
207
211
|
setMounted(true);
|
|
208
212
|
}, []);
|
|
@@ -256,15 +260,34 @@ function ElementBadges() {
|
|
|
256
260
|
}
|
|
257
261
|
setBadgePositions(positions);
|
|
258
262
|
};
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
263
|
+
let rafId = null;
|
|
264
|
+
const scheduleUpdate = () => {
|
|
265
|
+
if (rafId !== null) return;
|
|
266
|
+
rafId = requestAnimationFrame(() => {
|
|
267
|
+
rafId = null;
|
|
268
|
+
updatePositions();
|
|
269
|
+
});
|
|
270
|
+
};
|
|
271
|
+
scheduleUpdate();
|
|
272
|
+
const handleScroll = () => scheduleUpdate();
|
|
273
|
+
const handleResize = () => scheduleUpdate();
|
|
274
|
+
const handleVisibility = () => {
|
|
275
|
+
if (document.visibilityState === "visible") {
|
|
276
|
+
scheduleUpdate();
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
280
|
+
window.addEventListener("resize", handleResize);
|
|
281
|
+
document.addEventListener("visibilitychange", handleVisibility);
|
|
282
|
+
return () => {
|
|
283
|
+
if (rafId !== null) {
|
|
284
|
+
cancelAnimationFrame(rafId);
|
|
285
|
+
}
|
|
286
|
+
window.removeEventListener("scroll", handleScroll, true);
|
|
287
|
+
window.removeEventListener("resize", handleResize);
|
|
288
|
+
document.removeEventListener("visibilitychange", handleVisibility);
|
|
264
289
|
};
|
|
265
|
-
|
|
266
|
-
return () => cancelAnimationFrame(rafId);
|
|
267
|
-
}, [autoScanState, elementIssuesCache]);
|
|
290
|
+
}, [autoScanState.status, autoScanState.elements, elementIssuesCache]);
|
|
268
291
|
const handleSelect = useCallback(
|
|
269
292
|
(element, issue) => {
|
|
270
293
|
const inspected = {
|
|
@@ -282,15 +305,25 @@ function ElementBadges() {
|
|
|
282
305
|
[badgePositions]
|
|
283
306
|
);
|
|
284
307
|
const visibleBadges = useMemo(() => {
|
|
285
|
-
|
|
308
|
+
let filtered = nudgedPositions.filter(
|
|
286
309
|
(pos) => shouldShowBadge(pos.issue, isAltKeyPressed)
|
|
287
310
|
);
|
|
288
|
-
|
|
311
|
+
const activeFilePath = selectedFilePath || hoveredFilePath;
|
|
312
|
+
if (activeFilePath) {
|
|
313
|
+
filtered = filtered.filter(
|
|
314
|
+
(pos) => pos.element.source.fileName === activeFilePath
|
|
315
|
+
);
|
|
316
|
+
}
|
|
317
|
+
return filtered;
|
|
318
|
+
}, [nudgedPositions, isAltKeyPressed, selectedFilePath, hoveredFilePath]);
|
|
289
319
|
if (!mounted) return null;
|
|
290
320
|
if (autoScanState.status === "idle") return null;
|
|
291
321
|
const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, children: [
|
|
292
322
|
/* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
|
|
293
|
-
visibleBadges.
|
|
323
|
+
visibleBadges.filter((pos, idx, arr) => {
|
|
324
|
+
const id = pos.element.id;
|
|
325
|
+
return arr.findIndex((p) => p.element.id === id) === idx;
|
|
326
|
+
}).map((nudgedPos) => {
|
|
294
327
|
const distance = Math.hypot(
|
|
295
328
|
nudgedPos.nudgedX - cursorPos.x,
|
|
296
329
|
nudgedPos.nudgedY - cursorPos.y
|