updated inputitem

diff --git a/crash.log b/crash.log
index cfecd62d3087f65cfa6c17da356544fa102cc221..787cc3ac2a287159466d62feeefa27ee19f7b9f8 100644 (file)
--- a/crash.log
+++ b/crash.log
@@ -2,3 +2,42 @@ PID 335844 received SIGSEGV for address: 0xc
 /home/enrique/Developer/electron-app/node_modules/segfault-handler/build/Release/segfault-handler.node(+0x37a5)[0x7f1c071387a5]
 /lib/x86_64-linux-gnu/libpthread.so.0(+0x153c0)[0x7f1c10ffa3c0]
 /home/enrique/Developer/electron-app/node_modules/electron/dist/electron dist_electron(+0x72d9550)[0x55ccd61fe550]
+PID 60257 received SIGSEGV for address: 0x7fa04ceffff0
+0   segfault-handler.node               0x00000001131c6e60 _ZL16segfault_handleriP9__siginfoPv + 304
+1   libsystem_platform.dylib            0x00007fff2063fd7d _sigtramp + 29
+2   libc++abi.dylib                     0x00007fff205bf4ee _ZN10__cxxabiv112_GLOBAL__N_110construct_Ev + 0
+3   naudiodon.node                      0x000000011318a8c1 _ZN10streampunk9PaContext12readPaBufferEPKvjd + 75
+4   naudiodon.node                      0x000000011318a72e _ZN10streampunk10PaCallbackEPKvPvmPK24PaStreamCallbackTimeInfomS2_ + 98
+5   libportaudio.dylib                  0x00000001131b1bdd AdaptingInputOnlyProcess + 765
+6   libportaudio.dylib                  0x00000001131b0962 PaUtil_EndBufferProcessing + 514
+7   libportaudio.dylib                  0x00000001131b6c74 AudioIOProc + 1988
+8   CoreAudio                           0x0000000120d69e0f AUGenericOutputFactory + 8547
+9   CoreAudio                           0x00007fff21f870bb ___ZN19HALC_ProxyIOContextC2Ejj_block_invoke + 6591
+PID 60239 received SIGSEGV for address: 0x7fa80def9000
+0   segfault-handler.node               0x0000000111cf2e60 _ZL16segfault_handleriP9__siginfoPv + 304
+1   libsystem_platform.dylib            0x00007fff2063fd7d _sigtramp + 29
+2   ???                                 0x0000ffff00001fa0 0x0 + 281470681751456
+3   naudiodon.node                      0x0000000111cb68c1 _ZN10streampunk9PaContext12readPaBufferEPKvjd + 75
+4   naudiodon.node                      0x0000000111cb672e _ZN10streampunk10PaCallbackEPKvPvmPK24PaStreamCallbackTimeInfomS2_ + 98
+5   libportaudio.dylib                  0x0000000111cddbdd AdaptingInputOnlyProcess + 765
+6   libportaudio.dylib                  0x0000000111cdc962 PaUtil_EndBufferProcessing + 514
+7   libportaudio.dylib                  0x0000000111ce2c74 AudioIOProc + 1988
+8   CoreAudio                           0x0000000120fa7e0f AUGenericOutputFactory + 8547
+9   CoreAudio                           0x00007fff21f870bb ___ZN19HALC_ProxyIOContextC2Ejj_block_invoke + 6591
+10  CoreAudio                           0x00007fff22129f2a _ZN13HALB_IOThread5EntryEPv + 72
+11  libsystem_pthread.dylib             0x00007fff205fb950 _pthread_start + 224
+12  libsystem_pthread.dylib             0x00007fff205f747b thread_start + 15
+PID 60328 received SIGSEGV for address: 0x7f900fab4000
+0   segfault-handler.node               0x0000000116724e60 _ZL16segfault_handleriP9__siginfoPv + 304
+1   libsystem_platform.dylib            0x00007fff2063fd7d _sigtramp + 29
+2   libc++abi.dylib                     0x00007fff205bf4ee _ZN10__cxxabiv112_GLOBAL__N_110construct_Ev + 0
+3   naudiodon.node                      0x00000001166e88c1 _ZN10streampunk9PaContext12readPaBufferEPKvjd + 75
+4   naudiodon.node                      0x00000001166e872e _ZN10streampunk10PaCallbackEPKvPvmPK24PaStreamCallbackTimeInfomS2_ + 98
+5   libportaudio.dylib                  0x000000011670fbdd AdaptingInputOnlyProcess + 765
+6   libportaudio.dylib                  0x000000011670e962 PaUtil_EndBufferProcessing + 514
+7   libportaudio.dylib                  0x0000000116714c74 AudioIOProc + 1988
+8   CoreAudio                           0x000000011e8aee0f AUGenericOutputFactory + 8547
+9   CoreAudio                           0x00007fff21f870bb ___ZN19HALC_ProxyIOContextC2Ejj_block_invoke + 6591
+10  CoreAudio                           0x00007fff22129f2a _ZN13HALB_IOThread5EntryEPv + 72
+11  libsystem_pthread.dylib             0x00007fff205fb950 _pthread_start + 224
+12  libsystem_pthread.dylib             0x00007fff205f747b thread_start + 15

