Get rid of calculating element sizes by split width

Author: xingrz

src/App.vue

@@ -2,11 +2,11 @@
   <resizable v-model:width="width">
     <template v-slot:default>
       <editor v-model:content="content" v-model:selection="selection" v-model:scroll="scroll" :icons="iconStore.icons"
-        :size="editorStore.size" :width="width" />
+        :size="editorStore.size" />
     </template>
     <template v-slot:fixed>
       <scroller v-model:scroll="scroll">
-        <BSMap v-bind:content="content" v-bind:size="editorStore.size" v-bind:width="width" />
+        <BSMap v-bind:content="content" v-bind:size="editorStore.size" />
       </scroller>
     </template>
   </resizable>

src/components/BSMap.vue

@@ -1,7 +1,6 @@
 <template>
   <div :style="{ lineHeight: `${size}px` }">
-    <BSRow v-for="(row, index) in rows" :key="index" :content="row" :cols="cols" :size="size" :width="width"
-      :row="index" />
+    <BSRow v-for="(row, index) in rows" :key="index" :content="row" :cols="cols" :size="size" :row="index" />
   </div>
 </template>
 
@@ -13,7 +12,6 @@ import BSRow from './BSMap/BSRow.vue';
 const props = defineProps<{
   content: string;
   size: number;
-  width: number;
 }>();
 
 const rows = computed(() => props.content.split('\n'));

src/components/BSMap/BSRow.vue

@@ -5,7 +5,7 @@
         :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, cell.length) }" :content="cell"
         :size="size" :row="row" :offset="offset" />
     </div>
-    <div :class="$style.texts" :style="{ maxWidth: `${textMaxWidth}px` }">
+    <div :class="$style.texts">
       <BSText v-for="({ text, offset, align }, index) in texts" :key="index"
         :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, text.length) }" :content="text"
         :align="align" :row="row" :offset="offset" />
@@ -25,7 +25,6 @@ const props = defineProps<{
   content: string;
   cols: number;
   size: number;
-  width: number;
   row: number;
 }>();
 
@@ -58,8 +57,6 @@ const texts = computed(() => {
 
 const iconWidth = computed(() => props.size * props.cols);
 
-const textMaxWidth = computed(() => props.width - iconWidth.value);
-
 function isFocused(row: number, offset: number, length: number): boolean {
   const { selection } = editorStore;
   return (
@@ -77,13 +74,13 @@ function isFocused(row: number, offset: number, length: number): boolean {
   align-items: stretch;
 
   >.cells {
+    flex: 0 0 auto;
     display: flex;
     justify-content: center;
   }
 
   >.texts {
-    flex-grow: 1;
-    flex-shrink: 1000;
+    flex: 1 1 auto;
     display: flex;
   }
 

src/components/Editor.vue

@@ -23,7 +23,7 @@ import '@/editor/rdt';
 import ISelection from '@/types/selection';
 import IIcon from '@/types/icon';
 
-import useOnWindowResize from '@/composables/useOnWindowResize';
+import useClientSize from '@/composables/useClientSize';
 
 interface IRenderer extends VirtualRenderer {
   scrollTop: number;
@@ -36,7 +36,6 @@ const props = defineProps<{
   scroll: number;
   icons: Record<string, IIcon | null>;
   size: number;
-  width: number;
 }>();
 
 const emit = defineEmits<{
@@ -45,14 +44,11 @@ const emit = defineEmits<{
   (e: 'update:scroll', scroll: number): void;
 }>();
 
-const { width, scroll, selection } = toRefs(props);
+const { scroll, selection } = toRefs(props);
 
 let editor: IEditor | undefined;
 let renderer: IRenderer | undefined;
 
-useOnWindowResize(() => editor?.resize());
-watch(width, () => editor?.resize());
-
 watch(scroll, (scroll) => renderer?.scrollToY(scroll));
 
 function applySelection(row: number, offset: number, length: number) {
@@ -74,7 +70,7 @@ watch(selection, (selection) => {
   }
 });
 
-const holder = ref<HTMLElement | null>(null);
+const holder = ref<HTMLElement | undefined>();
 onMounted(() => {
   if (holder.value) {
     editor = brace.edit(holder.value);
@@ -112,6 +108,9 @@ onMounted(() => {
   }
 });
 
+const holderSize = useClientSize(holder);
+watch(holderSize, () => editor?.resize());
+
 function getCompletions(
   editor: IEditor,
   session: IEditSession,

src/composables/useClientSize.ts

@@ -0,0 +1,39 @@
+import { onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+export default function useClientSize(elementRef: Ref<HTMLElement | undefined>): Ref<Size | undefined> {
+  const getSize = (target: HTMLElement | undefined): Size | undefined => target && {
+    width: target.clientWidth,
+    height: target.clientHeight,
+  };
+
+  const size = ref<Size | undefined>(getSize(elementRef.value));
+
+  const observer = new ResizeObserver(() => {
+    size.value = getSize(elementRef.value);
+  });
+
+  watch(elementRef, () => {
+    if (elementRef.value) {
+      observer.observe(elementRef.value);
+    }
+  });
+
+  onMounted(() => {
+    if (elementRef.value) {
+      observer.observe(elementRef.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (elementRef.value) {
+      observer.unobserve(elementRef.value);
+    }
+  });
+
+  return size;
+}