light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/blueprint/node/core/impl/websocket/WebSocketNodeConfig.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React, {Suspense} from "react";
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+import BPWebSocketNodeController from "./BPWebSocketNodeController.ts";
+import {WebSocketConfig} from "../../../../../../comps/common-component/data-source-config/WebSocketConfig.tsx";
+import {BPRightConfigProps} from "../../../../right/BPRight.tsx";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+export const WebSocketNodeConfig: React.FC<BPRightConfigProps<BPWebSocketNodeController>> = (props) => {
+    const {controller} = props;
+    const config = controller?.getConfig();
+    return (
+        <div className={'logical-process-node-config'}>
+            <Suspense fallback={<Loading/>}>
+                <WebSocketConfig data={config?.nodeConfig ?? {}}
+                                 onSave={(data) => {
+                                     controller?.update({nodeConfig: data});
+                                     globalMessage.messageApi?.success('配置项已刷新');
+                                 }}/>
+            </Suspense>
+        </div>
+    )
+}

package/light-chaser-app/src/designer/blueprint/node/core/node-container/BPNodeContainer.less

@@ -0,0 +1,25 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+.bp-node-container:hover {
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08),
+  0 0 40px rgba(122, 122, 122, 0.06),
+  0 12px 24px #000000;
+}
+
+.bp-node-container {
+  position: absolute;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05),
+  0 0 30px rgba(255, 255, 255, 0.04),
+  0 8px 20px rgba(0, 0, 0, 0.65);
+  transition: box-shadow 0.3s ease, border 0.3s ease;
+}

package/light-chaser-app/src/designer/blueprint/node/core/node-container/BPNodeContainer.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React, {useEffect, useRef} from "react";
+import bpRightStore from "../../../right/BPRightStore";
+import './BPNodeContainer.less';
+import {BPNodeLayoutType} from "light-chaser-types/types/BluePrintTypes.ts";
+import DesignerLoader from "../../../../loader/DesignerLoader.ts";
+import {BPPopupBoxNodeConfigType} from "../impl/popup-box/BPPopupBoxNodeController.ts";
+
+export interface BPNodeContainerProps {
+    layout: BPNodeLayoutType;
+}
+
+export const BPNodeContainer: React.FC<BPNodeContainerProps> = React.memo(({layout}) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const activeNodeConfig = (id: string) => {
+        const {setActiveNode} = bpRightStore;
+        setActiveNode(id);
+    }
+
+    const calculateApUsed = (nodeConfig: BPPopupBoxNodeConfigType) => {
+        const {input, output} = nodeConfig;
+        const {bpAPMap} = window.LC_ENV.currentManager.bluePrintManager.currentPageManager!;
+        [...input!, ...output!].forEach(ap => {
+            const anchorId = ap.id!;
+            // 首先检查是否作为key存在（最快）
+            if (bpAPMap[anchorId] !== undefined) {
+                ap.used = true;
+                return; // 立即结束当前锚点的校验
+            }
+            // 然后在value中查找
+            for (const value of Object.values(bpAPMap)) {
+                if (Array.isArray(value)) {
+                    if (value.includes(anchorId)) {
+                        ap.used = true;
+                        return; // 找到就立即结束
+                    }
+                } else if (value === anchorId) {
+                    // 如果value是单个ID而不是数组
+                    ap.used = true;
+                    return; // 找到就立即结束
+                }
+            }
+            // 如果都没找到，标记为未使用
+            ap.used = false;
+        });
+    }
+
+    useEffect(() => {
+        const NodeController = DesignerLoader.bpControllerMap[layout.type!];
+        if (!NodeController) return;
+        const ncIns = new NodeController();
+        if (!ncIns) return;
+        const {currPageNodeControllers, currentPageManager} = window.LC_ENV.currentManager.bluePrintManager;
+        const {bpNodeConfigMap} = currentPageManager!;
+        //获取节点配置，优先从bpNodeControllerInsMap中获取，没有则从bpStore.bpNodeConfigMap中获取【上一次保存的配置】，没有的，则最终调用controller的getNodeConfig方法获取【默认配置】
+        let nodeConfig;
+        const prevNodeController = currPageNodeControllers[layout.id!];
+        if (prevNodeController)
+            nodeConfig = prevNodeController.getConfig();
+        else if (bpNodeConfigMap[layout.id!])
+            nodeConfig = bpNodeConfigMap[layout.id!];
+        else
+            nodeConfig = ncIns.getNodeInfo(layout.id!);
+        calculateApUsed(nodeConfig);
+        ncIns.create(ref.current!, nodeConfig);
+        currPageNodeControllers[layout.id!] = ncIns;
+    }, [layout.id, layout.type]);
+    const {position, id} = layout;
+    return (
+        <div ref={ref} className={'bp-node-container'}
+             data-nid={id}
+             onDoubleClick={() => activeNodeConfig(id!)}
+             style={{transform: 'translate(' + position!.x + 'px,' + position!.y + 'px)'}}
+        />
+    )
+})

