@jnrs/lingshu-smart 2.2.6 → 2.2.8

package/dist/ui/components/StationSlot.js

@@ -0,0 +1,207 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : StationSlot.ts
+ * @Date   : 2026/02/12
+ *
+ * @classdesc
+ * 工位槽位（Station Slot）是工位中用于承载资源（Resource）的容器。
+ * 它负责管理资源的生命周期，包括添加、移除及状态同步，确保资源与工位之间的强关联和统一控制。
+ *
+ * @design
+ * 当前采用 **方案一：真实添加/移除资源对象**。
+ * - 资源在插入时被实际加入场景图（或容器），移除时从场景中销毁或解绑。
+ * - 优点：逻辑直观，内存管理明确。
+ * - 缺点：频繁创建/销毁可能影响性能（尤其在高频率操作场景）。
+ *
+ * @future
+ * 后续可根据实际性能表现，切换至 **方案二：通过可见性（如 `visible` 属性）模拟添加/移除**。
+ * - 资源始终存在于场景中，仅通过状态控制显示/隐藏。
+ * - 适用于需要频繁切换但资源复用率高的场景。
+ * - 基于方案一、二再添加个对象池机制的混合模式，即优先去资源池读取。
+ */
+import { EnumResourceType, EnumComponent } from '@/types';
+import { Box, Text } from 'leafer';
+import { Resource } from './Resource';
+import { createShadow } from '../factories/createShadow';
+import { createText } from '../factories/createText';
+import { ComponentAbs } from '../abstract/ComponentAbs';
+import { setCursor } from '../utils/attr';
+export class StationSlot extends ComponentAbs {
+    children = [];
+    constructor(options) {
+        const DEFAULTS = {
+            className: EnumComponent.STATION_SLOT,
+            name: '',
+            index: 0,
+            x: 0,
+            y: 0,
+            width: 50,
+            height: 50,
+            rotation: 0,
+            parentRotation: 0,
+            resourceType: EnumResourceType.PALLET,
+            disabled: false,
+            hittable: true,
+            visible: true,
+            showContainer: true
+        };
+        super({ ...DEFAULTS, ...options });
+    }
+    // 创建 UI
+    createUi() {
+        const { x, y, name, width, height, resourceType, hittable, disabled, visible, showContainer, origin = 'center', around = 'center' } = this.config;
+        const main = new Box({
+            hittable,
+            visible,
+            className: `StationSlot-${resourceType}`,
+            x,
+            y,
+            width,
+            height,
+            origin,
+            around,
+            disabled,
+            cornerRadius: this.autoCornerRadius,
+            rotation: this.autoFixRotation,
+            fill: 'rgba(255, 255, 255, 0.3)',
+            hitFill: 'all',
+            stroke: 'rgba(255, 255, 255, 0.7)',
+            strokeWidth: 3,
+            data: this.config,
+            children: [
+                createText({
+                    name,
+                    width,
+                    height,
+                    fill: 'rgba(0,0,0,0.2)'
+                })
+            ]
+        });
+        // 可交互时添加 hover 状态
+        setCursor(main, { hittable: this.config.hittable, hitSelf: true, clickable: true }, 'border');
+        if (showContainer) {
+            const shadowCvs = createShadow({
+                width,
+                height,
+                cornerRadius: this.autoCornerRadius,
+                shadow: null
+            });
+            main.add(shadowCvs);
+        }
+        else {
+            main.fill = 'rgba(0, 0, 0, 0)';
+            main.stroke = 'rgba(0, 0, 0, 0)';
+        }
+        return main;
+    }
+    // 自动计算工位槽位的旋转补偿角度
+    get autoFixRotation() {
+        const parentRotation = this.config.parentRotation;
+        const rotation = this.config.rotation ?? 0;
+        if (!parentRotation)
+            return rotation;
+        let r = 0;
+        if (parentRotation === 90)
+            r = -90;
+        if (parentRotation === -90)
+            r = 90;
+        if (parentRotation > 90)
+            r = -180;
+        if (parentRotation < -90)
+            r = 180;
+        return r + rotation;
+    }
+    // 根据类型自动计算圆角
+    get autoCornerRadius() {
+        const defaultType = this.config.resourceType;
+        const width = this.config.width || 0;
+        return defaultType === EnumResourceType.TOOL ? width : width * 0.1;
+    }
+    // private setupClickableArea(cornerRadius: number): void {
+    //   const clickableBox = new Box({
+    //     className: 'palletAndCutterSiteClickableBox',
+    //     width: this.config.width,
+    //     height: this.config.height,
+    //     fill: '#f40',
+    //     opacity: 0,
+    //     cornerRadius,
+    //     hoverStyle: {
+    //       opacity: 1,
+    //       zIndex: 0
+    //     },
+    //     children: [
+    //       new Text({
+    //         text: '放置',
+    //         textAlign: 'center',
+    //         verticalAlign: 'middle',
+    //         lineHeight: this.config.width * 0.4,
+    //         fontSize: this.config.width * 0.4,
+    //         fontWeight: 'black',
+    //         fill: '#fff',
+    //         width: this.config.width,
+    //         height: this.config.height
+    //       })
+    //     ]
+    //   })
+    //   this.ui?.add(clickableBox)
+    // }
+    /**
+     * 添加托盘
+     * @param d
+     */
+    addPallet(d) {
+        const { width, height, resourceType } = this.config;
+        const resource = new Resource({
+            x: this.width_05,
+            y: this.height_05,
+            width: width - 5,
+            height: height - 5,
+            name: d.name,
+            color: d.color,
+            resourceType,
+            rawData: d.rawData
+        }).init();
+        this.children.push(resource);
+        this.ui.add(resource.ui);
+    }
+    /**
+     * 移除托盘
+     * @param d
+     */
+    removeAllPallet(d) {
+        for (const item of this.children) {
+            item.ui.destroy();
+        }
+        this.children = [];
+    }
+    /**
+     * 设置工位是否正在使用
+     * @param flag
+     */
+    setSiteWorking(flag) {
+        const anim = flag
+            ? {
+                animation: {
+                    style: { fill: 'rgb(0, 255, 42)' },
+                    duration: 0.5,
+                    reverse: true,
+                    swing: true,
+                    loop: true
+                }
+            }
+            : { animation: { style: { fill: '' } } };
+        this.ui?.set(anim);
+    }
+    // 切换 ui 的 visible
+    toggleVisible(visible) {
+        this.ui?.set({ visible });
+    }
+    /**
+     * 销毁
+     */
+    destroyUI() {
+        this.removeAllPallet();
+        this.ui?.destroy();
+    }
+}

