refactor: window.vue to composition api
This commit is contained in:
parent
aa144e803c
commit
7b33ee807e
GPG key ID:
7123E30E441E80DE
1 changed files with 287 additions and 320 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
|
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="emit('closed')">
|
||||||
<div v-if="showing" class="ebkgocck">
|
<div v-if="showing" ref="main" class="ebkgocck">
|
||||||
<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
|
<div class="body _shadow _narrow_" @mousedown="moveToTop" @keydown="onKeydown">
|
||||||
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
||||||
<span class="left">
|
<span class="left">
|
||||||
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
|
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
|
||||||
|
|
@ -32,338 +32,305 @@
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { onMounted, onUnmounted, provide } from 'vue';
|
||||||
import contains from '@/scripts/contains';
|
import contains from '@/scripts/contains';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
import { MenuItem } from '@/types/menu';
|
||||||
|
|
||||||
const minHeight = 50;
|
const minHeight = 50;
|
||||||
const minWidth = 250;
|
const minWidth = 250;
|
||||||
|
|
||||||
function dragListen(fn) {
|
function addMouseListener(fn: (this: Window, ev: MouseEvent) => void): void {
|
||||||
window.addEventListener('mousemove', fn);
|
window.addEventListener('mousemove', fn);
|
||||||
window.addEventListener('touchmove', fn);
|
window.addEventListener('mouseleave', removeMouseListener.bind(null, fn));
|
||||||
window.addEventListener('mouseleave', dragClear.bind(null, fn));
|
window.addEventListener('mouseup', removeMouseListener.bind(null, fn));
|
||||||
window.addEventListener('mouseup', dragClear.bind(null, fn));
|
|
||||||
window.addEventListener('touchend', dragClear.bind(null, fn));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragClear(fn) {
|
function removeMouseListener(fn: (this: Window, ev: MouseEvent) => void): void {
|
||||||
window.removeEventListener('mousemove', fn);
|
window.removeEventListener('mousemove', fn);
|
||||||
window.removeEventListener('touchmove', fn);
|
window.removeEventListener('mouseleave', removeMouseListener.bind(null, fn));
|
||||||
window.removeEventListener('mouseleave', dragClear);
|
window.removeEventListener('mouseup', removeMouseListener.bind(null, fn));
|
||||||
window.removeEventListener('mouseup', dragClear);
|
|
||||||
window.removeEventListener('touchend', dragClear);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
function addTouchListener(fn: (this: Window, ev: TouchEvent) => void): void {
|
||||||
provide: {
|
window.addEventListener('touchmove', fn);
|
||||||
inWindow: true,
|
window.addEventListener('touchend', removeTouchListener.bind(null, fn));
|
||||||
},
|
}
|
||||||
|
|
||||||
props: {
|
function removeTouchListener(fn: (this: Window, ev: TouchEvent) => void): void {
|
||||||
initialWidth: {
|
window.removeEventListener('touchmove', fn);
|
||||||
type: Number,
|
window.removeEventListener('touchend', removeTouchListener.bind(null, fn));
|
||||||
required: false,
|
}
|
||||||
default: 400,
|
|
||||||
},
|
|
||||||
initialHeight: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
canResize: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
mini: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
front: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
contextmenu: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
buttonsLeft: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
buttonsRight: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['closed'],
|
const props = withDefaults(defineProps<{
|
||||||
|
initialWidth?: number;
|
||||||
data() {
|
initialHeight?: number;
|
||||||
return {
|
canResize?: boolean;
|
||||||
showing: true,
|
closeButton?: boolean;
|
||||||
id: Math.random().toString(), // TODO: UUIDとかにする
|
mini?: boolean;
|
||||||
};
|
front?: boolean;
|
||||||
},
|
contextmenu?: MenuItem[];
|
||||||
|
buttonsLeft?: any[];
|
||||||
mounted() {
|
buttonsRight?: any[];
|
||||||
if (this.initialWidth) this.applyTransformWidth(this.initialWidth);
|
}>(), {
|
||||||
if (this.initialHeight) this.applyTransformHeight(this.initialHeight);
|
initialWidth: 400,
|
||||||
|
canResize: false,
|
||||||
this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
|
closeButton: true,
|
||||||
this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 2));
|
mini: false,
|
||||||
|
front: false,
|
||||||
// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
|
contextmenu: () => [] as MenuItem[],
|
||||||
this.top();
|
buttonsLeft: () => [],
|
||||||
|
buttonsRight: () => [],
|
||||||
window.addEventListener('resize', this.onBrowserResize);
|
|
||||||
},
|
|
||||||
|
|
||||||
unmounted() {
|
|
||||||
window.removeEventListener('resize', this.onBrowserResize);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
close() {
|
|
||||||
this.showing = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
onKeydown(evt) {
|
|
||||||
if (evt.which === 27) { // Esc
|
|
||||||
evt.preventDefault();
|
|
||||||
evt.stopPropagation();
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onContextmenu(ev: MouseEvent) {
|
|
||||||
if (this.contextmenu) {
|
|
||||||
os.contextMenu(this.contextmenu, ev);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 最前面へ移動
|
|
||||||
top() {
|
|
||||||
(this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low');
|
|
||||||
},
|
|
||||||
|
|
||||||
onBodyMousedown() {
|
|
||||||
this.top();
|
|
||||||
},
|
|
||||||
|
|
||||||
onHeaderMousedown(evt: MouseEvent) {
|
|
||||||
// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
|
|
||||||
if (evt.button === 2) return;
|
|
||||||
|
|
||||||
const main = this.$el as any;
|
|
||||||
|
|
||||||
if (!contains(main, document.activeElement)) main.focus();
|
|
||||||
|
|
||||||
const position = main.getBoundingClientRect();
|
|
||||||
|
|
||||||
const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
|
|
||||||
const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
|
|
||||||
const moveBaseX = clickX - position.left;
|
|
||||||
const moveBaseY = clickY - position.top;
|
|
||||||
const browserWidth = window.innerWidth;
|
|
||||||
const browserHeight = window.innerHeight;
|
|
||||||
const windowWidth = main.offsetWidth;
|
|
||||||
const windowHeight = main.offsetHeight;
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
|
|
||||||
const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
|
|
||||||
|
|
||||||
let moveLeft = x - moveBaseX;
|
|
||||||
let moveTop = y - moveBaseY;
|
|
||||||
|
|
||||||
// 下はみ出し
|
|
||||||
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
|
||||||
|
|
||||||
// 左はみ出し
|
|
||||||
if (moveLeft < 0) moveLeft = 0;
|
|
||||||
|
|
||||||
// 上はみ出し
|
|
||||||
if (moveTop < 0) moveTop = 0;
|
|
||||||
|
|
||||||
// 右はみ出し
|
|
||||||
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
|
||||||
|
|
||||||
this.$el.style.left = moveLeft + 'px';
|
|
||||||
this.$el.style.top = moveTop + 'px';
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上ハンドル掴み時
|
|
||||||
onTopHandleMousedown(evt) {
|
|
||||||
const main = this.$el as any;
|
|
||||||
|
|
||||||
const base = evt.clientY;
|
|
||||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
|
||||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
const move = me.clientY - base;
|
|
||||||
if (top + move > 0) {
|
|
||||||
if (height + -move > minHeight) {
|
|
||||||
this.applyTransformHeight(height + -move);
|
|
||||||
this.applyTransformTop(top + move);
|
|
||||||
} else { // 最小の高さより小さくなろうとした時
|
|
||||||
this.applyTransformHeight(minHeight);
|
|
||||||
this.applyTransformTop(top + (height - minHeight));
|
|
||||||
}
|
|
||||||
} else { // 上のはみ出し時
|
|
||||||
this.applyTransformHeight(top + height);
|
|
||||||
this.applyTransformTop(0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右ハンドル掴み時
|
|
||||||
onRightHandleMousedown(evt) {
|
|
||||||
const main = this.$el as any;
|
|
||||||
|
|
||||||
const base = evt.clientX;
|
|
||||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
|
||||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
|
||||||
const browserWidth = window.innerWidth;
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
const move = me.clientX - base;
|
|
||||||
if (left + width + move < browserWidth) {
|
|
||||||
if (width + move > minWidth) {
|
|
||||||
this.applyTransformWidth(width + move);
|
|
||||||
} else { // 最小の幅より小さくなろうとした時
|
|
||||||
this.applyTransformWidth(minWidth);
|
|
||||||
}
|
|
||||||
} else { // 右のはみ出し時
|
|
||||||
this.applyTransformWidth(browserWidth - left);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 下ハンドル掴み時
|
|
||||||
onBottomHandleMousedown(evt) {
|
|
||||||
const main = this.$el as any;
|
|
||||||
|
|
||||||
const base = evt.clientY;
|
|
||||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
|
||||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
|
||||||
const browserHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
const move = me.clientY - base;
|
|
||||||
if (top + height + move < browserHeight) {
|
|
||||||
if (height + move > minHeight) {
|
|
||||||
this.applyTransformHeight(height + move);
|
|
||||||
} else { // 最小の高さより小さくなろうとした時
|
|
||||||
this.applyTransformHeight(minHeight);
|
|
||||||
}
|
|
||||||
} else { // 下のはみ出し時
|
|
||||||
this.applyTransformHeight(browserHeight - top);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左ハンドル掴み時
|
|
||||||
onLeftHandleMousedown(evt) {
|
|
||||||
const main = this.$el as any;
|
|
||||||
|
|
||||||
const base = evt.clientX;
|
|
||||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
|
||||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
|
||||||
|
|
||||||
// 動かした時
|
|
||||||
dragListen(me => {
|
|
||||||
const move = me.clientX - base;
|
|
||||||
if (left + move > 0) {
|
|
||||||
if (width + -move > minWidth) {
|
|
||||||
this.applyTransformWidth(width + -move);
|
|
||||||
this.applyTransformLeft(left + move);
|
|
||||||
} else { // 最小の幅より小さくなろうとした時
|
|
||||||
this.applyTransformWidth(minWidth);
|
|
||||||
this.applyTransformLeft(left + (width - minWidth));
|
|
||||||
}
|
|
||||||
} else { // 左のはみ出し時
|
|
||||||
this.applyTransformWidth(left + width);
|
|
||||||
this.applyTransformLeft(0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左上ハンドル掴み時
|
|
||||||
onTopLeftHandleMousedown(evt) {
|
|
||||||
this.onTopHandleMousedown(evt);
|
|
||||||
this.onLeftHandleMousedown(evt);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右上ハンドル掴み時
|
|
||||||
onTopRightHandleMousedown(evt) {
|
|
||||||
this.onTopHandleMousedown(evt);
|
|
||||||
this.onRightHandleMousedown(evt);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 右下ハンドル掴み時
|
|
||||||
onBottomRightHandleMousedown(evt) {
|
|
||||||
this.onBottomHandleMousedown(evt);
|
|
||||||
this.onRightHandleMousedown(evt);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左下ハンドル掴み時
|
|
||||||
onBottomLeftHandleMousedown(evt) {
|
|
||||||
this.onBottomHandleMousedown(evt);
|
|
||||||
this.onLeftHandleMousedown(evt);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 高さを適用
|
|
||||||
applyTransformHeight(height) {
|
|
||||||
(this.$el as any).style.height = Math.min(height, window.innerHeight) + 'px';
|
|
||||||
},
|
|
||||||
|
|
||||||
// 幅を適用
|
|
||||||
applyTransformWidth(width) {
|
|
||||||
(this.$el as any).style.width = Math.min(width, window.innerWidth) + 'px';
|
|
||||||
},
|
|
||||||
|
|
||||||
// Y座標を適用
|
|
||||||
applyTransformTop(top) {
|
|
||||||
(this.$el as any).style.top = top + 'px';
|
|
||||||
},
|
|
||||||
|
|
||||||
// X座標を適用
|
|
||||||
applyTransformLeft(left) {
|
|
||||||
(this.$el as any).style.left = left + 'px';
|
|
||||||
},
|
|
||||||
|
|
||||||
onBrowserResize() {
|
|
||||||
const main = this.$el as any;
|
|
||||||
const position = main.getBoundingClientRect();
|
|
||||||
const browserWidth = window.innerWidth;
|
|
||||||
const browserHeight = window.innerHeight;
|
|
||||||
const windowWidth = main.offsetWidth;
|
|
||||||
const windowHeight = main.offsetHeight;
|
|
||||||
if (position.left < 0) main.style.left = 0; // 左はみ出し
|
|
||||||
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
|
|
||||||
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
|
|
||||||
if (position.top < 0) main.style.top = 0; // 上はみ出し
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(ev: 'closed'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
provide('inWindow', true);
|
||||||
|
|
||||||
|
let showing = $ref(true);
|
||||||
|
let main: HTMLElement = $ref();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.initialWidth) applyTransformWidth(props.initialWidth);
|
||||||
|
if (props.initialHeight) applyTransformHeight(props.initialHeight);
|
||||||
|
|
||||||
|
applyTransformTop((window.innerHeight / 2) - (main.offsetHeight / 2));
|
||||||
|
applyTransformLeft((window.innerWidth / 2) - (main.offsetWidth / 2));
|
||||||
|
// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
|
||||||
|
moveToTop();
|
||||||
|
|
||||||
|
window.addEventListener('resize', onBrowserResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', onBrowserResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
function close(): void {
|
||||||
|
showing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(evt: KeyboardEvent): void {
|
||||||
|
if (evt.key === 'Esc') {
|
||||||
|
evt.preventDefault();
|
||||||
|
evt.stopPropagation();
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onContextmenu(ev: MouseEvent): void {
|
||||||
|
if (props.contextmenu) {
|
||||||
|
os.contextMenu(props.contextmenu, ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveToTop(): void {
|
||||||
|
main.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low').toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClickPos(evt: MouseEvent | TouchEvent): [number, number] {
|
||||||
|
if (evt instanceof MouseEvent) {
|
||||||
|
return [evt.clientX, evt.clientY];
|
||||||
|
}
|
||||||
|
return [evt.touches[0].clientX, evt.touches[0].clientY];
|
||||||
|
}
|
||||||
|
|
||||||
|
function onHeaderMousedown(evt: MouseEvent | TouchEvent): void {
|
||||||
|
// Right-click ignored as it is likely to have attempted to open a context menu
|
||||||
|
if (evt instanceof MouseEvent && evt.button === 2) return;
|
||||||
|
|
||||||
|
if (!contains(main, document.activeElement)) main.focus();
|
||||||
|
|
||||||
|
const position = main.getBoundingClientRect();
|
||||||
|
|
||||||
|
const [clickX, clickY] = getClickPos(evt);
|
||||||
|
const moveBaseX = clickX - position.left;
|
||||||
|
const moveBaseY = clickY - position.top;
|
||||||
|
const browserWidth = window.innerWidth;
|
||||||
|
const browserHeight = window.innerHeight;
|
||||||
|
const windowWidth = main.offsetWidth;
|
||||||
|
const windowHeight = main.offsetHeight;
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
const listener = (me: MouseEvent | TouchEvent): void => {
|
||||||
|
const [x, y] = getClickPos(me);
|
||||||
|
|
||||||
|
let moveLeft = x - moveBaseX;
|
||||||
|
let moveTop = y - moveBaseY;
|
||||||
|
|
||||||
|
// 下はみ出し
|
||||||
|
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
||||||
|
|
||||||
|
// 左はみ出し
|
||||||
|
if (moveLeft < 0) moveLeft = 0;
|
||||||
|
|
||||||
|
// 上はみ出し
|
||||||
|
if (moveTop < 0) moveTop = 0;
|
||||||
|
|
||||||
|
// 右はみ出し
|
||||||
|
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
||||||
|
|
||||||
|
main.style.left = moveLeft + 'px';
|
||||||
|
main.style.top = moveTop + 'px';
|
||||||
|
};
|
||||||
|
|
||||||
|
if (evt instanceof MouseEvent) {
|
||||||
|
addMouseListener((me: MouseEvent) => listener(me));
|
||||||
|
} else {
|
||||||
|
addTouchListener((me: TouchEvent) => listener(me));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上ハンドル掴み時
|
||||||
|
function onTopHandleMousedown(evt: MouseEvent): void {
|
||||||
|
const base = evt.clientY;
|
||||||
|
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||||
|
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
addMouseListener((me: MouseEvent) => {
|
||||||
|
const move = me.clientY - base;
|
||||||
|
if (top + move > 0) {
|
||||||
|
if (height + -move > minHeight) {
|
||||||
|
applyTransformHeight(height + -move);
|
||||||
|
applyTransformTop(top + move);
|
||||||
|
} else { // 最小の高さより小さくなろうとした時
|
||||||
|
applyTransformHeight(minHeight);
|
||||||
|
applyTransformTop(top + (height - minHeight));
|
||||||
|
}
|
||||||
|
} else { // 上のはみ出し時
|
||||||
|
applyTransformHeight(top + height);
|
||||||
|
applyTransformTop(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右ハンドル掴み時
|
||||||
|
function onRightHandleMousedown(evt: MouseEvent): void {
|
||||||
|
const base = evt.clientX;
|
||||||
|
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||||
|
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||||
|
const browserWidth = window.innerWidth;
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
addMouseListener((me: MouseEvent) => {
|
||||||
|
const move = me.clientX - base;
|
||||||
|
if (left + width + move < browserWidth) {
|
||||||
|
if (width + move > minWidth) {
|
||||||
|
applyTransformWidth(width + move);
|
||||||
|
} else { // 最小の幅より小さくなろうとした時
|
||||||
|
applyTransformWidth(minWidth);
|
||||||
|
}
|
||||||
|
} else { // 右のはみ出し時
|
||||||
|
applyTransformWidth(browserWidth - left);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下ハンドル掴み時
|
||||||
|
function onBottomHandleMousedown(evt: MouseEvent): void {
|
||||||
|
const base = evt.clientY;
|
||||||
|
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||||
|
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||||
|
const browserHeight = window.innerHeight;
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
addMouseListener((me: MouseEvent) => {
|
||||||
|
const move = me.clientY - base;
|
||||||
|
if (top + height + move < browserHeight) {
|
||||||
|
if (height + move > minHeight) {
|
||||||
|
applyTransformHeight(height + move);
|
||||||
|
} else { // 最小の高さより小さくなろうとした時
|
||||||
|
applyTransformHeight(minHeight);
|
||||||
|
}
|
||||||
|
} else { // 下のはみ出し時
|
||||||
|
applyTransformHeight(browserHeight - top);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左ハンドル掴み時
|
||||||
|
function onLeftHandleMousedown(evt: MouseEvent): void {
|
||||||
|
const base = evt.clientX;
|
||||||
|
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||||
|
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||||
|
|
||||||
|
// 動かした時
|
||||||
|
addMouseListener((me: MouseEvent) => {
|
||||||
|
const move = me.clientX - base;
|
||||||
|
if (left + move > 0) {
|
||||||
|
if (width + -move > minWidth) {
|
||||||
|
applyTransformWidth(width + -move);
|
||||||
|
applyTransformLeft(left + move);
|
||||||
|
} else { // 最小の幅より小さくなろうとした時
|
||||||
|
applyTransformWidth(minWidth);
|
||||||
|
applyTransformLeft(left + (width - minWidth));
|
||||||
|
}
|
||||||
|
} else { // 左のはみ出し時
|
||||||
|
applyTransformWidth(left + width);
|
||||||
|
applyTransformLeft(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左上ハンドル掴み時
|
||||||
|
function onTopLeftHandleMousedown(evt: MouseEvent): void {
|
||||||
|
onTopHandleMousedown(evt);
|
||||||
|
onLeftHandleMousedown(evt);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右上ハンドル掴み時
|
||||||
|
function onTopRightHandleMousedown(evt: MouseEvent): void {
|
||||||
|
onTopHandleMousedown(evt);
|
||||||
|
onRightHandleMousedown(evt);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右下ハンドル掴み時
|
||||||
|
function onBottomRightHandleMousedown(evt: MouseEvent): void {
|
||||||
|
onBottomHandleMousedown(evt);
|
||||||
|
onRightHandleMousedown(evt);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左下ハンドル掴み時
|
||||||
|
function onBottomLeftHandleMousedown(evt: MouseEvent): void {
|
||||||
|
onBottomHandleMousedown(evt);
|
||||||
|
onLeftHandleMousedown(evt);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 高さを適用
|
||||||
|
function applyTransformHeight(height: number): void {
|
||||||
|
main.style.height = Math.min(height, window.innerHeight) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 幅を適用
|
||||||
|
function applyTransformWidth(width: number): void {
|
||||||
|
main.style.width = Math.min(width, window.innerWidth) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Y座標を適用
|
||||||
|
function applyTransformTop(top: number): void {
|
||||||
|
main.style.top = top + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// X座標を適用
|
||||||
|
function applyTransformLeft(left: number): void {
|
||||||
|
main.style.left = left + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBrowserResize(): void {
|
||||||
|
const position = main.getBoundingClientRect();
|
||||||
|
const browserWidth = window.innerWidth;
|
||||||
|
const browserHeight = window.innerHeight;
|
||||||
|
const windowWidth = main.offsetWidth;
|
||||||
|
const windowHeight = main.offsetHeight;
|
||||||
|
if (position.left < 0) main.style.left = '0'; // 左はみ出し
|
||||||
|
if (position.top + windowHeight > browserHeight) main.style.top = (browserHeight - windowHeight) + 'px'; // 下はみ出し
|
||||||
|
if (position.left + windowWidth > browserWidth) main.style.left = (browserWidth - windowWidth) + 'px'; // 右はみ出し
|
||||||
|
if (position.top < 0) main.style.top = '0'; // 上はみ出し
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue