From 5ded6e1c93feef0ed5e19a013153ef7f19621b39 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 2 Aug 2024 16:52:00 +0200
Subject: [PATCH 1/3] Fix hotspots area dialog when no image is selected

REDMINE-20673
---
 .../editor/EditAreaDialogView/DraggableEditorView.js | 12 +++++++-----
 .../DraggableEditorView.module.css                   |  5 +++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
index c9ed3fd21..9aefe9e46 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
@@ -40,8 +40,8 @@ export const DraggableEditorView = Marionette.View.extend({
   render() {
     ReactDOM.render(
       <DraggableEditor
-        imageSrc={this.options.file.getBackgroundPositioningImageUrl()}
-        portrait={this.options.file.get('width') < this.options.file.get('height')}
+        imageSrc={this.options.file?.getBackgroundPositioningImageUrl()}
+        portrait={this.options.file && this.options.file.get('width') < this.options.file.get('height')}
         indicatorColor={paletteColor(this.model.get(this.getPropertyName('color')) || this.model.get('color'))}
         initialMode={this.model.get(this.getPropertyName('mode'))}
         initialPoints={this.model.get(this.getPropertyName('outline'))}
@@ -135,9 +135,11 @@ function DraggableEditor({
       </div>
 
       <div className={styles.wrapper}>
-        <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
-             src={imageSrc}
-             alt={I18n.t(`${i18nPrefix}.hotspots_image`)} />
+        {imageSrc ?
+         <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
+              src={imageSrc}
+              alt={I18n.t(`${i18nPrefix}.hotspots_image`)} /> :
+         <div className={classNames(styles.image, styles.placeholderImage)} />}
         <div ref={ref}
              className={styles.overlay}
              onMouseMove={event => dispatch({type: MOUSE_MOVE, cursor: clientToPercent(event)})}>
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
index b91ca58c8..274995ba0 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
@@ -73,6 +73,11 @@
   margin-right: 6px;
 }
 
+.placeholderImage {
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
 .image {
   display: block;
   height: calc(100vh - 250px);

From 969da8007d1abaa7966bcd67496ac2114b5a5714 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 2 Aug 2024 16:56:44 +0200
Subject: [PATCH 2/3] Disable hotspots pan and zoom for new elements by default

REDMINE-20673
---
 .../package/src/contentElements/hotspots/editor/index.js    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
index 5f00d7d6b..0103cce09 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
@@ -50,7 +50,7 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.input('invertTooltips', CheckBoxInputView);
       this.input('enablePanZoom', SelectInputView, {
-        values: ['phonePlatform', 'always', 'never']
+        values: ['never', 'phonePlatform', 'always']
       });
       this.view(SeparatorView);
       this.input('enableFullscreen', CheckBoxInputView, {
@@ -60,10 +60,6 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.group('ContentElementPosition');
     });
-  },
-
-  defaultConfig: {
-    enablePanZoom: 'phonePlatform'
   }
 });
 

From 12851a2e55be3881fab26aaa310c7b97af99e631 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 2 Aug 2024 17:05:22 +0200
Subject: [PATCH 3/3] Move hotspot tooltips behind default navigation bar.

REDMINE-20673
---
 entry_types/scrolled/package/src/frontend/global.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/entry_types/scrolled/package/src/frontend/global.module.css b/entry_types/scrolled/package/src/frontend/global.module.css
index f47dba4dd..48c552d75 100644
--- a/entry_types/scrolled/package/src/frontend/global.module.css
+++ b/entry_types/scrolled/package/src/frontend/global.module.css
@@ -22,5 +22,5 @@
 
 :global [data-floating-ui-portal] {
   position: relative;
-  z-index: 30000;
+  z-index: 1000;
 }