Dispatch select event to BSMap root

This is necessary for the next action we want to take place to decouple
`row` prop from each BSRow component.

src/components/BSMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="$style.map" :style="style">
-    <BSRow v-for="({ row, id }, index) in rows" :key="id" :src="row" :row="index" />
+    <BSRow v-for="({ row, id }, index) in rows" :key="id" :src="row" :row="index"
+      @select="(offset, length) => handleSelect(index, offset, length)" />
   </div>
 </template>
 
@@ -13,13 +14,17 @@ import {
 
 import { max } from 'radash';
 
+import { useEditorStore } from '@/stores/editor';
+
 import BSRow from './BSMap/BSRow.vue';
 
 const props = defineProps<{
   content: string;
   size: number;
 }>();
 
+const editorStore = useEditorStore();
+
 const rows = computed(() => {
   const appears: Record<string, number> = {};
   return props.content.split('\n').map((row) => {
@@ -35,6 +40,15 @@ const style = computed(() => ({
   '--bs-map-size': props.size,
   '--bs-map-cols': cols.value,
 }) as CSSProperties);
+
+function handleSelect(row: number, offset: number, length: number): void {
+  editorStore.selection = {
+    row: row,
+    offset: offset,
+    length: length,
+    from: 'preview',
+  };
+}
 </script>
 
 <style lang="scss" module>

src/components/BSMap/BSCell.vue

@@ -1,6 +1,6 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
-    <div :class="[selectable, $style.cell]" :title="props.src" @click="handleClick" :style="style">
+    <div :class="[selectable, $style.cell]" :title="props.src" :style="style" @click="() => emit('select')">
       <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :class="$style.icon" :src="icon"
         @ratio="(ratio: number) => updateRatio(index, ratio)" />
     </div>
@@ -11,11 +11,11 @@
 import {
   type CSSProperties,
   computed,
+  defineEmits,
   defineProps,
   ref,
 } from 'vue';
 
-import { useEditorStore } from '@/stores/editor';
 import styleFromParams from '@/utils/styleFromParams';
 
 import BSSelectable from './BSSelectable.vue';
@@ -27,7 +27,9 @@ const props = defineProps<{
   offset: number;
 }>();
 
-const editorStore = useEditorStore();
+const emit = defineEmits<{
+  (e: 'select'): void;
+}>();
 
 const ratio = ref(1);
 
@@ -46,15 +48,6 @@ const style = computed(() => ({
   '--bs-map-cell-ratio': (ratio.value == 1 ? undefined : ratio.value),
 }) as CSSProperties);
 
-function handleClick(): void {
-  editorStore.selection = {
-    row: props.row,
-    offset: props.offset,
-    length: props.src.length,
-    from: 'preview',
-  };
-}
-
 function updateRatio(layer: number, newRatio: number): void {
   if (layer == 0) {
     // Only ratio of the first icon affects the cell

src/components/BSMap/BSRow.vue

@@ -1,17 +1,18 @@
 <template>
   <div :class="$style.row">
     <div :class="$style.cells" :style="rowStyle">
-      <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part" :row="row" :offset="offset" />
+      <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part" :row="row" :offset="offset"
+        @select="() => emit('select', offset, part.length)" />
     </div>
     <div :class="$style.texts">
       <BSText v-for="({ part, offset, align }, index) in  texts" :key="index" :src="part" :align="align" :row="row"
-        :offset="offset" />
+        :offset="offset" @select="() => emit('select', offset, part.length)" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
+import { computed, defineEmits, defineProps } from 'vue';
 
 import splitWithOffset from '@/utils/splitWithOffset';
 import styleFromParams from '@/utils/styleFromParams';
@@ -24,6 +25,10 @@ const props = defineProps<{
   row: number;
 }>();
 
+const emit = defineEmits<{
+  (e: 'select', offset: number, length: number): void;
+}>();
+
 const parts = computed(() => {
   const [cells, ...texts] = splitWithOffset(props.src, '~~');
   return { cells, texts };

src/components/BSMap/BSText.vue

@@ -1,15 +1,13 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
-    <div :class="[selectable, $style.text]" :data-align="align" :title="props.src" @click="handleClick">
+    <div :class="[selectable, $style.text]" :data-align="align" :title="props.src" @click="() => emit('select')">
       {{ props.src }}
     </div>
   </BSSelectable>
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue';
-
-import { useEditorStore } from '@/stores/editor';
+import { defineEmits, defineProps } from 'vue';
 
 import BSSelectable from './BSSelectable.vue';
 
@@ -20,16 +18,9 @@ const props = defineProps<{
   offset: number;
 }>();
 
-const editorStore = useEditorStore();
-
-function handleClick(): void {
-  editorStore.selection = {
-    row: props.row,
-    offset: props.offset,
-    length: props.src.length,
-    from: 'preview',
-  };
-}
+const emit = defineEmits<{
+  (e: 'select'): void;
+}>();
 </script>
 
 <style lang="scss" module>