Skip to content

Commit a6de905

Browse files
salgum1114salgum1114
committed
[#197] Fixed ImageMapFooterToolbar mode.
1 parent f294d4f commit a6de905

File tree

1 file changed

+139
-125
lines changed

1 file changed

+139
-125
lines changed

‎src/components/imagemap/ImageMapFooterToolbar.js‎

Lines changed: 139 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -6,140 +6,154 @@ import i18n from 'i18next';
66
import CommonButton from '../common/CommonButton';
77

88
class ImageMapFooterToolbar extends Component {
9-
static propTypes = {
10-
canvasRef: PropTypes.any,
11-
preview: PropTypes.bool,
12-
onChangePreview: PropTypes.func,
13-
zoomRatio: PropTypes.number,
14-
}
9+
static propTypes = {
10+
canvasRef: PropTypes.any,
11+
preview: PropTypes.bool,
12+
onChangePreview: PropTypes.func,
13+
zoomRatio: PropTypes.number,
14+
};
1515

16-
state = {
17-
interactionMode: 'selection',
18-
}
16+
state = {
17+
interactionMode: 'selection',
18+
};
1919

20-
componentDidMount() {
21-
const { canvasRef } = this.props;
22-
this.waitForCanvasRender(canvasRef);
23-
}
20+
componentDidMount() {
21+
const { canvasRef } = this.props;
22+
this.waitForCanvasRender(canvasRef);
23+
}
2424

25-
componentWillUnmount() {
26-
const { canvasRef } = this.props;
27-
this.detachEventListener(canvasRef);
28-
}
25+
componentWillUnmount() {
26+
const { canvasRef } = this.props;
27+
this.detachEventListener(canvasRef);
28+
}
2929

30-
waitForCanvasRender = (canvas) => {
31-
setTimeout(() => {
32-
if (canvas) {
33-
this.attachEventListener(canvas);
34-
return;
35-
}
36-
const { canvasRef } = this.props;
37-
this.waitForCanvasRender(canvasRef);
38-
}, 5);
39-
};
30+
waitForCanvasRender = canvas => {
31+
setTimeout(() => {
32+
if (canvas) {
33+
this.attachEventListener(canvas);
34+
return;
35+
}
36+
const { canvasRef } = this.props;
37+
this.waitForCanvasRender(canvasRef);
38+
}, 5);
39+
};
4040

41-
attachEventListener = (canvasRef) => {
42-
canvasRef.canvas.wrapperEl.addEventListener('keydown', this.events.keydown, false);
43-
}
41+
attachEventListener = canvasRef => {
42+
canvasRef.canvas.wrapperEl.addEventListener('keydown', this.events.keydown, false);
43+
};
4444

45-
detachEventListener = (canvasRef) => {
46-
canvasRef.canvas.wrapperEl.removeEventListener('keydown', this.events.keydown);
47-
}
45+
detachEventListener = canvasRef => {
46+
canvasRef.canvas.wrapperEl.removeEventListener('keydown', this.events.keydown);
47+
};
4848

49-
/* eslint-disable react/sort-comp, react/prop-types */
50-
handlers = {
51-
selection: () => {
52-
if (this.props.canvasRef.handler.interactionHandler.isDrawingMode()) {
53-
return;
54-
}
55-
this.forceUpdate();
56-
this.setState({ interactionMode: 'selection' });
57-
},
58-
grab: () => {
59-
if (this.props.canvasRef.handler.interactionHandler.isDrawingMode()) {
60-
return;
61-
}
62-
this.forceUpdate();
63-
this.setState({ interactionMode: 'grab' });
64-
},
65-
}
49+
/* eslint-disable react/sort-comp, react/prop-types */
50+
handlers = {
51+
selection: () => {
52+
if (this.props.canvasRef.handler.interactionHandler.isDrawingMode()) {
53+
return;
54+
}
55+
this.forceUpdate();
56+
this.props.canvasRef.handler.interactionHandler.selection();
57+
this.setState({ interactionMode: 'selection' });
58+
},
59+
grab: () => {
60+
if (this.props.canvasRef.handler.interactionHandler.isDrawingMode()) {
61+
return;
62+
}
63+
this.forceUpdate();
64+
this.props.canvasRef.handler.interactionHandler.grab();
65+
this.setState({ interactionMode: 'grab' });
66+
},
67+
};
6668

67-
events = {
68-
keydown: (e) => {
69-
if (this.props.canvasRef.canvas.wrapperEl !== document.activeElement) {
70-
return false;
71-
}
72-
if (e.keyCode === 81) {
73-
this.handlers.selection();
74-
} else if (e.keyCode === 87) {
75-
this.handlers.grab();
76-
}
77-
},
78-
}
69+
events = {
70+
keydown: e => {
71+
if (this.props.canvasRef.canvas.wrapperEl !== document.activeElement) {
72+
return false;
73+
}
74+
if (e.keyCode === 81) {
75+
this.handlers.selection();
76+
} else if (e.keyCode === 87) {
77+
this.handlers.grab();
78+
}
79+
},
80+
};
7981

80-
render() {
81-
const { canvasRef, preview, zoomRatio, onChangePreview } = this.props;
82-
const { interactionMode } = this.state;
83-
const { selection, grab } = this.handlers;
84-
if (!canvasRef) {
85-
return null;
86-
}
87-
const zoomValue = parseInt((zoomRatio * 100).toFixed(2), 10);
88-
return (
89-
<React.Fragment>
90-
<div className="rde-editor-footer-toolbar-interaction">
91-
<Button.Group>
92-
<CommonButton
93-
type={interactionMode === 'selection' ? 'primary' : 'default'}
94-
style={{ borderBottomLeftRadius: '8px', borderTopLeftRadius: '8px' }}
95-
onClick={() => { selection(); }}
96-
icon="mouse-pointer"
97-
tooltipTitle={i18n.t('action.selection')}
98-
/>
99-
<CommonButton
100-
type={interactionMode === 'grab' ? 'primary' : 'default'}
101-
style={{ borderBottomRightRadius: '8px', borderTopRightRadius: '8px' }}
102-
onClick={() => { grab(); }}
103-
tooltipTitle={i18n.t('action.grab')}
104-
icon="hand-rock"
105-
/>
106-
</Button.Group>
107-
</div>
108-
<div className="rde-editor-footer-toolbar-zoom">
109-
<Button.Group>
110-
<CommonButton
111-
style={{ borderBottomLeftRadius: '8px', borderTopLeftRadius: '8px' }}
112-
onClick={() => { canvasRef.handler.zoomHandler.zoomOut(); }}
113-
icon="search-minus"
114-
tooltipTitle={i18n.t('action.zoom-out')}
115-
/>
116-
<CommonButton
117-
onClick={() => { canvasRef.handler.zoomHandler.zoomOneToOne(); }}
118-
tooltipTitle={i18n.t('action.one-to-one')}
119-
>
120-
{`${zoomValue}%`}
121-
</CommonButton>
122-
<CommonButton
123-
onClick={() => { canvasRef.handler.zoomHandler.zoomToFit(); }}
124-
tooltipTitle={i18n.t('action.fit')}
125-
icon="expand"
126-
/>
127-
<CommonButton
128-
style={{ borderBottomRightRadius: '8px', borderTopRightRadius: '8px' }}
129-
onClick={() => { canvasRef.handler.zoomHandler.zoomIn(); }}
130-
icon="search-plus"
131-
tooltipTitle={i18n.t('action.zoom-in')}
132-
/>
133-
</Button.Group>
134-
</div>
135-
<div className="rde-editor-footer-toolbar-preview">
136-
<Tooltip title={i18n.t('action.preview')}>
137-
<Switch checked={preview} onChange={onChangePreview} />
138-
</Tooltip>
139-
</div>
140-
</React.Fragment>
141-
);
142-
}
82+
render() {
83+
const { canvasRef, preview, zoomRatio, onChangePreview } = this.props;
84+
const { interactionMode } = this.state;
85+
const { selection, grab } = this.handlers;
86+
if (!canvasRef) {
87+
return null;
88+
}
89+
const zoomValue = parseInt((zoomRatio * 100).toFixed(2), 10);
90+
return (
91+
<React.Fragment>
92+
<div className="rde-editor-footer-toolbar-interaction">
93+
<Button.Group>
94+
<CommonButton
95+
type={interactionMode === 'selection' ? 'primary' : 'default'}
96+
style={{ borderBottomLeftRadius: '8px', borderTopLeftRadius: '8px' }}
97+
onClick={() => {
98+
selection();
99+
}}
100+
icon="mouse-pointer"
101+
tooltipTitle={i18n.t('action.selection')}
102+
/>
103+
<CommonButton
104+
type={interactionMode === 'grab' ? 'primary' : 'default'}
105+
style={{ borderBottomRightRadius: '8px', borderTopRightRadius: '8px' }}
106+
onClick={() => {
107+
grab();
108+
}}
109+
tooltipTitle={i18n.t('action.grab')}
110+
icon="hand-rock"
111+
/>
112+
</Button.Group>
113+
</div>
114+
<div className="rde-editor-footer-toolbar-zoom">
115+
<Button.Group>
116+
<CommonButton
117+
style={{ borderBottomLeftRadius: '8px', borderTopLeftRadius: '8px' }}
118+
onClick={() => {
119+
canvasRef.handler.zoomHandler.zoomOut();
120+
}}
121+
icon="search-minus"
122+
tooltipTitle={i18n.t('action.zoom-out')}
123+
/>
124+
<CommonButton
125+
onClick={() => {
126+
canvasRef.handler.zoomHandler.zoomOneToOne();
127+
}}
128+
tooltipTitle={i18n.t('action.one-to-one')}
129+
>
130+
{`${zoomValue}%`}
131+
</CommonButton>
132+
<CommonButton
133+
onClick={() => {
134+
canvasRef.handler.zoomHandler.zoomToFit();
135+
}}
136+
tooltipTitle={i18n.t('action.fit')}
137+
icon="expand"
138+
/>
139+
<CommonButton
140+
style={{ borderBottomRightRadius: '8px', borderTopRightRadius: '8px' }}
141+
onClick={() => {
142+
canvasRef.handler.zoomHandler.zoomIn();
143+
}}
144+
icon="search-plus"
145+
tooltipTitle={i18n.t('action.zoom-in')}
146+
/>
147+
</Button.Group>
148+
</div>
149+
<div className="rde-editor-footer-toolbar-preview">
150+
<Tooltip title={i18n.t('action.preview')}>
151+
<Switch checked={preview} onChange={onChangePreview} />
152+
</Tooltip>
153+
</div>
154+
</React.Fragment>
155+
);
156+
}
143157
}
144158

145159
export default ImageMapFooterToolbar;

0 commit comments

Comments
 (0)