light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/left/layer-list/util/LayerUtil.ts

@@ -0,0 +1,370 @@
+/*
+ * 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 {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import layerListStore from "../LayerListStore.ts";
+import LayerGroupItem from "../item/LayerGroupItem.tsx";
+import designerLeftStore from "../../DesignerLeftStore.ts";
+import {Component} from "react";
+
+export default class LayerUtil {
+
+    /**
+     * 查找layerIds对应的图层中最顶层的分组图层，例如：
+     * |A
+     * |-B
+     * |--C
+     * 传入C的id，返回A的id，未找到则返回空数组
+     * @param layerIds 普通图层id
+     * @param hasSelf 没有找到分组图层时，是否返回自身id
+     */
+    public static findTopGroupLayer = (layerIds: string[], hasSelf: boolean = false): string[] => {
+        //使用set数据结构去重，多个不同的组件可能存在同一个分组内
+        const groupLayerIdSet = new Set<string>();
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        layerIds.forEach((id) => {
+            let _id = id;
+            let _pid = layerConfigs[id]?.pid;
+            while (_pid) {
+                const {pid, id} = layerConfigs[_pid];
+                _pid = pid;
+                _id = id!;
+            }
+            if (hasSelf || _id !== id)
+                groupLayerIdSet.add(_id);
+        });
+        return Array.from(groupLayerIdSet);
+    }
+
+    /**
+     * 通过一个子图层id，查询其所在的分组下所有子图层id，包括分组图层本身id
+     * @param layerIds
+     * @param hasSelf 没有找到分组图层时，是否返回自身id
+     */
+    public static findAllChildLayerBySubId = (layerIds: string[], hasSelf: boolean = false): string[] => {
+        const topGroupId = LayerUtil.findTopGroupLayer(layerIds, hasSelf);
+        return LayerUtil.findAllChildLayer(topGroupId);
+    }
+
+    /**
+     * 查找分组图层下的所有子图层id.
+     * @param  groupIds 分组图层id
+     * @param hasSelf 是否包含自身id
+     */
+    public static findAllChildLayer = (groupIds: string[], hasSelf: boolean = true): string[] => {
+        let layerIdArr: string[] = [];
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        groupIds.forEach((id) => {
+            layerIdArr.push(id);
+            const layer: ILayerItem = layerConfigs[id];
+            if (layer.childHeader)
+                LayerUtil.iterateLayerLink(layer.childHeader, layerIdArr);
+        });
+        if (!hasSelf)
+            layerIdArr = layerIdArr.filter((id) => !groupIds.includes(id));
+        return [...new Set(layerIdArr)];
+    }
+
+    /**
+     * 递归向下查找所有子图层id
+     * @param layerHeader 分组图层ids
+     * @param res 结果数组
+     * @private
+     */
+    public static iterateLayerLink(layerHeader: string, res: string[]) {
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        const layer: ILayerItem = layerConfigs[layerHeader];
+        if (layer) {
+            res.push(layer.id!);
+            if (layer.childHeader)
+                LayerUtil.iterateLayerLink(layer.childHeader, res);
+            let nextLayer = layerConfigs[layer.next!];
+            while (nextLayer) {
+                if (nextLayer.childHeader)
+                    LayerUtil.iterateLayerLink(nextLayer.childHeader, res);
+                res.push(nextLayer.id!);
+                nextLayer = layerConfigs[nextLayer.next!];
+            }
+        }
+    }
+
+    /**
+     * 判断layerIds中的图层是否已经处于同一个分组下 -- 用于判断是否可以进行图层编组
+     * @param layerIds 图层id
+     */
+    public static hasSameGroup = (layerIds: string[]): boolean => {
+        if (layerIds.length <= 1) return false;
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        //如果layerIds中存在没有pid的图层，则说明这个图层一定没有编组，则直接返回false，说明本次可以编组
+        if (layerIds.some((id) => layerConfigs[id].type !== 'group' && !layerConfigs[id].pid)) return false;
+        const groupLayerIds = new Set();
+        layerIds.filter((id) => layerConfigs[id].type !== 'group').forEach((id) => {
+            LayerUtil.findTopGroupLayer([id], true).forEach((id) => groupLayerIds.add(id));
+        })
+        //若所有图层向上查找分组后，只有一个结果返回，则说明所有图层处于同一个分组内
+        return groupLayerIds.size === 1;
+    }
+
+    /**
+     * 判断targetId是否是sourceId的子图层
+     * @param currentId 当前图层id
+     * @param targetId 目标图层id
+     */
+    public static isTargetChild = (currentId: string, targetId: string): boolean => {
+        if (!currentId || !targetId)
+            return false;
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        const sourceLayer = layerConfigs[currentId];
+        if (!sourceLayer || !sourceLayer.pid)
+            return false;
+        const targetLayer = layerConfigs[targetId];
+        if (!targetLayer || targetLayer.type !== 'group')
+            return false;
+        let parentId = sourceLayer.pid;
+        while (parentId) {
+            if (parentId === targetId)
+                return true;
+            parentId = layerConfigs[parentId].pid as string;
+        }
+        return false;
+    }
+
+    /**
+     * 计算图层列表中的可视化图层id
+     * 保留所有独立图层id，如果存在分组id，且分组id的所有子id都存在，则只保留该分组id，排除其下所有子图层id。反之，保留所有子图层id，排除分组id
+     */
+    public static combineCalculationsActiveLayers(layerIds: string[]): string[] {
+        const result: string[] = [];
+        if (!window.LC_ENV.currentManager.layerManager?.layerConfigs)
+            return result;
+
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+        const groupMapping: Record<string, string[]> = {};
+        Object.values(layerConfigs).forEach(layer => {
+            const {pid, id} = layer;
+            if (pid) {
+                if (pid in groupMapping)
+                    groupMapping[pid].push(id!);
+                else
+                    groupMapping[pid] = [id!];
+            }
+        })
+        const groupIdRule: Record<string, boolean> = {}; //ture 保留组id，排除子图层id，false 保留子图层id，排除组id
+        const groupIds = layerIds.filter(id => layerConfigs[id].type === 'group');
+        groupIds.forEach(groupId => {
+            const childIds = groupMapping[groupId];
+            groupIdRule[groupId] = childIds && childIds.every(childId => layerIds.includes(childId));
+        });
+        return layerIds.filter(id => {
+            const layer = layerConfigs[id];
+            if (layer.id! in groupIdRule && !groupIdRule[layer.id!])
+                return false;
+            return !(layer.pid! in groupIdRule && groupIdRule[layer.pid!]);
+        })
+    }
+
+    /**
+     * 设置控制点和边框的颜色
+     * @param layerIds 组件id列表
+     * @param lock 是否锁定
+     */
+    public static setSelectBoxColor(layerIds: string[], lock: boolean) {
+        //没有选中组件的情况下不会显示边框。
+        if (layerIds.length === 0)
+            return;
+        const pointLineDom = document.querySelectorAll(".moveable-control,.moveable-line");
+        if (!pointLineDom)
+            return;
+        if (lock) {
+            pointLineDom.forEach((child: Element) => {
+                (child as HTMLDivElement).style.setProperty('background-color', '#ff4b29', 'important');
+            })
+        } else {
+            pointLineDom.forEach((child: Element) => {
+                (child as HTMLDivElement).style.setProperty('background-color', '#00bbffff', 'important');
+            })
+        }
+    }
+
+    /**
+     * 找到指定分组图层下的所有子图层中最靠前的子图层
+     * @param parentId 目标分组图层
+     * @param layers 代操作图层列表
+     */
+    public static findTopLayerInGroup(parentId: string, layers: ILayerItem[]) {
+        if (!parentId || !layers)
+            return;
+        const childLayers = layers.filter(layer => layer.pid === parentId);
+        const minOrderLayer = childLayers.reduce((pre, cur) => {
+            return (pre.order ?? 0) > (cur.order ?? 0) ? pre : cur;
+        }, childLayers[0]);
+        return minOrderLayer?.id;
+    }
+
+    /**
+     * 找到指定分组图层下的所有子图层中最靠后的子图层
+     * @param parentId 目标分组图层
+     * @param layers 代操作图层列表
+     */
+    public static findBottomLayerInGroup(parentId: string, layers: ILayerItem[]) {
+        if (!parentId || !layers)
+            return;
+        const childLayers = layers.filter(layer => layer.pid === parentId);
+        const maxOrderLayer = childLayers.reduce((pre, cur) => {
+            return (pre.order ?? 0) < (cur.order ?? 0) ? pre : cur;
+        }, childLayers[0]);
+        return maxOrderLayer?.id;
+    }
+
+    /**
+     * 找到指定图层的分组链
+     * @param layerId 目标图层
+     */
+    public static findLayerGroupChain(layerId: string): string[] {
+        if (!layerId)
+            return [];
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        const chain: string[] = [];
+        let currentId = layerId;
+        while (currentId) {
+            chain.push(currentId);
+            currentId = layerConfigs[currentId].pid!;
+        }
+        return chain
+    }
+
+    /**
+     * 展开指定分组图层
+     * @param groupIds 目标分组图层
+     * @param unfold 是否展开
+     */
+    public static togglesGroupingUnfold(groupIds: string[], unfold: boolean) {
+        if (!groupIds || groupIds.length === 0)
+            return;
+        const {layerConfigs} = window.LC_ENV.currentManager.layerManager!;
+        const {layerInstances} = layerListStore;
+        const failToRetry: string[] = groupIds.filter(id => layerConfigs[id].type === 'group');
+        let retryCount = 0;
+        const maxRetries = 100;
+
+        const retry = () => {
+            if (retryCount >= maxRetries)
+                return;
+            const currentFailToRetry = [...failToRetry];
+            failToRetry.length = 0; // 清空数组，但引用不变
+            currentFailToRetry.forEach(id => {
+                const instance = layerInstances[id] as LayerGroupItem;
+                if (!instance)
+                    failToRetry.push(id);
+                else
+                    instance.setState({showContent: unfold});
+            });
+            if (failToRetry.length === 0)
+                return;
+            retryCount++;
+            requestAnimationFrame(retry);
+        };
+        // 执行时机要晚于渲染线程
+        requestAnimationFrame(retry);
+    }
+
+    /**
+     * 重新渲染图层列表
+     * @param oldLayerList 旧图层列表
+     * @param newLayerList 新图层列表
+     */
+    public static reRenderLayerList(oldLayerList: string[], newLayerList: string[]) {
+        const {layerInstances} = layerListStore;
+        const {menu} = designerLeftStore;
+        if (menu === 'layer-list') {
+            //清除之前的选中
+            oldLayerList.forEach(id => {
+                const instance: Component = layerInstances[id];
+                instance && instance.setState({selected: false});
+            });
+
+            //设置本次选中的组件id
+            newLayerList.forEach(id => {
+                const instance: Component = layerInstances[id];
+                if (instance)
+                    instance.setState({selected: true});
+            })
+        }
+    }
+
+    /**
+     * 建立图层的双向链表
+     * @param layers 待处理图层列表
+     */
+    public static buildADoublyLinkedListOfLayers = (layers: Record<string, ILayerItem>) => {
+        let head: string | null = null, tail: string | null = null;
+        //1.对图层列表排序
+        const layerIds = Object.keys(layers).sort((prev, next) => {
+            return layers[prev].order! - layers[next].order!
+        });
+        //2.清空原有指针
+        layerIds.forEach(id => {
+            const layer = layers[id];
+            layer.prev = undefined;
+            layer.next = undefined;
+        });
+        //3.头插法建立双向链表
+        layerIds.forEach(id => {
+            if (head) {
+                const layer = layers[id];
+                const prevHead = layers[head];
+                prevHead.prev = id;
+                layer.next = head;
+            } else {
+                tail = id;
+            }
+            head = id;
+        })
+        //4.清理头尾指针元素的prev和next指针
+        if (head) {
+            const headLayer = layers[head];
+            headLayer.prev = undefined;
+        }
+        if (tail) {
+            const tailLayer = layers[tail];
+            tailLayer.next = undefined;
+        }
+        //5.返回头尾指针
+        return {head, tail};
+    }
+
+    /**
+     * 查找空分组
+     * @param layers 所有图层
+     * @returns 空分组列表
+     */
+    public static findEmptyGrouping(layers: ILayerItem[]): string[] {
+        if (!Array.isArray(layers) || layers.length === 0)
+            return [];
+
+        // 收集所有分组 id
+        const groupMap = new Map<string, number>();
+        layers.forEach(layer => {
+            if (layer.type === 'group')
+                groupMap.set(layer.id!, 1);
+        });
+
+        // 遍历所有层，移除有子项的分组
+        layers.forEach(layer => {
+            if (layer.pid && groupMap.has(layer.pid))
+                groupMap.delete(layer.pid);
+        });
+
+        // 返回剩余的空分组
+        return Array.from(groupMap.keys());
+    }
+
+}

