+
+
+
+
+
+
+
+
+
+
diff --git a/src/render/components/context.js b/src/render/components/context.js
deleted file mode 100644
index b6879ae..0000000
--- a/src/render/components/context.js
+++ /dev/null
@@ -1,38 +0,0 @@
-
-const Context =
-{
- props: ["modifier", "context", "avatar", "id"],
-
- setup(props) {
- const playback = Vue.ref(false);
-
- Vue.onMounted(() => {
- window.mainApi.on("playback", (id, status) => {
- if (id === props.id) {
- playback.value = status;
- }
- });
- });
-
- return { playback };
- },
-
- template: `
-
-
-
+
+
+ {{ text }}
+
+
+
+
+
+ {{ context }}
+
+
+
-
- ![]()
-
-
-
- {{ context }}
-
- `
-}
-
-export default Context;
diff --git a/src/render/components/control/draggify.js b/src/render/components/control/draggify.js
deleted file mode 100644
index f85b930..0000000
--- a/src/render/components/control/draggify.js
+++ /dev/null
@@ -1,198 +0,0 @@
-const saveLocation = "input_item_position";
-const defaultPosition = { x: 15, y: window.innerHeight - 300 };
-
-//---Dragabble Helper Funcs--------------------------------------
-
-// Calculate distance to nearest side.
-function calcSideProximity (elementX, elementLength, winW) {
-
- // Calc right short.
- let short = winW - elementX - elementLength;
-
- // See if it's left short.
- if (elementX + 20 < winW / 2) {
- short = elementX
- }
-
- return short
-}
-
-// Update elementX or elementY value on window resize
-function calcPosition (elementPosition, elementLength, percent, short, win) {
-
- // Is it close to the right/bottom side?
- if (percent > 0.75) {
- elementPosition = win - short - elementLength;
- }
-
- // Is it not close to a side?
- if (percent < 0.75 && percent > 0.25) {
- elementPosition = win * percent
- }
-
- return elementPosition
-}
-
-function draggify(elementId, margin) {
-
- let element;
-
- /* only compatible with elements having equal width and height */
- let elementLength;
-
- // Cords of inputItem.
- const elementX = Vue.ref();
- const elementY = Vue.ref();
-
- // Position of inputItem on terms of percentage of window.
- let percentX;
- let percentY;
-
- // How close inputItem is to closest X or Y side.
- let xShort;
- let yShort;
-
- // Keep track of window size;
- let winW = window.innerWidth;
- let winH = window.innerHeight;
-
- //---Reposition Anime-----------------------------------------------
-
- // Move element to target smoothly.
- const repositionAnime = (xChange, yChange) => {
- const xStep = xChange / 6000;
- const yStep = yChange / 6000;
-
- for (let i = 1; i <= 6000; i++) {
-
- setTimeout(() => {
- elementX.value += xStep;
- elementY.value += yStep;
- }, 16) // 60fps
-
- }
- }
-
- //---Event Handlers-----------------------------------------------
-
- // Update the position of inputItem on mouse dragging.
- const onMouseMove = (e) => {
- e.preventDefault();
-
- const inputItemRect = element.getBoundingClientRect();
- elementX.value = inputItemRect.left + e.movementX;
- elementY.value = inputItemRect.top + e.movementY;
- }
-
- // Add an event listener for dragging.
- const onMouseDown = (e) => {
- e.preventDefault();
- window.addEventListener('mousemove', onMouseMove);
- window.addEventListener('mouseup', onMouseUp);
- }
-
- // Update position references when user is done moving targetEl.
- const onMouseUp = (e) => {
- e.preventDefault();
-
- window.removeEventListener('mousemove', onMouseMove);
- window.removeEventListener('mouseup', onMouseUp);
-
- // See if and calculate reposition.
- let x = 0; // vector change
- let y = 0;
-
- if (elementX.value < 0) {
- x = (elementX.value - margin)*-1
- }
-
- if (elementX.value > winW - elementLength) {
- const b = winW - elementLength - margin;
- x = (elementX.value - b)*-1
- }
-
- // Reposition y
- if (elementY.value < 0) {
- y = (elementY.value - margin)*-1
- }
-
- if (elementY.value > winH - elementLength) {
- const d = winH - elementLength - margin;
- y = (elementY.value - d)*-1
- }
-
- // Reposition if needed.
- if (x !== 0 || y !== 0) repositionAnime(x, y);
-
- xShort = calcSideProximity(elementX.value, elementLength, winW);
- yShort = calcSideProximity(elementY.value, elementLength, winH);
-
- // Update percentages.
- percentX = elementX.value / winW;
- percentY = elementY.value / winH;
-
- // Save position.
- savePosition();
- }
-
- // Update position of targetEl on windowResize.
- const onWindowResize = (_e) => {
-
- // Update window dimensions.
- winW = window.innerWidth;
- winH = window.innerHeight;
-
- elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, winW);
- elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, winH);
-
- savePosition();
- }
-
- const savePosition = () => {
- window.localStorage.setItem(saveLocation, JSON.stringify({
- x: elementX.value,
- y: elementY.value
- }));
- }
-
- //---------------------------------------------------------------
-
- Vue.onMounted(() => {
-
- element = document.getElementById(elementId);
-
- elementLength = element.offsetWidth;
-
- // Initialize the positional references.
- percentX = elementX.value / window.innerWidth;
- percentY = elementY.value / window.innerHeight;
-
- xShort = calcSideProximity(elementX.value, elementLength, window.innerWidth);
- yShort = calcSideProximity(elementX.value, elementLength, window.innerHeight);
-
- // Then, we can listen for window resize (and mousedown).
- element.addEventListener("mousedown", onMouseDown);
- window.addEventListener('resize', onWindowResize)
- });
-
- // remove event listeners on component dismount.
- Vue.onUnmounted(() => {
- element.removeEventListener('mousedown', onMouseDown);
- window.removeEventListener('resize', onWindowResize)
- window.removeEventListener('mouseup', onMouseUp)
- window.removeEventListener('mousemove', onMouseMove);
- });
-
- // Try loading initPosition, otherwise set default values
- let initPosition;
- const rawData = window.localStorage.getItem("saveLocation")
- rawData ? initPosition = JSON.parse(rawData) : initPosition = defaultPosition;
-
- elementX.value = initPosition.x;
- elementY.value = initPosition.y;
-
- return { elementX, elementY };
-
-}
-
-export default draggify;
diff --git a/src/render/components/control/scroll.js b/src/render/components/control/scroll.js
deleted file mode 100644
index 4666ea1..0000000
--- a/src/render/components/control/scroll.js
+++ /dev/null
@@ -1,24 +0,0 @@
-let el;
-
-const initScroll = (elementId) => {
- el = document.getElementById(elementId);
- el.addEventListener('adjust-scroll', adjustScroll);
- window.addEventListener('resize', adjustScroll);
-}
-
-const isBottom = () => {
- if (el) {
- return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
- }
-}
-
-const adjustScroll = () => {
- if (el) {
- el.scrollTo({
- top: el.scrollHeight - el.clientHeight,
- behavior: 'smooth'
- });
- }
-}
-
-export default initScroll;
\ No newline at end of file
diff --git a/src/render/components/control/text.js b/src/render/components/control/text.js
deleted file mode 100644
index 626746f..0000000
--- a/src/render/components/control/text.js
+++ /dev/null
@@ -1,76 +0,0 @@
-const inputLength = 230;
-
-const metaKeys = [
- "Tab",
- "CapsLock",
- "Shift",
- "Control",
- "Alt",
- "Meta",
- " ",
- "ArrowLeft",
- "ArrowRight",
- "ArrowUp",
- "ArrowDown",
- "Enter",
- "Backspace",
- "Escape"
-];
-
-function useText(elementId, left, typing)
-{
- let el;
-
- const show = Vue.ref(false);
- const leftSide = Vue.ref(false);
-
- const calcSide = () => {
- window.innerWidth - left.value < inputLength ? leftSide.value = true : leftSide.value = false;
- }
-
- /* handle user typing */
- Vue.onMounted(() => {
-
- el = document.getElementById(elementId);
-
- window.addEventListener("keydown", (e) => {
-
- if (!show.value && !metaKeys.includes(e.key))
- {
- show.value = true;
- }
- else if (show.value && ((el.value.length === 1 && e.key === "Backspace") || e.key === "Escape"))
- {
- show.value = false;
- }
-
- if (e.key === "Enter" && el.value)
- {
- window.mainApi.send("message", {
- category: "text/plain",
- text: el.value,
- blob: null
- });
- show.value = false;
- }
- });
-
- });
-
- Vue.watch(left, calcSide);
-
- Vue.watch(show, (c, _p) => {
- if (c) {
- el.focus();
- } else {
- el.value = "";
- el.blur();
- }
- });
-
- calcSide();
-
- return { leftSide, show };
-}
-
-export default useText;
diff --git a/src/render/components/controllers/bubble.control.ts b/src/render/components/controllers/bubble.control.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/render/components/controllers/helpers.ts b/src/render/components/controllers/helpers.ts
new file mode 100644
index 0000000..23976a8
--- /dev/null
+++ b/src/render/components/controllers/helpers.ts
@@ -0,0 +1,102 @@
+import { ref } from "vue";
+import anime from "animejs";
+import { v4 as uuidv4 } from 'uuid';
+
+
+export function animateTextInput () {
+
+ const side = ref("right");
+
+ function show () {
+ const t1 = (side.value === "right") ? 50 : -70;
+ const t2 = (side.value === "right") ? 110 : -130;
+
+ anime({
+ targets: '#textInput',
+ opacity: [0, 1],
+ translateX: [t1, t2],
+ scale: [0.3, 1],
+ duration: 500,
+ easing: 'easeOutExpo',
+ })
+
+ }
+
+ function hide () {
+ const t = (side.value === "right") ? 50 : -80;
+
+ anime({
+ targets: '#textInput',
+ opacity: [1, 0],
+ translateX: t,
+ scale: 0.3,
+ duration: 500,
+ easing: 'easeOutExpo',
+ })
+
+ }
+
+ function switchSide () {
+ const t = (side.value === "right") ? -130 : 110;
+
+ anime({
+ targets: '#textInput',
+ translateX: t,
+ duration: 500,
+ easing: 'easeOutExpo',
+ })
+
+ }
+
+ return {
+ side,
+ show,
+ hide,
+ switchSide
+ };
+
+}
+
+export function animateAudioInput () {
+
+ function show () {
+ anime({
+ targets: '#recIcon',
+ opacity: [0, 0.75],
+ scale: [0.0, 1],
+ duration: 250,
+ easing: 'linear',
+ })
+ }
+
+ function hide () {
+ anime({
+ targets: '#recIcon',
+ opacity: [0.75, 0],
+ scale: [1, 0],
+ duration: 250,
+ easing: 'linear',
+ })
+ }
+
+ return {
+ show,
+ hide
+ };
+
+}
+
+
+export function newMessage ({
+ text=false,
+ audio=false,
+ context=false,
+ uid=uuidv4()
+}) {
+ return {
+ text: text,
+ audio: audio,
+ context: context,
+ uid: uid
+ };
+}
diff --git a/src/render/components/controllers/inputItem.control.audio.ts b/src/render/components/controllers/inputItem.control.audio.ts
new file mode 100644
index 0000000..facf30c
--- /dev/null
+++ b/src/render/components/controllers/inputItem.control.audio.ts
@@ -0,0 +1,77 @@
+import { onMounted, onUnmounted, ref, Ref } from "vue";
+import { postMessage } from "@/render/ipc";
+import { newMessage, animateAudioInput } from "./helpers";
+import { invokeReturnAudio, postAudioChunk } from "@/render/ipc";
+
+export default function useAudioInputController (typing: Ref) {
+
+ const recording = ref(false);
+ let mediaRecorder: MediaRecorder;
+
+ const { show, hide } = animateAudioInput();
+
+ // initialize audio
+ const conf = {audio: true, video: false}
+ navigator.mediaDevices.getUserMedia(conf).then((stream: MediaStream) => {
+
+ const options = {mimeType: 'audio/webm'};
+ mediaRecorder = new MediaRecorder(stream, options);
+
+ // post any mew audio to backend
+ mediaRecorder.addEventListener('dataavailable', (e: BlobEvent) => {
+ e.data.arrayBuffer().then((buff: ArrayBuffer) => {
+ postAudioChunk(buff);
+ });
+ });
+
+ // get audio and post new message to backend
+ mediaRecorder.addEventListener('stop', (_e: Event) => {
+ invokeReturnAudio().then((audio: ArrayBuffer[] | Error) => {
+ console.log(audio);
+ // postMessage(newMessage({audio: audio}));
+ });
+ });
+
+ });
+
+ // start recording on space bar
+ const record = () => {
+ console.log("INPT:Capturing audio...")
+ mediaRecorder.start();
+ recording.value = true;
+ show()
+ }
+
+ // stop recording and send on release
+ const stop = () => {
+ console.log("INPT:Stopping record.")
+ mediaRecorder.stop();
+ recording.value = false;
+ hide();
+ }
+
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.keyCode == 32 && !typing.value) record();
+ }
+
+ const onKeyUp = (e: KeyboardEvent) => {
+ if (e.keyCode == 32 && recording.value) stop();
+ }
+
+ //-----------------------------------------------------------
+
+ onMounted(() => {
+ window.addEventListener("keydown", onKeyDown);
+ window.addEventListener("keyup", onKeyUp);
+ });
+
+ onUnmounted(() => {
+ window.removeEventListener("keydown", onKeyDown);
+ window.removeEventListener("keyup", onKeyUp);
+ })
+
+ return {
+ recording
+ }
+
+}
diff --git a/src/render/components/controllers/inputItem.control.text.ts b/src/render/components/controllers/inputItem.control.text.ts
new file mode 100644
index 0000000..941ae89
--- /dev/null
+++ b/src/render/components/controllers/inputItem.control.text.ts
@@ -0,0 +1,134 @@
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
+import { postMessage } from "@/render/ipc";
+import { newMessage, animateTextInput } from "./helpers";
+
+
+export default function useTextInputController(elementX: Ref) {
+
+ let textInput: HTMLInputElement | null;
+
+ const { side, show, hide, switchSide } = animateTextInput();
+
+ let firstKey = true;
+ const typing = ref(false);
+
+ // Prep inputItem for typing.
+ const prepInput = () => {
+ show()
+ typing.value = true
+ }
+
+ // Clear and hide inputItem after done typing.
+ const clearInput = () => {
+
+ if (textInput) {
+ textInput.value = "";
+ textInput.blur();
+ }
+
+ hide()
+ firstKey = true;
+ typing.value = false;
+ }
+
+ // Send a message and clean up after.
+ const sendMessage = () => {
+ if (textInput) {
+
+ // Send it to the backend for processing.
+ const message = newMessage({
+ text: false
+ });
+
+ // postMessage(message);
+
+ clearInput()
+ }
+ }
+
+ // Keys that are capable of opening the text input (numbers and letters).
+ const isHotKey = (key: number) => {
+ if (key >= 47 && key <= 91) { // a letter
+ return true
+ }
+ }
+
+ //---Callbacks-----------------------------------------------
+
+ const onKeyDown = (e: KeyboardEvent) => {
+ const key = e.keyCode;
+
+ if (textInput) {
+
+ // Only runs on firstKey.
+ if (firstKey) {
+
+ if (!isHotKey(key)) {
+ return
+ }
+
+ prepInput()
+ }
+
+ textInput.focus();
+
+ // Close input when no text or on ESC.
+ if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
+ clearInput()
+ return
+ }
+
+ if (key === 27) { // escape
+ clearInput()
+ return
+ }
+
+ // Close and send on enter.
+ if (key === 13) {
+ if (textInput.value) {
+ sendMessage()
+ return
+ }
+ }
+
+ if (firstKey) firstKey = false
+ }
+ }
+
+ //-----------------------------------------------------------
+
+ // Watch parent position and update side.
+ watch(elementX, (elementX, _previous) => {
+ const winW = window.innerWidth
+
+ // Logic depends on the side we are on.
+ if (side.value === "right") {
+ if (winW - elementX < 230) {
+ switchSide()
+ side.value = "left"
+ }
+ }
+
+ else {
+ if (winW - elementX > 230) {
+ switchSide()
+ side.value = "right"
+ }
+ }
+
+ });
+
+ onMounted(() => {
+ textInput = document.getElementById("textInput") as HTMLInputElement;
+ window.addEventListener("keydown", onKeyDown);
+ })
+
+ onUnmounted(() => {
+ window.removeEventListener("keydown", onKeyDown);
+ });
+
+ return {
+ typing
+ }
+
+}
diff --git a/src/render/components/controllers/messenger.control.ts b/src/render/components/controllers/messenger.control.ts
new file mode 100644
index 0000000..b9c3a96
--- /dev/null
+++ b/src/render/components/controllers/messenger.control.ts
@@ -0,0 +1,38 @@
+import { ref } from 'vue';
+import useScroll from "@/render/composables/useScroll";
+
+const messagesRef = ref();
+
+/* seed the canvas with messages */
+const seedCanvas = (messages: Message[]) => {
+ messagesRef.value = messages;
+}
+
+const addMessage = (message: Message) => {
+ messagesRef.value.push(message);
+}
+
+const updateMessage = (message: Message) => {
+
+ let target_message = messagesRef.value.filter((m: Message) => {
+ return m.uid = message.uid;
+ })[0];
+
+ if (target_message) {
+ target_message = message;
+ }
+
+}
+
+export default function useMessages() {
+
+ const { updateScrollRef, adjustScroll } = useScroll("messenger");
+
+ return {
+ messagesRef,
+ seedCanvas,
+ addMessage,
+ updateMessage
+ };
+
+}
diff --git a/src/render/components/header.js b/src/render/components/header.js
deleted file mode 100644
index 0851a69..0000000
--- a/src/render/components/header.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const Header =
-{
- setup() {
- const onNavBar = (command) => window.mainApi.send('nav-bar', command);
- return { onNavBar };
- },
-
- template: `
-
-
- `
-}
-
-export default Header;
\ No newline at end of file
diff --git a/src/render/components/header.vue b/src/render/components/header.vue
new file mode 100644
index 0000000..63716c8
--- /dev/null
+++ b/src/render/components/header.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
diff --git a/src/render/components/input.js b/src/render/components/input.js
deleted file mode 100644
index 5bc8144..0000000
--- a/src/render/components/input.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import useText from "./control/text.js";
-import draggify from "./control/draggify.js";
-
-const Input =
-{
- props: ["person"],
-
- setup(props)
- {
- const initials = Vue.ref("");
-
- const recording = Vue.ref(false);
-
- const { elementX, elementY } = draggify("input", 15);
-
- const { leftSide, show } = useText("input-text", elementX);
-
- window.mainApi.on("record", (status) => recording.value = status);
-
- Vue.watch(() => props.person, (c, _p) => initials.value = getInitials(c));
-
- return { initials, elementX, elementY, recording, leftSide, show };
- },
-
- template: `
-
-
-
`
-}
-
-function getInitials(name)
-{
- let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
-
- let initials = [...name.matchAll(rgx)] || [];
-
- return (
- (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
- ).toUpperCase();
-}
-
-export default Input;
diff --git a/src/render/components/inputItem.vue b/src/render/components/inputItem.vue
new file mode 100644
index 0000000..edd844f
--- /dev/null
+++ b/src/render/components/inputItem.vue
@@ -0,0 +1,220 @@
+
+ {{ initials }}
-
-
-
-
+
+
+
+
+
+
diff --git a/src/render/components/login.js b/src/render/components/login.js
deleted file mode 100644
index da2e080..0000000
--- a/src/render/components/login.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const Login =
-{
- setup()
- {
- const usr = Vue.ref("");
- const pwd = Vue.ref("");
-
- const submitForm = async () => {
- const success = await window.mainApi.invoke("login", usr.value, pwd.value);
- if (!success) shake("login-form");
- }
-
- return { usr, pwd, submitForm };
- },
-
- template: `
- `
-}
-
-/** Shake a div to indicate incorrect credentials */
-const shake = (elementId) =>
-{
- const el = document.getElementById(elementId);
-
- if (el)
- el.classList.remove("shake");
-
- setTimeout(() => {
- if (el) el.classList.add("shake");
- }, 250);
-}
-
-export default Login;
\ No newline at end of file
diff --git a/src/render/components/login.vue b/src/render/components/login.vue
new file mode 100644
index 0000000..bece6ea
--- /dev/null
+++ b/src/render/components/login.vue
@@ -0,0 +1,180 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/render/components/message.js b/src/render/components/message.js
deleted file mode 100644
index fd1b41c..0000000
--- a/src/render/components/message.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Bubble from "./bubble.js";
-import Context from "./context.js";
-
-const Message =
-{
- components: {
- Bubble,
- Context
- },
-
- props: ["modifier", "content", "context", "avatar", "id"],
-
- setup(props)
- {
- return { calcChild };
- },
-
- template: `
- {{ initials }}
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
`
-}
-
-function calcChild(index, len)
-{
- if (len === 1)
- {
- return "none-child";
- }
- else if (index === 0)
- {
- return "first-child";
- }
- else if (index === len - 1)
- {
- return "last-child";
- }
- else
- {
- return "middle-child";
- }
-}
-
-export default Message;
diff --git a/src/render/components/messenger.js b/src/render/components/messenger.js
deleted file mode 100644
index 668b505..0000000
--- a/src/render/components/messenger.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import initScroll from "./control/scroll.js";
-
-import WS from "./ws.js";
-import Input from "./input.js";
-import Settings from "./settings.js";
-import Message from "./message.js";
-
-const Messenger = {
-
- components: {
- WS,
- Settings,
- Message,
- Input
- },
-
- setup()
- {
- const person = Vue.ref("");
- const messages = Vue.ref([{
- modifier: "ai",
- content: [{
- category: "text/html",
- text: `
-
`,
- blob: null
- }],
- context: "Email from David Spade",
- avatar: null,
- id: 0
- }]);
-
- const onDrop = async (e) => {
- const file = e.dataTransfer.items[0].getAsFile();
-
- const buffer = await file.arrayBuffer();
- const b64String = await window.mainApi.invoke("encode", buffer);
-
- window.mainApi.send("message", {
- category: file.type,
- text: file.name,
- blob: b64String
- });
- }
-
- Vue.onMounted(() => {
-
- window.mainApi.on("message", (message) => {
- if (message.person)
- {
- person.value = message.person;
- messages.value = message.messages;
- }
- else if (message.name)
- {
- person.value = message;
- }
- else if (message.content)
- {
- messages.value.push(message);
- }
- else
- {
- messages.value[messages.value.length - 1].content.push(message);
- }
- });
-
- initScroll("messenger");
- window.mainApi.send("messenger");
- });
-
- Vue.onUnmounted(() => {
- messages.value = [];
- });
-
- return { person, messages, onDrop };
- },
-
- template: `
- About HTML Parser
-Return the text of the most recently opened start tag. This should not normally be needed for structured processing, but may be useful in dealing with HTML “as deployed” or for re-generating input with minimal changes (whitespace between attributes can be preserved, etc.).
-
-
`
-}
-
-export default Messenger;
diff --git a/src/render/components/messenger.vue b/src/render/components/messenger.vue
new file mode 100644
index 0000000..ee56549
--- /dev/null
+++ b/src/render/components/messenger.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/render/components/settings.js b/src/render/components/settings.js
deleted file mode 100644
index 68d69f2..0000000
--- a/src/render/components/settings.js
+++ /dev/null
@@ -1,28 +0,0 @@
-
-const Settings =
-{
- setup() {
- const active = Vue.ref(false);
-
- window.addEventListener("keydown", (e) => {
- console.log("toggle settings");
- })
-
- const logout = async () => {
- await window.mainApi.send("logout");
- }
-
- return { active, logout };
- },
-
- template: `
-
-
-
-
-
`
-}
-
-export default Settings;
\ No newline at end of file
diff --git a/src/render/components/settings.vue b/src/render/components/settings.vue
new file mode 100644
index 0000000..cf881c3
--- /dev/null
+++ b/src/render/components/settings.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/render/components/splash.js b/src/render/components/splash.js
deleted file mode 100644
index 220eaad..0000000
--- a/src/render/components/splash.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const Splash =
-{
- template: `
-
-
-
- `
-}
-
-export default Splash;
\ No newline at end of file
diff --git a/src/render/components/splash.vue b/src/render/components/splash.vue
new file mode 100644
index 0000000..247847a
--- /dev/null
+++ b/src/render/components/splash.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/render/components/ws.js b/src/render/components/ws.js
deleted file mode 100644
index 189b03d..0000000
--- a/src/render/components/ws.js
+++ /dev/null
@@ -1,35 +0,0 @@
-
-const WS =
-{
- setup()
- {
- const status = Vue.ref();
-
- Vue.onMounted(() => {
-
- window.mainApi.on("ws-status", (val) => {
- status.value = val;
- });
-
- });
-
- return { status }
- },
-
- template: `
-
-
- 
-
-
`
-}
-
-export default WS;
\ No newline at end of file
diff --git a/src/render/composables/useDraggify.ts b/src/render/composables/useDraggify.ts
new file mode 100644
index 0000000..f3d8978
--- /dev/null
+++ b/src/render/composables/useDraggify.ts
@@ -0,0 +1,199 @@
+import { onMounted, ref, onUnmounted } from "vue";
+
+//---Dragabble Helper Funcs--------------------------------------
+
+// Calculate distance to nearest side.
+function calcSideProximity (elementX: number, winW: number) {
+
+ // Calc right short.
+ let short = winW - elementX - 40;
+
+ // See if it's left short.
+ if (elementX + 20 < winW / 2) {
+ short = elementX
+ }
+
+ return short
+}
+
+// Update elementX or elementY value on window resize
+function calcPosition (elementPosition: number, percent: number,
+ short: number, win: number) {
+
+ // Is it close to the right/bottom side?
+ if (percent > 0.75) {
+ elementPosition = win - short - 40;
+ }
+
+ // Is it not close to a side?
+ if (percent < 0.75 && percent > 0.25) {
+ elementPosition = win * percent
+ }
+
+ return elementPosition
+}
+
+export default function draggify(elementId: string, xStart: number,
+ yStart: number, margin: number) {
+
+ let element: HTMLElement | null;
+
+ // Cords of inputItem.
+ const elementX = ref(0);
+ const elementY = ref(0);
+
+ // 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;
+
+ // Keep track of window size;
+ let winW = window.innerWidth;
+ let winH = window.innerHeight;
+
+ //---Reposition Anime-----------------------------------------------
+
+ // Move element to target smoothly.
+ const repositionAnime = (xChange: number, yChange: number) => {
+ const xStep = xChange / 6000;
+ const yStep = yChange / 6000;
+
+ for (let i = 1; i <= 6000; i++) {
+
+ setTimeout(() => {
+ elementX.value += xStep;
+ elementY.value += yStep;
+ }, 16) // 60fps
+
+ }
+ }
+
+ //---Event Handlers-----------------------------------------------
+
+ // Update the position of inputItem on mouse dragging.
+ const onMouseMove = (e: any) => {
+ e.preventDefault()
+ element = document.getElementById(elementId);
+
+ if (element) {
+ const inputItemRect = element.getBoundingClientRect();
+ elementX.value = inputItemRect.left + e.movementX;
+ elementY.value = inputItemRect.top + e.movementY;
+ }
+
+ }
+
+ // Add an event listener for dragging.
+ const onMouseDown = (_e: any) => {
+ _e.preventDefault()
+ window.addEventListener('mousemove', onMouseMove, true);
+ }
+
+ // Update position references when user is done moving targetEl.
+ const onMouseUp = (_e: any) => {
+ window.removeEventListener('mousemove', onMouseMove, true);
+
+ // See if and calculate reposition.
+ let x = 0; // vector change
+ let y = 0;
+
+ if (elementX.value < 0) {
+ x = (elementX.value - margin)*-1
+ }
+
+ if (elementX.value > winW - 40) {
+ const b = winW - 40 - margin;
+ x = (elementX.value - b)*-1
+ }
+
+ // Reposition y
+ if (elementY.value < 0) {
+ y = (elementY.value - margin)*-1
+ }
+
+ if (elementY.value > winH - 40) {
+ const d = winH - 40 - margin;
+ y = (elementY.value - d)*-1
+ }
+
+ // Reposition if needed.
+ if (x !== 0 || y !== 0) repositionAnime(x, y);
+
+ xShort = calcSideProximity(elementX.value, winW);
+ yShort = calcSideProximity(elementY.value, winH);
+
+ // Update percentages.
+ percentX = elementX.value / winW;
+ percentY = elementY.value / winH;
+
+ // Save position.
+ const position = {
+ x: elementX.value,
+ y: elementY.value
+ }
+ window.localStorage.setItem("inputItem_position", JSON.stringify(position));
+ }
+
+ // Update position of targetEl on windowResize.
+ const onWindowResize = (_e: any) => {
+
+ // Update window dimensions.
+ winW = window.innerWidth;
+ winH = window.innerHeight;
+
+ elementX.value = calcPosition(elementX.value, percentX, xShort, winW);
+ elementY.value = calcPosition(elementY.value, percentY, yShort, winH);
+
+ }
+
+ //---------------------------------------------------------------
+
+ onMounted(() => {
+ element = document.getElementById(elementId);
+
+ if (element) {
+ element.addEventListener('mousedown', onMouseDown, false);
+ }
+
+ window.addEventListener("mouseup", onMouseUp, false);
+
+ // Initialize the positional references.
+ percentX = elementX.value / window.innerWidth;
+ percentY = elementY.value / window.innerHeight;
+
+ xShort = calcSideProximity(elementX.value, window.innerWidth);
+ yShort = calcSideProximity(elementX.value, window.innerHeight);
+
+ // Then, we can listen for window resize.
+ window.addEventListener('resize', onWindowResize, false);
+ });
+
+ // Try loading initPosition, otherwise set default values
+ let initPosition: any;
+ const rawData = window.localStorage.getItem("inputItem_position")
+
+ if (rawData) {
+ initPosition = JSON.parse(rawData)
+ } else {
+ initPosition = {x: xStart, y: yStart}
+ }
+
+ elementX.value = initPosition.x;
+ elementY.value = initPosition.y;
+
+ // remove event listeners on component dismount.
+ onUnmounted(() => {
+ window.removeEventListener('resize', onWindowResize);
+ window.removeEventListener('mouseup', onMouseUp);
+ if (element) element.removeEventListener('mousedown', onMouseDown);
+ })
+
+ return {
+ elementX,
+ elementY
+ }
+
+}
diff --git a/src/render/composables/useIpcRend.ts b/src/render/composables/useIpcRend.ts
new file mode 100644
index 0000000..9ba7f73
--- /dev/null
+++ b/src/render/composables/useIpcRend.ts
@@ -0,0 +1,54 @@
+
+import { IpcRendererEvent } from "electron";
+
+export class IpcRendererListener
-
-
-
-
-
-