@mmmmzxe/react-360-viewer 0.1.2 → 0.1.4

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 (9) hide show
  1. package/dist/index.d.ts +3 -2
  2. package/dist/index.js +125 -166
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/constants/viewer360ClassNames.ts +3 -2
  6. package/src/constants/viewer360Labels.ts +1 -1
  7. package/src/feature/Viewer360HotspotOverlay.tsx +16 -29
  8. package/src/feature/Viewer360MarkerPin.tsx +41 -40
  9. package/src/types/Viewer360Marker.ts +2 -1
package/src/feature/Viewer360MarkerPin.tsx CHANGED
@@ -1,5 +1,4 @@
1
- import type { JSX } from 'react';
2
- import { useState } from 'react';
1
+ import type { JSX, MouseEvent } from 'react';
3
2
 
4
3
  import { Trash2 } from 'lucide-react';
5
4
 
@@ -15,7 +14,6 @@ import {
15
14
  ItemDescription,
16
15
  ItemTitle,
17
16
  } from '@/components/ui/Item';
18
- import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover';
19
17
  import { cn } from '@/components/utils';
20
18
 
21
19
  export function Viewer360MarkerPin<TData = unknown>({
@@ -25,6 +23,7 @@ export function Viewer360MarkerPin<TData = unknown>({
25
23
  topPercent,
26
24
  onDelete,
27
25
  isDeletePending = false,
26
+ onClick,
28
27
  renderTag,
29
28
  classNames,
30
29
  labels,
@@ -32,47 +31,49 @@ export function Viewer360MarkerPin<TData = unknown>({
32
31
  // ----------------------------------------------------------------------------------------------------
33
32
  // MARK: States & Constants
34
33
  // ----------------------------------------------------------------------------------------------------
35
- const [isOpen, setIsOpen] = useState(false);
36
34
  const deleteLabel = labels?.delete ?? defaultViewer360MarkerPinLabels.delete;
35
+ const showTooltip = Boolean(marker.title || marker.description || onDelete || renderTag);
37
36
 
38
37
  // ----------------------------------------------------------------------------------------------------
39
38
  // MARK: Main Component UI
40
39
  // ----------------------------------------------------------------------------------------------------
41
40
  return (
42
- <Popover open={isOpen} onOpenChange={setIsOpen}>
43
- <Item
44
- size="xs"
45
- variant="default"
46
- className={cn(viewer360MarkerPinClassNames.root, classNames?.root, 'w-auto border-transparent p-0')}
47
- style={{ left: `${leftPercent}%`, top: `${topPercent}%` }}
48
- onMouseEnter={() => setIsOpen(true)}
49
- onMouseLeave={() => setIsOpen(false)}
50
- >
51
- <Badge
52
- variant="destructive"
53
- className={cn(viewer360MarkerPinClassNames.ping, classNames?.ping, 'absolute size-6 border-0 bg-destructive opacity-60')}
54
- aria-hidden="true"
55
- />
41
+ <Item
42
+ size="xs"
43
+ variant="default"
44
+ className={cn(
45
+ viewer360MarkerPinClassNames.root,
46
+ classNames?.root,
47
+ 'group/marker w-auto border-transparent p-0'
48
+ )}
49
+ style={{ left: `${leftPercent}%`, top: `${topPercent}%` }}
50
+ >
51
+ <Badge
52
+ variant="destructive"
53
+ className={cn(viewer360MarkerPinClassNames.ping, classNames?.ping, 'absolute size-6 border-0 bg-destructive opacity-60')}
54
+ aria-hidden="true"
55
+ />
56
56
 
57
- <PopoverTrigger asChild>
58
- <Button
59
- type="button"
60
- variant="destructive"
61
- size="icon-xs"
62
- className={cn(
63
- viewer360MarkerPinClassNames.dot,
64
- classNames?.dot,
65
- 'size-4 min-h-4 min-w-4 rounded-full border-2 border-background bg-destructive p-0 shadow-md hover:scale-125 hover:bg-destructive'
66
- )}
67
- aria-label={marker.title}
68
- />
69
- </PopoverTrigger>
57
+ <Button
58
+ type="button"
59
+ variant="destructive"
60
+ size="icon-xs"
61
+ className={cn(
62
+ viewer360MarkerPinClassNames.dot,
63
+ classNames?.dot,
64
+ 'size-4 min-h-4 min-w-4 rounded-full border-2 border-background bg-destructive p-0 shadow-md hover:scale-125 hover:bg-destructive'
65
+ )}
66
+ aria-label={marker.title}
67
+ onClick={onClick}
68
+ />
70
69
 
71
- <PopoverContent
72
- className={cn(viewer360MarkerPinClassNames.tooltip, classNames?.tooltip, 'w-64 p-0')}
73
- side="top"
74
- align="center"
75
- onOpenAutoFocus={(event) => event.preventDefault()}
70
+ {showTooltip && (
71
+ <div
72
+ className={cn(
73
+ viewer360MarkerPinClassNames.tooltip,
74
+ classNames?.tooltip,
75
+ 'pointer-events-none opacity-0 transition-opacity duration-150 group-hover/marker:pointer-events-auto group-hover/marker:opacity-100 group-focus-within/marker:pointer-events-auto group-focus-within/marker:opacity-100'
76
+ )}
76
77
  >
77
78
  <Item
78
79
  size="sm"
@@ -98,7 +99,7 @@ export function Viewer360MarkerPin<TData = unknown>({
98
99
  className={classNames?.deleteButton}
99
100
  disabled={isDeletePending}
100
101
  aria-label={deleteLabel}
101
- onClick={(event) => {
102
+ onClick={(event: MouseEvent<HTMLButtonElement>) => {
102
103
  event.stopPropagation();
103
104
  onDelete(marker.id);
104
105
  }}
@@ -108,8 +109,8 @@ export function Viewer360MarkerPin<TData = unknown>({
108
109
  </ItemActions>
109
110
  )}
110
111
  </Item>
111
- </PopoverContent>
112
- </Item>
113
- </Popover>
112
+ </div>
113
+ )}
114
+ </Item>
114
115
  );
115
116
  }
package/src/types/Viewer360Marker.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { MouseEvent, ReactNode } from 'react';
2
2
 
3
3
  import type { Viewer360Hotspot } from './Viewer360Hotspot';
4
4
 
@@ -36,6 +36,7 @@ export type Viewer360MarkerPinProps<TData = unknown> = {
36
36
  topPercent: number;
37
37
  onDelete?: (id: string) => void;
38
38
  isDeletePending?: boolean;
39
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
39
40
  renderTag?: (props: Viewer360MarkerPinRenderProps<TData>) => ReactNode;
40
41
  classNames?: Viewer360MarkerPinClassNames;
41
42
  labels?: Viewer360MarkerPinLabels;