ebta-workflow-prod 4.0.3 → 4.0.5

package/package.json

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

package/src/elements/Viewer360V2.tsx

@@ -0,0 +1,116 @@
+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("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="67" height="100" viewBox="0 0 67 100">
+<path stroke="#ccc" fill="none" d="M33.5,50,0,63,33.5,75,67,63,33.5,50m-33.5-50,67,25m-0.5,0,0,75m-66.5-75,67-25m-33.5,75,0,25m0-100,0,50"/>
+</svg>");
+            }
+            .pnlm-compass {
+                background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50">
+<path d="m24.5078 6-3.2578 18h7.5l-3.25781-18h-0.984376zm-3.2578 20 3.2578 18h0.9844l3.2578-18h-7.5zm1.19531 0.9941h5.10938l-2.5547 14.1075-2.5547-14.1075z"/>
+</svg>");
+            }
+            .pnlm-grab {
+                cursor: url( '/img/grab.svg'), grab;
+            }
+            .pnlm-grabbing {
+                cursor: url( '/img/grabbing.svg'), grabbing;
+            }
+            .pnlm-sprite {
+                background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="208">
+<circle fill-opacity=".78" cy="117" cx="13" r="11" fill="#fff"/>
+<circle fill-opacity=".78" cy="143" cx="13" r="11" fill="#fff"/>
+<circle cy="169" cx="13" r="7" fill="none" stroke="#000" stroke-width="2"/>
+<circle cy="195" cx="13" r="7" fill="none" stroke="#000" stroke-width="2"/>
+<circle cx="13" cy="195" r="2.5"/>
+<path d="m5 83v6h2v-4h4v-2zm10 0v2h4v4h2v-6zm-5 5v6h6v-6zm-5 5v6h6v-2h-4v-4zm14 0v4h-4v2h6v-6z"/>
+<path d="m13 110a7 7 0 0 0 -7 7 7 7 0 0 0 7 7 7 7 0 0 0 7 -7 7 7 0 0 0 -7 -7zm-1 3h2v2h-2zm0 3h2v5h-2z"/>
+<path d="m5 57v6h2v-4h4v-2zm10 0v2h4v4h2v-6zm-10 10v6h6v-2h-4v-4zm14 0v4h-4v2h6v-6z"/>
+<path d="m17 38v2h-8v-2z"/>
+<path d="m12 9v3h-3v2h3v3h2v-3h3v-2h-3v-3z"/>
+<path d="m13 136-6.125 6.125h4.375v7.875h3.5v-7.875h4.375z"/>
+<path d="m10.428 173.33v-5.77l5-2.89v5.77zm1-1.73 3-1.73-3.001-1.74z"/>
+</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

@@ -37,7 +37,9 @@ export { default as CreateGraphicLayerActivity } from "./activities/CreateGraphi
 export { default as SliceLineActivity } from "./activities/SliceLine";
 export { default as GetTaskStatusActivity } from "./activities/GetTaskStatus";
 export { default as DrapGeometryActivity } from "./activities/DrapGeometry";
-
-export { default as SampleActivity } from "./activities/Sample";
-
-export { default as SampleInputRegistration } from "./elements/SampleInput";
+
+export { default as SampleActivity } from "./activities/Sample";
+
+export { default as SampleInputRegistration } from "./elements/SampleInput";
+
+export { default as Viewer360V2Registration } from "./elements/Viewer360V2";