StewKI/AIPS
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Whiteboard code in toolbar in Whiteboard view

Browse Source
This commit is contained in:
Veljko Tosic
2026-02-19 00:25:12 +01:00
parent 2a3e971f41
commit 7177446470
4 changed files with 128 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
front/src/components/whiteboard/WhiteboardToolbar.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import {computed, ref} from 'vue'
import { useWhiteboardStore } from '@/stores/whiteboard.ts'
import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
import type { ShapeTool, Arrow, Line, Rectangle, TextShape } from '@/types/whiteboard.ts'
const store = useWhiteboardStore()
const sessionStore = useWhiteboardStore()
const infoStore = useWhiteboardsStore()
const emit = defineEmits<{ leave: [] }>()
const tools: { name: ShapeTool; label: string; icon: string; enabled: boolean }[] = [
@@ -16,43 +18,60 @@ const tools: { name: ShapeTool; label: string; icon: string; enabled: boolean }[
const colors = ['#4f9dff', '#ff4f4f', '#4fff4f', '#ffff4f', '#ff4fff', '#ffffff', '#ff9f4f', '#4fffff']
const isReadOnly = computed(() => store.selectedTool === 'hand' && !!store.selectedShape)
const isReadOnly = computed(() => sessionStore.selectedTool === 'hand' && !!sessionStore.selectedShape)
const showProperties = computed(() => {
if (['rectangle', 'arrow', 'line', 'text'].includes(store.selectedTool)) return true
if (store.selectedTool === 'hand' && store.selectedShape) return true
if (['rectangle', 'arrow', 'line', 'text'].includes(sessionStore.selectedTool)) return true
if (sessionStore.selectedTool === 'hand' && sessionStore.selectedShape) return true
return false
})
const showThickness = computed(() => {
if (['rectangle', 'arrow', 'line'].includes(store.selectedTool)) return true
if (isReadOnly.value && store.selectedShapeType && ['rectangle', 'arrow', 'line'].includes(store.selectedShapeType)) return true
if (['rectangle', 'arrow', 'line'].includes(sessionStore.selectedTool)) return true
if (isReadOnly.value && sessionStore.selectedShapeType && ['rectangle', 'arrow', 'line'].includes(sessionStore.selectedShapeType)) return true
return false
})
const showTextSize = computed(() => {
if (store.selectedTool === 'text') return true
if (isReadOnly.value && store.selectedShapeType === 'textShape') return true
if (sessionStore.selectedTool === 'text') return true
if (isReadOnly.value && sessionStore.selectedShapeType === 'textShape') return true
return false
})
const displayColor = computed(() => {
if (isReadOnly.value && store.selectedShape) return store.selectedShape.color
return store.toolColor
if (isReadOnly.value && sessionStore.selectedShape) return sessionStore.selectedShape.color
return sessionStore.toolColor
})
const displayThickness = computed(() => {
if (isReadOnly.value && store.selectedShape) {
if (store.selectedShapeType === 'rectangle') return (store.selectedShape as Rectangle).borderThickness
return (store.selectedShape as Arrow | Line).thickness
if (isReadOnly.value && sessionStore.selectedShape) {
if (sessionStore.selectedShapeType === 'rectangle') return (sessionStore.selectedShape as Rectangle).borderThickness
return (sessionStore.selectedShape as Arrow | Line).thickness
}
return store.toolThickness
return sessionStore.toolThickness
})
const displayTextSize = computed(() => {
if (isReadOnly.value && store.selectedShape) return (store.selectedShape as TextShape).textSize
return store.toolTextSize
if (isReadOnly.value && sessionStore.selectedShape) return (sessionStore.selectedShape as TextShape).textSize
return sessionStore.toolTextSize
})
const showCopiedTooltip = ref(false)
const whiteboardCode = computed(() => infoStore.getCurrentWhiteboard()?.code || '')
const copyCodeToClipboard = async () => {
console.info(whiteboardCode.value)
if (!whiteboardCode.value) return
try {
await navigator.clipboard.writeText(whiteboardCode.value)
showCopiedTooltip.value = true
setTimeout(() => showCopiedTooltip.value = false, 1500)
} catch (err) {
console.error('Failed to copy:', err)
}
}
</script>
<template>
@@ -62,10 +81,10 @@ const displayTextSize = computed(() => {
v-for="tool in tools"
:key="tool.name"
class="tool-btn"
:class="{ active: store.selectedTool === tool.name, disabled: !tool.enabled }"
:class="{ active: sessionStore.selectedTool === tool.name, disabled: !tool.enabled }"
:disabled="!tool.enabled"
:title="tool.enabled ? tool.label : `${tool.label} (coming soon)`"
@click="tool.enabled && store.selectTool(tool.name)"
@click="tool.enabled && sessionStore.selectTool(tool.name)"
>
{{ tool.icon }}
</button>
@@ -85,9 +104,9 @@ const displayTextSize = computed(() => {
v-for="c in colors"
:key="c"
class="color-swatch"
:class="{ active: store.toolColor === c }"
:class="{ active: sessionStore.toolColor === c }"
:style="{ backgroundColor: c }"
@click="store.setToolColor(c)"
@click="sessionStore.setToolColor(c)"
/>
</div>
</div>
@@ -101,8 +120,8 @@ const displayTextSize = computed(() => {
min="1"
max="10"
step="1"
:value="store.toolThickness"
@input="store.setToolThickness(Number(($event.target as HTMLInputElement).value))"
:value="sessionStore.toolThickness"
@input="sessionStore.setToolThickness(Number(($event.target as HTMLInputElement).value))"
/>
</div>
@@ -115,13 +134,29 @@ const displayTextSize = computed(() => {
min="12"
max="72"
step="2"
:value="store.toolTextSize"
@input="store.setToolTextSize(Number(($event.target as HTMLInputElement).value))"
:value="sessionStore.toolTextSize"
@input="sessionStore.setToolTextSize(Number(($event.target as HTMLInputElement).value))"
/>
</div>
</div>
<div class="toolbar-footer">
<div class="position-relative mb-2">
<button
class="btn btn-sm btn-outline-primary w-100"
@click="copyCodeToClipboard"
:title="whiteboardCode"
>
{{ whiteboardCode }}
</button>
<div
v-if="showCopiedTooltip"
class="tooltip-custom position-absolute start-50 translate-middle-x"
>
Code copied to clipboard
</div>
</div>
<button
class="btn btn-sm btn-outline-danger leave-btn"
title="Leave whiteboard"
@@ -227,4 +262,17 @@ const displayTextSize = computed(() => {
width: 100%;
height: 36px;
}
.tooltip-custom {
bottom: 110%;
background-color: #333;
color: #fff;
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
text-align: center;
pointer-events: none;
opacity: 0.9;
}
</style>

37
front/src/stores/whiteboards.ts
View File

@@ -6,6 +6,7 @@ import { whiteboardService } from '@/services/whiteboardService'
export const useWhiteboardsStore = defineStore('whiteboards', () => {
const ownedWhiteboards = ref<Whiteboard[]>([])
const recentWhiteboards = ref<Whiteboard[]>([])
const currentWhiteboard = ref<Whiteboard | null>(null)
const isLoading = ref(false)
const error = ref<string | null>(null)
@@ -52,6 +53,36 @@ export const useWhiteboardsStore = defineStore('whiteboards', () => {
return newWhiteboard.id;
}
async function deleteWhiteboard(id: string): Promise<void> {
isLoading.value = true
error.value = null
try {
await whiteboardService.deleteWhiteboard(id)
ownedWhiteboards.value = ownedWhiteboards.value.filter(wb => wb.id !== id)
} catch (err: any) {
error.value = err.message ?? 'Failed to delete whiteboard'
throw err
} finally {
isLoading.value = false
}
}
function getCurrentWhiteboard(): Whiteboard | null {
return currentWhiteboard.value
}
function selectWhiteboard(whiteboardId: string) {
currentWhiteboard.value =
ownedWhiteboards.value.find(wb => wb.id === whiteboardId) ||
recentWhiteboards.value.find(wb => wb.id === whiteboardId) ||
null
}
function deselectWhiteboard() {
currentWhiteboard.value = null
}
function clearWhiteboards() {
ownedWhiteboards.value = []
recentWhiteboards.value = []
@@ -65,6 +96,10 @@ export const useWhiteboardsStore = defineStore('whiteboards', () => {
getWhiteboardHistory: getWhiteboardHistory,
getRecentWhiteboards: getRecentWhiteboards,
createNewWhiteboard: createNewWhiteboard,
clearWhiteboards: clearWhiteboards
deleteWhiteboard: deleteWhiteboard,
getCurrentWhiteboard: getCurrentWhiteboard,
selectWhiteboard: selectWhiteboard,
deselectWhiteboard: deselectWhiteboard,
clearWhiteboards: clearWhiteboards,
}
})

1
front/src/types/index.ts
View File

@@ -25,6 +25,7 @@ export interface AuthResponse {
export interface Whiteboard {
id: string
ownerId: string
code: string
title: string
createdAt: Date
deletedAt?: Date

26
front/src/views/WhiteboardView.vue
View File

@@ -1,32 +1,42 @@
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { onMounted, onUnmounted, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useWhiteboardStore } from '@/stores/whiteboard.ts'
import { useWhiteboardsStore } from "@/stores/whiteboards.ts";
import WhiteboardToolbar from '@/components/whiteboard/WhiteboardToolbar.vue'
import WhiteboardCanvas from '@/components/whiteboard/WhiteboardCanvas.vue'
const route = useRoute()
const router = useRouter()
const store = useWhiteboardStore()
const sessionStore = useWhiteboardStore()
const infoStore = useWhiteboardsStore()
const whiteboardId = route.params.id as string
onBeforeMount(() => {
infoStore.selectWhiteboard(whiteboardId)
})
onMounted(() => {
store.joinWhiteboard(whiteboardId)
sessionStore.joinWhiteboard(whiteboardId)
})
onBeforeUnmount(() => {
infoStore.deselectWhiteboard()
})
onUnmounted(() => {
store.leaveWhiteboard()
sessionStore.leaveWhiteboard()
})
async function handleLeave() {
await store.leaveWhiteboard()
await sessionStore.leaveWhiteboard()
router.back()
}
</script>
<template>
<div v-if="store.isLoading" class="d-flex flex-column justify-content-center align-items-center vh-100">
<div v-if="sessionStore.isLoading" class="d-flex flex-column justify-content-center align-items-center vh-100">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
@@ -35,9 +45,9 @@ async function handleLeave() {
</p>
</div>
<div v-else-if="store.error" class="d-flex justify-content-center align-items-center vh-100">
<div v-else-if="sessionStore.error" class="d-flex justify-content-center align-items-center vh-100">
<div class="alert alert-danger" role="alert">
{{ store.error }}
{{ sessionStore.error }}
</div>
</div>