Skip to content

Commit

Permalink
Fix events handling bugs for selection and refactor some codes
Browse files Browse the repository at this point in the history
  • Loading branch information
kyungmi.k committed Nov 13, 2018
1 parent e8c17a7 commit 7a6a770
Show file tree
Hide file tree
Showing 22 changed files with 1,048 additions and 1,150 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@ module.exports = {
'react/forbid-prop-types': 0,
'no-underscore-dangle': 0,
'react/destructuring-assignment': 0,
'lines-between-class-members': 0,
},
};
749 changes: 343 additions & 406 deletions demo/package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
"store": "^2.0.12"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-classes": "^7.1.0",
"@babel/plugin-transform-proto-to-assign": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",
"@ridi/eslint-config": "^4.1.1",
"babel-eslint": "^10.0.1",
Expand All @@ -49,8 +49,8 @@
"redux-devtools-multiple-monitors": "^1.0.1",
"styled-components": "^3.4.10",
"url-search-params-polyfill": "^2.0.3",
"webpack": "^4.21.0",
"webpack-dev-server": "^3.1.9",
"webpack": "^4.25.1",
"webpack-dev-server": "^3.1.10",
"webpack-manifest-plugin": "^2.0.4",
"webpack-stream": "^5.1.1",
"whatwg-fetch": "^2.0.4"
Expand Down
159 changes: 66 additions & 93 deletions demo/src/components/body/ViewerBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,21 @@ import Reader, {
unload,
SelectionMode,
ContentHelper,
selectReaderIsReadyToRead,
} from '@ridi/react-viewer';
import { selectAnnotations } from '../../redux/Viewer.selector';
import { selectAnnotations, selectContextMenu } from '../../redux/Viewer.selector';
import ViewerScreenFooter from '../footers/ViewerScreenFooter';
import {
requestLoadContent,
addAnnotation,
setAnnotations,
updateAnnotation, removeAnnotation,
updateAnnotation, removeAnnotation, setContextMenu,
} from '../../redux/Viewer.action';
import { screenWidth } from '../../utils/BrowserWrapper';
import Cache from '../../utils/Cache';
import { Position } from '../../constants/ViewerConstants';
import SelectionContextMenu from '../selection/SelectionContextMenu';

// todo redux!
const initialState = {
selection: null,
contextMenuPosition: null,
showContextMenu: false,
};
import { RectsUtil } from '../../../../src/util/SelectionUtil';