package/dist/ui/components/StationSlotGroup.d.ts

@@ -1,5 +1,12 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : StationSlotGroup.ts
+ * @Date   : 2026/04/08
+ * @Desc.  : 工位槽位组容器（类封装，支持动态操作）
+ */
 import { Flow } from 'leafer';
-import { IResourceOperating, IStationSlotGroupConfig } from '../../types';
+import type { IResourceOperating, IStationSlotGroupConfig } from '@/types';
 import { ComponentAbs } from '../abstract/ComponentAbs';
 /**
  * 工位槽位组容器

package/dist/ui/components/StationSlotGroup.js

@@ -0,0 +1,110 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : StationSlotGroup.ts
+ * @Date   : 2026/04/08
+ * @Desc.  : 工位槽位组容器（类封装，支持动态操作）
+ */
+import { UI, Flow } from 'leafer';
+import { StationSlot } from '../components/StationSlot';
+import { ComponentAbs } from '../abstract/ComponentAbs';
+/**
+ * 工位槽位组容器
+ * @param config - 工位槽位组配置
+ * @param rotation - 可选的旋转角度，应用于所有子槽位
+ * @returns StationSlotGroup 实例，包含 Flow 容器和操作方法
+ */
+export class StationSlotGroup extends ComponentAbs {
+    parentRotation;
+    stationSlotInstances; // 存储 StationSlot 实例的 Map，key 为 IStationSlotConfig.index
+    constructor(options, parentRotation) {
+        super(options);
+        this.parentRotation = parentRotation || 0;
+        this.stationSlotInstances = new Map();
+    }
+    // 获取自动宽度来限制工位换行
+    get autoSize() {
+        const { flowOptions, stationSlots } = this.config;
+        const flow = flowOptions.flow;
+        const flowWrap = flowOptions.flowWrap;
+        const quantity = flowOptions.oneDirectionMaxQuantity;
+        const gapOffset = flowOptions.gap * (quantity - 1);
+        const maxWidth = Math.max(...stationSlots.map((d) => d.width));
+        const maxHeight = Math.max(...stationSlots.map((d) => d.height));
+        if (flowWrap === false) {
+            return {
+                width: this.config.width,
+                height: this.config.height
+            };
+        }
+        if (flow === 'x' || flow === 'x-reverse') {
+            return {
+                width: maxWidth * quantity + gapOffset,
+                height: this.config.height
+            };
+        }
+        if (flow === 'y' || flow === 'y-reverse') {
+            return {
+                width: this.config.width,
+                height: maxHeight * quantity + gapOffset
+            };
+        }
+        return {
+            width: this.config.width,
+            height: this.config.height
+        };
+    }
+    // 创建 UI
+    createUi() {
+        const { x, y, rotation, zIndex, stationSlots, flowOptions, hittable = true, origin = 'center', around = 'center' } = this.config;
+        const stationSlotsUi = [];
+        for (const item of stationSlots) {
+            if (typeof item.index !== 'number') {
+                console.warn('StationSlot 缺少有效的 index 字段:', item);
+                continue;
+            }
+            const slotInstance = new StationSlot({
+                ...item,
+                parentRotation: this.parentRotation
+            }).init();
+            this.stationSlotInstances.set(item.index, slotInstance);
+            stationSlotsUi.push(slotInstance.ui);
+        }
+        const main = new Flow({
+            ...flowOptions,
+            className: 'StationSlotGroup',
+            hittable,
+            x,
+            y,
+            rotation,
+            zIndex,
+            width: this.autoSize.width,
+            height: this.autoSize.height,
+            origin,
+            around,
+            flowAlign: 'center',
+            children: stationSlotsUi
+        });
+        return main;
+    }
+    /**
+     * 操作方法：处理资源新增/移除
+     */
+    operating(val) {
+        if (typeof val.index !== 'number') {
+            console.warn('IResourceOperating 缺少有效的 index 字段:', val);
+            return;
+        }
+        const stationSlot = this.stationSlotInstances.get(val.index);
+        if (!stationSlot) {
+            console.warn(`处理资源失败：未找到 index=${val.index} 的工位槽，rawData：`, val.rawData);
+            return;
+        }
+        if (val.handleType === 'add') {
+            stationSlot.addPallet(val);
+        }
+        else if (val.handleType === 'remove') {
+            stationSlot.removeAllPallet();
+        }
+    }
+}

