aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/detail/view/view-compare-panel.tsx

@@ -1,57 +1,57 @@
-import { Card,  Splitter} from "antd";
-import React, { useEffect, useState } from "react";
-import {DtmplConfig} from "../../tmpl/interface";
-import DtmplView from "./dtmpl-view";
-import Units from "../../units";
-
-export type ViewComparData={
-    code: string,
-    versionId?: number,
-    time:string,
-    userName?: string,
-}
-
-type ViewComparePanelProp = {
-    serverKey?:string;
-    dtmplConfig:DtmplConfig,
-    sourceId:string,
-    data?:ViewComparData[]
-};
-
-
-
-const ViewComparePanel = (props: ViewComparePanelProp) => {
-  // button
-    const {serverKey,
-    dtmplConfig,
-        sourceId,data}=props;
-
-
-
-  return (
-      <>
-      <Card  styles={{body:{padding:'0px'}}} style={{width:data && data.length>1? 500*data.length:'100%'}}>
-      <div style={{whiteSpace: 'nowrap',
-          overflowX: 'auto'}}>
-      <Splitter >
-      {data?
-          data.map((d)=>{
-             return <Splitter.Panel >
-                 <Card title={d.userName+ ":" + Units.formateDate(d.time)} style={{minWidth:'400px'}}>
-            <DtmplView maxColsOnRow={data && data.length>1?1:2}
-                  serverKey={serverKey}
-                  showRightNav={false}
-                  dtmplConfig={dtmplConfig}
-                  sourceId={sourceId}
-                  code={d.code}
-                  versionId={d.versionId}
-              ></DtmplView> </Card></Splitter.Panel>
-          }) :null}
-      </Splitter>
-      </div>
-      </Card>
-      </>
-  );
-};
-
-export default ViewComparePanel;
+import { Card,  Splitter} from "antd";
+import React, { useEffect, useState } from "react";
+import {DtmplConfig} from "../../tmpl/interface";
+import DtmplView from "./dtmpl-view";
+import Units from "../../units";
+
+export type ViewComparData={
+    code: string,
+    versionId?: number,
+    time:string,
+    userName?: string,
+}
+
+type ViewComparePanelProp = {
+    serverKey?:string;
+    dtmplConfig:DtmplConfig,
+    sourceId:string,
+    data?:ViewComparData[]
+};
+
+
+
+const ViewComparePanel = (props: ViewComparePanelProp) => {
+  // button
+    const {serverKey,
+    dtmplConfig,
+        sourceId,data}=props;
+
+
+
+  return (
+      <>
+      <Card  styles={{body:{padding:'0px'}}} style={{width:data && data.length>1? 500*data.length:'100%'}}>
+      <div style={{whiteSpace: 'nowrap',
+          overflowX: 'auto'}}>
+      <Splitter >
+      {data?
+          data.map((d)=>{
+             return <Splitter.Panel >
+                 <Card title={d.userName+ ":" + Units.formateDate(d.time)} style={{minWidth:'400px'}}>
+            <DtmplView maxColsOnRow={data && data.length>1?1:2}
+                  serverKey={serverKey}
+                  showRightNav={false}
+                  dtmplConfig={dtmplConfig}
+                  sourceId={sourceId}
+                  code={d.code}
+                  versionId={d.versionId}
+              ></DtmplView> </Card></Splitter.Panel>
+          }) :null}
+      </Splitter>
+      </div>
+      </Card>
+      </>
+  );
+};
+
+export default ViewComparePanel;

package/src/aldehyde/draw-canvas-edit/components/render/components/index.ts

@@ -0,0 +1,3 @@
+import { WorkstationComponent } from './workstation-component';
+
+export { WorkstationComponent };

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

@@ -0,0 +1,104 @@
+import React from "react";
+import Konva from 'konva';
+import { Render } from '../index';
+import { AssetSettings } from '../types';
+import HcserviceV3 from "../../../../tmpl/hcservice-v3";
+
+export interface WorkstationSettings extends AssetSettings {
+  workstationNumber: string; // 工位编号
+}
+
+// 渲染工位详情卡片
+const renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
+  const { node, settings, pointerPos } = props;
+  const { pageId, pageConfig, workstationNumber } = settings;
+  if (!node || !pageId || !workstationNumber || !pointerPos) return;
+  const pageInfo = { pageNo: 1, pageSize: 1, thirdCriterion: workstationNumber };
+  const queryKey = await HcserviceV3.requestLtmplQueryKey(null, pageId, pageInfo);
+  const { entities } = await HcserviceV3.requestQueryData(null, queryKey.key, pageInfo);
+  console.log("entitiesentities", entities);
+  const renderCard = <div></div>;
+}
+
+export class WorkstationComponent {
+  private render: Render;
+
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  /**
+   * 创建工位组件
+   */
+  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) => {
+      const pointerPos = e.target.getStage().getPointerPosition();
+      renderCard({ node, settings, pointerPos })
+    });
+  }
+}

