ebta-workflow-prod 4.1.9 → 4.1.11

package/changelog.md

@@ -0,0 +1,7 @@
+4.1.0: Urgent & Major: Update to follow up with Vertigis foundation update React 19 and TypeScript 6.
+4.1.3 Fixed some minor issues in AttributeFilter /DrapGeometry activity that was ignored in urgent fix 4.1.0. Work very stable for long time.
+4.1.4 Attempted to fix css pollution by mantine that caused strange shrink, and new acitity simplify Geometry which is used in Permit Workflow. Turned out to be a major failure that stopped whole app.
+4.1.5-4.1.7 Attempts to revert back but not working, changed VSWFA DEV version to 4.1.3
+4.1.8 New feature: Panoramic video player utilitzing Marzipano player. 14/10/2026
+4.1.9 Minor improvement on panoplayer and totally fixed mantine pollution css issue. 14/10/2026
+4.1.10 Minor improvement on panoplayer for too much log info. 14/10/2026

package/package.json

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

package/src/elements/CsColorPicker.tsx

@@ -7,6 +7,15 @@ type ColorFormat = "hex" | "rgba" | "rgb" | "hsl" | "hsla";
 //import "@mantine/core/styles.css";
 //Causing shrink
 
+import "@mantine/core/styles/Input.css";
+import "@mantine/core/styles/ColorInput.css";
+import "@mantine/core/styles/ColorPicker.css";
+import "@mantine/core/styles/ColorSwatch.css";
+import "@mantine/core/styles/Popover.css";
+import "@mantine/core/styles/Paper.css";
+import "@mantine/core/styles/ActionIcon.css";
+import "@mantine/core/styles/UnstyledButton.css";
+
 import Color from "@arcgis/core/Color";
 
 

package/src/elements/PanovideoPlayer.tsx

@@ -4,16 +4,6 @@ import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
 import Marzipano from "marzipano";
 const M: any = Marzipano;
 
