Hello World
diff --git a/src/slidePane/__tests/index.test.tsx b/src/drawer/__tests/index.test.tsx
similarity index 87%
rename from src/slidePane/__tests/index.test.tsx
rename to src/drawer/__tests/index.test.tsx
index 2ff570254..154285153 100644
--- a/src/slidePane/__tests/index.test.tsx
+++ b/src/drawer/__tests/index.test.tsx
@@ -29,7 +29,7 @@ describe('test SlidePane ', () => {
});
test('should render mask correct ', () => {
const { unmount } = render(
Hello World);
- const dom = document.querySelector('.dtc-slide-pane-mask');
+ const dom = document.querySelector('.dtc-drawer-mask');
expect(dom).toBe(null);
unmount();
render(
@@ -37,7 +37,7 @@ describe('test SlidePane ', () => {
Hello World
);
- const domMask = document.querySelector('.dtc-slide-pane-mask');
+ const domMask = document.querySelector('.dtc-drawer-mask');
expect(domMask).not.toBe(null);
});
test('should render width correct', () => {
@@ -46,7 +46,7 @@ describe('test SlidePane ', () => {
Hello World
);
- expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
+ expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
width: '640px',
});
});
@@ -56,7 +56,7 @@ describe('test SlidePane ', () => {
Hello World
);
- expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
+ expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
width: '1256px',
});
});
@@ -72,10 +72,10 @@ describe('test SlidePane ', () => {
Hello World
);
- expect(document.querySelector('.dtc-slide-pane')).toHaveClass('root-className');
- expect(document.querySelector('.dtc-slide-pane-body')).toHaveClass('body-className');
- expect(document.querySelector('.dtc-slide-pane')).toHaveStyle({ color: 'red' });
- expect(document.querySelector('.dtc-slide-pane-body')).toHaveStyle({
+ expect(document.querySelector('.dtc-drawer')).toHaveClass('root-className');
+ expect(document.querySelector('.dtc-drawer-body')).toHaveClass('body-className');
+ expect(document.querySelector('.dtc-drawer')).toHaveStyle({ color: 'red' });
+ expect(document.querySelector('.dtc-drawer-body')).toHaveStyle({
backgroundColor: 'forestgreen',
});
unmount();
@@ -102,7 +102,7 @@ describe('test SlidePane ', () => {
}}
);
- expect(document.querySelector('.dtc-slide-pane-tabs')).not.toBe(null);
+ expect(document.querySelector('.dtc-drawer-tabs')).not.toBe(null);
expect(getByText('tab1')).toBeTruthy();
expect(getByText('基本信息')).toBeTruthy();
unmount();
diff --git a/src/slidePane/demos/basic.tsx b/src/drawer/demos/basic.tsx
similarity index 100%
rename from src/slidePane/demos/basic.tsx
rename to src/drawer/demos/basic.tsx
diff --git a/src/slidePane/demos/basicBanner.tsx b/src/drawer/demos/basicBanner.tsx
similarity index 100%
rename from src/slidePane/demos/basicBanner.tsx
rename to src/drawer/demos/basicBanner.tsx
diff --git a/src/slidePane/demos/basicBannerProps.tsx b/src/drawer/demos/basicBannerProps.tsx
similarity index 100%
rename from src/slidePane/demos/basicBannerProps.tsx
rename to src/drawer/demos/basicBannerProps.tsx
diff --git a/src/slidePane/demos/basicSize.tsx b/src/drawer/demos/basicSize.tsx
similarity index 95%
rename from src/slidePane/demos/basicSize.tsx
rename to src/drawer/demos/basicSize.tsx
index 5397fe779..e1a04fbce 100644
--- a/src/slidePane/demos/basicSize.tsx
+++ b/src/drawer/demos/basicSize.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Button, Space } from 'antd';
import { SlidePane } from 'dt-react-component';
-import { SlidePaneProps } from 'dt-react-component/slidePane';
+import { SlidePaneProps } from 'dt-react-component/drawer';
export default () => {
const [visible, setVisible] = useState(false);
diff --git a/src/slidePane/demos/basic_mask.tsx b/src/drawer/demos/basic_mask.tsx
similarity index 100%
rename from src/slidePane/demos/basic_mask.tsx
rename to src/drawer/demos/basic_mask.tsx
diff --git a/src/slidePane/demos/basic_top.tsx b/src/drawer/demos/basic_top.tsx
similarity index 100%
rename from src/slidePane/demos/basic_top.tsx
rename to src/drawer/demos/basic_top.tsx
diff --git a/src/slidePane/demos/customTitle.tsx b/src/drawer/demos/customTitle.tsx
similarity index 100%
rename from src/slidePane/demos/customTitle.tsx
rename to src/drawer/demos/customTitle.tsx
diff --git a/src/slidePane/demos/footer.tsx b/src/drawer/demos/footer.tsx
similarity index 100%
rename from src/slidePane/demos/footer.tsx
rename to src/drawer/demos/footer.tsx
diff --git a/src/slidePane/demos/tabs.tsx b/src/drawer/demos/tabs.tsx
similarity index 100%
rename from src/slidePane/demos/tabs.tsx
rename to src/drawer/demos/tabs.tsx
diff --git a/src/slidePane/demos/tabsControl.tsx b/src/drawer/demos/tabsControl.tsx
similarity index 100%
rename from src/slidePane/demos/tabsControl.tsx
rename to src/drawer/demos/tabsControl.tsx
diff --git a/src/slidePane/index.md b/src/drawer/index.md
similarity index 100%
rename from src/slidePane/index.md
rename to src/drawer/index.md
diff --git a/src/slidePane/index.tsx b/src/drawer/index.tsx
similarity index 84%
rename from src/slidePane/index.tsx
rename to src/drawer/index.tsx
index a0d7f8f74..9a0083809 100644
--- a/src/slidePane/index.tsx
+++ b/src/drawer/index.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties, useEffect, useState } from 'react';
import { Alert, AlertProps, Spin, Tabs } from 'antd';
import classNames from 'classnames';
import { omit } from 'lodash';
-import RcDrawer, { DrawerProps } from 'rc-drawer';
+import RcDrawer, { DrawerProps as AntdDrawerProps } from 'rc-drawer';
import motionProps from './motion';
import './style.scss';
@@ -16,7 +16,7 @@ type readOnlyTab = readonly Tab[];
type TabKey
= T[number]['key'];
-interface NormalSlidePane extends Omit {
+interface NormalDrawerProps extends Omit {
/** @deprecated */
visible?: boolean;
size?: 'small' | 'default' | 'large';
@@ -28,7 +28,7 @@ interface NormalSlidePane extends Omit {
banner?: AlertProps['message'] | Omit;
}
-interface TabsSlidePane extends Omit {
+interface TabsDrawerProps extends Omit {
tabs?: T;
defaultKey?: TabKey;
activeKey?: TabKey;
@@ -36,33 +36,33 @@ interface TabsSlidePane extends Omit) => void;
}
-function isFunction(props: SlidePaneProps): props is TabsSlidePane {
+function isFunction(props: DrawerProps): props is TabsDrawerProps {
return typeof props.children === 'function';
}
-function isTabMode(props: SlidePaneProps): props is TabsSlidePane {
+function isTabMode(props: DrawerProps): props is TabsDrawerProps {
return 'tabs' in props;
}
-function isControlled(props: SlidePaneProps): props is TabsSlidePane {
+function isControlled(props: DrawerProps): props is TabsDrawerProps {
return 'activeKey' in props;
}
-export type SlidePaneProps = TabsSlidePane | NormalSlidePane;
+export type DrawerProps = TabsDrawerProps | NormalDrawerProps;
-const getWidthFromSize = (size: NormalSlidePane['size']) => {
+const getWidthFromSize = (size: NormalDrawerProps['size']) => {
if (size === 'small') return 720;
if (size === 'large') return 1256;
return 1000;
};
-const isValidBanner = (banner: NormalSlidePane['banner']): banner is AlertProps['message'] => {
+const isValidBanner = (banner: NormalDrawerProps['banner']): banner is AlertProps['message'] => {
if (typeof banner === 'object') return React.isValidElement(banner);
return true;
};
-const SlidePane = (props: SlidePaneProps) => {
- const slidePrefixCls = 'dtc-slide-pane';
+const Drawer = (props: DrawerProps) => {
+ const slidePrefixCls = 'dtc-drawer';
const {
visible,
@@ -156,4 +156,4 @@ const SlidePane = (props: SlidePaneProps) => {
);
};
-export default SlidePane;
+export default Drawer;
diff --git a/src/slidePane/motion.ts b/src/drawer/motion.ts
similarity index 100%
rename from src/slidePane/motion.ts
rename to src/drawer/motion.ts
diff --git a/src/slidePane/style.scss b/src/drawer/style.scss
similarity index 99%
rename from src/slidePane/style.scss
rename to src/drawer/style.scss
index 9110d7ed8..d9c590130 100644
--- a/src/slidePane/style.scss
+++ b/src/drawer/style.scss
@@ -1,4 +1,4 @@
-$prefix: "dtc-slide-pane";
+$prefix: "dtc-drawer";
.#{$prefix} {
top: 0;
diff --git a/src/index.ts b/src/index.ts
index a1b7bf6b8..bb7e98a4f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export { default as ContentLayout } from './contentLayout';
export { default as ContextMenu } from './contextMenu';
export { default as useCookieListener } from './cookies';
export { default as Copy } from './copy';
+export { default as Drawer } from './drawer';
export { default as Dropdown } from './dropdown';
export { default as EllipsisText } from './ellipsisText';
export { default as Empty } from './empty';
@@ -19,18 +20,16 @@ export { default as Input } from './input';
export { default as KeyEventListener } from './keyEventListener';
export { default as MarkdownRender } from './markdownRender';
export { default as Modal } from './modal';
-export { default as MxGraphContainer, WIDGETS_PREFIX } from './mxGraph';
export { default as NotFound } from './notFound';
export { default as ProgressBar } from './progressBar';
export { default as ProgressLine } from './progressLine';
export { default as Resize } from './resize';
-export { default as SlidePane } from './slidePane';
export { default as SpreadSheet } from './spreadSheet';
export { default as StatusTag } from './statusTag';
-export { default as useWindowSwitchListener } from './switchWindow';
export { default as Table } from './table';
export { default as TinyTag } from './tinyTag';
export { default as useDebounce } from './useDebounce';
export { default as useIntersectionObserver } from './useIntersectionObserver';
export { default as useList } from './useList';
export { default as useModal } from './useModal';
+export { default as useWindowSwitchListener } from './useWindowSwitchListener';
diff --git a/src/mxGraph/__tests__/__snapshots__/index.test.tsx.snap b/src/mxGraph/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 7149f0f22..000000000
--- a/src/mxGraph/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,469 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`The mxGraph Container test Match Snapshot 1`] = `
-
-
-
-`;
-
-exports[`The mxGraph Container test Match Snapshot with data and toolbar 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
test
');
-
- graph.insertVertex(
- graph.getDefaultParent(),
- '',
- '',
- 0,
- 0,
- MxFactory.VertexSize.width,
- MxFactory.VertexSize.height
- );
-
- expect(container.querySelector('div[data-testid=mxGraph]')).toBeInTheDocument();
- });
-});
diff --git a/src/mxGraph/__tests__/index.test.tsx b/src/mxGraph/__tests__/index.test.tsx
deleted file mode 100644
index c38d6a981..000000000
--- a/src/mxGraph/__tests__/index.test.tsx
+++ /dev/null
@@ -1,744 +0,0 @@
-import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import MxGraphContainer, { IContainerRef, WIDGETS_PREFIX } from '../index';
-
-describe('The mxGraph Container test', () => {
- afterEach(() => {
- cleanup();
- });
-
- test('Match Snapshot', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('Match Snapshot with data and toolbar', () => {
- const { asFragment } = render(
- {
- return (
- <>
-
-
-
- );
- }}
- />
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('Match Snapshot with data and widgets', () => {
- const { asFragment, container } = render(
- (
- <>
- 拖拽组件
-
-
- )}
- />
- );
-
- const widgetsParentNode = container.querySelector('.dtc-graph-widgets')!;
- // NOTHING happened
- fireEvent.contextMenu(widgetsParentNode);
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('Match Snapshot with style and bottom status bar', () => {
- const { asFragment } = render(
-
- {() => This is legend
}
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('Should support all keyboard binding events', () => {
- const bindKeyFn = jest.fn();
- render(
- [
- {
- id: 'bindKey',
- method: 'bindKey',
- keyCode: 8,
- func: bindKeyFn,
- },
- {
- id: 'bindShiftKey',
- method: 'bindShiftKey',
- keyCode: 8,
- func: bindKeyFn,
- },
- {
- id: 'bindControlKey',
- method: 'bindControlKey',
- keyCode: 8,
- func: bindKeyFn,
- },
- {
- id: 'bindControlShiftKey',
- method: 'bindControlShiftKey',
- keyCode: 8,
- func: bindKeyFn,
- },
- ]}
- />
- );
-
- expect(bindKeyFn).not.toBeCalled();
- fireEvent.keyDown(document.documentElement, {
- key: 'Backspace',
- keyCode: 8,
- });
- expect(bindKeyFn).toBeCalledTimes(1);
-
- fireEvent.keyDown(document.documentElement, {
- shiftKey: true,
- key: 'Backspace',
- keyCode: 8,
- });
- expect(bindKeyFn).toBeCalledTimes(2);
-
- fireEvent.keyDown(document.documentElement, {
- ctrlKey: true,
- key: 'Backspace',
- keyCode: 8,
- });
- expect(bindKeyFn).toBeCalledTimes(3);
-
- fireEvent.keyDown(document.documentElement, {
- ctrlKey: true,
- key: 'Backspace',
- keyCode: 8,
- });
- expect(bindKeyFn).toBeCalledTimes(4);
-
- fireEvent.keyDown(document.documentElement, {
- shiftKey: true,
- ctrlKey: true,
- key: 'Backspace',
- keyCode: 8,
- });
- expect(bindKeyFn).toBeCalledTimes(5);
- });
-
- test('Should support to set loading', () => {
- const { getByText } = render(
-
- );
- expect(getByText('Loading...')).toBeInTheDocument();
- });
-
- test('Should support to change the vertex size', () => {
- const { container, rerender } = render(
- ``}
- />
- );
- expect(container.querySelector('rect[width="210"]')).toBeInTheDocument();
-
- rerender(
- ``}
- />
- );
- // All vertexes are with 250px's width
- expect(container.querySelector('rect[width="210"]')).toBeNull();
- expect(container.querySelector('rect[width="250"]')).toBeInTheDocument();
-
- // Dynamic control the sizes of each vertexes
- rerender(
- ({
- width: data.taskId === 1 ? 250 : 210,
- height: 50,
- })}
- onRenderCell={(cell) => ``}
- />
- );
- expect(container.querySelector('rect[width="210"]')).toBeInTheDocument();
- expect(container.querySelector('rect[width="250"]')).toBeInTheDocument();
- });
-
- test('Should render both parent node and children node', () => {
- const { getByTestId } = render(
- ``}
- />
- );
- expect(getByTestId('1')).toBeInTheDocument();
- expect(getByTestId('2')).toBeInTheDocument();
- expect(getByTestId('3')).toBeInTheDocument();
- });
-
- test('Should listen the container changed', () => {
- const mockContainerChanged = jest.fn();
- const { container } = render(
- ``}
- />
- );
-
- const mxGraphContainer = container.querySelector('div[tabindex="-1"]')!;
- fireEvent.scroll(mxGraphContainer, { target: { scrollY: 100 } });
-
- expect(mockContainerChanged).toBeCalled();
- });
-
- test('Should support to set the layout orientation', () => {
- const { getByTestId, rerender } = render(
- ``}
- />
- );
- const getVertex = (text: string) =>
- getByTestId(text)!.parentElement!.parentElement!.parentElement!;
-
- // The default orientation of layout is north
- // So the layout should be like:
- // 3
- // |
- // 1
- // |
- // 2
- expect(parseInt(getVertex('1').style.top, 10)).toBeLessThan(
- parseInt(getVertex('2').style.top, 10)
- );
- expect(parseInt(getVertex('3').style.top, 10)).toBeLessThan(
- parseInt(getVertex('1').style.top, 10)
- );
- expect(parseInt(getVertex('1').style.left, 10)).toEqual(
- parseInt(getVertex('2').style.left, 10)
- );
- expect(parseInt(getVertex('2').style.left, 10)).toEqual(
- parseInt(getVertex('3').style.left, 10)
- );
-
- rerender(
- ``}
- />
- );
-
- // The layout should be like:
- // 3-1-2
- expect(parseInt(getVertex('1').style.top, 10)).toEqual(
- parseInt(getVertex('2').style.top, 10)
- );
- expect(parseInt(getVertex('2').style.top, 10)).toEqual(
- parseInt(getVertex('3').style.top, 10)
- );
- expect(parseInt(getVertex('3').style.left, 10)).toBeLessThan(
- parseInt(getVertex('1').style.left, 10)
- );
- expect(parseInt(getVertex('1').style.left, 10)).toBeLessThan(
- parseInt(getVertex('2').style.left, 10)
- );
- });
-
- test('Should support call onClick', () => {
- const clickFn = jest.fn();
- const { container } = render(
-
- );
-
- const svg = container.querySelector('svg')!;
- fireEvent.mouseDown(svg.querySelector('g[transform="translate(0.5,0.5)"]')!, {
- clientX: 200,
- clientY: 120,
- });
- fireEvent.mouseUp(svg.querySelector('g[transform="translate(0.5,0.5)"]')!, {
- clientX: 200,
- clientY: 120,
- });
- expect(clickFn).toBeCalled();
- });
-
- test('Should support call onContextMenu', async () => {
- const menuFn = jest.fn();
- const { container, getByText } = render(
- [
- {
- id: 'test',
- title: '测试',
- },
- {
- id: 'disabled',
- title: '禁用',
- disabled: true,
- },
- {
- id: 'func',
- title: 'func',
- callback: menuFn,
- },
- {
- id: 'subMenu',
- title: 'subMenu',
- children: [
- {
- id: 'subMenu-1',
- title: 'subMenu-1',
- },
- ],
- },
- ]}
- onRenderCell={(cell) => ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- fireEvent.mouseDown(
- svg.querySelector('g[transform="translate(0.5,0.5)"]')!,
- // Both contextMenu and click event are called by mousedown and mouseup
- // They distinguish through which property, refer by: mxEvent.isRightMouseButton
- { clientX: 200, clientY: 120, which: 3 }
- );
- fireEvent.mouseUp(svg.querySelector('g[transform="translate(0.5,0.5)"]')!, {
- clientX: 200,
- clientY: 120,
- });
-
- await waitFor(
- () => {
- expect(document.querySelector('table.mxPopupMenu')).toBeInTheDocument();
-
- expect(getByText('禁用').classList.contains('mxDisabled')).toBeTruthy();
-
- // The mousemove is used in mxGraph to mock a hover behavior
- fireEvent.mouseMove(getByText('subMenu'));
- expect(getByText('subMenu-1')).toBeInTheDocument();
-
- // The click is mocked by mousedown and mouseup
- fireEvent.mouseDown(getByText('func'));
- fireEvent.mouseUp(getByText('func'));
- expect(menuFn).toBeCalled();
-
- // After clicking, popup should be disappeared
- expect(document.querySelector('table.mxPopupMenu')).toBeNull();
- },
- { timeout: 500 }
- );
- });
-
- test('Should support to render the keyboard event in contextMenu', async () => {
- const keydownFunc = jest.fn();
- const { container, getByText } = render(
- [
- {
- id: 'test',
- title: '测试',
- },
- ]}
- onKeyDown={() => [
- {
- // Keep the same id with the context menu
- // So the item with same id in context menu will call keydown's event
- id: 'test',
- method: 'bindControlKey',
- keyCode: 8,
- func: keydownFunc,
- },
- ]}
- onRenderCell={(cell) => ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- fireEvent.mouseDown(
- svg.querySelector('g[transform="translate(0.5,0.5)"]')!,
- // Both contextMenu and click event are called by mousedown and mouseup
- // They distinguish through which property, refer by: mxEvent.isRightMouseButton
- { clientX: 200, clientY: 120, which: 3 }
- );
- fireEvent.mouseUp(svg.querySelector('g[transform="translate(0.5,0.5)"]')!, {
- clientX: 200,
- clientY: 120,
- });
-
- await waitFor(
- () => {
- expect(document.querySelector('table.mxPopupMenu')).toBeInTheDocument();
-
- // mxGraph detects the same id in keydown, so this menu has character codes
- expect(getByText('测试(Meta ⌫)')).toBeInTheDocument();
-
- fireEvent.mouseDown(getByText('测试(Meta ⌫)'));
- fireEvent.mouseUp(getByText('测试(Meta ⌫)'));
- expect(keydownFunc).toBeCalled();
- },
- { timeout: 500 }
- );
- });
-
- test('Should ONLY render one popup menu in graph', async () => {
- const { container } = render(
- [
- {
- id: 'test',
- title: '测试',
- },
- ]}
- onRenderCell={(cell) => ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- const vertexes = svg.querySelectorAll('g[transform="translate(0.5,0.5)"]');
- fireEvent.mouseDown(
- vertexes[0],
- // Both contextMenu and click event are called by mousedown and mouseup
- // They distinguish through which property, refer by: mxEvent.isRightMouseButton
- { clientX: 200, clientY: 120, which: 3 }
- );
- fireEvent.mouseUp(vertexes[0], { clientX: 200, clientY: 120 });
-
- await waitFor(
- async () => {
- expect(document.querySelectorAll('table.mxPopupMenu').length).toBe(1);
-
- fireEvent.mouseDown(
- vertexes[1],
- // Both contextMenu and click event are called by mousedown and mouseup
- // They distinguish through which property, refer by: mxEvent.isRightMouseButton
- { clientX: 200, clientY: 120, which: 3 }
- );
- fireEvent.mouseUp(vertexes[1], { clientX: 200, clientY: 120 });
-
- // Call context menu in other vertex, there still only is one popup in graph
- await waitFor(
- () => {
- expect(document.querySelectorAll('table.mxPopupMenu').length).toBe(1);
- },
- { timeout: 500 }
- );
- },
- { timeout: 500 }
- );
- });
-
- test('Should support to call onDoubleClick', () => {
- const doubleClickFn = jest.fn();
- const { container } = render(
- ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- const vertex = svg.querySelectorAll('g[transform="translate(0.5,0.5)"]')[0];
-
- fireEvent.doubleClick(vertex);
-
- expect(doubleClickFn).toBeCalled();
- });
-
- test('Should support to highlight cells', () => {
- const { container } = render(
- ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- const vertex = svg.querySelectorAll('g[transform="translate(0.5,0.5)"]')[0];
- const edge = svg.querySelectorAll('g[transform="translate(0.5,0.5)"]')[2];
-
- fireEvent.mouseDown(vertex);
- fireEvent.mouseUp(vertex);
-
- const getActiveEdgeLength = () => {
- return Array.prototype.filter.call(
- svg.querySelectorAll('path[fill="none"]'),
- (dom: SVGPathElement) => {
- return (
- dom.getAttribute('stroke') === '#3f87ff' &&
- dom.getAttribute('stroke-width') === '2'
- );
- }
- ).length;
- };
- const getActiveVertexLength = () => {
- return svg.querySelectorAll('rect[stroke="transparent"]').length;
- };
-
- // Active the in and out edges both, and current selected vertex
- expect(getActiveEdgeLength()).toBe(2);
- expect(getActiveVertexLength()).toBe(1);
-
- fireEvent.mouseDown(svg);
- fireEvent.mouseUp(svg);
-
- // Click on graph will unselect all cells
- expect(getActiveEdgeLength()).toBe(0);
- expect(getActiveVertexLength()).toBe(0);
-
- fireEvent.mouseDown(edge);
- fireEvent.mouseUp(edge);
-
- // Click on edge will ONLY active current edge
- expect(getActiveEdgeLength()).toBe(1);
- expect(getActiveVertexLength()).toBe(0);
- });
-
- test('Should support to drag cells', () => {
- const cellChangedFn = jest.fn();
- const { container } = render(
- ``}
- />
- );
-
- const svg = container.querySelector('svg')!;
- const vertex = svg.querySelectorAll('g[transform="translate(0.5,0.5)"]')[0];
-
- fireEvent.mouseDown(vertex);
- fireEvent.mouseMove(vertex, { clientX: 100, clientY: 0 });
- fireEvent.mouseUp(vertex);
-
- expect(cellChangedFn).toBeCalled();
- });
-
- test('Should support to call ref functions', async () => {
- const refMock: { current: IContainerRef } = { current: null } as any;
- render(
- ``}
- />
- );
-
- expect(refMock.current.getCells().length).toBe(5);
- expect(refMock.current.getSelectedCell()!.value.taskId).toBe(1);
-
- refMock.current.insertCell({ taskId: 4 }, 0, 0);
- expect(refMock.current.getCells().length).toBe(6);
-
- refMock.current.updateCell('7', { test: 1 });
- expect(refMock.current.getCells()!.find((i) => i.id === '7')!.value).toEqual({
- taskId: 4,
- test: 1,
- });
-
- refMock.current.removeCell('7');
- expect(refMock.current.getCells().find((i) => i.id === '7')).toBeUndefined();
-
- const cells = refMock.current.getCells();
- cells.forEach((cell) => {
- refMock.current.removeCell(cell.id);
- });
- expect(refMock.current.getCells().length).toBe(0);
- refMock.current.setCells(cells);
- expect(refMock.current.getCells().length).toBe(5);
-
- const mockScrollTo = jest.fn();
- HTMLElement.prototype.scrollTo = mockScrollTo;
- refMock.current.setView({
- scale: 1,
- scrollTop: 100,
- scrollLeft: 100,
- });
-
- await waitFor(
- () => {
- expect(mockScrollTo).toBeCalled();
- },
- { timeout: 100 }
- );
- });
-
- test('Should support to drag widgets into graph', () => {
- const dropWidgetsFn = jest.fn();
- const { container } = render(
- (
- <>
- 拖拽组件
-
-
- )}
- />
- );
- const svg = container.querySelector('svg')!;
- const mockEleFromPoint = jest
- .fn()
- .mockImplementationOnce(() => null)
- .mockImplementationOnce(() => container)
- .mockImplementation(() => svg);
- document.elementFromPoint = mockEleFromPoint;
-
- const widget = container.querySelector('.' + WIDGETS_PREFIX + '__')!;
- const dragWidget = () => {
- fireEvent.mouseDown(widget);
- fireEvent.mouseMove(svg, {
- clientX: 0,
- clientY: 0,
- });
- fireEvent.mouseUp(svg);
- };
-
- dragWidget();
- expect(mockEleFromPoint).toBeCalled();
- // The elementFromPoint returns null at first, so it won't call onDropWidgets
- expect(dropWidgetsFn).not.toBeCalled();
-
- dragWidget();
- // Although the elementFromPoint returns container, but is't not the ancestor node about graph
- // So it won't call onDropWidgets
- expect(dropWidgetsFn).not.toBeCalled();
-
- dragWidget();
- expect(dropWidgetsFn).toBeCalled();
- });
-});
diff --git a/src/mxGraph/demos/basic.tsx b/src/mxGraph/demos/basic.tsx
deleted file mode 100644
index c1e0ee42d..000000000
--- a/src/mxGraph/demos/basic.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { MxGraphContainer } from 'dt-react-component';
-
-import './index.scss';
-
-export default () => {
- return (
- 'whiteSpace=wrap;fillColor=#f5ffe6;strokeColor=#12bc6a;'}
- onRenderActions={(graph) => (
-
-
- graph.zoomIn()} />
-
-
- graph.zoomOut()} />
-
-
- )}
- onRenderCell={(cell) => {
- if (cell.vertex && cell.value) {
- const task = cell.value;
- if (task) {
- return ReactDOMServer.renderToString(
-
- {task.taskName}
-
- {task.taskId}
-
- );
- }
- }
- return '';
- }}
- onRenderTooltips={(cell) => {
- if (cell.vertex && cell.value) {
- return cell.value.taskName;
- }
- return '';
- }}
- />
- );
-};
diff --git a/src/mxGraph/demos/context.tsx b/src/mxGraph/demos/context.tsx
deleted file mode 100644
index 87655e4c4..000000000
--- a/src/mxGraph/demos/context.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { MxGraphContainer } from 'dt-react-component';
-
-import './index.scss';
-
-export default () => {
- return (
- {
- const fillColors = ['#fffbe6', '#e6f6ff', '#f5ffe6', '#fff1f0', '#e6e9f2'];
- const strokeColors = ['#fdb313', '#3f87ff', '#12bc6a', '#fe615c', '#5b6da6'];
- return (
- 'whiteSpace=wrap;fillColor=' +
- fillColors[data.taskType - 1] +
- ';strokeColor=' +
- strokeColors[data.taskType - 1] +
- ';'
- );
- }}
- onContextMenu={(data, cell) => {
- const titles = ['执行中', '部署中', '取消中', '运行成功', '运行失败'];
- return cell.vertex
- ? [
- {
- id: 'operation',
- title: titles[data.taskType - 1],
- callback: () => {
- alert('当前 vertex 处于' + titles[data.taskType - 1]);
- },
- },
- {
- id: 'remove',
- title: '删除当前节点',
- callback: () => {
- console.log('删除');
- },
- },
- ]
- : [
- {
- id: 'remove',
- title: '删除连线',
- callback: () => {
- console.log('删除');
- },
- },
- ];
- }}
- onRenderCell={(cell) => {
- if (cell.vertex && cell.value) {
- const task = cell.value;
- if (task) {
- return ReactDOMServer.renderToString(
-
- {task.taskName}
-
- {task.taskId}
-
- );
- }
- }
- return '';
- }}
- />
- );
-};
diff --git a/src/mxGraph/demos/defaultGraphData.ts b/src/mxGraph/demos/defaultGraphData.ts
deleted file mode 100644
index 876fd9d55..000000000
--- a/src/mxGraph/demos/defaultGraphData.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export default [
- {
- metaId: 'test-1',
- metaInfo: {
- name: 'tableName',
- type: 1,
- },
- childNode: [
- {
- metaId: 'test-2',
- metaInfo: {
- name: 'tableName2',
- type: 2,
- },
- },
- {
- metaId: 'test-3',
- metaInfo: {
- name: 'tableName3',
- type: 2,
- },
- },
- {
- metaId: 'test-4',
- metaInfo: {
- name: 'tableName4',
- type: 2,
- },
- },
- {
- metaId: 'test-5',
- metaInfo: {
- name: 'tableName5',
- type: 2,
- },
- },
- ],
- parentNode: [
- {
- metaId: 'test-6',
- metaInfo: {
- name: 'tableName6',
- type: 3,
- },
- },
- {
- metaId: 'test-7',
- metaInfo: {
- name: 'tableName7',
- type: 3,
- },
- },
- {
- metaId: 'test-8',
- metaInfo: {
- name: 'tableName8',
- type: 3,
- },
- },
- {
- metaId: 'test-9',
- metaInfo: {
- name: 'tableName9',
- type: 3,
- },
- },
- ],
- },
-];
diff --git a/src/mxGraph/demos/drag.tsx b/src/mxGraph/demos/drag.tsx
deleted file mode 100644
index bd6905781..000000000
--- a/src/mxGraph/demos/drag.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { MxGraphContainer, WIDGETS_PREFIX } from 'dt-react-component';
-
-import './index.scss';
-
-export default () => {
- return (
- {
- console.group('onDropWidgets');
- console.log('node:', node);
- console.log('graph:', graph);
- console.log('target:', target);
- console.log('x and y:', x, y);
- console.groupEnd();
- const taskId = 'randomId__' + new Date().valueOf();
- graph.insertVertex(
- graph.getDefaultParent(),
- taskId,
- {
- taskName: node.innerText,
- taskId,
- },
- x,
- y,
- 210,
- 50,
- 'whiteSpace=wrap;fillColor=#f5ffe6;strokeColor=#12bc6a;'
- );
- }}
- onCellsChanged={(cell) => {
- console.group('onCellsChanged');
- console.log('cell:', cell);
- console.groupEnd();
- }}
- onDrawVertex={() => 'whiteSpace=wrap;fillColor=#f5ffe6;strokeColor=#12bc6a;'}
- onRenderCell={(cell) => {
- if (cell.vertex && cell.value) {
- const task = cell.value;
- if (task) {
- return ReactDOMServer.renderToString(
-
- {task.taskName}
-
- {task.taskId}
-
- );
- }
- }
- return '';
- }}
- onGetPreview={(node) => {
- const previewDragTarget = document.createElement('div');
- previewDragTarget.style.width = '210px';
- previewDragTarget.style.height = '50px';
- previewDragTarget.style.border = '1px solid #ddd';
- previewDragTarget.style.textAlign = 'center';
- previewDragTarget.dataset.name = node.innerText;
- previewDragTarget.innerHTML = ReactDOMServer.renderToString(
- <>
- 新节点
-
- {node.innerText}
-
- );
- return previewDragTarget;
- }}
- onRenderWidgets={() => {
- return (
- <>
- 拖拽组件
-
- -
- 你好1
-
- -
- 你好2
-
- -
- 你好3
-
- -
- 你好4
-
-
-
- );
- }}
- />
- );
-};
diff --git a/src/mxGraph/demos/event.tsx b/src/mxGraph/demos/event.tsx
deleted file mode 100644
index 27470c398..000000000
--- a/src/mxGraph/demos/event.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { MxGraphContainer } from 'dt-react-component';
-
-import './index.scss';
-
-export default () => {
- return (
- {
- console.group('onClick');
- console.log('当前点击的 cell 是:', cell);
- console.log('当前点击的 graph 是:', graph);
- console.log('当前点击的 dom 是:', event.target);
- console.groupEnd();
- }}
- onDoubleClick={(cell, graph, event) => {
- console.group('onDoubleClick');
- console.log('当前点击的 cell 是:', cell);
- console.log('当前点击的 graph 是:', graph);
- console.log('当前点击的 dom 是:', event.target);
- console.groupEnd();
- }}
- onContainerChanged={(geo) => {
- console.group('onContainerChanged');
- console.log(geo);
- console.groupEnd();
- }}
- onKeyDown={() => {
- return [
- {
- id: 'remove',
- method: 'bindControlKey',
- keyCode: 8,
- func: () => {
- alert('删除');
- },
- },
- ];
- }}
- onContextMenu={() => {
- return [{ id: 'remove', title: '删除' }];
- }}
- onDrawVertex={() => 'whiteSpace=wrap;fillColor=#f5ffe6;strokeColor=#12bc6a;'}
- onRenderCell={(cell) => {
- if (cell.vertex && cell.value) {
- const task = cell.value;
- if (task) {
- return ReactDOMServer.renderToString(
-
- {task.taskName}
-
- {task.taskId}
-
- );
- }
- }
- return '';
- }}
- />
- );
-};
diff --git a/src/mxGraph/demos/expand.tsx b/src/mxGraph/demos/expand.tsx
deleted file mode 100644
index 238331ad6..000000000
--- a/src/mxGraph/demos/expand.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { MxGraphContainer } from 'dt-react-component';
-
-import './index.scss';
-
-export default () => {
- const [loading, setLoading] = useState(false);
- const [currentSelect, setCurrent] = useState('b');
- const [graphData, setGraphData] = useState([
- {
- metaId: '1',
- metaInfo: {
- name: 'tableName',
- type: 1,
- list: ['a', 'b', 'c', 'd'],
- },
- childNode: [
- {
- metaId: '2',
- metaInfo: {
- name: 'tableName',
- type: 2,
- list: ['1-c'],
- },
- },
- {
- metaId: '3',
- metaInfo: {
- name: 'tableName',
- type: 2,
- list: ['1-c'],
- },
- },
- ],
- },
- ]);
-
- const handleGetSize = (data: any) => {
- if (data.metaId === '1') {
- return {
- width: 194,
- height: 120,
- };
- }
- return {
- width: 196,
- height: 54,
- };
- };
-
- return (
- ({
- [mxConstants.STYLE_ROUNDED]: 1,
- [mxConstants.STYLE_CURVED]: 0,
- [mxConstants.STYLE_EDGE]: mxEdgeStyle.EntityRelation,
- }),
- getPortOffset: (edgeState, source) => {
- const container =
- edgeState[
- source ? 'visibleSourceState' : 'visibleTargetState'
- ].text.node.querySelectorAll('div')[1];
- const portDom =
- container.querySelector(
- 'li[data-id=' + currentSelect + ']'
- ) || container.querySelector('li');
-
- return portDom!;
- },
- }}
- vertexKey="metaId"
- onClick={(cell, graph, event) => {
- if (cell.value.metaId === '1') {
- setLoading(true);
- setTimeout(() => {
- const nextGraph: any = [
- {
- ...graphData[0],
- childNode: [],
- parentNode: [],
- },
- ];
- const handler = Math.random() > 0.5 ? 'childNode' : 'parentNode';
- const length = Math.floor(Math.random() * 5 + 1);
- nextGraph[0][handler].push(
- ...new Array(length).fill({}).map((_, idx) => {
- return {
- metaId: '1-' + idx,
- metaInfo: {
- name: 'tableName',
- type: 2,
- list: ['1-c'],
- },
- };
- })
- );
- const target: any = event.target;
- setCurrent(target.dataset.id);
- setGraphData(nextGraph);
- setLoading(false);
- }, 300);
- }
- }}
- onGetSize={handleGetSize}
- graphData={graphData}
- onDrawVertex={() => 'whiteSpace=wrap;fillColor=#ffffff;strokeColor=#7460EF;'}
- onDrawEdge={() => 'whiteSpace=wrap;fillColor=#ffffff;strokeColor=#7460EF;'}
- onRenderCell={(cell) => {
- if (cell.vertex && cell.value) {
- const meta = cell.value;
- if (meta) {
- const size = handleGetSize(meta);
- return ReactDOMServer.renderToString(
-
- {meta.metaInfo.name}
-
-
-
- {meta.metaInfo.list.map((l) => (
- -
- {l}
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
{meta.metaInfo.name}
- {meta.metaInfo.type !== 1 && (
-
- )}
-
-
- -
-
- 1
-
- -
-
- 2
-
- -
-
- 3
-
-
-
-
-
-
- {onRenderWidgets && (
-
e.preventDefault()}>
- {onRenderWidgets?.()}
-
- )}
-
{children?.(current)}
-
- {onRenderActions?.(graph.current!, Mx.mxInstance)}
-
-