@refinedev/devtools 1.1.3 → 1.1.5
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/devtools-pin.d.ts +1 -2
- package/dist/components/devtools-pin.d.ts.map +1 -1
- package/dist/components/devtools-selector.d.ts +4 -2
- package/dist/components/devtools-selector.d.ts.map +1 -1
- package/dist/components/icons/arrow-union-icon.d.ts +3 -0
- package/dist/components/icons/arrow-union-icon.d.ts.map +1 -0
- package/dist/components/icons/devtools-icon.d.ts +2 -7
- package/dist/components/icons/devtools-icon.d.ts.map +1 -1
- package/dist/components/icons/selector-button.d.ts.map +1 -1
- package/dist/components/selector-box.d.ts.map +1 -1
- package/dist/components/selector-hint.d.ts +1 -2
- package/dist/components/selector-hint.d.ts.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/iife/index.js +2 -2
- package/dist/iife/index.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/panel.d.ts.map +1 -1
- package/dist/utilities/index.d.ts +0 -1
- package/dist/utilities/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/devtools-pin.tsx +23 -23
- package/src/components/devtools-selector.tsx +13 -36
- package/src/components/icons/arrow-union-icon.tsx +33 -0
- package/src/components/icons/devtools-icon.tsx +28 -84
- package/src/components/icons/selector-button.tsx +9 -71
- package/src/components/selector-box.tsx +45 -20
- package/src/components/selector-hint.tsx +17 -23
- package/src/panel.tsx +3 -13
- package/src/utilities/index.ts +0 -23
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { createPortal } from "react-dom";
|
|
3
3
|
import { useSelector } from "src/utilities/use-selector";
|
|
4
|
-
import { SelectorButtonIcon } from "./icons/selector-button";
|
|
5
4
|
import { SelectorBox } from "./selector-box";
|
|
6
5
|
import { SelectorHint } from "./selector-hint";
|
|
7
6
|
|
|
8
7
|
type Props = {
|
|
9
8
|
onSelectorOpen: () => void;
|
|
10
9
|
onHighlight: (name: string) => void;
|
|
11
|
-
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export const DevtoolsSelector = ({
|
|
15
15
|
onSelectorOpen,
|
|
16
16
|
onHighlight,
|
|
17
|
-
|
|
17
|
+
icon,
|
|
18
|
+
style,
|
|
18
19
|
}: Props) => {
|
|
19
|
-
const [active, setActive] = React.useState(false);
|
|
20
20
|
const [hover, setHover] = React.useState(false);
|
|
21
|
+
const [active, setActive] = React.useState(false);
|
|
21
22
|
const { rect, name } = useSelector(active);
|
|
22
23
|
|
|
23
24
|
const [selectorBoxRoot, setSelectorBoxRoot] =
|
|
@@ -76,20 +77,7 @@ export const DevtoolsSelector = ({
|
|
|
76
77
|
}, [active, onSelectorOpen]);
|
|
77
78
|
|
|
78
79
|
return (
|
|
79
|
-
<div
|
|
80
|
-
style={{
|
|
81
|
-
position: "absolute",
|
|
82
|
-
left: "calc((100px - ((100% - 42px) / 2)) + 7px)",
|
|
83
|
-
top: "calc((100% - 28px) / 2)",
|
|
84
|
-
transform: groupHover ? "translateX(0)" : "translateX(-40px)",
|
|
85
|
-
transitionDuration: "0.2s",
|
|
86
|
-
transitionProperty: "transform,opacity",
|
|
87
|
-
transitionTimingFunction: "ease-in-out",
|
|
88
|
-
pointerEvents: groupHover ? "auto" : "none",
|
|
89
|
-
height: 28,
|
|
90
|
-
width: 28,
|
|
91
|
-
}}
|
|
92
|
-
>
|
|
80
|
+
<div style={style}>
|
|
93
81
|
<div
|
|
94
82
|
role="button"
|
|
95
83
|
title="Element Selector"
|
|
@@ -102,28 +90,17 @@ export const DevtoolsSelector = ({
|
|
|
102
90
|
setActive((active) => !active);
|
|
103
91
|
}}
|
|
104
92
|
style={{
|
|
105
|
-
width: 28,
|
|
106
|
-
height: 28,
|
|
107
|
-
border: "none",
|
|
108
|
-
background: "none",
|
|
109
|
-
outline: "none",
|
|
110
|
-
margin: 0,
|
|
111
93
|
padding: 0,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
opacity: groupHover ? 1 : 0,
|
|
94
|
+
margin: 0,
|
|
95
|
+
height: "100%",
|
|
96
|
+
width: "100%",
|
|
97
|
+
transform: hover ? "rotate(180deg)" : "rotate(0deg)",
|
|
98
|
+
transition: "transform 0.2s ease-in-out",
|
|
118
99
|
}}
|
|
119
100
|
>
|
|
120
|
-
|
|
121
|
-
width={28}
|
|
122
|
-
height={28}
|
|
123
|
-
style={{ pointerEvents: "none" }}
|
|
124
|
-
/>
|
|
101
|
+
{icon}
|
|
125
102
|
</div>
|
|
126
|
-
<SelectorHint active={active}
|
|
103
|
+
<SelectorHint active={active} />
|
|
127
104
|
{active &&
|
|
128
105
|
selectorBoxRoot &&
|
|
129
106
|
createPortal(
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { SVGProps } from "react";
|
|
3
|
+
|
|
4
|
+
export const ArrowUnionIcon = (props: SVGProps<SVGSVGElement>) => (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width={16}
|
|
8
|
+
height={16}
|
|
9
|
+
viewBox="0 0 16 16"
|
|
10
|
+
fill="none"
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
fill="#303450"
|
|
15
|
+
stroke="url(#arrow-union-icon)"
|
|
16
|
+
d="M.5 8.495V15.5h15V8.495a4.5 4.5 0 0 1-3.816-2.483L9.341 1.33c-.553-1.105-2.13-1.105-2.683 0L4.317 6.012A4.5 4.5 0 0 1 .5 8.495Z"
|
|
17
|
+
/>
|
|
18
|
+
<defs>
|
|
19
|
+
<linearGradient
|
|
20
|
+
id="arrow-union-icon"
|
|
21
|
+
x1={8}
|
|
22
|
+
x2={8}
|
|
23
|
+
y1={0}
|
|
24
|
+
y2={10}
|
|
25
|
+
gradientUnits="userSpaceOnUse"
|
|
26
|
+
>
|
|
27
|
+
<stop stopColor="#474E6B" />
|
|
28
|
+
<stop offset={0.9} stopColor="#474E6B" />
|
|
29
|
+
<stop offset={0.901} stopColor="#474E6B" stopOpacity={0} />
|
|
30
|
+
</linearGradient>
|
|
31
|
+
</defs>
|
|
32
|
+
</svg>
|
|
33
|
+
);
|
|
@@ -1,91 +1,35 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { SVGProps } from "react";
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
active?: boolean;
|
|
5
|
-
hovered?: boolean;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const RefineDevtoolsIcon = ({ active, hovered, ...props }: Props) => (
|
|
4
|
+
export const DevtoolsIcon = (props: SVGProps<SVGSVGElement>) => (
|
|
9
5
|
<svg
|
|
10
|
-
width={42}
|
|
11
|
-
height={42}
|
|
12
|
-
viewBox="0 0 42 42"
|
|
13
|
-
fill="none"
|
|
14
6
|
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width={157}
|
|
8
|
+
height={25}
|
|
9
|
+
viewBox="0 0 157 25"
|
|
10
|
+
fill="none"
|
|
15
11
|
{...props}
|
|
16
12
|
>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
d="M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z"
|
|
39
|
-
fill="url(#devtools_icon_gradient_3)"
|
|
40
|
-
/>
|
|
41
|
-
<circle
|
|
42
|
-
cx={21}
|
|
43
|
-
cy={13.3301}
|
|
44
|
-
r={4}
|
|
45
|
-
fill="url(#devtools_icon_gradient_2)"
|
|
46
|
-
style={{
|
|
47
|
-
transition: "transform ease-in-out 0.2s",
|
|
48
|
-
transform: `translateY(${
|
|
49
|
-
active ? "0" : hovered ? "15px" : "15px"
|
|
50
|
-
})`,
|
|
51
|
-
}}
|
|
52
|
-
/>
|
|
53
|
-
<defs>
|
|
54
|
-
<linearGradient
|
|
55
|
-
id="devtools_icon_gradient_1"
|
|
56
|
-
x1={21}
|
|
57
|
-
y1={7}
|
|
58
|
-
x2={21}
|
|
59
|
-
y2={35}
|
|
60
|
-
gradientUnits="userSpaceOnUse"
|
|
61
|
-
>
|
|
62
|
-
<stop stopColor="#47EBEB" />
|
|
63
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
64
|
-
</linearGradient>
|
|
65
|
-
<linearGradient
|
|
66
|
-
id="devtools_icon_gradient_2"
|
|
67
|
-
x1={21}
|
|
68
|
-
y1={1}
|
|
69
|
-
x2={21}
|
|
70
|
-
y2={41}
|
|
71
|
-
gradientUnits="userSpaceOnUse"
|
|
72
|
-
>
|
|
73
|
-
<stop stopColor="#47EBEB" />
|
|
74
|
-
<stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
75
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
76
|
-
</linearGradient>
|
|
77
|
-
<radialGradient
|
|
78
|
-
id="devtools_icon_gradient_3"
|
|
79
|
-
cx={0}
|
|
80
|
-
cy={0}
|
|
81
|
-
r={1}
|
|
82
|
-
gradientUnits="userSpaceOnUse"
|
|
83
|
-
gradientTransform="translate(21 1) rotate(90) scale(40)"
|
|
84
|
-
>
|
|
85
|
-
<stop stopColor="#47EBEB" stopOpacity={0} />
|
|
86
|
-
<stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.25} />
|
|
87
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
88
|
-
</radialGradient>
|
|
89
|
-
</defs>
|
|
13
|
+
<g filter="url(#devtools-panel)">
|
|
14
|
+
<path fill="#1D1E30" d="M17 1h123v24H17z" />
|
|
15
|
+
<path
|
|
16
|
+
fill="#1D1E30"
|
|
17
|
+
d="M6.265 9.205A12 12 0 0 1 17.649 1H25v24H1L6.265 9.205ZM150.735 9.205A12 12 0 0 0 139.351 1H132v24h24l-5.265-15.795Z"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
fill="currentColor"
|
|
21
|
+
d="M25 14.333A1.333 1.333 0 1 1 25 17a1.333 1.333 0 0 1 0-2.667Z"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
fill="currentColor"
|
|
25
|
+
fillRule="evenodd"
|
|
26
|
+
d="M23.211 20.578a4 4 0 0 0 3.578 0l4-2A4 4 0 0 0 33 15v-4a4 4 0 0 0-2.211-3.578l-4-2a4 4 0 0 0-3.578 0l-4 2A4 4 0 0 0 17 11v4a4 4 0 0 0 2.211 3.578l4 2Zm-.878-4.911a2.667 2.667 0 0 0 5.334 0v-5.334a2.667 2.667 0 0 0-5.334 0v5.334Z"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
/>
|
|
29
|
+
<path
|
|
30
|
+
fill="#CFD7E2"
|
|
31
|
+
d="M42.152 17a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h4.2c.288 0 .56.056.816.168a2.135 2.135 0 0 1 1.14 1.128c.112.256.168.532.168.828v3.984c0 .296-.056.572-.168.828a2.135 2.135 0 0 1-1.14 1.128 2.014 2.014 0 0 1-.816.168h-4.2Zm1.38-1.644h2.82a.455.455 0 0 0 .336-.132.497.497 0 0 0 .132-.348v-3.984a.455.455 0 0 0-.132-.336.436.436 0 0 0-.336-.144h-2.82v4.944Zm13.18-5.196a.244.244 0 0 1-.253.252h-4.44v1.656h4.02c.072 0 .132.024.18.072a.227.227 0 0 1 .084.18v1.128a.264.264 0 0 1-.084.192.244.244 0 0 1-.18.072h-4.02v1.644h4.44c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.116a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072h-5.832a.244.244 0 0 1-.18-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.227.227 0 0 1 .18-.084h5.832c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.128ZM63.014 17h-2.232a.387.387 0 0 1-.216-.072.356.356 0 0 1-.144-.168l-1.716-4.296a.853.853 0 0 1-.072-.24 1.783 1.783 0 0 1-.024-.264V9.032c0-.072.024-.132.072-.18a.227.227 0 0 1 .18-.084h1.128c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v2.616c0 .072.008.156.024.252s.04.176.072.24l1.284 3.216h.528l1.284-3.216a.853.853 0 0 0 .072-.24c.016-.096.024-.18.024-.252V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.128c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v2.928c0 .072-.008.16-.024.264a.853.853 0 0 1-.072.24l-1.716 4.296a.356.356 0 0 1-.144.168.387.387 0 0 1-.216.072ZM73.29 8.768c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v1.128a.227.227 0 0 1-.084.18.244.244 0 0 1-.18.072h-2.208v6.324a.264.264 0 0 1-.084.192.244.244 0 0 1-.18.072H69.69a.244.244 0 0 1-.18-.072.287.287 0 0 1-.072-.192v-6.324H67.23a.287.287 0 0 1-.192-.072.244.244 0 0 1-.072-.18V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h6.06Zm6.507.012c.296 0 .572.056.828.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v3.996c0 .288-.056.56-.168.816a2.171 2.171 0 0 1-1.128 1.128 2.043 2.043 0 0 1-.828.168h-2.34c-.296 0-.572-.056-.828-.168a2.171 2.171 0 0 1-1.128-1.128 2.014 2.014 0 0 1-.168-.816v-3.996c0-.288.056-.56.168-.816a2.171 2.171 0 0 1 1.128-1.128c.256-.112.532-.168.828-.168h2.34Zm.48 2.112a.436.436 0 0 0-.144-.336.455.455 0 0 0-.336-.132h-2.34a.497.497 0 0 0-.348.132.455.455 0 0 0-.132.336v3.996c0 .136.044.248.132.336a.497.497 0 0 0 .348.132h2.34a.455.455 0 0 0 .336-.132.436.436 0 0 0 .144-.336v-3.996Zm7.888-2.112c.295 0 .572.056.828.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v3.996c0 .288-.056.56-.168.816a2.171 2.171 0 0 1-1.128 1.128 2.043 2.043 0 0 1-.828.168h-2.34c-.297 0-.573-.056-.829-.168a2.171 2.171 0 0 1-1.127-1.128 2.014 2.014 0 0 1-.168-.816v-3.996c0-.288.056-.56.168-.816a2.171 2.171 0 0 1 1.127-1.128c.257-.112.532-.168.829-.168h2.34Zm.48 2.112a.436.436 0 0 0-.144-.336.455.455 0 0 0-.337-.132h-2.34a.497.497 0 0 0-.347.132.455.455 0 0 0-.133.336v3.996c0 .136.044.248.133.336a.497.497 0 0 0 .347.132h2.34a.455.455 0 0 0 .337-.132.436.436 0 0 0 .143-.336v-3.996ZM98.294 17H92.68a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.116c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v6.324h4.236c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.116a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072Zm7.336-5.76a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192v-.084a.455.455 0 0 0-.132-.336.436.436 0 0 0-.336-.144h-2.352a.46.46 0 0 0-.336.144.455.455 0 0 0-.132.336v.696c0 .136.044.252.132.348a.482.482 0 0 0 .336.132h2.352c.288 0 .56.056.816.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v.696c0 .296-.056.572-.168.828a2.171 2.171 0 0 1-1.128 1.128 2.014 2.014 0 0 1-.816.168h-2.352c-.288 0-.56-.056-.816-.168a2.171 2.171 0 0 1-1.128-1.128 2.043 2.043 0 0 1-.168-.828v-.084c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.116c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v.084c0 .136.044.252.132.348a.482.482 0 0 0 .336.132h2.352a.455.455 0 0 0 .336-.132.497.497 0 0 0 .132-.348v-.696a.455.455 0 0 0-.132-.336.455.455 0 0 0-.336-.132h-2.352c-.288 0-.56-.056-.816-.168a2.171 2.171 0 0 1-1.128-1.128 2.099 2.099 0 0 1-.168-.828v-.696c0-.296.056-.572.168-.828a2.171 2.171 0 0 1 1.128-1.128c.256-.112.528-.168.816-.168h2.352c.288 0 .56.056.816.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.532.168.828v.084a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072h-1.128Z"
|
|
32
|
+
/>
|
|
33
|
+
</g>
|
|
90
34
|
</svg>
|
|
91
35
|
);
|
|
@@ -3,79 +3,17 @@ import React from "react";
|
|
|
3
3
|
export const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
|
4
4
|
<svg
|
|
5
5
|
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
width={
|
|
7
|
-
height={
|
|
8
|
-
viewBox="0 0
|
|
6
|
+
width={16}
|
|
7
|
+
height={16}
|
|
8
|
+
viewBox="0 0 16 16"
|
|
9
9
|
fill="none"
|
|
10
10
|
{...props}
|
|
11
11
|
>
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/>
|
|
19
|
-
<path
|
|
20
|
-
fill="url(#selector-button-b)"
|
|
21
|
-
fillRule="evenodd"
|
|
22
|
-
d="M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z"
|
|
23
|
-
clipRule="evenodd"
|
|
24
|
-
/>
|
|
25
|
-
<path
|
|
26
|
-
fill="url(#selector-button-c)"
|
|
27
|
-
fillRule="evenodd"
|
|
28
|
-
d="M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z"
|
|
29
|
-
clipRule="evenodd"
|
|
30
|
-
/>
|
|
31
|
-
<path
|
|
32
|
-
stroke="url(#selector-button-d)"
|
|
33
|
-
strokeLinecap="round"
|
|
34
|
-
strokeLinejoin="round"
|
|
35
|
-
strokeWidth={1.5}
|
|
36
|
-
d="M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4"
|
|
37
|
-
/>
|
|
38
|
-
</g>
|
|
39
|
-
<defs>
|
|
40
|
-
<radialGradient
|
|
41
|
-
id="selector-button-c"
|
|
42
|
-
cx={0}
|
|
43
|
-
cy={0}
|
|
44
|
-
r={1}
|
|
45
|
-
gradientTransform="matrix(0 40 -40 0 21 1)"
|
|
46
|
-
gradientUnits="userSpaceOnUse"
|
|
47
|
-
>
|
|
48
|
-
<stop stopColor="#47EBEB" stopOpacity={0} />
|
|
49
|
-
<stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.25} />
|
|
50
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
51
|
-
</radialGradient>
|
|
52
|
-
<linearGradient
|
|
53
|
-
id="selector-button-b"
|
|
54
|
-
x1={21}
|
|
55
|
-
x2={21}
|
|
56
|
-
y1={1}
|
|
57
|
-
y2={41}
|
|
58
|
-
gradientUnits="userSpaceOnUse"
|
|
59
|
-
>
|
|
60
|
-
<stop stopColor="#47EBEB" />
|
|
61
|
-
<stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
62
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
63
|
-
</linearGradient>
|
|
64
|
-
<linearGradient
|
|
65
|
-
id="selector-button-d"
|
|
66
|
-
x1={21}
|
|
67
|
-
y1={1}
|
|
68
|
-
x2={21}
|
|
69
|
-
y2={41}
|
|
70
|
-
gradientUnits="userSpaceOnUse"
|
|
71
|
-
>
|
|
72
|
-
<stop stopColor="#47EBEB" />
|
|
73
|
-
<stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.75} />
|
|
74
|
-
<stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
|
|
75
|
-
</linearGradient>
|
|
76
|
-
<clipPath id="selector-button-a">
|
|
77
|
-
<path fill="#fff" d="M0 0h42v42H0z" />
|
|
78
|
-
</clipPath>
|
|
79
|
-
</defs>
|
|
12
|
+
<path
|
|
13
|
+
fill="#0FBDBD"
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
d="M9 1a1 1 0 0 0-2 0v2.1A5.006 5.006 0 0 0 3.1 7H1a1 1 0 0 0 0 2h2.1A5.006 5.006 0 0 0 7 12.9V15a1 1 0 1 0 2 0v-2.1A5.006 5.006 0 0 0 12.9 9H15a1 1 0 1 0 0-2h-2.1A5.006 5.006 0 0 0 9 3.1V1Zm2 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"
|
|
16
|
+
clipRule="evenodd"
|
|
17
|
+
/>
|
|
80
18
|
</svg>
|
|
81
19
|
);
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { ArrowUnionIcon } from "./icons/arrow-union-icon";
|
|
3
|
+
|
|
4
|
+
const Y_OFFSET = 38;
|
|
5
|
+
const X_OFFSET = 7;
|
|
2
6
|
|
|
3
7
|
export const SelectorBox = ({
|
|
4
8
|
width,
|
|
@@ -13,9 +17,10 @@ export const SelectorBox = ({
|
|
|
13
17
|
y: number;
|
|
14
18
|
name: string;
|
|
15
19
|
}) => {
|
|
16
|
-
const namePosition =
|
|
20
|
+
const namePosition =
|
|
21
|
+
y > Y_OFFSET ? "top" : height > 3 * Y_OFFSET ? "inset" : "bottom";
|
|
17
22
|
|
|
18
|
-
const outlinePosition = x >
|
|
23
|
+
const outlinePosition = x > X_OFFSET && y > X_OFFSET ? "outside" : "inside";
|
|
19
24
|
|
|
20
25
|
return (
|
|
21
26
|
<div
|
|
@@ -29,7 +34,6 @@ export const SelectorBox = ({
|
|
|
29
34
|
transitionTimingFunction: "ease-out",
|
|
30
35
|
border: "1.5px solid #47EBEB",
|
|
31
36
|
borderRadius: "4px",
|
|
32
|
-
borderTopLeftRadius: 0,
|
|
33
37
|
background: "rgba(37,160,160, 0.25)",
|
|
34
38
|
backdropFilter: "sepia(30%) hue-rotate(180deg)",
|
|
35
39
|
zIndex: 99998,
|
|
@@ -54,28 +58,49 @@ export const SelectorBox = ({
|
|
|
54
58
|
style={{
|
|
55
59
|
position: "absolute",
|
|
56
60
|
left: "-1.5px",
|
|
57
|
-
background: "#
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
background: "#303450",
|
|
62
|
+
border: "1px solid #474E6B",
|
|
63
|
+
borderRadius: "4px",
|
|
64
|
+
padding: "8px 12px",
|
|
65
|
+
fontSize: "12px",
|
|
61
66
|
lineHeight: "16px",
|
|
62
|
-
fontWeight:
|
|
63
|
-
color: "#
|
|
67
|
+
fontWeight: 400,
|
|
68
|
+
color: "#ffffff",
|
|
64
69
|
display: name ? "block" : "none",
|
|
65
|
-
...(namePosition === "top"
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}),
|
|
70
|
+
...(namePosition === "top" && {
|
|
71
|
+
top: "-38px",
|
|
72
|
+
}),
|
|
73
|
+
...(namePosition === "bottom" && {
|
|
74
|
+
bottom: "-38px",
|
|
75
|
+
}),
|
|
76
|
+
...(namePosition === "inset" && {
|
|
77
|
+
top: "4px",
|
|
78
|
+
left: "8px",
|
|
79
|
+
}),
|
|
76
80
|
}}
|
|
77
81
|
>
|
|
78
82
|
{name}
|
|
83
|
+
|
|
84
|
+
<ArrowUnionIcon
|
|
85
|
+
style={{
|
|
86
|
+
position: "absolute",
|
|
87
|
+
left: "30%",
|
|
88
|
+
...(namePosition === "top" && {
|
|
89
|
+
transform: "translateX(-50%) rotate(180deg)",
|
|
90
|
+
bottom: "-9px",
|
|
91
|
+
}),
|
|
92
|
+
...(namePosition === "bottom" && {
|
|
93
|
+
transform: "translateX(-50%) ",
|
|
94
|
+
top: "-9px",
|
|
95
|
+
}),
|
|
96
|
+
...(namePosition === "inset" && {
|
|
97
|
+
transform: "translateX(-50%) rotate(-90deg)",
|
|
98
|
+
top: "8px",
|
|
99
|
+
left: "-1px",
|
|
100
|
+
}),
|
|
101
|
+
display: name ? "block" : "none",
|
|
102
|
+
}}
|
|
103
|
+
/>
|
|
79
104
|
</div>
|
|
80
105
|
</div>
|
|
81
106
|
);
|
|
@@ -1,27 +1,23 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
export const SelectorHint = ({
|
|
4
|
-
active,
|
|
5
|
-
groupHover,
|
|
6
|
-
}: {
|
|
7
|
-
active: boolean;
|
|
8
|
-
groupHover?: boolean;
|
|
9
|
-
}) => {
|
|
3
|
+
export const SelectorHint = ({ active }: { active: boolean }) => {
|
|
10
4
|
return (
|
|
11
5
|
<div
|
|
12
6
|
style={{
|
|
7
|
+
color: "white",
|
|
13
8
|
pointerEvents: "none",
|
|
14
9
|
position: "absolute",
|
|
15
|
-
left: "calc(-50% -
|
|
16
|
-
top: "-
|
|
17
|
-
width: "
|
|
10
|
+
left: "calc(-50% - 144px - 14px)",
|
|
11
|
+
top: "-36px",
|
|
12
|
+
width: "max-content",
|
|
13
|
+
borderRadius: "8px",
|
|
14
|
+
backgroundColor: "#40414A",
|
|
18
15
|
opacity: active ? 1 : 0,
|
|
19
|
-
transform: groupHover ? "translateX(0)" : "translateX(40px)",
|
|
20
16
|
transitionDuration: "0.2s",
|
|
21
17
|
transitionProperty: "transform,opacity",
|
|
22
18
|
transitionTimingFunction: "ease-in-out",
|
|
23
19
|
padding: "8px",
|
|
24
|
-
fontSize: "
|
|
20
|
+
fontSize: "12px",
|
|
25
21
|
lineHeight: "12px",
|
|
26
22
|
fontWeight: 400,
|
|
27
23
|
textShadow:
|
|
@@ -31,12 +27,11 @@ export const SelectorHint = ({
|
|
|
31
27
|
<kbd
|
|
32
28
|
style={{
|
|
33
29
|
marginLeft: "4px",
|
|
34
|
-
padding: "
|
|
30
|
+
padding: "2px 4px",
|
|
35
31
|
borderRadius: "2px",
|
|
36
|
-
background: "
|
|
37
|
-
color: "
|
|
38
|
-
border: "
|
|
39
|
-
boxShadow: "0 1px 1px silver",
|
|
32
|
+
background: "#1D1E30",
|
|
33
|
+
color: "#CFD7E2",
|
|
34
|
+
border: "none",
|
|
40
35
|
textShadow: "none",
|
|
41
36
|
}}
|
|
42
37
|
>
|
|
@@ -46,16 +41,15 @@ export const SelectorHint = ({
|
|
|
46
41
|
<kbd
|
|
47
42
|
style={{
|
|
48
43
|
marginLeft: "4px",
|
|
49
|
-
padding: "
|
|
44
|
+
padding: "2px 4px",
|
|
50
45
|
borderRadius: "2px",
|
|
51
|
-
background: "
|
|
52
|
-
color: "
|
|
53
|
-
border: "
|
|
54
|
-
boxShadow: "0 1px 1px silver",
|
|
46
|
+
background: "#1D1E30",
|
|
47
|
+
color: "#CFD7E2",
|
|
48
|
+
border: "none",
|
|
55
49
|
textShadow: "none",
|
|
56
50
|
}}
|
|
57
51
|
>
|
|
58
|
-
|
|
52
|
+
space
|
|
59
53
|
</kbd>{" "}
|
|
60
54
|
to highlight in monitor.
|
|
61
55
|
</div>
|
package/src/panel.tsx
CHANGED
|
@@ -2,8 +2,6 @@ import React from "react";
|
|
|
2
2
|
import { DevtoolsPin } from "./components/devtools-pin";
|
|
3
3
|
import { ResizablePane } from "./components/resizable-pane";
|
|
4
4
|
|
|
5
|
-
import { SIZE, getPinTransform } from "./utilities";
|
|
6
|
-
|
|
7
5
|
import { Placement } from "./interfaces/placement";
|
|
8
6
|
import {
|
|
9
7
|
DevToolsContext,
|
|
@@ -18,7 +16,6 @@ export const DevtoolsPanel =
|
|
|
18
16
|
const [visible, setVisible] = React.useState(false);
|
|
19
17
|
const [placement] = React.useState<Placement>("bottom");
|
|
20
18
|
const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
|
|
21
|
-
const [hover, setHover] = React.useState(false);
|
|
22
19
|
|
|
23
20
|
const onSelectorHighlight = React.useCallback(
|
|
24
21
|
(name: string) => {
|
|
@@ -44,21 +41,14 @@ export const DevtoolsPanel =
|
|
|
44
41
|
<div
|
|
45
42
|
style={{
|
|
46
43
|
position: "fixed",
|
|
47
|
-
left:
|
|
48
|
-
|
|
44
|
+
left: "50%",
|
|
45
|
+
transform: "translateX(-50%)",
|
|
46
|
+
bottom: 0,
|
|
49
47
|
zIndex: 99999,
|
|
50
|
-
width: `${SIZE * 2}px`,
|
|
51
|
-
height: `${SIZE}px`,
|
|
52
|
-
|
|
53
|
-
transform: getPinTransform(placement),
|
|
54
48
|
}}
|
|
55
|
-
onMouseEnter={() => setHover(true)}
|
|
56
|
-
onMouseLeave={() => setHover(false)}
|
|
57
49
|
>
|
|
58
50
|
<DevtoolsPin
|
|
59
|
-
active={visible}
|
|
60
51
|
onClick={() => setVisible((v) => !v)}
|
|
61
|
-
groupHover={hover}
|
|
62
52
|
onSelectorHighlight={onSelectorHighlight}
|
|
63
53
|
onSelectorOpen={onSelectorOpen}
|
|
64
54
|
/>
|
package/src/utilities/index.ts
CHANGED
|
@@ -15,29 +15,6 @@ const PREFERRED_DEFAULT_HEIGHT = () =>
|
|
|
15
15
|
export const MIN_PANEL_WIDTH = 640;
|
|
16
16
|
export const MIN_PANEL_HEIGHT = 360;
|
|
17
17
|
|
|
18
|
-
const verticalCenterTransform = `translateY(calc((100vh - ${SIZE}px) / 2))`;
|
|
19
|
-
const horizontalCenterTransform = `translateX(calc((100vw - ${
|
|
20
|
-
SIZE * 2
|
|
21
|
-
}px) / 2))`;
|
|
22
|
-
const rightAlignTransform = `translateX(calc((100vw - ${SIZE}px) - ${BUFFER}px))`;
|
|
23
|
-
const leftAlignTransform = `translateX(${BUFFER}px)`;
|
|
24
|
-
const topAlignTransform = `translateY(${BUFFER}px)`;
|
|
25
|
-
const bottomAlignTransform = `translateY(calc((100vh - ${SIZE}px) - ${0}px))`;
|
|
26
|
-
|
|
27
|
-
export const getPinTransform = (placement: Placement) => {
|
|
28
|
-
switch (placement) {
|
|
29
|
-
case "left":
|
|
30
|
-
return `${leftAlignTransform} ${verticalCenterTransform}`;
|
|
31
|
-
case "right":
|
|
32
|
-
return `${rightAlignTransform} ${verticalCenterTransform}`;
|
|
33
|
-
case "top":
|
|
34
|
-
return `${topAlignTransform} ${horizontalCenterTransform}`;
|
|
35
|
-
default:
|
|
36
|
-
case "bottom":
|
|
37
|
-
return `${bottomAlignTransform} ${horizontalCenterTransform}`;
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
|
|
41
18
|
export const getPinButtonTransform = (hover?: boolean) => {
|
|
42
19
|
return `translateY(${hover ? "0" : "50%"})`;
|
|
43
20
|
};
|