set up js files for import/export

Author: hmsklee

.gitignore

@@ -1,3 +1,7 @@
+# build files
+build/
+dist/
+
 # npm related
 
 /node_modules/*

index.html

@@ -52,10 +52,5 @@
 <script src="libs/jscolor.min.js"></script>
 <script src="dist/tag/js/tag.min.js"></script>
 
-<script type="text/javascript">
-  Main.init();
-</script>
-
-
 </body>
 </html>

src/js/components/link.js

@@ -1,3 +1,7 @@
+import WordTag from './tag.js';
+import Word from './word.js';
+import * as draggable from 'svg.draggable.js';
+
 class Link {
     constructor(eventId, trigger, args, reltype, top = true) {
       this.eventId = eventId;
@@ -572,3 +576,4 @@ class Link {
       return this.reltype || this.trigger.reltype || (this.trigger.tag && this.trigger.tag.val) || this.trigger.val;
     }
 }
+module.exports = Link;

src/js/components/row.js

@@ -1,3 +1,5 @@
+import * as draggable from 'svg.draggable.js';
+
 class Row {
   constructor(svg, idx = 0, ry = 0, rh = 100) {
     this.idx = idx;
@@ -139,3 +141,4 @@ class Row {
     return 60 + this.maxSlot * 15;
   }
 }
+module.exports = Row;

src/js/components/tag.js

@@ -105,3 +105,4 @@ class WordTag {
     return this.position ? -28 : 20;
   }
 }
+module.exports = WordTag;

src/js/components/word.js

@@ -1,3 +1,6 @@
+import WordTag from './tag.js';
+import * as draggable from 'svg.draggable.js';
+
 class Word {
     constructor(val, idx, tag, svg, row) {
       this.eventIds = [];
@@ -172,3 +175,4 @@ class Word {
       return this.svgText.length();
     }
 }
+module.exports = Word;

src/js/components/wordcluster.js

@@ -180,3 +180,4 @@ class WordCluster {
     return -28;
   }
 }
+module.exports = WordCluster;

src/js/main.js

@@ -1,8 +1,14 @@
+import * as SVG from 'svg.js';
 import Parser from './parser.js';
+import TreeLayout from './treelayout.js';
+import ymlToJson from './ymljson.js';
 import LabelManager from './managers/labelmanager.js';
 import RowManager from './managers/rowmanager.js';
 import Taxonomy from './managers/taxonomy.js';
 import Tooltip from './managers/tooltip.js';
+import Word from './components/word.js';
+import WordCluster from './components/wordcluster.js';
+import Link from './components/link.js';
 
 const Main = (function() {
   // classes
@@ -33,10 +39,9 @@ const Main = (function() {
    */
   function init() {
     // setup
-    body = document.body.getBoundingClientRect();
-    svg = SVG('main')
+    let body = document.body.getBoundingClientRect();
+    svg = new SVG.Doc('main')
       .size(body.width, window.innerHeight - body.top - 10);
-
     tooltip = new Tooltip('tooltip', svg);
     parser  = new Parser();
     rm      = new RowManager(svg);
@@ -317,7 +322,6 @@ const Main = (function() {
       w.setSyntaxId(token.id);
       return w;
     });
-    console.log('words',words);
     const clusters = [];
 
     [].concat(parser.data.entities, parser.data.triggers).forEach(el => {
@@ -360,7 +364,7 @@ const Main = (function() {
     parser.data.events.forEach(evt => {
       // create a link between the trigger and each of its args
       const trigger = entities.find(word => word.eventIds.indexOf(evt.trigger) > -1);
-      const args = evt.args.map(searchForEntity);
+      const args = evt.arguments.map(searchForEntity);
 
       // create link
       const link = new Link(evt.id, trigger, args);
@@ -370,7 +374,7 @@ const Main = (function() {
     });
 
     parser.data.relations.forEach(rel => {
-      const args = rel.args.map(searchForEntity);
+      const args = rel.arguments.map(searchForEntity);
       // create link
       const link = new Link(rel.id, null, args, rel.type);
 
@@ -382,7 +386,7 @@ const Main = (function() {
     parser.data.syntax.forEach(syn => {
       // create a link between the trigger and each of its args
       const trigger = entities.find(word => word.syntaxId === syn.trigger);
-      const args = syn.args.map(arg => {
+      const args = syn.arguments.map(arg => {
         let anchor = words.find(w => w.syntaxId === arg.id);
         return { anchor, type: arg.type };
       });
@@ -491,6 +495,7 @@ const Main = (function() {
   //   document.getElementById('pos--all').checked = true;
   // }
 
+
   // export public functions
   return {
     init,
@@ -500,4 +505,4 @@ const Main = (function() {
 
 })();
 
-Main.init();
+Main.init();

src/js/managers/index.js

@@ -1,4 +1,4 @@
-const LabelManager = (function() {
+module.exports = (function() {
   let _svg;
   let activeObject = null;
   let string = null;