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

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/component.tsx","../../src/constant.ts","../../src/create-plugin.ts","../../src/service.ts","../../src/draw.ts","../../src/layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react';\n\nimport { MinimapInactiveStyle } from './type';\nimport { FlowMinimapService } from './service';\nimport { MinimapDefaultInactiveStyle } from './constant';\n\ninterface MinimapProps {\n  service: FlowMinimapService;\n  panelStyles?: CSSProperties;\n  containerStyles?: CSSProperties;\n  inactiveStyle?: Partial<MinimapInactiveStyle>;\n}\n\nexport const MinimapRender: React.FC<MinimapProps> = (props) => {\n  const {\n    service,\n    panelStyles = {},\n    containerStyles = {},\n    inactiveStyle: customInactiveStyle = {},\n  } = props;\n  const inactiveStyle = {\n    ...MinimapDefaultInactiveStyle,\n    ...customInactiveStyle,\n  };\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [activated, setActivated] = useState<boolean>(false);\n\n  useEffect(() => {\n    const canvasContainer: HTMLDivElement | null = panelRef.current;\n    if (canvasContainer && service.canvas) {\n      canvasContainer.appendChild(service.canvas);\n    }\n    const disposer = service.onActive((activate: boolean) => {\n      setActivated(activate);\n    });\n    return () => {\n      disposer.dispose();\n    };\n  }, []);\n\n  // 计算缩放比例和透明度\n  const scale: number = activated ? 1 : inactiveStyle.scale;\n  const opacity: number = activated ? 1 : inactiveStyle.opacity;\n\n  // 计算偏移量\n  const translateX: number = activated ? 0 : inactiveStyle.translateX; // 向右偏移的像素\n  const translateY: number = activated ? 0 : inactiveStyle.translateY; // 向下偏移的像素\n\n  return (\n    <div\n      className=\"minimap-container\"\n      style={{\n        position: 'fixed',\n        right: 30,\n        bottom: 70,\n        transition: 'all 0.3s ease', // 添加过渡效果\n        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,\n        opacity: opacity,\n        transformOrigin: 'bottom right', // 设置变换的原点\n        ...containerStyles,\n      }}\n    >\n      <div\n        className=\"minimap-panel\"\n        style={{\n          display: 'flex',\n          width: '100%',\n          height: '100%',\n          borderRadius: '10px',\n          backgroundColor: 'rgba(255, 255, 255, 1)',\n          border: '0.572px solid rgba(6, 7, 9, 0.10)',\n          overflow: 'hidden',\n          boxShadow:\n            '0px 2.289px 6.867px 0px rgba(0, 0, 0, 0.08), 0px 4.578px 13.733px 0px rgba(0, 0, 0, 0.04)',\n          boxSizing: 'border-box',\n          padding: 8,\n          ...panelStyles,\n        }}\n        data-flow-editor-selectable=\"false\"\n        ref={panelRef}\n        onMouseEnter={() => {\n          service.setActivate(true);\n        }}\n        onMouseLeave={() => {\n          service.setActivate(false);\n        }}\n        onTouchStartCapture={() => {\n          service.setActivate(true);\n        }}\n        onTouchEndCapture={() => {\n          service.setActivate(false);\n        }}\n      ></div>\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { MinimapCanvasStyle, MinimapInactiveStyle, MinimapServiceOptions } from './type';\n\nexport const MinimapDefaultCanvasStyle: MinimapCanvasStyle = {\n  canvasWidth: 250,\n  canvasHeight: 250,\n  canvasPadding: 50,\n  canvasBackground: 'rgba(242, 243, 245, 1)',\n  canvasBorderRadius: 10,\n  viewportBackground: 'rgba(255, 255, 255, 1)',\n  viewportBorderRadius: 4,\n  viewportBorderColor: 'rgba(6, 7, 9, 0.10)',\n  viewportBorderWidth: 1,\n  viewportBorderDashLength: undefined,\n  nodeColor: 'rgba(0, 0, 0, 0.10)',\n  nodeBorderRadius: 2,\n  nodeBorderWidth: 0.145,\n  nodeBorderColor: 'rgba(6, 7, 9, 0.10)',\n  overlayColor: 'rgba(255, 255, 255, 0.55)',\n};\n\nexport const MinimapDefaultInactiveStyle: MinimapInactiveStyle = {\n  scale: 0.7,\n  opacity: 1,\n  translateX: 15,\n  translateY: 15,\n};\n\nexport const MinimapDefaultOptions: MinimapServiceOptions = {\n  canvasStyle: MinimapDefaultCanvasStyle,\n  canvasClassName: 'gedit-minimap-canvas',\n  enableActiveDebounce: false,\n  enableInactiveDebounce: true,\n  enableDisplayAllNodes: false,\n  activeDebounceTime: 0,\n  inactiveDebounceTime: 5,\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator, PluginContext } from '@flowgram.ai/core';\n\nimport { CreateMinimapPluginOptions } from './type';\nimport { FlowMinimapService } from './service';\nimport { FlowMinimapLayer } from './layer';\n\nexport const createMinimapPlugin = definePluginCreator<CreateMinimapPluginOptions>({\n  onBind: ({ bind }) => {\n    bind(FlowMinimapService).toSelf().inSingletonScope();\n  },\n  onInit: (ctx: PluginContext, opts: CreateMinimapPluginOptions) => {\n    ctx.playground.registerLayer(FlowMinimapLayer, opts);\n    ctx.get(FlowMinimapService).init(opts);\n  },\n  onDispose: (ctx: PluginContext) => {\n    ctx.get(FlowMinimapService).dispose();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { debounce } from 'lodash';\nimport { inject, injectable } from 'inversify';\nimport { Disposable, DisposableCollection, IPoint, Rectangle } from '@flowgram.ai/utils';\nimport { FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/document';\nimport { FlowNodeBaseType } from '@flowgram.ai/document';\nimport { FlowDocument } from '@flowgram.ai/document';\nimport { EntityManager, MouseTouchEvent, PlaygroundConfigEntity } from '@flowgram.ai/core';\n\nimport type { MinimapRenderContext, MinimapServiceOptions, MinimapCanvasStyle } from './type';\nimport { MinimapDraw } from './draw';\nimport { MinimapDefaultCanvasStyle, MinimapDefaultOptions } from './constant';\n\n@injectable()\nexport class FlowMinimapService {\n  @inject(FlowDocument) private readonly document: FlowDocument;\n\n  @inject(EntityManager) private readonly entityManager: EntityManager;\n\n  @inject(PlaygroundConfigEntity)\n  private readonly playgroundConfig: PlaygroundConfigEntity;\n\n  public readonly canvas: HTMLCanvasElement;\n\n  public readonly context2D: CanvasRenderingContext2D;\n\n  public activated;\n\n  private onActiveCallbacks: Set<(activated: boolean) => void>;\n\n  private options: MinimapServiceOptions;\n\n  private toDispose: DisposableCollection;\n\n  private initialized;\n\n  private isDragging;\n\n  private style: MinimapCanvasStyle;\n\n  private dragStart?: IPoint;\n\n  constructor() {\n    this.canvas = document.createElement('canvas');\n    this.context2D = this.canvas.getContext('2d')!;\n    this.initialized = !!this.context2D;\n    this.onActiveCallbacks = new Set();\n    this.toDispose = new DisposableCollection();\n    this.render = this._render;\n    this.activated = false;\n    this.isDragging = false;\n  }\n\n  public init(options?: Partial<MinimapServiceOptions>) {\n    this.options = MinimapDefaultOptions;\n    Object.assign(this.options, options);\n    this.setDebounce({\n      enableDebounce: this.options.enableInactiveDebounce,\n      debounceTime: this.options.inactiveDebounceTime,\n    });\n    this.initStyle();\n    this.mountListener();\n  }\n\n  public dispose(): void {\n    this.toDispose.dispose();\n    this.initialized = false;\n    this.activated = false;\n    this.removeEventListeners();\n  }\n\n  public setActivate(activate: boolean): void {\n    if (activate === this.activated) {\n      return;\n    }\n    if (!activate && this.isDragging) {\n      // 拖拽时持续激活\n      return;\n    }\n    this.activated = activate;\n    if (activate) {\n      this.setDebounce({\n        enableDebounce: this.options.enableActiveDebounce,\n        debounceTime: this.options.activeDebounceTime,\n      });\n      this.addEventListeners();\n    } else {\n      this.setDebounce({\n        enableDebounce: this.options.enableInactiveDebounce,\n        debounceTime: this.options.inactiveDebounceTime,\n      });\n      this.removeEventListeners();\n    }\n    this.render();\n    this.onActiveCallbacks.forEach((callback) => callback(activate));\n  }\n\n  public onActive = (callback: (activated: boolean) => void): Disposable => {\n    this.onActiveCallbacks.add(callback);\n    return {\n      dispose: () => {\n        this.onActiveCallbacks.delete(callback);\n      },\n    };\n  };\n\n  private initStyle() {\n    if (!this.initialized) {\n      return;\n    }\n    const { canvasClassName, canvasStyle } = this.options;\n    this.canvas.className = canvasClassName;\n    this.style = {\n      ...MinimapDefaultCanvasStyle,\n      ...canvasStyle,\n    };\n    this.canvas.width = this.style.canvasWidth;\n    this.canvas.height = this.style.canvasHeight;\n    this.canvas.style.borderRadius = this.style.canvasBorderRadius\n      ? `${this.style.canvasBorderRadius}px`\n      : 'unset';\n  }\n\n  private setDebounce(params: { enableDebounce: boolean; debounceTime: number }) {\n    const { enableDebounce, debounceTime } = params;\n    if (enableDebounce) {\n      this.render = debounce(this._render, debounceTime);\n    } else {\n      this.render = this._render;\n    }\n  }\n\n  /**\n   * 触发渲染\n   */\n  private render: () => void = this._render;\n\n  private _render(): void {\n    if (!this.initialized) {\n      return;\n    }\n    const renderContext = this.createRenderContext();\n    this.renderCanvas(renderContext);\n  }\n\n  private createRenderContext(): MinimapRenderContext {\n    const { canvas, context2D, nodes } = this;\n    const nodeTransforms: FlowNodeTransformData[] = this.nodeTransforms(nodes);\n    const nodeRects: Rectangle[] = nodeTransforms.map((transform) => transform.bounds);\n    const viewRect: Rectangle = this.viewRect();\n    const renderRect: Rectangle = this.renderRect(nodeRects).withPadding({\n      top: this.style.canvasPadding,\n      bottom: this.style.canvasPadding,\n      left: this.style.canvasPadding,\n      right: this.style.canvasPadding,\n    });\n    const canvasRect: Rectangle = Rectangle.enlarge([viewRect, renderRect]);\n\n    const { scale, offset } = this.calculateScaleAndOffset({ canvasRect });\n\n    return {\n      canvas,\n      context2D,\n      nodeRects,\n      canvasRect,\n      viewRect,\n      renderRect,\n      scale,\n      offset,\n    };\n  }\n\n  private renderCanvas(renderContext: MinimapRenderContext) {\n    const { canvas, context2D, nodeRects, viewRect, scale, offset } = renderContext;\n\n    // 清空画布\n    MinimapDraw.clear({ canvas, context: context2D });\n\n    // 设置背景色\n    MinimapDraw.backgroundColor({\n      canvas,\n      context: context2D,\n      color: this.style.canvasBackground,\n    });\n\n    // 绘制视窗\n    MinimapDraw.roundRectangle({\n      context: context2D,\n      rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),\n      color: this.style.viewportBackground,\n      radius: this.style.viewportBorderRadius as number,\n    });\n\n    // 绘制节点\n    nodeRects.forEach((nodeRect: Rectangle) => {\n      MinimapDraw.roundRectangle({\n        context: context2D,\n        rect: this.rectOnCanvas({ rect: nodeRect, scale, offset }),\n        color: this.style.nodeColor as string,\n        radius: this.style.nodeBorderRadius as number,\n        borderWidth: this.style.nodeBorderWidth as number,\n        borderColor: this.style.nodeBorderColor as string,\n      });\n    });\n\n    // 绘制视窗边框\n    MinimapDraw.roundRectangle({\n      context: context2D,\n      rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),\n      color: 'rgba(255, 255, 255, 0)' as string,\n      radius: this.style.viewportBorderRadius as number,\n      borderColor: this.style.viewportBorderColor as string,\n      borderWidth: this.style.viewportBorderWidth as number,\n      borderDashLength: this.style.viewportBorderDashLength as number,\n    });\n\n    // 绘制视窗外的蒙层\n    MinimapDraw.overlay({\n      canvas,\n      context: context2D,\n      offset,\n      scale,\n      rect: viewRect,\n      color: this.style.overlayColor as string,\n    });\n  }\n\n  private calculateScaleAndOffset(params: { canvasRect: Rectangle }): {\n    scale: number;\n    offset: IPoint;\n  } {\n    const { canvasRect } = params;\n    const { width: canvasWidth, height: canvasHeight } = this.canvas;\n\n    // 计算缩放比例\n    const scaleX = canvasWidth / canvasRect.width;\n    const scaleY = canvasHeight / canvasRect.height;\n    const scale = Math.min(scaleX, scaleY);\n\n    // 计算缩放后的渲染区域尺寸\n    const scaledWidth = canvasRect.width * scale;\n    const scaledHeight = canvasRect.height * scale;\n\n    // 计算居中偏移量\n    const centerOffsetX = (canvasWidth - scaledWidth) / 2;\n    const centerOffsetY = (canvasHeight - scaledHeight) / 2;\n\n    // 计算最终偏移量\n    const offset = {\n      x: centerOffsetX / scale - canvasRect.x,\n      y: centerOffsetY / scale - canvasRect.y,\n    };\n\n    return { scale, offset };\n  }\n\n  private get nodes(): FlowNodeEntity[] {\n    return this.document.getAllNodes().filter((node) => {\n      // 去除不可见节点\n      if (node.hidden) return false;\n      // 去除根节点\n      if (node.flowNodeType === FlowNodeBaseType.ROOT) return;\n      // 去除非一级节点\n      if (\n        !this.options.enableDisplayAllNodes &&\n        node.parent &&\n        node.parent.flowNodeType !== FlowNodeBaseType.ROOT\n      )\n        return;\n      return true;\n    });\n  }\n\n  private nodeTransforms(nodes: FlowNodeEntity[]): FlowNodeTransformData[] {\n    return nodes.map((node) => node.getData(FlowNodeTransformData)).filter(Boolean);\n  }\n\n  private renderRect(rects: Rectangle[]): Rectangle {\n    return Rectangle.enlarge(rects);\n  }\n\n  private viewRect(): Rectangle {\n    const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;\n    return new Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);\n  }\n\n  private mountListener(): void {\n    const entityManagerDisposer = this.entityManager.onEntityChange(() => this.render());\n    this.toDispose.push(entityManagerDisposer);\n  }\n\n  /** 计算画布坐标系下的矩形 */\n  private rectOnCanvas(params: { rect: Rectangle; scale: number; offset: IPoint }): Rectangle {\n    const { rect, scale, offset } = params;\n    return new Rectangle(\n      (rect.x + offset.x) * scale,\n      (rect.y + offset.y) * scale,\n      rect.width * scale,\n      rect.height * scale\n    );\n  }\n\n  private isPointInRect(params: { point: IPoint; rect: Rectangle }): boolean {\n    const { point, rect } = params;\n    return (\n      point.x >= rect.x &&\n      point.x <= rect.x + rect.width &&\n      point.y >= rect.y &&\n      point.y <= rect.y + rect.height\n    );\n  }\n\n  private addEventListeners(): void {\n    this.canvas.addEventListener('wheel', this.handleWheel);\n    this.canvas.addEventListener('mousedown', this.handleStartDrag);\n    this.canvas.addEventListener('touchstart', this.handleStartDrag, { passive: false });\n    this.canvas.addEventListener('mousemove', this.handleCursor);\n  }\n\n  private removeEventListeners(): void {\n    this.canvas.removeEventListener('wheel', this.handleWheel);\n    this.canvas.removeEventListener('mousedown', this.handleStartDrag);\n    this.canvas.removeEventListener('touchstart', this.handleStartDrag);\n    this.canvas.removeEventListener('mousemove', this.handleCursor);\n  }\n\n  private handleWheel = (event: WheelEvent): void => {};\n\n  private handleStartDrag = (event: MouseEvent | TouchEvent): void => {\n    MouseTouchEvent.preventDefault(event);\n    event.stopPropagation();\n    const renderContext = this.createRenderContext();\n    const { viewRect, scale, offset } = renderContext;\n    const canvasRect = this.canvas.getBoundingClientRect();\n    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);\n    const mousePoint: IPoint = {\n      x: clientX - canvasRect.left,\n      y: clientY - canvasRect.top,\n    };\n\n    const viewRectOnCanvas = this.rectOnCanvas({\n      rect: viewRect,\n      scale,\n      offset,\n    });\n    if (!this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {\n      return;\n    }\n    this.isDragging = true;\n    this.dragStart = mousePoint;\n    // click\n    document.addEventListener('mousemove', this.handleDragging);\n    document.addEventListener('mouseup', this.handleEndDrag);\n    // touch\n    document.addEventListener('touchmove', this.handleDragging, { passive: false });\n    document.addEventListener('touchend', this.handleEndDrag);\n    document.addEventListener('touchcancel', this.handleEndDrag);\n  };\n\n  private handleDragging = (event: MouseEvent | TouchEvent): void => {\n    if (!this.isDragging || !this.dragStart) return;\n    MouseTouchEvent.preventDefault(event);\n    event.stopPropagation();\n\n    const renderContext = this.createRenderContext();\n    const { scale } = renderContext;\n    const canvasRect = this.canvas.getBoundingClientRect();\n    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);\n    const mouseX = clientX - canvasRect.left;\n    const mouseY = clientY - canvasRect.top;\n\n    const deltaX = (mouseX - this.dragStart.x) / scale;\n    const deltaY = (mouseY - this.dragStart.y) / scale;\n\n    this.updateScrollPosition(deltaX, deltaY);\n\n    this.dragStart = { x: mouseX, y: mouseY };\n    this.render();\n  };\n\n  private handleEndDrag = (event: MouseEvent | TouchEvent): void => {\n    MouseTouchEvent.preventDefault(event);\n    event.stopPropagation();\n    // click\n    document.removeEventListener('mousemove', this.handleDragging);\n    document.removeEventListener('mouseup', this.handleEndDrag);\n    // touch\n    document.removeEventListener('touchmove', this.handleDragging);\n    document.removeEventListener('touchend', this.handleEndDrag);\n    document.removeEventListener('touchcancel', this.handleEndDrag);\n    this.isDragging = false;\n    this.dragStart = undefined;\n    this.setActivate(this.isMouseInCanvas(event));\n  };\n\n  private handleCursor = (event: MouseEvent): void => {\n    if (!this.activated) return;\n\n    const renderContext = this.createRenderContext();\n    const { viewRect, scale, offset } = renderContext;\n    const canvasRect = this.canvas.getBoundingClientRect();\n    const mousePoint: IPoint = {\n      x: event.clientX - canvasRect.left,\n      y: event.clientY - canvasRect.top,\n    };\n\n    const viewRectOnCanvas = this.rectOnCanvas({\n      rect: viewRect,\n      scale,\n      offset,\n    });\n\n    if (this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {\n      // 鼠标在视窗框内\n      this.canvas.style.cursor = 'grab';\n    } else {\n      // 鼠标在视窗框外但在画布内\n      this.canvas.style.cursor = 'default';\n    }\n  };\n\n  private isMouseInCanvas(event: MouseEvent | TouchEvent): boolean {\n    const canvasRect = this.canvas.getBoundingClientRect();\n    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);\n    return (\n      clientX >= canvasRect.left &&\n      clientX <= canvasRect.right &&\n      clientY >= canvasRect.top &&\n      clientY <= canvasRect.bottom\n    );\n  }\n\n  private updateScrollPosition(deltaX: number, deltaY: number): void {\n    const { scrollX, scrollY, zoom } = this.playgroundConfig.config;\n    this.playgroundConfig.updateConfig({\n      scrollX: scrollX + deltaX * zoom,\n      scrollY: scrollY + deltaY * zoom,\n    });\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { IPoint, Rectangle } from '@flowgram.ai/utils';\n\nexport namespace MinimapDraw {\n  /** 矩形是否合法 */\n  const isRectValid = (rect: Rectangle): boolean => rect.width > 0 && rect.height > 0;\n\n  /** 清空画布 */\n  export const clear = (params: {\n    canvas: HTMLCanvasElement;\n    context: CanvasRenderingContext2D;\n  }) => {\n    const { canvas, context } = params;\n    context.clearRect(0, 0, canvas.width, canvas.height);\n  };\n\n  /** 设置背景色 */\n  export const backgroundColor = (params: {\n    canvas: HTMLCanvasElement;\n    context: CanvasRenderingContext2D;\n    color: string;\n  }) => {\n    const { canvas, context, color } = params;\n    context.fillStyle = color;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n  };\n\n  /** 绘制矩形 */\n  export const rectangle = (params: {\n    context: CanvasRenderingContext2D;\n    rect: Rectangle;\n    color: string;\n  }): void => {\n    const { context, rect, color } = params;\n    if (!isRectValid(rect)) {\n      return;\n    }\n    context.fillStyle = color;\n    context.fillRect(rect.x, rect.y, rect.width, rect.height);\n  };\n\n  /** 绘制圆角矩形 */\n  export const roundRectangle = (params: {\n    context: CanvasRenderingContext2D;\n    rect: Rectangle;\n    color: string;\n    radius: number;\n    borderColor?: string;\n    borderWidth?: number;\n    borderDashLength?: number;\n  }): void => {\n    const { context, rect, color, radius, borderColor, borderDashLength, borderWidth = 0 } = params;\n    const { x, y, width, height } = rect;\n\n    if (!isRectValid(rect)) {\n      return;\n    }\n\n    // 开始新路径\n    context.beginPath();\n\n    // 绘制圆角矩形路径\n    const drawRoundedRectPath = (): void => {\n      context.moveTo(x + radius, y);\n      context.lineTo(x + width - radius, y);\n      context.quadraticCurveTo(x + width, y, x + width, y + radius);\n      context.lineTo(x + width, y + height - radius);\n      context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n      context.lineTo(x + radius, y + height);\n      context.quadraticCurveTo(x, y + height, x, y + height - radius);\n      context.lineTo(x, y + radius);\n      context.quadraticCurveTo(x, y, x + radius, y);\n      context.closePath();\n    };\n\n    drawRoundedRectPath();\n\n    // 填充矩形\n    context.fillStyle = color;\n    context.fill();\n\n    // 如果设置了边框，绘制边框\n    if (borderColor && borderWidth > 0) {\n      context.strokeStyle = borderColor;\n      context.lineWidth = borderWidth;\n\n      // 设置虚线样式\n      if (borderDashLength) {\n        context.setLineDash([borderDashLength, borderDashLength]);\n      } else {\n        context.setLineDash([]);\n      }\n\n      context.stroke();\n\n      // 重置虚线样式\n      context.setLineDash([]);\n    }\n  };\n\n  /** 绘制矩形外的蒙层 */\n  export const overlay = (params: {\n    canvas: HTMLCanvasElement;\n    context: CanvasRenderingContext2D;\n    offset: IPoint;\n    scale: number;\n    rect: Rectangle;\n    color: string;\n  }): void => {\n    const { canvas, context, offset, scale, rect, color } = params;\n\n    if (!isRectValid(rect)) {\n      return;\n    }\n\n    context.fillStyle = color;\n\n    // 上方蒙层\n    context.fillRect(0, 0, canvas.width, (rect.y + offset.y) * scale);\n\n    // 下方蒙层\n    context.fillRect(\n      0,\n      (rect.y + rect.height + offset.y) * scale,\n      canvas.width,\n      canvas.height - (rect.y + rect.height + offset.y) * scale\n    );\n\n    // 左侧蒙层\n    context.fillRect(\n      0,\n      (rect.y + offset.y) * scale,\n      (rect.x + offset.x) * scale,\n      rect.height * scale\n    );\n\n    // 右侧蒙层\n    context.fillRect(\n      (rect.x + rect.width + offset.x) * scale,\n      (rect.y + offset.y) * scale,\n      canvas.width - (rect.x + rect.width + offset.x) * scale,\n      rect.height * scale\n    );\n  };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { inject, injectable } from 'inversify';\nimport { Layer } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nimport { MinimapLayerOptions } from './type';\nimport { FlowMinimapService } from './service';\nimport { MinimapRender } from './component';\n\n@injectable()\nexport class FlowMinimapLayer extends Layer<MinimapLayerOptions> {\n  public static type = 'FlowMinimapLayer';\n\n  @inject(FlowMinimapService) private readonly service: FlowMinimapService;\n\n  public readonly node: HTMLElement;\n\n  private readonly className = 'gedit-minimap-layer gedit-playground-layer';\n\n  constructor() {\n    super();\n    this.node = domUtils.createDivWithClass(this.className);\n    this.node.style.zIndex = '9999';\n  }\n\n  public render(): JSX.Element {\n    if (this.options.disableLayer) {\n      return <></>;\n    }\n    return (\n      <MinimapRender\n        service={this.service}\n        panelStyles={this.options.panelStyles}\n        containerStyles={this.options.containerStyles}\n        inactiveStyle={this.options.inactiveStyle}\n      />\n    );\n  }\n}\n"],"mappings":"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","names":["MinimapDraw","React","inject","injectable","React","inject","injectable"]}

package/dist/index.d.mts

@@ -0,0 +1,153 @@
+import React, { CSSProperties } from 'react';
+import { Rectangle, IPoint, Disposable } from '@flowgram.ai/utils';
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer } from '@flowgram.ai/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface MinimapCanvasStyle {
+    canvasWidth: number;
+    canvasHeight: number;
+    canvasPadding: number;
+    canvasBackground: string;
+    canvasBorderRadius: number | undefined;
+    viewportBackground: string;
+    viewportBorderRadius: number | undefined;
+    viewportBorderColor: string;
+    viewportBorderWidth: number;
+    viewportBorderDashLength: number | undefined;
+    nodeColor: string;
+    nodeBorderRadius: number | undefined;
+    nodeBorderWidth: number;
+    nodeBorderColor: string | undefined;
+    overlayColor: string;
+}
+interface MinimapInactiveStyle {
+    scale: number;
+    opacity: number;
+    translateX: number;
+    translateY: number;
+}
+interface MinimapServiceOptions {
+    canvasStyle: Partial<MinimapCanvasStyle>;
+    canvasClassName: string;
+    enableInactiveDebounce: boolean;
+    enableActiveDebounce: boolean;
+    enableDisplayAllNodes: boolean;
+    activeDebounceTime: number;
+    inactiveDebounceTime: number;
+}
+interface MinimapLayerOptions {
+    disableLayer?: boolean;
+    panelStyles?: CSSProperties;
+    containerStyles?: CSSProperties;
+    inactiveStyle?: Partial<MinimapInactiveStyle>;
+}
+interface CreateMinimapPluginOptions extends MinimapLayerOptions, Partial<MinimapServiceOptions> {
+}
+interface MinimapRenderContext {
+    canvas: HTMLCanvasElement;
+    context2D: CanvasRenderingContext2D;
+    nodeRects: Rectangle[];
+    viewRect: Rectangle;
+    renderRect: Rectangle;
+    canvasRect: Rectangle;
+    scale: number;
+    offset: IPoint;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare class FlowMinimapService {
+    private readonly document;
+    private readonly entityManager;
+    private readonly playgroundConfig;
+    readonly canvas: HTMLCanvasElement;
+    readonly context2D: CanvasRenderingContext2D;
+    activated: boolean;
+    private onActiveCallbacks;
+    private options;
+    private toDispose;
+    private initialized;
+    private isDragging;
+    private style;
+    private dragStart?;
+    constructor();
+    init(options?: Partial<MinimapServiceOptions>): void;
+    dispose(): void;
+    setActivate(activate: boolean): void;
+    onActive: (callback: (activated: boolean) => void) => Disposable;
+    private initStyle;
+    private setDebounce;
+    /**
+     * 触发渲染
+     */
+    private render;
+    private _render;
+    private createRenderContext;
+    private renderCanvas;
+    private calculateScaleAndOffset;
+    private get nodes();
+    private nodeTransforms;
+    private renderRect;
+    private viewRect;
+    private mountListener;
+    /** 计算画布坐标系下的矩形 */
+    private rectOnCanvas;
+    private isPointInRect;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleWheel;
+    private handleStartDrag;
+    private handleDragging;
+    private handleEndDrag;
+    private handleCursor;
+    private isMouseInCanvas;
+    private updateScrollPosition;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface MinimapProps {
+    service: FlowMinimapService;
+    panelStyles?: CSSProperties;
+    containerStyles?: CSSProperties;
+    inactiveStyle?: Partial<MinimapInactiveStyle>;
+}
+declare const MinimapRender: React.FC<MinimapProps>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const MinimapDefaultCanvasStyle: MinimapCanvasStyle;
+declare const MinimapDefaultInactiveStyle: MinimapInactiveStyle;
+declare const MinimapDefaultOptions: MinimapServiceOptions;
+
+declare const createMinimapPlugin: _flowgram_ai_core.PluginCreator<CreateMinimapPluginOptions>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
+    static type: string;
+    private readonly service;
+    readonly node: HTMLElement;
+    private readonly className;
+    constructor();
+    render(): JSX.Element;
+}
+
+export { type CreateMinimapPluginOptions, FlowMinimapLayer, FlowMinimapService, type MinimapCanvasStyle, MinimapDefaultCanvasStyle, MinimapDefaultInactiveStyle, MinimapDefaultOptions, type MinimapInactiveStyle, type MinimapLayerOptions, MinimapRender, type MinimapRenderContext, type MinimapServiceOptions, createMinimapPlugin };

package/dist/index.d.ts

@@ -0,0 +1,153 @@
+import React, { CSSProperties } from 'react';
+import { Rectangle, IPoint, Disposable } from '@flowgram.ai/utils';
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { Layer } from '@flowgram.ai/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface MinimapCanvasStyle {
+    canvasWidth: number;
+    canvasHeight: number;
+    canvasPadding: number;
+    canvasBackground: string;
+    canvasBorderRadius: number | undefined;
+    viewportBackground: string;
+    viewportBorderRadius: number | undefined;
+    viewportBorderColor: string;
+    viewportBorderWidth: number;
+    viewportBorderDashLength: number | undefined;
+    nodeColor: string;
+    nodeBorderRadius: number | undefined;
+    nodeBorderWidth: number;
+    nodeBorderColor: string | undefined;
+    overlayColor: string;
+}
+interface MinimapInactiveStyle {
+    scale: number;
+    opacity: number;
+    translateX: number;
+    translateY: number;
+}
+interface MinimapServiceOptions {
+    canvasStyle: Partial<MinimapCanvasStyle>;
+    canvasClassName: string;
+    enableInactiveDebounce: boolean;
+    enableActiveDebounce: boolean;
+    enableDisplayAllNodes: boolean;
+    activeDebounceTime: number;
+    inactiveDebounceTime: number;
+}
+interface MinimapLayerOptions {
+    disableLayer?: boolean;
+    panelStyles?: CSSProperties;
+    containerStyles?: CSSProperties;
+    inactiveStyle?: Partial<MinimapInactiveStyle>;
+}
+interface CreateMinimapPluginOptions extends MinimapLayerOptions, Partial<MinimapServiceOptions> {
+}
+interface MinimapRenderContext {
+    canvas: HTMLCanvasElement;
+    context2D: CanvasRenderingContext2D;
+    nodeRects: Rectangle[];
+    viewRect: Rectangle;
+    renderRect: Rectangle;
+    canvasRect: Rectangle;
+    scale: number;
+    offset: IPoint;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare class FlowMinimapService {
+    private readonly document;
+    private readonly entityManager;
+    private readonly playgroundConfig;
+    readonly canvas: HTMLCanvasElement;
+    readonly context2D: CanvasRenderingContext2D;
+    activated: boolean;
+    private onActiveCallbacks;
+    private options;
+    private toDispose;
+    private initialized;
+    private isDragging;
+    private style;
+    private dragStart?;
+    constructor();
+    init(options?: Partial<MinimapServiceOptions>): void;
+    dispose(): void;
+    setActivate(activate: boolean): void;
+    onActive: (callback: (activated: boolean) => void) => Disposable;
+    private initStyle;
+    private setDebounce;
+    /**
+     * 触发渲染
+     */
+    private render;
+    private _render;
+    private createRenderContext;
+    private renderCanvas;
+    private calculateScaleAndOffset;
+    private get nodes();
+    private nodeTransforms;
+    private renderRect;
+    private viewRect;
+    private mountListener;
+    /** 计算画布坐标系下的矩形 */
+    private rectOnCanvas;
+    private isPointInRect;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleWheel;
+    private handleStartDrag;
+    private handleDragging;
+    private handleEndDrag;
+    private handleCursor;
+    private isMouseInCanvas;
+    private updateScrollPosition;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface MinimapProps {
+    service: FlowMinimapService;
+    panelStyles?: CSSProperties;
+    containerStyles?: CSSProperties;
+    inactiveStyle?: Partial<MinimapInactiveStyle>;
+}
+declare const MinimapRender: React.FC<MinimapProps>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const MinimapDefaultCanvasStyle: MinimapCanvasStyle;
+declare const MinimapDefaultInactiveStyle: MinimapInactiveStyle;
+declare const MinimapDefaultOptions: MinimapServiceOptions;
+
+declare const createMinimapPlugin: _flowgram_ai_core.PluginCreator<CreateMinimapPluginOptions>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
+    static type: string;
+    private readonly service;
+    readonly node: HTMLElement;
+    private readonly className;
+    constructor();
+    render(): JSX.Element;
+}
+
+export { type CreateMinimapPluginOptions, FlowMinimapLayer, FlowMinimapService, type MinimapCanvasStyle, MinimapDefaultCanvasStyle, MinimapDefaultInactiveStyle, MinimapDefaultOptions, type MinimapInactiveStyle, type MinimapLayerOptions, MinimapRender, type MinimapRenderContext, type MinimapServiceOptions, createMinimapPlugin };