package/src/aldehyde/draw-canvas-edit/components/render/draws/bg-draw.ts

@@ -1,177 +1,177 @@
-import Konva from 'konva';
-import { Draw, BaseDraw, Render } from '../types';
-import { ProgramConfig } from "../../../../index";
-import { fileUpload } from "../../../constant";
-
-// 画布
-
-// 本地文件上传，处理url
-const handleImgUrl = (basePath: string) => {
-  const { serverKey } = fileUpload;
-  if (basePath.startsWith("http")) {
-    return basePath;
-  }
-  const url = encodeURI(ProgramConfig.joinPath(
-    ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-    basePath
-  )) +
-    `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode(serverKey)}&@applicationToken=${ProgramConfig.applicationCode(serverKey)}`;
-  return url;
-}
-
-export interface BgDrawOption {
-  size: number;
-  readonly?: boolean;
-  showGrid?: boolean;
-}
-
-export class BgDraw extends BaseDraw implements Draw {
-  option: BgDrawOption;
-
-  // 独立容器：用于存放静态的背景和画布
-  private staticGroup: Konva.Group;
-  // 独立容器：专门用于存放动态网格
-  private gridGroup: Konva.Group;
-  // 标记静态元素是否需要重绘
-  private isStaticInitialized: boolean = false;
-
-  constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.listening(false);
-
-    // 预先创建好两个独立的 Group
-    this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
-    this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
-
-    // 注意添加顺序：静态在下，网格在上
-    this.group.add(this.staticGroup);
-    this.group.add(this.gridGroup);
-
-    // 监听页面配置变化，当配置改变时，重置静态层初始化状态
-    this.render.on('page-settings-change', () => {
-      this.isStaticInitialized = false;
-      // 触发整体重绘，让 draw 方法重新执行
-      this.draw();
-    });
-  }
-
-  // 更新配置项，触发重绘
-  public updateOption(newOption: Partial<BgDrawOption>) {
-    this.option = { ...this.option, ...newOption };
-    this.draw();
-  }
-
-  override draw() {
-    // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
-    if (!this.isStaticInitialized) {
-      this.renderStaticElements();
-      this.isStaticInitialized = true;
-    }
-    // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
-    if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
-      this.renderGrid();
-    } else { // 清除已渲染网格
-      this.gridGroup.destroyChildren();
-    }
-  }
-
-  /**
-   * 渲染静态元素（仅在初始化或配置改变时执行）
-   */
-  private renderStaticElements() {
-    // 清除旧的静态元素
-    this.staticGroup.destroyChildren();
-    const { width, height, x, y } = this.render.getStageState();
-    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
-
-    // 背景层（填满整个 stage）
-    const bgRect = new Konva.Rect({
-      name: `${this.constructor.name}__background`,
-      x: this.render.toStageValue(-x + this.render.rulerSize),
-      y: this.render.toStageValue(-y + this.render.rulerSize),
-      width: this.render.toStageValue(width),
-      height: this.render.toStageValue(height),
-      listening: false,
-      fill: 'transparent'
-    });
-
-    // 画布边框
-    const canvas = new Konva.Rect({
-      name: this.constructor.name,
-      x: 0,
-      y: 0,
-      width: pageWidth,
-      height: pageHeight,
-      stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
-      strokeWidth: this.render.toStageValue(2),
-      listening: false,
-      dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
-      fill: background || 'transparent',
-    });
-
-    this.staticGroup.add(bgRect);
-    this.staticGroup.add(canvas);
-
-    // 处理背景图（异步）
-    if (backgroundImg?.src) {
-      const img = new Image();
-      img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
-      img.src = handleImgUrl(backgroundImg.src);
-      img.onload = () => {
-        canvas.fill(null);
-        canvas.fillPatternImage(img);
-        canvas.fillPatternRepeat('no-repeat');
-        // 让图片自适应填满矩形（等比缩放裁剪效果）
-        const scaleX = pageWidth / img.width;
-        const scaleY = pageHeight / img.height;
-        canvas.fillPatternScaleX(scaleX);
-        canvas.fillPatternScaleY(scaleY);
-      };
-    }
-  }
-
-  /**
-   * 渲染网格（每次拖拽/缩放时调用）
-   */
-  private renderGrid() {
-    // 仅清空网格 Group，不影响静态层
-    this.gridGroup.destroyChildren();
-    const { width, height, x, y } = this.render.getStageState();
-    const cellSize = this.option.size;
-    const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
-    const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
-    const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
-    const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
-    const lines: Konva.Line[] = [];
-
-    // 生成竖线
-    for (let i = startX; i < lenX + startX + 2; i++) {
-      lines.push(new Konva.Line({
-        points: [
-          cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
-          cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
-        ],
-        stroke: '#ddd',
-        strokeWidth: this.render.toStageValue(1),
-        listening: false
-      }));
-    }
-
-    // 生成横线
-    for (let j = startY; j < lenY + startY + 2; j++) {
-      lines.push(new Konva.Line({
-        points: [
-          this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
-          this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
-        ],
-        stroke: '#ddd',
-        strokeWidth: this.render.toStageValue(1),
-        listening: false
-      }));
-    }
-
-    // 批量添加线条到网格 Group
-    this.gridGroup.add(...lines);
-  }
+import Konva from 'konva';
+import { Draw, BaseDraw, Render } from '../types';
+import { ProgramConfig } from "../../../../index";
+import { fileUpload } from "../../../constant";
+
+// 画布
+
+// 本地文件上传，处理url
+const handleImgUrl = (basePath: string) => {
+  const { serverKey } = fileUpload;
+  if (basePath.startsWith("http")) {
+    return basePath;
+  }
+  const url = encodeURI(ProgramConfig.joinPath(
+    ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+    basePath
+  )) +
+    `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode(serverKey)}&@applicationToken=${ProgramConfig.applicationCode(serverKey)}`;
+  return url;
+}
+
+export interface BgDrawOption {
+  size: number;
+  readonly?: boolean;
+  showGrid?: boolean;
+}
+
+export class BgDraw extends BaseDraw implements Draw {
+  option: BgDrawOption;
+
+  // 独立容器：用于存放静态的背景和画布
+  private staticGroup: Konva.Group;
+  // 独立容器：专门用于存放动态网格
+  private gridGroup: Konva.Group;
+  // 标记静态元素是否需要重绘
+  private isStaticInitialized: boolean = false;
+
+  constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+
+    // 预先创建好两个独立的 Group
+    this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
+    this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
+
+    // 注意添加顺序：静态在下，网格在上
+    this.group.add(this.staticGroup);
+    this.group.add(this.gridGroup);
+
+    // 监听页面配置变化，当配置改变时，重置静态层初始化状态
+    this.render.on('page-settings-change', () => {
+      this.isStaticInitialized = false;
+      // 触发整体重绘，让 draw 方法重新执行
+      this.draw();
+    });
+  }
+
+  // 更新配置项，触发重绘
+  public updateOption(newOption: Partial<BgDrawOption>) {
+    this.option = { ...this.option, ...newOption };
+    this.draw();
+  }
+
+  override draw() {
+    // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
+    if (!this.isStaticInitialized) {
+      this.renderStaticElements();
+      this.isStaticInitialized = true;
+    }
+    // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
+    if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
+      this.renderGrid();
+    } else { // 清除已渲染网格
+      this.gridGroup.destroyChildren();
+    }
+  }
+
+  /**
+   * 渲染静态元素（仅在初始化或配置改变时执行）
+   */
+  private renderStaticElements() {
+    // 清除旧的静态元素
+    this.staticGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
+
+    // 背景层（填满整个 stage）
+    const bgRect = new Konva.Rect({
+      name: `${this.constructor.name}__background`,
+      x: this.render.toStageValue(-x + this.render.rulerSize),
+      y: this.render.toStageValue(-y + this.render.rulerSize),
+      width: this.render.toStageValue(width),
+      height: this.render.toStageValue(height),
+      listening: false,
+      fill: 'transparent'
+    });
+
+    // 画布边框
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: pageWidth,
+      height: pageHeight,
+      stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
+      strokeWidth: this.render.toStageValue(2),
+      listening: false,
+      dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
+      fill: background || 'transparent',
+    });
+
+    this.staticGroup.add(bgRect);
+    this.staticGroup.add(canvas);
+
+    // 处理背景图（异步）
+    if (backgroundImg?.src) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+      img.src = handleImgUrl(backgroundImg.src);
+      img.onload = () => {
+        canvas.fill(null);
+        canvas.fillPatternImage(img);
+        canvas.fillPatternRepeat('no-repeat');
+        // 让图片自适应填满矩形（等比缩放裁剪效果）
+        const scaleX = pageWidth / img.width;
+        const scaleY = pageHeight / img.height;
+        canvas.fillPatternScaleX(scaleX);
+        canvas.fillPatternScaleY(scaleY);
+      };
+    }
+  }
+
+  /**
+   * 渲染网格（每次拖拽/缩放时调用）
+   */
+  private renderGrid() {
+    // 仅清空网格 Group，不影响静态层
+    this.gridGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const cellSize = this.option.size;
+    const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
+    const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
+    const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
+    const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
+    const lines: Konva.Line[] = [];
+
+    // 生成竖线
+    for (let i = startX; i < lenX + startX + 2; i++) {
+      lines.push(new Konva.Line({
+        points: [
+          cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
+          cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 生成横线
+    for (let j = startY; j < lenY + startY + 2; j++) {
+      lines.push(new Konva.Line({
+        points: [
+          this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
+          this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 批量添加线条到网格 Group
+    this.gridGroup.add(...lines);
+  }
 }