light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/map/AMapConfig.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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, {useRef} from 'react';
+import {AMapController} from "./AMapController.ts";
+import {ConfigType} from "../../designer/right/ConfigContent.tsx";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+
+export const AMapConfig: React.FC<ConfigType<AMapController>> = ({controller}) => {
+
+    const config = controller.getConfig()?.style;
+
+    const codeRef = useRef<string>(config?.customCode || 'function(container, AMap) {\n\n\n\n\n\n\n\n}');
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {id, data, dataFragment} = fieldChangeData;
+        if (id === 'customCode') {
+            codeRef.current = data as string;
+            return;
+        }
+        if (id === 'refreshMap')
+            controller.update({style: {customCode: codeRef.current}});
+        else
+            controller.update(dataFragment);
+    }
+
+    const schema: Control = {
+        key: 'style',
+        type: 'grid',
+        children: [
+            {
+                type: 'accordion',
+                label: '基础信息',
+                children: [
+                    {
+                        type: "grid",
+                        children: [
+                            {
+                                type: 'input',
+                                label: 'KEY',
+                                key: 'key',
+                                value: config?.key
+                            },
+                            {
+                                type: 'input',
+                                label: '密钥',
+                                key: 'securityJsCode',
+                                value: config?.securityJsCode,
+                                config: {
+                                    type: "password"
+                                }
+                            },
+                        ]
+                    }
+                ]
+            },
+            {
+                type: 'accordion',
+                label: '自定义地图',
+                children: [
+                    {
+                        type: 'grid',
+                        children: [
+                            {
+                                id: 'customCode',
+                                type: 'code-editor',
+                                value: codeRef.current,
+                                config: {
+                                    language: 'javascript',
+                                    height: 600,
+                                    fullScreen: true
+                                }
+                            },
+                            {
+                                type: 'button',
+                                id: 'refreshMap',
+                                config: {
+                                    children: '刷新地图',
+                                }
+                            }
+                        ]
+                    },
+                ]
+            }
+
+        ]
+    }
+
+
+    return (
+        <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+    )
+}
+

package/light-chaser-app/src/comps/map/AMapController.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 AMapComponent, {AMapComponentProps, AMapComponentRef} from "./AMapComponent.tsx";
+import AbstractDesignerController from "../../framework/core/AbstractDesignerController.ts";
+import ObjectUtil from "../../../../light-chaser-util/lib/ObjectUtil.ts";
+import {UpdateOptions} from "../../framework/core/AbstractController.ts";
+import BPExecutor from "../../designer/blueprint/core/BPExecutor.ts";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+
+export class AMapController extends AbstractDesignerController<AMapComponentRef, AMapComponentProps> {
+
+    async create(container: HTMLElement, config: AMapComponentProps, executor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, executor, index);
+        this.instance = await ComponentUtil.createAndRender<AMapComponentRef>(container, AMapComponent, config);
+        if (window.AMap) {
+            if (window.AMap_Key)
+                this.config!.style!.key = window.AMap_Key;
+            if (window.AMap_securityJsCode)
+                this.config!.style!.securityJsCode = window.AMap_securityJsCode;
+        }
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): AMapComponentProps | null {
+        return this.config;
+    }
+
+    update(config: AMapComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+
+    registerEvent() {
+        const nodeId = this.config?.base?.id ?? '';
+        const executor = this.bpExecutor;
+        this.instance?.setEventHandler({
+            click: () => executor?.triggerComponentEvent(nodeId!, "click", this.config),
+        })
+    }
+}