class ViewerBody extends React.Component {
constructor(props) {
Expand All @@ -46,16 +41,12 @@ class ViewerBody extends React.Component {

this.footer = <ViewerScreenFooter contentMeta={props.contentMeta} />;
this.contentFooter = <small>content footer area...</small>;

this.state = initialState;
}

componentDidUpdate(prevProps) {
if (prevProps.setting.viewType !== this.props.setting.viewType) {
// selection 초기화 & annotation rects 계산
// todo redux!
/* eslint-disable react/no-did-update-set-state */
this.setState(initialState);
const { isReadyToRead, actionSetContextMenu } = this.props;
if (prevProps.isReadyToRead && !isReadyToRead) {
actionSetContextMenu(false);
}
}

Expand Down Expand Up @@ -94,7 +85,7 @@ class ViewerBody extends React.Component {
}

onReaderTouched(event) {
this.setState(initialState);
// TODO onReaderTouched event should be occurred as exclusive with onReaderSelectionChanged event ;o;
const link = ContentHelper.getLinkFromElement(event.target);
if (link) {
// TODO go to...
Expand All @@ -111,92 +102,58 @@ class ViewerBody extends React.Component {
onTouched(position);
}

onContentMenuItemClicked({ style }) {
onContentMenuItemClicked(targetSelection) {
const {
currentContentIndex,
actionAddAnnotation,
actionSetAnnotation,
actionRemoveAnnotation,
actionSetContextMenu,
} = this.props;
const {
id,
serializedRange,
text,
rects,
} = this.state.selection;
if (style === null) {
actionRemoveAnnotation({
id,
serializedRange,
text,
rects,
contentIndex: currentContentIndex,
style,
});
} else if (id) {
actionSetAnnotation({
id,
serializedRange,
text,
rects,
contentIndex: currentContentIndex,
style,
});
} else {
actionAddAnnotation({
serializedRange,
text,
rects,
contentIndex: currentContentIndex,
style,
});
style,
withHandle,
...others
} = targetSelection;
const updateSelection = {
id,
...others,
contentIndex: currentContentIndex,
style,
};
if (!id) {
actionAddAnnotation(updateSelection);
} else if (!style) {
actionRemoveAnnotation(updateSelection);
} else if (style) {
actionSetAnnotation(updateSelection);
}
Connector.selection.endSelection();
this.setState(initialState);
Connector.selection.end();
actionSetContextMenu(false);
}

onReaderAnnotationTouched(annotation) {
const lastRect = annotation.rects.length > 0 ? annotation.rects[annotation.rects.length - 1] : null;
console.log('onReaderAnnotationTouched', annotation);
this.setState({
selection: annotation,
showContextMenu: true,
contextMenuPosition: {
x: lastRect.left + lastRect.width,
y: lastRect.top + lastRect.height,
},
});
const { actionSetContextMenu } = this.props;
actionSetContextMenu(true, annotation);
}

onReaderSelectionChanged({ selection, selectionMode }) {
const { currentContentIndex, actionAddAnnotation } = this.props;
const lastRect = selection.rects.length > 0 ? selection.rects[selection.rects.length - 1] : null;
console.log('ViewerBody.onReaderSelectionChanged', selection, selectionMode);
switch (selectionMode) {
case SelectionMode.NORMAL:
this.setState({
selection,
showContextMenu: false,
contextMenuPosition: null,
});
break;
case SelectionMode.USER_SELECTION:
this.setState({
selection,
showContextMenu: true,
contextMenuPosition: {
x: lastRect.left + lastRect.width + Connector.setting.getContainerHorizontalMargin(),
y: lastRect.top + lastRect.height + Connector.setting.getContainerHorizontalMargin(),
},
});
break;
case SelectionMode.AUTO_HIGHLIGHT:
actionAddAnnotation({ ...selection, contentIndex: currentContentIndex });
Connector.selection.endSelection();
this.setState(initialState);
break;
default: break;
const {
currentContentIndex,
actionAddAnnotation,
actionSetContextMenu,
} = this.props;

if (selectionMode === SelectionMode.USER_SELECTION) {
return actionSetContextMenu(true, selection);
}
if (selectionMode === SelectionMode.AUTO_HIGHLIGHT) {
actionAddAnnotation({ ...selection, contentIndex: currentContentIndex });
Connector.selection.end();
return actionSetContextMenu(false);
}
return actionSetContextMenu(false);
}

renderPageButtons() {
Expand All @@ -211,14 +168,24 @@ class ViewerBody extends React.Component {
}

renderContextMenu() {
const {
contextMenuPosition,
showContextMenu,
} = this.state;
if (!showContextMenu) return null;
const { currentContentIndex } = this.props;
const { viewType } = this.props.setting;
const { isVisible, target } = this.props.contextMenu;
if (!isVisible) return null;

const lastRect = target.rects.length > 0 ? target.rects[target.rects.length - 1] : null;
const position = new RectsUtil([lastRect])
.translateX(lastRect.width)
.translateX(Connector.setting.getContainerHorizontalMargin())
.translateY(lastRect.height)
.translateY(Connector.setting.getContainerVerticalMargin())
.translateY(viewType === ViewType.SCROLL ? Connector.calculations.getStartOffset(currentContentIndex) : 0)
.getRects()[0];
return (
<SelectionContextMenu
position={contextMenuPosition}
top={position.top}
left={position.left}
targetItem={target}
onClickItem={this.onContentMenuItemClicked}
/>
);
Expand Down Expand Up @@ -261,13 +228,18 @@ ViewerBody.propTypes = {
actionSetAnnotations: PropTypes.func.isRequired,
actionSetAnnotation: PropTypes.func.isRequired,
actionRemoveAnnotation: PropTypes.func.isRequired,
contextMenu: PropTypes.object.isRequired,
actionSetContextMenu: PropTypes.func.isRequired,
isReadyToRead: PropTypes.bool.isRequired,
};

const mapStateToProps = state => ({
isVisibleSettingPopup: state.viewer.ui.isVisibleSettingPopup,
currentContentIndex: selectReaderCurrentContentIndex(state),
setting: selectReaderSetting(state),
annotations: selectAnnotations(state),
contextMenu: selectContextMenu(state),
isReadyToRead: selectReaderIsReadyToRead(state),
});

const mapDispatchToProps = dispatch => ({
Expand All @@ -278,6 +250,7 @@ const mapDispatchToProps = dispatch => ({
actionSetAnnotations: annotations => dispatch(setAnnotations(annotations)),
actionSetAnnotation: annotation => dispatch(updateAnnotation(annotation)),
actionRemoveAnnotation: annotation => dispatch(removeAnnotation(annotation)),
actionSetContextMenu: (isVisible, target) => dispatch(setContextMenu(isVisible, target)),
});

export default connect(
Expand Down
22 changes: 13 additions & 9 deletions demo/src/components/selection/SelectionContextMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,17 @@ const getButtonStyles = (style) => {
return defaultProps;
};

const SelectionContextMenu = ({ position, onClickItem }) => (
const SelectionContextMenu = ({
top,
left,
targetItem,
onClickItem,
}) => (
<div
style={{
position: 'absolute',
top: `${position.y}px`,
left: `${position.x}px`,
top: `${top}px`,
left: `${left}px`,
zIndex: '100',
padding: '6px',
backgroundColor: '#222',
Expand All @@ -67,7 +72,7 @@ const SelectionContextMenu = ({ position, onClickItem }) => (
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onClickItem({ style });
onClickItem({ ...targetItem, style });
}}
>
<span className="indent_hidden">{style.color}</span>
Expand All @@ -78,7 +83,7 @@ const SelectionContextMenu = ({ position, onClickItem }) => (
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onClickItem({ style: null });
onClickItem({ ...targetItem, style: null });
}}
style={getButtonStyles(null)}
>
Expand All @@ -90,11 +95,10 @@ const SelectionContextMenu = ({ position, onClickItem }) => (
);

SelectionContextMenu.propTypes = {
position: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number,
}).isRequired,
top: PropTypes.number.isRequired,
left: PropTypes.number.isRequired,
onClickItem: PropTypes.func.isRequired,
targetItem: PropTypes.object.isRequired,
};

export default SelectionContextMenu;
7 changes: 7 additions & 0 deletions demo/src/redux/Viewer.action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const ViewerUiActions = {
UPDATE_ANNOTATION: 'VIEWER:SET_ANNOTATION',
SET_ANNOTATIONS: 'VIEWER:SET_ANNOTATIONS',
REMOVE_ANNOTATION: 'VIEWER:REMOVE_ANNOTATION',
SET_CONTEXT_MENU: 'VIEWER:SET_CONTEXT_MENU',
};

export const onToggleViewerSetting = () => ({
Expand Down Expand Up @@ -71,3 +72,9 @@ export const setAnnotations = annotations => ({
type: ViewerUiActions.SET_ANNOTATIONS,
annotations,
});

export const setContextMenu = (isVisible, target = null) => ({
type: ViewerUiActions.SET_CONTEXT_MENU,
isVisible,
target,
});
5 changes: 5 additions & 0 deletions demo/src/redux/Viewer.path.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export const initialState = {
viewerSettings: {},
isFullScreen: false,
availableViewType: AvailableViewType.BOTH,
contextMenu: {
isVisible: false,
target: null,
},
},
annotations: [],
};
Expand All @@ -29,5 +33,6 @@ export default {
viewerSettings: () => ['ui', 'viewerSettings'],
isFullScreen: () => ['ui', 'isFullScreen'],
availableViewType: () => ['ui', 'availableViewType'],
contextMenu: () => ['ui', 'contextMenu'],
annotations: () => ['annotations'],
};
5 changes: 5 additions & 0 deletions demo/src/redux/Viewer.reducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ const onAnnotationRemoved = (state, { annotation }) => new ImmutableObjectBuilde
.set(path.annotations(), setAnnotation(state.annotations, annotation, true))
.build();

const onContextMenuSet = (state, { isVisible, target }) => new ImmutableObjectBuilder(state)
.set(path.contextMenu(), { isVisible, target })
.build();

export default createReducer(initialState, {
[ViewerUiActions.TOGGLE_VIEWER_SETTING]: onToggleViewerSetting,
[ViewerUiActions.VIEWER_SETTING_CHANGED]: viewerSettingChanged,
Expand All @@ -53,4 +57,5 @@ export default createReducer(initialState, {
[ViewerUiActions.UPDATE_ANNOTATION]: onAnnotationUpdated,
[ViewerUiActions.SET_ANNOTATIONS]: onAnnotationsSet,
[ViewerUiActions.REMOVE_ANNOTATION]: onAnnotationRemoved,
[ViewerUiActions.SET_CONTEXT_MENU]: onContextMenuSet,
});
Loading

0 comments on commit 7a6a770

Please sign in to comment.