@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgButton/KgButton.tsx

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

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

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

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

@@ -1,66 +0,0 @@
-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>
-            </>
-        );
-    },
-});