package/light-chaser-app/src/comps/map/AMapDefinition.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 aMapImage from './a-map.png';
+import {AMapController} from "./AMapController.ts";
+import {AMapComponentProps} from "./AMapComponent.tsx";
+import {MenuInfo} from "../../designer/right/MenuType.ts";
+import React, {lazy} from "react";
+import AbstractDesignerDefinition from "../../framework/core/AbstractDesignerDefinition.ts";
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+
+const BaseInfo = React.lazy(() => import("../common-component/base-info/BaseInfo"));
+const ThemeConfig = React.lazy(() => import("../common-component/theme-config/ThemeConfig.tsx"));
+const AnimationConfig = React.lazy(() => import("../common-component/animation-config/AnimationConfig.tsx"));
+const FilterConfig = React.lazy(() => import("../common-component/filter-config/FilterConfig.tsx"));
+const AMapConfig = lazy(() => import("./AMapConfig.tsx").then((module) => ({default: module.AMapConfig})));
+
+export default class AMapDefinition extends AbstractDesignerDefinition<AMapController, AMapComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "自定义高德地图",
+            compKey: "AMap",
+            categorize: "map",
+        };
+    }
+
+    getChartImg(): string | null {
+        return aMapImage;
+    }
+
+    getController(): ClazzTemplate<AMapController> | null {
+        return AMapController;
+    }
+
+    getInitConfig(): AMapComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '自定义高德地图',
+                type: 'AMap',
+            },
+            style: {
+                key: "",
+                securityJsCode: "",
+                customCode: "function(container, AMap, bpTriggers) {\n" +
+                    "    let map = new AMap.Map(container, {\n" +
+                    "        zoom: 11.43,\n" +
+                    "        center: [120.2446746826172, 30.199146446037616],\n" +
+                    "        pitch: 55,\n" +
+                    "        rotation: 20,\n" +
+                    "        showLabel: true,\n" +
+                    "        viewMode: '3D',\n" +
+                    "        mapStyle: 'amap://styles/dark',\n" +
+                    "    });\n" +
+                    "    return map;\n" +
+                    "}"
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+        };
+    }
+
+    getMenuList(): Array<MenuInfo> {
+        return super.getMenuList().filter((item: MenuInfo) => (item.key !== 'theme' && item.key !== 'data'));
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: AMapConfig,
+            animation: AnimationConfig,
+            theme: ThemeConfig,
+            filter: FilterConfig
+        };
+    }
+
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/map/AMapScaleObserver.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 AbstractScaleObserver from "../../framework/core/AbstractScaleObserver.ts";
+import ScaleAction from "../../framework/core/ScaleAction.ts";
+
+export default class AMapScaleObserver extends AbstractScaleObserver {
+
+    mapDom: HTMLDivElement | null = null;
+    observer: ResizeObserver | null = null;
+
+    constructor(mapDom: HTMLDivElement | null) {
+        super();
+        this.mapDom = mapDom;
+        this.mapDom!.style.transformOrigin = '0 0'
+        ScaleAction.add(this)
+    }
+
+    doScale(xScale: number, yScale: number): void {
+        this.mapDom!.style.transform = `scale(${1 / xScale},${1 / yScale})`
+        this.observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                const {width, height} = entry.contentRect;
+                this.mapDom!.style.width = width * xScale + 'px';
+                this.mapDom!.style.height = height * yScale + 'px';
+            });
+        });
+        this.observer.observe(this.mapDom!.parentElement!)
+    }
+
+    destroy(): void {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+}

package/light-chaser-app/src/comps/map/MapLoader.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 AMapLoader from "@amap/amap-jsapi-loader";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+class MapLoader {
+
+    loadPromise: Promise<Window["AMap"] | null> | null = null;
+
+    public async load(key: string, securityJsCode: string): Promise<Window["AMap"] | null> {
+        if (window.AMap) {
+            return window.AMap;
+        } else {
+            if (!securityJsCode || securityJsCode === "")
+                globalMessage.messageApi?.info("缺少安全密钥")
+            window._AMapSecurityConfig = {
+                securityJsCode: securityJsCode,
+            };
+
+            if (this.loadPromise)
+                return this.loadPromise;
+            this.loadPromise = new Promise<Window["AMap"] | null>((resolve) => {
+                AMapLoader.load({
+                    key: key,
+                    version: "2.0",
+                    plugins: ["AMap.Scale"],
+                    Loca: {
+                        "version": '2.0.0'
+                    }
+                }).then((AMap) => {
+                    if (AMap) {
+                        window.AMap = AMap;
+                        window.AMap_Key = key;
+                        window.AMap_securityJsCode = securityJsCode;
+                        resolve(AMap);
+                    } else {
+                        globalMessage.messageApi?.error("地图加载失败...")
+                        this.loadPromise = null;
+                        resolve(null);
+                    }
+                }).catch(() => {
+                    this.loadPromise = null;
+                    resolve(null);
+                });
+            });
+            return this.loadPromise;
+        }
+    }
+}
+
+const mapLoader = new MapLoader();
+export default mapLoader;

package/light-chaser-app/src/comps/map/a-map.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+declare global {
+    interface Window {
+        AMap_Key: string;
+        AMap_securityJsCode: string;
+        _AMapSecurityConfig: {
+            securityJsCode: string;
+        };
+    }
+}
+
+export {}

package/light-chaser-app/src/constant/GlobalConstant.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+/**
+ * 保存组件属性时，若属性值为函数，则需要添加上此前缀，便于后续反序列化还原函数
+ */
+export const CONFIG_FUNC_PREFIX = 'CONFIG_FUNC_PREFIX::';
+
+export const PIXEL_BOUNDARY_VALUE = 22369618;

