@treelocator/runtime 0.1.0 → 0.1.1
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/components/MaybeOutline.js +15 -6
- package/dist/components/Outline.js +21 -6
- package/dist/components/Runtime.js +16 -7
- package/dist/components/Toast.js +11 -45
- package/dist/output.css +5 -0
- package/package.json +2 -2
- package/src/components/MaybeOutline.tsx +20 -11
- package/src/components/Outline.tsx +21 -3
- package/src/components/Runtime.tsx +18 -8
- package/src/components/Toast.tsx +2 -46
- package/.turbo/turbo-build.log +0 -30
- package/.turbo/turbo-test.log +0 -18
- package/.turbo/turbo-ts.log +0 -4
- package/LICENSE +0 -22
|
@@ -3,7 +3,7 @@ import { effect as _$effect } from "solid-js/web";
|
|
|
3
3
|
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
4
4
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
5
5
|
import { memo as _$memo } from "solid-js/web";
|
|
6
|
-
var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed
|
|
6
|
+
var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-amber-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">No source found`);
|
|
7
7
|
import { createMemo } from "solid-js";
|
|
8
8
|
import { getElementInfo } from "../adapters/getElementInfo";
|
|
9
9
|
import { Outline } from "./Outline";
|
|
@@ -19,24 +19,33 @@ export function MaybeOutline(props) {
|
|
|
19
19
|
}
|
|
20
20
|
}) : (() => {
|
|
21
21
|
var _el$ = _tmpl$(),
|
|
22
|
-
_el$2 = _el$.firstChild
|
|
23
|
-
|
|
24
|
-
_$setStyleProperty(_el$
|
|
22
|
+
_el$2 = _el$.firstChild,
|
|
23
|
+
_el$3 = _el$2.nextSibling;
|
|
24
|
+
_$setStyleProperty(_el$3, "padding", "4px 10px");
|
|
25
|
+
_$setStyleProperty(_el$3, "background", "rgba(120, 53, 15, 0.85)");
|
|
26
|
+
_$setStyleProperty(_el$3, "color", "#fff");
|
|
27
|
+
_$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
|
|
25
28
|
_$effect(_p$ => {
|
|
26
29
|
var _v$ = box().x + "px",
|
|
27
30
|
_v$2 = box().y + "px",
|
|
28
31
|
_v$3 = box().width + "px",
|
|
29
|
-
_v$4 = box().height + "px"
|
|
32
|
+
_v$4 = box().height + "px",
|
|
33
|
+
_v$5 = box().x + 4 + "px",
|
|
34
|
+
_v$6 = box().y + 4 + "px";
|
|
30
35
|
_v$ !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$);
|
|
31
36
|
_v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
|
|
32
37
|
_v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
|
|
33
38
|
_v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
|
|
39
|
+
_v$5 !== _p$.i && _$setStyleProperty(_el$3, "left", _p$.i = _v$5);
|
|
40
|
+
_v$6 !== _p$.n && _$setStyleProperty(_el$3, "top", _p$.n = _v$6);
|
|
34
41
|
return _p$;
|
|
35
42
|
}, {
|
|
36
43
|
e: undefined,
|
|
37
44
|
t: undefined,
|
|
38
45
|
a: undefined,
|
|
39
|
-
o: undefined
|
|
46
|
+
o: undefined,
|
|
47
|
+
i: undefined,
|
|
48
|
+
n: undefined
|
|
40
49
|
});
|
|
41
50
|
return _el$;
|
|
42
51
|
})());
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { template as _$template } from "solid-js/web";
|
|
2
2
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
3
|
-
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
4
3
|
import { effect as _$effect } from "solid-js/web";
|
|
5
4
|
import { insert as _$insert } from "solid-js/web";
|
|
5
|
+
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
6
6
|
import { memo as _$memo } from "solid-js/web";
|
|
7
|
-
var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed
|
|
7
|
+
var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-sky-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em;text-overflow:ellipsis;white-space:nowrap">`);
|
|
8
8
|
import { RenderBoxes } from "./RenderBoxes";
|
|
9
9
|
export function Outline(props) {
|
|
10
10
|
const box = () => props.element.thisElement.box;
|
|
@@ -101,7 +101,8 @@ export function Outline(props) {
|
|
|
101
101
|
};
|
|
102
102
|
return (() => {
|
|
103
103
|
var _el$ = _tmpl$(),
|
|
104
|
-
_el$2 = _el$.firstChild
|
|
104
|
+
_el$2 = _el$.firstChild,
|
|
105
|
+
_el$3 = _el$2.nextSibling;
|
|
105
106
|
_$insert(_el$, (() => {
|
|
106
107
|
var _c$ = _$memo(() => !!domElementInfo());
|
|
107
108
|
return () => _c$() && _$createComponent(RenderBoxes, {
|
|
@@ -110,22 +111,36 @@ export function Outline(props) {
|
|
|
110
111
|
}
|
|
111
112
|
});
|
|
112
113
|
})(), _el$2);
|
|
113
|
-
_$
|
|
114
|
+
_$setStyleProperty(_el$3, "padding", "4px 10px");
|
|
115
|
+
_$setStyleProperty(_el$3, "background", "rgba(15, 23, 42, 0.85)");
|
|
116
|
+
_$setStyleProperty(_el$3, "color", "#fff");
|
|
117
|
+
_$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
|
|
118
|
+
_$setStyleProperty(_el$3, "overflow", "hidden");
|
|
119
|
+
_$insert(_el$3, () => props.element.thisElement.label);
|
|
114
120
|
_$effect(_p$ => {
|
|
115
121
|
var _v$ = box().x + "px",
|
|
116
122
|
_v$2 = box().y + "px",
|
|
117
123
|
_v$3 = box().width + "px",
|
|
118
|
-
_v$4 = box().height + "px"
|
|
124
|
+
_v$4 = box().height + "px",
|
|
125
|
+
_v$5 = box().x + 4 + "px",
|
|
126
|
+
_v$6 = box().y + 4 + "px",
|
|
127
|
+
_v$7 = box().width - 8 + "px";
|
|
119
128
|
_v$ !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$);
|
|
120
129
|
_v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
|
|
121
130
|
_v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
|
|
122
131
|
_v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
|
|
132
|
+
_v$5 !== _p$.i && _$setStyleProperty(_el$3, "left", _p$.i = _v$5);
|
|
133
|
+
_v$6 !== _p$.n && _$setStyleProperty(_el$3, "top", _p$.n = _v$6);
|
|
134
|
+
_v$7 !== _p$.s && _$setStyleProperty(_el$3, "max-width", _p$.s = _v$7);
|
|
123
135
|
return _p$;
|
|
124
136
|
}, {
|
|
125
137
|
e: undefined,
|
|
126
138
|
t: undefined,
|
|
127
139
|
a: undefined,
|
|
128
|
-
o: undefined
|
|
140
|
+
o: undefined,
|
|
141
|
+
i: undefined,
|
|
142
|
+
n: undefined,
|
|
143
|
+
s: undefined
|
|
129
144
|
});
|
|
130
145
|
return _el$;
|
|
131
146
|
})();
|
|
@@ -6,7 +6,7 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
|
|
|
6
6
|
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
7
7
|
import { memo as _$memo } from "solid-js/web";
|
|
8
8
|
var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed pointer-events-auto"title="LocatorJS - Component Ancestry Tracker"data-locatorjs-api=window.__locatorjs__ data-locatorjs-help=window.__locatorjs__.help() style=z-index:2147483646><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="LocatorJS: Get component paths using window.__locatorjs__.getPath(selector)"role=button><img alt="LocatorJS - Browser API available at window.__locatorjs__ - Call window.__locatorjs__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: LocatorJS provides window.__locatorjs__ API for component ancestry tracking. Usage: window.__locatorjs__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__locatorjs__.help() Example: page.evaluate(function() \{ return window.__locatorjs__.getPath('button.submit'); })"style=white-space:nowrap>LocatorJS Browser API: Call window.__locatorjs__.help() for usage instructions`);
|
|
9
|
-
import {
|
|
9
|
+
import { createEffect, createSignal, onCleanup } from "solid-js";
|
|
10
10
|
import { render } from "solid-js/web";
|
|
11
11
|
import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
|
|
12
12
|
import { MaybeOutline } from "./MaybeOutline";
|
|
@@ -34,26 +34,32 @@ function Runtime(props) {
|
|
|
34
34
|
function keyDownListener(e) {
|
|
35
35
|
setHoldingModKey(isCombinationModifiersPressed(e, true));
|
|
36
36
|
}
|
|
37
|
+
function mouseMoveListener(e) {
|
|
38
|
+
// Update modifier state from mouse events - more reliable than keydown/keyup
|
|
39
|
+
setHoldingModKey(e.altKey);
|
|
40
|
+
}
|
|
37
41
|
function mouseOverListener(e) {
|
|
38
42
|
const target = e.target;
|
|
39
43
|
if (target && target instanceof HTMLElement) {
|
|
40
44
|
if (isLocatorsOwnElement(target)) {
|
|
41
45
|
return;
|
|
42
46
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
});
|
|
47
|
+
setCurrentElement(target);
|
|
48
|
+
// Also update modifier state
|
|
49
|
+
setHoldingModKey(e.altKey);
|
|
47
50
|
}
|
|
48
51
|
}
|
|
49
52
|
function mouseDownUpListener(e) {
|
|
50
|
-
|
|
53
|
+
// Update modifier state
|
|
54
|
+
setHoldingModKey(e.altKey);
|
|
55
|
+
if (e.altKey || locatorActive()) {
|
|
51
56
|
e.preventDefault();
|
|
52
57
|
e.stopPropagation();
|
|
53
58
|
}
|
|
54
59
|
}
|
|
55
60
|
function clickListener(e) {
|
|
56
|
-
|
|
61
|
+
// Check altKey directly for more reliable first-click detection
|
|
62
|
+
if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
|
|
57
63
|
return;
|
|
58
64
|
}
|
|
59
65
|
const target = e.target;
|
|
@@ -99,6 +105,9 @@ function Runtime(props) {
|
|
|
99
105
|
root.addEventListener("mouseover", mouseOverListener, {
|
|
100
106
|
capture: true
|
|
101
107
|
});
|
|
108
|
+
root.addEventListener("mousemove", mouseMoveListener, {
|
|
109
|
+
capture: true
|
|
110
|
+
});
|
|
102
111
|
root.addEventListener("keydown", keyDownListener);
|
|
103
112
|
root.addEventListener("keyup", keyUpListener);
|
|
104
113
|
root.addEventListener("click", clickListener, {
|
package/dist/components/Toast.js
CHANGED
|
@@ -1,23 +1,13 @@
|
|
|
1
1
|
import { template as _$template } from "solid-js/web";
|
|
2
2
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
3
3
|
import { insert as _$insert } from "solid-js/web";
|
|
4
|
-
import { setAttribute as _$setAttribute } from "solid-js/web";
|
|
5
|
-
import { effect as _$effect } from "solid-js/web";
|
|
6
4
|
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
7
|
-
var _tmpl$ = /*#__PURE__*/_$template(`<div style="
|
|
8
|
-
|
|
9
|
-
_tmpl$3 = /*#__PURE__*/_$template(`<div style="background-color:#111827;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);font-size:14px;z-index:100000;pointer-events:auto">`);
|
|
10
|
-
import { createSignal, onCleanup, onMount } from "solid-js";
|
|
5
|
+
var _tmpl$ = /*#__PURE__*/_$template(`<div style="background-color:#111827;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);font-size:14px;z-index:100000;pointer-events:none">`);
|
|
6
|
+
import { onCleanup, onMount } from "solid-js";
|
|
11
7
|
import { Portal } from "solid-js/web";
|
|
12
|
-
import TREE_ICON from "../_generated_tree_icon";
|
|
13
8
|
export function Toast(props) {
|
|
14
9
|
let timeoutId;
|
|
15
|
-
const [flashOpacity, setFlashOpacity] = createSignal(1);
|
|
16
10
|
onMount(() => {
|
|
17
|
-
// Start flash fade after a brief moment so it's visible
|
|
18
|
-
setTimeout(() => {
|
|
19
|
-
setFlashOpacity(0);
|
|
20
|
-
}, 100);
|
|
21
11
|
timeoutId = setTimeout(() => {
|
|
22
12
|
props.onClose();
|
|
23
13
|
}, 1500);
|
|
@@ -30,39 +20,15 @@ export function Toast(props) {
|
|
|
30
20
|
return document.body;
|
|
31
21
|
},
|
|
32
22
|
get children() {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
_$setStyleProperty(_el$, "transition", "opacity 0.3s ease-out");
|
|
43
|
-
_$effect(_$p => _$setStyleProperty(_el$, "opacity", flashOpacity()));
|
|
44
|
-
return _el$;
|
|
45
|
-
})(), (() => {
|
|
46
|
-
var _el$2 = _tmpl$2(),
|
|
47
|
-
_el$3 = _el$2.firstChild;
|
|
48
|
-
_$setStyleProperty(_el$2, "position", "fixed");
|
|
49
|
-
_$setStyleProperty(_el$2, "bottom", "16px");
|
|
50
|
-
_$setStyleProperty(_el$2, "left", "16px");
|
|
51
|
-
_$setAttribute(_el$3, "src", TREE_ICON);
|
|
52
|
-
_$setStyleProperty(_el$3, "width", "32px");
|
|
53
|
-
_$setStyleProperty(_el$3, "height", "32px");
|
|
54
|
-
return _el$2;
|
|
55
|
-
})(), (() => {
|
|
56
|
-
var _el$4 = _tmpl$3();
|
|
57
|
-
_$setStyleProperty(_el$4, "position", "fixed");
|
|
58
|
-
_$setStyleProperty(_el$4, "bottom", "16px");
|
|
59
|
-
_$setStyleProperty(_el$4, "left", "50%");
|
|
60
|
-
_$setStyleProperty(_el$4, "transform", "translateX(-50%)");
|
|
61
|
-
_$setStyleProperty(_el$4, "color", "white");
|
|
62
|
-
_$setStyleProperty(_el$4, "padding", "8px 16px");
|
|
63
|
-
_$insert(_el$4, () => props.message);
|
|
64
|
-
return _el$4;
|
|
65
|
-
})()];
|
|
23
|
+
var _el$ = _tmpl$();
|
|
24
|
+
_$setStyleProperty(_el$, "position", "fixed");
|
|
25
|
+
_$setStyleProperty(_el$, "bottom", "16px");
|
|
26
|
+
_$setStyleProperty(_el$, "left", "50%");
|
|
27
|
+
_$setStyleProperty(_el$, "transform", "translateX(-50%)");
|
|
28
|
+
_$setStyleProperty(_el$, "color", "white");
|
|
29
|
+
_$setStyleProperty(_el$, "padding", "8px 16px");
|
|
30
|
+
_$insert(_el$, () => props.message);
|
|
31
|
+
return _el$;
|
|
66
32
|
}
|
|
67
33
|
});
|
|
68
34
|
}
|
package/dist/output.css
CHANGED
|
@@ -1164,6 +1164,11 @@ select {
|
|
|
1164
1164
|
border-style: solid;
|
|
1165
1165
|
}
|
|
1166
1166
|
|
|
1167
|
+
.border-amber-500 {
|
|
1168
|
+
--tw-border-opacity: 1;
|
|
1169
|
+
border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1167
1172
|
.border-blue-500 {
|
|
1168
1173
|
--tw-border-opacity: 1;
|
|
1169
1174
|
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@treelocator/runtime",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__locatorjs__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"locator",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"directory": "packages/runtime"
|
|
72
72
|
},
|
|
73
73
|
"license": "MIT",
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "afc8a534284e818665bb4d03b7fa940ec5ad5880"
|
|
75
75
|
}
|
|
@@ -21,23 +21,32 @@ export function MaybeOutline(props: {
|
|
|
21
21
|
targets={props.targets}
|
|
22
22
|
/>
|
|
23
23
|
) : (
|
|
24
|
-
<div
|
|
24
|
+
<div>
|
|
25
|
+
{/* Element outline box */}
|
|
25
26
|
<div
|
|
26
|
-
class="
|
|
27
|
+
class="fixed rounded border border-solid border-amber-500"
|
|
27
28
|
style={{
|
|
28
|
-
|
|
29
|
+
"z-index": 2,
|
|
29
30
|
left: box().x + "px",
|
|
30
31
|
top: box().y + "px",
|
|
31
32
|
width: box().width + "px",
|
|
32
33
|
height: box().height + "px",
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
}}
|
|
35
|
+
/>
|
|
36
|
+
{/* Glass morphism label */}
|
|
37
|
+
<div
|
|
38
|
+
class="fixed text-xs font-medium rounded-md"
|
|
39
|
+
style={{
|
|
40
|
+
"z-index": 3,
|
|
41
|
+
left: box().x + 4 + "px",
|
|
42
|
+
top: box().y + 4 + "px",
|
|
43
|
+
padding: "4px 10px",
|
|
44
|
+
background: "rgba(120, 53, 15, 0.85)",
|
|
45
|
+
color: "#fff",
|
|
46
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
47
|
+
"box-shadow": "0 4px 16px rgba(0, 0, 0, 0.2)",
|
|
48
|
+
"font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace",
|
|
49
|
+
"letter-spacing": "0.01em",
|
|
41
50
|
}}
|
|
42
51
|
>
|
|
43
52
|
No source found
|
|
@@ -128,17 +128,35 @@ export function Outline(props: {
|
|
|
128
128
|
<>
|
|
129
129
|
<div>
|
|
130
130
|
{domElementInfo() && <RenderBoxes allBoxes={domElementInfo()!} />}
|
|
131
|
+
{/* Element outline box */}
|
|
131
132
|
<div
|
|
132
|
-
class="fixed
|
|
133
|
+
class="fixed rounded border border-solid border-sky-500"
|
|
133
134
|
style={{
|
|
134
135
|
"z-index": 2,
|
|
135
136
|
left: box().x + "px",
|
|
136
137
|
top: box().y + "px",
|
|
137
138
|
width: box().width + "px",
|
|
138
139
|
height: box().height + "px",
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
}}
|
|
141
|
+
/>
|
|
142
|
+
{/* Glass morphism label */}
|
|
143
|
+
<div
|
|
144
|
+
class="fixed text-xs font-medium rounded-md"
|
|
145
|
+
style={{
|
|
146
|
+
"z-index": 3,
|
|
147
|
+
left: box().x + 4 + "px",
|
|
148
|
+
top: box().y + 4 + "px",
|
|
149
|
+
padding: "4px 10px",
|
|
150
|
+
background: "rgba(15, 23, 42, 0.85)",
|
|
151
|
+
color: "#fff",
|
|
152
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
153
|
+
"box-shadow": "0 4px 16px rgba(0, 0, 0, 0.2)",
|
|
154
|
+
"font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace",
|
|
155
|
+
"letter-spacing": "0.01em",
|
|
156
|
+
"max-width": box().width - 8 + "px",
|
|
157
|
+
overflow: "hidden",
|
|
141
158
|
"text-overflow": "ellipsis",
|
|
159
|
+
"white-space": "nowrap",
|
|
142
160
|
}}
|
|
143
161
|
>
|
|
144
162
|
{props.element.thisElement.label}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Targets } from "@locator/shared";
|
|
2
|
-
import {
|
|
2
|
+
import { createEffect, createSignal, onCleanup } from "solid-js";
|
|
3
3
|
import { render } from "solid-js/web";
|
|
4
4
|
import { AdapterId } from "../consts";
|
|
5
5
|
import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
|
|
@@ -42,6 +42,11 @@ function Runtime(props: RuntimeProps) {
|
|
|
42
42
|
setHoldingModKey(isCombinationModifiersPressed(e, true));
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
function mouseMoveListener(e: MouseEvent) {
|
|
46
|
+
// Update modifier state from mouse events - more reliable than keydown/keyup
|
|
47
|
+
setHoldingModKey(e.altKey);
|
|
48
|
+
}
|
|
49
|
+
|
|
45
50
|
function mouseOverListener(e: MouseEvent) {
|
|
46
51
|
const target = e.target;
|
|
47
52
|
if (target && target instanceof HTMLElement) {
|
|
@@ -49,23 +54,25 @@ function Runtime(props: RuntimeProps) {
|
|
|
49
54
|
return;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
setCurrentElement(target);
|
|
56
|
-
});
|
|
57
|
+
setCurrentElement(target);
|
|
58
|
+
// Also update modifier state
|
|
59
|
+
setHoldingModKey(e.altKey);
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
function mouseDownUpListener(e: MouseEvent) {
|
|
61
|
-
|
|
64
|
+
// Update modifier state
|
|
65
|
+
setHoldingModKey(e.altKey);
|
|
66
|
+
|
|
67
|
+
if (e.altKey || locatorActive()) {
|
|
62
68
|
e.preventDefault();
|
|
63
69
|
e.stopPropagation();
|
|
64
70
|
}
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
function clickListener(e: MouseEvent) {
|
|
68
|
-
|
|
74
|
+
// Check altKey directly for more reliable first-click detection
|
|
75
|
+
if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
|
|
69
76
|
return;
|
|
70
77
|
}
|
|
71
78
|
|
|
@@ -117,6 +124,9 @@ function Runtime(props: RuntimeProps) {
|
|
|
117
124
|
root.addEventListener("mouseover", mouseOverListener as EventListener, {
|
|
118
125
|
capture: true,
|
|
119
126
|
});
|
|
127
|
+
root.addEventListener("mousemove", mouseMoveListener as EventListener, {
|
|
128
|
+
capture: true,
|
|
129
|
+
});
|
|
120
130
|
root.addEventListener("keydown", keyDownListener as EventListener);
|
|
121
131
|
root.addEventListener("keyup", keyUpListener as EventListener);
|
|
122
132
|
root.addEventListener("click", clickListener as EventListener, {
|
package/src/components/Toast.tsx
CHANGED
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { onCleanup, onMount } from "solid-js";
|
|
2
2
|
import { Portal } from "solid-js/web";
|
|
3
|
-
import TREE_ICON from "../_generated_tree_icon";
|
|
4
3
|
|
|
5
4
|
export function Toast(props: { message: string; onClose: () => void }) {
|
|
6
5
|
let timeoutId: ReturnType<typeof setTimeout>;
|
|
7
|
-
const [flashOpacity, setFlashOpacity] = createSignal(1);
|
|
8
6
|
|
|
9
7
|
onMount(() => {
|
|
10
|
-
// Start flash fade after a brief moment so it's visible
|
|
11
|
-
setTimeout(() => {
|
|
12
|
-
setFlashOpacity(0);
|
|
13
|
-
}, 100);
|
|
14
|
-
|
|
15
8
|
timeoutId = setTimeout(() => {
|
|
16
9
|
props.onClose();
|
|
17
10
|
}, 1500);
|
|
@@ -23,43 +16,6 @@ export function Toast(props: { message: string; onClose: () => void }) {
|
|
|
23
16
|
|
|
24
17
|
return (
|
|
25
18
|
<Portal mount={document.body}>
|
|
26
|
-
{/* Flash overlay */}
|
|
27
|
-
<div
|
|
28
|
-
style={{
|
|
29
|
-
position: "fixed",
|
|
30
|
-
top: "0",
|
|
31
|
-
left: "0",
|
|
32
|
-
right: "0",
|
|
33
|
-
bottom: "0",
|
|
34
|
-
width: "100vw",
|
|
35
|
-
height: "100vh",
|
|
36
|
-
"z-index": 99999,
|
|
37
|
-
"background-color": "rgba(56, 189, 248, 0.5)",
|
|
38
|
-
opacity: flashOpacity(),
|
|
39
|
-
transition: "opacity 0.3s ease-out",
|
|
40
|
-
"pointer-events": "none",
|
|
41
|
-
}}
|
|
42
|
-
/>
|
|
43
|
-
{/* Tree icon in bottom left */}
|
|
44
|
-
<div
|
|
45
|
-
style={{
|
|
46
|
-
position: "fixed",
|
|
47
|
-
bottom: "16px",
|
|
48
|
-
left: "16px",
|
|
49
|
-
"z-index": 100000,
|
|
50
|
-
"pointer-events": "none",
|
|
51
|
-
}}
|
|
52
|
-
>
|
|
53
|
-
<img
|
|
54
|
-
src={TREE_ICON}
|
|
55
|
-
alt="Tree"
|
|
56
|
-
style={{
|
|
57
|
-
width: "32px",
|
|
58
|
-
height: "32px",
|
|
59
|
-
}}
|
|
60
|
-
/>
|
|
61
|
-
</div>
|
|
62
|
-
{/* Toast message */}
|
|
63
19
|
<div
|
|
64
20
|
style={{
|
|
65
21
|
position: "fixed",
|
|
@@ -73,7 +29,7 @@ export function Toast(props: { message: string; onClose: () => void }) {
|
|
|
73
29
|
"box-shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
|
|
74
30
|
"font-size": "14px",
|
|
75
31
|
"z-index": 100000,
|
|
76
|
-
"pointer-events": "
|
|
32
|
+
"pointer-events": "none",
|
|
77
33
|
}}
|
|
78
34
|
>
|
|
79
35
|
{props.message}
|
package/.turbo/turbo-build.log
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
> @treelocator/runtime@0.1.0 build /Users/wende/projects/locatorjs/packages/runtime
|
|
3
|
-
> concurrently pnpm:build:*
|
|
4
|
-
|
|
5
|
-
[tailwind]
|
|
6
|
-
[tailwind] > @treelocator/runtime@0.1.0 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
|
|
7
|
-
[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
|
|
8
|
-
[tailwind]
|
|
9
|
-
[wrapImage]
|
|
10
|
-
[wrapImage] > @treelocator/runtime@0.1.0 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
|
|
11
|
-
[wrapImage] > node ./scripts/wrapImage.js
|
|
12
|
-
[wrapImage]
|
|
13
|
-
[ts]
|
|
14
|
-
[ts] > @treelocator/runtime@0.1.0 build:ts /Users/wende/projects/locatorjs/packages/runtime
|
|
15
|
-
[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
|
|
16
|
-
[ts]
|
|
17
|
-
[babel]
|
|
18
|
-
[babel] > @treelocator/runtime@0.1.0 build:babel /Users/wende/projects/locatorjs/packages/runtime
|
|
19
|
-
[babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
|
|
20
|
-
[babel]
|
|
21
|
-
[wrapImage] Tree icon file generated
|
|
22
|
-
[wrapImage] pnpm run build:wrapImage exited with code 0
|
|
23
|
-
[tailwind]
|
|
24
|
-
[tailwind] Rebuilding...
|
|
25
|
-
[tailwind]
|
|
26
|
-
[tailwind] Done in 176ms.
|
|
27
|
-
[tailwind] pnpm run build:tailwind exited with code 0
|
|
28
|
-
[babel] Successfully compiled 71 files with Babel (552ms).
|
|
29
|
-
[babel] pnpm run build:babel exited with code 0
|
|
30
|
-
[ts] pnpm run build:ts exited with code 0
|
package/.turbo/turbo-test.log
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
> @locator/runtime@0.5.1 test /Users/wende/projects/locatorjs/packages/runtime
|
|
3
|
-
> vitest run
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
RUN v2.1.9 /Users/wende/projects/locatorjs/packages/runtime
|
|
7
|
-
|
|
8
|
-
✓ src/functions/cropPath.test.ts (2 tests) 1ms
|
|
9
|
-
✓ src/functions/getUsableFileName.test.tsx (4 tests) 1ms
|
|
10
|
-
✓ src/functions/transformPath.test.ts (3 tests) 1ms
|
|
11
|
-
✓ src/functions/evalTemplate.test.ts (1 test) 1ms
|
|
12
|
-
✓ src/functions/mergeRects.test.ts (1 test) 1ms
|
|
13
|
-
|
|
14
|
-
Test Files 5 passed (5)
|
|
15
|
-
Tests 11 passed (11)
|
|
16
|
-
Start at 23:44:31
|
|
17
|
-
Duration 573ms (transform 266ms, setup 0ms, collect 341ms, tests 7ms, environment 1ms, prepare 391ms)
|
|
18
|
-
|
package/.turbo/turbo-ts.log
DELETED
package/LICENSE
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Krzysztof Wende
|
|
4
|
-
Copyright (c) 2023 Michael Musil (original LocatorJS)
|
|
5
|
-
|
|
6
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
-
in the Software without restriction, including without limitation the rights
|
|
9
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
-
furnished to do so, subject to the following conditions:
|
|
12
|
-
|
|
13
|
-
The above copyright notice and this permission notice shall be included in all
|
|
14
|
-
copies or substantial portions of the Software.
|
|
15
|
-
|
|
16
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
-
SOFTWARE.
|