@flowgram.ai/background-plugin 0.1.0

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
  1. package/dist/esm/index.js +144 -0
  2. package/dist/esm/index.js.map +1 -0
  3. package/dist/index.d.mts +56 -0
  4. package/dist/index.d.ts +56 -0
  5. package/dist/index.js +169 -0
  6. package/dist/index.js.map +1 -0
  7. package/package.json +46 -0
package/dist/esm/index.js ADDED
@@ -0,0 +1,144 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __decorateClass = (decorators, target, key, kind) => {
4
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
5
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
6
+ if (decorator = decorators[i])
7
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
8
+ if (kind && result) __defProp(target, key, result);
9
+ return result;
10
+ };
11
+
12
+ // src/background-layer.tsx
13
+ import { Layer, observeEntity, PlaygroundConfigEntity, SCALE_WIDTH } from "@flowgram.ai/core";
14
+ import { domUtils } from "@flowgram.ai/utils";
15
+ var PATTERN_PREFIX = "gedit-background-pattern-";
16
+ var RENDER_SIZE = 20;
17
+ var DOT_SIZE = 1;
18
+ var id = 0;
19
+ var BackgroundLayer = class extends Layer {
20
+ constructor() {
21
+ super(...arguments);
22
+ this._patternId = `${PATTERN_PREFIX}${id++}`;
23
+ this.node = domUtils.createDivWithClass("gedit-flow-background-layer");
24
+ this.grid = document.createElement("div");
25
+ }
26
+ /**
27
+ * 当前缩放比
28
+ */
29
+ get zoom() {
30
+ return this.config.finalScale;
31
+ }
32
+ onReady() {
33
+ const { firstChild } = this.pipelineNode;
34
+ this.pipelineNode.insertBefore(this.node, firstChild);
35
+ this.playgroundConfigEntity.updateConfig({
36
+ minZoom: 0.1,
37
+ maxZoom: 2
38
+ });
39
+ this.grid.style.zIndex = "-1";
40
+ this.grid.style.position = "relative";
41
+ this.node.appendChild(this.grid);
42
+ this.grid.className = "gedit-grid-svg";
43
+ }
44
+ /**
45
+ * 最小单元格大小
46
+ */
47
+ getScaleUnit() {
48
+ const { zoom } = this;
49
+ return {
50
+ realSize: RENDER_SIZE,
51
+ // 一个单元格代表的真实大小
52
+ renderSize: Math.round(RENDER_SIZE * zoom * 100) / 100,
53
+ // 一个单元格渲染的大小值
54
+ zoom
55
+ // 缩放比
56
+ };
57
+ }
58
+ /**
59
+ * 绘制
60
+ */
61
+ autorun() {
62
+ const playgroundConfig = this.playgroundConfigEntity.config;
63
+ const scaleUnit = this.getScaleUnit();
64
+ const mod = scaleUnit.renderSize * 10;
65
+ const viewBoxWidth = playgroundConfig.width + mod * 2;
66
+ const viewBoxHeight = playgroundConfig.height + mod * 2;
67
+ const { scrollX } = playgroundConfig;
68
+ const { scrollY } = playgroundConfig;
69
+ const scrollXDelta = this.getScrollDelta(scrollX, mod);
70
+ const scrollYDelta = this.getScrollDelta(scrollY, mod);
71
+ domUtils.setStyle(this.node, {
72
+ left: scrollX - SCALE_WIDTH,
73
+ top: scrollY - SCALE_WIDTH
74
+ });
75
+ this.drawGrid(scaleUnit);
76
+ this.setSVGStyle(this.grid, {
77
+ width: viewBoxWidth,
78
+ height: viewBoxHeight,
79
+ left: SCALE_WIDTH - scrollXDelta - mod,
80
+ top: SCALE_WIDTH - scrollYDelta - mod
81
+ });
82
+ }
83
+ /**
84
+ * 绘制网格
85
+ */
86
+ drawGrid(unit) {
87
+ const minor = unit.renderSize;
88
+ if (!this.grid) {
89
+ return;
90
+ }
91
+ const patternSize = DOT_SIZE * this.zoom;
92
+ const newContent = `
93
+ <svg width="100%" height="100%">
94
+ <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
95
+ <circle
96
+ cx="${patternSize}"
97
+ cy="${patternSize}"
98
+ r="${patternSize}"
99
+ stroke="#eceeef"
100
+ fill-opacity="0.5"
101
+ />
102
+ </pattern>
103
+ <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
104
+ </svg>`;
105
+ this.grid.innerHTML = newContent;
106
+ }
107
+ setSVGStyle(svgElement, style) {
108
+ if (!svgElement) {
109
+ return;
110
+ }
111
+ svgElement.style.width = `${style.width}px`;
112
+ svgElement.style.height = `${style.height}px`;
113
+ svgElement.style.left = `${style.left}px`;
114
+ svgElement.style.top = `${style.top}px`;
115
+ }
116
+ /**
117
+ * 获取相对滚动距离
118
+ * @param realScroll
119
+ * @param mod
120
+ */
121
+ getScrollDelta(realScroll, mod) {
122
+ if (realScroll >= 0) {
123
+ return realScroll % mod;
124
+ }
125
+ return mod - Math.abs(realScroll) % mod;
126
+ }
127
+ };
128
+ BackgroundLayer.type = "WorkflowBackgroundLayer";
129
+ __decorateClass([
130
+ observeEntity(PlaygroundConfigEntity)
131
+ ], BackgroundLayer.prototype, "playgroundConfigEntity", 2);
132
+
133
+ // src/create-background-plugin.ts
134
+ import { definePluginCreator } from "@flowgram.ai/core";
135
+ var createBackgroundPlugin = definePluginCreator({
136
+ onInit: (ctx, opts) => {
137
+ ctx.playground.registerLayer(BackgroundLayer, opts);
138
+ }
139
+ });
140
+ export {
141
+ BackgroundLayer,
142
+ createBackgroundPlugin
143
+ };
144
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +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":[]}
package/dist/index.d.mts ADDED
@@ -0,0 +1,56 @@
1
+ import * as _flowgram_ai_core from '@flowgram.ai/core';
2
+ import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
3
+
4
+ interface BackgroundScaleUnit {
5
+ realSize: number;
6
+ renderSize: number;
7
+ zoom: number;
8
+ }
9
+ interface BackgroundLayerOptions {
10
+ }
11
+ /**
12
+ * dot 网格背景
13
+ */
14
+ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
15
+ static type: string;
16
+ protected playgroundConfigEntity: PlaygroundConfigEntity;
17
+ private _patternId;
18
+ node: HTMLDivElement;
19
+ grid: HTMLElement;
20
+ /**
21
+ * 当前缩放比
22
+ */
23
+ get zoom(): number;
24
+ onReady(): void;
25
+ /**
26
+ * 最小单元格大小
27
+ */
28
+ getScaleUnit(): BackgroundScaleUnit;
29
+ /**
30
+ * 绘制
31
+ */
32
+ autorun(): void;
33
+ /**
34
+ * 绘制网格
35
+ */
36
+ protected drawGrid(unit: BackgroundScaleUnit): void;
37
+ protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
38
+ width: number;
39
+ height: number;
40
+ left: number;
41
+ top: number;
42
+ }): void;
43
+ /**
44
+ * 获取相对滚动距离
45
+ * @param realScroll
46
+ * @param mod
47
+ */
48
+ protected getScrollDelta(realScroll: number, mod: number): number;
49
+ }
50
+
51
+ /**
52
+ * 点位背景插件
53
+ */
54
+ declare const createBackgroundPlugin: _flowgram_ai_core.PluginCreator<BackgroundLayerOptions>;
55
+
56
+ export { BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };
package/dist/index.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ import * as _flowgram_ai_core from '@flowgram.ai/core';
2
+ import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
3
+
4
+ interface BackgroundScaleUnit {
5
+ realSize: number;
6
+ renderSize: number;
7
+ zoom: number;
8
+ }
9
+ interface BackgroundLayerOptions {
10
+ }
11
+ /**
12
+ * dot 网格背景
13
+ */
14
+ declare class BackgroundLayer extends Layer<BackgroundLayerOptions> {
15
+ static type: string;
16
+ protected playgroundConfigEntity: PlaygroundConfigEntity;
17
+ private _patternId;
18
+ node: HTMLDivElement;
19
+ grid: HTMLElement;
20
+ /**
21
+ * 当前缩放比
22
+ */
23
+ get zoom(): number;
24
+ onReady(): void;
25
+ /**
26
+ * 最小单元格大小
27
+ */
28
+ getScaleUnit(): BackgroundScaleUnit;
29
+ /**
30
+ * 绘制
31
+ */
32
+ autorun(): void;
33
+ /**
34
+ * 绘制网格
35
+ */
36
+ protected drawGrid(unit: BackgroundScaleUnit): void;
37
+ protected setSVGStyle(svgElement: HTMLElement | undefined, style: {
38
+ width: number;
39
+ height: number;
40
+ left: number;
41
+ top: number;
42
+ }): void;
43
+ /**
44
+ * 获取相对滚动距离
45
+ * @param realScroll
46
+ * @param mod
47
+ */
48
+ protected getScrollDelta(realScroll: number, mod: number): number;
49
+ }
50
+
51
+ /**
52
+ * 点位背景插件
53
+ */
54
+ declare const createBackgroundPlugin: _flowgram_ai_core.PluginCreator<BackgroundLayerOptions>;
55
+
56
+ export { BackgroundLayer, type BackgroundLayerOptions, createBackgroundPlugin };
package/dist/index.js ADDED
@@ -0,0 +1,169 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var __decorateClass = (decorators, target, key, kind) => {
20
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
21
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
22
+ if (decorator = decorators[i])
23
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
24
+ if (kind && result) __defProp(target, key, result);
25
+ return result;
26
+ };
27
+
28
+ // src/index.ts
29
+ var src_exports = {};
30
+ __export(src_exports, {
31
+ BackgroundLayer: () => BackgroundLayer,
32
+ createBackgroundPlugin: () => createBackgroundPlugin
33
+ });
34
+ module.exports = __toCommonJS(src_exports);
35
+
36
+ // src/background-layer.tsx
37
+ var import_core = require("@flowgram.ai/core");
38
+ var import_utils = require("@flowgram.ai/utils");
39
+ var PATTERN_PREFIX = "gedit-background-pattern-";
40
+ var RENDER_SIZE = 20;
41
+ var DOT_SIZE = 1;
42
+ var id = 0;
43
+ var BackgroundLayer = class extends import_core.Layer {
44
+ constructor() {
45
+ super(...arguments);
46
+ this._patternId = `${PATTERN_PREFIX}${id++}`;
47
+ this.node = import_utils.domUtils.createDivWithClass("gedit-flow-background-layer");
48
+ this.grid = document.createElement("div");
49
+ }
50
+ /**
51
+ * 当前缩放比
52
+ */
53
+ get zoom() {
54
+ return this.config.finalScale;
55
+ }
56
+ onReady() {
57
+ const { firstChild } = this.pipelineNode;
58
+ this.pipelineNode.insertBefore(this.node, firstChild);
59
+ this.playgroundConfigEntity.updateConfig({
60
+ minZoom: 0.1,
61
+ maxZoom: 2
62
+ });
63
+ this.grid.style.zIndex = "-1";
64
+ this.grid.style.position = "relative";
65
+ this.node.appendChild(this.grid);
66
+ this.grid.className = "gedit-grid-svg";
67
+ }
68
+ /**
69
+ * 最小单元格大小
70
+ */
71
+ getScaleUnit() {
72
+ const { zoom } = this;
73
+ return {
74
+ realSize: RENDER_SIZE,
75
+ // 一个单元格代表的真实大小
76
+ renderSize: Math.round(RENDER_SIZE * zoom * 100) / 100,
77
+ // 一个单元格渲染的大小值
78
+ zoom
79
+ // 缩放比
80
+ };
81
+ }
82
+ /**
83
+ * 绘制
84
+ */
85
+ autorun() {
86
+ const playgroundConfig = this.playgroundConfigEntity.config;
87
+ const scaleUnit = this.getScaleUnit();
88
+ const mod = scaleUnit.renderSize * 10;
89
+ const viewBoxWidth = playgroundConfig.width + mod * 2;
90
+ const viewBoxHeight = playgroundConfig.height + mod * 2;
91
+ const { scrollX } = playgroundConfig;
92
+ const { scrollY } = playgroundConfig;
93
+ const scrollXDelta = this.getScrollDelta(scrollX, mod);
94
+ const scrollYDelta = this.getScrollDelta(scrollY, mod);
95
+ import_utils.domUtils.setStyle(this.node, {
96
+ left: scrollX - import_core.SCALE_WIDTH,
97
+ top: scrollY - import_core.SCALE_WIDTH
98
+ });
99
+ this.drawGrid(scaleUnit);
100
+ this.setSVGStyle(this.grid, {
101
+ width: viewBoxWidth,
102
+ height: viewBoxHeight,
103
+ left: import_core.SCALE_WIDTH - scrollXDelta - mod,
104
+ top: import_core.SCALE_WIDTH - scrollYDelta - mod
105
+ });
106
+ }
107
+ /**
108
+ * 绘制网格
109
+ */
110
+ drawGrid(unit) {
111
+ const minor = unit.renderSize;
112
+ if (!this.grid) {
113
+ return;
114
+ }
115
+ const patternSize = DOT_SIZE * this.zoom;
116
+ const newContent = `
117
+ <svg width="100%" height="100%">
118
+ <pattern id="${this._patternId}" width="${minor}" height="${minor}" patternUnits="userSpaceOnUse">
119
+ <circle
120
+ cx="${patternSize}"
121
+ cy="${patternSize}"
122
+ r="${patternSize}"
123
+ stroke="#eceeef"
124
+ fill-opacity="0.5"
125
+ />
126
+ </pattern>
127
+ <rect width="100%" height="100%" fill="url(#${this._patternId})"/>
128
+ </svg>`;
129
+ this.grid.innerHTML = newContent;
130
+ }
131
+ setSVGStyle(svgElement, style) {
132
+ if (!svgElement) {
133
+ return;
134
+ }
135
+ svgElement.style.width = `${style.width}px`;
136
+ svgElement.style.height = `${style.height}px`;
137
+ svgElement.style.left = `${style.left}px`;
138
+ svgElement.style.top = `${style.top}px`;
139
+ }
140
+ /**
141
+ * 获取相对滚动距离
142
+ * @param realScroll
143
+ * @param mod
144
+ */
145
+ getScrollDelta(realScroll, mod) {
146
+ if (realScroll >= 0) {
147
+ return realScroll % mod;
148
+ }
149
+ return mod - Math.abs(realScroll) % mod;
150
+ }
151
+ };
152
+ BackgroundLayer.type = "WorkflowBackgroundLayer";
153
+ __decorateClass([
154
+ (0, import_core.observeEntity)(import_core.PlaygroundConfigEntity)
155
+ ], BackgroundLayer.prototype, "playgroundConfigEntity", 2);
156
+
157
+ // src/create-background-plugin.ts
158
+ var import_core2 = require("@flowgram.ai/core");
159
+ var createBackgroundPlugin = (0, import_core2.definePluginCreator)({
160
+ onInit: (ctx, opts) => {
161
+ ctx.playground.registerLayer(BackgroundLayer, opts);
162
+ }
163
+ });
164
+ // Annotate the CommonJS export names for ESM import in node:
165
+ 0 && (module.exports = {
166
+ BackgroundLayer,
167
+ createBackgroundPlugin
168
+ });
169
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +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"]}
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@flowgram.ai/background-plugin",
3
+ "version": "0.1.0",
4
+ "license": "MIT",
5
+ "exports": {
6
+ "types": "./dist/index.d.ts",
7
+ "import": "./dist/esm/index.js",
8
+ "require": "./dist/index.js"
9
+ },
10
+ "main": "./dist/index.js",
11
+ "module": "./dist/esm/index.js",
12
+ "types": "./dist/index.d.ts",
13
+ "files": [
14
+ "dist"
15
+ ],
16
+ "dependencies": {
17
+ "inversify": "^6.0.1",
18
+ "@flowgram.ai/core": "0.1.0",
19
+ "@flowgram.ai/utils": "0.1.0"
20
+ },
21
+ "devDependencies": {
22
+ "@types/react": "^18",
23
+ "@types/react-dom": "^18",
24
+ "@vitest/coverage-v8": "^0.32.0",
25
+ "eslint": "^8.54.0",
26
+ "tsup": "^8.0.1",
27
+ "typescript": "^5.0.4",
28
+ "vitest": "^0.34.6",
29
+ "@flowgram.ai/ts-config": "0.1.0",
30
+ "@flowgram.ai/eslint-config": "0.1.0"
31
+ },
32
+ "peerDependencies": {
33
+ "react": ">=17",
34
+ "react-dom": ">=17"
35
+ },
36
+ "scripts": {
37
+ "build": "npm run build:fast -- --dts-resolve",
38
+ "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
39
+ "build:watch": "npm run build:fast -- --dts-resolve",
40
+ "clean": "rimraf dist",
41
+ "test": "exit 0",
42
+ "test:cov": "exit 0",
43
+ "ts-check": "tsc --noEmit",
44
+ "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
45
+ }
46
+ }