package/light-chaser-app/src/designer/blueprint/right/BPRight.less

@@ -0,0 +1,181 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+.bp-right {
+  height: 100%;
+  width: 350px;
+  background-color: #1E1E2F;
+  border-left: 1px solid #3A3A4E;
+  display: flex;
+  flex-direction: column;
+}
+
+.node-config-empty-info {
+  color: #A0A0B2;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background-color: #2C2C3E;
+  border-left: 1px solid #3A3A4E;
+}
+
+.bp-node-config {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #1E1E2F;
+  animation: bpNodeConfigAnimation 0.3s forwards ease-out;
+
+  .bp-node-config-header {
+    padding: 20px;
+    border-bottom: 1px solid #3A3A4E;
+    background-color: #2C2C3E;
+
+    .bp-node-config-name {
+      color: #FFFFFF;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+      margin-bottom: 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .bp-node-config-info {
+      color: #A0A0B2;
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+
+  .bp-node-config-list {
+    overflow: auto;
+    height: calc(100vh - 191px);
+    padding: 15px;
+
+    .bp-ap-info-list {
+
+      .accordion-header {
+        background-color: #2C2C3E;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        border: 1px solid #3A3A4E;
+      }
+
+      .bp-ap-info-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 16px;
+        background-color: #2C2C3E;
+        border-radius: 6px;
+        margin-bottom: 8px;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+
+        &:hover {
+          background-color: rgba(79, 184, 255, 0.1);
+          border-color: #4FB8FF;
+          transform: translateY(-1px);
+        }
+
+        .bp-ap-info-type {
+          color: #FFFFFF;
+          font-size: 12px;
+          font-weight: 500;
+          padding: 4px 8px;
+          border-radius: 4px;
+          margin-right: 12px;
+          min-width: 40px;
+          text-align: center;
+
+          &.type-input {
+            background-color: rgba(63, 237, 146, 0.2);
+            color: #3CED92;
+          }
+
+          &.type-output {
+            background-color: rgba(79, 184, 255, 0.2);
+            color: #4FB8FF;
+          }
+        }
+
+        .bp-ap-info-name {
+          color: #FFFFFF;
+          font-size: 14px;
+          line-height: 20px;
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .bp-node-config-detail {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+
+      .accordion-header {
+        background-color: #2C2C3E;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        border: 1px solid #3A3A4E;
+      }
+
+      .accordion-content {
+        background-color: #2C2C3E;
+        border-radius: 8px;
+        border: 1px solid #3A3A4E;
+        padding: 16px;
+      }
+    }
+  }
+}
+
+@keyframes bpNodeConfigAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// 滚动条样式优化
+.bp-node-config-list {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(58, 58, 78, 0.6);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(79, 184, 255, 0.5);
+    }
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(58, 58, 78, 0.6) transparent;
+}

package/light-chaser-app/src/designer/blueprint/right/BPRight.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React from "react";
+import './BPRight.less';
+import {observer} from "mobx-react";
+import bpRightStore from "./BPRightStore";
+import {Accordion} from "light-chaser-ui/lib/main";
+import {AbstractBPNodeController} from "../node/core/AbstractBPNodeController";
+
+export interface BPRightConfigProps<C = AbstractBPNodeController> {
+    controller?: C;
+}
+
+const BPRight: React.FC = observer(() => {
+    const {currPageNodeControllers} = window.LC_ENV.currentManager.bluePrintManager;
+    const {activeNode} = bpRightStore;
+    const activeNodeController = currPageNodeControllers[activeNode!];
+    const nodeConfig = activeNodeController?.getConfig();
+    if (!nodeConfig)
+        return <div className={'bp-right node-config-empty-info'}>请激活节点配置...</div>
+    const apList = [...nodeConfig.input, ...nodeConfig.output]
+    const ConfigComponent: React.ComponentType<BPRightConfigProps<any>> | null = activeNodeController.getConfigComponent();
+    return (
+        <div className={'bp-right bp-node-config'}>
+            <div className={'bp-node-config-header'}>
+                <div className={'bp-node-config-name'}>{nodeConfig?.name}</div>
+                <div className={'bp-node-config-info'}>{`${nodeConfig?.id} | ${nodeConfig?.type}`}</div>
+            </div>
+            <div className="bp-node-config-list">
+                <div className={'bp-ap-info-list'}>
+                    <Accordion label={'锚点信息'} defaultActive={true}>
+                        {apList.map(ap => {
+                            return (
+                                <div className={'bp-ap-info-item'} key={ap.id}>
+                                    <div className={`bp-ap-info-type ${ap.type === 0 ? 'type-input' : 'type-output'}`}>
+                                        {ap.type === 0 ? '输入' : '输出'}
+                                    </div>
+                                    <div className={'bp-ap-info-name'}>{ap.name}</div>
+                                </div>
+                            )
+                        })}
+                    </Accordion>
+                </div>
+                {
+                    ConfigComponent &&
+                    <div className={'bp-node-config-detail'}>
+                        <Accordion label={'节点配置'} defaultActive={true}>
+                            <ConfigComponent controller={activeNodeController}/>
+                        </Accordion>
+                    </div>
+                }
+            </div>
+        </div>
+    )
+})
+
+export default BPRight;

package/light-chaser-app/src/designer/blueprint/right/BPRightStore.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {action, makeObservable, observable, runInAction} from "mobx";
+
+class BPRightStore {
+    constructor() {
+        makeObservable(this, {
+            activeNode: observable,
+            setActiveNode: action,
+        })
+    }
+
+    activeNode: string | null = null;
+
+    setActiveNode = (node: string | null) => {
+        this.activeNode = null;
+        const timer = setTimeout(() => {
+            runInAction(()=>this.activeNode = node);
+            clearTimeout(timer)
+        }, 0);
+    }
+}
+
+const bpRightStore = new BPRightStore();
+export default bpRightStore;

package/light-chaser-app/src/designer/blueprint/util/BpCanvasUtil.ts

@@ -0,0 +1,254 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {IBPLine, IPoint} from "light-chaser-types/types/BluePrintTypes.ts";
+import {Graphics} from "pixi.js";
+
+export interface CubicBezierCurvesCP {
+    firstCP: IPoint;
+    secondCP: IPoint;
+}
+
+export const bpLineConfig = {
+    connectingColor: '#6d6d6d',
+    connectingWidth: 1,
+    lineColor: '#999999',
+    lineWidth: 2,
+    hoverColor: '#9ac7ff',
+    hoverWidth: 3,
+    circleRadius: 4,
+    selectedColor: '#4ba6ff',
+    selectedWidth: 4,
+}
+
+export default class BpCanvasUtil {
+
+    //计算三次贝塞尔曲线的2个控制点
+    public static calculateControlPoint(startPos: IPoint, endPos: IPoint): CubicBezierCurvesCP {
+        const direction = endPos.x < startPos.x ? 'left' : 'right';
+        const boxWidth = Math.abs(endPos.x - startPos.x);
+        const firstCP: IPoint = {x: 0, y: 0};
+        const secondCP: IPoint = {x: 0, y: 0};
+        //计算贝塞尔控制点
+        if (direction === 'right') {
+            firstCP.x = startPos.x + (boxWidth * 0.5);
+            firstCP.y = startPos.y;
+            secondCP.x = endPos.x - (boxWidth * 0.5);
+            secondCP.y = endPos.y;
+        } else {
+            firstCP.x = startPos.x + (boxWidth * 0.8);
+            firstCP.y = startPos.y;
+            secondCP.x = endPos.x - (boxWidth * 0.8);
+            secondCP.y = endPos.y;
+        }
+        return {firstCP, secondCP};
+    }
+
+    public static reRenderAllLine = () => {
+        const {currentPageManager, canvasOffset, lineInstances} = window.LC_ENV.currentManager.bluePrintManager!;
+        const {bpLines} = currentPageManager!;
+        const lines = Object.values(bpLines);
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            //重新设置连线的起始点和终点
+            const {startAnchorId, endAnchorId} = line;
+            const startDom = document.getElementById(startAnchorId!);
+            const endDom = document.getElementById(endAnchorId!);
+            if (!startDom || !endDom)
+                continue;
+            const {x: startX, y: startY, width: startW, height: startH} = startDom!.getBoundingClientRect();
+            const {x: endX, y: endY, width: endW, height: endH} = endDom!.getBoundingClientRect();
+            //定位到锚点中心
+            line.startPoint = {
+                x: startX + (startW / 2) - canvasOffset.x,
+                y: startY + (startH / 2) - canvasOffset.y
+            };
+            line.endPoint = {
+                x: endX + (endW / 2) - canvasOffset.x,
+                y: endY + (endH / 2) - canvasOffset.y
+            };
+            //重新计算二次贝塞尔曲线的控制点
+            const controlPoi = BpCanvasUtil.calculateControlPoint(line.startPoint, line.endPoint);
+            line.firstCP = controlPoi.firstCP;
+            line.secondCP = controlPoi.secondCP;
+
+            const lineInstance = lineInstances[line.id!];
+            if (!lineInstance) {
+                BpCanvasUtil.createLine({...line});
+            } else {
+                BpCanvasUtil.reDrawLine(line, lineInstance)
+            }
+        }
+    }
+
+    public static updNodeAndLinePos = (nodeId: string, position: IPoint) => {
+        const {
+            currPageNodeControllers, currentPageManager,
+            updLinePos, updBpNodeLayout, canvasOffset
+        } = window.LC_ENV.currentManager.bluePrintManager!;
+        const {bpAPLineMap, bpLines,} = currentPageManager!;
+        //更新节点位置
+        updBpNodeLayout({
+            id: nodeId,
+            position: {
+                x: position.x,
+                y: position.y
+            }
+        })
+        //更新线段位置
+        const bpNodeCtrlIns = currPageNodeControllers[nodeId];
+        const {input = [], output = []} = bpNodeCtrlIns.getConfig();
+        const aps = [...input!, ...output!];
+
+        aps && aps.forEach(ap => {
+            const lineIds = bpAPLineMap[ap.id!];
+            if (!lineIds)
+                return;
+            for (let i = 0; i < lineIds.length; i++) {
+                const lineId = bpAPLineMap[ap.id!][i];
+                const lineInfo = bpLines[lineId];
+                if (lineInfo) {
+                    const {startAnchorId, endAnchorId} = lineInfo;
+                    const startDom = document.getElementById(startAnchorId!);
+                    const endDom = document.getElementById(endAnchorId!);
+                    if (!startDom || !endDom)
+                        continue;
+                    const {x: startX, y: startY, width: startW, height: startH} = startDom!.getBoundingClientRect();
+                    const {x: endX, y: endY, width: endW, height: endH} = endDom!.getBoundingClientRect();
+                    updLinePos({
+                        id: lineId,
+                        //定位到锚点中心
+                        startPoint: {
+                            x: startX + (startW / 2) - canvasOffset.x,
+                            y: startY + (startH / 2) - canvasOffset.y
+                        },
+                        endPoint: {
+                            x: endX + (endW / 2) - canvasOffset.x,
+                            y: endY + (endH / 2) - canvasOffset.y
+                        }
+                    })
+                }
+            }
+        });
+    }
+
+    private static cubicBezierPoint(s: IPoint, p1: IPoint, p2: IPoint, e: IPoint, t: number): IPoint {
+        const x = Math.pow(1 - t, 3) * s.x +
+            3 * Math.pow(1 - t, 2) * t * p1.x +
+            3 * (1 - t) * Math.pow(t, 2) * p2.x +
+            Math.pow(t, 3) * e.x;
+
+        const y = Math.pow(1 - t, 3) * s.y +
+            3 * Math.pow(1 - t, 2) * t * p1.y +
+            3 * (1 - t) * Math.pow(t, 2) * p2.y +
+            Math.pow(t, 3) * e.y;
+
+        return {x, y};
+    }
+
+    public static createLine = (line: IBPLine) => {
+        const bpManager = window.LC_ENV.currentManager.bluePrintManager!;
+        const {currentPageManager} = bpManager;
+        const bezier = new Graphics();
+        bpManager.lineInstances[line.id!] = bezier;
+        bpManager.pixiApp?.stage.addChild(bezier);
+        bezier.interactive = true;
+
+        const {startPoint, endPoint, firstCP, secondCP, lineWidth, color} = line;
+
+        bezier.moveTo(startPoint?.x ?? 0, startPoint?.y ?? 0)
+        bezier.bezierCurveTo(firstCP?.x ?? 0, firstCP?.y ?? 0, secondCP?.x ?? 0, secondCP?.y ?? 0, endPoint?.x ?? 0, endPoint?.y ?? 0);
+        bezier.stroke({width: lineWidth, color: color});
+
+        const middlePoint = BpCanvasUtil.cubicBezierPoint(startPoint!, firstCP!, secondCP!, endPoint!, 0.5);
+
+        // 绘制圆形
+        bezier.circle(middlePoint.x, middlePoint.y, bpLineConfig.circleRadius);
+        bezier.fill(line.color);
+
+        bezier.on('click', (e) => {
+            if (e.ctrlKey) {
+                bpManager.delLine([line.id!])
+            } else {
+                bpManager.setSelectedLines([line.id!])
+                const {startPoint, firstCP, secondCP, endPoint} = currentPageManager!.bpLines[line.id!]!
+                bezier.clear();
+                bezier.moveTo(startPoint?.x ?? 0, startPoint?.y ?? 0)
+                bezier.bezierCurveTo(firstCP?.x ?? 0, firstCP?.y ?? 0, secondCP?.x ?? 0, secondCP?.y ?? 0, endPoint?.x ?? 0, endPoint?.y ?? 0);
+                bezier.stroke({width: bpLineConfig.selectedWidth, color: bpLineConfig.selectedColor});
+
+                const middlePoint = BpCanvasUtil.cubicBezierPoint(startPoint!, firstCP!, secondCP!, endPoint!, 0.5);
+                // 绘制圆形
+                bezier.circle(middlePoint.x, middlePoint.y, bpLineConfig.circleRadius);
+                bezier.fill(bpLineConfig.selectedColor);
+            }
+        })
+
+        bezier.on('mouseover', () => {
+            bpManager.pixiApp && (bpManager.pixiApp.canvas.style.cursor = 'pointer')
+            if (bpManager.selectedLines.some(lineId => lineId === line.id))
+                return;
+            const {startPoint, firstCP, secondCP, endPoint} = currentPageManager!.bpLines[line.id!]!
+            bezier.clear();
+            bezier.moveTo(startPoint?.x ?? 0, startPoint?.y ?? 0)
+            bezier.bezierCurveTo(firstCP?.x ?? 0, firstCP?.y ?? 0, secondCP?.x ?? 0, secondCP?.y ?? 0, endPoint?.x ?? 0, endPoint?.y ?? 0);
+            bezier.stroke({width: bpLineConfig.hoverWidth, color: bpLineConfig.hoverColor});
+
+            const middlePoint = BpCanvasUtil.cubicBezierPoint(startPoint!, firstCP!, secondCP!, endPoint!, 0.5);
+            // 绘制圆形
+            bezier.circle(middlePoint.x, middlePoint.y, bpLineConfig.circleRadius);
+            bezier.fill(bpLineConfig.hoverColor);
+        })
+        bezier.on('mouseout', () => {
+            bpManager.pixiApp && (bpManager.pixiApp.canvas.style.cursor = 'default')
+            if (bpManager.selectedLines.some(lineId => lineId === line.id))
+                return;
+            const {startPoint, firstCP, secondCP, endPoint} = currentPageManager!.bpLines[line.id!]!
+            bezier.clear();
+            bezier.moveTo(startPoint?.x ?? 0, startPoint?.y ?? 0)
+            bezier.bezierCurveTo(firstCP?.x ?? 0, firstCP?.y ?? 0, secondCP?.x ?? 0, secondCP?.y ?? 0, endPoint?.x ?? 0, endPoint?.y ?? 0);
+            bezier.stroke({width: bpLineConfig.lineWidth, color: bpLineConfig.lineColor});
+
+            const middlePoint = BpCanvasUtil.cubicBezierPoint(startPoint!, firstCP!, secondCP!, endPoint!, 0.5);
+            // 绘制圆形
+            bezier.circle(middlePoint.x, middlePoint.y, bpLineConfig.circleRadius);
+            bezier.fill(bpLineConfig.lineColor);
+        })
+    }
+
+    public static reDrawLine = (line: IBPLine, bezier: Graphics) => {
+        const {startPoint, endPoint, firstCP, secondCP, lineWidth, color} = line;
+        bezier?.clear();
+        bezier?.moveTo(startPoint?.x ?? 0, startPoint?.y ?? 0)
+        bezier?.bezierCurveTo(firstCP?.x ?? 0, firstCP?.y ?? 0, secondCP?.x ?? 0, secondCP?.y ?? 0, endPoint?.x ?? 0, endPoint?.y ?? 0);
+        bezier?.stroke({width: lineWidth, color});
+
+        const middlePoint = BpCanvasUtil.cubicBezierPoint(line.startPoint!, line.firstCP!, line.secondCP!, line.endPoint!, 0.5);
+        // 绘制圆形
+        bezier.circle(middlePoint.x, middlePoint.y, bpLineConfig.circleRadius);
+        bezier.fill(color);
+    }
+
+    /**
+     * 更新已使用的锚点颜色
+     * @param fromId 起始锚点id
+     * @param toId 结束锚点id
+     * @param color 颜色
+     */
+    public static updateAnchorsColor = (fromId: string, toId: string, color: string) => {
+        if (fromId && toId) {
+            const formEle = document.getElementById(fromId);
+            const toEle = document.getElementById(toId);
+            formEle && formEle.style.setProperty('background-color', color, 'important');
+            toEle && toEle.style.setProperty('background-color', color, 'important');
+        }
+    }
+}