package/light-chaser-app/src/designer/left/source-list/SourceList.less

@@ -0,0 +1,99 @@
+/*
+ * 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.
+ */
+.source-library {
+  width: 300px;
+  height: 100%;
+  background-color: #1E1E2F;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #2C2C3E;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  .source-library-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    height: 56px;
+    border-bottom: 1px solid #2C2C3E;
+
+    .header-title {
+      color: #FFFFFF;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 28px;
+    }
+
+    .header-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      color: #A0A0B2;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: #4FB8FF;
+        background-color: rgba(79, 184, 255, 0.1);
+      }
+    }
+  }
+
+  .source-library-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+
+    .source-categorize {
+      width: 72px;
+      background-color: #2C2C3E;
+      padding: 16px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+
+      .categorize-item {
+        width: 56px;
+        padding: 12px 8px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        color: #A0A0B2;
+        text-align: center;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.1);
+        }
+      }
+
+      .categorize-item-active {
+        color: #4FB8FF;
+        background-color: rgba(79, 184, 255, 0.2);
+        font-weight: 500;
+      }
+    }
+
+    .source-library-content {
+      flex: 1;
+      background-color: #1E1E2F;
+      padding: 16px;
+      overflow-y: auto;
+    }
+  }
+}

package/light-chaser-app/src/designer/left/source-list/SourceList.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 './SourceList.less';
+import {lazy, Suspense} from "react";
+import {Loading} from 'light-chaser-ui/lib/main';
+import {Close} from '@icon-park/react';
+import designerLeftStore from "../DesignerLeftStore";
+import eventOperateStore from "../../operate-provider/EventOperateStore";
+
+const ImageSource = lazy(() => import('./image-source/ImageSource'));
+
+export default function SourceList() {
+
+    const handleClose = () => {
+        const {setMenu} = designerLeftStore;
+        setMenu("");
+        const {rulerRef} = eventOperateStore;
+        rulerRef?.ruleWheel();
+    };
+
+    return (
+        <div className={'source-library'}>
+            <div className={'source-library-header'}>
+                <div className={'header-title'}>资源库</div>
+                <div className={'header-close'} onClick={handleClose}>
+                    <Close theme="outline" size={18} strokeWidth={3}/>
+                </div>
+            </div>
+            <div className={'source-library-body'}>
+                <div className={'source-categorize'}>
+                    <div className={'categorize-item categorize-item-active'}>图片</div>
+                </div>
+                <div className={'source-library-content'}>
+                    <Suspense fallback={<Loading/>}>
+                        <ImageSource/>
+                    </Suspense>
+                </div>
+            </div>
+        </div>
+    );
+}

