From fb79701886764302d00b66caf677fa743fabb333 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 1 Jun 2024 08:19:10 +0800
Subject: [PATCH 1/6] feat: dragging view area show view size

---
 src/SplitPane.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 79d0aa73..28a74063 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -14,6 +14,8 @@ const showOutput = toRef(store, 'showOutput')
 const state = reactive({
   dragging: false,
   split: 50,
+  viewHeight: 0,
+  viewWidth: 0,
 })
 
 const boundSplit = computed(() => {
@@ -38,6 +40,9 @@ function dragMove(e: MouseEvent) {
       : container.value.offsetWidth
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
+    const view = container.value.children[1]
+    state.viewHeight = view.offsetHeight
+    state.viewWidth = view.offsetWidth
   }
 }
 
@@ -70,6 +75,9 @@ function dragEnd() {
       class="right"
       :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
     >
+      <div class="view-size" v-show="state.dragging">
+        {{ `${state.viewWidth}px x ${state.viewHeight}px` }}
+      </div>
       <slot name="right" />
     </div>
 
@@ -97,6 +105,14 @@ function dragEnd() {
   position: relative;
   height: 100%;
 }
+.view-size {
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  font-size: 12px;
+  color: var(--text-light);
+  z-index: 100;
+}
 .left {
   border-right: 1px solid var(--border);
 }

From 478ce8b7f56e8aa40b4cc2ac309ca568719d2e8d Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sun, 2 Jun 2024 07:27:17 +0800
Subject: [PATCH 2/6] feat: update

---
 src/SplitPane.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 28a74063..68c98a9c 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref, toRef } from 'vue'
+import { computed, inject, reactive, ref, toRef, onMounted } from 'vue'
 import { injectKeyStore } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
+const rightView = ref()
 
 // mobile only
 const store = inject(injectKeyStore)!
@@ -40,15 +41,20 @@ function dragMove(e: MouseEvent) {
       : container.value.offsetWidth
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
-    const view = container.value.children[1]
-    state.viewHeight = view.offsetHeight
-    state.viewWidth = view.offsetWidth
+
+    state.viewHeight = rightView.value.offsetHeight
+    state.viewWidth = rightView.value.offsetWidth
   }
 }
 
 function dragEnd() {
   state.dragging = false
 }
+
+onMounted(() => {
+  state.viewHeight = rightView.value.offsetHeight
+  state.viewWidth = rightView.value.offsetWidth
+})
 </script>
 
 <template>
@@ -72,6 +78,7 @@ function dragEnd() {
       <div class="dragger" @mousedown.prevent="dragStart" />
     </div>
     <div
+      ref="rightView"
       class="right"
       :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
     >

From 8a62c4ab0881fa99b29d4483c56d97ac2196b26d Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sun, 2 Jun 2024 08:11:31 +0800
Subject: [PATCH 3/6] feat: update height

---
 src/SplitPane.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 68c98a9c..2a230492 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -42,7 +42,7 @@ function dragMove(e: MouseEvent) {
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 
-    state.viewHeight = rightView.value.offsetHeight
+    state.viewHeight = rightView.value.offsetHeight - 38
     state.viewWidth = rightView.value.offsetWidth
   }
 }
@@ -52,7 +52,7 @@ function dragEnd() {
 }
 
 onMounted(() => {
-  state.viewHeight = rightView.value.offsetHeight
+  state.viewHeight = rightView.value.offsetHeight - 38
   state.viewWidth = rightView.value.offsetWidth
 })
 </script>

From 00a83973f6f6b8fbcb835034f41a591455a0f056 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 3 Jun 2024 07:13:22 +0800
Subject: [PATCH 4/6] feat: update

---
 src/SplitPane.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 2a230492..03afcc87 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -42,8 +42,9 @@ function dragMove(e: MouseEvent) {
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 
-    state.viewHeight = rightView.value.offsetHeight - 38
-    state.viewWidth = rightView.value.offsetWidth
+    const viewElement = rightView.value.querySelector('iframe')
+    state.viewHeight = viewElement.offsetHeight
+    state.viewWidth = viewElement.offsetWidth
   }
 }
 
@@ -52,8 +53,9 @@ function dragEnd() {
 }
 
 onMounted(() => {
-  state.viewHeight = rightView.value.offsetHeight - 38
-  state.viewWidth = rightView.value.offsetWidth
+  const viewElement = rightView.value.querySelector('iframe')
+  state.viewHeight = viewElement.offsetHeight
+  state.viewWidth = viewElement.offsetWidth
 })
 </script>
 

From fb972dd1adbff184addb73fe997a30ade9f681a1 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 3 Jun 2024 21:09:59 +0800
Subject: [PATCH 5/6] feat: update

---
 src/Repl.vue           | 14 +++++++++++++-
 src/SplitPane.vue      | 24 ++++++++++++++----------
 src/output/Output.vue  |  2 +-
 src/output/Preview.vue |  2 +-
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 92c6840a..0d7673a4 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -60,6 +60,7 @@ if (!props.editor) {
 }
 
 const outputRef = ref<InstanceType<typeof Output>>()
+const splitPaneRef = ref<InstanceType<typeof SplitPane>>()
 
 props.store.init()
 
@@ -75,6 +76,13 @@ provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
 provide('preview-theme', toRef(props, 'previewTheme'))
+
+function changeSize() {
+  if (outputRef.value?.previewRef?.container) {
+    splitPaneRef.value?.changeViewSize(outputRef.value.previewRef.container)
+  }
+}
+
 /**
  * Reload the preview iframe
  */
