@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgButton/KgButton.tsx

@@ -0,0 +1,221 @@
+import { Icon } from '@iconify/vue';
+import { ____DEBUG____ } from '@kengic/core.core';
+import { Button, Dropdown, Menu, Spin } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, ComputedRef, defineComponent, ExtractPropTypes, inject, onUnmounted, PropType } from 'vue';
+import { VarButton } from '../../api/WMS/models';
+import { useKg } from '../../config';
+import { KG, KG__VAR_BUTTON__TYPE, KG__VAR_BUTTON_CONFIG__DISPLAY_TYPE } from '../../model';
+import { useKgVar } from '../KgVar';
+import { emit, IKgButton$EventListenerParameter$onClick } from './KgButton.event';
+import { KgButtonItem } from './KgButton.Item';
+import './KgButton.less';
+
+export const getProps = () => ({
+    /**
+     * <p>按钮是否处于加载状态.</p>
+     * <p>返回 true 表示处于加载状态.</p>
+     */
+    KgLoading: Function as PropType<(button: VarButton) => boolean | undefined>,
+
+    /**
+     * <p>按钮是否禁用.</p>
+     * <p>返回 true 表示禁用. 返回 undefined 表示由组件决定是否禁用.</p>
+     */
+    kgDisabled: Function as PropType<(button: VarButton) => boolean | undefined>,
+});
+
+export type IKgButtonProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 所有按钮
+export const KgButton = defineComponent({
+    name: 'KgButton',
+    props: getProps(),
+    setup(props) {
+        const kgSlots = inject(KG.DI.KG_VAR.KG_SLOTS, null);
+        const kgProps = inject(KG.DI.KG_VAR.KG_PROPS, null);
+
+        const kg = useKg();
+        const kgVar = useKgVar();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const isLoading = computed<boolean>(() => {
+            return false;
+        });
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        /** 点击按钮. */
+        function onKgClick(button: VarButton): Promise<boolean> {
+            // 如果 click 事件的监听函数不为空, 并且监听函数的返回值为 true, 表示由调用者自己处理点击事件
+            return emit<IKgButton$EventListenerParameter$onClick>({ id: kgVar.fid, event: 'onClick', parameter: { button: button } });
+        }
+
+        /**
+         * 按钮是否禁用.
+         * @param button 按钮.
+         */
+        function isKgDisabled(button: VarButton): ComputedRef<boolean | undefined> {
+            return computed(() => {
+                // 由调用者自行处理某个按钮是否禁用, 如果函数返回结果不为 null/undefined, 则使用该函数的返回结果
+                const kgDisabled = (kgProps?.value ?? kgVar.props.value)?.KgButton?.kgDisabled || props.kgDisabled;
+                if (kgDisabled) {
+                    const disabled = kgDisabled(button);
+                    if (!isNil(disabled)) {
+                        ____DEBUG____(`${kgVar.fid} | KgButton | isKgDisabled() | 使用用户提供的逻辑决定按钮是否启禁用.`, {
+                            button: button,
+                            disabled: disabled,
+                        });
+                        return disabled;
+                    }
+                }
+
+                return undefined;
+            });
+        }
+
+        /**
+         * 按钮是否处于加载状态.
+         * @param button 按钮.
+         */
+        function isKgLoading(button: VarButton): ComputedRef<boolean | undefined> {
+            return computed(() => {
+                // 由调用者自行处理某个按钮是否处于加载状态, 如果函数返回结果不为 null/undefined, 则使用该函数的返回结果
+                const KgLoading = (kgProps?.value ?? kgVar.props.value)?.KgButton?.KgLoading || props.KgLoading;
+                if (KgLoading) {
+                    const loading = KgLoading(button);
+                    if (!isNil(loading)) {
+                        return loading;
+                    }
+                }
+
+                return undefined;
+            });
+        }
+
+        /**
+         * 是否使用主要按钮样式.
+         * @param button 按钮.
+         */
+        function isKgPrimary(button: VarButton): boolean | undefined {
+            switch (button.primary_flg) {
+                case 1:
+                    return true;
+                case 0:
+                    return false;
+                default:
+                    return undefined;
+            }
+        }
+
+        /**
+         * 计算按钮文本.
+         * @param button 按钮.
+         */
+        function getKgText(button: VarButton): string | undefined {
+            const text = kgVar.t2(button.var_nam);
+
+            if (text !== button.var_nam) {
+                return text;
+            } else {
+                return undefined;
+            }
+        }
+
+        /** 渲染按钮. */
+        function renderButtons() {
+            if (!kgVar.varButtons.value || kgVar.varButtons.value?.length === 0) {
+                return null;
+            }
+
+            switch (kgVar.varButtonConfig.value?.display_type) {
+                case KG__VAR_BUTTON_CONFIG__DISPLAY_TYPE.SELECT:
+                    return renderButtonsSelect();
+
+                default:
+                    return renderButtonsDefault();
+            }
+        }
+
+        /** 渲染按钮. */
+        function renderButton(button: VarButton) {
+            return (
+                <KgButtonItem
+                    kgButton={button}
+                    kgVarName={button.var_nam}
+                    kgType={button.typ as any}
+                    kgIcon={button.icon}
+                    kgText={getKgText(button)}
+                    kgColor={button.color as any}
+                    kgPrimary={isKgPrimary(button)}
+                    kgDisabled={isKgDisabled(button).value}
+                    kgLoading={isKgLoading(button).value}
+                    onKgClick={() => onKgClick(button)}
+                />
+            );
+        }
+
+        /** 显示为: 一排按钮. */
+        function renderButtonsDefault() {
+            return (
+                kgVar.varButtons.value
+                    // 排除查询按钮
+                    ?.filter((i) => i.typ !== KG__VAR_BUTTON__TYPE.SEARCH)
+                    // 排除 available_flag 为 false 的按钮
+                    ?.filter((i) => i.available_flag !== 0)
+                    .map((button) => renderButton(button))
+            );
+        }
+
+        /** 显示为: 下拉列表. */
+        function renderButtonsSelect() {
+            return (
+                <Dropdown
+                    trigger={'click'}
+                    overlayClassName={'kg-button-dropdown'}
+                >
+                    {{
+                        default: () => (
+                            <Button type={'primary'}>
+                                {kg.t('kg.action')}
+                                <Icon icon="ant-design:caret-down-outlined" />
+                            </Button>
+                        ),
+                        overlay: () => (
+                            <Menu>
+                                {kgVar.varButtons.value
+                                    // 排除查询按钮
+                                    ?.filter((i) => i.typ !== KG__VAR_BUTTON__TYPE.SEARCH)
+                                    // 排除 available_flag 为 false 的按钮
+                                    ?.filter((i) => i.available_flag !== 0)
+                                    .map((button) => <Menu.Item>{renderButton(button)}</Menu.Item>)}
+                            </Menu>
+                        ),
+                    }}
+                </Dropdown>
+            );
+        }
+        //endregion
+
+        //region LIFECYCLE
+        //----------------------------------------------------------------------------------------------------
+        onUnmounted(async () => {
+            kgVar.kgButton.dispose();
+        });
+        //endregion
+
+        return () => (
+            <div
+                class={{ 'kg-button': true, 'kg-button--invisible': kgVar.varButtonConfig$Props$$.value.isVisible === false }}
+                kg-form-id={kgVar.fid}
+            >
+                <Spin spinning={isLoading.value}>
+                    {renderButtons()}
+                    {(kgSlots ?? kgVar.slots.value)?.KgButton?.right?.()}
+                </Spin>
+            </div>
+        );
+    },
+});