-function logPanovideo(message: string, details?: unknown): void {
-    if (details === undefined) {
-        console.log(`[PanovideoPlayer] ${message}`);
-    } else {
-        console.log(`[PanovideoPlayer] ${message}`, details);
-    }
-}
-
-logPanovideo("module loaded", { marzipanoAvailable: Boolean(M) });
-
 export interface VideoResolution {
     /** Display label for this source. */
     label: string;
@@ -64,13 +54,11 @@ class VideoAsset {
     private readonly emptyCanvas: HTMLCanvasElement;
 
     constructor(el: HTMLVideoElement) {
-        logPanovideo("VideoAsset.constructor: start", { src: el.currentSrc || el.src });
         this.el = el;
         this.emptyCanvas = document.createElement("canvas");
         this.emptyCanvas.width = 1;
         this.emptyCanvas.height = 1;
         this.loop();
-        logPanovideo("VideoAsset.constructor: complete");
     }
 
     width(): number {
@@ -95,15 +83,12 @@ class VideoAsset {
     }
 
     destroy(): void {
-        logPanovideo("VideoAsset.destroy: start");
         this.destroyed = true;
         cancelAnimationFrame(this.raf);
-        logPanovideo("VideoAsset.destroy: complete");
     }
 
     private loop = (): void => {
         if (this.destroyed) {
-            logPanovideo("VideoAsset.loop: stopped; asset destroyed");
             return;
         }
         const t = this.el.currentTime;
@@ -122,7 +107,6 @@ M.dependencies.eventEmitter(VideoAsset);
 /* -------------------------------------------------------------------------- */
 
 function createVideo(url: string, muted: boolean): HTMLVideoElement {
-    logPanovideo("createVideo: start", { url, muted });
     const v = document.createElement("video");
     v.crossOrigin = "anonymous"; // required to use the video as a WebGL texture
     v.loop = true;
@@ -134,16 +118,13 @@ function createVideo(url: string, muted: boolean): HTMLVideoElement {
     v.setAttribute("webkit-playsinline", "");
     v.src = url;
     v.load();
-    logPanovideo("createVideo: complete", { src: v.src, readyState: v.readyState });
     return v;
 }
 
 function disposeVideo(v: HTMLVideoElement): void {
-    logPanovideo("disposeVideo: start", { src: v.currentSrc || v.src, readyState: v.readyState });
     v.pause();
     v.removeAttribute("src");
     v.load();
-    logPanovideo("disposeVideo: complete");
 }
 
 function formatTime(seconds: number): string {
@@ -159,7 +140,7 @@ function formatTime(seconds: number): string {
 
 const DEFAULT_RESOLUTIONS: VideoResolution[] = [
     // The first source is used by the player when `value` is empty.
-    { label: "1280x640", url: "//win11assets.blob.core.windows.net/playbookicon/260917_BR120.mp4" },
+    { label: "1280x640", url: "//www.marzipano.net/media/video/mercedes-f1-2880x1440.mp4" },
 ];
 
 /** Widest vertical field of view the user can zoom out to. */
@@ -283,13 +264,6 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
     const { value, resolutions = DEFAULT_RESOLUTIONS, autoplay = true, maxZoom = 3, raiseEvent } = props;
     const sourceUrl = value || resolutions[0]?.url;
 
-    logPanovideo("component render: start", {
-        sourceUrl,
-        resolutionsCount: resolutions.length,
-        autoplay,
-        maxZoom,
-        hasSetValue: typeof props.setValue === "function",
-    });
 
     const playerRef = React.useRef<HTMLDivElement>(null);
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -323,41 +297,28 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
         const view = viewRef.current;
         const video = videoRef.current;
         if (!view || !video || !video.videoWidth) {
-            logPanovideo("applyZoomLimit: skipped", {
-                reason,
-                hasView: Boolean(view),
-                hasVideo: Boolean(video),
-                videoWidth: video?.videoWidth,
-            });
             return;
         }
         const effectiveWidth = video.videoWidth * Math.max(1, maxZoomRef.current);
         view.setLimiter(M.RectilinearView.limit.traditional(effectiveWidth, MAX_VFOV));
         // Re-clamp the current FOV under the new limiter.
         view.setFov(Math.min(INITIAL_FOV, view.fov()));
-        logPanovideo("applyZoomLimit: complete", {
-            reason,
-            videoWidth: video.videoWidth,
-            videoHeight: video.videoHeight,
-            maxZoom: maxZoomRef.current,
-            effectiveWidth,
-            fovDeg: (view.fov() * 180) / Math.PI,
-        });
+
     };
 
     React.useEffect(() => {
-        logPanovideo("fullscreen effect: start");
+
         const onFullscreenChange = () => {
             const fullscreen = document.fullscreenElement === playerRef.current;
-            logPanovideo("fullscreen event: changed", { fullscreen });
+
             setIsFullscreen(fullscreen);
         };
         document.addEventListener("fullscreenchange", onFullscreenChange);
-        logPanovideo("fullscreen effect: complete");
+
         return () => {
-            logPanovideo("fullscreen effect cleanup: start");
+
             document.removeEventListener("fullscreenchange", onFullscreenChange);
-            logPanovideo("fullscreen effect cleanup: complete");
+
         };
     }, []);
 
@@ -372,12 +333,7 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
             if (!viewer) {
                 return;
             }
-            logPanovideo("resize: updating Marzipano size", {
-                reason,
-                fullscreen: isFullscreen,
-                width: container.clientWidth,
-                height: container.clientHeight,
-            });
+
             viewer.updateSize();
         };
 
@@ -400,7 +356,7 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
     }, [isFullscreen]);
 
     React.useEffect(() => {
-        logPanovideo("wheel effect: start");
+
         const player = playerRef.current;
         if (!player) {
             return undefined;
@@ -415,59 +371,44 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
             const previousFov = view.fov();
             // Proportional zoom: the same wheel travel feels the same at any FOV.
             view.setFov(previousFov * Math.exp(event.deltaY * deltaMultiplier * WHEEL_SENSITIVITY));
-            logPanovideo("wheel: zoom", { deltaY: event.deltaY, previousFov, nextFov: view.fov() });
         };
         player.addEventListener("wheel", onWheel, { passive: false });
-        logPanovideo("wheel effect: complete");
+
         return () => {
-            logPanovideo("wheel effect cleanup");
             player.removeEventListener("wheel", onWheel);
         };
     }, []);
 
     /* ---- 1. create the Marzipano viewer and view once ---- */
     React.useEffect(() => {
-        logPanovideo("viewer effect: start");
+
         const container = containerRef.current;
         if (!container) {
-            logPanovideo("viewer effect: skipped; no container");
             return undefined;
         }
 
-        logPanovideo("viewer effect: creating Marzipano viewer");
         const viewer = new M.Viewer(container, { controls: { scrollZoom: false } });
-        logPanovideo("viewer effect: viewer created");
 
         // Permissive limiter for now; the real one is applied once the video
         // reports its dimensions (see applyZoomLimit).
         const limiter = M.RectilinearView.limit.traditional(PLACEHOLDER_MAX_RESOLUTION, MAX_VFOV);
         const view = new M.RectilinearView({ yaw: Math.PI, fov: INITIAL_FOV }, limiter);
-        logPanovideo("viewer effect: view created", { fovDeg: (view.fov() * 180) / Math.PI });
 
         viewerRef.current = viewer;
         viewRef.current = view;
-        logPanovideo("viewer effect: complete");
 
         return () => {
-            logPanovideo("viewer effect cleanup: start");
             viewer.destroy();
             viewerRef.current = null;
             viewRef.current = null;
-            logPanovideo("viewer effect cleanup: complete");
         };
     }, []);
 
     /* ---- 2. create the video and scene; rebuilt whenever the source URL changes ---- */
     React.useEffect(() => {
-        logPanovideo("video effect: start", { sourceUrl });
         const viewer = viewerRef.current;
         const view = viewRef.current;
         if (!viewer || !view || !sourceUrl) {
-            logPanovideo("video effect: skipped", {
-                hasViewer: Boolean(viewer),
-                hasView: Boolean(view),
-                sourceUrl,
-            });
             return undefined;
         }
 
@@ -477,7 +418,7 @@ function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
         setLoading(true);
 setLoadPercent(0);
 
-        logPanovideo("video effect: creating video", { sourceUrl });
+        console.info("[PanovideoPlayer] video effect: creating video", { sourceUrl });
         const video = createVideo(sourceUrl, videoRef.current?.muted ?? true);
         videoRef.current = video;
         setMuted(video.muted);
@@ -485,25 +426,21 @@ setLoadPercent(0);
 video.playbackRate = playbackRateRef.current;
 
         const onPlay = () => {
-            logPanovideo("video event: play", { src: video.currentSrc || video.src });
             setPlaying(true);
         };
         const onPause = () => {
-            logPanovideo("video event: pause", { src: video.currentSrc || video.src });
             setPlaying(false);
         };
         const onError = () => {
             setLoading(false);
-            logPanovideo("video event: error", { src: video.currentSrc || video.src, error: video.error });
+            console.error("[PanovideoPlayer] video event: error", { src: video.currentSrc || video.src, error: video.error });
             setError(`Unable to load ${video.src}`);
         };
 
         const onWaiting = () => {
-    logPanovideo("video event: waiting (buffering)");
     setLoading(true);
 };
 const onReady = () => {
-    logPanovideo("video event: ready to play", { readyState: video.readyState });
     setLoading(false);
 };
 const onProgress = () => {
@@ -518,7 +455,7 @@ const onProgress = () => {
             setDuration(Number.isFinite(video.duration) ? video.duration : 0);
         };
         const onLoadedMetadata = () => {
-            logPanovideo("video event: loadedmetadata", {
+            console.info("[PanovideoPlayer] video event: loadedmetadata", {
                 videoWidth: video.videoWidth,
                 videoHeight: video.videoHeight,
                 duration: video.duration,
@@ -528,7 +465,7 @@ const onProgress = () => {
             try {
                 raiseEventRef.current("loaded" as any, sourceUrl);
             } catch (raiseError) {
-                logPanovideo("video event: raiseEvent(loaded) failed", raiseError);
+                console.error("[PanovideoPlayer] video event: raiseEvent(loaded) failed", raiseError);
             }
         };
         video.addEventListener("play", onPlay);
@@ -544,32 +481,21 @@ video.addEventListener("playing", onReady);
 video.addEventListener("progress", onProgress);
 
         const asset = new VideoAsset(video);
-        logPanovideo("video effect: asset created");
         const source = new M.SingleAssetSource(asset);
-        logPanovideo("video effect: source created");
         const geometry = new M.EquirectGeometry([{ width: 1 }]);
-        logPanovideo("video effect: geometry created");
 
-        logPanovideo("video effect: creating scene");
         // The view is reused so camera direction and zoom survive a source swap.
         const scene = viewer.createScene({ source, geometry, view, pinFirstLevel: true });
-        logPanovideo("video effect: switching to scene");
         scene.switchTo();
         assetRef.current = asset;
 
         if (autoplayRef.current) {
-            logPanovideo("video effect: attempting autoplay");
-            void video.play().then(
-                () => logPanovideo("video effect: autoplay started"),
-                (playError: unknown) => logPanovideo("video effect: autoplay rejected", playError),
+            void video.play().catch((playError: unknown) =>
+                console.error("[PanovideoPlayer] autoplay rejected", playError),
             );
-        } else {
-            logPanovideo("video effect: autoplay disabled");
         }
-        logPanovideo("video effect: complete");
 
         return () => {
-            logPanovideo("video effect cleanup: start");
             video.removeEventListener("play", onPlay);
             video.removeEventListener("pause", onPause);
             video.removeEventListener("error", onError);
@@ -587,7 +513,7 @@ video.removeEventListener("progress", onProgress);
                 try {
                     viewer.destroyScene(scene);
                 } catch (sceneError) {
-                    logPanovideo("video effect cleanup: destroyScene failed", sceneError);
+                    console.error("[PanovideoPlayer] video effect cleanup: destroyScene failed", sceneError);
                 }
             }
             disposeVideo(video);
@@ -597,7 +523,6 @@ video.removeEventListener("progress", onProgress);
             if (assetRef.current === asset) {
                 assetRef.current = null;
             }
-            logPanovideo("video effect cleanup: complete");
         };
         // Rebuilt only when the source URL changes. Other props are read via refs.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -605,46 +530,35 @@ video.removeEventListener("progress", onProgress);
 
     /* ---- re-apply the zoom limit when `maxZoom` changes at runtime ---- */
     React.useEffect(() => {
-        logPanovideo("maxZoom effect", { maxZoom });
         applyZoomLimit("maxZoom changed");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [maxZoom]);
 
     /* ---- controls ---- */
     const togglePlay = () => {
-        logPanovideo("togglePlay: start");
         const v = videoRef.current;
         if (!v) {
-            logPanovideo("togglePlay: skipped; no video");
             return;
         }
         if (v.paused) {
-            logPanovideo("togglePlay: requesting playback", { src: v.currentSrc || v.src });
-            void v.play().then(
-                () => logPanovideo("togglePlay: playback started"),
-                (playError: unknown) => logPanovideo("togglePlay: playback rejected", playError),
+            void v.play().catch((playError: unknown) =>
+                console.error("[PanovideoPlayer] playback rejected", playError),
             );
         } else {
-            logPanovideo("togglePlay: pausing playback", { currentTime: v.currentTime });
             v.pause();
         }
-        logPanovideo("togglePlay: complete");
     };
 
     const toggleMute = () => {
-        logPanovideo("toggleMute: start");
         const v = videoRef.current;
         if (!v) {
-            logPanovideo("toggleMute: skipped; no video");
             return;
         }
         v.muted = !v.muted;
         setMuted(v.muted);
-        logPanovideo("toggleMute: complete", { muted: v.muted });
     };
 
     const changeSpeed = (rate: number) => {
-    logPanovideo("changeSpeed", { rate });
     playbackRateRef.current = rate;
     setPlaybackRate(rate);
     const v = videoRef.current;
@@ -657,18 +571,11 @@ video.removeEventListener("progress", onProgress);
     const adjustZoom = (direction: "in" | "out") => {
         const view = viewRef.current;
         if (!view) {
-            logPanovideo("adjustZoom: skipped; no view", { direction });
             return;
         }
         const previousFov = view.fov();
         // Proportional step; setFov passes through the limiter, so min/max are enforced.
         view.setFov(previousFov * (direction === "in" ? ZOOM_IN_FACTOR : ZOOM_OUT_FACTOR));
-        logPanovideo("adjustZoom: complete", {
-            direction,
-            previousFov,
-            nextFov: view.fov(),
-            nextFovDeg: (view.fov() * 180) / Math.PI,
-        });
     };
 
     const seekTo = (time: number) => {
@@ -682,10 +589,8 @@ video.removeEventListener("progress", onProgress);
     };
 
     const toggleFullscreen = async () => {
-        logPanovideo("toggleFullscreen: start", { isFullscreen });
         const player = playerRef.current;
         if (!player) {
-            logPanovideo("toggleFullscreen: skipped; no player element");
             return;
         }
         try {
@@ -694,9 +599,8 @@ video.removeEventListener("progress", onProgress);
             } else {
                 await player.requestFullscreen();
             }
-            logPanovideo("toggleFullscreen: request complete");
         } catch (fullscreenError) {
-            logPanovideo("toggleFullscreen: request failed", fullscreenError);
+            console.error("[PanovideoPlayer] toggleFullscreen: request failed", fullscreenError);
             setError("Fullscreen is unavailable in this browser or context.");
         }
     };
@@ -729,7 +633,6 @@ video.removeEventListener("progress", onProgress);
             return;
         }
         event.preventDefault();
-        logPanovideo("keyboard: Space pressed; toggling playback");
         togglePlay();
     };
 
@@ -807,6 +710,14 @@ video.removeEventListener("progress", onProgress);
                     value={Math.min(currentTime, duration)}
                     disabled={duration <= 0}
                     onChange={(event) => seekTo(Number(event.currentTarget.value))}
+                    onClick={(event) => {
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        if (rect.width === 0 || duration <= 0) {
+                            return;
+                        }
+                        const percent = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+                        seekTo(percent * duration);
+                    }}
                     style={timelineStyle}
                     aria-label="Video progress"
                     aria-valuetext={`${formatTime(currentTime)} of ${formatTime(duration)}`}
@@ -829,21 +740,19 @@ video.removeEventListener("progress", onProgress);
             )}
         </div>
     );
-    logPanovideo("component render: JSX tree created", { playing, muted, isFullscreen, error });
+
     return element;
 }
 
 const PanovideoPlayerElementRegistration: FormElementRegistration<PanovideoPlayerProps> = {
     component: PanovideoPlayer,
     getInitialProperties: () => {
-        logPanovideo("getInitialProperties: start");
         const properties = {
             value: "",
             resolutions: DEFAULT_RESOLUTIONS,
             autoplay: true,
             maxZoom: 3,
         };
-        logPanovideo("getInitialProperties: complete", properties);
         return properties;
     },
     id: "PanovideoPlayer",

package/src/elements/SampleInput.tsx

@@ -35,6 +35,4 @@ const sampleInputDEVElementRegistration: FormElementRegistration<sampleInputDEVP
     id: "sampleInputDEV",
 };
 
-
-export default sampleInputDEVElementRegistration;
-
+export default sampleInputDEVElementRegistration;