fix: separator positions

holtwick · Apr 25, 2024 · 3f5f847 · 3f5f847
1 parent 4a04f8b
commit 3f5f847
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 79 deletions.
diff --git a/lib/basic/oui-resizeable.styl b/lib/basic/oui-resizeable.styl
@@ -2,60 +2,25 @@
 
 .oui-resizeable {
   position: relative;
+  box-sizing: border-box;
 
   .oui-resizeable-separator {
-    background: red;
-
-    &._left, &._right {
-      position: absolute;
-      width: 1px;
-      height: 100%;
-      cursor: unquote("col-resize");
-      sepHandleSize = px(5);
-
-      &:after {
-        position: absolute;
-        background: rgba(255, 255, 0, 0.314);
-        top: 0;
-        left: -(sepHandleSize * 0.5);
-        width: sepHandleSize + px(1);
-        height: 100%;
-        content: " ";
-      }
-    }
+    box-sizing: border-box;
 
     &._left {
-      left: 0;
+      left: var(--resizeable-border-size, 0);
     }
 
     &._right {
-      right: 0;
-    }
-
-    &._top, &._bottom {
-      position: absolute;
-      height: 1px;
-      width: 100%;
-      cursor: unquote("row-resize");
-      sepHandleSize = px(5);
-
-      &:after {
-        position: absolute;
-        background: rgba(255, 255, 0, 0.314);
-        left: 0;
-        top: -(sepHandleSize * 0.5);
-        height: sepHandleSize + px(1);
-        width: 100%;
-        content: " ";
-      }
+      right: var(--resizeable-border-size, 0);
     }
 
     &._top {
-      top: 0;
+      top: var(--resizeable-border-size, 0);
     }
 
     &._bottom {
-      bottom: 0;
+      bottom: var(--resizeable-border-size, 0);
     }
   }
 }

diff --git a/lib/basic/oui-resizeable.vue b/lib/basic/oui-resizeable.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useLocalStorage } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type { LoggerInterface } from 'zeed'
 import { Logger } from 'zeed'
 import { px } from './lib'
@@ -17,6 +17,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 })
 
+// const modelSize = defineModel<number>({ required: false, default: props.size })
+
 const log: LoggerInterface = Logger('oui-resizeable')
 
 const paneSize = useLocalStorage(`oui.resizeable.${props.name}`, props.size)
@@ -29,23 +31,37 @@ setSize(paneSize.value)
 
 const root = ref()
 
+const borderSize = ref(0)
+
 const style = computed(() => {
-  if (props.side === 'top' || props.side === 'bottom')
-    return { height: px(paneSize.value) }
-  else
-    return { width: px(paneSize.value) }
+  if (props.side === 'top' || props.side === 'bottom') {
+    return {
+      'height': px(paneSize.value),
+      '--resizeable-border-size': borderSize.value,
+    }
+  }
+  else {
+    return {
+      'width': px(paneSize.value),
+      
+      '--resizeable-border-size': borderSize.value,
+    }
+  }
+})
+
+onMounted(() => {
+  const borderSize = Number.parseFloat(window.getComputedStyle(root.value).borderLeftWidth)
 })
 </script>
 
 <template>
   <div ref="root" :style="style" class="oui-resizeable">
     <OuiSeparator
+      v-model="paneSize"
       :side="side"
-      :size="paneSize"
       :min-size="minSize"
       :max-size="maxSize"
       class="oui-resizeable-separator"
-      @size="setSize"
     />
     name={{ name }} size={{ paneSize }}
     <slot />

diff --git a/lib/basic/oui-separator.styl b/lib/basic/oui-separator.styl
@@ -0,0 +1,50 @@
+@require "../../stylus/index.styl";
+
+.oui-separator {
+  background: var(--separator, transparent);
+
+  &:hover {
+    background: var(--separator-hover, var(--fg));
+  }
+
+  &._active {
+    background: var(--separator-active, var(--p1-fg));
+  }
+
+  &._left, &._right {
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    cursor: unquote("col-resize");
+
+    &:after {
+      position: absolute;
+      background: var(--separator-handle, transparent);
+      top: 0;
+      left: unquote("calc(-1 * 0.5 * var(--separator-handle-size, 5px))");
+      width: unquote("calc(var(--separator-handle-size, 5px) + 1px)");
+      height: 100%;
+      content: " ";
+      z-index: -z-index-floating;
+    }
+  }
+
+  &._top, &._bottom {
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    cursor: unquote("row-resize");
+    sepHandleSize = px(5);
+
+    &:after {
+      position: absolute;
+      background: var(--separator-handle, transparent);
+      left: 0;
+      top: unquote("calc(-1 * 0.5 * var(--separator-handle-size, 5px))");
+      height: unquote("calc(var(--separator-handle-size, 5px) + 1px)");
+      width: 100%;
+      content: " ";
+      z-index: -z-index-floating;
+    }
+  }
+}
diff --git a/lib/basic/oui-separator.vue b/lib/basic/oui-separator.vue
@@ -1,37 +1,33 @@
 <script lang="ts" setup>
-import type { LoggerInterface } from 'zeed'
-import { Logger } from 'zeed'
+import { ref } from 'vue'
 import type { OuiDraggableEvent } from './_types'
 import OuiDraggable from './oui-draggable.vue'
 
+import './oui-separator.styl'
+
 const props = withDefaults(defineProps<{
   side: 'top' | 'left' | 'right' | 'bottom'
-  size: number
   minSize: number
   maxSize: number
 }>(), {
 })
 
