aldehyde 0.2.488 → 0.2.489

package/src/aldehyde/draw-canvas-edit/components/render/components/workstation-component.tsx

@@ -1,220 +1,220 @@
-import React from "react";
-import { createRoot } from 'react-dom/client';
-import Konva from 'konva';
-import { Card, ConfigProvider } from "antd";
-import { Render } from '../index';
-import { AssetSettings } from '../types';
-import LtmplTable from "../../../../module/ltmpl-table";
-import { antdLangMp } from "../../../../index";
-import "./index.less";
-
-// 详情卡片
-const DetailCard = (props: { workstationNumber: string, pageId: string, locale: string }) => {
-  const { pageId, workstationNumber, locale } = props;
-
-  return <ConfigProvider locale={antdLangMp[locale]}>
-    <Card
-      className="workstation-card"
-      styles={{
-        body: { padding: 0 },
-        root: { width: 200, boxShadow: '0 2px 8px rgba(0,0,0,0.2)', border: "none" }
-      }}
-    >
-      <LtmplTable
-        sourceId={pageId}
-        funcMode="simple"
-        defShowType="cardList"
-        defaultCriteriaValue={{ thirdCriterion: workstationNumber }}
-        showPagination={false}
-        showAggregates={false}
-        defRowCardCount={1}
-      />
-    </Card >
-  </ConfigProvider >;
-}
-
-export interface WorkstationSettings extends AssetSettings {
-  workstationNumber: string; // 工位编号
-}
-
-export class WorkstationComponent {
-  private render: Render;
-  // 卡片挂载管理 
-  private cardRoot: ReturnType<typeof createRoot> | null = null;
-  private cardWrapper: HTMLDivElement | null = null;
-  private currentNodeId: string | null = null; // 当前打开的卡片对应的工位标识
-
-  constructor(render: Render) {
-    this.render = render;
-  }
-
-  // 关闭并销毁卡片，清理所有监听器
-  private closeCard = () => {
-    const stage = this.render?.stage;
-    if (stage) {  // 清理 stage 事件监听
-      stage.off('click tap');
-    }
-    if (this.cardRoot) { // 销毁 React 根节点
-      this.cardRoot.unmount();
-      this.cardRoot = null;
-    }
-    if (this.cardWrapper) { // 移除 DOM 节点
-      this.cardWrapper.remove();
-      this.cardWrapper = null;
-    }
-    this.currentNodeId = null;
-  };
-
-  // 根据容器边界重新计算卡片位置，避免被遮挡
-  private adjustCardPosition = (pointerPos: { x: number; y: number }) => {
-    if (!this.cardWrapper || !this.render.stage) return;
-    const container = this.render.stage.getContent();
-    const containerWidth = container.clientWidth;
-    const containerHeight = container.clientHeight;
-    const cardWidth = this.cardWrapper.offsetWidth;
-    const cardHeight = this.cardWrapper.offsetHeight;
-    if (!cardWidth || !cardHeight) return;
-    const padding = 8; // 距离容器边缘的最小间距
-    let translateX = -(cardWidth / 2);  // 默认水平居中于指针
-    let translateY = -(cardHeight + padding); // 默认显示在指针上方
-    // 水平边界处理：卡片左侧超出
-    const cardLeft = pointerPos.x + translateX;
-    if (cardLeft < padding) {
-      translateX = padding - pointerPos.x;
-    }
-    // 水平边界处理：卡片右侧超出
-    const cardRight = pointerPos.x + translateX + cardWidth;
-    if (cardRight > containerWidth - padding) {
-      translateX = containerWidth - padding - cardWidth - pointerPos.x;
-    }
-    // 垂直边界处理：卡片上方超出 → 尝试翻转到指针下方
-    const cardTop = pointerPos.y + translateY;
-    if (cardTop < padding) {
-      // 检查下方空间是否足够
-      const cardBottomWhenBelow = pointerPos.y + padding + cardHeight;
-      if (cardBottomWhenBelow <= containerHeight - padding) {
-        translateY = padding; // 翻转到指针下方
-      } else {
-        // 上下空间都不足，强制贴住容器上边缘
-        translateY = padding - pointerPos.y;
-      }
-    } else {
-      // 即使上方不超出，也检查下方是否被容器底部裁切
-      const cardBottom = cardTop + cardHeight;
-      if (cardBottom > containerHeight - padding) {
-        translateY = padding; // 翻转到下方
-      }
-    }
-    this.cardWrapper.style.left = `${pointerPos.x}px`;
-    this.cardWrapper.style.top = `${pointerPos.y}px`;
-    this.cardWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;
-  };
-
-  // 渲染工位详情卡片
-  private renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
-    const { node, settings, pointerPos } = props;
-    const { pageId, workstationNumber } = settings;
-    if (!node || !pageId || !workstationNumber || !pointerPos) return;
-    // 如果同一个工位的卡片已经渲染，不再重复渲染
-    const nodeId = node.id();
-    if (this.currentNodeId === nodeId) return;
-    this.closeCard(); // 先关闭已有卡片（不同工位时）
-    const container = this.render.stage.getContent();
-    this.cardWrapper = document.createElement('div');
-    this.cardWrapper.style.cssText = `
-      position:absolute;
-      left:${pointerPos.x}px;
-      top:${pointerPos.y}px;
-      transform:translate(-50%, calc(-100% - 8px));
-      z-index:1000;
-    `;
-    // 用原生监听器在 wrapper 层截断事件，阻止冒泡到 container（Konva 监听层）
-    // this.cardWrapper.addEventListener('click', (e) => e.stopImmediatePropagation());
-    this.cardWrapper.addEventListener('mousedown', (e) => e.stopImmediatePropagation());
-    container.appendChild(this.cardWrapper); // 挂载到 container 下面
-    this.cardRoot = createRoot(this.cardWrapper);
-    this.cardRoot.render(<DetailCard workstationNumber={workstationNumber} pageId={pageId} locale={this.render?.config?.locale} />);
-    this.currentNodeId = nodeId; // 记录当前打开的工位
-    this.render.stage.on('click tap', this.closeCard); // 点击画布外关闭卡片
-    this.render.stage.on('wheel', this.closeCard); // 缩放画布关闭卡片
-    this.render.stage.on('dragmove', this.closeCard); // 平移画布关闭卡片
-    // 渲染完成后根据容器边界重新校准卡片位置，避免被遮挡
-    requestAnimationFrame(() => this.adjustCardPosition(pointerPos));
-  };
-
-  /**
-   * 创建工位组件
-   */
-  async create(src: string, type: string) {
-    const { themeToken } = this.render.config || {};
-    const workstationNodes = this.render.getAllAssets()?.filter(asset => asset.componentType === 'workstation');
-    const order = Math.max(...workstationNodes.map(asset => asset.settings.order), 0) + 1;
-    const { group, points } = await this.render.componentFactory.createImageComponent({
-      src,
-      type,
-      componentType: 'workstation',
-    });
-    const fontSize = Math.min(group.width(), group.height()) * 0.5;
-    const text = new Konva.Text({ // 序号文本显示
-      name: 'order',
-      text: `${order}`,
-      fontSize,
-      fontFamily: 'Arial',
-      fill: themeToken.colorPrimary || '#000000',
-      align: 'center',
-      offsetX: 0,
-      offsetY: 0,
-      width: group.width(),
-    });
-    text.x(0);
-    text.y(group.height() / 2 - text.height() / 7);
-    const tooltip = this.render.componentFactory.createTooltipComponent({ // 弹窗显示
-      x: group.width() / 2,
-      y: group.height() / 2,
-    });
-    group.add(text);
-    group.add(tooltip);
-    this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), order }, true);
-    return { group, points };
-  }
-
-  /**
-   * 只读页面工位组件初始化
-   */
-  readonlyInit(node: Konva.Group) {
-    const orderText = node.findOne('.order');
-    orderText?.visible?.(false); // 只读页面不显示工位序号
-    this.render.componentFactory.setCursorPointer(node);
-  }
-
-  /**
-   * 更新工位组件设置
-   */
-  updateSettings(node: Konva.Group, settings: AssetSettings) {
-    this.render.componentFactory.updateTooltipText(node, (settings as WorkstationSettings).workstationNumber); // 工位编号弹窗
-    node.findOne('.order')?.setAttr('text', settings.order); // 工位序号显示
-    this.componentOnClick(node, settings as WorkstationSettings);
-  }
-
-  /**
-   * 克隆时更新工位组件序号
-   */
-  updateCloneOrder(node: Konva.Group, workstationOrders: number[]) {
-    const order = Math.max(...workstationOrders, 0) + 1;
-    workstationOrders.push(order);
-    const orderText = node.findOne('.order');
-    this.render.setAssetSettings(node, { ...this.render.getAssetSettings(node), order }, true);
-    orderText.setAttr('text', order);
-    return order;
-  }
-
-  // 渲染页工位点击事件：查看工位详情
-  componentOnClick(node: Konva.Group, settings: WorkstationSettings) {
-    node.off("click");
-    node.on('click', (e) => {
-      e.cancelBubble = true; // 阻止事件向上冒泡到 Stage 
-      const pointerPos = e.target.getStage()?.getPointerPosition();
-      this.renderCard({ node, settings, pointerPos });
-    });
-  }
-}
+import React from "react";
+import { createRoot } from 'react-dom/client';
+import Konva from 'konva';
+import { Card, ConfigProvider } from "antd";
+import { Render } from '../index';
+import { AssetSettings } from '../types';
+import LtmplTable from "../../../../module/ltmpl-table";
+import { antdLangMp } from "../../../../index";
+import "./index.less";
+
+// 详情卡片
+const DetailCard = (props: { workstationNumber: string, pageId: string, locale: string }) => {
+  const { pageId, workstationNumber, locale } = props;
+
+  return <ConfigProvider locale={antdLangMp[locale]}>
+    <Card
+      className="workstation-card"
+      styles={{
+        body: { padding: 0 },
+        root: { width: 200, boxShadow: '0 2px 8px rgba(0,0,0,0.2)', border: "none" }
+      }}
+    >
+      <LtmplTable
+        sourceId={pageId}
+        funcMode="simple"
+        defShowType="cardList"
+        defaultCriteriaValue={{ thirdCriterion: workstationNumber }}
+        showPagination={false}
+        showAggregates={false}
+        defRowCardCount={1}
+      />
+    </Card >
+  </ConfigProvider >;
+}
+
+export interface WorkstationSettings extends AssetSettings {
+  workstationNumber: string; // 工位编号
+}
+
+export class WorkstationComponent {
+  private render: Render;
+  // 卡片挂载管理 
+  private cardRoot: ReturnType<typeof createRoot> | null = null;
+  private cardWrapper: HTMLDivElement | null = null;
+  private currentNodeId: string | null = null; // 当前打开的卡片对应的工位标识
+
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 关闭并销毁卡片，清理所有监听器
+  private closeCard = () => {
+    const stage = this.render?.stage;
+    if (stage) {  // 清理 stage 事件监听
+      stage.off('click tap');
+    }
+    if (this.cardRoot) { // 销毁 React 根节点
+      this.cardRoot.unmount();
+      this.cardRoot = null;
+    }
+    if (this.cardWrapper) { // 移除 DOM 节点
+      this.cardWrapper.remove();
+      this.cardWrapper = null;
+    }
+    this.currentNodeId = null;
+  };
+
+  // 根据容器边界重新计算卡片位置，避免被遮挡
+  private adjustCardPosition = (pointerPos: { x: number; y: number }) => {
+    if (!this.cardWrapper || !this.render.stage) return;
+    const container = this.render.stage.getContent();
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const cardWidth = this.cardWrapper.offsetWidth;
+    const cardHeight = this.cardWrapper.offsetHeight;
+    if (!cardWidth || !cardHeight) return;
+    const padding = 8; // 距离容器边缘的最小间距
+    let translateX = -(cardWidth / 2);  // 默认水平居中于指针
+    let translateY = -(cardHeight + padding); // 默认显示在指针上方
+    // 水平边界处理：卡片左侧超出
+    const cardLeft = pointerPos.x + translateX;
+    if (cardLeft < padding) {
+      translateX = padding - pointerPos.x;
+    }
+    // 水平边界处理：卡片右侧超出
+    const cardRight = pointerPos.x + translateX + cardWidth;
+    if (cardRight > containerWidth - padding) {
+      translateX = containerWidth - padding - cardWidth - pointerPos.x;
+    }
+    // 垂直边界处理：卡片上方超出 → 尝试翻转到指针下方
+    const cardTop = pointerPos.y + translateY;
+    if (cardTop < padding) {
+      // 检查下方空间是否足够
+      const cardBottomWhenBelow = pointerPos.y + padding + cardHeight;
+      if (cardBottomWhenBelow <= containerHeight - padding) {
+        translateY = padding; // 翻转到指针下方
+      } else {
+        // 上下空间都不足，强制贴住容器上边缘
+        translateY = padding - pointerPos.y;
+      }
+    } else {
+      // 即使上方不超出，也检查下方是否被容器底部裁切
+      const cardBottom = cardTop + cardHeight;
+      if (cardBottom > containerHeight - padding) {
+        translateY = padding; // 翻转到下方
+      }
+    }
+    this.cardWrapper.style.left = `${pointerPos.x}px`;
+    this.cardWrapper.style.top = `${pointerPos.y}px`;
+    this.cardWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  };
+
+  // 渲染工位详情卡片
+  private renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
+    const { node, settings, pointerPos } = props;
+    const { pageId, workstationNumber } = settings;
+    if (!node || !pageId || !workstationNumber || !pointerPos) return;
+    // 如果同一个工位的卡片已经渲染，不再重复渲染
+    const nodeId = node.id();
+    if (this.currentNodeId === nodeId) return;
+    this.closeCard(); // 先关闭已有卡片（不同工位时）
+    const container = this.render.stage.getContent();
+    this.cardWrapper = document.createElement('div');
+    this.cardWrapper.style.cssText = `
+      position:absolute;
+      left:${pointerPos.x}px;
+      top:${pointerPos.y}px;
+      transform:translate(-50%, calc(-100% - 8px));
+      z-index:1000;
+    `;
+    // 用原生监听器在 wrapper 层截断事件，阻止冒泡到 container（Konva 监听层）
+    // this.cardWrapper.addEventListener('click', (e) => e.stopImmediatePropagation());
+    this.cardWrapper.addEventListener('mousedown', (e) => e.stopImmediatePropagation());
+    container.appendChild(this.cardWrapper); // 挂载到 container 下面
+    this.cardRoot = createRoot(this.cardWrapper);
+    this.cardRoot.render(<DetailCard workstationNumber={workstationNumber} pageId={pageId} locale={this.render?.config?.locale} />);
+    this.currentNodeId = nodeId; // 记录当前打开的工位
+    this.render.stage.on('click tap', this.closeCard); // 点击画布外关闭卡片
+    this.render.stage.on('wheel', this.closeCard); // 缩放画布关闭卡片
+    this.render.stage.on('dragmove', this.closeCard); // 平移画布关闭卡片
+    // 渲染完成后根据容器边界重新校准卡片位置，避免被遮挡
+    requestAnimationFrame(() => this.adjustCardPosition(pointerPos));
+  };
+
+  /**
+   * 创建工位组件
+   */
+  async create(src: string, type: string) {
+    const { themeToken } = this.render.config || {};
+    const workstationNodes = this.render.getAllAssets()?.filter(asset => asset.componentType === 'workstation');
+    const order = Math.max(...workstationNodes.map(asset => asset.settings.order), 0) + 1;
+    const { group, points } = await this.render.componentFactory.createImageComponent({
+      src,
+      type,
+      componentType: 'workstation',
+    });
+    const fontSize = Math.min(group.width(), group.height()) * 0.5;
+    const text = new Konva.Text({ // 序号文本显示
+      name: 'order',
+      text: `${order}`,
+      fontSize,
+      fontFamily: 'Arial',
+      fill: themeToken.colorPrimary || '#000000',
+      align: 'center',
+      offsetX: 0,
+      offsetY: 0,
+      width: group.width(),
+    });
+    text.x(0);
+    text.y(group.height() / 2 - text.height() / 7);
+    const tooltip = this.render.componentFactory.createTooltipComponent({ // 弹窗显示
+      x: group.width() / 2,
+      y: group.height() / 2,
+    });
+    group.add(text);
+    group.add(tooltip);
+    this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), order }, true);
+    return { group, points };
+  }
+
+  /**
+   * 只读页面工位组件初始化
+   */
+  readonlyInit(node: Konva.Group) {
+    const orderText = node.findOne('.order');
+    orderText?.visible?.(false); // 只读页面不显示工位序号
+    this.render.componentFactory.setCursorPointer(node);
+  }
+
+  /**
+   * 更新工位组件设置
+   */
+  updateSettings(node: Konva.Group, settings: AssetSettings) {
+    this.render.componentFactory.updateTooltipText(node, (settings as WorkstationSettings).workstationNumber); // 工位编号弹窗
+    node.findOne('.order')?.setAttr('text', settings.order); // 工位序号显示
+    this.componentOnClick(node, settings as WorkstationSettings);
+  }
+
+  /**
+   * 克隆时更新工位组件序号
+   */
+  updateCloneOrder(node: Konva.Group, workstationOrders: number[]) {
+    const order = Math.max(...workstationOrders, 0) + 1;
+    workstationOrders.push(order);
+    const orderText = node.findOne('.order');
+    this.render.setAssetSettings(node, { ...this.render.getAssetSettings(node), order }, true);
+    orderText.setAttr('text', order);
+    return order;
+  }
+
+  // 渲染页工位点击事件：查看工位详情
+  componentOnClick(node: Konva.Group, settings: WorkstationSettings) {
+    node.off("click");
+    node.on('click', (e) => {
+      e.cancelBubble = true; // 阻止事件向上冒泡到 Stage 
+      const pointerPos = e.target.getStage()?.getPointerPosition();
+      this.renderCard({ node, settings, pointerPos });
+    });
+  }
+}