@kengic/vue 0.30.1-beta.87 → 0.30.1-beta.92

package/component/KgCanvas/KgCanvas.tsx

@@ -1,633 +0,0 @@
-import { KgUtil } from '@kengic/core.core';
-import { Q } from '@thymine/xunee';
-import { forEach } from 'lodash-es';
-import { defineComponent, ExtractPropTypes, onMounted, PropType, provide, ref } from 'vue';
-import './KgCanvas.css';
-import '@thymine/xunee/dist/xunee.css';
-import { KG } from '../../model';
-import { type IKgCanvasContextMenu, KgCanvasContextMenu, KgCanvasContextMenuProps } from './KgCanvas.ContextMenu';
-import {
-    emit,
-    IKgCanvas$EventListenerParameter$onClick,
-    IKgCanvas$EventListenerParameter$onDataPropertyChange,
-    IKgCanvas$EventListenerParameter$onDrop,
-    IKgCanvas$EventListenerParameter$onElementCreate,
-    IKgCanvas$EventListenerParameter$onInit,
-    IKgCanvas$EventListenerParameter$onMouseEnter,
-    IKgCanvas$EventListenerParameter$onMouseLeave,
-    IKgCanvas$EventListenerParameter$onMouseMove,
-    IKgCanvas$EventListenerParameter$onRightClick,
-    IKgCanvas$EventListenerParameter$onSelectChange,
-} from './KgCanvas.event';
-import { useKgCanvas } from './KgCanvas.hooks';
-import { IKgCanvasElementProperties } from './KgCanvas.model';
-import { _useGlobalContextMenuList, _useResizeObserver } from './KgCanvas.service';
-import { KgCanvasToolbarButtonFullscreen, KgCanvasToolbarButtonFullscreenProps } from './KgCanvas.ToolbarButton.Fullscreen';
-import { KgCanvasToolbarButtonMode } from './KgCanvas.ToolbarButton.Mode';
-import { KgCanvasToolbarButtonOverviewScale } from './KgCanvas.ToolbarButton.OverviewScale';
-import { KgCanvasTooltip, type KgCanvasTooltipProps } from './KgCanvas.Tooltip';
-
-export const getProps = () => ({
-    /**
-     * 该组件实例的唯一标识.
-     */
-    id: { type: String as PropType<string>, required: true },
-
-    /**
-     * 画布--右键菜单--重新加载--是否可用.
-     *
-     * @default true
-     */
-    kg$ContextMenu$Reload$IsAvailable: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 画布--工具按钮--交互模式--是否可用.
-     *
-     * @default true
-     */
-    kg$KgCanvasToolbarButtonMode$IsAvailable: { type: Boolean as PropType<boolean>, default: true },
-
-    /**
-     * 组件 KgCanvasToolbarButtonFullscreen 的参数.
-     */
-    kgCanvasToolbarFullscreen: { type: Object as PropType<KgCanvasToolbarButtonFullscreenProps> },
-
-    /**
-     * 是否可以编辑.
-     *
-     * @default false
-     */
-    kgIsEditable: { type: Boolean as PropType<boolean>, default: false },
-
-    /**
-     * 是否启用预览面板.
-     *
-     * @default false
-     */
-    kgIsEnableOverview: { type: Boolean as PropType<boolean>, default: false },
-
-    /**
-     * 是否启用网格背景.
-     *
-     * @default false
-     */
-    kgIsGridBackground: { type: Boolean as PropType<boolean>, default: false },
-
-    /**
-     * 是否支持拖动大小.
-     *
-     * @default false
-     */
-    kgIsResizable: { type: Boolean as PropType<boolean>, default: false },
-});
-
-export type KgCanvasProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 画布
-export default defineComponent({
-    name: 'KgCanvas',
-    props: getProps(),
-    setup(props, { slots }) {
-        provide(KG.DI.ID, props.id);
-        provide(KG.DI.KG_CANVAS.PROPS, props);
-
-        const kgCanvas = useKgCanvas(props.id);
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-
-        const kgCanvasRef$ = ref<HTMLDivElement | null>(null);
-
-        /**
-         * 图形组件元素标识.
-         */
-        const eid: string = `${props.id}-container`;
-
-        /**
-         * 图形组件对象.
-         */
-        let _graph: Q.Graph | null = null;
-
-        /**
-         * 复制的图元.
-         */
-        let copiedElements: Array<Q.Element> = [];
-
-        /**
-         * 鼠标进入的图元.
-         */
-        let mouseEnterElement: Q.Element | null = null;
-
-        const kgCanvasContextMenuProps$ = ref<KgCanvasContextMenuProps>({ kgIsVisible: false, kgMenus: [], kgMouseEvent: undefined });
-        const kgCanvasTooltipProps$ = ref<KgCanvasTooltipProps>({ kgMouseEvent: undefined });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        _useResizeObserver({ graph: graph, id: props.id, kgCanvasContextMenuProps$: kgCanvasContextMenuProps$, kgCanvasRef$: kgCanvasRef$ });
-        const { globalContextMenuList } = _useGlobalContextMenuList({ id: props.id, kg$ContextMenu$Reload$IsAvailable: props.kg$ContextMenu$Reload$IsAvailable });
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        //region 初始
-        //----------------------------------------------------------------------------------------------------
-        /**
-         * 初始化组件.
-         */
-        function init() {
-            _graph = new Q.Graph(eid);
-
-            kgCanvas.set$graph(_graph);
-
-            // 交互模式,
-            _graph.setInteractionMode(Q.Consts.INTERACTION_MODE_VIEW, []);
-
-            if (props.kgIsGridBackground) {
-                new Q.GridBackground(_graph);
-            }
-
-            // 拦截 graph.zoomToOverview() 方法调用, 触发缩放事件,
-            _graph.zoomToOverview = new Proxy(_graph.zoomToOverview, {
-                apply(target: (byAnimate?: boolean, maxScale?: number, f?: boolean) => void, thisArg: Q.Graph, argArray: [(boolean | undefined)?, (number | undefined)?, (boolean | undefined)?]): void {
-                    const result = target.apply(thisArg, argArray);
-
-                    if (_graph) {
-                        // $emit(ZOOM, graph.scale);
-                    }
-
-                    return result;
-                },
-            });
-
-            _graph.styles = {
-                [Q.Styles.LABEL_FONT_FAMILY]: '"kg-simplex", "微软雅黑", "Microsoft YaHei", "宋体"',
-                [Q.Styles.PADDING]: new Q.Insets(10, 10),
-                [Q.Styles.SELECTION_COLOR]: '#00FF00',
-                [Q.Styles.SELECTION_SHADOW_BLUR]: 5,
-                [Q.Styles.SELECTION_SHADOW_OFFSET_X]: 0,
-                [Q.Styles.SELECTION_SHADOW_OFFSET_Y]: 0,
-                [Q.Styles.SELECTION_TYPE]: Q.Consts.SELECTION_TYPE_SHADOW,
-            };
-            _graph.enableTooltip = false;
-            _graph.zoomAnimation = false;
-            _graph.enableDoubleClickToOverview = false;
-            _graph.editable = props.kgIsEditable;
-
-            /* 屏蔽通过 DEL 键删除选中的图元 */
-            _graph.removeSelectionByInteraction = () => false;
-
-            _graph.startLabelEdit = () => false;
-
-            _graph.onElementCreated = (element: Q.Element, event: MouseEvent, dragInfo: any) => {
-                emit<IKgCanvas$EventListenerParameter$onElementCreate>({
-                    event: 'onElementCreate',
-                    id: props.id,
-                    parameter: {
-                        element: element,
-                    },
-                });
-            };
-
-            _graph.ondrop = (event: DragEvent) => {
-                emit<IKgCanvas$EventListenerParameter$onDrop>({ event: 'onDrop', id: props.id, parameter: { event: event, graph: _graph! } });
-            };
-
-            //region 交互事件
-            //----------------------------------------------------------------------------------------------------
-            _graph.addCustomInteraction({
-                //region 停止拖拽
-                //----------------------------------------------------------------------------------------------------
-                /**
-                 * 停止拖拽.
-                 */
-                enddrag: (event: MouseEvent, graph: Q.Graph) => {
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    // $emit(END_DRAG, vm, graph, element, elementUI, ui, event);
-                },
-                //----------------------------------------------------------------------------------------------------
-                //endregion
-
-                //region 单击左键
-                //----------------------------------------------------------------------------------------------------
-                /**
-                 * 单击左键.
-                 */
-                onclick: (event: MouseEvent, graph: Q.Graph) => {
-                    kgCanvasContextMenuProps$.value.kgIsVisible = false;
-                    kgCanvasTooltipProps$.value.kgElement = undefined;
-
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    emit<IKgCanvas$EventListenerParameter$onClick>({
-                        event: 'onClick',
-                        id: props.id,
-                        parameter: {
-                            Q: Q,
-                            element: element,
-                            elementUI: elementUI,
-                            graph: graph,
-                            ui: ui,
-                        },
-                    });
-                },
-                //----------------------------------------------------------------------------------------------------
-                //endregion
-
-                oncontextmenu: (event: PointerEvent) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                },
-
-                /**
-                 * 双击左键.
-                 */
-                ondblclick: (event: MouseEvent, graph: Q.Graph) => {
-                    kgCanvasContextMenuProps$.value.kgIsVisible = false;
-                    kgCanvasTooltipProps$.value.kgElement = undefined;
-
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    // $emit(ON_DOUBLE_CLICK, vm, graph, element, elementUI, ui, event);
-                },
-
-                /**
-                 * 正在拖拽.
-                 */
-                ondrag: (event: MouseEvent, graph: Q.Graph) => {
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    // $emit(ON_DRAG, vm, graph, element, elementUI, ui, event);
-                },
-
-                /**
-                 * 按下键盘.
-                 */
-                onkeydown: (event: KeyboardEvent) => {
-                    if (!_graph) {
-                        return;
-                    }
-
-                    if (!_graph?.editable) {
-                        return;
-                    }
-
-                    const keyCode = event.keyCode;
-                    if (!Q.isMetaKey(event)) {
-                        return;
-                    }
-
-                    if (keyCode === 67) {
-                        copyElements();
-                    } else if (keyCode === 86) {
-                        pasteElements(50, 50);
-                    } else {
-                        return;
-                    }
-
-                    Q.stopEvent(event as any);
-                },
-
-                /**
-                 * 鼠标移动.
-                 */
-                onmousemove: (event: MouseEvent, graph: Q.Graph) => {
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    kgCanvasTooltipProps$.value.kgElement = element;
-                    kgCanvasTooltipProps$.value.kgElementUi = elementUI;
-                    kgCanvasTooltipProps$.value.kgMouseEvent = event;
-
-                    // 鼠标离开当前图元,
-                    if (mouseEnterElement && mouseEnterElement !== element) {
-                        emit<IKgCanvas$EventListenerParameter$onMouseLeave>({
-                            event: 'onMouseLeave',
-                            id: props.id,
-                            parameter: {
-                                Q: Q,
-                                element: element,
-                                elementUI: elementUI,
-                                graph: graph,
-                                ui: ui,
-                            },
-                        });
-
-                        graph.cursor = 'default';
-
-                        mouseEnterElement = null;
-                    }
-
-                    // 鼠标进入新的图元,
-                    if (element && mouseEnterElement !== element) {
-                        emit<IKgCanvas$EventListenerParameter$onMouseEnter>({
-                            event: 'onMouseEnter',
-                            id: props.id,
-                            parameter: {
-                                Q: Q,
-                                element: element,
-                                elementUI: elementUI,
-                                graph: graph,
-                                ui: ui,
-                            },
-                        });
-                        mouseEnterElement = element;
-
-                        if ((mouseEnterElement.properties as IKgCanvasElementProperties).style?.hoverCursor === 'pointer') {
-                            graph.cursor = 'pointer';
-                        }
-                    }
-
-                    // 鼠标在当前图元上移动, 或者鼠标在空白处移动,
-                    emit<IKgCanvas$EventListenerParameter$onMouseMove>({
-                        event: 'onMouseMove',
-                        id: props.id,
-                        parameter: {
-                            Q: Q,
-                            element: element,
-                            elementUI: elementUI,
-                            graph: graph,
-                            ui: ui,
-                        },
-                    });
-                },
-
-                onmouseup: (event: MouseEvent) => {},
-
-                /**
-                 * 鼠标滚轮.
-                 */
-                onmousewheel: (event: WheelEvent, graph: Q.Graph) => {
-                    kgCanvasContextMenuProps$.value.kgIsVisible = false;
-                    kgCanvasTooltipProps$.value.kgElement = undefined;
-
-                    // $emit(ZOOM, graph.scale);
-                    // if ($refs.ytdQuneeContextMenuRef) {
-                    //     if (!event.composedPath().includes($refs.ytdQuneeContextMenuRef.$el)) {
-                    //         $refs.ytdQuneeContextMenuRef.close();
-                    //     }
-                    // }
-                },
-
-                //region 单击右键
-                //----------------------------------------------------------------------------------------------------
-                /**
-                 * 单击右键.
-                 */
-                onrelease2: async (event: MouseEvent, graph: Q.Graph) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    // 让用户设置的右键菜单列表
-                    const userContextMenuList: { value: Array<IKgCanvasContextMenu> } = { value: [] };
-
-                    await emit<IKgCanvas$EventListenerParameter$onRightClick>({
-                        event: 'onRightClick',
-                        id: props.id,
-                        parameter: {
-                            Q: Q,
-                            contextMenus: userContextMenuList,
-                            element: element,
-                            elementUI: elementUI,
-                            event: event,
-                            graph: graph,
-                            ui: ui,
-                        },
-                    });
-
-                    kgCanvasContextMenuProps$.value.kgMouseEvent = event;
-                    kgCanvasContextMenuProps$.value.kgElement = element;
-                    kgCanvasContextMenuProps$.value.kgElementUi = elementUI;
-                    kgCanvasContextMenuProps$.value.kgUi = ui;
-                    kgCanvasContextMenuProps$.value.kgMenus = [...userContextMenuList.value, ...globalContextMenuList];
-
-                    if (kgCanvasContextMenuProps$.value.kgMenus.length > 0) {
-                        kgCanvasContextMenuProps$.value.kgIsVisible = true;
-                    } else {
-                        kgCanvasContextMenuProps$.value.kgIsVisible = false;
-                    }
-                },
-                //----------------------------------------------------------------------------------------------------
-                //endregion
-
-                /**
-                 * 开始拖拽.
-                 */
-                startdrag: (event: MouseEvent, graph: Q.Graph) => {
-                    kgCanvasContextMenuProps$.value.kgIsVisible = false;
-                    kgCanvasTooltipProps$.value.kgElement = undefined;
-
-                    const element = graph.getElementByMouseEvent(event);
-                    const elementUI = graph.getUIByMouseEvent(event);
-                    const ui = graph.hitTest(event);
-
-                    // $emit(START_DRAG, vm, graph, element, elementUI, ui, event);
-                },
-            });
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-
-            _graph.dataPropertyChangeDispatcher.addListener({
-                onEvent: (event: Q.Event) => {
-                    emit<IKgCanvas$EventListenerParameter$onDataPropertyChange>({ event: 'onDataPropertyChange', id: props.id, parameter: { event: event } });
-                },
-            });
-
-            _graph.selectionChangeDispatcher.addListener((event: Q.ListEvent) => {
-                emit<IKgCanvas$EventListenerParameter$onSelectChange>({ event: 'onSelectChange', id: props.id, parameter: { event: event } });
-            });
-
-            initDomEvent();
-            // initWindows();
-            if (props.kgIsEnableOverview) {
-                // initOverviewWindow();
-            }
-
-            setTimeout(() => {
-                emit<IKgCanvas$EventListenerParameter$onInit>({ event: 'onInit', id: props.id, parameter: { Q: Q, graph: _graph! } });
-            });
-        }
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        /**
-         * 绑定 DOM 事件.
-         */
-        function initDomEvent() {
-            // if (screenfull && screenfull.enabled) {
-            //     if (screenfull) {
-            //         screenfull.on('change', vm.handleFullscreenChange);
-            //     }
-            //     vm.$once('hook:beforeDestroy', () => {
-            //         if (screenfull) {
-            //             screenfull.off('change', vm.handleFullscreenChange);
-            //         }
-            //     });
-            // }
-
-            // 拖拽大小
-            if (props.kgIsResizable) {
-                // TODO LT 支持拖拽大小
-            }
-        }
-
-        /**
-         * 获取图形组件对象.
-         */
-        function graph(): Q.Graph | null {
-            return _graph;
-        }
-
-        /**
-         * 更新视图.
-         */
-        function updateViewport() {
-            if (_graph && kgCanvasRef$.value) {
-                const canvasEl = kgCanvasRef$.value.querySelector('.Q-Canvas');
-                if (canvasEl && canvasEl.clientWidth > 0 && canvasEl.clientHeight > 0) {
-                    _graph?.updateViewport();
-                }
-            }
-        }
-
-        /**
-         * 复制图元.
-         */
-        function copyElements() {
-            if (_graph) {
-                if (!_graph.editable) {
-                    console.warn('非编辑模式, 不支持复制操作.');
-                    return;
-                }
-
-                copiedElements = _graph.selectionModel.toDatas();
-            }
-        }
-
-        /**
-         * 粘贴图元.
-         *
-         * @param dx 横坐标偏移.
-         * @param dy 纵坐标偏移.
-         */
-        function pasteElements(dx: number = 10, dy: number = 10) {
-            if (!_graph) {
-                return;
-            }
-
-            if (!_graph.editable) {
-                console.warn('非编辑模式, 不支持粘贴操作.');
-                return;
-            }
-
-            forEach(copiedElements, (srcElement) => {
-                if (srcElement instanceof Q.Group) {
-                    return;
-                }
-
-                if (srcElement instanceof Q.Node) {
-                    const element = new Q.Node('');
-                    element.id = Number(KgUtil.uuid());
-                    element.name = srcElement.name;
-                    element.x = srcElement.x + dx;
-                    element.y = srcElement.y + dy;
-                    element.rotate = srcElement.rotate;
-                    element.image = srcElement.image;
-                    element.size = srcElement.size;
-                    element.parent = srcElement.parent;
-                    element.host = srcElement.host;
-                    element.zIndex = srcElement.zIndex;
-                    element.styles = srcElement.styles;
-
-                    _graph?.addElement(element);
-
-                    // vm.$emit(ELEMENTS_COPIED, srcElement, element);
-                }
-            });
-        }
-
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onMounted(async () => {
-            setTimeout(() => {
-                init();
-            });
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        return () => (
-            <>
-                <div
-                    ref={kgCanvasRef$}
-                    id={props.id}
-                    class="kg-canvas"
-                >
-                    <div
-                        class="kg-canvas--container"
-                        id={eid}
-                    />
-
-                    <div class="kg-canvas--toolbar">
-                        {slots.toolbarRight?.()}
-                        {props.kg$KgCanvasToolbarButtonMode$IsAvailable && <KgCanvasToolbarButtonMode />}
-                        <KgCanvasToolbarButtonOverviewScale />
-                        <KgCanvasToolbarButtonFullscreen />
-                    </div>
-
-                    <KgCanvasContextMenu
-                        kgIsVisible={kgCanvasContextMenuProps$.value.kgIsVisible}
-                        kgMouseEvent={kgCanvasContextMenuProps$.value.kgMouseEvent}
-                        onUpdate:kgIsVisible={(value) => {
-                            return (kgCanvasContextMenuProps$.value.kgIsVisible = value);
-                        }}
-                        kgMenus={kgCanvasContextMenuProps$.value.kgMenus}
-                        kgElement={kgCanvasContextMenuProps$.value.kgElement}
-                        kgElementUi={kgCanvasContextMenuProps$.value.kgElementUi}
-                        kgUi={kgCanvasContextMenuProps$.value.kgUi}
-                    />
-
-                    <KgCanvasTooltip
-                        kgMouseEvent={kgCanvasTooltipProps$.value.kgMouseEvent}
-                        kgElement={kgCanvasTooltipProps$.value.kgElement}
-                        kgElementUi={kgCanvasTooltipProps$.value.kgElementUi}
-                    >
-                        {slots.tooltip?.({
-                            element: kgCanvasTooltipProps$.value.kgElement,
-                            event: kgCanvasTooltipProps$.value.kgMouseEvent,
-                            graph: graph(),
-                        })}
-                    </KgCanvasTooltip>
-                </div>
-
-                <div class="kg-canvas--right">
-                    {slots.right?.({
-                        element: kgCanvasTooltipProps$.value.kgElement,
-                        event: kgCanvasTooltipProps$.value.kgMouseEvent,
-                        graph: graph(),
-                    })}
-                </div>
-            </>
-        );
-    },
-});

package/component/KgCanvas/index.ts

@@ -1,5 +0,0 @@
-export { default as KgCanvas } from './KgCanvas';
-export { type IKgCanvasContextMenu } from './KgCanvas.ContextMenu';
-
-export * from './KgCanvas.hooks';
-export { type IKgCanvasElementProperties } from './KgCanvas.model';