@sapui5/sap.ui.vk 1.135.0 → 1.138.0

package/src/sap/ui/vk/Viewer.js

@@ -10,6 +10,7 @@ sap.ui.define([
 	"./library",
 	"sap/ui/core/Core",
 	"sap/ui/core/Control",
+	"sap/ui/model/json/JSONModel",
 	"./Scene",
 	"./ContentResource",
 	"./ContentConnector",
@@ -33,20 +34,24 @@ sap.ui.define([
 	"./Viewport",
 	"./NativeViewport",
 	"./RedlineDesign",
-	"./ViewerRenderer",
 	"./SelectionMode",
 	"./DrawerToolbar",
+	"./pdf/PageGallery",
+	"./ecad/LayersPanel",
+	"./ecad/ElementsPanel",
 	"./getResourceBundle",
 	"./cssColorToColor",
 	"./colorToCSSColor",
 	"./abgrToColor",
 	"./colorToABGR",
 	"sap/base/Log",
-	"sap/base/i18n/Localization"
+	"sap/base/i18n/Localization",
+	"sap/ui/core/StaticArea"
 ], function(
 	vkLibrary,
 	core,
 	Control,
+	JSONModel,
 	Scene,
 	ContentResource,
 	ContentConnector,
@@ -70,16 +75,19 @@ sap.ui.define([
 	Viewport,
 	NativeViewport,
 	RedlineDesign,
-	ViewerRenderer,
 	SelectionMode,
 	DrawerToolbar,
+	PageGallery,
+	LayersPanel,
+	ElementsPanel,
 	getResourceBundle,
 	cssColorToColor,
 	colorToCSSColor,
 	abgrToColor,
 	colorToABGR,
 	Log,
-	Localization
+	Localization,
+	StaticArea
 ) {
 	"use strict";
 
@@ -91,7 +99,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] initial settings for the new Viewer control
 	 * @public
 	 * @author SAP SE
-	 * @version 1.135.0
+	 * @version 1.138.0
 	 * @since 1.32.0
 	 * @extends sap.ui.core.Control
 	 * @alias sap.ui.vk.Viewer
@@ -150,6 +158,48 @@ sap.ui.define([
 					type: "boolean",
 					defaultValue: false
 				},
+				/**
+				 * Disables the ECAD layers panel control
+				 */
+				enableLayersPanel: {
+					type: "boolean",
+					defaultValue: true
+				},
+				/**
+				 * Shows or hides the ECAD layers panel control
+				 * */
+				showLayersPanel: {
+					type: "boolean",
+					defaultValue: true
+				},
+				/**
+				 * Disables the ECAD elements panel control
+				 */
+				enableElementsPanel: {
+					type: "boolean",
+					defaultValue: true
+				},
+				/**
+				 * Shows or hides the ECAD elements panel control
+				 */
+				showElementsPanel: {
+					type: "boolean",
+					defaultValue: true
+				},
+				/**
+				 * Disables the page gallery control
+				 */
+				enablePageGallery: {
+					type: "boolean",
+					defaultValue: true
+				},
+				/**
+				 * Shows or hides the page gallery control
+				 */
+				showPageGallery: {
+					type: "boolean",
+					defaultValue: true
+				},
 				/**
 				 * Shows or hides Toolbar control
 				 */
@@ -254,6 +304,13 @@ sap.ui.define([
 						premultipliedAlpha: false
 					}
 				},
+				/**
+				 * Shows or hides showing of all hotspots toggle button
+				 */
+				hotspotsEnabled: {
+					type: "boolean",
+					defaultValue: true
+				},
 				/**
 				 * Enables or disables showing of all hotspots
 				 */
@@ -266,14 +323,14 @@ sap.ui.define([
 				 */
 				hotspotColorABGR: {
 					type: "int",
-					defaultValue: 0xc00000ff
+					defaultValue: 0x590000BB
 				},
 				/**
 				 * Color used for highlighting Smart2D hotspots in the CSS Color format.
 				 */
 				hotspotColor: {
 					type: "sap.ui.core.CSSColor",
-					defaultValue: "rgba(255, 0, 0, 0.7529411764705882)"
+					defaultValue: "rgba(89, 0, 0, 0.73)"
 				}
 			},
 
@@ -437,6 +494,79 @@ sap.ui.define([
 					}
 				}
 			}
+		},
+
+		renderer: {
+			apiVersion: 2,
+
+			render: function(rm, control) {
+				rm.openStart("div", control);
+				rm.class("sapVizKitViewer");
+				if (control.getWidth()) {
+					rm.style("width", control.getWidth());
+				}
+				if (control.getHeight()) {
+					rm.style("height", control.getHeight());
+				}
+				rm.openEnd();
+				rm.renderControl(control._layout);
+				rm.renderControl(control._progressIndicator);
+				rm.close("div");
+			}
+		},
+
+		constructor: function(id, settings) {
+			Control.apply(this, arguments);
+
+			Object.assign(this._data, {
+				sceneTree: {
+					supported: false,
+					enabled: this.getEnableSceneTree(),
+					visible: this.getShowSceneTree()
+				},
+				stepNavigation: {
+					supported: false,
+					enabled: this.getEnableStepNavigation(),
+					visible: this.getShowStepNavigation()
+				},
+				layersPanel: {
+					supported: false,
+					enabled: this.getEnableLayersPanel(),
+					visible: this.getShowLayersPanel()
+				},
+				elementsPanel: {
+					supported: false,
+					enabled: this.getEnableElementsPanel(),
+					visible: this.getShowElementsPanel()
+				},
+				pageGallery: {
+					supported: false,
+					enabled: this.getEnablePageGallery(),
+					visible: this.getShowPageGallery(),
+					currentPageIndex: 0
+				},
+				miniMap: {
+					supported: false,
+					enabled: this.getEnableMiniMap(),
+					visible: this.getShowMiniMap()
+				},
+				toolbar: {
+					title: this.getToolbarTitle(),
+					enabled: this.getEnableToolbar()
+				},
+				drawerToolbar: {
+					visible: this.getShowDrawerToolbar()
+				},
+				hotspots: {
+					supported: false,
+					enabled: this.getHotspotsEnabled(),
+					showAll: this.getShowAllHotspots(),
+					colorABGR: this.getHotspotColorABGR(),
+					color: this.getHotspotColor()
+				},
+				shouldTrackVisibilityChanges: this.getShouldTrackVisibilityChanges(),
+				recursiveSelection: this.getRecursiveSelection()
+			});
 		}
 	});
 
@@ -444,41 +574,6 @@ sap.ui.define([
 		this._inApplySettings = true;
 		Control.prototype.applySettings.apply(this, arguments);
 		delete this._inApplySettings;
-
-		if (this._viewStateManager) {
-			this._viewStateManager.setShouldTrackVisibilityChanges(this.getShouldTrackVisibilityChanges());
-			this._viewStateManager.setRecursiveSelection(this.getRecursiveSelection());
-		}
-
-		// _componentsState stores the default state of the scene tree and step navigation.
-		// It also stores the last user interaction such as show/hide.
-		// These settings are used to restore states after switching between 2D and 3D.
-		this._componentsState = {
-			sceneTree: {
-				defaultEnable: this.getEnableSceneTree(),
-				// shouldBeEnabled refers to certain scenarios when the scene tree should not be displayed (for example Smart2D files)
-				shouldBeEnabled: true,
-				// saving the last state set by user interaction (turn scene tree ON/OFF)
-				userInteractionShow: this.getShowSceneTree()
-			},
-			stepNavigation: {
-				defaultEnable: this.getEnableStepNavigation(),
-				userInteractionShow: this.getShowStepNavigation()
-			},
-			miniMap: {
-				defaultEnable: this.getEnableMiniMap(),
-				userInteractionShow: this.getShowMiniMap()
-			},
-			progressIndicator: {
-				defaultEnable: this.getEnableProgressIndicator()
-			},
-			messagePopover: {
-				defaultEnable: this.getEnableNotifications()
-			}
-		};
-		// We initialize the viewer with the both scene tree and step navigation disabled.
-		this.setEnableSceneTree(false);
-		this.setEnableStepNavigation(false);
 	};
 
 	Viewer.prototype.init = function() {
@@ -493,7 +588,38 @@ sap.ui.define([
 		this._contentConnector.attachContentChangesFinished(this._handleContentChangesFinished, this);
 		this._contentConnector.attachContentChangesProgress(this._handleContentChangesProgress, this);
 
+		this._data = {
+			sceneTree: {},
+			stepNavigation: {},
+			layersPanel: {},
+			elementsPanel: {},
+			pageGallery: {},
+			miniMap: {},
+			toolbar: {},
+			drawerToolbar: {},
+			hotspots: {}
+		};
+		this._model = new JSONModel(this._data);
+		this._model.attachPropertyChange(function(event) {
+			const value = event.getParameter("value");
+			switch (event.getParameter("path")) {
+				case "/sceneTree/visible": this.setShowSceneTree(value); break;
+				case "/stepNavigation/visible": this.setShowStepNavigation(value); break;
+				case "/layersPanel/visible": this.setShowLayersPanel(value); break;
+				case "/elementsPanel/visible": this.setShowElementsPanel(value); break;
+				case "/pageGallery/visible": this.setShowPageGallery(value); break;
+				case "/miniMap/visible": this.setShowMiniMap(value); break;
+				case "/hotspots/showAll": this.setShowAllHotspots(value); break;
+				case "/hotspots/colorABGR": this.setHotspotColorABGR(value); break;
+				case "/hotspots/color": this.setHotspotColor(value); break;
+				default: break;
+			}
+		}, this);
+		this.setModel(this._model, "_internal");
+
 		this._viewStateManager = new ViewStateManager(this.getId() + "-viewstatemanager", {
+			shouldTrackVisibilityChanges: "{_internal>/shouldTrackVisibilityChanges}",
+			recursiveSelection: "{_internal>/recursiveSelection}",
 			contentConnector: this._contentConnector
 		});
 		this.setAggregation("viewStateManager", this._viewStateManager);
@@ -519,10 +645,18 @@ sap.ui.define([
 		this._stepNavigation = null;
 		this._sceneTree = null;
 		this._drawerToolbar = null;
+		this._pageGallery = null;
+		this._layersPanel = null;
+		this._elementsPanel = null;
+
+		this._staticAreaParent = null;
+		this._staticAreaNextSibling = null;
+
+		this.attachBrowserEvent("fullscreenchange", this._handleFullscreenChange, this);
 
 		this._toolbar = new Toolbar({
-			title: this.getToolbarTitle(),
-			visible: this.getEnableToolbar(),
+			title: "{_internal>/toolbar/title}",
+			visible: "{_internal>/toolbar/enabled}",
 			viewer: this
 		});
 
@@ -582,16 +716,11 @@ sap.ui.define([
 
 		Localization.detachChange(this._onLocalizationChanged);
 
-		if (this._viewport) {
-			this._viewport.detachEvent("viewActivated", this._onViewportViewActivated, this);
-			this._viewport.destroy();
-			this._viewport = null;
-		}
+		this._viewport?.destroy();
+		this._viewport = null;
 
-		if (this._nativeViewport) {
-			this._nativeViewport.destroy();
-			this._nativeViewport = null;
-		}
+		this._nativeViewport?.destroy();
+		this._nativeViewport = null;
 
 		// All scenes will be destroyed and all viewports will be unregistered by GraphicsCore.destroy.
 		this._setMainScene(null);
@@ -604,47 +733,143 @@ sap.ui.define([
 		this._viewStateManager = null;
 		this._contentConnector = null;
 		this._viewManager = null;
+		this._model = null;
+
+		this._staticAreaParent = null;
+		this._staticAreaNextSibling = null;
+
+		this.detachBrowserEvent("fullscreenchange", this._handleFullscreenChange, this);
 
 		if (Control.prototype.exit) {
 			Control.prototype.exit.apply(this);
 		}
 	};
 
-	Viewer.prototype._setMainScene = function(scene) {
-		if (scene instanceof Scene) {
-			if (scene !== this._mainScene) {
-				this._mainScene = scene;
-				this._showViewport();
-
-				// Set the scene tree & step navigation state based on default settings and last user interaction (if any).
-				if (this._componentsState.sceneTree.defaultEnable) {
-					this._instantiateSceneTree();
-					this.setEnableSceneTree(true);
-					if (this._componentsState.sceneTree.userInteractionShow && this._componentsState.sceneTree.shouldBeEnabled) {
-						this.setShowSceneTree(true);
-						this._sceneTree.setVisible(true);
-					} else {
-						this.setShowSceneTree(false);
-					}
-				} else if (this._sceneTree && this._viewStateManager) {
-					this._sceneTree.setScene(scene, this._viewStateManager);
+	Viewer.prototype._handleFullscreenChange = function(event) {
+		const viewerDomRef = this.getDomRef();
+
+		// We can get to this event handler in two cases:
+		//
+		// 1. When the viewer itself enters or exits fullscreen mode.
+		// 2. When a child control of the viewer enters or exits fullscreen mode and the event is
+		//    propagated from the child.
+		//
+		// NOTE 1: this._staticAreaParent != null only when the viewer is in fullscreen mode.
+		//
+		// NOTE 2: The event is propagated from the child control only when the user presses the
+		// "Esc" key to exit fullscreen mode and document.fullscreenElement == null.
+		//
+		// When NOTE 1 and NOTE 2 are true, we need to restore the static area to its original
+		// position in the DOM tree.
+
+		if (event.target === this.getDomRef() || this._staticAreaParent != null) {
+			const staticArea = StaticArea.getDomRef();
+			if (staticArea == null) {
+				return;
+			}
+			if (document.fullscreenElement === this.getDomRef()) {
+				// Entering fullscreen
+				this._staticAreaParent = staticArea.parentElement;
+				this._staticAreaNextSibling = staticArea.nextSibling;
+				viewerDomRef.insertBefore(staticArea, viewerDomRef.firstChild);
+				this._toolbar._enterFullScreenButton.setTooltip(getResourceBundle().getText("EXIT_FULLSCREEN"));
+
+				// See NOTE 1 in ViewportBase#_handleFullscreenChange.
+				event.stopImmediatePropagation();
+			} else if (this._staticAreaParent != null) {
+				// Exiting fullscreen
+				this._staticAreaParent.insertBefore(staticArea, this._staticAreaNextSibling);
+				this._staticAreaParent = this._staticAreaNextSibling = null;
+				this._toolbar._enterFullScreenButton.setTooltip(getResourceBundle().getText("ENTER_FULLSCREEN"));
+
+				// See NOTE 2 in ViewportBase#_handleFullscreenChange.
+				if (document.fullscreenElement != null) {
+					event.stopImmediatePropagation();
 				}
+			}
+		}
+	};
 
-				this.setEnableStepNavigation(this.getEnableStepNavigation() || this._componentsState.stepNavigation.defaultEnable);
-				if (this.getEnableStepNavigation()) {
-					this._instantiateStepNavigation();
-					this.setShowStepNavigation(this._componentsState.stepNavigation.userInteractionShow);
-				}
+	Viewer.prototype._setMainScene = function(scene) {
+		this._sceneTree?.destroy();
+		this._sceneTree = null;
+		if (this._stepNavigation) {
+			this._layout.removeItem(this._stepNavigation);
+			this._viewport?.removeContent(this._stepNavigation);
+			this._stepNavigation.destroy();
+			this._stepNavigation = null;
+		}
+		this._layersPanel?.destroy();
+		this._layersPanel = null;
+		this._elementsPanel?.destroy();
+		this._elementsPanel = null;
+		this._pageGallery?.destroy();
+		this._pageGallery = null;
+		this._mainScene = scene instanceof Scene ? scene : null;
+
+		const isSVG = scene?.getMetadata?.().getName() === "sap.ui.vk.svg.Scene";
+		const isECAD = isSVG && scene.getRootElement()?.children.some((child) => child.userData.sourceType === "ecad");
+		const isPDF = scene?.isA?.("sap.ui.vk.pdf.Document");
+		const data = this._data;
+		data.sceneTree.supported = data.stepNavigation.supported = (scene instanceof Scene) && !isECAD;
+		data.layersPanel.supported = data.elementsPanel.supported = isECAD;
+		data.hotspots.supported = isSVG && !isECAD;
+		data.miniMap.supported = isSVG;
+		data.pageGallery.supported = isPDF;
+		this._model?.updateBindings();
+
+		if (this._mainScene) {
+			// Set the scene tree & step navigation state based on default settings and last user interaction (if any).
+			if (data.sceneTree.supported && data.sceneTree.enabled) {
+				this._sceneTree = new SceneTree({
+					layoutData: new SplitterLayoutData({
+						size: "320px",
+						minSize: 200
+					}),
+					viewStateManager: this._viewStateManager,
+					contentConnector: this._contentConnector
+				});
 			}
 
-			if (this._stepNavigation) {
-				this._stepNavigation.refresh(scene);
+			if (data.stepNavigation.supported && data.stepNavigation.enabled) {
+				this._instantiateStepNavigation();
+			}
+
+			if (data.layersPanel.supported && data.layersPanel.enabled) {
+				this._layersPanel = new LayersPanel({
+					layoutData: new SplitterLayoutData({
+						size: "320px",
+						minSize: 200
+					}),
+					contentConnector: this._contentConnector,
+					viewStateManager: this._viewStateManager
+				});
+			}
+
+			if (data.elementsPanel.supported && data.elementsPanel.enabled) {
+				this._elementsPanel = new ElementsPanel({
+					contentConnector: this._contentConnector,
+					viewStateManager: this._viewStateManager,
+					layoutData: new SplitterLayoutData({
+						size: "320px",
+						minSize: 200
+					})
+				});
 			}
-		} else {
-			this._mainScene = null;
-			this.setEnableSceneTree(false);
-			this.setEnableStepNavigation(false);
 		}
+
+		if (data.pageGallery.supported) {
+			data.pageGallery.currentPageIndex = 0;
+			this._pageGallery = new PageGallery({
+				layoutData: new SplitterLayoutData({
+					size: "320px",
+					minSize: 200
+				}),
+				contentConnector: this._contentConnector,
+				currentPageIndex: "{_internal>/pageGallery/currentPageIndex}"
+			});
+		}
+
 		return this;
 	};
 
@@ -690,13 +915,14 @@ sap.ui.define([
 			this._viewport = new Viewport(this.getId() + "-viewport", {
 				viewStateManager: this._viewStateManager,
 				selectionMode: SelectionMode.Exclusive,
-				contentConnector: this._contentConnector // content connector must be the last parameter in the list!
+				contentConnector: this._contentConnector, // content connector must be the last parameter in the list!
+				showAllHotspots: "{_internal>/hotspots/showAll}",
+				hotspotColorABGR: "{_internal>/hotspots/colorABGR}",
+				hotspotColor: "{_internal>/hotspots/color}"
 			});
 
-			this._viewport.attachEvent("viewActivated", this._onViewportViewActivated, this);
-
 			this._drawerToolbar = new DrawerToolbar({
-				visible: this.getShowDrawerToolbar(),
+				visible: "{_internal>/drawerToolbar/visible}",
 				expanded: true,
 				viewport: this._viewport
 			});
@@ -750,206 +976,182 @@ sap.ui.define([
 		return this._redlineDesign;
 	};
 
-	Viewer.prototype.setEnableSceneTree = function(oProperty) {
-		this.setProperty("enableSceneTree", oProperty, true);
-		if (!oProperty) {
-			this.setProperty("showSceneTree", false);
-		}
+	Viewer.prototype.setEnableSceneTree = function(value) {
+		this.setProperty("enableSceneTree", value, true);
+		this._data.sceneTree.enabled = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setShowSceneTree = function(value) {
+		this.setProperty("showSceneTree", value, true);
+		this._data.sceneTree.visible = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.setEnableNotifications = function(oProperty) {
-		this.setProperty("enableNotifications", oProperty, true);
-		this._messagePopover.setVisible(false);
+	Viewer.prototype.setEnableStepNavigation = function(value) {
+		this.setProperty("enableStepNavigation", value, true);
+		this._data.stepNavigation.enabled = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setShowStepNavigation = function(value) {
+		this.setProperty("showStepNavigation", value, true);
+		this._data.stepNavigation.visible = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setEnableLayersPanel = function(value) {
+		this.setProperty("enableLayersPanel", value, true);
+		this._data.layersPanel.enabled = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setShowLayersPanel = function(value) {
+		this.setProperty("showLayersPanel", value, true);
+		this._data.layersPanel.visible = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.setShowSceneTree = function(oProperty) {
-		this.setProperty("showSceneTree", oProperty, true);
+	Viewer.prototype.setEnableElementsPanel = function(value) {
+		this.setProperty("enableElementsPanel", value, true);
+		this._data.elementsPanel.enabled = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setShowElementsPanel = function(value) {
+		this.setProperty("showElementsPanel", value, true);
+		this._data.elementsPanel.visible = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.setEnableStepNavigation = function(oProperty) {
-		this.setProperty("enableStepNavigation", oProperty, true);
-		if (!oProperty) {
-			this.setProperty("showStepNavigation", false);
-		}
+	Viewer.prototype.setEnablePageGallery = function(value) {
+		this.setProperty("enablePageGallery", value, true);
+		this._data.pageGallery.enabled = value;
+		this._model.updateBindings();
+		return this;
+	};
+
+	Viewer.prototype.setShowPageGallery = function(value) {
+		this.setProperty("showPageGallery", value, true);
+		this._data.pageGallery.visible = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.setShowStepNavigation = function(oProperty) {
-		this.setProperty("showStepNavigation", oProperty, true);
+	Viewer.prototype.setEnableMiniMap = function(value) {
+		this.setProperty("enableMiniMap", value, true);
+		this._data.miniMap.enabled = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.setShowMiniMap = function(oProperty) {
-		this.setProperty("showMiniMap", oProperty, true);
+	Viewer.prototype.setShowMiniMap = function(value) {
+		this.setProperty("showMiniMap", value, true);
+		this._data.miniMap.visible = value;
+		this._model.updateBindings();
 		this._updateLayout();
 		return this;
 	};
 
-	Viewer.prototype.getEnableMiniMap = function() {
-		return this.getProperty("enableMiniMap") && this._viewport?.getImplementation()?.getMetadata().getName() === "sap.ui.vk.svg.Viewport";
+	Viewer.prototype.setToolbarTitle = function(value) {
+		this.setProperty("toolbarTitle", value, true);
+		this._data.toolbar.title = value;
+		this._model.updateBindings();
+		return this;
 	};
 
 	Viewer.prototype.setEnableToolbar = function(value) {
 		this.setProperty("enableToolbar", value, true);
-		this._toolbar.setVisible(value);
+		this._data.toolbar.enabled = value;
+		this._model.updateBindings();
 		return this;
 	};
 
 	Viewer.prototype.setShowDrawerToolbar = function(value) {
 		this.setProperty("showDrawerToolbar", value, true);
-		if (this._drawerToolbar) {
-			this._drawerToolbar.setVisible(value);
-		}
+		this._data.drawerToolbar.visible = value;
+		this._model.updateBindings();
 		return this;
 	};
 
-	Viewer.prototype.setRecursiveSelection = function(oProperty) {
-		this.setProperty("recursiveSelection", oProperty, true);
-		if (this._viewStateManager) {
-			this._viewStateManager.setRecursiveSelection(oProperty);
-		}
+	Viewer.prototype.setHotspotsEnabled = function(value) {
+		this.setProperty("hotspotsEnabled", value, true);
+		this._data.hotspots.enabled = value;
+		this._model.updateBindings();
 		return this;
 	};
 
-	Viewer.prototype.setToolbarTitle = function(value) {
-		this.setProperty("toolbarTitle", value);
-		this._toolbar.setTitle(value);
+	Viewer.prototype.setShowAllHotspots = function(value) {
+		this.setProperty("showAllHotspots", value, true);
+		this._data.hotspots.showAll = value;
+		this._model.updateBindings();
 		return this;
 	};
 
-	/**
-	 * It activates or deactivates full screen mode.
-	 * @param {boolean} value Parameter which specifies whether to activate or deactivate full screen mode.
-	 * @returns {this} <code>this</code> to allow method chaining.
-	 * @public
-	 */
-	Viewer.prototype.activateFullScreenMode = function(value) {
-		// It checks if the current document is in full screen mode
-		var isInFullScreenMode = function(document) {
-			return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement);
-		};
-
-		// Fullscreen toggle
-		if (value) {
-			if (!isInFullScreenMode(document)) {
-				if (!this._fullScreenHandler) {
-					var that = this;
-					this._fullScreenHandler = function(event) {
-						var isFullScreen = isInFullScreenMode(document);
-						if (!isFullScreen) {
-							that.removeStyleClass("sapVizKitViewerFullScreen");
-
-							document.removeEventListener("fullscreenchange", that._fullScreenHandler);
-							document.removeEventListener("mozfullscreenchange", that._fullScreenHandler);
-							document.removeEventListener("webkitfullscreenchange", that._fullScreenHandler);
-							document.removeEventListener("MSFullscreenChange", that._fullScreenHandler);
-						}
-
-						that.fireFullScreen({
-							isFullScreen: isFullScreen
-						});
-					};
-				}
-
-				// find the active viewer element to set to full screen
-				var viewerElements = document.getElementsByClassName("sapVizKitViewer");
-				// when viewport not loaded, activate full screen on the body element
-				var bodyElement = document.getElementsByTagName("body")[0];
-				if (viewerElements.length) {
-					var vpElement = this.getViewport().getDomRef();
-					for (var i = 0; i < viewerElements.length; ++i) {
-						if (viewerElements[i].contains(vpElement)) {
-							bodyElement = viewerElements[i];
-							break;
-						}
-					}
-				} else {
-					return this;
-				}
-				if (bodyElement.requestFullScreen) {
-					document.addEventListener("fullscreenchange", this._fullScreenHandler);
-					bodyElement.requestFullScreen();
-				} else if (bodyElement.webkitRequestFullScreen) {
-					document.addEventListener("webkitfullscreenchange", this._fullScreenHandler);
-					bodyElement.webkitRequestFullScreen();
-				} else if (bodyElement.mozRequestFullScreen) {
-					document.addEventListener("mozfullscreenchange", this._fullScreenHandler);
-					bodyElement.mozRequestFullScreen();
-				} else if (bodyElement.msRequestFullscreen) {
-					document.addEventListener("MSFullscreenChange", this._fullScreenHandler);
-					bodyElement.msRequestFullscreen();
-				}
-			}
-
-			this.addStyleClass("sapVizKitViewerFullScreen");
-		} else {
-			if (isInFullScreenMode(document)) {
-				if (document.cancelFullScreen) {
-					document.cancelFullScreen();
-				} else if (document.webkitCancelFullScreen) {
-					document.webkitCancelFullScreen();
-				} else if (document.mozCancelFullScreen) {
-					document.mozCancelFullScreen();
-				} else if (document.msExitFullscreen) {
-					document.msExitFullscreen();
-				}
-			}
-
-			this.removeStyleClass("sapVizKitViewerFullScreen");
-		}
-
+	Viewer.prototype._setHotspotColor = function(colorABGR, colorCSS) {
+		this.setProperty("hotspotColorABGR", colorABGR, true);
+		this.setProperty("hotspotColor", colorCSS, true);
+		this._data.hotspots.colorABGR = colorABGR;
+		this._data.hotspots.color = colorCSS;
+		this._model.updateBindings();
 		return this;
 	};
 
-	Viewer.prototype.getShowAllHotspots = function() {
-		var vp = this.getViewport().getImplementation();
-		return vp ? vp.getShowAllHotspots() : this.getProperty("showAllHotspots");
+	Viewer.prototype.setHotspotColorABGR = function(colorABGR) {
+		return this._setHotspotColor(colorABGR, colorToCSSColor(abgrToColor(colorABGR)));
 	};
 
-	Viewer.prototype.setShowAllHotspots = function(value) {
-		this.setProperty("showAllHotspots", value, true);
-		var vp = this.getViewport().getImplementation();
-		if (vp) {
-			vp.setShowAllHotspots(value);
-		}
-		return this;
+	Viewer.prototype.setHotspotColor = function(colorCSS) {
+		return this._setHotspotColor(colorToABGR(cssColorToColor(colorCSS)), colorCSS);
 	};
 
-	Viewer.prototype.getHotspotColorABGR = function() {
-		var vp = this.getViewport().getImplementation();
-		return vp ? vp.getHotspotColorABGR() : this.getProperty("hotspotColorABGR");
+	Viewer.prototype.setShouldTrackVisibilityChanges = function(value) {
+		this.setProperty("shouldTrackVisibilityChanges", value, true);
+		this._data.shouldTrackVisibilityChanges = value;
+		this._model.updateBindings();
+		return this;
 	};
 
-	Viewer.prototype.setHotspotColorABGR = function(value) {
-		this.setProperty("hotspotColorABGR", value, true);
-		this.setProperty("hotspotColor", colorToCSSColor(abgrToColor(value)), true);
-		var vp = this.getViewport().getImplementation();
-		if (vp) {
-			vp.setHotspotColorABGR(value);
-		}
+	Viewer.prototype.setRecursiveSelection = function(value) {
+		this.setProperty("recursiveSelection", value, true);
+		this._data.recursiveSelection = value;
+		this._model.updateBindings();
 		return this;
 	};
 
-	Viewer.prototype.getHotspotColor = function() {
-		var vp = this.getViewport().getImplementation();
-		return vp ? vp.getHotspotColor() : this.getProperty("hotspotColor");
+	Viewer.prototype.setEnableNotifications = function(oProperty) {
+		this.setProperty("enableNotifications", oProperty, true);
+		this._messagePopover.setVisible(false);
+		this._updateLayout();
+		return this;
 	};
 
-	Viewer.prototype.setHotspotColor = function(value) {
-		this.setProperty("hotspotColor", value, true);
-		this.setProperty("hotspotColorABGR", colorToABGR(cssColorToColor(value)), true);
-		var vp = this.getViewport().getImplementation();
-		if (vp) {
-			vp.setHotspotColor(value);
+	/**
+	 * It activates or deactivates full screen mode.
+	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @public
+	 */
+	Viewer.prototype.activateFullScreenMode = function() {
+		const viewerDomRef = this.getDomRef();
+		if (document.fullscreenElement === viewerDomRef) {
+			document.exitFullscreen();
+		} else {
+			viewerDomRef.requestFullscreen();
 		}
+
 		return this;
 	};
 
@@ -1020,61 +1222,34 @@ sap.ui.define([
 		}
 	};
 
-	Viewer.prototype._updateLayout = function() {
-		if (this._sceneTree) {
-			if (this.getShowSceneTree() && this.getEnableSceneTree()) {
-				this._sceneTree.setVisible(true);
-				if (this._splitter.indexOfContentArea(this._sceneTree) < 0) {
-					this._splitter.insertContentArea(this._sceneTree, 0);
+	Viewer.prototype._setSplitterContent = function(control, visible, rightSide) {
+		if (control) {
+			control.setVisible(visible);
+			if (visible) {
+				if (this._splitter.indexOfContentArea(control) < 0) {
+					this._splitter.insertContentArea(control, rightSide ? this._splitter.getContentAreas().length : 0);
 				}
-			} else {
-				if (this._splitter.indexOfContentArea(this._sceneTree) >= 0) {
-					this._splitter.removeContentArea(this._sceneTree);
-				}
-				this._sceneTree.setVisible(false);
+			} else if (this._splitter.indexOfContentArea(control) >= 0) {
+				this._splitter.removeContentArea(control);
 			}
 		}
+	};
 
-		if (this._stepNavigation) {
-			this._stepNavigation.setVisible(this.getShowStepNavigation() && this.getEnableStepNavigation());
-		}
-
-		if (this._messagePopover) {
-			this._messagePopover.setVisible(this.getEnableNotifications() && this._messagePopover.getAggregation("_messagePopover").getItems().length > 0);
-		}
-
-		if (this._toolbar) {
-			this._toolbar.refresh();
-		}
+	Viewer.prototype._updateLayout = function() {
+		const data = this._data;
+		this._setSplitterContent(this._sceneTree, data.sceneTree.visible && data.sceneTree.enabled);
+		this._setSplitterContent(this._layersPanel, data.layersPanel.visible && data.layersPanel.enabled);
+		this._setSplitterContent(this._elementsPanel, data.elementsPanel.visible && data.elementsPanel.enabled, true);
+		this._setSplitterContent(this._pageGallery, data.pageGallery.visible && data.pageGallery.enabled);
 
-		if (this.getEnableMiniMap()) {
-			this._viewport.getImplementation().getMiniMap()[this.getShowMiniMap() ? "open" : "close"]();
-		}
-	};
+		this._messagePopover?.setVisible(this.getEnableNotifications() && this._messagePopover.getAggregation("_messagePopover").getItems().length > 0);
 
-	Viewer.prototype._instantiateSceneTree = function() {
-		if (!this._sceneTree) {
-			this._sceneTree = new SceneTree({
-				layoutData: new SplitterLayoutData({
-					size: "320px",
-					minSize: 200
-				}),
-				viewStateManager: this._viewStateManager,
-				contentConnector: this._contentConnector
-			});
+		if (data.miniMap.supported && this._viewport?.getImplementation()?.getMetadata().getName() === "sap.ui.vk.svg.Viewport") {
+			this._viewport.getImplementation().getMiniMap()[data.miniMap.visible && data.miniMap.enabled ? "open" : "close"]();
 		}
-		return this;
 	};
 
 	Viewer.prototype._instantiateStepNavigation = function() {
-		if (this._stepNavigation) {
-			this._layout.removeItem(this._stepNavigation);
-			this._viewport.removeContent(this._stepNavigation);
-			this._splitter.detachResize(this._handleSplitterResize, this);
-			this._stepNavigation.destroy();
-			this._stepNavigation = null;
-		}
-
 		var className = this._mainScene.getMetadata().getName();
 
 		/**
@@ -1083,6 +1258,7 @@ sap.ui.define([
 		 */
 		if (className === "sap.ui.vk.dvl.Scene") {
 			this._stepNavigation = new StepNavigation({
+				visible: "{_internal>/stepNavigation/visible}",
 				showThumbnails: this.getShowStepNavigationThumbnails(),
 				contentConnector: this._contentConnector
 			});
@@ -1091,41 +1267,29 @@ sap.ui.define([
 
 		if (this._stepNavigation == null && (className === "sap.ui.vk.threejs.Scene" || className === "sap.ui.vk.svg.Scene")) {
 			this._stepNavigation = new ViewGallery({
+				visible: "{_internal>/stepNavigation/visible}",
 				host: this.getViewport(),
 				contentConnector: this._contentConnector,
-				viewManager: this._viewManager
+				viewManager: this._viewManager,
+				animationPlayer: this._animationPlayer
 			});
 			if (!this.getOverlayStepNavigation()) {
 				this._layout.insertItem(this._stepNavigation, 3);
 			} else {
 				this._stepNavigation.addStyleClass("sapVizKitViewGallery");
 				this._viewport.addContent(this._stepNavigation);
-				this._splitter.attachResize(this._handleSplitterResize, this);
 			}
-			this._stepNavigation.setAnimationPlayer(this._animationPlayer);
 		}
 
 		return this;
 	};
 
-	Viewer.prototype._handleSplitterResize = function() {
-		this._stepNavigation.resizeToolbarSpacer();
-	};
-
 	Viewer.prototype._showViewport = function() {
-		var vp = this.getViewport().getImplementation();
-		if (vp) {
-			vp.setHotspotColor(this.getProperty("hotspotColor"));
-			vp.setHotspotColorABGR(this.getProperty("hotspotColorABGR"));
-			vp.setShowAllHotspots(this.getProperty("showAllHotspots"));
-		}
-
-		if (this._nativeViewport) {
-			this._nativeViewport.setVisible(false);
-		}
+		const viewport = this.getViewport();
+		this._nativeViewport?.setVisible(false);
 		this._stackedViewport.removeAllContent();
-		this._stackedViewport.addContent(this._viewport);
-		this._viewport.setVisible(true);
+		this._stackedViewport.addContent(viewport);
+		viewport.setVisible(true);
 
 		return this;
 	};
@@ -1138,9 +1302,7 @@ sap.ui.define([
 			});
 		}
 
-		if (this._viewport) {
-			this._viewport.setVisible(false);
-		}
+		this._viewport?.setVisible(false);
 		this._stackedViewport.removeAllContent();
 		this._stackedViewport.addContent(this._nativeViewport);
 		this._nativeViewport.setVisible(true);
@@ -1312,12 +1474,6 @@ sap.ui.define([
 		return this;
 	};
 
-	Viewer.prototype._onViewportViewActivated = function(event) {
-		// If it's 3D content, we mark the scene tree as 'usable'.
-		// In case of 2D, the scene tree should not be enabled.
-		this._componentsState.sceneTree.shouldBeEnabled = event.getParameter("type") === "3D";
-	};
-
 	Viewer.prototype._removeProgressIndicator = function() {
 		this._progressIndicator.setVisible(false);
 		this._progressIndicator.setDisplayValue("");
@@ -1328,7 +1484,7 @@ sap.ui.define([
 	Viewer.prototype._handleContentReplaced = function(event) {
 		var content = event.getParameter("newContent");
 
-		if (content instanceof Scene || content instanceof HTMLImageElement || content instanceof HTMLObjectElement) {
+		if (content instanceof Scene || content instanceof HTMLImageElement || content instanceof HTMLObjectElement || content?.isA?.("sap.ui.vk.pdf.Document")) {
 			this._showViewport();
 
 			// each time we load a 3D mode, we have to update the panning ratio of the redline control
@@ -1351,7 +1507,7 @@ sap.ui.define([
 
 	Viewer.prototype._handleContentChangesStarted = function(event) {
 		this.setBusy(true);
-		if (this._componentsState.progressIndicator.defaultEnable) {
+		if (this.getEnableProgressIndicator()) {
 			this._progressIndicator.setPercentValue(0.0);
 			this._progressIndicator.setVisible(true);
 			this._progressIndicator.rerender();
@@ -1363,6 +1519,13 @@ sap.ui.define([
 		this.setBusy(false);
 		var content = event.getParameter("content");
 		if (content) {
+			if (this._pageGallery) {
+				const viewportImplementation = this._viewport.getImplementation();
+				if (viewportImplementation?.getMetadata().getName() === "sap.ui.vk.pdf.Viewport") {
+					viewportImplementation.bindProperty("currentPageIndex", "_internal>/pageGallery/currentPageIndex");
+				}
+			}
+
 			this.fireSceneLoadingSucceeded({
 				scene: content
 			});