light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/manager/ManagerStore.ts

@@ -0,0 +1,93 @@
+/*
+ * 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} from "mobx";
+import DesignerManager from "./DesignerManager.ts";
+import {DesignerScene} from "light-chaser-types/types/DesignerTypes.ts";
+
+/**
+ * 记录当前编辑器中正在使用的项目管理器
+ */
+class ManagerStore {
+    constructor() {
+        makeObservable(this, {
+            pushManager: action,
+            popManager: action,
+            isMainManager: observable,
+            currentManager: observable,
+            setCurrentManager: action
+        })
+    }
+
+    designerScene: DesignerScene = DesignerScene.DEFAULT;
+
+    /**
+     * 用于存储多层级管理器，用于循环组件的嵌套场景
+     */
+    managerStack: DesignerManager[] = [];
+
+    /**
+     * 当前管理器是否是主项目管理器
+     */
+    isMainManager: boolean = true;
+
+    /**
+     * 当前管理器
+     * 用于切换当前编辑的项目内容
+     */
+    currentManager: DesignerManager | null = null;
+
+    /**
+     * 当前场景下的最终有效管理器
+     * 在编辑循环容器、子项目、默认主要项目时都有属于自己的管理器
+     * 但循环容器的manger并不独立保存，而是依赖跟随主项目进行保存
+     * 主项目、子项目的manger均可独立进行保存
+     * 此属性的目的是保留当前的可独立保存的manager
+     * 针对在子项目或循环容器中继续嵌套循环容器的时候，可以通过该属性精准获取到可独立保存的manager
+     */
+    currentFinalManager: DesignerManager | null = null;
+
+    setCurrentManager(manager: DesignerManager, isMainManager?: boolean, designerScene?: DesignerScene) {
+        this.currentManager = manager;
+        if (isMainManager !== undefined)
+            this.isMainManager = isMainManager;
+        if (designerScene !== undefined)
+            this.designerScene = designerScene;
+        if (manager.scene !== DesignerScene.LOOP_CONTAINER)
+            this.currentFinalManager = manager;
+    }
+
+    /**
+     * 管理器入栈
+     * 用于循环容器的嵌套场景
+     * @param manager
+     */
+    pushManager(manager: DesignerManager) {
+        this.managerStack.push(manager);
+        if (this.managerStack.length > 1)
+            this.isMainManager = false;
+    }
+
+    /**
+     * 管理器出栈
+     * 用于循环容器的嵌套场景
+     */
+    popManager() {
+        if (this.managerStack.length === 1) {
+            this.isMainManager = true;
+            return this.managerStack[0];
+        } else
+            return this.managerStack.pop();
+    }
+}
+
+const managerStore = new ManagerStore();
+export default managerStore;

package/light-chaser-app/src/designer/manager/core/AbstractManager.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 default abstract class AbstractManager<D> {
+    public abstract init(data: D, ...other: unknown[]): void;
+
+    public abstract getData(): D;
+
+    public abstract destroy(): void;
+}

package/light-chaser-app/src/designer/operate-provider/EventOperateStore.ts

