diff --git a/client/src/services/Windows.js b/client/src/services/Windows.js index b4a60d59..082c8803 100644 --- a/client/src/services/Windows.js +++ b/client/src/services/Windows.js @@ -21,7 +21,6 @@ const defValues = { 'main_menu': { id: 'main_menu', title: "DragonRoll", - resizable: true, }, 'edit_profile': { id: 'edit_profile', @@ -136,7 +135,8 @@ function SetupHandle(id, handle){ let currentWindowHandleId = "window-handle-" + id; let currentWindowResizerId = "window-resize-handle-" + id; - let mouseDown = false; + let draggingWindow = false; + let resizingWindow = false; let currentWindow = document.getElementById(currentWindowId); let handler = document.getElementById(currentWindowHandleId); @@ -145,6 +145,9 @@ function SetupHandle(id, handle){ let offsetX = 0; let offsetY = 0; + let resizeOffsetX = 0; + let resizeOffsetY = 0; + // Programar un resizer mitjanament competent currentWindow.addEventListener("mousedown", (event) => { @@ -152,15 +155,16 @@ function SetupHandle(id, handle){ }); handler.addEventListener("mousedown", (event) => { - mouseDown = true; + draggingWindow = true; let windowRect = currentWindow.getBoundingClientRect(); offsetX = windowRect.left - event.clientX; offsetY = windowRect.top - event.clientY; }) + // Move window listeners document.addEventListener("mousemove", (event) => { - if(!mouseDown) return; + if(!draggingWindow) return; if(event.clientX + offsetX < -currentWindow.getBoundingClientRect().width + 20) currentWindow.style.left = (-currentWindow.getBoundingClientRect().width + 20) + "px"; else if(event.clientX + offsetX > window.innerWidth - 20) currentWindow.style.left = (window.innerWidth - 20) + "px"; @@ -172,33 +176,81 @@ function SetupHandle(id, handle){ }) document.addEventListener("mouseup", (event) => { - mouseDown = false; + draggingWindow = false; // ummm suposo que no pots tancar mentres mous? SaveWindowPos({id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10)}); }); + // Resize window listeners + resizer.addEventListener("mousedown", (event) => { + resizingWindow = true; + + let windowRect = currentWindow.getBoundingClientRect(); + resizeOffsetX = parseInt(currentWindow.style.width) - event.clientX; + resizeOffsetY = parseInt(currentWindow.style.height) - event.clientY; + }); + + document.addEventListener("mousemove", (event) => { + if(!resizingWindow) return; + + let newWidth = event.clientX + resizeOffsetX; + let newHeight = event.clientY + resizeOffsetY; + + if(win.minHeight) if(win.minHeight > newHeight) newHeight = win.minHeight; + if(win.maxHeight) if(win.maxHeight < newHeight) newHeight = win.maxHeight; + + if(win.minWidth) if(win.minWidth > newWidth) newWidth = win.minWidth; + if(win.maxWidth) if(win.maxWidth < newWidth) newWidth = win.maxWidth; + + currentWindow.style.width = newWidth + "px"; + currentWindow.style.height = newHeight + "px"; + }); + + document.addEventListener("mouseup", (event) => { + resizingWindow = false; + + win.width = parseInt(currentWindow.style.width, 10); + win.height = parseInt(currentWindow.style.height, 10); + }); + handle.value.setupHandle(); } +function SetResizable(id, resizable){ + let win = GetWindowWithId(id); + console.log(win); + win.resizable = resizable; +} + function SetSize(id, size){ let currentWindowId = "window-wrapper-" + id; let currentWindow = document.getElementById(currentWindowId); let win = GetWindowWithId(id); - currentWindow.style.width = size.x + "px"; - currentWindow.style.height = size.y + "px"; + currentWindow.style.width = size.width + "px"; + currentWindow.style.height = size.height + "px"; - win.size = size; + win.width = size.width; } function SetMaxSize(id, maxSize){ let win = GetWindowWithId(id); - win.maxSize = maxSize; + + if(maxSize.width) win.maxWidth = maxSize.width; + else win.maxWidth = win.width; + + if(maxSize.height) win.maxHeight = maxSize.height; + else win.maxHeight = win.height; } function SetMinSize(id, minSize){ let win = GetWindowWithId(id); - win.minSize = minSize; + + if(minSize.width) win.minWidth = minSize.width; + else win.minWidth = win.width; + + if(minSize.height) win.minHeight = minSize.height; + else win.minHeight = win.height; } function SetPosition(id, pos){ @@ -239,6 +291,7 @@ function ResetPosition(id, pos){ function CreateWindow(type, data = {}){ + let finalData = {...{type}, ...defValues[type], ...data} let contains = false; @@ -312,6 +365,7 @@ function SetOnTop(id){ export { SetupHandle, SetSize, + SetResizable, SetMaxSize, SetMinSize, SetPosition, diff --git a/client/src/views/partials/ChatComponent.vue b/client/src/views/partials/ChatComponent.vue index 07c4a75b..ad2d2e74 100644 --- a/client/src/views/partials/ChatComponent.vue +++ b/client/src/views/partials/ChatComponent.vue @@ -74,7 +74,7 @@ watch(chat, () => { .chat-container { display: flex; - height: 720px; + height: calc(100% - 24px); width: 100%; flex-direction: column; @@ -92,7 +92,6 @@ watch(chat, () => { flex-direction: column; overflow-y: auto; - max-height: 620px; margin-bottom: 10px; } diff --git a/client/src/views/partials/WindowHandle.vue b/client/src/views/partials/WindowHandle.vue index 70633704..77766171 100644 --- a/client/src/views/partials/WindowHandle.vue +++ b/client/src/views/partials/WindowHandle.vue @@ -1,7 +1,7 @@ diff --git a/client/src/views/windows/EditProfileWindow.vue b/client/src/views/windows/EditProfileWindow.vue index e54839b6..da27c1cd 100644 --- a/client/src/views/windows/EditProfileWindow.vue +++ b/client/src/views/windows/EditProfileWindow.vue @@ -18,7 +18,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 500, y: 380}); + SetSize(id, {width: 500, height: 380}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/ExampleWindow.vue b/client/src/views/windows/ExampleWindow.vue index 151ddc10..4123db74 100644 --- a/client/src/views/windows/ExampleWindow.vue +++ b/client/src/views/windows/ExampleWindow.vue @@ -15,7 +15,7 @@ const test = ref(null) onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 500, y: 380}); + SetSize(id, {width: 500, height: 380}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/LoginWindow.vue b/client/src/views/windows/LoginWindow.vue index c0b1d47b..b78023fa 100644 --- a/client/src/views/windows/LoginWindow.vue +++ b/client/src/views/windows/LoginWindow.vue @@ -33,7 +33,7 @@ onMounted(() => { successMessage.value = success; SetupHandle(id, handle); - SetSize(id, {x: 450, y: 500}); + SetSize(id, {width: 450, height: 500}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/MainMenuWindow.vue b/client/src/views/windows/MainMenuWindow.vue index ec5fed94..6410ed95 100644 --- a/client/src/views/windows/MainMenuWindow.vue +++ b/client/src/views/windows/MainMenuWindow.vue @@ -6,12 +6,12 @@ import WindowHandle from '@/views/partials/WindowHandle.vue'; import EditUserPartial from '@/views/partials/EditUserPartial.vue' import { onMounted, onUpdated, ref } from 'vue'; -import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows'; +import { SetupHandle, SetSize, SetResizable, SetMinSize, SetMaxSize, SetPosition, ResetPosition } from '@/services/Windows'; import Api from '@/services/Api.js' import useEmitter from '@/services/Emitter'; -import { ClearWindow, CreateWindow } from '../../services/Windows'; +import { ClearWindow, CreateWindow, Windows } from '../../services/Windows'; const emitter = useEmitter(); const handle = ref(null); @@ -24,7 +24,10 @@ let title = data.title; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 500, y: 540}); + SetSize(id, {width: 500, height: 540}); + SetResizable(id, true); + SetMinSize(id, {width: 500, height: 540}); + SetMaxSize(id, {width: 700, height: 700}); ResetPosition(id, "center", emitter); }); diff --git a/client/src/views/windows/RegisterWindow.vue b/client/src/views/windows/RegisterWindow.vue index 7d0198eb..54d19de4 100644 --- a/client/src/views/windows/RegisterWindow.vue +++ b/client/src/views/windows/RegisterWindow.vue @@ -30,7 +30,7 @@ let title = data.title; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 450, y: 800}); + SetSize(id, {width: 450, height: 800}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/campaigns/CampaignListWindow.vue b/client/src/views/windows/campaigns/CampaignListWindow.vue index ab82add1..6ce1ce7f 100644 --- a/client/src/views/windows/campaigns/CampaignListWindow.vue +++ b/client/src/views/windows/campaigns/CampaignListWindow.vue @@ -20,7 +20,7 @@ const otherCampaigns = ref([]); let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 500, y: 680}); + SetSize(id, {width: 500, height: 680}); ResetPosition(id, "center"); RefreshCampaigns(); diff --git a/client/src/views/windows/campaigns/CampaignPreviewWindow.vue b/client/src/views/windows/campaigns/CampaignPreviewWindow.vue index fea4dbbb..8432792b 100644 --- a/client/src/views/windows/campaigns/CampaignPreviewWindow.vue +++ b/client/src/views/windows/campaigns/CampaignPreviewWindow.vue @@ -28,12 +28,8 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - if(data.style == 'compact') { - SetSize(id, {x: 800, y: 750}); - hide_chat.value = true; - } else { - SetSize(id, {x: 1200, y: 750}); - } + SetSize(id, {width: 800, height: 750}); + hide_chat.value = true; ResetPosition(id, "center"); diff --git a/client/src/views/windows/campaigns/JoinCampaignWindow.vue b/client/src/views/windows/campaigns/JoinCampaignWindow.vue index 3cce9838..092b3993 100644 --- a/client/src/views/windows/campaigns/JoinCampaignWindow.vue +++ b/client/src/views/windows/campaigns/JoinCampaignWindow.vue @@ -17,7 +17,7 @@ const code = ref(""); let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 300, y: 150}); + SetSize(id, {width: 300, height: 150}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/campaigns/NewCampaignWindow.vue b/client/src/views/windows/campaigns/NewCampaignWindow.vue index 91d97994..c2fc7e03 100644 --- a/client/src/views/windows/campaigns/NewCampaignWindow.vue +++ b/client/src/views/windows/campaigns/NewCampaignWindow.vue @@ -24,7 +24,7 @@ let system = ""; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 300, y: 240}); + SetSize(id, {width: 300, height: 240}); ResetPosition(id, "center"); GetEmitter().on('select', (system_id) => Select(system_id)) diff --git a/client/src/views/windows/campaigns/SystemSelectorWindow.vue b/client/src/views/windows/campaigns/SystemSelectorWindow.vue index a6d17458..230db14f 100644 --- a/client/src/views/windows/campaigns/SystemSelectorWindow.vue +++ b/client/src/views/windows/campaigns/SystemSelectorWindow.vue @@ -28,7 +28,7 @@ provide('clearParent', Clear); onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 300, y: 600}); + SetSize(id, {width: 300, height: 600}); ResetPosition(id, "center"); console.log(systems.value) diff --git a/client/src/views/windows/database/DbWindow.vue b/client/src/views/windows/database/DbWindow.vue index c9f10d38..a489f0aa 100644 --- a/client/src/views/windows/database/DbWindow.vue +++ b/client/src/views/windows/database/DbWindow.vue @@ -12,7 +12,7 @@ const data = props.data; let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 500, y: 380}); + SetSize(id, {width: 500, height: 380}); ResetPosition(id, "center"); }); diff --git a/client/src/views/windows/dm/EntityWindow.vue b/client/src/views/windows/dm/EntityWindow.vue index e8bb94dd..6c3beee1 100644 --- a/client/src/views/windows/dm/EntityWindow.vue +++ b/client/src/views/windows/dm/EntityWindow.vue @@ -12,7 +12,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 400, y: 900}); + SetSize(id, {width: 400, height: 900}); ResetPosition(id, {x: 100, y: 20}); }); diff --git a/client/src/views/windows/dm/EnvironmentWindow.vue b/client/src/views/windows/dm/EnvironmentWindow.vue index 302bc2a4..5e9e4620 100644 --- a/client/src/views/windows/dm/EnvironmentWindow.vue +++ b/client/src/views/windows/dm/EnvironmentWindow.vue @@ -19,7 +19,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 200, y: 300}); + SetSize(id, {width: 200, height: 300}); ResetPosition(id, {x: data.x, y: data.y}); console.log(env_background.value.GetColor()); diff --git a/client/src/views/windows/dm/MapButtons.vue b/client/src/views/windows/dm/MapButtons.vue index db0e8a37..be7592f5 100644 --- a/client/src/views/windows/dm/MapButtons.vue +++ b/client/src/views/windows/dm/MapButtons.vue @@ -15,7 +15,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 40, y: 200}); + SetSize(id, {width: 40, height: 200}); ResetPosition(id, {x: 10, y: 200}); }); diff --git a/client/src/views/windows/dm/MapWindow.vue b/client/src/views/windows/dm/MapWindow.vue index ca8adcc2..656a20f1 100644 --- a/client/src/views/windows/dm/MapWindow.vue +++ b/client/src/views/windows/dm/MapWindow.vue @@ -26,7 +26,7 @@ function NewMapButton(){ onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 300, y: 600}); + SetSize(id, {width: 300, height: 600}); ResetPosition(id, {x: 100, y: 10}); mapUploader.value.addEventListener('change', (event) => { diff --git a/client/src/views/windows/game/CharactersWindow.vue b/client/src/views/windows/game/CharactersWindow.vue index 732fb516..7233451f 100644 --- a/client/src/views/windows/game/CharactersWindow.vue +++ b/client/src/views/windows/game/CharactersWindow.vue @@ -4,7 +4,7 @@ import WindowHandle from '@/views/partials/WindowHandle.vue'; import { onMounted, ref } from 'vue'; import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows'; import GameEntry from '../../partials/GameEntry.vue'; -import { CreateWindow } from '../../../services/Windows'; +import { CreateWindow, SetMinSize, SetMaxSize, SetResizable } from '../../../services/Windows'; const props = defineProps(['data']); const data = props.data; @@ -14,7 +14,11 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 400, y: 850}); + + SetSize(id, {width: 300, height: 540}); + SetResizable(id, true); + SetMinSize(id, {height: 300}); + SetMaxSize(id, {height: 700}); ResetPosition(id, {x: window.innerWidth - 420, y: 60}); }); diff --git a/client/src/views/windows/game/ChatWindow.vue b/client/src/views/windows/game/ChatWindow.vue index c103e657..4908e9fc 100644 --- a/client/src/views/windows/game/ChatWindow.vue +++ b/client/src/views/windows/game/ChatWindow.vue @@ -2,8 +2,9 @@ import WindowHandle from '@/views/partials/WindowHandle.vue'; import { onMounted, onUpdated, ref } from 'vue'; -import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows'; +import { SetupHandle, SetSize, SetResizable, SetMinSize, SetPosition, ResetPosition } from '@/services/Windows'; import ChatComponent from '../../partials/ChatComponent.vue'; +import { SetMaxSize } from '../../../services/Windows'; const props = defineProps(['data']); const data = props.data; @@ -14,7 +15,11 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 400, y: 750}); + SetSize(id, {width: 400, height: 750}); + SetResizable(id, true); + SetMinSize(id, {height: 300}); + SetMaxSize(id, {width: 400}) + ResetPosition(id, {x: window.innerWidth - 420, y: 80}); }); diff --git a/client/src/views/windows/game/CombatWindow.vue b/client/src/views/windows/game/CombatWindow.vue index 368522c4..739171a9 100644 --- a/client/src/views/windows/game/CombatWindow.vue +++ b/client/src/views/windows/game/CombatWindow.vue @@ -13,7 +13,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 200, y: 300}); + SetSize(id, {width: 200, height: 300}); ResetPosition(id, {x: 30, y: 300}); }); diff --git a/client/src/views/windows/game/CompendiumWindow.vue b/client/src/views/windows/game/CompendiumWindow.vue index dabc038e..8ed42255 100644 --- a/client/src/views/windows/game/CompendiumWindow.vue +++ b/client/src/views/windows/game/CompendiumWindow.vue @@ -12,7 +12,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 600, y: 850}); + SetSize(id, {width: 600, height: 850}); ResetPosition(id, {x: window.innerWidth - 620, y: 60}); }); diff --git a/client/src/views/windows/game/DiceWindow.vue b/client/src/views/windows/game/DiceWindow.vue index b5e62184..91eb15f1 100644 --- a/client/src/views/windows/game/DiceWindow.vue +++ b/client/src/views/windows/game/DiceWindow.vue @@ -71,7 +71,7 @@ function ThrowCustomDice(){ onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 300, y: 210}); + SetSize(id, {width: 300, height: 210}); ResetPosition(id, {x: 100, y: 150}); }); diff --git a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue index c407e537..c3875bf8 100644 --- a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue +++ b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue @@ -14,7 +14,7 @@ let id = data.id; onMounted(() => { SetupHandle(id, handle); - SetSize(id, {x: 700, y: 850}); + SetSize(id, {width: 700, height: 850}); ResetPosition(id, {x: window.innerWidth - 600, y: 60}); ConfigureBookmarks(); @@ -108,8 +108,8 @@ function ConfigureBookmarks(){