🎨 format code with 2 spaces

packages/graphin-components/src/components/context-menu/getPosition.ts

@@ -3,59 +3,59 @@ import { MenuStyle } from './useContextmenu';
 import { G6Event, Canvas } from './types';
 
 type Position = {
-    x: number;
-    y: number;
+  x: number;
+  y: number;
 };
 
 type CanvasBox = {
-    canvasWidth: number;
-    canvasHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
 };
 
 type MenuBox = {
-    menuWidth: number;
-    menuHeight: number;
+  menuWidth: number;
+  menuHeight: number;
 };
 
 const calculate = (
-    position: Position,
-    { canvasBox, menuBox }: { canvasBox: CanvasBox; menuBox: MenuBox },
+  position: Position,
+  { canvasBox, menuBox }: { canvasBox: CanvasBox; menuBox: MenuBox },
 ): Position => {
-    const { menuWidth, menuHeight } = menuBox;
-    const { canvasWidth, canvasHeight } = canvasBox;
-    let { x, y } = position;
-    if (menuHeight + y > canvasHeight) {
-        y -= menuHeight;
-    }
-    if (menuWidth + x > canvasWidth) {
-        x -= menuWidth;
-    }
-
-    return {
-        x,
-        y,
-    };
+  const { menuWidth, menuHeight } = menuBox;
+  const { canvasWidth, canvasHeight } = canvasBox;
+  let { x, y } = position;
+  if (menuHeight + y > canvasHeight) {
+    y -= menuHeight;
+  }
+  if (menuWidth + x > canvasWidth) {
+    x -= menuWidth;
+  }
+
+  return {
+    x,
+    y,
+  };
 };
 
 const getPosition = (graph: Graph, e: G6Event, menuItem: MenuStyle): Position => {
-    // FIXME G6 getBBox 类型不正确
-    const { maxY, minX } = e.item.getBBox() as any; // eslint-disable-line
-    const canvasXY = graph.getCanvasByPoint(minX, maxY);
-    const canvas = graph.get('canvas') as Canvas;
-
-    const menuBox = {
-        menuWidth: menuItem.width,
-        menuHeight: menuItem.height,
-    };
-    const canvasBox = {
-        canvasWidth: canvas.get('width') as number,
-        canvasHeight: canvas.get('height') as number,
-    };
-    const { x, y } = calculate(canvasXY, { menuBox, canvasBox });
-    return {
-        x,
-        y,
-    };
+  // FIXME G6 getBBox 类型不正确
+  const { maxY, minX } = e.item.getBBox() as any; // eslint-disable-line
+  const canvasXY = graph.getCanvasByPoint(minX, maxY);
+  const canvas = graph.get('canvas') as Canvas;
+
+  const menuBox = {
+    menuWidth: menuItem.width,
+    menuHeight: menuItem.height,
+  };
+  const canvasBox = {
+    canvasWidth: canvas.get('width') as number,
+    canvasHeight: canvas.get('height') as number,
+  };
+  const { x, y } = calculate(canvasXY, { menuBox, canvasBox });
+  return {
+    x,
+    y,
+  };
 };
 
 export default getPosition;

packages/graphin-components/src/components/context-menu/types.ts

@@ -2,15 +2,15 @@ import G6 from '@antv/g6';
 
 /** G6 没有暴露这个类型 */
 export interface G6Event extends MouseEvent {
-    item: G6.Node & G6.Edge;
-    target: Event['target'];
-    action?: string;
+  item: G6.Node & G6.Edge;
+  target: Event['target'];
+  action?: string;
 }
 
 type CanvasKey = keyof Canvas;
 
 export interface Canvas {
-    get(key: CanvasKey): Canvas[CanvasKey];
-    width: number;
-    height: number;
+  get(key: CanvasKey): Canvas[CanvasKey];
+  width: number;
+  height: number;
 }

packages/graphin-components/src/components/context-menu/useContextmenu.ts

