ebta-workflow-prod 4.0.3 → 4.0.4

package/package.json

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

package/src/elements/Viewer360V2.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { Pannellum } from "pannellum-react-update";
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface Viewer360V2Props extends FormElementProps<string> {
+        value: string //url of image
+    pitch: number; //pitch of the image
+    yaw: number; //yaw of the image
+    hfov: number; //horizontal field of view
+    minHfov: number; //minimum horizontal field of view
+    haov: number; //horizontal angle of view
+    vaov: number; //vertical angle of view
+    setting?: {
+        width?: string;
+        height?: string;
+    };
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName Viewer360V2
+ * @description Viewer360 Version 2
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function Viewer360V2(props: Viewer360V2Props): React.ReactElement {
+    const { setting, value , pitch ,yaw, hfov, minHfov , haov, vaov, raiseEvent } = props;
+   
+
+    // Copy SVG assets to consumer's public folder and reference them
+    React.useEffect(() => {
+        // Ensure pannellum CSS has correct asset paths
+        const customCSS = `
+            .pnlm-container {
+                background-image: url('/img/background.svg');
+            }
+            .pnlm-compass {
+                background-image: url ('/img/compass.svg');
+            }
+            .pnlm-grab {
+                cursor: url( '/img/grab.svg'), grab;
+            }
+            .pnlm-grabbing {
+                cursor: url( '/img/grabbing.svg'), grabbing;
+            }
+            .pnlm-sprite {
+                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 (
+        <>
+            <Pannellum
+                width={setting?.width || "100%"}
+                height={setting?.height || "auto"}
+                image={value}
+                pitch={pitch || -20}
+                yaw={yaw || 120}
+                hfov={hfov || 110}
+                haov={haov || 360}
+                vaov={vaov || 180}
+                minHfov={minHfov || 10}
+                autoLoad
+                onLoad={() => {
+                    raiseEvent("loaded" as any, value);
+                    console.log("panorama loaded");
+                }}
+            ></Pannellum>
+        </>
+    );
+}
+
+const Viewer360V2ElementRegistration: FormElementRegistration<Viewer360V2Props> = {
+    component: Viewer360V2,
+    getInitialProperties: () => ({ }),
+    id: "Viewer360V2",
+};
+
+export default Viewer360V2ElementRegistration;

package/src/index.ts

@@ -41,3 +41,5 @@ export { default as DrapGeometryActivity } from "./activities/DrapGeometry";
 export { default as SampleActivity } from "./activities/Sample";
 
 export { default as SampleInputRegistration } from "./elements/SampleInput";
+
+export { default as Viewer360V2Registration } from "./elements/Viewer360V2";