Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: remove element when right click #49

Merged
merged 3 commits into from
Apr 14, 2019
Merged

feat: remove element when right click #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5682b3
feat: remove element when right click
orzyyyy Apr 14, 2019
b59efa5
fix: wrong type definition
orzyyyy Apr 14, 2019
77f0f58
test: update case
orzyyyy Apr 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 52 additions & 52 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Loading