@flowgram.ai/background-plugin 0.1.0-alpha.10

package/dist/esm/index.js

@@ -0,0 +1,386 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/background-layer.tsx
+import { domUtils } from "@flowgram.ai/utils";
+import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from "@flowgram.ai/core";
+var PATTERN_PREFIX = "gedit-background-pattern-";
+var DEFAULT_RENDER_SIZE = 20;
+var DEFAULT_DOT_SIZE = 1;
+var id = 0;
+var BackgroundConfig = Symbol("BackgroundConfig");
+var BackgroundLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this._patternId = `${PATTERN_PREFIX}${id++}`;
+    this.node = domUtils.createDivWithClass("gedit-flow-background-layer");
+    this.grid = document.createElement("div");
+  }
+  /**
+   * 获取网格大小配置
+   */
+  get gridSize() {
+    return this.options.gridSize ?? DEFAULT_RENDER_SIZE;
+  }
+  /**
+   * 获取点大小配置
+   */
+  get dotSize() {
+    return this.options.dotSize ?? DEFAULT_DOT_SIZE;
+  }
+  /**
+   * 获取点颜色配置
+   */
+  get dotColor() {
+    return this.options.dotColor ?? "#eceeef";
+  }
+  /**
+   * 获取点透明度配置
+   */
+  get dotOpacity() {
+    return this.options.dotOpacity ?? 0.5;
+  }
+  /**
+   * 获取背景颜色配置
+   */
+  get backgroundColor() {
+    return this.options.backgroundColor ?? "transparent";
+  }
+  /**
+   * 获取点填充颜色配置
+   */
+  get dotFillColor() {
+    return this.options.dotFillColor ?? this.dotColor;
+  }
+  /**
+   * 获取Logo配置
+   */
+  get logoConfig() {
+    return this.options.logo;
+  }
+  /**
+   * 当前缩放比
+   */
+  get zoom() {
+    return this.config.finalScale;
+  }
+  onReady() {
+    const { firstChild } = this.pipelineNode;
+    this.pipelineNode.insertBefore(this.node, firstChild);
+    this.playgroundConfigEntity.updateConfig({
+      minZoom: 0.1,
+      maxZoom: 2
+    });
+    this.grid.style.zIndex = "-1";
+    this.grid.style.position = "relative";
+    this.node.appendChild(this.grid);
+    this.grid.className = "gedit-grid-svg";
+    if (this.backgroundColor !== "transparent") {
+      this.node.style.backgroundColor = this.backgroundColor;
+    }
+  }
+  /**
+   * 最小单元格大小
+   */
+  getScaleUnit() {
+    const { zoom } = this;
+    return {
+      realSize: this.gridSize,
+      // 使用配置的网格大小
+      renderSize: Math.round(this.gridSize * zoom * 100) / 100,
+      // 一个单元格渲染的大小值
+      zoom
+      // 缩放比
+    };
+  }
+  /**
+   * 绘制
+   */
+  autorun() {
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const scaleUnit = this.getScaleUnit();
+    const mod = scaleUnit.renderSize * 10;
+    const viewBoxWidth = playgroundConfig.width + mod * 2;
+    const viewBoxHeight = playgroundConfig.height + mod * 2;
+    const { scrollX } = playgroundConfig;
+    const { scrollY } = playgroundConfig;
+    const scrollXDelta = this.getScrollDelta(scrollX, mod);
+    const scrollYDelta = this.getScrollDelta(scrollY, mod);
+    domUtils.setStyle(this.node, {
+      left: scrollX - SCALE_WIDTH,
+      top: scrollY - SCALE_WIDTH
+    });
+    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);
+    this.setSVGStyle(this.grid, {
+      width: viewBoxWidth,
+      height: viewBoxHeight,
+      left: SCALE_WIDTH - scrollXDelta - mod,
+      top: SCALE_WIDTH - scrollYDelta - mod
+    });
+  }
+  /**
+   * 计算Logo位置
+   */
+  calculateLogoPosition(viewBoxWidth, viewBoxHeight) {
+    if (!this.logoConfig) return { x: 0, y: 0 };
+    const { position = "center", offset = { x: 0, y: 0 } } = this.logoConfig;
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const scaleUnit = this.getScaleUnit();
+    const mod = scaleUnit.renderSize * 10;
+    const { scrollX, scrollY } = playgroundConfig;
+    const scrollXDelta = this.getScrollDelta(scrollX, mod);
+    const scrollYDelta = this.getScrollDelta(scrollY, mod);
+    const visibleLeft = mod + scrollXDelta;
+    const visibleTop = mod + scrollYDelta;
+    const visibleCenterX = visibleLeft + playgroundConfig.width / 2;
+    const visibleCenterY = visibleTop + playgroundConfig.height / 2;
+    let x = 0, y = 0;
+    switch (position) {
+      case "center":
+        x = visibleCenterX;
+        y = visibleCenterY;
+        break;
+      case "top-left":
+        x = visibleLeft + 100;
+        y = visibleTop + 100;
+        break;
+      case "top-right":
+        x = visibleLeft + playgroundConfig.width - 100;
+        y = visibleTop + 100;
+        break;
+      case "bottom-left":
+        x = visibleLeft + 100;
+        y = visibleTop + playgroundConfig.height - 100;
+        break;
+      case "bottom-right":
+        x = visibleLeft + playgroundConfig.width - 100;
+        y = visibleTop + playgroundConfig.height - 100;
+        break;
+    }
+    return { x: x + offset.x, y: y + offset.y };
+  }
+  /**
+   * 获取Logo大小
+   */
+  getLogoSize() {
+    if (!this.logoConfig) return 0;
+    const { size = "medium" } = this.logoConfig;
+    if (typeof size === "number") {
+      return size;
+    }
+    switch (size) {
+      case "small":
+        return 24;
+      case "medium":
+        return 48;
+      case "large":
+        return 72;
+      default:
+        return 48;
+    }
+  }
+  /**
+   * 颜色工具函数：将十六进制颜色转换为RGB
+   */
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  }
+  /**
+   * 颜色工具函数：调整颜色亮度
+   */
+  adjustBrightness(hex, percent) {
+    const rgb = this.hexToRgb(hex);
+    if (!rgb) return hex;
+    const adjust = (value) => {
+      const adjusted = Math.round(value + (255 - value) * percent);
+      return Math.max(0, Math.min(255, adjusted));
+    };
+    return `#${adjust(rgb.r).toString(16).padStart(2, "0")}${adjust(rgb.g).toString(16).padStart(2, "0")}${adjust(rgb.b).toString(16).padStart(2, "0")}`;
+  }
+  /**
+   * 生成新拟态阴影滤镜
+   */
+  generateNeumorphismFilter(filterId, lightShadow, darkShadow, offset, blur, intensity, raised) {
+    const lightOffset = raised ? -offset : offset;
+    const darkOffset = raised ? offset : -offset;
+    return `
+      <defs>
+        <filter id="${filterId}" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="${lightOffset}" dy="${lightOffset}" stdDeviation="${blur}" flood-color="${lightShadow}" flood-opacity="${intensity}"/>
+          <feDropShadow dx="${darkOffset}" dy="${darkOffset}" stdDeviation="${blur}" flood-color="${darkShadow}" flood-opacity="${intensity}"/>
+        </filter>
+      </defs>`;
+  }
+  /**
+   * 绘制Logo SVG内容
+   */
+  generateLogoSVG(viewBoxWidth, viewBoxHeight) {
+    if (!this.logoConfig) return "";
+    const {
+      text,
+      imageUrl,
+      opacity = 0.1,
+      color = "#cccccc",
+      fontSize,
+      fontFamily = "Arial, sans-serif",
+      fontWeight = "normal",
+      neumorphism
+    } = this.logoConfig;
+    const position = this.calculateLogoPosition(viewBoxWidth, viewBoxHeight);
+    const logoSize = this.getLogoSize();
+    let logoSVG = "";
+    if (imageUrl) {
+      logoSVG = `
+        <image
+          href="${imageUrl}"
+          x="${position.x - logoSize / 2}"
+          y="${position.y - logoSize / 2}"
+          width="${logoSize}"
+          height="${logoSize}"
+          opacity="${opacity}"
+        />`;
+    } else if (text) {
+      const actualFontSize = fontSize ?? Math.max(logoSize / 2, 12);
+      if (neumorphism?.enabled) {
+        const {
+          textColor,
+          lightShadowColor,
+          darkShadowColor,
+          shadowOffset = 6,
+          shadowBlur = 12,
+          intensity = 0.3,
+          raised = true
+        } = neumorphism;
+        const bgColor = this.backgroundColor !== "transparent" ? this.backgroundColor : "#f0f0f0";
+        const finalTextColor = textColor || bgColor;
+        const finalLightShadow = lightShadowColor || this.adjustBrightness(bgColor, 0.2);
+        const finalDarkShadow = darkShadowColor || this.adjustBrightness(bgColor, -0.2);
+        const filterId = `neumorphism-${this._patternId}`;
+        logoSVG += this.generateNeumorphismFilter(
+          filterId,
+          finalLightShadow,
+          finalDarkShadow,
+          shadowOffset,
+          shadowBlur,
+          intensity,
+          raised
+        );
+        logoSVG += `
+          <text
+            x="${position.x}"
+            y="${position.y}"
+            font-family="${fontFamily}"
+            font-size="${actualFontSize}"
+            font-weight="${fontWeight}"
+            fill="${finalTextColor}"
+            opacity="${opacity}"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            filter="url(#${filterId})"
+          >${text}</text>`;
+      } else {
+        logoSVG = `
+          <text
+            x="${position.x}"
+            y="${position.y}"
+            font-family="${fontFamily}"
+            font-size="${actualFontSize}"
+            font-weight="${fontWeight}"
+            fill="${color}"
+            opacity="${opacity}"
+            text-anchor="middle"
+            dominant-baseline="middle"
+          >${text}</text>`;
+      }
+    }
+    return logoSVG;
+  }
+  /**
+   * 绘制网格
+   */
+  drawGrid(unit, viewBoxWidth, viewBoxHeight) {
+    const minor = unit.renderSize;
+    if (!this.grid) {
+      return;
+    }
+    const patternSize = this.dotSize * this.zoom;
+    let svgContent = `<svg width="100%" height="100%">`;
+    if (this.backgroundColor !== "transparent") {
+      svgContent += `<rect width="100%" height="100%" fill="${this.backgroundColor}"/>`;
+    }
+    const circleAttributes = [
+      `cx="${patternSize}"`,
+      `cy="${patternSize}"`,
+      `r="${patternSize}"`,
+      `stroke="${this.dotColor}"`,
+      // 只有当 dotFillColor 被明确设置且与 dotColor 不同时才添加 fill 属性
+      this.options.dotFillColor && this.dotFillColor !== this.dotColor ? `fill="${this.dotFillColor}"` : "",
+      `fill-opacity="${this.dotOpacity}"`
+    ].filter(Boolean).join(" ");
+    svgContent += `
+      <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
+        <circle ${circleAttributes} />
+      </pattern>
+      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>`;
+    const logoSVG = this.generateLogoSVG(viewBoxWidth, viewBoxHeight);
+    if (logoSVG) {
+      svgContent += logoSVG;
+    }
+    svgContent += `</svg>`;
+    this.grid.innerHTML = svgContent;
+  }
+  setSVGStyle(svgElement, style) {
+    if (!svgElement) {
+      return;
+    }
+    svgElement.style.width = `${style.width}px`;
+    svgElement.style.height = `${style.height}px`;
+    svgElement.style.left = `${style.left}px`;
+    svgElement.style.top = `${style.top}px`;
+  }
+  /**
+   * 获取相对滚动距离
+   * @param realScroll
+   * @param mod
+   */
+  getScrollDelta(realScroll, mod) {
+    if (realScroll >= 0) {
+      return realScroll % mod;
+    }
+    return mod - Math.abs(realScroll) % mod;
+  }
+};
+BackgroundLayer.type = "WorkflowBackgroundLayer";
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], BackgroundLayer.prototype, "playgroundConfigEntity", 2);
+
+// src/create-background-plugin.ts
+import { definePluginCreator } from "@flowgram.ai/core";
+var createBackgroundPlugin = definePluginCreator({
+  onBind: (bindConfig, opts) => {
+    bindConfig.bind(BackgroundConfig).toConstantValue(opts);
+  },
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(BackgroundLayer, opts);
+  }
+});
+export {
+  BackgroundConfig,
+  BackgroundLayer,
+  createBackgroundPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/background-layer.tsx","../../src/create-background-plugin.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from '@flowgram.ai/core';\n\ninterface BackgroundScaleUnit {\n  realSize: number;\n  renderSize: number;\n  zoom: number;\n}\n\nconst PATTERN_PREFIX = 'gedit-background-pattern-';\nconst DEFAULT_RENDER_SIZE = 20;\nconst DEFAULT_DOT_SIZE = 1;\nlet id = 0;\n\nexport const BackgroundConfig = Symbol('BackgroundConfig');\nexport interface BackgroundLayerOptions {\n  /** 网格间距，默认 20px */\n  gridSize?: number;\n  /** 点的大小，默认 1px */\n  dotSize?: number;\n  /** 点的颜色，默认 \"#eceeef\" */\n  dotColor?: string;\n  /** 点的透明度，默认 0.5 */\n  dotOpacity?: number;\n  /** 背景颜色，默认透明 */\n  backgroundColor?: string;\n  /** 点的填充颜色，默认与stroke颜色相同 */\n  dotFillColor?: string;\n  /** Logo 配置 */\n  logo?: {\n    /** Logo 文本内容 */\n    text?: string;\n    /** Logo 图片 URL */\n    imageUrl?: string;\n    /** Logo 位置，默认 'center' */\n    position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n    /** Logo 大小，默认 'medium' */\n    size?: 'small' | 'medium' | 'large' | number;\n    /** Logo 透明度，默认 0.1 */\n    opacity?: number;\n    /** Logo 颜色（仅文本），默认 \"#cccccc\" */\n    color?: string;\n    /** Logo 字体大小（仅文本），默认根据 size 计算 */\n    fontSize?: number;\n    /** Logo 字体家族（仅文本），默认 'Arial, sans-serif' */\n    fontFamily?: string;\n    /** Logo 字体粗细（仅文本），默认 'normal' */\n    fontWeight?: 'normal' | 'bold' | 'lighter' | number;\n    /** 自定义偏移 */\n    offset?: { x: number; y: number };\n    /** 新拟态（Neumorphism）效果配置 */\n    neumorphism?: {\n      /** 是否启用新拟态效果，默认 false */\n      enabled?: boolean;\n      /** 主要文字颜色，应该与背景色接近，默认自动计算 */\n      textColor?: string;\n      /** 亮色阴影颜色，默认自动计算（背景色的亮色版本） */\n      lightShadowColor?: string;\n      /** 暗色阴影颜色，默认自动计算（背景色的暗色版本） */\n      darkShadowColor?: string;\n      /** 阴影偏移距离，默认 6 */\n      shadowOffset?: number;\n      /** 阴影模糊半径，默认 12 */\n      shadowBlur?: number;\n      /** 效果强度（0-1），影响阴影的透明度，默认 0.3 */\n      intensity?: number;\n      /** 凸起效果（true）还是凹陷效果（false），默认 true */\n      raised?: boolean;\n    };\n  };\n}\n\n/**\n * dot 网格背景\n */\nexport class BackgroundLayer extends Layer<BackgroundLayerOptions> {\n  static type = 'WorkflowBackgroundLayer';\n\n  @observeEntity(PlaygroundConfigEntity)\n  protected playgroundConfigEntity: PlaygroundConfigEntity;\n\n  private _patternId = `${PATTERN_PREFIX}${id++}`;\n\n  node = domUtils.createDivWithClass('gedit-flow-background-layer');\n\n  grid: HTMLElement = document.createElement('div');\n\n  /**\n   * 获取网格大小配置\n   */\n  private get gridSize(): number {\n    return this.options.gridSize ?? DEFAULT_RENDER_SIZE;\n  }\n\n  /**\n   * 获取点大小配置\n   */\n  private get dotSize(): number {\n    return this.options.dotSize ?? DEFAULT_DOT_SIZE;\n  }\n\n  /**\n   * 获取点颜色配置\n   */\n  private get dotColor(): string {\n    return this.options.dotColor ?? '#eceeef';\n  }\n\n  /**\n   * 获取点透明度配置\n   */\n  private get dotOpacity(): number {\n    return this.options.dotOpacity ?? 0.5;\n  }\n\n  /**\n   * 获取背景颜色配置\n   */\n  private get backgroundColor(): string {\n    return this.options.backgroundColor ?? 'transparent';\n  }\n\n  /**\n   * 获取点填充颜色配置\n   */\n  private get dotFillColor(): string {\n    return this.options.dotFillColor ?? this.dotColor;\n  }\n\n  /**\n   * 获取Logo配置\n   */\n  private get logoConfig() {\n    return this.options.logo;\n  }\n\n  /**\n   * 当前缩放比\n   */\n  get zoom(): number {\n    return this.config.finalScale;\n  }\n\n  onReady() {\n    const { firstChild } = this.pipelineNode;\n    // 背景插入到最下边\n    this.pipelineNode.insertBefore(this.node, firstChild);\n    // 初始化设置最大 200% 最小 10% 缩放\n    this.playgroundConfigEntity.updateConfig({\n      minZoom: 0.1,\n      maxZoom: 2,\n    });\n    // 确保点的位置在线条的下方\n    this.grid.style.zIndex = '-1';\n    this.grid.style.position = 'relative';\n    this.node.appendChild(this.grid);\n    this.grid.className = 'gedit-grid-svg';\n\n    // 设置背景颜色\n    if (this.backgroundColor !== 'transparent') {\n      this.node.style.backgroundColor = this.backgroundColor;\n    }\n  }\n\n  /**\n   * 最小单元格大小\n   */\n  getScaleUnit(): BackgroundScaleUnit {\n    const { zoom } = this;\n\n    return {\n      realSize: this.gridSize, // 使用配置的网格大小\n      renderSize: Math.round(this.gridSize * zoom * 100) / 100, // 一个单元格渲染的大小值\n      zoom, // 缩放比\n    };\n  }\n\n  /**\n   * 绘制\n   */\n  autorun(): void {\n    const playgroundConfig = this.playgroundConfigEntity.config;\n    const scaleUnit = this.getScaleUnit();\n    const mod = scaleUnit.renderSize * 10;\n    const viewBoxWidth = playgroundConfig.width + mod * 2;\n    const viewBoxHeight = playgroundConfig.height + mod * 2;\n    const { scrollX } = playgroundConfig;\n    const { scrollY } = playgroundConfig;\n    const scrollXDelta = this.getScrollDelta(scrollX, mod);\n    const scrollYDelta = this.getScrollDelta(scrollY, mod);\n    domUtils.setStyle(this.node, {\n      left: scrollX - SCALE_WIDTH,\n      top: scrollY - SCALE_WIDTH,\n    });\n    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);\n    // 设置网格\n    this.setSVGStyle(this.grid, {\n      width: viewBoxWidth,\n      height: viewBoxHeight,\n      left: SCALE_WIDTH - scrollXDelta - mod,\n      top: SCALE_WIDTH - scrollYDelta - mod,\n    });\n  }\n\n  /**\n   * 计算Logo位置\n   */\n  private calculateLogoPosition(\n    viewBoxWidth: number,\n    viewBoxHeight: number\n  ): { x: number; y: number } {\n    if (!this.logoConfig) return { x: 0, y: 0 };\n\n    const { position = 'center', offset = { x: 0, y: 0 } } = this.logoConfig;\n    const playgroundConfig = this.playgroundConfigEntity.config;\n    const scaleUnit = this.getScaleUnit();\n    const mod = scaleUnit.renderSize * 10;\n\n    // 计算SVG内的相对位置，使Logo相对于可视区域固定\n    const { scrollX, scrollY } = playgroundConfig;\n    const scrollXDelta = this.getScrollDelta(scrollX, mod);\n    const scrollYDelta = this.getScrollDelta(scrollY, mod);\n\n    // 可视区域的基准点（相对于SVG坐标系）\n    const visibleLeft = mod + scrollXDelta;\n    const visibleTop = mod + scrollYDelta;\n    const visibleCenterX = visibleLeft + playgroundConfig.width / 2;\n    const visibleCenterY = visibleTop + playgroundConfig.height / 2;\n\n    let x = 0,\n      y = 0;\n\n    switch (position) {\n      case 'center':\n        x = visibleCenterX;\n        y = visibleCenterY;\n        break;\n      case 'top-left':\n        x = visibleLeft + 100;\n        y = visibleTop + 100;\n        break;\n      case 'top-right':\n        x = visibleLeft + playgroundConfig.width - 100;\n        y = visibleTop + 100;\n        break;\n      case 'bottom-left':\n        x = visibleLeft + 100;\n        y = visibleTop + playgroundConfig.height - 100;\n        break;\n      case 'bottom-right':\n        x = visibleLeft + playgroundConfig.width - 100;\n        y = visibleTop + playgroundConfig.height - 100;\n        break;\n    }\n\n    return { x: x + offset.x, y: y + offset.y };\n  }\n\n  /**\n   * 获取Logo大小\n   */\n  private getLogoSize(): number {\n    if (!this.logoConfig) return 0;\n\n    const { size = 'medium' } = this.logoConfig;\n\n    if (typeof size === 'number') {\n      return size;\n    }\n\n    switch (size) {\n      case 'small':\n        return 24;\n      case 'medium':\n        return 48;\n      case 'large':\n        return 72;\n      default:\n        return 48;\n    }\n  }\n\n  /**\n   * 颜色工具函数：将十六进制颜色转换为RGB\n   */\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result\n      ? {\n          r: parseInt(result[1], 16),\n          g: parseInt(result[2], 16),\n          b: parseInt(result[3], 16),\n        }\n      : null;\n  }\n\n  /**\n   * 颜色工具函数：调整颜色亮度\n   */\n  private adjustBrightness(hex: string, percent: number): string {\n    const rgb = this.hexToRgb(hex);\n    if (!rgb) return hex;\n\n    const adjust = (value: number) => {\n      const adjusted = Math.round(value + (255 - value) * percent);\n      return Math.max(0, Math.min(255, adjusted));\n    };\n\n    return `#${adjust(rgb.r).toString(16).padStart(2, '0')}${adjust(rgb.g)\n      .toString(16)\n      .padStart(2, '0')}${adjust(rgb.b).toString(16).padStart(2, '0')}`;\n  }\n\n  /**\n   * 生成新拟态阴影滤镜\n   */\n  private generateNeumorphismFilter(\n    filterId: string,\n    lightShadow: string,\n    darkShadow: string,\n    offset: number,\n    blur: number,\n    intensity: number,\n    raised: boolean\n  ): string {\n    const lightOffset = raised ? -offset : offset;\n    const darkOffset = raised ? offset : -offset;\n\n    return `\n      <defs>\n        <filter id=\"${filterId}\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n          <feDropShadow dx=\"${lightOffset}\" dy=\"${lightOffset}\" stdDeviation=\"${blur}\" flood-color=\"${lightShadow}\" flood-opacity=\"${intensity}\"/>\n          <feDropShadow dx=\"${darkOffset}\" dy=\"${darkOffset}\" stdDeviation=\"${blur}\" flood-color=\"${darkShadow}\" flood-opacity=\"${intensity}\"/>\n        </filter>\n      </defs>`;\n  }\n\n  /**\n   * 绘制Logo SVG内容\n   */\n  private generateLogoSVG(viewBoxWidth: number, viewBoxHeight: number): string {\n    if (!this.logoConfig) return '';\n\n    const {\n      text,\n      imageUrl,\n      opacity = 0.1,\n      color = '#cccccc',\n      fontSize,\n      fontFamily = 'Arial, sans-serif',\n      fontWeight = 'normal',\n      neumorphism,\n    } = this.logoConfig;\n    const position = this.calculateLogoPosition(viewBoxWidth, viewBoxHeight);\n    const logoSize = this.getLogoSize();\n\n    let logoSVG = '';\n\n    if (imageUrl) {\n      // 图片Logo（暂不支持3D效果）\n      logoSVG = `\n        <image\n          href=\"${imageUrl}\"\n          x=\"${position.x - logoSize / 2}\"\n          y=\"${position.y - logoSize / 2}\"\n          width=\"${logoSize}\"\n          height=\"${logoSize}\"\n          opacity=\"${opacity}\"\n        />`;\n    } else if (text) {\n      // 文本Logo\n      const actualFontSize = fontSize ?? Math.max(logoSize / 2, 12);\n\n      // 检查是否启用新拟态效果\n      if (neumorphism?.enabled) {\n        const {\n          textColor,\n          lightShadowColor,\n          darkShadowColor,\n          shadowOffset = 6,\n          shadowBlur = 12,\n          intensity = 0.3,\n          raised = true,\n        } = neumorphism;\n\n        // 自动计算颜色（如果未提供）\n        const bgColor = this.backgroundColor !== 'transparent' ? this.backgroundColor : '#f0f0f0';\n        const finalTextColor = textColor || bgColor;\n        const finalLightShadow = lightShadowColor || this.adjustBrightness(bgColor, 0.2);\n        const finalDarkShadow = darkShadowColor || this.adjustBrightness(bgColor, -0.2);\n\n        const filterId = `neumorphism-${this._patternId}`;\n\n        // 添加新拟态滤镜定义\n        logoSVG += this.generateNeumorphismFilter(\n          filterId,\n          finalLightShadow,\n          finalDarkShadow,\n          shadowOffset,\n          shadowBlur,\n          intensity,\n          raised\n        );\n\n        // 创建新拟态文本\n        logoSVG += `\n          <text\n            x=\"${position.x}\"\n            y=\"${position.y}\"\n            font-family=\"${fontFamily}\"\n            font-size=\"${actualFontSize}\"\n            font-weight=\"${fontWeight}\"\n            fill=\"${finalTextColor}\"\n            opacity=\"${opacity}\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n            filter=\"url(#${filterId})\"\n          >${text}</text>`;\n      } else {\n        // 普通文本（无3D效果）\n        logoSVG = `\n          <text\n            x=\"${position.x}\"\n            y=\"${position.y}\"\n            font-family=\"${fontFamily}\"\n            font-size=\"${actualFontSize}\"\n            font-weight=\"${fontWeight}\"\n            fill=\"${color}\"\n            opacity=\"${opacity}\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n          >${text}</text>`;\n      }\n    }\n\n    return logoSVG;\n  }\n\n  /**\n   * 绘制网格\n   */\n  protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void {\n    const minor = unit.renderSize;\n    if (!this.grid) {\n      return;\n    }\n    const patternSize = this.dotSize * this.zoom;\n\n    // 构建SVG内容，根据是否有背景颜色决定是否添加背景矩形\n    let svgContent = `<svg width=\"100%\" height=\"100%\">`;\n\n    // 如果设置了背景颜色，先绘制背景矩形\n    if (this.backgroundColor !== 'transparent') {\n      svgContent += `<rect width=\"100%\" height=\"100%\" fill=\"${this.backgroundColor}\"/>`;\n    }\n\n    // 添加点阵图案\n    // 构建圆圈属性，保持与原始实现的兼容性\n    const circleAttributes = [\n      `cx=\"${patternSize}\"`,\n      `cy=\"${patternSize}\"`,\n      `r=\"${patternSize}\"`,\n      `stroke=\"${this.dotColor}\"`,\n      // 只有当 dotFillColor 被明确设置且与 dotColor 不同时才添加 fill 属性\n      this.options.dotFillColor && this.dotFillColor !== this.dotColor\n        ? `fill=\"${this.dotFillColor}\"`\n        : '',\n      `fill-opacity=\"${this.dotOpacity}\"`,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    svgContent += `\n      <pattern id=\"${this._patternId}\" width=\"${minor}\" height=\"${minor}\" patternUnits=\"userSpaceOnUse\">\n        <circle ${circleAttributes} />\n      </pattern>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#${this._patternId})\"/>`;\n\n    // 添加Logo\n    const logoSVG = this.generateLogoSVG(viewBoxWidth, viewBoxHeight);\n    if (logoSVG) {\n      svgContent += logoSVG;\n    }\n\n    svgContent += `</svg>`;\n\n    this.grid.innerHTML = svgContent;\n  }\n\n  protected setSVGStyle(\n    svgElement: HTMLElement | undefined,\n    style: { width: number; height: number; left: number; top: number }\n  ): void {\n    if (!svgElement) {\n      return;\n    }\n\n    svgElement.style.width = `${style.width}px`;\n    svgElement.style.height = `${style.height}px`;\n    svgElement.style.left = `${style.left}px`;\n    svgElement.style.top = `${style.top}px`;\n  }\n\n  /**\n   * 获取相对滚动距离\n   * @param realScroll\n   * @param mod\n   */\n  protected getScrollDelta(realScroll: number, mod: number): number {\n    // 正向滚动不用补差\n    if (realScroll >= 0) {\n      return realScroll % mod;\n    }\n    return mod - (Math.abs(realScroll) % mod);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundConfig, BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/**\n * 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n  onBind: (bindConfig, opts) => {\n    bindConfig.bind(BackgroundConfig).toConstantValue(opts);\n  },\n  onInit: (ctx, opts) => {\n    ctx.playground.registerLayer(BackgroundLayer, opts);\n  },\n});\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,171 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface BackgroundScaleUnit {
+    realSize: number;
+    renderSize: number;
+    zoom: number;
+}
+declare const BackgroundConfig: unique symbol;
+interface BackgroundLayerOptions {
+    /** 网格间距，默认 20px */
+    gridSize?: number;
+    /** 点的大小，默认 1px */
+    dotSize?: number;
+    /** 点的颜色，默认 "#eceeef" */
+    dotColor?: string;
+    /** 点的透明度，默认 0.5 */
+    dotOpacity?: number;
+    /** 背景颜色，默认透明 */
+    backgroundColor?: string;
+    /** 点的填充颜色，默认与stroke颜色相同 */
+    dotFillColor?: string;
+    /** Logo 配置 */
+    logo?: {
+        /** Logo 文本内容 */
+        text?: string;
+        /** Logo 图片 URL */
+        imageUrl?: string;
+        /** Logo 位置，默认 'center' */
+        position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        /** Logo 大小，默认 'medium' */
+        size?: 'small' | 'medium' | 'large' | number;
+        /** Logo 透明度，默认 0.1 */
+        opacity?: number;
+        /** Logo 颜色（仅文本），默认 "#cccccc" */
+        color?: string;
+        /** Logo 字体大小（仅文本），默认根据 size 计算 */
+        fontSize?: number;
+        /** Logo 字体家族（仅文本），默认 'Arial, sans-serif' */
+        fontFamily?: string;
+        /** Logo 字体粗细（仅文本），默认 'normal' */
+        fontWeight?: 'normal' | 'bold' | 'lighter' | number;
+        /** 自定义偏移 */
+        offset?: {
+            x: number;
+            y: number;
+        };
+        /** 新拟态（Neumorphism）效果配置 */
+        neumorphism?: {
+            /** 是否启用新拟态效果，默认 false */
+            enabled?: boolean;
+            /** 主要文字颜色，应该与背景色接近，默认自动计算 */
+            textColor?: string;
+            /** 亮色阴影颜色，默认自动计算（背景色的亮色版本） */
+            lightShadowColor?: string;
+            /** 暗色阴影颜色，默认自动计算（背景色的暗色版本） */
+            darkShadowColor?: string;
+            /** 阴影偏移距离，默认 6 */
+            shadowOffset?: number;
+            /** 阴影模糊半径，默认 12 */
+            shadowBlur?: number;
+            /** 效果强度（0-1），影响阴影的透明度，默认 0.3 */
+            intensity?: number;
+            /** 凸起效果（true）还是凹陷效果（false），默认 true */
+            raised?: boolean;
+        };
+    };
+}
+/**
+ * dot 网格背景
+ */
+declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
+    static type: string;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    private _patternId;
+    node: HTMLDivElement;
+    grid: HTMLElement;
+    /**
+     * 获取网格大小配置
+     */
+    private get gridSize();
+    /**
+     * 获取点大小配置
+     */
+    private get dotSize();
+    /**
+     * 获取点颜色配置
+     */
+    private get dotColor();
+    /**
+     * 获取点透明度配置
+     */
+    private get dotOpacity();
+    /**
+     * 获取背景颜色配置
+     */
+    private get backgroundColor();
+    /**
+     * 获取点填充颜色配置
+     */
+    private get dotFillColor();
+    /**
+     * 获取Logo配置
+     */
+    private get logoConfig();
+    /**
+     * 当前缩放比
+     */
+    get zoom(): number;
+    onReady(): void;
+    /**
+     * 最小单元格大小
+     */
+    getScaleUnit(): BackgroundScaleUnit;
+    /**
+     * 绘制
+     */
+    autorun(): void;
+    /**
+     * 计算Logo位置
+     */
+    private calculateLogoPosition;
+    /**
+     * 获取Logo大小
+     */
+    private getLogoSize;
+    /**
+     * 颜色工具函数：将十六进制颜色转换为RGB
+     */
+    private hexToRgb;
+    /**
+     * 颜色工具函数：调整颜色亮度
+     */
+    private adjustBrightness;
+    /**
+     * 生成新拟态阴影滤镜
+     */
+    private generateNeumorphismFilter;
+    /**
+     * 绘制Logo SVG内容
+     */
+    private generateLogoSVG;
+    /**
+     * 绘制网格
+     */
+    protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void;
+    protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    }): void;
+    /**
+     * 获取相对滚动距离
+     * @param realScroll
+     * @param mod
+     */
+    protected getScrollDelta(realScroll: number, mod: number): number;
+}
+
+/**
+ * 点位背景插件
+ */
+declare const createBackgroundPlugin: _flowgram_ai_core.PluginCreator<BackgroundLayerOptions>;
+
+export { BackgroundConfig, BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface BackgroundScaleUnit {
+    realSize: number;
+    renderSize: number;
+    zoom: number;
+}
+declare const BackgroundConfig: unique symbol;
+interface BackgroundLayerOptions {
+    /** 网格间距，默认 20px */
+    gridSize?: number;
+    /** 点的大小，默认 1px */
+    dotSize?: number;
+    /** 点的颜色，默认 "#eceeef" */
+    dotColor?: string;
+    /** 点的透明度，默认 0.5 */
+    dotOpacity?: number;
+    /** 背景颜色，默认透明 */
+    backgroundColor?: string;
+    /** 点的填充颜色，默认与stroke颜色相同 */
+    dotFillColor?: string;
+    /** Logo 配置 */
+    logo?: {
+        /** Logo 文本内容 */
+        text?: string;
+        /** Logo 图片 URL */
+        imageUrl?: string;
+        /** Logo 位置，默认 'center' */
+        position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        /** Logo 大小，默认 'medium' */
+        size?: 'small' | 'medium' | 'large' | number;
+        /** Logo 透明度，默认 0.1 */
+        opacity?: number;
+        /** Logo 颜色（仅文本），默认 "#cccccc" */
+        color?: string;
+        /** Logo 字体大小（仅文本），默认根据 size 计算 */
+        fontSize?: number;
+        /** Logo 字体家族（仅文本），默认 'Arial, sans-serif' */
+        fontFamily?: string;
+        /** Logo 字体粗细（仅文本），默认 'normal' */
+        fontWeight?: 'normal' | 'bold' | 'lighter' | number;
+        /** 自定义偏移 */
+        offset?: {
+            x: number;
+            y: number;
+        };
+        /** 新拟态（Neumorphism）效果配置 */
+        neumorphism?: {
+            /** 是否启用新拟态效果，默认 false */
+            enabled?: boolean;
+            /** 主要文字颜色，应该与背景色接近，默认自动计算 */
+            textColor?: string;
+            /** 亮色阴影颜色，默认自动计算（背景色的亮色版本） */
+            lightShadowColor?: string;
+            /** 暗色阴影颜色，默认自动计算（背景色的暗色版本） */
+            darkShadowColor?: string;
+            /** 阴影偏移距离，默认 6 */
+            shadowOffset?: number;
+            /** 阴影模糊半径，默认 12 */
+            shadowBlur?: number;
+            /** 效果强度（0-1），影响阴影的透明度，默认 0.3 */
+            intensity?: number;
+            /** 凸起效果（true）还是凹陷效果（false），默认 true */
+            raised?: boolean;
+        };
+    };
+}
+/**
+ * dot 网格背景
+ */
+declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
+    static type: string;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    private _patternId;
+    node: HTMLDivElement;
+    grid: HTMLElement;
+    /**
+     * 获取网格大小配置
+     */
+    private get gridSize();
+    /**
+     * 获取点大小配置
+     */
+    private get dotSize();
+    /**
+     * 获取点颜色配置
+     */
+    private get dotColor();
+    /**
+     * 获取点透明度配置
+     */
+    private get dotOpacity();
+    /**
+     * 获取背景颜色配置
+     */
+    private get backgroundColor();
+    /**
+     * 获取点填充颜色配置
+     */
+    private get dotFillColor();
+    /**
+     * 获取Logo配置
+     */
+    private get logoConfig();
+    /**
+     * 当前缩放比
+     */
+    get zoom(): number;
+    onReady(): void;
+    /**
+     * 最小单元格大小
+     */
+    getScaleUnit(): BackgroundScaleUnit;
+    /**
+     * 绘制
+     */
+    autorun(): void;
+    /**
+     * 计算Logo位置
+     */
+    private calculateLogoPosition;
+    /**
+     * 获取Logo大小
+     */
+    private getLogoSize;
+    /**
+     * 颜色工具函数：将十六进制颜色转换为RGB
+     */
+    private hexToRgb;
+    /**
+     * 颜色工具函数：调整颜色亮度
+     */
+    private adjustBrightness;
+    /**
+     * 生成新拟态阴影滤镜
+     */
+    private generateNeumorphismFilter;
+    /**
+     * 绘制Logo SVG内容
+     */
+    private generateLogoSVG;
+    /**
+     * 绘制网格
+     */
+    protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void;
+    protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    }): void;
+    /**
+     * 获取相对滚动距离
+     * @param realScroll
+     * @param mod
+     */
+    protected getScrollDelta(realScroll: number, mod: number): number;
+}
+
+/**
+ * 点位背景插件
+ */
+declare const createBackgroundPlugin: _flowgram_ai_core.PluginCreator<BackgroundLayerOptions>;
+
+export { BackgroundConfig, BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };

