Fix safari drag-n-drop; manually resume context on safari

src/Dissolve.vue

@@ -1,8 +1,6 @@
 <template>
   <div id="app-area">
     <Menu />
-    <button v-if="!started" v-on:click="start">Start</button>
-
     <div v-if="started" id="soundscapes">
       <SoundscapeComp
         v-for="(soundscape, index) in soundscapes"
@@ -42,12 +40,17 @@ export default class Dissolve extends Vue {
   }
   mounted(): void {
     this.context = setup();
-
+    console.log(this.context);
     DemoScene.forEach((scapeData) => {
       const scape = deserializeSoundscape(scapeData);
       this.addSoundscape(scape);
     });
     this.started = true;
+    document.addEventListener("touchstart", this.resumeContext);
+  }
+
+  resumeContext(): void {
+    this.context.resume();
   }
 
   clear(): void {
@@ -93,14 +96,14 @@ body {
   text-align: center;
   color: #ddd;
   background: #111;
-  height: 100%;
+  height: max-content;
   width: 100%;
 }
 
 #app-area {
   display: flex;
   flex-direction: row;
-  height: 500px;
+  height: 100%;
   width: 100%;
 }
 

src/components/Menu.vue

@@ -1,16 +1,22 @@
 <template>
   <div id="menu">
-    <div class="list-label">Sounds</div>
-    <div class="list">
-      <draggable v-for="source in presetSources" :key="source" :node="source" />
-    </div>
-    <div class="list-label">Filters</div>
-    <div class="list">
-      <draggable v-for="filter in presetFilters" :key="filter" :node="filter" />
-    </div>
-    <div class="list-label">Presets</div>
-    <div class="list">
-      <button v-on:click="$emit('demo')">Demo</button>
+    <div id="menu-contents">
+      <div class="list-label">Sounds</div>
+      <div class="list">
+        <draggable
+          v-for="source in presetSources"
+          :key="source"
+          :node="source"
+        />
+      </div>
+      <div class="list-label">Filters</div>
+      <div class="list">
+        <draggable
+          v-for="filter in presetFilters"
+          :key="filter"
+          :node="filter"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -33,7 +39,6 @@ export default class Menu extends Vue {
 
 <style scoped>
 #menu {
-  background: gray;
   width: 100%;
   height: 100%;
   display: flex;
@@ -41,6 +46,11 @@ export default class Menu extends Vue {
   justify-content: flex-start;
 }
 
+#menu-contents {
+  position: fixed;
+  top: 0;
+}
+
 .list-label {
   font-size: 36pt;
 }

src/main.ts

@@ -10,7 +10,6 @@ import {
 } from "./serialize";
 import { IntervalSource } from "./sources/IntervalSource";
 import { SoundSet } from "./sources/Source";
-import { polyfill } from "mobile-drag-drop";
 
 createApp(Dissolve).mount("#app");
 polyfill();
@@ -22,3 +21,28 @@ polyfill();
 (window as any).deserializeNode = deserializeNode;
 (window as any).serializeSoundscape = serializeSoundscape;
 (window as any).deserializeSoundscape = deserializeSoundscape;
+
+import { polyfill } from "mobile-drag-drop";
+import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
+
+const ua = window.navigator.userAgent.toLowerCase();
+const isiPad =
+  ua.indexOf("ipad") > -1 ||
+  (ua.indexOf("macintosh") > -1 && "ontouchend" in document);
+
+const usePolyfill = polyfill({
+  forceApply: isiPad, // force apply for ipad
+  dragImageTranslateOverride:
+    scrollBehaviourDragImageTranslateOverride || isiPad,
+});
+
+if (usePolyfill) {
+  document.addEventListener("dragenter", (event) => event.preventDefault());
+  window.addEventListener(
+    "touchmove",
+    () => {
+      /** */
+    },
+    { passive: false }
+  );
+}