lines-overlay 0.1.17 → 0.1.19

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.
@@ -14,7 +14,7 @@ const css = {
14
14
  borderWidth: 1,
15
15
  borderStyle: 'solid',
16
16
  borderColor: 'rgba(148,163,184,0.8)',
17
- backgroundColor: 'rgba(255,255,255,0.66)',
17
+ backgroundColor: 'rgba(255,255,255,0.70)',
18
18
  boxShadow: '0 1px 3px rgba(15,23,42,0.2)',
19
19
  display: 'flex',
20
20
  alignItems: 'center',
@@ -6,6 +6,7 @@ const css = {
6
6
  position: 'fixed',
7
7
  bottom: 52,
8
8
  right: 8,
9
+ zIndex: 1000,
9
10
  pointerEvents: 'auto',
10
11
  fontSize: '0.875rem',
11
12
  backgroundColor: 'rgba(255,255,255,0.94)',
@@ -35,6 +36,7 @@ const css = {
35
36
  display: 'flex',
36
37
  alignItems: 'flex-end',
37
38
  gap: 8,
39
+ borderRadius: 6,
38
40
  },
39
41
  inputWrapper: {
40
42
  width: 104,
@@ -25,7 +25,7 @@ export const NUMBER_FIELDS: NumberFieldConfig[] = [
25
25
  {
26
26
  key: 'lines',
27
27
  label: 'Linhas',
28
- quick: [8, 12, 16, 24],
28
+ quick: [2, 4, 8, 12],
29
29
  step: 4,
30
30
  },
31
31
  {
@@ -12,7 +12,7 @@ const css = {
12
12
  borderWidth: 1,
13
13
  borderStyle: 'solid',
14
14
  borderColor: 'rgba(148,163,184,0.8)',
15
- backgroundColor: 'rgba(255,255,255,0.66)',
15
+ backgroundColor: 'rgba(255,255,255,0.70)',
16
16
  boxShadow: '0 1px 3px rgba(15,23,42,0.2)',
17
17
  display: 'flex',
18
18
  alignItems: 'center',
@@ -6,6 +6,7 @@ const css = {
6
6
  position: 'fixed',
7
7
  bottom: 52,
8
8
  right: 8,
9
+ zIndex: 1000,
9
10
  pointerEvents: 'auto',
10
11
  fontSize: '0.875rem',
11
12
  backgroundColor: 'rgba(255,255,255,0.94)',
@@ -35,6 +36,7 @@ const css = {
35
36
  display: 'flex',
36
37
  alignItems: 'flex-end',
37
38
  gap: 8,
39
+ borderRadius: 6,
38
40
  },
39
41
  inputWrapper: {
40
42
  width: 104,
@@ -2,7 +2,7 @@ export const NUMBER_FIELDS = [
2
2
  {
3
3
  key: 'lines',
4
4
  label: 'Linhas',
5
- quick: [8, 12, 16, 24],
5
+ quick: [2, 4, 8, 12],
6
6
  step: 4,
7
7
  },
8
8
  {
@@ -49,12 +49,12 @@ function RowGridCore({ show, setShow }) {
49
49
  return (_jsxs("div", { children: [_jsxs("div", { ref: containerRef, style: { ...css.overlay, height }, children: [_jsx("div", { style: {
50
50
  ...css.grid,
51
51
  height,
52
- backgroundImage: `repeating-linear-gradient(
53
- to bottom,
54
- ${color},
55
- ${color} 1px,
56
- transparent 1px,
57
- transparent ${gap}px
52
+ backgroundImage: `repeating-linear-gradient(
53
+ to bottom,
54
+ ${color},
55
+ ${color} 1px,
56
+ transparent 1px,
57
+ transparent ${gap}px
58
58
  )`,
59
59
  opacity,
60
60
  } }), _jsx(MoveLinesButton, { targetRef: containerRef })] }), _jsx(ConfigButton, { setShow: setShow, onToggleConfig: () => setShowConfig((v) => !v), open: showConfig }), showConfig && (_jsx(ConfigOptions, { lines: lines, gap: gap, opacity: opacity, color: color, setLines: setLines, setGap: setGap, setOpacity: setOpacity, setColor: setColor }))] }));
package/lines-overlay.tsx CHANGED
@@ -13,31 +13,31 @@ type Props = {
13
13
  show: boolean;
14
14
  };
15
15
 
16
- const css = {
17
- overlay: {
18
- position: 'fixed' as const,
19
- top: 100,
20
- left: 0,
21
- width: '100%',
22
- pointerEvents: 'none' as const,
23
- display: 'flex',
24
- justifyContent: 'center',
25
- zIndex: 9998,
26
- },
27
- grid: {
28
- width: '100%',
29
- },
30
- triggerButton: {
31
- position: 'fixed' as const,
32
- bottom: 8,
33
- right: 8,
34
- zIndex: 9999,
35
- fontSize: '0.75rem',
36
- backgroundColor: 'rgba(255,255,255,0.66)',
37
- },
38
- } as const;
39
-
40
- function RowGridCore({ show, setShow }: Props) {
16
+ const css = {
17
+ overlay: {
18
+ position: 'fixed' as const,
19
+ top: 100,
20
+ left: 0,
21
+ width: '100%',
22
+ pointerEvents: 'none' as const,
23
+ display: 'flex',
24
+ justifyContent: 'center',
25
+ zIndex: 9998,
26
+ },
27
+ grid: {
28
+ width: '100%',
29
+ },
30
+ triggerButton: {
31
+ position: 'fixed' as const,
32
+ bottom: 8,
33
+ right: 8,
34
+ zIndex: 9999,
35
+ fontSize: '0.75rem',
36
+ backgroundColor: 'rgba(255,255,255,0.66)',
37
+ },
38
+ } as const;
39
+
40
+ function RowGridCore({ show, setShow }: Props) {
41
41
  const containerRef = useRef<HTMLDivElement>(null);
42
42
 
43
43
  const [lines, setLines] = useState(12);
@@ -63,25 +63,25 @@ function RowGridCore({ show, setShow }: Props) {
63
63
 
64
64
  return (
65
65
  <div>
66
- <div
67
- ref={containerRef}
68
- style={{ ...css.overlay, height }}
69
- >
66
+ <div
67
+ ref={containerRef}
68
+ style={{ ...css.overlay, height }}
69
+ >
70
70
  {/* linhas */}
71
- <div
72
- style={{
73
- ...css.grid,
74
- height,
75
- backgroundImage: `repeating-linear-gradient(
76
- to bottom,
77
- ${color},
78
- ${color} 1px,
79
- transparent 1px,
80
- transparent ${gap}px
81
- )`,
82
- opacity,
83
- }}
84
- />
71
+ <div
72
+ style={{
73
+ ...css.grid,
74
+ height,
75
+ backgroundImage: `repeating-linear-gradient(
76
+ to bottom,
77
+ ${color},
78
+ ${color} 1px,
79
+ transparent 1px,
80
+ transparent ${gap}px
81
+ )`,
82
+ opacity,
83
+ }}
84
+ />
85
85
  {/* Move */}
86
86
  <MoveLinesButton targetRef={containerRef} />
87
87
  </div>
@@ -115,7 +115,7 @@ export function RowGrid() {
115
115
  <Button
116
116
  size="sm"
117
117
  variant="ghost"
118
- style={{ ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }}
118
+ style={{ ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }}
119
119
  onClick={() => setShow((v) => !v)}
120
120
  >
121
121
  Mostrar linhas
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lines-overlay",
3
- "version": "0.1.17",
3
+ "version": "0.1.19",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/LeonardoSouzaBento/lines-overlay-npm-package.git"