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

package/dist/esm/index.js

@@ -0,0 +1,144 @@
+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 { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from "@flowgram.ai/core";
+import { domUtils } from "@flowgram.ai/utils";
+var PATTERN_PREFIX = "gedit-background-pattern-";
+var RENDER_SIZE = 20;
+var DOT_SIZE = 1;
+var id = 0;
+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 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";
+  }
+  /**
+   * 最小单元格大小
+   */
+  getScaleUnit() {
+    const { zoom } = this;
+    return {
+      realSize: RENDER_SIZE,
+      // 一个单元格代表的真实大小
+      renderSize: Math.round(RENDER_SIZE * 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);
+    this.setSVGStyle(this.grid, {
+      width: viewBoxWidth,
+      height: viewBoxHeight,
+      left: SCALE_WIDTH - scrollXDelta - mod,
+      top: SCALE_WIDTH - scrollYDelta - mod
+    });
+  }
+  /**
+   * 绘制网格
+   */
+  drawGrid(unit) {
+    const minor = unit.renderSize;
+    if (!this.grid) {
+      return;
+    }
+    const patternSize = DOT_SIZE * this.zoom;
+    const newContent = `
+    <svg width="100%" height="100%">
+      <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
+        <circle
+          cx="${patternSize}"
+          cy="${patternSize}"
+          r="${patternSize}"
+          stroke="#eceeef"
+          fill-opacity="0.5"
+        />
+      </pattern>
+      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
+    </svg>`;
+    this.grid.innerHTML = newContent;
+  }
+  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({
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(BackgroundLayer, opts);
+  }
+});
+export {
+  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":["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":[]}

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+
+interface BackgroundScaleUnit {
+    realSize: number;
+    renderSize: number;
+    zoom: number;
+}
+interface BackgroundLayerOptions {
+}
+/**
+ * dot 网格背景
+ */
+declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
+    static type: string;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    private _patternId;
+    node: HTMLDivElement;
+    grid: HTMLElement;
+    /**
+     * 当前缩放比
+     */
+    get zoom(): number;
+    onReady(): void;
+    /**
+     * 最小单元格大小
+     */
+    getScaleUnit(): BackgroundScaleUnit;
+    /**
+     * 绘制
+     */
+    autorun(): void;
+    /**
+     * 绘制网格
+     */
+    protected drawGrid(unit: BackgroundScaleUnit): 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 { BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+
+interface BackgroundScaleUnit {
+    realSize: number;
+    renderSize: number;
+    zoom: number;
+}
+interface BackgroundLayerOptions {
+}
+/**
+ * dot 网格背景
+ */
+declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
+    static type: string;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    private _patternId;
+    node: HTMLDivElement;
+    grid: HTMLElement;
+    /**
+     * 当前缩放比
+     */
+    get zoom(): number;
+    onReady(): void;
+    /**
+     * 最小单元格大小
+     */
+    getScaleUnit(): BackgroundScaleUnit;
+    /**
+     * 绘制
+     */
+    autorun(): void;
+    /**
+     * 绘制网格
+     */
+    protected drawGrid(unit: BackgroundScaleUnit): 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 { BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };

package/dist/index.js

@@ -0,0 +1,169 @@
+"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, {
+  BackgroundLayer: () => BackgroundLayer,
+  createBackgroundPlugin: () => createBackgroundPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/background-layer.tsx
+var import_core = require("@flowgram.ai/core");
+var import_utils = require("@flowgram.ai/utils");
+var PATTERN_PREFIX = "gedit-background-pattern-";
+var RENDER_SIZE = 20;
+var DOT_SIZE = 1;
+var id = 0;
+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 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";
+  }
+  /**
+   * 最小单元格大小
+   */
+  getScaleUnit() {
+    const { zoom } = this;
+    return {
+      realSize: RENDER_SIZE,
+      // 一个单元格代表的真实大小
+      renderSize: Math.round(RENDER_SIZE * 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);
+    this.setSVGStyle(this.grid, {
+      width: viewBoxWidth,
+      height: viewBoxHeight,
+      left: import_core.SCALE_WIDTH - scrollXDelta - mod,
+      top: import_core.SCALE_WIDTH - scrollYDelta - mod
+    });
+  }
+  /**
+   * 绘制网格
+   */
+  drawGrid(unit) {
+    const minor = unit.renderSize;
+    if (!this.grid) {
+      return;
+    }
+    const patternSize = DOT_SIZE * this.zoom;
+    const newContent = `
+    <svg width="100%" height="100%">
+      <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
+        <circle
+          cx="${patternSize}"
+          cy="${patternSize}"
+          r="${patternSize}"
+          stroke="#eceeef"
+          fill-opacity="0.5"
+        />
+      </pattern>
+      <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
+    </svg>`;
+    this.grid.innerHTML = newContent;
+  }
+  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)({
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(BackgroundLayer, opts);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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":["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"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@flowgram.ai/background-plugin",
+  "version": "0.1.0-alpha.2",
+  "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.2",
+    "@flowgram.ai/utils": "0.1.0-alpha.2"
+  },
+  "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.2",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.2"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "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"
+  }
+}