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

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.
package/dist/index.js ADDED
@@ -0,0 +1,651 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var __decorateClass = (decorators, target, key, kind) => {
30
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
31
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
32
+ if (decorator = decorators[i])
33
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
34
+ if (kind && result) __defProp(target, key, result);
35
+ return result;
36
+ };
37
+
38
+ // src/index.ts
39
+ var src_exports = {};
40
+ __export(src_exports, {
41
+ FlowMinimapLayer: () => FlowMinimapLayer,
42
+ FlowMinimapService: () => FlowMinimapService,
43
+ MinimapDefaultCanvasStyle: () => MinimapDefaultCanvasStyle,
44
+ MinimapDefaultInactiveStyle: () => MinimapDefaultInactiveStyle,
45
+ MinimapDefaultOptions: () => MinimapDefaultOptions,
46
+ MinimapRender: () => MinimapRender,
47
+ createMinimapPlugin: () => createMinimapPlugin
48
+ });
49
+ module.exports = __toCommonJS(src_exports);
50
+
51
+ // src/component.tsx
52
+ var import_react = __toESM(require("react"));
53
+
54
+ // src/constant.ts
55
+ var MinimapDefaultCanvasStyle = {
56
+ canvasWidth: 250,
57
+ canvasHeight: 250,
58
+ canvasPadding: 50,
59
+ canvasBackground: "rgba(242, 243, 245, 1)",
60
+ canvasBorderRadius: 10,
61
+ viewportBackground: "rgba(255, 255, 255, 1)",
62
+ viewportBorderRadius: 4,
63
+ viewportBorderColor: "rgba(6, 7, 9, 0.10)",
64
+ viewportBorderWidth: 1,
65
+ viewportBorderDashLength: void 0,
66
+ nodeColor: "rgba(0, 0, 0, 0.10)",
67
+ nodeBorderRadius: 2,
68
+ nodeBorderWidth: 0.145,
69
+ nodeBorderColor: "rgba(6, 7, 9, 0.10)",
70
+ overlayColor: "rgba(255, 255, 255, 0.55)"
71
+ };
72
+ var MinimapDefaultInactiveStyle = {
73
+ scale: 0.7,
74
+ opacity: 1,
75
+ translateX: 15,
76
+ translateY: 15
77
+ };
78
+ var MinimapDefaultOptions = {
79
+ canvasStyle: MinimapDefaultCanvasStyle,
80
+ canvasClassName: "gedit-minimap-canvas",
81
+ enableActiveDebounce: false,
82
+ enableInactiveDebounce: true,
83
+ enableDisplayAllNodes: false,
84
+ activeDebounceTime: 0,
85
+ inactiveDebounceTime: 5
86
+ };
87
+
88
+ // src/component.tsx
89
+ var MinimapRender = (props) => {
90
+ const {
91
+ service,
92
+ panelStyles = {},
93
+ containerStyles = {},
94
+ inactiveStyle: customInactiveStyle = {}
95
+ } = props;
96
+ const inactiveStyle = {
97
+ ...MinimapDefaultInactiveStyle,
98
+ ...customInactiveStyle
99
+ };
100
+ const panelRef = (0, import_react.useRef)(null);
101
+ const [activated, setActivated] = (0, import_react.useState)(false);
102
+ (0, import_react.useEffect)(() => {
103
+ const canvasContainer = panelRef.current;
104
+ if (canvasContainer && service.canvas) {
105
+ canvasContainer.appendChild(service.canvas);
106
+ }
107
+ const disposer = service.onActive((activate) => {
108
+ setActivated(activate);
109
+ });
110
+ return () => {
111
+ disposer.dispose();
112
+ };
113
+ }, []);
114
+ const scale = activated ? 1 : inactiveStyle.scale;
115
+ const opacity = activated ? 1 : inactiveStyle.opacity;
116
+ const translateX = activated ? 0 : inactiveStyle.translateX;
117
+ const translateY = activated ? 0 : inactiveStyle.translateY;
118
+ return /* @__PURE__ */ import_react.default.createElement(
119
+ "div",
120
+ {
121
+ className: "minimap-container",
122
+ style: {
123
+ position: "fixed",
124
+ right: 30,
125
+ bottom: 70,
126
+ transition: "all 0.3s ease",
127
+ // 添加过渡效果
128
+ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
129
+ opacity,
130
+ transformOrigin: "bottom right",
131
+ // 设置变换的原点
132
+ ...containerStyles
133
+ }
134
+ },
135
+ /* @__PURE__ */ import_react.default.createElement(
136
+ "div",
137
+ {
138
+ className: "minimap-panel",
139
+ style: {
140
+ display: "flex",
141
+ width: "100%",
142
+ height: "100%",
143
+ borderRadius: "10px",
144
+ backgroundColor: "rgba(255, 255, 255, 1)",
145
+ border: "0.572px solid rgba(6, 7, 9, 0.10)",
146
+ overflow: "hidden",
147
+ boxShadow: "0px 2.289px 6.867px 0px rgba(0, 0, 0, 0.08), 0px 4.578px 13.733px 0px rgba(0, 0, 0, 0.04)",
148
+ boxSizing: "border-box",
149
+ padding: 8,
150
+ ...panelStyles
151
+ },
152
+ "data-flow-editor-selectable": "false",
153
+ ref: panelRef,
154
+ onMouseEnter: () => {
155
+ service.setActivate(true);
156
+ },
157
+ onMouseLeave: () => {
158
+ service.setActivate(false);
159
+ },
160
+ onTouchStartCapture: () => {
161
+ service.setActivate(true);
162
+ },
163
+ onTouchEndCapture: () => {
164
+ service.setActivate(false);
165
+ }
166
+ }
167
+ )
168
+ );
169
+ };
170
+
171
+ // src/create-plugin.ts
172
+ var import_core3 = require("@flowgram.ai/core");
173
+
174
+ // src/service.ts
175
+ var import_lodash = require("lodash");
176
+ var import_inversify = require("inversify");
177
+ var import_utils = require("@flowgram.ai/utils");
178
+ var import_document = require("@flowgram.ai/document");
179
+ var import_document2 = require("@flowgram.ai/document");
180
+ var import_document3 = require("@flowgram.ai/document");
181
+ var import_core = require("@flowgram.ai/core");
182
+
183
+ // src/draw.ts
184
+ var MinimapDraw;
185
+ ((MinimapDraw2) => {
186
+ const isRectValid = (rect) => rect.width > 0 && rect.height > 0;
187
+ MinimapDraw2.clear = (params) => {
188
+ const { canvas, context } = params;
189
+ context.clearRect(0, 0, canvas.width, canvas.height);
190
+ };
191
+ MinimapDraw2.backgroundColor = (params) => {
192
+ const { canvas, context, color } = params;
193
+ context.fillStyle = color;
194
+ context.fillRect(0, 0, canvas.width, canvas.height);
195
+ };
196
+ MinimapDraw2.rectangle = (params) => {
197
+ const { context, rect, color } = params;
198
+ if (!isRectValid(rect)) {
199
+ return;
200
+ }
201
+ context.fillStyle = color;
202
+ context.fillRect(rect.x, rect.y, rect.width, rect.height);
203
+ };
204
+ MinimapDraw2.roundRectangle = (params) => {
205
+ const { context, rect, color, radius, borderColor, borderDashLength, borderWidth = 0 } = params;
206
+ const { x, y, width, height } = rect;
207
+ if (!isRectValid(rect)) {
208
+ return;
209
+ }
210
+ context.beginPath();
211
+ const drawRoundedRectPath = () => {
212
+ context.moveTo(x + radius, y);
213
+ context.lineTo(x + width - radius, y);
214
+ context.quadraticCurveTo(x + width, y, x + width, y + radius);
215
+ context.lineTo(x + width, y + height - radius);
216
+ context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
217
+ context.lineTo(x + radius, y + height);
218
+ context.quadraticCurveTo(x, y + height, x, y + height - radius);
219
+ context.lineTo(x, y + radius);
220
+ context.quadraticCurveTo(x, y, x + radius, y);
221
+ context.closePath();
222
+ };
223
+ drawRoundedRectPath();
224
+ context.fillStyle = color;
225
+ context.fill();
226
+ if (borderColor && borderWidth > 0) {
227
+ context.strokeStyle = borderColor;
228
+ context.lineWidth = borderWidth;
229
+ if (borderDashLength) {
230
+ context.setLineDash([borderDashLength, borderDashLength]);
231
+ } else {
232
+ context.setLineDash([]);
233
+ }
234
+ context.stroke();
235
+ context.setLineDash([]);
236
+ }
237
+ };
238
+ MinimapDraw2.overlay = (params) => {
239
+ const { canvas, context, offset, scale, rect, color } = params;
240
+ if (!isRectValid(rect)) {
241
+ return;
242
+ }
243
+ context.fillStyle = color;
244
+ context.fillRect(0, 0, canvas.width, (rect.y + offset.y) * scale);
245
+ context.fillRect(
246
+ 0,
247
+ (rect.y + rect.height + offset.y) * scale,
248
+ canvas.width,
249
+ canvas.height - (rect.y + rect.height + offset.y) * scale
250
+ );
251
+ context.fillRect(
252
+ 0,
253
+ (rect.y + offset.y) * scale,
254
+ (rect.x + offset.x) * scale,
255
+ rect.height * scale
256
+ );
257
+ context.fillRect(
258
+ (rect.x + rect.width + offset.x) * scale,
259
+ (rect.y + offset.y) * scale,
260
+ canvas.width - (rect.x + rect.width + offset.x) * scale,
261
+ rect.height * scale
262
+ );
263
+ };
264
+ })(MinimapDraw || (MinimapDraw = {}));
265
+
266
+ // src/service.ts
267
+ var FlowMinimapService = class {
268
+ constructor() {
269
+ this.onActive = (callback) => {
270
+ this.onActiveCallbacks.add(callback);
271
+ return {
272
+ dispose: () => {
273
+ this.onActiveCallbacks.delete(callback);
274
+ }
275
+ };
276
+ };
277
+ /**
278
+ * 触发渲染
279
+ */
280
+ this.render = this._render;
281
+ this.handleWheel = (event) => {
282
+ };
283
+ this.handleStartDrag = (event) => {
284
+ import_core.MouseTouchEvent.preventDefault(event);
285
+ event.stopPropagation();
286
+ const renderContext = this.createRenderContext();
287
+ const { viewRect, scale, offset } = renderContext;
288
+ const canvasRect = this.canvas.getBoundingClientRect();
289
+ const { clientX, clientY } = import_core.MouseTouchEvent.getEventCoord(event);
290
+ const mousePoint = {
291
+ x: clientX - canvasRect.left,
292
+ y: clientY - canvasRect.top
293
+ };
294
+ const viewRectOnCanvas = this.rectOnCanvas({
295
+ rect: viewRect,
296
+ scale,
297
+ offset
298
+ });
299
+ if (!this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
300
+ return;
301
+ }
302
+ this.isDragging = true;
303
+ this.dragStart = mousePoint;
304
+ document.addEventListener("mousemove", this.handleDragging);
305
+ document.addEventListener("mouseup", this.handleEndDrag);
306
+ document.addEventListener("touchmove", this.handleDragging, { passive: false });
307
+ document.addEventListener("touchend", this.handleEndDrag);
308
+ document.addEventListener("touchcancel", this.handleEndDrag);
309
+ };
310
+ this.handleDragging = (event) => {
311
+ if (!this.isDragging || !this.dragStart) return;
312
+ import_core.MouseTouchEvent.preventDefault(event);
313
+ event.stopPropagation();
314
+ const renderContext = this.createRenderContext();
315
+ const { scale } = renderContext;
316
+ const canvasRect = this.canvas.getBoundingClientRect();
317
+ const { clientX, clientY } = import_core.MouseTouchEvent.getEventCoord(event);
318
+ const mouseX = clientX - canvasRect.left;
319
+ const mouseY = clientY - canvasRect.top;
320
+ const deltaX = (mouseX - this.dragStart.x) / scale;
321
+ const deltaY = (mouseY - this.dragStart.y) / scale;
322
+ this.updateScrollPosition(deltaX, deltaY);
323
+ this.dragStart = { x: mouseX, y: mouseY };
324
+ this.render();
325
+ };
326
+ this.handleEndDrag = (event) => {
327
+ import_core.MouseTouchEvent.preventDefault(event);
328
+ event.stopPropagation();
329
+ document.removeEventListener("mousemove", this.handleDragging);
330
+ document.removeEventListener("mouseup", this.handleEndDrag);
331
+ document.removeEventListener("touchmove", this.handleDragging);
332
+ document.removeEventListener("touchend", this.handleEndDrag);
333
+ document.removeEventListener("touchcancel", this.handleEndDrag);
334
+ this.isDragging = false;
335
+ this.dragStart = void 0;
336
+ this.setActivate(this.isMouseInCanvas(event));
337
+ };
338
+ this.handleCursor = (event) => {
339
+ if (!this.activated) return;
340
+ const renderContext = this.createRenderContext();
341
+ const { viewRect, scale, offset } = renderContext;
342
+ const canvasRect = this.canvas.getBoundingClientRect();
343
+ const mousePoint = {
344
+ x: event.clientX - canvasRect.left,
345
+ y: event.clientY - canvasRect.top
346
+ };
347
+ const viewRectOnCanvas = this.rectOnCanvas({
348
+ rect: viewRect,
349
+ scale,
350
+ offset
351
+ });
352
+ if (this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
353
+ this.canvas.style.cursor = "grab";
354
+ } else {
355
+ this.canvas.style.cursor = "default";
356
+ }
357
+ };
358
+ this.canvas = document.createElement("canvas");
359
+ this.context2D = this.canvas.getContext("2d");
360
+ this.initialized = !!this.context2D;
361
+ this.onActiveCallbacks = /* @__PURE__ */ new Set();
362
+ this.toDispose = new import_utils.DisposableCollection();
363
+ this.render = this._render;
364
+ this.activated = false;
365
+ this.isDragging = false;
366
+ }
367
+ init(options) {
368
+ this.options = MinimapDefaultOptions;
369
+ Object.assign(this.options, options);
370
+ this.setDebounce({
371
+ enableDebounce: this.options.enableInactiveDebounce,
372
+ debounceTime: this.options.inactiveDebounceTime
373
+ });
374
+ this.initStyle();
375
+ this.mountListener();
376
+ }
377
+ dispose() {
378
+ this.toDispose.dispose();
379
+ this.initialized = false;
380
+ this.activated = false;
381
+ this.removeEventListeners();
382
+ }
383
+ setActivate(activate) {
384
+ if (activate === this.activated) {
385
+ return;
386
+ }
387
+ if (!activate && this.isDragging) {
388
+ return;
389
+ }
390
+ this.activated = activate;
391
+ if (activate) {
392
+ this.setDebounce({
393
+ enableDebounce: this.options.enableActiveDebounce,
394
+ debounceTime: this.options.activeDebounceTime
395
+ });
396
+ this.addEventListeners();
397
+ } else {
398
+ this.setDebounce({
399
+ enableDebounce: this.options.enableInactiveDebounce,
400
+ debounceTime: this.options.inactiveDebounceTime
401
+ });
402
+ this.removeEventListeners();
403
+ }
404
+ this.render();
405
+ this.onActiveCallbacks.forEach((callback) => callback(activate));
406
+ }
407
+ initStyle() {
408
+ if (!this.initialized) {
409
+ return;
410
+ }
411
+ const { canvasClassName, canvasStyle } = this.options;
412
+ this.canvas.className = canvasClassName;
413
+ this.style = {
414
+ ...MinimapDefaultCanvasStyle,
415
+ ...canvasStyle
416
+ };
417
+ this.canvas.width = this.style.canvasWidth;
418
+ this.canvas.height = this.style.canvasHeight;
419
+ this.canvas.style.borderRadius = this.style.canvasBorderRadius ? `${this.style.canvasBorderRadius}px` : "unset";
420
+ }
421
+ setDebounce(params) {
422
+ const { enableDebounce, debounceTime } = params;
423
+ if (enableDebounce) {
424
+ this.render = (0, import_lodash.debounce)(this._render, debounceTime);
425
+ } else {
426
+ this.render = this._render;
427
+ }
428
+ }
429
+ _render() {
430
+ if (!this.initialized) {
431
+ return;
432
+ }
433
+ const renderContext = this.createRenderContext();
434
+ this.renderCanvas(renderContext);
435
+ }
436
+ createRenderContext() {
437
+ const { canvas, context2D, nodes } = this;
438
+ const nodeTransforms = this.nodeTransforms(nodes);
439
+ const nodeRects = nodeTransforms.map((transform) => transform.bounds);
440
+ const viewRect = this.viewRect();
441
+ const renderRect = this.renderRect(nodeRects).withPadding({
442
+ top: this.style.canvasPadding,
443
+ bottom: this.style.canvasPadding,
444
+ left: this.style.canvasPadding,
445
+ right: this.style.canvasPadding
446
+ });
447
+ const canvasRect = import_utils.Rectangle.enlarge([viewRect, renderRect]);
448
+ const { scale, offset } = this.calculateScaleAndOffset({ canvasRect });
449
+ return {
450
+ canvas,
451
+ context2D,
452
+ nodeRects,
453
+ canvasRect,
454
+ viewRect,
455
+ renderRect,
456
+ scale,
457
+ offset
458
+ };
459
+ }
460
+ renderCanvas(renderContext) {
461
+ const { canvas, context2D, nodeRects, viewRect, scale, offset } = renderContext;
462
+ MinimapDraw.clear({ canvas, context: context2D });
463
+ MinimapDraw.backgroundColor({
464
+ canvas,
465
+ context: context2D,
466
+ color: this.style.canvasBackground
467
+ });
468
+ MinimapDraw.roundRectangle({
469
+ context: context2D,
470
+ rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
471
+ color: this.style.viewportBackground,
472
+ radius: this.style.viewportBorderRadius
473
+ });
474
+ nodeRects.forEach((nodeRect) => {
475
+ MinimapDraw.roundRectangle({
476
+ context: context2D,
477
+ rect: this.rectOnCanvas({ rect: nodeRect, scale, offset }),
478
+ color: this.style.nodeColor,
479
+ radius: this.style.nodeBorderRadius,
480
+ borderWidth: this.style.nodeBorderWidth,
481
+ borderColor: this.style.nodeBorderColor
482
+ });
483
+ });
484
+ MinimapDraw.roundRectangle({
485
+ context: context2D,
486
+ rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
487
+ color: "rgba(255, 255, 255, 0)",
488
+ radius: this.style.viewportBorderRadius,
489
+ borderColor: this.style.viewportBorderColor,
490
+ borderWidth: this.style.viewportBorderWidth,
491
+ borderDashLength: this.style.viewportBorderDashLength
492
+ });
493
+ MinimapDraw.overlay({
494
+ canvas,
495
+ context: context2D,
496
+ offset,
497
+ scale,
498
+ rect: viewRect,
499
+ color: this.style.overlayColor
500
+ });
501
+ }
502
+ calculateScaleAndOffset(params) {
503
+ const { canvasRect } = params;
504
+ const { width: canvasWidth, height: canvasHeight } = this.canvas;
505
+ const scaleX = canvasWidth / canvasRect.width;
506
+ const scaleY = canvasHeight / canvasRect.height;
507
+ const scale = Math.min(scaleX, scaleY);
508
+ const scaledWidth = canvasRect.width * scale;
509
+ const scaledHeight = canvasRect.height * scale;
510
+ const centerOffsetX = (canvasWidth - scaledWidth) / 2;
511
+ const centerOffsetY = (canvasHeight - scaledHeight) / 2;
512
+ const offset = {
513
+ x: centerOffsetX / scale - canvasRect.x,
514
+ y: centerOffsetY / scale - canvasRect.y
515
+ };
516
+ return { scale, offset };
517
+ }
518
+ get nodes() {
519
+ return this.document.getAllNodes().filter((node) => {
520
+ if (node.hidden) return false;
521
+ if (node.flowNodeType === import_document2.FlowNodeBaseType.ROOT) return;
522
+ if (!this.options.enableDisplayAllNodes && node.parent && node.parent.flowNodeType !== import_document2.FlowNodeBaseType.ROOT)
523
+ return;
524
+ return true;
525
+ });
526
+ }
527
+ nodeTransforms(nodes) {
528
+ return nodes.map((node) => node.getData(import_document.FlowNodeTransformData)).filter(Boolean);
529
+ }
530
+ renderRect(rects) {
531
+ return import_utils.Rectangle.enlarge(rects);
532
+ }
533
+ viewRect() {
534
+ const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;
535
+ return new import_utils.Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);
536
+ }
537
+ mountListener() {
538
+ const entityManagerDisposer = this.entityManager.onEntityChange(() => this.render());
539
+ this.toDispose.push(entityManagerDisposer);
540
+ }
541
+ /** 计算画布坐标系下的矩形 */
542
+ rectOnCanvas(params) {
543
+ const { rect, scale, offset } = params;
544
+ return new import_utils.Rectangle(
545
+ (rect.x + offset.x) * scale,
546
+ (rect.y + offset.y) * scale,
547
+ rect.width * scale,
548
+ rect.height * scale
549
+ );
550
+ }
551
+ isPointInRect(params) {
552
+ const { point, rect } = params;
553
+ return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
554
+ }
555
+ addEventListeners() {
556
+ this.canvas.addEventListener("wheel", this.handleWheel);
557
+ this.canvas.addEventListener("mousedown", this.handleStartDrag);
558
+ this.canvas.addEventListener("touchstart", this.handleStartDrag, { passive: false });
559
+ this.canvas.addEventListener("mousemove", this.handleCursor);
560
+ }
561
+ removeEventListeners() {
562
+ this.canvas.removeEventListener("wheel", this.handleWheel);
563
+ this.canvas.removeEventListener("mousedown", this.handleStartDrag);
564
+ this.canvas.removeEventListener("touchstart", this.handleStartDrag);
565
+ this.canvas.removeEventListener("mousemove", this.handleCursor);
566
+ }
567
+ isMouseInCanvas(event) {
568
+ const canvasRect = this.canvas.getBoundingClientRect();
569
+ const { clientX, clientY } = import_core.MouseTouchEvent.getEventCoord(event);
570
+ return clientX >= canvasRect.left && clientX <= canvasRect.right && clientY >= canvasRect.top && clientY <= canvasRect.bottom;
571
+ }
572
+ updateScrollPosition(deltaX, deltaY) {
573
+ const { scrollX, scrollY, zoom } = this.playgroundConfig.config;
574
+ this.playgroundConfig.updateConfig({
575
+ scrollX: scrollX + deltaX * zoom,
576
+ scrollY: scrollY + deltaY * zoom
577
+ });
578
+ }
579
+ };
580
+ __decorateClass([
581
+ (0, import_inversify.inject)(import_document3.FlowDocument)
582
+ ], FlowMinimapService.prototype, "document", 2);
583
+ __decorateClass([
584
+ (0, import_inversify.inject)(import_core.EntityManager)
585
+ ], FlowMinimapService.prototype, "entityManager", 2);
586
+ __decorateClass([
587
+ (0, import_inversify.inject)(import_core.PlaygroundConfigEntity)
588
+ ], FlowMinimapService.prototype, "playgroundConfig", 2);
589
+ FlowMinimapService = __decorateClass([
590
+ (0, import_inversify.injectable)()
591
+ ], FlowMinimapService);
592
+
593
+ // src/layer.tsx
594
+ var import_react2 = __toESM(require("react"));
595
+ var import_inversify2 = require("inversify");
596
+ var import_core2 = require("@flowgram.ai/core");
597
+ var import_utils2 = require("@flowgram.ai/utils");
598
+ var FlowMinimapLayer = class extends import_core2.Layer {
599
+ constructor() {
600
+ super();
601
+ this.className = "gedit-minimap-layer gedit-playground-layer";
602
+ this.node = import_utils2.domUtils.createDivWithClass(this.className);
603
+ this.node.style.zIndex = "9999";
604
+ }
605
+ render() {
606
+ if (this.options.disableLayer) {
607
+ return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
608
+ }
609
+ return /* @__PURE__ */ import_react2.default.createElement(
610
+ MinimapRender,
611
+ {
612
+ service: this.service,
613
+ panelStyles: this.options.panelStyles,
614
+ containerStyles: this.options.containerStyles,
615
+ inactiveStyle: this.options.inactiveStyle
616
+ }
617
+ );
618
+ }
619
+ };
620
+ FlowMinimapLayer.type = "FlowMinimapLayer";
621
+ __decorateClass([
622
+ (0, import_inversify2.inject)(FlowMinimapService)
623
+ ], FlowMinimapLayer.prototype, "service", 2);
624
+ FlowMinimapLayer = __decorateClass([
625
+ (0, import_inversify2.injectable)()
626
+ ], FlowMinimapLayer);
627
+
628
+ // src/create-plugin.ts
629
+ var createMinimapPlugin = (0, import_core3.definePluginCreator)({
630
+ onBind: ({ bind }) => {
631
+ bind(FlowMinimapService).toSelf().inSingletonScope();
632
+ },
633
+ onInit: (ctx, opts) => {
634
+ ctx.playground.registerLayer(FlowMinimapLayer, opts);
635
+ ctx.get(FlowMinimapService).init(opts);
636
+ },
637
+ onDispose: (ctx) => {
638
+ ctx.get(FlowMinimapService).dispose();
639
+ }
640
+ });
641
+ // Annotate the CommonJS export names for ESM import in node:
642
+ 0 && (module.exports = {
643
+ FlowMinimapLayer,
644
+ FlowMinimapService,
645
+ MinimapDefaultCanvasStyle,
646
+ MinimapDefaultInactiveStyle,
647
+ MinimapDefaultOptions,
648
+ MinimapRender,
649
+ createMinimapPlugin
650
+ });
651
+ //# sourceMappingURL=index.js.map