Merge pull request #12 from membean/feat/add-question-edit-mode

change: added operation edit/view for mode=question

examples/react-wordmap-demo/src/App.css

@@ -58,3 +58,10 @@ button {
   box-shadow: none;
   border: 1px solid #61dafb;
 }
+
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}

examples/react-wordmap-demo/src/App.js

@@ -18,11 +18,9 @@ function App() {
       </header>
       <div>
         <div>
-          <section>
             {!isQuestion ?
               <WordConstellation /> : <QuestionConstellation />
             }
-          </section>
         </div>
       </div>
     </div>

examples/react-wordmap-demo/src/question/code.js

@@ -3,3 +3,12 @@ export const snippet = `new WordMap({
   url: 'url-to-constellation-json-data',
   mode: "question"
 })`
+
+export const editSnippet = `new WordMap({
+  containerEl: containerRef.current,
+  url: 'url-to-constellation-json-data',
+  mode: "question",
+  props: {
+    operation: 'edit'
+  }
+})`

examples/react-wordmap-demo/src/question/index.js

@@ -5,33 +5,53 @@ import WordMap from 'wordmap';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-import { snippet } from './code';
+import { snippet, editSnippet } from './code';
 import { WORD_URL } from '../constant';
 
 
 export const QuestionConstellation = () => {
   const containerRef = useRef();
+  const containerRefEdit = useRef();
 
   useEffect(() => {
     new WordMap({
       containerEl: containerRef.current,
       url: WORD_URL,
-      mode: "question"
+      mode: "question",
+    })
+    new WordMap({
+      containerEl: containerRefEdit.current,
+      url: WORD_URL,
+      mode: "question",
+      props: {
+        operation: "edit"
+      }
     })
 
     return () => {
       containerRef?.current?.removeChild(containerRef.current.children[ 0 ])
+      containerRefEdit?.current?.removeChild(containerRefEdit.current.children[ 0 ])
     }
   }, [])
 
   return (
-    <>
-      <div className="code-snippet">
-        <SyntaxHighlighter language="javascript" style={dark}>
-          {snippet}
-        </SyntaxHighlighter>
-      </div>
-      <div className="wordmap-container" ref={containerRef}></div>
-    </>
+    <div className='container'>
+      <section className="left">
+        <div className="code-snippet">
+          <SyntaxHighlighter language="javascript" style={dark}>
+            {snippet}
+          </SyntaxHighlighter>
+        </div>
+        <div className="wordmap-container" ref={containerRef}></div>
+      </section>
+      <section className="right">
+        <div className="code-snippet">
+          <SyntaxHighlighter language="javascript" style={dark}>
+            {editSnippet}
+          </SyntaxHighlighter>
+        </div>
+        <div className="wordmap-container" ref={containerRefEdit}></div>
+      </section>
+    </div>
   )
 }

examples/react-wordmap-demo/src/word/index.js

@@ -24,13 +24,13 @@ export const WordConstellation = () => {
 
 
   return (
-    <>
+    <section>
       <div className="code-snippet">
         <SyntaxHighlighter language="javascript" style={dark}>
           {snippet}
         </SyntaxHighlighter>
       </div>
       <div className="wordmap-container" ref={containerRef}></div>
-    </>
+    </section>
   )
 }

src/graph.js

@@ -12,18 +12,20 @@ export default class Graph {
    * @param {String} wf - the wordform or Word for the current constellation
    * @param {Object} stage - the createjs.Stage instance created during the Wordmap _buildStage() call
    * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
+   * @param {String} operation - used to determine the constellaton operation in case of question mode, defaults to 'view' which is used in questions page and 'edit' to shows tooltip on synset nodes
    * @param {Boolean} animate - Used to turn animation on/off. Default is on
    * @param {Function} fetchConstellationData - The method for fetching constellation data used in the Constellation component. Used as a CB in the classes
    * @param {Object} wordmap - The instance of the Wordmap class that instantiates this graph
    */
-  constructor(wordForm, stage, mode, animate, fetchConstellationData, wordmap) {
+  constructor(wordForm, stage, mode, animate, fetchConstellationData, wordmap, operation) {
     this.ANIMATION_DURATION = 750;
     this.CHANGE_GRAPH_ANIMATION_DURATION = this.ANIMATION_DURATION * 1.5;
     this.CURRENT = null;
 
     this.wordForm = wordForm;
     this.stage = stage;
     this.mode = mode != null ? mode : 'word';
+    this.operation = operation != null ? operation : 'view';
     this.animate = animate != null ? animate : true;
     this.nodes = [];
     this.links = [];
@@ -93,7 +95,8 @@ export default class Graph {
           this.stage,
           type,
           jsonNode.l,
-          this.mode
+          this.mode,
+          this.operation
         );
       } else {
         node = new LabelNode(

src/index.js

@@ -132,7 +132,8 @@ export default class Wordmap {
       this.mode,
       this.animate,
       this.fetchCallback,
-      this
+      this,
+      this.props.operation
     );
     // the draw call is what actually puts everything in place and displays the Constellation for the given word
     this.currentGraph.draw(this.constellationJson);

src/synsetnode.js

@@ -15,8 +15,9 @@ export default class SynsetNode extends Node {
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn on
    * @param {String} type - either 'label' or 'ss' (synset) to signify what type of node this is
    * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
+   * @param {String} operation - used to determine operation like read or edit use in case of mode as question to show the tooltip on synsetnode.
    */
-  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode) {
+  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode, operation) {
     super(id, type, graph);
     this.l = l;
     this.defn = defn;
@@ -25,6 +26,7 @@ export default class SynsetNode extends Node {
     this.color = this._color();
     this.graph = graph;
     this.mode = mode;
+    this.operation = operation;
     this._stage = stage;
     this._buildBubble();
     this._setupHandlers();
@@ -60,7 +62,10 @@ export default class SynsetNode extends Node {
   // Sets up the Node event handlers by binding them to the current SynsetNode scope. We do this so that 'this' references
   // the target SynsetNode during events
   _setupHandlers() {
-    if (this.mode === 'word') {
+    if (this.mode === 'word' ||
+      (this.mode === 'question'
+        && this.operation === 'edit')
+    ) {
       this.b.cursor = 'pointer';
       // necessary so the event handlers have access to the class context
       this._handleRollout = this._handleRollout.bind(this);

types/graph.d.ts

@@ -6,17 +6,19 @@ export default class Graph {
      * @param {String} wf - the wordform or Word for the current constellation
      * @param {Object} stage - the createjs.Stage instance created during the Wordmap _buildStage() call
      * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
+     * @param {String} operation - used to determine the constellaton operation in case of question mode, defaults to 'view' which is used in questions page and 'edit' to shows tooltip on synset nodes
      * @param {Boolean} animate - Used to turn animation on/off. Default is on
      * @param {Function} fetchConstellationData - The method for fetching constellation data used in the Constellation component. Used as a CB in the classes
      * @param {Object} wordmap - The instance of the Wordmap class that instantiates this graph
      */
-    constructor(wordForm: any, stage: any, mode: string, animate: boolean, fetchConstellationData: Function, wordmap: any);
+    constructor(wordForm: any, stage: any, mode: string, animate: boolean, fetchConstellationData: Function, wordmap: any, operation: string);
     ANIMATION_DURATION: number;
     CHANGE_GRAPH_ANIMATION_DURATION: number;
     CURRENT: any;
     wordForm: any;
     stage: any;
     mode: string;
+    operation: string;
     animate: boolean;
     nodes: any[];
     links: any[];
@@ -52,7 +54,7 @@ export default class Graph {
      */
     _buildLayout(rootNode: any): any;
     _drawRings(): any[];
-    show(): number | any[];
+    show(): any[] | NodeJS.Timeout;
     _jitter(): any[];
     _labelNodesByLevel(): {};
     _coordinatesFromAngle(l: any, theta: any): {

types/synsetnode.d.ts

@@ -11,14 +11,16 @@ export default class SynsetNode extends Node {
      * @param {Object} stage - A reference to the Stage object that Nodes are drawn on
      * @param {String} type - either 'label' or 'ss' (synset) to signify what type of node this is
      * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
+     * @param {String} operation - used to determine operation like read or edit use in case of mode as question to show the tooltip on synsetnode.
      */
-    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any, mode: string);
+    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any, mode: string, operation: string);
     l: any;
     defn: string;
     partOfSpeech: string;
     bubbleRadius: number;
     color: string;
     mode: string;
+    operation: string;
     _stage: any;
     distance_from_center(): any;
     setupAnimation(): any;