refactor: update console logs to use console.info and add tree selection handling in AppletLayers

Author: krushndayshmookh

src/components/applets/AppletCanvasSettings.vue

@@ -37,7 +37,7 @@
         data-test="canvas-apply"
         @click="
           () => {
-            console.log('Apply canvas size:', width, height)
+            console.warn('TODO: Apply canvas size:', width, height)
           }
         "
       />
@@ -48,7 +48,7 @@
         data-test="canvas-reset"
         @click="
           () => {
-            console.log('Reset canvas size')
+            console.warn('TODO: Reset canvas size')
           }
         "
       />
@@ -104,7 +104,7 @@ function toggleGrid() {
 }
 
 function updateSize() {
-  console.log('TODO: updateSize')
+  console.warn('TODO: updateSize')
 }
 </script>
 

src/components/applets/AppletLayers.vue

@@ -2,12 +2,12 @@
   <LayoutDrawerApplet name="Layers">
     <!-- <pre>{{ json }}</pre> -->
     <q-tree
-      v-if="json"
       v-model:selected="selectedElement"
       :nodes="[json]"
       node-key="id"
       label-key="tagName"
       :expanded="[json.id]"
+      @update:selected="onTreeSelectionChange"
     >
       <template #default-header="prop">
         <q-icon :name="ICONS[prop.node.tagName]" class="q-mr-sm" />
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import LayoutDrawerApplet from 'components/layout/LayoutDrawerApplet.vue'
 import { useEditorStore } from 'src/stores/editor-store.js'
 
@@ -28,6 +28,23 @@ const editorStore = useEditorStore()
 const json = computed(() => editorStore.json)
 
 const selectedElement = ref(null)
