From b28d20fc1a4e0f59d713ca3f138bd8c839f3fbe0 Mon Sep 17 00:00:00 2001
From: XiNGRZ <hi@xingrz.me>
Date: Sat, 6 Apr 2024 21:42:45 +0800
Subject: [PATCH] Unbind row indexes from BSRow

This significantly increased performance of inserting new lines, as Vue
doesn't need to dispatch changes of row index of the rows below newly
inserted row. Instead, the focus state of each row is revalidate only when
needed.
---
 src/components/BSMap.vue              | 10 +++++++++-
 src/components/BSMap/BSCell.vue       |  5 ++---
 src/components/BSMap/BSRow.vue        | 23 ++++++++++++++++++-----
 src/components/BSMap/BSSelectable.vue | 22 +++-------------------
 src/components/BSMap/BSText.vue       |  5 ++---
 5 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/BSMap.vue b/src/components/BSMap.vue
index da83c6b..f3cd127 100644
--- a/src/components/BSMap.vue
+++ b/src/components/BSMap.vue
@@ -1,6 +1,6 @@
 <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" :focused="isFocused(index)"
       @select="(offset, length) => handleSelect(index, offset, length)" />
   </div>
 </template>
@@ -41,6 +41,14 @@ const style = computed(() => ({
   '--bs-map-cols': cols.value,
 }) as CSSProperties);
 
+function isFocused(row: number): boolean {
+  const { selection } = editorStore;
+  return (
+    typeof selection != 'undefined' &&
+    selection.row == row
+  );
+}
+
 function handleSelect(row: number, offset: number, length: number): void {
   editorStore.selection = {
     row: row,
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
index 0da93ce..f38b110 100644
--- a/src/components/BSMap/BSCell.vue
+++ b/src/components/BSMap/BSCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
+  <BSSelectable v-slot="{ selectable }" :focused="props.focused">
     <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)" />
@@ -23,8 +23,7 @@ import BSIcon from './BSIcon.vue';
 
 const props = defineProps<{
   src: string;
-  row: number;
-  offset: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
index 9988b17..04b5232 100644
--- a/src/components/BSMap/BSRow.vue
+++ b/src/components/BSMap/BSRow.vue
@@ -1,12 +1,12 @@
 <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"
-        @select="() => emit('select', offset, part.length)" />
+      <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part"
+        :focused="isFocused(offset, part.length)" @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" @select="() => emit('select', offset, part.length)" />
+      <BSText v-for="({ part, offset, align }, index) in  texts" :key="index" :src="part" :align="align"
+        :focused="isFocused(offset, part.length)" @select="() => emit('select', offset, part.length)" />
     </div>
   </div>
 </template>
@@ -14,6 +14,7 @@
 <script lang="ts" setup>
 import { computed, defineEmits, defineProps } from 'vue';
 
+import { useEditorStore } from '@/stores/editor';
 import splitWithOffset from '@/utils/splitWithOffset';
 import styleFromParams from '@/utils/styleFromParams';
 
@@ -22,13 +23,15 @@ import BSText from './BSText.vue';
 
 const props = defineProps<{
   src: string;
-  row: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'select', offset: number, length: number): void;
 }>();
 
+const editorStore = useEditorStore();
+
 const parts = computed(() => {
   const [cells, ...texts] = splitWithOffset(props.src, '~~');
   return { cells, texts };
@@ -41,6 +44,16 @@ const texts = computed(() => parts.value.texts
   .map((part, index, { length }) => ({ ...part, align: length == 1 ? 2 : index + 1 }))
   .filter(({ part }) => !!part));
 
+function isFocused(offset: number, length: number): boolean {
+  const { selection } = editorStore;
+  return (
+    props.focused &&
+    typeof selection != 'undefined' &&
+    selection.offset >= offset &&
+    selection.offset <= offset + length
+  );
+}
+
 const rowStyle = computed(() => styleFromParams(parts.value.texts[4]?.part));
 </script>
 
diff --git a/src/components/BSMap/BSSelectable.vue b/src/components/BSMap/BSSelectable.vue
index 2ea1a8b..35c2b88 100644
--- a/src/components/BSMap/BSSelectable.vue
+++ b/src/components/BSMap/BSSelectable.vue
@@ -1,32 +1,16 @@
 <template>
   <slot :selectable="{
     [$style.selectable]: true,
-    [$style.focused]: focused,
+    [$style.focused]: props.focused,
   }" />
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
-
-import { useEditorStore } from '@/stores/editor';
+import { defineProps } from 'vue';
 
 const props = defineProps<{
-  row: number;
-  offset: number;
-  length: number;
+  focused: boolean;
 }>();
-
-const editorStore = useEditorStore();
-
-const focused = computed(() => {
-  const { selection } = editorStore;
-  return (
-    typeof selection != 'undefined' &&
-    selection.row == props.row &&
-    selection.offset >= props.offset &&
-    selection.offset <= props.offset + props.length
-  );
-});
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
index db6ddfa..2db86ef 100644
--- a/src/components/BSMap/BSText.vue
+++ b/src/components/BSMap/BSText.vue
@@ -1,5 +1,5 @@
 <template>
-  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
+  <BSSelectable v-slot="{ selectable }" :focused="props.focused">
     <div :class="[selectable, $style.text]" :data-align="align" :title="props.src" @click="() => emit('select')">
       {{ props.src }}
     </div>
@@ -14,8 +14,7 @@ import BSSelectable from './BSSelectable.vue';
 const props = defineProps<{
   src: string;
   align: number;
-  row: number;
-  offset: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{