feat: update sequence position in the chart (#56)

NoMercy235 · Mar 21, 2020 · 43cc4a9 · 43cc4a9
1 parent 51691d5
commit 43cc4a9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/admin/story-view/view/components/write-story/write-story/WriteStoryComponent.js b/src/admin/story-view/view/components/write-story/write-story/WriteStoryComponent.js
@@ -4,6 +4,7 @@ import { Graph } from 'react-d3-graph';
 
 import { Card, CardContent } from '@material-ui/core';
 import {
+  generateRandomPosition,
   getNewGraph,
   optionToLink,
   seqToNode
@@ -39,10 +40,11 @@ class WriteStoryComponent extends Component {
       name: `test-${new Date().getTime()}`,
       content: 'test',
       story: story._id,
+      ...generateRandomPosition(),
     });
     socket.emit(
       SocketEvents.NewSequenceRequest,
-      SequenceModel.forApi(seq, ['story']),
+      SequenceModel.forApi(seq, ['story', 'x', 'y']),
     );
   };
 
@@ -51,6 +53,7 @@ class WriteStoryComponent extends Component {
       story,
       onEditSequence,
       onEditOption,
+      onUpdateSeqPosition,
     } = this.props;
     const { nodes, links } = this.state;
     const data = {
@@ -102,6 +105,7 @@ class WriteStoryComponent extends Component {
               }}
               onClickNode={onEditSequence}
               onClickLink={onEditOption}
+              onNodePositionChange={onUpdateSeqPosition}
             />
           </CardContent>
         </Card>
@@ -117,6 +121,7 @@ WriteStoryComponent.propTypes = {
 
   onEditSequence: PropTypes.func.isRequired,
   onEditOption: PropTypes.func.isRequired,
+  onUpdateSeqPosition: PropTypes.func.isRequired,
 };
 
 export default WriteStoryComponent;
diff --git a/src/admin/story-view/view/containers/WriteStoryContainer.js b/src/admin/story-view/view/containers/WriteStoryContainer.js
@@ -60,6 +60,13 @@ class WriteStoryContainer extends Component {
     console.log(optionId);
   };
 
+  onUpdateSeqPosition = (seqId, x, y) => {
+    socket.emit(
+      SocketEvents.UpdateSequenceRequest,
+      { _id: seqId, x, y },
+    );
+  };
+
   render() {
     const {
       storyViewStore: {
@@ -81,6 +88,7 @@ class WriteStoryContainer extends Component {
         options={allStoryOptions}
         onEditSequence={this.onEditSequence}
         onEditOption={this.onEditOption}
+        onUpdateSeqPosition={this.onUpdateSeqPosition}
       />
     );
   }

diff --git a/src/infrastructure/models/SequenceModel.js b/src/infrastructure/models/SequenceModel.js
@@ -11,6 +11,8 @@ export class SequenceModel extends BaseModel {
   hasScenePic = false;
   content = '';
   isEnding = false;
+  x = 0;
+  y = 0;
   @observable options = [];
 
   constructor(metadata) {

diff --git a/src/shared/utils/graphUtils.js b/src/shared/utils/graphUtils.js
@@ -17,9 +17,13 @@ export const generateRandomPosition = () => {
 };
 
 export const seqToNode = story => seq => {
+  const position = seq.x && seq.y
+    ? { x: seq.x, y: seq.y }
+    : generateRandomPosition();
+
   return {
     id: seq._id,
-    ...generateRandomPosition(),
+    ...position,
     size: GRAPH_NODE_SIZE,
     name: seq.name,
     ...(story.startSeq === seq._id && {