ebta-workflow-prod 4.0.21 → 4.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ebta-workflow-prod",
   "private": false,
-  "version": "4.0.21",
+  "version": "4.0.22",
   "description": "",
   "license": "UNLICENSED",
   "author": "",

package/src/elements/Viewer360.tsx

@@ -33,16 +33,23 @@ interface Viewer360Props extends FormElementProps<string> {
  * @param props The props that will be provided by the Workflow runtime.
  */
 function Viewer360(props: Viewer360Props): React.ReactElement {
-    const { setting, value , pitch ,yaw, hfov, minHfov , haov, vaov, raiseEvent } = props;
-   
-        const handleHotspotClick = (evt: MouseEvent, args: { id: string; pitch: number; yaw: number }) => {
-raiseEvent("clicked", JSON.stringify({ args }))
+    const { setting, value, pitch, yaw, hfov, minHfov, haov, vaov, raiseEvent } = props;
+
+    const handleHotspotClick = (evt: MouseEvent, args: { id: string; pitch: number; yaw: number }) => {
+        raiseEvent("clicked", JSON.stringify({ args }))
     };
 
     // Copy SVG assets to consumer's public folder and reference them
     React.useEffect(() => {
         // Ensure pannellum CSS has correct asset paths
         const customCSS = `
+            .pnlm-hotspot.custom-hotspot {
+                width: auto;
+                height: auto;
+                overflow: visible;
+                background: none;
+                border: none;
+            }
             .pnlm-container {
                 background-image: url('/img/background.svg');
             }
@@ -59,17 +66,17 @@ raiseEvent("clicked", JSON.stringify({ args }))
                 background-image: url( '/img/sprites.svg');
             }
         `;
-        
+
         const styleElement = document.createElement('style');
         styleElement.textContent = customCSS;
         document.head.appendChild(styleElement);
-        
+
         return () => {
             document.head.removeChild(styleElement);
         };
     }, []);
-   
-   
+
+
     console.log("rendering 360VIEWER")
     return (
         <>
@@ -89,28 +96,31 @@ raiseEvent("clicked", JSON.stringify({ args }))
                     console.log("panorama loaded");
                 }}
             >
-            <Pannellum.Hotspot
-                type="custom"
-                pitch={-10}
-                yaw={130}
-                handleClick={handleHotspotClick}
-                handleClickArg={{ id: "btn-1", pitch: -10, yaw: 130 }}
-                tooltip={(hotSpotDiv: HTMLElement) => {
-                    hotSpotDiv.style.cssText = `
+                <Pannellum.Hotspot
+                    type="custom"
+                    pitch={-10}
+                    yaw={130}
+                    handleClick={handleHotspotClick}
+                    handleClickArg={{ id: "btn-1", pitch: -10, yaw: 130 }}
+                    cssClass="custom-hotspot"
+                    tooltip={(hotSpotDiv: HTMLElement) => {
+                        const btn = document.createElement("div");
+                        btn.style.cssText = `
                         background: #0078d4;
                         color: white;
-                        border: none;
                         border-radius: 6px;
                         padding: 6px 12px;
                         cursor: pointer;
                         font-size: 13px;
                         white-space: nowrap;
                         box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+                        transform: translate(-50%, -100%);
                     `;
-                    hotSpotDiv.textContent = "📍 View Detail";
-                }}
-                tooltipArg={{}}
-            />
+                        btn.textContent = "📍 View Detail";
+                        hotSpotDiv.appendChild(btn); // append a child, don't style the host div
+                    }}
+                    tooltipArg={{}}
+                />
 
             </Pannellum>
         </>