js-cloudimage-360-view 4.9.2 → 4.9.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.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ke=require("react/jsx-runtime"),n=require("react");let R=null;function I(f,t){const[v,y]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!f.current||t.autoInit===!1)return;let u=!0;const s=f.current;return(async()=>{try{if(R||(R=(await Promise.resolve().then(()=>require("./ci360-B2r9u7br.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var p;u&&(y(!0),(p=t.onReady)==null||p.call(t,c))}};l.current=new R,a.current=l.current.init(s,i)}catch(i){console.error("Failed to initialize CI360 viewer:",i)}})(),()=>{if(u=!1,a.current){try{a.current.destroy()}catch{}a.current=null}l.current=null,y(!1)}},[t.folder,t.filenameX,t.filenameY,t.filenameGrid,t.imageListX,t.imageListY,t.imageListGrid,t.amountX,t.amountY,t.hotspots,t.theme,t.aspectRatio,t.cropAspectRatio,t.cropGravity,m]);const C=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:v,getViewer:C}}const Xe=(f,t)=>{const{id:v,className:y,style:a,folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe,...be}=f,Ze=n.useRef(null),Ae=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe}),[l,m,C,u,s,w,i,c,p,z,g,S,V,L,T,O,P,Z,b,A,k,X,Y,E,F,G,q,x,B,D,H,M,j,N,$,J,K,Q,U,W,_,ee,oe,te,re,ne,ae,se,ie,le,ue,me,ce,pe,de,fe,ye,Ce,ve,we,Re,Ie,he,ze,ge,Se,Ve,Le,Te,Oe,Pe]),{getViewer:r}=I(Ze,Ae);return n.useImperativeHandle(t,()=>({moveLeft:(e=1)=>{var o;return(o=r())==null?void 0:o.moveLeft(!1,e)},moveRight:(e=1)=>{var o;return(o=r())==null?void 0:o.moveRight(!1,e)},moveTop:(e=1)=>{var o;return(o=r())==null?void 0:o.moveTop(!1,e)},moveBottom:(e=1)=>{var o;return(o=r())==null?void 0:o.moveBottom(!1,e)},play:()=>{var e;return(e=r())==null?void 0:e.play()},stop:()=>{var e;return(e=r())==null?void 0:e.stopAutoplay()},zoomIn:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomIn()},zoomOut:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomOut()},resetZoom:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.resetZoom()},setZoom:e=>{var o,d;return(d=(o=r())==null?void 0:o.zoomPan)==null?void 0:d.setZoom(e)},goToFrame:(e,o)=>{var d;return(d=r())==null?void 0:d.animateToFrame(e,o)},getViewer:()=>r()}),[r]),ke.jsx("div",{ref:Ze,id:v,className:y,style:a,...be})},h=n.forwardRef(Xe);h.displayName="CI360Viewer";exports.CI360Viewer=h;exports.CI360ViewerDefault=h;exports.useCI360=I;exports.useCI360Default=I;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ke=require("react/jsx-runtime"),n=require("react");let R=null;function I(f,t){const[v,y]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!f.current||t.autoInit===!1)return;let u=!0;const s=f.current;return(async()=>{try{if(R||(R=(await Promise.resolve().then(()=>require("./ci360-ChiRmGMU.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var p;u&&(y(!0),(p=t.onReady)==null||p.call(t,c))}};l.current=new R,a.current=l.current.init(s,i)}catch(i){console.error("Failed to initialize CI360 viewer:",i)}})(),()=>{if(u=!1,a.current){try{a.current.destroy()}catch{}a.current=null}l.current=null,y(!1)}},[t.folder,t.filenameX,t.filenameY,t.filenameGrid,t.imageListX,t.imageListY,t.imageListGrid,t.amountX,t.amountY,t.hotspots,t.theme,t.aspectRatio,t.cropAspectRatio,t.cropGravity,m]);const C=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:v,getViewer:C}}const Xe=(f,t)=>{const{id:v,className:y,style:a,folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe,...be}=f,Ze=n.useRef(null),Ae=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe}),[l,m,C,u,s,w,i,c,p,z,g,S,V,L,T,O,P,Z,b,A,k,X,Y,E,F,G,q,x,B,D,H,M,j,N,$,J,K,Q,U,W,_,ee,oe,te,re,ne,ae,se,ie,le,ue,me,ce,pe,de,fe,ye,Ce,ve,we,Re,Ie,he,ze,ge,Se,Ve,Le,Te,Oe,Pe]),{getViewer:r}=I(Ze,Ae);return n.useImperativeHandle(t,()=>({moveLeft:(e=1)=>{var o;return(o=r())==null?void 0:o.moveLeft(!1,e)},moveRight:(e=1)=>{var o;return(o=r())==null?void 0:o.moveRight(!1,e)},moveTop:(e=1)=>{var o;return(o=r())==null?void 0:o.moveTop(!1,e)},moveBottom:(e=1)=>{var o;return(o=r())==null?void 0:o.moveBottom(!1,e)},play:()=>{var e;return(e=r())==null?void 0:e.play()},stop:()=>{var e;return(e=r())==null?void 0:e.stopAutoplay()},zoomIn:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomIn()},zoomOut:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomOut()},resetZoom:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.resetZoom()},setZoom:e=>{var o,d;return(d=(o=r())==null?void 0:o.zoomPan)==null?void 0:d.setZoom(e)},goToFrame:(e,o)=>{var d;return(d=r())==null?void 0:d.animateToFrame(e,o)},getViewer:()=>r()}),[r]),ke.jsx("div",{ref:Ze,id:v,className:y,style:a,...be})},h=n.forwardRef(Xe);h.displayName="CI360Viewer";exports.CI360Viewer=h;exports.CI360ViewerDefault=h;exports.useCI360=I;exports.useCI360Default=I;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -78,6 +78,8 @@ export interface Hotspot {
78
78
  className?: string;
79
79
  /** Scene ID to navigate to when this hotspot is clicked. */
80
80
  navigateTo?: string;
81
+ /** Rotation angle (degrees) for the navigation arrow icon. */
82
+ arrowDirection?: number;
81
83
  }