+
+// Watch for changes in editor store selection and sync to tree
+watch(
+  () => editorStore.selectedId,
+  (newSelectedId) => {
+    selectedElement.value = newSelectedId
+  },
+  { immediate: true },
+)
+
+// Handle tree selection changes and update editor store
+function onTreeSelectionChange(nodeId) {
+  if (nodeId !== editorStore.selectedId) {
+    editorStore.setSelectionById(nodeId)
+  }
+}
+
 // json to be displayed in a tree view
 
 const ICONS = {

src/components/editor/EditorCanvas.vue

@@ -22,13 +22,14 @@
             <div v-html="safeSvgHtml"></div>
 
             <!-- Selection Outline -->
-            <!-- <div
+            <div
               v-if="selectionBox"
+              ref="selectionBoxElement"
               class="selection-outline"
               :style="selectionStyle"
               data-test="selection-outline"
               @mousedown.stop="onSelectionMouseDown"
-            /> -->
+            />
 
             <!-- Rubber Band -->
             <!-- <div
@@ -105,14 +106,8 @@ const canvasBackground = ref(null)
 const svgContainer = ref(null)
 
 // Canvas dimensions and zoom
-const canvasWidth = computed(() => {
-  console.log('Canvas width computed:', store.canvasWidth)
-  return store.canvasWidth
-})
-const canvasHeight = computed(() => {
-  console.log('Canvas height computed:', store.canvasHeight)
-  return store.canvasHeight
-})
+const canvasWidth = computed(() => store.canvasWidth)
+const canvasHeight = computed(() => store.canvasHeight)
 
 // Pan and zoom state
 const panX = ref(0)
@@ -132,8 +127,8 @@ const scrollY = ref(0)
 
 // Computed styles
 const canvasWrapperStyle = computed(() => ({
-  width: `${canvasWidth.value * props.zoom }px`,
-  height: `${canvasHeight.value * props.zoom }px`,
+  width: `${canvasWidth.value * props.zoom}px`,
+  height: `${canvasHeight.value * props.zoom}px`,
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -143,8 +138,8 @@ const canvasWrapperStyle = computed(() => ({
 }))
 
 const canvasBackgroundStyle = computed(() => ({
-  width: `${canvasWidth.value * props.zoom }px`,
-  height: `${canvasHeight.value * props.zoom }px`,
+  width: `${canvasWidth.value * props.zoom}px`,
+  height: `${canvasHeight.value * props.zoom}px`,
   position: 'relative',
   background: '#f8f9fa',
   // border: '10px solid #e0e0e0',
@@ -180,27 +175,25 @@ const svgContainerStyle = computed(() => ({
   zIndex: 2,
 }))
 
-// Commented out for simple canvas - no selection functionality
-// const selectionBox = computed(() => {
-//   if (!store.selectedId) return null
-//   const rect = store.getRectById(store.selectedId)
-//   return rect
-// })
-
-// Commented out for simple canvas
-// const selectionStyle = computed(() => {
-//   if (!selectionBox.value) return {}
-//   const { x, y, width, height } = selectionBox.value
-//   return {
-//     position: 'absolute',
-//     left: `${x * props.zoom}px`,
-//     top: `${y * props.zoom}px`,
-//     width: `${width * props.zoom}px`,
-//     height: `${height * props.zoom}px`,
-//     pointerEvents: 'auto',
-//     zIndex: 3,
-//   }
-// })
+// Selection box computation
+const selectionBox = computed(() => (store.selectedId ? store.getBBoxById(store.selectedId) : null))
+const selectionBoxElement = ref(null)
+
+// Selection style computation
+const selectionStyle = computed(() => {
+  if (!selectionBox.value) return {}
+  const { x, y, width, height } = selectionBox.value
+
+  return {
+    position: 'absolute',
+    left: `${x * props.zoom}px`,
+    top: `${y * props.zoom}px`,
+    width: `${width * props.zoom}px`,
+    height: `${height * props.zoom}px`,
+    pointerEvents: 'auto',
+    zIndex: 3,
+  }
+})
 
 // Commented out for simple canvas
 // const rubberBand = computed(() => {
@@ -230,22 +223,16 @@ const svgContainerStyle = computed(() => ({
 
 // Zoom functions are now handled by parent component
 
-function updateCanvasSize() {
-  // Update SVG viewBox to match canvas dimensions
-  // store.updateSvgViewBox()
-  console.log('updateCanvasSize')
-}
-
-// Coordinate conversion - commented out for simple canvas
-// function toLocalCoords(evt) {
-//   const svgEl = svgContainer.value
-//   if (!svgEl) return { x: 0, y: 0 }
+// Coordinate conversion
+function toLocalCoords(evt) {
+  const svgEl = svgContainer.value
+  if (!svgEl) return { x: 0, y: 0 }
 
-//   const rect = svgEl.getBoundingClientRect()
-//   const x = (evt.clientX - rect.left) / props.zoom
-//   const y = (evt.clientY - rect.top) / props.zoom
-//   return { x, y }
-// }
+  const rect = svgEl.getBoundingClientRect()
+  const x = (evt.clientX - rect.left) / props.zoom
+  const y = (evt.clientY - rect.top) / props.zoom
+  return { x, y }
+}
 
 // Event handlers
 function onScroll() {
@@ -366,20 +353,22 @@ function onKeyUp(evt) {
   }
 }
 
-function onClick() {
-  // Commented out for simple canvas - no selection functionality
-  // if (store.activeTool !== 'select') return
-  // const p = toLocalCoords(evt)
-  // store.setSelectionByPoint(p.x, p.y)
+function onClick(evt) {
+  const p = toLocalCoords(evt)
+  const selectedId = store.setSelectionByPoint(p.x, p.y)
+
+  console.info('Canvas clicked, active tool:', store.activeTool, p)
+  if (selectedId) {
+    console.info('Selection result:', selectedId)
+  }
+
+  if (store.activeTool !== 'select') return
 }
 
-// Commented out for simple canvas - no selection functionality
-// function onSelectionMouseDown(evt) {
-//   if (store.activeTool !== 'select' || !selectionBox.value) return
-//   const p = toLocalCoords(evt)
-//   dragOffset.value = { dx: p.x - selectionBox.value.x, dy: p.y - selectionBox.value.y }
-//   draggingSelection.value = true
-// }
+function onSelectionMouseDown(evt) {
+  // Prevent the click from propagating to the canvas behind the selection
+  evt.stopPropagation()
+}
 
 // Watch for canvas dimension changes and reset pan position
 watch([canvasWidth, canvasHeight], () => {
@@ -395,12 +384,6 @@ let resizeObserver = null
 
 // Initialize canvas
 onMounted(() => {
-  updateCanvasSize()
-
-  // if(store.json) {
-  //   console.log('Initial JSON:', store.json)
-  // }
-
   // Set up resize observer
   if (scrollContainer.value) {
     resizeObserver = new ResizeObserver(() => {

src/pages/EditorPage.vue

@@ -57,7 +57,7 @@ function resetZoom() {
 // }
 
 function handleToolbarClick(item) {
-  console.log('Toolbar item clicked:', item.name)
+  console.info('Toolbar item clicked:', item.name)
 
   switch (item.name) {
     case 'toggle-left':

src/services/svg-io.js

@@ -5,12 +5,8 @@ export function importSvg(xml) {
   ensureIds(doc)
 
   const newXml = new XMLSerializer().serializeToString(doc) // re-serialize to clean up with ensured IDs
-
   const svg = doc.documentElement
-
-  // console.log('SVG root element:', svg)
   const json = domToJson(svg)
-  // console.log('Parsed SVG DOM:', dom)
 
   const title = (doc.querySelector('svg > title')?.textContent || '').trim()
   const viewBox = svg.getAttribute('viewBox') || '0 0 800 600'
@@ -31,7 +27,6 @@ export function importSvg(xml) {
     }
   }
 
-  // console.log('SVG dimensions extracted:', { w, h, viewBox, title })
   return {
     xml: newXml,
     svg,
@@ -51,7 +46,6 @@ export function sanitizeOnExport(svgEl) {
   const disallowedAttrs = [/^on.*/i]
   const walker = svgEl.ownerDocument.createTreeWalker(svgEl, NodeFilter.SHOW_ELEMENT)
   while (walker.nextNode()) {
-    console.log('Sanitizing element:', walker.currentNode.id || walker.currentNode.tagName)
     const el = walker.currentNode
     for (const attr of Array.from(el.attributes)) {
       if (disallowedAttrs.some((re) => re.test(attr.name))) {
@@ -63,11 +57,12 @@ export function sanitizeOnExport(svgEl) {
 }
 
 export function domToJson(node) {
-  const id =
-    node.id ||
-    (node.attributes && node.attributes.getNamedItem('id')?.value) ||
-    new Date().getTime().toString(36) + Math.random().toString(36).slice(2)
-  // console.log('Processing node:', node)
+  let id = node.id || (node.attributes && node.attributes.getNamedItem('id')?.value) || null
+
+  if (!id) {
+    id = 'id-' + new Date().getTime().toString(36) + Math.random().toString(36).slice(2)
+  }
+
   if (node.nodeType === Node.ELEMENT_NODE) {
     const obj = {
       id,