@flowgram-vue/minimap-plugin 0.2.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.
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
4
+ Copyright (c) 2026 Crayon
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ of this software and associated documentation files (the "Software"), to deal
8
+ in the Software without restriction, including without limitation the rights
9
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ copies of the Software, and to permit persons to whom the Software is
11
+ furnished to do so, subject to the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be included in all
14
+ copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ SOFTWARE.
package/dist/index.cjs ADDED
@@ -0,0 +1,632 @@
1
+ 'use strict';
2
+
3
+ var vue = require('vue');
4
+ var core = require('@flowgram-vue/core');
5
+ var lodashEs = require('lodash-es');
6
+ var inversify = require('inversify');
7
+ var utils = require('@flowgram-vue/utils');
8
+ var document$1 = require('@flowgram-vue/document');
9
+
10
+ var __defProp = Object.defineProperty;
11
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
12
+ var __decorateClass = (decorators, target, key, kind) => {
13
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
14
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
+ if (decorator = decorators[i])
16
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
17
+ if (kind && result) __defProp(target, key, result);
18
+ return result;
19
+ };
20
+
21
+ // src/draw.ts
22
+ var MinimapDraw;
23
+ ((MinimapDraw2) => {
24
+ const isRectValid = (rect) => rect.width > 0 && rect.height > 0;
25
+ MinimapDraw2.clear = (params) => {
26
+ const { canvas, context } = params;
27
+ context.clearRect(0, 0, canvas.width, canvas.height);
28
+ };
29
+ MinimapDraw2.backgroundColor = (params) => {
30
+ const { canvas, context, color } = params;
31
+ context.fillStyle = color;
32
+ context.fillRect(0, 0, canvas.width, canvas.height);
33
+ };
34
+ MinimapDraw2.rectangle = (params) => {
35
+ const { context, rect, color } = params;
36
+ if (!isRectValid(rect)) {
37
+ return;
38
+ }
39
+ context.fillStyle = color;
40
+ context.fillRect(rect.x, rect.y, rect.width, rect.height);
41
+ };
42
+ MinimapDraw2.roundRectangle = (params) => {
43
+ const { context, rect, color, radius, borderColor, borderDashLength, borderWidth = 0 } = params;
44
+ const { x, y, width, height } = rect;
45
+ if (!isRectValid(rect)) {
46
+ return;
47
+ }
48
+ context.beginPath();
49
+ const drawRoundedRectPath = () => {
50
+ context.moveTo(x + radius, y);
51
+ context.lineTo(x + width - radius, y);
52
+ context.quadraticCurveTo(x + width, y, x + width, y + radius);
53
+ context.lineTo(x + width, y + height - radius);
54
+ context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
55
+ context.lineTo(x + radius, y + height);
56
+ context.quadraticCurveTo(x, y + height, x, y + height - radius);
57
+ context.lineTo(x, y + radius);
58
+ context.quadraticCurveTo(x, y, x + radius, y);
59
+ context.closePath();
60
+ };
61
+ drawRoundedRectPath();
62
+ context.fillStyle = color;
63
+ context.fill();
64
+ if (borderColor && borderWidth > 0) {
65
+ context.strokeStyle = borderColor;
66
+ context.lineWidth = borderWidth;
67
+ if (borderDashLength) {
68
+ context.setLineDash([borderDashLength, borderDashLength]);
69
+ } else {
70
+ context.setLineDash([]);
71
+ }
72
+ context.stroke();
73
+ context.setLineDash([]);
74
+ }
75
+ };
76
+ MinimapDraw2.overlay = (params) => {
77
+ const { canvas, context, offset, scale, rect, color } = params;
78
+ if (!isRectValid(rect)) {
79
+ return;
80
+ }
81
+ context.fillStyle = color;
82
+ context.fillRect(0, 0, canvas.width, (rect.y + offset.y) * scale);
83
+ context.fillRect(
84
+ 0,
85
+ (rect.y + rect.height + offset.y) * scale,
86
+ canvas.width,
87
+ canvas.height - (rect.y + rect.height + offset.y) * scale
88
+ );
89
+ context.fillRect(
90
+ 0,
91
+ (rect.y + offset.y) * scale,
92
+ (rect.x + offset.x) * scale,
93
+ rect.height * scale
94
+ );
95
+ context.fillRect(
96
+ (rect.x + rect.width + offset.x) * scale,
97
+ (rect.y + offset.y) * scale,
98
+ canvas.width - (rect.x + rect.width + offset.x) * scale,
99
+ rect.height * scale
100
+ );
101
+ };
102
+ })(MinimapDraw || (MinimapDraw = {}));
103
+
104
+ // src/constant.ts
105
+ var MinimapDefaultCanvasStyle = {
106
+ canvasWidth: 250,
107
+ canvasHeight: 250,
108
+ canvasPadding: 50,
109
+ canvasBackground: "rgba(242, 243, 245, 1)",
110
+ canvasBorderRadius: 10,
111
+ viewportBackground: "rgba(255, 255, 255, 1)",
112
+ viewportBorderRadius: 4,
113
+ viewportBorderColor: "rgba(6, 7, 9, 0.10)",
114
+ viewportBorderWidth: 1,
115
+ viewportBorderDashLength: void 0,
116
+ nodeColor: "rgba(0, 0, 0, 0.10)",
117
+ nodeBorderRadius: 2,
118
+ nodeBorderWidth: 0.145,
119
+ nodeBorderColor: "rgba(6, 7, 9, 0.10)",
120
+ overlayColor: "rgba(255, 255, 255, 0.55)"
121
+ };
122
+ var MinimapDefaultInactiveStyle = {
123
+ scale: 0.7,
124
+ opacity: 1,
125
+ translateX: 15,
126
+ translateY: 15
127
+ };
128
+ var MinimapDefaultOptions = {
129
+ canvasStyle: MinimapDefaultCanvasStyle,
130
+ canvasClassName: "gedit-minimap-canvas",
131
+ enableDisplayAllNodes: false,
132
+ activeThrottleTime: 0,
133
+ inactiveThrottleTime: 24
134
+ };
135
+
136
+ // src/service.ts
137
+ exports.FlowMinimapService = class FlowMinimapService {
138
+ constructor() {
139
+ this.visible = false;
140
+ this.onActive = (callback) => {
141
+ this.onActiveCallbacks.add(callback);
142
+ return {
143
+ dispose: () => {
144
+ this.onActiveCallbacks.delete(callback);
145
+ }
146
+ };
147
+ };
148
+ /**
149
+ * 触发渲染
150
+ */
151
+ this.render = this._render;
152
+ this.handleWheel = (event) => {
153
+ };
154
+ this.handleStartDrag = (event) => {
155
+ core.MouseTouchEvent.preventDefault(event);
156
+ event.stopPropagation();
157
+ const renderContext = this.createRenderContext();
158
+ const { viewRect, scale, offset } = renderContext;
159
+ const canvasRect = this.canvas.getBoundingClientRect();
160
+ const { clientX, clientY } = core.MouseTouchEvent.getEventCoord(event);
161
+ const mousePoint = {
162
+ x: clientX - canvasRect.left,
163
+ y: clientY - canvasRect.top
164
+ };
165
+ const viewRectOnCanvas = this.rectOnCanvas({
166
+ rect: viewRect,
167
+ scale,
168
+ offset
169
+ });
170
+ if (!this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
171
+ return;
172
+ }
173
+ this.isDragging = true;
174
+ this.dragStart = mousePoint;
175
+ document.addEventListener("mousemove", this.handleDragging);
176
+ document.addEventListener("mouseup", this.handleEndDrag);
177
+ document.addEventListener("touchmove", this.handleDragging, { passive: false });
178
+ document.addEventListener("touchend", this.handleEndDrag);
179
+ document.addEventListener("touchcancel", this.handleEndDrag);
180
+ };
181
+ this.handleDragging = (event) => {
182
+ if (!this.isDragging || !this.dragStart) return;
183
+ core.MouseTouchEvent.preventDefault(event);
184
+ event.stopPropagation();
185
+ const renderContext = this.createRenderContext();
186
+ const { scale } = renderContext;
187
+ const canvasRect = this.canvas.getBoundingClientRect();
188
+ const { clientX, clientY } = core.MouseTouchEvent.getEventCoord(event);
189
+ const mouseX = clientX - canvasRect.left;
190
+ const mouseY = clientY - canvasRect.top;
191
+ const deltaX = (mouseX - this.dragStart.x) / scale;
192
+ const deltaY = (mouseY - this.dragStart.y) / scale;
193
+ this.updateScrollPosition(deltaX, deltaY);
194
+ this.dragStart = { x: mouseX, y: mouseY };
195
+ this.render();
196
+ };
197
+ this.handleEndDrag = (event) => {
198
+ core.MouseTouchEvent.preventDefault(event);
199
+ event.stopPropagation();
200
+ document.removeEventListener("mousemove", this.handleDragging);
201
+ document.removeEventListener("mouseup", this.handleEndDrag);
202
+ document.removeEventListener("touchmove", this.handleDragging);
203
+ document.removeEventListener("touchend", this.handleEndDrag);
204
+ document.removeEventListener("touchcancel", this.handleEndDrag);
205
+ this.isDragging = false;
206
+ this.dragStart = void 0;
207
+ this.setActivate(this.isMouseInCanvas(event));
208
+ };
209
+ this.handleCursor = (event) => {
210
+ if (!this.activated) return;
211
+ const renderContext = this.createRenderContext();
212
+ const { viewRect, scale, offset } = renderContext;
213
+ const canvasRect = this.canvas.getBoundingClientRect();
214
+ const mousePoint = {
215
+ x: event.clientX - canvasRect.left,
216
+ y: event.clientY - canvasRect.top
217
+ };
218
+ const viewRectOnCanvas = this.rectOnCanvas({
219
+ rect: viewRect,
220
+ scale,
221
+ offset
222
+ });
223
+ if (this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
224
+ this.canvas.style.cursor = "grab";
225
+ } else {
226
+ this.canvas.style.cursor = "default";
227
+ }
228
+ };
229
+ this.canvas = document.createElement("canvas");
230
+ this.context2D = this.canvas.getContext("2d");
231
+ this.initialized = !!this.context2D;
232
+ this.onActiveCallbacks = /* @__PURE__ */ new Set();
233
+ this.toDispose = new utils.DisposableCollection();
234
+ this.render = this._render;
235
+ this.activated = false;
236
+ this.isDragging = false;
237
+ }
238
+ init(options) {
239
+ this.options = MinimapDefaultOptions;
240
+ Object.assign(this.options, options);
241
+ this.setThrottle(this.options.inactiveThrottleTime);
242
+ this.initStyle();
243
+ }
244
+ dispose() {
245
+ this.toDispose.dispose();
246
+ this.initialized = false;
247
+ this.activated = false;
248
+ this.removeEventListeners();
249
+ }
250
+ setVisible(visible) {
251
+ this.visible = visible;
252
+ }
253
+ setActivate(activate) {
254
+ if (activate === this.activated) {
255
+ return;
256
+ }
257
+ if (!activate && this.isDragging) {
258
+ return;
259
+ }
260
+ this.activated = activate;
261
+ if (activate) {
262
+ this.setThrottle(this.options.activeThrottleTime);
263
+ this.addEventListeners();
264
+ } else {
265
+ this.setThrottle(this.options.inactiveThrottleTime);
266
+ this.removeEventListeners();
267
+ }
268
+ this.render();
269
+ this.onActiveCallbacks.forEach((callback) => callback(activate));
270
+ }
271
+ initStyle() {
272
+ if (!this.initialized) {
273
+ return;
274
+ }
275
+ const { canvasClassName, canvasStyle } = this.options;
276
+ this.canvas.className = canvasClassName;
277
+ this.style = {
278
+ ...MinimapDefaultCanvasStyle,
279
+ ...canvasStyle
280
+ };
281
+ this.canvas.width = this.style.canvasWidth;
282
+ this.canvas.height = this.style.canvasHeight;
283
+ this.canvas.style.borderRadius = this.style.canvasBorderRadius ? `${this.style.canvasBorderRadius}px` : "unset";
284
+ }
285
+ setThrottle(throttleTime) {
286
+ this.render = lodashEs.throttle(this._render, throttleTime);
287
+ }
288
+ _render() {
289
+ if (!this.initialized || !this.visible) {
290
+ return;
291
+ }
292
+ const renderContext = this.createRenderContext();
293
+ this.renderCanvas(renderContext);
294
+ }
295
+ createRenderContext() {
296
+ const { canvas, context2D } = this;
297
+ const nodeTransforms = this.transformVisibles;
298
+ const nodeRects = nodeTransforms.map((transform) => transform.bounds);
299
+ const viewRect = this.viewRect();
300
+ const renderRect = this.renderRect(nodeRects).withPadding({
301
+ top: this.style.canvasPadding,
302
+ bottom: this.style.canvasPadding,
303
+ left: this.style.canvasPadding,
304
+ right: this.style.canvasPadding
305
+ });
306
+ const canvasRect = utils.Rectangle.enlarge([viewRect, renderRect]);
307
+ const { scale, offset } = this.calculateScaleAndOffset({ canvasRect });
308
+ return {
309
+ canvas,
310
+ context2D,
311
+ nodeRects,
312
+ canvasRect,
313
+ viewRect,
314
+ renderRect,
315
+ scale,
316
+ offset
317
+ };
318
+ }
319
+ renderCanvas(renderContext) {
320
+ const { canvas, context2D, nodeRects, viewRect, scale, offset } = renderContext;
321
+ MinimapDraw.clear({ canvas, context: context2D });
322
+ MinimapDraw.backgroundColor({
323
+ canvas,
324
+ context: context2D,
325
+ color: this.style.canvasBackground
326
+ });
327
+ MinimapDraw.roundRectangle({
328
+ context: context2D,
329
+ rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
330
+ color: this.style.viewportBackground,
331
+ radius: this.style.viewportBorderRadius
332
+ });
333
+ nodeRects.forEach((nodeRect) => {
334
+ MinimapDraw.roundRectangle({
335
+ context: context2D,
336
+ rect: this.rectOnCanvas({ rect: nodeRect, scale, offset }),
337
+ color: this.style.nodeColor,
338
+ radius: this.style.nodeBorderRadius,
339
+ borderWidth: this.style.nodeBorderWidth,
340
+ borderColor: this.style.nodeBorderColor
341
+ });
342
+ });
343
+ MinimapDraw.roundRectangle({
344
+ context: context2D,
345
+ rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
346
+ color: "rgba(255, 255, 255, 0)",
347
+ radius: this.style.viewportBorderRadius,
348
+ borderColor: this.style.viewportBorderColor,
349
+ borderWidth: this.style.viewportBorderWidth,
350
+ borderDashLength: this.style.viewportBorderDashLength
351
+ });
352
+ MinimapDraw.overlay({
353
+ canvas,
354
+ context: context2D,
355
+ offset,
356
+ scale,
357
+ rect: viewRect,
358
+ color: this.style.overlayColor
359
+ });
360
+ }
361
+ calculateScaleAndOffset(params) {
362
+ const { canvasRect } = params;
363
+ const { width: canvasWidth, height: canvasHeight } = this.canvas;
364
+ const scaleX = canvasWidth / canvasRect.width;
365
+ const scaleY = canvasHeight / canvasRect.height;
366
+ const scale = Math.min(scaleX, scaleY);
367
+ const scaledWidth = canvasRect.width * scale;
368
+ const scaledHeight = canvasRect.height * scale;
369
+ const centerOffsetX = (canvasWidth - scaledWidth) / 2;
370
+ const centerOffsetY = (canvasHeight - scaledHeight) / 2;
371
+ const offset = {
372
+ x: centerOffsetX / scale - canvasRect.x,
373
+ y: centerOffsetY / scale - canvasRect.y
374
+ };
375
+ return { scale, offset };
376
+ }
377
+ get transformVisibles() {
378
+ const transformVisible = this.document.getRenderDatas(
379
+ document$1.FlowNodeTransformData,
380
+ false
381
+ );
382
+ return transformVisible.filter((transform) => {
383
+ const node = transform.entity;
384
+ if (node.hidden) return false;
385
+ if (node.flowNodeType === document$1.FlowNodeBaseType.ROOT) return;
386
+ if (!this.options.enableDisplayAllNodes && node.parent && node.parent.flowNodeType !== document$1.FlowNodeBaseType.ROOT)
387
+ return;
388
+ return true;
389
+ });
390
+ }
391
+ renderRect(rects) {
392
+ return utils.Rectangle.enlarge(rects);
393
+ }
394
+ viewRect() {
395
+ const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;
396
+ return new utils.Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);
397
+ }
398
+ /** 计算画布坐标系下的矩形 */
399
+ rectOnCanvas(params) {
400
+ const { rect, scale, offset } = params;
401
+ return new utils.Rectangle(
402
+ (rect.x + offset.x) * scale,
403
+ (rect.y + offset.y) * scale,
404
+ rect.width * scale,
405
+ rect.height * scale
406
+ );
407
+ }
408
+ isPointInRect(params) {
409
+ const { point, rect } = params;
410
+ return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
411
+ }
412
+ addEventListeners() {
413
+ this.canvas.addEventListener("wheel", this.handleWheel);
414
+ this.canvas.addEventListener("mousedown", this.handleStartDrag);
415
+ this.canvas.addEventListener("touchstart", this.handleStartDrag, { passive: false });
416
+ this.canvas.addEventListener("mousemove", this.handleCursor);
417
+ }
418
+ removeEventListeners() {
419
+ this.canvas.removeEventListener("wheel", this.handleWheel);
420
+ this.canvas.removeEventListener("mousedown", this.handleStartDrag);
421
+ this.canvas.removeEventListener("touchstart", this.handleStartDrag);
422
+ this.canvas.removeEventListener("mousemove", this.handleCursor);
423
+ }
424
+ isMouseInCanvas(event) {
425
+ const canvasRect = this.canvas.getBoundingClientRect();
426
+ const { clientX, clientY } = core.MouseTouchEvent.getEventCoord(event);
427
+ return clientX >= canvasRect.left && clientX <= canvasRect.right && clientY >= canvasRect.top && clientY <= canvasRect.bottom;
428
+ }
429
+ updateScrollPosition(deltaX, deltaY) {
430
+ const { scrollX, scrollY, zoom } = this.playgroundConfig.config;
431
+ this.playgroundConfig.updateConfig({
432
+ scrollX: scrollX + deltaX * zoom,
433
+ scrollY: scrollY + deltaY * zoom
434
+ });
435
+ }
436
+ };
437
+ __decorateClass([
438
+ inversify.inject(document$1.FlowDocument)
439
+ ], exports.FlowMinimapService.prototype, "document", 2);
440
+ __decorateClass([
441
+ inversify.inject(core.PlaygroundConfigEntity)
442
+ ], exports.FlowMinimapService.prototype, "playgroundConfig", 2);
443
+ exports.FlowMinimapService = __decorateClass([
444
+ inversify.injectable()
445
+ ], exports.FlowMinimapService);
446
+
447
+ // src/component.ts
448
+ var MinimapRender = vue.defineComponent({
449
+ name: "MinimapRender",
450
+ props: {
451
+ service: { type: Object },
452
+ panelStyles: { type: Object, default: () => ({}) },
453
+ containerStyles: { type: Object, default: () => ({}) },
454
+ inactiveStyle: {
455
+ type: Object,
456
+ default: () => ({})
457
+ }
458
+ },
459
+ setup(props) {
460
+ const inactiveStyle = {
461
+ ...MinimapDefaultInactiveStyle,
462
+ ...props.inactiveStyle
463
+ };
464
+ const playgroundContainer = vue.inject(core.PlaygroundVueContainerKey, void 0);
465
+ const service = props.service || playgroundContainer?.get(exports.FlowMinimapService);
466
+ const panelRef = vue.shallowRef(null);
467
+ const activated = vue.shallowRef(false);
468
+ let disposer;
469
+ vue.onMounted(() => {
470
+ const canvasContainer = panelRef.value;
471
+ if (canvasContainer && service.canvas) {
472
+ canvasContainer.appendChild(service.canvas);
473
+ }
474
+ disposer = service.onActive((activate) => {
475
+ activated.value = activate;
476
+ });
477
+ service.setVisible(true);
478
+ service.render();
479
+ });
480
+ vue.onBeforeUnmount(() => {
481
+ disposer?.dispose();
482
+ service.setVisible(false);
483
+ });
484
+ return () => {
485
+ const scale = activated.value ? 1 : inactiveStyle.scale;
486
+ const opacity = activated.value ? 1 : inactiveStyle.opacity;
487
+ const translateX = activated.value ? 0 : inactiveStyle.translateX;
488
+ const translateY = activated.value ? 0 : inactiveStyle.translateY;
489
+ return vue.h(
490
+ "div",
491
+ {
492
+ class: "minimap-container",
493
+ style: {
494
+ position: "fixed",
495
+ right: "30px",
496
+ bottom: "70px",
497
+ transition: "all 0.3s ease",
498
+ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
499
+ opacity,
500
+ transformOrigin: "bottom right",
501
+ ...props.containerStyles
502
+ }
503
+ },
504
+ [
505
+ vue.h("div", {
506
+ class: "minimap-panel",
507
+ style: {
508
+ display: "flex",
509
+ width: "100%",
510
+ height: "100%",
511
+ borderRadius: "10px",
512
+ backgroundColor: "rgba(255, 255, 255, 1)",
513
+ border: "0.572px solid rgba(6, 7, 9, 0.10)",
514
+ overflow: "hidden",
515
+ 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)",
516
+ boxSizing: "border-box",
517
+ padding: "8px",
518
+ ...props.panelStyles
519
+ },
520
+ "data-flow-editor-selectable": "false",
521
+ ref: (el) => {
522
+ panelRef.value = el || null;
523
+ },
524
+ onMouseenter: () => {
525
+ service.setActivate(true);
526
+ },
527
+ onMouseleave: () => {
528
+ service.setActivate(false);
529
+ },
530
+ onTouchstartCapture: () => {
531
+ service.setActivate(true);
532
+ },
533
+ onTouchendCapture: () => {
534
+ service.setActivate(false);
535
+ }
536
+ })
537
+ ]
538
+ );
539
+ };
540
+ }
541
+ });
542
+ var LayerVueProvide = vue.defineComponent({
543
+ name: "LayerVueProvide",
544
+ props: {
545
+ factory: {
546
+ type: Object,
547
+ required: true
548
+ }
549
+ },
550
+ setup(props) {
551
+ const factory = props.factory;
552
+ vue.provide(core.PlaygroundVueContainerKey, factory);
553
+ try {
554
+ vue.provide(core.PlaygroundVueRefKey, factory.get(core.Playground));
555
+ } catch {
556
+ }
557
+ },
558
+ render() {
559
+ return this.$slots.default?.();
560
+ }
561
+ });
562
+ function wrapLayerRender(factory, children) {
563
+ return vue.h(LayerVueProvide, { factory }, () => children);
564
+ }
565
+
566
+ // src/layer.ts
567
+ exports.FlowMinimapLayer = class FlowMinimapLayer extends core.Layer {
568
+ constructor() {
569
+ super();
570
+ this.className = "gedit-minimap-layer gedit-playground-layer";
571
+ this.node = utils.domUtils.createDivWithClass(this.className);
572
+ this.node.style.zIndex = "9999";
573
+ }
574
+ render() {
575
+ if (this.documentTransformer.loading) return null;
576
+ this.documentTransformer.refresh();
577
+ this.service.render();
578
+ if (this.options.disableLayer) {
579
+ return null;
580
+ }
581
+ return wrapLayerRender(
582
+ this.playgroundContainer,
583
+ vue.h(MinimapRender, {
584
+ service: this.service,
585
+ panelStyles: this.options.panelStyles,
586
+ containerStyles: this.options.containerStyles,
587
+ inactiveStyle: this.options.inactiveStyle
588
+ })
589
+ );
590
+ }
591
+ };
592
+ exports.FlowMinimapLayer.type = "FlowMinimapLayer";
593
+ __decorateClass([
594
+ inversify.inject(exports.FlowMinimapService)
595
+ ], exports.FlowMinimapLayer.prototype, "service", 2);
596
+ __decorateClass([
597
+ inversify.inject(core.PlaygroundContainerFactory)
598
+ ], exports.FlowMinimapLayer.prototype, "playgroundContainer", 2);
599
+ __decorateClass([
600
+ core.observeEntityDatas(document$1.FlowNodeEntity, document$1.FlowNodeTransformData)
601
+ ], exports.FlowMinimapLayer.prototype, "transformDatas", 2);
602
+ __decorateClass([
603
+ core.observeEntity(core.PlaygroundConfigEntity)
604
+ ], exports.FlowMinimapLayer.prototype, "configEntity", 2);
605
+ __decorateClass([
606
+ core.observeEntity(document$1.FlowDocumentTransformerEntity)
607
+ ], exports.FlowMinimapLayer.prototype, "documentTransformer", 2);
608
+ exports.FlowMinimapLayer = __decorateClass([
609
+ inversify.injectable()
610
+ ], exports.FlowMinimapLayer);
611
+
612
+ // src/create-plugin.ts
613
+ var createMinimapPlugin = core.definePluginCreator({
614
+ onBind: ({ bind }) => {
615
+ bind(exports.FlowMinimapService).toSelf().inSingletonScope();
616
+ },
617
+ onInit: (ctx, opts) => {
618
+ ctx.playground.registerLayer(exports.FlowMinimapLayer, opts);
619
+ ctx.get(exports.FlowMinimapService).init(opts);
620
+ },
621
+ onDispose: (ctx) => {
622
+ ctx.get(exports.FlowMinimapService).dispose();
623
+ }
624
+ });
625
+
626
+ exports.MinimapDefaultCanvasStyle = MinimapDefaultCanvasStyle;
627
+ exports.MinimapDefaultInactiveStyle = MinimapDefaultInactiveStyle;
628
+ exports.MinimapDefaultOptions = MinimapDefaultOptions;
629
+ exports.MinimapRender = MinimapRender;
630
+ exports.createMinimapPlugin = createMinimapPlugin;
631
+ //# sourceMappingURL=index.cjs.map
632
+ //# sourceMappingURL=index.cjs.map