package/light-chaser-app/src/designer/Designer.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 {useEffect, useRef} from 'react';
+import 'nprogress/nprogress.css';
+import './style/DesignerGlobalStyle.less';
+import DesignerLeft from "./left/DesignerLeft";
+import DesignerRight from "./right/DesignerRight";
+import DesignerFooter from "./footer/DesignerFooter";
+import contextMenuStore from "./event/ContextMenuStore.ts";
+import eventOperateStore from "./operate-provider/EventOperateStore";
+import DesignerHeader from "./header/DesignerHeader";
+import DesignerCanvas from "./canvas/DesignerCanvas";
+import {observer} from "mobx-react";
+import {FrameLayout, Loading} from 'light-chaser-ui/lib/main';
+import '../global/ExportEditGlobalMember.ts';
+import {doPaste} from "./operate-provider/hot-key/HotKeyImpl.ts";
+import EditDesignerLoader from "./loader/EditDesignerLoader.ts";
+import {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+import DesignerLoader from "./loader/DesignerLoader.ts";
+import designerHeaderStore from "./header/DesignerHeaderStore.ts";
+
+
+/*****************事件处理*****************/
+const clickHandler = (event: MouseEvent) => {
+    const {canvasMenuVisible, bpMenuVisible, updateBpMenuVisible, updateCanvasMenuVisible} = contextMenuStore;
+    if (event.button === 0) {
+        //这里添加异步处理的原因：必须要在操作菜单执行点击事件执行之后才能卸载dom元素，不然操作菜单的点击事件会失效。
+        if (canvasMenuVisible || bpMenuVisible) {
+            const tempTimer = setTimeout(() => {
+                canvasMenuVisible && updateCanvasMenuVisible(false);
+                bpMenuVisible && updateBpMenuVisible(false);
+                clearTimeout(tempTimer);
+            });
+        }
+    }
+}
+
+const contextMenuHandler = (event: MouseEvent) => {
+    event.preventDefault();
+    const {updateCanvasMenuVisible, updateBpMenuVisible} = contextMenuStore;
+    const {mouseDownTime, mouseUpTime, setPosition} = contextMenuStore;
+    if (designerHeaderStore.currentKey === 'blue-print') {//蓝图设计器
+        const {bluePrintManager} = window.LC_ENV.currentManager;
+        if (bluePrintManager) {
+            const bpCanvas = document.querySelector(".blue-print-canvas")!;
+            if (!bpCanvas || !bpCanvas?.contains(event.target as HTMLElement))
+                return;
+            if (mouseUpTime - mouseDownTime < 200) {
+                updateBpMenuVisible && updateBpMenuVisible(true);
+                setPosition([event.clientX, event.clientY]);
+            } else {
+                updateBpMenuVisible && updateBpMenuVisible(false);
+            }
+        }
+    } else {//主设计器
+        const {targetIds} = eventOperateStore;
+        //由于mac端下 setPointerCapture(e.pointerId); 会导致事件target指向发生变化，进而导致右键菜单失效，因此调整为只要选中了元素，且在主画布范围内均可显示右键菜单
+        const eventContainer = document.querySelector('.lc-event-container');
+        const layerListContainer = document.querySelector('.layer-items');
+        if (targetIds && targetIds.length > 0
+            && (eventContainer?.contains(event.target as HTMLElement) || layerListContainer?.contains(event.target as HTMLElement))
+            && mouseUpTime - mouseDownTime < 200) {
+            updateCanvasMenuVisible && updateCanvasMenuVisible(true);
+            setPosition([event.clientX, event.clientY]);
+        } else {
+            updateCanvasMenuVisible && updateCanvasMenuVisible(false);
+        }
+    }
+}
+
+const pointerDownHandler = () => {
+    const {setMouseDownTime} = contextMenuStore;
+    setMouseDownTime(Date.now());
+}
+
+const pointerUpHandler = (event: PointerEvent) => {
+    const {setMouseUpTime, setPointerTarget} = contextMenuStore;
+    setMouseUpTime(Date.now());
+    setPointerTarget(event.target as HTMLElement);
+}
+
+const doWheelHandler = (e: WheelEvent) => {
+    //设计器编辑页面禁用缩放
+    if (e.ctrlKey)
+        e.preventDefault();
+}
+
+// 由于浏览器的限制，control v粘贴只能在https场景下才能调用新的API获取剪切板数据，而历史的document.execCommand('paste');方式也失效，
+// 因此改为通过监听paste事件的方式读取剪贴板数据并进行组件的粘贴动作。
+const doPasteHandler = (e: ClipboardEvent) => {
+    doPaste(e.clipboardData?.getData('text/plain') ?? '');
+}
+
+const Designer = observer((props: { id: string }) => {
+
+    const loaderRef = useRef<DesignerLoader>(new EditDesignerLoader(DesignerMode.EDIT));
+
+    useEffect(() => {
+        loaderRef.current?.load(props.id).then(() => {
+            if (loaderRef.current?.projectInfo?.name)
+                document.title = loaderRef.current?.projectInfo?.name
+            //绑定事件到dom元素
+            document.addEventListener("click", clickHandler);
+            document.addEventListener("contextmenu", contextMenuHandler);
+            document.addEventListener("pointerdown", pointerDownHandler);
+            document.addEventListener("pointerup", pointerUpHandler);
+            document.addEventListener("paste", doPasteHandler);
+            document.addEventListener("wheel", doWheelHandler, {passive: false}); //标示为浏览器非被动事件，必须在事件处理完毕后再判断是否执行默认动作，此处只执行简单逻辑，无性能损耗
+        });
+        window.LC_ENV.editorLoader = loaderRef.current;
+        return () => {
+            //卸载dom元素上的事件
+            document.removeEventListener("click", clickHandler);
+            document.removeEventListener("contextmenu", contextMenuHandler);
+            document.removeEventListener("pointerdown", pointerDownHandler);
+            document.removeEventListener("pointerup", pointerUpHandler);
+            document.removeEventListener("wheel", doWheelHandler);
+            document.removeEventListener("paste", doPasteHandler);
+        }
+    }, []);
+
+    const {loaded} = loaderRef.current;
+    if (!loaded)
+        return <Loading/>;
+    return (
+        <div style={{backgroundColor: '#1f1f1f'}}>
+            <FrameLayout header={<DesignerHeader/>}
+                         left={<DesignerLeft/>}
+                         content={<DesignerCanvas/>}
+                         right={<DesignerRight/>}
+                         footer={<DesignerFooter/>}/>
+        </div>
+    );
+})
+
+export default Designer;
+

package/light-chaser-app/src/designer/blueprint/BPCanvas.less

@@ -0,0 +1,24 @@
+/*
+ * 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-movable {
+  .moveable-area:hover {
+    cursor: grab;
+  }
+}
+
+.bp-right {
+  .bp-node-config-detail {
+    .ant-collapse-content-box {
+      background: none !important;
+    }
+  }
+}

package/light-chaser-app/src/designer/blueprint/BPCanvas.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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, useEffect} from "react";
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+import LineLayer from "./line/LineLayer.tsx";
+import NodeLayer from "./node/NodeLayer.tsx";
+import DragScaleProvider from "../../framework/drag-scale/DragScaleProvider.tsx";
+import BpCanvasUtil from "./util/BpCanvasUtil.ts";
+import BpContextMenu from "./bp-context-menu/BpContextMenu.tsx";
+import './BPCanvas.less';
+
+const BPCanvas: React.FC = () => {
+
+    const containerRef = React.createRef<HTMLDivElement>();
+
+    useEffect(() => {
+        const {bluePrintManager: {setCanvasTranslate, setCanvasScale, setBpDragContentRef}} = window.LC_ENV.currentManager;
+        let dragScaleProvider: DragScaleProvider;
+        let count = 0;
+        const interval = setInterval(() => {
+            const dsTarget = document.getElementById("bp-node-content") as HTMLDivElement;
+            if (dsTarget && containerRef.current) {
+                setBpDragContentRef(dsTarget!);
+                dragScaleProvider = new DragScaleProvider({
+                    eventContainer: containerRef.current!,
+                    dsTarget: dsTarget,
+                    dragCallback: (dsData) => {
+                        const {position} = dsData;
+                        setCanvasTranslate(position);
+                        BpCanvasUtil.reRenderAllLine();
+                    },
+                    dragEndCallback: () => {
+
+                    },
+                    scaleCallback: (dsData) => {
+                        const {position, scale} = dsData;
+                        setCanvasScale(scale);
+                        setCanvasTranslate(position);
+                        BpCanvasUtil.reRenderAllLine();
+                    },
+                });
+                clearInterval(interval);
+            }
+            count++;
+            if (count > 100) {
+                //初始化蓝图拖拽系统，尝试100次后放弃
+                console.error("BPCanvas: Failed to find bp-node-content element after 10 tries.");
+                clearInterval(interval);
+            }
+        }, 10)
+
+        return () => {
+            window.LC_ENV.currentManager.bluePrintManager.lineInstances = {};
+            dragScaleProvider?.destroy();
+        };
+    }, [])
+    return (
+        <>
+            <div className={'blue-print-canvas'} style={{overflow: "hidden", width: '100%', height: '100%',background:'#13131f'}}
+                 ref={containerRef}>
+                <Suspense fallback={<Loading/>}>
+                    <LineLayer/>
+                    <NodeLayer/>
+                </Suspense>
+            </div>
+            <BpContextMenu/>
+        </>
+    )
+}
+export default BPCanvas;