updated inputitem
This commit is contained in:
parent
31e097b27f
commit
98dc03a77a
6 changed files with 128 additions and 88 deletions
39
crash.log
39
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
|
||||
|
|
|
|||
|
|
@ -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
29
src/components/helpers.ts
Normal 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
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
// Update inputItem position on window resize.
|
||||
function handleWindowResize (e: any) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue