Merge pull request #250 from raaymax/keeping_embeds_together

fix: pdf drag and drop issues
writer · Feb 19, 2024 · 6d4728e · 6d4728e
2 parents d2ae064 + 73109f6
commit 6d4728e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
@@ -19,9 +19,9 @@ import CoreSeparator from "../core_components/CoreSeparator.vue";
 import CoreTab from "../core_components/CoreTab.vue";
 import CoreTabs from "../core_components/CoreTabs.vue";
 import CoreImage from "../core_components/CoreImage.vue";
-import CorePDF from "../core_components/CorePDF.vue";
-import CoreIFrame from "../core_components/CoreIFrame.vue";
-import CoreGoogleMaps from "../core_components/embeds/CoreGoogleMaps.vue";
+import CorePDF from "../core_components/embed/CorePDF.vue";
+import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
+import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
 import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";

diff --git a/...core_components/embeds/CoreGoogleMaps.vue → .../core_components/embed/CoreGoogleMaps.vue b/...core_components/embeds/CoreGoogleMaps.vue → .../core_components/embed/CoreGoogleMaps.vue
@@ -204,7 +204,7 @@ watch(fields.mapId, initMap);
 }
 
 .CoreGoogleMaps.beingEdited .mask {
-  pointer-events: all;
+  pointer-events: auto;
   position: absolute;
   top: 0;
   left: 0;

diff --git a/ui/src/core_components/CoreIFrame.vue → ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/CoreIFrame.vue → ui/src/core_components/embed/CoreIFrame.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component to embed an external resource in an iframe.";
 
@@ -48,26 +48,30 @@ export default {
 
 <script setup lang="ts">
 import { Ref, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl:Ref<HTMLElement> = ref(null); 
 const fields = inject(injectionKeys.evaluatedFields);
 
-function handleLoad(ev) {
+function handleLoad() {
 	const event = new CustomEvent("ss-load");
 	rootEl.value.dispatchEvent(event);
 }
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreIFrame {
   position: relative;
   width: 100%;
   height: 80vh;
 }
 
+.CoreIFrame.beingEdited:not(.selected) iframe {
+    pointer-events: none;
+}
+
 .CoreIFrame  iframe {
   width: 100%;
   height: 100%;
@@ -81,7 +85,7 @@ function handleLoad(ev) {
 }
 
 .CoreIFrame.beingEdited .mask {
-  pointer-events: all;
+  pointer-events: auto;
   position: absolute;
   top: 0;
   left: 0;

diff --git a/ui/src/core_components/CorePDF.vue → ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/CorePDF.vue → ui/src/core_components/embed/CorePDF.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="CorePDF">
-		<object class="pdf" :data="fields.source.value" type="application/pdf">
+		<object class="pdf" :data="fields.source.value" :key="fields.source.value" type="application/pdf">
 			<p>
-				You don't have a PDF plugin, but you can
+				You're not authorised to embed in the browser or you don't have PDF plugin
 				<a :href="fields.source.value">download the PDF file. </a>
 			</p>
 		</object>
@@ -11,8 +11,8 @@
 </template>
 
 <script lang='ts'>
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component to embed a PDF document.";
@@ -36,18 +36,22 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 .CorePDF {
   position: relative;
   width: 100%;
   height: 80vh;
 }
 
+.CorePDF.beingEdited:not(.selected) object {
+	pointer-events: none;
+}
+
 .CorePDF .pdf {
   width: 100%;
   height: 100%;
@@ -61,7 +65,7 @@ const fields = inject(injectionKeys.evaluatedFields);
 }
 
 .CorePDF.beingEdited .mask {
-  pointer-events: all;
+  pointer-events: auto;
   position: absolute;
   top: 0;
   left: 0;