updated inputitem
This commit is contained in:
Andrew Gundersen
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]
|
/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]
|
/lib/x86_64-linux-gnu/libpthread.so.0(+0x153c0)[0x7f1c10ffa3c0]
|
||||||
/home/enrique/Developer/electron-app/node_modules/electron/dist/electron dist_electron(+0x72d9550)[0x55ccd61fe550]
|
/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">
|
<script lang="ts">
|
||||||
|
|
||||||
import { defineComponent, onMounted, ref, onUnmounted } from "vue";
|
import { defineComponent, onMounted, ref, onUnmounted } from "vue";
|
||||||
|
import { calcSideProximity, calcPosition } from "./helpers"
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "InputItem",
|
name: "InputItem",
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
// Cords of inputItem.
|
||||||
let inputItemX = ref(0)
|
let inputItemX = ref(0)
|
||||||
let inputItemY = ref(0)
|
let inputItemY = ref(0)
|
||||||
|
|
||||||
let xShort: object = {
|
// Position of inputItem on terms of percentage of window.
|
||||||
distance: Number,
|
let percentX: number
|
||||||
side: String
|
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;
|
// Update the position of inputItem on mouse dragging.
|
||||||
let percentY: number;
|
const onMouseMove = (e: any) => {
|
||||||
|
|
||||||
// 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) => {
|
|
||||||
const element = document.getElementById('inputItem')
|
const element = document.getElementById('inputItem')
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
|
|
@ -57,46 +48,61 @@ export default defineComponent({
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust position of inputItem on window resize.
|
// Update position references when user is done moving inputItem.
|
||||||
// If inputItem is within 10% of corner, keep the distances from that
|
const onMouseUp = (e: any) => {
|
||||||
// corner fixed, else resize relative to percentages.
|
window.removeEventListener('mousemove');
|
||||||
const handleResize = (e: any) => {
|
|
||||||
|
|
||||||
// Adjust X:
|
const winW = window.innerWidth
|
||||||
// Is X close to a vertical side?
|
const winH = window.innerHeight
|
||||||
// If so: position fixed
|
|
||||||
if (inputItemX.onSide) {
|
|
||||||
|
|
||||||
if (inputItemX.rightSide) {
|
xShort = calcSideProximity(inputItemX.value, winW)
|
||||||
inputItemX.value = window.innerWidth - xShort
|
yShort = calcSideProximity(inputItemX.value, winW)
|
||||||
} else {
|
|
||||||
inputItemX.value = xShort
|
percentX = inputItemX.value / winW
|
||||||
|
percentY = inputItemY.value / winH
|
||||||
|
|
||||||
|
console.log(`Pos refs updated: \n
|
||||||
|
percentX: ${percentX}, percentY: ${percentY} \n
|
||||||
|
xShort: ${xShort}, yShort: ${yShort}`
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Else: position relative
|
// Update position of inputItem on windowResize.
|
||||||
} else {
|
const onWindowResize = (e: any) => {
|
||||||
inputItemX.value = window.innerWidth * percentX
|
const winW = window.innerWidth
|
||||||
|
const winH = window.innerHeight
|
||||||
|
|
||||||
|
inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
|
||||||
|
inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize InputPosition.
|
//---------------------------------------------------------------
|
||||||
inputItemX.value = 300
|
|
||||||
inputItemY.value = 300
|
|
||||||
percentX = 0.5
|
|
||||||
percentY = 0.5
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
const element = document.getElementById('inputItem')
|
const element = document.getElementById('inputItem')
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
element.addEventListener('mousedown', mouseDown, false);
|
element.addEventListener('mousedown', onMouseDown, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('mouseup', mouseUp, false);
|
window.addEventListener("mouseup", onMouseUp, false)
|
||||||
window.addEventListener('resize', handleResize, 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 {
|
return {
|
||||||
inputItemX,
|
inputItemX,
|
||||||
inputItemY
|
inputItemY
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
|
|
||||||
// Update inputItem position on window resize.
|
|
||||||
function handleWindowResize (e: any) {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<TextAudioInput />
|
<TextAudioInput />
|
||||||
<!-- <InputItem /> -->
|
<!-- <InputItem />
|
||||||
|
-->
|
||||||
<!-- List of message bubbles. -->
|
<!-- List of message bubbles. -->
|
||||||
<div id="messenger">
|
<div id="messenger">
|
||||||
<MessageItem v-for="message in messages" :message="message" :key="message.id"/>
|
<MessageItem v-for="message in messages" :message="message" :key="message.id"/>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue