work on pan zoom for canvas

components/studio/BannerCanvas.vue

@@ -3,7 +3,7 @@ import { BlockType } from './util/BlockType'
 </script>
 
 <template>
-    <div class="flex justify-center items-center min-w-[150px] min-h-[75px] w-[330px] h-[130px] max-w-[1024px] max-h-[720px] bg-slate-50 text-slate-600 border-2 border-black resize overflow-hidden">
+    <div class="banner-container flex justify-center items-center min-w-[150px] min-h-[75px] w-[330px] h-[130px] max-w-[1024px] max-h-[720px] bg-slate-50 text-slate-600 border-2 border-black resize overflow-hidden">
         <div class="relative h-full w-full">
             <StudioUtilBlock :type="BlockType.TEXT" :initial-width="80" data="Yeehaw"></StudioUtilBlock>
         </div>

components/studio/Workspace.vue

@@ -1,5 +1,27 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Panzoom from '@panzoom/panzoom'
+
+const canvasContainer = ref(null)
+
+onMounted(() => {
+    console.log("Initializing panzoom")
+
+    const element = (canvasContainer.value as unknown) as HTMLElement;
+    const panzoom = Panzoom(element, {
+        animate: true,
+        excludeClass: 'banner-block',
+        maxScale: 3,
+        minScale: 0.75
+    });
+
+    element.addEventListener('wheel', panzoom.zoomWithWheel);
+    console.log("Panzoom initialized");
+})
+</script>
+
 <template>
-    <section id="workspace" class="flex w-full justify-center items-center">
+    <section id="workspace" ref="canvasContainer" class="flex w-full justify-center items-center overflow-hidden">
         <StudioBannerCanvas />
     </section>
 </template>

components/studio/util/Block.vue

@@ -97,7 +97,7 @@ const inlineStyles = computed(() => {
 </script>
 
 <template>
-    <div :style="inlineStyles" @mousedown.prevent="handleMouseDown" @mousemove.prevent="handleMouseMove" @mouseup.prevent="handleMouseUp" @mouseover.prevent="handleMouseOver" @mouseleave.prevent="handleMouseLeave" ref="element">
+    <div :style="inlineStyles" class="banner-block" @mousedown.prevent="handleMouseDown" @mousemove.prevent="handleMouseMove" @mouseup.prevent="handleMouseUp" @mouseover.prevent="handleMouseOver" @mouseleave.prevent="handleMouseLeave" ref="element">
         <div :class="innerBlockClasses">
             <p v-if="props.type === BlockType.TEXT">{{ props.data }}</p>
             <img v-else-if="props.type === BlockType.IMAGE" :src="'data:image/png;base64,' + props.data" />