package/component/KgCanvas/KgCanvas.ContextMenu.tsx

@@ -0,0 +1,181 @@
+import { Icon } from '@iconify/vue';
+import { Q } from '@thymine/xunee';
+import { Menu } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+import { computed, CSSProperties, defineComponent, ExtractPropTypes, inject, nextTick, PropType, ref, watch } from 'vue';
+import { KG } from '../../model';
+import './KgCanvas.css';
+import { emit, IKgCanvas$EventListenerParameter$onContextMenuClose, IKgCanvas$EventListenerParameter$onContextMenuOpen } from './KgCanvas.event';
+import { useKgCanvas } from './KgCanvas.hooks';
+
+/**
+ * 菜单属性.
+ */
+export type IKgCanvasContextMenu = {
+    /** 菜单编码. */
+    code?: string;
+
+    /** 菜单回调方法. */
+    handler?: (param: { graph: Q.Graph; element?: Q.Element; elementUI?: Q.ElementUI; ui?: Q.BaseUI }) => void;
+
+    /** 菜单图标. */
+    icon?: string;
+
+    /** 是否禁用. */
+    isDisabled?: boolean;
+
+    /** 是否是分割线. */
+    isDivider?: boolean;
+
+    /**
+     * 菜单标题.
+     */
+    name?: string;
+};
+
+export const getProps = () => ({
+    kgElement: Object as PropType<Q.Element>,
+
+    kgElementUi: Object as PropType<Q.ElementUI>,
+
+    /**
+     * 是否显示.
+     *
+     * @default false
+     */
+    kgIsVisible: { type: Boolean as PropType<boolean>, default: false },
+
+    /**
+     * 菜单.
+     */
+    kgMenus: Array as PropType<Array<IKgCanvasContextMenu>>,
+
+    /**
+     * 鼠标事件对象.
+     */
+    kgMouseEvent: Object as PropType<MouseEvent>,
+
+    kgUi: Object as PropType<Q.BaseUI>,
+
+    'onUpdate:kgIsVisible': Function as PropType<(value: boolean) => void>,
+});
+
+export type KgCanvasContextMenuProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 画布--右键菜单
+export const KgCanvasContextMenu = defineComponent({
+    name: 'KgCanvasContextMenu',
+    props: getProps(),
+    emits: ['update:kgIsVisible'],
+    setup(props, {}) {
+        const ID = inject(KG.DI.ID, '');
+        const kgCanvas = useKgCanvas();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const style = ref<CSSProperties>({});
+
+        const class$$ = computed<Record<string, boolean>>(() => {
+            const _class = { 'kg-canvas--context-menu': true, 'kg-canvas--context-menu--invisible': !props.kgIsVisible };
+
+            return _class;
+        });
+
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            () => props.kgIsVisible,
+            (value) => {
+                if (value) {
+                    emit<IKgCanvas$EventListenerParameter$onContextMenuOpen>({ event: 'onContextMenuOpen', id: ID, parameter: {} });
+                } else {
+                    emit<IKgCanvas$EventListenerParameter$onContextMenuClose>({ event: 'onContextMenuClose', id: ID, parameter: {} });
+                }
+            },
+        );
+        watch(
+            () => props.kgMouseEvent,
+            (event) => {
+                let mouseX = (event?.offsetX ?? 0) + 1;
+                let mouseY = (event?.offsetY ?? 0) + 1;
+
+                /**
+                 * 计算菜单边界, 防止菜单溢出.
+                 */
+                const setPosition = () => {
+                    const kgCanvasWidth: number = document.querySelector<HTMLDivElement>(`#${ID}`)?.offsetWidth ?? 0;
+                    const kgCanvasHeight: number = document.querySelector<HTMLDivElement>(`#${ID}`)?.offsetHeight ?? 0;
+
+                    const kgCanvasContextMenuWidth: number = document.querySelector<HTMLDivElement>(`#${ID} > .kg-canvas--context-menu`)?.offsetWidth ?? 0;
+                    const kgCanvasContextMenuHeight: number = document.querySelector<HTMLDivElement>(`#${ID} > .kg-canvas--context-menu`)?.offsetHeight ?? 0;
+
+                    if (mouseX + kgCanvasContextMenuWidth > kgCanvasWidth) {
+                        mouseX = mouseX - kgCanvasContextMenuWidth;
+                    }
+
+                    if (mouseY + kgCanvasContextMenuHeight > kgCanvasHeight) {
+                        mouseY = mouseY - kgCanvasContextMenuHeight;
+                    }
+
+                    style.value.left = `${mouseX}px`;
+                    style.value.top = `${mouseY}px`;
+                };
+
+                setPosition();
+
+                // 如果菜单尚未显示, 则等菜单显示之后重新计算菜单位置,
+                nextTick().then(() => {
+                    setPosition();
+                });
+            },
+            { immediate: true },
+        );
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => (
+            <div
+                class={class$$.value}
+                style={style.value}
+                onContextmenu={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }}
+            >
+                <Menu
+                    mode={'vertical'}
+                    selectable={false}
+                >
+                    {props.kgMenus?.map((i) => {
+                        if (i.isDivider) {
+                            return <Menu.Divider />;
+                        }
+
+                        return (
+                            <Menu.Item
+                                icon={i.icon ? <Icon icon={i.icon} /> : undefined}
+                                disabled={i.isDisabled}
+                                onClick={() => {
+                                    if (i.isDisabled) {
+                                        return;
+                                    }
+
+                                    if (isFunction(i.handler)) {
+                                        i.handler?.({ element: props.kgElement, elementUI: props.kgElementUi, graph: kgCanvas.get$graph(), ui: props.kgUi });
+                                    }
+
+                                    props['onUpdate:kgIsVisible']?.(false);
+                                }}
+                            >
+                                {i.name}
+                            </Menu.Item>
+                        );
+                    })}
+                </Menu>
+            </div>
+        );
+    },
+});