diff --git a/src/components/drag.ts b/src/components/drag.ts
deleted file mode 100644 (file)
index 7e91b84..0000000
--- a/src/components/drag.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-
-// When user clicks and holds inputItem.
-function onMouseDown (e: any) {
-    window.addEventListener('mousemove', onMouseMove, true);
-}
-
-// When user drags inputItem.
-function onMouseMove (e: any) {
-
-    const element = document.getElementById('inputItem')
-
-    if (element) {
-
-        const inputItemRect = element.getBoundingClientRect()
-        inputItemX.value = inputItemRect.left + e.movementX
-        inputItemY.value = inputItemRect.top + e.movementY
-
-    }
-    
-}
-
-// When user lets go of inputItem.
-function onMouseUp (e: any) {
-
-}
-

diff --git a/src/components/helpers.ts b/src/components/helpers.ts
new file mode 100644 (file)
index 0000000..022acc5
--- /dev/null
+++ b/src/components/helpers.ts
@@ -0,0 +1,29 @@
+
+// Update xShort or yShort value.
+export function calcSideProximity (inputItemX: number, winW: number) {
+    let short = winW - inputItemX
+
+    if (short > winW / 2) {
+        short = inputItemX
+    }
+
+    return short
+}
+
+
+// Update inputItemX or inputItemY value.
+export function calcPosition (inputItemPosition: number, percent: number, 
+    short: number, win: number) {
+
+    // Is it close to the right/left side?
+    if (percent > 0.85) { 
+        inputItemPosition = win - short
+    }
+
+    // Is it not close to a side?
+    if (percent < 0.85 && percent > 0.15) {
+        inputItemPosition = inputItemPosition / win
+    }
+
+    return inputItemPosition
+}
\ No newline at end of file

