@kengic/vue 0.30.1-beta.96 → 0.31.1

package/component/KgSimulator/KgSimulator.Canvas.tsx

@@ -1,1105 +0,0 @@
-import { ____ERROR____ } from '@kengic/core.core';
-import { Q } from '@thymine/xunee';
-import { notification } from 'ant-design-vue';
-import { debounce, last } from 'lodash-es';
-import { defineComponent, ExtractPropTypes, inject, onMounted, onUnmounted } from 'vue';
-import './KgSimulator.css';
-import './KgSimulator.icons';
-import { KG } from '../../model';
-import { KgCanvas, useKgCanvas } from '../KgCanvas';
-import { IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
-import { useKgVar } from '../KgVar';
-import { useDraw } from './KgSimulator.Canvas.service';
-import { emit, IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData, IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$DeleteData } from './KgSimulator.event';
-import { useKgSimulator } from './KgSimulator.hooks';
-import {
-    Agent,
-    AgentCreatedMessage,
-    IDragDataTransferData,
-    INodeProperty,
-    newCGQ,
-    newCreator,
-    newDestroyer,
-    newDPJ,
-    newEdge,
-    newSSJ,
-    newYZJ,
-    NODE_KEY,
-    NODE_UI_KEY,
-    PlcActionRequestWebSocketMessage,
-    Station,
-    WEBSOCKET_PONG_TYPE,
-} from './KgSimulator.model';
-
-export const getProps = () => ({}) as any;
-
-export type IKgSimulatorCanvasProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-/**
- * 模拟器--画布.
- */
-export const KgSimulatorCanvas = defineComponent({
-    name: 'KgSimulatorCanvas',
-    props: getProps(),
-    setup(props) {
-        const ID = inject(KG.DI.ID, '');
-
-        const $KgSimulatorPanelProperty$kgVar = useKgVar(KG.FORM_ID__KG_SIMULATOR__PANEL__PROPERTY);
-        const kgSimulator = useKgSimulator();
-        const kgCanvas = useKgCanvas(kgSimulator.$KgCanvas$id);
-
-        const useDrawHook = useDraw();
-
-        kgCanvas.onInit(async (param) => {
-            param.graph.styles[Q.Styles.SELECTION_COLOR] = '#000000';
-            param.graph.styles[Q.Styles.SELECTION_SHADOW_BLUR] = 0;
-
-            kgSimulator.set$graph(param.graph);
-
-            param.graph.minScale = 0.0001;
-            param.graph.scale = 0.0001;
-
-            return false;
-        });
-
-        //region 事件: 重新加载
-        //----------------------------------------------------------------------------------------------------
-        kgCanvas.onReload(async (param) => {
-            switch (true) {
-                case kgSimulator.$Mode$IsEdit: {
-                    param.graph.moveToCenter(0.0001, false);
-                    useDrawHook.draw({ isZoomToOverview: true });
-
-                    break;
-                }
-
-                case kgSimulator.$Mode$IsMonitor: {
-                    param.graph.moveToCenter(0.0001, false);
-                    useDrawHook.draw({ isZoomToOverview: true });
-
-                    break;
-                }
-
-                case kgSimulator.$Mode$IsSimulate: {
-                    break;
-                }
-            }
-
-            return false;
-        });
-        //endregion
-        //----------------------------------------------------------------------------------------------------
-
-        kgCanvas.onResize(async ({ graph, width, height }) => {
-            return false;
-        });
-
-        kgCanvas.onClick(async ({ graph, element }) => {
-            return false;
-        });
-
-        kgCanvas.onRightClick(async ({ graph, element, contextMenus }) => {
-            return false;
-        });
-
-        kgCanvas.onMouseEnter(async ({ graph, element }) => {
-            return false;
-        });
-
-        kgCanvas.onMouseLeave(async ({ graph, element }) => {
-            return false;
-        });
-
-        kgCanvas.onContextMenuOpen(async () => {
-            return false;
-        });
-
-        kgCanvas.onContextMenuClose(async () => {
-            return false;
-        });
-
-        //region 事件: 图元属性发生变更
-        //----------------------------------------------------------------------------------------------------
-        const $KgCanvas$onDataPropertyChangeListener = debounce(
-            async (param) => {
-                switch (param.event.kind) {
-                    //region 坐标
-                    //----------------------------------------------------------------------------------------------------
-                    case 'location': {
-                        // @ts-ignore
-                        if (param.event.oldValue) {
-                            const node = param.event.source;
-                            const elementProperties = node.properties as INodeProperty;
-                            const x = param.event.value.x;
-                            const y = param.event.value.y;
-
-                            //region 图元用户属性
-                            //----------------------------------------------------------------------------------------------------
-                            elementProperties.data.x = x;
-                            elementProperties.data.y = y;
-                            //----------------------------------------------------------------------------------------------------
-                            //endregion
-
-                            //region 场景属性
-                            //----------------------------------------------------------------------------------------------------
-                            const scene = kgSimulator.$Env$CircularConveyor$CurrentScene;
-
-                            const creator = scene!.creators!.find((i) => i.id === elementProperties.data.id);
-                            if (creator) {
-                                creator.x = x;
-                                creator.y = y;
-                            }
-
-                            const destroyer = scene!.destroyers!.find((i) => i.id === elementProperties.data.id);
-                            if (destroyer) {
-                                destroyer.x = x;
-                                destroyer.y = y;
-                            }
-
-                            const ptssj = scene!.stations!.find((i) => i.id === elementProperties.data.id);
-                            if (ptssj) {
-                                ptssj.x = x;
-                                ptssj.y = y;
-                            }
-
-                            const dsyzj = scene!.jackUpTransferStations!.find((i) => i.id === elementProperties.data.id);
-                            if (dsyzj) {
-                                dsyzj.x = x;
-                                dsyzj.y = y;
-                            }
-
-                            const dpj = scene!.palletStackerStations!.find((i) => i.id === elementProperties.data.id);
-                            if (dpj) {
-                                dpj.x = x;
-                                dpj.y = y;
-                            }
-
-                            const gdcgq = scene!.photoelectricSensors!.find((i) => i.id === elementProperties.data.id);
-                            if (gdcgq) {
-                                gdcgq.x = x;
-                                gdcgq.y = y;
-                            }
-
-                            const agent = scene!.agents!.find((i) => i.id === elementProperties.data.id);
-                            if (agent) {
-                                agent.x = x;
-                                agent.y = y;
-                            }
-                            //----------------------------------------------------------------------------------------------------
-                            //endregion
-                        }
-                        break;
-                    }
-                    //----------------------------------------------------------------------------------------------------
-                    //endregion
-                }
-
-                return false;
-            },
-            100,
-            { leading: false, trailing: true },
-        );
-        kgCanvas.onDataPropertyChange($KgCanvas$onDataPropertyChangeListener as any);
-
-        kgSimulator.on$KgSimulatorMenu$Scene$Create(async () => {
-            useDrawHook.draw({ isZoomToOverview: true });
-
-            return false;
-        });
-
-        kgSimulator.on$KgSimulatorMenu$Scene$Import(async () => {
-            useDrawHook.draw({ isZoomToOverview: true });
-
-            return false;
-        });
-
-        kgSimulator.on$KgSimulatorMenu$Scene$Open(async () => {
-            useDrawHook.draw({ isZoomToOverview: true });
-
-            return false;
-        });
-
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 拖拽落下
-        //----------------------------------------------------------------------------------------------------
-        kgCanvas.onDrop(async ({ event }) => {
-            /**
-             * 拖拽落下的点.
-             */
-            const dropPoint: Q.Point = kgSimulator.get$graph()!.toLogical(event);
-            const data = JSON.parse(event.dataTransfer?.getData('text/plain') || '{}') as IDragDataTransferData;
-
-            switch (true) {
-                case kgSimulator.$Config$Env$IsCircularConveyor: {
-                    switch (data.type) {
-                        //region 创建者
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.CJZ: {
-                            const dropUi = kgSimulator.get$graph()!.hitTest(event);
-                            const dropNode = dropUi?.parent?.data as Q.Node | undefined;
-
-                            if (!dropUi || !dropNode || ![NODE_KEY.SSJ, NODE_KEY.YZJ, NODE_KEY.DPJ].includes((dropNode.properties as INodeProperty)?.type ?? '')) {
-                                notification.error({ message: '创建者必须拖到某个「普通输送机」或者「移栽机」或者「叠盘机」上面' });
-                                break;
-                            }
-
-                            const creator = newCreator({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, x: dropNode.x, y: dropNode.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: creator,
-                                    type: NODE_KEY.CJZ,
-                                },
-                            });
-
-                            const creatorNode = useDrawHook.$CircularConveyor$drawCJZ({ creator: creator });
-                            if (creatorNode) {
-                                kgSimulator.get$graph()!.setSelection(creatorNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 销毁者
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.XHZ: {
-                            const dropUi = kgSimulator.get$graph()!.hitTest(event);
-                            const dropNode = dropUi?.parent?.data as Q.Node | undefined;
-
-                            if (!dropUi || !dropNode || ![NODE_KEY.SSJ, NODE_KEY.YZJ, NODE_KEY.DPJ].includes((dropNode.properties as INodeProperty).type)) {
-                                notification.error({ message: '销毁者必须拖到某个「普通输送机」或者「移栽机」或者「叠盘机」上面' });
-                                break;
-                            }
-
-                            const destroyer = newDestroyer({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, x: dropNode.x, y: dropNode.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: destroyer,
-                                    type: NODE_KEY.XHZ,
-                                },
-                            });
-
-                            const destroyerNode = useDrawHook.$CircularConveyor$drawXHZ({ destroyer: destroyer });
-                            if (destroyerNode) {
-                                kgSimulator.get$graph()!.setSelection(destroyerNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 输送机
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.SSJ: {
-                            const ptssj = newSSJ({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, x: dropPoint.x, y: dropPoint.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: ptssj,
-                                    type: NODE_KEY.SSJ,
-                                },
-                            });
-
-                            const ptssjNode = useDrawHook.$CircularConveyor$drawSSJ({ ptssj: ptssj });
-                            if (ptssjNode) {
-                                kgSimulator.get$graph()!.setSelection(ptssjNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 移栽机
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.YZJ: {
-                            const dsyzj = newYZJ({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, x: dropPoint.x, y: dropPoint.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: dsyzj,
-                                    type: NODE_KEY.YZJ,
-                                },
-                            });
-
-                            const dsyzjNode = useDrawHook.$CircularConveyor$drawYZJ({ dsyzj: dsyzj });
-                            if (dsyzjNode) {
-                                kgSimulator.get$graph()!.setSelection(dsyzjNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 叠盘机
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.DPJ: {
-                            const dpj = newDPJ({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, x: dropPoint.x, y: dropPoint.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: dpj,
-                                    type: NODE_KEY.DPJ,
-                                },
-                            });
-
-                            const dpjNode = useDrawHook.$CircularConveyor$drawDPJ({ dpj: dpj });
-                            if (dpjNode) {
-                                kgSimulator.get$graph()!.setSelection(dpjNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 传感器
-                        //----------------------------------------------------------------------------------------------------
-                        case NODE_KEY.CGQ: {
-                            const dropUi = kgSimulator.get$graph()!.hitTest(event);
-                            const dropNode = dropUi?.parent?.data as Q.Node | undefined;
-
-                            if (!dropUi || !dropNode || ![NODE_KEY.SSJ].includes((dropNode.properties as INodeProperty)?.type ?? '')) {
-                                notification.error({ message: '光电传感器必须拖到某个「普通输送机」或者「移栽机」或者「叠盘机」上面' });
-                                break;
-                            }
-
-                            const gdcgq = newCGQ({ sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id, stationId: ((dropNode.properties as INodeProperty).data as Station).id, x: dropPoint.x, y: dropPoint.y });
-
-                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                event: 'on$KgSimulatorCanvas$CreateData',
-                                id: ID,
-                                parameter: {
-                                    data: gdcgq,
-                                    type: NODE_KEY.CGQ,
-                                },
-                            });
-
-                            const gdcgqNode = useDrawHook.$CircularConveyor$drawCGQ({ gdcgq: gdcgq });
-                            if (gdcgqNode) {
-                                kgSimulator.get$graph()!.setSelection(gdcgqNode);
-                            }
-
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-                    }
-
-                    break;
-                }
-
-                case kgSimulator.$Config$Env$IsCircularShuttle: {
-                    // TODO LT 环形穿梭车
-                    break;
-                }
-
-                default: {
-                    break;
-                }
-            }
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 通过界面交互创建图元
-        //----------------------------------------------------------------------------------------------------
-        kgCanvas.onElementCreate(async (param) => {
-            //region 连线
-            //----------------------------------------------------------------------------------------------------
-            if (param.element instanceof Q.Edge) {
-                const lineWidth = 20;
-
-                const station01Node = param.element.from;
-                const stationNode02 = param.element.to;
-
-                // 连线长度,
-                const length = (() => {
-                    if (station01Node.x === stationNode02.x) {
-                        return Math.abs(station01Node.y - stationNode02.y);
-                    } else {
-                        return Math.abs(station01Node.x - stationNode02.x);
-                    }
-                })();
-
-                // 线宽,
-                const EDGE_WIDTH = (() => {
-                    return lineWidth * 2;
-                })();
-
-                // 如果节点之间已经存在连线, 则需要调整连线偏移位置, 避免连线相互遮盖,
-                let EDGE_OFFSET = (() => {
-                    if (station01Node.hasEdgeWith(stationNode02) || stationNode02.hasEdgeWith(station01Node)) {
-                        if (station01Node.x === stationNode02.x) {
-                            return { x: EDGE_WIDTH * 6.5, y: 0 };
-                        } else {
-                            return { x: 0, y: EDGE_WIDTH * 6.5 };
-                        }
-                    }
-
-                    return { x: 0, y: 0 };
-                })();
-
-                //region 图元属性
-                //----------------------------------------------------------------------------------------------------
-                param.element.name = '';
-                param.element.zIndex = 6;
-                param.element.putStyles({
-                    [Q.Styles.ARROW_FROM]: Q.Consts.SHAPE_RECT,
-                    [Q.Styles.ARROW_FROM_FILL_COLOR]: '#000000',
-                    [Q.Styles.ARROW_FROM_LINE_CAP]: Q.Consts.LINE_CAP_TYPE_BUTT,
-                    [Q.Styles.ARROW_FROM_LINE_JOIN]: Q.Consts.LINE_JOIN_TYPE_MITER,
-                    [Q.Styles.ARROW_FROM_SIZE]: EDGE_WIDTH,
-                    [Q.Styles.ARROW_FROM_STROKE]: 0,
-                    [Q.Styles.ARROW_TO]: Q.Consts.SHAPE_TRIANGLE,
-                    [Q.Styles.ARROW_TO_FILL_COLOR]: '#666666',
-                    [Q.Styles.ARROW_TO_LINE_CAP]: Q.Consts.LINE_CAP_TYPE_BUTT,
-                    [Q.Styles.ARROW_TO_LINE_JOIN]: Q.Consts.LINE_JOIN_TYPE_MITER,
-                    [Q.Styles.ARROW_TO_SIZE]: lineWidth * 20,
-                    [Q.Styles.ARROW_TO_STROKE]: 0,
-                    [Q.Styles.EDGE_COLOR]: '#666666',
-                    [Q.Styles.EDGE_CORNER]: Q.Consts.EDGE_CORNER_NONE,
-                    [Q.Styles.EDGE_FROM_AT_EDGE]: false,
-                    [Q.Styles.EDGE_FROM_OFFSET]: EDGE_OFFSET,
-                    [Q.Styles.EDGE_LINE_DASH]: [length - 100, 100],
-                    [Q.Styles.EDGE_LINE_DASH_OFFSET]: 0,
-                    [Q.Styles.EDGE_TO_AT_EDGE]: false,
-                    [Q.Styles.EDGE_TO_OFFSET]: EDGE_OFFSET,
-                    [Q.Styles.EDGE_WIDTH]: EDGE_WIDTH,
-                    [Q.Styles.LINE_CAP]: Q.Consts.LINE_CAP_TYPE_BUTT,
-                    [Q.Styles.LINE_JOIN]: Q.Consts.LINE_JOIN_TYPE_MITER,
-                });
-                //----------------------------------------------------------------------------------------------------
-                //endregion
-
-                //region 场景属性
-                //----------------------------------------------------------------------------------------------------
-                const source = (param.element.from.properties as INodeProperty).data.id;
-                const target = (param.element.to.properties as INodeProperty).data.id;
-
-                const edge = newEdge({
-                    code: `${source}-${target}`,
-                    sceneId: kgSimulator.$Env$CircularConveyor$CurrentScene?.id,
-                    source: source,
-                    target: target,
-                });
-
-                param.element.properties = { $Edge$length: length, data: { ...edge }, type: NODE_KEY.EDGE } as INodeProperty;
-
-                kgSimulator.get$graph()!.setSelection(param.element);
-
-                emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                    event: 'on$KgSimulatorCanvas$CreateData',
-                    id: ID,
-                    parameter: {
-                        data: { ...edge },
-                        type: NODE_KEY.EDGE,
-                    },
-                });
-                //----------------------------------------------------------------------------------------------------
-                //endregion
-            }
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 面板--场景--点击一个节点
-        //----------------------------------------------------------------------------------------------------
-        kgSimulator.on$KgSimulatorPanelScene$Click(async (param) => {
-            //region 将点击的节点选中, 并且居中
-            //----------------------------------------------------------------------------------------------------
-            const element: Q.Node | Q.Edge = kgSimulator.get$graph()!.graphModel.datas.find((i) => (i.properties as INodeProperty).data.id === param.id);
-            if (element) {
-                // 节点,
-                if (element instanceof Q.Node) {
-                    kgSimulator.get$graph()!.setSelection(element);
-                    kgSimulator.get$graph()!.centerTo(element.x, element.y);
-                }
-                // 连线,
-                else if (element instanceof Q.Edge) {
-                    kgSimulator.get$graph()!.setSelection(element);
-                    kgSimulator.get$graph()!.centerTo((element.from.x + element.to.x) / 2, (element.from.y + element.to.y) / 2);
-                }
-            }
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 面板--场景--勾选发生变更
-        //----------------------------------------------------------------------------------------------------
-        kgSimulator.on$KgSimulatorPanelScene$SelectChange(async (param) => {
-            //region 将勾选的节点选中
-            //----------------------------------------------------------------------------------------------------
-            const elementList: Array<Q.Node | Q.Edge> = kgSimulator.get$graph()!.graphModel.datas.filter((i) => param.selectedIdList.includes((i.properties as INodeProperty).data.id));
-            kgSimulator.get$graph()!.setSelection(elementList);
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 面板--场景--删除多个节点
-        //----------------------------------------------------------------------------------------------------
-        kgSimulator.on$KgSimulatorPanelScene$Delete(async (param) => {
-            const elementList: Array<Q.Node> = kgSimulator.get$graph()!.graphModel.datas.filter((i) => param.deleteIdList.includes((i.properties as INodeProperty).data.id));
-            for (let element of elementList) {
-                kgSimulator.get$graph()!.removeElement(element);
-            }
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: 面板--属性--属性发生变更
-        //----------------------------------------------------------------------------------------------------
-        const $KgSimulatorPanelProperty$kgVar$kgForm$onChangeListener = debounce(
-            async (param: IKgForm$EventListenerParameter$onChange) => {
-                const propertyName = last(param.varName.split('$'))!;
-
-                // 当前已选中的元素列表,
-                const selectedElementList = kgSimulator.get$graph()!.selectionModel?.datas ?? [];
-
-                for (let element of selectedElementList) {
-                    const elementProperties = element.properties as INodeProperty;
-
-                    //region 图元属性
-                    // 这些属性会影响图形的绘制,
-                    //----------------------------------------------------------------------------------------------------
-                    switch (param.varName) {
-                        case 'x': {
-                            if (element instanceof Q.Node) {
-                                element.x = param.value;
-                            }
-                            break;
-                        }
-
-                        case 'y': {
-                            if (element instanceof Q.Node) {
-                                element.y = param.value;
-                            }
-                            break;
-                        }
-
-                        case 'width': {
-                            if (element instanceof Q.Node) {
-                                element.size = new Q.Size(param.value, element.size.height);
-                            }
-                            break;
-                        }
-
-                        case 'length': {
-                            if (element instanceof Q.Node) {
-                                element.size = new Q.Size(element.size.width, param.value);
-                            }
-                            break;
-                        }
-
-                        //region 编号
-                        //----------------------------------------------------------------------------------------------------
-                        case 'code': {
-                            if (element instanceof Q.Node) {
-                                const ui: Q.LabelUI = element.bindingUIs.datas.find(
-                                    (i) =>
-                                        i.ui.code === NODE_UI_KEY.CJZ_CODE ||
-                                        i.ui.code === NODE_UI_KEY.XHZ_CODE ||
-                                        i.ui.code === NODE_UI_KEY.SSJ_CODE ||
-                                        i.ui.code === NODE_UI_KEY.YZJ_CODE ||
-                                        i.ui.code === NODE_UI_KEY.DPJ_CODE ||
-                                        i.ui.code === NODE_UI_KEY.CGQ_CODE,
-                                )?.ui;
-                                if (ui) {
-                                    ui.data = param.value || $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value?.id || 'NULL';
-                                    element.invalidate();
-                                }
-                            }
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-
-                        //region 是否主线
-                        //----------------------------------------------------------------------------------------------------
-                        case 'isPrimary': {
-                            if (element instanceof Q.Edge) {
-                                const lineWidth = 20;
-
-                                // 根据主线支线确定线宽,
-                                const EDGE_WIDTH = (() => {
-                                    // 主线,
-                                    if (param.value) {
-                                        return lineWidth * 4;
-                                    }
-                                    // 支线,
-                                    else {
-                                        return lineWidth * 2;
-                                    }
-                                })();
-
-                                element.putStyles({
-                                    [Q.Styles.ARROW_FROM_SIZE]: EDGE_WIDTH,
-                                    [Q.Styles.EDGE_WIDTH]: EDGE_WIDTH,
-                                });
-                                element.invalidate();
-                            }
-                            break;
-                        }
-                        //----------------------------------------------------------------------------------------------------
-                        //endregion
-                    }
-                    //----------------------------------------------------------------------------------------------------
-                    //endregion
-
-                    //region 图元用户属性
-                    //----------------------------------------------------------------------------------------------------
-                    elementProperties.data[propertyName] = param.value;
-                    //----------------------------------------------------------------------------------------------------
-                    //endregion
-                }
-
-                return false;
-            },
-            100,
-            { leading: false, trailing: true },
-        );
-        $KgSimulatorPanelProperty$kgVar.kgForm.onChange($KgSimulatorPanelProperty$kgVar$kgForm$onChangeListener as any);
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region 事件: WEBSOCKET--收到消息
-        //----------------------------------------------------------------------------------------------------
-        kgSimulator.on$WebSocket$Message(async (param) => {
-            if (kgSimulator.$Mode$IsSimulate && kgSimulator.$Mode$Simulate$IsRunning) {
-                switch (true) {
-                    //region 环形输送线
-                    //----------------------------------------------------------------------------------------------------
-                    case kgSimulator.$Config$Env$IsCircularConveyor: {
-                        switch (param.data?.type ?? '') {
-                            //region 创建代理者
-                            //----------------------------------------------------------------------------------------------------
-                            case WEBSOCKET_PONG_TYPE.AGENT_CREATED: {
-                                const sourceStationCode = (param.data as AgentCreatedMessage).sourceStationCode;
-                                const agent = (param.data as AgentCreatedMessage).data as Agent;
-
-                                // 代理所在站点节点,
-                                const sourceStationNode = kgSimulator.get$graph()!.graphModel.datas.find((i) => i instanceof Q.Node && ((i.properties as INodeProperty).data as Station).code === sourceStationCode) as Q.Node;
-                                if (!sourceStationNode) {
-                                    notification.error({ message: `WEBSOCKET | 创建代理者 | 找不到站点「${sourceStationCode}」` });
-                                    ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 创建代理者 | 找不到站点「${sourceStationCode}」`);
-                                }
-
-                                const sourceStation = (sourceStationNode.properties as INodeProperty).data as Station;
-
-                                // 叠盘机,
-                                if ((sourceStationNode.properties as INodeProperty).type === NODE_KEY.DPJ) {
-                                    // 从「叠盘机」创建代理者时, 代理者位于叠盘机中心,
-                                    agent.x = sourceStationNode.x;
-                                    agent.y = sourceStationNode.y;
-                                }
-                                // 一条出线,
-                                else if (sourceStationNode.edgeCount === 1 && sourceStationNode.hasOutEdge(true)) {
-                                    sourceStationNode.forEachOutEdge((edge: Q.Edge) => {
-                                        switch (true) {
-                                            // 出线向下,
-                                            case edge.from.x === edge.to.x && edge.from.y < edge.to.y: {
-                                                agent.x = sourceStationNode.x;
-                                                agent.y =
-                                                    sourceStationNode.y +
-                                                    (sourceStationNode.size.height / 2 - agent.length! / 2) -
-                                                    (sourceStation.isLongDistanceSensorOnY
-                                                        ? kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$LongDistance
-                                                        : kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$ShortDistance);
-                                                break;
-                                            }
-                                        }
-                                    });
-                                }
-                                // 两条出线,
-                                else if (sourceStationNode.edgeCount === 2 && !sourceStationNode.hasInEdge(true) && sourceStationNode.hasOutEdge(true)) {
-                                    sourceStationNode.forEachEdge((edge: Q.Edge) => {
-                                        if (edge.to.edgeCount > 1) {
-                                            switch (true) {
-                                                // 出线向上,
-                                                case edge.from.x === edge.to.x && edge.from.y > edge.to.y: {
-                                                    agent.x = sourceStationNode.x;
-                                                    agent.y =
-                                                        sourceStationNode.y -
-                                                        (sourceStationNode.size.height / 2 - agent.length! / 2) +
-                                                        (sourceStation.isLongDistanceSensorOnY
-                                                            ? kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$LongDistance
-                                                            : kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$ShortDistance);
-                                                    break;
-                                                }
-                                            }
-                                        }
-                                    });
-                                }
-                                // 一条入线, 一条出线,
-                                else if (sourceStationNode.edgeCount === 2 && sourceStationNode.hasInEdge(true) && sourceStationNode.hasOutEdge(true)) {
-                                    sourceStationNode.forEachInEdge((edge: Q.Edge) => {
-                                        switch (true) {
-                                            // 入线向下,
-                                            case edge.from.x === edge.to.x && edge.from.y < edge.to.y: {
-                                                agent.x = sourceStationNode.x;
-                                                agent.y =
-                                                    sourceStationNode.y +
-                                                    (sourceStationNode.size.height / 2 - agent.length! / 2) -
-                                                    (sourceStation.isLongDistanceSensorOnY
-                                                        ? kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$LongDistance
-                                                        : kgSimulator.$Config$CircularConveyor$DefaultPhotoelectricSensor$ShortDistance);
-                                                break;
-                                            }
-                                        }
-                                    });
-                                }
-
-                                emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$CreateData>({
-                                    event: 'on$KgSimulatorCanvas$CreateData',
-                                    id: ID,
-                                    parameter: {
-                                        data: agent,
-                                        type: NODE_KEY.DLZ,
-                                    },
-                                });
-
-                                useDrawHook.$CircularConveyor$drawDLZ({ agent: agent });
-
-                                break;
-                            }
-                            //----------------------------------------------------------------------------------------------------
-                            //endregion
-
-                            //region 销毁代理者
-                            //----------------------------------------------------------------------------------------------------
-                            case WEBSOCKET_PONG_TYPE.AGENT_DESTROYED: {
-                                const agent = param.data.data as Agent;
-
-                                // 要删除的代理者节点,
-                                const agentNode = kgSimulator.get$graph()!.graphModel.datas.find((i) => {
-                                    const agentNodeProperties = i.properties as INodeProperty;
-                                    return agentNodeProperties.type === NODE_KEY.DLZ && (agentNodeProperties.data.id === agent.id || agentNodeProperties.data.code === agent.code || agentNodeProperties.data.code === agent.id);
-                                }) as Q.Node;
-                                if (!agentNode) {
-                                    notification.error({ message: `WEBSOCKET | 销毁代理者 | 找不到代理「${agent.id}」` });
-                                    ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 销毁代理者 | 找不到代理「${agent.id}」`);
-                                    break;
-                                }
-
-                                kgSimulator.get$graph()!.removeElement(agentNode);
-
-                                emit<IKgSimulator$EventListenerParameter$on$KgSimulatorCanvas$DeleteData>({
-                                    event: 'on$KgSimulatorCanvas$DeleteData',
-                                    id: ID,
-                                    parameter: {
-                                        data: agent,
-                                        type: NODE_KEY.DLZ,
-                                    },
-                                });
-
-                                break;
-                            }
-                            //----------------------------------------------------------------------------------------------------
-                            //endregion
-
-                            case WEBSOCKET_PONG_TYPE.AGENT_STATUS_CHANGED: {
-                                break;
-                            }
-
-                            case WEBSOCKET_PONG_TYPE.AGENT_STATUS_UPDATE_RESPONSE: {
-                                break;
-                            }
-
-                            //region 代理指令动作
-                            //----------------------------------------------------------------------------------------------------
-                            case WEBSOCKET_PONG_TYPE.PLC_ACTION: {
-                                const message = param.data as PlcActionRequestWebSocketMessage;
-
-                                switch (message.actionType) {
-                                    case 'Move': {
-                                        const agentCode = message.data.deviceId as string | null | undefined;
-                                        // 是否直穿,
-                                        const isThrough = message.data.isThrough as 0 | 1 | null | undefined;
-                                        // 站点二编号,
-                                        const station02Code = message.data.stationId as string | null | undefined;
-                                        // 站点三编号,
-                                        const station03Code = message.data.throughStationCode as string | null | undefined;
-
-                                        // 要移动的代理者节点,
-                                        const agentNode: Q.Node = kgSimulator
-                                            .get$graph()!
-                                            .graphModel.datas.find((i) => (i.properties as INodeProperty).type === NODE_KEY.DLZ && ((i.properties as INodeProperty).data as Agent).code === agentCode);
-                                        if (!agentNode) {
-                                            notification.error({ message: `WEBSOCKET | 移动代理者 | 找不到代理「${agentCode}」` });
-                                            ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 找不到代理「${agentCode}」`);
-                                            break;
-                                        }
-
-                                        // 站点二节点, 站点二节点可能是「输送机」或者「移栽机」或者「叠盘机」,
-                                        const stationNode02: Q.Node = kgSimulator.get$graph()!.graphModel.datas.find((i) => ((i.properties as INodeProperty).data as Station).code === station02Code);
-                                        if (!stationNode02) {
-                                            notification.error({ message: `WEBSOCKET | 移动代理者 | 找不到目的站点「${station02Code}」` });
-                                            ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 找不到目的站点「${station02Code}」`);
-                                            break;
-                                        }
-
-                                        const agentNodeProperties = agentNode.properties as INodeProperty;
-                                        const station01Code = agentNodeProperties.$Agent$Move$station01Code;
-
-                                        // 站点一节点, 站点一节点可能是「输送机」或者「移栽机」或者「叠盘机」,
-                                        const station01Node: Q.Node = kgSimulator.get$graph()!.graphModel.datas.find((i) => ((i.properties as INodeProperty).data as Station).code === station01Code);
-                                        if (!station01Node) {
-                                            notification.error({ message: `WEBSOCKET | 移动代理者 | 找不到起始节点「${station01Code}」` });
-                                            ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 找不到起始节点「${station01Code}」`);
-                                            break;
-                                        }
-
-                                        const agent = agentNodeProperties.data as Agent;
-
-                                        // 正在移动,
-                                        if (agentNodeProperties.$Agent$Move$IsMoveDoing) {
-                                            notification.error({ message: `WEBSOCKET | 移动代理者 | 代理「${agentCode}」正在移动到「${agentNodeProperties.$Agent$Move$station02Code}」, 无法开始新的移动到「${station02Code}」` });
-                                            // prettier-ignore
-                                            ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 代理「${agentCode}」正在移动到「${agentNodeProperties.$Agent$Move$station02Code}」, 无法开始新的移动到「${station02Code}」`);
-                                            break;
-                                        }
-
-                                        const stationNode02Properties = stationNode02.properties as INodeProperty;
-
-                                        // 代理者已经在目的站点,
-                                        if (agentNodeProperties.$Agent$Move$station01Code === station02Code) {
-                                            // 目的站点就是「叠盘机」,
-                                            if (stationNode02Properties.type === NODE_KEY.DPJ) {
-                                                // 将从「输送机」到「叠盘机」,
-                                                if (stationNode02Properties.$DPJ$CurrentAgentId !== agent.id) {
-                                                    // N/A
-                                                }
-                                                // 已从「输送机」到「叠盘机」,
-                                                else {
-                                                    notification.error({ message: `WEBSOCKET | 移动代理者 | 代理「${agentCode}」已在目的站点「${station02Code}」` });
-                                                    ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 代理「${agentCode}」已在目的站点「${station02Code}」`);
-                                                    break;
-                                                }
-                                            }
-                                            // 目的站点不是「叠盘机」,
-                                            else {
-                                                const dpjNode = kgSimulator
-                                                    .get$graph()!
-                                                    .graphModel.datas.find(
-                                                        (i) =>
-                                                            i.x === station01Node.x &&
-                                                            i.y === station01Node.y &&
-                                                            (i.properties as INodeProperty).type === NODE_KEY.DPJ &&
-                                                            (i.properties as INodeProperty).data.id !== stationNode02Properties.data.id &&
-                                                            (i.properties as INodeProperty).data.id !== agent.id,
-                                                    );
-                                                if (dpjNode) {
-                                                    // 将从「叠盘机」到「输送机」,
-                                                    if ((dpjNode.properties as INodeProperty).$DPJ$CurrentAgentId === agent.id) {
-                                                        // N/A
-                                                    }
-                                                    // 已从「叠盘机」到「输送机」,
-                                                    else {
-                                                        notification.error({ message: `WEBSOCKET | 移动代理者 | 代理「${agentCode}」已在目的站点「${station02Code}」` });
-                                                        ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 代理「${agentCode}」已在目的站点「${station02Code}」`);
-                                                        break;
-                                                    }
-                                                } else {
-                                                    notification.error({ message: `坐标「${stationNode02.x}, ${stationNode02.y}」上存在多个站点, 请确认数据是否有误` });
-                                                    ____ERROR____(`坐标「${stationNode02.x}, ${stationNode02.y}」上存在多个站点, 请确认数据是否有误`);
-                                                    break;
-                                                }
-                                            }
-                                        }
-
-                                        agentNodeProperties.$Agent$Move$Direction = (() => {
-                                            //region 叠盘拆盘
-                                            //----------------------------------------------------------------------------------------------------
-                                            // 目的站点就是「叠盘机」,
-                                            if (stationNode02Properties.type === NODE_KEY.DPJ) {
-                                                // 将从「输送机」到「叠盘机」,
-                                                if (stationNode02Properties.$DPJ$CurrentAgentId !== agent.id) {
-                                                    return 'DPJ';
-                                                }
-                                            }
-                                            // 目的站点不是「叠盘机」,
-                                            else {
-                                                const dpjNode = kgSimulator
-                                                    .get$graph()!
-                                                    .graphModel.datas.find(
-                                                        (i) =>
-                                                            i.x === station01Node.x &&
-                                                            i.y === station01Node.y &&
-                                                            (i.properties as INodeProperty).type === NODE_KEY.DPJ &&
-                                                            (i.properties as INodeProperty).data.id !== stationNode02Properties.data.id &&
-                                                            (i.properties as INodeProperty).data.id !== agent.id,
-                                                    );
-                                                if (dpjNode) {
-                                                    // 将从「叠盘机」到「输送机」,
-                                                    if ((dpjNode.properties as INodeProperty).$DPJ$CurrentAgentId === agent.id || (dpjNode.x === station01Node.x && dpjNode.y === station01Node.y)) {
-                                                        return 'DPJ';
-                                                    }
-                                                }
-                                            }
-                                            //----------------------------------------------------------------------------------------------------
-                                            //endregion
-
-                                            switch (true) {
-                                                // 向上
-                                                case station01Node.x === stationNode02.x && station01Node.y > stationNode02.y: {
-                                                    return 'UP';
-                                                }
-
-                                                // 向下
-                                                case station01Node.x === stationNode02.x && station01Node.y < stationNode02.y: {
-                                                    return 'DOWN';
-                                                }
-
-                                                // 向左
-                                                case station01Node.y === stationNode02.y && station01Node.x > stationNode02.x: {
-                                                    return 'LEFT';
-                                                }
-
-                                                // 向右
-                                                case station01Node.y === stationNode02.y && station01Node.x < stationNode02.x: {
-                                                    return 'RIGHT';
-                                                }
-
-                                                default: {
-                                                    notification.error({ message: `WEBSOCKET | 移动代理者 | 代理「${agentCode}」到「${stationNode02Properties.data.code}」无法确定移动方向, 请确认数据是否有误` });
-                                                    ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 代理「${agentCode}」到「${stationNode02Properties.data.code}」无法确定移动方向, 请确认数据是否有误`);
-                                                    return undefined;
-                                                }
-                                            }
-                                        })();
-
-                                        if (agentNodeProperties.$Agent$Move$Direction) {
-                                            if (isThrough === 1 && !station03Code) {
-                                                notification.error({ message: `WEBSOCKET | 移动代理者 | 代理「${agentCode}」到「${stationNode02Properties.data.code}」直穿模式必须指定下一站点编号` });
-                                                ____ERROR____(`KgSimulatorCanvas | WEBSOCKET | 移动代理者 | 代理「${agentCode}」到「${stationNode02Properties.data.code}」直穿模式必须指定下一站点编号`);
-                                            } else {
-                                                agentNodeProperties.$Agent$Move$PreviousMoveTime = Date.now();
-                                                agentNodeProperties.$Agent$Move$IsMoveDoing = true;
-                                                agentNodeProperties.$Agent$Move$IsThrough = isThrough === 1;
-                                                agentNodeProperties.$Agent$Move$station02Code = station02Code;
-                                                agentNodeProperties.$Agent$Move$station03Code = isThrough === 1 ? station03Code : '';
-                                            }
-                                        }
-                                        // 如果无法确定移动方向, 则不执行移动,
-                                        else {
-                                            // N/A
-                                        }
-
-                                        break;
-                                    }
-                                }
-
-                                break;
-                            }
-                            //----------------------------------------------------------------------------------------------------
-                            //endregion
-
-                            case WEBSOCKET_PONG_TYPE.SIMULATION_STATUS_CHANGED: {
-                                break;
-                            }
-                        }
-
-                        break;
-                    }
-                    //----------------------------------------------------------------------------------------------------
-                    //endregion
-                }
-            }
-
-            return false;
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region DATA
-        // ----------------------------------------------------------------------------------------------------
-        /**
-         * 防止浏览器对定时器节流.
-         */
-        let audioContext: AudioContext | null = null;
-        let oscillatorNode: OscillatorNode | null = null;
-        // ----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region WATCH
-        // ----------------------------------------------------------------------------------------------------
-        // ----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region FUNCTION
-        // ----------------------------------------------------------------------------------------------------
-        // ----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onMounted(() => {
-            //region 防止浏览器对定时器节流
-            //----------------------------------------------------------------------------------------------------
-            audioContext = new AudioContext();
-            oscillatorNode = audioContext.createOscillator();
-            oscillatorNode.frequency.value = 0.01;
-            oscillatorNode.connect(audioContext.destination);
-            oscillatorNode.start();
-
-            document.addEventListener('click', () => {
-                try {
-                    audioContext?.resume();
-                } catch (e) {
-                    ____ERROR____(`KgSimulatorCanvas | ${(e as any)?.message}`);
-                }
-            });
-            //----------------------------------------------------------------------------------------------------
-            //endregion
-        });
-
-        onUnmounted(() => {
-            oscillatorNode?.stop();
-            audioContext?.close();
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        return () => (
-            <KgCanvas
-                id={kgSimulator.$KgCanvas$id}
-                kgIsGridBackground={false}
-                kg$ContextMenu$Reload$IsAvailable={kgSimulator.$Mode$IsEdit || kgSimulator.$Mode$IsMonitor}
-                kg$KgCanvasToolbarButtonMode$IsAvailable={kgSimulator.$Mode$IsEdit}
-            ></KgCanvas>
-        );
-    },
-});