package/dist/ui/factories/createGlass.d.ts

@@ -1,10 +1,18 @@
+/**
+ * @Author : YourName
+ * @File   : createGlass.ts
+ * @Date   : 2026/04/07
+ * @Desc.  : 创建玻璃质感背景的工厂函数
+ */
 import { Box } from 'leafer';
 export interface IGlassConfig {
     x?: number;
     y?: number;
     width: number;
     height: number;
-    cornerRadius?: number;
+    cornerRadius?: number | number[];
+    origin?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    around?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 /**
  * 创建具有磨砂玻璃效果的 Box 容器

package/dist/ui/factories/createGlass.js

@@ -0,0 +1,51 @@
+/**
+ * @Author : YourName
+ * @File   : createGlass.ts
+ * @Date   : 2026/04/07
+ * @Desc.  : 创建玻璃质感背景的工厂函数
+ */
+import { Box } from 'leafer';
+import { Texture } from '../shapes/Texture';
+/**
+ * 创建具有磨砂玻璃效果的 Box 容器
+ */
+export function createGlass(config) {
+    const { x, y, width, height, cornerRadius = 10, origin = 'center', around = 'center' } = config;
+    const glassBox = new Box({
+        x,
+        y,
+        width,
+        height,
+        cornerRadius,
+        origin,
+        around,
+        hittable: false,
+        className: 'Glass',
+        fill: {
+            type: 'linear',
+            from: 'top-left',
+            to: 'bottom-right',
+            stops: [
+                { offset: 0, color: 'rgba(255, 255, 255, 0.8)' },
+                { offset: 1, color: 'rgba(239, 251, 255, 0.5)' }
+            ]
+        },
+        shadow: {
+            blur: 3,
+            color: 'rgba(0,0,0,0.3)'
+        },
+        stroke: 'rgba(255, 255, 255, 0.3)',
+        strokeWidth: 1
+    });
+    // 添加纹理
+    glassBox.add(Texture({
+        width,
+        height,
+        cornerRadius,
+        effect: 'VerticalBar',
+        opacity: 0.08,
+        scale: 0.015,
+        rotation: 45
+    }));
+    return glassBox;
+}

package/dist/ui/factories/createModel.d.ts

@@ -1,3 +1,10 @@
-import { ILayer } from '../../types';
-import { ModelAbs } from '../abstract/ModelAbs';
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createModel.ts
+ * @Date   : 2026/02/13
+ * @Desc.  : 设备模型工厂函数
+ */
+import { type ILayer } from '@/types';
+import type { ModelAbs } from '../abstract/ModelAbs';
 export declare function createModel(config: ILayer): ModelAbs;

package/dist/ui/factories/createModel.js

@@ -0,0 +1,35 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createModel.ts
+ * @Date   : 2026/02/13
+ * @Desc.  : 设备模型工厂函数
+ */
+import { EnumModel } from '@/types';
+import { MachineTool } from '../models/MachineTool';
+import { LoadingStation } from '../models/LoadingStation';
+import { MarkingMachine } from '../models/MarkingMachine';
+import { CleaningMachine } from '../models/CleaningMachine';
+import { SingleJointRobot } from '../models/SingleJointRobot';
+import { Rail } from '../models/Rail';
+import { ResourceStore } from '../models/ResourceStore';
+export function createModel(config) {
+    switch (config.className) {
+        case EnumModel.MACHINE_TOOL:
+            return new MachineTool(config);
+        case EnumModel.LOADING_STATION:
+            return new LoadingStation(config);
+        case EnumModel.MARKING_MACHINE:
+            return new MarkingMachine(config);
+        case EnumModel.CLEANING_MACHINE:
+            return new CleaningMachine(config);
+        case EnumModel.SINGLE_JOINT_ROBOT:
+            return new SingleJointRobot(config);
+        case EnumModel.RAIL:
+            return new Rail(config);
+        case EnumModel.RESOURCE_STORE:
+            return new ResourceStore(config);
+        default:
+            throw new Error('Unsupported model className');
+    }
+}

package/dist/ui/factories/createShadow.d.ts

@@ -1,9 +1,17 @@
-import { Canvas, IShadowEffect } from 'leafer';
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createShadow.ts
+ * @Date   : 2026/04/02
+ * @Desc.  : 创建阴影效果的 Canvas 实例（leaferJs 的原生阴影性能差，官方推荐使用 canvas 实现阴影效果）
+ * @Intro. : 该工厂函数用于创建一个带有阴影效果的 Canvas 实例，适用于设备模型的阴影渲染。通过配置阴影的大小、模糊程度和颜色，实现逼真的阴影效果，增强设备模型的视觉层次感和立体感。
+ */
+import { Canvas, type IShadowEffect } from 'leafer';
 export interface IShadow {
     width: number;
     height: number;
-    cornerRadius?: number;
-    shadow?: IShadowEffect | IShadowEffect[];
-    innerShadow?: IShadowEffect | IShadowEffect[];
+    cornerRadius?: number | number[];
+    shadow?: IShadowEffect | IShadowEffect[] | null;
+    innerShadow?: IShadowEffect | IShadowEffect[] | null;
 }
 export declare function createShadow(options: IShadow): Canvas;

package/dist/ui/factories/createShadow.js

@@ -0,0 +1,52 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createShadow.ts
+ * @Date   : 2026/04/02
+ * @Desc.  : 创建阴影效果的 Canvas 实例（leaferJs 的原生阴影性能差，官方推荐使用 canvas 实现阴影效果）
+ * @Intro. : 该工厂函数用于创建一个带有阴影效果的 Canvas 实例，适用于设备模型的阴影渲染。通过配置阴影的大小、模糊程度和颜色，实现逼真的阴影效果，增强设备模型的视觉层次感和立体感。
+ */
+import { Canvas, Pen } from 'leafer';
+export function createShadow(options) {
+    const shadowSize = {
+        width: options.width * 0.1, // 阴影宽度为元素宽度的 10%
+        height: options.height * 0.1 // 阴影高度为元素高度的 10%
+    };
+    const { width = 0, height = 0, cornerRadius = 0, shadow = [
+        {
+            x: 0,
+            y: 0,
+            blur: shadowSize.width,
+            color: 'rgba(0,0,0,0.3)'
+        }
+    ], innerShadow = [
+        {
+            x: shadowSize.width,
+            y: shadowSize.height,
+            blur: shadowSize.width,
+            color: 'rgba(0,0,0,0.5)'
+        },
+        {
+            x: -shadowSize.width,
+            y: -shadowSize.height,
+            blur: shadowSize.width,
+            color: 'rgba(255,255,255,0.5)'
+        }
+    ] } = options;
+    const ui = new Canvas({
+        className: 'ShadowCanvas',
+        pixelRatio: devicePixelRatio,
+        width,
+        height,
+        hittable: false
+    });
+    const pen = new Pen();
+    pen.setStyle({
+        fill: 'rgba(255,255,255,0)',
+        shadow: shadow ?? undefined,
+        innerShadow: innerShadow ?? undefined
+    });
+    pen.roundRect(0, 0, width, height, cornerRadius);
+    ui.draw(pen);
+    return ui;
+}

package/dist/ui/factories/createText.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createText.ts
+ * @Date   : 2026/04/08
+ * @Desc.  : 创建文本组件（Text）的工厂函数
+ */
 import { Text } from 'leafer';
 export interface CreateTextOptions {
     name?: string;

package/dist/ui/factories/createText.js

@@ -0,0 +1,46 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : createText.ts
+ * @Date   : 2026/04/08
+ * @Desc.  : 创建文本组件（Text）的工厂函数
+ */
+import { Text } from 'leafer';
+/**
+ * 创建自适应文本（支持动态字号、换行、省略号）
+ */
+export function createText(options) {
+    const { name, width, height, className = 'CreateText', fill = 'rgba(0,0,0,0.2)', fontSize, fontWeight = 'black', hittable = false } = options;
+    if (!name) {
+        return new Text({ text: '', width, height, visible: 0 });
+    }
+    // 动态计算字体大小（基于字符数）
+    const charCount = name.length;
+    const maxFontSize = Math.min(height * 0.8, width * 0.5);
+    const minFontSize = 12;
+    // 估算所需字号
+    const estimatedFontSize = width / (charCount * 0.6);
+    let autoFontSize = Math.min(maxFontSize, estimatedFontSize);
+    // 如果估算字号小于最小值，则固定为最小值，并启用换行+省略
+    if (autoFontSize < minFontSize) {
+        autoFontSize = minFontSize;
+    }
+    return new Text({
+        hittable,
+        className,
+        text: name,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        fontSize: fontSize || autoFontSize,
+        fontWeight,
+        fill,
+        width,
+        height,
+        lineHeight: {
+            type: 'percent',
+            value: 1
+        },
+        textOverflow: '...', // 启用省略号
+        textWrap: 'break' // 强制断词
+    });
+}

package/dist/ui/models/CleaningMachine.d.ts

@@ -0,0 +1,14 @@
+import type { ICleaningMachineConfig, ICleaningMachineOperating } from '@/types';
+import { Box } from 'leafer';
+import { ModelAbs } from '../abstract/ModelAbs';
+/**
+ * 清洗机
+ */
+export declare class CleaningMachine extends ModelAbs<ICleaningMachineConfig> {
+    private light;
+    private progress;
+    private entrance;
+    private stationSlotGroup;
+    protected createUi(): Box;
+    protected operating(data: ICleaningMachineOperating): void;
+}