fix(minimap): only render facade for minimap

antvis · Dec 26, 2019 · aa65629 · aa65629
1 parent afe58ac
commit aa65629
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 11 deletions.
diff --git a/packages/x6-react-shape/src/shape.ts b/packages/x6-react-shape/src/shape.ts
@@ -23,7 +23,7 @@ export class ReactShape extends Shape.Rectangle {
 
   drawBackground(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
     super.drawBackground(c, x, y, w, h)
-    if (!this.outline) {
+    if (!this.outline && !this.facade) {
       this.renderReactComponent()
     }
   }

diff --git a/packages/x6/src/addon/minimap/index.ts b/packages/x6/src/addon/minimap/index.ts
@@ -5,6 +5,7 @@ import { Rectangle, Point } from '../../struct'
 import { Disablable, DomEvent, Disposable, MouseEventEx } from '../../common'
 import { Shape, EllipseShape, RectangleShape, ImageShape } from '../../shape'
 import { PartialOptions, FullOptions, getOptions } from './option'
+import { MiniMapRenderder } from './renderer'
 
 export class MiniMap extends Disablable implements IMouseHandler {
   public source: Graph
@@ -54,6 +55,9 @@ export class MiniMap extends Disablable implements IMouseHandler {
 
   init(container: HTMLElement) {
     const showEdge = this.options.showEdge
+    const nodeStyle = this.options.nodeStyle
+    const edgeStyle = this.options.edgeStyle
+
     this.outline = new Graph(container, {
       model: this.source.getModel(),
       grid: false,
@@ -65,8 +69,22 @@ export class MiniMap extends Disablable implements IMouseHandler {
       labelsVisible: this.options.showLabel,
       backgroundColor:
         this.options.backgroundColor || this.source.backgroundColor,
-      nodeStyle: { ...this.options.nodeStyle },
-      edgeStyle: { ...this.options.edgeStyle },
+
+      createRenderer: () => new MiniMapRenderder(),
+
+      getCellStyle(cell) {
+        if (cell != null) {
+          const preset = this.model.isEdge(cell) ? edgeStyle : nodeStyle
+          const style = this.model.getStyle(cell) || {}
+          return {
+            ...style,
+            ...preset,
+          }
+        }
+
+        return {}
+      },
+
       isCellVisible(cell) {
         if (cell != null && cell.isEdge()) {
           return showEdge ? this.getNativeValue() : false

diff --git a/packages/x6/src/addon/minimap/renderer.ts b/packages/x6/src/addon/minimap/renderer.ts
@@ -0,0 +1,11 @@
+import { State } from '../../core/state'
+import { Renderer } from '../../core/renderer'
+
+export class MiniMapRenderder extends Renderer {
+  configShape(state: State) {
+    if (state.shape != null) {
+      state.shape.facade = true
+    }
+    super.configShape(state)
+  }
+}
diff --git a/packages/x6/src/graph/hook.ts b/packages/x6/src/graph/hook.ts
@@ -24,6 +24,7 @@ import {
   SelectCellHandler,
 } from '../handler'
 import { DataChange } from '../change'
+import { Style } from '../types'
 
 type Nilable<T> = T | null | undefined
 type BareHook<T> = (this: Graph) => Nilable<T>
@@ -287,6 +288,8 @@ export interface IHook {
     target: Cell | null,
   ) => Nilable<string>
 
+  getCellStyle: CellHook<Style>
+
   /**
    * Returns the string to be used as the link for the given cell.
    */

diff --git a/packages/x6/src/graph/style-accessor.ts b/packages/x6/src/graph/style-accessor.ts
@@ -1,5 +1,6 @@
 import { Cell } from '../core/cell'
 import { Style } from '../types'
+import { hook } from './decorator'
 import { BaseGraph } from './base-graph'
 
 export class StyleAccessor extends BaseGraph {
@@ -8,13 +9,7 @@ export class StyleAccessor extends BaseGraph {
     return state != null ? state.style : this.getCellStyle(cell)
   }
 
-  /**
-   * Returns a key-value pair object representing the cell style for
-   * the given cell.
-   *
-   * Note: You should try to use the cached style in the state before
-   * using this method.
-   */
+  @hook()
   getCellStyle(cell: Cell | null) {
     return this.styleManager.getCellStyle(cell)
   }

diff --git a/packages/x6/src/shape/html.ts b/packages/x6/src/shape/html.ts
@@ -19,7 +19,7 @@ export class HtmlShape extends RectangleShape {
     // 因为连线时首先触发了 Group 的连线判断，发现这个 Group 可以被连线，然后就自动
     // 创建一个 CellHighlight 组件来高亮了该 Group，就是因为忘记下面这行代码，导致
     // 所有的鼠标交互都被这个 CellHighlight 中的 foreignObject 捕获了。
-    if (!this.outline) {
+    if (!this.outline && !this.facade) {
       this.renderHtml()
     }
   }

diff --git a/packages/x6/src/shape/shape-base.ts b/packages/x6/src/shape/shape-base.ts
@@ -72,6 +72,11 @@ export class Shape extends Disposable {
    */
   outline: boolean = false
 
+  /**
+   * Render facede for minimap
+   */
+  facade: boolean = false
+
   /**
    * Specifies if pointer events should be handled.
    */