npm - @flowgram.ai/background-plugin - Versions diffs - 0.2.14 → 0.2.15 - Mend

@flowgram.ai/background-plugin 0.2.14 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -10,11 +10,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 // src/background-layer.tsx
-import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from "@flowgram.ai/core";
 import { domUtils } from "@flowgram.ai/utils";
+import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from "@flowgram.ai/core";
 var PATTERN_PREFIX = "gedit-background-pattern-";
-var RENDER_SIZE = 20;
-var DOT_SIZE = 1;
+var DEFAULT_RENDER_SIZE = 20;
+var DEFAULT_DOT_SIZE = 1;
 var id = 0;
 var BackgroundLayer = class extends Layer {
   constructor() {
@@ -23,6 +23,48 @@ var BackgroundLayer = class extends Layer {
     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;
+  }
   /**
    * 当前缩放比
    */
@@ -40,6 +82,9 @@ var BackgroundLayer = class extends Layer {
     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;
+    }
   }
   /**
    * 最小单元格大小
@@ -47,9 +92,9 @@ var BackgroundLayer = class extends Layer {
   getScaleUnit() {
     const { zoom } = this;
     return {
-      realSize: RENDER_SIZE,
-      // 一个单元格代表的真实大小
-      renderSize: Math.round(RENDER_SIZE * zoom * 100) / 100,
+      realSize: this.gridSize,
+      // 使用配置的网格大小
+      renderSize: Math.round(this.gridSize * zoom * 100) / 100,
       // 一个单元格渲染的大小值
       zoom
       // 缩放比
@@ -72,7 +117,7 @@ var BackgroundLayer = class extends Layer {
       left: scrollX - SCALE_WIDTH,
       top: scrollY - SCALE_WIDTH
     });
-    this.drawGrid(scaleUnit);
+    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);
     this.setSVGStyle(this.grid, {
       width: viewBoxWidth,
       height: viewBoxHeight,
@@ -80,29 +125,221 @@ var BackgroundLayer = class extends Layer {
       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) {
+  drawGrid(unit, viewBoxWidth, viewBoxHeight) {
     const minor = unit.renderSize;
     if (!this.grid) {
       return;
     }
-    const patternSize = DOT_SIZE * this.zoom;
-    const newContent = `
-    <svg width="100%" height="100%">
+    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
-          cx="${patternSize}"
-          cy="${patternSize}"
-          r="${patternSize}"
-          stroke="#eceeef"
-          fill-opacity="0.5"
-        />
+        <circle ${circleAttributes} />
       </pattern>
-      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
-    </svg>`;
-    this.grid.innerHTML = newContent;
+      <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) {

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/background-layer.tsx","../../src/create-background-plugin.ts"],"sourcesContent":["import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\ninterface BackgroundScaleUnit {\n realSize: number;\n renderSize: number;\n zoom: number;\n}\n\nconst PATTERN_PREFIX = 'gedit-background-pattern-';\nconst RENDER_SIZE = 20;\nconst DOT_SIZE = 1;\nlet id = 0;\nexport interface BackgroundLayerOptions {\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 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 /\n 最小单元格大小\n /\n getScaleUnit(): BackgroundScaleUnit {\n const { zoom } = this;\n\n return {\n realSize: RENDER_SIZE, // 一个单元格代表的真实大小\n renderSize: Math.round(RENDER_SIZE 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);\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 绘制网格\n /\n protected drawGrid(unit: BackgroundScaleUnit): void {\n const minor = unit.renderSize;\n if (!this.grid) {\n return;\n }\n const patternSize = DOT_SIZE this.zoom;\n const newContent = `\n <svg width=\"100%\" height=\"100%\">\n <pattern id=\"${this._patternId}\" width=\"${minor}\" height=\"${minor}\" patternUnits=\"userSpaceOnUse\">\n <circle\n cx=\"${patternSize}\"\n cy=\"${patternSize}\"\n r=\"${patternSize}\"\n stroke=\"#eceeef\"\n fill-opacity=\"0.5\"\n />\n </pattern>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#${this._patternId})\"/>\n </svg>`;\n this.grid.innerHTML = newContent;\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","import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/\n 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n onInit: (ctx, opts) => {\n ctx.playground.registerLayer(BackgroundLayer, opts);\n },\n});\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../src/background-layer.tsx","../../src/create-background-plugin.ts"],"sourcesContent":["import { 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 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","import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/\n 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n onInit: (ctx, opts) => {\n ctx.playground.registerLayer(BackgroundLayer, opts);\n },\n});\n"],"mappings":"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","names":[]}

package/dist/index.d.mts CHANGED Viewed

@@ -7,6 +7,63 @@ interface BackgroundScaleUnit {
     zoom: number;
 }
 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 网格背景
@@ -17,6 +74,34 @@ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
     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();
     /**
      * 当前缩放比
      */
@@ -30,10 +115,34 @@ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
      * 绘制
      */
     autorun(): void;
+    /**
+     * 计算Logo位置
+     */
+    private calculateLogoPosition;
+    /**
+     * 获取Logo大小
+     */
+    private getLogoSize;
+    /**
+     * 颜色工具函数：将十六进制颜色转换为RGB
+     */
+    private hexToRgb;
+    /**
+     * 颜色工具函数：调整颜色亮度
+     */
+    private adjustBrightness;
+    /**
+     * 生成新拟态阴影滤镜
+     */
+    private generateNeumorphismFilter;
+    /**
+     * 绘制Logo SVG内容
+     */
+    private generateLogoSVG;
     /**
      * 绘制网格
      */
-    protected drawGrid(unit: BackgroundScaleUnit): void;
+    protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void;
     protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
         width: number;
         height: number;

package/dist/index.d.ts CHANGED Viewed

@@ -7,6 +7,63 @@ interface BackgroundScaleUnit {
     zoom: number;
 }
 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 网格背景
@@ -17,6 +74,34 @@ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
     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();
     /**
      * 当前缩放比
      */
@@ -30,10 +115,34 @@ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
      * 绘制
      */
     autorun(): void;
+    /**
+     * 计算Logo位置
+     */
+    private calculateLogoPosition;
+    /**
+     * 获取Logo大小
+     */
+    private getLogoSize;
+    /**
+     * 颜色工具函数：将十六进制颜色转换为RGB
+     */
+    private hexToRgb;
+    /**
+     * 颜色工具函数：调整颜色亮度
+     */
+    private adjustBrightness;
+    /**
+     * 生成新拟态阴影滤镜
+     */
+    private generateNeumorphismFilter;
+    /**
+     * 绘制Logo SVG内容
+     */
+    private generateLogoSVG;
     /**
      * 绘制网格
      */
-    protected drawGrid(unit: BackgroundScaleUnit): void;
+    protected drawGrid(unit: BackgroundScaleUnit, viewBoxWidth: number, viewBoxHeight: number): void;
     protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
         width: number;
         height: number;

package/dist/index.js CHANGED Viewed

@@ -34,11 +34,11 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 // src/background-layer.tsx
-var import_core = require("@flowgram.ai/core");
 var import_utils = require("@flowgram.ai/utils");
+var import_core = require("@flowgram.ai/core");
 var PATTERN_PREFIX = "gedit-background-pattern-";
-var RENDER_SIZE = 20;
-var DOT_SIZE = 1;
+var DEFAULT_RENDER_SIZE = 20;
+var DEFAULT_DOT_SIZE = 1;
 var id = 0;
 var BackgroundLayer = class extends import_core.Layer {
   constructor() {
@@ -47,6 +47,48 @@ var BackgroundLayer = class extends import_core.Layer {
     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;
+  }
   /**
    * 当前缩放比
    */
@@ -64,6 +106,9 @@ var BackgroundLayer = class extends import_core.Layer {
     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;
+    }
   }
   /**
    * 最小单元格大小
@@ -71,9 +116,9 @@ var BackgroundLayer = class extends import_core.Layer {
   getScaleUnit() {
     const { zoom } = this;
     return {
-      realSize: RENDER_SIZE,
-      // 一个单元格代表的真实大小
-      renderSize: Math.round(RENDER_SIZE * zoom * 100) / 100,
+      realSize: this.gridSize,
+      // 使用配置的网格大小
+      renderSize: Math.round(this.gridSize * zoom * 100) / 100,
       // 一个单元格渲染的大小值
       zoom
       // 缩放比
@@ -96,7 +141,7 @@ var BackgroundLayer = class extends import_core.Layer {
       left: scrollX - import_core.SCALE_WIDTH,
       top: scrollY - import_core.SCALE_WIDTH
     });
-    this.drawGrid(scaleUnit);
+    this.drawGrid(scaleUnit, viewBoxWidth, viewBoxHeight);
     this.setSVGStyle(this.grid, {
       width: viewBoxWidth,
       height: viewBoxHeight,
@@ -104,29 +149,221 @@ var BackgroundLayer = class extends import_core.Layer {
       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) {
+  drawGrid(unit, viewBoxWidth, viewBoxHeight) {
     const minor = unit.renderSize;
     if (!this.grid) {
       return;
     }
-    const patternSize = DOT_SIZE * this.zoom;
-    const newContent = `
-    <svg width="100%" height="100%">
+    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
-          cx="${patternSize}"
-          cy="${patternSize}"
-          r="${patternSize}"
-          stroke="#eceeef"
-          fill-opacity="0.5"
-        />
+        <circle ${circleAttributes} />
       </pattern>
-      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
-    </svg>`;
-    this.grid.innerHTML = newContent;
+      <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) {

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/background-layer.tsx","../src/create-background-plugin.ts"],"sourcesContent":["export * from './background-layer';\nexport * from './create-background-plugin';\n","import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\ninterface BackgroundScaleUnit {\n realSize: number;\n renderSize: number;\n zoom: number;\n}\n\nconst PATTERN_PREFIX = 'gedit-background-pattern-';\nconst RENDER_SIZE = 20;\nconst DOT_SIZE = 1;\nlet id = 0;\nexport interface BackgroundLayerOptions {\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 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 /\n 最小单元格大小\n /\n getScaleUnit(): BackgroundScaleUnit {\n const { zoom } = this;\n\n return {\n realSize: RENDER_SIZE, // 一个单元格代表的真实大小\n renderSize: Math.round(RENDER_SIZE 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);\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 绘制网格\n /\n protected drawGrid(unit: BackgroundScaleUnit): void {\n const minor = unit.renderSize;\n if (!this.grid) {\n return;\n }\n const patternSize = DOT_SIZE this.zoom;\n const newContent = `\n <svg width=\"100%\" height=\"100%\">\n <pattern id=\"${this._patternId}\" width=\"${minor}\" height=\"${minor}\" patternUnits=\"userSpaceOnUse\">\n <circle\n cx=\"${patternSize}\"\n cy=\"${patternSize}\"\n r=\"${patternSize}\"\n stroke=\"#eceeef\"\n fill-opacity=\"0.5\"\n />\n </pattern>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#${this._patternId})\"/>\n </svg>`;\n this.grid.innerHTML = newContent;\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","import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/\n 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n onInit: (ctx, opts) => {\n ctx.playground.registerLayer(BackgroundLayer, opts);\n },\n});\n"],"mappings":"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","names":["import_core"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/background-layer.tsx","../src/create-background-plugin.ts"],"sourcesContent":["export * from './background-layer';\nexport * from './create-background-plugin';\n","import { 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 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","import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { BackgroundLayer, BackgroundLayerOptions } from './background-layer';\n\n/\n 点位背景插件\n */\nexport const createBackgroundPlugin = definePluginCreator<BackgroundLayerOptions>({\n onInit: (ctx, opts) => {\n ctx.playground.registerLayer(BackgroundLayer, opts);\n },\n});\n"],"mappings":"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","names":["import_core"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/background-plugin",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -18,8 +18,8 @@
   "dependencies": {
     "inversify": "^6.0.1",
     "reflect-metadata": "~0.2.2",
-    "@flowgram.ai/utils": "0.2.14",
-    "@flowgram.ai/core": "0.2.14"
+    "@flowgram.ai/core": "0.2.15",
+    "@flowgram.ai/utils": "0.2.15"
   },
   "devDependencies": {
     "@types/react": "^18",
@@ -29,8 +29,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.14",
-    "@flowgram.ai/ts-config": "0.2.14"
+    "@flowgram.ai/eslint-config": "0.2.15",
+    "@flowgram.ai/ts-config": "0.2.15"
   },
   "peerDependencies": {
     "react": ">=16.8",