package/light-chaser-app/src/designer/left/source-list/image-source/ImageSource.less

@@ -0,0 +1,139 @@
+/*
+ * 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.
+ */
+
+.image-source {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #1E1E2F;
+  font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
+
+  .image-source-search {
+    margin-bottom: 16px;
+
+    .ant-input {
+      background-color: #2C2C3E;
+      border: 1px solid #3A3A4E;
+      border-radius: 4px;
+      color: #FFFFFF;
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 20px;
+
+      &::placeholder {
+        color: #A0A0B2;
+      }
+
+      &:hover {
+        border-color: #4FB8FF;
+        background-color: #2C2C3E;
+      }
+
+      &:focus {
+        border-color: #4FB8FF;
+        box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+      }
+    }
+  }
+
+  .image-source-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 16px;
+
+    .image-source-item {
+      background-color: #2C2C3E;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      border: 1px solid transparent;
+
+      &:hover {
+        border-color: #4FB8FF;
+        box-shadow: 0 4px 12px rgba(79, 184, 255, 0.2);
+        transform: translateY(-2px);
+      }
+
+      .image-source-item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 12px 8px;
+        border-bottom: 1px solid #3A3A4E;
+
+        .isi-title {
+          font-size: 12px;
+          line-height: 16px;
+          color: #FFFFFF;
+          font-weight: 500;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 120px;
+        }
+
+        .isi-operate {
+          color: #A0A0B2;
+          cursor: pointer;
+          transition: color 0.2s ease;
+          display: flex;
+          align-items: center;
+
+          &:hover {
+            color: #FF6E6E;
+          }
+
+          .icon-park {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+
+      .image-source-item-body {
+        padding: 12px;
+
+        .item-bg-image {
+          width: 100%;
+          height: 100px;
+          background-size: cover;
+          background-position: center;
+          border-radius: 4px;
+          transition: opacity 0.2s ease;
+        }
+
+        &:hover .item-bg-image {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+
+  // 滚动条样式
+  .image-source-list::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .image-source-list::-webkit-scrollbar-track {
+    background: #2C2C3E;
+    border-radius: 3px;
+  }
+
+  .image-source-list::-webkit-scrollbar-thumb {
+    background: #3A3A4E;
+    border-radius: 3px;
+
+    &:hover {
+      background: #4FB8FF;
+    }
+  }
+}