ebta-workflow-prod 4.1.3 → 4.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "ebta-workflow-prod",
     "private": false,
-    "version": "4.1.3",
+    "version": "4.1.4",
     "description": "",
     "license": "UNLICENSED",
     "author": "",
@@ -32,8 +32,8 @@
         "@fseehawer/react-circular-slider": "^3.2.7",
         "@mantine/core": "^7.16.0",
         "@mantine/hooks": "^9.5.1",
-        "@mui/icons-material": "^5.17.1",
         "@mui/base": "5.0.0-beta.70",
+        "@mui/icons-material": "^5.17.1",
         "@mui/material": "^5.17.1",
         "@mui/x-charts": "^7.6.2",
         "@turf/turf": "^6.5.0",
@@ -44,6 +44,7 @@
         "axios": "^1.7.7",
         "dayjs": "^1.11.23",
         "html2canvas": "^1.4.1",
+        "marzipano": "^0.10.2",
         "pannellum-react-update": "^1.0.0",
         "pdf-lib": "^1.17.1",
         "qrcode": "^1.5.4",

package/src/activities/SimplifyGeometry.ts

@@ -0,0 +1,239 @@
+import type { IActivityHandler } from "@vertigis/workflow";
+
+import Polygon from "@arcgis/core/geometry/Polygon";
+import SpatialReference from "@arcgis/core/geometry/SpatialReference";
+
+
+/** An interface that defines the inputs of the activity. */
+interface SimplifyGeometryInputs {
+    /**
+     * @displayName Geometry
+     * @description The geometry to be simplified.
+     * @required
+     */
+    geometry: Polygon;
+
+    /**
+     * @displayName Vertex Limit
+     * @description The maximum number of vertices allowed in the simplified geometry.
+     */
+    vertlimit?: number;
+}
+
+/** An interface that defines the outputs of the activity. */
+interface SimplifyGeometryOutputs {
+    /**
+     * @description The result of the activity.
+     */
+    result: Polygon;
+}
+
+/**
+ * @displayName SimplifyGeometry
+ * @category Custom Activities
+ * @description Simplify geometry - covering the whole geometry and increase minimum extra area, under required vertex amount.
+ */
+export default class SimplifyGeometryActivity implements IActivityHandler {
+    /** Perform the execution logic of the activity. */
+
+    execute(inputs: SimplifyGeometryInputs): SimplifyGeometryOutputs {
+
+        // Clone the whole result so we never touch the original $permitFeature.result
+        let simplifyresult = inputs.geometry;
+        let limit = inputs.vertlimit || 30;
+
+        let ring = simplifyresult.rings[0];
+
+        if (ring.length > limit) {
+            ring = coveringSimplify(ring, limit);
+
+            simplifyresult.rings[0] = ring;
+        }
+
+        return { result: simplifyresult };
+
+
+
+
+        // ---- geometry helpers ----
+        function cross(o, a, b) {
+            return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+        }
+        function triangleArea(a, b, c) {
+            return Math.abs(cross(a, b, c)) / 2;
+        }
+        function signedArea(points) {
+            var area = 0, n = points.length;
+            for (var i = 0; i < n; i++) {
+                var p1 = points[i], p2 = points[(i + 1) % n];
+                area += p1[0] * p2[1] - p2[0] * p1[1];
+            }
+            return area / 2;
+        }
+
+        // orientation: >0 CCW turn, <0 CW turn, 0 collinear
+        function orient(a, b, c) {
+            var v = (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
+            if (v > 1e-9) return 1;
+            if (v < -1e-9) return -1;
+            return 0;
+        }
+
+        // true only for a PROPER crossing (interior intersection), not shared endpoints/touching
+        function properlyIntersects(p1, p2, p3, p4) {
+            var d1 = orient(p3, p4, p1);
+            var d2 = orient(p3, p4, p2);
+            var d3 = orient(p1, p2, p3);
+            var d4 = orient(p1, p2, p4);
+            return (d1 !== d2 && d1 !== 0 && d2 !== 0) && (d3 !== d4 && d3 !== 0 && d4 !== 0);
+        }
+
+        // does chording out vertex i (prev->next) cross any OTHER edge of
+        // the polygon? Required check — without it, concave removal can
+        // fold the polygon over itself into a self-intersecting bowtie on
+        // complex shapes (forks, interchanges, multiple concavities).
+        function chordIsSafe(pts, i) {
+            var n = pts.length;
+            var prev = pts[(i - 1 + n) % n];
+            var next = pts[(i + 1) % n];
+
+            for (var k = 0; k < n; k++) {
+                var a = pts[k];
+                var b = pts[(k + 1) % n];
+                if (k === (i - 1 + n) % n || k === i) continue; // the two edges being replaced
+                if (properlyIntersects(prev, next, a, b)) return false;
+            }
+            return true;
+        }
+
+        // Remove reflex (concave) vertices, cheapest-area first, but only
+        // when the resulting chord doesn't self-intersect the polygon.
+        // Chording a safe concave notch always ADDS area outside the
+        // original shape, so coverage is preserved automatically.
+        function removeReflexVertices(points, maxVertices) {
+            var pts = points.slice();
+            var orientSign = signedArea(pts) >= 0 ? 1 : -1;
+
+            var progress = true;
+            while (pts.length > maxVertices && progress) {
+                progress = false;
+                var n = pts.length;
+                var candidates = [];
+
+                for (var i = 0; i < n; i++) {
+                    var prev = pts[(i - 1 + n) % n];
+                    var curr = pts[i];
+                    var next = pts[(i + 1) % n];
+                    var c = cross(prev, curr, next);
+                    var isReflexOrFlat = c * orientSign <= 1e-9;
+                    if (isReflexOrFlat) {
+                        candidates.push({ idx: i, area: triangleArea(prev, curr, next) });
+                    }
+                }
+
+                candidates.sort(function (a, b) { return a.area - b.area; });
+
+                for (var ci = 0; ci < candidates.length; ci++) {
+                    var idx = candidates[ci].idx;
+                    if (chordIsSafe(pts, idx)) {
+                        pts.splice(idx, 1);
+                        progress = true;
+                        break; // recompute fresh each removal since indices shift
+                    }
+                }
+            }
+
+            return pts;
+        }
+
+        // Infinite-line intersection of (p1,p2) and (p3,p4).
+        function lineIntersection(p1, p2, p3, p4) {
+            var x1 = p1[0], y1 = p1[1], x2 = p2[0], y2 = p2[1];
+            var x3 = p3[0], y3 = p3[1], x4 = p4[0], y4 = p4[1];
+            var denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+            if (Math.abs(denom) < 1e-9) return [(x2 + x3) / 2, (y2 + y3) / 2];
+            var pxNum = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);
+            var pyNum = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);
+            return [pxNum / denom, pyNum / denom];
+        }
+
+        // Standard monotone-chain convex hull — guaranteed simple and
+        // guaranteed to cover any input point set, regardless of how tangled
+        // the remaining shape is. Used as a safe fallback.
+        function convexHull(points) {
+            var sorted = points.slice().sort(function (a, b) { return a[0] === b[0] ? a[1] - b[1] : a[0] - b[0]; });
+            var pts = [];
+            for (var i = 0; i < sorted.length; i++) {
+                var p = sorted[i], prev = pts[pts.length - 1];
+                if (!prev || prev[0] !== p[0] || prev[1] !== p[1]) pts.push(p);
+            }
+            var n = pts.length;
+            if (n < 3) return pts.slice();
+            var lower = [];
+            for (var i2 = 0; i2 < n; i2++) {
+                while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], pts[i2]) <= 0) lower.pop();
+                lower.push(pts[i2]);
+            }
+            var upper = [];
+            for (var i3 = n - 1; i3 >= 0; i3--) {
+                while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], pts[i3]) <= 0) upper.pop();
+                upper.push(pts[i3]);
+            }
+            lower.pop(); upper.pop();
+            return lower.concat(upper);
+        }
+
+        // Reduce an already-convex polygon to maxVertices by selecting
+        // maxVertices of its edges (evenly spaced) as infinite support lines
+        // and intersecting consecutive ones. Always contains the input.
+        function reduceConvexBySupportLines(points, maxVertices) {
+            var n = points.length;
+            if (n <= maxVertices) return points.slice();
+            var chosen = [];
+            for (var k = 0; k < maxVertices; k++) chosen.push(Math.floor((k * n) / maxVertices));
+            var newPts = [];
+            for (var k2 = 0; k2 < maxVertices; k2++) {
+                var iPrevEdge = chosen[(k2 - 1 + maxVertices) % maxVertices];
+                var iCurrEdge = chosen[k2];
+                var a1 = points[iPrevEdge], a2 = points[(iPrevEdge + 1) % n];
+                var b1 = points[iCurrEdge], b2 = points[(iCurrEdge + 1) % n];
+                newPts.push(lineIntersection(a1, a2, b1, b2));
+            }
+            return newPts;
+        }
+
+        // Simplify a ring to at most maxVertices points, guaranteeing the
+        // result is both SIMPLE (no self-intersections) and always covers
+        // (contains) the original shape.
+        function coveringSimplify(ring, maxVertices) {
+            var first = ring[0], last = ring[ring.length - 1];
+            var isClosed = first[0] === last[0] && first[1] === last[1];
+            var open = isClosed ? ring.slice(0, ring.length - 1) : ring.slice();
+            var budgetOpen = isClosed ? maxVertices - 1 : maxVertices;
+
+            if (open.length <= budgetOpen) return ring.slice();
+
+            var afterReflex = removeReflexVertices(open, budgetOpen);
+
+            var result;
+            if (afterReflex.length > budgetOpen) {
+                // Couldn't safely get all the way there via reflex removal
+                // (or the remainder is genuinely convex) — fall back to the
+                // convex hull, which is always simple and always covers.
+                var hull = convexHull(afterReflex);
+                result = hull.length > budgetOpen
+                    ? reduceConvexBySupportLines(hull, budgetOpen)
+                    : hull;
+            } else {
+                result = afterReflex;
+            }
+
+            return isClosed ? result.concat([result[0]]) : result;
+        }
+
+
+        return {
+            result: simplifyresult
+        };
+    }
+}

