From a3d53c6053b5beb815e93c8c909215381c44492c Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Fri, 23 Feb 2024 16:37:02 +0100
Subject: [PATCH 1/2] refactor: component base with built-in mask

---
 ui/src/core_components/embed/CoreIFrame.vue | 25 ++++-----------------
 ui/src/renderer/ComponentBase.vue           | 25 +++++++++++++++++++++
 2 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/renderer/ComponentBase.vue

diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
index 3c6a911cd..38a949af4 100644
--- a/ui/src/core_components/embed/CoreIFrame.vue
+++ b/ui/src/core_components/embed/CoreIFrame.vue
@@ -1,8 +1,7 @@
 <template>
-	<div ref="rootEl" class="CoreIFrame">
+	<ComponentBase ref="rootEl" class="CoreIFrame">
 		<iframe :src="fields.src.value" draggable="false" @load="handleLoad" />
-		<div class="mask" />
-	</div>
+	</ComponentBase>
 </template>
 
 <script lang="ts">
@@ -46,6 +45,8 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 
+import ComponentBase from "../../renderer/ComponentBase.vue";
+
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 
@@ -75,22 +76,4 @@ function handleLoad() {
 	margin: auto;
 	border: 1px solid var(--separatorColor);
 }
-
-.CoreIFrame .mask {
-	pointer-events: none;
-}
-
-.CoreIFrame.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0);
-}
-
-.CoreIFrame.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/renderer/ComponentBase.vue b/ui/src/renderer/ComponentBase.vue
new file mode 100644
index 000000000..d126e375c
--- /dev/null
+++ b/ui/src/renderer/ComponentBase.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="ComponentBase">
+		<slot />
+		<div class="mask" />
+	</div>
+</template>
+
+<style scoped>
+.ComponentBase .mask {
+	pointer-events: none;
+}
+
+.ComponentBase.beingEdited .mask {
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.ComponentBase.beingEdited.selected .mask {
+	pointer-events: none;
+}
+</style>

From eaa391cf31ba5b75612bc950b315474b9d4c1060 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Wed, 28 Feb 2024 11:27:45 +0100
Subject: [PATCH 2/2] chore: usage of mask + video player fix on firefox

---
 .../content/CoreVideoPlayer.vue               |  6 +++--
 .../core_components/embed/CoreGoogleMaps.vue  | 25 +++----------------
 ui/src/core_components/embed/CoreIFrame.vue   |  8 +++---
 ui/src/core_components/embed/CoreMapbox.vue   | 24 +++---------------
 ui/src/core_components/embed/CorePDF.vue      | 19 --------------
 ...ponentBase.vue => BaseMaskedComponent.vue} | 11 +++++---
 6 files changed, 23 insertions(+), 70 deletions(-)
 rename ui/src/renderer/{ComponentBase.vue => BaseMaskedComponent.vue} (54%)

diff --git a/ui/src/core_components/content/CoreVideoPlayer.vue b/ui/src/core_components/content/CoreVideoPlayer.vue
index 46fff7acb..de8a78cad 100644
--- a/ui/src/core_components/content/CoreVideoPlayer.vue
+++ b/ui/src/core_components/content/CoreVideoPlayer.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="CoreVideoPlayer">
+	<!-- Video player is intercepting events on Firefox, so we need to mask it. -->
+	<BaseMaskedComponent class="CoreVideoPlayer">
 		<video
 			:src="fields.src.value"
 			:controls="fields.controls.value === 'yes'"
