updated inputitem

This commit is contained in:
Andrew Gundersen 2021-03-04 19:45:49 -06:00
commit 98dc03a77a
6 changed files with 128 additions and 88 deletions

View file

@ -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

View file

@ -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) {
}

29
src/components/helpers.ts Normal file
View file

@ -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
}

View file

@ -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
// Position of inputItem on terms of percentage of window.
let percentX: number
let percentY: number
// How close inputItem is to closest X or Y side.
let xShort: number
let yShort: number
//---Event Handlers-----------------------------------------------
// Add an event listener for dragging.
const onMouseDown = (e: any) => {
window.addEventListener('mousemove', onMouseMove, true);
}
let percentX: number;
let percentY: number;
// Draggable on mousedown.
const mouseDown = (e: any) => {
window.addEventListener('mousemove', divMove, true);
}
// Update the positional refs.
const mouseUp = (e: any) => {
window.removeEventListener('mousemove', divMove, true);
const winW = window.innerWidth
const winH = window.innerHeight
console.log(`Window dimensions: W${winW} H${winH}`)
}
// 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}`
)
}
// Update position of inputItem on windowResize.
const onWindowResize = (e: any) => {
const winW = window.innerWidth
const winH = window.innerHeight
inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
}
// 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
}
// Initialize InputPosition.
inputItemX.value = 300
inputItemY.value = 300
percentX = 0.5
percentY = 0.5
//---------------------------------------------------------------
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

View file

@ -1,8 +0,0 @@
// Update inputItem position on window resize.
function handleWindowResize (e: any) {
}

View file

@ -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"/>