package/src/elements/CsColorPicker.tsx

@@ -4,8 +4,9 @@ import { FormElementProps, FormElementRegistration  } from "@vertigis/workflow";
 import { ColorInput, ColorPicker } from '@mantine/core';
 type ColorFormat = "hex" | "rgba" | "rgb" | "hsl" | "hsla";
 
-import "@mantine/core/styles.css";
-
+//import "@mantine/core/styles.css";
+//Causing shrink
+import "../styles/mantine-scoped.css";
 import Color from "@arcgis/core/Color";
 
 
@@ -79,6 +80,7 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
     };
 
     return (
+        <div className="vertigis-mantine-scope">
         <MantineProvider withStaticClasses withGlobalClasses classNamesPrefix="ebta-mantime">
             {componentType === "ColorInput" ? (
                 <ColorInput
@@ -105,6 +107,7 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
                 />
             )}
         </MantineProvider>
+        </div>
     );
 }
 

package/src/elements/PanovideoPlayer.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Marzipano from "marzipano";
+
+
+/**
+ * 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 PanovideoPlayerProps extends FormElementProps<string> {}
+
+class VideoAsset extends (Marzipano as any).util.Emitter {
+    private _element: HTMLVideoElement;
+
+    constructor(videoElement: HTMLVideoElement) {
+        super();
+        this._element = videoElement;
+        // Marzipano polls isDynamic()/emits('change') to know when to redraw.
+        this._element.addEventListener("timeupdate", () => {
+            this.emit("change");
+        });
+    }
+
+    element(): HTMLVideoElement {
+        return this._element;
+    }
+
+    width(): number {
+        return this._element.videoWidth;
+    }
+
+    height(): number {
+        return this._element.videoHeight;
+    }
+
+    isDynamic(): boolean {
+        return true;
+    }
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName PanovideoPlayer
+ * @description Marzipano library panoramic video player
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
+    const { setValue, value } = props;
+
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const videoElRef = React.useRef<HTMLVideoElement | null>(null);
+    const viewerRef = React.useRef<any>(null);
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    // (Re)builds the Marzipano viewer whenever the video URL (props.value) changes.
+    React.useEffect(() => {
+        if (!value || !containerRef.current) {
+            return undefined;
+        }
+
+        setError(null);
+
+        // Create a hidden video element to drive the panorama. We don't
+        // attach it to the DOM directly - Marzipano reads frames from it
+        // and draws them into its own WebGL canvas.
+        const videoEl = document.createElement("video");
+        videoEl.crossOrigin = "anonymous";
+        videoEl.loop = true;
+        videoEl.muted = true; // required for autoplay in most browsers
+        videoEl.playsInline = true;
+        videoEl.src = value;
+        videoElRef.current = videoEl;
+
+        let viewer: any;
+        let cancelled = false;
+
+        const onLoadedMetadata = () => {
+            if (cancelled || !containerRef.current) {
+                return;
+            }
+
+            try {
+                viewer = new (Marzipano as any).Viewer(containerRef.current);
+                viewerRef.current = viewer;
+
+                const asset = new VideoAsset(videoEl);
+                const source = (Marzipano as any).SingleAssetSource.fromAsset(asset);
+
+                const geometry = new (Marzipano as any).EquirectGeometry([
+                    { width: videoEl.videoWidth || 1920 },
+                ]);
+
+                const limiter = (Marzipano as any).RectilinearView.limit.traditional(
+                    1024,
+                    (100 * Math.PI) / 180
+                );
+                const view = new (Marzipano as any).RectilinearView(
+                    { yaw: 0, pitch: 0, fov: Math.PI / 2 },
+                    limiter
+                );
+
+                const scene = viewer.createScene({
+                    source,
+                    geometry,
+                    view,
+                    pinFirstLevel: true,
+                });
+
+                scene.switchTo();
+
+                videoEl
+                    .play()
+                    .then(() => setIsPlaying(true))
+                    .catch(() => {
+                        // Autoplay was blocked - user needs to tap play.
+                        setIsPlaying(false);
+                    });
+            } catch (e) {
+                setError(
+                    e instanceof Error ? e.message : "Failed to initialize panoramic video."
+                );
+            }
+        };
+
+        const onVideoError = () => {
+            if (!cancelled) {
+                setError("Unable to load video from the provided URL.");
+            }
+        };
+
+        videoEl.addEventListener("loadedmetadata", onLoadedMetadata);
+        videoEl.addEventListener("error", onVideoError);
+
+        return () => {
+            cancelled = true;
+            videoEl.removeEventListener("loadedmetadata", onLoadedMetadata);
+            videoEl.removeEventListener("error", onVideoError);
+            videoEl.pause();
+            videoEl.removeAttribute("src");
+            videoEl.load();
+
+            if (viewerRef.current) {
+                try {
+                    // Not all Marzipano versions expose destroy(); guard defensively.
+                    viewerRef.current.destroy?.();
+                } catch {
+                    // no-op
+                }
+                viewerRef.current = null;
+            }
+
+            if (containerRef.current) {
+                containerRef.current.innerHTML = "";
+            }
+        };
+    }, [value]);
+
+    const togglePlayback = () => {
+        const videoEl = videoElRef.current;
+        if (!videoEl) {
+            return;
+        }
+        if (videoEl.paused) {
+            videoEl.play().then(() => setIsPlaying(true));
+        } else {
+            videoEl.pause();
+            setIsPlaying(false);
+        }
+    };
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <input
+                type="text"
+                placeholder="Enter 360° equirectangular video URL"
+                onChange={(event) => setValue(event.currentTarget.value)}
+                value={value ?? ""}
+                style={{ width: "100%" }}
+            />
+
+            {error && (
+                <div style={{ color: "red", fontSize: 12 }}>{error}</div>
+            )}
+
+            {value && (
+                <div style={{ position: "relative" }}>
+                    <div
+                        ref={containerRef}
+                        style={{
+                            width: "100%",
+                            height: 400,
+                            background: "#000",
+                        }}
+                    />
+                    <button
+                        type="button"
+                        onClick={togglePlayback}
+                        style={{
+                            position: "absolute",
+                            bottom: 8,
+                            left: 8,
+                        }}
+                    >
+                        {isPlaying ? "Pause" : "Play"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const PanovideoPlayerElementRegistration: FormElementRegistration<PanovideoPlayerProps> = {
+    component: PanovideoPlayer,
+    getInitialProperties: () => ({ value: "" }),
+    id: "PanovideoPlayer",
+};
+
+export default PanovideoPlayerElementRegistration;

package/src/elements/Timeline.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
 import { Timeline as MainTimeLine, Text } from '@mantine/core';
 import { MantineProvider } from '@mantine/core';
-
+import "../styles/mantine-scoped.css";
 
 /**
  * The generic type argument provided to `FormElementProps<T>` controls the type
@@ -38,30 +38,33 @@ interface TimelineProps extends FormElementProps<string> {
  * @param props The props that will be provided by the Workflow runtime.
  */
 function Timeline(props: TimelineProps): React.ReactElement {
-    const { itemDetails,iconSize,lineWidth,active,color,reverseActive } = props;
+    const { itemDetails, iconSize, lineWidth, active, color, reverseActive } = props;
     iconSize * 0.6
     return (
-        <MantineProvider>
-            <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
+        <div className="vertigis-mantine-scope">
+            <MantineProvider>
+                <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
+
+                    {itemDetails.map((item, index) => {
+
+                        return (
+
+                            <MainTimeLine.Item
+                                key={index}
+                                title={item.title}
+                                lineVariant={item.lineVariant}
+                            >
+
+                                {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
+                                {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
 
-                {itemDetails.map((item, index) => {
-                    
-                    return (
-                    
-                    <MainTimeLine.Item
-                        key={index}
-                        title={item.title}
-                        lineVariant={item.lineVariant}
-                    >
-                        
-                        {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
-                        {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
-                        
-                    </MainTimeLine.Item>
-                )})}
-            </MainTimeLine>
+                            </MainTimeLine.Item>
+                        )
+                    })}
+                </MainTimeLine>
 
-        </MantineProvider>
+            </MantineProvider>
+        </div>
     );
 }
 
@@ -72,7 +75,7 @@ const TimelineElementRegistration: FormElementRegistration<TimelineProps> = {
         lineWidth: 1,
         iconSize: 40,
         active: 2,
-        color:'var(--buttonIcon)',
+        color: 'var(--buttonIcon)',
         reverseActive: true,
         itemDetails: [
             {

package/src/index.ts

@@ -18,6 +18,7 @@ export { default as HTMLextractorActivity } from "./activities/HTMLextractor";
 export { default as AttributeFilterElementRegistration } from "./elements/AttributeFilter"
 export { default as ItemSearcher_V2DEVRegistration } from "./elements/ItemSearcher_v2";
 export { default as Viewer360Registration } from "./elements/Viewer360";
+export { default as PanovideoPlayerRegistration} from "./elements/PanovideoPlayer";
 export { default as TableRadioGroupElementRegistration } from "./elements/TableRadioGoup";
 export { MuiSingleToggleButtonGroupElementRegistration, MuiMultipleToggleButtonGroupElementRegistration } from "./elements/ToggleButtonGroup";
 
@@ -40,3 +41,6 @@ export { default as DrapGeometryActivity } from "./activities/DrapGeometry";
 export { default as SampleActivity } from "./activities/Sample";
 export { default as SampleInputRegistration } from "./elements/SampleInput";
 
+
+
+export { default as SimplifyGeometryActivity } from "./activities/SimplifyGeometry";

package/src/styles/mantine-scoped.css

@@ -0,0 +1,3 @@
+.vertigis-mantine-scope {
+  @import "@mantine/core/styles.css";
+}