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

package/component/KgSimulator/KgSimulator.Canvas.tsx

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