@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgModal/KgModal.service.ts

@@ -1,560 +0,0 @@
-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