82
84
 
83
85
  /**
@@ -9,7 +9,7 @@ function xe(d, t) {
9
9
  const n = d.current;
10
10
  return (async () => {
11
11
  try {
12
- if (w || (w = (await import("./ci360-BFobl9uu.mjs")).default), !n || !l) return;
12
+ if (w || (w = (await import("./ci360-DwDP_e0s.mjs")).default), !n || !l) return;
13
13
  n.id || (n.id = `ci360-${m.replace(/:/g, "")}`);
14
14
  const s = {
15
15
  ...t,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "js-cloudimage-360-view",
3
- "version": "4.9.2",
3
+ "version": "4.9.4",
4
4
  "main": "dist/js-cloudimage-360-view.min.js",
5
5
  "types": "src/types/ci360.d.ts",
6
6
  "files": [
@@ -76,8 +76,16 @@ export interface Hotspot {
76
76
  content?: string;
77
77
  data?: PopoverData;
78
78
  className?: string;
79
+ /** If true, the popover stays open until explicitly closed. */
80
+ keepOpen?: boolean;
81
+ /** Custom click handler for the hotspot. */
82
+ onClick?: (event: MouseEvent, popperInstance: any, hotspotId: string) => void;
83
+ /** Per-hotspot marker theme override. */
84
+ markerTheme?: MarkerTheme;
79
85
  /** Scene ID to navigate to when this hotspot is clicked. */
80
86
  navigateTo?: string;
87
+ /** Rotation angle (degrees) for the navigation arrow icon. Only applies when navigateTo is set. */
88
+ arrowDirection?: number;
81
89
  }
82
90
 
83
91
  /**
@@ -47,7 +47,7 @@ declare module CI360 {
47
47
  theme?: 'light' | 'dark' | null; // Default: null
48
48
  markerTheme?: 'default' | 'inverted' | 'brand' | null; // Default: null
49
49
  brandColor?: string | null; // Default: null
50
- hotspots?: any[] | null; // Default: null
50
+ hotspots?: Array<{ markerTheme?: 'default' | 'inverted' | 'brand'; [key: string]: any }> | null; // Default: null
51
51
  hotspotTrigger?: 'hover' | 'click'; // Default: 'hover'
52
52
  hotspotTimelineOnClick?: boolean; // Default: true
53
53
  aspectRatio?: string | null; // Default: null — CSS container aspect-ratio e.g. "16 / 9"