Merge pull request #9 from membean/fix/disable-hover-on-node-in-quest…

…ion-mode

Fix : Disable hover on synest node & link in question mode

README.md

@@ -1,4 +1,4 @@
-d#
+#
 
 <p align="center"> 
   <img src="./wordmap.png" width="30%" title="Wordmap Demo" alt="Wordmap Demo">
@@ -11,12 +11,12 @@ The Wordmap is a tool that enhances vocabulary learning through visual organizat
 # Install the package using yarn.
 
 ```
-yarn add 'wordmap@https://github.com/membean/wordmap.git#v0.0.6'
+yarn add 'wordmap@https://github.com/membean/wordmap.git#v0.0.7'
  ```
 # Install the package using npm
 
 ```
-npm install 'wordmap@https://github.com/membean/wordmap.git#v0.0.6'
+npm install 'wordmap@https://github.com/membean/wordmap.git#v0.0.7'
 ```
 
 >  Note: you must have access to Wordmap repository in order to install it as node package / module.

bundle/bundle.js

@@ -89,14 +89,14 @@ class Graph {
       pos = jsonNode.p;
       defn = jsonNode.d;
       if (type === 'ss') {
-        node = new _synsetnode.default(id, defn, pos, this, this.stage, type, jsonNode.l);
+        node = new _synsetnode.default(id, defn, pos, this, this.stage, type, jsonNode.l, this.mode);
       } else {
         node = new _labelnode.default(id, this, this.mode, this.fetchCallback, this.wordmap, type);
       }
 
       // if jsonNode.l === 1 then the word is an antonym and we pass true to the link constructor so that the Link class
       // can create the link in red
-      link = jsonNode.l === 1 ? new _link.default(parentNode, node, true, this.stage) : new _link.default(parentNode, node, false, this.stage);
+      link = jsonNode.l === 1 ? new _link.default(parentNode, node, true, this.stage, this.mode) : new _link.default(parentNode, node, false, this.stage, this.mode);
       this.nodes.push(node);
       this.links.push(link);
       if (jsonNode.children) {
@@ -705,12 +705,14 @@ class Link extends createjs.Container {
    * @param {Object} n2 - The Node to be linked TO
    * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(n1, n2, isAntonym, stage) {
+  constructor(n1, n2, isAntonym, stage, mode) {
     super();
     this.n1 = n1;
     this.n2 = n2;
     this._stage = stage;
+    this.mode = mode;
     this.hoverable = n1.type === 'ss' && n2.type === 'ss';
     this.isAntonym = isAntonym;
     this.initialize();
@@ -773,12 +775,15 @@ class Link extends createjs.Container {
   // Sets up the rollover/rollout event handlers by binding them to the current links scope so that 'this' references
   // the current Link object in the event handlers
   _setupHandler() {
-    this.line.cursor = 'hand';
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-    this.line.addEventListener('rollover', this._handleRollover);
-    this.line.addEventListener('rollout', this._handleRollout);
+    // incase of word mode only handler will be applicable.
+    if (this.mode === 'word') {
+      this.line.cursor = 'hand';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
+      this.line.addEventListener('rollover', this._handleRollover);
+      this.line.addEventListener('rollout', this._handleRollout);
+    }
   }
   _handleRollover() {
     this.line.graphics.clear();
@@ -1027,15 +1032,17 @@ class SynsetNode extends _node.default {
    * @param {Object} graph - the Graph instance that the RootNode is being added to
    * @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
    */
-  constructor(id, defn, partOfSpeech, graph, stage, type, l) {
+  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode) {
     super(id, type, graph);
     this.l = l;
     this.defn = defn;
     this.partOfSpeech = partOfSpeech;
     this.bubbleRadius = 5;
     this.color = this._color();
     this.graph = graph;
+    this.mode = mode;
     this._stage = stage;
     this._buildBubble();
     this._setupHandlers();
@@ -1066,13 +1073,14 @@ class SynsetNode extends _node.default {
   // 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() {
-    this.b.cursor = 'pointer';
-
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-    this.b.addEventListener('rollover', this._handleRollover);
-    return this.b.addEventListener('rollout', this._handleRollout);
+    if (this.mode === 'word') {
+      this.b.cursor = 'pointer';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
+      this.b.addEventListener('rollover', this._handleRollover);
+      return this.b.addEventListener('rollout', this._handleRollout);
+    }
   }
 
   /**

examples/react-wordmap-demo/package.json

@@ -11,7 +11,7 @@
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "web-vitals": "^2.1.0",
-    "wordmap": "https://github.com/membean/wordmap.git#v0.0.4"
+    "wordmap": "https://github.com/membean/wordmap.git#v0.0.7"
   },
   "scripts": {
     "start": "react-scripts start",

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

@@ -12,14 +12,14 @@ function App() {
       <header className="App-header">
         <h2>Wordmap</h2>
         <div>
-          <button onClick={() => setIsQuestion(!isQuestion)}>Word Constellation</button>
-          <button onClick={() => setIsQuestion(!isQuestion)}>Question Constellation</button>
+          <button onClick={() => setIsQuestion(false)}>Word Constellation</button>
+          <button onClick={() => setIsQuestion(true)}>Question Constellation</button>
         </div>
       </header>
       <div>
         <div>
           <section>
-            {isQuestion ?
+            {!isQuestion ?
               <WordConstellation /> : <QuestionConstellation />
             }
           </section>

package.json

@@ -9,7 +9,8 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "bundle": "browserify ./src/index.js -p esmify > ./bundle/bundle.js"
+    "bundle": "browserify ./src/index.js -p esmify > ./bundle/bundle.js",
+    "types": "tsc --project tsconfig.json"
   },
   "dependencies": {
     "browserify": "^17.0.0",

src/graph.js

@@ -92,7 +92,8 @@ export default class Graph {
           this,
           this.stage,
           type,
-          jsonNode.l
+          jsonNode.l,
+          this.mode
         );
       } else {
         node = new LabelNode(
@@ -109,8 +110,8 @@ export default class Graph {
       // can create the link in red
       link =
         jsonNode.l === 1
-          ? new Link(parentNode, node, true, this.stage)
-          : new Link(parentNode, node, false, this.stage);
+          ? new Link(parentNode, node, true, this.stage, this.mode)
+          : new Link(parentNode, node, false, this.stage, this.mode);
       this.nodes.push(node);
       this.links.push(link);
       if (jsonNode.children) {

src/link.js

@@ -57,12 +57,14 @@ export default class Link extends createjs.Container {
    * @param {Object} n2 - The Node to be linked TO
    * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
    * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+   * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
    */
-  constructor(n1, n2, isAntonym, stage) {
+  constructor(n1, n2, isAntonym, stage, mode) {
     super();
     this.n1 = n1;
     this.n2 = n2;
     this._stage = stage;
+    this.mode = mode;
     this.hoverable = n1.type === 'ss' && n2.type === 'ss';
     this.isAntonym = isAntonym;
     this.initialize();
@@ -124,13 +126,16 @@ export default class Link extends createjs.Container {
   // Sets up the rollover/rollout event handlers by binding them to the current links scope so that 'this' references
   // the current Link object in the event handlers
   _setupHandler() {
-    this.line.cursor = 'hand';
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
+    // incase of word mode only handler will be applicable.
+    if (this.mode === 'word') {
+      this.line.cursor = 'hand';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
 
-    this.line.addEventListener('rollover', this._handleRollover);
-    this.line.addEventListener('rollout', this._handleRollout);
+      this.line.addEventListener('rollover', this._handleRollover);
+      this.line.addEventListener('rollout', this._handleRollout); 
+    }
   }
 
   _handleRollover() {

src/synsetnode.js

@@ -14,23 +14,25 @@ export default class SynsetNode extends Node {
    * @param {Object} graph - the Graph instance that the RootNode is being added to
    * @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
    */
-  constructor(id, defn, partOfSpeech, graph, stage, type, l) {
+  constructor(id, defn, partOfSpeech, graph, stage, type, l, mode) {
     super(id, type, graph);
     this.l = l;
     this.defn = defn;
     this.partOfSpeech = partOfSpeech;
     this.bubbleRadius = 5;
     this.color = this._color();
     this.graph = graph;
+    this.mode = mode;
     this._stage = stage;
     this._buildBubble();
     this._setupHandlers();
   }
 
   // returns the distance from the center of the graph
   distance_from_center() {
-    return this.graph.ringRadius[this.level];
+    return this.graph.ringRadius[ this.level ];
   }
 
   // sets up the animation of the SynsetNode
@@ -58,14 +60,15 @@ 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() {
-    this.b.cursor = 'pointer';
+    if (this.mode === 'word') {
+      this.b.cursor = 'pointer';
+      // necessary so the event handlers have access to the class context
+      this._handleRollout = this._handleRollout.bind(this);
+      this._handleRollover = this._handleRollover.bind(this);
 
-    // necessary so the event handlers have access to the class context
-    this._handleRollout = this._handleRollout.bind(this);
-    this._handleRollover = this._handleRollover.bind(this);
-
-    this.b.addEventListener('rollover', this._handleRollover);
-    return this.b.addEventListener('rollout', this._handleRollout);
+      this.b.addEventListener('rollover', this._handleRollover);
+      return this.b.addEventListener('rollout', this._handleRollout);
+    }
   }
 
   /**

tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
-    "allowJs": true
+    "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "types"
   },
+  "include": ["src/**/*"]
 }

types/index.d.ts

@@ -15,6 +15,7 @@ export default class Wordmap {
      *    [Required] - In case of Interactive mode of constellation like forward backword mode.
      * @param {Function} fetchCallback - The callback method to fetch data for constellation, callback trigger when click on label.  which accepts 2 args like word & callback with data to renrender graph.
      *    [Required] - In case of Interactive mode of constellation like forward backword mode.
+     *    Default will be empty function.
      * @param {Object} props [Optional] - The Constellation component props
      *    Default value is {}
      */

types/link.d.ts

@@ -6,11 +6,13 @@ export default class Link {
      * @param {Object} n2 - The Node to be linked TO
      * @param {Boolean} isAntonym - is the Link for an Antonym (These links are a different color from the others)
      * @param {Object} stage - A reference to the Stage object that Nodes are drawn to
+     * @param {String} mode - used to determine the constellaton mode, defaults to 'word' which is used for WordPage
      */
-    constructor(n1: any, n2: any, isAntonym: boolean, stage: any);
+    constructor(n1: any, n2: any, isAntonym: boolean, stage: any, mode: string);
     n1: any;
     n2: any;
     _stage: any;
+    mode: string;
     hoverable: boolean;
     isAntonym: boolean;
     line: any;

types/synsetnode.d.ts

@@ -10,13 +10,15 @@ export default class SynsetNode extends Node {
      * @param {Object} graph - the Graph instance that the RootNode is being added to
      * @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
      */
-    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any);
+    constructor(id: string, defn: string, partOfSpeech: string, graph: any, stage: any, type: string, l: any, mode: string);
     l: any;
     defn: string;
     partOfSpeech: string;
     bubbleRadius: number;
     color: string;
+    mode: string;
     _stage: any;
     distance_from_center(): any;
     setupAnimation(): any;