Feature request: set splitpanes-min / max in px

[enf644]

Thanks for great component. Unfortunately minimum and maximum sizes are set only in presents. Would be nice to set it in pixels like splitpanes-min='20px' . @antoniandre

[enf644]

Also would be nice to disable maximize function on double click.

[antoniandre]

Hi @enf644, Sorry for late answer. Thank you for your feedback and idea, this would indeed be a convenient feature. As it will require a whole rethinking of the internal calculations, I will keep this in mind for a later version of Splitpanes.

[Jakob-Maudience]

I was just looking to see if either of these were possible, both setting the width in pixels, and disabling the maximize on double click.

👍 x2 watching this thread.

[yf-hk]

Is there any workaround for now?

[antoniandre]

Hi @dzcpy, @Jakob-Maudience, @enf644, Disabling the double click on splitter to maximize is already an option: :dbl-click-splitter="false" https://antoniandre.github.io/splitpanes/#horizontal-layout.

Regarding the ability to set min and max width in pixel, this is not yet possible and I am sorry to say that but I don't think of any workaround for the moment.

This feature is still in my todo list though, not abandoned.

[DelfsEngineering]

Any further ideas on this?

Perhaps as a work around using the resize event one could grab the div size from the DOM then if less than the min px, set the % to the same?

[tommasongr]

This is workaround I came up with:

<template>
  <aside class="h-full">
    <splitpanes ref="inspectorSplitPanes" class="h-full" horizontal>
      <pane size="10">1</pane>
      <pane :min-size="paneMinSize">
        <div class="p-2">
          <inspector-names-table></inspector-names-table>
        </div>
      </pane>
      <pane size="25" :min-size="paneMinSize">
        <inspector-credits-table></inspector-credits-table>
      </pane>
    </splitpanes>
  </aside>
</template>

<script>
import { inject, ref, onMounted } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

import InspectorNamesTable from '@components/inspector/InspectorNamesTable.vue'
import InspectorCreditsTable from '@components/inspector/InspectorCreditsTable.vue'

export default {
  name: 'Inspector',

  components: {
    Splitpanes,
    Pane,
    InspectorNamesTable,
    InspectorCreditsTable,
  },

  setup() {
    const fontStore = inject('fontStore')

    // Refs
    const inspectorSplitPanes = ref(null)

    // Data
    const paneMinSize = ref(0)

    // Life Cycle
    onMounted(() => {
      const resize_ob = new ResizeObserver((entries) => {
        const height = entries[0].contentRect.height
        setPaneMinSize(height, 36)
      })
      resize_ob.observe(inspectorSplitPanes.value.container)
    })

    // Methods
    const setPaneMinSize = (splitpanesHeight, minPixelHeight) => {
      paneMinSize.value = (minPixelHeight * 100) / splitpanesHeight
    }

    return { fontStore, inspectorSplitPanes, paneMinSize }
  },
}
</script>

<style lang="postcss" scoped></style>

It uses a ResizeObserver to trigger a recalculation on dimension change. Here setPaneMinSize(height, 36) you can replace the number with the minimum pixel dimension you want.

I hope it can be useful to someone!