|
| 1 | +<script setup lang="ts"> |
| 2 | +import { computed, inject, reactive, useTemplateRef } from 'vue' |
| 3 | +import { injectKeyPreviewRef, injectKeyProps } from './types' |
| 4 | +
|
| 5 | +const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>() |
| 6 | +const isVertical = computed(() => props.layout === 'vertical') |
| 7 | +
|
| 8 | +const containerRef = useTemplateRef('container') |
| 9 | +const previewRef = inject(injectKeyPreviewRef)! |
| 10 | +
|
| 11 | +const { store, layoutReverse, splitPaneOptions } = inject(injectKeyProps)! |
| 12 | +
|
| 13 | +const state = reactive({ |
| 14 | + dragging: false, |
| 15 | + split: 50, |
| 16 | + viewHeight: 0, |
| 17 | + viewWidth: 0, |
| 18 | +}) |
| 19 | +
|
| 20 | +const boundSplit = computed(() => { |
| 21 | + const { split } = state |
| 22 | + return split < 20 ? 20 : split > 80 ? 80 : split |
| 23 | +}) |
| 24 | +
|
| 25 | +let startPosition = 0 |
| 26 | +let startSplit = 0 |
| 27 | +
|
| 28 | +function dragStart(e: MouseEvent) { |
| 29 | + state.dragging = true |
| 30 | + startPosition = isVertical.value ? e.pageY : e.pageX |
| 31 | + startSplit = boundSplit.value |
| 32 | +
|
| 33 | + changeViewSize() |
| 34 | +} |
| 35 | +
|
| 36 | +function dragMove(e: MouseEvent) { |
| 37 | + if (containerRef.value && state.dragging) { |
| 38 | + const position = isVertical.value ? e.pageY : e.pageX |
| 39 | + const totalSize = isVertical.value |
| 40 | + ? containerRef.value.offsetHeight |
| 41 | + : containerRef.value.offsetWidth |
| 42 | + const dp = position - startPosition |
| 43 | + state.split = startSplit + +((dp / totalSize) * 100).toFixed(2) |
| 44 | +
|
| 45 | + changeViewSize() |
| 46 | + } |
| 47 | +} |
| 48 | +
|
| 49 | +function dragEnd() { |
| 50 | + state.dragging = false |
| 51 | +} |
| 52 | +
|
| 53 | +function changeViewSize() { |
| 54 | + const el = previewRef.value |
| 55 | + if (!el) return |
| 56 | + state.viewHeight = el.offsetHeight |
| 57 | + state.viewWidth = el.offsetWidth |
| 58 | +} |
| 59 | +</script> |
| 60 | + |
| 61 | +<template> |
| 62 | + <div |
| 63 | + ref="container" class="output-split-pane" :class="{ |
| 64 | + 'osp-dragging': state.dragging, |
| 65 | + reverse: layoutReverse, |
| 66 | + vertical: isVertical, |
| 67 | + }" @mousemove="dragMove" @mouseup="dragEnd" @mouseleave="dragEnd" |
| 68 | + > |
| 69 | + <div class="first" :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }"> |
| 70 | + <slot name="first" /> |
| 71 | + <div class="dragger" @mousedown.prevent="dragStart" /> |
| 72 | + </div> |
| 73 | + <div class="second" :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"> |
| 74 | + <div v-show="state.dragging" class="view-size"> |
| 75 | + {{ `${state.viewWidth}px x ${state.viewHeight}px` }} |
| 76 | + </div> |
| 77 | + <slot name="second" /> |
| 78 | + </div> |
| 79 | + |
| 80 | + <button class="toggler" @click="store.showOutput = !store.showOutput"> |
| 81 | + {{ |
| 82 | + store.showOutput |
| 83 | + ? splitPaneOptions?.codeTogglerText || '< Code' : splitPaneOptions?.outputTogglerText || 'Output >' }} |
| 84 | + </button> |
| 85 | + </div> |
| 86 | +</template> |
| 87 | + |
| 88 | +<style scoped> |
| 89 | +.output-split-pane { |
| 90 | + display: flex; |
| 91 | + flex-direction: row; |
| 92 | + height: 100%; |
| 93 | + position: relative; |
| 94 | +} |
| 95 | +
|
| 96 | +.output-split-pane.osp-dragging { |
| 97 | + cursor: ew-resize; |
| 98 | +} |
| 99 | +
|
| 100 | +.osp-dragging .first, |
| 101 | +.osp-dragging .second { |
| 102 | + pointer-events: none; |
| 103 | +} |
| 104 | +
|
| 105 | +.first, |
| 106 | +.second { |
| 107 | + position: relative; |
| 108 | + height: 100%; |
| 109 | +} |
| 110 | +
|
| 111 | +.view-size { |
| 112 | + position: absolute; |
| 113 | + top: 40px; |
| 114 | + left: 10px; |
| 115 | + font-size: 12px; |
| 116 | + color: var(--text-light); |
| 117 | + z-index: 100; |
| 118 | + background-color: var(--bg-soft); |
| 119 | + padding: 0.5rem; |
| 120 | + border-radius: 4px; |
| 121 | +} |
| 122 | +
|
| 123 | +.first { |
| 124 | + border-right: 1px solid var(--border); |
| 125 | +} |
| 126 | +
|
| 127 | +.dragger { |
| 128 | + position: absolute; |
| 129 | + z-index: 3; |
| 130 | +} |
| 131 | +
|
| 132 | +.vertical .dragger { |
| 133 | + top: auto; |
| 134 | + height: 10px; |
| 135 | + width: 100%; |
| 136 | + left: 0; |
| 137 | + right: 0; |
| 138 | + bottom: -5px; |
| 139 | + cursor: ns-resize; |
| 140 | +} |
| 141 | +
|
| 142 | +.toggler { |
| 143 | + display: none; |
| 144 | + z-index: 3; |
| 145 | + font-family: var(--font-code); |
| 146 | + color: var(--text-light); |
| 147 | + position: absolute; |
| 148 | + left: 50%; |
| 149 | + bottom: 20px; |
| 150 | + background-color: var(--bg); |
| 151 | + padding: 8px 12px; |
| 152 | + border-radius: 8px; |
| 153 | + transform: translateX(-50%); |
| 154 | + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); |
| 155 | +} |
| 156 | +
|
| 157 | +.dark .toggler { |
| 158 | + background-color: var(--bg); |
| 159 | +} |
| 160 | +
|
| 161 | +
|
| 162 | +.output-split-pane:not(.vertical) .dragger { |
| 163 | + top: 0; |
| 164 | + bottom: 0; |
| 165 | + left: auto; |
| 166 | + right: -5px; |
| 167 | + width: 10px; |
| 168 | + height: 100%; |
| 169 | + cursor: ew-resize; |
| 170 | +} |
| 171 | +
|
| 172 | +.output-split-pane.vertical { |
| 173 | + flex-direction: column; |
| 174 | +} |
| 175 | +
|
| 176 | +.output-split-pane.vertical.osp-dragging { |
| 177 | + cursor: ns-resize; |
| 178 | +} |
| 179 | +
|
| 180 | +.vertical .first, |
| 181 | +.vertical .second { |
| 182 | + width: 100%; |
| 183 | +} |
| 184 | +
|
| 185 | +.vertical .first { |
| 186 | + border-right: none; |
| 187 | + border-bottom: 1px solid var(--border); |
| 188 | +} |
| 189 | +</style> |
0 commit comments