✨ allow options.modes to be merge into g6 options

antvis · Jan 3, 2020 · 1a8f151 · 1a8f151
1 parent af66a47
commit 1a8f151
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 94 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,7 +1,6 @@
 module.exports = {
-    semi: true,
-    trailingComma: 'all',
-    singleQuote: true,
-    printWidth: 120,
-    tabWidth: 4,
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
 };
diff --git a/packages/graphin/src/controller/init.ts b/packages/graphin/src/controller/init.ts
@@ -2,111 +2,114 @@ import G6, { Graph as GraphType } from '@antv/g6';
 import { GraphinProps, ExtendedGraphOptions } from '../types';
 
 export interface BehaviorModeItem {
-    type: string;
-    [key: string]: string | number | boolean | undefined;
+  type: string;
+  [key: string]: string | number | boolean | undefined;
 }
 
 interface BehaviorsMode {
-    [mode: string]: (BehaviorModeItem | string)[];
+  [mode: string]: (BehaviorModeItem | string)[];
 }
 
 const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode: BehaviorsMode) => {
-    const { clientWidth, clientHeight } = graphDOM;
-    const defaultOptions: Partial<ExtendedGraphOptions> = {
-        // initial canvas
-        width: clientWidth,
-        height: clientHeight,
-        // initial viewport state:
-        zoom: 1,
-        pan: { x: clientWidth / 2, y: clientHeight / 2 },
-        // interaction options:
-        minZoom: 0.2,
-        maxZoom: 10,
-        disablePan: false, // 禁止画布平移
-        disableZoom: false, // 禁用画布缩放
-        disableDrag: false, // 禁用节点拖拽
-        delegateNode: false, // 节点代理
-        wheelSensitivity: 1, // 缩放的敏感度，我们在内部有不同设备的最佳匹配
-        // rendering options:
-        animate: true,
-        animateCfg: {
-            onFrame: null,
-            duration: 500,
-            easing: 'easeLinear',
-        },
-        plugins: [],
-    };
+  const { clientWidth, clientHeight } = graphDOM;
+  const defaultOptions: Partial<ExtendedGraphOptions> = {
+    // initial canvas
+    width: clientWidth,
+    height: clientHeight,
+    // initial viewport state:
+    zoom: 1,
+    pan: { x: clientWidth / 2, y: clientHeight / 2 },
+    // interaction options:
+    minZoom: 0.2,
+    maxZoom: 10,
+    disablePan: false, // 禁止画布平移
+    disableZoom: false, // 禁用画布缩放
+    disableDrag: false, // 禁用节点拖拽
+    delegateNode: false, // 节点代理
+    wheelSensitivity: 1, // 缩放的敏感度，我们在内部有不同设备的最佳匹配
+    // rendering options:
+    animate: true,
+    animateCfg: {
+      onFrame: null,
+      duration: 500,
+      easing: 'easeLinear',
+    },
+    plugins: [],
+    modes: {
+      default: [],
+    },
+  };
 
-    const options: Partial<ExtendedGraphOptions> = {
-        ...defaultOptions,
-        ...(props.options || {}),
-    };
+  const options: Partial<ExtendedGraphOptions> = {
+    ...defaultOptions,
+    ...(props.options || {}),
+  };
 
-    const {
-        pan,
-        zoom,
-        width,
-        height,
-        // interaction options:
-        minZoom,
-        maxZoom,
-        disableZoom, // 禁用画布缩放
-        disablePan, // 禁用移动画布
-        disableDrag, // 禁用节点拖拽
+  const {
+    pan,
+    zoom,
+    width,
+    height,
+    // interaction options:
+    minZoom,
+    maxZoom,
+    disableZoom, // 禁用画布缩放
+    disablePan, // 禁用移动画布
+    disableDrag, // 禁用节点拖拽
 
-        wheelSensitivity, // 缩放的敏感度，我们在内部有不同设备的最佳匹配
-        // rendering options:
-        animate,
-        animateCfg,
-        plugins,
-    } = options as ExtendedGraphOptions;
+    wheelSensitivity, // 缩放的敏感度，我们在内部有不同设备的最佳匹配
+    // rendering options:
+    animate,
+    animateCfg,
+    plugins,
+  } = options as ExtendedGraphOptions;
 
-    const defaultModes: (string | BehaviorModeItem)[] = ['click-select'];
+  const defaultModes: (string | BehaviorModeItem)[] = ['click-select'];
 
-    if (!disablePan) {
-        defaultModes.push('drag-canvas');
-    }
-    if (!disableDrag) {
-        defaultModes.push({
-            type: 'drag-node',
-            delegate: false,
-        });
-    }
-    if (!disableZoom) {
-        defaultModes.push({
-            type: 'zoom-canvas',
-            sensitivity: wheelSensitivity,
-        });
-    }
+  if (!disablePan) {
+    defaultModes.push('drag-canvas');
+  }
+  if (!disableDrag) {
+    defaultModes.push({
+      type: 'drag-node',
+      delegate: false,
+    });
+  }
+  if (!disableZoom) {
+    defaultModes.push({
+      type: 'zoom-canvas',
+      sensitivity: wheelSensitivity,
+    });
+  }
 
-    const instance: GraphType = new G6.Graph({
-        container: graphDOM,
-        renderer: 'canvas',
+  const instance: GraphType = new G6.Graph({
+    container: graphDOM,
+    renderer: 'canvas',
 
-        width,
-        height,
-        animate,
-        animateCfg,
-        minZoom,
-        maxZoom,
-        plugins,
-        modes: {
-            default: [...defaultModes, ...behaviorsMode.default],
-        },
-    });
+    width,
+    height,
+    animate,
+    animateCfg,
+    minZoom,
+    maxZoom,
+    plugins,
+    modes: {
+      default: [...defaultModes, ...options.modes!.default!, ...behaviorsMode.default],
+    },
+  });
 
-    // 平移
-    if (pan) instance.moveTo(pan.x, pan.y);
+  // 平移
+  if (pan) instance.moveTo(pan.x, pan.y);
 
-    // 缩放
-    if (zoom) instance.zoomTo(zoom, pan!);
+  // 缩放
+  if (zoom) instance.zoomTo(zoom, pan!);
 
-    return {
-        options: props.options || defaultOptions,
-        instance,
-        width: clientWidth,
-        height: clientHeight,
-    };
+  return {
+    options: props.options || defaultOptions,
+    instance,
+    width: clientWidth,
+    height: clientHeight,
+  };
 };
 
 export default initGraph;