Skip to content

Commit

Permalink
feat: remove element when right click (#49)
Browse files Browse the repository at this point in the history 
* feat: remove element when right click

* fix: wrong type definition

* test: update case
  • Loading branch information
@orzyyyy
orzyyyy committed Apr 14, 2019
1 parent f8fd598 commit 20d366e
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 57 deletions.
104 changes: 52 additions & 52 deletions package.json
View file
@@ -1,52 +1,52 @@
{
"name": "mini-xmind",
"version": "1.1.3",
"scripts": {
"start": "nino go -e ./src/go",
"test": "nino test",
"build": "tsc && nino koei -c scripts/nino.koei.js",
"compile": "tsc && nino compile",
"codecov": "nino test -d",
"lint": "tslint -c tslint.json 'src/**/*.ts[x]'",
"prettier": "nino prettier",
"lint-staged": "lint-staged",
"backup": "npm config set registry=https://registry.npmjs.org && npm publish && npm config set registry=https://registry.npm.taobao.org",
"pub": "npm run build && npm run compile && git push origin master && npm publish",
"pre-deploy": "node scripts/copyCircleCiConfig.js",
"deploy": "npm run build && npm run pre-deploy && bash scripts/gh-pages.sh"
},
"description": "A tool to make mind-mapping easier",
"files": [
"lib",
"dist"
],
"license": "MIT",
"main": "lib/index",
"dependencies": {
"antd": "^3.16.2",
"react-draggable": "^3.2.1"
},
"devDependencies": {
"@types/classnames": "^2.2.7",
"@types/enzyme": "^3.9.1",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.3",
"dekko": "^0.2.1",
"lint-staged": "^8.1.5",
"nino-cli": "^0.7.2",
"tslint": "^5.15.0",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-react": "^4.0.0",
"typescript": "^3.4.3"
},
"pre-commit": [
"lint-staged"
],
"lint-staged": {
"*.{ts,tsx}": [
"npm run prettier",
"git add"
]
}
}
{
"name": "mini-xmind",
"version": "1.1.3",
"scripts": {
"start": "nino go -e ./src/go",
"test": "nino test",
"build": "tsc && nino koei -c scripts/nino.koei.js",
"compile": "tsc && nino compile",
"codecov": "nino test -d",
"lint": "tslint -c tslint.json 'src/**/*.ts[x]'",
"prettier": "nino prettier",
"lint-staged": "lint-staged",
"backup": "npm config set registry=https://registry.npmjs.org && npm publish && npm config set registry=https://registry.npm.taobao.org",
"pub": "npm run build && npm run compile && git push origin master && npm publish",
"pre-deploy": "node scripts/copyCircleCiConfig.js",
"deploy": "npm run build && npm run pre-deploy && bash scripts/gh-pages.sh"
},
"description": "A tool to make mind-mapping easier",
"files": [
"lib",
"dist"
],
"license": "MIT",
"main": "lib/index",
"dependencies": {
"antd": "^3.16.2",
"react-draggable": "^3.2.1"
},
"devDependencies": {
"@types/classnames": "^2.2.7",
"@types/enzyme": "^3.9.1",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.3",
"dekko": "^0.2.1",
"lint-staged": "^8.1.5",
"nino-cli": "^0.7.2",
"tslint": "^5.15.0",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-react": "^4.0.0",
"typescript": "^3.4.3"
},
"pre-commit": [
"lint-staged"
],
"lint-staged": {
"*.{ts,tsx}": [
"npm run prettier",
"git add"
]
}
}
20 changes: 17 additions & 3 deletions src/canvas/__tests__/Canvas.test.tsx
View file
Expand Up @@ -15,9 +15,8 @@ switch (process.env.LIB_DIR) {
import { mapping } from '../../mock/mapping';
import 'nino-cli/scripts/setup';

const createWrapper = (...props: Array<any>) => {
return mount(<Canvas style={{ width: '100%', height: '100%' }} {...props} />);
};
const createWrapper = (...props: Array<any>) =>
mount(<Canvas style={{ width: '100%', height: '100%' }} {...props} />);

describe('Canvas', () => {
it('Canvas renders correctly', () => {
Expand Down Expand Up @@ -151,4 +150,19 @@ describe('Canvas', () => {
wrapper.handleDragStart({ stopPropagation });
expect(stopPropagation).toHaveBeenCalled();
});

it('right click should work', () => {
const wrapper = createWrapper();
wrapper.setProps({ data: mapping });
wrapper
.find('.block-group')
.at(0)
.simulate('contextmenu');
expect(wrapper.find('.block-group').length).toBe(2);
wrapper
.find('.tag-group')
.at(0)
.simulate('contextmenu');
expect(wrapper.find('.tag-group').length).toBe(2);
});
});
14 changes: 14 additions & 0 deletions src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap
View file
Expand Up @@ -353,6 +353,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
>
<Draggable
allowAnyClick={false}
Expand Down Expand Up @@ -444,6 +445,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -548,6 +550,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -652,6 +655,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -1677,6 +1681,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
>
<Draggable
allowAnyClick={false}
Expand Down Expand Up @@ -1779,6 +1784,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -1897,6 +1903,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -2015,6 +2022,7 @@ exports[`Canvas Canvas renders correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -2144,6 +2152,7 @@ exports[`Canvas when data is null, it should render correctly 1`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
/>
<LineGroup
data={Object {}}
Expand All @@ -2158,6 +2167,7 @@ exports[`Canvas when data is null, it should render correctly 1`] = `
<TagGroup
data={Object {}}
onChange={[Function]}
onContextMenu={[Function]}
/>
</div>
</DraggableCore>
Expand Down Expand Up @@ -2270,6 +2280,7 @@ exports[`Canvas when data is null, it should render correctly 2`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
/>
<LineGroup
data={Object {}}
Expand All @@ -2284,6 +2295,7 @@ exports[`Canvas when data is null, it should render correctly 2`] = `
<TagGroup
data={Object {}}
onChange={[Function]}
onContextMenu={[Function]}
/>
</div>
</DraggableCore>
Expand Down Expand Up @@ -2396,6 +2408,7 @@ exports[`Canvas when data is null, it should render correctly 3`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
/>
<LineGroup
data={Object {}}
Expand All @@ -2410,6 +2423,7 @@ exports[`Canvas when data is null, it should render correctly 3`] = `
<TagGroup
data={Object {}}
onChange={[Function]}
onContextMenu={[Function]}
/>
</div>
</DraggableCore>
Expand Down
13 changes: 13 additions & 0 deletions src/canvas/core.tsx
View file
Expand Up @@ -25,6 +25,11 @@ export interface CanvasState {
tagProps?: any;
position: { x: number; y: number };
}
export type ContextMenuProps = {
event: Event;
key: string;
group: string;
};

const dataCollector: any = {};

Expand Down Expand Up @@ -153,6 +158,12 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
stopPropagation(e);
};

handleRightClick = ({ key, event, group }: ContextMenuProps) => {
preventDefault(event);
delete dataCollector[group][key];
this.setState({});
};

render = () => {
const {
className,
Expand Down Expand Up @@ -182,6 +193,7 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
onChange={this.handleBlockChange}
lineData={linesProps}
className={blockClassName}
onContextMenu={this.handleRightClick}
/>
<LineGroup
data={linesProps}
Expand All @@ -193,6 +205,7 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
data={tagProps}
onChange={this.handleTagChange}
className={tagClassName}
onContextMenu={this.handleRightClick}
/>
</div>
</Draggable>
Expand Down
8 changes: 8 additions & 0 deletions src/demo/__tests__/__snapshots__/demo.test.tsx.snap
View file
Expand Up @@ -510,6 +510,7 @@ exports[`demo render correctly 1`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
>
<Draggable
allowAnyClick={false}
Expand Down Expand Up @@ -601,6 +602,7 @@ exports[`demo render correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -705,6 +707,7 @@ exports[`demo render correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -809,6 +812,7 @@ exports[`demo render correctly 1`] = `
}
}
onClick={[Function]}
onContextMenu={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
Expand Down Expand Up @@ -1422,6 +1426,7 @@ exports[`demo render correctly 1`] = `
}
}
onChange={[Function]}
onContextMenu={[Function]}
>
<Draggable
allowAnyClick={false}
Expand Down Expand Up @@ -1524,6 +1529,7 @@ exports[`demo render correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -1642,6 +1648,7 @@ exports[`demo render correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -1760,6 +1767,7 @@ exports[`demo render correctly 1`] = `
},
}
}
onContextMenu={[Function]}
onDoubleClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand Down
14 changes: 13 additions & 1 deletion src/tools/BlockGroup.tsx
View file
Expand Up @@ -4,6 +4,7 @@ import Draggable from 'react-draggable';
import { generateKey, stopPropagation } from '../utils/LineUtil';
import omit from 'omit.js';
import './css/BlockGroup.css';
import { ContextMenuProps } from '../canvas/core';

// one Line is mapping to two Block
// to record it here
Expand Down Expand Up @@ -47,6 +48,7 @@ export interface BlockGroupProps {
};
onChange?: (data: any, lineData?: any) => void;
offset?: { x: number; y: number };
onContextMenu?: (item: ContextMenuProps) => void;
}
export interface BlockGroupState {
data?: any;
Expand Down Expand Up @@ -228,7 +230,12 @@ export default class BlockGroup extends Component<
};

render() {
const { className: parentClassName, onChange, ...rest } = this.props;
const {
className: parentClassName,
onChange,
onContextMenu,
...rest
} = this.props;
const { data } = this.state;

return Object.keys(data).map(blockKey => {
Expand All @@ -249,6 +256,11 @@ export default class BlockGroup extends Component<
)}
onClick={_ => this.handleBlockClick(blockKey)}
ref={ref => this.saveBlock(ref, blockKey)}
onContextMenu={(e: any) => {
if (onContextMenu) {
onContextMenu({ event: e, key: blockKey, group: 'BlockGroup' });
}
}}
{...omit(rest, ['lineData'])}
/>
</Draggable>
Expand Down

0 comments on commit 20d366e

Please sign in to comment.