@@ -0,0 +1,150 @@
+/*
+ * 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} from "mobx";
+import Moveable from "react-moveable";
+import ObjectUtil from "../../../../light-chaser-util/lib/ObjectUtil.ts";
+import Selecto from "react-selecto";
+import {DesignerRulerRef} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {GroupCoordinateType} from "light-chaser-types/types/LayerTypes.ts";
+import contextMenuStore from "../event/ContextMenuStore.ts";
+import CoordinateUtil from "../../util/CoordinateUtil.ts";
+import LayerUtil from "../left/layer-list/util/LayerUtil.ts";
+
+/**
+ * 设计器画布及元素操作控制store，用于协调缩放、拖拽、选择，右键操作菜单操作之间的数据传递
+ * Designer canvas and element operation control store, used to coordinate data transmission between zoom, drag, selection, right-click operation menu operation
+ */
+class EventOperateStore {
+    constructor() {
+        makeObservable(this, {
+            targetIds: observable,
+            scale: observable,
+            setScale: action,
+            setTargetIds: action,
+        })
+    }
+
+    /**
+     * 拖拽框架实例引用
+     * Drag and drop framework instance reference
+     */
+    movableRef: Moveable | null = null;
+    /**
+     * 选择器框架实例引用
+     * Selector framework instance reference
+     */
+    selectorRef: Selecto | null = null;
+    /**
+     * 设计器标尺组件实例引用
+     */
+    rulerRef: DesignerRulerRef | null = null;
+    /**
+     * 设计器画布拖拽缩放内容dom实例引用（用于同步标尺的缩放）
+     */
+    dsContentRef: HTMLDivElement | null = null;
+
+    /**
+     * 选中的组件id列表。该列表存储被直接或间接选中的组件id。
+     * 如果你直接选中一个独立的组件，则该列表存储该组件的id
+     * 如果你选中了一个分组，则该列表存储该分组id及该分组下的所有子组件id
+     */
+    targetIds: string[] = [];
+
+    /**
+     * 直接选中的组件id列表。该列表用于存储直观操作的组件id
+     * 如果你单独选中一个独立的组件，则该列表中存储该组件的id
+     * 如果你选中的组件是一个组合中的子组件，则该列表中存储的id为该组件所在分组的组id
+     */
+    directSelectedIds: string[] = [];
+
+    /**
+     * 组合框选时的坐标信息
+     */
+    groupCoordinate: GroupCoordinateType = {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity
+    };
+
+    /**
+     * 用于记录当前手动（双击或拖拽）新添加的组件id,实际渲染时根据该id读取组件数据并记录操作日志。非手动添加的组件不会记录操作日志
+     */
+    addRecordCompId: string | null = null;
+
+    /**
+     * 当前画布的缩放比例，作为响应式变量，再缩放画布时，实时调整控制点的大小
+     */
+    scale = 1;
+
+    /**
+     * 设计器画布缩放比例
+     */
+    ratio = 1;
+
+    setDsContentRef = (ref: HTMLDivElement | null) => this.dsContentRef = ref;
+
+    setRuleRef = (ref: DesignerRulerRef | null) => this.rulerRef = ref;
+
+    setRatio = (ratio: number) => this.ratio = ratio;
+
+    setScale = (scale: number) => this.scale = scale;
+
+    setAddRecordCompId = (id: string | null) => this.addRecordCompId = id;
+
+    setMovableRef = (ref: Moveable) => this.movableRef = ref;
+
+    setSelectorRef = (ref: Selecto) => this.selectorRef = ref;
+
+    setTargetIds = (ids: string[]) => {
+        //存储之前一次的选中组件id，用于清空图层列表的上一次选中状态
+        const oldTargetIds = [...this.directSelectedIds];
+        this.targetIds = ids;
+        this.directSelectedIds = LayerUtil.combineCalculationsActiveLayers(ids);
+        const _targets: HTMLElement[] = [];
+        ids.forEach(id => {
+            const target = document.getElementById(id);
+            target && _targets.push(target);
+        });
+
+        //更新图层列表状态
+        LayerUtil.reRenderLayerList(oldTargetIds, this.directSelectedIds);
+        //设置选中的图层边框颜色
+        const timer = setTimeout(() => {
+            const locked = ids.every(id => window.LC_ENV.currentManager.layerManager?.layerConfigs[id].lock);
+            LayerUtil.setSelectBoxColor(ids, locked)
+            clearTimeout(timer);
+        }, 0)
+        //若选中多个组件，计算更新组件多选时的左上角坐标
+        if (this.targetIds.length > 1) {
+            const coordinate = CoordinateUtil.calculateGroupRect(this.targetIds, window.LC_ENV.currentManager.layerManager.layerConfigs);
+            this.setGroupCoordinate(coordinate);
+        }
+    }
+
+    setGroupCoordinate = (coordinate: GroupCoordinateType) => {
+        this.groupCoordinate = ObjectUtil.merge(this.groupCoordinate, coordinate);
+    }
+
+    /**
+     * 让鼠标重新聚焦到设计器画布上
+     */
+    focusDesignerCanvas = () => {
+        const enforcementCap = document.querySelector('.lc-ruler-content');
+        //删除组件后，重新聚焦鼠标指针到容器上，避免鼠标失去焦点导致其他快捷键失效。
+        contextMenuStore.setPointerTarget(enforcementCap!);
+    }
+
+}
+
+const eventOperateStore = new EventOperateStore();
+export default eventOperateStore;

package/light-chaser-app/src/designer/operate-provider/canvas-context-menu/CanvasContextMenu.tsx

