@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/component/KgModal/KgModal.service.ts

@@ -0,0 +1,560 @@
+import { ____ERROR____ } from '@kengic/core.core';
+import { useWindowSize } from '@vueuse/core';
+import { computed, ComputedRef, onBeforeUnmount, onUnmounted, Ref, ref, watch } from 'vue';
+import { useKg } from '../../config';
+import { KgModalProps } from './KgModal';
+import { KG_MODAL_BORDER_WIDTH } from './KgModal.model';
+
+//region 拖拽改变位置
+//----------------------------------------------------------------------------------------------------
+/**
+ * 拖拽改变位置.
+ *
+ * @param param.getProps 组件参数.
+ * @param param.domRef 页面特殊元素对象.
+ */
+export function useDragToMove(param: { domRef: Ref<HTMLDivElement | null>; getKgIsDragToMove: ComputedRef<boolean>; getVisible: ComputedRef<boolean> }) {
+    const { getVisible, getKgIsDragToMove, domRef } = param;
+
+    const kg = useKg();
+
+    // 支持拖拽改变位置
+    if (kg.option?.KgModal?.drag?.on !== true) {
+        return;
+    }
+
+    const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+    //region DATA
+    //----------------------------------------------------------------------------------------------------
+    let minLeft = 0;
+    let maxLeft = 0;
+    let minTop = 0;
+    let maxTop = 0;
+
+    let oldClientX = 0;
+    let oldClientY = 0;
+
+    let oldLeft = 0;
+    let oldTop = 0;
+
+    let mousemoveEventListener = {
+        remove: () => {},
+    };
+    let mouseupEventListener = {
+        remove: () => {},
+    };
+
+    /** 弹窗元素. */
+    let modalWrapElement = computed(() => (domRef.value?.parentElement?.parentElement?.parentElement?.parentElement ?? null) as HTMLDivElement | null);
+    let modalElement = computed(() => (domRef.value?.parentElement?.parentElement?.parentElement ?? null) as HTMLDivElement | null);
+    let modalHeaderElement = computed(() => (modalWrapElement.value?.querySelector('.ant-modal-header') ?? null) as HTMLDivElement | null);
+    //endregion
+
+    //region WATCH
+    //----------------------------------------------------------------------------------------------------
+    watch(
+        [getKgIsDragToMove, getVisible, modalWrapElement, modalElement, modalHeaderElement],
+        ([kgIsDragToMove, visible, modalWrapElement, modalElement, modalHeaderElement]) => {
+            if (!kgIsDragToMove || !visible || !modalWrapElement || !modalElement || !modalHeaderElement) {
+                modalHeaderElement?.removeEventListener('mousedown', onMouseDown);
+                return;
+            }
+
+            // 属性 data-drag 有值, 表示已经启用了拖动功能, 无需再次启用,
+            const draggable = modalWrapElement.getAttribute('data-drag');
+            if (draggable !== null) {
+                return;
+            }
+
+            modalWrapElement.setAttribute('data-drag', 'true');
+            modalHeaderElement.style.cursor = 'move';
+            modalHeaderElement.addEventListener('mousedown', onMouseDown);
+        },
+        { immediate: true },
+    );
+    //endregion
+
+    //region FUNCTION
+    //----------------------------------------------------------------------------------------------------
+    /**
+     * 监听事件.
+     *
+     * @param target 被监听的对象.
+     * @param event 事件名称.
+     * @param listener 事件监听函数.
+     */
+    function addEventListener<K extends keyof HTMLElementEventMap>(target: HTMLElement, event: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => any): { remove: () => void } {
+        target.addEventListener(event, listener);
+
+        return {
+            remove: () => target.removeEventListener(event, listener),
+        };
+    }
+
+    /**
+     * 移除所有的事件监听函数.
+     */
+    function removeEventListeners() {
+        mousemoveEventListener.remove();
+        mouseupEventListener.remove();
+    }
+
+    /**
+     * 更新位置.
+     *
+     * @param param.event 鼠标事件对象.
+     */
+    function update(param: { event: MouseEvent }) {
+        const { event } = param ?? {};
+
+        if (!modalElement.value) {
+            return;
+        }
+
+        // 计算要移动的距离
+        let left = event.clientX - oldClientX;
+        let top = event.clientY - oldClientY;
+
+        // 边界处理
+        if (-left > minLeft) {
+            left = -minLeft;
+        } else if (left > maxLeft) {
+            left = maxLeft;
+        }
+
+        if (-top > minTop) {
+            top = -minTop;
+        } else if (top > maxTop) {
+            top = maxTop;
+        }
+
+        const newLeft = oldLeft + left;
+        const newTop = oldTop + top;
+
+        modalElement.value.style.left = `${newLeft}px`;
+        modalElement.value.style.top = `${newTop}px`;
+    }
+
+    /**
+     * mousedown 事件回调.
+     *
+     * @param event 鼠标事件对象.
+     */
+    function onMouseDown(event: MouseEvent) {
+        if (!event) {
+            return;
+        }
+
+        if (!modalWrapElement.value || !modalElement.value || !modalHeaderElement.value) {
+            return;
+        }
+
+        document.body.classList.add('kg-modal-dragging');
+
+        // 鼠标按下, 计算当前元素距离可视区的距离
+        oldClientX = event.clientX;
+        oldClientY = event.clientY;
+
+        minLeft = modalElement.value.offsetLeft;
+        maxLeft = windowWidth.value - modalElement.value.offsetLeft - modalHeaderElement.value.offsetWidth - KG_MODAL_BORDER_WIDTH * 2;
+        minTop = modalElement.value.offsetTop;
+        maxTop = windowHeight.value - modalElement.value.offsetTop - modalHeaderElement.value.offsetHeight - KG_MODAL_BORDER_WIDTH;
+
+        oldLeft = Number(getComputedStyle(modalElement.value)['left'].replace(/px/g, ''));
+        oldTop = Number(getComputedStyle(modalElement.value)['top'].replace(/px/g, ''));
+
+        mousemoveEventListener = addEventListener(document.documentElement, 'mousemove', (event) => onMouseMove({ event: event }));
+        mouseupEventListener = addEventListener(document.documentElement, 'mouseup', (event) => onMouseUp({ event: event }));
+    }
+
+    /**
+     * mousemove 事件回调.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function onMouseMove(param: { event: MouseEvent }) {
+        update(param);
+    }
+
+    /**
+     * mouseup 事件回调.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function onMouseUp(param: { event: MouseEvent }) {
+        update(param);
+        removeEventListeners();
+
+        document.body.classList.remove('kg-modal-dragging');
+    }
+    //endregion
+
+    //region LIFECYCLE
+    //----------------------------------------------------------------------------------------------------
+    onUnmounted(() => {
+        removeEventListeners();
+        modalHeaderElement.value?.removeEventListener('mousedown', onMouseDown);
+    });
+    //endregion
+}
+
+//----------------------------------------------------------------------------------------------------
+//endregion
+
+//region 拖拽改变大小
+//----------------------------------------------------------------------------------------------------
+
+type HandleType = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
+
+/**
+ * 拖拽改变大小.
+ *
+ * @param param.props 组件参数.
+ * @param param.domRef 页面上的那个特殊元素对象, 专门用于获取其他元素对象.
+ * @param param.getProps 计算后的组件参数.
+ */
+export function useDragToResize(param: { domRef: Ref<HTMLDivElement | null>; getProps: Ref<KgModalProps> }) {
+    const { getProps, domRef } = param;
+
+    const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+    /** 弹窗头部高度. */
+    const MODAL_HEADER_HEIGHT = 48;
+    /** 默认最小宽度. */
+    const DEFAULT_MIN_WIDTH = 400;
+
+    //region DATA
+    //----------------------------------------------------------------------------------------------------
+    let modalContentResizeObserver: ResizeObserver | null = null;
+    /** 弹窗元素. */
+    let modalElement = computed<HTMLDivElement | null>(() => (domRef.value?.parentElement?.parentElement?.parentElement ?? null) as HTMLDivElement | null);
+    let modalHeaderElement = computed<HTMLDivElement | null>(() => (modalElement.value?.querySelector('.ant-modal-header') ?? null) as HTMLDivElement | null);
+    let modalFooterElement = computed<HTMLDivElement | null>(() => (modalElement.value?.querySelector('.ant-modal-footer') ?? null) as HTMLDivElement | null);
+
+    /** 最小宽度. */
+    const minWidth = computed<number>(() => {
+        const kgMinWidth = getProps.value.kgMinWidth ?? DEFAULT_MIN_WIDTH;
+        return Math.min(kgMinWidth, windowWidth.value);
+    });
+
+    /** 最大宽度. */
+    const maxWidth = computed<number>(() => {
+        const kgMaxWidth = getProps.value.kgMaxWidth ?? windowWidth.value;
+        return Math.min(kgMaxWidth, windowWidth.value);
+    });
+
+    /** 最大高度. */
+    const maxHeight = computed<number>(() => {
+        const kgMaxHeight = getProps.value.kgMaxHeight ?? windowHeight.value;
+        return Math.min(kgMaxHeight, windowHeight.value);
+    });
+
+    const currentModalContentOffsetHeight = ref<number>(0);
+
+    /** 旧的宽度. */
+    let oldWidth: number = 0;
+    /** 旧的高度. */
+    let oldHeight: number = 0;
+
+    /** 旧的上边距离. */
+    let oldTop: number = 0;
+    /** 旧的左边距离. */
+    let oldLeft: number = 0;
+
+    /** 旧的鼠标横向位置. */
+    let oldPageX: number = 0;
+    /** 旧的鼠标纵向位置. */
+    let oldPageY: number = 0;
+
+    let mousemoveEventListener = {
+        remove: () => {},
+    };
+    let mouseupEventListener = {
+        remove: () => {},
+    };
+    //endregion
+
+    //region WATCH
+    //----------------------------------------------------------------------------------------------------
+    // 计算当前高度, 计算当前上边距离,
+    const stopWatch02 = watch(
+        [modalElement],
+        ([modalElement]) => {
+            if (modalElement) {
+                const modalContentElement = modalElement.querySelector('div.ant-modal-content') as HTMLDivElement | null;
+                if (modalContentElement) {
+                    stopWatch02();
+
+                    modalContentResizeObserver = new ResizeObserver(() => {
+                        currentModalContentOffsetHeight.value = modalContentElement.offsetHeight;
+                    });
+                    modalContentResizeObserver.observe(modalContentElement);
+                } else {
+                    modalContentResizeObserver?.disconnect();
+                }
+            }
+        },
+        { immediate: true },
+    );
+
+    // 调整高度, 避免超出屏幕,
+    watch(
+        [modalElement, maxHeight, currentModalContentOffsetHeight],
+        ([modalElement, maxHeight, modalContentOffsetHeight]) => {
+            if (modalElement && modalContentOffsetHeight > maxHeight) {
+                modalElement.style.height = `${maxHeight}px`;
+            }
+        },
+        { immediate: true },
+    );
+    //endregion
+
+    //region FUNCTION
+    //----------------------------------------------------------------------------------------------------
+    /**
+     * 监听事件.
+     *
+     * @param target 被监听的对象.
+     * @param event 事件名称.
+     * @param listener 事件监听函数.
+     */
+    function addEventListener<K extends keyof HTMLElementEventMap>(target: HTMLElement, event: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => any): { remove: () => void } {
+        target.addEventListener(event, listener);
+
+        return {
+            remove: () => target.removeEventListener(event, listener),
+        };
+    }
+
+    /**
+     * 移除事件监听函数.
+     */
+    function removeEventListeners() {
+        mousemoveEventListener.remove();
+        mouseupEventListener.remove();
+    }
+
+    function updateRight(param: { event: MouseEvent }) {
+        if (!modalElement.value) {
+            ____ERROR____('弹窗元素为空.');
+            return;
+        }
+
+        const { event } = param ?? {};
+
+        const newPageX = event.pageX;
+
+        // 新的宽度
+        let newWidth = Math.min(maxWidth.value, Math.max(minWidth.value, oldWidth + newPageX - oldPageX));
+
+        // 保证右边不会超出屏幕,
+        if (modalElement.value.offsetLeft + newWidth > windowWidth.value) {
+            newWidth = windowWidth.value - modalElement.value.offsetLeft;
+        }
+
+        // 上次变更后的宽度,
+        const previousWidth = modalElement.value.offsetWidth;
+
+        // 上次变更后的左边距离,
+        const previousLeft = Number(getComputedStyle(modalElement.value)['left'].replace(/px/g, ''));
+
+        // 新的左边距离
+        const newLeft = previousLeft + (newWidth - previousWidth) / 2;
+
+        // 达到最大宽度/最小宽度, 此时如果继续拖拽, 宽度无法再变,
+        if (newWidth === previousWidth) {
+            return;
+        }
+
+        modalElement.value.style.width = `${newWidth}px`;
+        modalElement.value.style.left = `${newLeft}px`;
+    }
+
+    function updateBottom(param: { event: MouseEvent }) {
+        if (!modalElement.value) {
+            ____ERROR____('弹窗元素为空.');
+            return;
+        }
+
+        const { event } = param ?? {};
+
+        const newPageY = event.pageY;
+
+        const modalHeaderHeight = modalHeaderElement.value?.clientHeight ?? MODAL_HEADER_HEIGHT;
+        const modalFooterHeight = modalFooterElement.value?.clientHeight ?? 0;
+
+        // 最小高度
+        const minHeight = Math.min(getProps.value?.kgMinHeight ?? modalHeaderHeight + modalFooterHeight + KG_MODAL_BORDER_WIDTH * 2, windowHeight.value);
+
+        // 新的高度
+        let newHeight = Math.min(maxHeight.value, Math.max(minHeight, oldHeight + newPageY - oldPageY));
+
+        // 保证下边不会超出屏幕,
+        if (modalElement.value.offsetTop + newHeight > windowHeight.value) {
+            newHeight = windowHeight.value - modalElement.value.offsetTop;
+        }
+
+        // 上次变更后的高度,
+        const previousHeight = modalElement.value.offsetHeight;
+
+        // 上次变更后的上边距离,
+        const previousTop = Number(getComputedStyle(modalElement.value)['top'].replace(/px/g, ''));
+
+        const newTop = previousTop + (newHeight - previousHeight) / 2;
+
+        // 达到最大高度/最小高度, 此时如果继续拖拽, 高度无法再变,
+        if (newHeight === previousHeight) {
+            return;
+        }
+
+        modalElement.value.style.height = `${newHeight}px`;
+        modalElement.value.style.top = `${newTop}px`;
+    }
+
+    /**
+     * 更新高宽.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function update(param: { event: MouseEvent; handleType: HandleType }) {
+        const { event, handleType } = param ?? {};
+
+        if (!modalElement.value) {
+            ____ERROR____('弹窗元素为空.');
+            return;
+        }
+
+        const newPageX = event.pageX;
+        const newPageY = event.pageY;
+
+        switch (handleType) {
+            case 'top-left': {
+                // TODO
+                break;
+            }
+
+            case 'top': {
+                // TODO
+                break;
+            }
+
+            case 'top-right': {
+                // TODO
+                break;
+            }
+
+            case 'right': {
+                updateRight({ event: event });
+
+                break;
+            }
+
+            case 'bottom-right': {
+                updateRight({ event: event });
+                updateBottom({ event: event });
+
+                break;
+            }
+
+            case 'bottom': {
+                updateBottom({ event: event });
+
+                break;
+            }
+
+            case 'bottom-left': {
+                // TODO
+                break;
+            }
+
+            case 'left': {
+                // TODO
+                break;
+            }
+        }
+    }
+
+    /**
+     * mousedown 事件回调.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function onMouseDown(param: { event: MouseEvent; handleType: HandleType }) {
+        const { event, handleType } = param ?? {};
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        removeEventListeners();
+
+        if (event instanceof MouseEvent && event.which !== 1) {
+            return;
+        }
+
+        if (!modalElement.value) {
+            ____ERROR____('弹窗元素为空.');
+            return;
+        }
+
+        oldPageX = event.pageX;
+        oldPageY = event.pageY;
+
+        oldWidth = modalElement.value.offsetWidth;
+        oldHeight = modalElement.value.offsetHeight;
+
+        oldTop = Number(getComputedStyle(modalElement.value)['top'].replace(/px/g, ''));
+
+        mousemoveEventListener = addEventListener(document.documentElement, 'mousemove', (event) => onMouseMove({ event: event, handleType: handleType }));
+        mouseupEventListener = addEventListener(document.documentElement, 'mouseup', (event) => onMouseUp({ event: event, handleType: handleType }));
+    }
+
+    /**
+     * mousemove 事件回调.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function onMouseMove(param: { event: MouseEvent; handleType: HandleType }) {
+        update(param);
+    }
+
+    /**
+     * mouseup 事件回调.
+     *
+     * @param param.event 鼠标事件对象.
+     * @param param.handleType 拖拽位置.
+     */
+    function onMouseUp(param: { event: MouseEvent; handleType: HandleType }) {
+        update(param);
+        removeEventListeners();
+    }
+    //endregion
+
+    //region LIFECYCLE
+    //----------------------------------------------------------------------------------------------------
+    onBeforeUnmount(() => {
+        modalContentResizeObserver?.disconnect();
+    });
+
+    onUnmounted(() => {
+        removeEventListeners();
+    });
+    //endregion
+
+    return {
+        /**
+         * 鼠标按下事件.
+         *
+         * @param param.event 鼠标事件对象.
+         * @param param.handleType 拖拽位置.
+         */
+        onMouseDown: onMouseDown,
+    };
+}
+//----------------------------------------------------------------------------------------------------
+//endregion