@@ -87,7 +95,11 @@ defineExpose({ reload })
 
 <template>
   <div class="vue-repl">
-    <SplitPane :layout="layout">
+    <SplitPane
+      :layout="layout"
+      ref="splitPaneRef"
+      @draggingChangeSize="changeSize"
+    >
       <template #[editorSlotName]>
         <EditorContainer :editor-component="editor" />
       </template>
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 03afcc87..9fc4b413 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref, toRef, onMounted } from 'vue'
+import { computed, inject, reactive, ref, toRef } from 'vue'
 import { injectKeyStore } from './types'
 
+const emit = defineEmits<{
+  (e: 'draggingChangeSize'): void
+}>()
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
-const rightView = ref()
 
 // mobile only
 const store = inject(injectKeyStore)!
@@ -31,6 +33,8 @@ function dragStart(e: MouseEvent) {
   state.dragging = true
   startPosition = isVertical.value ? e.pageY : e.pageX
   startSplit = boundSplit.value
+
+  emit('draggingChangeSize')
 }
 
 function dragMove(e: MouseEvent) {
@@ -42,9 +46,7 @@ function dragMove(e: MouseEvent) {
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 
-    const viewElement = rightView.value.querySelector('iframe')
-    state.viewHeight = viewElement.offsetHeight
-    state.viewWidth = viewElement.offsetWidth
+    emit('draggingChangeSize')
   }
 }
 
@@ -52,10 +54,13 @@ function dragEnd() {
   state.dragging = false
 }
 
-onMounted(() => {
-  const viewElement = rightView.value.querySelector('iframe')
-  state.viewHeight = viewElement.offsetHeight
-  state.viewWidth = viewElement.offsetWidth
+function changeViewSize(el: HTMLElement) {
+  state.viewHeight = el.offsetHeight
+  state.viewWidth = el.offsetWidth
+}
+
+defineExpose({
+  changeViewSize,
 })
 </script>
 
@@ -80,7 +85,6 @@ onMounted(() => {
       <div class="dragger" @mousedown.prevent="dragStart" />
     </div>
     <div
-      ref="rightView"
       class="right"
       :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
     >
diff --git a/src/output/Output.vue b/src/output/Output.vue
index da613737..058d7d64 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -37,7 +37,7 @@ function reload() {
   previewRef.value?.reload()
 }
 
-defineExpose({ reload })
+defineExpose({ reload, previewRef })
 </script>
 
 <template>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index e345d07b..a86eb827 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -286,7 +286,7 @@ function reload() {
   sandbox.contentWindow?.location.reload()
 }
 
-defineExpose({ reload })
+defineExpose({ reload, container })
 </script>
 
 <template>

From a8dc256cbc15fc0d2970b16335d72cf41ba3f801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Tue, 4 Jun 2024 13:43:36 +0800
Subject: [PATCH 6/6] refactor

---
 src/Repl.vue      | 14 ++------------
 src/SplitPane.vue | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 0d7673a4..30e0bc20 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -60,7 +60,6 @@ if (!props.editor) {
 }
 
 const outputRef = ref<InstanceType<typeof Output>>()
-const splitPaneRef = ref<InstanceType<typeof SplitPane>>()
 
 props.store.init()
 
@@ -76,12 +75,7 @@ provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
 provide('preview-theme', toRef(props, 'previewTheme'))
-
-function changeSize() {
-  if (outputRef.value?.previewRef?.container) {
-    splitPaneRef.value?.changeViewSize(outputRef.value.previewRef.container)
-  }
-}
+provide('preview-ref', () => outputRef.value?.previewRef?.container)
 
 /**
  * Reload the preview iframe
@@ -95,11 +89,7 @@ defineExpose({ reload })
 
 <template>
   <div class="vue-repl">
-    <SplitPane
-      :layout="layout"
-      ref="splitPaneRef"
-      @draggingChangeSize="changeSize"
-    >
+    <SplitPane :layout="layout">
       <template #[editorSlotName]>
         <EditorContainer :editor-component="editor" />
       </template>
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 9fc4b413..0cf34ca0 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref, toRef } from 'vue'
+import {
+  type MaybeRefOrGetter,
+  computed,
+  inject,
+  reactive,
+  ref,
+  toRef,
+  toValue,
+} from 'vue'
 import { injectKeyStore } from './types'
 
-const emit = defineEmits<{
-  (e: 'draggingChangeSize'): void
-}>()
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
+const previewRef = inject<MaybeRefOrGetter<HTMLDivElement>>('preview-ref')!
 
 // mobile only
 const store = inject(injectKeyStore)!
@@ -34,7 +40,7 @@ function dragStart(e: MouseEvent) {
   startPosition = isVertical.value ? e.pageY : e.pageX
   startSplit = boundSplit.value
 
-  emit('draggingChangeSize')
+  changeViewSize()
 }
 
 function dragMove(e: MouseEvent) {
@@ -46,7 +52,7 @@ function dragMove(e: MouseEvent) {
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 
-    emit('draggingChangeSize')
+    changeViewSize()
   }
 }
 
@@ -54,7 +60,8 @@ function dragEnd() {
   state.dragging = false
 }
 
-function changeViewSize(el: HTMLElement) {
+function changeViewSize() {
+  const el = toValue(previewRef)
   state.viewHeight = el.offsetHeight
   state.viewWidth = el.offsetWidth
 }