-const emit = defineEmits<{
-  size: [size: number]
-}>()
+const _active = ref(false)
 
-const log: LoggerInterface = Logger('oui-separator')
+const modelSize = defineModel<number>({ required: true })
 
 function setSize(value: number) {
-  const size = Math.max(props.minSize, Math.min(props.maxSize, value))
-  log('size', size)
-  emit('size', size)
+  modelSize.value = Math.max(props.minSize, Math.min(props.maxSize, value))
 }
 
 let startSize = 0
 
 function doHandleMoveStart(e: OuiDraggableEvent) {
-  startSize = props.size
+  _active.value = true
+  startSize = modelSize.value
 }
 
 function doHandleMove(e: OuiDraggableEvent) {
-  log('move', e.pageX, e.deltaY)
   if (props.side === 'top')
     setSize(startSize + e.moveY)
   else if (props.side === 'bottom')
@@ -43,13 +39,18 @@ function doHandleMove(e: OuiDraggableEvent) {
 }
 
 function doHandleMoveEnd(e: OuiDraggableEvent) {
-  doHandleMoveEnd(e)
+  doHandleMove(e)
+  _active.value = false
 }
 </script>
 
 <template>
   <OuiDraggable
-    :class="`_${side}`"
+    class="oui-separator"
+    :class="{
+      [`_${side}`]: true,
+      _active,
+    }"
     @move-start="doHandleMoveStart"
     @move-end="doHandleMoveEnd"
     @move="doHandleMove"

diff --git a/lib/basic/oui-tableview.story.vue b/lib/basic/oui-tableview.story.vue
@@ -54,7 +54,7 @@ const x = ref(0)
     </template>
     <Variant title="Default">
       <template #default>
-        <h2>Complex example</h2>
+        <h2>Tableview</h2>
         <div>
           <OuiTableview
             v-model="state.selected"

diff --git a/lib/basic/oui-tableview.styl b/lib/basic/oui-tableview.styl
@@ -8,6 +8,7 @@
   overflow-x: auto; // this does not work together with sticky headers
   border-collapse: collapse;
   position: relative;
+  --separator-handle: transparent;
 
   ._tableview {
     &_row {
@@ -88,14 +89,5 @@
         border-top: 2px solid var(--s2-fg);
       }
     }
-
-    &_resize {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-      // background: rgba(255, 0, 0, 0.098);
-      cursor: col-resize;
-    }
   }
 }
diff --git a/lib/basic/oui-tableview.vue b/lib/basic/oui-tableview.vue
@@ -2,7 +2,7 @@
 import { computed, reactive, watch } from 'vue'
 import { arraySetArrayInPlace, arraySum, parseOrderby } from 'zeed'
 import type { OuiTableColumn } from './_types'
-import OuiDraggable from './oui-draggable.vue'
+import OuiSeparator from './oui-separator.vue'
 import OuiVirtualList from './oui-virtual-list.vue'
 import { px } from './lib'
 
@@ -146,10 +146,12 @@ function doSelect(pos: number) {
       </div>
     </div>
     <template v-for="w, i in widths" :key="i">
-      <OuiDraggable
-        class="_tableview_resize"
+      <OuiSeparator
+        v-model="widths[i]"
+        side="right"
+        :min-size="columns[i].minWidth ?? 80"
+        :max-size="columns[i].maxWidth ?? 300"
         :style="`left: ${px(arraySum(widths.slice(0, i + 1)) - 2)}`"
-        @move="({ deltaX }) => widths[i] = Math.max(columns[i].minWidth ?? 80, Math.min(columns[i].maxWidth ?? 300, widths[i] + deltaX))"
       />
     </template>
   </div>

diff --git a/src/app-resizeable.styl b/src/app-resizeable.styl
@@ -1,13 +1,17 @@
 @require "../stylus/index";
 
 .app-resizeable {
+  --separator: var(--t3-fg);
+  --separator-hover: var(--fg);
+  --separator-active: var(--p1-fg);
   use: stack-y;
   width: 100%;
   height: 600;
   background: -blue-100;
 
   .left {
     background: -red-100;
+    border: 3px dotted -red-500;
   }
 
   .middle {
@@ -16,13 +20,16 @@
 
   .right {
     background: -green-100;
+    border: 3px dotted -green-500;
   }
 
   .top {
     background: -purple-100;
+    border: 3px dotted -purple-500;
   }
 
   .bottom {
     background: -orange-100;
+    border: 3px dotted -orange-500;
   }
 }
diff --git a/src/app-resizeable.vue b/src/app-resizeable.vue
@@ -21,7 +21,7 @@ const size = 200
 
 <template>
   <h2>Resizeable</h2>
-  <div class="app-resizeable">
+  <div class="app-resizeable" style="--separator-handle: rgba(255,0,0,0.25)">
     <OuiResizeable side="bottom" :min-size="minSize" :max-size="maxSize" :size="size" class="top" name="top">
       Top
     </OuiResizeable>

diff --git a/src/app-tableview.vue b/src/app-tableview.vue
@@ -45,7 +45,7 @@ const x = ref(0)
 </script>
 
 <template>
-  <h2>Complex example</h2>
+  <h2>Tableview</h2>
   <p>
     <OuiCheckbox v-model="state.fillLast" switch>
       fillLast
@@ -63,7 +63,7 @@ const x = ref(0)
       scrollToEnd
     </OuiCheckbox>
   </p>
-  <div>
+  <div style="--separator-handle: rgba(255,0,0,0.25)">
     <OuiTableview
       v-model="state.selected"
       v-model:sort="state.sort"