@@ -7,7 +8,7 @@
 			:loop="fields.loop.value === 'yes'"
 			:muted="fields.muted.value === 'yes'"
 		></video>
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -92,6 +93,7 @@ export default {
 <script setup lang="ts">
 import { inject } from "vue";
 import injectionKeys from "../../injectionKeys";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/ui/src/core_components/embed/CoreGoogleMaps.vue b/ui/src/core_components/embed/CoreGoogleMaps.vue
index d876219a2..d4d241dcb 100644
--- a/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/ui/src/core_components/embed/CoreGoogleMaps.vue
@@ -1,8 +1,8 @@
 <template>
-	<div ref="rootEl" class="CoreGoogleMaps">
+	<!-- Masking is necessary because map can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreGoogleMaps">
 		<div ref="mapEl" class="map" />
-		<div class="mask" />
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -86,6 +86,7 @@ export default {
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
 import { Loader } from "@googlemaps/js-api-loader";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
@@ -199,7 +200,6 @@ watch(fields.mapId, initMap);
 @import "../../renderer/sharedStyles.css";
 
 .CoreGoogleMaps {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
@@ -211,21 +211,4 @@ watch(fields.mapId, initMap);
 	margin: auto;
 	border: 1px solid var(--separatorColor);
 }
-
-.CoreGoogleMaps .mask {
-	pointer-events: none;
-}
-
-.CoreGoogleMaps.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.CoreGoogleMaps.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
index 38a949af4..858c1f841 100644
--- a/ui/src/core_components/embed/CoreIFrame.vue
+++ b/ui/src/core_components/embed/CoreIFrame.vue
@@ -1,7 +1,8 @@
 <template>
-	<ComponentBase ref="rootEl" class="CoreIFrame">
+	<!-- Masking is necessary because iframes can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreIFrame">
 		<iframe :src="fields.src.value" draggable="false" @load="handleLoad" />
-	</ComponentBase>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -45,7 +46,7 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 
-import ComponentBase from "../../renderer/ComponentBase.vue";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -60,7 +61,6 @@ function handleLoad() {
 @import "../../renderer/sharedStyles.css";
 
 .CoreIFrame {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
diff --git a/ui/src/core_components/embed/CoreMapbox.vue b/ui/src/core_components/embed/CoreMapbox.vue
index ca39b4bd5..86edcb018 100644
--- a/ui/src/core_components/embed/CoreMapbox.vue
+++ b/ui/src/core_components/embed/CoreMapbox.vue
@@ -1,8 +1,8 @@
 <template>
-	<div ref="rootEl" class="CoreMapbox">
+	<!-- Masking is necessary because map can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreMapbox">
 		<div ref="mapEl" class="map" />
-		<div class="mask" />
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -83,6 +83,7 @@ import "mapbox-gl/dist/mapbox-gl.css";
 import { inject, ref, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
 import type * as mapboxgl from "mapbox-gl";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 const fields = inject(injectionKeys.evaluatedFields);
 const rootEl = ref(null);
 const mapEl = ref(null);
@@ -200,7 +201,6 @@ watch([mapEl, fields.accessToken], () => {
 
 <style scoped>
 .CoreMapbox {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
@@ -211,20 +211,4 @@ watch([mapEl, fields.accessToken], () => {
 	width: 100%;
 	height: 100%;
 }
-.CoreMapbox .mask {
-	pointer-events: none;
-}
-
-.CoreMapbox.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.CoreMapbox.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 2e6c43a41..8b436c07b 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -40,7 +40,6 @@
 				/>
 			</div>
 		</div>
-		<div class="mask" />
 	</div>
 </template>
 
@@ -380,22 +379,4 @@ watch(fields.page, () => {
 	width: fit-content;
 	margin: 0 auto;
 }
-
-.CorePDF .mask {
-	pointer-events: none;
-}
-
-.CorePDF.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0);
-}
-
-.CorePDF.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/renderer/ComponentBase.vue b/ui/src/renderer/BaseMaskedComponent.vue
similarity index 54%
rename from ui/src/renderer/ComponentBase.vue
rename to ui/src/renderer/BaseMaskedComponent.vue
index d126e375c..7a8a4978e 100644
--- a/ui/src/renderer/ComponentBase.vue
+++ b/ui/src/renderer/BaseMaskedComponent.vue
@@ -1,16 +1,19 @@
 <template>
-	<div class="ComponentBase">
+	<div class="BaseMaskedComponent">
 		<slot />
 		<div class="mask" />
 	</div>
 </template>
 
 <style scoped>
-.ComponentBase .mask {
+.BaseMaskedComponent {
+	position: relative;
+}
+.BaseMaskedComponent .mask {
 	pointer-events: none;
 }
 
-.ComponentBase.beingEdited .mask {
+.BaseMaskedComponent.beingEdited .mask {
 	pointer-events: auto;
 	position: absolute;
 	top: 0;
@@ -19,7 +22,7 @@
 	height: 100%;
 }
 
-.ComponentBase.beingEdited.selected .mask {
+.BaseMaskedComponent.beingEdited.selected .mask {
 	pointer-events: none;
 }
 </style>