package/component/KgCanvas/KgCanvas.ToolbarButton.Fullscreen.tsx

@@ -0,0 +1,80 @@
+import { Icon } from '@iconify/vue';
+import { ElButton } from 'element-plus';
+import screenful from 'screenfull';
+import { computed, defineComponent, ExtractPropTypes, inject, PropType, ref } from 'vue';
+import './KgCanvas.css';
+import { useKg } from '../../config';
+import { KG } from '../../model';
+
+export const getProps = () => ({
+    /**
+     * 是否显示文本.
+     *
+     * @default false
+     */
+    kgIsShowText: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+});
+
+export type KgCanvasToolbarButtonFullscreenProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 画布--工具按钮--全屏
+export const KgCanvasToolbarButtonFullscreen = defineComponent({
+    name: 'KgCanvasToolbarButtonFullscreen',
+    props: getProps(),
+    setup(props, { emit }) {
+        const kgCanvasProps = inject(KG.DI.KG_CANVAS.PROPS, null);
+
+        const kg = useKg();
+
+        screenful.on('change', () => {
+            isFullscreen$.value = screenful.isFullscreen;
+        });
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const ref01 = ref<HTMLDivElement | null>(null);
+
+        const isFullscreen$ = ref<boolean>(screenful.isFullscreen);
+
+        const isShowText$$ = computed<boolean>(() => {
+            if (kgCanvasProps?.kgCanvasToolbarFullscreen?.kgIsShowText !== undefined) {
+                return kgCanvasProps?.kgCanvasToolbarFullscreen?.kgIsShowText;
+            }
+
+            return props.kgIsShowText;
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onClick() {
+            if (screenful.isEnabled) {
+                if (ref01.value?.parentElement?.parentElement?.parentElement) {
+                    screenful.toggle(ref01.value.parentElement.parentElement.parentElement);
+                }
+            }
+        }
+        //endregion
+
+        return () => (
+            <>
+                <ElButton
+                    class="kg-canvas--toolbar--fullscreen"
+                    title={isFullscreen$.value ? kg.t('kg.KgCanvas.exitFullscreen', {}, '退出全屏') : kg.t('kg.KgCanvas.enterFullscreen', {}, '进入全屏')}
+                    onClick={onClick}
+                >
+                    {!isFullscreen$.value && <Icon icon="ant-design:fullscreen-outlined" />}
+                    {isFullscreen$.value && <Icon icon="ant-design:fullscreen-exit-outlined" />}
+
+                    {isShowText$$.value && <span class="text">{isFullscreen$.value ? kg.t('kg.KgCanvas.exitFullscreen', {}, '退出全屏') : kg.t('kg.KgCanvas.enterFullscreen', {}, '进入全屏')}</span>}
+                </ElButton>
+
+                <div ref={ref01}></div>
+            </>
+        );
+    },
+});

package/component/KgCanvas/KgCanvas.ToolbarButton.Mode.tsx

@@ -0,0 +1,68 @@
+import { Icon } from '@iconify/vue';
+import { Q } from '@thymine/xunee';
+import { ElOption, ElSelect } from 'element-plus';
+import { defineComponent, ExtractPropTypes, ref } from 'vue';
+import './KgCanvas.css';
+import { useKg } from '../../config';
+import { useKgCanvas } from './KgCanvas.hooks';
+
+export const getProps = () => ({}) as any;
+
+export type IKgCanvasToolbarButtonModeProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 画布--工具按钮--交互模式
+export const KgCanvasToolbarButtonMode = defineComponent({
+    name: 'KgCanvasToolbarButtonMode',
+    props: getProps(),
+    setup(props, { emit }) {
+        const kg = useKg();
+        const kgCanvas = useKgCanvas();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 当前模式.
+         */
+        const currentMode$ = ref<string>(Q.Consts.INTERACTION_MODE_VIEW);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onChange() {
+            kgCanvas.get$graph()?.setInteractionMode(currentMode$.value, []);
+        }
+        //endregion
+
+        return () => (
+            <>
+                <ElSelect
+                    class="kg-canvas--toolbar-button--mode"
+                    title={'交互模式'}
+                    placeholder={''}
+                    modelValue={currentMode$.value}
+                    onUpdate:modelValue={(value: string) => {
+                        currentMode$.value = value;
+                    }}
+                    suffixIcon={() => <Icon icon="ant-design:caret-down-outlined" />}
+                    showArrow={false}
+                    offset={1}
+                    onChange={onChange}
+                >
+                    <ElOption
+                        label={'默认模式'}
+                        value={Q.Consts.INTERACTION_MODE_DEFAULT}
+                    />
+                    <ElOption
+                        label={'浏览模式'}
+                        value={Q.Consts.INTERACTION_MODE_VIEW}
+                    />
+                    <ElOption
+                        label={'创建连线模式'}
+                        value={Q.Consts.INTERACTION_MODE_CREATE_EDGE}
+                    />
+                </ElSelect>
+            </>
+        );
+    },
+});

package/component/KgCanvas/KgCanvas.ToolbarButton.OverviewScale.tsx

@@ -0,0 +1,66 @@
+import { Icon } from '@iconify/vue';
+import { ElButton } from 'element-plus';
+import { computed, defineComponent, ExtractPropTypes, inject, PropType } from 'vue';
+import './KgCanvas.css';
+import { useKg } from '../../config';
+import { KG } from '../../model';
+import { useKgCanvas } from './KgCanvas.hooks';
+
+export const getProps = () => ({
+    /**
+     * 是否显示文本.
+     *
+     * @default false
+     */
+    kgIsShowText: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+});
+
+export type KgCanvasToolbarButtonOverviewScaleProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
+
+// 画布--工具按钮--纵览比例
+export const KgCanvasToolbarButtonOverviewScale = defineComponent({
+    name: 'KgCanvasToolbarButtonOverviewScale',
+    props: getProps(),
+    setup(props, { emit }) {
+        const kgCanvas = useKgCanvas();
+        const kgCanvasProps = inject(KG.DI.KG_CANVAS.PROPS, null);
+
+        const kg = useKg();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+
+        const isShowText$$ = computed<boolean>(() => {
+            if (kgCanvasProps?.kgCanvasToolbarFullscreen?.kgIsShowText !== undefined) {
+                return kgCanvasProps?.kgCanvasToolbarFullscreen?.kgIsShowText;
+            }
+
+            return props.kgIsShowText;
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function onClick() {
+            kgCanvas.get$graph()?.zoomToOverview(false);
+        }
+        //endregion
+
+        return () => (
+            <>
+                <ElButton
+                    class="kg-canvas--toolbar--overview-scale"
+                    title={kg.t('kg.KgCanvas.overviewScale', {}, '纵览比例')}
+                    onClick={onClick}
+                >
+                    <Icon icon="material-symbols:fit-screen-outline" />
+                    {isShowText$$.value && <span class="text">{kg.t('kg.KgCanvas.overviewScale', {}, '纵览比例')}</span>}
+                </ElButton>
+            </>
+        );
+    },
+});