@@ -4,83 +4,83 @@ import getPosition from './getPosition';
 import { ContextMenuProps } from './index';
 
 export type MenuStyle = {
-    width: number;
-    height: number;
+  width: number;
+  height: number;
 };
 
 interface State {
-    visible: boolean;
-    position: { x: number; y: number };
+  visible: boolean;
+  position: { x: number; y: number };
 }
 
 const useContextmenu = (props: ContextMenuProps): [State, React.Dispatch<React.SetStateAction<State>>] => {
-    const {
-        graph,
-        bindType = 'node',
-        render,
-        options,
-        onContextmenu = () => {
-            return true;
-        },
-    } = props;
+  const {
+    graph,
+    bindType = 'node',
+    render,
+    options,
+    onContextmenu = () => {
+      return true;
+    },
+  } = props;
 
-    const menuStyle: MenuStyle = { width: 250, height: 300 };
+  const menuStyle: MenuStyle = { width: 250, height: 300 };
 
-    if (options && Array.isArray(options)) {
-        menuStyle.height = options.length * 30;
-    }
+  if (options && Array.isArray(options)) {
+    menuStyle.height = options.length * 30;
+  }
 
-    if (render) {
-        const renderedMenu = render(props);
-        if (isValidElement(renderedMenu)) {
-            const menuProps = renderedMenu.props as { style: MenuStyle };
-            const { width, height } = (menuProps && menuProps.style) || menuStyle;
-            menuStyle.height = height;
-            menuStyle.width = width;
-        }
+  if (render) {
+    const renderedMenu = render(props);
+    if (isValidElement(renderedMenu)) {
+      const menuProps = renderedMenu.props as { style: MenuStyle };
+      const { width, height } = (menuProps && menuProps.style) || menuStyle;
+      menuStyle.height = height;
+      menuStyle.width = width;
     }
+  }
 
-    let keydown: boolean;
-    const KEYCODE = 17; // ctrl
+  let keydown: boolean;
+  const KEYCODE = 17; // ctrl
 
-    const [state, setState] = useState({
-        visible: false,
-        position: { x: 0, y: 0 },
-    });
-    useEffect(() => {
-        if (!graph) return;
-        graph.on(`${bindType}:contextmenu`, (e: G6Event) => {
-            if (keydown) {
-                e.preventDefault();
-                return;
-            }
+  const [state, setState] = useState({
+    visible: false,
+    position: { x: 0, y: 0 },
+  });
+  useEffect(() => {
+    if (!graph) return;
+    graph.on(`${bindType}:contextmenu`, (e: G6Event) => {
+      if (keydown) {
+        e.preventDefault();
+        return;
+      }
 
-            const newPosition = getPosition(graph, e, menuStyle);
-            const show = onContextmenu(e, graph);
-            setState({
-                ...state,
-                position: newPosition,
-                visible: show,
-            });
-        });
-        graph.on('canvas:click', () => {
-            setState({ ...state, visible: false });
-        });
-        graph.on('keyup', () => {
-            keydown = false;
-        });
-        // FIXME G6 Event 继承自 MouseEvent，KeyBoard Event 的属性不存在
-        // eslint-disable-next-line
-        graph.on('keydown', (e: any) => {
-            const code = e.keyCode || e.which;
-            if (code === KEYCODE) {
-                keydown = true;
-            } else {
-                keydown = false;
-            }
-        });
-    }, []);
-    return [state, setState];
+      const newPosition = getPosition(graph, e, menuStyle);
+      const show = onContextmenu(e, graph);
+      setState({
+        ...state,
+        position: newPosition,
+        visible: show,
+      });
+    });
+    graph.on('canvas:click', () => {
+      setState({ ...state, visible: false });
+    });
+    graph.on('keyup', () => {
+      keydown = false;
+    });
+    // FIXME G6 Event 继承自 MouseEvent，KeyBoard Event 的属性不存在
+    // eslint-disable-next-line
+    graph.on('keydown', (e: any) => {
+      const code = e.keyCode || e.which;
+      if (code === KEYCODE) {
+        keydown = true;
+      } else {
+        keydown = false;
+      }
+    });
+  }, []);
+  return [state, setState];
 };
 
 export default useContextmenu;

packages/graphin-components/src/components/toolbar/useFullscreen.ts

@@ -1,63 +1,63 @@
 import { useEffect, useState } from 'react';
 
 interface FunUseFullscreen {
-    (el?: HTMLElement): [boolean, () => void];
+  (el?: HTMLElement): [boolean, () => void];
 }
 
 const useFullscreen: FunUseFullscreen = el => {
-    const [fullscreen, setFullscreen] = useState(false);
-    const handleFullScreenChange = () => {
-        // if exit fullscreen
-        if (!document.fullscreenElement) {
-            setFullscreen(false);
-        }
-    };
-    const enterFullscreen = () => {
-        if (el && el.requestFullscreen) {
-            el.requestFullscreen()
-                .then(() => {
-                    setFullscreen(true);
-                })
-                .catch(err => {
-                    console.error('requestFullscreen error: ', err);
-                });
-        }
-    };
-    const exitFullscreen = () => {
-        if (document.exitFullscreen) {
-            document
-                .exitFullscreen()
-                .then(() => {
-                    setFullscreen(false);
-                })
-                .catch(err => {
-                    console.error('exitFullscreen error: ', err);
-                });
-        }
-    };
+  const [fullscreen, setFullscreen] = useState(false);
+  const handleFullScreenChange = () => {
+    // if exit fullscreen
+    if (!document.fullscreenElement) {
+      setFullscreen(false);
+    }
+  };
+  const enterFullscreen = () => {
+    if (el && el.requestFullscreen) {
+      el.requestFullscreen()
+        .then(() => {
+          setFullscreen(true);
+        })
+        .catch(err => {
+          console.error('requestFullscreen error: ', err);
+        });
+    }
+  };
+  const exitFullscreen = () => {
+    if (document.exitFullscreen) {
+      document
+        .exitFullscreen()
+        .then(() => {
+          setFullscreen(false);
+        })
+        .catch(err => {
+          console.error('exitFullscreen error: ', err);
+        });
+    }
+  };
 
-    const toggleFullscreen = () => {
-        // 切换是否全屏
-        if (!el) {
-            console.error('need dom');
-            return;
-        }
-        if (!fullscreen) {
-            enterFullscreen();
-        } else {
-            exitFullscreen();
-        }
-    };
+  const toggleFullscreen = () => {
+    // 切换是否全屏
+    if (!el) {
+      console.error('need dom');
+      return;
+    }
+    if (!fullscreen) {
+      enterFullscreen();
+    } else {
+      exitFullscreen();
+    }
+  };
 
-    useEffect(() => {
-        // 用户按Esc键退出全屏 或者 退出全屏都会触发这个事件
-        document.addEventListener('fullscreenchange', handleFullScreenChange, false);
-        return () => {
-            document.removeEventListener('fullscreenchange', handleFullScreenChange);
-        };
-    }, []);
+  useEffect(() => {
+    // 用户按Esc键退出全屏 或者 退出全屏都会触发这个事件
+    document.addEventListener('fullscreenchange', handleFullScreenChange, false);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    };
+  }, []);
 
-    return [fullscreen, toggleFullscreen];
+  return [fullscreen, toggleFullscreen];
 };
 
 export default useFullscreen;