parent
3fe1c862f6
commit
dc27ba6f03
|
@ -4,12 +4,13 @@
|
||||||
|
|
||||||
<div :class="$style.main">
|
<div :class="$style.main">
|
||||||
<XStatusBars/>
|
<XStatusBars/>
|
||||||
<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
|
<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
|
||||||
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
||||||
<section
|
<section
|
||||||
v-for="ids in layout"
|
v-for="ids in layout"
|
||||||
:class="$style.section"
|
:class="$style.section"
|
||||||
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
|
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
|
||||||
|
@wheel.self="onWheel"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
|
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
|
||||||
|
@ -19,6 +20,7 @@
|
||||||
:class="$style.column"
|
:class="$style.column"
|
||||||
:column="columns.find(c => c.id === id)"
|
:column="columns.find(c => c.id === id)"
|
||||||
:isStacked="ids.length > 1"
|
:isStacked="ids.length > 1"
|
||||||
|
@headerWheel="onWheel"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
||||||
|
@ -196,15 +198,14 @@ const onContextmenu = (ev) => {
|
||||||
}], ev);
|
}], ev);
|
||||||
};
|
};
|
||||||
|
|
||||||
document.documentElement.style.overflowY = 'hidden';
|
function onWheel(ev: WheelEvent) {
|
||||||
document.documentElement.style.scrollBehavior = 'auto';
|
if (ev.deltaX === 0) {
|
||||||
window.addEventListener('wheel', (ev) => {
|
|
||||||
if (ev.target === columnsEl && ev.deltaX === 0) {
|
|
||||||
columnsEl.scrollLeft += ev.deltaY;
|
|
||||||
} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
|
|
||||||
columnsEl.scrollLeft += ev.deltaY;
|
columnsEl.scrollLeft += ev.deltaY;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
|
document.documentElement.style.overflowY = 'hidden';
|
||||||
|
document.documentElement.style.scrollBehavior = 'auto';
|
||||||
|
|
||||||
loadDeck();
|
loadDeck();
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
@dragstart="onDragstart"
|
@dragstart="onDragstart"
|
||||||
@dragend="onDragend"
|
@dragend="onDragend"
|
||||||
@contextmenu.prevent.stop="onContextmenu"
|
@contextmenu.prevent.stop="onContextmenu"
|
||||||
|
@wheel="emit('headerWheel', $event)"
|
||||||
>
|
>
|
||||||
<svg viewBox="0 0 256 128" :class="$style.tabShape">
|
<svg viewBox="0 0 256 128" :class="$style.tabShape">
|
||||||
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
|
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
|
||||||
|
@ -56,6 +57,10 @@ const props = withDefaults(defineProps<{
|
||||||
naked: false,
|
naked: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(ev: 'headerWheel', ctx: WheelEvent): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
let body = $shallowRef<HTMLDivElement | null>();
|
let body = $shallowRef<HTMLDivElement | null>();
|
||||||
|
|
||||||
let dragging = $ref(false);
|
let dragging = $ref(false);
|
||||||
|
|
Loading…
Reference in New Issue