lines-overlay 0.1.15 → 0.1.16

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.
Files changed (7) hide show
  1. package/components/config-button.tsx +8 -2
  2. package/components/move-lines-button.tsx +8 -2
  3. package/dist/components/config-button.js +7 -1
  4. package/dist/components/move-lines-button.js +7 -1
  5. package/dist/lines-overlay.js +15 -3
  6. package/lines-overlay.tsx +16 -5
  7. package/package.json +1 -1
package/components/config-button.tsx CHANGED
@@ -23,8 +23,14 @@ export function ConfigButton({
23
23
 
24
24
  return (
25
25
  <div
26
- className="h-10 border pointer-events-auto fixed bottom-2 right-2 bg-white/66
27
- shadow-sm flex items-center pl-[0.9em] pr-1">
26
+ style={{
27
+ position: 'fixed',
28
+ bottom: 8,
29
+ right: 8,
30
+ zIndex: 9999,
31
+ pointerEvents: 'auto',
32
+ }}
33
+ className="h-10 border bg-white/66 shadow-sm flex items-center pl-[0.9em] pr-1">
28
34
  <span className="font-medium text-sm-button tracking-wide pr-2">Configurar</span>
29
35
 
30
36
  <div className="h-full flex items-center gap-1">
package/components/move-lines-button.tsx CHANGED
@@ -35,8 +35,14 @@ export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivEle
35
35
 
36
36
  return (
37
37
  <div
38
- className="pointer-events-auto absolute left-1/2 top-[44%]
39
- -translate-x-1/2 -translate-y-1/2">
38
+ style={{
39
+ position: 'absolute',
40
+ left: '50%',
41
+ top: '44%',
42
+ transform: 'translate(-50%, -50%)',
43
+ pointerEvents: 'auto',
44
+ }}
45
+ >
40
46
  <Button
41
47
  size="icon-sm"
42
48
  data-black
package/dist/components/config-button.js CHANGED
@@ -11,7 +11,13 @@ export function ConfigButton({ onToggleConfig, open, setShow, }) {
11
11
  setShow((v) => !v);
12
12
  }
13
13
  };
14
- return (_jsxs("div", { className: "h-10 border pointer-events-auto fixed bottom-2 right-2 bg-white/66 \r\n shadow-sm flex items-center pl-[0.9em] pr-1", children: [_jsx("span", { className: "font-medium text-sm-button tracking-wide pr-2", children: "Configurar" }), _jsx("div", { className: "h-full flex items-center gap-1", children: [1, 2, 3].map((item) => item !== 2 ? (_jsx(Button, { variant: 'transparent', size: "icon-sm", "data-black": true, onClick: (e) => {
14
+ return (_jsxs("div", { style: {
15
+ position: 'fixed',
16
+ bottom: 8,
17
+ right: 8,
18
+ zIndex: 9999,
19
+ pointerEvents: 'auto',
20
+ }, className: "h-10 border bg-white/66 shadow-sm flex items-center pl-[0.9em] pr-1", children: [_jsx("span", { className: "font-medium text-sm-button tracking-wide pr-2", children: "Configurar" }), _jsx("div", { className: "h-full flex items-center gap-1", children: [1, 2, 3].map((item) => item !== 2 ? (_jsx(Button, { variant: 'transparent', size: "icon-sm", "data-black": true, onClick: (e) => {
15
21
  handleClick(e, item);
16
22
  }, children: item === 1 ? (_jsx(Icon, { Icon: open ? ChevronDown : ChevronUp, size: 'xl', strokeWidth: "light" })) : (_jsx(Icon, { Icon: X, size: "sm", className: "text-red-600", strokeWidth: "light" })) }, item)) : (_jsx(Separator, { orientation: "vertical" }))) })] }));
17
23
  }
package/dist/components/move-lines-button.js CHANGED
@@ -26,5 +26,11 @@ export function MoveLinesButton({ targetRef }) {
26
26
  document.removeEventListener('mousemove', onMove);
27
27
  document.removeEventListener('mouseup', onUp);
28
28
  }
29
- return (_jsx("div", { className: "pointer-events-auto absolute left-1/2 top-[44%]\r\n -translate-x-1/2 -translate-y-1/2", children: _jsx(Button, { size: "icon-sm", "data-black": true, variant: "ghost", onMouseDown: onMouseDown, className: "rounded-full bg-white/75 backdrop-blur-xs", children: _jsx(Icon, { Icon: Move, size: "lg", strokeWidth: "thin" }) }) }));
29
+ return (_jsx("div", { style: {
30
+ position: 'absolute',
31
+ left: '50%',
32
+ top: '44%',
33
+ transform: 'translate(-50%, -50%)',
34
+ pointerEvents: 'auto',
35
+ }, children: _jsx(Button, { size: "icon-sm", "data-black": true, variant: "ghost", onMouseDown: onMouseDown, className: "rounded-full bg-white/75 backdrop-blur-xs", children: _jsx(Icon, { Icon: Move, size: "lg", strokeWidth: "thin" }) }) }));
30
36
  }
package/dist/lines-overlay.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Eye } from "lucide-react";
3
3
  import { useEffect, useRef, useState } from "react";
4
4
  import { ConfigButton, ConfigOptions, MoveLinesButton, } from "./components/index";
@@ -23,10 +23,16 @@ function RowGridCore({ show, setShow }) {
23
23
  if (!show)
24
24
  return null;
25
25
  const height = lines * gap;
26
- return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, className: "fixed w-full pointer-events-none flex justify-center", style: {
26
+ return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, style: {
27
+ position: "fixed",
27
28
  top: 100,
28
29
  left: 0,
30
+ width: "100%",
29
31
  height,
32
+ pointerEvents: "none",
33
+ display: "flex",
34
+ justifyContent: "center",
35
+ zIndex: 9998,
30
36
  }, children: [_jsx("div", { className: "w-full", style: {
31
37
  height,
32
38
  backgroundImage: `repeating-linear-gradient(
@@ -41,5 +47,11 @@ function RowGridCore({ show, setShow }) {
41
47
  }
42
48
  export function RowGrid() {
43
49
  const [show, setShow] = useState(false);
44
- return (_jsxs("div", { className: "fixed z-7000 bottom-0 left-0 min-h-screen w-full", children: [_jsxs(Button, { size: "sm", variant: "ghost", style: { visibility: show ? "hidden" : "visible" }, onClick: () => setShow((v) => !v), className: "fixed bottom-2 right-2 z-50 text-xs bg-white/66 ", children: ["Mostrar linhas", _jsx(Icon, { Icon: Eye })] }), _jsx(RowGridCore, { setShow: setShow, show: show })] }));
50
+ return (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "ghost", style: {
51
+ visibility: show ? "hidden" : "visible",
52
+ position: "fixed",
53
+ bottom: 8,
54
+ right: 8,
55
+ zIndex: 9999,
56
+ }, onClick: () => setShow((v) => !v), className: "text-xs bg-white/66", children: ["Mostrar linhas", _jsx(Icon, { Icon: Eye })] }), _jsx(RowGridCore, { setShow: setShow, show: show })] }));
45
57
  }
package/lines-overlay.tsx CHANGED
@@ -41,11 +41,16 @@ function RowGridCore({ show, setShow }: Props) {
41
41
  <div>
42
42
  <div
43
43
  ref={containerRef}
44
- className="fixed w-full pointer-events-none flex justify-center"
45
44
  style={{
45
+ position: "fixed",
46
46
  top: 100,
47
47
  left: 0,
48
+ width: "100%",
48
49
  height,
50
+ pointerEvents: "none",
51
+ display: "flex",
52
+ justifyContent: "center",
53
+ zIndex: 9998,
49
54
  }}
50
55
  >
51
56
  {/* linhas */}
@@ -92,19 +97,25 @@ export function RowGrid() {
92
97
  const [show, setShow] = useState(false);
93
98
 
94
99
  return (
95
- <div className="fixed z-7000 bottom-0 left-0 min-h-screen w-full">
100
+ <>
96
101
  <Button
97
102
  size="sm"
98
103
  variant="ghost"
99
- style={{ visibility: show ? "hidden" : "visible" }}
104
+ style={{
105
+ visibility: show ? "hidden" : "visible",
106
+ position: "fixed",
107
+ bottom: 8,
108
+ right: 8,
109
+ zIndex: 9999,
110
+ }}
100
111
  onClick={() => setShow((v) => !v)}
101
- className="fixed bottom-2 right-2 z-50 text-xs bg-white/66 "
112
+ className="text-xs bg-white/66"
102
113
  >
103
114
  Mostrar linhas
104
115
  <Icon Icon={Eye} />
105
116
  </Button>
106
117
 
107
118
  <RowGridCore setShow={setShow} show={show} />
108
- </div>
119
+ </>
109
120
  );
110
121
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lines-overlay",
3
- "version": "0.1.15",
3
+ "version": "0.1.16",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/LeonardoSouzaBento/lines-overlay-npm-package.git"