package/dist/index.js

@@ -0,0 +1,412 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BackgroundConfig: () => BackgroundConfig,
+  BackgroundLayer: () => BackgroundLayer,
+  createBackgroundPlugin: () => createBackgroundPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/background-layer.tsx
+var import_utils = require("@flowgram.ai/utils");
+var import_core = require("@flowgram.ai/core");
+var PATTERN_PREFIX = "gedit-background-pattern-";
+var DEFAULT_RENDER_SIZE = 20;
+var DEFAULT_DOT_SIZE = 1;
+var id = 0;
+var BackgroundConfig = Symbol("BackgroundConfig");
+var BackgroundLayer = class extends import_core.Layer {
+  constructor() {
+    super(...arguments);
+    this._patternId = `${PATTERN_PREFIX}${id++}`;
+    this.node = import_utils.domUtils.createDivWithClass("gedit-flow-background-layer");
+    this.grid = document.createElement("div");
+  }
+  /**
+   * 获取网格大小配置
+   */
+  get gridSize() {
+    return this.options.gridSize ?? DEFAULT_RENDER_SIZE;
+  }
+  /**
+   * 获取点大小配置
+   */
+  get dotSize() {
+    return this.options.dotSize ?? DEFAULT_DOT_SIZE;
+  }
+  /**
+   * 获取点颜色配置
+   */
+  get dotColor() {
+    return this.options.dotColor ?? "#eceeef";
+  }
+  /**
+   * 获取点透明度配置
+   */
+  get dotOpacity() {
+    return this.options.dotOpacity ?? 0.5;
+  }
+  /**
+   * 获取背景颜色配置
+   */
+  get backgroundColor() {
+    return this.options.backgroundColor ?? "transparent";
+  }
+  /**
+   * 获取点填充颜色配置
+   */
+  get dotFillColor() {
+    return this.options.dotFillColor ?? this.dotColor;
+  }
+  /**
+   * 获取Logo配置
+   */
+  get logoConfig() {
+    return this.options.logo;
+  }
+  /**
+   * 当前缩放比
+   */
+  get zoom() {
+    return this.config.finalScale;
+  }
+  onReady() {
+    const { firstChild } = this.pipelineNode;
+    this.pipelineNode.insertBefore(this.node, firstChild);
+    this.playgroundConfigEntity.updateConfig({
+      minZoom: 0.1,
+      maxZoom: 2
+    });
+    this.grid.style.zIndex = "-1";
+    this.grid.style.position = "relative";
+    this.node.appendChild(this.grid);
+    this.grid.className = "gedit-grid-svg";
+    if (this.backgroundColor !== "transparent") {
+      this.node.style.backgroundColor = this.backgroundColor;
+    }
+  }
+  /**
+   * 最小单元格大小
+   */
+  getScaleUnit() {
+    const { zoom } = this;
+    return {
+      realSize: this.gridSize,
+      // 使用配置的网格大小
+      renderSize: Math.round(this.gridSize * zoom * 100) / 100,
+      // 一个单元格渲染的大小值
+      zoom
+      // 缩放比
+    };
+  }
+  /**
+   * 绘制
+   */
+  autorun() {
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const scaleUnit = this.getScaleUnit();
+    const mod = scaleUnit.renderSize * 10;
+    const viewBoxWidth = playgroundConfig.width + mod * 2;
+    const viewBoxHeight = playgroundConfig.height + mod * 2;
+    const { scrollX } = playgroundConfig;
+    const { scrollY } = playgroundConfig;
+    const scrollXDelta = this.getScrollDelta(scrollX, mod);
+    const scrollYDelta = this.getScrollDelta(scrollY, mod);
+    import_utils.domUtils.setStyle(this.node, {
+      left: scrollX - import_core.SCALE_WIDTH,
+      top: scrollY - import_core.SCALE_WIDTH
+    });
+    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);
+    this.setSVGStyle(this.grid, {
+      width: viewBoxWidth,
+      height: viewBoxHeight,
+      left: import_core.SCALE_WIDTH - scrollXDelta - mod,
+      top: import_core.SCALE_WIDTH - scrollYDelta - mod
+    });
+  }
+  /**
+   * 计算Logo位置
+   */
+  calculateLogoPosition(viewBoxWidth, viewBoxHeight) {
+    if (!this.logoConfig) return { x: 0, y: 0 };
+    const { position = "center", offset = { x: 0, y: 0 } } = this.logoConfig;
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const scaleUnit = this.getScaleUnit();
+    const mod = scaleUnit.renderSize * 10;
+    const { scrollX, scrollY } = playgroundConfig;
+    const scrollXDelta = this.getScrollDelta(scrollX, mod);
+    const scrollYDelta = this.getScrollDelta(scrollY, mod);
+    const visibleLeft = mod + scrollXDelta;
+    const visibleTop = mod + scrollYDelta;
+    const visibleCenterX = visibleLeft + playgroundConfig.width / 2;
+    const visibleCenterY = visibleTop + playgroundConfig.height / 2;
+    let x = 0, y = 0;
+    switch (position) {
+      case "center":
+        x = visibleCenterX;
+        y = visibleCenterY;
+        break;
+      case "top-left":
+        x = visibleLeft + 100;
+        y = visibleTop + 100;
+        break;
+      case "top-right":
+        x = visibleLeft + playgroundConfig.width - 100;
+        y = visibleTop + 100;
+        break;
+      case "bottom-left":
+        x = visibleLeft + 100;
+        y = visibleTop + playgroundConfig.height - 100;
+        break;
+      case "bottom-right":
+        x = visibleLeft + playgroundConfig.width - 100;
+        y = visibleTop + playgroundConfig.height - 100;
+        break;
+    }
+    return { x: x + offset.x, y: y + offset.y };
+  }
+  /**
+   * 获取Logo大小
+   */
+  getLogoSize() {
+    if (!this.logoConfig) return 0;
+    const { size = "medium" } = this.logoConfig;
+    if (typeof size === "number") {
+      return size;
+    }
+    switch (size) {
+      case "small":
+        return 24;
+      case "medium":
+        return 48;
+      case "large":
+        return 72;
+      default:
+        return 48;
+    }
+  }
+  /**
+   * 颜色工具函数：将十六进制颜色转换为RGB
+   */
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  }
+  /**
+   * 颜色工具函数：调整颜色亮度
+   */
+  adjustBrightness(hex, percent) {
+    const rgb = this.hexToRgb(hex);
+    if (!rgb) return hex;
+    const adjust = (value) => {
+      const adjusted = Math.round(value + (255 - value) * percent);
+      return Math.max(0, Math.min(255, adjusted));
+    };
+    return `#${adjust(rgb.r).toString(16).padStart(2, "0")}${adjust(rgb.g).toString(16).padStart(2, "0")}${adjust(rgb.b).toString(16).padStart(2, "0")}`;
+  }
+  /**
+   * 生成新拟态阴影滤镜
+   */
+  generateNeumorphismFilter(filterId, lightShadow, darkShadow, offset, blur, intensity, raised) {
+    const lightOffset = raised ? -offset : offset;
+    const darkOffset = raised ? offset : -offset;
+    return `
+      <defs>
+        <filter id="${filterId}" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="${lightOffset}" dy="${lightOffset}" stdDeviation="${blur}" flood-color="${lightShadow}" flood-opacity="${intensity}"/>
+          <feDropShadow dx="${darkOffset}" dy="${darkOffset}" stdDeviation="${blur}" flood-color="${darkShadow}" flood-opacity="${intensity}"/>
+        </filter>
+      </defs>`;
+  }
+  /**
+   * 绘制Logo SVG内容
+   */
+  generateLogoSVG(viewBoxWidth, viewBoxHeight) {
+    if (!this.logoConfig) return "";
+    const {
+      text,
+      imageUrl,
+      opacity = 0.1,
+      color = "#cccccc",
+      fontSize,
+      fontFamily = "Arial, sans-serif",
+      fontWeight = "normal",
+      neumorphism
+    } = this.logoConfig;
+    const position = this.calculateLogoPosition(viewBoxWidth, viewBoxHeight);
+    const logoSize = this.getLogoSize();
+    let logoSVG = "";
+    if (imageUrl) {
+      logoSVG = `
+        <image
+          href="${imageUrl}"
+          x="${position.x - logoSize / 2}"
+          y="${position.y - logoSize / 2}"
+          width="${logoSize}"
+          height="${logoSize}"
+          opacity="${opacity}"
+        />`;
+    } else if (text) {
+      const actualFontSize = fontSize ?? Math.max(logoSize / 2, 12);
+      if (neumorphism?.enabled) {
+        const {
+          textColor,
+          lightShadowColor,
+          darkShadowColor,
+          shadowOffset = 6,
+          shadowBlur = 12,
+          intensity = 0.3,
+          raised = true
+        } = neumorphism;
+        const bgColor = this.backgroundColor !== "transparent" ? this.backgroundColor : "#f0f0f0";
+        const finalTextColor = textColor || bgColor;
+        const finalLightShadow = lightShadowColor || this.adjustBrightness(bgColor, 0.2);
+        const finalDarkShadow = darkShadowColor || this.adjustBrightness(bgColor, -0.2);
+        const filterId = `neumorphism-${this._patternId}`;
+        logoSVG += this.generateNeumorphismFilter(
+          filterId,
+          finalLightShadow,
+          finalDarkShadow,
+          shadowOffset,
+          shadowBlur,
+          intensity,
+          raised
+        );
+        logoSVG += `
+          <text
+            x="${position.x}"
+            y="${position.y}"
+            font-family="${fontFamily}"
+            font-size="${actualFontSize}"
+            font-weight="${fontWeight}"
+            fill="${finalTextColor}"
+            opacity="${opacity}"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            filter="url(#${filterId})"
+          >${text}</text>`;
+      } else {
+        logoSVG = `
+          <text
+            x="${position.x}"
+            y="${position.y}"
+            font-family="${fontFamily}"
+            font-size="${actualFontSize}"
+            font-weight="${fontWeight}"
+            fill="${color}"
+            opacity="${opacity}"
+            text-anchor="middle"
+            dominant-baseline="middle"
+          >${text}</text>`;
+      }
+    }
+    return logoSVG;
+  }
+  /**
+   * 绘制网格
+   */
+  drawGrid(unit, viewBoxWidth, viewBoxHeight) {
+    const minor = unit.renderSize;
+    if (!this.grid) {
+      return;
+    }
+    const patternSize = this.dotSize * this.zoom;
+    let svgContent = `<svg width="100%" height="100%">`;
+    if (this.backgroundColor !== "transparent") {
+      svgContent += `<rect width="100%" height="100%" fill="${this.backgroundColor}"/>`;
+    }
+    const circleAttributes = [
+      `cx="${patternSize}"`,
+      `cy="${patternSize}"`,
+      `r="${patternSize}"`,
+      `stroke="${this.dotColor}"`,
+      // 只有当 dotFillColor 被明确设置且与 dotColor 不同时才添加 fill 属性
+      this.options.dotFillColor && this.dotFillColor !== this.dotColor ? `fill="${this.dotFillColor}"` : "",
+      `fill-opacity="${this.dotOpacity}"`
+    ].filter(Boolean).join(" ");
+    svgContent += `
+      <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
+        <circle ${circleAttributes} />
+      </pattern>
+      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>`;
+    const logoSVG = this.generateLogoSVG(viewBoxWidth, viewBoxHeight);
+    if (logoSVG) {
+      svgContent += logoSVG;
+    }
+    svgContent += `</svg>`;
+    this.grid.innerHTML = svgContent;
+  }
+  setSVGStyle(svgElement, style) {
+    if (!svgElement) {
+      return;
+    }
+    svgElement.style.width = `${style.width}px`;
+    svgElement.style.height = `${style.height}px`;
+    svgElement.style.left = `${style.left}px`;
+    svgElement.style.top = `${style.top}px`;
+  }
+  /**
+   * 获取相对滚动距离
+   * @param realScroll
+   * @param mod
+   */
+  getScrollDelta(realScroll, mod) {
+    if (realScroll >= 0) {
+      return realScroll % mod;
+    }
+    return mod - Math.abs(realScroll) % mod;
+  }
+};
+BackgroundLayer.type = "WorkflowBackgroundLayer";
+__decorateClass([
+  (0, import_core.observeEntity)(import_core.PlaygroundConfigEntity)
+], BackgroundLayer.prototype, "playgroundConfigEntity", 2);
+
+// src/create-background-plugin.ts
+var import_core2 = require("@flowgram.ai/core");
+var createBackgroundPlugin = (0, import_core2.definePluginCreator)({
+  onBind: (bindConfig, opts) => {
+    bindConfig.bind(BackgroundConfig).toConstantValue(opts);
+  },
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(BackgroundLayer, opts);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundConfig,
+  BackgroundLayer,
+  createBackgroundPlugin
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/background-layer.tsx","../src/create-background-plugin.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './background-layer';\nexport * from './create-background-plugin';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from '@flowgram.ai/core';\n\ninterface BackgroundScaleUnit {\n  realSize: number;\n  renderSize: number;\n  zoom: number;\n}\n\nconst PATTERN_PREFIX = 'gedit-background-pattern-';\nconst DEFAULT_RENDER_SIZE = 20;\nconst DEFAULT_DOT_SIZE = 1;\nlet id = 0;\n\nexport const BackgroundConfig = Symbol('BackgroundConfig');\nexport interface BackgroundLayerOptions {\n  /** 网格间距，默认 20px */\n  gridSize?: number;\n  /** 点的大小，默认 1px */\n  dotSize?: number;\n  /** 点的颜色，默认 \"#eceeef\" */\n  dotColor?: string;\n  /** 点的透明度，默认 0.5 */\n  dotOpacity?: number;\n  /** 背景颜色，默认透明 */\n  backgroundColor?: string;\n  /** 点的填充颜色，默认与stroke颜色相同 */\n  dotFillColor?: string;\n  /** Logo 配置 */\n  logo?: {\n    /** Logo 文本内容 */\n    text?: string;\n    /** Logo 图片 URL */\n    imageUrl?: string;\n    /** Logo 位置，默认 'center' */\n    position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n    /** Logo 大小，默认 'medium' */\n    size?: 'small' | 'medium' | 'large' | number;\n    /** Logo 透明度，默认 0.1 */\n    opacity?: number;\n    /** Logo 颜色（仅文本），默认 \"#cccccc\" */\n    color?: string;\n    /** Logo 字体大小（仅文本），默认根据 size 计算 */\n    fontSize?: number;\n    /** Logo 字体家族（仅文本），默认 'Arial, sans-serif' */\n    fontFamily?: string;\n    /** Logo 字体粗细（仅文本），默认 'normal' */\n    fontWeight?: 'normal' | 'bold' | 'lighter' | number;\n    /** 自定义偏移 */\n    offset?: { x: number; y: number };\n    /** 新拟态（Neumorphism）效果配置 */\n    neumorphism?: {\n      /** 是否启用新拟态效果，默认 false */\n      enabled?: boolean;\n      /** 主要文字颜色，应该与背景色接近，默认自动计算 */\n      textColor?: string;\n      /** 亮色阴影颜色，默认自动计算（背景色的亮色版本） */\n      lightShadowColor?: string;\n      /** 暗色阴影颜色，默认自动计算（背景色的暗色版本） */\n      darkShadowColor?: string;\n      /** 阴影偏移距离，默认 6 */\n      shadowOffset?: number;\n      /** 阴影模糊半径，默认 12 */\n      shadowBlur?: number;\n      /** 效果强度（0-1），影响阴影的透明度，默认 0.3 */\n      intensity?: number;\n      /** 凸起效果（true）还是凹陷效果（false），默认 true */\n      raised?: boolean;\n    };\n  };\n}\n\n/**\n * dot 网格背景\n */\nexport class BackgroundLayer extends Layer<BackgroundLayerOptions> {\n  static type = 'WorkflowBackgroundLayer';\n\n  @observeEntity(PlaygroundConfigEntity)\n  protected playgroundConfigEntity: PlaygroundConfigEntity;\n\n  private _patternId = `${PATTERN_PREFIX}${id++}`;\n\n  node = domUtils.createDivWithClass('gedit-flow-background-layer');\n\n  grid: HTMLElement = document.createElement('div');\n\n  /**\n   * 获取网格大小配置\n   */\n  private get gridSize(): number {\n    return this.options.gridSize ?? DEFAULT_RENDER_SIZE;\n  }\n\n  /**\n   * 获取点大小配置\n   */\n  private get dotSize(): number {\n    return this.options.dotSize ?? DEFAULT_DOT_SIZE;\n  }\n\n  /**\n   * 获取点颜色配置\n   */\n  private get dotColor(): string {\n    return this.options.dotColor ?? '#eceeef';\n  }\n\n  /**\n   * 获取点透明度配置\n   */\n  private get dotOpacity(): number {\n    return this.options.dotOpacity ?? 0.5;\n  }\n\n  /**\n   * 获取背景颜色配置\n   */\n  private get backgroundColor(): string {\n    return this.options.backgroundColor ?? 'transparent';\n  }\n\n  /**\n   * 获取点填充颜色配置\n   */\n  private get dotFillColor(): string {\n    return this.options.dotFillColor ?? this.dotColor;\n  }\n\n  /**\n   * 获取Logo配置\n   */\n  private get logoConfig() {\n    return this.options.logo;\n  }\n\n  /**\n   * 当前缩放比\n   */\n  get zoom(): number {\n    return this.config.finalScale;\n  }\n\n  onReady() {\n    const { firstChild } = this.pipelineNode;\n    // 背景插入到最下边\n    this.pipelineNode.insertBefore(this.node, firstChild);\n    // 初始化设置最大 200% 最小 10% 缩放\n    this.playgroundConfigEntity.updateConfig({\n      minZoom: 0.1,\n      maxZoom: 2,\n    });\n    // 确保点的位置在线条的下方\n    this.grid.style.zIndex = '-1';\n    this.grid.style.position = 'relative';\n    this.node.appendChild(this.grid);\n    this.grid.className = 'gedit-grid-svg';\n\n    // 设置背景颜色\n    if (this.backgroundColor !== 'transparent') {\n      this.node.style.backgroundColor = this.backgroundColor;\n    }\n  }\n\n  /**\n   * 最小单元格大小\n   */\n  getScaleUnit(): BackgroundScaleUnit {\n    const { zoom } = this;\n\n    return {\n      realSize: this.gridSize, // 使用配置的网格大小\n      renderSize: Math.round(this.gridSize * zoom * 100) / 100, // 一个单元格渲染的大小值\n      zoom, // 缩放比\n    };\n  }\n\n  /**\n   * 绘制\n   */\n  autorun(): void {\n    const playgroundConfig = this.playgroundConfigEntity.config;\n    const scaleUnit = this.getScaleUnit();\n    const mod = scaleUnit.renderSize * 10;\n    const viewBoxWidth = playgroundConfig.width + mod * 2;\n    const viewBoxHeight = playgroundConfig.height + mod * 2;\n    const { scrollX } = playgroundConfig;\n    const { scrollY } = playgroundConfig;\n    const scrollXDelta = this.getScrollDelta(scrollX, mod);\n    const scrollYDelta = this.getScrollDelta(scrollY, mod);\n    domUtils.setStyle(this.node, {\n      left: scrollX - SCALE_WIDTH,\n      top: scrollY - SCALE_WIDTH,\n    });\n    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);\n    // 设置网格\n    this.setSVGStyle(this.grid, {\n      width: viewBoxWidth,\n      height: viewBoxHeight,\n      left: SCALE_WIDTH - scrollXDelta - mod,\n      top: SCALE_WIDTH - scrollYDelta - mod,\n    });\n  }\n\n  /**\n   * 计算Logo位置\n   */\n  private calculateLogoPosition(\n    viewBoxWidth: number,\n    viewBoxHeight: number\n  ): { x: number; y: number } {\n    if (!this.logoConfig) return { x: 0, y: 0 };\n\n    const { position = 'center', offset = { x: 0, y: 0 } } = this.logoConfig;\n    const playgroundConfig = this.playgroundConfigEntity.config;\n    const scaleUnit = this.getScaleUnit();\n    const mod = scaleUnit.renderSize * 10;\n\n    // 计算SVG内的相对位置，使Logo相对于可视区域固定\n    const { scrollX, scrollY } = playgroundConfig;\n    const scrollXDelta = this.getScrollDelta(scrollX, mod);\n    const scrollYDelta = this.getScrollDelta(scrollY, mod);\n\n    // 可视区域的基准点（相对于SVG坐标系）\n    const visibleLeft = mod + scrollXDelta;\n    const visibleTop = mod + scrollYDelta;\n    const visibleCenterX = visibleLeft + playgroundConfig.width / 2;\n    const visibleCenterY = visibleTop + playgroundConfig.height / 2;\n\n    let x = 0,\n      y = 0;\n\n    switch (position) {\n      case 'center':\n        x = visibleCenterX;\n        y = visibleCenterY;\n        break;\n      case 'top-left':\n        x = visibleLeft + 100;\n        y = visibleTop + 100;\n        break;\n      case 'top-right':\n        x = visibleLeft + playgroundConfig.width - 100;\n        y = visibleTop + 100;\n        break;\n      case 'bottom-left':\n        x = visibleLeft + 100;\n        y = visibleTop + playgroundConfig.height - 100;\n        break;\n      case 'bottom-right':\n        x = visibleLeft + playgroundConfig.width - 100;\n        y = visibleTop + playgroundConfig.height - 100;\n        break;\n    }\n\n    return { x: x + offset.x, y: y + offset.y };\n  }\n\n  /**\n   * 获取Logo大小\n   */\n  private getLogoSize(): number {\n    if (!this.logoConfig) return 0;\n\n    const { size = 'medium' } = this.logoConfig;\n\n    if (typeof size === 'number') {\n      return size;\n    }\n\n    switch (size) {\n      case 'small':\n        return 24;\n      case 'medium':\n        return 48;\n      case 'large':\n        return 72;\n      default:\n        return 48;\n    }\n  }\n\n  /**\n   * 颜色工具函数：将十六进制颜色转换为RGB\n   */\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result\n      ? {\n          r: parseInt(result[1], 16),\n          g: parseInt(result[2], 16),\n          b: parseInt(result[3], 16),\n        }\n      : null;\n  }\n\n  /**\n   * 颜色工具函数：调整颜色亮度\n   */\n  private adjustBrightness(hex: string, percent: number): string {\n    const rgb = this.hexToRgb(hex);\n    if (!rgb) return hex;\n\n    const adjust = (value: number) => {\n      const adjusted = Math.round(value + (255 - value) * percent);\n      return Math.max(0, Math.min(255, adjusted));\n    };\n\n    return `#${adjust(rgb.r).toString(16).padStart(2, '0')}${adjust(rgb.g)\n      .toString(16)\n      .padStart(2, '0')}${adjust(rgb.b).toString(16).padStart(2, '0')}`;\n  }\n\n  /**\n   * 生成新拟态阴影滤镜\n   */\n  private generateNeumorphismFilter(\n    filterId: string,\n    lightShadow: string,\n    darkShadow: string,\n    offset: number,\n    blur: number,\n    intensity: number,\n    raised: boolean\n  ): string {\n    const lightOffset = raised ? -offset : offset;\n    const darkOffset = raised ? offset : -offset;\n\n    return `\n      <defs>\n        <filter id=\"${filterId}\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n          <feDropShadow dx=\"${lightOffset}\" dy=\"${lightOffset}\" stdDeviation=\"${blur}\" flood-color=\"${lightShadow}\" flood-opacity=\"${intensity}\"/>\n          <feDropShadow dx=\"${darkOffset}\" dy=\"${darkOffset}\" stdDeviation=\"${blur}\" flood-color=\"${darkShadow}\" flood-opacity=\"${intensity}\"/>\n        </filter>\n      </defs>`;\n  }\n\n  /**\n   * 绘制Logo SVG内容\n   */\n  private generateLogoSVG(viewBoxWidth: number, viewBoxHeight: number): string {\n    if (!this.logoConfig) return '';\n\n    const {\n      text,\n      imageUrl,\n      opacity = 0.1,\n      color = '#cccccc',\n      fontSize,\n      fontFamily = 'Arial, sans-serif',\n      fontWeight = 'normal',\n      neumorphism,\n    } = this.logoConfig;\n    const position = this.calculateLogoPosition(viewBoxWidth, viewBoxHeight);\n    const logoSize = this.getLogoSize();\n\n    let logoSVG = '';\n\n    if (imageUrl) {\n      // 图片Logo（暂不支持3D效果）\n      logoSVG = `\n        <image\n          href=\"${imageUrl}\"\n          x=\"${position.x - logoSize / 2}\"\n          y=\"${position.y - logoSize / 2}\"\n          width=\"${logoSize}\"\n          height=\"${logoSize}\"\n          opacity=\"${opacity}\"\n        />`;\n    } else if (text) {\n      // 文本Logo\n      const actualFontSize = fontSize ?? Math.max(logoSize / 2, 12);\n\n      // 检查是否启用新拟态效果\n      if (neumorphism?.enabled) {\n        const {\n          textColor,\n          lightShadowColor,\n          darkShadowColor,\n          shadowOffset = 6,\n          shadowBlur = 12,\n          intensity = 0.3,\n          raised = true,\n        } = neumorphism;\n\n        // 自动计算颜色（如果未提供）\n        const bgColor = this.backgroundColor !== 'transparent' ? this.backgroundColor : '#f0f0f0';\n        const finalTextColor = textColor || bgColor;\n        const finalLightShadow = lightShadowColor || this.adjustBrightness(bgColor, 0.2);\n        const finalDarkShadow = darkShadowColor || this.adjustBrightness(bgColor, -0.2);\n\n        const filterId = `neumorphism-${this._patternId}`;\n\n        // 添加新拟态滤镜定义\n        logoSVG += this.generateNeumorphismFilter(\n          filterId,\n          finalLightShadow,\n          finalDarkShadow,\n          shadowOffset,\n          shadowBlur,\n          intensity,\n          raised\n        );\n\n        // 创建新拟态文本\n        logoSVG += `\n          <text\n            x=\"${position.x}\"\n            y=\"${position.y}\"\n            font-family=\"${fontFamily}\"\n            font-size=\"${actualFontSize}\"\n            font-weight=\"${fontWeight}\"\n            fill=\"${finalTextColor}\"\n            opacity=\"${opacity}\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n            filter=\"url(#${filterId})\"\n          >${text}</text>`;\n      } else {\n        // 普通文本（无3D效果）\n        logoSVG = `\n          <text\n            x=\"${position.x}\"\n            y=\"${position.y}\"\n            font-family=\"${fontFamily}\"\n            font-size=\"${actualFontSize}\"\n            font-weight=\"${fontWeight}\"\n            fill=\"${color}\"\n            opacity=\"${opacity}\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n          >${text}</text>`;\n      }\n    }\n\n    return logoSVG;\n  }\n\n  /**\n   * 绘制网格\n   */\n  protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void {\n    const minor = unit.renderSize;\n    if (!this.grid) {\n      return;\n    }\n    const patternSize = this.dotSize * this.zoom;\n\n    // 构建SVG内容，根据是否有背景颜色决定是否添加背景矩形\n    let svgContent = `<svg width=\"100%\" height=\"100%\">`;\n\n    // 如果设置了背景颜色，先绘制背景矩形\n    if (this.backgroundColor !== 'transparent') {\n      svgContent += `<rect width=\"100%\" height=\"100%\" fill=\"${this.backgroundColor}\"/>`;\n    }\n\n    // 添加点阵图案\n    // 构建圆圈属性，保持与原始实现的兼容性\n    const circleAttributes = [\n      `cx=\"${patternSize}\"`,\n      `cy=\"${patternSize}\"`,\n      `r=\"${patternSize}\"`,\n      `stroke=\"${this.dotColor}\"`,\n      // 只有当 dotFillColor 被明确设置且与 dotColor 不同时才添加 fill 属性\n      this.options.dotFillColor && this.dotFillColor !== this.dotColor\n        ? `fill=\"${this.dotFillColor}\"`\n        : '',\n      `fill-opacity=\"${this.dotOpacity}\"`,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    svgContent += `\n      <pattern id=\"${this._patternId}\" width=\"${minor}\" height=\"${minor}\" patternUnits=\"userSpaceOnUse\">\n        <circle ${circleAttributes} />\n      </pattern>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#${this._patternId})\"/>`;\n\n    // 添加Logo\n    const logoSVG = this.generateLogoSVG(viewBoxWidth, viewBoxHeight);\n    if (logoSVG) {\n      svgContent += logoSVG;\n    }\n\n    svgContent += `</svg>`;\n\n    this.grid.innerHTML = svgContent;\n  }\n\n  protected setSVGStyle(\n    svgElement: HTMLElement | undefined,\n    style: { width: number; height: number; left: number; top: number }\n  ): void {\n    if (!svgElement) {\n      return;\n    }\n\n    svgElement.style.width = `${style.width}px`;\n    svgElement.style.height = `${style.height}px`;\n    svgElement.style.left = `${style.left}px`;\n    svgElement.style.top = `${style.top}px`;\n  }\n\n  /**\n   * 获取相对滚动距离\n   * @param realScroll\n   * @param mod\n   */\n  protected getScrollDelta(realScroll: number, mod: number): number {\n    // 正向滚动不用补差\n    if (realScroll >= 0) {\n      return realScroll % mod;\n    }\n    return mod - (Math.abs(realScroll) % mod);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundConfig, BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/**\n * 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n  onBind: (bindConfig, opts) => {\n    bindConfig.bind(BackgroundConfig).toConstantValue(opts);\n  },\n  onInit: (ctx, opts) => {\n    ctx.playground.registerLayer(BackgroundLayer, opts);\n  },\n});\n"],"mappings":"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","names":["import_core"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@flowgram.ai/background-plugin",
+  "version": "0.1.0-alpha.10",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/bytedance/flowgram.ai",
+  "license": "MIT",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "require": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram.ai/core": "0.1.0-alpha.10",
+    "@flowgram.ai/utils": "0.1.0-alpha.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/coverage-v8": "^0.32.0",
+    "eslint": "^8.54.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.34.6",
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.10",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.10"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "npm run build:fast -- --dts-resolve",
+    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
+    "build:watch": "npm run build:fast -- --dts-resolve",
+    "clean": "rimraf dist",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "ts-check": "tsc --noEmit",
+    "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
+  }
+}