aldehyde 0.2.487 → 0.2.489

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

@@ -1,177 +1,178 @@
-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 {
+  static readonly NAME = 'BgDraw';
+  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: `${BgDraw.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: BgDraw.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);
+  }
 }