diff --git a/src/components/inputItem.vue b/src/components/inputItem.vue
index 4148df2eec2cc9b12aaeb545e698086cfd2a4857..6f10ab2fb9857b2fc56ca74287e64314f4116635 100644 (file)
--- a/src/components/inputItem.vue
+++ b/src/components/inputItem.vue
@@ -8,43 +8,34 @@
 <script lang="ts">
 
 import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+import { calcSideProximity, calcPosition } from "./helpers"
 
 export default defineComponent({
   name: "InputItem",
 
   setup() {
 
+    // Cords of inputItem.
     let inputItemX = ref(0)
     let inputItemY = ref(0)
 
-    let xShort: object = {
-      distance: Number,
-      side: String
-    }
-
-    let percentX: number;
-    let percentY: number;
-
-    // Draggable on mousedown.
-    const mouseDown = (e: any) => {
-       window.addEventListener('mousemove', divMove, true);
-    }
+    // Position of inputItem on terms of percentage of window.
+    let percentX: number
+    let percentY: number
 
-    // Update the positional refs.
-    const mouseUp = (e: any) => {
-      window.removeEventListener('mousemove', divMove, true);
+    // How close inputItem is to closest X or Y side.
+    let xShort: number
+    let yShort: number
 
+    //---Event Handlers-----------------------------------------------
 
-
-      const winW = window.innerWidth
-      const winH = window.innerHeight
-      console.log(`Window dimensions: W${winW} H${winH}`)
-      
+    // Add an event listener for dragging.
+    const onMouseDown = (e: any) => {
+      window.addEventListener('mousemove', onMouseMove, true);
     }
 
-    // Called on mousemove event. Updates the inputItem cords when user is
-    // dragging it.
-    const divMove = (e: any) => {
+    // Update the position of inputItem on mouse dragging.
+    const onMouseMove = (e: any) => {
       const element = document.getElementById('inputItem')
 
       if (element) {
@@ -54,49 +45,64 @@ export default defineComponent({
         inputItemY.value = inputItemRect.top + e.movementY
 
       }
+        
+    }
+
+    // Update position references when user is done moving inputItem.
+    const onMouseUp = (e: any) => {
+      window.removeEventListener('mousemove');
 
+      const winW = window.innerWidth
+      const winH = window.innerHeight
+      
+      xShort = calcSideProximity(inputItemX.value, winW)
+      yShort = calcSideProximity(inputItemX.value, winW)
+
+      percentX = inputItemX.value / winW
+      percentY = inputItemY.value / winH
+
+      console.log(`Pos refs updated: \n
+          percentX: ${percentX}, percentY: ${percentY} \n
+          xShort: ${xShort}, yShort: ${yShort}`
+      )
     }
 
-    // Adjust position of inputItem on window resize.
-    // If inputItem is within 10% of corner, keep the distances from that
-    // corner fixed, else resize relative to percentages.
-    const handleResize = (e: any) => {
-
-      // Adjust X:
-      // Is X close to a vertical side?
-      // If so: position fixed
-      if (inputItemX.onSide) {
-
-        if (inputItemX.rightSide) {
-          inputItemX.value = window.innerWidth - xShort
-        } else {
-          inputItemX.value = xShort
-        }
-
-      // Else: position relative
-      } else {
-        inputItemX.value = window.innerWidth * percentX
-      }
+    // Update position of inputItem on windowResize.
+    const onWindowResize = (e: any) => {
+      const winW = window.innerWidth
+      const winH = window.innerHeight
 
-    // Initialize InputPosition.
-    inputItemX.value = 300
-    inputItemY.value = 300
-    percentX = 0.5
-    percentY = 0.5
+      inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
+      inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
 
-    onMounted(() => {
+    }
+
+    //---------------------------------------------------------------
 
+    onMounted(() => {
       const element = document.getElementById('inputItem')
 
       if (element) {
-        element.addEventListener('mousedown', mouseDown, false);
+        element.addEventListener('mousedown', onMouseDown, false);
       }
 
-      window.addEventListener('mouseup', mouseUp, false);
-      window.addEventListener('resize', handleResize, false)
+      window.addEventListener("mouseup", onMouseUp, false)
 
+      // Initialize the positional references.
+      percentX = inputItemX.value / window.innerWidth
+      percentY = inputItemY.value / window.innerHeight
+
+      xShort = calcSideProximity(inputItemX.value, window.innerWidth)
+      yShort = calcSideProximity(inputItemX.value, window.innerHeight)
+
+      // Then, we can listen for window resize.
+      window.addEventListener('resize', onWindowResize, false)
     });
 
+    // Initialize the coordinants.
+    inputItemX.value = 200
+    inputItemY.value = 200
+
     return {
       inputItemX,
       inputItemY

diff --git a/src/components/resize.ts b/src/components/resize.ts
deleted file mode 100644 (file)
index d579be6..0000000
--- a/src/components/resize.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-// Update inputItem position on window resize.
-function handleWindowResize (e: any) {
-
-    
-
-}
-

diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index 1c94af6062d5a7ee302b0825d0a1a9cd7960eb7a..e9499b989e33ef8c21003905b3133cad60470ddc 100644 (file)
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -1,8 +1,8 @@
 <template>
 
     <TextAudioInput />
-    <!-- <InputItem /> -->
-
+<!--     <InputItem />
+ -->
     <!-- List of message bubbles. -->
     <div id="messenger">
       <MessageItem v-for="message in messages" :message="message" :key="message.id"/>