@@ -0,0 +1,204 @@
+/*
+ * 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 {observer} from "mobx-react";
+import contextMenuStore from "../../event/ContextMenuStore.ts";
+import {
+    cleanEmptyGroupings,
+    doClone,
+    doCopy,
+    doDelete,
+    doGrouping,
+    doHide,
+    doLock,
+    doUnGrouping,
+    doUnLock,
+    editLoopContainer,
+    groupBottomAligned,
+    groupLeftAligned,
+    groupRightAligned,
+    groupTopAligned,
+    layerMoveDown,
+    layerMoveUp,
+    layerToBottom,
+    layerToTop,
+    removeFromGroup,
+    saveAsTemplate
+} from "../hot-key/HotKeyImpl";
+import eventOperateStore from "../EventOperateStore";
+import LayerUtil from "../../left/layer-list/util/LayerUtil";
+import {
+    AlignBottomTwo,
+    AlignLeftTwo,
+    AlignRightTwo,
+    AlignTopTwo,
+    ApplicationTwo,
+    Clear,
+    CopyOne,
+    Cycle,
+    DeleteOne,
+    DifferenceSet,
+    Down,
+    GraphicStitchingThree,
+    LinkRight,
+    Lock,
+    PreviewClose,
+    ToBottomOne,
+    ToTopOne,
+    Unlock,
+    Up,
+    WeixinFavorites
+} from "@icon-park/react";
+import ContextMenu from "../../../framework/context-menu/ContextMenu.tsx";
+
+
+const defaultDesignerMenus = [
+    {
+        name: '克隆',
+        icon: CopyOne,
+        onClick: doClone,
+    },
+    {
+        name: '复制',
+        icon: DifferenceSet,
+        onClick: doCopy,
+    },
+    {
+        name: '上移',
+        icon: Up,
+        onClick: layerMoveUp,
+    },
+    {
+        name: '下移',
+        icon: Down,
+        onClick: layerMoveDown,
+    },
+    {
+        name: '置顶',
+        icon: ToTopOne,
+        onClick: layerToTop,
+    },
+    {
+        name: '置底',
+        icon: ToBottomOne,
+        onClick: layerToBottom,
+    },
+    {
+        name: '删除',
+        icon: DeleteOne,
+        onClick: doDelete,
+    },
+    {
+        name: '隐藏',
+        icon: PreviewClose,
+        onClick: doHide,
+    },
+    {
+        name: '存为模板',
+        icon: WeixinFavorites,
+        onClick: saveAsTemplate,
+    },
+    {
+        name: '清理空分组',
+        icon: Clear,
+        onClick: cleanEmptyGroupings,
+    }
+];
+
+const CanvasContextMenu = observer(() => {
+
+    const calculateMenus = () => {
+        const menus = [...defaultDesignerMenus];
+        const {targetIds} = eventOperateStore;
+        if (targetIds.length === 0)
+            return menus;
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager
+        const lockState = !!layerConfigs[targetIds[0]]?.lock;
+        if (lockState) {
+            menus.push({
+                name: '解锁',
+                icon: Unlock,
+                onClick: doUnLock,
+            })
+        } else {
+            menus.push({
+                name: '锁定',
+                icon: Lock,
+                onClick: doLock,
+            })
+        }
+        if (targetIds.length === 1 && layerConfigs[targetIds[0]].type === 'LoopContainer') {
+            menus.push({
+                name: '循环容器',
+                icon: Cycle,
+                onClick: () => editLoopContainer(targetIds[0])
+            })
+        }
+        if (targetIds.length > 1) {
+            menus.splice(6, 0, ...[
+                {
+                    name: '上对齐',
+                    icon: AlignTopTwo,
+                    onClick: groupTopAligned
+                },
+                {
+                    name: '下对齐',
+                    icon: AlignBottomTwo,
+                    onClick: groupBottomAligned
+                },
+                {
+                    name: '左对齐',
+                    icon: AlignLeftTwo,
+                    onClick: groupLeftAligned,
+                },
+                {
+                    name: '右对齐',
+                    icon: AlignRightTwo,
+                    onClick: groupRightAligned
+                },
+            ])
+            if (!LayerUtil.hasSameGroup(targetIds)) {
+                menus.push({
+                    name: '编组',
+                    icon: GraphicStitchingThree,
+                    onClick: doGrouping,
+                });
+            }
+        }
+        let groupIds = LayerUtil.findTopGroupLayer(targetIds, true);
+        //过滤掉其中分组等于自身的图层（即非分组图层）
+        groupIds = groupIds.filter((id: string) => layerConfigs[id].type === 'group');
+        if (groupIds.length > 0) {
+            menus.push({
+                name: '解组',
+                icon: ApplicationTwo,
+                onClick: doUnGrouping,
+            })
+        }
+        const noGroup = targetIds.some((id: string) => !layerConfigs[id].pid);
+        if (!noGroup)
+            menus.push({
+                name: '移出分组',
+                icon: LinkRight,
+                onClick: removeFromGroup
+            })
+        return menus;
+    }
+
+    const {canvasMenuVisible} = contextMenuStore;
+    const menus = calculateMenus();
+
+    return (
+        <ContextMenu menus={menus} visible={canvasMenuVisible} position={contextMenuStore.position}/>
+    );
+})
+
+export default CanvasContextMenu;

package/light-chaser-app/src/designer/operate-provider/hot-key/HotKey.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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} from 'react';
+import {HotKeyConfigType} from "./HotKeyType.ts";
+import hotkeys from "hotkeys-js";
+
+interface HotKeyProps {
+    handlerMapping: HotKeyConfigType;
+}
+
+export default function HotKey(props: HotKeyProps) {
+    useEffect(() => {
+        const hotKeyConfig = props.handlerMapping ?? {}
+        Object.keys(hotKeyConfig).forEach((key) => {
+            const {handler} = hotKeyConfig[key];
+            hotkeys(key, function (_event: KeyboardEvent) {
+                const target = _event.target as HTMLElement;
+                const tagName = target?.tagName?.toLowerCase();
+                // 如果当前焦点在输入框/文本域/可编辑区域 -> 交给浏览器原生处理
+                if (tagName === "input" || tagName === "textarea" || target?.isContentEditable)
+                    return true; // 交还给浏览器
+
+                if (handler instanceof Array) {
+                    handler.forEach((fn: any) => {
+                        if (typeof fn === "function")
+                            fn();
+                    });
+                } else if (typeof handler === "function") {
+                    handler();
+                }
+                return false;
+            });
+        })
+
+        return () => {
+            //卸载所有快捷键
+            Object.keys(hotKeyConfig).forEach(key => hotkeys.unbind(key))
+        }
+    }, []);
+
+    return null;
+}